XingQue/Vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 会员数据分析展开行高对比度可读性

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
XingQue
2026-07-05 18:36:33 +08:00
parent fa81909065
commit 414c005f93
1 changed files with 96 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/views/member/Data.vue
View File

@@ -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) {