From f78d39b0601db321b327db5a2912acfc586f9c3a Mon Sep 17 00:00:00 2001
From: chen <chen@example.com>
Date: Sat, 19 Sep 2026 15:59:26 +0800
Subject: [PATCH] =?UTF-8?q?style(commission):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E5=9B=A2=E9=98=9F=E4=BD=9C=E6=88=98=E4=B8=AD=E5=BF=83=E4=B8=BA?=
 =?UTF-8?q?=E7=8E=B0=E4=BB=A3=E7=AE=80=E7=BA=A6Bento=E5=A4=A7=E7=9B=98?=
 =?UTF-8?q?=E6=8E=92=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 uniapp/pages/commission/team.vue | 693 +++++++++++++++++--------------
 1 file changed, 390 insertions(+), 303 deletions(-)

diff --git a/uniapp/pages/commission/team.vue b/uniapp/pages/commission/team.vue
index 0747520..0377c81 100644
--- a/uniapp/pages/commission/team.vue
+++ b/uniapp/pages/commission/team.vue
@@ -1,106 +1,125 @@
 <!-- 团队作战管理中心  -->
 <template>
   <s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" navbar="inner">
-    <!-- 头部看板区 -->
+    <!-- 头部看板区：一体化商务风 Bento 仪表盘 -->
     <view
       class="header-box"
       :style="[
         {
           marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
-          paddingTop: Number(statusBarHeight + 108) + 'rpx',
+          paddingTop: Number(statusBarHeight + 96) + 'rpx',
         },
       ]"
     >
-      <!-- 推荐人 -->
-      <view v-if="userInfo.parent_user" class="referrer-box ss-flex ss-col-center">
-        <text class="referrer-label">推荐人：</text>
-        <image
-          class="referrer-avatar ss-m-r-10"
-          :src="sheep.$url.cdn(userInfo.parent_user.avatar)"
-          mode="aspectFill"
-        ></image>
-        <text class="referrer-name">{{ userInfo.parent_user.nickname }}</text>
-      </view>
-
-      <!-- 专属邀请码与拓展卡片 -->
-      <view class="invite-action-card ss-flex ss-row-between ss-col-center">
-        <view class="invite-code-wrap ss-flex ss-col-center">
-          <text class="invite-label">专属邀请码：</text>
-          <text class="invite-code">HL{{ userInfo.id || '---' }}</text>
-          <button class="ss-reset-button copy-code-btn ss-m-l-10" @tap="onCopyInviteCode">复制</button>
+      <!-- 顶部快捷操作栏：推荐人徽章 + 专属邀请码与邀请海报 -->
+      <view class="top-nav-bar ss-flex ss-row-between ss-col-center">
+        <!-- 推荐人 -->
+        <view v-if="userInfo.parent_user" class="referrer-pill ss-flex ss-col-center">
+          <text class="referrer-label">推荐人：</text>
+          <image
+            class="referrer-avatar ss-m-r-8"
+            :src="sheep.$url.cdn(userInfo.parent_user.avatar)"
+            mode="aspectFill"
+          ></image>
+          <text class="referrer-name ss-line-1">{{ userInfo.parent_user.nickname }}</text>
         </view>
-        <view class="invite-btn-group ss-flex ss-col-center">
-          <button class="ss-reset-button invite-btn-poster ss-flex ss-col-center" @tap="onOpenShareModal">
-            <uni-icons type="image" size="14" color="#ffffff"></uni-icons>
-            <text class="ss-m-l-6">邀请海报</text>
-          </button>
-        </view>
-      </view>
-
-      <!-- 团队核心数据总览卡片（直推人数 与 团队总人数） -->
-      <view class="team-data-box ss-flex ss-col-center ss-row-between">
-        <!-- 直推人数卡片 -->
-        <view class="data-card ss-flex-1 ss-m-r-16">
-          <view class="item-title">
-            {{ currentDrillUser ? (currentDrillUser.nickname + '的直推（人）') : '直推人数（人）' }}
-          </view>
-          <view class="total-num text-orange">
-            {{ getDirectCount() }}
-          </view>
+        <view v-else class="team-brand-pill ss-flex ss-col-center">
+          <uni-icons type="staff-filled" size="14" color="#ffffff"></uni-icons>
+          <text class="brand-text ss-m-l-6">团队作战中心</text>
         </view>
 
