ソースを参照

fix: 全局样式适配浏览器

周玉环 6 日 前
コミット
9d0fb2f832
47 ファイル変更315 行追加170 行削除
  1. 2 2
      xinkeaboard-web/assets/language/zh.js
  2. 2 0
      xinkeaboard-web/assets/style/base.scss
  3. 1 1
      xinkeaboard-web/assets/style/category.scss
  4. 2 1
      xinkeaboard-web/assets/style/contact.scss
  5. 20 10
      xinkeaboard-web/assets/style/goodsDetail.scss
  6. 13 0
      xinkeaboard-web/assets/style/member/collect.scss
  7. 1 0
      xinkeaboard-web/assets/style/member/footprint.scss
  8. 1 1
      xinkeaboard-web/assets/style/register.scss
  9. 5 0
      xinkeaboard-web/assets/style/reset.scss
  10. 8 3
      xinkeaboard-web/assets/style/store/contac-about.scss
  11. 26 8
      xinkeaboard-web/assets/style/store/goodsList.scss
  12. 12 13
      xinkeaboard-web/assets/style/store/storeHeader.scss
  13. 4 0
      xinkeaboard-web/assets/style/storeList.scss
  14. 2 2
      xinkeaboard-web/components/CategorySortTop.vue
  15. 2 1
      xinkeaboard-web/components/MemberLeftNav.vue
  16. 1 0
      xinkeaboard-web/components/MemberTitle.vue
  17. 3 1
      xinkeaboard-web/components/NavTopBar.vue
  18. 3 3
      xinkeaboard-web/components/SldCommonEmpty.vue
  19. 3 2
      xinkeaboard-web/components/SldHomeTopSearch.vue
  20. 2 4
      xinkeaboard-web/components/Store/HeaderCat.vue
  21. 2 4
      xinkeaboard-web/components/login/Email.vue
  22. 2 4
      xinkeaboard-web/components/login/Phone.vue
  23. 15 10
      xinkeaboard-web/components/register/RegisterAccount.vue
  24. 6 1
      xinkeaboard-web/components/register/RegisterMail.vue
  25. 7 2
      xinkeaboard-web/components/register/RegisterPhone.vue
  26. 3 2
      xinkeaboard-web/components/register/RegisterSuccess.vue
  27. 16 13
      xinkeaboard-web/components/retrieve/RetrievePassword.vue
  28. 24 24
      xinkeaboard-web/components/retrieve/RetrievePwdByPhone.vue
  29. 10 2
      xinkeaboard-web/layouts/member.vue
  30. 12 0
      xinkeaboard-web/nuxt.config.ts
  31. 1 0
      xinkeaboard-web/package.json
  32. 1 1
      xinkeaboard-web/pages/article.vue
  33. 1 1
      xinkeaboard-web/pages/goods/Category.vue
  34. 6 2
      xinkeaboard-web/pages/goods/detail/[id].vue
  35. 1 1
      xinkeaboard-web/pages/home/about.vue
  36. 4 4
      xinkeaboard-web/pages/home/contact.vue
  37. 1 1
      xinkeaboard-web/pages/home/topic.vue
  38. 1 1
      xinkeaboard-web/pages/index.vue
  39. 5 0
      xinkeaboard-web/pages/login.vue
  40. 16 11
      xinkeaboard-web/pages/member/collect.vue
  41. 7 3
      xinkeaboard-web/pages/member/footprint.vue
  42. 6 2
      xinkeaboard-web/pages/member/info.vue
  43. 3 3
      xinkeaboard-web/pages/register.vue
  44. 4 4
      xinkeaboard-web/pages/store/contact/[contact].vue
  45. 30 21
      xinkeaboard-web/pages/store/goods/[...slug].vue
  46. 1 1
      xinkeaboard-web/pages/store/list/[...slug].vue
  47. 17 0
      xinkeaboard-web/pnpm-lock.yaml

+ 2 - 2
xinkeaboard-web/assets/language/zh.js

