feat(split-order): 优化分账订单列表界面样式

- 调整表格单元格垂直对齐方式为居中,并添加文本换行控制
- 重构金额和来源列的显示结构,分离为独立的列进行展示
- 优化金额数字的字体样式,使用等宽数字格式化
- 改进来源标签的布局方式,使用flex布局增强可读性
- 添加空值占位符显示,提升界面一致性
```
这个提交包含在:
可乐加冰
2026-10-05 14:17:51 +08:00
父节点 764c9de5d8
当前提交 e359ed5710

查看文件

@@ -9,7 +9,13 @@
#splitOrderIndex .el-table .cell { #splitOrderIndex .el-table .cell {
overflow: hidden; overflow: hidden;
line-height: 1.5; line-height: 1.5;
vertical-align: top; vertical-align: middle;
word-break: keep-all;
}
#splitOrderIndex .el-table .col-money .cell,
#splitOrderIndex .el-table .col-source .cell {
overflow: visible;
white-space: nowrap;
} }
.page-card { .page-card {
background: #fff; background: #fff;
@@ -74,32 +80,41 @@
.status-tag.s2 { background: #f0f9eb; color: #67c23a; } .status-tag.s2 { background: #f0f9eb; color: #67c23a; }
.status-tag.s3 { background: #fdf6ec; color: #e6a23c; } .status-tag.s3 { background: #fdf6ec; color: #e6a23c; }
.status-tag.s4 { background: #fef0f0; color: #f56c6c; } .status-tag.s4 { background: #fef0f0; color: #f56c6c; }
.amount-block { .money-num {
display: block;
text-align: right; text-align: right;
line-height: 1.65;
font-size: 13px; font-size: 13px;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
white-space: nowrap;
color: #303133; color: #303133;
} }
.amount-block .sub { font-size: 12px; color: #909399; } .money-num.highlight { color: #e1212b; font-weight: 600; }
.source-line { .source-cell {
margin-top: 6px; display: inline-flex;
text-align: right; align-items: center;
flex-wrap: nowrap;
gap: 4px;
white-space: nowrap; white-space: nowrap;
max-width: 100%;
} }
.source-tag { .source-tag {
flex-shrink: 0;
display: inline-block; display: inline-block;
padding: 0 6px; padding: 0 6px;
border-radius: 3px; border-radius: 3px;
font-size: 11px; font-size: 11px;
line-height: 18px; line-height: 20px;
white-space: nowrap;
} }
.source-tag.commission { background: #ecf5ff; color: #409eff; } .source-tag.commission { background: #ecf5ff; color: #409eff; }
.source-tag.rule { background: #fdf6ec; color: #e6a23c; } .source-tag.rule { background: #fdf6ec; color: #e6a23c; }
.source-detail-btn { .source-detail-btn {
flex-shrink: 0;
font-size: 11px; font-size: 11px;
color: #909399; color: #909399;
margin-left: 4px;
cursor: pointer; cursor: pointer;
white-space: nowrap;
} }
.source-detail-btn:hover { color: #7438D5; } .source-detail-btn:hover { color: #7438D5; }
.recv-block { .recv-block {
@@ -212,13 +227,19 @@
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="金额 / 来源" width="132" align="right"> <el-table-column label="订单金额" class-name="col-money" width="96" align="right">
<template slot-scope="s"> <template slot-scope="s">
<div class="amount-block"> <span class="money-num">¥{{ formatMoney(s.row.total_amount) }}</span>
<div>订单 <span class="money-text">¥{{ formatMoney(s.row.total_amount) }}</span></div> </template>
<div class="sub">分账 <span class="money-text">¥{{ formatMoney(s.row.split_amount) }}</span></div> </el-table-column>
</div> <el-table-column label="分账金额" class-name="col-money" width="96" align="right">
<div class="source-line" v-if="s.row.split_source"> <template slot-scope="s">
<span class="money-num highlight">¥{{ formatMoney(s.row.split_amount) }}</span>
</template>
</el-table-column>
<el-table-column label="分账来源" class-name="col-source" width="112" align="center">
<template slot-scope="s">
<div class="source-cell" v-if="s.row.split_source">
<span :class="'source-tag ' + (s.row.split_source === 'commission' ? 'commission' : 'rule')"> <span :class="'source-tag ' + (s.row.split_source === 'commission' ? 'commission' : 'rule')">
{{ s.row.split_source === 'commission' ? '按佣金' : '规则兜底' }} {{ s.row.split_source === 'commission' ? '按佣金' : '规则兜底' }}
</span> </span>
@@ -233,6 +254,7 @@
<span slot="reference" class="source-detail-btn">详情</span> <span slot="reference" class="source-detail-btn">详情</span>
</el-popover> </el-popover>
</div> </div>
<span v-else style="color:#909399;">—</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="分账给谁" min-width="168"> <el-table-column label="分账给谁" min-width="168">