-        <!-- 团队总人数卡片 -->
-        <view class="data-card ss-flex-1">
-          <view class="item-title">
-            {{ currentDrillUser ? (currentDrillUser.nickname + '的团队（人）') : '团队总人数（人）' }}
+        <!-- 专属邀请码与拓展卡片 -->
+        <view class="invite-action-card ss-flex ss-col-center">
+          <view class="invite-code-wrap ss-flex ss-col-center" @tap="onCopyInviteCode">
+            <text class="invite-label">专属邀请码：</text>
+            <text class="invite-code">HL{{ userInfo.id || '---' }}</text>
+            <button class="ss-reset-button copy-code-btn ss-m-l-8" @tap.stop="onCopyInviteCode">复制</button>
           </view>
-          <view class="total-num">
-            {{ getTeamCount() }}
+          <view class="invite-btn-group ss-flex ss-col-center ss-m-l-10">
+            <button class="ss-reset-button invite-btn-poster ss-flex ss-col-center" @tap="onOpenShareModal">
+              <uni-icons type="image" size="13" color="#ffffff"></uni-icons>
+              <text class="ss-m-l-4">海报</text>
+            </button>
           </view>
         </view>
       </view>
 
-      <!-- 团队收益与业绩统计大盘 -->
-      <view class="team-wealth-box ss-flex ss-col-center ss-row-between">
-        <view class="wealth-card ss-flex-1 ss-m-r-16">
-          <view class="wealth-title">团队贡献总收益(元)</view>
-          <view class="wealth-num text-orange">¥{{ state.summary.team_total_reward || '0.00' }}</view>
-          <view class="wealth-sub">本月贡献: ¥{{ state.summary.team_month_reward || '0.00' }}</view>
-        </view>
-        <view class="wealth-card ss-flex-1">
-          <view class="wealth-title">团队自购总业绩(元)</view>
-          <view class="wealth-num text-gold">¥{{ state.summary.team_total_consume || '0.00' }}</view>
-          <view class="wealth-sub">团队累计订单: {{ state.summary.team_order_count || 0 }} 笔</view>
-        </view>
-      </view>
+      <!-- 核心仪表盘一体化大盘卡片 (Bento Board) -->
+      <view class="bento-board-card">
+        <!-- 上层：直推人数 与 团队总人数 (team-data-box) -->
+        <view class="team-data-box ss-flex ss-row-between ss-col-center">
+          <!-- 直推人数卡片 -->
+          <view class="data-col ss-flex-1 ss-flex-col ss-col-center">
+            <view class="item-title">
+              {{ currentDrillUser ? (currentDrillUser.nickname + '的直推（人）') : '直推人数（人）' }}
+            </view>
+            <view class="total-num text-orange">
+              {{ getDirectCount() }}
+            </view>
+            <view class="col-sub">我的直属团队</view>
+          </view>
 
-      <!-- 30天自购保活健康度胶囊条 -->
-      <view class="health-bar ss-flex ss-row-between ss-col-center">
-        <view class="health-title">保活健康度：</view>
-        <view class="health-pills ss-flex ss-col-center">
-          <view
-            class="health-pill pill-active"
-            :class="{ 'pill-selected': state.currentFilter === 'active' }"
-            @tap="onToggleStatusFilter('active')"
-          >
-            <text class="status-dot dot-green"></text>
-            <text class="pill-label">正常活跃 {{ state.summary.active_count || 0 }}</text>
+          <view class="bento-v-divider"></view>
+
+          <!-- 团队总人数卡片 -->
+          <view class="data-col ss-flex-1 ss-flex-col ss-col-center">
+            <view class="item-title">
+              {{ currentDrillUser ? (currentDrillUser.nickname + '的团队（人）') : '团队总人数（人）' }}
+            </view>
+            <view class="total-num text-dark">
+              {{ getTeamCount() }}
+            </view>
+            <view class="col-sub">直推及裂变总计</view>
           </view>
