From 414c005f93839467d87e1ed35a3d1c1cd67e0514 Mon Sep 17 00:00:00 2001
From: XingQue <kongxing634@gmail.com>
Date: Sun, 5 Jul 2026 18:36:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=9A=E5=91=98=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=88=86=E6=9E=90=E5=B1=95=E5=BC=80=E8=A1=8C=E9=AB=98=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94=E5=BA=A6=E5=8F=AF=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

展开分红明细改为深底白字/蓝标签/绿金额，并覆盖 el-table 展开单元格默认灰底。

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/views/member/Data.vue | 121 ++++++++++++++++++++++++++++++--------
 1 file changed, 96 insertions(+), 25 deletions(-)

diff --git a/src/views/member/Data.vue b/src/views/member/Data.vue
index 6b1a825..0800c72 100644
--- a/src/views/member/Data.vue
+++ b/src/views/member/Data.vue
@@ -118,17 +118,41 @@
             <div class="expand-panel" v-if="row.fenhong">
               <div class="expand-title">分红明细</div>
               <div class="expand-grid">
-                <div><span class="k">管事</span>{{ row.fenhong.guanshi_nicheng }} ({{ row.fenhong.guanshi_id }})</div>
-                <div><span class="k">管事分红</span>¥{{ formatMoney(row.fenhong.guanshi_fenhong) }}</div>
-                <div><span class="k">组长</span>{{ row.fenhong.zuzhang_nicheng || '-' }} ({{ row.fenhong.zuzhang_id || '-' }})</div>
-                <div><span class="k">组长分红</span>¥{{ formatMoney(row.fenhong.zuzhang_fenhong) }}</div>
-                <div><span class="k">第几次正式购买</span>{{ row.fenhong.formal_cishu ?? row.formal_cishu ?? '-' }}</div>
-                <div><span class="k">分红时间</span>{{ formatDate(row.fenhong.fenhong_time) }}</div>
-                <div><span class="k">体验分红</span>{{ row.fenhong.is_trial ? '是' : '否' }}</div>
-                <div><span class="k">说明</span>{{ row.fenhong.shuoming || '-' }}</div>
+                <div class="expand-item">
+                  <span class="k">管事</span>
+                  <span class="v">{{ row.fenhong.guanshi_nicheng }} ({{ row.fenhong.guanshi_id }})</span>
+                </div>
+                <div class="expand-item">
+                  <span class="k">管事分红</span>
+                  <span class="v money">¥{{ formatMoney(row.fenhong.guanshi_fenhong) }}</span>
+                </div>
+                <div class="expand-item">
+                  <span class="k">组长</span>
+                  <span class="v">{{ row.fenhong.zuzhang_nicheng || '-' }} ({{ row.fenhong.zuzhang_id || '-' }})</span>
+                </div>
+                <div class="expand-item">
+                  <span class="k">组长分红</span>
+                  <span class="v money">¥{{ formatMoney(row.fenhong.zuzhang_fenhong) }}</span>
+                </div>
+                <div class="expand-item">
+                  <span class="k">第几次正式购买</span>
+                  <span class="v highlight">{{ row.fenhong.formal_cishu ?? row.formal_cishu ?? '-' }}</span>
+                </div>
+                <div class="expand-item">
+                  <span class="k">分红时间</span>
+                  <span class="v">{{ formatDate(row.fenhong.fenhong_time) }}</span>
+                </div>
+                <div class="expand-item">
+                  <span class="k">体验分红</span>
+                  <span class="v">{{ row.fenhong.is_trial ? '是' : '否' }}</span>
+                </div>
+                <div class="expand-item expand-item-wide">
+                  <span class="k">说明</span>
+                  <span class="v">{{ row.fenhong.shuoming || '-' }}</span>
+                </div>
               </div>
             </div>
-            <div v-else class="expand-panel empty-fenhong">暂无分红记录（可能未支付或尚未履约）</div>
+            <div v-else class="expand-panel expand-panel-empty">暂无分红记录（可能未支付或尚未履约）</div>
           </template>
         </el-table-column>
         <el-table-column prop="dingdan_id" label="订单ID" min-width="180" show-overflow-tooltip />
@@ -378,26 +402,76 @@ onMounted(fetchData)
   margin-top: 16px;
 }
 .expand-panel {
-  padding: 12px 20px;
-  background: rgba(10, 16, 24, 0.6);
+  padding: 16px 20px;
+  background: #060d14;
+  border: 1px solid rgba(64, 158, 255, 0.35);
+  border-radius: 8px;
+  margin: 4px 0;
+}
+.expand-panel-empty {
+  color: #ffffff;
+  font-size: 14px;
 }
 .expand-title {
-  font-weight: 600;
-  margin-bottom: 10px;
-  color: #9ec5ff;
+  font-weight: 700;
+  font-size: 15px;
+  margin-bottom: 14px;
+  color: #6cc3e8;
+  letter-spacing: 0.5px;
 }
 .expand-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 8px 16px;
-  font-size: 13px;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 10px 16px;
 }
-.expand-grid .k {
-  color: #8fb8e8;
-  margin-right: 8px;
+.expand-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #0f1a28;
+  border: 1px solid rgba(64, 158, 255, 0.2);
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 1.5;
 }
-.empty-fenhong {
-  color: #8fb8e8;
+.expand-item-wide {
+  grid-column: 1 / -1;
+}
+.expand-item .k {
+  flex-shrink: 0;
+  min-width: 88px;
+  color: #6cc3e8;
+  font-weight: 600;
+}
+.expand-item .v {
+  color: #ffffff;
+  word-break: break-all;
+}
+.expand-item .v.money {
+  color: #7ee787;
+  font-weight: 700;
+  font-size: 15px;
+}
+.expand-item .v.highlight {
+  color: #ffd666;
+  font-weight: 700;
+}
+
+/* 展开行单元格：强制深色底，避免 Element 默认白/灰底 */
+.member-data-table :deep(.el-table__expanded-cell) {
+  background: #060d14 !important;
+  padding: 12px 16px !important;
+}
+.member-data-table :deep(.el-table__expanded-cell:hover) {
+  background: #060d14 !important;
+}
+.member-data-table :deep(.el-table__expand-icon) {
+  color: #6cc3e8;
+  font-size: 16px;
+}
+.member-data-table :deep(.el-table__expand-icon .el-icon) {
+  color: #6cc3e8;
 }
 
 /* 表单控件深色 */
@@ -461,9 +535,6 @@ onMounted(fetchData)
 .member-data-table :deep(.el-table__empty-text) {
   color: rgba(159, 197, 255, 0.55);
 }
-.member-data-table :deep(.el-table__expand-icon) {
-  color: #9ec5ff;
-}
 
 /* 分页深色 */
 .pager :deep(.el-pagination) {