refactor: 重构组件逻辑与样式优化

- 在 App.vue 中重构站点信息的获取与应用逻辑，提升代码可读性与维护性。
- 更新 Search.vue 组件，优化搜索框的样式与结构，增强用户体验。
- 在 element.scss 中注释掉不再使用的样式，并新增确认收货按钮的样式。
- 改进多个页面的布局与样式，确保响应式设计的一致性与美观性。
- 更新订单相关组件的按钮样式，提升视觉一致性与可用性。

buyer/src/components/indexDecorate/ModelForm.vue

@@ -45,6 +45,7 @@ export default {
   width: 100%;
   min-height: 1200px;
   box-sizing: border-box;
-  overflow-x: hidden;
+  /* 勿设 overflow-x: hidden，会裁切 discountAdvert 的 margin-left: -100px 左溢背景 */
+  overflow-x: visible;
 }
 </style>

buyer/src/components/indexDecorate/ModelFormItem.vue

@@ -17,30 +17,30 @@
     </template>
     <!-- 热门广告 -->
     <template v-if="element.type == 'hotAdvert'">
-      <div class="mb_20 width_1200_auto">
-        <img
-          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)"
-          width="1200"
-          alt=""
-        />
-      </div>
-      <ul class="advert-list width_1200_auto">
-        <template v-for="(item, index) in element.options.list" :key="index">
-          <li
-            v-if="index !== 0"
-            @click="linkTo(item.url)"
+      <div class="hot-advert mb_20 width_1200_auto">
+        <div class="hot-advert-banner">
+          <img
             class="hover-pointer"
-          >
-            <img :src="item.img" width="230" height="190" alt="" />
-          </li>
-        </template>
-      </ul>
+            :src="element.options.list[0].img"
+            @click="linkTo(element.options.list[0].url)"
+            alt=""
+          />
+        </div>
+        <ul class="advert-list">
+          <template v-for="(item, index) in element.options.list" :key="index">
+            <li
+              v-if="index !== 0"
+              @click="linkTo(item.url)"
+              class="hover-pointer"
+            >
+              <img :src="item.img" alt="" />
+            </li>
+          </template>
+        </ul>
+      </div>
     </template>
     <!-- 限时秒杀 待完善 -->
-    <template v-if="element.type == 'seckill' && element.options.list.length">
+    <template v-if="element.type == 'seckill' && element.options?.list?.length">
       <seckill :data="element" class="mb_20 width_1200_auto"></seckill>
     </template>
     <!-- 折扣广告 -->
@@ -121,15 +121,12 @@
       ></first-page-advert>
     </template>
     <!-- 横幅广告 -->
-    <template v-if="element.type == 'bannerAdvert'">
-      <div style="width: 100%; text-align: center">
-        <img
-          width="1200"
-          class="hover-pointer mb_20 bannerAd"
-          @click="linkTo(element.options.url)"
-          :src="element.options.img"
-          alt=""
-        />
+    <template v-if="element.type == 'bannerAdvert' && element.options.img">
+      <div
+        class="horizontal-advert width_1200_auto mb_20 hover-pointer"
+        @click="linkTo(element.options.url)"
+      >
+        <img class="bannerAd" :src="element.options.img" alt="" />
       </div>
     </template>
     <template v-if="element.type == 'notEnough'"
@@ -198,22 +195,55 @@ export default {
   box-sizing: border-box;
   overflow: hidden;
 }
