From ae45e88df944544e2a1128486d4b4d5c2b8c790b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Wed, 26 Aug 2026 17:53:44 +0800 Subject: [PATCH] =?UTF-8?q?fix(styles):=20=E7=BB=9F=E4=B8=80=E5=85=A8?= =?UTF-8?q?=E7=AB=99=20el-table=20=E8=A1=A8=E5=A4=B4=E6=96=87=E5=AD=97?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=EF=BC=8C=E4=BF=AE=E5=A4=8D=20project-apply?= =?UTF-8?q?=20=E8=A1=A8=E5=A4=B4=E8=89=B2=E5=B7=AE=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 解决 project-apply 页面表头颜色在不同电脑显示不一致的问题 - 在 element-ui.scss 中新增高优先级规则，统一 el-table 表头文字颜色为 #374151 - 清理 project-apply.vue 中与全局样式冲突且无效的局部表头样式，保留字体加粗样式 - 修改选择器为 :deep(.el-table__header th .cell)，确保样式生效且不影响背景色 --- .workbuddy/memory/2026-08-26.md | 25 +++++++++++++++++++++++++ src/styles/element-ui.scss | 5 +++++ src/views/business/project-apply.vue | 8 ++------ 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/.workbuddy/memory/2026-08-26.md b/.workbuddy/memory/2026-08-26.md index d626039..7e59dc9 100644 --- a/.workbuddy/memory/2026-08-26.md +++ b/.workbuddy/memory/2026-08-26.md @@ -95,3 +95,28 @@ customer-archive.vue:4980(按钮 min-width)、cargo-type.vue:604(选择器拼错 **保留未动**: 所有 `__search` 搜索栏的 8px、risk-disposal 的 28px 特殊分组、transportCapacity vehicle/driver/ship 与 customer-archive 等本就是 14px（含 !important）。 + +## project-apply 表头颜色在不同电脑不一致 + +**问题**: 客户反馈 `business/project-apply/form?mode=add` 页面中「客户信息」等表格表头颜色 +在用户电脑是 `#374151`，客户电脑是 `#909399`。 + +**根因**: +- `src/styles/theme/go.scss` 中 `.theme-go .el-table tr th .cell { color: #374151 }` 把表头文字写死为 `#374151`。 +- 客户电脑未使用 `theme-go`，表头文字走 Element Plus 默认 CSS 变量 + `--el-table-header-text-color: #909399`。 +- `src/views/business/project-apply.vue` 里的 `:deep(.el-table__header th) { color: #303133 }` + 只作用在 `th` 上，颜色靠继承，优先级敌不过直接写在 `.cell` 上的规则和 Element Plus 默认值， + 所以实际没生效。 + +**修复**: +- `src/styles/element-ui.scss` 在「统一全站 el-table 表头背景色」之后追加规则： + ```scss + .el-table .el-table__header-wrapper th.el-table__cell .cell { + color: #374151; + } + ``` + 直接作用于 `.cell`，特异性高于 `theme-go` 和 Element Plus 默认，全站统一为 `#374151`。 +- `src/views/business/project-apply.vue` 清理两处与全局冲突且不生效的局部表头样式： + 删除 `background: #f5f7fa; color: #303133;`，保留 `font-weight: 600`， + 选择器改为 `:deep(.el-table__header th .cell)`。 diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 8a477ac..e1e228d 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -651,6 +651,11 @@ background-color: #fafafa !important; } +// 统一全站 el-table 表头文字颜色，避免不同主题/浏览器下颜色不一致（#909399 vs #374151） +.el-table .el-table__header-wrapper th.el-table__cell .cell { + color: #374151; +} + // 全站统一：表格列内容（表头 + 单元格）居中展示 .el-table th.el-table__cell .cell, .el-table td.el-table__cell .cell { diff --git a/src/views/business/project-apply.vue b/src/views/business/project-apply.vue index d49a735..7ad0c92 100644 --- a/src/views/business/project-apply.vue +++ b/src/views/business/project-apply.vue @@ -2155,9 +2155,7 @@ export default { padding: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); - :deep(.el-table__header th) { - background: #f5f7fa; - color: #303133; + :deep(.el-table__header th .cell) { font-weight: 600; } @@ -2201,9 +2199,7 @@ export default { width: 100%; margin-bottom: 12px; - :deep(.el-table__header th) { - background: #f5f7fa; - color: #303133; + :deep(.el-table__header th .cell) { font-weight: 600; }