-          <view
-            class="health-pill pill-expiring"
-            :class="{ 'pill-selected': state.currentFilter === 'expiring' }"
-            @tap="onToggleStatusFilter('expiring')"
-          >
-            <text class="status-dot dot-yellow"></text>
-            <text class="pill-label">临期预警 {{ state.summary.expiring_count || 0 }}</text>
+        </view>
+
+        <view class="bento-h-divider"></view>
+
+        <!-- 下层：团队收益与业绩统计大盘 (team-wealth-box) -->
+        <view class="team-wealth-box ss-flex ss-row-between ss-col-center">
+          <view class="wealth-col ss-flex-1 ss-flex-col ss-col-center">
+            <view class="wealth-title">团队贡献总收益(元)</view>
+            <view class="wealth-num text-orange">¥{{ state.summary.team_total_reward || '0.00' }}</view>
+            <view class="wealth-sub">本月贡献: ¥{{ state.summary.team_month_reward || '0.00' }}</view>
           </view>
-          <view
-            class="health-pill pill-inactive"
-            :class="{ 'pill-selected': state.currentFilter === 'inactive' }"
-            @tap="onToggleStatusFilter('inactive')"
-          >
-            <text class="status-dot dot-gray"></text>
-            <text class="pill-label">已暂停 {{ state.summary.inactive_count || 0 }}</text>
+
+          <view class="bento-v-divider"></view>
+
+          <view class="wealth-col ss-flex-1 ss-flex-col ss-col-center">
+            <view class="wealth-title">团队自购总业绩(元)</view>
+            <view class="wealth-num text-gold">¥{{ state.summary.team_total_consume || '0.00' }}</view>
+            <view class="wealth-sub">团队累计订单: {{ state.summary.team_order_count || 0 }} 笔</view>
+          </view>
+        </view>
+
+        <!-- 底嵌 30天自购保活健康度胶囊条 (health-bar) -->
+        <view class="health-bar ss-flex ss-row-between ss-col-center">
+          <view class="health-title">保活健康度：</view>
+          <view class="health-pills ss-flex ss-col-center">
+            <view
+              class="health-pill pill-active"
+              :class="{ 'pill-selected': state.currentFilter === 'active' }"
+              @tap="onToggleStatusFilter('active')"
+            >
+              <text class="status-dot dot-green"></text>
+              <text class="pill-label">正常活跃 {{ state.summary.active_count || 0 }}</text>
+            </view>
+            <view
+              class="health-pill pill-expiring"
+              :class="{ 'pill-selected': state.currentFilter === 'expiring' }"
+              @tap="onToggleStatusFilter('expiring')"
+            >
+              <text class="status-dot dot-yellow"></text>
+              <text class="pill-label">临期预警 {{ state.summary.expiring_count || 0 }}</text>
+            </view>
+            <view
+              class="health-pill pill-inactive"
+              :class="{ 'pill-selected': state.currentFilter === 'inactive' }"
+              @tap="onToggleStatusFilter('inactive')"
+            >
+              <text class="status-dot dot-gray"></text>
+              <text class="pill-label">已暂停 {{ state.summary.inactive_count || 0 }}</text>
+            </view>
           </view>
         </view>
       </view>
