From 506d931abb9e288b1972fdee52810f088c6b1d1e Mon Sep 17 00:00:00 2001
From: chen <chen@example.com>
Date: Sat, 19 Sep 2026 16:04:15 +0800
Subject: [PATCH] =?UTF-8?q?style(commission):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=94=B6=E7=9B=8A=E4=B8=AD=E5=BF=83=E9=A6=96=E9=A1=B5=E4=B8=BA?=
 =?UTF-8?q?=E7=8E=B0=E4=BB=A3=E7=AE=80=E7=BA=A6=E8=A7=84=E8=8C=83=E6=8E=92?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commission/components/account-info.vue    | 272 +++++++++++-------
 .../commission/components/commission-info.vue | 190 ++++++------
 .../commission/components/commission-log.vue  | 206 ++++++-------
 .../commission/components/commission-menu.vue | 235 ++++++++-------
 uniapp/pages/commission/index.vue             | 205 +++++++------
 5 files changed, 629 insertions(+), 479 deletions(-)

diff --git a/uniapp/pages/commission/components/account-info.vue b/uniapp/pages/commission/components/account-info.vue
index 8d405e1..5631c86 100644
--- a/uniapp/pages/commission/components/account-info.vue
+++ b/uniapp/pages/commission/components/account-info.vue
@@ -1,74 +1,89 @@
-<!-- 账户  -->
+<!-- 账户信息 Bento 资产卡片 -->
 <template>
   <view class="account-card">
-    <view class="account-card-box">
-      <view class="ss-flex ss-row-between card-box-header">
-        <view class="ss-flex">
-          <view class="header-title ss-m-r-16">账户信息</view>
-          <button
-            class="ss-reset-button look-btn ss-flex"
-            @tap="state.showMoney = !state.showMoney"
-          >
-            <uni-icons
-              :type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'"
-              color="#A57A55"
-              size="20"
-            ></uni-icons>
-          </button>
+    <!-- 头部：标题与查看明细 -->
+    <view class="card-header ss-flex ss-row-between ss-col-center">
+      <view class="header-left ss-flex ss-col-center">
+        <text class="header-title">账户资产</text>
+        <button
+          class="ss-reset-button eye-btn ss-flex ss-col-center ss-row-center ss-m-l-12"
+          @tap="state.showMoney = !state.showMoney"
+        >
+          <uni-icons
+            :type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'"
+            color="#A57A55"
+            size="18"
+          ></uni-icons>
+        </button>
+      </view>
+      <view class="header-right ss-flex ss-col-center" @tap="sheep.$router.go('/pages/commission/rewards')">
+        <text class="detail-link-text">查看明细</text>
+        <uni-icons type="right" size="12" color="#a17545"></uni-icons>
+      </view>
+    </view>
+
+    <!-- 2x2 Bento 资产指标大盘 -->
+    <view class="bento-grid">
+      <!-- 第一行 -->
+      <view class="grid-row ss-flex">
+        <!-- 累计收益 -->
+        <view
+          class="bento-cell ss-flex-1 ss-flex-col ss-col-center metric-item"
+          @tap="sheep.$router.go('/pages/commission/rewards')"
+        >
+          <view class="item-title">累计收益(元)</view>
+          <view class="item-detail text-accent">
+            {{ state.showMoney ? agentInfo?.total_income || userInfo?.total_income || '0.00' : '***' }}
+          </view>
         </view>
-        <view class="ss-flex" @tap="sheep.$router.go('/pages/commission/rewards')">
-          <view class="header-title ss-m-r-4">查看明细</view>
-          <text class="cicon-play-arrow"></text>
+
+        <view class="grid-v-divider"></view>
+
+        <!-- 商城余额 -->
+        <view
+          class="bento-cell ss-flex-1 ss-flex-col ss-col-center metric-item"
+          @tap="sheep.$router.go('/pages/user/wallet/money')"
+        >
+          <view class="item-title">商城余额(元)</view>
+          <view class="item-detail text-dark">
+            {{ state.showMoney ? userInfo?.money || '0.00' : '***' }}
+          </view>
         </view>
       </view>
-      <!-- 收益 -->
-      <view class="card-content">
-        <view class="metric-row ss-flex">
-          <view
-            class="ss-flex-1 ss-flex-col ss-col-center metric-item"
-            @tap="sheep.$router.go('/pages/commission/rewards')"
-          >
-            <view class="item-title">累计收益(元)</view>
-            <view class="item-detail">
-              {{ state.showMoney ? agentInfo?.total_income || userInfo?.total_income || '0.00' : '***' }}
-            </view>
-          </view>
-          <view
-            class="ss-flex-1 ss-flex-col ss-col-center metric-item"
-            @tap="sheep.$router.go('/pages/user/wallet/money')"
-          >
-            <view class="item-title">商城余额(元)</view>
-            <view class="item-detail">
-              {{ state.showMoney ? userInfo?.money || '0.00' : '***' }}
-            </view>
+
+      <view class="grid-h-divider"></view>
+
+      <!-- 第二行 -->
+      <view class="grid-row ss-flex">
+        <!-- dmepa价值 -->
+        <view
+          class="bento-cell ss-flex-1 ss-flex-col ss-col-center metric-item"
+          @tap="sheep.$router.go('/pages/commission/madow')"
+        >
+          <view class="item-title">dmepa价值(元)</view>
+          <view class="item-detail text-primary">
+            {{
+              state.showMoney
+                ? agentInfo?.madow_value || userInfo?.madow_value || '0.00'
+                : '***'
+            }}
           </view>
         </view>
