b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(vehicle): 优化客户归档页标签样式与卡片阴影

Browse Source 
- 为el-tabs组件添加card类型，提升标签视觉样式
- 移除多余section-card组件，简化评分表、联系人、收款信息、发票信息四个标签页结构
- 将新增按钮从slot extra改为独立div，统一按钮显示和样式
- 调整新增按钮为plain风格，符合设计规范
- 修正el-tabs头部下边距，去除不必要的间距
- 新增.tab-table-toolbar样式，控制新增按钮上下边距
- 调整section-card阴影透明度，由rgba(0, 0, 0, 0.04)改为0.06，更加醒目
This commit is contained in:
赵忠林
2026-08-11 17:55:46 +08:00
parent c97f1fc0e3
commit e8e6bc01b0
2 changed files with 21 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/element-ui.scss
+1 -1
View File
@@ -275,7 +275,7 @@
.section-card {
background: #fff;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
margin-bottom: 8px;
overflow: hidden;
src/views/vehicle/customer-archive.vue
+20 -29
View File
@@ -394,14 +394,11 @@
</el-form>
<section-card class="archive-detail-card">
<el-tabs v-model="activeTab" class="archive-tabs">
<el-tabs v-model="activeTab" class="archive-tabs" type="card">
<el-tab-pane label="评分表" name="scores">
<section-card>
<template #extra>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="addScore">
添加评分记录
</el-button>
</template>
<div class="tab-table-toolbar" v-if="!readonly">
<el-button type="primary" plain icon="el-icon-plus" @click="addScore">添加评分记录</el-button>
</div>
<el-table :data="scoreTableData" border class="score-list-table">
<el-table-column label="序号" width="90" align="center">
<template #default="{ row }">
@@ -468,15 +465,11 @@
@size-change="handleScoreSizeChange"
@current-change="handleScoreCurrentChange"
/>
</section-card>
</el-tab-pane>
<el-tab-pane label="联系人" name="contacts">
<section-card>
<template #extra>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openContact()">
新增联系人
</el-button>
</template>
<div class="tab-table-toolbar" v-if="!readonly">
<el-button type="primary" plain icon="el-icon-plus" @click="openContact()">新增联系人</el-button>
</div>
<el-table :data="contactTableData" border class="contact-table">
<el-table-column label="序号" prop="__index" width="90" align="center" />
<el-table-column label="联系人姓名" prop="contactName" min-width="150" />
@@ -508,15 +501,11 @@
@size-change="size => handleDetailSizeChange('contact', size)"
@current-change="page => handleDetailCurrentChange('contact', page)"
/>
</section-card>
</el-tab-pane>
<el-tab-pane label="收款信息" name="receiptAccounts">
<section-card>
<template #extra>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openReceipt()">
新增收款信息
</el-button>
</template>
<div class="tab-table-toolbar" v-if="!readonly">
<el-button type="primary" plain icon="el-icon-plus" @click="openReceipt()">新增收款信息</el-button>
</div>
<el-table :data="receiptTableData" border class="receipt-table">
<el-table-column label="序号" prop="__index" width="90" align="center" />
<el-table-column label="收款单位名称" prop="accountName" min-width="180" />
@@ -539,15 +528,11 @@
@size-change="size => handleDetailSizeChange('receipt', size)"
@current-change="page => handleDetailCurrentChange('receipt', page)"
/>
</section-card>
</el-tab-pane>
<el-tab-pane label="发票信息" name="invoices">
<section-card>
<template #extra>
<el-button type="primary" icon="el-icon-plus" v-if="!readonly" @click="openInvoice()">
新增发票信息
</el-button>
</template>
<div class="tab-table-toolbar" v-if="!readonly">
<el-button type="primary" plain icon="el-icon-plus" @click="openInvoice()">新增发票信息</el-button>
</div>
<el-table :data="invoiceTableData" border class="invoice-table">
<el-table-column label="序号" prop="__index" width="90" align="center" />
<el-table-column label="收票方名称" prop="invoiceTitle" min-width="180" />
@@ -576,7 +561,6 @@
@size-change="size => handleDetailSizeChange('invoice', size)"
@current-change="page => handleDetailCurrentChange('invoice', page)"
/>
</section-card>
</el-tab-pane>
</el-tabs>
</section-card>
@@ -3800,6 +3784,13 @@ export default {
margin-top: 8px;
}
.archive-tabs {
:deep(.el-tabs__header) {
margin-bottom: 0;
}
}
.tab-table-toolbar {
margin-top: 16px;
margin-bottom: 12px;
}
.score-list-table {