style(ui): 统一全站 el-table 表头背景色及弹窗卡片化风格
- 将所有 el-table 表头背景色统一设为浅灰 #fafafa,覆盖普通表格、avue-crud 和固定列 - 移除业务组件内冗余的表头样式,改由全局样式统一控制 - 调整多处弹窗(预结算单、正式结算单、运输对账单、应收明细等)内容板块,改用全局 section-card 组件实现白底卡片分组 - 为多个弹窗内的搜索区域增加白底、圆角和阴影样式,提升视觉层次感 - 缩减多处表格“操作”列宽度以适配新布局 - 付款申请弹窗按钮由主色调 primary 改为 success,符合全站按钮风格规范 - 统一调整弹窗内表单、按钮、间距及背景细节,改善界面体验和视觉一致性
This commit is contained in:
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" :title="title" width="96%" top="2vh" append-to-body destroy-on-close>
|
||||
<div v-loading="loading" class="formal-editor">
|
||||
<section class="formal-editor__section">
|
||||
<div class="dialog-section-title">结算基本信息</div>
|
||||
<section-card title="结算基本信息">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
@@ -64,11 +63,10 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</section>
|
||||
</section-card>
|
||||
|
||||
<section class="formal-editor__section">
|
||||
<div class="formal-editor__section-head">
|
||||
<div class="dialog-section-title">来源预结算单</div>
|
||||
<section-card title="来源预结算单">
|
||||
<template #extra>
|
||||
<div class="formal-editor__actions">
|
||||
<el-button v-if="editable" type="primary" plain @click="openCandidateDialog"
|
||||
>选择预结算单</el-button
|
||||
@@ -77,7 +75,7 @@
|
||||
>选择结算明细</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-table :data="sources" border>
|
||||
<el-table-column type="index" label="序号" width="64" align="center" />
|
||||
<el-table-column
|
||||
@@ -97,10 +95,9 @@
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</section-card>
|
||||
|
||||
<section v-if="details.length" class="formal-editor__section">
|
||||
<div class="dialog-section-title">结算明细</div>
|
||||
<section-card v-if="details.length" title="结算明细">
|
||||
<el-table :data="details" border>
|
||||
<el-table-column type="index" label="序号" width="64" fixed="left" align="center" />
|
||||
<el-table-column
|
||||
@@ -131,10 +128,9 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</section-card>
|
||||
|
||||
<section class="formal-editor__section">
|
||||
<div class="dialog-section-title">附件</div>
|
||||
<section-card title="附件">
|
||||
<vehicle-attachment-upload
|
||||
v-model="attachments"
|
||||
:readonly="!editable"
|
||||
@@ -143,10 +139,9 @@
|
||||
:max-size="500"
|
||||
:file-types="attachmentFileTypes"
|
||||
/>
|
||||
</section>
|
||||
</section-card>
|
||||
|
||||
<section v-if="readonly && payments.length" class="formal-editor__section">
|
||||
<div class="dialog-section-title">付款信息</div>
|
||||
<section-card v-if="readonly && payments.length" title="付款信息">
|
||||
<el-table :data="payments" border>
|
||||
<el-table-column type="index" label="序号" width="64" align="center" />
|
||||
<el-table-column
|
||||
@@ -167,7 +162,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
</section-card>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
@@ -177,7 +172,7 @@
|
||||
</template>
|
||||
|
||||
<el-dialog v-model="candidate.visible" title="选择预结算单" width="88%" append-to-body>
|
||||
<el-form :model="candidate.query" inline label-position="right" label-width="160px">
|
||||
<el-form :model="candidate.query" inline label-position="right" label-width="160px" class="formal-editor__candidate-search">
|
||||
<el-form-item label="预结算单号"
|
||||
><el-input v-model="candidate.query.preSettlementNo" clearable
|
||||
/></el-form-item>
|
||||
@@ -227,7 +222,7 @@
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="detailCandidate.visible" title="选择结算明细" width="92%" append-to-body>
|
||||
<el-form :model="detailCandidate.query" inline label-position="right" label-width="160px">
|
||||
<el-form :model="detailCandidate.query" inline label-position="right" label-width="160px" class="formal-editor__detail-search">
|
||||
<el-form-item label="批次号"
|
||||
><el-input v-model="detailCandidate.query.batchNo" clearable
|
||||
/></el-form-item>
|
||||
@@ -725,15 +720,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.formal-editor__section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.formal-editor__section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.formal-editor__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
@@ -761,4 +747,13 @@ export default {
|
||||
.formal-editor__adjust-reason {
|
||||
margin-top: 16px;
|
||||
}
|
||||
/* 选择预结算单 / 选择结算明细 弹窗搜索区白底 */
|
||||
.formal-editor__candidate-search,
|
||||
.formal-editor__detail-search {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user