style(customer-archive): 优化弹窗Tabs样式及全局移除标题竖条
- tabs区域业务明细外层包裹白底卡片,统一视觉样式 - 去掉客商档案弹窗标题左侧的蓝色竖条,解决用户反馈 - 取消scoped样式尝试,改为非scoped全局样式修改 - 编辑全局element-ui.scss,拆分竖条共享规则,仅保留分组标题竖条 - 删除customer-archive.vue末尾特例样式 - 细节调整archive-tabs和archive-detail-card间距,修正样式冲突
This commit is contained in:
@@ -93,3 +93,21 @@ Element Plus 把 label 锁死成 32px 高 + 32px 行高,**只够放一行**。
|
||||
- 移除 `el-input` 上冗余的 `style="width: 100%"`。
|
||||
|
||||
效果:省市区级联选择器保持 250px,详细地址输入框自动延伸至该 form-item 内容区右边缘。
|
||||
|
||||
## Tabs 区域卡片化(业务明细)
|
||||
用户截图反馈:弹窗内 tabs(评分表/联系人/收款信息/发票信息)标签头裸露在灰底上,需要整体包进白底卡片。
|
||||
|
||||
改动(`src/views/vehicle/customer-archive.vue`):
|
||||
- `<el-tabs>` 外层包裹 `<section-card title="业务明细">`,使 tabs 标签头与内容统一在一张白底卡片内,与上方工商/联系/财务/其他信息分组视觉一致。
|
||||
|
||||
## 客商档案弹窗标题去掉蓝色竖条
|
||||
用户截图标注「新增客商档案」弹窗标题左侧的 4px 主色竖条不要了。
|
||||
- 第一次尝试在 scoped 样式里用 `:deep(.el-dialog__title::before){display:none}` 未生效,因为该 `el-dialog` 开启了 `append-to-body`,DOM 被 teleport 到 body,scoped 样式挂不上。
|
||||
- 最终方案:在 `customer-archive.vue` 末尾新增一个非 scoped 的 `<style lang="scss">` 块,写全局规则:
|
||||
```scss
|
||||
.archive-dialog .el-dialog__title::before {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
- 后续用户要求「应用到全部的弹窗」,改为全局移除:编辑 `src/styles/element-ui.scss`,把竖条共享规则 `.el-dialog__title:not(:empty)::before, .dialog-section-title::before` 拆开,仅保留 `.dialog-section-title::before`(分组标题仍带竖条),`.el-dialog__title` 不再有竖条。同时删除了 `customer-archive.vue` 末尾的特例 `<style>` 块。
|
||||
- 注意:这与 AGENTS.md 4.8「新增/编辑弹窗标题左侧必须展示 4px 主色竖条」规范冲突,按用户决策已全局移除弹窗主标题竖条;如需恢复,把 `.el-dialog__title` 加回共享规则即可。
|
||||
|
||||
@@ -183,7 +183,6 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.el-dialog__title:not(:empty)::before,
|
||||
.dialog-section-title::before {
|
||||
content: '';
|
||||
flex: none;
|
||||
|
||||
@@ -393,6 +393,7 @@
|
||||
</section-card>
|
||||
</el-form>
|
||||
|
||||
<section-card class="archive-detail-card">
|
||||
<el-tabs v-model="activeTab" class="archive-tabs">
|
||||
<el-tab-pane label="评分表" name="scores">
|
||||
<section-card>
|
||||
@@ -578,6 +579,7 @@
|
||||
</section-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</section-card>
|
||||
|
||||
<section-card title="客商材料">
|
||||
<template #extra>
|
||||
@@ -3780,6 +3782,7 @@ export default {
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
:deep(.vehicle-attachment-upload) {
|
||||
width: auto;
|
||||
@@ -3793,8 +3796,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.archive-detail-card {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.archive-tabs {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.score-list-table {
|
||||
|
||||
Reference in New Issue
Block a user