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

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

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