@@ -930,191 +949,244 @@
 <style lang="scss" scoped>
   .header-box {
     box-sizing: border-box;
-    padding: 0 20rpx 24rpx 20rpx;
+    padding: 0 24rpx 28rpx 24rpx;
     width: 750rpx;
     z-index: 3;
     position: relative;
     background: v-bind(headerBg) no-repeat,
-      linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
+      linear-gradient(135deg, var(--ui-BG-Main, #ff6000), var(--ui-BG-Main-gradient, #ff8533));
     background-size: 750rpx 100%;
 
-    // 推荐人
-    .referrer-box {
-      font-size: 26rpx;
-      font-weight: 500;
-      color: #ffffff;
-      padding: 10rpx 8rpx 20rpx 8rpx;
+    // 顶部快捷操作栏 (推荐人 + 专属邀请码与海报)
+    .top-nav-bar {
+      margin-bottom: 16rpx;
+      min-height: 56rpx;
 
-      .referrer-avatar {
-        width: 38rpx;
-        height: 38rpx;
-        border-radius: 50%;
-        border: 2rpx solid rgba(255, 255, 255, 0.6);
-      }
-      .referrer-name {
-        font-weight: bold;
-      }
-    }
-
-    // 专属邀请码卡片
-    .invite-action-card {
-      background: rgba(255, 255, 255, 0.2);
-      backdrop-filter: blur(10px);
-      border-radius: 16rpx;
-      padding: 12rpx 20rpx;
-      margin-bottom: 20rpx;
-
-      .invite-code-wrap {
-        .invite-label {
-          font-size: 24rpx;
-          color: #ffffff;
-          font-weight: 500;
-        }
-        .invite-code {
-          font-size: 28rpx;
-          font-weight: bold;
-          color: #ffffff;
-          font-family: OPPOSANS;
-          letter-spacing: 1rpx;
-        }
-        .copy-code-btn {
-          font-size: 20rpx;
-          padding: 4rpx 14rpx;
-          border-radius: 16rpx;
-          background: #ffffff;
-          color: #ff6000;
-          font-weight: 500;
-        }
-      }
-
-      .invite-btn-group {
-        .invite-btn-poster {
-          height: 48rpx;
-          padding: 0 16rpx;
-          border-radius: 24rpx;
-          background: #ff6000;
-          color: #ffffff;
-          font-size: 22rpx;
-          font-weight: 500;
-        }
-        .invite-btn-link {
-          height: 48rpx;
-          padding: 0 16rpx;
-          border-radius: 24rpx;
-          background: #ffffff;
-          color: #ff6000;
-          font-size: 22rpx;
-          font-weight: 500;
-        }
-      }
-    }
-
-    // 团队信息总览
-    .team-data-box {
-      .data-card {
-        background: #ffffff;
-        border-radius: 20rpx;
-        padding: 22rpx 24rpx;
-        box-sizing: border-box;
-        box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.03);
-
-        .item-title {
-          font-size: 24rpx;
-          font-weight: 500;
-          color: #999999;
-          line-height: 32rpx;
-          margin-bottom: 12rpx;
-        }
-
-        .total-num {
-          font-size: 44rpx;
-          font-weight: bold;
-          color: #333333;
-          font-family: OPPOSANS;
-          line-height: 48rpx;
-
-          &.text-orange {
-            color: #ff6000;
-          }
-        }
-      }
-    }
-
-    // 团队收益与业绩看板
-    .team-wealth-box {
-      margin-top: 20rpx;
-
-      .wealth-card {
-        background: #ffffff;
-        border-radius: 20rpx;
-        padding: 18rpx 20rpx;
-        box-sizing: border-box;
-
-        .wealth-title {
-          font-size: 22rpx;
-          color: #999999;
-          line-height: 28rpx;
-          margin-bottom: 6rpx;
-        }
-        .wealth-num {
-          font-size: 32rpx;
-          font-weight: bold;
-          font-family: OPPOSANS;
-          line-height: 38rpx;
-          margin-bottom: 6rpx;
-
-          &.text-orange {
-            color: #ff6000;
-          }
-          &.text-gold {
-            color: #c48a3a;
-          }
-        }
-        .wealth-sub {
-          font-size: 20rpx;
-          color: #888888;
-          line-height: 24rpx;
-        }
-      }
-    }
-
-    // 健康度胶囊条
-    .health-bar {
-      margin-top: 20rpx;
-      background: rgba(255, 255, 255, 0.2);
-      backdrop-filter: blur(10px);
-      border-radius: 36rpx;
-      padding: 10rpx 18rpx;
-
-      .health-title {
+      // 推荐人微标
+      .referrer-pill,
+      .team-brand-pill {
+        background: rgba(255, 255, 255, 0.18);
+        backdrop-filter: blur(8px);
+        border-radius: 28rpx;
+        padding: 6rpx 16rpx;
         font-size: 22rpx;
         color: #ffffff;
-        font-weight: 500;
+        max-width: 320rpx;
+
+        .referrer-label {
+          opacity: 0.9;
+          font-size: 22rpx;
+        }
+
+        .referrer-avatar {
+          width: 34rpx;
+          height: 34rpx;
+          border-radius: 50%;
+          border: 2rpx solid rgba(255, 255, 255, 0.7);
+          flex-shrink: 0;
+        }
+
+        .referrer-name {
+          font-weight: 600;
+          font-size: 22rpx;
+        }
+
+        .brand-text {
+          font-weight: 600;
+          font-size: 22rpx;
+          letter-spacing: 1rpx;
+        }
       }
 
-      .health-pills {
-        gap: 10rpx;
-
-        .health-pill {
-          display: flex;
-          align-items: center;
+      // 专属邀请码与海报紧凑组
+      .invite-action-card {
+        .invite-code-wrap {
+          background: rgba(255, 255, 255, 0.18);
+          backdrop-filter: blur(8px);
+          border-radius: 28rpx;
           padding: 6rpx 14rpx;
-          border-radius: 20rpx;
-          background: rgba(255, 255, 255, 0.85);
-          font-size: 20rpx;
-          line-height: 22rpx;
-          color: #444444;
-          transition: all 0.2s;
+          transition: opacity 0.2s;
 
-          &.pill-selected {
-            background: #ffffff;
-            font-weight: bold;
-            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
-            transform: scale(1.04);
+          &:active {
+            opacity: 0.85;
           }
 
-          .pill-label {
-            margin-left: 6rpx;
+          .invite-label {
+            font-size: 20rpx;
+            color: rgba(255, 255, 255, 0.9);
+          }
+
+          .invite-code {
+            font-size: 24rpx;
+            font-weight: bold;
+            color: #ffffff;
+            font-family: OPPOSANS, sans-serif;
+            letter-spacing: 0.5rpx;
+          }
+
+          .copy-code-btn {
+            font-size: 18rpx;
+            padding: 2rpx 10rpx;
+            border-radius: 12rpx;
+            background: #ffffff;
+            color: #ff6000;
+            font-weight: 600;
+            line-height: 24rpx;
+          }
+        }
+
+        .invite-btn-group {
+          .invite-btn-poster {
+            height: 44rpx;
+            padding: 0 16rpx;
+            border-radius: 22rpx;
+            background: #ffffff;
+            color: #ff6000;
+            font-size: 20rpx;
+            font-weight: 600;
+            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+            transition: opacity 0.2s;
+
+            &:active {
+              opacity: 0.85;
+            }
+          }
+        }
+      }
+    }
+
+    // 核心仪表盘一体化 Bento 卡片
+    .bento-board-card {
+      background: #ffffff;
+      border-radius: 24rpx;
+      padding: 26rpx 24rpx 20rpx 24rpx;
+      box-shadow: 0 8rpx 28rpx rgba(220, 80, 0, 0.08);
+
+      // 上层：直推人数 与 团队总人数 (team-data-box)
+      .team-data-box {
+        .data-col {
+          text-align: center;
+
+          .item-title {
+            font-size: 22rpx;
+            color: #888888;
+            line-height: 30rpx;
+            margin-bottom: 6rpx;
+            font-weight: 500;
+          }
+
+          .total-num {
+            font-size: 46rpx;
+            font-weight: 700;
+            font-family: OPPOSANS, sans-serif;
+            line-height: 50rpx;
+
+            &.text-orange {
+              color: #ff6000;
+            }
+            &.text-dark {
+              color: #222222;
+            }
+          }
+
+          .col-sub {
+            font-size: 18rpx;
+            color: #bbbbbb;
+            margin-top: 4rpx;
+            line-height: 24rpx;
+          }
+        }
+      }
+
+      // 分割线
+      .bento-v-divider {
+        width: 1rpx;
+        height: 60rpx;
+        background: #f0f2f5;
+      }
+
+      .bento-h-divider {
+        width: 100%;
+        height: 1rpx;
+        background: #f2f3f5;
+        margin: 18rpx 0;
+      }
+
+      // 下层：团队收益与自购业绩 (team-wealth-box)
+      .team-wealth-box {
+        .wealth-col {
+          text-align: center;
+
+          .wealth-title {
+            font-size: 22rpx;
+            color: #888888;
+            line-height: 28rpx;
+            margin-bottom: 6rpx;
+            font-weight: 500;
+          }
+
+          .wealth-num {
+            font-size: 32rpx;
+            font-weight: 700;
+            font-family: OPPOSANS, sans-serif;
+            line-height: 38rpx;
+
+            &.text-orange {
+              color: #ff6000;
+            }
+            &.text-gold {
+              color: #c48a3a;
+            }
+          }
+
+          .wealth-sub {
+            font-size: 18rpx;
+            color: #999999;
+            margin-top: 4rpx;
+            line-height: 24rpx;
+          }
+        }
+      }
+
+      // 底嵌保活健康度胶囊条 (health-bar)
+      .health-bar {
+        margin-top: 18rpx;
+        background: #f8f9fa;
+        border-radius: 16rpx;
+        padding: 10rpx 16rpx;
+
+        .health-title {
+          font-size: 20rpx;
+          color: #666666;
+          font-weight: 500;
+        }
+
+        .health-pills {
+          gap: 10rpx;
+
+          .health-pill {
+            display: flex;
+            align-items: center;
+            padding: 4rpx 12rpx;
+            border-radius: 16rpx;
+            background: #ffffff;
+            border: 1rpx solid #eef0f3;
+            font-size: 20rpx;
+            line-height: 22rpx;
+            color: #555555;
+            transition: all 0.2s;
+
+            &.pill-selected {
+              background: #ffffff;
+              font-weight: bold;
+              border-color: #ff6000;
+              box-shadow: 0 2rpx 8rpx rgba(255, 96, 0, 0.12);
+              transform: scale(1.02);
+            }
+
+            .pill-label {
+              margin-left: 6rpx;
+            }
           }
         }
       }
@@ -1130,31 +1202,32 @@
 
     &.dot-green {
       background: #10b981;
-      box-shadow: 0 0 6rpx #10b981;
+      box-shadow: 0 0 6rpx rgba(16, 185, 129, 0.6);
     }
     &.dot-yellow {
       background: #f59e0b;
-      box-shadow: 0 0 6rpx #f59e0b;
+      box-shadow: 0 0 6rpx rgba(245, 158, 11, 0.6);
     }
     &.dot-gray {
       background: #9ca3af;
     }
   }
 
-  // 控制台
+  // 吸顶控制台
   .control-panel {
     background: #ffffff;
-    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+    box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.04);
 
     // 搜索框
     .search-bar-box {
-      padding: 18rpx 24rpx 12rpx 24rpx;
+      padding: 16rpx 24rpx 10rpx 24rpx;
 
       .search-input-wrap {
-        background: #f5f5f7;
-        border-radius: 32rpx;
-        height: 64rpx;
-        padding: 0 20rpx;
+        background: #f6f7f9;
+        border-radius: 34rpx;
+        height: 68rpx;
+        padding: 0 22rpx;
+        box-sizing: border-box;
 
         .search-input {
           flex: 1;
@@ -1164,7 +1237,7 @@
         }
 
         .search-placeholder {
-          color: #a0a0a0;
+          color: #a3a6ad;
           font-size: 24rpx;
         }
 
@@ -1177,18 +1250,22 @@
         margin-left: 16rpx;
         font-size: 26rpx;
         color: #ff6000;
-        font-weight: 500;
-        padding: 8rpx 12rpx;
+        font-weight: 600;
+        padding: 8rpx 16rpx;
+        border-radius: 20rpx;
+        background: #fff0e6;
+        line-height: 36rpx;
       }
     }
 
     // 下钻导航与面包屑
     .drill-nav-bar {
-      border-bottom: 1rpx solid #f2f2f2;
-      padding: 16rpx 24rpx;
+      border-bottom: 1rpx solid #f2f3f5;
+      padding: 14rpx 24rpx;
 
       &.root-nav {
         background: #fafbfc;
+
         .nav-left {
           .nav-icon-box {
             width: 36rpx;
@@ -1204,8 +1281,8 @@
           .nav-root-count {
             font-size: 24rpx;
             color: #ff6000;
-            font-weight: 500;
-            font-family: OPPOSANS;
+            font-weight: 600;
+            font-family: OPPOSANS, sans-serif;
           }
         }
         .nav-hint {
@@ -1219,6 +1296,7 @@
 
       &.in-drill-nav {
         background: #fff8f2;
+
         .drill-back-btn {
           padding: 8rpx 14rpx;
           border-radius: 24rpx;
@@ -1285,7 +1363,7 @@
       }
     }
 
-    // 筛选滚动条
+    // 筛选胶囊水平滚动条
     .filter-scroll-wrap {
       white-space: nowrap;
       padding: 14rpx 20rpx;
@@ -1300,27 +1378,29 @@
       .filter-chip {
         display: inline-flex;
         align-items: center;
-        padding: 8rpx 20rpx;
-        background: #f5f5f7;
-        border-radius: 24rpx;
+        padding: 8rpx 22rpx;
+        background: #f4f5f7;
+        border-radius: 26rpx;
         font-size: 22rpx;
         color: #666666;
         transition: all 0.2s;
 
         &.chip-active {
-          background: #fff0e6;
-          color: #ff6000;
-          font-weight: bold;
+          background: linear-gradient(135deg, #ff6000, #ff843b);
+          color: #ffffff;
+          font-weight: 600;
+          box-shadow: 0 2rpx 10rpx rgba(255, 96, 0, 0.2);
         }
 
         &.sort-chip {
-          background: #f0f4f8;
+          background: #f0f3f6;
           color: #4a5568;
 
           &.chip-active {
-            background: #e2e8f0;
-            color: #1a202c;
-            font-weight: bold;
+            background: #2d3748;
+            color: #ffffff;
+            font-weight: 600;
+            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
           }
         }
       }
@@ -1329,37 +1409,45 @@
         width: 1rpx;
         height: 28rpx;
         background: #e2e8f0;
-        margin: 0 6rpx;
+        margin: 0 4rpx;
       }
     }
   }
 
   // 成员卡片列表
   .member-list-box {
-    padding: 20rpx;
+    padding: 20rpx 20rpx 40rpx 20rpx;
 
     .member-card {
       background: #ffffff;
-      border-radius: 18rpx;
+      border-radius: 22rpx;
       padding: 24rpx;
       margin-bottom: 20rpx;
-      box-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.03);
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
+      border: 1rpx solid #f2f3f5;
       position: relative;
+      transition: transform 0.15s, box-shadow 0.15s;
 
+      &:active {
+        transform: scale(0.995);
+      }
+
+      // 成员头部
       .member-card-header {
         .member-avatar {
           width: 88rpx;
           height: 88rpx;
           border-radius: 50%;
-          border: 2rpx solid #ffefe0;
+          border: 2rpx solid #fff0e6;
           flex-shrink: 0;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
         }
 
         .member-name-row {
           .member-name {
             font-size: 28rpx;
             font-weight: bold;
-            color: #333333;
+            color: #222222;
             max-width: 220rpx;
           }
 
@@ -1373,10 +1461,7 @@
             &.badge-direct {
               background: #fff3e0;
               color: #ff6f00;
-            }
-            &.badge-indirect {
-              background: #e0f2fe;
-              color: #0284c7;
+              font-weight: 500;
             }
           }
         }
@@ -1384,7 +1469,7 @@
         .member-sub-info {
           font-size: 20rpx;
           color: #999999;
-          font-family: OPPOSANS;
+          font-family: OPPOSANS, sans-serif;
 
           .member-phone {
             color: #666666;
@@ -1433,10 +1518,10 @@
         }
       }
 
-      // 指标网格
+      // 指标网格 (4列规整排布)
       .metrics-grid {
-        background: #fafafc;
-        border-radius: 12rpx;
+        background: #f9fafb;
+        border-radius: 16rpx;
         padding: 16rpx 10rpx;
 
         .metric-col {
@@ -1454,7 +1539,7 @@
             font-size: 28rpx;
             font-weight: bold;
             color: #222222;
-            font-family: OPPOSANS;
+            font-family: OPPOSANS, sans-serif;
             line-height: 34rpx;
 
             &.text-orange {
@@ -1482,13 +1567,13 @@
         .metric-divider {
           width: 1rpx;
           height: 36rpx;
-          background: #ebebed;
+          background: #eef0f3;
         }
       }
 
       // 底部操作栏
       .member-card-footer {
-        border-top: 1rpx solid #f5f5f5;
+        border-top: 1rpx solid #f5f6f8;
         padding-top: 16rpx;
 
         .register-time {
@@ -1504,12 +1589,13 @@
             font-size: 22rpx;
             display: inline-flex;
             align-items: center;
+            border: 1rpx solid transparent;
 
             &.btn-drill {
-              background: linear-gradient(90deg, #fff0e6, #ffe6d6);
+              background: #fff0e6;
               color: #ff6000;
               font-weight: bold;
-              border: 1rpx solid #ffd8bf;
+              border-color: #ffd8bf;
             }
             &.btn-call {
               background: #fff0e6;
@@ -1522,9 +1608,10 @@
             &.btn-reward {
               background: #fff7ed;
               color: #ea580c;
+              border-color: #ffedd5;
             }
             &.btn-detail {
-              background: #ffffff;
+              background: #f9fafb;
               color: #666666;
             }
           }
@@ -1542,8 +1629,8 @@
     align-items: center;
 
     .tag-img {
-      width: 28rpx;
-      height: 28rpx;
+      width: 26rpx;
+      height: 26rpx;
       margin-right: 6rpx;
       border-radius: 50%;
     }
@@ -1633,7 +1720,7 @@
 
       .section-box {
         background: #f9fafb;
-        border-radius: 14rpx;
+        border-radius: 16rpx;
         padding: 20rpx;
 
         &.active-detail-box {
@@ -1664,7 +1751,7 @@
               font-size: 32rpx;
               font-weight: bold;
               color: #111827;
-              font-family: OPPOSANS;
+              font-family: OPPOSANS, sans-serif;
             }
             .perf-lbl {
               font-size: 22rpx;
@@ -1694,7 +1781,7 @@
     .drawer-drill-card {
       background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
       border: 1rpx solid #fed7aa;
-      border-radius: 16rpx;
+      border-radius: 18rpx;
       padding: 20rpx 24rpx;
       transition: all 0.2s;