fix: 修复整体样式问题

xinkeaboard-web/assets/style/category.scss

@@ -68,6 +68,8 @@ i {
 }
 
 .class_ification_wrap {
+  display: flex;
+  width: 100%;
   position: relative;
   padding: 12px 0 0 0;
   background-color: #fff;
@@ -76,8 +78,7 @@ i {
   z-index: -1;
 
   .class_ification {
-    float: left;
-    width: 179px;
+    width: max-content;
     margin-right: 34px;
 
     &.fixed {
@@ -98,7 +99,7 @@ i {
       line-height: 30px;
       color: #010101;
       font-size: 12px;
-      border-radius: 15px;
+      // border-radius: 15px;
       overflow: visible;
       background: #f5f5f5;
       cursor: pointer;
@@ -179,8 +180,8 @@ i {
   }
 
   .class_detail {
+    flex: 1;
     width: 100%;
-    padding-left: 221px;
     z-index: 99;
 
     .detail_item {
@@ -215,6 +216,7 @@ i {
           font-size: 12px;
           font-weight: bold;
           color: $colorMain;
+          line-height: 38px;
         }
 
         .cat_add_right {

xinkeaboard-web/assets/style/goodsDetail.scss

@@ -375,7 +375,7 @@
                             justify-content: center;
                             align-items: center;
                             font-size: 15px;
-                            color: black;
+                            color: $colorMain;
                             text-align: center;
                         }
 

xinkeaboard-web/assets/style/goodsList.scss

@@ -53,12 +53,14 @@ ul {
     zoom: 1;
 }
 .goods_list_container {
+    width: 1440px;
+    margin: 0 auto;
     .level_nav_main {
         height: 40px;
         background-color: #f2f2f2;
         margin-bottom: 15px;
         .level_item {
-            width: 1200px;
+            width: 100%;
             margin: 0px auto;
             height: 40px;
             color: #848484;
@@ -226,16 +228,16 @@ ul {
         }
     }
     .goods_list_banner {
-        width: 1200px;
+        width: 100%;
         margin: 0 auto;
         background: #fff;
     }
     .goods_list {
-        width: 1200px;
+        width: 100%;
         margin: 0 auto;
         margin-top: 10px;
-        padding-left: 0px;
-        padding-right: 0px;
+        // padding-left: 0px;
+        // padding-right: 0px;
         background: #fff;
         .sld_screen {
             -moz-user-select: none; /*火狐*/
@@ -352,7 +354,7 @@ ul {
             }
         }
         .sld_goods_list {
-            width: 1200px;
+            width: 1440px;
             margin: 15px 0 40px;
             &.skeleton_sld_goods_list {
                 li {
@@ -392,7 +394,10 @@ ul {
             }
             li {
                 float: left;
-                width: 240px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 25%;
                 // height: 429px; //456px;
                 padding: 21px 11px 20px 11px;
                 box-sizing: border-box;
@@ -407,6 +412,13 @@ ul {
                     width: 217px;
                     height: 217px;
                 }
+
+                .li-content {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                }
             }
             p.clearfix {
                 padding: 10px 0;
@@ -451,13 +463,16 @@ ul {
             .sld_goods_name {
                 height: 40px;
                 line-height: 20px;
+                text-align: center;
+                padding: 0 10px;
                 overflow: hidden;
                 word-break: break-all;
                 text-overflow: ellipsis;
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 2;
-                font-size: 16px;
+                font-size: 14px;
+                margin-top: 10px;
                 //font-family: MicrosoftYaHei;
             }
             .tag {
@@ -527,16 +542,19 @@ ul {
                     color: #999999;
                     cursor: pointer;
                     &.first {
-                        width: 96px;
+                        width: 120px;
+                        margin-right: 10px;
                     }
                     &.second {
-                        width: 109px;
+                        width: 120px;
                         color: $colorMain !important;
                     }
                     i {
                         font-size: 16px;
                         vertical-align: middle;
                         margin-right: 6px;
+                        position: relative;
+                        top: 1px;
                     }
                     img {
                         width: 15px;
@@ -547,7 +565,7 @@ ul {
                         height: 21px !important;
                     }
                     &:last-child {
-                        border-left: none;
+                        // border-left: none;
                     }
                 }
             }

xinkeaboard-web/assets/style/store/contac-about.scss

@@ -266,6 +266,7 @@
     background-color: #e2e6f5;
     height: 520px;
     max-width: 1920px;
+    margin: 0 auto;
 
     .fence-wide {
         width: 100%;

xinkeaboard-web/components/CategorySortTop.vue

@@ -10,8 +10,9 @@
         @mouseover="selectTab(firstIndex, item1.categoryId)"
       >
         <a class="first_cat" @click.stop="toGoodsList(item1)">
-          {{ item1.categoryName }} <span style="float:right">></span> </a
-        >
+          <span class="label">{{ item1.categoryName }} </span>
+          <span class="icont">></span> 
+        </a>
         <div class="children" @click.stop="void 0">
           <!-- 二级分类 start-->
           <div v-if="cateDataFirst.data.length > 0">
@@ -176,7 +177,7 @@ const toGoodsList = (item) => {
     overflow-x: hidden;
     height: 100%;
     direction: rtl;
-    width: 230px;
+    width: 300px;
     &::-webkit-scrollbar {
       /*滚动条整体样式*/
       width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
@@ -207,15 +208,27 @@ const toGoodsList = (item) => {
       direction: ltr;
       text-align: left;
       .first_cat {
+        display: flex;
         width: 100%;
-        display: block;
         font-size: 14px;
         color: #333;
         padding: 0 10px 0 15px;
-        text-overflow: ellipsis;
         overflow: hidden;
         position: relative;
-        letter-spacing: normal;
+
+        .label {
+          display: inline-block;
+          flex: 1;
+          width: 100%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        .icont {
+          display: inline-block;
+          width: 10px;
+        }
 
         &:hover {
           color: $colorMain;
@@ -260,7 +273,8 @@ const toGoodsList = (item) => {
         background-color: #fff;
         position: absolute;
         top: 0;
-        left: 230px;
+        left: 300px;
+        padding-top: 10px;
         padding-right: 10px;
         overflow: hidden;
         box-shadow: 0px 5px 10px 0px rgba(153, 153, 153, 0.15);

xinkeaboard-web/components/NavCatHeader.vue

@@ -3,7 +3,7 @@
     <div class="header">
       <div class="product_sort" >
         <!-- <img :src="sortUrl" alt /> -->
-        <nuxt-link to="/goods/Category" target="_blank" class="sort">
+        <nuxt-link to="/goods/Category" class="sort">
           <span >{{L['商品分类']}}</span>
         </nuxt-link>
         <div class="category_sort">

xinkeaboard-web/pages/goods/Category.vue

@@ -24,7 +24,7 @@
               <div @click="toTop(item.categoryId, index)">{{ item.categoryName }}</div>
             </li>
           </ul>
-          <ul class="class_detail">
+          <ul class="class_detail" v-loading="loading">
             <li :class="['detail_item', cateStyle]">
               <div class="detail_title">{{ childCate.categoryName }}</div>
               <div class="cat_wrap_dd">
@@ -90,6 +90,7 @@ const router = useRouter();
 const navList = reactive({ data: {} });
 const isTop = ref(false);
 const isBottom = ref(false);
+const loading = ref(false)
 
 useHead({
   title: 'Categories',
@@ -126,6 +127,7 @@ const childCate = reactive({
 });
 const cateStyle = ref("item_style1");
 const getChild = async (categoryId1, index) => {
+  loading.value = true;
   const { data: value } = await useFetchRaw(
     apiUrl + "v3/goods/front/goods/category/bottomCategory?categoryId1=" + categoryId1,
     { key: categoryId1.toString() }
@@ -135,6 +137,7 @@ const getChild = async (categoryId1, index) => {
     childCate.data = res.data;
     childCate.categoryName = navList.data[index].categoryName;
   }
+  loading.value = false;
 };
 
 const toTop = (categoryId, index) => {

xinkeaboard-web/pages/goods/list/[...slug].vue

@@ -240,7 +240,7 @@
           ) in firstLoading ? skeletonData.data : goodsData.data"
           :key="index"
         >
-        <div>
+        <div class="li-content">
           <div class="sld_img sld_img_center">
             <router-link
               target="_blank"