From 4777eb2dd63da6bc4fff186e57a278aae3baef1f Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Tue, 29 Sep 2026 18:11:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(buyer):=20=E6=96=B0=E5=A2=9E=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 `getMemberMessage` 接口方法，用于获取会员消息
- 调整全局及商品列表样式，提升可读性与一致性
- 精简 `Search.vue`，移除不必要的店铺搜索切换
- 放宽 `addressManage` 中地址别名的输入长度
- 优化 `ShowGoods.vue` 和 `ShowGoodsDetail.vue` 的布局与样式
- 更新 `Cart.vue` 中的购物车步骤展示，让流程导航更清晰
- 调整多个组件，统一字号并优化界面元素
---
 buyer/src/api/member.js                       |   9 +
 buyer/src/assets/styles/global.scss           |   9 +-
 buyer/src/assets/styles/goodsList.scss        |  11 +-
 buyer/src/components/Search.vue               |  21 +-
 buyer/src/components/addressManage/index.vue  |   4 +-
 .../src/components/goodsDetail/ShowGoods.vue  | 200 ++--
 .../goodsDetail/ShowGoodsDetail.vue           | 888 +++++++++---------
 buyer/src/components/header/Header.vue        |  18 +-
 buyer/src/components/map/multiple-map.vue     |   6 +-
 buyer/src/components/nav/CateNav.vue          | 188 ++--
 buyer/src/components/nav/GoodsClassNav.vue    | 611 ++++++------
 buyer/src/components/userCenter/Layout.vue    |  23 +-
 buyer/src/pages/Cart.vue                      | 176 ++--
 buyer/src/pages/GoodsDetail.vue               |  59 +-
 buyer/src/pages/GoodsList.vue                 | 159 ++--
 buyer/src/pages/Index.vue                     |   4 +-
 buyer/src/pages/Login.vue                     | 538 +++++------
 buyer/src/pages/Merchant.vue                  | 476 +++++++---
 buyer/src/pages/SignUp.vue                    | 356 ++++---
 buyer/src/pages/article/index.vue             | 261 +++--
 buyer/src/pages/home/enumeration.js           |   2 +-
 .../pages/home/memberCenter/AccountSafe.vue   |   6 +-
 .../pages/home/memberCenter/CommentList.vue   | 293 +++---
 .../home/memberCenter/ComplainDetail.vue      |   4 +-
 .../pages/home/memberCenter/ComplainList.vue  | 300 +++---
 .../src/pages/home/memberCenter/Favorites.vue | 282 ++++--
 .../pages/home/memberCenter/MemberGrade.vue   | 387 +++++---
 .../src/pages/home/memberCenter/ModifyPwd.vue |  30 +-
 buyer/src/pages/home/memberCenter/Point.vue   | 143 ++-
 buyer/src/pages/home/memberCenter/Profile.vue | 439 +++++----
 .../home/memberCenter/evaluation/AddEval.vue  |   6 +-
 .../memberCenter/evaluation/EvalDetail.vue    | 339 ++++---
 .../home/memberCenter/memberMsg/MsgDetail.vue | 133 ++-
 .../home/memberCenter/memberMsg/MsgList.vue   | 169 +++-
 .../src/pages/home/orderCenter/AddAddress.vue |   4 +-
 .../src/pages/home/orderCenter/AfterSale.vue  | 409 +++++---
 .../home/orderCenter/AfterSaleDetail.vue      | 458 ++++++---
 .../pages/home/orderCenter/ApplyAfterSale.vue |   4 +-
 buyer/src/pages/home/orderCenter/Complain.vue |   4 +-
 .../src/pages/home/orderCenter/MyAddress.vue  |   2 +-
 buyer/src/pages/home/orderCenter/MyOrder.vue  | 459 +++++----
 .../pages/home/orderCenter/OrderDetail.vue    | 400 +++++---
 buyer/src/pages/home/userCenter/Coupons.vue   |  71 +-
 .../pages/home/userCenter/MoneyManagement.vue | 409 +++++---
 .../src/pages/home/userCenter/MyGiftCards.vue |  13 +-
 buyer/src/pages/home/userCenter/MyTracks.vue  | 115 ++-
 buyer/src/pages/payment/Pay.vue               | 756 ++++++++-------
 buyer/src/pages/payment/PayMent.vue           |   2 +-
 buyer/src/pages/payment/ThirdPay.vue          |   2 +-
 buyer/src/pages/shopEntry/FirstApply.vue      |   2 +-
 buyer/src/pages/shopEntry/ThirdApply.vue      |   2 +-
 buyer/src/pages/user/Home.vue                 |  43 +-
 buyer/src/router/index.js                     |   2 +-
 buyer/src/utils/buyerLogin.js                 |  47 +-
 54 files changed, 5816 insertions(+), 3938 deletions(-)

diff --git a/buyer/src/api/member.js b/buyer/src/api/member.js
index e0305eb14..bbe177de8 100644
--- a/buyer/src/api/member.js
+++ b/buyer/src/api/member.js
@@ -446,6 +446,15 @@ export function memberMsgList (params) {
  * @param {String} messageId 消息id
  */
 
+export function getMemberMessage (id) {
+  return request({
+    url: `/buyer/message/member/${id}`,
+    method: Method.GET,
+    needToken: true,
+    skipMessage: true
+  });
+}
+
 export function readMemberMsg (id) {
   return request({
     url: `/buyer/message/member/${id}`,
diff --git a/buyer/src/assets/styles/global.scss b/buyer/src/assets/styles/global.scss
index 7f5103e9e..3fa954986 100644
--- a/buyer/src/assets/styles/global.scss
+++ b/buyer/src/assets/styles/global.scss
@@ -355,16 +355,17 @@ li {
     margin-top: 6px;
   }
   .goods-show-detail {
-    font-size: 12px;
+    font-size: 14px;
+    line-height: 21px;
     margin: 6px 0px;
   }
   .goods-show-num {
-    font-size: 12px;
+    font-size: 14px;
     margin-bottom: 6px;
     color: #666;
   }
   .goods-show-num {
-    font-size: 12px;
+    font-size: 14px;
     margin-bottom: 6px;
     color: #009688;
   }
@@ -373,7 +374,7 @@ li {
     font-weight: bold;
   }
   .goods-show-seller {
-    font-size: 12px;
+    font-size: 14px;
     color: $theme_color;
   }
   .goods-page {
diff --git a/buyer/src/assets/styles/goodsList.scss b/buyer/src/assets/styles/goodsList.scss
index 30b17b936..7be01552e 100644
--- a/buyer/src/assets/styles/goodsList.scss
+++ b/buyer/src/assets/styles/goodsList.scss
@@ -36,8 +36,9 @@
   margin-top: 6px;
 }
 .goods-show-detail {
-  height: 36px;
-  font-size: 12px;
+  height: 42px;
+  font-size: 14px;
+  line-height: 21px;
   margin: 6px 0px;
   overflow:hidden;
   text-overflow: ellipsis;
@@ -51,12 +52,12 @@
   color:#E23A3A;
 }
 .goods-show-num {
-  font-size: 12px;
+  font-size: 14px;
   margin-bottom: 6px;
   color: #666;
 }
 .goods-show-num {
-  font-size: 12px;
+  font-size: 14px;
   margin-bottom: 6px;
   color: #009688;
 }
@@ -65,7 +66,7 @@
   font-weight: bold;
 }
 .goods-show-seller {
-  font-size: 12px;
+  font-size: 14px;
   color: $theme_color;
 }
 .goods-page {
diff --git a/buyer/src/components/Search.vue b/buyer/src/components/Search.vue
index f5b47e1e5..96d6ffc42 100644
--- a/buyer/src/components/Search.vue
+++ b/buyer/src/components/Search.vue
@@ -37,10 +37,6 @@
             </div>
           </div>
           <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
@@ -88,15 +84,9 @@ export default {
       default:''
     }
   },
-  watch:{
-    storeId(val){
-      this.onlyStore = val ? true : false
-    }
-  },
   data() {
     return {
       searchData: '', // 搜索内容
-      onlyStore:false,
     };
   },
   methods: {
@@ -104,9 +94,6 @@ export default {
       this.searchData = item;
       this.search();
     },
-    research(){
-      this.onlyStore = !this.onlyStore
-    },
     search () { // 全平台搜索商品
       const url = this.$route.path;
       if(url == '/goodsList'){
@@ -116,8 +103,7 @@ export default {
           path:'/goodsList',
           query: { keyword: this.searchData },
         }
-        if(this.storeId && this.onlyStore) pushData.query.storeId = this.storeId
-
+        if(this.storeId) pushData.query.storeId = this.storeId
 
         this.$router.push(pushData);
       }
@@ -162,11 +148,6 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.only-store{
-  text-align: right;
-  color:$theme_color;
-  cursor: pointer;
-}
 .navbar {
   height: 113px;
   background: #fff;
diff --git a/buyer/src/components/addressManage/index.vue b/buyer/src/components/addressManage/index.vue
index a286a4784..99397b783 100644
--- a/buyer/src/components/addressManage/index.vue
+++ b/buyer/src/components/addressManage/index.vue
@@ -24,8 +24,8 @@
         <el-form-item label="地址别名">
           <el-input
             v-model="formData.alias"
-            length
-            :maxlength="4"
+            :maxlength="5"
+            show-word-limit
             placeholder="请输入地址别名，例如公司"
             style="width: 600px"
           ></el-input>
diff --git a/buyer/src/components/goodsDetail/ShowGoods.vue b/buyer/src/components/goodsDetail/ShowGoods.vue
index 2e74b747d..a18a92b88 100644
--- a/buyer/src/components/goodsDetail/ShowGoods.vue
+++ b/buyer/src/components/goodsDetail/ShowGoods.vue
@@ -19,6 +19,7 @@
 
           <div
             class="item-detail-img-small"
+            :class="{ 'is-active': imgIndex === index }"
             @mouseover="imgIndex = index"
             v-for="(item, index) in imgList"
             :key="index"
@@ -84,7 +85,7 @@
             >
               <p>
                 <span class="item-price-title" v-if="promotionMap['SECKILL']"
-                  >秒 &nbsp;杀&nbsp;价</span>
+                  >秒杀价</span>
                 <span class="item-price">{{ $filters.unitPrice(skuDetail.promotionPrice, "￥") }}</span>
                 <span class="item-price-old">{{ $filters.unitPrice(skuDetail.price, "￥") }}</span>
               </p>
@@ -94,9 +95,7 @@
               <!-- 批发价格 -->
               <div v-if="!isECouponGoods && wholesaleNum && wholesaleNum.length">
                 <div class="flex">
-                  <div class="item-price-title">
-                    价 &nbsp;&nbsp;&nbsp;&nbsp;格
-                  </div>
+                  <div class="item-price-title">价格</div>
 
                   <div
                     v-for="(item, index) in wholesalePrice"
@@ -107,7 +106,7 @@
                   </div>
                 </div>
                 <div class="flex">
-                  <div class="item-price-title">起 批 量</div>
+                  <div class="item-price-title">起批量</div>
                   <div
                     v-for="(item, index) in wholesaleNum"
                     :key="index"
@@ -120,15 +119,14 @@
 
               <!-- 普通价格 -->
               <div v-else>
-                <span class="item-price-title"
-                  >价 &nbsp;&nbsp;&nbsp;&nbsp;格</span>
+                <span class="item-price-title">价格</span>
                 <span class="item-price">{{ $filters.unitPrice(skuDetail.price, "￥") }}</span>
               </div>
             </div>
             <!-- 优惠券展示 -->
             <div class="item-price-coupon-row" v-if="promotionMap['COUPON'].length">
               <div class="Ellipsis">
-                <span class="item-price-title">优 惠 券</span>
+                <span class="item-price-title">优惠券</span>
                 <span>
                   <span
                     class="item-coupon"
@@ -168,7 +166,7 @@
             <!-- 限时折扣 -->
             <div class="item-price-row" v-if="promotionMap['DISCOUNT']">
               <p>
-                <span class="item-price-title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
+                <span class="item-price-title">促销</span>
                 <span class="item-promotion">限时折扣</span>
                 <span class="item-desc-pintuan" v-if="promotionMap['DISCOUNT'].discount">
                   享 {{ promotionMap["DISCOUNT"].discount }} 折
@@ -178,7 +176,7 @@
             <!-- 第N件优惠 -->
             <div class="item-price-row" v-if="promotionMap['NTH']">
               <p>
-                <span class="item-price-title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
+                <span class="item-price-title">促销</span>
                 <span class="item-promotion">第N件</span>
                 <span class="item-desc-pintuan">
                   第 {{ promotionMap["NTH"].nthNum || promotionMap["NTH"].num }} 件优惠
@@ -188,7 +186,7 @@
             <!-- 拼团 -->
             <div class="item-price-row" v-if="promotionMap['PINTUAN']">
               <p>
-                <span class="item-price-title">拼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;团</span>
+                <span class="item-price-title">拼团</span>
                 <span class="item-promotion">拼团价</span>
                 <span class="item-desc-pintuan" v-if="promotionMap['PINTUAN'].price">
                   {{ $filters.unitPrice(promotionMap["PINTUAN"].price, "￥") }}
@@ -198,8 +196,7 @@
             <!-- 满减展示 -->
             <div class="item-price-row" v-if="promotionMap['FULL_DISCOUNT']">
               <p>
-                <span class="item-price-title"
-                  >促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
+                <span class="item-price-title">促销</span>
                 <span class="item-promotion">满减</span>
                 <span
                   class="item-desc-pintuan"
@@ -300,7 +297,7 @@
             <div class="item-select-column">
               <div class="add-buy-car">
                 <el-button
-                  type="danger"
+                  class="goods-action-btn is-solid"
                   :loading="loading"
                   :disabled="skuDetail.quantity === 0"
                   @click="pointPay"
@@ -324,7 +321,7 @@
                   >加入购物车</el-button
                 >
                 <el-button
-                  class="goods-action-btn"
+                  class="goods-action-btn is-solid"
                   v-if="promotionMap['PINTUAN']"
                   :loading="loadingPintuan"
                   :disabled="isOutOfStock"
@@ -332,7 +329,7 @@
                   >拼团购买</el-button
                 >
                 <el-button
-                  class="goods-action-btn"
+                  class="goods-action-btn is-solid"
                   :loading="loading1"
                   :disabled="isOutOfStock"
                   @click="buyNow"
@@ -778,23 +775,28 @@ export default {
 .item-detail-show {
   width: 1200px;
   margin: 0 auto;
-  padding: 30px;
+  padding: 24px;
   display: flex;
   flex-direction: row;
+  background: #fff;
+  border-radius: 4px;
+  box-sizing: border-box;
 }
 
 .item-detail-left {
   width: 350px;
-
-  margin-right: 30px;
+  margin-right: 32px;
 }
 
 .item-detail-big-img {
   width: 350px;
   height: 350px;
-  box-shadow: 0px 0px 8px $border_color;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  overflow: hidden;
   cursor: pointer;
-  margin-bottom: 24px;
+  margin-bottom: 12px;
+  background: #fff;
 }
 #dplayer{
     width: 100%;
@@ -807,14 +809,21 @@ export default {
 .item-detail-img-row {
   margin-top: 0;
   display: flex;
+  gap: 8px;
 }
 
 .item-detail-img-small {
-  width: 68px;
-  height: 68px;
-  box-shadow: 0px 0px 8px #ccc;
+  width: 64px;
+  height: 64px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  overflow: hidden;
   cursor: pointer;
-  margin-left: 5px;
+  box-sizing: border-box;
+
+  &.is-active {
+    border-color: $theme_color;
+  }
 }
 
 .item-detail-img-small img {
@@ -838,14 +847,17 @@ export default {
 }
 
 .item-detail-name {
-  @include content_color($light_content_color);
-  font-weight: bold;
+  color: #171A26;
+  font-weight: 600;
   font-size: 20px;
-  line-height: 1.4;
+  line-height: 28px;
 }
 
 .goods-type-tag {
   flex-shrink: 0;
+  --el-tag-bg-color: #fafafa;
+  --el-tag-border-color: #eee;
+  --el-tag-text-color: #666;
 }
 
 .item-detail-express {
@@ -859,17 +871,18 @@ export default {
 /*商品标签*/
 .item-detail-tag {
   padding: 8px 0;
-  font-size: 12px;
+  font-size: 14px;
   color: $theme_color;
 }
 
 /*价格详情等*/
 .item-detail-price-row {
-  padding: 10px;
+  padding: 16px 20px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  background: url("../../assets/images/goodsDetail/price-bg.png");
+  background: #fafafa;
+  border-radius: 4px;
 }
 
 .item-price-left {
@@ -878,19 +891,30 @@ export default {
 }
 
 .item-price-title {
-  color: #999999;
+  display: inline-block;
+  width: 56px;
+  margin-right: 12px;
+  color: #666;
   font-size: 14px;
-  margin-right: 15px;
+  text-align: left;
 }
 
 .item-price-row {
-  margin: 5px 0px;
+  margin: 4px 0;
+
+  > div,
+  > p {
+    display: flex;
+    align-items: center;
+    margin: 0;
+  }
 }
 
 .item-price {
   color: $theme_color;
-  font-size: 20px;
-  cursor: pointer;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1;
 }
 .item-price-old {
   color: gray;
@@ -925,7 +949,7 @@ export default {
   align-items: center;
   color: $theme_color;
   margin: 5px 0;
-  font-size: 12px;
+  font-size: 14px;
   background-color: var(--theme-tint-12, #ffdedf);
   border: 1px dotted $theme_color;
   cursor: pointer;
@@ -950,7 +974,7 @@ export default {
   margin-right: 5px;
   padding: 0 5px;
   color: $theme_color;
-  font-size: 12px;
+  font-size: 14px;
   background-color: var(--theme-tint-12, #ffdedf);
   border: 1px dotted $theme_color;
   cursor: pointer;
@@ -963,7 +987,7 @@ export default {
   margin-right: 5px;
   padding: 3px;
   color: $theme_color;
-  font-size: 12px;
+  font-size: 14px;
   border: 1px solid $theme_color;
 }
 
@@ -974,22 +998,25 @@ export default {
 }
 
 .item-remarks-sum {
-  width: 70px;
+  min-width: 72px;
   text-align: center;
-  padding: 0 10px;
-  border-left: 1px solid $border_color;
+  padding: 0 4px 0 16px;
+  border-left: 1px solid #eee;
 }
 
 .item-remarks-sum p {
-  color: #999999;
-  font-size: 12px;
-  line-height: 10px;
+  color: #999;
+  font-size: 13px;
+  line-height: 20px;
   text-align: center;
+  margin: 0;
 }
 
 .item-remarks-num {
-  line-height: 18px;
-  color: #005eb7;
+  line-height: 24px;
+  color: #171A26;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .item-select {
@@ -1000,10 +1027,10 @@ export default {
 }
 
 .item-select-title {
-  @include content_color($light_content_color);
+  color: #666;
   font-size: 14px;
-  margin-right: 15px;
-  width: 60px;
+  margin-right: 16px;
+  width: 56px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -1033,32 +1060,39 @@ export default {
 }
 
 .item-select-box {
-  padding: 5px;
+  min-height: 36px;
+  padding: 0 16px;
   margin-right: 8px;
-  @include background_color($light_background_color);
-  border: 0.5px solid $border_color;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
   cursor: pointer;
-  @include content_color($light_content_color);
+  color: #171A26;
+  box-sizing: border-box;
 }
 
 .item-select-box:hover {
-  border: 0.5px solid $theme_color;
+  border-color: $theme_color;
+  color: $theme_color;
 }
 
 .item-select-box-active {
-  border: 0.5px solid $theme_color;
+  border-color: $theme_color;
+  background: #fff5f4;
+  color: $theme_color;
 }
 
 .item-select-intro p {
-  margin: 0px;
-  padding: 5px;
+  margin: 0;
+  padding: 8px 0;
+  font-size: 14px;
+  line-height: 20px;
 }
 
 .add-buy-car-box {
   width: 100%;
-
-  margin-top: 15px;
-  border-top: 1px dotted $border_color;
+  margin-top: 8px;
+  border-top: 1px solid #f0f0f0;
 }
 
 .e-coupon-after-sale-notice {
@@ -1072,7 +1106,7 @@ export default {
   }
 
   :deep(.el-alert__title) {
-    font-size: 12px;
+    font-size: 14px;
     line-height: 1.5;
   }
 }
@@ -1107,23 +1141,36 @@ export default {
   }
 
   .goods-action-btn {
-    background-color: #ff475d !important;
-    border-color: #ff475d !important;
-    color: #fff !important;
+    height: 40px;
+    min-width: 140px;
+    padding: 0 24px;
+    border-radius: 4px;
+    font-size: 16px;
+    background: #fff !important;
+    border: 1px solid $theme_color !important;
+    color: $theme_color !important;
 
     &:hover,
     &:focus {
-      background-color: #e63e52 !important;
-      border-color: #e63e52 !important;
+      background: #fff5f4 !important;
+      border-color: $theme_color !important;
+      color: $theme_color !important;
+    }
+
+    &.is-solid {
+      background: $theme_color !important;
       color: #fff !important;
+
+      &:hover,
+      &:focus {
+        background: $theme_color !important;
+        color: #fff !important;
+      }
     }
 
     &.is-disabled,
     &.is-disabled:hover,
     &.is-disabled:focus {
-      background-color: #ff475d !important;
-      border-color: #ff475d !important;
-      color: #fff !important;
       opacity: 0.5;
     }
   }
@@ -1160,9 +1207,16 @@ export default {
   }
 }
 .sell-point {
-  font-size: 12px;
-  color: red;
-  margin-bottom: 5px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #999;
+  margin-bottom: 12px;
+}
+
+.inventory {
+  padding-left: 8px;
+  color: #999;
+  font-size: 13px;
 }
 .view-video{
   cursor: pointer;
diff --git a/buyer/src/components/goodsDetail/ShowGoodsDetail.vue b/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
index 0e325bb0f..c7bb499ae 100644
--- a/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
+++ b/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
@@ -1,118 +1,121 @@
 <template>
-  <div style="height:auto;">
-    <div class="item-intro-show">
-      <div class="item-intro-detail" ref="itemIntroDetail">
-        <div class="item-intro-nav item-tabs">
-          <el-tabs v-model="activeDetailTab" @tab-click="(tab) => tabClick(tab.paneName)">
-            <el-tab-pane label="商品介绍" name="intro">
-              <div class="item-intro-img" ref="itemIntroGoods">
-                <div class="item-intro" v-html="skuDetail.intro" v-if="skuDetail.intro"></div>
-                <div v-else style="margin:20px;">暂无商品介绍</div>
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="商品评价" name="comment">
-              <div class="remarks-container" ref="itemGoodsComment">
-                <div class="remarks-analyse-box">
-                  <div class="remarks-analyse-goods">
-                    <el-progress type="circle" :percentage="Number(skuDetail.grade) || 0" color="#5cb85c" :width="120">
-                      <template #default>
-                        <span class="remarks-analyse-num">{{ skuDetail.grade }}%</span>
-                        <p class="remarks-analyse-title">好评率</p>
-                      </template>
-                    </el-progress>
-                  </div>
-                </div>
-                <div class="remarks-bar">
-                  <span @click="viewByGrade('')" :class="{selectedBar: commentParams.grade === ''}">全部({{commentTypeNum.all}})</span>
-                  <span @click="viewByGrade('GOOD')" :class="{selectedBar: commentParams.grade === 'GOOD'}">好评({{commentTypeNum.good}})</span>
-                  <span @click="viewByGrade('MODERATE')" :class="{selectedBar: commentParams.grade === 'MODERATE'}">中评({{commentTypeNum.moderate}})</span>
-                  <span @click="viewByGrade('WORSE')" :class="{selectedBar: commentParams.grade === 'WORSE'}">差评({{commentTypeNum.worse}})</span>
-                </div>
-                <div style="text-align: center;margin-top: 20px;" v-if="commentList.length === 0">
-                  暂无评价数据
-                </div>
-                <div class="remarks-box" v-for="(item,index) in commentList" :key="index" v-else>
-                  <div class="remarks-user">
-                    <el-avatar :src="item.memberProfile" :size="40" />
-                    <span class="remarks-user-name">{{ $filters.secrecyMobile(item.memberName ) }}</span>
-                  </div>
-                  <div class="remarks-content-box">
-                    <p>
-                      <el-rate
-                        disabled
-                        :model-value="Number(item.descriptionScore) || 0"
-                        allow-half
-                        class="remarks-star"
-                        :colors="['var(--theme-color)', 'var(--theme-color)', 'var(--theme-color)']"
-                      ></el-rate>
-                    </p>
-                    <p class="remarks-content">{{item.content}}</p>
-                    <div class="comment-img" v-if="item.images">
-                      <div v-for="(img, imgIndex) in item.images.split(',')"
-                       @click="previewImg(img, item)"
-                       :class="{borderColor:img === item.previewImg}"
-                       :key="imgIndex">
-                        <img :src="img" alt="">
-                      </div>
-                    </div>
+  <div class="goods-detail-extra">
+    <div class="detail-anchor" ref="tabNav" :class="{ 'is-stuck': anchorStuck }">
+      <button
+        v-for="tab in detailTabs"
+        :key="tab.name"
+        type="button"
+        class="detail-anchor__item"
+        :class="{ 'is-active': activeDetailTab === tab.name }"
+        @click="scrollToSection(tab.name)"
+      >{{ tab.label }}</button>
+    </div>
 
-                    <div class="preview-img"  v-if="item.previewImg"  @click.prevent="hidePreviewImg(item)">
-                      <div>
-                        <span @click.stop="rotatePreviewImg(0, item)"><el-icon><Refresh /></el-icon>左转</span>
-                        <span @click.stop="rotatePreviewImg(1, item)"><el-icon><Refresh /></el-icon>右转</span>
-                      </div>
-                      <img :src="item.previewImg" :style="{transform:`rotate(${item.deg}deg)`}" width="198" alt="">
-                    </div>
-                    <p class="remarks-sub">
-                      <span class="remarks-item">{{item.goodsName}}</span>
-                      <span class="remarks-time">{{item.createTime}}</span>
-                    </p>
-
-                    <!-- 商家回复 -->
-                    <div class="reply" v-if="item.reply">
-                      <p>商家回复</p>
-                      <div>
-                        <p class="remarks-content">{{ item.reply }}</p>
-                        <div>
-                          <div class="comment-img" v-if="item.replyImage">
-                            <div
-                              v-for="(img, imgIndex) in item.replyImage.split(',')"
-                              :key="imgIndex"
-                              :class="{ borderColor: img === item.previewImg }"
-                              @click="previewImg(img, item)"
-                            >
-                              <img :src="img" alt="">
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                  </div>
-                </div>
-                <div class="remarks-page">
-                  <el-pagination v-model:current-page="commentParams.pageNumber" v-model:page-size="commentParams.pageSize"
-                    :total="commentTotal" small
-                    @current-change="changePageNum"
-                    @size-change="changePageSize"
-                     layout="prev, pager, next"></el-pagination>
-                </div>
-              </div>
-            </el-tab-pane>
-            <el-tab-pane label="商品参数">
-              <template v-if="goodsParamsList.length">
-                <div class="item-param-container">
-                  <div class="item-param-box" v-for="param in goodsParamsList" :key="param.paramId || param.paramName">
-                    <span class="item-param-title">{{ param.paramName }}：</span>
-                    <span class="item-param-content">{{ param.paramValue || '-' }}</span>
-                  </div>
-                </div>
-              </template>
-              <div v-else>暂无商品参数</div>
-            </el-tab-pane>
-          </el-tabs>
+    <div class="detail-panel">
+      <section class="detail-section" ref="intro">
+        <h3 class="detail-section__title">商品介绍</h3>
+        <div class="item-intro-img" v-if="skuDetail.intro">
+          <div class="item-intro" v-html="skuDetail.intro"></div>
         </div>
-      </div>
+        <div class="detail-empty" v-else>暂无商品介绍</div>
+      </section>
+
+      <section class="detail-section" ref="comment">
+        <h3 class="detail-section__title">商品评价</h3>
+        <div class="remarks-container">
+          <div class="remarks-summary">
+            <div class="remarks-score">
+              <div class="remarks-score-value">{{ skuDetail.grade || 0 }}<em>%</em></div>
+              <div class="remarks-score-label">好评率</div>
+            </div>
+            <div class="remarks-bar">
+              <span @click="viewByGrade('')" :class="{ selectedBar: commentParams.grade === '' }">全部({{ commentTypeNum.all || 0 }})</span>
+              <span @click="viewByGrade('GOOD')" :class="{ selectedBar: commentParams.grade === 'GOOD' }">好评({{ commentTypeNum.good || 0 }})</span>
+              <span @click="viewByGrade('MODERATE')" :class="{ selectedBar: commentParams.grade === 'MODERATE' }">中评({{ commentTypeNum.moderate || 0 }})</span>
+              <span @click="viewByGrade('WORSE')" :class="{ selectedBar: commentParams.grade === 'WORSE' }">差评({{ commentTypeNum.worse || 0 }})</span>
+            </div>
+          </div>
+
+          <div class="detail-empty" v-if="commentList.length === 0">暂无评价数据</div>
+          <template v-else>
+          <div class="remarks-box" v-for="(item, index) in commentList" :key="index">
+            <div class="remarks-user">
+              <el-avatar :src="item.memberProfile" :size="40" />
+              <span class="remarks-user-name">{{ $filters.secrecyMobile(item.memberName) }}</span>
+            </div>
+            <div class="remarks-content-box">
+              <el-rate
+                disabled
+                :model-value="Number(item.descriptionScore) || 0"
+                allow-half
+                class="remarks-star"
+                :colors="['var(--theme-color)', 'var(--theme-color)', 'var(--theme-color)']"
+              ></el-rate>
+              <p class="remarks-content">{{ item.content }}</p>
+              <div class="comment-img" v-if="item.images">
+                <div
+                  v-for="(img, imgIndex) in item.images.split(',')"
+                  @click="previewImg(img, item)"
+                  :class="{ borderColor: img === item.previewImg }"
+                  :key="imgIndex"
+                >
+                  <img :src="img" alt="">
+                </div>
+              </div>
+
+              <div class="preview-img" v-if="item.previewImg" @click.prevent="hidePreviewImg(item)">
+                <div>
+                  <span @click.stop="rotatePreviewImg(0, item)"><el-icon><Refresh /></el-icon>左转</span>
+                  <span @click.stop="rotatePreviewImg(1, item)"><el-icon><Refresh /></el-icon>右转</span>
+                </div>
+                <img :src="item.previewImg" :style="{ transform: `rotate(${item.deg || 0}deg)` }" width="198" alt="">
+              </div>
+              <p class="remarks-sub">
+                <span class="remarks-item">{{ item.goodsName }}</span>
+                <span class="remarks-time">{{ item.createTime }}</span>
+              </p>
+
+              <div class="reply" v-if="item.reply">
+                <p>商家回复</p>
+                <p class="remarks-content">{{ item.reply }}</p>
+                <div class="comment-img" v-if="item.replyImage">
+                  <div
+                    v-for="(img, imgIndex) in item.replyImage.split(',')"
+                    :key="imgIndex"
+                    :class="{ borderColor: img === item.previewImg }"
+                    @click="previewImg(img, item)"
+                  >
+                    <img :src="img" alt="">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          </template>
+          <div class="remarks-page" v-if="commentTotal > commentParams.pageSize">
+            <el-pagination
+              v-model:current-page="commentParams.pageNumber"
+              v-model:page-size="commentParams.pageSize"
+              :total="commentTotal"
+              small
+              @current-change="changePageNum"
+              @size-change="changePageSize"
+              layout="prev, pager, next"
+            ></el-pagination>
+          </div>
+        </div>
+      </section>
+
+      <section class="detail-section" ref="params">
+        <h3 class="detail-section__title">商品参数</h3>
+        <div class="item-param-grid" v-if="goodsParamsList.length">
+          <div class="item-param-cell" v-for="param in goodsParamsList" :key="param.paramId || param.paramName">
+            <span class="item-param-title">{{ param.paramName }}</span>
+            <span class="item-param-content">{{ param.paramValue || '-' }}</span>
+          </div>
+        </div>
+        <div class="detail-empty" v-else>暂无商品参数</div>
+      </section>
     </div>
   </div>
 </template>
@@ -120,32 +123,39 @@
 <script>
 import { Refresh } from '@element-plus/icons-vue';
 import { goodsComment, goodsCommentNum } from '@/api/member.js';
+
 export default {
   components: { Refresh },
   name: 'ShowGoodsDetail',
   props: {
-    detail: { // 商品详情
+    detail: {
       type: Object,
       default: null
     }
   },
   data () {
     return {
-      activeDetailTab: "intro",
-      commentList: [], // 评论列表
-      commentParams: { // 评论传参
+      detailTabs: [
+        { name: 'intro', label: '商品介绍' },
+        { name: 'comment', label: '商品评价' },
+        { name: 'params', label: '商品参数' }
+      ],
+      activeDetailTab: 'intro',
+      anchorStuck: false,
+      lockScrollSpy: false,
+      scrollTimer: null,
+      commentList: [],
+      commentParams: {
         pageNumber: 1,
         pageSize: 10,
         grade: '',
         goodsId: ''
       },
-      commentTypeNum: {}, // 评论数量，包括好中差分别的数量
-      commentTotal: 0, // 评论总数
-      onceFlag: true // 只调用一次
+      commentTypeNum: {},
+      commentTotal: 0
     };
   },
   computed: {
-    // 商品详情
     skuDetail () {
       return this.detail.data;
     },
@@ -174,25 +184,53 @@ export default {
     }
   },
   methods: {
-    changeHeight (name) { // 设置商品详情高度
-      const el = this.$refs[name];
-      const container = this.$refs.itemIntroDetail;
-      if (!el || !container) return;
-      let heightCss = window.getComputedStyle(el).height;
-      heightCss = parseInt(heightCss, 10) + 89;
-      if (Number.isNaN(heightCss)) return;
-      container.style.height = heightCss + 'px';
+    getNavOffset () {
+      const nav = this.$refs.tabNav;
+      return (nav ? nav.offsetHeight : 52) + 8;
     },
-    changePageNum (val) { // 修改评论页码
+    scrollToSection (name) {
+      const el = this.$refs[name];
+      if (!el) return;
+      this.activeDetailTab = name;
+      this.lockScrollSpy = true;
+      const top = el.getBoundingClientRect().top + window.pageYOffset - this.getNavOffset();
+      window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
+      const unlock = () => {
+        this.lockScrollSpy = false;
+        window.removeEventListener('scrollend', unlock);
+      };
+      window.addEventListener('scrollend', unlock);
+      window.clearTimeout(this.scrollTimer);
+      this.scrollTimer = window.setTimeout(unlock, 900);
+    },
+    handleScroll () {
+      const nav = this.$refs.tabNav;
+      if (nav) {
+        this.anchorStuck = nav.getBoundingClientRect().top <= 1;
+      }
+      if (this.lockScrollSpy) return;
+      const offset = this.getNavOffset() + 16;
+      let current = '';
+      this.detailTabs.forEach((tab) => {
+        const el = this.$refs[tab.name];
+        if (el && el.getBoundingClientRect().top <= offset) {
+          current = tab.name;
+        }
+      });
+      if (current) {
+        this.activeDetailTab = current;
+      }
+    },
+    changePageNum (val) {
       this.commentParams.pageNumber = val;
       this.getList();
     },
-    changePageSize (val) { // 修改评论页数
+    changePageSize (val) {
       this.commentParams.pageNumber = 1;
       this.commentParams.pageSize = val;
       this.getList();
     },
-    getList () { // 获取评论列表
+    getList () {
       this.commentParams.goodsId = this.skuDetail.goodsId;
       goodsComment(this.commentParams).then(res => {
         if (res.success) {
@@ -206,387 +244,377 @@ export default {
         }
       });
     },
-    viewByGrade (grade) { // 好中差评切换
-      this.commentParams['grade'] = grade;
+    viewByGrade (grade) {
+      this.commentParams.grade = grade;
       this.commentParams.pageNumber = 1;
       this.getList();
     },
-    tabClick (name) { // 商品详情和评价之间的tab切换
-      if (name === "intro") {
-        this.$nextTick(() => {
-          this.changeHeight('itemIntroGoods')
-        });
-      } else {
-        this.$nextTick(() => {
-          this.changeHeight('itemGoodsComment')
-        });
-      }
+    previewImg (img, item) {
+      item.previewImg = img;
+      item.deg = item.deg || 0;
     },
-    previewImg (img, item) { // 预览图片
-      item['previewImg'] = img;
-      this.$nextTick(() => {
-        this.changeHeight('itemGoodsComment')
-      });
+    hidePreviewImg (item) {
+      item.previewImg = '';
     },
-    hidePreviewImg (item) { // 隐藏预览图片
-      item['previewImg'] = '';
-      this.$nextTick(() => {
-        this.changeHeight('itemGoodsComment')
-      });
-    },
-    rotatePreviewImg (type, item) { // 图片旋转
-      if (type) {
-        if (item.deg) {
-          item['deg'] = item.deg + 90;
-        } else {
-          item['deg'] = 90;
-        }
-      } else {
-        if (item.deg) {
-          item['deg'] = item.deg - 90;
-        } else {
-          item['deg'] = -90;
-        }
-      }
-    },
-    handleScroll () { // 监听页面滚动
-      if (this.onceFlag) {
-        this.$nextTick(() => {
-          this.changeHeight('itemIntroGoods')
-        });
-        this.onceFlag = false
-      }
+    rotatePreviewImg (type, item) {
+      const current = item.deg || 0;
+      item.deg = type ? current + 90 : current - 90;
     }
   },
   mounted () {
-    this.$nextTick(() => { // 手动设置详情高度，解决无法撑开问题
-      setTimeout(() => {
-        this.changeHeight('itemIntroGoods');
-      }, 2000);
-    });
-    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('scroll', this.handleScroll, { passive: true });
     this.getList();
     if (this.skuDetail.grade === null || this.skuDetail.grade === undefined) {
-      this.skuDetail.grade = 100
+      this.skuDetail.grade = 100;
     }
   },
   beforeUnmount () {
     window.removeEventListener('scroll', this.handleScroll);
+    window.clearTimeout(this.scrollTimer);
   }
 };
 </script>
 
 <style scoped lang="scss">
-.item-intro{
-  >img{
-    display:block;
-  }
-}
-/***************商品详情介绍和推荐侧边栏开始***************/
-.item-intro-show{
-
+.goods-detail-extra {
   width: 1200px;
-  margin: 15px auto;
-  display: flex;
-  overflow-x: hidden;
-  flex-direction: row;
+  margin: 16px auto 24px;
+}
 
-}
-.item-intro-recommend{
-  width: 200px;
+.detail-anchor {
+  position: sticky;
+  top: 0;
+  z-index: 20;
   display: flex;
-  flex-direction: column;
-}
-.item-intro-recommend-column{
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0px 0px 5px #999;
-}
-.item-recommend-title{
-  width: 100%;
-  height: 38px;
-  font-size: 16px;
-  line-height: 38px;
-  color: #fff;
-  background-color: $theme_color;
-  box-shadow: 0px 0px 5px $theme_color;
-  text-align: center;
-}
-.item-recommend-column{
-  margin-top: 15px;
-}
-.item-recommend-intro{
-  padding: 5px 15px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  font-size: 12px;
-  color: #999;
-  cursor: pointer;
-}
-.item-recommend-img{
-  width: 80%;
-  margin: 0px auto;
-  cursor: pointer;
-}
-.item-recommend-img img{
-  width: 100%;
-}
-.item-recommend-top-num{
-  color: #fff;
-  margin: 0px 2px;
-  padding: 1px 5px;
-  border-radius: 12px;
-  background-color: $theme_color;
-}
-.item-recommend-price{
-  color: $theme_color;
-  font-weight: bolder;
-}
-.item-intro-detail{
-  margin: 0;
-  width: 100%;
-}
-.item-intro-nav{
-  width: 100%;
-  height: 38px;
-  background-color: #F7F7F7;
-}
-.item-intro-nav ul{
-  margin: 0px;
-  padding: 0px;
-  list-style: none;
-}
-.item-intro-nav li{
-  float: left;
-  height: 100%;
-  width: 120px;
-  line-height: 38px;
-  text-align: center;
-  color: $theme_color;
-}
-.item-intro-nav li:first-child{
-  background-color: $theme_color;
-  color: #fff;
-}
-.item-intro-img {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0 30px;
-  min-height: 300px;
-  :deep(img){
-    margin:0 auto;
+  align-items: stretch;
+  height: 52px;
+  padding: 0 8px;
+  background: #fff;
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid #f0f0f0;
+
+  &.is-stuck {
+    border-radius: 0;
+    box-shadow: 0 2px 8px rgba(23, 26, 38, 0.06);
   }
 }
-.item-intro-img img{
-  max-width: 1000px;
+
+.detail-anchor__item {
+  position: relative;
+  margin: 0;
+  padding: 0 24px;
+  border: 0;
+  background: transparent;
+  color: #666;
+  font-size: 15px;
+  line-height: 52px;
+  cursor: pointer;
+
+  &:hover {
+    color: #171A26;
+  }
+
+  &.is-active {
+    color: #171A26;
+    font-weight: 600;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 24px;
+      right: 24px;
+      bottom: 0;
+      height: 2px;
+      border-radius: 1px;
+      background: $theme_color;
+    }
+  }
 }
-/************* 商品参数 *************/
-.item-param-container {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding: 0 30px;
+
+.detail-panel {
+  background: #fff;
+  border-radius: 0 0 4px 4px;
 }
-.item-param-box {
-  padding: 5px;
-  padding-left: 30px;
-  width: 100%;
-  height: 36px;
-  font-size: 14px;
+
+.detail-section + .detail-section {
+  border-top: 1px solid #f0f0f0;
 }
-.item-param-title {
-  color: #232323;
-}
-.item-param-content {
-  color: #999;
-}
-.remarks-title {
-  padding-left: 15px;
-  height: 36px;
+
+.detail-section__title {
+  margin: 0;
+  padding: 20px 24px 0;
+  color: #171A26;
   font-size: 16px;
-  font-weight: bolder;
-  line-height: 36px;
-  color: #666666;
-  background-color: #F7F7F7;
+  font-weight: 600;
+  line-height: 24px;
 }
-.remarks-container {
+
+.detail-empty {
+  padding: 36px 24px 40px;
+  color: #999;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: center;
+}
+
+.item-intro-img {
   box-sizing: border-box;
-  padding: 0 30px;
+  padding: 16px 24px 28px;
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
 }
-.remarks-analyse-box {
-  padding: 15px;
+
+.item-intro {
+  :deep(img) {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  :deep(p) {
+    margin: 0 0 12px;
+  }
+}
+
+.item-param-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin: 16px 24px 24px;
+  border-top: 1px solid #f0f0f0;
+  border-left: 1px solid #f0f0f0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.item-param-cell {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  min-height: 44px;
+  border-right: 1px solid #f0f0f0;
+  border-bottom: 1px solid #f0f0f0;
+
+  &:last-child:nth-child(odd) {
+    grid-column: 1 / -1;
+  }
+}
+
+.item-param-title,
+.item-param-content {
   display: flex;
   align-items: center;
+  padding: 10px 16px;
+  font-size: 14px;
+  line-height: 22px;
+  word-break: break-all;
 }
-.remarks-analyse-goods {
-  margin-left: 15px;
-  margin-right: 15px;
+
+.item-param-title {
+  color: #666;
+  background: #fafafa;
 }
-.remarks-analyse-num {
-  font-size: 26px;
+
+.item-param-content {
+  color: #171A26;
 }
-.remarks-analyse-title {
-  font-size: 12px;
-  line-height: 20px;
+
+.remarks-container {
+  box-sizing: border-box;
+  padding: 8px 24px 8px;
 }
-.remarks-bar {
-  padding-left: 15px;
-  height: 36px;
-  line-height: 36px;
-  color: #666666;
-  background-color: #F7F7F7;
-  .selectedBar{
-    color: $theme_color;
-  }
-}
-.remarks-bar span {
-  margin-right: 15px;
-  &:hover{
-    color: $theme_color;
-    cursor: pointer;
-  }
-}
-.remarks-box {
-  padding: 15px;
+
+.remarks-summary {
   display: flex;
-  flex-direction: row;
-  border-bottom: 1px #ccc dotted;
+  align-items: center;
+  gap: 28px;
+  padding: 12px 0 16px;
 }
+
+.remarks-score {
+  flex-shrink: 0;
+  min-width: 88px;
+}
+
+.remarks-score-value {
+  color: $theme_color;
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1;
+
+  em {
+    margin-left: 2px;
+    font-style: normal;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+.remarks-score-label {
+  margin-top: 6px;
+  color: #999;
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.remarks-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  color: #666;
+
+  .selectedBar {
+    color: $theme_color;
+    background: #fff5f4;
+    border-color: $theme_color;
+  }
+
+  span {
+    height: 32px;
+    padding: 0 14px;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    line-height: 30px;
+    font-size: 14px;
+    cursor: pointer;
+
+    &:hover {
+      color: $theme_color;
+    }
+  }
+}
+
+.remarks-box {
+  display: flex;
+  gap: 16px;
+  padding: 16px 0;
+  border-top: 1px solid #f0f0f0;
+}
+
 .remarks-user {
-  width: 180px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 168px;
+  flex-shrink: 0;
+  padding-top: 2px;
 }
+
 .remarks-user-name {
-  padding-left: 15px;
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+  word-break: break-all;
 }
+
 .remarks-content-box {
-  width: calc(100% - 180px);
-  .comment-img{
+  flex: 1;
+  min-width: 0;
+
+  .comment-img {
     display: flex;
-    .borderColor{
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+
+    .borderColor {
       border-color: $theme_color;
     }
-    div{
-      border: 1px solid #999;
-      margin-right: 5px;
-      width: 50px;
-      height: 50px;
+
+    div {
+      width: 64px;
+      height: 64px;
       overflow: hidden;
-      img{width: 100%;height: 100%;}
+      border: 1px solid #eee;
+      border-radius: 4px;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
     }
   }
-  .preview-img{
-    position: relative;
-    border: 1px solid #eee;
-    margin: 10px 0;
-    width: 200px;
 
-    div{
+  .preview-img {
+    position: relative;
+    width: 200px;
+    margin: 10px 0;
+    border: 1px solid #eee;
+    border-radius: 4px;
+
+    div {
       position: absolute;
-      top: 3px;
-      left: 3px;
+      top: 8px;
+      left: 8px;
       z-index: 3;
-      span{
-        display: inline-block;
-        background-color: rgba(0,0,0,.5);
-        padding:3px 5px;
+
+      span {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        margin-right: 6px;
+        padding: 3px 6px;
         color: #fff;
+        background-color: rgba(0, 0, 0, 0.5);
         border-radius: 4px;
         cursor: pointer;
       }
+
       span:nth-child(1) .el-icon {
         transform: rotateY(180deg);
       }
     }
-
   }
 }
 
 .remarks-content {
+  margin: 6px 0 0;
+  color: #171A26;
   font-size: 14px;
-  color: #232323;
-  line-height: 28px;
+  line-height: 22px;
 }
+
 .remarks-sub {
-  margin-top: 5px;
-  color: #ccc;
+  margin: 8px 0 0;
+  color: #999;
+  font-size: 13px;
+  line-height: 20px;
 }
+
 .remarks-time {
-  margin-left: 15px;
+  margin-left: 12px;
 }
+
 .remarks-page {
-  margin: 15px;
   display: flex;
-  justify-content:flex-end;
+  justify-content: flex-end;
+  padding: 8px 0 16px;
 }
-/***************商品详情介绍和推荐侧边栏结束***************/
-/* 改变标签页样式 */
-.item-tabs {
-  :deep(.el-tabs__header) {
-    border: none;
+
+.reply {
+  margin-top: 12px;
+  padding: 12px 16px;
+  background: #fafafa;
+  border-radius: 4px;
+
+  > p:first-child {
     margin: 0;
-    background-color: #f7f7f7;
-  }
-
-  :deep(.el-tabs__active-bar) {
-    background-color: $theme_color !important;
-  }
-
-  :deep(.el-tabs__item) {
-    border-radius: 0;
-    color: #999;
-    height: 38px;
-    padding: 0 20px;
-
-    &:hover {
-      color: #999;
-    }
-  }
-
-  :deep(.el-tabs__nav) {
-    padding-left: 10px;
-  }
-
-  :deep(.el-tabs__item.is-active) {
-    color: $theme_color !important;
-    background-color: transparent;
+    color: #666;
+    font-size: 13px;
+    line-height: 20px;
   }
 }
+
 :deep(.remarks-star.el-rate) {
+  height: 20px;
   --el-rate-fill-color: #{$theme_color};
   --el-rate-disabled-fill-color: #{$theme_color};
 }
+
 :deep(.remarks-star .el-rate__icon.is-active) {
   color: $theme_color !important;
 }
-table{
-  border-color:#efefef;
-  color: #999;
-  min-width: 30%;
-  margin-left: 30px;
-  font-size: 12px;
-  tr{
-    td:nth-child(1){
-      width: 100px;
-    }
-    td:nth-child(2){
-      padding-left: 20px;
-    }
-  }
-  td{
-    padding: 6px;
-  }
-}
-.goods-params {
-  display: flex;
-  border-bottom: 1px solid #eee;
-  margin-left: 30px;
-  span{color:#999}
-}
-.reply{
-  >*{
-    margin: 4px;
-  }
-
-}
 </style>
diff --git a/buyer/src/components/header/Header.vue b/buyer/src/components/header/Header.vue
index 2fc341d40..a7e602260 100644
--- a/buyer/src/components/header/Header.vue
+++ b/buyer/src/components/header/Header.vue
@@ -238,8 +238,8 @@ export default {
 
 .box {
   width: 100%;
-  font-size: 12px !important;
-  height: 36px;
+  font-size: 14px;
+  height: 40px;
   background: #333;
   color: #fff;
   display: flex;
@@ -266,7 +266,7 @@ export default {
 .location > ul.flex > li {
   cursor: pointer;
   float: none;
-  line-height: 36px;
+  line-height: 40px;
   margin-right: 15px;
   display: flex;
   align-items: center;
@@ -274,7 +274,7 @@ export default {
 
 .nav a,
 .nav-item {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: normal;
   text-decoration: none;
   cursor: pointer;
@@ -297,7 +297,7 @@ export default {
     margin: 0;
     padding: 0;
     vertical-align: middle;
-    line-height: 36px;
+    line-height: 40px;
   }
 
   :deep(.el-tooltip__trigger),
@@ -429,7 +429,7 @@ export default {
   justify-content: space-between;
   margin-top: 8px;
   color: #999;
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .shopping-price {
@@ -477,7 +477,7 @@ export default {
       padding: 8px 16px;
       line-height: 1.4;
       color: #666;
-      font-size: 13px;
+      font-size: 14px;
       font-weight: normal;
       text-align: center;
       white-space: nowrap;
@@ -556,7 +556,7 @@ export default {
 }
 
 .my-info p {
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .sign-out {
@@ -576,7 +576,7 @@ export default {
 }
 
 .sign-out p {
-  font-size: 12px;
+  font-size: 14px;
 }
 
 .goods-title:hover {
diff --git a/buyer/src/components/map/multiple-map.vue b/buyer/src/components/map/multiple-map.vue
index b89eb0ed9..178971d72 100644
--- a/buyer/src/components/map/multiple-map.vue
+++ b/buyer/src/components/map/multiple-map.vue
@@ -1,8 +1,8 @@
 <template>
   <el-dialog width="800" v-model="enableMap">
-    <el-radio-group @change="changeMap" v-model="mapDefault" type="button">
-      <el-radio label="select">级联选择</el-radio>
-      <el-radio label="map" v-if="aMapSwitch">高德地图</el-radio>
+    <el-radio-group v-if="aMapSwitch" @change="changeMap" v-model="mapDefault">
+      <el-radio label="select">地区选择</el-radio>
+      <el-radio label="map">高德地图</el-radio>
     </el-radio-group>
     <div>
       <div v-if="mapDefault === 'select'">
diff --git a/buyer/src/components/nav/CateNav.vue b/buyer/src/components/nav/CateNav.vue
index a1ec6cb11..ade93c74d 100644
--- a/buyer/src/components/nav/CateNav.vue
+++ b/buyer/src/components/nav/CateNav.vue
@@ -26,31 +26,22 @@
       :style="{'top':!showNavBar ?'60px':'46px'}"
       v-show="showAlways || showFirstList"
       @mouseenter="showFirstList = true"
-      @mouseleave="showFirstList = false"
+      @mouseleave="closePanel"
     >
       <!-- 第一级分类 -->
       <div
         class="nav-side"
         :class="{ 'large-nav': large, 'opacity-nav': opacity }"
-        @mouseleave="panel = false"
       >
         <ul>
           <li
             v-for="(item, index) in cateList"
             :key="index"
+            :class="{ 'is-active': panel && panelIndex === index }"
             @mouseenter="showDetail(index)"
           >
-            <span class="nav-side-item" @click="goGoodsList(item.id)">{{
-              item.name
-            }}</span>
-            <span v-for="(second, secIndex) in item.children" :key="secIndex">
-              <span v-if="secIndex < 2"> / </span>
-              <span
-                @click="goGoodsList(second.id, second.parentId)"
-                class="nav-side-item"
-                v-if="secIndex < 2"
-                >{{ second.name }}</span>
-            </span>
+            <span class="nav-side-item" @click="goGoodsList(item.id)">{{ item.name }}</span>
+            <el-icon><ArrowRight /></el-icon>
           </li>
         </ul>
       </div>
@@ -139,6 +130,7 @@ export default {
   data() {
     return {
       panel: false, // 二级分类展示
+      panelIndex: -1,
       panelData: [], // 二级分类数据
       showFirstList: false, // 始终展示一级列表
       cateList: [], // 商品分类
@@ -189,8 +181,14 @@ export default {
     showDetail(index) {
       // 展示全部分类
       this.panel = true;
+      this.panelIndex = index;
       this.panelData = this.cateList[index].children;
     },
+    closePanel() {
+      this.showFirstList = false;
+      this.panel = false;
+      this.panelIndex = -1;
+    },
     goGoodsList(id, secondId, firstId) {
       // 分类共有三级，传全部分类过去
       const arr = [firstId, secondId, id];
@@ -278,16 +276,15 @@ export default {
     display: flex;
     align-items: center;
     height: 46px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    padding-left: 37.4px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    padding-left: 16px;
     background: #FFFFFF;
     width: 263.2px;
     border-bottom: none;
-    font-size: 16.8px;
-    font-weight: normal;
-    color: #333333;
-    letter-spacing: 0px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #171A26;
     box-sizing: border-box;
   }
   .nav-item {
@@ -304,9 +301,9 @@ export default {
     display: flex;
     li {
       float: left;
-      font-size: 17px;
-      font-weight: normal;
-      color: #333333;
+      font-size: 15px;
+      font-weight: 400;
+      color: #171A26;
 
 
       &:hover {
@@ -325,14 +322,13 @@ export default {
 
 .nav-side {
   width: 263.2px;
-  color: #666;
+  color: #171A26;
   float: left;
-  overflow:hidden;
-
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  overflow: hidden;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
   background-color: #fff;
-  height: 340px;
+  height: 344px;
   ////自动移滚动条样式
   //&::-webkit-scrollbar {
   //  width: 1px;
@@ -349,24 +345,53 @@ export default {
 }
 .large-nav {
   height: 470px;
-  ul > li {
-    line-height: 20px;
-  }
 }
 .opacity-nav {
   background-color: rgba(0, 0, 0, 0.5);
 }
 .nav-side ul {
   width: 100%;
+  height: 100%;
   list-style: none;
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
 }
 .nav-side li {
-  padding: 0 0 16.2px 37.4px;
-  font-size: 13px;
-  line-height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 0;
+  min-height: 0;
+  height: auto;
+  padding: 0 12px 0 16px;
+  font-size: 14px;
+  line-height: 20px;
   box-sizing: border-box;
+  cursor: pointer;
+
+  .el-icon {
+    flex-shrink: 0;
+    color: #ccc;
+    font-size: 12px;
+  }
+
+  &:hover,
+  &.is-active {
+    background: #fff5f4;
+    color: $theme_color;
+
+    .el-icon {
+      color: $theme_color;
+    }
+  }
+}
+.nav-side-item {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .nav-side-item:hover {
   cursor: pointer;
@@ -375,63 +400,102 @@ export default {
 
 /*显示商品详细信息*/
 .detail-item-panel {
-  width: 1000px;
+  width: 936px;
   min-height: 340px;
   background-color: #fff;
-  box-shadow: 0px 0px 15px #ccc;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  border-radius: 0 4px 4px 0;
   position: absolute;
   top: 0;
-  left: 200px;
+  left: 263.2px;
   z-index: 1000;
-  padding: 15px;
+  padding: 8px 20px 16px;
+  box-sizing: border-box;
 }
 .nav-detail-item {
-  margin-top: 5px;
-  margin-bottom: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 20px;
+  margin: 8px 0 4px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
   cursor: pointer;
-  color: #eee;
 }
 .nav-detail-item span {
-  padding: 6px;
-  padding-left: 12px;
-  margin-right: 15px;
-  font-size: 12px;
-  color: #333;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #171A26;
+
+  .el-icon {
+    font-size: 12px;
+    color: #ccc;
+  }
 }
 .nav-detail-item span:hover {
-  background-color: $theme_color;
-  color: #fff;
+  color: $theme_color;
+
+  .el-icon {
+    color: $theme_color;
+  }
 }
 .detail-item-panel li {
-  line-height: 30px;
+  line-height: 28px;
 }
 .detail-item-title {
-  font-weight: bold;
-  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  width: 108px;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 28px;
   cursor: pointer;
-  color: #555555;
-  padding-right: 10px;
-  width: 81px;
-  text-align: right;
+  color: #171A26;
+  text-align: left;
+
+  .glyphicon {
+    display: none;
+  }
+
+  .el-icon {
+    font-size: 12px;
+    color: #ccc;
+  }
 }
 .detail-item-title:hover {
   color: $theme_color;
+
+  .el-icon {
+    color: $theme_color;
+  }
 }
 .detail-item-row {
   display: flex;
+  align-items: flex-start;
+  padding: 6px 0;
+
   > div {
     flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
   }
 }
 .detail-item {
-  font-size: 12px;
-  padding-left: 8px;
-  padding-right: 8px;
+  font-size: 14px;
+  line-height: 28px;
+  padding: 0 12px;
+  color: #666;
   cursor: pointer;
-  border-left: 1px solid #ccc;
+  border: none;
+
   &:first-child {
-    border: none;
-    padding-left: 0;
+    padding-left: 12px;
   }
 }
 .detail-item:hover {
diff --git a/buyer/src/components/nav/GoodsClassNav.vue b/buyer/src/components/nav/GoodsClassNav.vue
index 5f7fe2277..c8db89564 100644
--- a/buyer/src/components/nav/GoodsClassNav.vue
+++ b/buyer/src/components/nav/GoodsClassNav.vue
@@ -29,9 +29,9 @@
       </template>
       <!-- 无商品分类，展示搜索结果 -->
       <template v-else>
-        <div style="font-size:14px">全部结果</div>
+        <div class="result-label">全部结果</div>
         <el-icon><ArrowRight /></el-icon>
-        <div style="font-weight:bold;" class="mr_10">“{{params.keyword}}”</div>
+        <div class="result-keyword">“{{params.keyword}}”</div>
       </template>
       <!-- 所选分类 -->
       <a
@@ -50,43 +50,26 @@
       <!-- 品牌， 有图片，独立出来 -->
       <div class="brand" v-show="tagsContent[0].show && tagsContent[0].values.length">
         <div>
-          <strong>{{ tagsContent[0].key }}：</strong>
+          {{ tagsContent[0].key }}：
         </div>
         <div>
           <ul :class="{ 'show-more': tagsContent[0].more }">
+            <li :class="{ 'is-active': !isGroupSelected(0) }" @click="selectAll(0)">
+              <span>全部</span>
+            </li>
             <li
               @click="selectBrand(item.name, 0)"
-              :class="{ 'border-color': multSelected.includes(item) }"
               v-for="(item, index) in tagsContent[0].values"
               :key="index"
             >
-              <img :src="item.url" alt="" /><span>{{ item.name }}</span>
-              <div
-                class="corner-icon"
-                v-show="multSelected.includes(item.name)"
-              >
-                <div></div>
-                <el-icon><Check /></el-icon>
-              </div>
+              <span>{{ item.name }}</span>
             </li>
           </ul>
 
-          <div class="btn" v-show="multiple !== 0">
+          <div class="btn" v-show="rowOverflow[0]">
             <span @click="moreBrand(0)"
               >{{ tagsContent[0].more ? "收起" : "更多"
               }}<el-icon><ArrowUp v-if="tagsContent[0].more" /><ArrowDown v-else /></el-icon></span>
-            <span @click="multSelectBrand(0)"><el-icon><Plus /></el-icon>多选</span>
-          </div>
-
-          <div class="multBtn" v-show="multiple === 0">
-            <el-button
-              type="primary"
-              size="small"
-              :disabled="!multSelected.length"
-              @click="sure(0)"
-              >确定</el-button
-            >
-            <el-button size="small" @click="cancel">取消</el-button>
           </div>
         </div>
       </div>
@@ -95,14 +78,19 @@
       <template v-for="(tag, tagIndex) in tagsContent">
         <div class="other" v-if="tag.show && tagIndex !== 0" v-show="tagIndex < showTagCount" :key="tagIndex">
           <div>
-            <strong>{{ tag.key }}：</strong>
+            {{ tag.key }}：
           </div>
           <div>
             <ul
               :class="{ 'show-more': tag.more }"
+              :data-index="tagIndex"
               class="list"
-              v-show="multiple !== tagIndex"
             >
+              <li
+                class="item"
+                :class="{ 'is-active': !isGroupSelected(tagIndex) }"
+                @click="selectAll(tagIndex)"
+              >全部</li>
               <li
                 @click="selectBrand(item, tagIndex)"
                 class="item"
@@ -113,38 +101,10 @@
               </li>
             </ul>
 
-            <el-checkbox-group
-              :class="{ 'show-more': tag.more }"
-              class="list"
-              v-model="multSelected"
-              v-show="multiple === tagIndex"
-            >
-              <el-checkbox
-                class="item"
-                :value="item"
-                v-for="(item, index) in tag.values"
-                :key="index"
-                >{{ item }}</el-checkbox
-              >
-            </el-checkbox-group>
-
-            <div class="btn" v-show="multiple !== tagIndex">
-              <span @click="moreBrand(tagIndex)" v-show="tag.values.length > 9"
+            <div class="btn" v-show="rowOverflow[tagIndex]">
+              <span @click="moreBrand(tagIndex)"
                 >{{ tag.more ? "收起" : "更多"
                 }}<el-icon><ArrowUp v-if="tag.more" /><ArrowDown v-else /></el-icon></span>
-              <span @click="multSelectBrand(tagIndex)"
-                ><el-icon><Plus /></el-icon>多选</span>
-            </div>
-
-            <div class="multBtn" v-show="multiple === tagIndex">
-              <el-button
-                type="primary"
-                size="small"
-                :disabled="!multSelected.length"
-                @click="sure(tagIndex)"
-                >确定</el-button
-              >
-              <el-button size="small" @click="cancel">取消</el-button>
             </div>
           </div>
         </div>
@@ -157,10 +117,10 @@
 </template>
 
 <script>
-import { ArrowDown, ArrowRight, ArrowUp, Check, Close, Plus } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowRight, ArrowUp, Close } from '@element-plus/icons-vue';
 import * as APIGoods from '@/api/goods';
 export default {
-  components: { ArrowDown, ArrowRight, ArrowUp, Check, Close, Plus },
+  components: { ArrowDown, ArrowRight, ArrowUp, Close },
   name: 'GoodsClassNav',
   data () {
     return {
@@ -171,7 +131,6 @@ export default {
         second: null
       },
       showTagCount: 5, // 展示的搜索项数量
-      multiple: false, // 多选
       tagsContent: [
         // 标签
         {
@@ -181,10 +140,10 @@ export default {
           values: []
         }
       ],
-      multSelected: [], // 多选分类
       selectedItem: [], // 已选分类集合 顶部展示
       brandIds: [], // 品牌id合集
-      params: {} // 请求参数
+      params: {}, // 请求参数
+      rowOverflow: {} // 一行排不下时才显示更多
     };
   },
   computed: {
@@ -280,33 +239,30 @@ export default {
           break;
       }
     },
+    isGroupSelected (index) {
+      const group = this.tagsContent[index];
+      if (!group) return false;
+      return this.selectedItem.some((selected) => selected.type === group.key);
+    },
+    selectAll (index) {
+      const group = this.tagsContent[index];
+      if (!group) return;
+      const selectedIndex = this.selectedItem.findIndex((selected) => selected.type === group.key);
+      if (selectedIndex === -1) return;
+      this.cancelSelected(this.selectedItem[selectedIndex], selectedIndex);
+    },
     selectBrand (item, index) {
-      // 选择筛选项
-      if (this.multiple !== false) {
-        // 非多选直接在顶部栏展示，多选则添加选择状态
-
-        let key = this.multSelected.indexOf(item);
-        if (key > -1) {
-          this.multSelected.splice(key, 1);
-        } else {
-          this.multSelected.push(item);
-        }
-      } else {
-        const type = this.tagsContent[index].key;
-        if (this.selectedItem.some((selected) => selected.type === type)) {
-          return;
-        }
-        this.selectedItem.push({
-          type,
-          name: item
-        });
-
-        this.tagsContent[index].show = false;
-
-        if (index === 0) {
-          // 如果是品牌，获取品牌id
-          this.appendBrandIdsByNames([item]);
-        }
+      const type = this.tagsContent[index].key;
+      if (this.selectedItem.some((selected) => selected.type === type)) {
+        return;
+      }
+      this.selectedItem.push({
+        type,
+        name: item
+      });
+      this.tagsContent[index].show = false;
+      if (index === 0) {
+        this.appendBrandIdsByNames([item]);
       }
     },
 
@@ -328,37 +284,25 @@ export default {
       // 更多按钮
       const flag = !this.tagsContent[index].more
       this.tagsContent[index]['more'] = flag
+      this.$nextTick(() => this.measureRows())
     },
-    multSelectBrand (index) {
-      // 多选按钮
-      this.tagsContent[index]['more'] = true
-      this.multiple = index;
-    },
-    sure (index) {
-      // 多选确认按钮
-      const type = this.tagsContent[index].key;
-      if (this.selectedItem.some((selected) => selected.type === type)) {
-        this.cancel();
-        return;
+    measureRows () {
+      if (!this.$el) return
+      const next = {}
+      const brand = this.$el.querySelector('.brand ul')
+      if (brand && brand.offsetParent) {
+        next[0] = !!(this.tagsContent[0] && this.tagsContent[0].more) || brand.scrollHeight > brand.clientHeight + 1
       }
-      this.selectedItem.push({
-        type,
-        name: this.multSelected.join('、')
-      });
-
-      if (index === 0) {
-        // 如果是品牌，获取品牌id
-        this.appendBrandIdsByNames(this.multSelected);
-      }
-
-      this.tagsContent[index].show = false;
-      this.cancel();
-    },
-    cancel () {
-      // 多选取消按钮
-      this.multSelected = [];
-      this.tagsContent[0].more = false;
-      this.multiple = false;
+      this.$el.querySelectorAll('.other .list').forEach((list) => {
+        if (!list.offsetParent) return
+        const index = Number(list.dataset.index)
+        const tag = this.tagsContent[index]
+        next[index] = !!(tag && tag.more) || list.scrollHeight > list.clientHeight + 1
+      })
+      const prev = this.rowOverflow
+      const keys = new Set([...Object.keys(prev), ...Object.keys(next)])
+      const changed = [...keys].some((key) => !!prev[key] !== !!next[key])
+      if (changed) this.rowOverflow = next
     },
     appendBrandIdsByNames (names) {
       const selectedNames = names || [];
@@ -385,12 +329,14 @@ export default {
             item.show = !hiddenKeys.has(item.key);
             item.more = false;
           });
+          this.$nextTick(() => this.measureRows())
         }
       });
     },
     // 展示更多搜索项
     moreOptions () {
       this.showTagCount = this.showTagCount === 5 ? 100 : 5
+      this.$nextTick(() => this.measureRows())
     }
   },
   mounted () {
@@ -404,6 +350,10 @@ export default {
     }
     this.getFilterList(this.params);
     this.getNav();
+    window.addEventListener('resize', this.measureRows)
+  },
+  beforeUnmount () {
+    window.removeEventListener('resize', this.measureRows)
   }
 }
 </script>
@@ -413,70 +363,100 @@ export default {
 .head-bar {
   width: 100%;
   background: #fff;
-  margin-top: -13px;
   display: flex;
-  height: 40px;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-height: 48px;
   align-items: center;
+  padding: 8px 16px;
+  border: 1px solid #eee;
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  color: #666;
+  font-size: 14px;
+  box-sizing: border-box;
+
   > div:first-child {
-    padding: 0 8px;
-    font-size: 18px;
-    font-weight: bold;
+    padding: 0;
+    font-size: 14px;
+    font-weight: 400;
+    color: #666;
     &:hover {
       color: $theme_color;
       cursor: pointer;
     }
   }
-  .bar {
+
+  .result-label {
+    color: #666;
+  }
+
+  .result-keyword {
+    margin-left: 4px;
+    color: #171A26;
+    font-size: 15px;
+    font-weight: 600;
+  }
+
+  > .el-icon {
+    color: #ccc;
     font-size: 12px;
+  }
+
+  .bar {
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: 28px;
+    margin: 0 4px;
+    padding: 0 10px;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
     background: #fff;
-    border: 1px solid #999;
-    padding: 0 8px;
-    min-width: 85px;
-    text-align: center;
-    margin: 0 3px;
+    color: #171A26;
+    font-size: 14px;
+    line-height: 26px;
+
     &:hover {
-      color: $theme_color;
       border-color: $theme_color;
-      border-bottom-color: #fff;
+      color: $theme_color;
       cursor: pointer;
+
       ul {
-        display: block;
+        display: flex;
       }
-      .el-icon {
+
+      > .el-icon {
         transform: rotate(180deg);
       }
     }
+
     ul {
       display: none;
       position: absolute;
-      top: 18px;
-      left: -1px;
-      width: 300px;
-      padding: 5px 10px;
+      top: calc(100% + 6px);
+      left: 0;
+      z-index: 5;
+      width: 280px;
+      margin: 0;
+      padding: 8px;
+      flex-wrap: wrap;
+      list-style: none;
       background: #fff;
-      border: 1px solid $theme_color;
-      z-index: 1;
-      &::before {
-        content: "";
-        position: absolute;
-        width: 83px;
-        left: 0;
-        top: -1px;
-        z-index: 2;
-        border-top: 1px solid #fff;
-      }
+      border: 1px solid #eee;
+      border-radius: 4px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 
-      &:hover {
-        display: block;
-      }
-      clear: left;
       li {
-        color: #999;
-        float: left;
-        width: 30%;
-        margin: 3px 0;
+        width: 33.33%;
+        padding: 6px 8px;
+        box-sizing: border-box;
+        color: #171A26;
+        font-size: 14px;
+        line-height: 20px;
         text-align: left;
+
         &:hover {
           color: $theme_color;
           cursor: pointer;
@@ -486,252 +466,257 @@ export default {
   }
   //所选分类
   .selected-item {
-    font-size: 12px;
-    color: #000;
-    padding: 2px 22px 2px 8px;
-    margin-right: 5px;
-    max-width: 250px;
-    height: 24px;
-    overflow: hidden;
-    position: relative;
-    background-color: #f3f3f3;
-    border: 1px solid #ddd;
-    &:hover {
-      border-color: $theme_color;
-      background-color: #fff;
-      .el-icon {
-        color: #fff;
-        background-color: $theme_color;
-      }
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 240px;
+    height: 28px;
+    margin: 0;
+    padding: 0 8px;
+    border: 1px solid #ffd0cb;
+    border-radius: 4px;
+    background: #fff5f4;
+    color: #666;
+    font-size: 13px;
+    line-height: 26px;
+    text-decoration: none;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    span:first-child {
+      flex-shrink: 0;
+      color: #666;
     }
 
     span:nth-child(2) {
+      min-width: 0;
+      overflow: hidden;
       color: $theme_color;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .el-icon {
-      position: absolute;
-      right: 0;
-      top: 0;
-      color: $theme_color;
-      line-height: 22px;
-      width: 21px;
-      height: 22px;
-      font-size: 14px;
+      position: static;
+      flex-shrink: 0;
+      width: 14px;
+      height: 14px;
+      color: #999;
+      font-size: 12px;
+      line-height: 1;
+      background: transparent;
+    }
+
+    &:hover {
+      border-color: $theme_color;
+      background: #fff5f4;
+
+      .el-icon {
+        color: $theme_color;
+        background: transparent;
+      }
     }
   }
 }
 /** 筛选主体 */
 .content {
   background: #fff;
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  margin: 10px 0;
+  border: 1px solid #eee;
+  border-top: none;
+  margin: 0 0 12px;
+  border-radius: 0 0 4px 4px;
 }
 /** 品牌 start */
 .brand {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #f0f0f0;
   display: flex;
-  // min-height: 120px;
-  font-size: 12px;
+  min-height: 44px;
+  font-size: 14px;
   > div:first-child {
-    width: 100px;
-    background: #eee;
-    padding: 10px 0 0 10px;
+    width: 88px;
+    background: transparent;
+    padding-left: 16px;
+    line-height: 44px;
+    color: #666;
+    font-weight: 400;
+    flex-shrink: 0;
   }
   > div:last-child {
-    width: 1100px;
-    padding: 10px;
+    flex: 1;
+    min-width: 0;
+    width: auto;
+    padding: 0 16px;
     position: relative;
     ul {
-      width: 900px;
-      max-height: 100px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      width: calc(100% - 72px);
+      height: 44px;
+      margin: 0;
+      padding: 0;
       overflow: hidden;
-      padding-top: 1px;
-      clear: left;
+      list-style: none;
       li {
-        width: 100px;
-        height: 50px;
-        float: left;
-        line-height: 45px;
-        border: 1px solid #ddd;
-        margin: -1px -1px 0 0;
-        overflow: hidden;
-        position: relative;
-        padding: 2px;
-        img {
-          width: 100%;
-          height: 100%;
+        flex: 0 0 auto;
+        width: auto;
+        max-width: none;
+        height: 44px;
+        margin: 0 40px 0 0;
+        line-height: 44px;
+        overflow: visible;
+        padding: 0;
+        cursor: pointer;
+
+        &:hover span {
+          color: $theme_color;
         }
 
-        &:hover {
-          border-color: $theme_color;
-          border: 2px solid $theme_color;
-          top: 0;
-          left: 0;
-          position: relative;
-          z-index: 1;
-          img {
-            display: none;
-          }
+        &.is-active span {
+          color: $theme_color;
+          font-weight: 400;
         }
 
         span {
-          display: inline-block;
-          width: 100%;
-          height: 100%;
-          color: $theme_color;
-          text-align: center;
-          font-size: 12px;
+          display: block;
+          overflow: visible;
+          color: #171A26;
+          text-align: left;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 44px;
+          white-space: nowrap;
+          text-overflow: clip;
           cursor: pointer;
         }
-
-        .corner-icon {
-          position: absolute;
-          right: -1px;
-          bottom: -1px;
-          div {
-            width: 0;
-            border-top: 20px solid transparent;
-            border-right: 20px solid $theme_color;
-          }
-          .el-icon {
-            font-size: 12px;
-            position: absolute;
-            bottom: 0;
-            right: 1px;
-            transform: rotate(-15deg);
-            color: #fff;
-          }
-        }
-      }
-      .border-color {
-        border-color: $theme_color;
-        z-index: 1;
       }
     }
     .show-more {
       height: auto;
-      max-height: 200px;
-      overflow: scroll;
+      max-height: none;
+      overflow: visible;
     }
     .btn {
       position: absolute;
-      right: 10px;
-      top: 10px;
+      right: 16px;
+      top: 8px;
       span {
-        border: 1px solid #ddd;
-        margin-left: 10px;
-        color: #999;
-        display: inline-block;
-        padding: 1px 3px;
-        font-size: 12px;
+        margin-left: 12px;
+        color: #438cde;
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 0;
+        border: none;
+        font-size: 14px;
+        line-height: 28px;
         &:hover {
           cursor: pointer;
           color: $theme_color;
-          border-color: $theme_color;
         }
       }
     }
-    .multBtn {
-      text-align: center;
-      margin-top: 10px;
-      .el-button {
-        font-size: 12px !important;
-      }
-      .el-button:last-child {
-        margin-left: 10px;
-      }
-    }
   }
 }
 /** 品牌 end */
 /** 其他筛选项  start */
 .other {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #f0f0f0;
   display: flex;
-  min-height: 30px;
-  font-size: 12px;
+  min-height: 44px;
+  font-size: 14px;
   &:last-child {
     border: none;
   }
   > div:first-child {
-    width: 100px;
-    background: #eee;
-    padding-left: 10px;
-    line-height: 30px;
+    width: 88px;
+    background: transparent;
+    padding-left: 16px;
+    line-height: 44px;
+    color: #666;
+    font-weight: 400;
+    flex-shrink: 0;
   }
   > div:last-child {
-    width: 1100px;
-    padding: 0 10px;
+    flex: 1;
+    min-width: 0;
+    width: auto;
+    padding: 0 16px;
     position: relative;
     .list {
-      width: 900px;
-      height: 30px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      width: calc(100% - 72px);
+      height: 44px;
+      margin: 0;
+      padding: 0;
       overflow: hidden;
-      clear: left;
+      list-style: none;
       .item {
-        width: 100px;
-        height: 30px;
-        float: left;
-        line-height: 30px;
-        color:#4d9cf1;
-        overflow: hidden;
-        position: relative;
-        font-size: 12px;
-        padding: 2px;
+        flex: 0 0 auto;
+        width: auto;
+        max-width: none;
+        height: 44px;
+        margin: 0 40px 0 0;
+        line-height: 44px;
+        color: #171A26;
+        overflow: visible;
+        white-space: nowrap;
+        text-overflow: clip;
+        font-size: 14px;
+        font-weight: 400;
+        padding: 0;
         cursor: pointer;
         &:hover {
           color: $theme_color;
         }
+
+        &.is-active {
+          color: $theme_color;
+          font-weight: 400;
+        }
       }
     }
 
     .show-more {
       height: auto;
+      max-height: none;
+      overflow: visible;
     }
 
     .btn {
       position: absolute;
-      right: 10px;
-      top: 5px;
+      right: 16px;
+      top: 8px;
       span {
-        border: 1px solid #ddd;
-        margin-left: 10px;
-        color: #999;
-        display: inline-block;
-        padding: 1px 3px;
-        font-size: 12px;
+        margin-left: 12px;
+        color: #438cde;
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 0;
+        border: none;
+        font-size: 14px;
+        line-height: 28px;
         &:hover {
           cursor: pointer;
           color: $theme_color;
-          border-color: $theme_color;
         }
       }
     }
-
-    .multBtn {
-      text-align: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .el-button {
-        font-size: 12px !important;
-      }
-      .el-button:last-child {
-        margin-left: 10px;
-      }
-    }
   }
 }
 .more-options{
-  margin: 5px;
-  color: #4d9cf1;
-  font-size: 12px;
+  margin: 0;
+  padding: 10px 16px;
+  color: #438cde;
+  font-size: 14px;
   cursor: pointer;
   text-align: right;
 }
 .more-options:hover{
-  color:#0165d1;
+  color: $theme_color;
 }
 /** 其他筛选项  end */
 </style>
diff --git a/buyer/src/components/userCenter/Layout.vue b/buyer/src/components/userCenter/Layout.vue
index 53f4729f4..f6d6872a5 100644
--- a/buyer/src/components/userCenter/Layout.vue
+++ b/buyer/src/components/userCenter/Layout.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="user-center-page">
-    <div class="user-center-title">{{ title }}</div>
+    <div v-if="title" class="user-center-title">{{ title }}</div>
     <div class="user-center-panel">
-      <div v-if="showToolbar" class="user-center-toolbar">
+      <div v-if="showToolbar" class="user-center-toolbar" :class="{ 'is-actions-only': !tabs.length }">
         <div class="user-center-tabs">
           <div
             v-for="(item, index) in tabs"
@@ -33,7 +33,7 @@ export default {
   props: {
     title: {
       type: String,
-      required: true,
+      default: "",
     },
     tabs: {
       type: Array,
@@ -101,21 +101,35 @@ export default {
   justify-content: space-between;
   min-height: 54px;
   border-bottom: 1px solid #eee;
+  gap: 16px;
+}
+
+.user-center-toolbar.is-actions-only {
+  justify-content: flex-start;
+
+  .user-center-tabs {
+    display: none;
+  }
 }
 
 .user-center-tabs {
   display: flex;
   align-items: center;
   height: 54px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .user-center-tab {
   position: relative;
+  flex-shrink: 0;
   height: 54px;
   line-height: 54px;
   margin-right: 28px;
   color: #333;
   cursor: pointer;
+  white-space: nowrap;
 
   &:hover,
   &.active {
@@ -127,7 +141,7 @@ export default {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: -1px;
+    bottom: 0;
     height: 2px;
     background: $theme_color;
   }
@@ -136,6 +150,7 @@ export default {
 .user-center-extra {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .user-center-content {
diff --git a/buyer/src/pages/Cart.vue b/buyer/src/pages/Cart.vue
index 938cef40b..7c2d2de58 100644
--- a/buyer/src/pages/Cart.vue
+++ b/buyer/src/pages/Cart.vue
@@ -9,20 +9,17 @@
           购物车(<span>{{ goodsTotal }}</span>)
         </div>
       </div>
-
+      <div class="cart-steps">
+        <span :class="stepIndex == 0 ? 'active' : ''">1.我的购物车</span>
+        <i class="icomoon icon-next" :class="stepIndex == 0 ? 'active-arrow' : ''"></i>
+        <span :class="stepIndex == 1 ? 'active' : ''">2.填写订单信息</span>
+        <i class="icomoon icon-next" :class="stepIndex == 1 ? 'active-arrow' : ''"></i>
+        <span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
+      </div>
     </div>
     <el-divider />
     <!-- 购物车主体 -->
     <div class="cart-content width_1200 center">
-      <div class="available-area">
-        <div class="cart-steps">
-          <span :class="stepIndex == 0 ? 'active' : ''">1.我的购物车</span>
-          <i class="icomoon icon-next" :class="stepIndex == 0 ? 'active-arrow' : ''"></i>
-          <span :class="stepIndex == 1 ? 'active' : ''">2.填写订单信息</span>
-          <i class="icomoon icon-next" :class="stepIndex == 1 ? 'active-arrow' : ''"></i>
-          <span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
-        </div>
-      </div>
       <!-- 购物车商品列表 -->
       <div class="cart-goods">
         <div class="cart-goods-table">
@@ -168,7 +165,7 @@
                   v-model="goods.num"
                   @change="changeNum(goods.num, goods.goodsSku.id)"
                 ></el-input-number>
-                <div class="fontsize_12 cart-qty-stock">
+                <div class="cart-qty-stock">
                   {{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}
                 </div>
               </div>
@@ -538,7 +535,7 @@ export default {
   }
 }
 .cart-content {
-  margin: 0 auto;
+  margin: 20px auto;
   width: 1200px;
   position: relative;
 }
@@ -548,7 +545,8 @@ export default {
   height: 30px;
   display: flex;
   align-items: center;
-  margin-bottom: 15px;
+  gap: 12px;
+
   span {
     @include content_color($light_content_color);
     height: 30px;
@@ -556,45 +554,40 @@ export default {
     line-height: 30px;
     display: inline-block;
     padding: 0 15px;
+    flex-shrink: 0;
   }
 
-  .el-icon {
-    @include content_color($light_content_color);
-    font-size: 20px;
-    margin: 0 15px;
+  .icon-next {
+    flex-shrink: 0;
+    font-size: 14px;
   }
 
   .active {
     border-radius: 50px;
-    background-color: #ff8f23;
+    background-color: $theme_color;
     color: #fff;
   }
 
   .active-arrow {
-    color: #ff8f23;
+    color: $theme_color;
   }
 }
-/** 步骤条和配送区域总体 */
-.available-area {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 15px;
-}
 /** 商品列表 */
 .cart-goods {
   .cart-goods-table {
-    border: 1px solid #e0e0e0;
-    @include background_color($light_white_background_color);
+    border: 1px solid #eee;
+    background: #fff;
+    padding: 0 8px;
   }
   &-title {
-    height: 50px;
-    @include background_color($light_white_background_color);
-    @include title_color($title_color);
+    height: 44px;
+    background: #fff;
+    color: #999;
+    font-size: 13px;
     display: flex;
     align-items: center;
-    padding: 0 20px;
-    border-bottom: 1px solid #e0e0e0;
+    padding: 0 12px;
+    border-bottom: 1px solid #f0f0f0;
     div:not(.cart-col-check) {
       text-align: center;
     }
@@ -629,10 +622,14 @@ export default {
       border-bottom: 1px solid #e0e0e0;
     }
     .shop-name {
-      height: 50px;
+      min-height: 48px;
+      height: auto;
       display: flex;
       align-items: center;
-      padding: 0 20px;
+      padding: 8px 12px;
+      color: #171A26;
+      font-size: 15px;
+      font-weight: 600;
       position: relative;
       @include title_color($light_title_color);
       .shop-info {
@@ -693,14 +690,14 @@ export default {
               border-radius: 3px;
             }
             span:nth-child(2) {
-              font-size: 12px;
+              font-size: 14px;
               margin-left: 5px;
               color: #999;
             }
             .coupon-btn {
-              height: 26px;
+              height: 28px;
               float: right;
-              font-size: 12px;
+              font-size: 14px;
             }
             &::after {
               display: block;
@@ -712,7 +709,9 @@ export default {
       }
       .promotion-notice {
         text-align: right;
-        font-size: 12px;
+        font-size: 13px;
+        color: #999;
+        font-weight: 400;
         flex-shrink: 0;
         margin-left: 10px;
       }
@@ -725,7 +724,7 @@ export default {
       @extend .cart-goods-title;
       background: transparent;
       border-top: 1px solid #f0f0f0;
-      padding: 10px 20px;
+      padding: 16px 12px 28px;
       height: auto;
       .cart-col-check {
         padding-left: 20px;
@@ -741,14 +740,19 @@ export default {
         padding-left: 20px;
         position: relative;
         img {
-          width: 70px;
-          height: 70px;
+          width: 72px;
+          height: 72px;
+          border-radius: 4px;
+          object-fit: cover;
+          background: #f5f5f5;
+          flex-shrink: 0;
         }
         > div > p {
-          @include content_color($light_content_color);
-          font-size: 13px;
+          color: #171A26;
+          font-size: 15px;
+          line-height: 22px;
           text-align: left;
-          margin-left: 10px;
+          margin-left: 12px;
           &:hover {
             color: $theme_color;
           }
@@ -761,9 +765,12 @@ export default {
         justify-content: center;
         flex-shrink: 0;
         text-align: center;
+        color: #171A26;
+        font-size: 15px;
       }
       .cart-col-subtotal {
-        font-weight: bold;
+        color: $theme_color;
+        font-weight: 600;
       }
       .cart-col-qty {
         position: relative;
@@ -777,6 +784,7 @@ export default {
         }
 
         .cart-qty-stock {
+          font-size: 14px;
           position: absolute;
           top: calc(100% + 4px);
           left: 50%;
@@ -784,6 +792,7 @@ export default {
           white-space: nowrap;
           line-height: 1.2;
           color: #999;
+          font-size: 13px;
         }
       }
       .num-input {
@@ -813,11 +822,14 @@ export default {
     @extend .cart-goods-title;
     position: sticky;
     bottom: 0;
-    border-top: 1px solid #ddd;
-    margin-top: 10px;
-    padding: 0 0 0 20px;
-    line-height: 50px;
+    height: 64px;
+    border-top: 1px solid #f0f0f0;
+    margin-top: 0;
+    padding: 0 0 0 12px;
+    line-height: 64px;
     justify-content: space-between;
+    color: #171A26;
+    font-size: 14px;
     > div {
       display: flex;
     }
@@ -832,21 +844,26 @@ export default {
     }
     .total-price div {
       color: $theme_color;
-      font-size: 20px;
+      font-size: 22px;
+      font-weight: 600;
     }
     .pay {
       background-color: $theme_color;
-      width: 150px;
-      font-size: 20px;
+      width: 160px;
+      font-size: 16px;
       color: #fff;
       height: 100%;
-      line-height: 50px;
+      line-height: 64px;
       cursor: pointer;
+
+      &:hover {
+        opacity: 0.92;
+      }
     }
   }
   .handle-btn {
-    font-size: 12px;
-    color: $handle-btn-color;
+    font-size: 14px;
+    color: #666;
     cursor: pointer;
     &:hover {
       color: $theme_color;
@@ -881,12 +898,12 @@ export default {
   > span {
     border: 1px solid $theme_color;
     color: $theme_color;
-    font-size: 12px;
+    font-size: 14px;
     border-radius: 2px;
     padding: 0 2px;
   }
   > p {
-    font-size: 12px;
+    font-size: 14px;
     margin-left: 10px;
     color: #999;
   }
@@ -915,44 +932,25 @@ export default {
   flex-wrap: nowrap;
 }
 
-.cart-del-btn {
-  background-color: #ff7d79 !important;
-  border-color: #ff7d79 !important;
-  color: #fff !important;
+.cart-del-btn,
+.cart-collect-btn {
+  height: auto !important;
   margin: 0 !important;
+  padding: 0 4px !important;
+  border: none !important;
+  background: transparent !important;
+  color: #171A26 !important;
+  font-size: 14px !important;
 
   &:hover,
   &:focus {
-    background-color: #ff6b66 !important;
-    border-color: #ff6b66 !important;
-    color: #fff !important;
+    color: $theme_color !important;
+    background: transparent !important;
   }
 }
 
-.cart-collect-btn {
-  background-color: #fa6419 !important;
-  border-color: #fa6419 !important;
-  color: #fff !important;
-  margin: 0 !important;
-
-  &:hover,
-  &:focus {
-    background-color: #e55a15 !important;
-    border-color: #e55a15 !important;
-    color: #fff !important;
-  }
-
-  &.is-collected {
-    background-color: $theme_color !important;
-    border-color: $theme_color !important;
-
-    &:hover,
-    &:focus {
-      background-color: $theme_color !important;
-      border-color: $theme_color !important;
-      opacity: 0.9;
-    }
-  }
+.cart-collect-btn.is-collected {
+  color: $theme_color !important;
 }
 </style>
 <style>
diff --git a/buyer/src/pages/GoodsDetail.vue b/buyer/src/pages/GoodsDetail.vue
index cf2817269..109e000ff 100644
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="background: #fff">
+  <div class="goods-detail-page">
     <BaseHeader></BaseHeader>
     <Search></Search>
     <div class="shop-item-path">
@@ -178,7 +178,10 @@ export default {
           arr.push(e.id);
         }
       });
-      return location.origin + "/goodsList?categoryId=" + arr.toString();
+      return {
+        path: "/goodsList",
+        query: { categoryId: arr.toString() },
+      };
     },
     async collect () {
       // 收藏店铺
@@ -214,10 +217,14 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+.goods-detail-page {
+  background: #f5f5f5;
+}
+
 .shop-item-path {
-  height: 38px;
-  @include background_color($light_background_color);
-  color: #2c2c2c;
+  height: 44px;
+  background: transparent;
+  color: #666;
 }
 
 .shop-nav-container {
@@ -230,51 +237,65 @@ export default {
 
   :deep(.el-breadcrumb) {
     line-height: 1;
+    font-size: 14px;
+  }
+
+  :deep(.el-breadcrumb__inner) {
+    color: #666;
+    font-weight: 400;
+  }
+
+  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
+    color: #171A26;
   }
 
   .store-collect {
     position: absolute;
-    right: 20px;
+    right: 0;
     top: 50%;
     transform: translateY(-50%);
-    color: #999;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    color: #171A26;
+    font-size: 14px;
+
+    .store-collect-btn,
+    .contact-service-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      color: #171A26;
 
-    span:not(.store-collect-btn):not(.contact-service-btn) {
       &:hover {
-        cursor: pointer;
         color: $theme_color;
       }
     }
 
-    .store-collect-btn,
-    .contact-service-btn {
-      cursor: pointer;
-    }
-
     .store-collect-btn {
       .store-collect-icon {
-        color: #666;
-        vertical-align: middle;
+        color: #999;
+        font-size: 16px;
       }
 
+      &.is-collected,
       &.is-collected .store-collect-icon {
         color: $theme_color;
       }
     }
 
     .store-name-link {
-      color: $theme_color;
+      color: #438cde;
       text-decoration: none;
 
       &:hover {
         color: $theme_color;
-        text-decoration: none;
       }
     }
   }
 }
 .sale-btn{
   margin:10px 0
-
 }
 </style>
diff --git a/buyer/src/pages/GoodsList.vue b/buyer/src/pages/GoodsList.vue
index 38c09aa6a..1528924c4 100644
--- a/buyer/src/pages/GoodsList.vue
+++ b/buyer/src/pages/GoodsList.vue
@@ -63,12 +63,12 @@
                 <span>{{ item.goodsName }}</span>
               </div>
               <div class="goods-show-num">
-                已有<span>{{ item.commentNum || 0 }}</span>人评价
+                <span>{{ formatGrade(item.grade) }}%好评</span>
+                <span class="goods-show-sales">销量 {{ item.buyCount || 0 }}</span>
               </div>
               <div class="goods-show-seller">
                 <span
                   class="text-bottom hover-pointer"
-                  style="color: #e4393c"
                   @click.stop="goShopPage(item.storeId)"
                 >{{ item.storeName }}</span>
               </div>
@@ -80,25 +80,6 @@
                 >
                   自营
                 </el-tag>
-                <!-- E_COUPON 卡密商品类型标识 -->
-                <el-tag
-                  class="goods-show-tag goods-show-tag-physical goods-show-tag-ecoupon"
-                  v-if="item.goodsType === 'E_COUPON'"
-                >
-                  电子卡券
-                </el-tag>
-                <el-tag
-                  class="goods-show-tag goods-show-tag-physical"
-                  v-else-if="item.goodsType === 'VIRTUAL_GOODS'"
-                >
-                  虚拟
-                </el-tag>
-                <el-tag
-                  class="goods-show-tag goods-show-tag-physical"
-                  v-else-if="item.goodsType === 'PHYSICAL_GOODS'"
-                >
-                  实物
-                </el-tag>
               </div>
             </div>
           </div>
@@ -125,7 +106,6 @@ import { Message } from "@/utils/message";
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import GoodsClassNav from "@/components/nav/GoodsClassNav";
 import * as apiGoods from "@/api/goods";
-import { isBuyerLoggedIn, redirectToLogin } from "@/utils/buyerLogin";
 export default {
   name: "GoodsList",
   beforeRouteEnter(to, from, next) {
@@ -201,15 +181,22 @@ export default {
       }
       this.getGoodsList();
     },
+    formatGrade(grade) {
+      if (grade === null || grade === undefined || grade === "") {
+        return 100;
+      }
+      const num = Number(grade);
+      if (Number.isNaN(num)) {
+        return 100;
+      }
+      const fixed = Number(num.toFixed(1));
+      return fixed % 1 === 0 ? fixed.toFixed(0) : String(fixed);
+    },
     goGoodsDetail(skuId, goodsId) {
       const location = {
         path: "/goodsDetail",
         query: { skuId, goodsId },
       };
-      if (!isBuyerLoggedIn()) {
-        redirectToLogin(this.$router, location);
-        return;
-      }
       window.open(this.$router.resolve(location).href, "_blank");
     },
     goShopPage(id) {
@@ -308,10 +295,6 @@ export default {
   }
 }
 
-.goods-show-tag-ecoupon {
-  padding: 0 5px;
-}
-
 .goods-show-tag-self {
   --el-tag-bg-color: #fa2c19;
   --el-tag-border-color: #fa2c19;
@@ -336,28 +319,18 @@ export default {
   }
 }
 
-.goods-show-tag-physical {
-  background-color: #e6f4ff;
-  border-color: #b3d8ff;
-  color: #409eff;
-
-  :deep(.el-tag__content) {
-    color: #409eff;
-  }
-}
-
 .goods-show-seller {
   // padding:3px 0;
   vertical-align: middle;
 }
 .container {
-  margin:25px auto 15px auto;
-  width: 1184px;
+  margin: 20px auto 24px;
+  width: 1200px;
   min-width: 1000px;
   position: relative;
 }
 .price-sort:hover {
-  color: #e23a3a;
+  color: $theme_color;
 }
 .goods-box {
   display: flex;
@@ -383,16 +356,16 @@ export default {
 }
 .goods-list-tool {
   width: 100%;
-  height: 38px;
-  border: 1px solid #ccc;
-  background-color: #f1f1f1;
+  height: 48px;
+  border: 1px solid #eee;
+  background-color: #fff;
 }
 .goods-list-tool ul {
   display: flex;
   align-items: center;
   height: 100%;
   padding-left: 15px;
-  font-size: 12px;
+  font-size: 14px;
   margin: 0;
   list-style: none;
 
@@ -435,33 +408,105 @@ export default {
   display: inline-flex;
   align-items: center;
   gap: 2px;
-  padding: 3px 5px;
-  border: 1px solid #ccc;
-  margin-left: -1px;
-  background-color: #fff;
+  height: 48px;
+  padding: 0 16px;
+  border: none;
+  margin-left: 0;
+  background-color: transparent;
+  color: #666;
   line-height: 1;
   white-space: nowrap;
   box-sizing: border-box;
 }
 .goods-list-tool li > span:hover {
-  border-color: $theme_color;
+  color: $theme_color;
   position: relative;
   text-decoration: none;
   z-index: 1;
 }
 .goods-list-tool li > span .el-icon {
-  font-size: 12px;
+  font-size: 14px;
   line-height: 1;
 }
 .goods-list-tool-active {
-  color: #fff;
-  border-left: 1px solid #ccc;
-  background-color: $theme_color !important;
+  color: $theme_color !important;
+  background-color: transparent !important;
+  font-weight: 600;
 
   .price-color {
-    color: rgba(255, 255, 255, 0.65) !important;
+    color: $theme_color !important;
   }
 }
 
+.goods-list {
+  column-gap: 12px;
+  padding: 4px 12px 16px;
+  background: #fff;
+  border: 1px solid #eee;
+  border-top: none;
+  box-sizing: border-box;
+}
+
+.goods-show-info {
+  width: calc(20% - 10px);
+  margin: 12px 0 0;
+  padding: 12px;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+}
+
+.goods-show-info:hover {
+  border-color: #f0d0cc;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+}
+
+.seckill-price {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.goods-show-detail {
+  height: 44px;
+  margin: 8px 0 6px;
+  color: #171A26;
+  font-size: 15px;
+  line-height: 22px;
+}
+
+.goods-show-num {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+  color: #999;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.goods-show-num span {
+  color: #999;
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.goods-show-sales {
+  flex-shrink: 0;
+}
+
+.goods-show-seller {
+  color: #438cde;
+  font-size: 14px;
+
+  span:hover {
+    color: $theme_color;
+  }
+}
+
+.goods-page {
+  margin: 16px 0 8px;
+}
+
 /* ---------------商品栏结束------------------- */
 </style>
diff --git a/buyer/src/pages/Index.vue b/buyer/src/pages/Index.vue
index fa0a5f49b..2daaf54d6 100644
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -12,8 +12,8 @@
                             <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color" style="font-size: 15px;">￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
                             <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color" style="font-size: 15px;"><span class="price">{{item.discount}}</span>折</span>
                             <span class="describe" style="font-size: 15px;margin-left: 5px;">满{{item.consumeThreshold}}元可用</span>
-                            <p style="font-size: 10px;">使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
-                            <p style="font-size: 10px;">有效期：{{item.endTime}}</p>
+                            <p style="font-size: 14px;">使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
+                            <p style="font-size: 14px;">有效期：{{item.endTime}}</p>
                       </el-card>
               </div>
             <template #footer>
diff --git a/buyer/src/pages/Login.vue b/buyer/src/pages/Login.vue
index d45d579f5..44757fc06 100644
--- a/buyer/src/pages/Login.vue
+++ b/buyer/src/pages/Login.vue
@@ -19,55 +19,13 @@
       </el-carousel>
       <!-- 登录模块 -->
       <div class="form-box" @click="hideVerify">
-        <div class="account-number">
-          <div class="tab-switch">
-            <span>{{ type ? '账号登录' : '验证码登录' }}</span>
-            <span @click="type = !type,scannerCodeLoginFLag=false">{{ type ? '验证码登录' : '账号登录' }}</span>
-          </div>
-          <!---->
-          <div @click="scannerCodeLoginFLag=!scannerCodeLoginFLag">{{!scannerCodeLoginFLag ? '扫码登录' : '返回'}}</div>
-        </div>
-        <!--扫码登录-->
-        <div v-show="scannerCodeLoginFLag">
-          <div class="qr-container">
-            <div class='qr-shadow flex' v-show="qrCodeStatus == 'fail'">
-              <span>
-                二维码已失效
-              </span>
-              <el-button size='small' @click="createPCLoginSession">刷新二维码</el-button>
-            </div>
-            <vue-qr
-              :text="qrCode"
-              :margin="0"
-              colorDark="#000"
-              colorLight="#fff"
-              :size="150"
-            ></vue-qr>
-          </div>
-          <div class="drag-area">
-          <!--    等待扫码-->
-          <div v-if="scannerCodeLoginStatus === 0" class="pending-scan">
-            <p>打开手机App/小程序，扫码登录</p>
-          </div>
-          <!--    已经扫码-->
-          <div v-else-if="scannerCodeLoginStatus === 1" class="scanned">
-            <p>扫码成功，等待确认</p>
-          </div>
-
-          <!--    存在session，等待发送给客户端验证-->
-          <div v-if="scannerCodeLoginStatus === 2" class="scanned">
-            <p>登录成功，正在页面跳转</p>
-          </div>
-
-          <!--    已经发送登录请求-->
-          <div v-else-if="scannerCodeLoginStatus === 3" class="quick-logining">
-            <p>取消登录</p>
-          </div>
-        </div>
+        <div class="login-tabs">
+          <span :class="{ active: type }" @click="type = true">账号登录</span>
+          <span :class="{ active: !type }" @click="type = false">验证码登录</span>
         </div>
 
         <div>
-          <div v-show="!scannerCodeLoginFLag">
+          <div>
           <!-- 账号密码登录 -->
           <el-form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
                 @click.self="hideVerify">
@@ -82,7 +40,7 @@
               </el-input>
             </el-form-item>
             <el-form-item>
-              <el-button type="danger" @click.stop="handleSubmit('formInline')" style="width:100%">登录</el-button>
+              <el-button class="login-btn" @click.stop="handleSubmit('formInline')">登录</el-button>
             </el-form-item>
           </el-form>
           <!-- 验证码登录 -->
@@ -90,22 +48,17 @@
                 @click.self="hideVerify">
             <el-form-item prop="mobile">
               <el-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
-                <template #prepend><el-icon><Lock /></el-icon></template>
+                <template #prepend><el-icon><Iphone /></el-icon></template>
               </el-input>
             </el-form-item>
             <el-form-item prop="code">
               <el-input type="text" v-model="formSms.code" placeholder="手机验证码">
                 <template #prepend><el-icon style="font-weight: bold"><Document /></el-icon></template>
-                <template #append><el-button @click="sendCode">{{ codeMsg }}</el-button></template>
+                <template #append><el-button @click.stop="sendCode">{{ codeMsg }}</el-button></template>
               </el-input>
             </el-form-item>
             <el-form-item>
-              <el-button @click.stop="verifyBtnClick" style="width:100%"
-                      :type="verifyStatus?'success':'default'">{{ verifyStatus ? '验证通过' : '点击完成安全验证' }}
-              </el-button>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="danger" @click="handleSubmit('formSms')" style="width:100%">登录</el-button>
+              <el-button class="login-btn" @click="handleSubmit('formSms')">登录</el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -126,7 +79,7 @@
               </svg>
             </div>
             <div class="register">
-              <span style="color:red" @click.stop="$router.push('signUp')">还没有账号？点击立即注册</span>
+              <span class="register-link" @click.stop="$router.push('signUp')">立即注册</span>
               <span @click.stop="$router.push('forgetPassword')">忘记密码</span>
             </div>
           </div>
@@ -159,33 +112,23 @@ import * as RegExp from "@/plugins/RegExp.js";
 import { md5 } from "@/plugins/md5.js";
 import * as apiLogin from "@/api/login.js";
 import { sendSms } from "@/api/common.js";
-import { webLogin, loginCallback,sCLogin,getSCLoginCode} from "@/api/login.js";
+import { webLogin, loginCallback } from "@/api/login.js";
 import storage from "@/plugins/storage.js";
 import verify from "@/components/verify";
-import vueQr from "vue-qr";
-import { User, Lock, Document } from "@element-plus/icons-vue";
+import { User, Lock, Document, Iphone } from "@element-plus/icons-vue";
 import config from "@/config";
 
 export default {
   name: "Login",
   components: {
     verify,
-    vueQr,
     User,
     Lock,
     Document,
+    Iphone,
   },
   data() {
     return {
-      qrCodeStatus:"success", //
-      qrCode: '',
-      qrSessionToken:'',
-      //是否是二维码登录
-      scannerCodeLoginFLag: false,
-      scannerCodeLoginStatus: 0,
-      qrCodeTimer:null,
-      qrExpireMs: 20000,
-      qrCreateSeq: 0,
       config,
       type: true, // true 账号登录  false 验证码登录
       formData: {
@@ -234,10 +177,6 @@ export default {
           if (this.type) {
             this.$refs.verify?.init();
           } else {
-            if (!this.verifyStatus) {
-              Message.warning("请先完成安全验证");
-              return;
-            }
             if (!this.codeSent) {
               Message.warning("请先获取短信验证码");
               return;
@@ -274,41 +213,44 @@ export default {
     },
     // 发送手机验证码
     sendCode() {
-      if (this.time === 60) {
-        if (this.formSms.mobile === "") {
-          Message.warning("请先填写手机号");
-          return;
-        }
-        if (!this.verifyStatus) {
-          Message.warning("请先完成安全验证");
-          return;
-        }
-        let params = {
-          mobile: this.formSms.mobile,
-          verificationEnums: "LOGIN",
-        };
-        sendSms(params).then((res) => {
-          if (res.success) {
-            Message.success("验证码发送成功");
-            this.codeSent = true;
-            let that = this;
-            this.interval = setInterval(() => {
-              that.time--;
-              if (that.time === 0) {
-                that.time = 60;
-                that.codeMsg = "重新发送";
-                that.verifyStatus = false;
-                that.codeSent = false;
-                clearInterval(that.interval);
-              } else {
-                that.codeMsg = that.time;
-              }
-            }, 1000);
-          } else {
-            Message.warning(res.message);
-          }
-        }).catch(() => {});
+      if (this.time !== 60) return;
+      if (this.formSms.mobile === "") {
+        Message.warning("请先填写手机号");
+        return;
       }
+      if (!RegExp.mobile.test(this.formSms.mobile)) {
+        Message.warning("请输入正确的手机号");
+        return;
+      }
+      this.$refs.verify?.init();
+    },
+    dispatchSms() {
+      sendSms({
+        mobile: this.formSms.mobile,
+        verificationEnums: "LOGIN",
+      }).then((res) => {
+        if (res.success) {
+          Message.success("验证码发送成功");
+          this.codeSent = true;
+          this.interval = setInterval(() => {
+            this.time--;
+            if (this.time === 0) {
+              this.time = 60;
+              this.codeMsg = "重新发送";
+              this.verifyStatus = false;
+              this.codeSent = false;
+              clearInterval(this.interval);
+            } else {
+              this.codeMsg = this.time;
+            }
+          }, 1000);
+        } else {
+          this.verifyStatus = false;
+          Message.warning(res.message);
+        }
+      }).catch(() => {
+        this.verifyStatus = false;
+      });
     },
     verifyChange(con) {
       // 拼图验证码回显
@@ -336,12 +278,7 @@ export default {
       } else {
         this.verifyStatus = true;
         this.hideVerify();
-      }
-    },
-    // 开启滑块验证
-    verifyBtnClick() {
-      if (!this.verifyStatus) {
-        this.$refs.verify?.init();
+        this.dispatchSms();
       }
     },
     handleWebLogin(type) {
@@ -369,92 +306,9 @@ export default {
       });
     },
 
-    async createPCLoginSession() {
-      const requestId = ++this.qrCreateSeq;
-      this.clearQRLoginInfo();
-      getSCLoginCode({}).then(response=>{
-        if (requestId !== this.qrCreateSeq) return;
-        if (response.code == 200 && response.result) {
-          this.qrCodeStatus = 'success'
-          let session = response.result;
-          this.qrSessionToken = session.token;
-          this.qrExpireMs = Number(session.duration) > 0 ? Number(session.duration) : 20000;
-          if (session.status === 0) {
-            this.qrCode = session.token;
-            this.refreshQrCode();
-          }
-          this.qrLogin();
-        } else {
-          this.markQrExpired();
-        }
-      }).catch(() => {
-        if (requestId !== this.qrCreateSeq) return;
-        this.markQrExpired();
-      });
-    },
-
-    refreshQrCode() {
-      this.clearQrTimer();
-      this.qrCodeTimer = setTimeout(() => {
-        this.qrCodeStatus = 'fail';
-        this.clearQrTimer();
-      }, this.qrExpireMs);
-    },
-
-    clearQrTimer() {
-      if (this.qrCodeTimer) {
-        clearTimeout(this.qrCodeTimer);
-      }
-      this.qrCodeTimer = null;
-    },
-
-    markQrExpired() {
-      this.qrCodeStatus = 'fail';
-      this.scannerCodeLoginStatus = 0;
-      this.qrSessionToken = '';
-      this.clearQrTimer();
-    },
-
-    clearQRLoginInfo(){
-      this.scannerCodeLoginStatus=0;
-      this.qrSessionToken='';
-      this.clearQrTimer();
-    },
-
-    async qrLogin() {
-      const token = this.qrSessionToken;
-      if(!token) return;
-      sCLogin(token,{beforeSessionStatus:this.scannerCodeLoginStatus}).then(response=>{
-        if (token !== this.qrSessionToken) return;
-        if (response.success) {
-          this.scannerCodeLoginStatus = response.result.status;
-          switch (response.result.status) {
-            case 0:
-            case 1:
-              this.qrLogin();break;
-            case 2:
-              this.clearQRLoginInfo();
-              this.loginSuccess(response.result.token.accessToken,response.result.token.refreshToken);
-              break;
-            case 3:
-              this.createPCLoginSession();
-              break;
-            default:
-              this.markQrExpired();
-              break
-          }
-        }  else{
-          this.markQrExpired();
-        }
-      }).catch(() => {
-        if (token !== this.qrSessionToken) return;
-        this.markQrExpired();
-      });
-    },
   },
   beforeUnmount() {
-    this.qrCreateSeq++;
-    this.clearQRLoginInfo();
+    clearInterval(this.interval);
   },
   mounted() {
     let uuid = this.$route.query.state;
@@ -468,16 +322,6 @@ export default {
     }
   },
   watch: {
-    scannerCodeLoginFLag(v){
-      if(v){
-        this.createPCLoginSession();
-        console.log("二维码登录");
-      }else{
-        console.log("取消二维码登录");
-        this.qrCreateSeq++;
-        this.clearQRLoginInfo();
-      }
-    },
     type(v) {
       if (v) {
         this.$refs.formInline.resetFields();
@@ -502,83 +346,44 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.drag-area{
-  margin: 10px 0;
-}
 .login {
-  height: 100%;
-  background-color: #f0f2f5;
-}
-.other{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.qr-container{
-  text-align: center;
-  margin: 20px 0;
-  position: relative;
-  >.qr-shadow{
-    background: rgba(0, 0, 0, 0.45);
-    position: absolute;
-    left: 50%;
-    margin-left: -75px;
-    top: 0;
-    z-index: 99;
-    width: 150px;
-    height: 150px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    color: #fff;
-    >span{
-      margin-bottom: 20px;
-      font-size: 13px;
-      letter-spacing: 2px;
-    }
-  }
+  min-height: 100vh;
+  background-color: #f5f5f5;
 }
+
 .top-content {
   width: 100%;
-  height: 80px;
+  height: 72px;
   position: relative;
   z-index: 1;
-
-  box-shadow: 0 1px 1px #ddd;
   background-color: #fff;
+  border-bottom: 1px solid #eee;
 
   .logo-box {
-    width: 80%;
-    max-width: 1200px;
-    height: 80px;
+    width: 1200px;
+    max-width: calc(100% - 48px);
+    height: 72px;
     margin: 0 auto;
     display: flex;
     align-items: center;
 
     img {
-      width: 150px;
+      height: 36px;
+      width: auto;
       cursor: pointer;
     }
 
     div {
-      font-size: 20px;
-      margin-top: 10px;
+      margin-left: 16px;
+      padding-left: 16px;
+      border-left: 1px solid #e5e5e5;
+      font-size: 18px;
+      font-weight: 600;
+      color: #171A26;
+      line-height: 24px;
     }
   }
 }
-.pending-scan{
-  text-align: center;
-  color:black;
-}
-.scanned{
-  text-align: center;
-  color:green;
-}
-.quick-logining{
-  text-align: center;
-  color:red;
-}
 
 .login-carousel {
   width: 100%;
@@ -586,118 +391,213 @@ export default {
 
   .demo-carousel {
     height: 550px;
-    width: inherit;
-    display: flex;
-    justify-content: center;
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      display: block;
+      width: 100%;
+      height: 550px;
+      object-fit: cover;
+      object-position: center;
+    }
   }
 }
 
 .login-container {
+  --login-card-right: max(96px, 10%);
   position: relative;
   width: 100%;
   height: 550px;
 }
 
 .form-box {
-  width: 350px;
+  width: 460px;
   box-sizing: border-box;
   position: absolute;
-  top: 80px;
-  right: 15%;
-  padding: 20px;
-  background: rgba(255, 255, 255, 0.8);
+  top: 48px;
+  right: var(--login-card-right);
+  padding: 32px 32px 24px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 
-  .account-number {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    font-weight: bold;
+  :deep(.el-form-item) {
+    margin-bottom: 22px;
+  }
 
-    > div:nth-child(2) {
-      color: $theme_color;
-      cursor: pointer;
-    }
+  :deep(.el-form-item__error) {
+    padding-top: 2px;
+    font-size: 12px;
+    line-height: 16px;
+  }
 
-    .tab-switch {
-      height: 40px;
-      font-size: 14px;
+  :deep(.el-input__wrapper),
+  :deep(.el-input-group__prepend),
+  :deep(.el-input-group__append) {
+    box-shadow: none;
+    background: #fff;
+  }
 
-      span:nth-child(1) {
-        font-size: 16px;
-        border-right: 1px solid #ddd;
-        padding-right: 10px;
-      }
+  :deep(.el-input) {
+    height: 48px;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+  }
 
-      span:nth-child(2) {
-        cursor: pointer;
-        padding-left: 10px;
+  :deep(.el-input__inner) {
+    height: 48px;
+    font-size: 16px;
+    color: #171A26;
+  }
 
-        &:hover {
-          color: $theme_color;
-        }
+  :deep(.el-input-group__prepend) {
+    padding: 0 14px;
+    color: #999;
+    font-size: 18px;
+    border-right: 1px solid #f0f0f0;
+  }
+
+  :deep(.el-input-group__append) {
+    padding: 0;
+    border-left: 1px solid #f0f0f0;
+  }
+
+  :deep(.el-input-group__append .el-button) {
+    height: 46px;
+    margin: 0;
+    padding: 0 14px;
+    border: none;
+    color: $theme_color;
+    font-size: 16px;
+    background: transparent;
+  }
+}
+
+.login-tabs {
+  display: flex;
+  gap: 32px;
+  margin-bottom: 28px;
+  border-bottom: 1px solid #f0f0f0;
+
+  span {
+    position: relative;
+    padding-bottom: 14px;
+    color: #666;
+    font-size: 18px;
+    line-height: 26px;
+    cursor: pointer;
+
+    &.active {
+      color: #171A26;
+      font-weight: 600;
+
+      &::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -1px;
+        height: 2px;
+        background: $theme_color;
       }
     }
   }
 }
 
+.login-btn {
+  width: 100%;
+  height: 48px;
+  border-radius: 4px;
+  font-size: 18px;
+}
+
+.login-btn {
+  background: $theme_color !important;
+  border-color: $theme_color !important;
+  color: #fff !important;
+}
+
 .verify-con {
   position: absolute;
-  right: 16%;
+  right: var(--login-card-right);
   top: 90px;
   z-index: 10;
 }
 
+.other {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 4px;
+}
+
 .other-login {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 
   > svg {
     cursor: pointer;
-    width: 24px;
-    margin-right: 10px;
-    height: 24px;
+    width: 32px;
+    height: 32px;
   }
 }
 
 .register {
   display: flex;
-  margin-top: -10px;
-  font-size: 12px;
+  align-items: center;
+  gap: 16px;
+  font-size: 15px;
 
   span {
-    margin-left: 10px;
-    font-size: 12px;
+    color: #666;
+    cursor: pointer;
 
     &:hover {
-      cursor: pointer;
       color: $theme_color;
     }
   }
+
+  .register-link {
+    color: $theme_color;
+  }
 }
 
 .foot {
   position: fixed;
-  bottom: 4vh;
-  width: 368px;
-  left: calc(50% - 184px);
-  color: rgba(0, 0, 0, 0.45);
+  bottom: 24px;
+  width: 420px;
+  left: calc(50% - 210px);
+  color: #999;
   font-size: 14px;
+  text-align: center;
 
   .help {
-    margin: 0 auto;
-    margin-bottom: 1vh;
-    width: 60%;
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    margin-bottom: 8px;
 
     .item {
-      color: rgba(0, 0, 0, 0.45);
-    }
+      color: #666;
+      text-decoration: none;
 
-    :hover {
-      color: rgba(0, 0, 0, 0.65);
+      &:hover {
+        color: $theme_color;
+      }
+    }
+  }
+
+  .copyright {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    a {
+      color: #666;
+      text-decoration: none;
     }
   }
 }
-
-.icon-hover {
-  cursor: pointer;
-}
-
 </style>
diff --git a/buyer/src/pages/Merchant.vue b/buyer/src/pages/Merchant.vue
index 0687f3f26..c8bb1c55e 100644
--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -3,65 +3,63 @@
     <BaseHeader/>
     <!-- 搜索栏 -->
     <Search :storeId="storeMsg.storeId || $route.query.id" @search="search"></Search>
-    <!-- 店铺logo -->
-    <div class="shop-logo">
-      <div class="shop-logo-inner">
+    <div class="store-head">
+      <div class="store-head-main">
         <div class="shop-info">
           <p class="shop-name">{{ storeMsg.storeName || '店铺' }}</p>
           <p
             v-if="storeMsg.storeDesc"
-            :alt="storeMsg.storeDesc"
             class="shop-desc ellipsis"
             v-html="storeMsg.storeDesc"
           ></p>
         </div>
         <div class="shop-actions">
-          <span class="hover-pointer store-collect-btn" @click="collect">
-            <el-icon :color="storeCollected ? '#ffc107' : '#fff'">
-              <StarFilled />
-            </el-icon>
-            <span>{{
-              storeCollected ? '已收藏店铺' : '收藏店铺'
-            }}</span>
-          </span>
           <span
-            class="hover-pointer store-service-btn"
-            @click="IMService(storeMsg.storeId, null, null)"
+            class="store-collect-btn"
+            :class="{ 'is-collected': storeCollected }"
+            @click="collect"
           >
-            <i class="icomoon icon-customer-service"></i>联系客服
+            <el-icon><StarFilled /></el-icon>
+            <span>{{ storeCollected ? '已收藏店铺' : '收藏店铺' }}</span>
           </span>
+          <span class="store-service-btn" @click="IMService(storeMsg.storeId, null, null)">联系客服</span>
         </div>
       </div>
-    </div>
-    <div class="store-category">
-      <ul class="cate-list">
-        <li
-          class="cate-item"
-          @click="searchByCate({ id: '', labelName: '店铺推荐' })"
-        >
-          首页
-        </li>
-        <li v-for="(cate, index) in cateList" :key="index" class="cate-item">
-          <el-dropdown v-if="cate.children.length" trigger="hover">
-            <div @click.self="searchByCate(cate)">
-              {{ cate.labelName }}
-              <el-icon><ArrowDown /></el-icon>
-            </div>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item
-                  v-for="sec in cate.children"
-                  :key="sec.id"
-                  @click="searchByCate(sec)"
-                >{{ sec.labelName }}</el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-          <span v-else @click.self="searchByCate(cate)">{{
-              cate.labelName
-            }}</span>
-        </li>
-      </ul>
+      <div class="store-category">
+        <ul class="cate-list">
+          <li
+            class="cate-item"
+            :class="{ active: !params.storeCatId }"
+            @click="searchByCate({ id: '', labelName: '店铺推荐' })"
+          >
+            首页
+          </li>
+          <li
+            v-for="(cate, index) in cateList"
+            :key="index"
+            class="cate-item"
+            :class="{ active: isCateActive(cate) }"
+            @click="searchByCate(cate)"
+          >
+            <el-dropdown v-if="cate.children && cate.children.length" trigger="hover">
+              <div class="cate-label">
+                {{ cate.labelName }}
+                <el-icon><ArrowDown /></el-icon>
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    v-for="sec in cate.children"
+                    :key="sec.id"
+                    @click.stop="searchByCate(sec)"
+                  >{{ sec.labelName }}</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <span v-else>{{ cate.labelName }}</span>
+          </li>
+        </ul>
+      </div>
     </div>
 
 
@@ -72,42 +70,49 @@
 
 
     <div v-else class="store-goods-section">
-      <div class="promotion-decorate">{{ cateName }}</div>
+      <div class="store-goods-hd">{{ cateName }}</div>
       <div class="goods-list">
         <empty v-if="goodsList.length === 0"/>
+        <template v-else>
         <div
           v-for="(item, index) in goodsList"
-          v-else
           :key="index"
           class="goods-show-info"
           @click="goGoodsDetail(item.id, item.goodsId)"
         >
-
           <div class="goods-show-img">
-            <img :src="item.small" alt=""/>
+            <img :src="item.thumbnail || item.small" alt=""/>
           </div>
           <div class="goods-show-price">
-            <span>
-              <span class="seckill-price text-danger">{{ $filters.unitPrice(item.price, "￥") }}</span>
-            </span>
+            <span class="seckill-price text-danger">{{ $filters.unitPrice(item.price, "￥") }}</span>
           </div>
           <div class="goods-show-detail">
+            <el-tag
+              v-if="item.salesModel === 'WHOLESALE'"
+              class="goods-show-tag goods-show-tag-wholesale"
+            >批发</el-tag>
             <span>{{ item.goodsName }}</span>
           </div>
           <div class="goods-show-num">
-            已有<span>{{ item.commentNum || 0 }}</span>人评价
+            <span>{{ formatGrade(item.grade) }}%好评</span>
+            <span class="goods-show-sales">销量 {{ item.buyCount || 0 }}</span>
+          </div>
+          <div class="goods-show-right" v-if="item.selfOperated">
+            <el-tag class="goods-show-tag goods-show-tag-self">自营</el-tag>
           </div>
         </div>
+        </template>
       </div>
-      <div class="goods-page">
-        <el-pagination           v-model:current-page="params.pageNumber"
+      <div class="goods-page" v-if="total > 0">
+        <el-pagination
+          v-model:current-page="params.pageNumber"
           v-model:page-size="params.pageSize"
           :total="total"
           @current-change="changePageNum"
           @size-change="changePageSize"
-         layout="sizes, prev, pager, next"></el-pagination>
+          layout="total, prev, pager, next, sizes"
+        ></el-pagination>
       </div>
-
     </div>
 
     <BaseFooter/>
@@ -311,9 +316,22 @@ export default {
     searchByCate(cate) {
       // 搜索同分类下商品
       this.params.storeCatId = cate.id;
+      this.params.pageNumber = 1;
       this.cateName = cate.labelName;
       this.getGoodsList();
     },
+    isCateActive(cate) {
+      if (!cate || !this.params.storeCatId) return false;
+      if (this.params.storeCatId === cate.id) return true;
+      return Array.isArray(cate.children) && cate.children.some((sec) => sec.id === this.params.storeCatId);
+    },
+    formatGrade(grade) {
+      if (grade === null || grade === undefined || grade === "") return 100;
+      const num = Number(grade);
+      if (Number.isNaN(num)) return 100;
+      const fixed = Number(num.toFixed(1));
+      return fixed % 1 === 0 ? fixed.toFixed(0) : String(fixed);
+    },
     // 分页 修改页码
     changePageNum(val) {
       this.params.pageNumber = val;
@@ -364,123 +382,285 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../assets/styles/goodsList.scss";
-
 .merchant {
-  margin: 0 auto;
+  min-height: 100%;
+  background: #f5f5f5;
 }
 
-.shop-logo {
-  position: relative;
-  width: 100%;
-  background-color: #666;
-  padding: 4px;
-  color: #fff;
+.store-head {
+  width: 1200px;
+  margin: 0 auto;
+  background: #fff;
+  border-radius: 4px;
+}
 
-  .shop-logo-inner {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
-    width: 1200px;
-    margin: 0 auto;
+.store-head-main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 20px 24px 16px;
+}
+
+.shop-info {
+  min-width: 0;
+}
+
+.shop-name {
+  margin: 0;
+  color: #171A26;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.shop-desc {
+  margin: 6px 0 0;
+  max-width: 760px;
+  color: #999;
+  font-size: 13px;
+  line-height: 20px;
+}
+
+.shop-actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 20px;
+  color: #171A26;
+  font-size: 14px;
+}
+
+.store-collect-btn,
+.store-service-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
+  }
+}
+
+.store-collect-btn {
+  .el-icon {
+    color: #999;
+    font-size: 16px;
   }
 
-  .shop-info {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 12px;
-    min-width: 0;
-  }
-
-  .shop-name {
-    margin: 0;
-    font-size: 20px;
-    flex-shrink: 0;
-  }
-
-  .shop-desc {
-    margin: 0;
-    font-size: 14px;
-    max-height: 40px;
-    max-width: 400px;
-  }
-
-  .shop-actions {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 16px;
-    flex-shrink: 0;
-  }
-
-  .store-collect-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-  }
-
-  .store-service-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    min-width: 80px;
+  &.is-collected,
+  &.is-collected .el-icon {
+    color: $theme_color;
   }
 }
 
 .store-category {
-  background-color: #005aa0;
-  color: #fff;
+  border-top: 1px solid #f0f0f0;
+}
 
-  .cate-list {
-    width: 1200px;
-    margin: 0 auto;
-    clear: left;
-    height: 30px;
-    line-height: 30px;
+.cate-list {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 48px;
+  margin: 0;
+  padding: 0 8px;
+  list-style: none;
+  box-sizing: border-box;
+}
 
-    .cate-item {
-      margin-right: 25px;
-      float: left;
+.cate-item {
+  position: relative;
+  height: 48px;
+  padding: 0 18px;
+  color: #666;
+  font-size: 15px;
+  line-height: 48px;
+  cursor: pointer;
+
+  &:hover {
+    color: #171A26;
+  }
+
+  &.active {
+    color: #171A26;
+    font-weight: 600;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 18px;
+      right: 18px;
+      bottom: 0;
+      height: 2px;
+      border-radius: 1px;
+      background: $theme_color;
     }
+  }
 
-    .cate-item:hover {
-      cursor: pointer;
-    }
+  :deep(.el-dropdown) {
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    vertical-align: top;
+    outline: none;
+  }
+
+  :deep(.el-tooltip__trigger) {
+    outline: none;
   }
 }
 
-.promotion-decorate::before,
-.promotion-decorate::after {
-  background-image: url("/src/assets/images/sprite@2x.png");
+.cate-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: inherit;
+  line-height: 48px;
+
+  .el-icon {
+    font-size: 12px;
+  }
 }
 
 .store-goods-section {
   width: 1200px;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0 10px;
+  margin: 16px auto 24px;
+  background: #fff;
+  border-radius: 4px;
   box-sizing: border-box;
+  overflow: hidden;
+}
 
-  .goods-list {
-    width: 100%;
-    margin: 0;
-    column-gap: 10px;
-  }
+.store-goods-hd {
+  padding: 16px 24px 0;
+  color: #171A26;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+}
 
-  .goods-show-info {
-    width: calc(20% - 8px);
-    min-width: 0;
-  }
+.goods-list {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+  width: 100%;
+  margin: 0;
+  padding: 12px 16px 4px;
+  box-sizing: border-box;
+}
 
-  .seckill-price {
-    font-size: 16px;
-  }
+.goods-show-info {
+  width: auto;
+  min-width: 0;
+  margin: 0;
+  padding: 12px;
+  border: 1px solid #f0f0f0;
+  border-radius: 4px;
+  background: #fff;
+  box-sizing: border-box;
+  cursor: pointer;
 
-  .goods-show-detail {
-    height: 32px;
-    line-height: 16px;
+  &:hover {
+    border-color: #f0d0cc;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
   }
 }
+
+.goods-show-img img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+}
+
+.goods-show-price {
+  margin-top: 8px;
+}
+
+.seckill-price {
+  color: $theme_color;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+.goods-show-detail {
+  height: 44px;
+  margin: 6px 0;
+  overflow: hidden;
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.goods-show-num {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 0;
+  color: #999;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+
+  span {
+    color: #999;
+    font-size: 13px;
+    font-weight: 400;
+  }
+}
+
+.goods-show-sales {
+  flex-shrink: 0;
+}
+
+.goods-show-right {
+  display: flex;
+  margin-top: 6px;
+}
+
+.goods-show-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  margin-right: 4px;
+  padding: 0 4px;
+  line-height: 1;
+  vertical-align: 1px;
+}
+
+.goods-show-tag-self {
+  --el-tag-bg-color: #fa2c19;
+  --el-tag-border-color: #fa2c19;
+  --el-tag-text-color: #fff;
+  background-color: #fa2c19;
+  border-color: #fa2c19;
+  color: #fff;
+}
+
+.goods-show-tag-wholesale {
+  --el-tag-bg-color: #f9f0ff;
+  --el-tag-border-color: #d3adf7;
+  --el-tag-text-color: #9254de;
+  background-color: #f9f0ff;
+  border-color: #d3adf7;
+  color: #9254de;
+}
+
+.goods-page {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  margin: 0;
+  padding: 16px;
+  box-sizing: border-box;
+}
 </style>
diff --git a/buyer/src/pages/SignUp.vue b/buyer/src/pages/SignUp.vue
index 50c3e6465..bce822ca4 100644
--- a/buyer/src/pages/SignUp.vue
+++ b/buyer/src/pages/SignUp.vue
@@ -1,16 +1,21 @@
 <template>
   <div class="sign-up" @click="hideVerify">
-    <div style="height:50px;"></div>
-    <div class="logo-box">
-      <img
-        width="150"
-        :src="$store.state.logoImg"
-        @click="$router.push('/')"
-      />
-      <div>注册</div>
+    <div class="top-content">
+      <div class="top-inner">
+        <div class="logo-box">
+          <img :src="$store.state.logoImg" @click="$router.push('/')" />
+          <div>欢迎注册</div>
+        </div>
+        <div class="to-login">已有账号？<a @click.stop="$router.push('login')">立即登录</a></div>
+      </div>
     </div>
-    <div class="login-container">
-        <!-- 注册 -->
+    <div class="signup-banner">
+      <img
+        class="signup-bg"
+        src="https://lili-system.oss-cn-beijing.aliyuncs.com/background.jpg"
+        alt=""
+      />
+      <div class="signup-card">
         <el-form
           ref="formRegist"
           :model="formRegist"
@@ -55,27 +60,21 @@
               placeholder="手机验证码"
             >
               <template #prepend><el-icon style="font-weight: bold"><Document /></el-icon></template>
-              <template #append><el-button @click="sendCode">{{ codeMsg }}</el-button></template>
+              <template #append><el-button @click.stop="sendCode">{{ codeMsg }}</el-button></template>
             </el-input>
           </el-form-item>
           <el-form-item>
-            <el-button @click="verifyBtnClick" style="width:100%" :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</el-button>
+            <el-button class="signup-btn" @click="handleRegist">注册</el-button>
           </el-form-item>
-          <el-form-item>
-            <el-button type="danger" size="large" @click="handleRegist" style="width:100%"
-              >注册</el-button
-            >
-          </el-form-item>
-          <el-form-item><span class="color999">点击注册，表示您同意《<router-link to="/article?id=1371992704333905920" target="_blank">商城用户协议</router-link>》</span></el-form-item>
+          <p class="agreement">点击注册，表示您同意《<router-link to="/article?id=1371992704333905920" target="_blank">商城用户协议</router-link>》</p>
         </el-form>
-        <!-- 拼图验证码 -->
         <Verify
           ref="verify"
           class="verify-con"
           :verifyType="verifyType"
           @change="verifyChange"
         ></Verify>
-        <div class="login-btn">已有账号？<a @click.stop="$router.push('login')">立即登录</a></div>
+      </div>
     </div>
     <div class="foot">
       <div type="flex" justify="space-around" class="help">
@@ -164,140 +163,259 @@ export default {
     },
     // 发送短信验证码
     sendCode () {
-      if (this.time === 60) {
-        if (this.formRegist.mobilePhone === '') {
-          Message.warning('请先填写手机号');
-          return;
-        }
-        if (!this.verifyStatus) {
-          Message.warning('请先完成安全验证');
-          return;
-        }
-        let params = {
-          mobile: this.formRegist.mobilePhone,
-          verificationEnums: 'REGISTER'
-        };
-        sendSms(params).then(res => {
-          if (res.success) {
-            Message.success('验证码发送成功');
-            let that = this;
-            this.interval = setInterval(() => {
-              that.time--;
-              if (that.time === 0) {
-                that.time = 60;
-                that.codeMsg = '重新发送';
-                that.verifyStatus = false;
-                clearInterval(that.interval);
-              } else {
-                that.codeMsg = that.time;
-              }
-            }, 1000);
-          } else {
-            Message.warning(res.message || '验证码发送失败');
-          }
-        }).catch(() => {});
+      if (this.time !== 60) return;
+      if (this.formRegist.mobilePhone === '') {
+        Message.warning('请先填写手机号');
+        return;
       }
+      if (!RegExp.mobile.test(this.formRegist.mobilePhone)) {
+        Message.warning('请输入正确的手机号');
+        return;
+      }
+      this.$refs.verify?.init();
+    },
+    dispatchSms () {
+      sendSms({
+        mobile: this.formRegist.mobilePhone,
+        verificationEnums: 'REGISTER'
+      }).then(res => {
+        if (res.success) {
+          Message.success('验证码发送成功');
+          this.interval = setInterval(() => {
+            this.time--;
+            if (this.time === 0) {
+              this.time = 60;
+              this.codeMsg = '重新发送';
+              this.verifyStatus = false;
+              clearInterval(this.interval);
+            } else {
+              this.codeMsg = this.time;
+            }
+          }, 1000);
+        } else {
+          this.verifyStatus = false;
+          Message.warning(res.message || '验证码发送失败');
+        }
+      }).catch(() => {
+        this.verifyStatus = false;
+      });
     },
-    // 图片验证码成功回调
     verifyChange (con) {
       if (!con.status) return;
       this.hideVerify();
       this.verifyStatus = true;
-    },
-    // 打开图片验证码
-    verifyBtnClick () {
-      if (!this.verifyStatus) {
-        this.$refs.verify?.init();
-      }
+      this.dispatchSms();
     }
   },
   mounted () {
     this.$refs.formRegist.resetFields();
-    document.querySelector('.sign-up').style.height = window.innerHeight + 'px'
   }
 };
 </script>
 <style scoped lang="scss">
-.logo-box {
-  width: 600px;
-  height: 80px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  img {
-    width: 150px;
-    cursor: pointer;
-  }
-  div {
-    font-size: 20px;
-    margin-top: 10px;
-  }
-}
-
-.login-container {
-  border-top: 2px solid $theme_color;
-  position: relative;
-  margin: 0 auto;
-  width: 600px;
-  background-color: #fff;
-  padding: 20px 40px;
+.sign-up {
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
+  background: #f5f5f5;
+}
+
+.top-content {
+  background: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.top-inner {
+  width: 1200px;
+  max-width: calc(100% - 48px);
+  height: 72px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo-box {
+  display: flex;
   align-items: center;
 
-  .signup-form {
-    width: 300px;
+  img {
+    height: 36px;
+    width: auto;
+    cursor: pointer;
   }
 
-  .login-btn{
-    position: absolute;
-    right: 20px;
-    top: -45px;
+  div {
+    margin-left: 16px;
+    padding-left: 16px;
+    border-left: 1px solid #e5e5e5;
+    font-size: 18px;
+    font-weight: 600;
+    color: #171A26;
+    line-height: 24px;
   }
 }
 
-.verify-con{
+.to-login {
+  font-size: 15px;
+  color: #666;
+
+  a {
+    margin-left: 4px;
+    color: $theme_color;
+    cursor: pointer;
+  }
+}
+
+.signup-banner {
+  position: relative;
+  height: 680px;
+  overflow: hidden;
+}
+
+.signup-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.signup-card {
+  position: absolute;
+  top: 50%;
+  right: max(72px, 8%);
+  transform: translateY(-50%);
+  z-index: 1;
+  width: 480px;
+  box-sizing: border-box;
+  padding: 36px 40px 28px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+}
+
+.signup-form {
+  width: 100%;
+}
+
+.signup-card {
+  :deep(.el-form-item) {
+    margin-bottom: 22px;
+  }
+
+  :deep(.el-form-item__error) {
+    padding-top: 2px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  :deep(.el-input__wrapper),
+  :deep(.el-input-group__prepend),
+  :deep(.el-input-group__append) {
+    box-shadow: none;
+    background: #fff;
+  }
+
+  :deep(.el-input) {
+    height: 48px;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+  }
+
+  :deep(.el-input__inner) {
+    height: 48px;
+    font-size: 16px;
+    color: #171A26;
+  }
+
+  :deep(.el-input-group__prepend) {
+    padding: 0 14px;
+    color: #999;
+    font-size: 18px;
+    border-right: 1px solid #f0f0f0;
+  }
+
+  :deep(.el-input-group__append) {
+    padding: 0;
+    border-left: 1px solid #f0f0f0;
+  }
+
+  :deep(.el-input-group__append .el-button) {
+    height: 46px;
+    margin: 0;
+    padding: 0 14px;
+    border: none;
+    color: $theme_color;
+    font-size: 16px;
+    background: transparent;
+  }
+}
+
+.signup-btn {
+  width: 100%;
+  height: 48px;
+  border-radius: 4px;
+  font-size: 18px;
+  background: $theme_color !important;
+  border-color: $theme_color !important;
+  color: #fff !important;
+}
+
+.agreement {
+  margin: 0;
+  font-size: 14px;
+  line-height: 22px;
+  color: #999;
+
+  a {
+    color: $theme_color;
+    text-decoration: none;
+  }
+}
+
+.verify-con {
   position: absolute;
   left: 50%;
-  top: 80px;
+  top: 120px;
   transform: translateX(-50%);
   z-index: 10;
 }
 
-.other-login {
-  margin: 0 auto;
-  .el-icon {
-    font-size: 24px;
-  }
-}
-.regist {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: -10px;
-  span {
-    margin-left: 10px;
-    &:hover {
-      cursor: pointer;
-      color: $theme_color;
-    }
-  }
-}
 .foot {
   position: fixed;
-  bottom: 4vh;
-  width: 368px;
-  left: calc(50% - 184px);
-  color: rgba(0, 0, 0, 0.45);
+  bottom: 24px;
+  width: 420px;
+  left: calc(50% - 210px);
+  color: #999;
   font-size: 14px;
+  text-align: center;
+
   .help {
-    margin: 0 auto;
-    margin-bottom: 1vh;
-    width: 60%;
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    margin-bottom: 8px;
+
     .item {
-      color: rgba(0, 0, 0, 0.45);
+      color: #666;
+      text-decoration: none;
+
+      &:hover {
+        color: $theme_color;
+      }
     }
-    :hover {
-      color: rgba(0, 0, 0, 0.65);
+  }
+
+  .copyright {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    a {
+      color: #666;
+      text-decoration: none;
     }
   }
 }
diff --git a/buyer/src/pages/article/index.vue b/buyer/src/pages/article/index.vue
index d9feafe56..89d8d88da 100644
--- a/buyer/src/pages/article/index.vue
+++ b/buyer/src/pages/article/index.vue
@@ -3,11 +3,11 @@
     <BaseHeader></BaseHeader>
     <Search></Search>
 
-    <div class="title-bg"><p>文章帮助中心</p></div>
     <div class="container width_1200">
+      <h1 class="page-title">文章帮助中心</h1>
       <div class="layoutAll">
-        <el-aside class="side-bar" width="200px">
-          <div class="article-cate">文章分类列表</div>
+        <el-aside class="side-bar" width="220px">
+          <div class="article-cate">文章分类</div>
           <el-menu
             class="side-menu"
             :key="menuKey"
@@ -15,36 +15,33 @@
             :default-openeds="openName"
             @select="onSelect"
           >
-            <el-sub-menu
-              v-for="(menu, index) in list"
-              v-show="menu.children"
-              :key="index"
-              :index="menu.articleCategoryName"
-            >
-              <template #title>
-                <span>{{ menu.articleCategoryName }}</span>
-              </template>
-              <el-menu-item
-                v-for="(chlidren, i) in menu.children"
-                :key="i"
-                :index="String(chlidren.id)"
-              >{{ chlidren.articleCategoryName }}</el-menu-item>
-            </el-sub-menu>
+            <template v-for="(menu, index) in list" :key="menu.id || index">
+              <el-sub-menu v-if="menu.children && menu.children.length" :index="String(menu.id)">
+                <template #title>
+                  <span @click="onSelect(menu.id)">{{ menu.articleCategoryName }}</span>
+                </template>
+                <el-menu-item
+                  v-for="(child, i) in menu.children"
+                  :key="child.id || i"
+                  :index="String(child.id)"
+                >{{ child.articleCategoryName }}</el-menu-item>
+              </el-sub-menu>
+              <el-menu-item v-else :index="String(menu.id)">{{ menu.articleCategoryName }}</el-menu-item>
+            </template>
           </el-menu>
         </el-aside>
-        <el-main class="content ml_10">
+        <el-main class="content">
           <ul class="article-list" v-show="showList">
-            <li v-for="(article, index) in articleList" :key="index" @click="getDetail(article.id)">
+            <li v-if="!articleList.length" class="article-empty">暂无文章</li>
+            <li v-for="(article, index) in articleList" :key="article.id || index" @click="getDetail(article.id)">
               {{ article.title }}
             </li>
           </ul>
-          <transition mode="out-in">
-            <div v-show="!showList">
-              <a class="back-btn" @click="showList = true">&lt;返回上一级</a>
-              <h2 class="mt_10 mb_10">{{ detail.title }}</h2>
-              <div class="mt_10 mb_10" v-html="detail.content"></div>
-            </div>
-          </transition>
+          <div v-show="!showList" class="article-detail">
+            <button type="button" class="back-btn" @click="showList = true">返回列表</button>
+            <h2>{{ detail.title }}</h2>
+            <div class="article-html" v-html="detail.content"></div>
+          </div>
         </el-main>
       </div>
     </div>
@@ -82,26 +79,28 @@ export default {
     getCateList () {
       articleCateList().then(res => {
         if (res.success) {
-          this.list = res.result
-          if (this.$route.query.id) {
+          this.list = res.result || []
+          this.openName = []
+          if (this.$route.query.id && this.detail && this.detail.categoryId) {
             this.activeName = this.detail.categoryId
             this.list.forEach(e => {
-              if (e.children.length) {
-                e.children.forEach(i => {
-                  if (i.id === this.detail.categoryId) {
-                    this.openName.push(e.articleCategoryName)
-                  }
-                })
-              } else {
-                delete e.children
+              const children = e.children || []
+              const hitParent = String(e.id) === String(this.activeName)
+              const hitChild = children.some(i => i && String(i.id) === String(this.activeName))
+              if ((hitParent || hitChild) && children.length) {
+                this.openName.push(String(e.id))
               }
             })
-          } else {
-            this.activeName = this.list[0].children[0].id
-            this.openName.push(this.list[0].articleCategoryName)
+          } else if (this.list[0] && this.list[0].id) {
+            this.activeName = this.list[0].id
+            if (this.list[0].children && this.list[0].children.length) {
+              this.openName.push(String(this.list[0].id))
+            }
           }
           this.menuKey++
-          this.getList(this.activeName)
+          if (this.activeName) {
+            this.getList(this.activeName)
+          }
         }
       })
     },
@@ -133,76 +132,152 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.content {
-  padding: 15px 50px;
+.container {
+  margin: 0 auto;
+  padding: 20px 0 40px;
 }
 
-.header {
-  @include background_color($light_background_color);
-}
-
-.side-menu,
-.side-bar,
-.content {
-  @include white_background_color();
-  @include title_color($light_title_color);
-}
-
-.side-bar {
-  min-height: 600px;
-  height: auto;
+.page-title {
+  margin: 0 0 16px;
+  color: #171A26;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
 }
 
 .layoutAll {
   display: flex;
-  min-height: 1200px;
-  @include background_color($light_background_color);
+  align-items: stretch;
+  gap: 16px;
 }
 
-.container {
-  margin: 0 auto;
-  padding: 20px 0;
+.side-bar,
+.content {
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 4px;
 }
 
-.side-bar a {
-  @include title_color($light_title_color);
+.side-bar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
 }
 
-.layout-footer-center {
-  padding: 0px 15px;
-  padding-bottom: 15px;
-  text-align: center;
+.article-cate {
+  height: 48px;
+  padding: 0 16px;
+  border-bottom: 1px solid #f0f0f0;
+  color: #171A26;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 48px;
 }
-.title-bg{
-  height: 100px;
-  width: 100%;
-  background-color: #7b7b7b;
-  p{
-    width: 1200px;
-    font-size: 30px;
-    height: 100px;
-    line-height: 100px;
-    color: #fff;
-    margin: 0 auto;
-    padding-left: 10px;
+
+.side-menu {
+  flex: 1;
+  border-right: none;
+  padding: 8px 0 12px;
+
+  :deep(.el-sub-menu__title),
+  :deep(.el-menu-item) {
+    height: 40px;
+    line-height: 40px;
+    color: #171A26;
+    font-size: 14px;
+  }
+
+  :deep(.el-sub-menu__title:hover),
+  :deep(.el-menu-item:hover) {
+    background: #fafafa;
+    color: $theme_color;
+  }
+
+  :deep(.el-menu-item.is-active),
+  :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+    background: #fff5f4;
+    color: $theme_color;
   }
 }
-.article-cate{
-  width: 200px;
-  height: 30px;
-  color: #fff;
-  line-height: 30px;
-  text-align: center;
-  font-size: 18px;
-  background-color: #666;
+
+.content {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 28px 12px;
 }
+
 .article-list {
-  li{
-    margin: 10px 0;
-    color: #2D8CF0;
-    &:hover{
-      cursor: pointer;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  li {
+    margin: 0 -28px;
+    padding: 16px 28px;
+    border-bottom: 1px solid #f0f0f0;
+    color: #171A26;
+    font-size: 15px;
+    line-height: 22px;
+    cursor: pointer;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: #fafafa;
+      color: $theme_color;
     }
   }
 }
+
+.article-empty {
+  color: #999 !important;
+  cursor: default !important;
+
+  &:hover {
+    color: #999 !important;
+  }
+}
+
+.back-btn {
+  margin-top: 16px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: #438cde;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
+  }
+}
+
+.article-detail h2 {
+  margin: 16px 0 20px;
+  color: #171A26;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 32px;
+}
+
+.article-html {
+  color: #333;
+  font-size: 15px;
+  line-height: 1.8;
+  word-break: break-word;
+
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  :deep(p) {
+    margin: 0 0 12px;
+  }
+}
 </style>
diff --git a/buyer/src/pages/home/enumeration.js b/buyer/src/pages/home/enumeration.js
index f6191807a..d2e467058 100644
--- a/buyer/src/pages/home/enumeration.js
+++ b/buyer/src/pages/home/enumeration.js
@@ -57,7 +57,7 @@ export const afterSaleStatusList = [
     status: 'REFUSE'
   },
   {
-    name: '买家退货，待卖家收货',
+    name: '待卖家收货',
     status: 'BUYER_RETURN'
   },
   {
diff --git a/buyer/src/pages/home/memberCenter/AccountSafe.vue b/buyer/src/pages/home/memberCenter/AccountSafe.vue
index e59e56c2a..346240c89 100644
--- a/buyer/src/pages/home/memberCenter/AccountSafe.vue
+++ b/buyer/src/pages/home/memberCenter/AccountSafe.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper">
-    <UserCenterLayout title="账户安全" :tabs="['账户安全']">
+    <UserCenterLayout>
       <div class="safeList">
       <!-- 密码 -->
       <div class="safeItem">
@@ -365,7 +365,7 @@ export default {
 
   .wechatQrEmpty {
     color: $light_sub_color;
-    font-size: 12px;
+    font-size: 14px;
     text-align: center;
     padding: 0 8px;
   }
@@ -379,7 +379,7 @@ export default {
   .wechatQrTip {
     margin-top: 10px;
     color: $light_sub_color;
-    font-size: 12px;
+    font-size: 14px;
     line-height: 1.6;
   }
 </style>
diff --git a/buyer/src/pages/home/memberCenter/CommentList.vue b/buyer/src/pages/home/memberCenter/CommentList.vue
index e4ec96332..a9705cf02 100644
--- a/buyer/src/pages/home/memberCenter/CommentList.vue
+++ b/buyer/src/pages/home/memberCenter/CommentList.vue
@@ -1,50 +1,38 @@
 <template>
   <div class="wrapper">
-    <UserCenterLayout title="评论/晒单" :tabs="['评论/晒单']">
+    <UserCenterLayout>
 
-    <div class="order">
-      <div class="order-title">
-        <div class="order-row title">
-          <div class="order-detail-title col-10">订单详情</div>
-          <div class="col-4">收货人</div>
-          <div class="col-4">评价等级</div>
-          <div class="col-4">评价内容</div>
-          <div class="col-2"></div>
-        </div>
+    <empty v-if="list.length === 0" />
+    <div class="comment-list" v-else>
+      <div class="comment-cols">
+        <span>订单详情</span>
+        <span>评价等级</span>
+        <span>评价内容</span>
+        <span>操作</span>
       </div>
-      <empty v-if="list.length === 0" />
-
-      <div class="order-item" v-else v-for="(item, index) in list" :key="index">
-        <div>
-          <div class="title order-item-title">
-            <span>订单号:{{item.orderNo}}</span>
-            <span class="color999 ml_10">{{item.createTime}}</span>
-            <span class="hover-pointer fontsize_12 eval-detail" @click="evaluateDetail(item.id)">评价详情</span>
+      <div class="comment-card" v-for="(item, index) in list" :key="item.id || index">
+        <div class="comment-head">
+          <div class="order-sn">
+            {{ item.createTime }}<span>订单号 {{ item.orderNo }}</span>
           </div>
-          <div class="order-item-view">
-            <div class="item-view-name col-10">
-              <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
-                <img :src="item.goodsImage" alt="" />
-              </div>
-              <div class="order-name hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
-                {{item.goodsName}}
-              </div>
+        </div>
+        <div class="comment-body">
+          <div class="goods">
+            <div class="goods-thumb" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
+              <img
+                :src="item.goodsImage"
+                alt=""
+                @error="$event.target.style.visibility = 'hidden'"
+              />
             </div>
-            <div class="col-4">{{ $filters.secrecyMobile(item.createBy ) }}</div>
-            <div class="col-4">
-              {{item.grade==='GOOD'?'好评' : item.grade === 'WORSE'?'差评' : '中评'}}
+            <div class="goods-name" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
+              {{ item.goodsName }}
             </div>
-            <div class="col-4">
-              <el-tooltip>
-                  <div class="content">{{item.content}}</div>
-                  <template #content>
-                    <div style="white-space: normal;word-break:break-all">
-                      {{item.content}}
-                    </div>
-                  </template>
-              </el-tooltip>
-            </div>
-            <div class="col-2"></div>
+          </div>
+          <div class="comment-cell">{{ item.grade === 'GOOD' ? '好评' : item.grade === 'WORSE' ? '差评' : '中评' }}</div>
+          <div class="comment-content">{{ item.content }}</div>
+          <div class="comment-ops">
+            <button type="button" class="text-link" @click="evaluateDetail(item.id)">评价详情</button>
           </div>
         </div>
       </div>
@@ -53,7 +41,7 @@
     <!-- 分页 -->
     <div class="page-size">
       <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
-        :total="total" @current-change="changePageNum"
+        :total="total" :page-sizes="[20, 50, 100]" @current-change="changePageNum"
         @size-change="changePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
     </UserCenterLayout>
@@ -72,7 +60,7 @@ export default {
       total: 0, // 评价总数
       params: { // 请求参数
         pageNumber: 1,
-        pageSize: 10
+        pageSize: 20
       }
     };
   },
@@ -112,108 +100,143 @@ export default {
 .page-size {
   display: flex;
   justify-content: flex-end;
-}
-.order-img {
-  > img {
-    width: 60px;
-    height: 60px;
-    border: 1px solid $border_color;
-    box-sizing: border-box;
-  }
-}
-.title {
-  @include background_color($light_background_color);
-}
-.item-view-name {
-  display: flex;
-}
-.order-name {
-  display: -webkit-box;
+  margin-top: 16px;
 
-  -webkit-box-orient: vertical;
-
-  -webkit-line-clamp: 2;
-
-  overflow: hidden;
-  text-align: left;
-  padding: 0 10px;
-  font-size: 13px;
-  @include content_color($light_content_color);
-}
-.order-item-title {
-  padding: 5px 20px;
-  text-align: left;
-  font-size: 13px;
-  position: relative;
-}
-.order-row,
-.order-item-view {
-  display: flex;
-  align-items: center;
-
-  > [class*='col-'] {
-    box-sizing: border-box;
-    padding: 0 8px;
-  }
-
-  > .col-12 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-
-  > .col-10 {
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
-  }
-
-  > .col-4 {
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
-  }
-
-  > .col-2 {
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
-  }
-
-  > .col-6 {
-    flex: 0 0 25%;
-    max-width: 25%;
+  :deep(.el-pagination) {
+    justify-content: flex-end;
   }
 }
 
-.order-item-view {
-  padding: 10px 20px;
-  align-items: flex-start;
+.comment-list {
+  --comment-cols: minmax(220px, 1.3fr) 90px minmax(160px, 1.6fr) 96px;
+  --comment-gap: 12px;
+  padding-top: 8px;
 }
-.order-item {
-  text-align: center;
-  border: 1px solid $border_color;
-  margin: 10px 0;
+
+.comment-cols,
+.comment-body {
+  display: grid;
+  grid-template-columns: var(--comment-cols);
+  column-gap: var(--comment-gap);
+  align-items: start;
 }
-.order-row {
-  padding: 10px 0;
-  text-align: center;
-}
-.order-detail-title {
-  text-align: left;
-  padding-left: 20px !important;
-}
-.content {
+
+.comment-cols {
+  padding: 0 16px 10px;
   color: #999;
-  max-height: 60px;
-  overflow: hidden;
-  // word-wrap: break-word;
-  display:-webkit-box;
-  -webkit-box-orient:vertical;/*设置方向*/
-  -webkit-line-clamp:3;/*设置超过为省略号的行数*/
-  word-break:break-all; 
+  font-size: 13px;
+
+  span:first-child {
+    padding-left: 72px;
+  }
+
+  span:nth-child(n + 2) {
+    text-align: center;
+  }
 }
 
-.eval-detail {
-  position: absolute;
-  right: 20px;
-  &:hover{
+.comment-card {
+  margin-bottom: 12px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.comment-head {
+  padding: 10px 16px;
+  background: #f7f7f7;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.order-sn {
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+
+  span {
+    margin-left: 16px;
+  }
+}
+
+.comment-body {
+  padding: 14px 16px;
+}
+
+.goods {
+  display: grid;
+  grid-template-columns: 60px minmax(0, 1fr);
+  column-gap: 12px;
+  align-items: start;
+  min-width: 0;
+}
+
+.goods-thumb {
+  width: 60px;
+  height: 60px;
+  border: 1px solid #f0f0f0;
+  overflow: hidden;
+  background: #f5f5f5;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.goods-name {
+  color: #333;
+  font-size: 16px;
+  line-height: 22px;
+  max-height: 44px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
+  }
+}
+
+.comment-cell,
+.comment-ops {
+  text-align: center;
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.comment-content {
+  min-width: 0;
+  color: #666;
+  font-size: 14px;
+  line-height: 22px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.comment-ops {
+  display: flex;
+  justify-content: center;
+}
+
+.text-link {
+  border: none;
+  background: none;
+  padding: 0;
+  color: #171A26;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+
+  &:hover {
     color: $theme_color;
   }
 }
diff --git a/buyer/src/pages/home/memberCenter/ComplainDetail.vue b/buyer/src/pages/home/memberCenter/ComplainDetail.vue
index 04b155dde..35b9ac3d9 100644
--- a/buyer/src/pages/home/memberCenter/ComplainDetail.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="add-eval">
-    <UserCenterLayout title="订单投诉" :tabs="['订单投诉']">
+    <UserCenterLayout>
       <div class="title">
       <p>
         <span class="fontsize_16 global_color">{{ statusLabel[detail.complainStatus] }}</span>
@@ -123,7 +123,7 @@
       </tbody>
     </table>
 
-    <el-dialog title="View Image" v-model="visible">
+    <el-dialog title="图片预览" v-model="visible">
       <img :src="previewImage" v-if="visible" style="width: 100%">
     </el-dialog>
     </UserCenterLayout>
diff --git a/buyer/src/pages/home/memberCenter/ComplainList.vue b/buyer/src/pages/home/memberCenter/ComplainList.vue
index a23f455ef..dfeb559c6 100644
--- a/buyer/src/pages/home/memberCenter/ComplainList.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainList.vue
@@ -1,51 +1,46 @@
 <template>
   <div class="wrapper">
-    <UserCenterLayout title="我的投诉" :tabs="['我的投诉']">
+    <UserCenterLayout>
 
-    <div class="order">
-      <div class="order-title">
-        <div class="order-row title">
-          <div class="order-detail-title col-10">商品信息</div>
-          <div class="col-4">投诉状态</div>
-          <div class="col-4">投诉主题</div>
-          <div class="col-4">投诉内容</div>
-          <div class="col-2"></div>
-        </div>
+    <empty v-if="list.length === 0" />
+    <div class="complain-list" v-else>
+      <div class="complain-cols">
+        <span>商品信息</span>
+        <span>投诉状态</span>
+        <span>投诉主题</span>
+        <span>投诉内容</span>
+        <span>操作</span>
       </div>
-      <empty v-if="list.length === 0" />
-
-      <div class="order-item" v-else v-for="(item, index) in list" :key="index">
-        <div>
-          <div class="title order-item-title">
-            <span>投诉单号:{{item.id}}</span>
-            <span class="color999 ml_10">{{item.createTime}}</span>
-            <span class="hover-pointer fontsize_12 eval-detail" @click="goDetail(item.id)">投诉详情</span>
-            <span class="hover-pointer fontsize_12 eval-detail" style="right: 90px" v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'" @click="cancel(item.id)">取消投诉</span>
+      <div class="complain-card" v-for="(item, index) in list" :key="item.id || index">
+        <div class="complain-head">
+          <div class="order-sn">
+            {{ item.createTime }}<span>投诉单号 {{ item.id }}</span>
           </div>
-          <div class="order-item-view">
-            <div class="item-view-name col-10">
-              <div class="order-img hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
-                <img :src="item.goodsImage" alt="" />
-              </div>
-              <div class="order-name hover-color" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
-                {{item.goodsName}}
-              </div>
+        </div>
+        <div class="complain-body">
+          <div class="goods">
+            <div class="goods-thumb" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
+              <img
+                :src="item.goodsImage"
+                alt=""
+                @error="$event.target.style.visibility = 'hidden'"
+              />
             </div>
-            <div class="col-4">{{statusLabel[item.complainStatus]}}</div>
-            <div class="col-4">
-              <div class="content">{{item.complainTopic}}</div>
+            <div class="goods-name" @click="linkTo(`/goodsDetail?goodsId=${item.goodsId}&skuId=${item.skuId}`)">
+              {{ item.goodsName }}
             </div>
-            <div class="col-4">
-              <el-tooltip>
-                <div class="content">{{item.content}}</div>
-                <template #content>
-                  <div style="white-space: normal;">
-                    {{item.content}}
-                  </div>
-                </template>
-              </el-tooltip>
-            </div>
-            <div class="col-2"></div>
+          </div>
+          <div class="complain-cell">{{ statusLabel[item.complainStatus] || item.complainStatus }}</div>
+          <div class="complain-topic">{{ item.complainTopic }}</div>
+          <div class="complain-content">{{ item.content }}</div>
+          <div class="complain-ops">
+            <button type="button" class="text-link" @click="goDetail(item.id)">投诉详情</button>
+            <button
+              v-if="item.complainStatus === 'APPLYING' || item.complainStatus === 'NEW'"
+              type="button"
+              class="text-link"
+              @click="cancel(item.id)"
+            >取消投诉</button>
           </div>
         </div>
       </div>
@@ -54,7 +49,7 @@
     <!-- 分页 -->
     <div class="page-size">
       <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
-        :total="total" @current-change="changePageNum"
+        :total="total" :page-sizes="[20, 50, 100]" @current-change="changePageNum"
         @size-change="changePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
     </UserCenterLayout>
@@ -81,7 +76,7 @@ export default {
       total: 0, // 投诉总数
       params: { // 请求参数
         pageNumber: 1,
-        pageSize: 10
+        pageSize: 20
       }
     };
   },
@@ -130,101 +125,158 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.order-img {
-  > img {
-    width: 60px;
-    height: 60px;
-    border: 1px solid $border_color;
-    box-sizing: border-box;
-  }
-}
-.title {
-  @include background_color($light_background_color);
-}
-.item-view-name {
+.page-size {
   display: flex;
-}
-.order-name {
-  display: -webkit-box;
+  justify-content: flex-end;
+  margin-top: 16px;
 
-  -webkit-box-orient: vertical;
-
-  -webkit-line-clamp: 2;
-
-  overflow: hidden;
-  text-align: left;
-  padding: 0 10px;
-  font-size: 13px;
-  @include content_color($light_content_color);
-}
-.order-item-title {
-  padding: 5px 20px;
-  text-align: left;
-  font-size: 13px;
-  position: relative;
-}
-.order-row,
-.order-item-view {
-  display: flex;
-  align-items: center;
-
-  > [class*='col-'] {
-    box-sizing: border-box;
-    padding: 0 8px;
-  }
-
-  > .col-10 {
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
-  }
-
-  > .col-4 {
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
-  }
-
-  > .col-2 {
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
+  :deep(.el-pagination) {
+    justify-content: flex-end;
   }
 }
 
-.order-item-view {
-  padding: 10px 20px;
-  align-items: flex-start;
+.complain-list {
+  --complain-cols: minmax(220px, 1.3fr) 90px minmax(100px, 0.8fr) minmax(160px, 1.4fr) 96px;
+  --complain-gap: 12px;
+  padding-top: 8px;
 }
-.order-item {
-  text-align: center;
-  border: 1px solid $border_color;
-  margin: 10px 0;
+
+.complain-cols,
+.complain-body {
+  display: grid;
+  grid-template-columns: var(--complain-cols);
+  column-gap: var(--complain-gap);
+  align-items: start;
 }
-.order-row {
-  padding: 10px 0;
-  text-align: center;
-}
-.order-detail-title {
-  text-align: left;
-  padding-left: 20px !important;
-}
-.content {
+
+.complain-cols {
+  padding: 0 16px 10px;
   color: #999;
-  max-height: 60px;
+  font-size: 13px;
+
+  span:first-child {
+    padding-left: 72px;
+  }
+
+  span:nth-child(n + 2) {
+    text-align: center;
+  }
+}
+
+.complain-card {
+  margin-bottom: 12px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  background: #fff;
+  overflow: hidden;
+}
+
+.complain-head {
+  padding: 10px 16px;
+  background: #f7f7f7;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.order-sn {
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+
+  span {
+    margin-left: 16px;
+  }
+}
+
+.complain-body {
+  padding: 14px 16px;
+}
+
+.goods {
+  display: grid;
+  grid-template-columns: 60px minmax(0, 1fr);
+  column-gap: 12px;
+  align-items: start;
+  min-width: 0;
+}
+
+.goods-thumb {
+  width: 60px;
+  height: 60px;
+  border: 1px solid #f0f0f0;
+  overflow: hidden;
+  background: #f5f5f5;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.goods-name {
+  color: #333;
+  font-size: 16px;
+  line-height: 22px;
+  max-height: 44px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
   overflow: hidden;
   word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
+  cursor: pointer;
 
-.eval-detail {
-  position: absolute;
-  right: 20px;
-  &:hover{
+  &:hover {
     color: $theme_color;
   }
 }
-.page-size{
+
+.complain-cell,
+.complain-topic,
+.complain-ops {
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.complain-cell,
+.complain-ops {
+  text-align: center;
+}
+
+.complain-topic,
+.complain-content {
+  min-width: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.complain-content {
+  color: #666;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.complain-ops {
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.text-link {
+  border: none;
+  background: none;
+  padding: 0;
+  color: #171A26;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
+  }
 }
 </style>
diff --git a/buyer/src/pages/home/memberCenter/Favorites.vue b/buyer/src/pages/home/memberCenter/Favorites.vue
index d7a7221ad..5dc409bcf 100644
--- a/buyer/src/pages/home/memberCenter/Favorites.vue
+++ b/buyer/src/pages/home/memberCenter/Favorites.vue
@@ -2,78 +2,80 @@
   <div class="wrapper">
     <UserCenterLayout
       v-if="!homePage"
-      title="近期收藏"
       :tabs="favoriteWay"
       :active-tab="activeTabIndex"
       @tab-change="change"
     >
-      <div v-if="list.length">
-        <div v-for="(item, index) in list" :key="index">
-          <div class="goodsItem" :key="item.skuId">
-            <div class="goodsImg hover-pointer" v-if="params.type === 'GOODS'">
-              <img :src="item.image" />
+      <empty v-if="!list.length" />
+      <div v-else class="fav-list" :class="{ 'is-store': params.type === 'STORE' }">
+        <div class="fav-cols">
+          <span>{{ params.type === 'GOODS' ? '商品' : '店铺' }}</span>
+          <span v-if="params.type === 'GOODS'">金额</span>
+          <span>操作</span>
+        </div>
+        <div class="fav-row" v-for="(item, index) in list" :key="item.id || item.skuId || index">
+          <div class="fav-goods">
+            <div class="fav-thumb" @click="openItem(item)">
+              <img
+                :src="params.type === 'GOODS' ? item.image : item.storeLogo"
+                alt=""
+                @error="$event.target.style.visibility = 'hidden'"
+              />
             </div>
-            <div class="goodsImg hover-pointer" v-else>
-              <img :src="item.storeLogo" />
-            </div>
-            <div class="goodsTitle hover-color" v-if="params.type === 'GOODS'" @click="buynow(item.skuId, item.goodsId,item.id)">
-              {{ item.goodsName }}
-            </div>
-            <div v-else class="goodsTitle  hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
-              {{ item.storeName }}
-              <el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
-            </div>
-            <div class="goodsPrice">
-              <span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>
-
-            </div>
-            <div class="goodsBuy">
-              <el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
-                v-if="params.type === 'GOODS'">立即购买</el-button>
-              <el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
-              <el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
-              <el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
+            <div class="fav-info">
+              <div class="fav-name" @click="openItem(item)">
+                {{ params.type === 'GOODS' ? item.goodsName : item.storeName }}
+              </div>
+              <span v-if="params.type === 'STORE' && item.selfOperated" class="self-tag">商家自营</span>
             </div>
           </div>
+          <div v-if="params.type === 'GOODS'" class="fav-price">{{ $filters.unitPrice(item.price, '￥') }}</div>
+          <div class="fav-ops">
+            <button v-if="params.type === 'GOODS'" type="button" class="op-btn" @click="buynow(item.skuId, item.goodsId)">立即购买</button>
+            <button v-else type="button" class="op-btn" @click="goShop(item.id)">查看店铺</button>
+            <button v-if="params.type === 'GOODS'" type="button" class="text-link" @click="cancel(item.skuId)">取消收藏</button>
+            <button v-else type="button" class="text-link" @click="cancelStore(item.id)">取消收藏</button>
+          </div>
         </div>
         <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
       </div>
-      <empty v-else />
     </UserCenterLayout>
 
     <template v-else>
       <card _Title="近期收藏" :_Size="16" :_Tabs="favoriteWay" :_ActiveTab="activeTabIndex" @_Change="change" _More="全部收藏" _Src="/home/Favorites"></card>
-      <div v-if="list.length">
-        <div v-for="(item, index) in list" :key="index">
-          <div class="goodsItem" :key="item.skuId">
-            <div class="goodsImg hover-pointer" v-if="params.type === 'GOODS'">
-              <img :src="item.image" />
+      <empty v-if="!list.length" />
+      <div v-else class="fav-list" :class="{ 'is-store': params.type === 'STORE' }">
+        <div class="fav-cols">
+          <span>{{ params.type === 'GOODS' ? '商品' : '店铺' }}</span>
+          <span v-if="params.type === 'GOODS'">金额</span>
+          <span>操作</span>
+        </div>
+        <div class="fav-row" v-for="(item, index) in list" :key="item.id || item.skuId || index">
+          <div class="fav-goods">
+            <div class="fav-thumb" @click="openItem(item)">
+              <img
+                :src="params.type === 'GOODS' ? item.image : item.storeLogo"
+                alt=""
+                @error="$event.target.style.visibility = 'hidden'"
+              />
             </div>
-            <div class="goodsImg hover-pointer" v-else>
-              <img :src="item.storeLogo" />
-            </div>
-            <div class="goodsTitle hover-color" v-if="params.type === 'GOODS'" @click="buynow(item.skuId, item.goodsId,item.id)">
-              {{ item.goodsName }}
-            </div>
-            <div v-else class="goodsTitle  hover-pointer" @click="buynow(item.skuId, item.goodsId,item.id)" >
-              {{ item.storeName }}
-              <el-tag color="error" class="operated" v-if="item.selfOperated">商家自营</el-tag>
-            </div>
-            <div class="goodsPrice">
-              <span v-if="params.type === 'GOODS'">{{ $filters.unitPrice(item.price, '￥') }}</span>
-            </div>
-            <div class="goodsBuy">
-              <el-button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)"
-                v-if="params.type === 'GOODS'">立即购买</el-button>
-              <el-button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</el-button>
-              <el-button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</el-button>
-              <el-button size="small" v-if="params.type === 'STORE'" @click="cancelStore(item.id)">取消收藏</el-button>
+            <div class="fav-info">
+              <div class="fav-name" @click="openItem(item)">
+                {{ params.type === 'GOODS' ? item.goodsName : item.storeName }}
+              </div>
+              <span v-if="params.type === 'STORE' && item.selfOperated" class="self-tag">商家自营</span>
             </div>
           </div>
+          <div v-if="params.type === 'GOODS'" class="fav-price">{{ $filters.unitPrice(item.price, '￥') }}</div>
+          <div class="fav-ops">
+            <button v-if="params.type === 'GOODS'" type="button" class="op-btn" @click="buynow(item.skuId, item.goodsId)">立即购买</button>
+            <button v-else type="button" class="op-btn" @click="goShop(item.id)">查看店铺</button>
+            <button v-if="params.type === 'GOODS'" type="button" class="text-link" @click="cancel(item.skuId)">取消收藏</button>
+            <button v-else type="button" class="text-link" @click="cancelStore(item.id)">取消收藏</button>
+          </div>
         </div>
         <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
       </div>
-      <empty v-else />
     </template>
   </div>
 </template>
@@ -172,6 +174,13 @@ export default {
         }
       });
     },
+    openItem (item) {
+      if (this.params.type === 'STORE') {
+        this.goShop(item.id)
+        return
+      }
+      this.buynow(item.skuId, item.goodsId)
+    },
     buynow(skuId, goodsId,storeId) { // 跳转详情
       console.log(this.params.type)
       let url
@@ -206,73 +215,148 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.goodsShop,
-.goodsImg,
-.goodsPrice,
-.goodsShop,
-.goodsTitle {
-  margin: 0 6px;
-}
-
-.operated {
-  margin-left: 10px;
-}
-
 .wrapper {
   margin-bottom: 40px;
 }
 
-.goodsItem {
-  display: flex;
+.fav-list {
+  --fav-cols: minmax(0, 1fr) 140px 200px;
+  --fav-gap: 12px;
+  padding-top: 8px;
+
+  &.is-store {
+    --fav-cols: minmax(0, 1fr) 200px;
+  }
+}
+
+.fav-cols,
+.fav-row {
+  display: grid;
+  grid-template-columns: var(--fav-cols);
+  column-gap: var(--fav-gap);
   align-items: center;
-  height: 60px;
-  margin-bottom: 10px;
+}
 
-  >.goodsImg {
-    width: 60px;
-    height: 60px;
-    overflow: hidden;
-    flex-shrink: 0;
+.fav-cols {
+  padding: 0 8px 10px;
+  color: #999;
+  font-size: 13px;
 
-    >img {
-      width: 100%;
-      height: 100%;
-    }
+  span:first-child {
+    padding-left: 72px;
   }
 
-  >.goodsPrice,
-  .goodsShop {
-    width: 120px;
-    flex-shrink: 0;
+  span:nth-child(n + 2) {
     text-align: center;
   }
+}
 
-  >.goodsTitle {
-    flex: 1;
-    min-width: 0;
-    line-height: 60px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+.fav-row {
+  padding: 14px 8px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.fav-goods {
+  display: grid;
+  grid-template-columns: 60px minmax(0, 1fr);
+  column-gap: 12px;
+  align-items: center;
+  min-width: 0;
+}
+
+.fav-thumb {
+  width: 60px;
+  height: 60px;
+  border: 1px solid #f0f0f0;
+  overflow: hidden;
+  background: #f5f5f5;
+  cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
   }
 }
 
-.goodsBuy {
+.fav-info {
+  min-width: 0;
+}
+
+.fav-name {
+  color: #333;
+  font-size: 16px;
+  line-height: 22px;
+  max-height: 44px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
+  }
+}
+
+.self-tag {
+  display: inline-block;
+  margin-top: 6px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: #fff1f0;
+  color: $theme_color;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.fav-price {
+  text-align: center;
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.fav-ops {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  flex-shrink: 0;
-  gap: 8px;
-  width: 170px;
-  margin-left: 16px;
-  line-height: normal;
+  justify-content: center;
+  gap: 16px;
+}
 
-  :deep(.el-button) {
-    margin: 0;
+.op-btn {
+  min-width: 96px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid $theme_color;
+  border-radius: 4px;
+  background: $theme_color;
+  color: #fff;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 30px;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.9;
   }
 }
 
-.page-size {
-  text-align: right;
+.text-link {
+  border: none;
+  background: none;
+  padding: 0;
+  color: #171A26;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
+  }
 }
 </style>
diff --git a/buyer/src/pages/home/memberCenter/MemberGrade.vue b/buyer/src/pages/home/memberCenter/MemberGrade.vue
index 103b4d221..0130a1fb4 100644
--- a/buyer/src/pages/home/memberCenter/MemberGrade.vue
+++ b/buyer/src/pages/home/memberCenter/MemberGrade.vue
@@ -1,83 +1,73 @@
 <template>
   <div class="memberGrade">
-    <UserCenterLayout title="我的等级" :tabs="['我的等级']">
-    <div class="summary">
-      <div class="gradeCard">
-        <div class="gradeLeft">
-          <img v-if="currentGrade.gradeImage" class="gradeIcon" :src="currentGrade.gradeImage" alt="等级图标" />
-          <div class="gradeInfo">
-            <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" type="primary">{{ b.benefitName || '-' }}</el-tag>
-              </span>
-            </div>
-            <div class="gradeExp">
-              当前经验值：<span class="num">{{ currentExperience || 0 }}</span>
-            </div>
-            <div class="gradeNext" v-if="nextGrade">
-              距 {{ nextGrade.gradeName }} 还差 <span class="num">{{ diffExperience }}</span> 经验值
-            </div>
-            <div class="gradeNext" v-else>已达最高等级</div>
-          </div>
+    <UserCenterLayout>
+    <div class="grade-card">
+      <img v-if="currentGrade.gradeImage" class="grade-icon" :src="currentGrade.gradeImage" alt="" />
+      <div class="grade-info">
+        <div class="grade-name-row">
+          <span class="grade-name">{{ currentGrade.gradeName || '暂无等级' }}</span>
+          <span v-for="b in currentGradeBenefits" :key="b.id" class="benefit-tag">{{ b.benefitName || '-' }}</span>
         </div>
+        <div class="grade-exp">当前经验值：<span class="num">{{ currentExperience || 0 }}</span></div>
+        <div class="grade-next" v-if="nextGrade">
+          距 {{ nextGrade.gradeName }} 还差 <span class="num">{{ diffExperience }}</span> 经验值
+        </div>
+        <div class="grade-next" v-else>已达最高等级</div>
       </div>
     </div>
 
-    <el-tabs v-model="activeGradeTab">
-      <el-tab-pane label="获取经验值方式" name="rules">
-        <el-table v-loading="rulesLoading" :data="ruleList">
-          <el-table-column label="获取方式" min-width="720">
-            <template #default="{ row }">
-              <div class="ruleItem">
-                <div class="ruleTop">
-                  <div class="ruleName">
-                    <span>{{ row.ruleName || row.ruleKey || '-' }}</span>
-                  </div>
-                  <el-tag v-if="row.completed === true" color="success">已完成</el-tag>
-                  <el-tag v-else color="default">未完成</el-tag>
-                </div>
-                <div class="ruleDesc">{{ getRuleDesc(row.ruleKey) }}</div>
-                <div class="ruleMeta">
-                  <span class="metaItem">单次获得：<b>+{{ row.value == null ? 0 : row.value }}</b></span>
-                  <span v-if="row.maxValue != null && Number(row.maxValue) > 0" class="metaItem">限额：<b>{{ row.maxValue }}</b></span>
-                  <span class="metaItem">已获得：<b>{{ row.gainedExperience == null ? 0 : row.gainedExperience }}</b></span>
-                </div>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="rulesDesc" v-if="rulesDescription">{{ rulesDescription }}</div>
-      </el-tab-pane>
-      <el-tab-pane label="经验值记录" name="logs">
-        <el-table v-loading="logLoading" :data="experienceLogs.records || []">
-          <el-table-column prop="createTime" label="时间" align="center" min-width="160" />
-          <el-table-column label="规则" align="center" min-width="160">
-            <template #default="{ row }">
-              <span>{{ getRuleName(row.ruleKey) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="变动值" align="center" min-width="120">
-            <template #default="{ row }">
-              <div :style="{ color: getLogDeltaColor(row) }">
-                <span v-if="getLogDeltaSign(row) === '+'">+</span>{{ getLogDeltaAbsValue(row) }}
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="grade-pagination">
-          <el-pagination
-            v-model:current-page="params.pageNumber"
-            v-model:page-size="params.pageSize"
-            :total="experienceLogs.total || 0"
-            @current-change="changePage"
-            @size-change="changePageSize"
-            :page-sizes="[10, 20, 50]"
-            layout="total, prev, pager, next, jumper"
-          />
+    <div class="grade-tabs">
+      <div class="grade-tab" :class="{ active: activeGradeTab === 'rules' }" @click="activeGradeTab = 'rules'">获取经验值方式</div>
+      <div class="grade-tab" :class="{ active: activeGradeTab === 'logs' }" @click="activeGradeTab = 'logs'">经验值记录</div>
+    </div>
+
+    <div v-show="activeGradeTab === 'rules'" v-loading="rulesLoading">
+      <empty v-if="!rulesLoading && !ruleList.length" />
+      <div v-else class="rule-list">
+        <div class="rule-item" v-for="row in ruleList" :key="row.ruleKey || row.id">
+          <div class="rule-top">
+            <div class="rule-name">{{ row.ruleName || row.ruleKey || '-' }}</div>
+            <span class="rule-status" :class="{ done: row.completed === true }">{{ row.completed === true ? '已完成' : '未完成' }}</span>
+          </div>
+          <div class="rule-desc">{{ getRuleDesc(row.ruleKey) }}</div>
+          <div class="rule-meta">
+            <span>单次获得 <b>+{{ row.value == null ? 0 : row.value }}</b></span>
+            <span v-if="row.maxValue != null && Number(row.maxValue) > 0">限额 <b>{{ row.maxValue }}</b></span>
+            <span>已获得 <b>{{ row.gainedExperience == null ? 0 : row.gainedExperience }}</b></span>
+          </div>
         </div>
-      </el-tab-pane>
-    </el-tabs>
+      </div>
+      <div class="rules-desc" v-if="rulesDescription">{{ rulesDescription }}</div>
+    </div>
+
+    <div v-show="activeGradeTab === 'logs'" v-loading="logLoading">
+      <empty v-if="!(experienceLogs.records || []).length" />
+      <div v-else class="log-list">
+        <div class="log-head">
+          <span>时间</span>
+          <span>规则</span>
+          <span>变动值</span>
+        </div>
+        <div class="log-row" v-for="(row, index) in experienceLogs.records" :key="row.id || index">
+          <div class="log-time">{{ row.createTime }}</div>
+          <div class="log-rule">{{ getRuleName(row.ruleKey) }}</div>
+          <div class="log-point" :class="getLogDeltaSign(row) === '+' ? 'is-plus' : 'is-minus'">
+            {{ getLogDeltaSign(row) }}{{ getLogDeltaAbsValue(row) }}
+          </div>
+        </div>
+      </div>
+      <div class="grade-pagination">
+        <el-pagination
+          v-model:current-page="params.pageNumber"
+          v-model:page-size="params.pageSize"
+          :total="experienceLogs.total || 0"
+          @current-change="changePage"
+          @size-change="changePageSize"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+        />
+      </div>
+    </div>
     </UserCenterLayout>
 
   </div>
@@ -106,7 +96,7 @@ export default {
       gradeLoading: false,
       params: {
         pageNumber: 1,
-        pageSize: 10
+        pageSize: 20
       },
       experienceLogs: {}
     }
@@ -288,131 +278,220 @@ export default {
 </script>
 
 <style scoped lang="scss">
-h3 {
-  font-size: 16px;
-  margin: 20px 10px;
-}
-
-.summary {
-  margin-bottom: 20px;
-}
-
-.rulesDesc {
-  margin: 10px 0 0 0;
-  padding: 10px 12px;
-  border: 1px solid $border_color;
-  border-radius: 4px;
-  background: #fff;
-  color: $light_sub_color;
-  font-size: 12px;
-  line-height: 1.7;
-}
-
-.gradeCard {
-  padding: 16px;
-  border: 1px solid $border_color;
-  border-radius: 6px;
-  background: #fff;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.gradeLeft {
+.grade-card {
   display: flex;
-  align-items: flex-start;
-  gap: 12px;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 8px;
+  padding: 16px;
+  background: #fafafa;
+  border-radius: 8px;
 }
 
-.gradeIcon {
-  width: 48px;
-  height: 48px;
+.grade-icon {
+  width: 56px;
+  height: 56px;
   object-fit: contain;
-  border-radius: 4px;
-  background: #fff;
+  flex-shrink: 0;
 }
 
-.gradeNameRow {
+.grade-name-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 8px 10px;
+  gap: 8px;
+}
+
+.grade-name {
+  color: #171A26;
+  font-size: 18px;
+  font-weight: 600;
   line-height: 1.4;
 }
 
-.gradeNameText {
-  font-size: 16px;
-  color: $light_title_color;
-  font-weight: 600;
+.benefit-tag {
+  padding: 0 8px;
+  border-radius: 4px;
+  background: #fff;
+  color: $theme_color;
+  font-size: 14px;
+  line-height: 22px;
 }
 
-.benefitTagsInline {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px 8px;
-  vertical-align: middle;
-}
-
-.benefitTag {
-  margin: 0 !important;
-}
-
-.gradeExp,
-.gradeNext {
+.grade-exp,
+.grade-next {
   margin-top: 6px;
-  font-size: 12px;
-  color: #000;
+  color: #666;
+  font-size: 14px;
+  line-height: 22px;
 }
 
 .num {
   color: $theme_color;
   font-size: 16px;
+  font-weight: 600;
 }
 
-.ruleItem {
-  padding: 10px 8px;
+.grade-tabs {
+  display: flex;
+  gap: 24px;
+  margin: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
 }
 
-.ruleTop {
+.grade-tab {
+  position: relative;
+  padding: 10px 0;
+  color: #666;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+
+  &.active {
+    color: $theme_color;
+    font-weight: 600;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 2px;
+      background: $theme_color;
+    }
+  }
+}
+
+.rule-item {
+  padding: 14px 0;
+  border-top: 1px solid #f0f0f0;
+
+  &:first-child {
+    border-top: none;
+  }
+}
+
+.rule-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: 12px;
 }
 
-.ruleName {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: $light_title_color;
+.rule-name {
+  color: #171A26;
+  font-size: 16px;
+  line-height: 22px;
+}
+
+.rule-status {
+  flex-shrink: 0;
+  padding: 0 8px;
+  border-radius: 4px;
+  background: #f5f5f5;
+  color: #999;
   font-size: 14px;
+  line-height: 22px;
+
+  &.done {
+    background: #f6ffed;
+    color: #19be6b;
+  }
 }
 
-.ruleDesc {
+.rule-desc {
   margin-top: 6px;
-  color: $light_sub_color;
-  font-size: 12px;
-  line-height: 1.6;
+  color: #666;
+  font-size: 14px;
+  line-height: 22px;
 }
 
-.ruleMeta {
-  margin-top: 8px;
+.rule-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
-  color: $light_sub_color;
-  font-size: 12px;
+  margin-top: 8px;
+  color: #666;
+  font-size: 14px;
+  line-height: 22px;
+
+  b {
+    color: $theme_color;
+    font-weight: 600;
+  }
 }
 
-.metaItem b {
-  color: $theme_color;
+.rules-desc {
+  margin-top: 16px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  background: #fafafa;
+  color: #666;
+  font-size: 14px;
+  line-height: 22px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.log-list {
+  --log-cols: 180px minmax(0, 1fr) 100px;
+}
+
+.log-head,
+.log-row {
+  display: grid;
+  grid-template-columns: var(--log-cols);
+  column-gap: 16px;
+  align-items: start;
+}
+
+.log-head {
+  padding: 0 8px 10px;
+  color: #999;
+  font-size: 13px;
+
+  span:nth-child(n + 2) {
+    text-align: center;
+  }
+}
+
+.log-row {
+  padding: 14px 8px;
+  border-top: 1px solid #f0f0f0;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.log-time,
+.log-rule {
+  color: #171A26;
+}
+
+.log-rule,
+.log-point {
+  text-align: center;
+}
+
+.log-point {
   font-weight: 600;
+
+  &.is-plus {
+    color: #19be6b;
+  }
+
+  &.is-minus {
+    color: $theme_color;
+  }
 }
 
 .grade-pagination {
   display: flex;
   justify-content: flex-end;
-  margin-top: 10px;
-}
+  margin-top: 16px;
 
+  :deep(.el-pagination) {
+    justify-content: flex-end;
+  }
+}
 </style>
diff --git a/buyer/src/pages/home/memberCenter/ModifyPwd.vue b/buyer/src/pages/home/memberCenter/ModifyPwd.vue
index 7088c51bc..1071b4c18 100644
--- a/buyer/src/pages/home/memberCenter/ModifyPwd.vue
+++ b/buyer/src/pages/home/memberCenter/ModifyPwd.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="wrapper">
-    <UserCenterLayout title="账户安全" :tabs="['账户安全']">
+    <UserCenterLayout>
     <!--  手机号验证  -->
     <el-form ref="formData" :model="formData" label-position="left" label-width="100px" :rules="ruleInLines"
           v-if="(status == 2 || status == 3) && !showPwd">
       <el-form-item label="手机号">
-        <div class="phone">1234567890</div>
+        <div class="phone">{{ displayMobile }}</div>
       </el-form-item>
       <el-form-item label="图片验证码" prop="picture" style="width: 350px">
         <el-input v-model="formData.picture" size="large" maxlength="4"></el-input>
@@ -80,6 +80,8 @@ import {
   setPwd,
   editPwd
 } from '@/api/account';
+import { getMemberMsg } from '@/api/login.js';
+import storage from '@/plugins/storage.js';
 import {md5} from '@/plugins/md5.js'
 
 export default {
@@ -89,6 +91,7 @@ export default {
     return {
       // 1为修改    2为设置     3为提交校验的下一步
       status: '',
+      mobile: '',
       showPwd: false, // 显示密码
       formData: { // 验证表单
         picture: '',
@@ -136,10 +139,33 @@ export default {
       }
     }
   },
+  computed: {
+    displayMobile () {
+      if (!this.mobile) return '未绑定手机号';
+      return this.$filters.secrecyMobile(this.mobile);
+    }
+  },
   mounted () {
     this.status = this.$route.query.status
+    this.loadMobile()
   },
   methods: {
+    loadMobile () {
+      const rawUserInfo = storage.getItem('userInfo');
+      if (rawUserInfo) {
+        try {
+          const userInfo = JSON.parse(rawUserInfo);
+          if (userInfo && userInfo.mobile) this.mobile = userInfo.mobile;
+        } catch (e) {}
+      }
+      if (!storage.getItem('accessToken')) return;
+      getMemberMsg().then(res => {
+        if (res.success && res.result) {
+          storage.setItem('userInfo', res.result);
+          this.mobile = res.result.mobile || '';
+        }
+      }).catch(() => {});
+    },
     normalizePwdError (message) {
       if (!message) return '修改失败，请稍后重试';
       if (String(message).includes('旧密码') || String(message).includes('密码不正确')) {
diff --git a/buyer/src/pages/home/memberCenter/Point.vue b/buyer/src/pages/home/memberCenter/Point.vue
index 1f988c171..ba412fc1c 100644
--- a/buyer/src/pages/home/memberCenter/Point.vue
+++ b/buyer/src/pages/home/memberCenter/Point.vue
@@ -1,22 +1,32 @@
 <template>
   <div class="point">
-    <UserCenterLayout title="我的积分" :tabs="['我的积分']">
-    <div class="point-content">
-      <span>剩余积分：<span>{{ pointObj.point || 0 }}</span></span>
-      <span>累计获得：<span>{{ pointObj.totalPoint || 0 }}</span></span>
+    <UserCenterLayout>
+    <div class="point-summary">
+      <div class="point-stat">
+        <div class="label">剩余积分</div>
+        <div class="value">{{ pointObj.point || 0 }}</div>
+      </div>
+      <div class="point-stat">
+        <div class="label">累计获得</div>
+        <div class="value">{{ pointObj.totalPoint || 0 }}</div>
+      </div>
     </div>
     <h3>积分日志</h3>
-    <el-table :data="logData.records || []">
-      <el-table-column prop="content" label="日志内容" align="center" />
-      <el-table-column prop="createTime" label="时间" align="center" />
-      <el-table-column label="积分明细" align="center">
-        <template #default="{ row }">
-          <div :style="{ color: row.pointType === 'INCREASE' ? 'green' : 'red' }">
-            <span v-if="row.pointType === 'INCREASE'">+</span>{{ row.variablePoint }}
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+    <empty v-if="!(logData.records || []).length" />
+    <div v-else class="log-list">
+      <div class="log-head">
+        <span>日志内容</span>
+        <span>时间</span>
+        <span>积分明细</span>
+      </div>
+      <div class="log-row" v-for="(row, index) in logData.records" :key="row.id || index">
+        <div class="log-content">{{ row.content }}</div>
+        <div class="log-time">{{ row.createTime }}</div>
+        <div class="log-point" :class="row.pointType === 'INCREASE' ? 'is-plus' : 'is-minus'">
+          <span v-if="row.pointType === 'INCREASE'">+</span>{{ row.variablePoint }}
+        </div>
+      </div>
+    </div>
     <!-- 分页 -->
     <div class="point-pagination">
       <el-pagination
@@ -25,8 +35,8 @@
         :total="logData.total"
         @current-change="changePage"
         @size-change="changePageSize"
-        :page-sizes="[10, 20, 50]"
-        layout="total, prev, pager, next, jumper"
+        :page-sizes="[20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
       />
     </div>
     </UserCenterLayout>
@@ -44,7 +54,7 @@ export default {
       loading: false, // 请求接口加载框
       params: { // 积分列表请求参数
         pageNumber: 1,
-        pageSize: 10
+        pageSize: 20
       },
     }
   },
@@ -77,28 +87,101 @@ export default {
 </script>
 <style lang="scss" scoped>
 h3 {
-  font-size: 16px;
-  margin: 20px 10px;
+  margin: 8px 0 12px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
 }
 
-.point-content {
+.point-summary {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.point-stat {
+  flex: 1;
+  padding: 16px 20px;
+  background: #fafafa;
+  border-radius: 8px;
+
+  .label {
+    color: #666;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .value {
+    margin-top: 4px;
+    color: $theme_color;
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 1.2;
+  }
+}
+
+.log-list {
+  --log-cols: minmax(0, 1.6fr) 180px 100px;
+}
+
+.log-head,
+.log-row {
+  display: grid;
+  grid-template-columns: var(--log-cols);
+  column-gap: 16px;
+  align-items: start;
+}
+
+.log-head {
+  padding: 0 8px 10px;
+  color: #999;
+  font-size: 13px;
+
+  span:nth-child(n + 2) {
+    text-align: center;
+  }
+}
+
+.log-row {
+  padding: 14px 8px;
+  border-top: 1px solid #f0f0f0;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.log-content {
+  min-width: 0;
+  color: #171A26;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.log-time {
   text-align: center;
-  margin-bottom: 30px;
+  color: #171A26;
+}
 
-  > span {
-    color: #999;
-    margin-right: 100px;
+.log-point {
+  text-align: center;
+  font-weight: 600;
 
-    span {
-      color: $theme_color;
-      font-size: 24px;
-    }
+  &.is-plus {
+    color: #19be6b;
+  }
+
+  &.is-minus {
+    color: $theme_color;
   }
 }
 
 .point-pagination {
   display: flex;
   justify-content: flex-end;
-  margin-top: 10px;
+  margin-top: 16px;
+
+  :deep(.el-pagination) {
+    justify-content: flex-end;
+  }
 }
 </style>
diff --git a/buyer/src/pages/home/memberCenter/Profile.vue b/buyer/src/pages/home/memberCenter/Profile.vue
index 57aec4334..a226a6c40 100644
--- a/buyer/src/pages/home/memberCenter/Profile.vue
+++ b/buyer/src/pages/home/memberCenter/Profile.vue
@@ -1,191 +1,248 @@
-<template>

-  <div class="wrapper">

-    <UserCenterLayout title="用户信息" :tabs="['用户信息']">

-      <el-form :model="formItem" :rules="rules" ref="form" label-width="80px">

-      <el-form-item label="头像" class="avatar-form-item">

-        <div class="avatar-upload">

-          <el-avatar v-if="formItem.face" :src="formItem.face" :size="80" />

-          <el-avatar v-else :size="80"><el-icon><User /></el-icon></el-avatar>

-          <el-upload

-            :show-file-list="false"

-            :on-success="handleSuccess"

-            :format="['jpg','jpeg','png']"

-            :action="action"

-            :headers="accessToken"

-          >

-            <el-button>上传头像</el-button>

-          </el-upload>

-        </div>

-      </el-form-item>

-      <el-form-item label="昵称" prop="nickName">

-        <el-input class="profile-field" v-model="formItem.nickName" placeholder="" />

-      </el-form-item>

-

-      <el-form-item label="生日">

-        <el-date-picker

-          class="profile-field"

-          type="date"

-          placeholder="选择您的生日"

-          v-model="formItem.birthday"

-        />

-      </el-form-item>

-      <el-form-item label="性别">

-        <el-radio-group v-model="formItem.sex" type="button" button-style="solid">

-          <el-radio :label="1">男</el-radio>

-          <el-radio :label="0">女</el-radio>

-        </el-radio-group>

-      </el-form-item>

-      <el-form-item>

-        <el-button type="primary" @click="save">确认修改</el-button>

-

-      </el-form-item>

-      </el-form>

-    </UserCenterLayout>

-  </div>

-</template>

-

-<script>

-import { Message } from "@/utils/message";

-import { editMemberInfo } from '@/api/account.js';

-import { getMemberMsg } from '@/api/login.js';

-import { buyerUrl } from '@/plugins/request.js';

-import storage from '@/plugins/storage.js';

-import { User } from '@element-plus/icons-vue';

-export default {

-  components: { User },

-  name: 'Profile',

-  data () {

-    return {

-      rules: { // 验证规则

-        nickName: [{required: true, message: '用户昵称不能为空'}, { max: 16, message: '用户昵称不能超过15个字符' }]

-      },

-      formItem: {}, // 表单数据

-      action: buyerUrl + '/buyer/common/upload/file', // 上传接口

-      accessToken: {} // 验证token

-    }

-  },

-  mounted () {

-    this.accessToken.accessToken = storage.getItem('accessToken');

-    this.loadUserInfo();

-  },

-  methods: {

-    loadUserInfo () {

-      const rawUserInfo = storage.getItem('userInfo');

-      if (rawUserInfo) {

-        this.applyUserInfo(JSON.parse(rawUserInfo));

-        return;

-      }

-      if (!storage.getItem('accessToken')) {

-        this.redirectToLogin();

-        return;

-      }

-      getMemberMsg().then(res => {

-        if (res.success && res.result) {

-          storage.setItem('userInfo', res.result);

-          this.applyUserInfo(res.result);

-        } else {

-          this.redirectToLogin();

-        }

-      }).catch(() => {

-        this.redirectToLogin();

-      });

-    },

-    applyUserInfo (userInfo) {

-      this.formItem = { ...userInfo };

-      this.formItem.birthday = this.normalizeBirthday(this.formItem.birthday);

-    },

-    redirectToLogin () {

-      this.$router.push({

-        path: '/login',

-        query: {

-          rePath: this.$route.path,

-          query: JSON.stringify(this.$route.query || {}),

-        },

-      });

-    },

-    normalizeBirthday (value) {

-      if (!value) return ''

-      if (value instanceof Date) return value

-      if (typeof value === 'number') return new Date(value)

-      if (typeof value === 'string') {

-        const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/)

-        if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))

-        const d = new Date(value)

-        return isNaN(d.getTime()) ? '' : d

-      }

-      return ''

-    },

-    formatBirthday (value) {

-      if (!value) return null

-      if (typeof value === 'string') {

-        const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/)

-        return m ? `${m[1]}-${m[2]}-${m[3]}` : null

-      }

-      const d = value instanceof Date ? value : new Date(value)

-      if (isNaN(d.getTime())) return null

-      const yyyy = d.getFullYear()

-      const mm = String(d.getMonth() + 1).padStart(2, '0')

-      const dd = String(d.getDate()).padStart(2, '0')

-      return `${yyyy}-${mm}-${dd}`

-    },

-    save () { // 保存

-      this.$refs.form.validate(valid => {

-        if (valid) {

-          let params = {

-            birthday: this.formatBirthday(this.formItem.birthday),

-            face: this.formItem.face,

-            nickName: this.formItem.nickName,

-            sex: this.formItem.sex

-          }

-          editMemberInfo(params).then(res => {

-            if (res.success) {

-              Message.success('修改个人资料成功')

-              storage.setItem('userInfo', res.result)

-              this.$router.go(0)

-            }

-          })

-        }

-      })

-    },

-    handleSuccess (res, file) { // 上传成功

-      this.formItem['face'] = res.result

-    },

-  }

-

-}

-</script>

-

-<style scoped lang="scss">

-.avatar-form-item {

-  :deep(.el-form-item__label) {

-    height: 90px;

-    line-height: 90px;

-    display: flex;

-    align-items: center;

-  }

-}

-

-.avatar-upload {

-  display: flex;

-  flex-direction: column;

-  align-items: flex-start;

-  gap: 10px;

-

-  :deep(.el-avatar) {

-    margin-top: 10px;

-  }

-

-  :deep(.el-upload) {

-    display: block;

-  }

-}

-

-.profile-field {

-  width: 187px;

-}

-

-:deep(.profile-field.el-date-editor) {

-  width: 187px;

-}

-</style>

-
\ No newline at end of file
+<template>
+  <div class="wrapper">
+    <UserCenterLayout>
+      <el-form class="profile-form" :model="formItem" :rules="rules" ref="form" label-width="72px" label-position="left">
+        <el-form-item label="头像" class="avatar-form-item">
+          <div class="avatar-upload">
+            <el-avatar v-if="formItem.face" :src="formItem.face" :size="72" />
+            <el-avatar v-else :size="72"><el-icon><User /></el-icon></el-avatar>
+            <el-upload
+              :show-file-list="false"
+              :on-success="handleSuccess"
+              :format="['jpg','jpeg','png']"
+              :action="action"
+              :headers="accessToken"
+            >
+              <button type="button" class="ghost-btn">上传头像</button>
+            </el-upload>
+          </div>
+        </el-form-item>
+        <el-form-item label="昵称" prop="nickName">
+          <el-input class="profile-field" v-model="formItem.nickName" maxlength="16" placeholder="请输入昵称" />
+        </el-form-item>
+        <el-form-item label="生日">
+          <el-date-picker
+            class="profile-field"
+            type="date"
+            placeholder="选择您的生日"
+            v-model="formItem.birthday"
+          />
+        </el-form-item>
+        <el-form-item label="性别">
+          <div class="sex-group">
+            <button type="button" class="sex-btn" :class="{ active: formItem.sex === 1 }" @click="formItem.sex = 1">男</button>
+            <button type="button" class="sex-btn" :class="{ active: formItem.sex === 0 }" @click="formItem.sex = 0">女</button>
+          </div>
+        </el-form-item>
+        <el-form-item>
+          <button type="button" class="op-btn" @click="save">确认修改</button>
+        </el-form-item>
+      </el-form>
+    </UserCenterLayout>
+  </div>
+</template>
+
+<script>
+import { Message } from "@/utils/message";
+import { editMemberInfo } from '@/api/account.js';
+import { getMemberMsg } from '@/api/login.js';
+import { buyerUrl } from '@/plugins/request.js';
+import storage from '@/plugins/storage.js';
+import { User } from '@element-plus/icons-vue';
+export default {
+  components: { User },
+  name: 'Profile',
+  data () {
+    return {
+      rules: { // 验证规则
+        nickName: [{required: true, message: '用户昵称不能为空'}, { max: 16, message: '用户昵称不能超过15个字符' }]
+      },
+      formItem: {}, // 表单数据
+      action: buyerUrl + '/buyer/common/upload/file', // 上传接口
+      accessToken: {} // 验证token
+    }
+  },
+  mounted () {
+    this.accessToken.accessToken = storage.getItem('accessToken');
+    this.loadUserInfo();
+  },
+  methods: {
+    loadUserInfo () {
+      const rawUserInfo = storage.getItem('userInfo');
+      if (rawUserInfo) {
+        this.applyUserInfo(JSON.parse(rawUserInfo));
+        return;
+      }
+      if (!storage.getItem('accessToken')) {
+        this.redirectToLogin();
+        return;
+      }
+      getMemberMsg().then(res => {
+        if (res.success && res.result) {
+          storage.setItem('userInfo', res.result);
+          this.applyUserInfo(res.result);
+        } else {
+          this.redirectToLogin();
+        }
+      }).catch(() => {
+        this.redirectToLogin();
+      });
+    },
+    applyUserInfo (userInfo) {
+      this.formItem = { ...userInfo };
+      this.formItem.birthday = this.normalizeBirthday(this.formItem.birthday);
+    },
+    redirectToLogin () {
+      this.$router.push({
+        path: '/login',
+        query: {
+          rePath: this.$route.path,
+          query: JSON.stringify(this.$route.query || {}),
+        },
+      });
+    },
+    normalizeBirthday (value) {
+      if (!value) return ''
+      if (value instanceof Date) return value
+      if (typeof value === 'number') return new Date(value)
+      if (typeof value === 'string') {
+        const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/)
+        if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+        const d = new Date(value)
+        return isNaN(d.getTime()) ? '' : d
+      }
+      return ''
+    },
+    formatBirthday (value) {
+      if (!value) return null
+      if (typeof value === 'string') {
+        const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/)
+        return m ? `${m[1]}-${m[2]}-${m[3]}` : null
+      }
+      const d = value instanceof Date ? value : new Date(value)
+      if (isNaN(d.getTime())) return null
+      const yyyy = d.getFullYear()
+      const mm = String(d.getMonth() + 1).padStart(2, '0')
+      const dd = String(d.getDate()).padStart(2, '0')
+      return `${yyyy}-${mm}-${dd}`
+    },
+    save () { // 保存
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          let params = {
+            birthday: this.formatBirthday(this.formItem.birthday),
+            face: this.formItem.face,
+            nickName: this.formItem.nickName,
+            sex: this.formItem.sex
+          }
+          editMemberInfo(params).then(res => {
+            if (res.success) {
+              Message.success('修改个人资料成功')
+              storage.setItem('userInfo', res.result)
+              this.$router.go(0)
+            }
+          })
+        }
+      })
+    },
+    handleSuccess (res, file) { // 上传成功
+      this.formItem['face'] = res.result
+    },
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.profile-form {
+  max-width: 480px;
+  padding-top: 4px;
+
+  :deep(.el-form-item) {
+    margin-bottom: 22px;
+    align-items: center;
+  }
+
+  :deep(.el-form-item__label) {
+    height: auto;
+    line-height: 22px;
+    color: #666;
+    font-size: 14px;
+  }
+
+  :deep(.el-input__wrapper),
+  :deep(.el-date-editor.el-input__wrapper) {
+    min-height: 36px;
+  }
+}
+
+.avatar-form-item {
+  align-items: center;
+}
+
+.avatar-upload {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  :deep(.el-upload) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.profile-field {
+  width: 320px;
+}
+
+:deep(.profile-field.el-date-editor) {
+  width: 320px;
+}
+
+.sex-group {
+  display: flex;
+  gap: 8px;
+}
+
+.sex-btn,
+.ghost-btn,
+.op-btn {
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 30px;
+  cursor: pointer;
+}
+
+.sex-btn,
+.ghost-btn {
+  border: 1px solid #ddd;
+  background: #fff;
+  color: #171A26;
+
+  &:hover {
+    border-color: $theme_color;
+    color: $theme_color;
+  }
+}
+
+.sex-btn.active {
+  border-color: $theme_color;
+  background: #fff5f4;
+  color: $theme_color;
+}
+
+.op-btn {
+  min-width: 96px;
+  border: 1px solid $theme_color;
+  background: $theme_color;
+  color: #fff;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+</style>
+
diff --git a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
index 924ff8ca6..bacbc026b 100644
--- a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="add-eval">
-    <UserCenterLayout title="订单评价" :tabs="['订单评价']">
+    <UserCenterLayout>
       <div class="title">
       <p>
         <span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
@@ -68,7 +68,7 @@
     <div class="submit-row">
       <el-button type="primary" :loading="loading" @click="save">发表</el-button>
     </div>
-    <el-dialog title="View Image" v-model="visible">
+    <el-dialog title="图片预览" v-model="visible">
         <img :src="previewImage" v-if="visible" style="width: 100%">
     </el-dialog>
     </UserCenterLayout>
@@ -326,7 +326,7 @@ export default {
 }
 
 .describe {
-  font-size: 12px;
+  font-size: 14px;
   color: #999;
   margin-top: 8px;
 }
diff --git a/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue b/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
index ef8a83ec2..8ff769e90 100644
--- a/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
@@ -1,97 +1,81 @@
 <template>
   <div class="add-eval">
-    <UserCenterLayout title="评价详情" :tabs="['评价详情']">
-      <div class="title">
-      <p>
-        <span class="color999">创建人：</span><span>{{ $filters.secrecyMobile( orderGoods.createBy ) }}</span>
-        <span class="color999 ml_20">{{ orderGoods.createTime }}</span>
-      </p>
-      </div>
-    <!-- 物流评分、服务评分 -->
-    <div class="delivery-rate">
-      <div class="fontsize_16">物流服务评价：</div>
-      <div class="color999 delivery-rate-items">
-        <span>物流评价：<el-rate disabled :model-value="Number(orderGoods.deliveryScore) || 0" :colors="rateThemeColors" class="theme-rate" /></span>
-        <span>服务评价：<el-rate disabled :model-value="Number(orderGoods.serviceScore) || 0" :colors="rateThemeColors" class="theme-rate" /></span>
-        <span>描述评价：<el-rate disabled :model-value="Number(orderGoods.descriptionScore) || 0" :colors="rateThemeColors" class="theme-rate" /></span>
-      </div>
-    </div>
-    <!-- 添加订单评价  左侧商品详情  右侧评价框 -->
-    <ul class="goods-eval">
-      <li>
-        <div class="goods-con">
+    <UserCenterLayout>
+      <div class="order-card status-card" v-if="orderGoods.goodsName || orderGoods.content">
+        <div class="status-head">
+          <div class="status-main">
+            <p class="status-text">{{ gradeText }}</p>
+            <p class="status-sn">评价时间：{{ orderGoods.createTime }}</p>
+          </div>
+        </div>
+        <div class="goods-row" v-if="orderGoods.goodsName">
           <img
             :src="orderGoods.goodsImage"
-            class="hover-pointer"
             alt=""
-            width="100"
             @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)"
+            @error="$event.target.style.visibility = 'hidden'"
           />
-          <p
-            class="hover-pointer color999"
-            @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)"
-          >
+          <div class="goods-name" @click="goGoodsDetail(orderGoods.skuId, orderGoods.goodsId)">
             {{ orderGoods.goodsName }}
-          </p>
+          </div>
         </div>
+      </div>
 
-        <div class="eval-con">
-          <div>
-            <span class="color999">商品评价：</span>
-            <el-radio-group
-              style="margin-bottom: 5px; color: #999"
-              v-model="orderGoods.grade"
-              type="button"
-              button-style="solid"
-            >
-              <el-radio label="GOOD" disabled>好评</el-radio>
-              <el-radio label="MODERATE" disabled>中评</el-radio>
-              <el-radio label="WORSE" disabled>差评</el-radio>
-            </el-radio-group>
-            <el-input
-              type="textarea"
-              maxlength="500"
-              readonly
-              show-word-limit
-              :rows="4"
-              v-model="orderGoods.content"
-            />
+      <div class="order-card">
+        <h3>物流服务评价</h3>
+        <div class="rate-list">
+          <div class="rate-row">
+            <span>物流评价</span>
+            <el-rate disabled :model-value="Number(orderGoods.deliveryScore) || 0" :colors="rateThemeColors" class="theme-rate" />
           </div>
-          <div style="display: flex; align-items: center">
-            <template v-if="orderGoods.images">
-              <div class="demo-upload-list" v-for="(img, index) in orderGoods.images.split(',')" :key="index">
-                <img :src="img" />
-                <div class="demo-upload-list-cover"><el-icon @click="handleView(img)"><View /></el-icon></div>
-              </div>
-            </template>
+          <div class="rate-row">
+            <span>服务评价</span>
+            <el-rate disabled :model-value="Number(orderGoods.serviceScore) || 0" :colors="rateThemeColors" class="theme-rate" />
           </div>
-          <div style="margin-top: 20px;" v-if="orderGoods.reply || orderGoods.replyImage">
-            <span class="color999">商家回复：</span>
-            <span>{{ orderGoods.reply }}</span>
-            <div style="display: flex; align-items: center">
-              <template v-if="orderGoods.replyImage">
-                <div class="demo-upload-list" v-for="(img, index) in orderGoods.replyImage.split(',')" :key="index">
-                  <img :src="img" />
-                  <div class="demo-upload-list-cover"><el-icon @click="handleView(img)"><View /></el-icon></div>
-                </div>
-              </template>
-            </div>
+          <div class="rate-row">
+            <span>描述评价</span>
+            <el-rate disabled :model-value="Number(orderGoods.descriptionScore) || 0" :colors="rateThemeColors" class="theme-rate" />
           </div>
-
         </div>
-      </li>
-    </ul>
-    <el-dialog title="View Image" v-model="visible">
-      <img :src="previewImage" v-if="visible" style="width: 100%" />
-    </el-dialog>
+      </div>
+
+      <div class="order-card">
+        <h3>评价内容</h3>
+        <p class="eval-text">{{ orderGoods.content || '暂无评价内容' }}</p>
+        <div class="image-list" v-if="orderGoods.images">
+          <img
+            v-for="(img, index) in orderGoods.images.split(',')"
+            :key="index"
+            :src="img"
+            alt=""
+            @click="handleView(img)"
+          />
+        </div>
+      </div>
+
+      <div class="order-card" v-if="orderGoods.reply || orderGoods.replyImage">
+        <h3>商家回复</h3>
+        <p class="eval-text" v-if="orderGoods.reply">{{ orderGoods.reply }}</p>
+        <div class="image-list" v-if="orderGoods.replyImage">
+          <img
+            v-for="(img, index) in orderGoods.replyImage.split(',')"
+            :key="index"
+            :src="img"
+            alt=""
+            @click="handleView(img)"
+          />
+        </div>
+      </div>
+
+      <el-dialog title="查看图片" v-model="visible" width="640px">
+        <img :src="previewImage" v-if="visible" class="preview-img" alt="" />
+      </el-dialog>
     </UserCenterLayout>
   </div>
 </template>
 <script>
-import { View } from '@element-plus/icons-vue';
 import { evaluationDetail } from "@/api/member.js";
 export default {
-  components: { View },
   data() {
     return {
       order: {}, // 订单详情
@@ -103,6 +87,12 @@ export default {
       rateThemeColors: ["var(--theme-color)", "var(--theme-color)", "var(--theme-color)"],
     };
   },
+  computed: {
+    gradeText () {
+      const map = { GOOD: '好评', MODERATE: '中评', WORSE: '差评' }
+      return map[this.orderGoods.grade] || '评价详情'
+    }
+  },
   methods: {
     getDetail() {
       // 获取评价详情
@@ -130,103 +120,140 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.delivery-rate {
-  display: flex;
-  align-items: center;
-  margin-top: 20px;
-  min-height: 50px;
-  border-bottom: 1px solid #eee;
-  > div:nth-child(1) {
-    width: 120px;
-    font-weight: bold;
+.add-eval {
+  color: #333;
+}
+
+.order-card {
+  padding: 4px 0 16px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+
+  h3 {
+    margin: 0 0 12px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #333;
+    line-height: 1.4;
+  }
+
+  &:last-of-type {
+    border-bottom: none;
   }
 }
 
-.delivery-rate-items {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 16px;
+.status-card {
+  padding-top: 8px;
 }
 
-.delivery-rate-items :deep(.theme-rate.el-rate) {
+.status-text {
+  margin: 0;
+  color: $theme_color;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.status-sn {
+  margin: 6px 0 0;
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+
+  span {
+    margin-left: 16px;
+  }
+}
+
+.goods-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+  padding: 12px;
+  background: #fafafa;
+  border-radius: 8px;
+
+  img {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    border: 1px solid #f0f0f0;
+    background: #f5f5f5;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+}
+
+.goods-name {
+  color: #333;
+  font-size: 16px;
+  line-height: 22px;
+  word-break: break-all;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
+  }
+}
+
+.rate-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 32px;
+}
+
+.rate-row {
+  display: flex;
+  align-items: center;
+  min-width: 180px;
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+
+  span {
+    width: 72px;
+    flex-shrink: 0;
+  }
+}
+
+.rate-row :deep(.theme-rate.el-rate) {
   --el-rate-fill-color: #{$theme_color};
   --el-rate-disabled-fill-color: #{$theme_color};
+  height: 22px;
 }
 
 :deep(.theme-rate .el-rate__icon.is-active) {
   color: $theme_color !important;
 }
-.goods-eval li {
+
+.eval-text {
+  margin: 0;
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.image-list {
   display: flex;
-  border-bottom: 1px solid #eee;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 12px;
 
-  .goods-con {
-    width: 30%;
-    padding: 20px;
-    text-align: center;
-    p {
-      word-wrap: wrap;
-      &:hover {
-        color: $theme_color;
-      }
-    }
-  }
-  .eval-con {
-    width: 70%;
-    padding: 20px;
-  }
-}
-
-.demo-upload-list {
-  display: inline-block;
-  width: 60px;
-  height: 60px;
-  text-align: center;
-  line-height: 60px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  overflow: hidden;
-  background: #fff;
-  position: relative;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-  margin-right: 4px;
-  margin-top: 10px;
-}
-.demo-upload-list img {
-  width: 100%;
-  height: 100%;
-}
-.demo-upload-list-cover {
-  display: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.6);
-}
-.demo-upload-list:hover .demo-upload-list-cover {
-  display: block;
-}
-.demo-upload-list-cover i {
-  color: #fff;
-  font-size: 20px;
-  cursor: pointer;
-  margin: 0 2px;
-}
-.icon-upload {
-  width: 58px;
-  height: 58px;
-  line-height: 58px;
-  text-align: center;
-  display: inline-block;
-  border: 1px dashed #999;
-  border-radius: 4px;
-  margin-top: 10px;
-  &:hover {
+  img {
+    width: 88px;
+    height: 88px;
+    object-fit: cover;
+    border: 1px solid #f0f0f0;
+    border-radius: 6px;
     cursor: pointer;
-    border-color: $theme_color;
   }
 }
+
+.preview-img {
+  display: block;
+  width: 100%;
+}
 </style>
diff --git a/buyer/src/pages/home/memberCenter/memberMsg/MsgDetail.vue b/buyer/src/pages/home/memberCenter/memberMsg/MsgDetail.vue
index e00254bdf..e35f8d3cf 100644
--- a/buyer/src/pages/home/memberCenter/memberMsg/MsgDetail.vue
+++ b/buyer/src/pages/home/memberCenter/memberMsg/MsgDetail.vue
@@ -1,17 +1,138 @@
 <template>
-  <div class="msg-list">
-    会员消息详情
+  <div class="msg-detail-page">
+    <UserCenterLayout title="消息详情">
+      <div v-if="detail.id" class="msg-detail">
+        <div class="msg-detail-head">
+          <h2>{{ detail.title || '站内消息' }}</h2>
+          <p>{{ detail.createTime }}</p>
+        </div>
+        <div class="msg-detail-content">{{ detail.content || '暂无内容' }}</div>
+        <div class="msg-detail-actions">
+          <el-button @click="goBack">返回</el-button>
+          <el-button v-if="detail.status !== 'ALREADY_REMOVE'" type="danger" @click="removeMessage">删除</el-button>
+        </div>
+      </div>
+      <div v-else-if="loaded">
+        <empty _Title="消息不存在或已失效" />
+        <div class="msg-detail-actions is-empty">
+          <el-button @click="goBack">返回消息列表</el-button>
+        </div>
+      </div>
+    </UserCenterLayout>
   </div>
 </template>
+
 <script>
+import { Message, Modal } from "@/utils/message";
+import { delMemberMsg, getMemberMessage, readMemberMsg } from '@/api/member.js';
+
+const CACHE_KEY = 'buyer-member-message';
+
 export default {
-  data() {
+  name: 'MsgDetail',
+  data () {
     return {
-      detail: {}, // 消息详情
+      detail: {},
+      loaded: false
     }
   },
+  mounted () {
+    this.loadDetail()
+  },
+  methods: {
+    loadDetail () {
+      const id = this.$route.query.id
+      if (!id) {
+        this.loaded = true
+        return
+      }
+      const cached = this.readCache(id)
+      if (cached) this.detail = cached
+      getMemberMessage(id).then(res => {
+        if (res && res.success && res.result && res.result.id) {
+          this.detail = res.result
+          sessionStorage.setItem(CACHE_KEY, JSON.stringify(res.result))
+        }
+      }).catch(() => {}).finally(() => {
+        this.loaded = true
+        this.markRead()
+      })
+    },
+    readCache (id) {
+      try {
+        const raw = sessionStorage.getItem(CACHE_KEY)
+        if (!raw) return null
+        const message = JSON.parse(raw)
+        return message && String(message.id) === String(id) ? message : null
+      } catch (e) {
+        return null
+      }
+    },
+    markRead () {
+      if (!this.detail.id || this.detail.status !== 'UN_READY') return
+      readMemberMsg(this.detail.id).then(res => {
+        if (res && res.success) this.detail.status = 'ALREADY_READY'
+      }).catch(() => {})
+    },
+    goBack () {
+      this.$router.push({ name: 'MsgList' })
+    },
+    removeMessage () {
+      Modal.confirm({
+        title: '确认删除',
+        content: '确认要删除此消息?',
+        loading: true,
+        onOk: () =>
+          delMemberMsg(this.detail.id).then((res) => {
+            if (res.success) {
+              Message.success('消息已成功放入回收站')
+              this.goBack()
+            }
+          })
+      })
+    }
+  }
 }
 </script>
+
 <style lang="scss" scoped>
-  
-</style>
\ No newline at end of file
+.msg-detail-head {
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+
+  h2 {
+    margin: 0;
+    color: #171A26;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.5;
+  }
+
+  p {
+    margin: 8px 0 0;
+    color: #999;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.msg-detail-content {
+  padding: 20px 0 8px;
+  color: #333;
+  font-size: 14px;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.msg-detail-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+
+  &.is-empty {
+    justify-content: center;
+  }
+}
+</style>
diff --git a/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue b/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
index 03408424e..af3c56dfa 100644
--- a/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
+++ b/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
@@ -1,43 +1,47 @@
 <template>
   <div class="msg-list">
     <UserCenterLayout
-      title="我的消息"
       :tabs="status"
       :active-tab="activeStatusIndex"
       @tab-change="statusChange"
     >
 
-      <el-table v-if="params.status != 'ALREADY_REMOVE'" :data="messageData.records || []">
-      <el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
-      <el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
-      <el-table-column prop="createTime" label="发送时间" align="left" width="240" />
-      <el-table-column label="操作" align="center" fixed="right" width="150">
-        <template #default="{ row }">
-          <el-button
-            v-if="row.status === 'UN_READY'"
-            type="primary"
-            size="small"
-            style="margin-right: 5px"
-            @click="setRead(row.id)"
-          >已读</el-button>
-          <el-button type="danger" size="small" @click="removeMessage(row.id)">删除</el-button>
-        </template>
-      </el-table-column>
-      </el-table>
-      <el-table v-else :data="messageData.records || []">
-      <el-table-column prop="title" label="消息标题" align="left" show-overflow-tooltip />
-      <el-table-column prop="content" label="消息内容" align="left" show-overflow-tooltip />
-      <el-table-column prop="createTime" label="发送时间" align="left" width="240" />
-      </el-table>
-      <div class="msg-pagination">
+      <empty v-if="!(messageData.records || []).length" />
+      <div v-else class="msg-table" :class="{ 'is-recycle': params.status === 'ALREADY_REMOVE' }">
+        <div class="msg-head">
+          <span>消息标题</span>
+          <span>消息内容</span>
+          <span>发送时间</span>
+          <span v-if="params.status !== 'ALREADY_REMOVE'">操作</span>
+        </div>
+        <div
+          class="msg-row"
+          v-for="row in messageData.records"
+          :key="row.id"
+          :class="{ unread: row.status === 'UN_READY' }"
+        >
+          <div class="msg-title" @click="openDetail(row)">
+            <i v-if="row.status === 'UN_READY'" class="unread-dot"></i>
+            <span>{{ row.title }}</span>
+          </div>
+          <div class="msg-content" @click="openDetail(row)">{{ row.content }}</div>
+          <div class="msg-time">{{ row.createTime }}</div>
+          <div class="msg-ops" v-if="params.status !== 'ALREADY_REMOVE'">
+            <button type="button" class="text-link" @click="openDetail(row)">查看</button>
+            <button v-if="row.status === 'UN_READY'" type="button" class="text-link" @click="setRead(row.id)">已读</button>
+            <button type="button" class="text-link" @click="removeMessage(row.id)">删除</button>
+          </div>
+        </div>
+      </div>
+      <div class="msg-pagination" v-if="messageData.total">
         <el-pagination
           v-model:current-page="params.pageNumber"
           v-model:page-size="params.pageSize"
           :total="messageData.total"
           @current-change="changePage"
           @size-change="changePageSize"
-          :page-sizes="[10, 20, 50]"
-          layout="total, prev, pager, next, jumper"
+          :page-sizes="[20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
         />
       </div>
     </UserCenterLayout>
@@ -53,7 +57,7 @@ export default {
       status: ['未读', '已读', '回收站'],
       params: {
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 20,
         status: 'UN_READY'
       },
     }
@@ -70,6 +74,7 @@ export default {
       if (index === 0) { this.params.status = 'UN_READY' }
       if (index === 1) { this.params.status = 'ALREADY_READY' }
       if (index === 2) { this.params.status = 'ALREADY_REMOVE' }
+      this.params.pageNumber = 1
       this.getList()
     },
     changePage (v) {
@@ -77,9 +82,14 @@ export default {
       this.getList();
     },
     changePageSize (v) {
+      this.params.pageNumber = 1
       this.params.pageSize = v;
       this.getList();
     },
+    openDetail (row) {
+      sessionStorage.setItem('buyer-member-message', JSON.stringify(row))
+      this.$router.push({ name: 'MsgDetail', query: { id: row.id } })
+    },
     getList () {
       memberMsgList(this.params).then(res => {
         if (res.success) {
@@ -115,9 +125,112 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.msg-table {
+  --msg-cols: minmax(140px, 1.1fr) minmax(0, 2.2fr) 180px 168px;
+  padding-top: 8px;
+}
+
+.msg-table.is-recycle {
+  --msg-cols: minmax(140px, 1.1fr) minmax(0, 2.2fr) 180px;
+}
+
+.msg-head,
+.msg-row {
+  display: grid;
+  grid-template-columns: var(--msg-cols);
+  column-gap: 16px;
+  align-items: start;
+}
+
+.msg-head {
+  padding: 0 8px 10px;
+  color: #999;
+  font-size: 13px;
+
+  span:last-child {
+    text-align: center;
+  }
+}
+
+.msg-row {
+  padding: 14px 8px;
+  border-top: 1px solid #f0f0f0;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.msg-title {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  color: #171A26;
+  cursor: pointer;
+
+  &:hover span {
+    color: $theme_color;
+  }
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.unread .msg-title {
+  font-weight: 600;
+}
+
+.unread-dot {
+  width: 6px;
+  height: 6px;
+  margin-right: 8px;
+  border-radius: 50%;
+  background: $theme_color;
+  flex-shrink: 0;
+}
+
+.msg-content {
+  min-width: 0;
+  color: #666;
+  cursor: pointer;
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 22px;
+}
+
+.msg-time {
+  color: #171A26;
+}
+
+.msg-ops {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+.text-link {
+  border: none;
+  background: none;
+  padding: 0;
+  color: #171A26;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
+  }
+}
+
 .msg-pagination {
   display: flex;
   justify-content: flex-end;
-  margin-top: 10px;
+  margin-top: 16px;
+
+  :deep(.el-pagination) {
+    justify-content: flex-end;
+  }
 }
 </style>
diff --git a/buyer/src/pages/home/orderCenter/AddAddress.vue b/buyer/src/pages/home/orderCenter/AddAddress.vue
index 2527cde66..8a8c600d1 100644
--- a/buyer/src/pages/home/orderCenter/AddAddress.vue
+++ b/buyer/src/pages/home/orderCenter/AddAddress.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <UserCenterLayout title="收货地址" :tabs="['收货地址']">
+    <UserCenterLayout>
     <div class="add-box">
       <el-form :model="formData" ref="form" label-position="left" label-width="100px" :rules="ruleInline">
         <el-form-item label="收件人" prop="name">
@@ -18,7 +18,7 @@
           <el-input v-model="formData.mobile" placeholder="请输入收件人手机号" style="width: 600px"></el-input>
         </el-form-item>
         <el-form-item label="地址别名">
-          <el-input v-model="formData.alias" length :maxlength="4" placeholder="请输入地址别名，例如公司" style="width: 600px">
+          <el-input v-model="formData.alias" :maxlength="5" show-word-limit placeholder="请输入地址别名，例如公司" style="width: 600px">
           </el-input>
         </el-form-item>
         <el-form-item label="默认地址">
diff --git a/buyer/src/pages/home/orderCenter/AfterSale.vue b/buyer/src/pages/home/orderCenter/AfterSale.vue
index ab04e5ee3..27cc14357 100644
--- a/buyer/src/pages/home/orderCenter/AfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSale.vue
@@ -1,78 +1,85 @@
 <template>
   <div class="wrapper">
-    <UserCenterLayout title="我的售后" :tabs="['我的售后']">
+    <UserCenterLayout
+      :tabs="changeWay.map((item) => item.name)"
+      :active-tab="activeTab"
+      @tab-change="change"
+    >
       <template #extra>
-        <el-input
-          class="width_300"
-          
-          
-          v-model="params.keywords"
-          @keyup.enter="getList"
-          placeholder="请输入订单号搜索"
-        />
+        <div class="order-search">
+          <el-input
+            v-model="params.keywords"
+            size="large"
+            @keyup.enter="getList"
+            placeholder="输入订单号搜索"
+          />
+          <el-button type="primary" @click="getList">搜索</el-button>
+        </div>
       </template>
     <!-- 列表 -->
     <empty v-if="orderList.length === 0"/>
     <div class="order-content" v-else>
-      <template v-for="(order, onderIndex) in orderList" :key="order.sn || onderIndex">
-        <div class="order-list">
-          <div class="order-header">
-            <div>
-              <div v-if="order.serviceStatus">{{ filterOrderStatus(order.serviceStatus) }}</div>
-              <div>
-                售后单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{ order.createTime }}
-                &nbsp; &nbsp;{{ $filters.secrecyMobile( order.memberName ) }}
+      <div class="order-cols">
+        <span>订单详情</span>
+        <span>金额</span>
+        <span>操作</span>
+      </div>
+      <div
+        class="order-list"
+        v-for="(order, orderIndex) in orderList"
+        :key="order.sn || orderIndex"
+      >
+        <div class="order-header">
+          <div class="order-sn">
+            {{ order.createTime }}<span>售后单号 {{ order.sn }}</span><span class="order-store" @click="shopPage(order.storeId)">{{ order.storeName }}</span>
+          </div>
+          <div class="order-status">{{ filterOrderStatus(order.serviceStatus) }}</div>
+        </div>
+        <div class="order-body">
+          <div class="col-detail">
+            <div class="goods-item">
+              <div class="goods-thumb">
+                <img
+                  @click="goodsDetail(order.skuId, order.goodsId)"
+                  class="hover-color"
+                  :src="order.goodsImage"
+                  alt=""
+                  @error="$event.target.style.visibility = 'hidden'"
+                />
+              </div>
+              <div class="goods-info">
+                <div class="goods-name hover-color" @click="goodsDetail(order.skuId, order.goodsId)">{{ order.goodsName }}</div>
+                <div class="goods-num">共{{ order.num }}件</div>
               </div>
-            </div>
-            <div>
-              <span>申请退款金额：<span class="global_color">{{ $filters.unitPrice(order.applyRefundPrice, "￥") }}</span></span>
             </div>
           </div>
-          <div class="order-body">
-            <div class="goods-list">
-              <img @click="goodsDetail(order.skuId, order.goodsId)" class="hover-color" :src="order.goodsImage" alt=""/>
-
-              <div>
-                <div class="hover-color" @click="goodsDetail(order.skuId, order.goodsId)">{{ order.goodsName }}</div>
-                <div class="mt_10"> x {{ order.num }}
-                </div>
-              </div>
-            </div>
-            <div>
-              <span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
-            </div>
-            <div class="order-actions">
-              <!-- 订单基础操作 -->
-              <el-button
-                @click="goDetail(order.sn)"
-                type="warning"
-                size="small"
-                class="after-sale-action-btn"
-              >售后详情</el-button>
-              <el-button
-                @click="openModal(order)"
-                v-if="order.serviceStatus == 'PASS' && order.serviceType != 'RETURN_MONEY'"
-                size="small"
-                class="after-sale-action-btn submit-logistics-btn"
-              >提交物流</el-button>
-              <el-button
-                @click="cancel(order.sn)"
-                type="danger"
-                v-if="order.afterSaleAllowOperationVO.cancel"
-                size="small"
-                class="after-sale-action-btn"
-              >取消售后</el-button>
-            </div>
+          <div class="col-amount">
+            <div class="order-amount">{{ $filters.unitPrice(order.applyRefundPrice, "￥") }}</div>
+          </div>
+          <div class="col-ops">
+            <button
+              v-if="order.serviceStatus == 'PASS' && order.serviceType != 'RETURN_MONEY'"
+              type="button"
+              class="op-btn"
+              @click="openModal(order)"
+            >提交物流</button>
+            <button type="button" class="text-link" @click="goDetail(order.sn)">售后详情</button>
+            <button
+              v-if="order.afterSaleAllowOperationVO && order.afterSaleAllowOperationVO.cancel"
+              type="button"
+              class="text-link"
+              @click="cancel(order.sn)"
+            >取消售后</button>
           </div>
         </div>
-      </template>
+      </div>
       <el-skeleton size="large" fix v-if="spinShow"></el-skeleton>
     </div>
     <!-- 分页 -->
     <div class="page-size">
       <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
-        :total="total" @current-change="changePageNum"
-            @size-change="changePageSize" layout="sizes, prev, pager, next, jumper"></el-pagination>
+        :total="total" :page-sizes="[20, 50, 100]" @current-change="changePageNum"
+            @size-change="changePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
     </UserCenterLayout>
     <el-dialog v-model="logisticsShow" width="530">
@@ -135,7 +142,8 @@ export default {
       orderList: [], // 订单列表
       params: { // 请求参数
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 20,
+        keywords: '',
         sn: '',
         sort: 'createTime',
         order: 'desc'
@@ -158,7 +166,14 @@ export default {
         logisticsNo: [{required: true, message: '请填写物流编号'}],
         mDeliverTime: [{required: true, message: '请选择发货时间'}]
       },
-      submitLoading: false // 提交加载状态
+      submitLoading: false, // 提交加载状态
+      changeWay: [
+        { name: '全部', status: '' },
+        { name: '申请中', status: 'APPLY' },
+        { name: '通过', status: 'PASS' },
+        { name: '完成售后', status: 'COMPLETE' },
+      ],
+      activeTab: 0,
     };
   },
   mounted() {
@@ -203,6 +218,17 @@ export default {
       });
       window.open(routeUrl.href, '_blank');
     },
+    change(index) {
+      this.activeTab = index
+      this.params.pageNumber = 1
+      const current = this.changeWay[index]
+      if (!current || !current.status) {
+        delete this.params.serviceStatus
+      } else {
+        this.params.serviceStatus = current.status
+      }
+      this.getList()
+    },
     getList() { // 获取售后列表
       this.spinShow = true;
       let params = JSON.parse(JSON.stringify(this.params))
@@ -227,7 +253,7 @@ export default {
       const ob = this.afterSaleStatusList.filter(e => {
         return e.status === status
       });
-      return ob[0].name
+      return ob && ob[0] ? ob[0].name : status
     },
     // 获取物流公司列表
     getCompany() {
@@ -275,109 +301,220 @@ export default {
   margin-bottom: 40px;
 }
 
-.box {
-  overflow: hidden;
+.order-search {
+  display: flex;
+  align-items: center;
+  width: 330px;
+
+  :deep(.el-input) {
+    flex: 1;
+  }
+
+  :deep(.el-button) {
+    margin-left: 8px;
+  }
+}
+
+.order-content {
+  --order-cols: minmax(0, 1fr) 120px 120px;
+  --order-gap: 12px;
+  padding-top: 14px;
 }
 
 .page-size {
-  margin: 15px 0px;
+  margin: 15px 0;
   display: flex;
   justify-content: flex-end;
-  align-items: center;
+
+  :deep(.el-pagination) {
+    justify-content: flex-end;
+  }
+}
+
+.order-cols {
+  display: grid;
+  grid-template-columns: var(--order-cols);
+  column-gap: var(--order-gap);
+  align-items: center;
+  padding: 0 16px 10px;
+  color: #999;
+  font-size: 13px;
+
+  span:first-child {
+    padding-left: 72px;
+  }
+
+  span:nth-child(n + 2) {
+    text-align: center;
+  }
 }
 
-/** 订单列表 */
 .order-list {
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  margin-bottom: 10px;
-
-  &:hover {
-    .del-btn {
-      visibility: visible;
-    }
-  }
-
-  .del-btn {
-    visibility: hidden;
-  }
+  border: 1px solid #eee;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  background: #fff;
+  overflow: hidden;
 
   .order-header {
+    display: grid;
+    grid-template-columns: var(--order-cols);
+    column-gap: var(--order-gap);
+    align-items: center;
+    padding: 10px 16px;
+    background: #f7f7f7;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .order-sn {
+    grid-column: 1 / 3;
     display: flex;
     align-items: center;
-    padding: 10px;
-    justify-content: space-between;
-    border-bottom: 1px solid #ddd;
+    min-width: 0;
+    font-size: 14px;
+    color: #171A26;
+    line-height: 1.5;
 
-    > div:nth-child(1) > div:nth-child(2) {
-      font-size: 12px;
-      color: #999;
-      margin-top: 3px;
+    span {
+      margin-left: 16px;
     }
   }
 
+  .order-store {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #438cde;
+    cursor: pointer;
+
+    &:hover {
+      color: $theme_color;
+    }
+  }
+
+  .order-status {
+    grid-column: 3;
+    min-width: 0;
+    text-align: center;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.4;
+  }
+
   .order-body {
-    display: flex;
-    justify-content: space-between;
-    color: #999;
-    padding: 10px;
+    display: grid;
+    grid-template-columns: var(--order-cols);
+    column-gap: var(--order-gap);
+    align-items: center;
+    padding: 14px 16px;
+  }
 
-    > div:nth-child(2) {
-      width: 150px;
-      text-align: center;
+  .goods-item {
+    display: grid;
+    grid-template-columns: 60px minmax(0, 1fr);
+    column-gap: 12px;
+    align-items: start;
+    width: 100%;
+    min-width: 0;
+  }
 
-      span {
-        color: #438cde;
-        cursor: pointer;
+  .goods-thumb {
+    width: 60px;
+    height: 60px;
+    border: 1px solid #f0f0f0;
+    overflow: hidden;
+    background: #f5f5f5;
 
-        &:hover {
-          color: $theme_color;
-        }
-      }
-
-      .el-icon {
-        color: #ff8f23;
-        cursor: pointer;
-
-        &:hover {
-          color: $theme_color;
-        }
-      }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
     }
+  }
 
-    .order-actions {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      min-width: 100px;
+  .goods-info {
+    min-width: 0;
+    overflow: hidden;
+  }
 
-      .after-sale-action-btn {
-        display: block;
-        margin: 0;
-        min-width: 88px;
-      }
+  .goods-name {
+    max-width: 100%;
+    color: #333;
+    font-size: 16px;
+    line-height: 22px;
+    max-height: 44px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    word-break: break-all;
+  }
 
-      :deep(.submit-logistics-btn) {
-        background-color: #ff9900 !important;
-        border-color: #ff9900 !important;
-        color: #fff !important;
+  .goods-num {
+    margin-top: 6px;
+    color: #999;
+    font-size: 14px;
+    line-height: 1.4;
+  }
 
-        &:hover,
-        &:focus {
-          background-color: #e68a00 !important;
-          border-color: #e68a00 !important;
-          color: #fff !important;
-        }
-      }
+  .col-amount,
+  .col-ops {
+    text-align: center;
+  }
+
+  .order-amount {
+    color: #333;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .col-ops {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .op-btn {
+    min-width: 96px;
+    height: 32px;
+    padding: 0 12px;
+    border: 1px solid $theme_color;
+    border-radius: 4px;
+    background: $theme_color;
+    color: #fff;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 30px;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  .text-link {
+    border: none;
+    background: none;
+    padding: 0;
+    color: #171A26;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 22px;
+    cursor: pointer;
+
+    &:hover {
+      color: $theme_color;
     }
   }
 }
 
-.goods-list {
-  // width: 500px;
+.modal-goods {
   display: flex;
+  padding: 5px;
   margin-bottom: 10px;
 
   img {
@@ -390,8 +527,4 @@ export default {
     flex: 1;
   }
 }
-
-.modal-goods {
-  padding: 5px;
-}
 </style>
diff --git a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
index 873e57d17..74b20fad8 100644
--- a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
@@ -1,84 +1,102 @@
 <template>
   <div class="order-detail">
-    <UserCenterLayout title="售后详情" :tabs="['售后详情']">
-    <!-- 操作按钮 -->
-    <el-card class="mb_10" shadow="never" v-if="(afterSale.serviceStatus == 'PASS' &&
-          afterSale.serviceType != 'RETURN_MONEY') || (afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel)">
-      <el-button
-        @click="openModal"
-        v-if="afterSale.serviceStatus == 'PASS' && afterSale.serviceType != 'RETURN_MONEY'"
-        size="small"
-        class="submit-logistics-btn"
-      >提交物流</el-button>&nbsp;
-      <el-button type="danger" @click="cancel(afterSale.sn)" v-if="afterSale.afterSaleAllowOperationVO && afterSale.afterSaleAllowOperationVO.cancel" size="small">取消售后</el-button>
-    </el-card>
-    <div class="order-card">
-      <h3>{{afterSale.serviceName}}</h3>
-      <p class="global_color fontsize_18">{{ afterSale.orderStatusValue }}</p>
-      <p class="order-meta">
-        <span>售后单号：{{ afterSale.sn }} &nbsp;&nbsp;&nbsp;订单号：{{ afterSale.orderSn }}</span>
-        <span class="order-meta-time">创建时间：{{ afterSale.createTime }}</span>
-      </p>
-      <div class="service-after">
-        <div>
-          本次售后服务由<span>{{afterSale.storeName}}</span>为您提供
+    <UserCenterLayout>
+    <div class="order-card status-card" v-if="afterSale.sn">
+      <div class="status-head">
+        <div class="status-main">
+          <p class="status-text">{{ afterSale.serviceName }}</p>
+          <p class="status-sn">
+            售后单号：{{ afterSale.sn }}
+            <span>订单号：{{ afterSale.orderSn }}</span>
+          </p>
         </div>
-        <div class="service-after-goods">
-          <img :src="afterSale.goodsImage" alt="" width="60" height="60">
-          <span>{{afterSale.goodsName}}</span>
+        <div class="status-side">
+          <div class="operation-time">创建时间：{{ afterSale.createTime }}</div>
+          <div class="status-actions" v-if="canSubmitLogistics || canCancel">
+            <button v-if="canSubmitLogistics" type="button" class="op-btn" @click="openModal">提交物流</button>
+            <button v-if="canCancel" type="button" class="text-link" @click="cancel(afterSale.sn)">取消售后</button>
+          </div>
+        </div>
+      </div>
+      <div class="goods-row">
+        <img :src="afterSale.goodsImage" alt="" @error="$event.target.style.visibility = 'hidden'">
+        <div class="goods-info">
+          <div class="goods-name">{{ afterSale.goodsName }}</div>
+          <div class="store-line">
+            本次售后服务由<span @click="shopPage(afterSale.storeId)">{{ afterSale.storeName }}</span>为您提供
+          </div>
         </div>
       </div>
     </div>
-    <div class="order-card">
+    <div class="order-card" v-if="logList.length">
       <h3>售后进程</h3>
-      <el-steps class="progress" :current="logList.length" direction="vertical">
-        <el-step           :content="'操作人：'+ log.operatorName + '   ' + log.createTime"
+      <el-steps
+        class="progress"
+        :active="logList.length - 1"
+        direction="vertical"
+      >
+        <el-step
           :title="log.message"
+          :description="logDesc(log)"
           v-for="(log, index) in logList"
           :key="index"
         ></el-step>
       </el-steps>
     </div>
     <div class="order-card">
-      <h3 class="mb_10">服务单信息</h3>
-      <table border="1" cellpadding='0' cellspacing="0">
-        <tbody>
-        <tr>
-          <td>退款方式</td><td>{{afterSale.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款'}}</td>
-        </tr>
-        <tr>
-          <td>申请退款金额</td><td>{{ $filters.unitPrice(afterSale.applyRefundPrice, '￥') }}</td>
-        </tr>
-        <tr v-if="afterSale.actualRefundPrice">
-          <td>实际退款金额</td><td>{{ $filters.unitPrice(afterSale.actualRefundPrice, '￥') }}</td>
-        </tr>
+      <h3>服务单信息</h3>
+      <div class="info-list">
+        <div class="info-row">
+          <span class="label">退款方式</span>
+          <span>{{ afterSale.refundWay == 'ORIGINAL' ? '原路退回' : '账号退款' }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">申请退款金额</span>
+          <span>{{ $filters.unitPrice(afterSale.applyRefundPrice, '￥') }}</span>
+        </div>
+        <div class="info-row" v-if="afterSale.actualRefundPrice">
+          <span class="label">实际退款金额</span>
+          <span>{{ $filters.unitPrice(afterSale.actualRefundPrice, '￥') }}</span>
+        </div>
         <template v-if="afterSale.refundWay === 'OFFLINE'">
-          <tr>
-            <td>退款开户行</td><td>{{afterSale.bankDepositName}}</td>
-          </tr>
-          <tr>
-            <td>退款开户名</td><td>{{afterSale.bankAccountName}}</td>
-          </tr>
-          <tr>
-            <td>退款卡号</td><td>{{afterSale.bankAccountNumber}}</td>
-          </tr>
+          <div class="info-row">
+            <span class="label">退款开户行</span>
+            <span>{{ afterSale.bankDepositName }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">退款开户名</span>
+            <span>{{ afterSale.bankAccountName }}</span>
+          </div>
+          <div class="info-row">
+            <span class="label">退款卡号</span>
+            <span>{{ afterSale.bankAccountNumber }}</span>
+          </div>
         </template>
-        <tr>
-          <td>商品处理方式</td><td>{{afterSale.serviceType == 'RETURN_MONEY' ? '退款' : '退货'}}</td>
-        </tr>
-        <tr>
-          <td>退款原因</td><td>{{afterSale.reasonName}}</td>
-        </tr>
-        <tr>
-          <td>问题描述</td><td>{{afterSale.problemDesc}}</td>
-        </tr>
-        </tbody>
-      </table>
+        <div class="info-row">
+          <span class="label">商品处理方式</span>
+          <span>{{ afterSale.serviceType == 'RETURN_MONEY' ? '退款' : '退货' }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">退款原因</span>
+          <span>{{ afterSale.reasonName }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">问题描述</span>
+          <span>{{ afterSale.problemDesc }}</span>
+        </div>
+      </div>
     </div>
     <div class="order-card" v-if="afterSale.afterSaleImage">
-      <h3 class="mb_10">图片信息</h3>
-      <div v-for="img in afterSale.afterSaleImage.split(',')" :key="img">
-        <img :src="img" width="200" height="200" @click="perviewImg(img)" class="hover-pointer" alt="">
+      <h3>图片信息</h3>
+      <div class="image-list">
+        <img
+          v-for="img in afterSale.afterSaleImage.split(',')"
+          :key="img"
+          :src="img"
+          @click="perviewImg(img)"
+          class="hover-pointer"
+          alt=""
+        >
       </div>
     </div>
     <el-dialog v-model="logisticsShow" width="530">
@@ -144,6 +162,14 @@ export default {
       submitLoading: false // 提交加载状态
     };
   },
+  computed: {
+    canSubmitLogistics () {
+      return this.afterSale.serviceStatus == 'PASS' && this.afterSale.serviceType != 'RETURN_MONEY'
+    },
+    canCancel () {
+      return this.afterSale.afterSaleAllowOperationVO && this.afterSale.afterSaleAllowOperationVO.cancel
+    }
+  },
   methods: {
     getDetail () { // 售后详情
       afterSaleDetail(this.$route.query.sn).then(res => {
@@ -174,9 +200,23 @@ export default {
     },
     getLog () { // 获取售后日志
       afterSaleLog(this.$route.query.sn).then(res => {
-        this.logList = res.result;
+        this.logList = (res.result || []).slice().sort((a, b) => {
+          return new Date(a.createTime).getTime() - new Date(b.createTime).getTime()
+        })
       })
     },
+    logDesc (log) {
+      const operator = log.operatorName ? `操作人：${log.operatorName}` : ''
+      return [operator, log.createTime].filter(Boolean).join('  ')
+    },
+    shopPage (id) {
+      if (!id) return
+      const routeUrl = this.$router.resolve({
+        path: '/merchant',
+        query: { id }
+      })
+      window.open(routeUrl.href, '_blank')
+    },
     filterOrderStatus (status) { // 获取订单状态中文
       const ob = this.afterSaleStatusList.filter(e => { return e.status === status });
       if (ob.length) return ob[0].name
@@ -240,97 +280,235 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.order-detail {
+  color: #333;
+}
+
 .order-card {
-  padding: 10px;
-  padding-bottom: 10px;
-  margin-bottom: 10px;
-  border-bottom: 1px solid #e8eaec;
-  position: relative;
-  .global_color {
+  padding: 4px 0 16px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+
+  h3 {
+    margin: 0 0 12px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #333;
+    line-height: 1.4;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.status-card {
+  padding-top: 8px;
+}
+
+.status-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.status-text {
+  margin: 0;
+  color: $theme_color;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.status-sn {
+  margin: 6px 0 0;
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+
+  span {
+    margin-left: 16px;
+  }
+}
+
+.status-side {
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.operation-time {
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.status-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 10px;
+}
+
+.goods-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+  padding: 12px;
+  background: #fafafa;
+  border-radius: 8px;
+
+  img {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    border: 1px solid #f0f0f0;
+    background: #f5f5f5;
+    flex-shrink: 0;
+  }
+}
+
+.goods-info {
+  min-width: 0;
+}
+
+.goods-name {
+  color: #333;
+  font-size: 16px;
+  line-height: 22px;
+  word-break: break-all;
+}
+
+.store-line {
+  margin-top: 6px;
+  color: #666;
+  font-size: 14px;
+  line-height: 22px;
+
+  span {
+    margin: 0 4px;
+    color: #438cde;
+    cursor: pointer;
+
+    &:hover {
+      color: $theme_color;
+    }
+  }
+}
+
+.progress {
+  max-width: 640px;
+  margin: 4px 0 0;
+
+  :deep(.el-step.is-vertical) {
+    padding-bottom: 20px;
+  }
+
+  :deep(.el-step.is-vertical:last-child) {
+    padding-bottom: 0;
+  }
+
+  :deep(.el-step__head.is-finish) {
+    color: #c0c4cc;
+    border-color: #c0c4cc;
+  }
+
+  :deep(.el-step__title.is-finish),
+  :deep(.el-step__description.is-finish) {
+    color: #909399;
+    font-weight: 400;
+  }
+
+  :deep(.el-step__head.is-process) {
+    color: $theme_color;
+    border-color: $theme_color;
+  }
+
+  :deep(.el-step__title.is-process),
+  :deep(.el-step__description.is-process) {
     color: $theme_color;
   }
-  p {
-    color: #999;
-    margin: 3px;
+}
+
+.info-list {
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.info-row {
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr);
+  min-height: 44px;
+  border-top: 1px solid #f0f0f0;
+  font-size: 14px;
+  line-height: 22px;
+
+  &:first-child {
+    border-top: none;
   }
-  .order-meta {
+
+  span {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 16px;
+    padding: 10px 16px;
+    color: #171A26;
+  }
 
-    .order-meta-time {
-      flex-shrink: 0;
-      white-space: nowrap;
-    }
-  }
-  h3 {
-    font-weight: normal;
-    font-size: 16px;
-  }
-  &:last-child{
-    border: none;
+  .label {
+    background: #fafafa;
+    color: #666;
   }
 }
-.service-after {
-  border: 1px solid #eee;
+
+.image-list {
   display: flex;
-  height: 80px;
-  padding: 10px;
-  >div:nth-child(1) {
-    width: 400px;
-    font-size: 15px;
-    font-weight: bold;
-    text-align: center;
-    line-height: 60px;
-    span{color: $theme_color;}
-    border-right: 1px solid #eee;
-  }
-  >div:nth-child(2){
-    padding-left: 15px;
-  }
-  .service-after-goods {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+  flex-wrap: wrap;
+  gap: 12px;
 
-    img {
-      flex-shrink: 0;
-    }
-
-    span {
-      color: #999;
-    }
-  }
-}
-/** 售后进度条 */
-.progress {
-  margin: 15px 0;
-}
-table{
-  border-color: #eee;
-  width: 100%;
-  color: #999;
-  tr{
-    td:nth-child(1){
-      width: 200px;
-    }
-  }
-  td{
-    padding: 5px;
+  img {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border: 1px solid #f0f0f0;
+    border-radius: 6px;
+    cursor: pointer;
   }
 }
 
-:deep(.submit-logistics-btn) {
-  background-color: #ff9900 !important;
-  border-color: #ff9900 !important;
-  color: #fff !important;
+.op-btn {
+  min-width: 96px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid $theme_color;
+  border-radius: 4px;
+  background: $theme_color;
+  color: #fff;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 30px;
+  cursor: pointer;
 
-  &:hover,
-  &:focus {
-    background-color: #e68a00 !important;
-    border-color: #e68a00 !important;
-    color: #fff !important;
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.text-link {
+  border: none;
+  background: none;
+  padding: 0;
+  color: #171A26;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
   }
 }
 </style>
diff --git a/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue b/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
index 44da99c78..44aee7aec 100644
--- a/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="apply-after-sale">
-    <UserCenterLayout title="申请售后" :tabs="['申请售后']">
+    <UserCenterLayout>
     <el-table :data="goodsData" border>
       <el-table-column label="商品名称">
         <template #default="{ row }">
@@ -94,7 +94,7 @@
           <el-button type="primary" @click="apply">提交申请</el-button>
         </el-form-item>
       </el-form>
-      <el-dialog title="View Image" v-model="visible">
+      <el-dialog title="图片预览" v-model="visible">
         <img :src="previewImage" v-if="visible" style="width: 100%">
       </el-dialog>
     </div>
diff --git a/buyer/src/pages/home/orderCenter/Complain.vue b/buyer/src/pages/home/orderCenter/Complain.vue
index 37f852833..4300a93dc 100644
--- a/buyer/src/pages/home/orderCenter/Complain.vue
+++ b/buyer/src/pages/home/orderCenter/Complain.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div class="add-eval">
-    <UserCenterLayout title="商品投诉" :tabs="['商品投诉']">
+    <UserCenterLayout>
       <div class="title">
       <p>
         <span class="color999">订单号：</span><span>{{$route.query.sn}}</span>
@@ -55,7 +55,7 @@
         </div>
       </div>
     </div>
-    <el-dialog title="View Image" v-model="visible">
+    <el-dialog title="图片预览" v-model="visible">
         <img :src="previewImage" v-if="visible" style="width: 100%">
     </el-dialog>
     </UserCenterLayout>
diff --git a/buyer/src/pages/home/orderCenter/MyAddress.vue b/buyer/src/pages/home/orderCenter/MyAddress.vue
index f0be4f4e5..13225c294 100644
--- a/buyer/src/pages/home/orderCenter/MyAddress.vue
+++ b/buyer/src/pages/home/orderCenter/MyAddress.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper">
-    <UserCenterLayout title="收货地址" :tabs="['收货地址']" more-text="添加新地址" more-to="/home/addAddress">
+    <UserCenterLayout>
       <template #extra>
         <el-button type="primary" @click="add">添加新地址</el-button>
       </template>
diff --git a/buyer/src/pages/home/orderCenter/MyOrder.vue b/buyer/src/pages/home/orderCenter/MyOrder.vue
index 28571408e..232e3bf5e 100644
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@@ -4,7 +4,6 @@
 
     <UserCenterLayout
       v-if="!homePage"
-      title="我的订单"
       :tabs="changeWay"
       :active-tab="activeOrderTab"
       @tab-change="change"
@@ -13,6 +12,7 @@
         <div class="order-search">
           <el-input
             v-model="params.keywords"
+            size="large"
             @keyup.enter="getList"
             placeholder="输入订单号搜索"
           />
@@ -23,68 +23,67 @@
       <!-- 订单列表 -->
       <empty v-if="orderList.length === 0" />
       <div class="order-content" v-else>
+        <div class="order-cols">
+          <span>订单详情</span>
+          <span>金额</span>
+          <span>操作</span>
+        </div>
         <div
           class="order-list"
           v-for="(order, onderIndex) in orderList"
           :key="onderIndex"
         >
           <div class="order-header">
-            <div class="order-header-main">
-              <div class="order-status">{{ order.isAfterSale ? filterAfterSaleStatus(order.serviceStatus) : filterOrderStatus(order.orderStatus) }}</div>
-              <div class="order-sn" v-if="order.isAfterSale">
-                售后单号：{{ order.serviceSn }}<span>{{ order.createTime }}</span>
-              </div>
-              <div class="order-sn" v-else>
-                订单号：{{ order.sn }}<span>{{ order.createTime }}</span>
-              </div>
+            <div class="order-sn" v-if="order.isAfterSale">
+              {{ order.createTime }}<span>售后单号 {{ order.serviceSn }}</span><span class="order-store" @click="shopPage(order.storeId)">{{ order.storeName }}</span>
             </div>
-            <div class="order-header-side">
-              <el-button v-if="!order.isAfterSale && order.orderStatus === 'COMPLETED'" class="del-btn" link @click="delOrder(order.sn)">
-                <el-icon><Delete /></el-icon>
-              </el-button>
-              <span class="order-amount">{{ $filters.unitPrice(order.flowPrice, "￥") }}</span>
+            <div class="order-sn" v-else>
+              {{ order.createTime }}<span>订单号 {{ order.sn }}</span><span class="order-store" @click="shopPage(order.storeId)">{{ order.storeName }}</span>
             </div>
+            <div class="order-status">{{ order.isAfterSale ? filterAfterSaleStatus(order.serviceStatus) : filterOrderStatus(order.orderStatus) }}</div>
           </div>
           <div class="order-body">
-            <div class="goods-list">
+            <div class="col-detail">
               <div
                 v-for="(goods, goodsIndex) in order.orderItems"
                 :key="goodsIndex"
                 class="goods-item"
               >
-                <img
-                  @click="goodsDetail(goods.skuId, goods.goodsId)"
-                  class="hover-color"
-                  :src="goods.image"
-                  alt=""
-                />
+                <div class="goods-thumb">
+                  <img
+                    @click="goodsDetail(goods.skuId, goods.goodsId)"
+                    class="hover-color"
+                    :src="goods.image"
+                    alt=""
+                    @error="$event.target.style.visibility = 'hidden'"
+                  />
+                </div>
                 <div class="goods-info">
                   <div class="goods-name hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
-                  <div class="goods-meta">
-                    <span class="global_color">{{ $filters.unitPrice(goods.goodsPrice, "￥") }}</span>
-                    <span class="goods-num">x {{ goods.num }}</span>
+                  <div class="goods-num">共{{ goods.num }}件</div>
+                  <div class="goods-extra">
                     <span v-if="refundPriceList(goods.isRefund)" class="refund-tag">{{ refundPriceList(goods.isRefund) }}</span>
-                  </div>
-                  <div class="goods-ops" v-if="goods.commentStatus == 'UNFINISHED' || goods.complainStatus == 'NO_APPLY'">
-                    <el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success">评价</el-button>
-                    <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="danger" size="small">投诉</el-button>
+                    <button v-if="goods.complainStatus == 'NO_APPLY'" type="button" class="sub-btn" @click="complain(order.sn, goodsIndex)">投诉</button>
                   </div>
                 </div>
               </div>
+              <button v-if="canAfterSale(order)" type="button" class="sub-btn" @click="applyAfterSale(order.orderItems)">申请售后</button>
             </div>
-            <div class="store-name">
-              <span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
+            <div class="col-amount">
+              <div class="order-amount">{{ $filters.unitPrice(order.flowPrice, "￥") }}</div>
+              <div v-if="paymentLabel(order)" class="pay-method">{{ paymentLabel(order) }}</div>
             </div>
-            <div class="order-actions" v-if="order.isAfterSale">
-              <el-button @click="goAfterSaleDetail(order.serviceSn)" type="warning" size="small">售后详情</el-button>
-            </div>
-            <div class="order-actions" v-else>
-              <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" type="primary" v-if="order.allowOperationVO.rog">确认收货</el-button>
-              <el-button v-if="order.orderType !== 'E_COUPON' && order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
-                      @click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
+            <div class="col-ops">
+              <template v-if="order.isAfterSale">
+                <button type="button" class="text-link" @click="goAfterSaleDetail(order.serviceSn)">售后详情</button>
+              </template>
+              <template v-else>
+                <button v-if="order.allowOperationVO && order.allowOperationVO.pay" type="button" class="op-btn" @click="goPay(order.sn)">去支付</button>
+                <button v-if="order.allowOperationVO && order.allowOperationVO.rog" type="button" class="op-btn" @click="received(order.sn)">确认收货</button>
+                <button type="button" class="text-link" @click="orderDetail(order.sn)">订单详情</button>
+                <button v-if="order.allowOperationVO && order.allowOperationVO.cancel" type="button" class="text-link" @click="handleCancelOrder(order.sn)">取消订单</button>
+                <button v-if="order.orderStatus === 'COMPLETED'" type="button" class="text-link" @click="delOrder(order.sn)">删除订单</button>
+              </template>
             </div>
           </div>
         </div>
@@ -94,7 +93,7 @@
       <!-- 分页 -->
       <div class="page-size">
         <el-pagination v-model:current-page="params.pageNumber" v-model:page-size="params.pageSize"
-          :total="total" @current-change="changePageNum"
+          :total="total" :page-sizes="[20, 50, 100]" @current-change="changePageNum"
           @size-change="changePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
       </div>
     </UserCenterLayout>
@@ -102,68 +101,67 @@
     <!-- 个人中心首页订单列表 -->
     <empty v-if="homePage && orderList.length === 0" />
     <div class="order-content" v-else-if="homePage">
+      <div class="order-cols">
+        <span>订单详情</span>
+        <span>金额</span>
+        <span>操作</span>
+      </div>
       <div
         class="order-list"
         v-for="(order, onderIndex) in orderList"
         :key="onderIndex"
       >
         <div class="order-header">
-          <div class="order-header-main">
-            <div class="order-status">{{ order.isAfterSale ? filterAfterSaleStatus(order.serviceStatus) : filterOrderStatus(order.orderStatus) }}</div>
-            <div class="order-sn" v-if="order.isAfterSale">
-              售后单号：{{ order.serviceSn }}<span>{{ order.createTime }}</span>
-            </div>
-            <div class="order-sn" v-else>
-              订单号：{{ order.sn }}<span>{{ order.createTime }}</span>
-            </div>
+          <div class="order-sn" v-if="order.isAfterSale">
+            {{ order.createTime }}<span>售后单号 {{ order.serviceSn }}</span><span class="order-store" @click="shopPage(order.storeId)">{{ order.storeName }}</span>
           </div>
-          <div class="order-header-side">
-            <el-button v-if="!order.isAfterSale && order.orderStatus === 'COMPLETED'" class="del-btn" link @click="delOrder(order.sn)">
-              <el-icon><Delete /></el-icon>
-            </el-button>
-            <span class="order-amount">{{ $filters.unitPrice(order.flowPrice, "￥") }}</span>
+          <div class="order-sn" v-else>
+            {{ order.createTime }}<span>订单号 {{ order.sn }}</span><span class="order-store" @click="shopPage(order.storeId)">{{ order.storeName }}</span>
           </div>
+          <div class="order-status">{{ order.isAfterSale ? filterAfterSaleStatus(order.serviceStatus) : filterOrderStatus(order.orderStatus) }}</div>
         </div>
         <div class="order-body">
-          <div class="goods-list">
+          <div class="col-detail">
             <div
               v-for="(goods, goodsIndex) in order.orderItems"
               :key="goodsIndex"
               class="goods-item"
             >
-              <img
-                @click="goodsDetail(goods.skuId, goods.goodsId)"
-                class="hover-color"
-                :src="goods.image"
-                alt=""
-              />
+              <div class="goods-thumb">
+                <img
+                  @click="goodsDetail(goods.skuId, goods.goodsId)"
+                  class="hover-color"
+                  :src="goods.image"
+                  alt=""
+                  @error="$event.target.style.visibility = 'hidden'"
+                />
+              </div>
               <div class="goods-info">
                 <div class="goods-name hover-color" @click="goodsDetail(goods.skuId, goods.goodsId)">{{ goods.name }}</div>
-                <div class="goods-meta">
-                  <span class="global_color">{{ $filters.unitPrice(goods.goodsPrice, "￥") }}</span>
-                  <span class="goods-num">x {{ goods.num }}</span>
+                <div class="goods-num">共{{ goods.num }}件</div>
+                <div class="goods-extra">
                   <span v-if="refundPriceList(goods.isRefund)" class="refund-tag">{{ refundPriceList(goods.isRefund) }}</span>
-                </div>
-                <div class="goods-ops" v-if="goods.commentStatus == 'UNFINISHED' || goods.complainStatus == 'NO_APPLY'">
-                  <el-button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.sn, goodsIndex)" size="small" type="success">评价</el-button>
-                  <el-button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.sn, goodsIndex)" type="danger" size="small">投诉</el-button>
+                  <button v-if="goods.complainStatus == 'NO_APPLY'" type="button" class="sub-btn" @click="complain(order.sn, goodsIndex)">投诉</button>
                 </div>
               </div>
             </div>
+            <button v-if="canAfterSale(order)" type="button" class="sub-btn" @click="applyAfterSale(order.orderItems)">申请售后</button>
           </div>
-          <div class="store-name">
-            <span @click="shopPage(order.storeId)">{{ order.storeName }}</span>
+          <div class="col-amount">
+            <div class="order-amount">{{ $filters.unitPrice(order.flowPrice, "￥") }}</div>
+            <div v-if="paymentLabel(order)" class="pay-method">{{ paymentLabel(order) }}</div>
           </div>
-          <div class="order-actions" v-if="order.isAfterSale">
-            <el-button @click="goAfterSaleDetail(order.serviceSn)" type="warning" size="small">售后详情</el-button>
-          </div>
-          <div class="order-actions" v-else>
-            <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" type="primary" v-if="order.allowOperationVO.rog">确认收货</el-button>
-            <el-button v-if="order.orderType !== 'E_COUPON' && order.groupAfterSaleStatus && (order.groupAfterSaleStatus.includes('NOT_APPLIED')|| order.groupAfterSaleStatus.includes('PART_AFTER_SALE'))"
-                    @click="applyAfterSale(order.orderItems)" size="small">申请售后</el-button>
+          <div class="col-ops">
+            <template v-if="order.isAfterSale">
+              <button type="button" class="text-link" @click="goAfterSaleDetail(order.serviceSn)">售后详情</button>
+            </template>
+            <template v-else>
+              <button v-if="order.allowOperationVO && order.allowOperationVO.pay" type="button" class="op-btn" @click="goPay(order.sn)">去支付</button>
+              <button v-if="order.allowOperationVO && order.allowOperationVO.rog" type="button" class="op-btn" @click="received(order.sn)">确认收货</button>
+              <button type="button" class="text-link" @click="orderDetail(order.sn)">订单详情</button>
+              <button v-if="order.allowOperationVO && order.allowOperationVO.cancel" type="button" class="text-link" @click="handleCancelOrder(order.sn)">取消订单</button>
+              <button v-if="order.orderStatus === 'COMPLETED'" type="button" class="text-link" @click="delOrder(order.sn)">删除订单</button>
+            </template>
           </div>
         </div>
       </div>
@@ -198,12 +196,10 @@
 <script>
 import { Message, Modal } from "@/utils/message";
 import { getOrderList, sureReceived, cancelOrder, delOrder } from '@/api/order';
-import { afterSaleReason, afterSaleList } from '@/api/member';
+import { afterSaleReason } from '@/api/member';
 import { orderStatusList, afterSaleStatusList } from '../enumeration.js'
-import { Delete } from '@element-plus/icons-vue'
 export default {
   name: 'MyOrder',
-  components: { Delete },
   props: {
     homePage: { // 判断是否个人中心首页展示内容
       type: Boolean,
@@ -215,7 +211,7 @@ export default {
       orderList: [], // 订单列表
       params: { // 请求参数
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 20,
         // orderStatus: 'ALL',
         keywords: '',
         tag: 'ALL'
@@ -227,7 +223,7 @@ export default {
       // 状态数组
       orderStatusList,
       afterSaleStatusList,
-      changeWay: ['全部', '待支付', '待发货', '待收货/使用', '评价', '售后'],
+      changeWay: ['全部', '待支付', '待发货', '待收货/使用'],
       activeOrderTab: 0,
       total: 0, // 数据总数
       spinShow: false, // 加载状态
@@ -270,11 +266,8 @@ export default {
       this.activeOrderTab = index;
       this.params.pageNumber = 1;
       delete this.params.commentStatus;
-      const tags = ['ALL', 'WAIT_PAY', 'WAIT_SHIP', 'WAIT_USE', 'ALL', 'AFTER_SALE'];
+      const tags = ['ALL', 'WAIT_PAY', 'WAIT_SHIP', 'WAIT_USE'];
       this.params.tag = tags[index] || 'ALL';
-      if (index === 4) {
-        this.params.commentStatus = 'UNFINISHED';
-      }
       this.getList()
     },
     // 跳转店铺首页
@@ -320,9 +313,6 @@ export default {
     afterSaleSelect (item) {
       this.$router.push({name: 'ApplyAfterSale', query: {sn: item.sn}})
     },
-    comment (sn, goodsIndex) { // 评价
-      this.$router.push({path: '/home/addEval', query: {sn, index: goodsIndex}})
-    },
     complain (sn, goodsIndex) { // 投诉
       this.$router.push({name: 'Complain', query: {sn, index: goodsIndex}})
     },
@@ -343,29 +333,10 @@ export default {
     },
     getList () {
       this.spinShow = true;
-      if (this.activeOrderTab === 5) {
-        afterSaleList({
-          pageNumber: this.params.pageNumber,
-          pageSize: this.params.pageSize,
-          keywords: this.params.keywords,
-          sort: 'createTime',
-          order: 'desc',
-        }).then(res => {
-          this.spinShow = false
-          if (res.success) {
-            this.orderList = (res.result.records || []).map(item => this.mapAfterSaleOrder(item));
-            this.total = res.result.total;
-          }
-        });
-        return;
-      }
       let params = JSON.parse(JSON.stringify(this.params))
       if (params.orderStatus === 'ALL') {
         delete params.orderStatus
       }
-      if (params.tag === 'AFTER_SALE') {
-        delete params.tag
-      }
       getOrderList(params).then(res => {
         this.spinShow = false
         if (res.success) {
@@ -431,6 +402,27 @@ export default {
     filterAfterSaleStatus (status) {
       const ob = this.afterSaleStatusList.filter(e => e.status === status);
       return ob && ob[0] ? ob[0].name : status
+    },
+    canAfterSale (order) {
+      if (order.isAfterSale || order.orderType === 'E_COUPON' || !order.groupAfterSaleStatus) {
+        return false
+      }
+      return order.groupAfterSaleStatus.includes('NOT_APPLIED') || order.groupAfterSaleStatus.includes('PART_AFTER_SALE')
+    },
+    paymentLabel (order) {
+      const map = {
+        WECHAT: '微信支付',
+        ALIPAY: '支付宝',
+        WALLET: '余额支付',
+        BANK_TRANSFER: '线下转账'
+      }
+      if (order.paymentMethod && map[order.paymentMethod]) {
+        return map[order.paymentMethod]
+      }
+      if (order.payStatus === 'UNPAID' || order.orderStatus === 'UNPAID') {
+        return '待支付'
+      }
+      return ''
     }
   }
 };
@@ -454,6 +446,8 @@ export default {
   }
 }
 .order-content {
+  --order-cols: minmax(0, 1fr) 120px 120px;
+  --order-gap: 12px;
   padding-top: 14px;
 }
 .page-size {
@@ -466,6 +460,23 @@ export default {
   }
 }
 /** 订单列表 */
+.order-cols {
+  display: grid;
+  grid-template-columns: var(--order-cols);
+  column-gap: var(--order-gap);
+  align-items: center;
+  padding: 0 16px 10px;
+  color: #999;
+  font-size: 13px;
+
+  span:first-child {
+    padding-left: 72px;
+  }
+
+  span:nth-child(n + 2) {
+    text-align: center;
+  }
+}
 .order-list {
   border: 1px solid #eee;
   border-radius: 8px;
@@ -473,120 +484,121 @@ export default {
   background: #fff;
   overflow: hidden;
 
-  &:hover {
-    .del-btn { visibility: visible; }
-  }
-
-  .del-btn {
-    visibility: hidden;
-    padding: 0;
-    height: auto;
-    color: #999;
-  }
-
   .order-header {
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--order-cols);
+    column-gap: var(--order-gap);
     align-items: center;
-    justify-content: space-between;
-    gap: 16px;
-    padding: 12px 16px;
-    background: #fafafa;
+    padding: 10px 16px;
+    background: #f7f7f7;
     border-bottom: 1px solid #f0f0f0;
   }
 
-  .order-header-main {
-    min-width: 0;
-  }
-
-  .order-status {
-    font-size: 14px;
-    font-weight: 600;
-    color: #333;
-    line-height: 1.4;
-  }
-
   .order-sn {
-    margin-top: 4px;
-    font-size: 12px;
-    color: #999;
-    line-height: 1.4;
+    grid-column: 1 / 3;
+    display: flex;
+    align-items: center;
+    min-width: 0;
+    font-size: 14px;
+    color: #171A26;
+    line-height: 1.5;
 
     span {
       margin-left: 16px;
     }
   }
 
-  .order-header-side {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    gap: 8px;
+  .order-store {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #438cde;
+    cursor: pointer;
+
+    &:hover {
+      color: $theme_color;
+    }
   }
 
-  .order-amount {
-    min-width: 88px;
-    text-align: right;
-    font-size: 16px;
-    font-weight: 600;
-    color: $theme_color;
+  .order-status {
+    grid-column: 3;
+    min-width: 0;
+    text-align: center;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.4;
   }
 
   .order-body {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 120px 100px;
-    gap: 12px;
-    align-items: start;
+    grid-template-columns: var(--order-cols);
+    column-gap: var(--order-gap);
+    align-items: center;
     padding: 14px 16px;
-    color: #999;
   }
 
   .goods-item {
-    display: flex;
-    align-items: flex-start;
+    display: grid;
+    grid-template-columns: 60px minmax(0, 1fr);
+    column-gap: 12px;
+    align-items: start;
+    width: 100%;
     min-width: 0;
 
     & + .goods-item {
       margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid #f5f5f5;
     }
+  }
+
+  .goods-thumb {
+    width: 60px;
+    height: 60px;
+    border: 1px solid #f0f0f0;
+    overflow: hidden;
+    background: #f5f5f5;
 
     img {
-      width: 72px;
-      height: 72px;
-      margin-right: 12px;
-      border-radius: 6px;
+      width: 100%;
+      height: 100%;
       object-fit: cover;
-      flex-shrink: 0;
-      background: #f5f5f5;
+      display: block;
     }
   }
 
   .goods-info {
-    flex: 1;
     min-width: 0;
+    overflow: hidden;
   }
 
   .goods-name {
+    max-width: 100%;
     color: #333;
-    font-size: 14px;
-    line-height: 1.4;
+    font-size: 16px;
+    line-height: 22px;
+    max-height: 44px;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
+    word-break: break-all;
   }
 
-  .goods-meta {
+  .goods-num {
+    margin-top: 6px;
+    color: #999;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+  .goods-extra {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 8px;
-    margin-top: 8px;
-    font-size: 13px;
-    line-height: 1.4;
-  }
-
-  .goods-num {
-    color: #666;
+    margin-top: 6px;
   }
 
   .refund-tag {
@@ -594,47 +606,88 @@ export default {
     border-radius: 4px;
     background: #fff7e8;
     color: #ff9900;
-    font-size: 12px;
-    line-height: 20px;
+    font-size: 14px;
+    line-height: 22px;
   }
 
-  .goods-ops {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
+  .sub-btn {
+    height: 28px;
     margin-top: 8px;
+    padding: 0 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #fff;
+    color: #666;
+    font-size: 14px;
+    line-height: 26px;
+    cursor: pointer;
 
-    .el-button {
-      margin: 0;
+    &:hover {
+      border-color: $theme_color;
+      color: $theme_color;
     }
   }
 
-  .store-name {
-    padding-top: 4px;
+  .goods-extra .sub-btn {
+    margin-top: 0;
+  }
+
+  .col-amount,
+  .col-ops {
     text-align: center;
-    font-size: 13px;
-    line-height: 1.4;
-    word-break: break-all;
-
-    span {
-      color: #438cde;
-      cursor: pointer;
-
-      &:hover {
-        color: $theme_color;
-      }
-    }
   }
 
-  .order-actions {
+  .order-amount {
+    color: #333;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  .pay-method {
+    margin-top: 4px;
+    color: #999;
+    font-size: 14px;
+    line-height: 1.4;
+  }
+
+  .col-ops {
     display: flex;
     flex-direction: column;
-    align-items: stretch;
+    align-items: center;
     gap: 8px;
+  }
 
-    .el-button {
-      margin: 0;
-      width: 100%;
+  .op-btn {
+    min-width: 96px;
+    height: 32px;
+    padding: 0 12px;
+    border: 1px solid $theme_color;
+    border-radius: 4px;
+    background: #fff;
+    color: #171A26;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 30px;
+    cursor: pointer;
+
+    &:hover {
+      background: #fff5f4;
+    }
+  }
+
+  .text-link {
+    border: none;
+    background: none;
+    padding: 0;
+    color: #171A26;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 22px;
+    cursor: pointer;
+
+    &:hover {
+      color: $theme_color;
     }
   }
 }
diff --git a/buyer/src/pages/home/orderCenter/OrderDetail.vue b/buyer/src/pages/home/orderCenter/OrderDetail.vue
index b66e95360..9a0cd5725 100644
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -1,56 +1,66 @@
 <template>
   <div class="order-detail" v-if="order.order">
-    <UserCenterLayout title="订单详情" :tabs="['订单详情']">
-    <el-card
-      class="mb_10"
-      shadow="never"
-      v-if="
-        order.allowOperationVO.pay ||
-        order.allowOperationVO.rog ||
-        order.allowOperationVO.cancel
-      "
-    >
-      <el-button
-        type="success"
-        @click="goPay(order.order.sn)"
-        size="small"
-        v-if="order.allowOperationVO.pay"
-        >去支付</el-button>
-      <el-button
-        type="primary"
-        @click="received(order.order.sn)"
-        size="small"
-        v-if="order.allowOperationVO.rog"
-        >确认收货</el-button>
-      <el-button
-        type="danger"
-        @click="handleCancelOrder(order.order.sn)"
-        v-if="order.allowOperationVO.cancel"
-        size="small"
-        >取消订单</el-button>
-      <el-button v-if="order.allowOperationVO.showLogistics || orderPackage.length > 0 || logistics" type="info" @click="logisticsList()" size="small">查看物流</el-button>
-    </el-card>
-    <p class="verificationCode" v-if="order.order.verificationCode && !isECouponOrder">
-      核验码：<span>{{ order.order.verificationCode }}</span>
-    </p>
-    <div class="order-card">
-      <p class="global_color fontsize_18">{{ order.orderStatusValue }}</p>
-      <p>订单号：{{ order.order.sn }}</p>
-      <div style="color: #999" class="operation-time">
-        操作时间：{{ order.order.updateTime || order.order.createTime }}
+    <UserCenterLayout>
+    <div class="order-card status-card">
+      <div class="status-head">
+        <div class="status-main">
+          <p class="status-text">{{ order.orderStatusValue }}</p>
+          <p class="status-sn">订单号：{{ order.order.sn }}</p>
+        </div>
+        <div class="status-side">
+          <div class="operation-time">
+            操作时间：{{ order.order.updateTime || order.order.createTime }}
+          </div>
+          <div
+            class="status-actions"
+            v-if="
+              order.allowOperationVO.pay ||
+              order.allowOperationVO.rog ||
+              order.allowOperationVO.cancel ||
+              order.allowOperationVO.showLogistics ||
+              orderPackage.length > 0 ||
+              logistics
+            "
+          >
+            <el-button
+              type="success"
+              @click="goPay(order.order.sn)"
+              size="small"
+              v-if="order.allowOperationVO.pay"
+              >去支付</el-button>
+            <el-button
+              type="primary"
+              @click="received(order.order.sn)"
+              size="small"
+              v-if="order.allowOperationVO.rog"
+              >确认收货</el-button>
+            <el-button
+              type="danger"
+              @click="handleCancelOrder(order.order.sn)"
+              v-if="order.allowOperationVO.cancel"
+              size="small"
+              >取消订单</el-button>
+            <el-button v-if="order.allowOperationVO.showLogistics || orderPackage.length > 0 || logistics" type="info" @click="logisticsList()" size="small">查看物流</el-button>
+          </div>
+        </div>
       </div>
       <el-steps
+        v-if="progressList.length"
         class="progress"
-        :current="progressList.length"
+        :active="progressList.length - 1"
         direction="vertical"
       >
-        <el-step           :title="progress.message"
-          :content="progress.createTime"
+        <el-step
+          :title="progress.message"
+          :description="progress.createTime"
           v-for="(progress, index) in progressList"
           :key="index"
         ></el-step>
       </el-steps>
     </div>
+    <p class="verificationCode" v-if="order.order.verificationCode && !isECouponOrder">
+      核验码：<span>{{ order.order.verificationCode }}</span>
+    </p>
     <div class="order-card" v-if="order.order.deliveryMethod === 'LOGISTICS' && !isNonPhysicalOrder">
       <h3>收货人信息</h3>
       <p>收货人：{{ order.order.consigneeName }}</p>
@@ -191,28 +201,26 @@
       <table>
         <thead>
           <tr>
-            <th width="30%">商品</th>
-            <th width="15%">货号</th>
+            <th width="28%">商品</th>
+            <th width="16%">货号</th>
             <th width="10%">单价</th>
-            <th width="5%">数量</th>
-            <th width="10%" v-if="!isECouponOrder">退款状态</th>
-            <th width="10%" v-if="!isECouponOrder">实际退款金额</th>
+            <th width="8%">数量</th>
             <th width="10%">小计</th>
-            <th width="10%">操作</th>
+            <th width="8%">操作</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="(goods, goodsIndex) in order.orderItems" :key="goodsIndex">
             <td>
-              <img
-                @click="goodsDetail(goods.skuId, goods.goodsId)"
-                :src="goods.image"
-                alt=""
-              />
-              <div>
+              <div class="goods-cell">
+                <img
+                  @click="goodsDetail(goods.skuId, goods.goodsId)"
+                  :src="goods.image"
+                  alt=""
+                />
                 <p
                   @click="goodsDetail(goods.skuId, goods.goodsId)"
-                  class="hover-color"
+                  class="hover-color goods-name"
                 >
                   {{ goods.goodsName }}
                 </p>
@@ -221,23 +229,19 @@
             <td>{{ goods.id }}</td>
             <td>{{ $filters.unitPrice(goods.goodsPrice, "￥") }}</td>
             <td>{{ goods.num }}</td>
-            <td v-if="!isECouponOrder">{{refundPriceList(goods.isRefund)}}</td>
-            <td v-if="!isECouponOrder">{{ $filters.unitPrice(goods.refundPrice, "￥") }}</td>
             <td>{{ $filters.unitPrice((goods.goodsPrice * goods.num), "￥") }}</td>
             <td class="order-item-actions">
-              <el-button
+              <button
                 v-if="goods.commentStatus == 'UNFINISHED'"
+                type="button"
+                class="comment-text"
                 @click="comment(order.order.sn, goodsIndex)"
-                size="small"
-                type="success"
-                class="order-item-action-btn fontsize_12 mb_5"
-                >评价</el-button
-              >
+              >评价</button>
               <el-button
                 v-if="goods.complainStatus == 'NO_APPLY'"
                 @click="complain(order.order.sn, goodsIndex)"
                 type="danger"
-                class="order-item-action-btn fontsize_12 mb_5"
+                class="order-item-action-btn mb_5"
                 size="small"
                 >投诉</el-button
               >
@@ -575,21 +579,6 @@ export default {
       }
       window.open(invoiceAddress, "_blank");
     },
-    // 退款状态枚举
-    refundPriceList(status) {
-      switch (status) {
-      case 'ALL_REFUND':
-        return "全部退款";
-      case 'PART_REFUND':
-        return "部分退款";
-      case 'NO_REFUND':
-        return "未退款";
-      case 'REFUNDING':
-        return "退款中";
-      default:
-          return "未退款";
-      }
-    },
     goodsDetail(skuId, goodsId) {
       // 跳转商品详情
       let routeUrl = this.$router.resolve({
@@ -621,7 +610,9 @@ export default {
               this.order["receipt"] = receiptRes.result;
             }
           }
-          this.progressList = res.result.orderLogs;
+          this.progressList = (res.result.orderLogs || []).slice().sort((a, b) => {
+            return new Date(a.createTime).getTime() - new Date(b.createTime).getTime();
+          });
           if (this.order.order.deliveryMethod === 'LOGISTICS') {
             this.getOrderPackage(this.order.order.sn);
           }
@@ -727,109 +718,237 @@ export default {
 .mb_5 {
   margin-bottom: 5px;
 }
+.order-detail {
+  color: #333;
+}
+
 .order-card {
-  padding: 10px;
-  padding-bottom: 10px;
-  margin-bottom: 10px;
-  border-bottom: 1px solid #e8eaec;
-  position: relative;
-  .global_color {
-    color: $theme_color;
-  }
-  p {
-    color: #999;
-    margin: 3px;
-    margin-left: 5px;
-  }
+  padding: 4px 0 16px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+
   h3 {
-    font-weight: normal;
-    font-size: 16px;
+    margin: 0 0 12px;
+    font-size: 15px;
+    font-weight: 600;
+    color: #333;
+    line-height: 1.4;
   }
-  .operation-time {
-    position: absolute;
-    right: 20px;
-    top: 20px;
+
+  p {
+    margin: 0;
+    padding: 4px 0;
+    color: #666;
+    line-height: 22px;
   }
 }
-/** 店铺名称 */
+
+.status-card {
+  padding-top: 8px;
+}
+
+.status-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.status-text {
+  color: $theme_color;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.status-sn {
+  margin-top: 6px;
+  color: #666;
+}
+
+.status-side {
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.operation-time {
+  color: #999;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+.status-actions {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+
+  .el-button {
+    margin: 0;
+  }
+}
+
+.progress {
+  max-width: 640px;
+  margin: 20px 0 0;
+
+  :deep(.el-step.is-vertical) {
+    padding-bottom: 20px;
+  }
+
+  :deep(.el-step.is-vertical:last-child) {
+    padding-bottom: 0;
+  }
+
+  :deep(.el-step__head.is-finish) {
+    color: #c0c4cc;
+    border-color: #c0c4cc;
+  }
+
+  :deep(.el-step__title.is-finish),
+  :deep(.el-step__description.is-finish) {
+    color: #909399;
+    font-weight: 400;
+  }
+
+  :deep(.el-step__head.is-process) {
+    color: $theme_color;
+    border-color: $theme_color;
+  }
+
+  :deep(.el-step__title.is-process),
+  :deep(.el-step__description.is-process) {
+    color: $theme_color;
+  }
+}
+
+.goods {
+  padding-top: 8px;
+}
+
 .shop-name {
-  margin: 15px 0;
+  margin: 8px 0 12px;
+  font-size: 14px;
+  font-weight: 600;
+
   span {
     color: #438cde;
     cursor: pointer;
-    &:hover {
-      color: $theme_color;
-    }
-  }
-  .el-icon {
-    color: #ff8f23;
-    cursor: pointer;
+
     &:hover {
       color: $theme_color;
     }
   }
 }
-/** 商品列表 */
+
 table {
-  border: 1px solid #ddd;
-  color: #999;
+  border: 1px solid #eee;
+  color: #666;
   border-collapse: collapse;
   width: 100%;
+
   tr {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid #eee;
   }
+
   thead > tr {
     height: 40px;
-    background: #eee;
+    background: #fafafa;
   }
+
   th {
-    font-size: 12px;
-    font-weight: normal;
+    padding: 0 8px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #666;
   }
+
   td {
-    padding: 5px;
+    padding: 12px 8px;
     text-align: center;
+    vertical-align: middle;
+
     &:first-child {
       text-align: left;
-      display: flex;
-      img {
-        width: 70px;
-        height: 70px;
-        margin-right: 10px;
-        margin-left: 10px;
-        cursor: pointer;
-      }
-    }
-    &:last-child {
-      color: $theme_color;
     }
   }
 }
 
+.goods-cell {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+
+  img {
+    width: 64px;
+    height: 64px;
+    border-radius: 6px;
+    object-fit: cover;
+    flex-shrink: 0;
+    background: #f5f5f5;
+    cursor: pointer;
+  }
+}
+
+.goods-name {
+  min-width: 0;
+  color: #333;
+  line-height: 20px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-word;
+  cursor: pointer;
+}
+
 .order-item-actions {
   vertical-align: middle;
 
+  .comment-text {
+    display: block;
+    margin: 0 auto 6px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: $theme_color;
+    font-size: 14px;
+    line-height: 22px;
+    cursor: pointer;
+  }
+
   .order-item-action-btn {
     display: block;
-    margin: 0 auto 5px;
+    margin: 0 auto 6px;
     min-width: 88px;
   }
 }
-/** 订单价格 */
+
 .order-price {
-  text-align: right;
-  margin-top: 30px;
-  font-size: 16px;
-  color: #999;
-  > div > span:nth-child(2) {
-    width: 130px;
-    text-align: right;
-    display: inline-block;
-    margin-top: 10px;
+  margin-top: 16px;
+  padding-top: 8px;
+  font-size: 14px;
+  color: #666;
+
+  > div {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    line-height: 28px;
   }
+
+  > div > span:nth-child(2) {
+    width: 140px;
+    margin-top: 0;
+    text-align: right;
+    color: #333;
+  }
+
   .actrual-price {
     color: $theme_color;
-    font-weight: bold;
+    font-weight: 600;
     font-size: 20px;
   }
 }
@@ -875,11 +994,6 @@ table {
     display: none;
   }
 }
-/** 订单进度条 */
-.progress {
-  margin: 15px 0;
-}
-
 .layui-layer-wrap {
   dl {
     border-top: solid 1px #f5f5f5;
diff --git a/buyer/src/pages/home/userCenter/Coupons.vue b/buyer/src/pages/home/userCenter/Coupons.vue
index 111e70e83..331d0bfef 100644
--- a/buyer/src/pages/home/userCenter/Coupons.vue
+++ b/buyer/src/pages/home/userCenter/Coupons.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="wrapper">
     <UserCenterLayout
-      title="优惠券列表"
       :tabs="statusNameList"
       :active-tab="activeStatusIndex"
       @tab-change="change"
@@ -13,16 +12,16 @@
           <div>
             <span
               v-if="item.couponType === 'PRICE'"
-              class="fontsize_12 global_color"
+              class="global_color coupon-amount"
               >￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
             <span
               v-if="item.couponType === 'DISCOUNT'"
-              class="fontsize_12 global_color"
+              class="global_color coupon-amount"
               ><span class="price">{{ item.discount }}</span>折</span>
             <span class="describe">满{{ item.consumeThreshold }}元可用</span>
           </div>
           <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
-          <p>有效期：{{ item.endTime }}</p>
+          <p class="coupon-expire">有效期：{{ formatValidity(item) }}</p>
         </div>
         <b></b>
         <a
@@ -40,6 +39,7 @@
           v-model:current-page="params.pageNumber"
           v-model:page-size="params.pageSize"
           :total="total"
+          :page-sizes="[20, 50, 100]"
           @current-change="changePageNum"
           @size-change="changePageSize"
           layout="total, sizes, prev, pager, next, jumper"
@@ -67,7 +67,7 @@ export default {
       params: {
         // 请求参数
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 20,
         memberCouponStatus: "NEW",
       },
       total: 0, // 优惠券总数
@@ -84,13 +84,19 @@ export default {
     getList() {
       // 获取优惠券列表
       this.loading = true;
-      memberCouponList(this.params).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.list = res.result.records;
-          this.total = res.result.total;
-        }
-      });
+      memberCouponList(this.params)
+        .then((res) => {
+          this.loading = false;
+          if (res.success) {
+            this.list = res.result.records || [];
+            this.total = res.result.total || 0;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+          this.list = [];
+          this.total = 0;
+        });
     },
     // 切换优惠券状态
     change(index) {
@@ -139,6 +145,25 @@ export default {
       }
       return `${shop}${goods}可用`;
     },
+    formatValidity(item) {
+      const start = this.formatCouponTime(item && item.startTime);
+      const end = this.formatCouponTime(item && item.endTime);
+      if (start && end) return `${start} 至 ${end}`;
+      if (end) return `至 ${end}`;
+      if (start) return `${start} 起`;
+      return "长期有效";
+    },
+    formatCouponTime(value) {
+      if (!value) return "";
+      const text = String(value).trim();
+      if (/^\d{4}-\d{2}-\d{2}/.test(text)) {
+        return text.slice(0, 16);
+      }
+      const date = new Date(text);
+      if (Number.isNaN(date.getTime())) return text;
+      const pad = (n) => String(n).padStart(2, "0");
+      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+    },
   },
   mounted() {
     this.getList();
@@ -150,19 +175,31 @@ export default {
 @import "../../../assets/styles/coupon.scss";
 .coupon-item {
   overflow: hidden;
-  height: 145px;
+  height: auto;
+  min-height: 168px;
   margin-left: 0;
   $claim-width: 55px;
 
   .c-left {
     width: calc(100% - #{$claim-width});
     box-sizing: border-box;
-    padding: 20px;
+    padding: 16px 16px 14px;
+
+    .coupon-amount {
+      font-size: 14px;
+    }
+
+    .describe {
+      font-size: 14px;
+    }
 
     p {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      font-size: 14px;
+      overflow: visible;
+      text-overflow: unset;
+      white-space: normal;
+      word-break: break-all;
+      line-height: 20px;
     }
   }
 
diff --git a/buyer/src/pages/home/userCenter/MoneyManagement.vue b/buyer/src/pages/home/userCenter/MoneyManagement.vue
index 321acc206..8b6203cf1 100644
--- a/buyer/src/pages/home/userCenter/MoneyManagement.vue
+++ b/buyer/src/pages/home/userCenter/MoneyManagement.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="wrapper">
-    <UserCenterLayout title="资金管理" :tabs="['资金管理']">
+    <UserCenterLayout>
 
-    <div class="box">
-      <div class="mb_20 account-price">
-        <span class="subTips">账户余额：</span>
-        <span class="global_color mr_10" style="font-size:26px">￥{{ $filters.unitPrice(memberDeposit) }}</span>
-        <span class="subTips">冻结金额：</span>
-        <span class="">￥{{ $filters.unitPrice(frozenDeposit) }}</span>
+    <div class="wallet-summary">
+      <div class="wallet-stat">
+        <div class="label">账户余额</div>
+        <div class="value">￥{{ $filters.unitPrice(memberDeposit) }}</div>
       </div>
-      <div class="account-btns">
-        <el-button type="primary" @click="recharge">在线充值</el-button>
-        <el-button @click="withdrawalApply">申请提现</el-button>
+      <div class="wallet-stat">
+        <div class="label">冻结金额</div>
+        <div class="value is-muted">￥{{ $filters.unitPrice(frozenDeposit) }}</div>
       </div>
     </div>
+    <div class="account-btns">
+      <button type="button" class="op-btn" @click="recharge">在线充值</button>
+      <button type="button" class="ghost-btn" @click="withdrawalApply">申请提现</button>
+    </div>
     <el-dialog v-model="modal" width="530">
       <template #header><p>
         <el-icon><Edit /></el-icon>
@@ -87,103 +89,93 @@
         <el-button size="large" type="success" @click="withdrawal">提现</el-button>
       </div></template>
     </el-dialog>
-    <!-- 余额日志 -->
-    <el-tabs v-model="activeWalletTab" @tab-click="(tab) => tabPaneChange(tab.paneName)">
-      <el-tab-pane label="余额日志" name="log">
-        <el-table ref="logTable" :data="logColumnsData.records || []">
-          <el-table-column prop="createTime" label="时间" width="190" />
-          <el-table-column label="金额" width="180">
-            <template #default="{ row }">
-              <span v-if="row.money > 0" style="color: green">{{ $filters.unitPrice(row.money, '+ ¥') }}</span>
-              <span v-else-if="row.money < 0" style="color: red">{{ $filters.unitPrice(0 - row.money, '- ¥') }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="detail" label="变动日志" />
-        </el-table>
-        <!-- 分页 -->
-        <div class="page-size">
-          <el-pagination             v-model:current-page="walletForm.pageNumber"
-            v-model:page-size="walletForm.pageSize"
-            :page-sizes="[10, 20, 50]"
-            :total="logColumnsData.total"
-            @current-change="changePage"
-            @size-change="changePageSize"
-           layout="total, sizes, prev, pager, next, jumper"></el-pagination>
-        </div>
-      </el-tab-pane>
-      <!-- 充值记录 -->
-      <el-tab-pane label="充值记录" name="recharge">
-        <el-table ref="rechargeTable" :data="rechargeListData.records || []">
-          <el-table-column prop="createTime" label="充值时间" width="168" />
-          <el-table-column prop="rechargeSn" label="支付单号" width="200" />
-          <el-table-column label="充值金额">
-            <template #default="{ row }">
-              <span v-if="row.payStatus === 'PAID'" style="color: green">{{ $filters.unitPrice(row.rechargeMoney, '+ ¥') }}</span>
-              <span v-else>{{ $filters.unitPrice(row.rechargeMoney, '¥') }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="支付状态">
-            <template #default="{ row }">
-              <span v-if="row.payStatus === 'PAID'">已付款</span>
-              <span v-else-if="row.payStatus === 'UNPAID'">未付款</span>
-              <span v-else-if="row.payStatus === 'CANCEL'">已取消</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="支付方式">
-            <template #default="{ row }">
-              <span v-if="row.rechargeWay === 'ALIPAY'">支付宝</span>
-              <span v-else-if="row.rechargeWay === 'WECHAT'">微信</span>
-              <span v-else-if="row.rechargeWay === 'BANK_TRANSFER'">线下转账</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="payTime" label="支付时间" width="180" />
-        </el-table>
-        <!-- 分页 -->
-        <div class="page-size">
-          <el-pagination             v-model:current-page="rechargeForm.pageNumber"
-            v-model:page-size="rechargeForm.pageSize"
-            :page-sizes="[10, 20, 50]"
-            :total="rechargeListData.total"
-            @current-change="rechargeChangePage"
-            @size-change="rechargeChangePageSize"
-           layout="total, sizes, prev, pager, next, jumper"></el-pagination>
-        </div>
-      </el-tab-pane>
+    <div class="wallet-tabs">
+      <div class="wallet-tab" :class="{ active: activeWalletTab === 'log' }" @click="tabPaneChange('log')">余额日志</div>
+      <div class="wallet-tab" :class="{ active: activeWalletTab === 'recharge' }" @click="tabPaneChange('recharge')">充值记录</div>
+      <div class="wallet-tab" :class="{ active: activeWalletTab === 'withdrawApply' }" @click="tabPaneChange('withdrawApply')">提现记录</div>
+    </div>
 
-      <el-tab-pane label="提现记录" name="withdrawApply">
-        <el-table ref="withdrawTable" :data="withdrawApplyColumnsListData.records || []">
-          <el-table-column prop="createTime" label="申请时间" width="168" />
-          <el-table-column prop="sn" label="提现单号" width="200" />
-          <el-table-column label="提现金额" width="110">
-            <template #default="{ row }">
-              <span v-if="row.applyStatus === 'VIA_AUDITING'" style="color: green">{{ $filters.unitPrice(row.applyMoney, '+ ¥') }}</span>
-              <span v-else>{{ $filters.unitPrice(row.applyMoney, '¥') }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="提现状态" width="95">
-            <template #default="{ row }">
-              <span v-if="row.applyStatus === 'APPLY'">申请中</span>
-              <span v-else-if="row.applyStatus === 'VIA_AUDITING'">审核通过</span>
-              <span v-else-if="row.applyStatus === 'SUCCESS'">提现成功</span>
-              <span v-else-if="row.applyStatus === 'ERROR'">提现失败</span>
-              <span v-else>审核拒绝</span>
-            </template>
-          </el-table-column>
-          <el-table-column prop="inspectTime" label="审核时间" width="168" />
-          <el-table-column prop="inspectRemark" label="审核备注" show-overflow-tooltip />
-        </el-table>
-        <!-- 分页 -->
-        <div class="page-size">
-          <el-pagination             v-model:current-page="withdrawApplyForm.pageNumber"
-            v-model:page-size="withdrawApplyForm.pageSize"
-            :page-sizes="[10, 20, 50]"
-            :total="withdrawApplyColumnsListData.total"
-            @current-change="withdrawChangePage"
-            @size-change="withdrawChangePageSize"
-           layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+    <div v-show="activeWalletTab === 'log'">
+      <empty v-if="!(logColumnsData.records || []).length" />
+      <div v-else class="wallet-list log-list">
+        <div class="wallet-head">
+          <span>时间</span>
+          <span>金额</span>
+          <span>变动日志</span>
         </div>
-      </el-tab-pane>
-    </el-tabs>
+        <div class="wallet-row" v-for="(row, index) in logColumnsData.records" :key="row.id || index">
+          <div class="wallet-time">{{ row.createTime }}</div>
+          <div class="wallet-money" :class="row.money > 0 ? 'is-plus' : 'is-minus'">
+            <span v-if="row.money > 0">{{ $filters.unitPrice(row.money, '+ ¥') }}</span>
+            <span v-else-if="row.money < 0">{{ $filters.unitPrice(0 - row.money, '- ¥') }}</span>
+          </div>
+          <div class="wallet-detail">{{ row.detail }}</div>
+        </div>
+      </div>
+      <div class="page-size">
+        <el-pagination v-model:current-page="walletForm.pageNumber" v-model:page-size="walletForm.pageSize"
+          :page-sizes="[20, 50, 100]" :total="logColumnsData.total" @current-change="changePage"
+          @size-change="changePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      </div>
+    </div>
+
+    <div v-show="activeWalletTab === 'recharge'">
+      <empty v-if="!(rechargeListData.records || []).length" />
+      <div v-else class="wallet-list recharge-list">
+        <div class="wallet-head">
+          <span>充值时间</span>
+          <span>支付单号</span>
+          <span>充值金额</span>
+          <span>支付状态</span>
+          <span>支付方式</span>
+          <span>支付时间</span>
+        </div>
+        <div class="wallet-row" v-for="(row, index) in rechargeListData.records" :key="row.rechargeSn || index">
+          <div>{{ row.createTime }}</div>
+          <div class="wallet-detail">{{ row.rechargeSn }}</div>
+          <div class="wallet-money" :class="row.payStatus === 'PAID' ? 'is-plus' : ''">
+            {{ $filters.unitPrice(row.rechargeMoney, row.payStatus === 'PAID' ? '+ ¥' : '¥') }}
+          </div>
+          <div>{{ rechargeStatusText(row.payStatus) }}</div>
+          <div>{{ rechargeWayText(row.rechargeWay) }}</div>
+          <div>{{ row.payTime || '—' }}</div>
+        </div>
+      </div>
+      <div class="page-size">
+        <el-pagination v-model:current-page="rechargeForm.pageNumber" v-model:page-size="rechargeForm.pageSize"
+          :page-sizes="[20, 50, 100]" :total="rechargeListData.total" @current-change="rechargeChangePage"
+          @size-change="rechargeChangePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      </div>
+    </div>
+
+    <div v-show="activeWalletTab === 'withdrawApply'">
+      <empty v-if="!(withdrawApplyColumnsListData.records || []).length" />
+      <div v-else class="wallet-list withdraw-list">
+        <div class="wallet-head">
+          <span>申请时间</span>
+          <span>提现单号</span>
+          <span>提现金额</span>
+          <span>提现状态</span>
+          <span>审核时间</span>
+          <span>审核备注</span>
+        </div>
+        <div class="wallet-row" v-for="(row, index) in withdrawApplyColumnsListData.records" :key="row.sn || index">
+          <div>{{ row.createTime }}</div>
+          <div class="wallet-detail">{{ row.sn }}</div>
+          <div class="wallet-money" :class="row.applyStatus === 'VIA_AUDITING' ? 'is-plus' : ''">
+            {{ $filters.unitPrice(row.applyMoney, row.applyStatus === 'VIA_AUDITING' ? '+ ¥' : '¥') }}
+          </div>
+          <div>{{ withdrawStatusText(row.applyStatus) }}</div>
+          <div>{{ row.inspectTime || '—' }}</div>
+          <div class="wallet-detail">{{ row.inspectRemark || '—' }}</div>
+        </div>
+      </div>
+      <div class="page-size">
+        <el-pagination v-model:current-page="withdrawApplyForm.pageNumber" v-model:page-size="withdrawApplyForm.pageSize"
+          :page-sizes="[20, 50, 100]" :total="withdrawApplyColumnsListData.total" @current-change="withdrawChangePage"
+          @size-change="withdrawChangePageSize" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      </div>
+    </div>
     </UserCenterLayout>
   </div>
 </template>
@@ -221,19 +213,19 @@ export default {
       walletForm: {
         // 搜索框初始化对象
         pageNumber: 1,
-        pageSize: 10
+        pageSize: 20
       },
       // 充值记录
       rechargeForm: {
         // 搜索框初始化对象
         pageNumber: 1, // 当前页数
-        pageSize: 10 // 页面大小
+        pageSize: 20 // 页面大小
       },
       // 提现记录
       withdrawApplyForm: {
         // 搜索框初始化对象
         pageNumber: 1, // 当前页数
-        pageSize: 10 // 页面大小
+        pageSize: 20 // 页面大小
       },
       // 提现申请校验
       withdrawApplyFormValidate: {
@@ -280,31 +272,26 @@ export default {
       getDepositLog(this.walletForm).then((res) => {
         if (res.message === 'success') {
           this.logColumnsData = res.result;
-          this.refreshActiveTableLayout();
         }
       });
     },
     tabPaneChange(v) {
-      // 如果查询充值记录
+      this.activeWalletTab = v;
       if (v === 'recharge') {
         this.getRechargeData();
       }
-      // 如果是余额日志
       if (v === 'log') {
         this.init();
       }
-      // 如果是提现记录
       if (v === 'withdrawApply') {
         this.getWithdrawApplyData();
       }
-      this.refreshActiveTableLayout();
     },
     // 充值记录
     getRechargeData() {
       getRecharge(this.rechargeForm).then((res) => {
         if (res.message === 'success') {
           this.rechargeListData = res.result;
-          this.refreshActiveTableLayout();
         }
       });
     },
@@ -313,19 +300,25 @@ export default {
       getWithdrawApply(this.withdrawApplyForm).then((res) => {
         if (res.message === 'success') {
           this.withdrawApplyColumnsListData = res.result;
-          this.refreshActiveTableLayout();
         }
       });
     },
-    refreshActiveTableLayout() {
-      this.$nextTick(() => {
-        const tableMap = {
-          log: this.$refs.logTable,
-          recharge: this.$refs.rechargeTable,
-          withdrawApply: this.$refs.withdrawTable
-        };
-        tableMap[this.activeWalletTab]?.doLayout?.();
-      });
+    rechargeStatusText (status) {
+      const map = { PAID: '已付款', UNPAID: '未付款', CANCEL: '已取消' }
+      return map[status] || status || '—'
+    },
+    rechargeWayText (way) {
+      const map = { ALIPAY: '支付宝', WECHAT: '微信', BANK_TRANSFER: '线下转账' }
+      return map[way] || way || '—'
+    },
+    withdrawStatusText (status) {
+      const map = {
+        APPLY: '申请中',
+        VIA_AUDITING: '审核通过',
+        SUCCESS: '提现成功',
+        ERROR: '提现失败'
+      }
+      return map[status] || '审核拒绝'
     },
     // 余额日志
     changePage(v) {
@@ -413,31 +406,167 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.box {
-  margin: 20px 0;
-}
-
-.page-size {
-  margin: 15px 0px;
+.wallet-summary {
   display: flex;
-  justify-content: flex-end;
-  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
 }
 
-.account-price {
-  font-weight: bold;
-}
+.wallet-stat {
+  flex: 1;
+  padding: 16px 20px;
+  background: #fafafa;
+  border-radius: 8px;
 
-.subTips {
-  margin-left: 10px;
+  .label {
+    color: #666;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .value {
+    margin-top: 4px;
+    color: $theme_color;
+    font-size: 28px;
+    font-weight: 600;
+    line-height: 1.2;
+
+    &.is-muted {
+      color: #171A26;
+      font-size: 22px;
+    }
+  }
 }
 
 .account-btns {
-  margin: 10px 0;
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
 }
 
-.el-button {
-  margin: 0 4px;
+.op-btn,
+.ghost-btn {
+  height: 32px;
+  padding: 0 16px;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 30px;
+  cursor: pointer;
 }
 
+.op-btn {
+  border: 1px solid $theme_color;
+  background: $theme_color;
+  color: #fff;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
+
+.ghost-btn {
+  border: 1px solid #ddd;
+  background: #fff;
+  color: #171A26;
+
+  &:hover {
+    border-color: $theme_color;
+    color: $theme_color;
+  }
+}
+
+.wallet-tabs {
+  display: flex;
+  gap: 24px;
+  margin: 16px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.wallet-tab {
+  position: relative;
+  padding: 10px 0;
+  color: #666;
+  font-size: 14px;
+  line-height: 22px;
+  cursor: pointer;
+
+  &.active {
+    color: $theme_color;
+    font-weight: 600;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 2px;
+      background: $theme_color;
+    }
+  }
+}
+
+.wallet-list {
+  --wallet-cols: 180px 120px minmax(0, 1fr);
+}
+
+.recharge-list,
+.withdraw-list {
+  --wallet-cols: 156px minmax(120px, 1.1fr) 100px 80px 80px 156px;
+}
+
+.withdraw-list {
+  --wallet-cols: 156px minmax(120px, 1fr) 100px 80px 156px minmax(100px, 1fr);
+}
+
+.wallet-head,
+.wallet-row {
+  display: grid;
+  grid-template-columns: var(--wallet-cols);
+  column-gap: 12px;
+  align-items: start;
+}
+
+.wallet-head {
+  padding: 0 8px 10px;
+  color: #999;
+  font-size: 13px;
+}
+
+.wallet-row {
+  padding: 14px 8px;
+  border-top: 1px solid #f0f0f0;
+  color: #171A26;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.wallet-detail {
+  min-width: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.wallet-money {
+  font-weight: 600;
+
+  &.is-plus {
+    color: #19be6b;
+  }
+
+  &.is-minus {
+    color: $theme_color;
+  }
+}
+
+.page-size {
+  margin: 16px 0;
+  display: flex;
+  justify-content: flex-end;
+
+  :deep(.el-pagination) {
+    justify-content: flex-end;
+  }
+}
 </style>
diff --git a/buyer/src/pages/home/userCenter/MyGiftCards.vue b/buyer/src/pages/home/userCenter/MyGiftCards.vue
index 2969d8279..39b845bb0 100644
--- a/buyer/src/pages/home/userCenter/MyGiftCards.vue
+++ b/buyer/src/pages/home/userCenter/MyGiftCards.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper my-gift-cards">
-    <UserCenterLayout title="我的礼品卡" :tabs="['我的礼品卡']">
+    <UserCenterLayout>
 
     <div class="bind-section mb_20">
       <div class="section-title">兑换礼品卡</div>
@@ -11,7 +11,6 @@
         <el-form-item label="兑换码" prop="cardSecret" label-width="70px">
           <el-input
             v-model="bindForm.cardSecret"
-            type="password"
             placeholder="请输入兑换码（卡密）"
             maxlength="128"
             style="width: 220px"
@@ -75,7 +74,7 @@
     <div class="page-size">
       <el-pagination         v-model:current-page="params.pageNumber"
         v-model:page-size="params.pageSize"
-        :page-sizes="[10, 20, 50]"
+        :page-sizes="[20, 50, 100]"
         :total="total"
         @current-change="changePage"
         @size-change="changePageSize"
@@ -111,7 +110,7 @@ export default {
       list: [],
       params: {
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 20,
         sort: "createTime",
         order: "desc",
         memberCardStatus: "AVAILABLE",
@@ -372,12 +371,12 @@ export default {
   }
   .gcc-face {
     margin-top: 8px;
-    font-size: 13px;
+    font-size: 14px;
     opacity: 0.95;
   }
   .gcc-cardno {
     margin-top: 22px;
-    font-size: 12px;
+    font-size: 14px;
     letter-spacing: 0.02em;
     opacity: 0.75;
     word-break: break-all;
@@ -393,7 +392,7 @@ export default {
   }
   .gcc-expire {
     margin-top: 10px;
-    font-size: 12px;
+    font-size: 14px;
     opacity: 0.9;
     white-space: nowrap;
   }
diff --git a/buyer/src/pages/home/userCenter/MyTracks.vue b/buyer/src/pages/home/userCenter/MyTracks.vue
index e2fb3bfad..7d7b9f485 100644
--- a/buyer/src/pages/home/userCenter/MyTracks.vue
+++ b/buyer/src/pages/home/userCenter/MyTracks.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="wrapper">
-    <UserCenterLayout title="我的足迹" :tabs="['我的足迹']">
+    <UserCenterLayout>
       <template #extra>
         <el-button class="del-btn" @click="clearAll" type="primary">删除全部</el-button>
       </template>
@@ -12,9 +12,11 @@
         :key="index"
         @click="goodsDetail(item.id, item.goodsId)"
       >
-        <img :src="item.thumbnail" :alt="item.goodsName" />
-        <p class="ellipsis">{{ item.goodsName }}</p>
-        <p>{{ $filters.unitPrice(item.price, "￥") }}</p>
+        <div class="thumb">
+          <img :src="item.thumbnail" :alt="item.goodsName" />
+        </div>
+        <p class="goods-name">{{ item.goodsName }}</p>
+        <p class="goods-price">{{ $filters.unitPrice(item.price, "￥") }}</p>
         <span class="del-icon" @click.stop="clearById(item.goodsId)">
           <el-icon><Delete /></el-icon>
         </span>
@@ -26,7 +28,7 @@
         v-model:current-page="params.pageNumber"
         v-model:page-size="params.pageSize"
         :total="total"
-        :page-sizes="[10, 20, 30, 40, 50, 100]"
+        :page-sizes="[20, 50, 100]"
         layout="sizes, prev, pager, next, jumper"
         @current-change="changePageNum"
         @size-change="changePageSize"
@@ -49,7 +51,7 @@ export default {
       spinShow: false, // 控制loading是否加载
       params: {
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 20,
         order: "desc",
         sort: "updateTime",
       },
@@ -135,61 +137,86 @@ export default {
   margin-bottom: 40px;
 }
 .del-btn {
-  margin: 0 0 10px 15px;
+  margin: 0;
 }
 
 .track-list {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-  padding: 0 15px;
-  box-sizing: border-box;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin: 4px 0 0;
+  padding: 0;
+  list-style: none;
 
   li {
-    width: 100%;
+    display: flex;
+    flex-direction: column;
     min-width: 0;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
     overflow: hidden;
-    border: 1px solid #eee;
+    background: #fff;
     position: relative;
     box-sizing: border-box;
 
+    &:hover {
+      cursor: pointer;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+
+      .del-icon {
+        display: flex;
+      }
+    }
+  }
+
+  .thumb {
+    width: 100%;
+    aspect-ratio: 1;
+    background: #f5f5f5;
+    overflow: hidden;
+
     img {
       width: 100%;
-      aspect-ratio: 1;
+      height: 100%;
       object-fit: cover;
       display: block;
     }
+  }
 
-    &:hover {
-      cursor: pointer;
-      box-shadow: 1px 1px 3px #999;
-      .del-icon {
-        display: block;
-      }
-    }
-    p {
-      padding: 0 5px;
-      margin: 3px 0;
-    }
-    p:nth-child(2) {
-      color: #999;
-    }
-    p:nth-child(3) {
-      color: $theme_color;
-    }
-    .del-icon {
-      display: none;
-      font-size: 30px;
-      background-color: rgba(0, 0, 0, 0.3);
-      position: absolute;
-      width: 40px;
-      height: 40px;
-      line-height: 40px;
-      text-align: center;
-      right: 0;
-      top: 0;
-      cursor: pointer;
-    }
+  .goods-name {
+    margin: 10px 12px 0;
+    color: #333;
+    font-size: 13px;
+    line-height: 1.4;
+    height: 36px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  .goods-price {
+    margin: 8px 12px 12px;
+    color: $theme_color;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.2;
+  }
+
+  .del-icon {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.45);
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
   }
 }
 .page-size {
diff --git a/buyer/src/pages/payment/Pay.vue b/buyer/src/pages/payment/Pay.vue
index be27e0314..b344a6485 100644
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -22,7 +22,10 @@
       <div class="address" v-if="selectedDeliverMethod === 'LOGISTICS' && !isVirtualLikeCheckout">
         <div class="card-head">
           <span>收货人信息</span>
-          <span @click="goAddressManage">管理收货人地址</span>
+          <div class="card-head-links">
+            <span @click="editAddress('')">新增</span>
+            <span @click="goAddressManage">管理</span>
+          </div>
         </div>
         <div class="address-manage">
           <div class="address-item" v-show="moreAddr ? true : index < 3"
@@ -53,15 +56,11 @@
               <el-icon><Check /></el-icon>
             </div>
           </div>
-          <div class="add-address" @click="editAddress('')">
-            <el-icon><Plus /></el-icon>
-            <div>添加新地址</div>
-          </div>
         </div>
         <div class="more-addr" @click="moreAddr = !moreAddr" v-if="addressList.length > 3">
           {{ moreAddr ? "收起地址" : "更多地址" }}
-          <el-icon :v-show="!moreAddr"><ArrowDown /></el-icon>
-          <el-icon :v-show="moreAddr"><ArrowUp /></el-icon>
+          <el-icon v-show="!moreAddr"><ArrowDown /></el-icon>
+          <el-icon v-show="moreAddr"><ArrowUp /></el-icon>
         </div>
       </div>
 
@@ -89,8 +88,8 @@
         </div>
         <div class="more-addr" @click="storeMoreAddr = !storeMoreAddr" v-if="storeAddressList.length > 3">
           {{ storeMoreAddr ? "收起地址" : "更多地址" }}
-          <el-icon :v-show="!storeMoreAddr"><ArrowDown /></el-icon>
-          <el-icon :v-show="storeMoreAddr"><ArrowUp /></el-icon>
+          <el-icon v-show="!storeMoreAddr"><ArrowDown /></el-icon>
+          <el-icon v-show="storeMoreAddr"><ArrowUp /></el-icon>
         </div>
       </div>
       <div>
@@ -128,25 +127,44 @@
                 }}</span>&nbsp;&nbsp;
               </span>
             </div>
+            <div class="goods-head">
+              <span>商品</span>
+              <span>单价</span>
+              <span>数量</span>
+              <span>库存</span>
+              <span>小计</span>
+            </div>
             <div class="goods-list">
               <div class="goods-item" v-for="(goods, goodsIndex) in shop.checkedSkuList" :key="goodsIndex">
-                <span class="hover-color" @click="
+                <span class="goods-main hover-color" @click="
                   goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)
                 ">
                   <img :src="goods.goodsSku.thumbnail" alt="" />
-                  <span style="vertical-align: top">{{
-                      goods.goodsSku.goodsName
-                  }}</span>
+                  <span class="goods-name">{{ goods.goodsSku.goodsName }}</span>
                 </span>
                 <span class="goods-price">{{ $filters.unitPrice(goods.purchasePrice, "￥") }}</span>
-                <span>x{{ goods.num }}</span>
+                <span>{{ goods.num }}</span>
                 <span>{{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}</span>
                 <span class="goods-price">{{ $filters.unitPrice(goods.subTotal, "￥") }}</span>
               </div>
             </div>
             <div class="order-mark">
-              <el-input type="textarea" maxlength="60" v-model="shop.remark" show-word-limit placeholder="订单备注" />
-              <span style="font-size: 12px; color: #999">提示：请勿填写有关支付、收货、发票方面的信息</span>
+              <div v-if="isRemarkOpen(shop)" class="mark-field">
+                <el-input
+                  :ref="remarkInputRef(shop)"
+                  v-model="shop.remark"
+                  maxlength="60"
+                  show-word-limit
+                  placeholder="选填，请先和商家协商一致"
+                  @blur="closeRemark(shop)"
+                />
+                <span class="mark-tip">请勿填写有关支付、收货、发票方面的信息</span>
+              </div>
+              <button v-else-if="shop.remark" type="button" class="mark-link" @click="openRemark(shop)">
+                <span class="mark-label">订单备注</span>
+                <span class="mark-text">{{ shop.remark }}</span>
+              </button>
+              <button v-else type="button" class="mark-link" @click="openRemark(shop)">添加订单备注</button>
             </div>
           </div>
         </div>
@@ -154,9 +172,7 @@
       <!-- 发票信息（E_COUPON 虚拟型结算不开发票） -->
       <div class="invoice" v-if="!isECouponCheckout">
         <div class="card-head mt_20 mb_20">
-          <span class="relative">发票信息<span class="inv-tips">
-              <el-icon><Warning /></el-icon>开企业抬头发票须填写纳税人识别号，以免影响报销
-            </span></span>
+          <span>发票信息</span>
         </div>
         <div class="inovice-content">
           <template v-if="hasInvoiceInfo">
@@ -172,46 +188,36 @@
         <div class="card-head mt_20 mb_20">
           <span class="relative">优惠券</span>
         </div>
-        <div v-if="couponList.length === 0">无可用优惠券</div>
-        <ul v-else class="coupon-list">
-          <li v-for="(item, index) in couponList" class="coupon-item" :key="index">
-            <div class="c-left">
-              <div>
-                <span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{ $filters.unitPrice(item.price) }}</span></span>
-                <span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{
-                    item.discount
-                }}</span>折</span>
-                <span class="describe">满{{ item.consumeThreshold }}元可用</span>
-              </div>
+        <div v-if="couponList.length === 0" class="pay-empty">无可用优惠券</div>
+        <ul v-else class="pay-coupon-list">
+          <li
+            v-for="(item, index) in couponList"
+            class="pay-coupon"
+            :class="{ 'is-used': usedCouponId.includes(item.id) }"
+            :key="index"
+            @click="useCoupon(item.id, !usedCouponId.includes(item.id))"
+          >
+            <div class="pay-coupon-price">
+              <template v-if="item.couponType === 'PRICE'">￥{{ $filters.unitPrice(item.price) }}</template>
+              <template v-else>{{ item.discount }}折</template>
+            </div>
+            <div class="pay-coupon-info">
+              <p>满{{ item.consumeThreshold }}元可用</p>
               <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
               <p>有效期：{{ item.endTime }}</p>
             </div>
-            <img class="used" v-if="usedCouponId.includes(item.id)" src="../../assets/images/geted.png" alt="" />
-            <b></b>
-            <a
-              class="c-right"
-              v-if="!usedCouponId.includes(item.id)"
-              @click="useCoupon(item.id, true)"
-            >立即使用</a>
-            <a
-              class="c-right c-right-cancel"
-              v-else
-              @click="useCoupon(item.id, false)"
-            >放弃优惠</a>
-            <i class="circle-top"></i>
-            <i class="circle-bottom"></i>
           </li>
         </ul>
       </div>
       <!-- 礼品卡 -->
-      <div class="invoice pay-gcc-module">
-        <div class="pay-gcc-head">
-          <div class="pay-gcc-title">
-            使用礼品卡
+      <div class="invoice">
+        <div class="card-head mt_20 mb_20">
+          <span>
+            礼品卡
             <span class="pay-gcc-deduct">
               (已抵扣 <span class="pay-gcc-deduct-num">{{ $filters.unitPrice(giftCardDeductAmount, "¥") }}</span>)
             </span>
-          </div>
+          </span>
           <a href="javascript:void(0)" class="pay-gcc-help" @click.prevent="giftCardNoticeModal = true">
             使用说明 <el-icon><Help /></el-icon>
           </a>
@@ -225,6 +231,7 @@
                   v-for="(item, index) in giftCardList"
                   :key="item.id || index"
                   class="pay-gcc-item"
+                  :class="{ 'is-selected': isGiftCardSelected(item) }"
                   @click="toggleGiftCard(item)"
                 >
                   <div class="pay-gcc-item-inner">
@@ -312,7 +319,7 @@
 
 <script>
 import { Message, Modal, Spin } from "@/utils/message";
-import { ArrowDown, ArrowUp, Check, Help, Plus, Warning } from '@element-plus/icons-vue';
+import { ArrowDown, ArrowUp, Check, Help } from '@element-plus/icons-vue';
 import invoiceModal from "@/components/invoiceModal";
 import addressManage from "@/components/addressManage";
 import { memberAddress, delMemberAddress } from "@/api/address";
@@ -396,6 +403,7 @@ export default {
       invoiceAvailable: false, // 发票编辑按钮
       showEditBtn: "", // 鼠标移入显示编辑按钮
       orderMark: "", // 订单备注
+      remarkEditing: {}, // 正在填写备注的店铺
       goodsType: "", // 商品类型
       storeMoreAddr: false,
       invoiceData: {
@@ -730,6 +738,31 @@ export default {
         }
       });
     },
+    remarkKey(shop) {
+      return shop.storeId || shop.storeName;
+    },
+    remarkInputRef(shop) {
+      return "remarkInput" + this.remarkKey(shop);
+    },
+    isRemarkOpen(shop) {
+      return !!this.remarkEditing[this.remarkKey(shop)];
+    },
+    openRemark(shop) {
+      const key = this.remarkKey(shop);
+      this.remarkEditing = { ...this.remarkEditing, [key]: true };
+      this.$nextTick(() => {
+        const input = this.$refs[this.remarkInputRef(shop)];
+        const target = Array.isArray(input) ? input[0] : input;
+        target?.focus?.();
+      });
+    },
+    closeRemark(shop) {
+      if (shop.remark) {
+        shop.remark = String(shop.remark).trim();
+      }
+      const key = this.remarkKey(shop);
+      this.remarkEditing = { ...this.remarkEditing, [key]: false };
+    },
     selectAddress(item) {
       // 选择地址
       let params = {
@@ -738,7 +771,7 @@ export default {
       };
       selectAddr(params).then((res) => {
         if (res.success) {
-          Message.success("选择配送方式成功");
+          Message.success("选择收货地址成功");
           this.selectMethod = item;
           this.getGoodsDetail();
         }
@@ -898,7 +931,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../assets/styles/coupon.scss";
 
 .goods-msg {
   overflow: hidden;
@@ -965,12 +997,12 @@ export default {
 
   .active {
     border-radius: 50px;
-    background-color: #ff8f23;
+    background-color: $theme_color;
     color: #fff;
   }
 
   .active-arrow {
-    color: #ff8f23;
+    color: $theme_color;
   }
 }
 
@@ -980,84 +1012,66 @@ export default {
   margin: 20px auto;
   background-color: #fff;
   min-height: 200px;
-  padding: 15px 25px;
+  padding: 8px 28px 0;
   box-sizing: border-box;
 }
 
 .delivery-method {
   display: flex;
   flex-wrap: wrap;
-
-  >div {
-    border: 1px dotted #949494;
-    width: 50px;
-    height: 40px;
-    margin: 20px 20px 0 0;
-    padding: 10px;
-    cursor: pointer;
-    color: #999;
-  }
+  gap: 12px;
+  margin-top: 16px;
 
   .method-item {
     position: relative;
-    font-size: 12px;
-
-    >div:nth-child(1) {
-      margin-bottom: 10px;
-
-      span {
-        margin-right: 10px;
-      }
-
-      >span:nth-child(1) {
-        color: #000000;
-        font-size: 14px;
-      }
-    }
-
-    .edit-btn {
-      font-size: 12px;
-      position: absolute;
-      top: 15px;
-      right: 20px;
-      color: $theme_color;
-
-      span:hover {
-        border-bottom: 1px solid $theme_color;
-      }
-    }
-
-    .corner-icon {
-      position: absolute;
-      right: -1px;
-      bottom: -1px;
-
-      div {
-        width: 0;
-        border-top: 20px solid transparent;
-        border-right: 20px solid $theme_color;
-      }
-
-      .el-icon {
-        font-size: 12px;
-        position: absolute;
-        bottom: 0;
-        right: 1px;
-        transform: rotate(-15deg);
-        color: #fff;
-      }
-    }
+    min-width: 108px;
+    height: 44px;
+    margin: 0;
+    padding: 0 20px;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #171A26;
+    font-size: 15px;
+    box-sizing: border-box;
   }
 
   .border-red {
     border-color: $theme_color;
+    background: #fff5f4;
+    color: $theme_color;
+  }
+
+  .corner-icon {
+    position: absolute;
+    right: -1px;
+    bottom: -1px;
+
+    div {
+      width: 0;
+      border-top: 18px solid transparent;
+      border-right: 18px solid $theme_color;
+    }
+
+    .el-icon {
+      font-size: 12px;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      color: #fff;
+    }
   }
 }
 
 /** 地址管理 */
 .address-manage {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 16px;
 
   :deep(.address-default-tag) {
     --el-tag-bg-color: var(--el-color-danger);
@@ -1074,49 +1088,51 @@ export default {
   }
 
   >div {
-    border: 1px dotted #949494;
-    width: 265px;
-    height: 120px;
-    margin: 20px 20px 0 0;
-    padding: 10px;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    width: auto;
+    min-height: 128px;
+    height: auto;
+    margin: 0;
+    padding: 14px 16px;
     cursor: pointer;
-    color: #999;
-  }
-
-  .add-address {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-
-    .el-icon {
-      font-size: 24px;
-    }
-
+    color: #666;
+    box-sizing: border-box;
   }
 
   .address-item {
     position: relative;
-    font-size: 12px;
+    font-size: 14px;
+    line-height: 22px;
 
     >div:nth-child(1) {
-      margin-bottom: 10px;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 6px;
 
       span {
-        margin-right: 10px;
+        margin-right: 0;
       }
 
       >span:nth-child(1) {
-        color: #000000;
-        font-size: 14px;
+        color: #171A26;
+        font-size: 16px;
+        font-weight: 600;
       }
     }
 
+    >div:nth-child(2),
+    >div:nth-child(3) {
+      color: #666;
+    }
+
     .edit-btn {
-      font-size: 12px;
+      font-size: 14px;
       position: absolute;
-      top: 15px;
-      right: 20px;
+      top: 14px;
+      right: 14px;
       color: $theme_color;
 
       span:hover {
@@ -1148,6 +1164,7 @@ export default {
 
   .border-red {
     border-color: $theme_color;
+    background: #fff5f4;
   }
 }
 
@@ -1155,9 +1172,12 @@ export default {
 .shop-name {
   display: flex;
   justify-content: space-between;
+  margin-top: 16px;
+  color: #171A26;
+  font-size: 15px;
 
   >span:nth-child(1) {
-    font-weight: bold;
+    font-weight: 600;
 
     .el-icon {
       color: #ff8f23;
@@ -1199,94 +1219,154 @@ export default {
   }
 }
 
+.goods-head,
+.goods-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 110px 72px 72px 120px;
+  column-gap: 12px;
+  align-items: center;
+}
+
+.goods-head {
+  margin-top: 12px;
+  padding: 0 8px 8px;
+  color: #999;
+  font-size: 13px;
+
+  span:not(:first-child) {
+    text-align: center;
+  }
+
+  span:last-child {
+    text-align: right;
+  }
+}
+
 .goods-list {
-  width: 1150px;
-  background-color: #f8f8f8;
-  margin: 10px 0 20px 0;
+  display: block;
+  width: 100%;
+  margin: 0 0 16px;
+  background: transparent;
 
   .goods-item {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 0;
-    margin: 0 20px;
-    border-bottom: 1px dotted #999;
-
-    &:last-child {
-      border: none;
-    }
-
-    img {
-      width: 48px;
-      height: 48px;
-    }
+    width: auto;
+    margin: 0;
+    padding: 14px 8px;
+    border-top: 1px solid #f0f0f0;
+    justify-content: initial;
 
     >span {
+      width: auto;
       text-align: center;
-      width: 100px;
-    }
-
-    >span:nth-child(1) {
-      font-size: 12px;
-
-      flex: 1;
-      text-align: left;
-
-      >span {
-        margin-left: 10px;
-      }
+      color: #171A26;
+      font-size: 14px;
     }
 
     >span:last-child {
+      text-align: right;
       color: $theme_color;
-      font-weight: bold;
+      font-weight: 600;
     }
+  }
 
-    .goods-price {
-      font-size: 16px;
-    }
+  .goods-main {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    text-align: left;
+  }
+
+  img {
+    width: 72px;
+    height: 72px;
+    border-radius: 4px;
+    object-fit: cover;
+    flex-shrink: 0;
+    background: #f5f5f5;
+  }
+
+  .goods-name {
+    color: #171A26;
+    font-size: 15px;
+    line-height: 22px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  .goods-price {
+    font-size: 15px;
   }
 }
 
 .order-mark {
-  width: 500px;
+  margin-top: 12px;
+}
+
+.mark-link {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  color: #438cde;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 22px;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    color: $theme_color;
+  }
+}
+
+.mark-label {
+  flex-shrink: 0;
+  color: #666;
+}
+
+.mark-text {
+  color: #171A26;
+  word-break: break-all;
+}
+
+.mark-field {
+  max-width: 640px;
+
+  :deep(.el-input__wrapper) {
+    min-height: 40px;
+  }
+
+  :deep(.el-input__inner) {
+    color: #171A26;
+    font-size: 14px;
+  }
+}
+
+.mark-tip {
+  display: block;
+  margin-top: 8px;
+  color: #999;
+  font-size: 13px;
+  line-height: 20px;
 }
 
 /** 购买商品列表 end */
 /** 发票信息 start */
 .invoice {
-  .inv-tips {
-    position: absolute;
-    border: 1px solid #ddd;
-    width: 310px;
-    padding: 3px;
-    margin: 0 0 0 10px;
-    font-size: 12px !important;
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-
-    &::before {
-      content: "";
-      display: inline-block;
-      width: 12px;
-      height: 17px;
-      background: url(../../assets/images/arrow-left.png) 0 0 no-repeat;
-      background-color: #fff;
-      position: absolute;
-      left: -9px;
-    }
-
-    .el-icon {
-      color: #ff8f23;
-      margin-right: 3px;
-      font-size: 16px;
-      font-weight: bold;
-    }
-  }
-
   .inovice-content {
+    margin-top: 12px;
+    color: #171A26;
+    font-size: 14px;
+    line-height: 22px;
+
     >span {
-      margin-right: 10px;
+      margin-right: 16px;
     }
 
     >span:last-child {
@@ -1305,21 +1385,23 @@ export default {
 /** 订单价格 */
 .order-price {
   text-align: right;
-  margin-top: 30px;
-  font-size: 16px;
-  color: #999;
+  margin-top: 24px;
+  font-size: 14px;
+  color: #666;
+  line-height: 22px;
 
   >div>span:nth-child(2) {
-    width: 130px;
+    width: 140px;
     text-align: right;
     display: inline-block;
-    margin-top: 10px;
+    margin-top: 8px;
+    color: #171A26;
   }
 
   .actrual-price {
     color: $theme_color;
-    font-weight: bold;
-    font-size: 20px;
+    font-weight: 600;
+    font-size: 22px;
   }
 }
 
@@ -1327,32 +1409,35 @@ export default {
 /** 底部支付栏 */
 .order-footer {
   z-index: 20;
-  height: 50px;
-  @include background_color($light_white_background_color);
-  @include title_color($title_color);
+  position: sticky;
+  bottom: 0;
+  height: 64px;
   display: flex;
   align-items: center;
   flex-direction: row-reverse;
-  border-top: 1px solid #ddd;
-  margin: 10px -25px 0;
-  width: calc(100% + 50px);
+  border-top: 1px solid #f0f0f0;
+  margin: 16px -28px 0;
+  padding-left: 28px;
+  width: calc(100% + 56px);
   box-sizing: border-box;
+  background: #fff;
 
   div {
     text-align: center;
   }
 
-  position: sticky;
-  bottom: 0;
-
   .pay {
     background-color: $theme_color;
-    width: 150px;
-    font-size: 20px;
+    width: 160px;
+    font-size: 16px;
     color: #fff;
     height: 100%;
-    line-height: 50px;
+    line-height: 64px;
     cursor: pointer;
+
+    &:hover {
+      opacity: 0.92;
+    }
   }
 }
 
@@ -1364,12 +1449,32 @@ export default {
   border-bottom: 1px solid #dddddd;
   height: 40px;
 
-  span:nth-child(1) {
-    font-size: 18px;
+  > span:first-child {
+    font-size: 16px;
+    font-weight: 600;
+    color: #171A26;
   }
 
-  span:nth-child(2) {
-    font-size: 12px;
+  > span:nth-child(2) {
+    font-size: 14px;
+    font-weight: 400;
+    color: #438cde;
+    cursor: pointer;
+
+    &:hover {
+      color: $theme_color;
+    }
+  }
+}
+
+.card-head-links {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  span {
+    font-size: 14px;
+    font-weight: 400;
     color: #438cde;
     cursor: pointer;
 
@@ -1384,131 +1489,88 @@ export default {
   height: 2px;
 }
 
-.pay-address {
-  font-size: 12px;
+.order-footer .pay-address {
+  flex: 1;
+  padding-right: 20px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #666;
+  text-align: right;
 }
 
 .more-addr {
   cursor: pointer;
-  margin-top: 10px;
-  display: inline-block;
+  margin-top: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #438cde;
+  font-size: 14px;
 }
 
-.coupon-item {
-  width: 280px;
-  height: 125px;
-  margin-left: 0;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  overflow: hidden;
-  $claim-width: 55px;
-
-  .c-left {
-    width: calc(100% - #{$claim-width});
-    padding: 14px 12px;
-    box-sizing: border-box;
-
-    > div,
-    > p {
-      margin-bottom: 8px;
-    }
-
-    > div .price {
-      font-size: 18px;
-    }
-
-    p {
-      margin-bottom: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 12px;
-    }
-  }
-
-  b {
-    right: $claim-width;
-    width: 0;
-    background: none;
-    border-right: 1px dashed #e0e0e0;
-  }
-
-  .c-right {
-    width: $claim-width;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    writing-mode: vertical-rl;
-    text-orientation: mixed;
-    letter-spacing: 3px;
-    font-size: 14px;
-    line-height: 1;
-    cursor: pointer;
-    text-decoration: none;
-    user-select: none;
-    box-sizing: border-box;
-
-    &:hover {
-      opacity: 0.9;
-    }
-  }
-
-  .c-right-cancel {
-    letter-spacing: 2px;
-    font-size: 13px;
-  }
-
-  .circle-top,
-  .circle-bottom {
-    right: calc(#{$claim-width} - 9px);
-    width: 18px;
-    height: 18px;
-  }
-
-  .circle-top {
-    top: -9px;
-  }
-
-  .circle-bottom {
-    bottom: -9px;
-  }
-
-  .used {
-    position: absolute;
-    top: 50%;
-    right: calc(#{$claim-width} + 8px);
-    transform: translateY(-50%);
-    width: 46px;
-    height: 46px;
-    z-index: 3;
-  }
+.pay-empty {
+  margin-top: 12px;
+  color: #999;
+  font-size: 14px;
+  line-height: 22px;
 }
 
-.coupon-list {
-  max-height: 260px;
-  overflow: scroll;
+.pay-coupon-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin: 16px 0 0;
   padding: 0;
-  margin: 0;
   list-style: none;
-  justify-content: flex-start;
 }
 
-.pay-gcc-module {
-  margin-top: 10px;
-}
-.pay-gcc-head {
+.pay-coupon {
+  width: 360px;
+  min-height: 108px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #eee;
+  gap: 12px;
+  padding: 14px 14px 14px 16px;
+  border: 1px solid #f0d0cc;
+  border-radius: 8px;
+  background: #fff;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &.is-used {
+    border-color: $theme_color;
+    background: #fff5f4;
+  }
 }
-.pay-gcc-title {
-  font-size: 18px;
-  font-weight: 500;
-  color: #333;
+
+.pay-coupon-price {
+  flex-shrink: 0;
+  width: 88px;
+  color: $theme_color;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.2;
 }
+
+.pay-coupon-info {
+  flex: 1;
+  min-width: 0;
+
+  p {
+    margin: 0;
+    color: #666;
+    font-size: 13px;
+    line-height: 20px;
+    word-break: break-all;
+  }
+
+  p:first-child {
+    color: #171A26;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
 .pay-gcc-deduct {
   margin-left: 8px;
   font-size: 14px;
@@ -1520,12 +1582,14 @@ export default {
   font-weight: 600;
 }
 .pay-gcc-help {
-  font-size: 13px;
-  color: #999;
+  font-size: 14px;
+  font-weight: 400;
+  color: #438cde;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 2px;
+  text-decoration: none;
 }
 .pay-gcc-help:hover {
   color: $theme_color;
@@ -1561,6 +1625,12 @@ export default {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: transform 0.15s, box-shadow 0.15s;
+  outline: 2px solid transparent;
+  outline-offset: 0;
+
+  &.is-selected {
+    outline-color: $theme_color;
+  }
 }
 .pay-gcc-item:hover {
   transform: translateY(-2px);
@@ -1603,7 +1673,7 @@ export default {
 }
 .pay-gcc-face {
   margin-top: 6px;
-  font-size: 12px;
+  font-size: 14px;
   opacity: 0.92;
 }
 .pay-gcc-right-meta {
@@ -1616,7 +1686,7 @@ export default {
 }
 .pay-gcc-valid {
   margin-top: 6px;
-  font-size: 11px;
+  font-size: 14px;
   opacity: 0.9;
   white-space: nowrap;
 }
@@ -1637,7 +1707,7 @@ export default {
 }
 .pay-gcc-no {
   margin-top: 10px;
-  font-size: 11px;
+  font-size: 14px;
   opacity: 0.75;
   word-break: break-all;
   line-height: 1.4;
diff --git a/buyer/src/pages/payment/PayMent.vue b/buyer/src/pages/payment/PayMent.vue
index 2e0c6048a..d944e1810 100644
--- a/buyer/src/pages/payment/PayMent.vue
+++ b/buyer/src/pages/payment/PayMent.vue
@@ -177,7 +177,7 @@ export default {
 }
 
 .left-tips-count-down {
-  font-size: 10px;
+  font-size: 14px;
   color: red;
 }
 
diff --git a/buyer/src/pages/payment/ThirdPay.vue b/buyer/src/pages/payment/ThirdPay.vue
index 619b2473b..5ccb9c2da 100644
--- a/buyer/src/pages/payment/ThirdPay.vue
+++ b/buyer/src/pages/payment/ThirdPay.vue
@@ -193,7 +193,7 @@ export default {
   .qrcode-status-tip {
     margin-top: 8px;
     color: #909399;
-    font-size: 12px;
+    font-size: 14px;
   }
 
   .intro {
diff --git a/buyer/src/pages/shopEntry/FirstApply.vue b/buyer/src/pages/shopEntry/FirstApply.vue
index 2867172e4..aac32b3ab 100644
--- a/buyer/src/pages/shopEntry/FirstApply.vue
+++ b/buyer/src/pages/shopEntry/FirstApply.vue
@@ -183,7 +183,7 @@
         >
       </el-form-item>
     </el-form>
-    <el-dialog title="View Image" v-model="visible">
+    <el-dialog title="图片预览" v-model="visible">
       <img :src="previewPicture" v-if="visible" style="width: 100%" />
     </el-dialog>
 
diff --git a/buyer/src/pages/shopEntry/ThirdApply.vue b/buyer/src/pages/shopEntry/ThirdApply.vue
index d827d0be5..8095dd06b 100644
--- a/buyer/src/pages/shopEntry/ThirdApply.vue
+++ b/buyer/src/pages/shopEntry/ThirdApply.vue
@@ -86,7 +86,7 @@
         >
       </el-form-item>
     </el-form>
-    <el-dialog title="View Image" v-model="visible">
+    <el-dialog title="图片预览" v-model="visible">
       <img :src="previewPicture" v-if="visible" style="width: 100%" />
     </el-dialog>
     <multipleMap ref="map" @callback="getAddress" />
diff --git a/buyer/src/pages/user/Home.vue b/buyer/src/pages/user/Home.vue
index 5d7eeee08..408e17f06 100644
--- a/buyer/src/pages/user/Home.vue
+++ b/buyer/src/pages/user/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="user-home-page">
     <BaseHeader></BaseHeader>
 
     <div class="container width_1200">
@@ -68,6 +68,12 @@ export default {
       return {};
     },
   },
+  mounted() {
+    document.body.classList.add("buyer-user-center");
+  },
+  beforeUnmount() {
+    document.body.classList.remove("buyer-user-center");
+  },
   methods: {
     onSelect(name) {
       this.$router.push({ name });
@@ -134,3 +140,38 @@ export default {
   text-align: center;
 }
 </style>
+
+<style lang="scss">
+/* 会员中心按钮统一放大一号：small→默认，默认→large，large→48px。弹窗挂到 body，靠页面 class 一起放大。 */
+body.buyer-user-center {
+  .user-home-page .content .el-button.el-button--small:not(.is-link):not(.is-text),
+  .el-overlay .el-button.el-button--small:not(.is-link):not(.is-text) {
+    height: 32px;
+    padding: 8px 15px;
+    font-size: var(--el-font-size-base);
+    border-radius: var(--el-border-radius-base);
+  }
+
+  .user-home-page .content .el-button:not(.el-button--small):not(.el-button--large):not(.is-link):not(.is-text),
+  .el-overlay .el-button:not(.el-button--small):not(.el-button--large):not(.is-link):not(.is-text) {
+    height: 40px;
+    padding: 12px 19px;
+    font-size: var(--el-font-size-base);
+    border-radius: var(--el-border-radius-base);
+  }
+
+  .user-home-page .content .el-button.el-button--large:not(.is-link):not(.is-text),
+  .el-overlay .el-button.el-button--large:not(.is-link):not(.is-text) {
+    --el-button-size: 48px;
+    height: var(--el-button-size);
+    padding: 16px 23px;
+    font-size: var(--el-font-size-base);
+    border-radius: var(--el-border-radius-base);
+  }
+
+  .user-home-page .content .el-button.is-link.el-button--small,
+  .el-overlay .el-button.is-link.el-button--small {
+    font-size: var(--el-font-size-base);
+  }
+}
+</style>
diff --git a/buyer/src/router/index.js b/buyer/src/router/index.js
index 7870be1b9..5b9048096 100644
--- a/buyer/src/router/index.js
+++ b/buyer/src/router/index.js
@@ -303,7 +303,7 @@ export const router = createRouter({
           path: "MsgDetail",
           name: "MsgDetail",
           component: MsgDetail,
-          meta: { title: "我的消息" },
+          meta: { title: "消息详情" },
         },
         {
           path: "MyOrder",
diff --git a/buyer/src/utils/buyerLogin.js b/buyer/src/utils/buyerLogin.js
index 9a8ffe5ac..d17595f4d 100644
--- a/buyer/src/utils/buyerLogin.js
+++ b/buyer/src/utils/buyerLogin.js
@@ -1,59 +1,16 @@
 /**
- * 买家端登录态与商品详情跳转校验
+ * 买家端内部链接跳转（首页装修、列表等共用）
  *
  * @author Mike
  * @date 2026-08-05
  */
-import storage from "@/plugins/storage";
 
-export function isBuyerLoggedIn() {
-  const rawUserInfo = storage.getItem("userInfo");
-  if (rawUserInfo) {
-    try {
-      return !!JSON.parse(rawUserInfo).username;
-    } catch {
-      return false;
-    }
-  }
-  return !!storage.getItem("accessToken");
-}
-
-export function parseInternalLink(url) {
-  const [path, search = ""] = url.split("?");
-  const query = {};
-  if (search) {
-    new URLSearchParams(search).forEach((value, key) => {
-      query[key] = value;
-    });
-  }
-  return { path, query };
-}
-
-export function isGoodsDetailPath(path) {
-  return path === "/goodsDetail";
-}
-
-export function redirectToLogin(router, location) {
-  router.push({
-    path: "/login",
-    query: {
-      rePath: location.path,
-      query: JSON.stringify(location.query || {}),
-    },
-  });
-}
-
-/** 内部链接跳转；访问商品详情前校验登录（首页装修、列表等共用） */
+/** 内部链接新窗口打开，外链直接打开。浏览商品详情不要求登录。 */
 export function openLink(url, router) {
   if (!url) return;
   if (url.charAt(0) !== "/") {
     window.open(url, "_blank");
     return;
   }
-  const location = parseInternalLink(url);
-  if (!isBuyerLoggedIn() && isGoodsDetailPath(location.path)) {
-    redirectToLogin(router, location);
-    return;
-  }
   window.open(router.resolve(url).href, "_blank");
 }