lunanting/qiangdanxitong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复扣分明细弹窗UI样式，使用非scoped样式和wrapClassName确保样式正确应用

Browse Source
This commit is contained in:
Your Name 2026-01-14 10:10:10 +08:00
parent d2768d5264
commit 7142cda20f
1 changed files with 64 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
frontend/src/views/Analytics.vue
View File

@ -437,6 +437,7 @@
title="扣分明细" title="扣分明细"
width="800px" width="800px"
:footer="null" :footer="null"
wrap-class-name="deduction-detail-modal-wrap"
class="deduction-detail-modal" class="deduction-detail-modal"
> >
<a-spin :spinning="deductionDetailLoading"> <a-spin :spinning="deductionDetailLoading">
@ -1862,14 +1863,20 @@ onMounted(() => {
} }
} }
// 扣分明细弹窗样式 // 扣分明细弹窗样式（使用非scoped样式，因为Modal渲染到body）
.deduction-detail-modal { </style>
:deep(.ant-modal-content) {
<style lang="scss">
@import "@/styles/variables.scss";
// 扣分明细弹窗样式 - 非scoped，因为Modal渲染到body
.deduction-detail-modal-wrap {
.ant-modal-content {
background: $bg-card; background: $bg-card;
border: 1px solid $border-primary; border: 1px solid $border-primary;
} }
:deep(.ant-modal-header) { .ant-modal-header {
background: $bg-card; background: $bg-card;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
@ -1878,13 +1885,13 @@ onMounted(() => {
} }
} }
:deep(.ant-modal-body) { .ant-modal-body {
background: $bg-card; background: $bg-card;
padding: 24px; padding: 24px;
} }
// 表格样式 - 与用户管理页面严格一致（使用 !important 覆盖全局样式） // 表格样式 - 与用户管理页面严格一致
:deep(.ant-table) { .ant-table {
background: transparent !important; background: transparent !important;
.ant-table-container { .ant-table-container {
@ -1908,9 +1915,11 @@ onMounted(() => {
.ant-table-tbody > tr { .ant-table-tbody > tr {
background: transparent !important; background: transparent !important;
transition: none !important;
&:hover > td { &:hover > td {
background: rgba($brand-primary, 0.03) !important; background: rgba($brand-primary, 0.03) !important;
transition: none !important;
} }
> td { > td {
@ -1921,6 +1930,7 @@ onMounted(() => {
border-left: none !important; border-left: none !important;
border-right: none !important; border-right: none !important;
border-top: none !important; border-top: none !important;
transition: none !important;
} }
} }
@ -1930,56 +1940,59 @@ onMounted(() => {
border-right: none !important; border-right: none !important;
} }
} }
}
.deduction-detail-content { .deduction-detail-content {
.designer-info { .designer-info {
margin-bottom: 24px; margin-bottom: 24px;
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
h4 { h4 {
color: $text-primary; color: $text-primary;
font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
}
.designer-dept {
color: $text-secondary;
font-size: 14px;
margin: 0 0 8px 0;
}
.total-deduction {
color: $text-primary;
font-size: 16px;
margin: 0;
.deduction-number {
color: #ef4444;
font-weight: 600;
font-size: 18px; font-size: 18px;
font-weight: 600;
margin: 0 0 8px 0;
}
.designer-dept {
color: $text-secondary;
font-size: 14px;
margin: 0 0 8px 0;
}
.total-deduction {
color: $text-primary;
font-size: 16px;
margin: 0;
.deduction-number {
color: #ef4444;
font-weight: 600;
font-size: 18px;
}
} }
} }
}
.deduction-section { .deduction-section {
margin-bottom: 24px; margin-bottom: 24px;
h5 { h5 {
color: $text-primary; color: $text-primary;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
margin: 0 0 12px 0; margin: 0 0 12px 0;
}
} }
}
.no-data {
.no-data { text-align: center;
text-align: center; padding: 40px 0;
padding: 40px 0; color: $text-tertiary;
color: $text-tertiary; }
} }
} }
</style> </style>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
</style>