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

- 在 App.vue 中重构站点信息的获取与应用逻辑，提升代码可读性与维护性。 - 更新 Search.vue 组件，优化搜索框的样式与结构，增强用户体验。 - 在 element.scss 中注释掉不再使用的样式，并新增确认收货按钮的样式。 - 改进多个页面的布局与样式，确保响应式设计的一致性与美观性。 - 更新订单相关组件的按钮样式，提升视觉一致性与可用性。
2026-08-06 10:57:26 +08:00 · 2026-06-30 21:09:28 +08:00
parent ec948b5496
commit 28a857249a
121 changed files with 5122 additions and 2182 deletions
--- a/buyer/src/App.vue
+++ b/buyer/src/App.vue
@@ -12,51 +12,46 @@ export default {
  mounted() {
    this.init();
  },
-  methods:{
-    init(){
-      if(!storage.getItem("siteName")||!storage.getItem("logoImg")||!storage.getItem("sitelogo_expiration_time")) {
-        this.getSite();
-      }else{
-        // 如果缓存过期，则获取最新的信息
-        if (new Date() > storage.getItem("sitelogo_expiration_time")) {
-          this.getSite();
-          return;
-        }else{
-          window.document.title = storage.getItem("siteName");
-          //动态获取icon
-          let link =document.querySelector("link[rel*='icon']") ||document.createElement("link");
-            link.type = "image/x-icon";
-            link.href = storage.getItem("siteIcon");
-            link.rel = "shortcut icon";
-            document.getElementsByTagName("head")[0].appendChild(link);
-        }
-      }
-      
+  methods: {
+    applySiteInfo(data) {
+      const expirationTime = new Date().setHours(new Date().getHours() + 1);
+      storage.setItem("sitelogo_expiration_time", expirationTime);
+      storage.setItem("siteName", data.siteName);
+      storage.setItem("logoImg", data.buyerSideLogo);
+      storage.setItem("siteIcon", data.buyerSideIcon);
+      this.$store.commit("SET_SITENAME", data.siteName);
+      this.$store.commit("SET_LOGOIMG", data.buyerSideLogo);
+      window.document.title = data.siteName;
+      let link =
+        document.querySelector("link[rel*='icon']") ||
+        document.createElement("link");
+      link.type = "image/x-icon";
+      link.href = data.buyerSideIcon;
+      link.rel = "shortcut icon";
+      document.getElementsByTagName("head")[0].appendChild(link);
    },
-    getSite(){
-      //获取基本站点信息
+    init() {
+      const expirationTime = storage.getItem("sitelogo_expiration_time");
+      const cacheValid =
+        expirationTime && new Date() <= new Date(Number(expirationTime));
+      if (cacheValid) {
+        this.applySiteInfo({
+          siteName: storage.getItem("siteName"),
+          buyerSideLogo: storage.getItem("logoImg"),
+          buyerSideIcon: storage.getItem("siteIcon"),
+        });
+      }
+      this.getSite();
+    },
+    getSite() {
      getBaseSite().then((res) => {
        if (res.success && res.result.settingValue) {
-          let data = JSON.parse(res.result.settingValue);
-          // 过期时间
-          var expirationTime = new Date().setHours(new Date().getHours() + 1);
-          // 存放过期时间
-          storage.setItem("sitelogo_expiration_time", expirationTime);
-          // 存放信息
-          storage.setItem('siteName', data.siteName);
-          storage.setItem('logoImg', data.buyerSideLogo);
-          storage.setItem("siteIcon",data.buyerSideIcon);
-          window.document.title = data.siteName;
-          //动态获取icon
-          let link =document.querySelector("link[rel*='icon']") ||document.createElement("link");
-          link.type = "image/x-icon";
-          link.href = data.buyerSideIcon;
-          link.rel = "shortcut icon";
-          document.getElementsByTagName("head")[0].appendChild(link);
+          const data = JSON.parse(res.result.settingValue);
+          this.applySiteInfo(data);
        }
      });
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="scss">
--- a/buyer/src/assets/styles/element.scss
+++ b/buyer/src/assets/styles/element.scss
@@ -1,17 +1,17 @@
 :root {
-  --el-color-primary: #ff5c58;
-  --el-color-success: #68cabe;
-  --el-color-warning: #fa6419;
-  --el-color-danger: #ff3c2a;
+  // --el-color-primary: #ff5c58;
+  // --el-color-success: #68cabe;
+  // --el-color-warning: #fa6419;
+  // --el-color-danger: #ff3c2a;
  --el-font-size-base: 14px;
 }

-.el-button--primary {
-  --el-button-bg-color: #ff5c58;
-  --el-button-border-color: #ff5c58;
-  --el-button-hover-bg-color: #ff7875;
-  --el-button-hover-border-color: #ff7875;
-}
+// .el-button--primary {
+//   --el-button-bg-color: #ff5c58;
+//   --el-button-border-color: #ff5c58;
+//   --el-button-hover-bg-color: #ff7875;
+//   --el-button-hover-border-color: #ff7875;
+// }

 .el-table--border {
  .el-table__cell {
@@ -33,3 +33,17 @@
  margin: 0 8px;
  color: #dcdfe6;
 }
+
+/* 与「我的订单」确认收货按钮一致的橙色操作按钮 */
+.confirm-receipt-btn {
+  background-color: #ff9900 !important;
+  border-color: #ff9900 !important;
+  color: #fff !important;
+
+  &:hover,
+  &:focus {
+    background-color: #e68a00 !important;
+    border-color: #e68a00 !important;
+    color: #fff !important;
+  }
+}
--- a/buyer/src/components/Search.vue
+++ b/buyer/src/components/Search.vue
@@ -1,47 +1,60 @@
 <template>
-  <div class="navbar" :class="{'small-search-box':useClass == 'fixed-show'}">
-    <div class="container width_1200_auto flex flex-a-c">
-      <img
-        :src="$store.state.logoImg"
-        v-if="showLogo"
-        class="logo-img"
-        alt=""
-        @click="$router.push('/')"
-      />
-      <div :class="{'small-search-box':useClass == 'fixed-show'}" class="search-box">
+  <div class="navbar" :class="{'small-search-box': useClass == 'fixed-show'}">
+    <template v-if="useClass == 'fixed-show'">
+      <div class="search search-embedded">
        <el-input
          v-model="searchData"
          size="large"
-          class="search "
+          class="search-input"
          placeholder="输入你想查找的商品"
          @keyup.enter="search"
-        >
-
-          <template #append>
-            <div class="search-icon" @click="search">
+        />
+        <div class="search-btn" @click="search">
+          <el-icon :size="21"><SearchIcon /></el-icon>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="container width_1200_auto flex flex-a-c">
+        <img
+          :src="$store.state.logoImg"
+          v-if="showLogo"
+          class="logo-img"
+          alt=""
+          @click="$router.push('/')"
+        />
+        <div class="search-box">
+          <div class="search">
+            <el-input
+              v-model="searchData"
+              size="large"
+              class="search-input"
+              placeholder="输入你想查找的商品"
+              @keyup.enter="search"
+            />
+            <div class="search-btn" @click="search">
              <el-icon :size="21"><SearchIcon /></el-icon>
            </div>
-          </template>
-        </el-input>
-        <template v-if="showTag">
-          <div class="only-store" v-if="storeId" @click="research()">
-            切换为{{!onlyStore ? '店铺内' : '平台'}}搜索
-
          </div>
-          <div v-if="promotionTags.length === 0"></div>
-          <div v-else class="history-list flex">
-            <div
-              v-for="(item, index) in promotionTags"
-              :key="index"
-              class="mr_10"
-            >
-              <span class="history-item" @click="selectTags(item)">{{ item }}</span>
+          <template v-if="showTag">
+            <div class="only-store" v-if="storeId" @click="research()">
+              切换为{{!onlyStore ? '店铺内' : '平台'}}搜索
+
            </div>
-          </div>
-        </template>
+            <div v-if="promotionTags.length === 0"></div>
+            <div v-else class="history-list flex">
+              <div
+                v-for="(item, index) in promotionTags"
+                :key="index"
+                class="mr_10"
+              >
+                <span class="history-item" @click="selectTags(item)">{{ item }}</span>
+              </div>
+            </div>
+          </template>
+        </div>
      </div>
-    </div>
-
+    </template>
  </div>
 </template>

@@ -154,14 +167,19 @@ export default {
  height: 113px;
  background: #fff;
 }
-.search-icon{
-  width: 100%;
-  height: 100%;
-}
-.small-search-box{
-  height: 60px;

-  margin: 0 !important;
+.navbar.small-search-box {
+  height: 60px;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  background: transparent;
+}
+
+.search-embedded {
+  width: 100%;
+  margin: 0;
 }

 .container {
@@ -171,47 +189,47 @@ export default {
 }

 .search {
+  $btn-gap: 4px;
+  $btn-width: 60px;
+  $input-height: 37.8px;
+
+  position: relative;
  width: 778.4px;
+  height: $input-height;
  margin: 10px 0px 5px 0;

-  border-radius: 18.9px;
+  .search-input {
+    width: 100%;

-
-  :deep(.el-input--large .el-input__wrapper) {
-    border: 1.4px solid $theme_color;
-    box-sizing: border-box;
-    border-radius: 19.6px;
-    position: relative;
-    padding-left: 26px;
-    font-size: 14px;
-    font-weight: normal;
-    height: 37.8px;
-    color: #999;
-    box-shadow: none;
+    :deep(.el-input__wrapper) {
+      border: 1.4px solid $theme_color;
+      box-sizing: border-box;
+      border-radius: 19.6px;
+      padding-left: 26px;
+      padding-right: calc(#{$btn-gap * 2} + #{$btn-width});
+      font-size: 14px;
+      font-weight: normal;
+      height: $input-height;
+      color: #999;
+      box-shadow: none;
+    }
  }

-  :deep(.el-input-group__append) {
-    border-radius: 19.6px !important;
+  .search-btn {
+    position: absolute;
+    right: $btn-gap;
+    top: $btn-gap;
+    bottom: $btn-gap;
+    width: $btn-width;
+    border-radius: calc((#{$input-height} - #{$btn-gap * 2}) / 2);
    cursor: pointer;
    box-sizing: border-box;
-    border: 1.4px solid $theme_color;
-    width: 67.2px;
-    height: 37.8px;
-    position: absolute;
-    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
-    top: 0;
-    z-index: 99;
+    z-index: 1;
    background-color: $theme_color;
    color: #ffffff;
-
-    button {
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 1;
-    }
  }
 }
 .search-box{
--- a/buyer/src/components/goodsDetail/ShowGoods.vue
+++ b/buyer/src/components/goodsDetail/ShowGoods.vue
@@ -278,7 +278,7 @@
                  >加入购物车</el-button
                >
                <el-button
-                  type="warning"
+                  class="confirm-receipt-btn"
                  :loading="loading1"
                  :disabled="skuDetail.quantity === 0"
                  @click="buyNow"
--- a/buyer/src/components/header/hoverSearch.vue
+++ b/buyer/src/components/header/hoverSearch.vue
@@ -1,8 +1,12 @@
 <template>
  <div class="scroll-show">
-    <div class="content clearfix">
-      <cateNav class="cate" :hover="true" :showNavBar="false"
-               useClass="fixed-show"></cateNav>
+    <div class="content">
+      <cateNav
+        class="cate"
+        :hover="true"
+        :showNavBar="false"
+        useClass="fixed-show"
+      />
      <Search
        class="search-con"
        :hover="true"
@@ -10,97 +14,113 @@
        :showLogo="false"
        :showTag="false"
        useClass="fixed-show"
-      ></Search>
-      <div class="flex flex-a-c cart">
+      />
+      <div class="cart">
        <span @mouseenter="getCartList">
          <el-icon class="cart-icon" :size="20" @click="goCartList"><ShoppingCart /></el-icon>
        </span>
        <i class="cart-badge">{{ cartNum < 100 ? cartNum : "99" }}</i>
      </div>
    </div>
-
  </div>
 </template>
 <script>
-import { cartCount } from "@/api/cart.js";
-import storage from "@/plugins/storage.js";
-import { ShoppingCart } from "@element-plus/icons-vue";
+import Search from '@/components/Search.vue'
+import cateNav from '@/components/nav/CateNav.vue'
+import { cartCount } from '@/api/cart.js'
+import storage from '@/plugins/storage.js'
+import { ShoppingCart } from '@element-plus/icons-vue'
+
 export default {
-  components: { ShoppingCart },
+  components: { ShoppingCart, Search, cateNav },
  data() {
    return {
-      userInfo: {}, // 用户信息
-    };
+      userInfo: {}
+    }
  },
  computed: {
    cartNum() {
-      // 购物车商品数量
-      return this.$store.state.cartNum;
-    },
+      return this.$store.state.cartNum
+    }
  },
  methods: {
    goCartList() {
-      // 跳转购物车页面
-      let routerUrl = this.$router.resolve({
-        path: "/cart",
-      });
-      window.open(routerUrl.href, "_blank");
+      const routerUrl = this.$router.resolve({ path: '/cart' })
+      window.open(routerUrl.href, '_blank')
    },
    getCartList() {
-      // 获取购物车列表
-      if (storage.getItem("userInfo")) {
+      if (storage.getItem('userInfo')) {
        cartCount().then((res) => {
-          this.$store.commit("SET_CARTNUM", res.result);
-          this.Cookies.setItem("cartNum", res.result);
-        });
+          this.$store.commit('SET_CARTNUM', res.result)
+          this.Cookies.setItem('cartNum', res.result)
+        })
      }
-    },
-  },
-  mounted() {
-
-    if (storage.getItem("userInfo")) {
-      this.userInfo = JSON.parse(storage.getItem("userInfo"));
    }
  },
-};
+  mounted() {
+    if (storage.getItem('userInfo')) {
+      this.userInfo = JSON.parse(storage.getItem('userInfo'))
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
+$side-col-width: 263.2px;
+$col-gap: 10px;
+$cart-col-width: 40px;
+
+.scroll-show {
+  height: 60px;
+  overflow: hidden;
+}

 .content {
  width: 1200px;
-  height: 40px;
-  margin: 0 auto;
-  position: relative;
-}
-.cate {
-  float: left;
-  width: 200px !important;
-}
-.search-con {
-  float: left;
-  width: 800px;
-  overflow: hidden;
-  margin-top: -27px;
-}
-.cart{
  height: 60px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: $side-col-width 1fr $cart-col-width;
+  column-gap: $col-gap;
+  align-items: center;
 }
-.cart-icon {
-  width: 30px;
-  float: left;
-  font-size: 25px;

-  color: $theme_color;
-  z-index: 1;
-  position: relative;
-  &:hover {
-    cursor: pointer;
+.cate {
+  min-width: 0;
+
+  :deep(.cate-nav) {
+    width: 100%;
+    margin: 0;
+  }
+
+  :deep(.nav-con) {
+    height: 60px;
  }
 }
+
+.search-con {
+  min-width: 0;
+  width: 100%;
+}
+
+.cart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 60px;
+  position: relative;
+}
+
+.cart-icon {
+  font-size: 25px;
+  color: $theme_color;
+  cursor: pointer;
+}
+
 .cart-badge {
  position: absolute;
  font-style: normal;
-  right: 165px;
+  top: 12px;
+  right: -2px;
  display: block;
  background-color: $theme_color;
  color: #fff;
@@ -111,6 +131,5 @@ export default {
  line-height: 17px;
  text-align: center;
  z-index: 5;
-  top: 10px;
 }
 </style>
--- a/buyer/src/components/indexDecorate/ModelForm.vue
+++ b/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>
--- a/buyer/src/components/indexDecorate/ModelFormItem.vue
+++ b/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);
+        }
+      }
+    }
  }
 }

--- a/buyer/src/components/indexDecorate/modelList/NotEnough.vue
+++ b/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;
--- a/buyer/src/components/indexDecorate/modelList/Seckill.vue
+++ b/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);
+      }
    },
  },
 };
--- a/buyer/src/components/nav/CateNav.vue
+++ b/buyer/src/components/nav/CateNav.vue
@@ -241,8 +241,10 @@ export default {
 }
 .fixed-show{
  margin-top: 0 !important;
+  width: 100%;
  >.nav-con{
  >.all-categories{
+    width: 100%;
    align-items: center !important;
    height: 60px;
    display: inherit;
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -222,12 +222,7 @@ export default {
  transition: 0.35s;
 }
 .show {
-  transform: translateY(0);
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
-  transform: translateZ(0);
+  transform: translateY(0) translateZ(0);
  top: 0;
 }
 .fixed-bar{
@@ -241,12 +236,7 @@ export default {
 .show-fixed{
  height: 354px !important;
  opacity: 1 !important;
-  transform: translateY(0);
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
-  transform: translateZ(0);
+  transform: translateY(0) translateZ(0);
 }


--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -48,13 +48,13 @@
    </div>


-    <div v-if="storeMsg.pageShow&&storeMsg.pageShow==='1'">
+    <div v-if="showFloorView">
      <!-- 楼层装修部分 -->
      <model-form ref="modelForm" :data="modelForm"></model-form>
    </div>


-    <div v-else>
+    <div v-else class="store-goods-section">
      <div class="promotion-decorate">{{ cateName }}</div>
      <div class="goods-list">
        <empty v-if="goodsList.length === 0"/>
@@ -108,6 +108,7 @@ import ModelForm from "@/components/indexDecorate/ModelForm";
 import HoverSearch from "@/components/header/hoverSearch";
 import storage from "@/plugins/storage";
 import {getFloorStoreData} from "@/api/index.js";
+import { seckillByDay } from "@/api/promotion";
 import imTalk from '@/components/mixes/talkIm'

 export default {
@@ -125,6 +126,7 @@ export default {
      carouselOpacity: false, // 不同轮播分类样式,
      enablePageData: false, //是否显示楼层装修内容
      basePageData: false, //基础店铺信息
+      showFloorView: false, // 是否展示楼层装修（有有效装修数据时为 true）
      storeMsg: {}, // 店铺信息
      cateList: [], // 店铺分裂
      goodsList: [], // 商品列表
@@ -145,35 +147,61 @@ export default {
    this.getStoreMsg();
  },
  methods: {
+    isFloorEnabled() {
+      const pageShow = this.storeMsg.pageShow;
+      return pageShow === "1" || pageShow === 1 || pageShow === "OPEN" || pageShow === true;
+    },
+    loadStoreGoodsView() {
+      this.showFloorView = false;
+      this.getGoodsList();
+      this.getCateList();
+    },
    getIndexData() {
-      // 获取首页装修数据
-      getFloorStoreData({clientType: "PC", num: this.$route.query.id, pageType: 'STORE'}).then(
-        (res) => {
-          if (res.success) {
-            let dataJson = JSON.parse(res.result.pageData);
-            // 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
-            // 轮播图根据不同轮播，样式不同
-            for (const element of dataJson.list) {
-              let type = element.type;
-              if (type === "carousel2") {
-                this.carouselLarge = true;
-              } else if (type === "carousel1") {
-                this.carouselLarge = true;
-                this.carouselOpacity = true;
-              }
-
-              // else if (type === "seckill") {
-              //   let seckill = this.getListByDay();
-              //   dataJson.list[i].options.list = seckill;
-              // }
+      getFloorStoreData({
+        clientType: "PC",
+        num: this.$route.query.id,
+        pageType: "STORE",
+      })
+        .then(async (res) => {
+          if (res.success && res.result?.pageData) {
+            try {
+              await this.parsePageData(res.result.pageData);
+              this.showFloorView = true;
+            } catch {
+              this.loadStoreGoodsView();
            }
-            this.modelForm = dataJson;
-            storage.setItem("navList", dataJson.list[1]);
-            this.showNav = true;
-            this.topAdvert = dataJson.list[0];
+          } else {
+            this.loadStoreGoodsView();
          }
+        })
+        .catch(() => {
+          this.loadStoreGoodsView();
+        });
+    },
+    async parsePageData(pageData) {
+      const dataJson = JSON.parse(pageData);
+      for (let i = 0; i < dataJson.list.length; i++) {
+        const type = dataJson.list[i].type;
+        if (type === "carousel2") {
+          this.carouselLarge = true;
+        } else if (type === "carousel1") {
+          this.carouselLarge = true;
+          this.carouselOpacity = true;
+        } else if (type === "seckill") {
+          dataJson.list[i].options.list = await this.getListByDay();
        }
-      );
+      }
+      this.modelForm = dataJson;
+      storage.setItem("navList", dataJson.list[1]);
+      this.showNav = true;
+      this.topAdvert = dataJson.list[0];
+    },
+    async getListByDay() {
+      const res = await seckillByDay();
+      if (res.success && res.result?.length) {
+        return res.result;
+      }
+      return [];
    },


@@ -208,15 +236,11 @@ export default {
        if (res.success) {

          this.storeMsg = res.result;
-          console.log(this.storeMsg)
-
-          //判定如果开启楼层展示，则获取页面信息 否则读取商品信息
-          if (this.storeMsg.pageShow && this.storeMsg.pageShow === '1') {

+          if (this.isFloorEnabled()) {
            this.getIndexData();
          } else {
-            this.getGoodsList();
-            this.getCateList();
+            this.loadStoreGoodsView();
          }
          let that = this;
          window.onscroll = function () {
@@ -379,4 +403,32 @@ export default {
 .promotion-decorate::after {
  background-image: url("/src/assets/images/sprite@2x.png");
 }
+
+.store-goods-section {
+  width: 1200px;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 0 10px;
+  box-sizing: border-box;
+
+  .goods-list {
+    width: 100%;
+    margin: 0;
+    column-gap: 10px;
+  }
+
+  .goods-show-info {
+    width: calc(20% - 8px);
+    min-width: 0;
+  }
+
+  .seckill-price {
+    font-size: 16px;
+  }
+
+  .goods-show-detail {
+    height: 32px;
+    line-height: 16px;
+  }
+}
 </style>
--- a/buyer/src/pages/home/memberCenter/MemberGrade.vue
+++ b/buyer/src/pages/home/memberCenter/MemberGrade.vue
@@ -9,7 +9,7 @@
            <div class="gradeNameRow">
              <span class="gradeNameText">{{ currentGrade.gradeName || '暂无等级' }}</span>
              <span v-if="currentGradeBenefits.length" class="benefitTagsInline">
-                <el-tag v-for="b in currentGradeBenefits" :key="b.id" class="benefitTag" color="blue">{{ b.benefitName || '-' }}</el-tag>
+                <el-tag v-for="b in currentGradeBenefits" :key="b.id" class="benefitTag" type="primary">{{ b.benefitName || '-' }}</el-tag>
              </span>
            </div>
            <div class="gradeExp">
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@@ -53,7 +53,7 @@
                  <span style="margin-left: 10px;color: #ff9900;">{{refundPriceList(goods.isRefund)}}</span>
                </div>
                <el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success" class="fontsize_12" style="position:relative;top:-22px;left:190px;margin-right:10px">评价</el-button>
-                <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="warning" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</el-button>
+                <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="danger" class="fontsize_12" size="small" style="position:relative;top:-22px;left:190px">投诉</el-button>
              </div>
            </div>
          </div>
@@ -65,7 +65,7 @@
            <el-button @click="orderDetail(order.sn)" type="warning" size="small">订单详情</el-button>
            <el-button @click="handleCancelOrder(order.sn)" type="danger" v-if="order.allowOperationVO.cancel" size="small">取消订单</el-button>
            <el-button @click="goPay(order.sn)" size="small" type="success" v-if="order.allowOperationVO.pay">去支付</el-button>
-            <el-button @click="received(order.sn)" size="small" class="confirm-receipt-btn" v-if="order.allowOperationVO.rog">确认收货</el-button>
+            <el-button @click="received(order.sn)" size="small" type="primary" v-if="order.allowOperationVO.rog">确认收货</el-button>
            <!-- 售后 -->
            <el-button v-if="order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
                    @click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
@@ -391,19 +391,6 @@ export default {
        margin: 0;
        min-width: 88px;
      }
-
-      :deep(.confirm-receipt-btn) {
-        background-color: #ff9900 !important;
-        border-color: #ff9900 !important;
-        color: #fff !important;
-
-        &:hover,
-        &:focus {
-          background-color: #e68a00 !important;
-          border-color: #e68a00 !important;
-          color: #fff !important;
-        }
-      }
    }
  }
 }
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -17,7 +17,7 @@
        v-if="order.allowOperationVO.pay"
        >去支付</el-button>
      <el-button
-        type="info"
+        type="primary"
        @click="received(order.order.sn)"
        size="small"
        v-if="order.allowOperationVO.rog"
@@ -180,7 +180,7 @@
                  goods.afterSaleStatus.includes('PART_AFTER_SALE')
                "
                @click="applyAfterSale(goods.sn)"
-                type="warning"
+                type="default"
                size="small"
                class="order-item-action-btn mb_5"
                >申请售后</el-button
@@ -196,7 +196,7 @@
              <el-button
                v-if="goods.complainStatus == 'NO_APPLY'"
                @click="complain(order.order.sn, goodsIndex)"
-                type="warning"
+                type="danger"
                class="order-item-action-btn fontsize_12 mb_5"
                size="small"
                >投诉</el-button
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -16,7 +16,7 @@
      </div>
    </div>
    <el-divider />
-    <div class="content width_1200">
+    <div class="content width_1200_auto">
      <!-- 收货地址 -->
      <div class="address" v-if="selectedDeliverMethod === 'LOGISTICS' && goodsType !== 'VIRTUAL_GOODS'">
        <div class="card-head">
@@ -30,11 +30,11 @@
            :key="index">
            <div>
              <span>{{ item.name }}</span>
-              <el-tag class="ml_10 address-default-tag" v-if="item.isDefault" color="red" effect="dark">默认</el-tag>
+              <el-tag class="ml_10 address-default-tag" v-if="item.isDefault" type="danger" effect="dark">默认</el-tag>
              <el-tag
                class="ml_10 address-alias-tag"
                v-if="item.alias"
-                color="rgb(255, 153, 0)"
+                type="warning"
                effect="dark"
              >{{ item.alias }}
              </el-tag>
@@ -280,18 +280,18 @@
          <span>应付金额：</span><span class="actrual-price">{{ $filters.unitPrice(priceDetailDTO.flowPrice, "￥") }}</span>
        </div>
      </div>
-    </div>
-    <!-- 底部支付栏 -->
-    <div class="order-footer width_1200">
-      <div class="pay ml_20" @click="pay">提交订单</div>
-      <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'LOGISTICS'">
-        配送至：{{ $filters.unitAddress(selectedAddress.consigneeAddressPath) }}
-        {{ selectedAddress.detail }}&nbsp;&nbsp;收货人：{{
-            selectedAddress.name
-        }}&nbsp;&nbsp;{{ selectedAddress.mobile }}
-      </div>
-      <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'SELF_PICK_UP'">
-        自提地点：{{selectedStoreAddress.address}} &nbsp;&nbsp;联系方式：{{ selectedStoreAddress.mobile }}
+      <!-- 底部支付栏 -->
+      <div class="order-footer">
+        <div class="pay ml_20" @click="pay">提交订单</div>
+        <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'LOGISTICS'">
+          配送至：{{ $filters.unitAddress(selectedAddress.consigneeAddressPath) }}
+          {{ selectedAddress.detail }}&nbsp;&nbsp;收货人：{{
+              selectedAddress.name
+          }}&nbsp;&nbsp;{{ selectedAddress.mobile }}
+        </div>
+        <div class="pay-address" v-if="addressList.length && selectedDeliverMethod === 'SELF_PICK_UP'">
+          自提地点：{{selectedStoreAddress.address}} &nbsp;&nbsp;联系方式：{{ selectedStoreAddress.mobile }}
+        </div>
      </div>
    </div>
    <BaseFooter></BaseFooter>
@@ -922,6 +922,7 @@ export default {
  height: 30px;
  display: flex;
  align-items: center;
+  gap: 12px;

  span {
    @include content_color($light_content_color);
@@ -930,6 +931,12 @@ export default {
    line-height: 30px;
    display: inline-block;
    padding: 0 15px;
+    flex-shrink: 0;
+  }
+
+  .icon-next {
+    flex-shrink: 0;
+    font-size: 14px;
  }

  .el-icon {
@@ -956,6 +963,7 @@ export default {
  background-color: #fff;
  min-height: 200px;
  padding: 15px 25px;
+  box-sizing: border-box;
 }

 .delivery-method {
@@ -1034,13 +1042,15 @@ export default {
  flex-wrap: wrap;

  :deep(.address-default-tag) {
+    --el-tag-bg-color: var(--el-color-danger);
+    --el-tag-border-color: var(--el-color-danger);
    --el-tag-text-color: #fff;
    color: #fff;
  }

  :deep(.address-alias-tag) {
-    --el-tag-bg-color: rgb(255, 153, 0);
-    --el-tag-border-color: rgb(255, 153, 0);
+    --el-tag-bg-color: var(--el-color-warning);
+    --el-tag-border-color: var(--el-color-warning);
    --el-tag-text-color: #fff;
    color: #fff;
  }
@@ -1306,7 +1316,9 @@ export default {
  align-items: center;
  flex-direction: row-reverse;
  border-top: 1px solid #ddd;
-  margin: 10px auto;
+  margin: 10px -25px 0;
+  width: calc(100% + 50px);
+  box-sizing: border-box;

  div {
    text-align: center;
--- a/buyer/src/pages/payment/PayMent.vue
+++ b/buyer/src/pages/payment/PayMent.vue
@@ -104,7 +104,7 @@ export default {
          onOk: () => {
            pay(params).then(res => {
              if (res.success) {
-                this.$Message.warning(res.message)
+                this.$Message.success(res.message)
                this.$router.push('/payDone');
              } else {
                this.$Message.warning(res.message)