fix: 增强错误处理与组件逻辑优化

- 在 App.vue 中添加 JSON 解析错误处理，确保站点信息获取的稳定性。 - 更新多个 API 请求，添加 loading 状态管理，提升用户体验。 - 在 Search.vue 中优化热词列表的解析逻辑，增强容错性。 - 改进购物车、地址管理等 API 请求参数，确保一致性与可用性。 - 新增用户中心布局组件，提升用户界面的一致性与可读性。
2026-08-06 19:07:25 +08:00 · 2026-07-03 18:29:41 +08:00
parent 99de0d4722
commit bd9a5f75b0
79 changed files with 2382 additions and 1207 deletions
--- a/buyer/src/components/Search.vue
+++ b/buyer/src/components/Search.vue
@@ -128,10 +128,14 @@ export default {
  },
  computed: {
    promotionTags() {
-      if (this.$store.state.hotWordsList) {
-        return JSON.parse(this.$store.state.hotWordsList)
-      } else {
-        return []
+      const raw = this.$store.state.hotWordsList;
+      if (!raw) {
+        return [];
+      }
+      try {
+        return typeof raw === "string" ? JSON.parse(raw) : raw;
+      } catch {
+        return [];
      }
    }
  },
@@ -145,12 +149,12 @@ export default {
      if (!reloadTime) {
        hotWords({count: 5}).then(res => {
          if (res.success && res.result) storage.setItem('hotWordsList', res.result)
-        })
+        }).catch(() => {})
        storage.setItem('hotWordsReloadTime', new Date().getTime())
      } else if (reloadTime && time > reloadTime) {
        hotWords({count: 5}).then(res => {
          if (res.success && res.result) storage.setItem('hotWordsList', res.result)
-        })
+        }).catch(() => {})
        storage.setItem('hotWordsReloadTime', new Date().getTime())
      }
    }
--- a/buyer/src/components/advertising/FixedTop.vue
+++ b/buyer/src/components/advertising/FixedTop.vue
@@ -1,6 +1,6 @@
 <template>
  <!-- 头部广告 -->
-  <div class="advertising" v-if="show" :style="{'background-color': data.bgColor}">
+  <div class="advertising" v-if="show && data" :style="{'background-color': data.bgColor}">
    <img :src="data.img" class="hover-pointer" @click="linkTo(data.url)"/>
    <el-icon :size="20" @click="show = false"><CircleClose /></el-icon>
  </div>
--- a/buyer/src/components/global.js
+++ b/buyer/src/components/global.js
@@ -6,6 +6,7 @@ import Footer from "@/components/footer/Footer.vue";
 import Search from "@/components/Search.vue";
 import card from "@/components/card/index.vue";
 import cateNav from "@/components/nav/CateNav.vue";
