style(ui): 统一全站 el-table 表头背景色及弹窗卡片化风格

- 将所有 el-table 表头背景色统一设为浅灰 #fafafa,覆盖普通表格、avue-crud 和固定列
- 移除业务组件内冗余的表头样式,改由全局样式统一控制
- 调整多处弹窗(预结算单、正式结算单、运输对账单、应收明细等)内容板块,改用全局 section-card 组件实现白底卡片分组
- 为多个弹窗内的搜索区域增加白底、圆角和阴影样式,提升视觉层次感
- 缩减多处表格“操作”列宽度以适配新布局
- 付款申请弹窗按钮由主色调 primary 改为 success,符合全站按钮风格规范
- 统一调整弹窗内表单、按钮、间距及背景细节,改善界面体验和视觉一致性
This commit is contained in:
2026-08-20 14:47:29 +08:00
parent f6b05ed71d
commit 8f35e6b265
12 changed files with 250 additions and 191 deletions
@@ -1,8 +1,7 @@
<template>
<el-dialog v-model="visible" :title="title" width="94%" top="3vh" append-to-body destroy-on-close>
<div v-loading="loading" class="settlement-adjustment-editor">
<section class="settlement-adjustment-editor__section">
<div class="dialog-section-title">基本信息</div>
<section-card title="基本信息">
<el-form
ref="formRef"
:model="form"
@@ -57,11 +56,10 @@
>
</el-row>
</el-form>
</section>
</section-card>
<section class="settlement-adjustment-editor__section">
<div class="settlement-adjustment-editor__section-head">
<div class="dialog-section-title">调整费用</div>
<section-card title="调整费用">
<template #extra>
<el-button
v-if="editable && form.formalSettlementId"
type="primary"
@@ -69,7 +67,7 @@
@click="openFeeDialog"
>添加费用</el-button
>
</div>
</template>
<el-table :data="details" border>
<el-table-column type="index" label="序号" width="64" align="center" /><el-table-column
prop="feeType"
@@ -141,7 +139,7 @@
}}</strong
>;调整后结算金额:<strong>{{ formatMoney(form.adjustedSettlementAmount) }}</strong>
</div>
</section>
</section-card>
</div>
<template #footer
><el-button @click="visible = false">取消</el-button
@@ -354,15 +352,6 @@ export default {
</script>
<style scoped lang="scss">
.settlement-adjustment-editor__section {
margin-bottom: 24px;
}
.settlement-adjustment-editor__section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.settlement-adjustment-editor__summary {
padding: 12px 0;
text-align: right;
@@ -379,18 +368,4 @@ export default {
.negative {
color: #f56c6c;
}
.dialog-section-title {
display: flex;
align-items: center;
min-height: 22px;
font-size: 16px;
font-weight: 600;
}
.dialog-section-title::before {
width: 4px;
height: 18px;
margin-right: 8px;
background: #409eff;
content: '';
}
</style>