-        <view class="metric-row ss-flex">
-          <view
-            class="ss-flex-1 ss-flex-col ss-col-center metric-item"
-            @tap="sheep.$router.go('/pages/commission/madow')"
-          >
-            <view class="item-title">dmepa价值(元)</view>
-            <view class="item-detail">
-              {{
-                state.showMoney
-                  ? agentInfo?.madow_value || userInfo?.madow_value || '0.00'
-                  : '***'
-              }}
-            </view>
-          </view>
-          <view
-            class="ss-flex-1 ss-flex-col ss-col-center metric-item"
-            @tap="sheep.$router.go('/pages/commission/voucher')"
-          >
-            <view class="item-title">可用兑换券(个)</view>
-            <view class="item-detail">
-              {{
-                state.showMoney
-                  ? formatVoucher(agentInfo?.voucher_available || userInfo?.voucher_available)
-                  : '***'
-              }}
-            </view>
+
+        <view class="grid-v-divider"></view>
+
+        <!-- 可用兑换券 -->
+        <view
+          class="bento-cell ss-flex-1 ss-flex-col ss-col-center metric-item"
+          @tap="sheep.$router.go('/pages/commission/voucher')"
+        >
+          <view class="item-title">可用兑换券(个)</view>
+          <view class="item-detail text-amber">
+            {{
+              state.showMoney
+                ? formatVoucher(agentInfo?.voucher_available || userInfo?.voucher_available)
+                : '***'
+            }}
           </view>
         </view>
       </view>
