diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index 7932b62..b2c5af5 100644 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -1059,7 +1059,7 @@ a.ant-btn-primary { // ===== 全局 Ant Design 分页样式统一 ===== // 统一所有页面的分页组件样式(深色主题) -:deep(.ant-pagination) { +.ant-pagination { .ant-pagination-item { background: $bg-tertiary !important; border-color: $border-primary !important; @@ -1166,7 +1166,7 @@ a.ant-btn-primary { } // 表格分页容器 -:deep(.ant-table-pagination) { +.ant-table-pagination { .ant-pagination { .ant-pagination-item { background: $bg-tertiary !important; diff --git a/frontend/src/views/TaskHall.vue b/frontend/src/views/TaskHall.vue index 230608c..9f00468 100644 --- a/frontend/src/views/TaskHall.vue +++ b/frontend/src/views/TaskHall.vue @@ -6809,6 +6809,75 @@ onUnmounted(() => { display: flex; justify-content: center; margin-top: $space-xl; + + // 分页组件深度样式覆盖 + :deep(.ant-pagination) { + .ant-pagination-item { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.15); + + a { + color: $text-secondary; + } + + &:hover { + border-color: $brand-primary; + + a { + color: $brand-primary; + } + } + + &.ant-pagination-item-active { + background: $brand-primary; + border-color: $brand-primary; + + a { + color: #000; + } + } + } + + .ant-pagination-prev, + .ant-pagination-next { + .ant-pagination-item-link { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.15); + color: $text-secondary; + } + + &:hover .ant-pagination-item-link { + border-color: $brand-primary; + color: $brand-primary; + } + + &.ant-pagination-disabled .ant-pagination-item-link { + color: $text-tertiary; + border-color: rgba(255, 255, 255, 0.1); + } + } + + .ant-pagination-jump-prev, + .ant-pagination-jump-next { + .ant-pagination-item-container { + .ant-pagination-item-ellipsis { + color: $text-tertiary; + } + + .ant-pagination-item-link-icon { + color: $brand-primary; + } + } + } + + .ant-pagination-options { + .ant-select-selector { + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.15); + color: $text-secondary; + } + } + } } // 任务进度条