-.bannerAd{
+/** 横幅广告 */
+.horizontal-advert {
   width: 100%;
-  height: 166.6px;
+  max-width: 1200px;
+  overflow: hidden;
   border-radius: 10px;
-  box-sizing: border-box;
+  line-height: 0;
+}
+.bannerAd {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 166px;
+  object-fit: cover;
 }
 /** 热门广告 */
+.hot-advert {
+  width: 1200px;
+  max-width: 100%;
+  overflow: hidden;
+
+  .hot-advert-banner {
+    line-height: 0;
+
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  }
+}
 .advert-list {
+  width: 100%;
+  margin: 0;
+  padding: 5px 0;
+  list-style: none;
+  box-sizing: border-box;
   background: $theme_color;
   height: 200px;
   display: flex;
-  justify-content: space-around;
-  padding: 3px 10px;
-  box-sizing: border-box;
+  gap: 10px;
+  align-items: center;
   > li {
+    flex: 1 1 0;
+    min-width: 0;
     img {
+      display: block;
+      width: 100%;
+      height: 190px;
       cursor: pointer;
       border-radius: 10px;
       transition: all 150ms ease-in-out;
@@ -227,40 +257,43 @@ export default {
 
 /** 折扣广告 */
 .discountAdvert-wrap {
+  width: 1200px;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
 }
 .discountAdvert {
-  width: 100%;
-  max-width: 1200px;
-  height: 520px;
-  margin: 0 auto;
+  width: 1300px;
+  height: 585px;
+  margin-left: -100px;
   box-sizing: border-box;
   background-repeat: no-repeat;
-  background-size: 1200px 520px;
-  background-position: center top;
+  background-size: 1300px 585px;
+  background-position: left top;
   position: relative;
-  padding: 10px 0 0 330px;
-  overflow: hidden;
   > div {
+    padding-left: 295px;
     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;
+    &:nth-child(1) img {
+      margin: 10px 10px 0 0;
       transition: all 150ms ease-in-out;
       &:hover {
         box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
         transform: translateY(-2px);
       }
     }
+    &:nth-child(2) {
+      margin-top: 10px;
+      img {
+        margin: 0 10px 0 0;
+        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/NotEnough.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="not-enough" ref="obtain" id="demo">
-    <el-affix :offset-top="62" @change="change">
-      <ul class="nav-bar" v-show="topSearchShow">
-        <li
-          v-for="(item, index) in conData.options.navList"
-          :class="currentIndex === index ? 'curr' : ''"
-          @click="changeCurr(index)"
-          :key="index"
-        >
-          <p @click="gotoDemo">{{ item.title }}</p>
-          <p @click="gotoDemo">{{ item.desc }}</p>
-        </li>
-      </ul>
+    <el-affix :offset-top="62" @change="change" class="nav-affix">
+      <div class="nav-bar" v-show="topSearchShow">
+        <ul class="nav-list">
+          <li
+            v-for="(item, index) in conData.options.navList"
+            :class="currentIndex === index ? 'curr' : ''"
+            @click="changeCurr(index)"
+            :key="index"
+          >
+            <p @click="gotoDemo">{{ item.title }}</p>
+            <p @click="gotoDemo">{{ item.desc }}</p>
+          </li>
+        </ul>
+      </div>
     </el-affix>
     <div class="content" v-if="showContent">
       <div
@@ -95,18 +97,34 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.not-enough {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+:deep(.nav-affix.el-affix) {
+  width: 100%;
+}
+
 .nav-bar {
-  display: flex;
-  justify-content: center;
   width: 100%;
   margin-bottom: 10px;
   background-color: #f8f8f8;
   height: 60px;
+  box-sizing: border-box;
+}
+
+.nav-list {
+  display: flex;
+  justify-content: center;
   align-items: center;
-  position: relative;
-  position: sticky;
-  position: -webkit-sticky;
-  top: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: border-box;
+
   li {
     padding: 0 30px;
     text-align: center;
@@ -114,11 +132,15 @@ export default {
       font-size: 16px;
       border-radius: 50px;
       padding: 0 7px;
+      margin: 0;
+      line-height: 1.2;
     }
 
     p:nth-child(2) {
       font-size: 14px;
       color: #999;
+      margin: 2px 0 0;
+      line-height: 1.2;
     }
 
     &:hover {
@@ -129,6 +151,7 @@ export default {
     }
     border-right: 1px solid #eee;
   }
+
   li:last-of-type {
     border: none;
   }
@@ -136,7 +159,6 @@ export default {
   .curr {
     p:nth-child(1) {
       background-color: $theme_color;
-
       color: #fff;
     }
     p:nth-child(2) {
@@ -146,6 +168,8 @@ export default {
 }
 
 .content {
+  width: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="seckill" v-if="goodsList.length">
+  <div class="seckill" v-if="goodsList && goodsList.length">
     <div class="aside hover-pointer" @click="goToSeckill">
       <div class="title">{{ actName }}</div>
       <div class="hour">
@@ -54,7 +54,7 @@ export default {
       clearInterval(this.interval);
       this.interval = null;
       this.countDown(val);
-      this.goodsList = this.list[val].seckillGoodsList;
+      this.goodsList = this.list[val]?.seckillGoodsList || [];
     },
     diffSeconds(val) {
       const hours = Math.floor(val / 3600);
@@ -106,9 +106,15 @@ export default {
       }, 1000);
     },
     getListByDay() {
-      this.list = this.data.options.list;
-      this.goodsList = this.list[0].seckillGoodsList;
-      this.countDown(this.currIndex);
+      this.list = this.data?.options?.list || [];
+      if (!this.list.length) {
+        this.goodsList = [];
+        return;
+      }
+      this.goodsList = this.list[0]?.seckillGoodsList || [];
+      if (this.goodsList.length) {
+        this.countDown(this.currIndex);
+      }
     },
   },
 };