优化前端页面布局细节

This commit is contained in:
wjj
2026-07-13 16:46:37 +08:00
parent 7a317204f7
commit ded07a2c33
23 changed files with 495 additions and 141 deletions

View File

@@ -226,7 +226,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="摘要 / 交易类型" min-width="240">
<el-table-column label="摘要 / 交易类型" min-width="200">
<template slot-scope="scope">
<div class="multi-line-cell">
<div class="primary-text">{{ formatField(scope.row.userMemo) }}</div>
@@ -234,6 +234,22 @@
</div>
</template>
</el-table-column>
<el-table-column
label="交易金额"
prop="displayAmount"
width="120"
align="right"
sortable="custom"
>
<template slot-scope="scope">
<span
class="amount-text"
:class="scope.row.displayAmount >= 0 ? 'amount-in' : 'amount-out'"
>
{{ formatAmount(scope.row.displayAmount) }}
</span>
</template>
</el-table-column>
<el-table-column label="异常标签" min-width="220">
<template slot-scope="scope">
<div v-if="scope.row.hitTags && scope.row.hitTags.length" class="hit-tag-list">
@@ -250,22 +266,6 @@
<span v-else class="empty-text">-</span>
</template>
</el-table-column>
<el-table-column
label="交易金额"
prop="displayAmount"
min-width="140"
align="right"
sortable="custom"
>
<template slot-scope="scope">
<span
class="amount-text"
:class="scope.row.displayAmount >= 0 ? 'amount-in' : 'amount-out'"
>
{{ formatAmount(scope.row.displayAmount) }}
</span>
</template>
</el-table-column>
<el-table-column label="详情" width="100" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleViewDetail(scope.row)">
@@ -974,18 +974,31 @@ export default {
.primary-text {
color: #303133;
line-height: 20px;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.secondary-text {
color: #909399;
font-size: 12px;
line-height: 18px;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.hit-tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.hit-tag-list ::v-deep .el-tag {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.empty-text {