+import UserCenterLayout from "@/components/userCenter/Layout.vue";

 export function registerGlobalComponents(app) {
  app.component("empty", empty);
@@ -15,5 +16,6 @@ export function registerGlobalComponents(app) {
  app.component("BaseFooter", Footer);
  app.component("Search", Search);
  app.component("card", card);
+  app.component("UserCenterLayout", UserCenterLayout);
  app.component("cateNav", cateNav);
 }
--- a/buyer/src/components/header/Header.vue
+++ b/buyer/src/components/header/Header.vue
@@ -29,7 +29,7 @@
            </div>
            <transition name='fade'>
              <ul class="drop-items">
-                <li @click="goUserCenter('/home')">我的主页</li>
+                <li @click="goUserCenter('/home/MyOrder')">我的主页</li>
                <li @click="goUserCenter('/home/Coupons')">优惠券</li>
                <li @click="goUserCenter('/home/Favorites')">我的收藏</li>
                <li @click="signOutFun">退出登录</li>
@@ -40,14 +40,17 @@
        <li @click="goUserCenter('/home/MyOrder')"><span class="nav-item">我的订单</span></li>
        <li @click="goUserCenter('/home/MyTracks')"><span class="nav-item">我的足迹</span></li>
        <li @click="goUserCenter('/home/MsgList')"><span class="nav-item">我的消息</span></li>
-        <li v-if="$route.name !== 'Cart'" style="position:relative;">
-          <el-dropdown placement="bottom-start" trigger="hover" @visible-change="handleCartDropdownVisible">
-            <router-link to="/cart" target="_blank">
-              <span class="nav-item">
-                <el-icon :size="18"><ShoppingCart /></el-icon>
-                购物车（{{ cartNum < 100 ? cartNum : '99' }}）
-              </span>
-            </router-link>
+        <li v-if="$route.name !== 'Cart'" class="cart-nav-item">
+          <el-dropdown
+            class="cart-nav-dropdown"
+            placement="bottom-start"
+            trigger="hover"
+            @visible-change="handleCartDropdownVisible"
+          >
+            <span class="nav-item" @click="goToPay">
+              <el-icon :size="18"><ShoppingCart /></el-icon>
+              购物车（{{ cartNum < 100 ? cartNum : '99' }}）
+            </span>
            <template #dropdown>
              <div class="shopping-cart-null" style="width:200px" v-show="shoppingCart.length <= 0">
                <el-icon class="cart-null-icon"><ShoppingCart /></el-icon>
@@ -128,7 +131,7 @@ export default {
    },
    myInfo() { // 跳转会员中心
      let url = this.$router.resolve({
-        path: '/home'
+        path: '/home/MyOrder'
      });
      window.open(url.href, '_blank');
    },
@@ -258,6 +261,27 @@ export default {

 .nav-item {
  padding-left: 20px;
+  gap: 4px;
+}
+
+.cart-nav-item {
+  :deep(.cart-nav-dropdown),
+  :deep(.el-dropdown) {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+    line-height: 36px;
+  }
+
+  :deep(.el-tooltip__trigger),
+  :deep(.el-dropdown-selfdefine),
+  :deep([aria-expanded="true"]) {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
 }

 .location a {
--- a/buyer/src/components/indexDecorate/ModelFormItem.vue
+++ b/buyer/src/components/indexDecorate/ModelFormItem.vue
@@ -229,11 +229,11 @@ export default {
 .advert-list {
  width: 100%;
  margin: 0;
-  padding: 5px 0;
+  padding: 10px;
  list-style: none;
  box-sizing: border-box;
  background: $theme_color;
-  height: 200px;
+  height: 210px;
  display: flex;
  gap: 10px;
  align-items: center;
--- a/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
+++ b/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
@@ -57,12 +57,14 @@
          class="hover-pointer"
          @click="linkTo(item.url)"
        >
-          <img :src="item.img" alt="" />
+          <div class="img-wrap">
+            <img :src="item.img" alt="" />
+            <div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
+              {{ index + 1 }}
+            </div>
+          </div>
          <p>{{ item.name }}</p>
          <p>{{ $filters.unitPrice(item.price, "￥") }}</p>
-          <div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
-            {{ index + 1 }}
-          </div>
        </div>
      </div>
    </div>
@@ -220,16 +222,52 @@ export default {
      flex-direction: column;
      align-items: center;
      overflow: hidden;
-      img {
+      border-bottom: 1px solid #eee;
+      border-right: 1px solid #eee;
+      .img-wrap {
+        position: relative;
        width: 80px;
        height: 80px;
        flex-shrink: 0;
-        display: block;
-        object-fit: cover;
+        img {
+          width: 100%;
+          height: 100%;
+          display: block;
+          object-fit: cover;
+        }
+        .jiaobiao {
+          position: absolute;
+          width: 23px;
+          height: 23px;
+          top: 0;
+          right: 0;
+          margin: 0;
+          padding: 0;
+          max-height: none;
+          overflow: visible;
+          display: block;
+          background: url(../../../assets/images/festival_icon.png) no-repeat;
+          color: #fff;
+          text-align: center;
+          line-height: 23px;
+          font-size: 12px;
+          -webkit-line-clamp: unset;
+          -webkit-box-orient: unset;
+        }
+        .jiaobiao1,
+        .jiaobiao4 {
+          background-position: -2px -30px;
+        }
+        .jiaobiao2,
+        .jiaobiao5 {
+          background-position: -31px -30px;
+        }
+        .jiaobiao3,
+        .jiaobiao6 {
+          background-position: -60px -30px;
+        }
      }
-      border-bottom: 1px solid #eee;
-      border-right: 1px solid #eee;
-      :nth-child(2) {
+      > p:nth-child(2) {
        width: 100%;
        height: auto;
        max-height: 32px;
@@ -241,34 +279,12 @@ export default {
        -webkit-box-orient: vertical;
        text-align: center;
      }
-      :nth-child(3) {
+      > p:nth-child(3) {
        color: $theme_color;
        margin-top: 2px;
        line-height: 1.2;
        flex-shrink: 0;
      }
-      .jiaobiao {
-        position: absolute;
-        width: 23px;
-        height: 23px;
-        top: 6px;
-        right: 6px;
-        background: url(../../../assets/images/festival_icon.png);
-        color: #fff;
-        text-align: center;
-      }
-      .jiaobiao1,
-      .jiaobiao4 {
-        background-position: -2px -30px;
-      }
-      .jiaobiao2,
-      .jiaobiao5 {
-        background-position: -31px -30px;
-      }
-      .jiaobiao3,
-      .jiaobiao6 {
-        background-position: -60px -30px;
-      }
    }
    > div:nth-child(3n) {
      border-right: none;
--- a/buyer/src/components/indexDecorate/modelList/Recommend.vue
+++ b/buyer/src/components/indexDecorate/modelList/Recommend.vue
@@ -83,12 +83,17 @@ export default {
    width: 595px;
    .content-left {
      display: flex;
+      align-items: stretch;
      padding-top: 10px;
      font-size: 12px;
+      box-sizing: content-box;
      > div:nth-child(1) {
        width: 189px;
        border-right: 1px solid #eee;
        height: 360px;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
        img {
          margin: 40px 0 0 15px;
        }
@@ -106,15 +111,20 @@ export default {
          color: #999;
        }
        .view-btn {
-          margin-left: 15px;
-          margin-top: 10px;
+          align-self: center;
+          width: 145px;
+          margin-top: auto;
+          margin-bottom: 15px;
          color: #fff;
        }
      }
      > div:nth-child(2) {
        width: 405px;
+        height: 360px;
        display: flex;
        flex-wrap: wrap;
+        align-content: flex-start;
+        box-sizing: border-box;
        > div {
          display: flex;
          align-items: center;
@@ -145,7 +155,7 @@ export default {
      grid-template-rows: repeat(2, 1fr);
      height: 360px;
      padding-top: 10px;
-      box-sizing: border-box;
+      box-sizing: content-box;

      > div {
        width: 100%;
--- a/buyer/src/components/indexDecorate/modelList/forYour.vue
+++ b/buyer/src/components/indexDecorate/modelList/forYour.vue
@@ -2,14 +2,14 @@
  <div class="model" v-if="data">
    <div class="for-your">{{ data.options.title }}</div>
    <div class="flex card">
-      <div class="left">
+      <div class="left hover-pointer" @click="linkTo(data.options.data.image.url)">
        <img :src="data.options.data.image.src" alt="" />
      </div>
      <div class="right flex">
        <!-- 商品区 -->
-        <div class="goods-list">
+        <div class="for-your-goods-list">
          <div
-            class="goods-item"
+            class="for-your-goods-item"
            :key="index"
            v-for="(item, index) in data.options.data.list"
            @click="linkTo(item.url)"
@@ -65,14 +65,18 @@ export default {
 </script>

 <style scoped lang="scss">
-.goods-list {
+.for-your-goods-list {
  display: flex;
+  flex: 0 0 558px;
  width: 558px;
  flex-wrap: wrap;
+  column-gap: 0;
 }
-.goods-item {
+.for-your-goods-item {
+  flex: 0 0 278px;
  width: 278px;
  height: 277px;
+  min-width: 0;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
@@ -84,10 +88,8 @@ export default {
    border-top: 1.4px solid #e2e2e2;
  }
  &:hover {
-    :deep .goods-name {
-      color: $theme_color;
-    }
-    :deep .goods-desc {
+    .goods-name,
+    .goods-desc {
      color: $theme_color;
    }
  }
@@ -105,10 +107,12 @@ export default {
  color: #333333;
 }
 .goods-img {
+  display: block;
  width: 190px;
  height: 156px;
-  margin-top: 19px;
+  margin: 19px auto 0;
  border-radius: 10px;
+  object-fit: contain;
 }
 .goods-desc {
  font-size: 14px;
@@ -137,6 +141,8 @@ export default {
  background: #ffffff;
  border-radius: 10px;
  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
  box-shadow: 0px 1px 13px 0px #E5E5E5;

  &:hover {
@@ -159,20 +165,27 @@ export default {
  }
 }
 .left {
+  flex: 0 0 346px;
  width: 346px;
  height: 554px;
  border-radius: 9.8px 0px 0px 9.8px;
+  overflow: hidden;
  > img {
-    max-width: 100%;
+    display: block;
+    width: 100%;
    height: 100%;
+    object-fit: cover;
  }
 }
 .right {
+  flex: 0 0 839px;
  width: 839px;
  height: 554px;
  border-radius: 0px 9.8px 9.8px 0px;
+  overflow: hidden;
 }
 .hot-list {
+  flex: 0 0 279px;
  width: 279px;
 }
 .hot-title {
@@ -201,8 +214,11 @@ export default {
  }

  > img {
+    flex-shrink: 0;
+    display: block;
    width: 76.3px;
    height: 77.7px;
+    object-fit: contain;
  }
 }
 .hot-goods {
--- a/buyer/src/components/indexDecorate/modelList/mixModel.vue
+++ b/buyer/src/components/indexDecorate/modelList/mixModel.vue
@@ -49,5 +49,6 @@ export default {
  background: #FFFFFF;
  box-shadow: 0px 1px 13px 0px #E5E5E5;
  position: relative;
+  overflow: hidden;
 }
 </style>
--- a/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
+++ b/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
@@ -1,20 +1,23 @@
 <template>
-  <div class="flex" v-if="data.options.right.model == 'brand'">
-    <div class="left-side" @click="linkTo(data.options.right.data.image.url)">
-      <img :src="data.options.right.data.image.src" alt="">
+  <div class="mix-panel flex" v-if="data.options.right.model == 'brand'">
+    <div class="left-side hover-pointer" @click="linkTo(data.options.right.data.image.url)">
+      <img :src="data.options.right.data.image.src" alt="" />
    </div>
    <div class="right-side">
      <div class="badge-box flex">
        <div class="round">
          <el-icon><ArrowRight /></el-icon>
        </div>
-
-
      </div>
      <div class="flex goods-list">
-        <div class="goods-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.right.data.list">
+        <div
+          class="goods-item flex hover-pointer"
+          @click="linkTo(item.url)"
+          :key="index"
+          v-for="(item, index) in data.options.right.data.list"
+        >
          <div class="goods-thumbnail">
-            <img :src="item.img" alt="">
+            <img :src="item.img" alt="" />
          </div>
        </div>
      </div>
@@ -23,63 +26,60 @@
 </template>

 <script>
-import { ArrowRight } from '@element-plus/icons-vue';
+import { ArrowRight } from "@element-plus/icons-vue";
+
 export default {
-  name: "mix-goods",
-  data() {
-    return {}
-  },
+  name: "mix-brand",
+  components: { ArrowRight },
  props: {
    data: {
      type: Object,
-      default: {}
-    }
+      default: () => ({}),
+    },
  },
-  components: { ArrowRight },
-  mounted() {
-
-  },
-  methods: {}
-}
+};
 </script>

 <style scoped lang="scss">
-.right-side{
-  width: 330px;
+.mix-panel {
+  height: 100%;
+  align-items: stretch;
+  overflow: hidden;
 }
-.goods-detail-title{
-  font-size: 13px;
-  font-weight: normal;
-  line-height: 16px;
-  text-align: center;
-  letter-spacing: 0px;
-  color: #333333;
-}
-.goods-detail-price{
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 17px;
-  letter-spacing: 0px;
-  color: $theme_color;
-  margin-top: 8px;
-  margin-bottom:10px;
-}
-.goods-thumbnail{
-  margin-left: 7px;
-  display: flex;
-  align-items: center;
-  >img{
-    width:90px;
-    height: 90px;
+
+.left-side {
+  flex-shrink: 0;
+  width: 254px;
+  height: 344px;
+
+  > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 9.8px 0 0 9.8px;
  }
 }
-.badge-box{
-  margin-top: 33px;
-  justify-content:right;
-  >.round{
+
+.right-side {
+  flex: 1;
+  min-width: 0;
+  height: 344px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.badge-box {
+  margin-top: 24px;
+  margin-bottom: 8px;
+  justify-content: flex-end;
+  flex-shrink: 0;
+
+  > .round {
    width: 17.5px;
    height: 17.5px;
-    opacity: 1;
    border-radius: 50%;
    text-align: center;
    line-height: 17.5px;
@@ -87,47 +87,48 @@ export default {
    margin-right: 17.5px;
  }
 }
-.goods-list{
-   width: 330px;
+
+.goods-list {
+  width: 100%;
+  box-sizing: border-box;
  flex-wrap: wrap;
-  justify-content:space-between;
-  padding: 0 16px;
+  justify-content: space-between;
+  align-content: flex-start;
+  padding: 0 16px 12px;
+  gap: 8px 0;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
-.goods-item{
+
+.goods-item {
  display: flex;
  align-items: center;
  justify-content: center;
-  width:50%;
-  height: 85px;
+  flex: 0 0 calc(50% - 4px);
+  width: calc(50% - 4px);
+  height: 82px;
  border-radius: 9.8px;
-  opacity: 1;
-  transition: .35s;
-  background: #FFFFFF;
-  margin-bottom:9px;
-
-
+  box-sizing: border-box;
+  overflow: hidden;
+  background: #ffffff;
+  transition: 0.35s;
+  cursor: pointer;
 }
-.left-side {
-  >img{
-    width: 254px;
-    height: 344px;
-    border-radius: 9.8px 0px 0px 9.8px;
-    opacity: 1;
+
+.goods-thumbnail {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > img {
+    max-width: 80px;
+    max-height: 76px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
  }
 }
-.badge {
-  width: 50px;
-  height: 27px;
-  line-height:27px;
-  border-radius: 13.3px 0px 0px 13.3px;
-  opacity: 1;
-  background: #F31947;
-  font-size: 12.6px;
-  font-weight: normal;
-  text-align: center;
-  letter-spacing: 0px;
-  color: #FFFFFF;
-  margin-top: 26px;
-  margin-bottom:17px;
-}
 </style>
--- a/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
+++ b/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
@@ -1,127 +1,149 @@
 <template>
-    <div class="flex" v-if="data.options.left.model == 'goods'">
-      <div class="left-side"  @click="linkTo(data.options.right.data.image.url)">
-        <img :src="data.options.left.data.image.src" alt="">
+  <div class="mix-panel flex" v-if="data.options.left.model == 'goods'">
+    <div class="left-side hover-pointer" @click="linkTo(data.options.left.data.image.url)">
+      <img :src="data.options.left.data.image.src" alt="" />
+    </div>
+    <div class="right-side">
+      <div class="badge-box flex">
+        <div class="badge hover-pointer" @click="linkTo(data.options.left.data.badge.url)">
+          {{ data.options.left.data.badge.label }}
+        </div>
      </div>
-      <div class="right-side">
-          <div class="badge-box flex">
-            <div class="badge"  @click="linkTo(data.options.right.data.image.url)">
-              {{data.options.left.data.badge.label}}
-            </div>
+      <div class="flex goods-list">
+        <div
+          class="goods-item flex hover-pointer"
+          @click="linkTo(item.url)"
+          :key="index"
+          v-for="(item, index) in data.options.left.data.list"
+        >
+          <div class="goods-thumbnail">
+            <img :src="item.img" alt="" />
          </div>
-          <div class="flex goods-list">
-
-            <div class="goods-item flex"  @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.left.data.list">
-              <div class="goods-thumbnail">
-                <img :src="item.img" alt="">
-              </div>
-              <div class="goods-detail">
-                <div class="goods-detail-title">{{item.title}}</div>
-                <div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
-              </div>
-            </div>
+          <div class="goods-detail">
+            <div class="goods-detail-title">{{ item.title }}</div>
+            <div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
          </div>
+        </div>
      </div>
    </div>
+  </div>
 </template>

 <script>
 export default {
  name: "mix-goods",
-  data() {
-    return {}
-  },
  props: {
    data: {
      type: Object,
-      default: {}
-    }
+      default: () => ({}),
+    },
  },
-  components: {},
-  mounted() {
-
-  },
-  methods: {}
-}
+};
 </script>

 <style scoped lang="scss">
-.right-side{
-  width: 387px;
+.mix-panel {
+  height: 100%;
+  align-items: stretch;
+  overflow: hidden;
 }
-.goods-detail-title{
+
+.left-side {
+  flex-shrink: 0;
+  width: 196.7px;
+  height: 344px;
+
+  > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 10px 0 0 10px;
+  }
+}
+
+.right-side {
+  flex: 1;
+  min-width: 0;
+  height: 344px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.goods-detail-title {
  font-size: 13px;
  font-weight: normal;
  line-height: 16px;
  text-align: center;
-  letter-spacing: 0px;
  color: #333333;
 }
-.goods-detail-price{
+
+.goods-detail-price {
  font-size: 14px;
  font-weight: normal;
  line-height: 17px;
-  letter-spacing: 0px;
-  color: #F31947;
+  color: #f31947;
  margin-top: 8px;
-  margin-bottom:10px;
 }
-.goods-thumbnail{
+
+.goods-thumbnail {
  margin-left: 7px;
  display: flex;
  align-items: center;
-  >img{
-    width:90px;
+  flex-shrink: 0;
+
+  > img {
+    width: 90px;
    height: 90px;
+    object-fit: contain;
  }
 }
-.badge-box{

-  justify-content:right;
+.badge-box {
+  justify-content: flex-end;
+  flex-shrink: 0;
 }
-.goods-list{
-  width: 387px;
+
+.goods-list {
+  width: 100%;
+  box-sizing: border-box;
  flex-wrap: wrap;
-  justify-content:space-between;
+  justify-content: space-between;
  padding: 0 16px;
+  gap: 9px 0;
 }
-.goods-item{
+
+.goods-item {
  cursor: pointer;
  display: flex;
  align-items: center;
-  width: 173.6px;
+  flex: 0 0 calc(50% - 4px);
+  width: calc(50% - 4px);
  height: 119px;
  border-radius: 9.8px;
-  opacity: 1;
-  transition: .35s;
-  background: #FFFFFF;
-  margin-bottom:9px;
-  &:hover{
-    box-shadow: 0px 1px 6px 0px #E5E5E5;
-  }
+  box-sizing: border-box;
+  overflow: hidden;
+  background: #ffffff;
+  transition: 0.35s;

-}
-.left-side {
-  >img{
-    border-radius: 10px 0px 0px 10px;
-    display: block;
-    width: 196.7px;
-    height: 343.7px;
+  &:hover {
+    box-shadow: 0 1px 6px 0 #e5e5e5;
  }
 }
+
 .badge {
  width: 50px;
  height: 27px;
-  line-height:27px;
-  border-radius: 13.3px 0px 0px 13.3px;
-  opacity: 1;
-  background: #F31947;
+  line-height: 27px;
+  border-radius: 13.3px 0 0 13.3px;
+  background: #f31947;
  font-size: 12.6px;
-  font-weight: normal;
  text-align: center;
-  letter-spacing: 0px;
-  color: #FFFFFF;
+  color: #ffffff;
  margin-top: 26px;
-  margin-bottom:17px;
+  margin-bottom: 17px;
 }
 </style>
--- a/buyer/src/components/indexDecorate/modelList/oneRowThreeColumns.vue
+++ b/buyer/src/components/indexDecorate/modelList/oneRowThreeColumns.vue
@@ -1,7 +1,12 @@
 <template>
    <div class="line flex flex-a-c flex-j-sb">
-        <div class="column" v-for="(item,index) in data.options.list" :key="index">
-          <img  :src="item.img" class="three-column-img">
+        <div
+          class="column hover-pointer"
+          v-for="(item, index) in data.options.list"
+          :key="index"
+          @click="linkTo(item.url)"
+        >
+          <img :src="item.img" class="three-column-img" alt="" />
        </div>
    </div>
 </template>
@@ -25,12 +30,18 @@ export default {
 </script>

 <style scoped lang="scss">
-.column{
+.line {
+  width: 100%;
+}
+.column {
  width: 385px;
  height: 165px;
-  >img{
+  cursor: pointer;
+  > img {
+    display: block;
    width: 100%;
    height: 100%;
+    object-fit: cover;
  }
 }
 </style>
--- a/buyer/src/components/nav/CateNav.vue
+++ b/buyer/src/components/nav/CateNav.vue
@@ -184,7 +184,7 @@ export default {
          // 存放分类信息
          localStorage.setItem("category", JSON.stringify(res.result));
        }
-      });
+      }).catch(() => {});
    },
    showDetail(index) {
      // 展示全部分类
--- a/buyer/src/components/userCenter/Layout.vue
+++ b/buyer/src/components/userCenter/Layout.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="user-center-page">
+    <div class="user-center-title">{{ title }}</div>
+    <div class="user-center-panel">
+      <div v-if="showToolbar" class="user-center-toolbar">
+        <div class="user-center-tabs">
+          <div
+            v-for="(item, index) in tabs"
+            :key="index"
+            class="user-center-tab"
+            :class="{ active: activeTab === index }"
+            @click="$emit('tab-change', index)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="user-center-extra">
+          <slot name="extra">
+            <el-button v-if="moreText" type="primary" @click="handleMore">{{ moreText }}</el-button>
+          </slot>
+        </div>
+      </div>
+      <div class="user-center-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UserCenterLayout",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    tabs: {
+      type: Array,
+      default: () => [],
+    },
+    activeTab: {
+      type: Number,
+      default: 0,
+    },
+    moreText: {
+      type: String,
+      default: "",
+    },
+    moreTo: {
+      type: [String, Object],
+      default: "",
+    },
+  },
+  emits: ["tab-change", "more"],
+  computed: {
+    showToolbar() {
+      return this.tabs.length || this.moreText || this.$slots.extra;
+    },
+  },
+  methods: {
+    handleMore() {
+      this.$emit("more");
+      if (!this.moreTo) return;
+      if (typeof this.moreTo === "string") {
+        this.$router.push(this.moreTo);
+      } else {
+        this.$router.push(this.moreTo);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.user-center-page {
+  margin-bottom: 40px;
+}
+
+.user-center-title {
+  height: 54px;
+  line-height: 54px;
+  padding: 0 20px;
+  margin-bottom: 12px;
+  background: #fff;
+  border: 1px solid #eee;
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.user-center-panel {
+  padding: 0 16px 16px;
+  background: #fff;
+  border: 1px solid #eee;
+}
+
+.user-center-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 54px;
+  border-bottom: 1px solid #eee;
+}
+
+.user-center-tabs {
+  display: flex;
+  align-items: center;
+  height: 54px;
+}
+
+.user-center-tab {
+  position: relative;
+  height: 54px;
+  line-height: 54px;
+  margin-right: 28px;
+  color: #333;
+  cursor: pointer;
+
+  &:hover,
+  &.active {
+    color: $theme_color;
+  }
+
+  &.active::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    height: 2px;
+    background: $theme_color;
+  }
+}
+
+.user-center-extra {
+  display: flex;
+  align-items: center;
+}
+
+.user-center-content {
+  padding-top: 14px;
+}
+</style>