style(customer-archive): 优化弹窗Tabs样式及全局移除标题竖条

- tabs区域业务明细外层包裹白底卡片,统一视觉样式
- 去掉客商档案弹窗标题左侧的蓝色竖条,解决用户反馈
- 取消scoped样式尝试,改为非scoped全局样式修改
- 编辑全局element-ui.scss,拆分竖条共享规则,仅保留分组标题竖条
- 删除customer-archive.vue末尾特例样式
- 细节调整archive-tabs和archive-detail-card间距,修正样式冲突
This commit is contained in:
2026-08-11 17:23:52 +08:00
parent f0ee1e6ea3
commit c97f1fc0e3
3 changed files with 24 additions and 2 deletions
+18
View File
@@ -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 到 bodyscoped 样式挂不上。
- 最终方案:在 `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` 加回共享规则即可。