Browse Source

style(inspection): 更新表格行样式以突出显示数量修改

- 将 /deep/ 选择器替换为 ::v-deep 以确保更好的兼容性
- 优化了修改行的背景色配置,提高视觉效果
- 添加了悬停状态的颜色变化以便更好地区分
- 统一了样式规则,移除了重复的CSS定义
- 调整了颜色值以提供更好的对比度和可读性
- 简化了表格行类名应用逻辑,增强代码维护性
master
qiankanghui 3 days ago
parent
commit
90770de500
  1. 24
      src/views/modules/inspection/inspectionRequestAudit.vue
  2. 36
      src/views/modules/inspection/inspectionRequestList.vue

24
src/views/modules/inspection/inspectionRequestAudit.vue

@ -629,25 +629,27 @@ export default {
} }
// - // -
/deep/ .el-table__body tr.modified-request-row {
// 使 ::v-deep
::v-deep .el-table .modified-request-row {
background-color: #fef0f0 !important; background-color: #fef0f0 !important;
} }
/deep/ .el-table__body tr.modified-request-row > td {
// td Element td
::v-deep .el-table .modified-request-row td {
background-color: #fef0f0 !important; background-color: #fef0f0 !important;
color: #f56c6c !important; color: #f56c6c !important;
} }
/deep/ .el-table__body tr.modified-request-row:hover > td {
background-color: #fde2e2 !important;
}
/deep/ .el-table__row.current-row.modified-request-row {
background-color: #fef0f0 !important;
// hover
::v-deep .el-table .el-table__body tr.modified-request-row:hover > td {
background-color: #fde2e2 !important; // 便 hover
} }
</style>
/deep/ .el-table__row.current-row.modified-request-row > td {
background-color: #fef0f0 !important;
color: #f56c6c !important;
<!-- 全局样式 - 仅对有 modified-request-row 类的行生效 -->
<style lang="scss">
.el-table__body tr.modified-request-row > td {
background-color: #ffe6e6 !important;
color: #333333 !important;
} }
</style> </style>

36
src/views/modules/inspection/inspectionRequestList.vue

@ -1421,24 +1421,22 @@ padding: 10px 15px 0 0;
} }
} }
// -
/deep/ .el-table__row.modified-request-row {
background-color: #fef0f0 !important;
td {
background-color: #fef0f0 !important;
color: #f56c6c !important;
}
/* 强制主表红色背景 */
::v-deep .el-table__body tr.modified-request-row td {
background-color: #ff4d4f !important;
color: #ffffff !important;
}
&:hover > td {
background-color: #fde2e2 !important;
}
/* 当前选中行也强制红色 */
::v-deep .el-table__body tr.modified-request-row.current-row td {
background-color: #ff4d4f !important;
color: #ffffff !important;
} }
//
/deep/ .el-table__body tr.modified-request-row > td {
background-color: #fef0f0 !important;
color: #f56c6c !important;
/* hover状态 */
::v-deep .el-table__body tr.modified-request-row:hover td {
background-color: #ff7875 !important;
color: #ffffff !important;
} }
.po-section { .po-section {
@ -1466,3 +1464,11 @@ padding: 10px 15px 0 0;
} }
</style> </style>
<!-- 全局样式 - 仅对有 modified-request-row 类的行生效 -->
<style lang="scss">
.el-table__body tr.modified-request-row > td {
background-color: #ffe6e6 !important;
color: #333333 !important;
}
</style>
Loading…
Cancel
Save