style(settlement): 统一弹窗卡片样式并优化标签页样式
- 将结算调整单编辑弹窗内各板块统一替换为全局 section-card 组件 - “添加费用”按钮移至 section-card 的 #extra 插槽,删除多余样式 - 应付/应收对账页、收付明细弹窗标签页使用 border-card 类型提升视觉效果 - 调整对账页表格区域上间距由 8px 增加到 12px - 确保修改均通过 SFC 解析与模板编译检查
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user