feat: 新增全局布局样式并提升组件响应式表现

- 在 global-layout.scss 中引入全局布局样式，统一页面宽度与对齐方式
- 更新多个组件与页面以优化响应式，包括宽度、间距及 flex 布局等调整
- 在 API 请求中增加 loading 状态管理，改善用户体验
- 优化领券中心与商品详情页，提升功能与 UI 一致性

buyer/src/components/indexDecorate/ModelForm.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="model-form">
     <div class="model-content">
-      <template v-for="(element, index) in data.list" :key="element.key || index">
-        <model-form-item
-          v-if="element && element.key"
-          :element="element"
-          :index="index"
-          :data="data"
-        ></model-form-item>
-      </template>
+      <model-form-item
+        v-for="(element, index) in renderList"
+        :key="element.key"
+        :element="element"
+        :index="index"
+        :data="data"
+      ></model-form-item>
     </div>
   </div>
 </template>
@@ -19,12 +18,32 @@ export default {
   components: {
     ModelFormItem
   },
-  props: ['data']
+  props: ['data'],
+  computed: {
+    renderList() {
+      const list = this.data?.list || [];
+      return list.filter(
+        (el) => el && el.key && !this.isBuiltinModule(el.type)
+      );
+    }
+  },
+  methods: {
+    isBuiltinModule(type) {
+      // 顶部广告、快捷导航由 Index 页单独渲染
+      return type === 'topAdvert' || type === 'navBar';
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>
+.model-form {
+  position: relative;
+  width: 100%;
+}
 .model-content {
   width: 100%;
   min-height: 1200px;
+  box-sizing: border-box;
+  overflow-x: hidden;
 }
 </style>

buyer/src/components/indexDecorate/ModelFormItem.vue

@@ -2,10 +2,9 @@
   <div class="model-item" v-if="element && element.key">
     <!-- 轮播图模块，包括个人信息，快捷导航模块 -->
     <template v-if="element.type == 'carousel'">
-      <model-carousel
-        :data="element"
-        class="mb_20 width_1200_auto"
-      ></model-carousel>
+      <div class="carousel-wrap mb_20">
+        <model-carousel :key="element.key" :data="element"></model-carousel>
+      </div>
     </template>
     <template v-if="element.type == 'carousel1'">
       <model-carousel1 :data="element" class="mb_20"></model-carousel1>
@@ -20,7 +19,7 @@
     <template v-if="element.type == 'hotAdvert'">
       <div class="mb_20 width_1200_auto">
         <img
-          style="display: block"
+          style="display: block; width: 100%; max-width: 1200px; height: auto"
           class="hover-pointer"
           :src="element.options.list[0].img"
           @click="linkTo(element.options.list[0].url)"
@@ -46,33 +45,39 @@
     </template>
     <!-- 折扣广告 -->
     <template v-if="element.type == 'discountAdvert'">
-      <div
-        class="discountAdvert"
-        :style="{
-          backgroundImage:
-            'url(' + require('@/assets/images/decorate.png') + ')',
-        }"
-      >
-        <img
-          @click="linkTo(item.url)"
-          class="hover-pointer"
-          v-for="(item, index) in element.options.classification"
-          :key="index"
-          :src="item.img"
-          width="190"
-          height="210"
-          alt=""
-        />
-        <img
-          @click="linkTo(item.url)"
-          class="hover-pointer"
-          v-for="(item, index) in element.options.brandList"
-          :key="'discount' + index"
-          :src="item.img"
-          width="240"
-          height="105"
-          alt=""
-        />
+      <div class="discountAdvert-wrap width_1200_auto mb_20">
+        <div
+          class="discountAdvert"
+          :style="{
+            backgroundImage:
+              'url(' + require('@/assets/images/decorate.png') + ')',
+          }"
+        >
+          <div>
+            <img
+              @click="linkTo(item.url)"
+              class="hover-pointer"
+              v-for="(item, index) in element.options.classification"
+              :key="index"
+              :src="item.img"
+              width="190"
+              height="210"
+              alt=""
+            />
+          </div>
+          <div>
+            <img
+              @click="linkTo(item.url)"
+              class="hover-pointer"
+              v-for="(item, index) in element.options.brandList"
+              :key="'discount' + index"
+              :src="item.img"
+              width="240"
+              height="105"
+              alt=""
+            />
+          </div>
+        </div>
       </div>
     </template>
 
@@ -183,11 +188,19 @@ export default {
 .model-item {
   position: relative;
   margin-bottom: 10px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.carousel-wrap {
+  width: 100%;
+  box-sizing: border-box;
+  overflow: visible;
 }
 .bannerAd{
-  width: 1183px;
+  width: 100%;
   height: 166.6px;
   border-radius: 10px;
+  box-sizing: border-box;
 }
 /** 热门广告 */
 .advert-list {
@@ -196,6 +209,7 @@ export default {
   display: flex;
   justify-content: space-around;
   padding: 3px 10px;
+  box-sizing: border-box;
   > li {
     img {
       cursor: pointer;
@@ -210,25 +224,40 @@ export default {
 }
 
 /** 折扣广告 */
-.discountAdvert {
-  width: 1300px;
-  height: 566px;
-  margin: 0 auto;
-  margin-bottom: 20px;
-  background-repeat: no-repeat;
+.discountAdvert-wrap {
   position: relative;
-  left: -47px;
-  padding-left: 295px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  img {
-    margin-top: 10px;
-    margin-right: 10px;
-    transition: all 150ms ease-in-out;
-    &:hover {
-      box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
-      transform: translateY(-2px);
+  overflow: hidden;
+}
+.discountAdvert {
+  width: 100%;
+  max-width: 1200px;
+  height: 520px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-size: 1200px 520px;
+  background-position: center top;
+  position: relative;
+  padding: 10px 0 0 330px;
+  overflow: hidden;
+  > div {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    align-content: flex-start;
+    box-sizing: border-box;
+    width: 100%;
+    img {
+      display: block;
+      flex-shrink: 0;
+      margin-top: 10px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+      transition: all 150ms ease-in-out;
+      &:hover {
+        box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
+        transform: translateY(-2px);
+      }
     }
   }
 }

buyer/src/components/indexDecorate/modelList/Carousel.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="model-carousel">
-    <div class="nav-body clearfix">
-      <!-- 侧边导航占位 -->
-      <div class="nav-side"></div>
+    <div class="nav-body">
+      <!-- 侧边导航占位（与 CateNav 分类栏同宽，勿与 CateNav .nav-side 混用类名） -->
+      <div class="carousel-side-spacer"></div>
       <div class="nav-content">
-        <!-- 轮播图 -->
-<!--        autoplay autoplay-speed="10000"-->
-        <el-carousel height="334px" :interval="5000">
-          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
+        <!-- 轮播图：无数据时不挂载 el-carousel，避免 Element Plus 卸载子项时报错 -->
+        <el-carousel
+          v-if="carouselList.length"
+          :key="carouselRenderKey"
+          height="334px"
+          :interval="5000"
+        >
+          <el-carousel-item
+            v-for="(item, index) in carouselList"
+            :key="carouselItemKey(item, index)"
+          >
             <div class="swiper-img">
               <img
                 :src="item.img"
@@ -17,6 +24,7 @@
             </div>
           </el-carousel-item>
         </el-carousel>
+        <div v-else class="swiper-img carousel-placeholder"></div>
       </div>
       <div class="nav-right">
         <div class="person-msg">
@@ -84,6 +92,16 @@ import storage from "@/plugins/storage";
 export default {
   name: "modelCarousel",
   props: ["data"],
+  computed: {
+    carouselList() {
+      return this.data?.options?.list || [];
+    },
+    carouselRenderKey() {
+      const moduleKey = this.data?.key || "carousel";
+      const imgs = this.carouselList.map((item) => item?.img || "").join("|");
+      return `${moduleKey}-${this.carouselList.length}-${imgs}`;
+    },
+  },
   data() {
     return {
       config: require("@/config"),
@@ -154,6 +172,9 @@ export default {
     };
   },
   methods: {
+    carouselItemKey(item, index) {
+      return item?.img || item?.url || `slide-${index}`;
+    },
     // 快捷跳转中心
     entryControl(val) {
       console.log("val",val)
@@ -182,10 +203,15 @@ export default {
 
 .swiper-img {
   overflow: hidden;
-  width: 637px;
+  width: 100%;
   height: 329.9px;
 }
 
+.carousel-placeholder {
+  border-radius: 10px;
+  background: #ececec;
+}
+
 .icon-list {
   width: 216px
 }
@@ -266,20 +292,18 @@ export default {
 
 .model-carousel {
   width: 1200px;
+  max-width: 100%;
   height: 340px;
-  overflow: hidden;
+  margin: 0 auto;
+  overflow: visible;
+  box-sizing: border-box;
 }
 
 .hover-pointer {
-  //display: block;
-  //width: 100%;
-  //height: 100%;
-  width: 637px;
+  width: 100%;
   height: 329.9px;
   object-fit: cover;
   border-radius: 10px;
-
-
 }
 
 .welcome {
@@ -334,44 +358,63 @@ export default {
 
 }
 
-/* 导航主体 */
+/* 导航主体：固定列宽与 CateNav 完全一致（263.2 + 10 + 637 + 10 + 263.2 = 1183.4px） */
 .nav-body {
   width: 1200px;
+  max-width: 100%;
   height: 340px;
-  margin: 0px auto;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 263.2px 637px 263.2px;
+  column-gap: 10px;
+  align-items: start;
+  box-sizing: border-box;
 }
 
-.nav-side {
-  height: 334px;
+.carousel-side-spacer {
+  grid-column: 1;
   width: 263.2px;
+  height: 334px;
+  flex-shrink: 0;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
-  float: left;
-  padding: 0px;
-  color: #fff;
-  // background-color: #6e6568;
-
-
+  pointer-events: none;
 }
 
 
 /*导航内容*/
 .nav-content {
+  grid-column: 2;
   width: 637px;
-  margin-left: 10.8px;
-
+  min-width: 637px;
+  max-width: 637px;
   margin-top: 10px;
   height: 333.9px;
-
-  float: left;
   position: relative;
+  overflow: hidden;
+
+  :deep(.el-carousel) {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  :deep(.el-carousel__container) {
+    height: 334px;
+  }
+
+  :deep(.el-carousel__item) {
+    width: 100%;
+  }
 }
 
 .nav-right {
-  float: left;
-  margin-top: 10px;
+  grid-column: 3;
   width: 263.2px;
-  margin-left: 10px;
+  min-width: 263.2px;
+  max-width: 263.2px;
+  margin-top: 10px;
 
   border-radius: 10px;
   background: #FFFFFF;

buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue

@@ -88,82 +88,171 @@ export default {
 .new-goods {
   display: flex;
   justify-content: space-between;
+  align-items: stretch;
   > div {
     width: 393px;
     height: 440px;
+    overflow: hidden;
   }
 
   .left > .content {
-    > div:nth-child(1) {
-      height: 240px;
-      flex-direction: column;
-      border: 1px solid #eee;
-      border-top: none;
-      border-left: none;
-      justify-content: space-between;
-      img {
-        width: 160px;
-        height: 160px;
-      }
-      .describe {
-        margin-top: 10px;
-      }
-    }
-    > div:nth-child(2) {
-      border-right: 1px solid #eee;
-    }
-    > div:nth-child(3),
-    > div:nth-child(4) {
-      border-bottom: 1px solid #eee;
-    }
-  }
-
-  .middle > .content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    flex-direction: unset;
+    overflow: hidden;
     > div {
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      min-height: 0;
+      overflow: hidden;
+      box-sizing: border-box;
+      display: flex;
+      padding: 6px 4px 4px 6px;
       border-style: solid;
       border-color: #eee;
       border-width: 0;
       border-bottom-width: 1px;
+      border-right-width: 1px;
+      img {
+        width: 64px;
+        height: 64px;
+        margin-top: 2px;
+        flex-shrink: 0;
+        object-fit: cover;
+      }
+      > div {
+        flex: 1;
+        min-width: 0;
+        p {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 12px;
+          line-height: 1.3;
+        }
+        .describe {
+          margin-top: 4px;
+          font-size: 11px;
+        }
+      }
+    }
+    > div:nth-child(1) {
+      grid-row: span 2;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      text-align: center;
+      padding: 8px 6px;
+      img {
+        width: 120px;
+        height: 120px;
+        margin-top: 6px;
+      }
+      > div {
+        flex: unset;
+        width: 100%;
+        p {
+          white-space: normal;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .describe {
+          margin-top: 6px;
+          white-space: normal;
+        }
+      }
     }
-    > div:nth-child(1),
     > div:nth-child(2),
-    > div:nth-child(3) {
+    > div:nth-child(3),
+    > div:nth-child(5) {
+      border-right-width: 0;
+    }
+    > div:nth-child(4),
+    > div:nth-child(5) {
+      border-bottom-width: 0;
+    }
+  }
+
+  .middle > .content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    flex-direction: unset;
+    > div {
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      overflow: hidden;
+      box-sizing: border-box;
+      border-style: solid;
+      border-color: #eee;
+      border-width: 0;
+      border-bottom-width: 1px;
       border-right-width: 1px;
     }
-    > div:nth-child(6),
-    > div:nth-child(3) {
+    > div:nth-child(2n) {
+      border-right-width: 0;
+    }
+    > div:nth-child(n + 5) {
       border-bottom-width: 0;
     }
   }
 
   .right > .content {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    flex-direction: unset;
+    flex-wrap: unset;
     font-size: 12px;
+    overflow: hidden;
     > div {
       position: relative;
-      width: 120px;
-      padding: 5px 10px 0 10px;
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+      box-sizing: border-box;
+      padding: 4px 4px 2px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: hidden;
       img {
-        width: 100px;
-        height: 100px;
+        width: 80px;
+        height: 80px;
+        flex-shrink: 0;
+        display: block;
+        object-fit: cover;
       }
       border-bottom: 1px solid #eee;
+      border-right: 1px solid #eee;
       :nth-child(2) {
-        height: 38px;
+        width: 100%;
+        height: auto;
+        max-height: 32px;
+        line-height: 16px;
+        margin-top: 4px;
         overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        text-align: center;
       }
       :nth-child(3) {
         color: $theme_color;
-        margin-top: 5px;
+        margin-top: 2px;
+        line-height: 1.2;
+        flex-shrink: 0;
       }
       .jiaobiao {
         position: absolute;
         width: 23px;
         height: 23px;
-        top: 10px;
-        right: 16px;
+        top: 6px;
+        right: 6px;
         background: url(../../../assets/images/festival_icon.png);
         color: #fff;
         text-align: center;
@@ -181,10 +270,11 @@ export default {
         background-position: -60px -30px;
       }
     }
-    > div:nth-child(4),
-    > div:nth-child(5),
-    > div:nth-child(6) {
-      border: none;
+    > div:nth-child(3n) {
+      border-right: none;
+    }
+    > div:nth-child(n + 4) {
+      border-bottom: none;
     }
   }
 
@@ -209,6 +299,8 @@ export default {
     flex-wrap: wrap;
     flex-direction: column;
     height: 370px;
+    box-sizing: border-box;
+    overflow: hidden;
   }
   .con-item {
     width: 185px;
@@ -222,6 +314,42 @@ export default {
       margin-top: 10px;
     }
   }
+  .middle > .content .con-item {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 6px 4px 4px 6px;
+    img {
+      width: 64px;
+      height: 64px;
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+    > div {
+      flex: 1;
+      min-width: 0;
+      p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 12px;
+        line-height: 1.3;
+      }
+      .describe {
+        margin-top: 4px;
+        font-size: 11px;
+      }
+    }
+  }
+  .left > .content .con-item {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+  }
   .describe {
     color: #999;
     font-size: 12px;

buyer/src/components/indexDecorate/modelList/Recommend.vue

@@ -44,7 +44,7 @@
           :key="index"
           @click="linkTo(item.url)" class="hover-pointer"
         >
-          <div class="right-item" :style="{'border': index===2 || index===3 ?'none': ''}">
+          <div class="right-item">
             <div>
               <span :style="{ background: msgRight.bgColor }">{{item.name}}</span>
               <span>{{ item.describe }}</span>
@@ -135,65 +135,85 @@ export default {
 
   .recommend-right {
     width: 595px;
-    height: 360px;
+
     .head-recommend {
       background: #a25684;
     }
     .content-right {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, 1fr);
+      height: 360px;
       padding-top: 10px;
+      box-sizing: border-box;
+
       > div {
-        width: 50%;
+        width: 100%;
+        height: 100%;
         text-align: center;
-        height: 180px;
-        padding-top: 10px;
+        padding: 0;
+        border-right: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+        box-sizing: border-box;
+
+        &:nth-child(2n) {
+          border-right: none;
+        }
+
+        &:nth-child(n + 3) {
+          border-bottom: none;
+        }
+
         .right-item {
-          border-bottom: 1px solid #eee;
+          border-bottom: none;
           display: flex;
-          margin-top: 30px;
-          margin-left: 5px;
-          margin-right: 5px;
-          height: 150px;
-          padding: 0 10px;
+          align-items: center;
+          justify-content: space-between;
+          height: 100%;
+          margin: 0;
+          padding: 10px 15px;
           font-size: 12px;
-          >div:nth-child(1) {
+          box-sizing: border-box;
 
-            margin-top: 30px;
-            span:nth-child(1){
-                color: #fff;
-                border-radius: 10px;
-                padding: 0 5px;
-                background-color: #a25684;
-                display: block;
+          > div:nth-child(1) {
+            flex: 1;
+            min-width: 0;
+            margin-top: 0;
+            text-align: left;
 
-                overflow: hidden;
-                white-space: nowrap;
-                margin: 0 10px 10px 0;
+            span:nth-child(1) {
+              color: #fff;
+              border-radius: 10px;
+              padding: 0 5px;
+              background-color: #a25684;
+              display: block;
+              max-width: 120px;
+              overflow: hidden;
+              white-space: nowrap;
+              margin: 0 0 10px;
             }
+
             span:nth-child(2) {
-                font-size: 12px;
-                color: #666;
-                display: block;
+              font-size: 12px;
+              color: #666;
+              display: block;
             }
           }
+
           .right-img {
-            width: 100;
+            width: 100px;
             height: 100px;
+            flex-shrink: 0;
             text-align: center;
-            margin: 0 auto;
-            img{
-                max-height: 100px;
-                max-width: 100px;
+            margin: 0;
+
+            img {
+              max-height: 100px;
+              max-width: 100px;
             }
           }
         }
       }
-      > div:nth-child(n + 1) {
-        border-right: 1px solid #eee;
-      }
     }
   }