style(ui): 统一全站 el-table 表头背景色及弹窗卡片化风格
- 将所有 el-table 表头背景色统一设为浅灰 #fafafa,覆盖普通表格、avue-crud 和固定列 - 移除业务组件内冗余的表头样式,改由全局样式统一控制 - 调整多处弹窗(预结算单、正式结算单、运输对账单、应收明细等)内容板块,改用全局 section-card 组件实现白底卡片分组 - 为多个弹窗内的搜索区域增加白底、圆角和阴影样式,提升视觉层次感 - 缩减多处表格“操作”列宽度以适配新布局 - 付款申请弹窗按钮由主色调 primary 改为 success,符合全站按钮风格规范 - 统一调整弹窗内表单、按钮、间距及背景细节,改善界面体验和视觉一致性
This commit is contained in:
@@ -76,7 +76,7 @@
|
||||
<span v-else>{{ formatColumnValue(row, column) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="220" fixed="right" align="center">
|
||||
<el-table-column label="操作" width="120" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="settlement-detail-page__actions">
|
||||
<el-link v-if="row.settlementStatus === 'pending'" type="primary" @click="openAdjustDialog(row)">
|
||||
@@ -399,7 +399,13 @@
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="generateDialog.visible" title="生成费用" width="88%" append-to-body>
|
||||
<el-form :model="generateQuery" inline label-position="right" label-width="120px">
|
||||
<el-form
|
||||
:model="generateQuery"
|
||||
class="settlement-detail-page__generate-search"
|
||||
inline
|
||||
label-position="right"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="运单合同" required>
|
||||
<el-select
|
||||
v-model="generateQuery.contractId"
|
||||
@@ -1329,10 +1335,17 @@ export default {
|
||||
}
|
||||
|
||||
.settlement-detail-page__dialog-form {
|
||||
padding: 16px 20px 0;
|
||||
padding: 16px 20px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-select) {
|
||||
@@ -1340,8 +1353,24 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.settlement-detail-page__adjust-toolbar {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.settlement-detail-page__generate-search {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 12px 4px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.settlement-detail-page__transfer-form {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 12px 4px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
@@ -1355,4 +1384,17 @@ export default {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* 详情弹窗 tabs 白底 */
|
||||
.settlement-detail-dialog {
|
||||
:deep(.el-tabs__content) {
|
||||
background: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
:deep(.el-tab-pane) {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user