@@ -99,54 +114,109 @@
   .account-card {
     width: 694rpx;
     margin: 0 auto;
-    padding: 2rpx;
-    background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
-    border-radius: 12rpx;
+    box-sizing: border-box;
+    background: #ffffff;
+    border-radius: 20rpx;
+    border: 1rpx solid rgba(224, 185, 130, 0.3);
+    box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
     z-index: 3;
     position: relative;
-    .account-card-box {
-      background: #ffefd6;
-      .card-box-header {
-        padding: 0 30rpx;
-        height: 72rpx;
-        box-shadow: 0px 2px 6px #f2debe;
-        .header-title {
-          font-size: 24rpx;
-          font-weight: 500;
-          color: #a17545;
-          line-height: 30rpx;
-        }
-        .cicon-play-arrow {
-          color: #a17545;
-          font-size: 24rpx;
-          line-height: 30rpx;
+    overflow: hidden;
+
+    .card-header {
+      padding: 22rpx 28rpx 18rpx 28rpx;
+      background: linear-gradient(180deg, #fffcf6 0%, #ffffff 100%);
+      border-bottom: 1rpx solid #f6f0e4;
+
+      .header-title {
+        font-size: 26rpx;
+        font-weight: 700;
+        color: #522703;
+        line-height: 32rpx;
+      }
+
+      .eye-btn {
+        width: 44rpx;
+        height: 44rpx;
+        border-radius: 50%;
+        background: rgba(165, 122, 85, 0.08);
+        transition: opacity 0.2s;
+
+        &:active {
+          opacity: 0.7;
         }
       }
-      .card-content {
-        min-height: 220rpx;
-        background: #fdfae9;
-        padding: 16rpx 0 8rpx;
-        .metric-row {
-          padding: 12rpx 0;
-        }
-        .metric-item {
-          padding: 8rpx 0;
+
+      .detail-link-text {
+        font-size: 22rpx;
+        color: #a17545;
+        font-weight: 500;
+        margin-right: 4rpx;
+      }
+    }
+
+    .bento-grid {
+      padding: 10rpx 0;
+
+      .grid-row {
+        width: 100%;
+      }
+
+      .bento-cell {
+        padding: 22rpx 20rpx;
+        box-sizing: border-box;
+        transition: background-color 0.2s;
+
+        &:active {
+          background-color: #faf7f2;
         }
+
         .item-title {
-          font-size: 24rpx;
+          font-size: 22rpx;
+          color: #9c7b60;
+          line-height: 28rpx;
+          margin-bottom: 10rpx;
           font-weight: 500;
-          color: #cba67e;
-          line-height: 30rpx;
-          margin-bottom: 16rpx;
         }
+
         .item-detail {
-          font-size: 36rpx;
-          font-family: OPPOSANS;
-          font-weight: bold;
-          color: #692e04;
-          line-height: 30rpx;
+          font-size: 38rpx;
+          font-family: OPPOSANS, sans-serif;
+          font-weight: 700;
+          line-height: 44rpx;
+          letter-spacing: 0.5rpx;
+
+          &.text-accent {
+            color: #ff6000;
+          }
+
+          &.text-dark {
+            color: #222222;
+          }
+
+          &.text-primary {
+            color: #692e04;
+          }
+
+          &.text-amber {
+            color: #d97706;
+          }
         }
       }
+
+      .grid-v-divider {
+        width: 1rpx;
+        height: 64rpx;
+        background: #f4ecdf;
+        align-self: center;
+      }
+
+      .grid-h-divider {
+        height: 1rpx;
+        width: 638rpx;
+        margin: 0 auto;
+        background: #f4ecdf;
+      }
     }
   }
 </style>
diff --git a/uniapp/pages/commission/components/commission-info.vue b/uniapp/pages/commission/components/commission-info.vue
index 614d6a1..a2eb9e0 100644
--- a/uniapp/pages/commission/components/commission-info.vue
+++ b/uniapp/pages/commission/components/commission-info.vue
@@ -2,15 +2,18 @@
 <template>
   <!-- 用户资料 -->
   <view class="user-card ss-flex ss-col-bottom">
-    <view class="card-top ss-flex ss-row-between">
-      <view class="ss-flex">
+    <view class="card-top ss-flex ss-row-between ss-col-center ss-flex-1">
+      <view class="ss-flex ss-col-center">
         <view class="head-img-box">
           <image class="head-img" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
         </view>
-        <view class="ss-flex-col">
-          <view class="user-name">{{ userInfo.nickname }}</view>
+        <view class="ss-flex-col user-detail-col">
+          <view class="name-row ss-flex ss-col-center">
+            <text class="user-name">{{ userInfo.nickname || '分销合伙人' }}</text>
+            <text v-if="userInfo.id" class="user-id-pill">ID: {{ userInfo.id }}</text>
+          </view>
           <view class="user-info-box ss-flex ss-col-center ss-flex-wrap">
-            <view class="tag-box ss-flex" v-if="agentInfo.level_info">
+            <view class="tag-box ss-flex ss-col-center" v-if="agentInfo.level_info || levelTitle">
               <image
                 v-if="agentInfo.level_info?.image"
                 class="tag-img"
@@ -22,9 +25,7 @@
             </view>
             <view v-if="agentInfo.is_venue || agentInfo.identities?.includes('venue')" class="mini-tag">{{ roleNames.venue || '酒道馆' }}</view>
             <view v-if="agentInfo.is_county || agentInfo.identities?.includes('county')" class="mini-tag">{{ roleNames.county || '区县' }}</view>
-            <view v-if="agentInfo.is_partner || agentInfo.identities?.includes('partner')" class="mini-tag">{{ roleNames.partner || '合伙股东' }}</view>
-            <view class="ss-iconfont uicon-arrow-right" style="color: #fff; font-size: 28rpx">
-            </view>
+            <view v-if="agentInfo.is_partner || agentInfo.identities?.includes('partner')" class="mini-tag">{{ roleNames.partner || '团队成员' }}</view>
           </view>
         </view>
       </view>
@@ -34,7 +35,7 @@
 
 <script setup>
   import sheep from '@/sheep';
-  import { computed, reactive } from 'vue';
+  import { computed } from 'vue';
 
   const userInfo = computed(() => sheep.$store('user').userInfo);
   const agentInfo = computed(() => sheep.$store('user').agentInfo);
@@ -64,102 +65,115 @@
     }
     return rawName || '';
   });
-
-  const state = reactive({
-    showMoney: false,
-  });
 </script>
 
 <style lang="scss" scoped>
   // 用户资料卡片
   .user-card {
-    width: 690rpx;
-    min-height: 192rpx;
+    width: 694rpx;
+    min-height: 196rpx;
     height: auto;
-    margin: -88rpx 20rpx 0 20rpx;
-    padding-top: 88rpx;
+    margin: -88rpx auto 0;
+    padding: 92rpx 30rpx 28rpx 30rpx;
+    box-sizing: border-box;
     background: v-bind(headerBg) no-repeat;
     background-size: 100% 100%;
-
-    .head-img-box {
-      margin-right: 20rpx;
-      width: 100rpx;
-      height: 100rpx;
-      border-radius: 50%;
-      position: relative;
-      background: #fce0ad;
-
-      .head-img {
-        width: 92rpx;
-        height: 92rpx;
-        border-radius: 50%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-    }
+    position: relative;
+    z-index: 3;
 
     .card-top {
       box-sizing: border-box;
-      padding-bottom: 34rpx;
-      .user-name {
-        font-size: 32rpx;
-        font-weight: bold;
-        color: #692e04;
-        line-height: 30rpx;
-        margin-bottom: 20rpx;
-      }
 
-      .log-btn {
-        width: 84rpx;
-        height: 42rpx;
-        border: 2rpx solid rgba(#ffffff, 0.33);
-        border-radius: 21rpx;
-        font-size: 22rpx;
-        font-weight: 400;
-        color: #ffffff;
-        margin-bottom: 20rpx;
-      }
+      .head-img-box {
+        margin-right: 22rpx;
+        width: 100rpx;
+        height: 100rpx;
+        border-radius: 50%;
+        position: relative;
+        background: #fce0ad;
+        box-shadow: 0 4rpx 14rpx rgba(105, 46, 4, 0.15);
+        flex-shrink: 0;
 
-      .look-btn {
-        color: #fff;
-        width: 40rpx;
-        height: 40rpx;
-      }
-    }
-
-    .user-info-box {
-      .tag-box {
-        background: #ff6000;
-        border-radius: 18rpx;
-        line-height: 36rpx;
-
-        .tag-img {
-          width: 36rpx;
-          height: 36rpx;
+        .head-img {
+          width: 94rpx;
+          height: 94rpx;
           border-radius: 50%;
-          margin-left: -2rpx;
-        }
-
-        .tag-title {
-          font-size: 24rpx;
-          padding: 0 10rpx;
-          font-weight: 500;
-          line-height: 36rpx;
-          color: #fff;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          border: 2rpx solid #ffffff;
         }
       }
 
-      .mini-tag {
-        margin-left: 8rpx;
-        padding: 0 12rpx;
-        height: 36rpx;
-        line-height: 36rpx;
-        border-radius: 18rpx;
-        background: rgba(255, 255, 255, 0.28);
-        font-size: 22rpx;
-        color: #692e04;
+      .user-detail-col {
+        justify-content: center;
+      }
+
+      .name-row {
+        margin-bottom: 12rpx;
+
+        .user-name {
+          font-size: 32rpx;
+          font-weight: 700;
+          color: #522703;
+          line-height: 38rpx;
+          max-width: 360rpx;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .user-id-pill {
+          margin-left: 14rpx;
+          font-size: 20rpx;
+          font-family: OPPOSANS, sans-serif;
+          color: #8c531b;
+          background: rgba(255, 255, 255, 0.45);
+          padding: 2rpx 12rpx;
+          border-radius: 14rpx;
+          font-weight: 500;
+        }
+      }
+
+      .user-info-box {
+        gap: 8rpx;
+
+        .tag-box {
+          background: linear-gradient(135deg, #ff6b1a 0%, #ff5000 100%);
+          border-radius: 20rpx;
+          height: 36rpx;
+          padding-right: 12rpx;
+          box-shadow: 0 2rpx 6rpx rgba(255, 80, 0, 0.25);
+
+          .tag-img {
+            width: 36rpx;
+            height: 36rpx;
+            border-radius: 50%;
+            margin-right: 4rpx;
+          }
+
+          .tag-title {
+            font-size: 22rpx;
+            padding: 0 4rpx;
+            font-weight: 600;
+            line-height: 36rpx;
+            color: #ffffff;
+          }
+        }
+
+        .mini-tag {
+          padding: 0 14rpx;
+          height: 36rpx;
+          line-height: 36rpx;
+          border-radius: 18rpx;
+          background: rgba(255, 255, 255, 0.55);
+          backdrop-filter: blur(4px);
+          font-size: 20rpx;
+          font-weight: 600;
+          color: #692e04;
+          border: 1rpx solid rgba(255, 255, 255, 0.6);
+        }
       }
     }
   }
diff --git a/uniapp/pages/commission/components/commission-log.vue b/uniapp/pages/commission/components/commission-log.vue
index 6d0fcc9..f5e5348 100644
--- a/uniapp/pages/commission/components/commission-log.vue
+++ b/uniapp/pages/commission/components/commission-log.vue
@@ -1,64 +1,62 @@
-<!-- 分销明细  -->
+<!-- 分销明细实时动态 -->
 <template>
   <view class="distribution-log-wrap">
-    <view class="header-box">
-      <image
-        class="header-bg"
-        :src="sheep.$url.static('/assets/addons/shopro/uniapp/commission/title2.png')"
-      />
-      <view class="ss-flex header-title">
-        <view class="title">实时动态</view>
-        <text class="cicon-forward"></text>
+    <!-- 头部栏 -->
+    <view class="log-header ss-flex ss-row-between ss-col-center">
+      <view class="header-left ss-flex ss-col-center">
+        <view class="title-bar"></view>
+        <text class="title">实时动态</text>
       </view>
+      <text class="sub-hint">团队实时变动</text>
     </view>
+
+    <!-- 滚动列表 -->
     <scroll-view
       scroll-y="true"
       @scrolltolower="loadmore"
       class="scroll-box log-scroll"
       scroll-with-animation="true"
     >
-      <view v-if="state.pagination.data">
+      <view v-if="state.pagination.data && state.pagination.data.length > 0">
         <view
-          class="log-item-box ss-flex ss-row-between"
+          class="log-item-box ss-flex ss-row-between ss-col-center"
           v-for="item in state.pagination.data"
           :key="item.id"
         >
-          <view class="log-item-wrap">
-            <view class="log-item ss-flex ss-ellipsis-1 ss-col-center">
-              <view class="ss-flex ss-col-center">
-                <image
-                  v-if="item.oper_type === 'user'"
-                  class="log-img"
-                  :src="sheep.$url.cdn(item.oper?.avatar)"
-                  mode="aspectFill"
-                ></image>
-                <image
-                  v-else-if="item.oper_type === 'admin'"
-                  class="log-img"
-                  :src="
-                    sheep.$url.static('/assets/addons/shopro/uniapp/avatar/default_user.png')
-                  "
-                  mode="aspectFill"
-                ></image>
-                <image
-                  v-else
-                  class="log-img"
-                  :src="sheep.$url.static('/assets/addons/shopro/uniapp/avatar/notice.png')"
-                  mode="aspectFill"
-                ></image>
-              </view>
-              <view class="log-text ss-ellipsis-1">{{ item.remark }}</view>
-            </view>
+          <view class="log-item-left ss-flex ss-col-center ss-flex-1 ss-line-1">
+            <image
+              v-if="item.oper_type === 'user'"
+              class="log-img"
+              :src="sheep.$url.cdn(item.oper?.avatar)"
+              mode="aspectFill"
+            ></image>
+            <image
+              v-else-if="item.oper_type === 'admin'"
+              class="log-img"
+              :src="sheep.$url.static('/assets/addons/shopro/uniapp/avatar/default_user.png')"
+              mode="aspectFill"
+            ></image>
+            <image
+              v-else
+              class="log-img"
+              :src="sheep.$url.static('/assets/addons/shopro/uniapp/avatar/notice.png')"
+              mode="aspectFill"
+            ></image>
+            <text class="log-text ss-line-1">{{ item.remark }}</text>
           </view>
-          <text class="log-time">{{ dayjs(item.createtime).fromNow() }}</text>
+          <text class="log-time ss-m-l-16">{{ dayjs(item.createtime).fromNow() }}</text>
         </view>
       </view>
 
+      <view v-else class="empty-wrap ss-flex ss-row-center ss-col-center">
+        <text class="empty-text">暂无团队实时动态</text>
+      </view>
+
       <!-- 加载更多 -->
       <uni-load-more
         v-if="state.pagination.total > 0"
         :status="state.loadStatus"
-        color="#333333"
+        color="#999999"
         @tap="loadmore"
       />
     </scroll-view>
@@ -67,7 +65,7 @@
 
 <script setup>
   import sheep from '@/sheep';
-  import { computed, reactive } from 'vue';
+  import { reactive } from 'vue';
   import _ from 'lodash';
   import dayjs from 'dayjs';
 
@@ -98,6 +96,7 @@
       }
     }
   }
+
   getLog();
 
   // 加载更多
@@ -110,80 +109,95 @@
 
 <style lang="scss" scoped>
   .distribution-log-wrap {
-    width: 690rpx;
-    margin: 0 auto;
-    margin-bottom: 20rpx;
-    border-radius: 12rpx;
+    width: 694rpx;
+    margin: 0 auto 30rpx;
+    background: #ffffff;
+    border-radius: 20rpx;
+    border: 1rpx solid rgba(224, 185, 130, 0.3);
+    box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
     z-index: 3;
     position: relative;
-    .header-box {
-      width: 690rpx;
-      height: 76rpx;
-      position: relative;
-      .header-bg {
-        width: 690rpx;
-        height: 76rpx;
-      }
-      .header-title {
-        position: absolute;
-        left: 20rpx;
-        top: 24rpx;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  .log-header {
+    padding: 22rpx 28rpx 18rpx 28rpx;
+    background: linear-gradient(180deg, #fffcf6 0%, #ffffff 100%);
+    border-bottom: 1rpx solid #f6f0e4;
+
+    .header-left {
+      .title-bar {
+        width: 6rpx;
+        height: 24rpx;
+        border-radius: 4rpx;
+        background: linear-gradient(180deg, #ff6000 0%, #ff9500 100%);
+        margin-right: 12rpx;
       }
+
       .title {
-        font-size: 28rpx;
-        font-weight: 500;
-        color: #ffffff;
-        line-height: 30rpx;
-      }
-      .cicon-forward {
-        font-size: 30rpx;
-        font-weight: 400;
-        color: #ffffff;
-        line-height: 30rpx;
+        font-size: 26rpx;
+        font-weight: 700;
+        color: #522703;
+        line-height: 32rpx;
       }
     }
-    .log-scroll {
-      height: 600rpx;
-      background: #fdfae9;
-      padding: 10rpx 20rpx 0;
-      box-sizing: border-box;
-      border-radius: 0 0 12rpx 12rpx;
 
-      .log-item-box {
-        margin-bottom: 20rpx;
-        .log-time {
-          // margin-left: 30rpx;
-          text-align: right;
-          font-size: 24rpx;
-          font-family: OPPOSANS;
-          font-weight: 400;
-          color: #c4c4c4;
-        }
+    .sub-hint {
+      font-size: 22rpx;
+      color: #b5906a;
+      font-weight: 500;
+    }
+  }
+
+  .log-scroll {
+    max-height: 520rpx;
+    background: #ffffff;
+    padding: 8rpx 28rpx 20rpx;
+    box-sizing: border-box;
+
+    .log-item-box {
+      padding: 20rpx 0;
+      border-bottom: 1rpx solid #faf6f0;
+
+      &:last-child {
+        border-bottom: none;
       }
 
-      .loadmore-wrap {
-        // line-height: 80rpx;
-      }
-
-      .log-item {
-        // background: rgba(#ffffff, 0.2);
-        border-radius: 24rpx;
-        padding: 6rpx 20rpx 6rpx 12rpx;
-
+      .log-item-left {
         .log-img {
-          width: 40rpx;
-          height: 40rpx;
+          width: 48rpx;
+          height: 48rpx;
           border-radius: 50%;
-          margin-right: 10rpx;
+          margin-right: 14rpx;
+          flex-shrink: 0;
+          background: #f5f5f5;
         }
 
         .log-text {
-          max-width: 480rpx;
           font-size: 24rpx;
-          font-weight: 500;
           color: #333333;
+          font-weight: 500;
+          line-height: 34rpx;
         }
       }
+
+      .log-time {
+        font-size: 22rpx;
+        font-family: OPPOSANS, sans-serif;
+        color: #a1a1aa;
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+    }
+
+    .empty-wrap {
+      padding: 60rpx 0;
+
+      .empty-text {
+        font-size: 24rpx;
+        color: #c4c4c4;
+      }
     }
   }
 </style>
diff --git a/uniapp/pages/commission/components/commission-menu.vue b/uniapp/pages/commission/components/commission-menu.vue
index e1ac4f3..750ae76 100644
--- a/uniapp/pages/commission/components/commission-menu.vue
+++ b/uniapp/pages/commission/components/commission-menu.vue
@@ -1,13 +1,16 @@
-<!-- 分销商菜单栏 -->
+<!-- 分销商功能专区菜单栏 -->
 <template>
   <view class="menu-box ss-flex-col">
-    <view class="header-box">
-      <image class="header-bg" :src="sheep.$url.static('/assets/addons/shopro/uniapp/commission/title1.png')" />
-      <view class="ss-flex header-title">
-        <view class="title">功能专区</view>
-        <text class="cicon-forward"></text>
+    <!-- 头部栏 -->
+    <view class="menu-header ss-flex ss-row-between ss-col-center">
+      <view class="header-left ss-flex ss-col-center">
+        <view class="title-bar"></view>
+        <text class="title">功能专区</text>
       </view>
+      <text class="sub-hint">快捷业务入口</text>
     </view>
+
+    <!-- 菜单网格 -->
     <view class="menu-list ss-flex ss-flex-wrap">
       <view
         v-for="(item, index) in menuList"
@@ -15,11 +18,13 @@
         class="item-box ss-flex-col ss-col-center"
         @tap="sheep.$router.go(item.path)"
       >
-        <image
-          class="menu-icon ss-m-b-10"
-          :src="sheep.$url.static(item.img)"
-          mode="aspectFill"
-        ></image>
+        <view class="icon-wrap ss-flex ss-row-center ss-col-center">
+          <image
+            class="menu-icon"
+            :src="sheep.$url.static(item.img)"
+            mode="aspectFill"
+          ></image>
+        </view>
         <view class="menu-title">{{ item.title }}</view>
       </view>
     </view>
@@ -32,58 +37,58 @@
 
   const userInfo = computed(() => sheep.$store('user').userInfo);
   const allMenus = [
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon1.png',
-        title: '我的团队',
-        path: '/pages/commission/team',
-      },
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
-        title: '收益明细',
-        path: '/pages/commission/rewards',
-      },
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
-        title: '我的收益',
-        path: '/pages/user/wallet/commission',
-      },
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon3.png',
-        title: '我的dmepa',
-        path: '/pages/commission/madow',
-      },
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon5.png',
-        title: '兑换券',
-        path: '/pages/commission/voucher',
-      },
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon3.png',
-        title: '推广订单',
-        path: '/pages/commission/order',
-      },
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon7.png',
-        title: '邀请海报',
-        path: 'action:showShareModal',
-      },
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon8.png',
-        title: '分享记录',
-        path: '/pages/commission/share-log',
-      },
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon5.png',
-        title: '我的资料',
-        path: '/pages/commission/apply',
-        isAgentFrom: true,
-      },
-      {
-        img: '/assets/addons/shopro/uniapp/commission/commission_icon4.png',
-        title: '推广商品',
-        path: '/pages/commission/goods',
-        hideInPartner: true,
-      },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon1.png',
+      title: '我的团队',
+      path: '/pages/commission/team',
+    },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
+      title: '收益明细',
+      path: '/pages/commission/rewards',
+    },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon2.png',
+      title: '我的收益',
+      path: '/pages/user/wallet/commission',
+    },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon3.png',
+      title: '我的dmepa',
+      path: '/pages/commission/madow',
+    },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon5.png',
+      title: '兑换券',
+      path: '/pages/commission/voucher',
+    },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon3.png',
+      title: '推广订单',
+      path: '/pages/commission/order',
+    },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon7.png',
+      title: '邀请海报',
+      path: 'action:showShareModal',
+    },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon8.png',
+      title: '分享记录',
+      path: '/pages/commission/share-log',
+    },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon5.png',
+      title: '我的资料',
+      path: '/pages/commission/apply',
+      isAgentFrom: true,
+    },
+    {
+      img: '/assets/addons/shopro/uniapp/commission/commission_icon4.png',
+      title: '推广商品',
+      path: '/pages/commission/goods',
+      hideInPartner: true,
+    },
   ];
 
   const menuList = computed(() =>
@@ -97,62 +102,82 @@
 
 <style lang="scss" scoped>
   .menu-box {
-    margin: 0 auto;
-    width: 690rpx;
-    margin-bottom: 20rpx;
-    margin-top: 20rpx;
-    border-radius: 12rpx;
+    width: 694rpx;
+    margin: 0 auto 20rpx;
+    background: #ffffff;
+    border-radius: 20rpx;
+    border: 1rpx solid rgba(224, 185, 130, 0.3);
+    box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
     z-index: 3;
     position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
   }
-  .header-box {
-    width: 690rpx;
-    height: 76rpx;
-    position: relative;
-    .header-bg {
-      width: 690rpx;
-      height: 76rpx;
+
+  .menu-header {
+    padding: 22rpx 28rpx 18rpx 28rpx;
+    background: linear-gradient(180deg, #fffcf6 0%, #ffffff 100%);
+    border-bottom: 1rpx solid #f6f0e4;
+
+    .header-left {
+      .title-bar {
+        width: 6rpx;
+        height: 24rpx;
+        border-radius: 4rpx;
+        background: linear-gradient(180deg, #ff6000 0%, #ff9500 100%);
+        margin-right: 12rpx;
+      }
+
+      .title {
+        font-size: 26rpx;
+        font-weight: 700;
+        color: #522703;
+        line-height: 32rpx;
+      }
     }
-    .header-title {
-      position: absolute;
-      left: 20rpx;
-      top: 24rpx;
-    }
-    .title {
-      font-size: 28rpx;
+
+    .sub-hint {
+      font-size: 22rpx;
+      color: #b5906a;
       font-weight: 500;
-      color: #ffffff;
-      line-height: 30rpx;
-    }
-    .cicon-forward {
-      font-size: 30rpx;
-      font-weight: 400;
-      color: #ffffff;
-      line-height: 30rpx;
     }
   }
 
   .menu-list {
-    padding: 30rpx 0 10rpx 0;
-    background: #fdfae9;
-    border-radius: 0 0 12rpx 12rpx;
+    padding: 28rpx 12rpx 10rpx 12rpx;
+    background: #ffffff;
   }
+
   .item-box {
     width: 25%;
     margin-bottom: 30rpx;
-  }
+    transition: transform 0.15s ease;
 
-  .menu-icon {
-    width: 68rpx;
-    height: 68rpx;
-    border-radius: 50%;
-  }
+    &:active {
+      transform: scale(0.93);
+    }
 
-  .menu-title {
-    font-size: 24rpx;
-    font-weight: 500;
-    color: #595959;
-    line-height: 32rpx;
-    text-align: center;
+    .icon-wrap {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      background: #faf6f0;
+      box-shadow: 0 2rpx 8rpx rgba(105, 46, 4, 0.06);
+    }
+
+    .menu-icon {
+      width: 76rpx;
+      height: 76rpx;
+      border-radius: 50%;
+    }
+
+    .menu-title {
+      font-size: 24rpx;
+      font-weight: 500;
+      color: #333333;
+      line-height: 32rpx;
+      text-align: center;
+      margin-top: 12rpx;
+    }
   }
 </style>
diff --git a/uniapp/pages/commission/index.vue b/uniapp/pages/commission/index.vue
index dc23c28..06a5b45 100644
--- a/uniapp/pages/commission/index.vue
+++ b/uniapp/pages/commission/index.vue
@@ -278,93 +278,94 @@
     background-size: 100% 100% !important;
   }
 
+  // 30 天收益保活与预警倒计时看板
   .active-countdown-card {
     width: 694rpx;
-    margin: 16rpx auto 0;
-    padding: 24rpx 28rpx;
+    margin: 16rpx auto 20rpx;
+    padding: 22rpx 26rpx;
     box-sizing: border-box;
-    border-radius: 16rpx;
+    border-radius: 20rpx;
     position: relative;
     z-index: 3;
     transition: all 0.3s ease;
+    box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
 
-    // 正常活跃状态
+    // 正常活跃状态 (翡翠绿主题)
     &.status-active {
-      background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
-      border: 1rpx solid #bbf7d0;
-      box-shadow: 0 4rpx 16rpx rgba(187, 247, 208, 0.35);
+      background: linear-gradient(135deg, #f7fdf9 0%, #ffffff 100%);
+      border: 1rpx solid rgba(16, 185, 129, 0.25);
 
       .status-icon-box {
-        background: #dcfce7;
+        background: #ecfdf5;
       }
       .status-title-text {
         color: #166534;
       }
       .pill-active {
-        background: #dcfce7;
-        color: #15803d;
+        background: #ecfdf5;
+        color: #059669;
+        border: 1rpx solid rgba(16, 185, 129, 0.2);
       }
       .btn-active {
-        background: #059669;
+        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
         color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(5, 150, 105, 0.25);
       }
       .digit-box {
-        background: #ecfdf5;
-        border: 1rpx solid #a7f3d0;
+        background: #ffffff;
+        border: 1rpx solid #bbf7d0;
         .num {
+          color: #059669;
+        }
+        .unit {
           color: #047857;
         }
-        .unit {
-          color: #065f46;
-        }
       }
       .colon {
-        color: #059669;
+        color: #10b981;
       }
     }
 
-    // 临期预警状态
+    // 临期预警状态 (琥珀橙主题)
     &.status-expiring {
-      background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
-      border: 1rpx solid #fed7aa;
-      box-shadow: 0 4rpx 18rpx rgba(253, 186, 116, 0.45);
+      background: linear-gradient(135deg, #fffcf5 0%, #ffffff 100%);
+      border: 1rpx solid rgba(245, 158, 11, 0.28);
 
       .status-icon-box {
-        background: #ffedd5;
+        background: #fef3c7;
       }
       .status-title-text {
-        color: #9a3412;
+        color: #92400e;
       }
       .pill-expiring {
-        background: #ffedd5;
-        color: #c2410c;
-        font-weight: bold;
+        background: #fffbeb;
+        color: #d97706;
+        border: 1rpx solid rgba(245, 158, 11, 0.25);
       }
       .btn-expiring {
-        background: linear-gradient(90deg, #ea580c 0%, #f97316 100%);
+        background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
         color: #ffffff;
-        box-shadow: 0 4rpx 12rpx rgba(234, 88, 12, 0.3);
+        box-shadow: 0 4rpx 14rpx rgba(234, 88, 12, 0.28);
       }
       .digit-box {
-        background: #ffedd5;
-        border: 1rpx solid #fdba74;
+        background: #ffffff;
+        border: 1rpx solid #fed7aa;
         .num {
-          color: #c2410c;
+          color: #ea580c;
         }
         .unit {
-          color: #9a3412;
+          color: #c2410c;
         }
       }
       .colon {
-        color: #ea580c;
+        color: #f97316;
       }
     }
 
-    // 奖励暂停状态
+    // 奖励暂停状态 (玫瑰红主题)
     &.status-inactive {
-      background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
-      border: 1rpx solid #fecaca;
-      box-shadow: 0 4rpx 16rpx rgba(254, 202, 202, 0.35);
+      background: linear-gradient(135deg, #fdf8f8 0%, #ffffff 100%);
+      border: 1rpx solid rgba(239, 68, 68, 0.25);
 
       .status-icon-box {
         background: #fee2e2;
@@ -373,22 +374,24 @@
         color: #991b1b;
       }
       .pill-inactive {
-        background: #fee2e2;
-        color: #b91c1c;
+        background: #fef2f2;
+        color: #dc2626;
+        border: 1rpx solid rgba(239, 68, 68, 0.2);
       }
       .btn-inactive {
-        background: #dc2626;
+        background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
         color: #ffffff;
+        box-shadow: 0 4rpx 12rpx rgba(220, 38, 38, 0.25);
       }
     }
 
     .card-header {
       .status-icon-box {
-        width: 48rpx;
-        height: 48rpx;
-        border-radius: 24rpx;
+        width: 44rpx;
+        height: 44rpx;
+        border-radius: 50%;
         .icon-symbol {
-          font-size: 26rpx;
+          font-size: 24rpx;
           font-weight: bold;
         }
         .text-green { color: #059669; }
@@ -397,56 +400,66 @@
       }
 
       .status-title-text {
-        font-size: 28rpx;
-        font-weight: bold;
+        font-size: 26rpx;
+        font-weight: 700;
+        line-height: 32rpx;
       }
 
       .status-pill {
         font-size: 20rpx;
-        padding: 4rpx 14rpx;
-        border-radius: 20rpx;
-        font-weight: 500;
+        padding: 2rpx 12rpx;
+        border-radius: 12rpx;
+        font-weight: 600;
+        line-height: 28rpx;
       }
 
       .action-btn {
-        height: 52rpx;
+        height: 50rpx;
         padding: 0 24rpx;
-        border-radius: 26rpx;
+        border-radius: 25rpx;
         font-size: 22rpx;
-        font-weight: 500;
+        font-weight: 600;
         white-space: nowrap;
         flex-shrink: 0;
+        transition: opacity 0.2s;
+
+        &:active {
+          opacity: 0.85;
+        }
       }
     }
 
     .card-body {
       .countdown-row {
-        background: rgba(255, 255, 255, 0.7);
-        padding: 12rpx 16rpx;
-        border-radius: 10rpx;
+        background: rgba(255, 255, 255, 0.9);
+        padding: 12rpx 18rpx;
+        border-radius: 14rpx;
+        border: 1rpx solid rgba(0, 0, 0, 0.03);
 
         .countdown-label {
           .label-prefix {
-            font-size: 24rpx;
+            font-size: 22rpx;
             color: #64748b;
+            font-weight: 500;
           }
           .label-days-highlight {
-            font-size: 30rpx;
-            font-weight: bold;
+            font-size: 32rpx;
+            font-weight: 700;
             color: #0f172a;
             margin: 0 2rpx;
-            font-family: OPPOSANS;
+            font-family: OPPOSANS, sans-serif;
           }
           .label-days-text {
             font-size: 22rpx;
             color: #475569;
+            font-weight: 500;
           }
         }
 
         .timer-digits {
           .digit-box {
-            padding: 4rpx 8rpx;
-            border-radius: 6rpx;
+            padding: 4rpx 10rpx;
+            border-radius: 8rpx;
             display: flex;
             align-items: baseline;
             min-width: 52rpx;
@@ -455,31 +468,33 @@
             .num {
               font-family: OPPOSANS, DIN, monospace;
               font-size: 24rpx;
-              font-weight: bold;
+              font-weight: 700;
             }
             .unit {
               font-size: 18rpx;
               margin-left: 2rpx;
+              font-weight: 500;
             }
           }
 
           .colon {
-            font-weight: bold;
-            font-size: 24rpx;
+            font-weight: 700;
+            font-size: 22rpx;
             margin: 0 4rpx;
           }
         }
       }
 
       .inactive-row {
-        background: rgba(254, 226, 226, 0.4);
+        background: rgba(254, 242, 242, 0.6);
         padding: 14rpx 18rpx;
-        border-radius: 10rpx;
+        border-radius: 12rpx;
+        border: 1rpx solid rgba(239, 68, 68, 0.1);
 
         .inactive-desc {
-          font-size: 24rpx;
+          font-size: 22rpx;
           color: #991b1b;
-          line-height: 34rpx;
+          line-height: 32rpx;
         }
       }
 
@@ -494,44 +509,51 @@
         }
 
         .footer-tip-text {
-          font-size: 22rpx;
+          font-size: 20rpx;
           color: #64748b;
         }
 
         .footer-right-time {
           font-size: 20rpx;
           color: #94a3b8;
-          font-family: OPPOSANS;
+          font-family: OPPOSANS, sans-serif;
           flex-shrink: 0;
         }
       }
     }
   }
 
+  // 团队作战快捷看板
   .team-quick-card {
     width: 694rpx;
-    margin: 20rpx auto 0;
-    padding: 22rpx 28rpx;
+    margin: 20rpx auto;
+    padding: 22rpx 26rpx;
     box-sizing: border-box;
-    background: linear-gradient(135deg, #ffffff 0%, #fffbf0 100%);
-    border-radius: 16rpx;
-    border: 1rpx solid #ffe8c2;
-    box-shadow: 0 4rpx 16rpx rgba(247, 213, 152, 0.25);
+    background: linear-gradient(135deg, #ffffff 0%, #fffdfa 100%);
+    border-radius: 20rpx;
+    border: 1rpx solid rgba(224, 185, 130, 0.3);
+    box-shadow: 0 6rpx 20rpx rgba(105, 46, 4, 0.05);
     position: relative;
     z-index: 3;
+    transition: background-color 0.2s;
+
+    &:active {
+      background-color: #faf7f2;
+    }
 
     .icon-wrap {
       width: 72rpx;
       height: 72rpx;
-      border-radius: 36rpx;
-      background: #fff0e6;
+      border-radius: 20rpx;
+      background: rgba(255, 96, 0, 0.08);
+      flex-shrink: 0;
     }
 
     .team-quick-info {
       .title-bold {
         font-size: 28rpx;
-        font-weight: bold;
-        color: #692e04;
+        font-weight: 700;
+        color: #522703;
       }
       .active-badge {
         font-size: 20rpx;
@@ -539,15 +561,17 @@
         border-radius: 12rpx;
         background: #ecfdf5;
         color: #059669;
-        font-weight: 500;
+        font-weight: 600;
+        border: 1rpx solid rgba(16, 185, 129, 0.2);
       }
       .amber-badge {
         font-size: 20rpx;
         padding: 2rpx 10rpx;
         border-radius: 12rpx;
-        background: #ffedd5;
-        color: #c2410c;
-        font-weight: 500;
+        background: #fffbeb;
+        color: #d97706;
+        font-weight: 600;
+        border: 1rpx solid rgba(245, 158, 11, 0.25);
       }
       .warn-badge {
         font-size: 20rpx;
@@ -555,19 +579,22 @@
         border-radius: 12rpx;
         background: #fef2f2;
         color: #dc2626;
-        font-weight: 500;
+        font-weight: 600;
+        border: 1rpx solid rgba(239, 68, 68, 0.2);
       }
       .team-sub {
         font-size: 22rpx;
-        color: #a17545;
-        font-family: OPPOSANS;
+        color: #9c7b60;
+        font-family: OPPOSANS, sans-serif;
       }
     }
 
     .team-quick-right {
+      flex-shrink: 0;
+
       .manage-text {
-        font-size: 24rpx;
-        font-weight: 500;
+        font-size: 22rpx;
+        font-weight: 600;
         color: #ff6000;
         margin-right: 4rpx;
       }