fix(styles): 统一全站 el-table 表头文字颜色,修复 project-apply 表头色差问题
- 解决 project-apply 页面表头颜色在不同电脑显示不一致的问题 - 在 element-ui.scss 中新增高优先级规则,统一 el-table 表头文字颜色为 #374151 - 清理 project-apply.vue 中与全局样式冲突且无效的局部表头样式,保留字体加粗样式 - 修改选择器为 :deep(.el-table__header th .cell),确保样式生效且不影响背景色
This commit is contained in:
@@ -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)`。
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user