@@ -873,8 +873,8 @@ export const lang_zn = {
       '请确认密码': '请确认密码',
       '两次输入的密码不一致': '两次输入的密码不一致',
       '注册成功': '注册成功',
-      's内跳转到登录页': ' 秒内跳转到登录页',
-      '秒': '',
+      's内跳转到登录页': ' 秒内跳转到登录页 ',
+      '秒': '',
       '您已注册成功': '您已注册成功,',
     //   '您已注册成功, 5s内跳转到登录页': '您已注册成功, 5s内跳转到登录页',
       '立即登录': '立即登录',

+ 2 - 0
xinkeaboard-web/assets/style/base.scss

@@ -398,6 +398,8 @@ $colorMain: #e2231a !default; //主色、文字选中、搜索
 
 /* 全局空图 start */
 .sld_common_empty {
+  height: 100%;
+  justify-content: center;
   margin: 0 auto !important;
 
   .empty_img {

+ 1 - 1
xinkeaboard-web/assets/style/category.scss

@@ -214,7 +214,7 @@ i {
           width: max-content;
           // padding-top: 10px;
           font-size: 12px;
-          font-weight: bold;
+          // font-weight: bold;
           color: $colorMain;
           line-height: 38px;
         }

+ 2 - 1
xinkeaboard-web/assets/style/contact.scss

@@ -17,7 +17,8 @@
                 height: 156px;
                 margin-bottom: 10px;
                 img{
-                    width: 100px;
+                    width: 52px;
+                    height: 40px;
                     object-fit: contain;
                 }
                 p{

+ 20 - 10
xinkeaboard-web/assets/style/goodsDetail.scss

@@ -1,5 +1,7 @@
 .sld_goods_detail {
+    min-height: 400px;
     width: 100%;
+    background-color: #F6F8FA;
 
     .contain_con {
         width: 100%;
@@ -219,7 +221,7 @@
     }
 
     .goods_detail_content {
-        width: 100%;
+        width: 1440px;
         margin: 0 auto;
 
         // 商品所属分类 ,联系客服,关注店铺 start
@@ -231,7 +233,7 @@
             background: #f8f8f8;
 
             .goods_about {
-                width: 1200px;
+                width: 100%;
                 height: 100%;
                 margin: 0 auto;
 
@@ -336,13 +338,15 @@
         // 商品所属分类 ,联系客服,关注店铺 end
         // 商品主要信息 start
         .main_con {
-            width: 1200px;
-            margin: 20px auto 0;
+            width: 100%;
+            // margin: 20px auto 0;
             background: #fff;
 
             .goods_des {
                 display: flex;
+                width: 100%;
                 margin-bottom: 30px;
+                padding: 10px;
 
                 .goods_des_left {
                     margin-right: 20px;
@@ -406,6 +410,7 @@
                                 background-size: contain;
                                 background-repeat: no-repeat;
                                 background-position: center;
+                                background-size: cover;
 
                                 &.skeleton_default_image {
                                     background: $colorSkeleton;
@@ -529,11 +534,13 @@
                 }
 
                 .m_item_inner {
-                    float: left;
+                    flex: 1;
+                    width: 100%;
+                    overflow: auto;
 
                     .item_info {
                         position: relative;
-                        width: 630px;
+                        width: 100%;
                         padding-bottom: 20px;
                     }
 
@@ -579,7 +586,7 @@
                     }
 
                     .summary {
-                        width: 630px;
+                        // width: 630px;
                         // min-height: 160px;
                         background: rgb(3, 110, 184, 0.1);
                         padding: 20px 20px 20px;
@@ -1706,6 +1713,7 @@
 
     // 看了又看 start
     .more_goods {
+        width: 200px;
         margin-left: 24px;
 
         .more_goods_title {
@@ -1795,14 +1803,14 @@
 
     // 店铺信息 start
     .store_info {
-        width: 250px;
+        width: 300px;
         background: #ffffff;
         border: 1px solid #eee;
         border-radius: 2px;
         padding-bottom: 15px;
 
         .store_info_title {
-            width: 248px;
+            // width: 248px;
             height: 48px;
             background: #f9f9f9;
             border-radius: 2px 2px 0 0;
@@ -2077,12 +2085,14 @@
 
     // 商品详情 评价 商品服务 店铺热销  start
     .goods_description {
+        flex: 1;
+        width: 100%;
         margin-left: 15px;
         border: 1px solid #eee;
         border-radius: 3px;
 
         .goods_description_title {
-            width: 934px;
+            // width: 934px;
             height: 40px;
             background: #f8f8f8;
 

+ 13 - 0
xinkeaboard-web/assets/style/member/collect.scss

@@ -58,15 +58,25 @@ i {
 }
 
 .sld_collect_wrapper {
+    display: flex;
+    flex-direction: column;
     flex: 1;
     width: 100%;
 
     .wrapper_main {
+        flex: 1;
+        height: 100%;
+        overflow: hidden;
         width: 100%;
         padding-left: 10px;
         //font-family: "微软雅黑";
 
+        .sld_follow_m {
+            height: 100%;
+        }
+
         .sld_h3_wrap {
+            
             border: 1px solid #eeeeee;
             background: #ffffff;
 
@@ -155,10 +165,13 @@ i {
         }
 
         .fav_goods_list {
+            height: 100%;
             overflow: hidden;
             width: 100%;
 
             &>ul {
+                height: 100%;
+                overflow: auto;
                 margin-top: 5px;
             }
 

+ 1 - 0
xinkeaboard-web/assets/style/member/footprint.scss

@@ -76,6 +76,7 @@ a:visited {
     }
     .sld_footprint {
         //font-family: "微软雅黑";
+        height: 100%;
         overflow: hidden;
         padding: 0 17px 0 0;
         background-color: #fff;

+ 1 - 1
xinkeaboard-web/assets/style/register.scss

@@ -16,7 +16,7 @@
       .l_logo {
         height: 100%;
         cursor: pointer;
-        width: 200px;
+        width: 320px;
 
         .img {
           height: 100%;

+ 5 - 0
xinkeaboard-web/assets/style/reset.scss

@@ -34,3 +34,8 @@ html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ad
   margin: 0;
   padding: 0;
 }
+
+.container {
+  width: 100%;
+  height: 100%;
+}

+ 8 - 3
xinkeaboard-web/assets/style/store/contac-about.scss

@@ -46,8 +46,8 @@
 }
 
 .sr-comProfile-infos.infos-top {
-    float: left;
-    width: calc(100% - 390px);
+    flex: 1;
+    width: 100%;
 
     table {
         border-collapse: collapse;
@@ -72,8 +72,9 @@
 }
 
 .sr-comProfile-info-wrap {
+    display: flex;
+    width: 100%;
     margin-bottom: 20px;
-    display: block;
     overflow: hidden;
 }
 
@@ -91,6 +92,10 @@
     line-height: 2;
 }
 
+.sr-comProfile-intro .intro-cnt > span {
+    text-wrap-mode: wrap !important;
+}
+
 
 .sr-comProfile-intro.more .intro-cnt {
     display: block;

+ 26 - 8
xinkeaboard-web/assets/style/store/goodsList.scss

@@ -12,8 +12,9 @@
 }
 
 .sld_store_goods_list {
+  display: flex;
   position: relative;
-  width: 1210px;
+  width: 1440px;
   margin: 17px auto 0;
   font-size: 12px;
   color: #666666;
@@ -74,7 +75,7 @@
   }
 
   .left_cat_wrap {
-    width: 221px;
+    width: 338px;
     float: left;
     margin-right: 10px;
     border: 1px solid #dcdcdc;
@@ -85,7 +86,7 @@
 
       dt {
         position: relative;
-        width: 219px;
+        // width: 219px;
         line-height: 40px;
         background-color: #f9f9f9;
         font-size: 14px;
@@ -96,6 +97,7 @@
 
         a {
           color: #666;
+          cursor: pointer;
         }
 
         a:hover {
@@ -117,6 +119,7 @@
           color: #666;
           position: relative;
           padding-left: 28px;
+          cursor: pointer;
 
           &:hover {
             color: $colorMain;
@@ -180,7 +183,8 @@
   }
 
   .right_goods_wrap {
-    width: 979px;
+    flex: 1;
+    width: 100%;
     overflow: hidden;
     zoom: 1;
 
@@ -243,6 +247,9 @@
     }
 
     .sld_store_goods_list_wrap {
+      display: flex;
+      flex-wrap: wrap;
+      // justify-content: space-around;
       margin: 15px 0 40px;
       margin: 10px 0 0 0;
       overflow: hidden;
@@ -253,9 +260,11 @@
 
       li {
         border: 1px solid #fff;
-        margin: 0 13px 11px 0;
-        float: left;
-        width: 235px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 24.5%;
         padding: 29px 11px 20px 11px;
         box-sizing: border-box;
         height: 384px;
@@ -293,13 +302,21 @@
           padding: 0;
 
           em {
+            padding: 0 5px;
             font-size: 12px;
             font-style: normal;
+            overflow: hidden;
+            word-break: break-all;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
           }
         }
 
         .sld_goods_name_wrap {
-          height: 32px;
+          padding: 0 15px;
+          margin-top: 10px;
           overflow: hidden;
 
           .sld_goods_name {
@@ -322,6 +339,7 @@
         .promotion_tag {
           // clear: both;
           // overflow: hidden;
+          width: 100%;
           display: flex;
           align-items: center;
           justify-content: center;

+ 12 - 13
xinkeaboard-web/assets/style/store/storeHeader.scss

@@ -1,7 +1,7 @@
 @import "../theme.scss";
 
 .sld_store_header {
-  background: #F6F8FA;
+  background: #fff;
   .container {
     display: flex;
     align-items: center;
@@ -29,16 +29,9 @@
         position: relative;
 
         img {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          max-width: 100%;
-          max-height: 100%;
-          -webkit-transform: translate(-50%, -50%);
-          -moz-transform: translate(-50%, -50%);
-          -ms-transform: translate(-50%, -50%);
-          -o-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
         }
       }
 
@@ -239,6 +232,11 @@
         justify-content: center;
         align-items: center;
         overflow: hidden;
+
+        :deep(.el-select) {
+          width: 140px;
+          height: 100%;
+        }
         // padding: 0 20px;
       }
       form {
@@ -555,7 +553,7 @@
         // position: absolute;
         z-index: 3;
         height: 38px;
-        background-color: #fff;
+        background: #F6F8FA;
         cursor: pointer;
         font-weight: 400;
 
@@ -704,7 +702,7 @@
     // top: 8px;
   }
   .search_modle {
-    width: 282px;
+    width: 290px;
     position: absolute;
     right: 0;
     height: 100%;
@@ -717,6 +715,7 @@
       border: none;
       border: 1px solid #fff;
       padding-left: 5px;
+      font-size: 14px;
     }
     .search_input_button {
       display: block;

+ 4 - 0
xinkeaboard-web/assets/style/storeList.scss

@@ -105,10 +105,12 @@
             line-height: 28px;
             padding-left: 8px;
             outline: none;
+            font-size: 14px;
         }
         button {
             width: 75px;
             height: 32px;
+            font-size: 14px;
             background-color: $colorMain;
             color: #fff;
             border: none;
@@ -207,6 +209,8 @@
                 }
 
                 a {
+                    display: inline-block;
+                    width: 100%;
                     font-weight: 400;
                     font-size: 14px;
                     color: #282E30;

+ 2 - 2
xinkeaboard-web/components/CategorySortTop.vue

@@ -290,7 +290,7 @@ const toGoodsList = (item) => {
           float: left;
           width: 180px;
           padding: 5px 30px 0 0;
-          font-weight: 700;
+          // font-weight: 700;
           line-height: 2em;
           overflow: hidden;
           white-space: nowrap;
@@ -308,7 +308,7 @@ const toGoodsList = (item) => {
 
           .second {
             color: #666;
-            font: 700 12px/40px "microsoft yahei";
+            font-size:12px/40px "microsoft yahei";
             width: 100%;
             overflow: hidden;
             display: inline-block;

+ 2 - 1
xinkeaboard-web/components/MemberLeftNav.vue

@@ -152,7 +152,8 @@ const testIfShow = (nav_info) => {
 @import "@/assets/style/theme.scss";
 .sld_member_left_nav {
   float: left;
-  width: 240px;
+  min-width: 240px;
+  height: 515px;
   color: #666;
   font-size: 12px;
   /*font-family: MicrosoftYaHei;*/

+ 1 - 0
xinkeaboard-web/components/MemberTitle.vue

@@ -22,6 +22,7 @@ defineProps(["memberTitle","memberPath","memberTitleS"]);
 <style lang="scss">
 @import "@/assets/style/theme.scss";
 .member_title_breadcrumb{
+    padding-left: 20px;
    
     background: $colorK;
     .el-breadcrumb__item{

+ 3 - 1
xinkeaboard-web/components/NavTopBar.vue

@@ -179,6 +179,7 @@ const loginOut = async () => {
     padding: 0!important;
     background-color: transparent!important;
     line-height: 1;
+    font-size: 14px !important;
   }
 </style>
 
@@ -188,7 +189,7 @@ $colorMain: #e2231a !default; //主色、文字选中、搜索
 .header_wrap {
   width: 100%;
   height: 44px;
-  background-color: #fff;
+  background: #F6F8FA;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -293,6 +294,7 @@ $colorMain: #e2231a !default; //主色、文字选中、搜索
             font-weight: 400;
             font-size: 14px;
             color: #282E30;
+            
 
             &:hover {
               color: $colorMain;

+ 3 - 3
xinkeaboard-web/components/SldCommonEmpty.vue

@@ -10,9 +10,9 @@
   <div
     class="sld_common_empty flex_column_start_center"
     :style="{
-      width: totalWidth ? totalWidth + 'px' : '1210px',
-      height: totalHeight ? totalHeight + 'px' : '500px',
-      paddingTop: paddingTop ? paddingTop + 'px' : '120px',
+      // width: totalWidth ? totalWidth + 'px' : '1210px',
+      // height: totalHeight ? totalHeight + 'px' : '500px',
+      // paddingTop: paddingTop ? paddingTop + 'px' : '120px',
     }"
   >
     <img class="empty_img" src="/common_empty.png" />

+ 3 - 2
xinkeaboard-web/components/SldHomeTopSearch.vue

@@ -189,7 +189,7 @@ a:visited {
 
 .sld_home_top {
   width: 100%;
-  background: #F6F8FA;
+  background-color: #fff;
   // border-bottom: 1px solid #dbdbdb;
 }
 
@@ -217,6 +217,7 @@ a:visited {
       position: relative;
     }
 
+
     .container_header_box {
       width: 1440px;
       margin: 0 auto;
@@ -471,7 +472,7 @@ a:visited {
       }
 
       &.cart_icon_text_wrap {
-        background-color: #fff;
+        background: #F6F8FA;
         a {
           color: $colorMain;
           font-weight: bold;

+ 2 - 4
xinkeaboard-web/components/Store/HeaderCat.vue

@@ -1,6 +1,7 @@
 <!-- 店铺头部数据(条幅和店铺分类) @zjf-2020-01-04 -->
 <template>
   <div class="sld_store_header">
+    <NavTopBar></NavTopBar>
     <div class="container">
       <div class="ld left">
         <a href="javascript:void(0)" class="sld_img_center fl" @click="go_home">
@@ -50,8 +51,6 @@
              v-model="searchType" 
              placeholder="Select" 
              popper-class="select-search-type"
-             style="width: 140px; 
-             height: 100%"
             >
               <el-option
                 v-for="item in searchTypeOptions"
@@ -103,8 +102,6 @@
         </dl>
       </div>
     </div>
-        <NavTopBar></NavTopBar>
-
     <div class="sld_store_label_nav_wrap" v-if="showNav">
       <div class="sld_store_label_wrap">
         <img
@@ -453,6 +450,7 @@ const inputBlur = () => {
   justify-content: center;
   align-items: center;
   font-size: 12px;
+  white-space: nowrap;
   cursor: pointer;
 }
 

+ 2 - 4
xinkeaboard-web/components/login/Email.vue

@@ -13,13 +13,12 @@
         autocomplete="off"
       />
       <div data-type="userName" class="cancel" @click="clearInputVal('name')">
-        <span style="color: #bbb" class="iconfont icon-cuowu"></span>
+        <span class="iconfont icon-cuowu"></span>
       </div>
     </div>
     <div class="error">
       <span
         v-if="emailErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ emailErrorMsg }}
@@ -40,14 +39,13 @@
         class="cancel"
         @click="clearInputVal('password')"
       >
-        <span style="color: #bbb" class="iconfont icon-cuowu"></span>
+        <span  class="iconfont icon-cuowu"></span>
       </div>
     </div>
 
     <div class="error">
       <span
         v-if="errorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ errorMsg }}

+ 2 - 4
xinkeaboard-web/components/login/Phone.vue

@@ -13,13 +13,12 @@
         autocomplete="off"
       />
       <div data-type="userName" class="cancel" @click="clearInputVal('phone')">
-        <span style="color: #bbb" class="iconfont icon-cuowu"></span>
+        <span class="iconfont icon-cuowu"></span>
       </div>
     </div>
     <div class="error">
       <span
         v-if="phoneErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ phoneErrorMsg }}
@@ -40,14 +39,13 @@
         class="cancel"
         @click="clearInputVal('password')"
       >
-        <span style="color: #bbb" class="iconfont icon-cuowu"></span>
+        <span class="iconfont icon-cuowu"></span>
       </div>
     </div>
 
     <div class="error">
       <span
         v-if="errorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ errorMsg }}

+ 15 - 10
xinkeaboard-web/components/register/RegisterAccount.vue

@@ -11,12 +11,11 @@
         class="input"
       />
       <div data-type="userName" class="cancel" @click="clearInputVal">
-        <span style="color: #bbb" class="iconfont icon-cuowu"></span>
+        <span class="iconfont icon-cuowu"></span>
       </div>
       <div class="error">
         <span
           v-if="nameErrorMsg"
-          style="color: #e1251b; font-size: 14px"
           class="iconfont icon-jubao"
         ></span>
         {{ nameErrorMsg }}
@@ -36,10 +35,6 @@
       />
       <div class="cancel" @click="isShowPwd">
         <span
-          :style="{
-            color: '#bbb',
-            fontSize: showPwdFlag ? '20px' : '16px',
-          }"
           :class="{
             iconfont: true,
             'icon-bukejian11': !showPwdFlag,
@@ -70,10 +65,6 @@
       />
       <div class="cancel" @click="isShowConfirmPwd">
         <span
-          :style="{
-            color: '#bbb',
-            fontSize: showConfirmPwdFlag ? '20px' : '16px',
-          }"
           :class="{
             iconfont: true,
             'icon-bukejian11': !showConfirmPwdFlag,
@@ -297,6 +288,7 @@ watch(name, (val) => {
       height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
+      font-size: 14px;
     }
 
     &.code {
@@ -316,6 +308,15 @@ watch(name, (val) => {
     text-align: center;
     line-height: 46px;
     cursor: pointer;
+
+    .iconfont {
+      font-size: 16px;
+      color: '#bbb' !important;
+
+      &.show_pwd {
+        font-size: 20px;
+      }
+    }
   }
 
   .error {
@@ -324,6 +325,10 @@ watch(name, (val) => {
     color: #e2231a;
     height: 16px;
     line-height: 16px;
+
+    .iconfont {
+      font-size: 14px;
+    }
   }
 
   .submit {

+ 6 - 1
xinkeaboard-web/components/register/RegisterMail.vue

@@ -21,7 +21,6 @@
     <div class="error">
       <span
         v-if="emailErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ emailErrorMsg }}
@@ -312,6 +311,7 @@ const clearInputVal = (type) => {
       height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
+      font-size: 14px;
 
     }
     &.code {
@@ -339,6 +339,10 @@ const clearInputVal = (type) => {
     color: #e2231a;
     height: 16px;
     line-height: 16px;
+
+    .iconfont {
+      font-size: 14px;
+    }
   }
 
   .verify-code {
@@ -398,6 +402,7 @@ const clearInputVal = (type) => {
       border-right: none;
       height: 48px;
       padding: 0 0 0 10px;
+      font-size: 14px;
     }
 
     &-accept {

+ 7 - 2
xinkeaboard-web/components/register/RegisterPhone.vue

@@ -21,7 +21,6 @@
     <div class="error">
       <span
         v-if="phoneErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ phoneErrorMsg }}
@@ -52,7 +51,6 @@
     <div class="error">
       <span
         v-if="phoneCodeErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ phoneCodeErrorMsg }}
@@ -284,6 +282,8 @@ const clearInputVal = (type) => {
       height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
+      font-size: 14px;
+
     }
 
     &.code {
@@ -311,6 +311,10 @@ const clearInputVal = (type) => {
     color: #e2231a;
     height: 16px;
     line-height: 16px;
+
+    .iconfont {
+      font-size: 14px;
+    }
   }
 
   .verify-code {
@@ -344,6 +348,7 @@ const clearInputVal = (type) => {
       height: 48px;
       padding: 0 0 0 10px;
       width: 100%;
+      font-size: 14px;
     }
 
     &-accept {

+ 3 - 2
xinkeaboard-web/components/register/RegisterSuccess.vue

@@ -39,7 +39,7 @@ const countDown = () => {
   countDownM.value--;
   if (countDownM.value == 0) {
     clearTimeout(timeOutId.value);
-    goLogin()
+    // goLogin()
   } else {
     timeOutId.value = setTimeout(countDown, 1000);
   }
@@ -87,7 +87,8 @@ countDown();
     text-align: center;
 
     &__seconds {
-      color: $colorMain
+      color: $colorMain;
+      font-weight: bold;
     }
   }
 

+ 16 - 13
xinkeaboard-web/components/retrieve/RetrievePassword.vue

@@ -15,13 +15,12 @@
         class="cancel"
         @click="clearInputVal('memberEmail')"
       >
-        <span style="color: #bbb" class="iconfont icon-cuowu"></span>
+        <span class="iconfont icon-cuowu"></span>
       </div>
     </div>
     <div class="error">
       <span
         v-if="emailErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ emailErrorMsg }}
@@ -52,7 +51,6 @@
     <div class="error">
       <span
         v-if="emailCodeErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ emailCodeErrorMsg }}
@@ -71,10 +69,7 @@
       />
       <div class="cancel" @click="isShowPwd">
         <span
-          :style="{
-            color: '#bbb',
-            fontSize: showPwdFlag ? '20px' : '16px',
-          }"
+         
           :class="{
             iconfont: true,
             'icon-bukejian11': !showPwdFlag,
@@ -86,7 +81,6 @@
       <div class="error">
         <span
           v-if="checkPwdErrorMsg"
-          style="color: #e1251b; font-size: 14px"
           class="iconfont icon-jubao"
         ></span>
         {{ checkPwdErrorMsg }}
@@ -105,10 +99,6 @@
       />
       <div class="cancel" @click="isShowConfirmPwd">
         <span
-          :style="{
-            color: '#bbb',
-            fontSize: showConfirmPwdFlag ? '20px' : '16px',
-          }"
           :class="{
             iconfont: true,
             'icon-bukejian11': !showConfirmPwdFlag,
@@ -121,7 +111,6 @@
     <div class="error">
       <span
         v-if="checkErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ checkErrorMsg }}
@@ -391,6 +380,7 @@ watch(emailCode, (val) => {
       height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
+      font-size: 14px;
     }
 
     &.code {
@@ -410,6 +400,14 @@ watch(emailCode, (val) => {
     width: 44px;
     height: 46px;
     cursor: pointer;
+
+    .iconfont {
+      font-size: 16px;
+      
+      &.show_pwd {
+        font-size: 20px;
+      }
+    }
   }
 
   .error {
@@ -418,6 +416,10 @@ watch(emailCode, (val) => {
     color: #e2231a;
     height: 16px;
     line-height: 16px;
+
+    .iconfont {
+      font-size: 14px;
+    }
   }
 
   .verify-code {
@@ -451,6 +453,7 @@ watch(emailCode, (val) => {
       border-right: none;
       height: 48px;
       padding: 0 0 0 10px;
+      font-size: 14px;
     }
 
     &-accept {

+ 24 - 24
xinkeaboard-web/components/retrieve/RetrievePwdByPhone.vue

@@ -2,7 +2,7 @@
   <div class="center">
     <div class="item account">
       <span class="icon">
-        <img src="/login/User.png" alt="">
+        <img src="/login/User.png" alt="" />
       </span>
       <input
         type="text"
@@ -15,13 +15,12 @@
         class="cancel"
         @click="clearInputVal('memberMobile')"
       >
-        <span style="color: #bbb" class="iconfont icon-cuowu"></span>
+        <span class="iconfont icon-cuowu"></span>
       </div>
     </div>
     <div class="error">
       <span
         v-if="mobileErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ mobileErrorMsg }}
@@ -29,7 +28,7 @@
     <!-- 邮箱验证码 -->
     <div class="verify-code">
       <span class="verify-code-icon">
-        <img src="/login/Code.png" alt="">
+        <img src="/login/Code.png" alt="" />
       </span>
       <input
         type="text"
@@ -52,14 +51,13 @@
     <div class="error">
       <span
         v-if="mobileCodeErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ mobileCodeErrorMsg }}
     </div>
     <div class="item password">
       <span class="icon">
-        <img src="/login/Password.png" alt="">
+        <img src="/login/Password.png" alt="" />
       </span>
       <input
         :type="showPwdFlag ? 'text' : 'password'"
@@ -71,10 +69,6 @@
       />
       <div class="cancel" @click="isShowPwd">
         <span
-          :style="{
-            color: '#bbb',
-            fontSize: showPwdFlag ? '20px' : '16px',
-          }"
           :class="{
             iconfont: true,
             'icon-bukejian11': !showPwdFlag,
@@ -86,7 +80,6 @@
       <div class="error">
         <span
           v-if="checkPwdErrorMsg"
-          style="color: #e1251b; font-size: 14px"
           class="iconfont icon-jubao"
         ></span>
         {{ checkPwdErrorMsg }}
@@ -94,7 +87,7 @@
     </div>
     <div class="item confirm">
       <span class="icon">
-        <img src="/login/Password.png" alt="">
+        <img src="/login/Password.png" alt="" />
       </span>
       <input
         class="input"
@@ -105,10 +98,6 @@
       />
       <div class="cancel" @click="isShowConfirmPwd">
         <span
-          :style="{
-            color: '#bbb',
-            fontSize: showConfirmPwdFlag ? '20px' : '16px',
-          }"
           :class="{
             iconfont: true,
             'icon-bukejian11': !showConfirmPwdFlag,
@@ -121,7 +110,6 @@
     <div class="error">
       <span
         v-if="checkErrorMsg"
-        style="color: #e1251b; font-size: 14px"
         class="iconfont icon-jubao"
       ></span>
       {{ checkErrorMsg }}
@@ -192,7 +180,6 @@ const codeText = computed(() => {
     : L["register"]["获取验证码"];
 });
 
-
 //密码是否显示
 const isShowPwd = () => {
   showPwdFlag.value = !showPwdFlag.value;
@@ -391,6 +378,7 @@ watch(mobileCode, (val) => {
       height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
+      font-size: 14px;
     }
 
     &.code {
@@ -405,11 +393,19 @@ watch(mobileCode, (val) => {
     position: absolute;
     right: 0;
     top: 1px;
-    width: 44px;
-    height: 48px;
-    line-height: 48px;
     text-align: center;
+    line-height: 46px;
+    width: 44px;
+    height: 46px;
     cursor: pointer;
+
+    .iconfont {
+      font-size: 16px;
+
+      &.show_pwd {
+        font-size: 20px;
+      }
+    }
   }
 
   .error {
@@ -418,6 +414,10 @@ watch(mobileCode, (val) => {
     color: #e2231a;
     height: 16px;
     line-height: 16px;
+
+    .iconfont {
+      font-size: 14px;
+    }
   }
 
   .verify-code {
@@ -429,7 +429,7 @@ watch(mobileCode, (val) => {
     &-icon {
       display: flex;
       align-items: center;
-      justify-content: flex-end;     
+      justify-content: flex-end;
       width: 50px;
       height: 48px;
       border: 1px solid #e8e8e8;
@@ -451,7 +451,7 @@ watch(mobileCode, (val) => {
       border-right: none;
       height: 48px;
       padding: 0 0 0 10px;
-      width: 190px;
+      font-size: 14px;
     }
 
     &-accept {
@@ -497,4 +497,4 @@ watch(mobileCode, (val) => {
     }
   }
 }
-</style>
+</style>

+ 10 - 2
xinkeaboard-web/layouts/member.vue

@@ -1,7 +1,7 @@
 <template>
-    <div>
-        <SldHomeTopSearch/>
+    <div class="sld_member_main">
         <NavTopBar/>
+        <SldHomeTopSearch/>
         <div class="sld_member_main_content">
             <div class="container">
                 <MemberLeftNav></MemberLeftNav>
@@ -33,11 +33,19 @@ useHead({
 
 
 <style lang="scss" scoped>
+.sld_member_main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
     .sld_member_main_content {
+        display: flex;
         width: 100%;
+        align-items: center;
         background-color: #F7F7F7;
         border-top: 1px solid #EBEBEB;
         padding-bottom: 10px;
+        // margin: 0 auto;
 
         .container {
             display: flex;

+ 12 - 0
xinkeaboard-web/nuxt.config.ts

@@ -14,6 +14,18 @@ export default defineNuxtConfig({
     },
     preset: 'static'
   },
+  postcss: {
+    plugins: {
+      'postcss-px-to-viewport': {
+        viewportWidth: 1920, // 设计稿宽度
+        unitPrecision: 3,
+        viewportUnit: 'vw',
+        // selectorBlackList: ['ignore', 'no-vw'], // 不转换的类名
+        minPixelValue: 1,
+        mediaQuery: false,
+      }
+    }
+  },
   css: [
     "@/assets/style/variable.scss",
     "@/assets/style/reset.scss",

+ 1 - 0
xinkeaboard-web/package.json

@@ -18,6 +18,7 @@
   "devDependencies": {
     "cross-env": "^5.1.1",
     "nuxt": "^3.17.7",
+    "postcss-px-to-viewport": "^1.1.1",
     "rollup-plugin-visualizer": "^6.0.3",
     "unplugin-auto-import": "^19.3.0",
     "unplugin-element-plus": "^0.10.0",

+ 1 - 1
xinkeaboard-web/pages/article.vue

@@ -1,8 +1,8 @@
 <!-- 文章总页面 -->
 <template>
   <div>
-    <SldHomeTopSearch />
     <NavTopBar/>
+    <SldHomeTopSearch />
     <NavCatHeader />
     <div class="article_line"></div>
     <div class="headPath">

+ 1 - 1
xinkeaboard-web/pages/goods/Category.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <SldHomeTopSearch />
     <NavTopBar />
+    <SldHomeTopSearch />
     <NavCatHeader />
     <div class="bottom_line"></div>
     <div class="goods_sort">

+ 6 - 2
xinkeaboard-web/pages/goods/detail/[id].vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <StoreHeaderCat ref="headercat" @updateFllow="updateFllow" />
-    <div class="sld_goods_detail">
+    <div class="sld_goods_detail" v-loading="firstLoading">
       <!-- 内容区顶部固定 start -->
       <div class="contain_con" v-if="containCon">
         <div class="contain_content flex_row_center_center">
@@ -55,7 +55,7 @@
         </div>
       </div>
       <!-- 内容区顶部固定 end -->
-      <div class="goods_detail_content self_background" v-if="goodsDetail.data">
+      <div class="goods_detail_content self_background" v-if="!firstLoading && goodsDetail.data.state === 3">
         <!-- 商品所属分类 ,联系客服,关注店铺 start-->
         <div class="goods_about_con">
           <div class="goods_about flex_row_between_center">
@@ -991,6 +991,10 @@
         @closeLoingModal="closeEnquiryModal"
       />
 
+      <!-- <div v-if="goodsDetail.data.state !== 3">
+        sdsd
+      </div> -->
+
     </div>
   </div>
 </template>

+ 1 - 1
xinkeaboard-web/pages/home/about.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <SldHomeTopSearch />
     <NavTopBar />
+    <SldHomeTopSearch />
     <NavCatHeader />
     <div class="bottom_line"></div>
 

+ 4 - 4
xinkeaboard-web/pages/home/contact.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <SldHomeTopSearch />
     <NavTopBar />
+    <SldHomeTopSearch />
     <NavCatHeader />
     <div class="bottom_line"></div>
     <div class="self_background">
@@ -13,19 +13,19 @@
             </div>
 
             <div class="item">
-              <img src="/contactUsPng3.png" style="width: 52px; height: 40px;"/>
+              <img src="/contactUsPng3.png"/>
               <p class="t1">{{ L["邮箱"] }}</p>
               <p>{{ siteEmail }}</p>
             </div>
 
             <div class="item">
-              <img src="/contactUsPng2.png" style="width: 52px; height: 40px;"/>
+              <img src="/contactUsPng2.png"/>
               <p class="t1">{{ L["联系方式"] }}</p>
               <p>{{ sitePhone }}</p>
             </div>
 
             <div class="item">
-              <img src="/contactUsPng1.png" style="width: 52px; height: 40px;"/>
+              <img src="/contactUsPng1.png"/>
               <p class="t1">{{ L["公司地址"] }}</p>
               <p>{{ siteAddress }}</p>
             </div>

+ 1 - 1
xinkeaboard-web/pages/home/topic.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <SldHomeTopSearch />
     <NavTopBar/>
+    <SldHomeTopSearch />
     <NavCatHeader />
     <div class="bottom_line"></div>
     <div class="index">

+ 1 - 1
xinkeaboard-web/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <SldHomeTopSearch />
     <NavTopBar/>
+    <SldHomeTopSearch />
     <NavCatHeader />
     <!-- <div class="bottom_line"></div> -->
     <Home></Home>

+ 5 - 0
xinkeaboard-web/pages/login.vue

@@ -220,6 +220,7 @@ onMounted(() => {
       height: 48px;
       padding: 0 44px 0 60px;
       width: 431px;
+      font-size: 14px;
     }
 
     input::placeholder {
@@ -272,6 +273,10 @@ onMounted(() => {
     color: #e2231a;
     height: 16px;
     line-height: 16px;
+
+    .iconfont {
+      font-size: 14px;
+    }
   }
 
   .submit {

+ 16 - 11
xinkeaboard-web/pages/member/collect.vue

@@ -5,9 +5,9 @@
       style="padding-left: 20px"
     ></MemberTitle>
     <div class="wrapper_main myorder sld_collect">
-      <div class="sld_follow_m">
+      <div class="sld_follow_m" v-loading="loading">
         <!-- 选择横幅 -->
-        <div class="sld_h3_wrap clearfix">
+        <!-- <div class="sld_h3_wrap clearfix">
           <div class="sld_grade_nav fl">
             <a
               :class="1 === collectIndex ? 'on' : ''"
@@ -31,7 +31,6 @@
               v-show="optAct"
               @click="selectAll(true)"
             >
-              <!-- <img :src="collectGoodsChoose" alt="" /> -->
               <span ref="chooseWord">{{ L["全选"] }}</span>
             </div>
             <div
@@ -46,16 +45,15 @@
               v-show="optAct"
               @click="cancelCollect"
             >
-              <!-- <img src="/member/delete.png" alt="" /> -->
               <span>{{ L["取消收藏"] }}</span>
             </div>
             <button class="sld_option_btn fr" @click="optAct = !optAct">
               {{ L["管理"] }}
             </button>
           </div>
-        </div>
+        </div> -->
 
-        <div>
+       
           <!-- 收藏的商品 -->
           <div class="fav_goods_list" v-show="1 === collectIndex">
             <ul class="clearfix">
@@ -109,7 +107,7 @@
                 </div>
               </li>
               <SldCommonEmpty
-                v-show="!collectGoodsData.list.length"
+                v-show="!collectGoodsData.list.length && !loading"
                 totalWidth="1003"
                 :tip="L['暂无收藏商品']"
               />
@@ -142,7 +140,7 @@
                 </CollectStoreItem>
               </div>
               <SldCommonEmpty
-                v-show="!collectLength.commonLength"
+                v-show="!collectLength.commonLength && !loading"
                 totalWidth="1003"
                 :tip="L['暂无收藏店铺']"
               />
@@ -161,7 +159,6 @@
             </div>
 <!--            </div>-->
           </div>
-        </div>
       </div>
     </div>
   </div>
@@ -187,6 +184,7 @@ definePageMeta({
 });
 
 const route = useRoute();
+const loading = ref(false)
 const collectIndex = ref(1); //收藏的商品和店铺的切换标志
 const collectStoreIndex = ref(1); //切换收藏店铺 普通关注和特别关注 的标志值
 const collectGoodsData = reactive({
@@ -222,6 +220,7 @@ const params = reactive({
   });
 //获取数据,初始化
 const getInitData = (params) => {
+  loading.value = true;
   get("v3/member/front/followProduct/list", params).then((res) => {
     //获取收藏商品信息
     if (res.state == 200) {
@@ -230,10 +229,14 @@ const getInitData = (params) => {
       pageData.pageSize = res.data.pagination.pageSize;
       pageData.total = res.data.pagination.total;
     }
-  });
+  }).finally(() => {
+      loading.value = false;
+  })
 };
 
 const getStoreData = (paramsStore) => {
+    loading.value = true;
+
   get("v3/member/front/followStore/list",paramsStore).then((res) => {
     //获取收藏店铺信息
     if (res.state == 200) {
@@ -250,7 +253,9 @@ const getStoreData = (paramsStore) => {
       pageDataStore.pageSize = res.data.pagination.pageSize;
       pageDataStore.total = res.data.pagination.total;
     }
-  });
+  }).finally(() => {
+    loading.value = false;
+  })
 };
 
 

+ 7 - 3
xinkeaboard-web/pages/member/footprint.vue

@@ -9,7 +9,7 @@
     </div>
 
     <!-- 足迹 -->
-    <div class="sld_footprint">
+    <div class="sld_footprint" v-loading="loading">
       <div class="block">
         <el-timeline>
           <el-timeline-item
@@ -54,7 +54,7 @@
         </el-timeline>
       </div>
       <SldCommonEmpty
-        v-show="!looklog.log.length"
+        v-if="!looklog.log.length && !loading"
         totalWidth="1000"
         :tip="L['暂无足迹']"
         totalHeight="680"
@@ -101,6 +101,7 @@ definePageMeta({
   middleware: ["auth"],
 });
 const centerDialogVisible = ref(false)
+const loading = ref(false)
 
 const { proxy } = getCurrentInstance();
 const looklog = reactive({ log: [], page: {} });
@@ -109,12 +110,15 @@ const page = reactive({
     pageSize: 5,
 });
 const getInitData = () => {
+  loading.value = true;
   get("v3/member/front/productLookLog/list", page).then((res) => {
     if (res.state == 200) {
       looklog.log = res.data.list;
       looklog.page = res.data.pagination;
     }
-  });
+  }).finally(() => {
+    loading.value = false;
+  })
 };
 
 const follow = (productId, logic) => {

+ 6 - 2
xinkeaboard-web/pages/member/info.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="member_info_container">
     <MemberTitle :memberTitle="L['会员信息']"></MemberTitle>
-    <div class="member_info">
+    <div class="member_info" v-loading="loading">
       <table class="form_item">
         <tbody>
           <tr>
@@ -132,6 +132,7 @@ const memberTrueName = ref(""); //会员姓名
 const avatar = ref(""); //用户头像
 const tempSrc = ref("");
 const sex = ref(0); //性别
+const loading = ref(false);
 
 
 const changepic = (e) => {
@@ -178,6 +179,7 @@ const getObjectURL = (file) => {
 
 const getInitData = () => {
   //初始化数据
+  loading.value = true;
   get("v3/member/front/member/memberInfo").then((res) => {
     if (res.state == 200) {
       memberNameInput.value = contactType === 'email' ? res.data.memberName : res.data.memberMobile;
@@ -187,7 +189,9 @@ const getInitData = () => {
       member_company.value = res.data.memberCompany;
       member_main_product.value = res.data.memberMainProduct;
     }
-  });
+  }).finally(() => {
+      loading.value = false;
+  })
 };
 
 const memberInfoSave = () => {

+ 3 - 3
xinkeaboard-web/pages/register.vue

@@ -36,10 +36,10 @@
           <div class="top" v-if="currentStep !== 'finish'">
             <div class="item1">{{ title }}</div>
           </div>
-          <RegisterPhone v-if="currentStep === 'first' && appType === 'distributor'" @success="(val) => { currentStep = 'second'; mobile = val  }" />
+          <!-- <RegisterPhone v-if="currentStep === 'first' && appType === 'distributor'" @success="(val) => { currentStep = 'second'; mobile = val  }" />
           <RegisterMail v-if="currentStep === 'first' && appType === 'user'" @success="(val) => { currentStep = 'second'; email = val  }" />
-          <RegisterAccount v-if="currentStep === 'second'" :email="email" :mobile="mobile" @success="currentStep = 'finish'"/>
-          <RegisterSuccess v-if="currentStep === 'finish'"/>
+          <RegisterAccount v-if="currentStep === 'second'" :email="email" :mobile="mobile" @success="currentStep = 'finish'"/> -->
+          <RegisterSuccess />
           <div :class="{ bottom: true, flex_row_between_center: true, 'row-reverse': currentStep !== 'emai' }">
             <a href="javascript:void(0)" @click="goToPage('/login')">{{
               L["已有账号,去登录"]

+ 4 - 4
xinkeaboard-web/pages/store/contact/[contact].vue

@@ -12,25 +12,25 @@
           </div>
 
             <div class="item">
-              <img src="/contactUsPng3.png" style="width: 52px; height: 40px;" />
+              <img src="/contactUsPng3.png" />
               <p class="t1">{{ L["邮箱"] }}</p>
               <p>{{email}}</p>
             </div>
 
             <div class="item">
-              <img src="/contactUsPng2.png" style="width: 52px; height: 40px;" />
+              <img src="/contactUsPng2.png"  />
               <p class="t1">{{ L["联系方式"] }}</p>
               <p>{{phone}}</p>
             </div>
 
             <div class="item">
-              <img src="/contactUsPng1.png" style="width: 52px; height: 40px;" />
+              <img src="/contactUsPng1.png" />
               <p class="t1">{{ L["公司地址"] }}</p>
               <p>{{address}}</p>
             </div>
 
         </div>
-        <div class="sr-layout-block fr" v-if="ifMapReload">
+        <div class="sr-layout-block fr" v-loading="!ifMapReload">
           <div class="sr-txt-title">
             <h2 class="sr-txt-h2">{{ L["发布采购需求"] }}</h2>
           </div>

+ 30 - 21
xinkeaboard-web/pages/store/goods/[...slug].vue

@@ -4,17 +4,14 @@
     <StoreHeaderCat ref="headercat" @sendGoodsName="sendGoodsName"/>
     <div
       class="sld_store_goods_list clearfix"
-      :class="{ skeleton_sld_store_goods_list: firstLoading }"
     >
       <!-- 左侧分类 start -->
       <div
+        v-loading="cat_wrap_loading"
         class="left_cat_wrap"
-        v-show="firstLoading ? true : storeData.cat.length"
       >
         <template
-          v-for="(item, index) in firstLoading
-            ? skeletonData.category
-            : storeData.cat"
+          v-for="(item, index) in storeData.cat"
           :key="index"
         >
           <dl
@@ -24,11 +21,12 @@
             }"
           >
             <dt class="grade_one_cat">
-                <router-link
+              <a
+                    @click="(e) => { e.preventDefault(); clacRouteParams('/store/goods/'+ calcProductName(storeName) +'_v-'+ vid + '_c-' + item.innerLabelId, true)}"
                     :to="'/store/goods/'+ calcProductName(storeName) +'_v-'+ vid + '_c-' + item.innerLabelId"
               >
                 {{ item.innerLabelName }}
-              </router-link>
+              </a>
               <i
                 v-if="item.children.length"
                 class="more"
@@ -41,13 +39,15 @@
                 !(item.openFlag != undefined && !item.openFlag)
               "
             >
-              <router-link
+              <a
                 v-for="(item_child, index_child) in item.children"
                 :key="index_child"
+                @click="(e) => { e.preventDefault(); clacRouteParams('/store/goods/'+ calcProductName(storeName) +'_v-'+ vid + '_c-' + item_child.innerLabelId, true)}"
+
                 :to="'/store/goods/'+ calcProductName(storeName) +'_v-'+ vid + '_c-' + item_child.innerLabelId"
               >
                 {{ item_child.innerLabelName }}
-              </router-link>
+            </a>
             </dd>
           </dl>
         </template>
@@ -56,6 +56,7 @@
 
       <!-- 右侧商品 start -->
       <div
+        v-loading="firstLoading"
         :class="{
           right_goods_wrap: true,
           fr: storeData.cat.length,
@@ -181,6 +182,7 @@ const route = useRoute();
 // const L = lang_zn;
 const L = getCurLanguage();
 const firstLoading = ref(true); //是否第一次加载
+const cat_wrap_loading = ref(true)
 const router = useRouter();
 const storeData = reactive({ cat: [], goods: { list: [], pagination: {} } }); //店铺数据,cat:店铺分类,goods:店铺商品列表
 const sort = ref(0); //0:默认/综合;1、销量从高到底;3、价格从低到高;4、价格从高到低;5、人气从高到低
@@ -204,22 +206,25 @@ const sendGoodsName = (val) => {
   storeName.value = val
 }
 
-const clacRouteParams = () => {
-  if (calcUrlPagination(route.path)) {
-    currentPage.value = calcUrlPagination(route.path)
+
+const clacRouteParams = (path, noLoadCat) => {
+  firstLoading.value = true;
+  const usePath = path || route.path;
+  if (calcUrlPagination(usePath)) {
+    currentPage.value = calcUrlPagination(usePath)
   }
-  if (calcUrlShopId(route.path)) {
-    vid.value = calcUrlShopId(route.path)
+  if (calcUrlShopId(usePath)) {
+    vid.value = calcUrlShopId(usePath)
   }
-  if (calcUrlCatId(route.path)) {
-    categoryId.value = calcUrlCatId(route.path);
+  if (calcUrlCatId(usePath)) {
+    categoryId.value = calcUrlCatId(usePath);
   }
-  if (calcUrlKeywords(route.path)) {
-    keyword.value = calcUrlKeywords(route.path);
+  if (calcUrlKeywords(usePath)) {
+    keyword.value = calcUrlKeywords(usePath);
   }
-  proxy.refs.headercat.setVid(calcUrlShopId(route.path));
+  !noLoadCat && proxy.refs.headercat.setVid(calcUrlShopId(usePath));
   getStoreGoodsList();
-  getStoreCatData();
+  !noLoadCat && getStoreCatData();
 };
 
 watch(
@@ -306,13 +311,17 @@ const initSkeletonData = () => {
 };
 
 //获取店铺分类数据
-const getStoreCatData = async () => {
+const getStoreCatData = async (_vid) => {
+  if (_vid) {
+    vid.value = _vid;
+  }
   const { data: value } = await useFetchRaw(
     apiUrl + "v3/seller/front/store/storeCategory?storeId=" + vid.value
   );
   const res = value._rawValue;
   if (res.state == 200) {
     storeData.cat = res.data;
+    cat_wrap_loading.value = false;
   }
   setSEO();
 };

+ 1 - 1
xinkeaboard-web/pages/store/list/[...slug].vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <SldHomeTopSearch />
     <NavTopBar />
+    <SldHomeTopSearch />
     <NavCatHeader />
     <div class="self_background">
       <div class="sld_store_list">

+ 17 - 0
xinkeaboard-web/pnpm-lock.yaml

@@ -54,6 +54,9 @@ importers:
       nuxt:
         specifier: ^3.17.7
         version: 3.17.7(@parcel/watcher@2.5.1)(@types/node@24.0.13)(@vue/compiler-sfc@3.5.17)(db0@0.3.2)(ioredis@5.6.1)(magicast@0.3.5)(rollup@4.45.0)(sass@1.59.3)(terser@5.43.1)(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.13)(jiti@2.4.2)(sass@1.59.3)(terser@5.43.1)(yaml@2.8.0))(yaml@2.8.0)
+      postcss-px-to-viewport:
+        specifier: ^1.1.1
+        version: 1.1.1
       rollup-plugin-visualizer:
         specifier: ^6.0.3
         version: 6.0.3(rollup@4.45.0)
@@ -2826,6 +2829,10 @@ packages:
     engines: {node: ^14.16.0 || >=16.10.0}
     hasBin: true
 
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -3130,6 +3137,9 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
+  postcss-px-to-viewport@1.1.1:
+    resolution: {integrity: sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==}
+
   postcss-reduce-initial@7.0.3:
     resolution: {integrity: sha512-RFvkZaqiWtGMlVjlUHpaxGqEL27lgt+Q2Ixjf83CRAzqdo+TsDyGPtJUbPx2MuYIJ+sCQc2TrOvRnhcXQfgIVA==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -7059,6 +7069,8 @@ snapshots:
       pkg-types: 2.2.0
       tinyexec: 0.3.2
 
+  object-assign@4.1.1: {}
+
   object-inspect@1.13.4: {}
 
   ofetch@1.4.1:
@@ -7367,6 +7379,11 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
+  postcss-px-to-viewport@1.1.1:
+    dependencies:
+      object-assign: 4.1.1
+      postcss: 8.5.6
+
   postcss-reduce-initial@7.0.3(postcss@8.5.6):
     dependencies:
       browserslist: 4.25.1