style(settlement): 统一弹窗卡片样式并优化标签页样式

- 将结算调整单编辑弹窗内各板块统一替换为全局 section-card 组件
- “添加费用”按钮移至 section-card 的 #extra 插槽,删除多余样式
- 应付/应收对账页、收付明细弹窗标签页使用 border-card 类型提升视觉效果
- 调整对账页表格区域上间距由 8px 增加到 12px
- 确保修改均通过 SFC 解析与模板编译检查
This commit is contained in:
2026-08-20 14:57:17 +08:00
parent 8f35e6b265
commit 37a4eef515
3 changed files with 11 additions and 3 deletions
+8
View File
@@ -100,3 +100,11 @@
- 间距:沿用全局 `.section-card``margin-bottom: 12px` - 间距:沿用全局 `.section-card``margin-bottom: 12px`
- 验证:已通过 SFC 解析与模板编译检查。 - 验证:已通过 SFC 解析与模板编译检查。
- 原因:用户要求 `/settlement/transport-reconciliation` 页面与预结算单/正式结算单弹窗统一使用白底卡片分隔。 - 原因:用户要求 `/settlement/transport-reconciliation` 页面与预结算单/正式结算单弹窗统一使用白底卡片分隔。
## 结算调整单编辑弹窗改白底卡片分组
- 调整文件:`src/views/settlement/components/settlement-adjustment-editor.vue`
- 修改内容:将"新增/编辑结算调整单"弹窗内的全部板块由 `dialog-section-title` + `<section>` 改为全局 `<section-card>` 组件,包括:基本信息、调整费用。"调整费用"头部"添加费用"按钮改为 section-card 的 `#extra` 插槽;删除了不再使用的 `.settlement-adjustment-editor__section``.settlement-adjustment-editor__section-head` 以及 `.dialog-section-title` 样式块。
- 间距:沿用全局 `.section-card``margin-bottom: 12px`
- 验证:已通过 SFC 解析与模板编译检查。
- 原因:用户要求 `/settlement/settlement-adjustment` 页面与预结算单/正式结算单弹窗统一使用白底卡片分隔。
@@ -111,7 +111,7 @@
destroy-on-close destroy-on-close
class="settlement-detail-dialog" class="settlement-detail-dialog"
> >
<el-tabs v-model="detailDialog.activeTab" @tab-change="handleDetailTabChange"> <el-tabs type="border-card" style="background-color: #ffffff" v-model="detailDialog.activeTab" @tab-change="handleDetailTabChange">
<el-tab-pane label="费用明细" name="fee"> <el-tab-pane label="费用明细" name="fee">
<el-table v-loading="detailDialog.loading" :data="feeRows" border> <el-table v-loading="detailDialog.loading" :data="feeRows" border>
<el-table-column type="index" label="序号" width="64" align="center" /> <el-table-column type="index" label="序号" width="64" align="center" />
@@ -31,7 +31,7 @@
</section> </section>
<section class="reconciliation-page__table-panel"> <section class="reconciliation-page__table-panel">
<el-tabs v-model="settlementType" @tab-change="handleTabChange"> <el-tabs type="border-card" v-model="settlementType" @tab-change="handleTabChange">
<el-tab-pane label="应付" name="payable" /> <el-tab-pane label="应付" name="payable" />
<el-tab-pane label="应收" name="receivable" /> <el-tab-pane label="应收" name="receivable" />
</el-tabs> </el-tabs>
@@ -300,7 +300,7 @@ export default {
margin-bottom: 8px; margin-bottom: 8px;
} }
.reconciliation-page__table-panel { .reconciliation-page__table-panel {
margin-top: 8px; margin-top: 12px;
} }
.reconciliation-page__toolbar { .reconciliation-page__toolbar {
display: flex; display: flex;