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

fix: 设计师绩效表格和部门管理表格样式优化-不换行、移除边框

Browse Source
This commit is contained in:
Your Name 2026-01-08 13:48:25 +08:00
parent 941a18e29b
commit 5c60a73aff
2 changed files with 158 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1426,12 +1426,31 @@ onMounted(() => {
:deep(.ant-table) {
background: transparent !important;
// 移除所有表格边框
.ant-table-container,
.ant-table-content,
.ant-table-thead,
.ant-table-tbody {
border: none !important;
}
table {
border-collapse: collapse !important;
border-spacing: 0 !important;
}
.ant-table-thead > tr > th {
background: rgba(0, 0, 0, 0.3) !important;
border-bottom: none !important;
color: rgba(255, 255, 255, 0.5) !important;
background: rgba(0, 0, 0, 0.4) !important;
border: none !important;
color: rgba(255, 255, 255, 0.6) !important;
font-weight: 500;
padding: 14px 16px;
font-size: 13px;
padding: 12px 8px;
white-space: nowrap;
&::before {
display: none !important; // 移除表头分隔线
}
}
.ant-table-tbody > tr {
@ -1439,30 +1458,65 @@ onMounted(() => {
> td {
background: transparent !important;
border-bottom: none !important;
padding: 14px 16px;
border: none !important;
padding: 10px 8px;
color: rgba(255, 255, 255, 0.85);
transition: none !important;
font-size: 13px;
white-space: nowrap; // 不允许换行
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px; // 限制最大宽度
}
// 斑马纹效果替代边框线
&:nth-child(even) > td {
background: rgba(255, 255, 255, 0.02) !important;
background: rgba(255, 255, 255, 0.015) !important;
}
&:hover > td {
background: rgba(49, 240, 139, 0.08) !important;
background: rgba(49, 240, 139, 0.06) !important;
}
}
// 星星评分白色
// 移除所有可能的边框线
.ant-table-cell {
border: none !important;
&::before, &::after {
display: none !important;
}
}
// 星星评分白色 - 强制覆盖
.ant-rate {
font-size: 12px !important;
.ant-rate-star {
color: rgba(255, 255, 255, 0.15) !important;
color: rgba(255, 255, 255, 0.2) !important;
&.ant-rate-star-full .ant-rate-star-second,
&.ant-rate-star-half .ant-rate-star-first {
svg {
fill: rgba(255, 255, 255, 0.2) !important;
}
}
.ant-rate-star-full,
.ant-rate-star-half {
.ant-rate-star-first,
.ant-rate-star-second {
color: #ffffff !important;
svg {
fill: #ffffff !important;
}
}
}
.ant-rate-star-full .ant-rate-star-second {
color: #ffffff !important;
svg {
fill: #ffffff !important;
}
}
}

92
frontend/src/views/Settings.vue
View File

@ -6153,6 +6153,98 @@ watch(activeTab, (value) => {
font-size: $font-size-sm;
color: $text-tertiary;
}
// ===== 部门管理表格样式优化 - 不换行显示 =====
:deep(.ant-table) {
// 移除边框
.ant-table-container,
.ant-table-content,
.ant-table-thead,
.ant-table-tbody {
border: none !important;
}
table {
border-collapse: collapse !important;
}
.ant-table-thead > tr > th {
background: rgba(0, 0, 0, 0.3) !important;
border: none !important;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 13px;
padding: 12px 8px;
white-space: nowrap;
&::before {
display: none !important;
}
}
.ant-table-tbody > tr {
> td {
border: none !important;
padding: 10px 8px;
font-size: 13px;
white-space: nowrap;
vertical-align: middle;
}
&:nth-child(even) > td {
background: rgba(255, 255, 255, 0.015) !important;
}
&:hover > td {
background: rgba(49, 240, 139, 0.05) !important;
}
}
.ant-table-cell {
border: none !important;
&::before, &::after {
display: none !important;
}
}
// 树形表格展开图标
.ant-table-row-expand-icon {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.3) !important;
color: rgba(255, 255, 255, 0.6) !important;
}
}
// 部门信息单元格 - 不换行
.dept-info-cell {
.dept-info-main {
display: flex;
align-items: center;
white-space: nowrap;
.dept-name-text {
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.dept-info-sub {
font-size: 12px;
color: rgba(255, 255, 255, 0.45);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
.dept-desc {
opacity: 0.7;
}
}
}
</style>