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%"`。
|
- 移除 `el-input` 上冗余的 `style="width: 100%"`。
|
||||||
|
|
||||||
效果:省市区级联选择器保持 250px,详细地址输入框自动延伸至该 form-item 内容区右边缘。
|
效果:省市区级联选择器保持 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;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog__title:not(:empty)::before,
|
|
||||||
.dialog-section-title::before {
|
.dialog-section-title::before {
|
||||||
content: '';
|
content: '';
|
||||||
flex: none;
|
flex: none;
|
||||||
|
|||||||
@@ -393,6 +393,7 @@
|
|||||||
</section-card>
|
</section-card>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
|
<section-card class="archive-detail-card">
|
||||||
<el-tabs v-model="activeTab" class="archive-tabs">
|
<el-tabs v-model="activeTab" class="archive-tabs">
|
||||||
<el-tab-pane label="评分表" name="scores">
|
<el-tab-pane label="评分表" name="scores">
|
||||||
<section-card>
|
<section-card>
|
||||||
@@ -578,6 +579,7 @@
|
|||||||
</section-card>
|
</section-card>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
</section-card>
|
||||||
|
|
||||||
<section-card title="客商材料">
|
<section-card title="客商材料">
|
||||||
<template #extra>
|
<template #extra>
|
||||||
@@ -3780,6 +3782,7 @@ export default {
|
|||||||
grid-template-columns: 1fr auto 1fr;
|
grid-template-columns: 1fr auto 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
|
||||||
:deep(.vehicle-attachment-upload) {
|
:deep(.vehicle-attachment-upload) {
|
||||||
width: auto;
|
width: auto;
|
||||||
@@ -3793,8 +3796,10 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.archive-detail-card {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
.archive-tabs {
|
.archive-tabs {
|
||||||
margin-top: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.score-list-table {
|
.score-list-table {
|
||||||
|
|||||||
Reference in New Issue
Block a user