@import '~ant-design-vue/es/style/themes/default.less'; /* ========== 完全隐藏 ant-layout-footer ========== */ :global { /* 全局隐藏所有 ant-layout-footer */ .ant-layout-footer, footer.ant-layout-footer, .ant-pro-layout .ant-layout-footer, .ant-layout .ant-layout-footer { display: none !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; min-height: 0 !important; visibility: hidden !important; overflow: hidden !important; } } /* ========== ant-layout-header 主题适配 ========== */ /* 全局样式:根据 body 或 layout 的主题类自动适配 */ :global { /* 暗黑主题下的 ant-layout-header */ body.dark .ant-layout-header, body.realdark .ant-layout-header, .ant-layout.dark .ant-layout-header, .ant-layout.realdark .ant-layout-header, .ant-pro-layout.dark .ant-layout-header, .ant-pro-layout.realdark .ant-layout-header { background: #001529 !important; border-bottom: 1px solid #1f1f1f !important; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) !important; color: rgba(255, 255, 255, 0.85) !important; /* Header 内的所有文字和图标 */ * { color: rgba(255, 255, 255, 0.85) !important; } /* Header 内的图标按钮 */ .anticon { color: rgba(255, 255, 255, 0.85) !important; &:hover { color: #1890ff !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 4px; } } /* Header 内的链接 */ a { color: rgba(255, 255, 255, 0.85) !important; &:hover { color: #1890ff !important; } } /* Header 内的工具提示容器 */ .ant-tooltip-open { .anticon { color: rgba(255, 255, 255, 0.85) !important; } } } /* 浅色主题下的 ant-layout-header(确保覆盖默认样式) */ body.light .ant-layout-header, .ant-layout.light .ant-layout-header, .ant-pro-layout.light .ant-layout-header { background: #fff !important; border-bottom: 1px solid #e8e8e8 !important; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) !important; color: rgba(0, 0, 0, 0.85) !important; } /* ========== ant-layout-content 主题适配(中间页面内容区域) ========== */ /* 暗黑主题下的内容区域 */ body.dark .ant-layout-content, body.realdark .ant-layout-content, .ant-layout.dark .ant-layout-content, .ant-layout.realdark .ant-layout-content, .ant-pro-layout.dark .ant-layout-content, .ant-pro-layout.realdark .ant-layout-content { background: #141414 !important; color: rgba(255, 255, 255, 0.85) !important; } /* 浅色主题下的内容区域 */ body.light .ant-layout-content, .ant-layout.light .ant-layout-content, .ant-pro-layout.light .ant-layout-content { background: #f0f2f5 !important; color: rgba(0, 0, 0, 0.85) !important; } /* ========== GlobalHeader 核心样式(基于 .ant-pro-global-header) ========== */ /* 暗黑主题下的 .ant-pro-global-header - 这是控制顶部标题栏的关键样式 */ body.dark .ant-pro-global-header, body.realdark .ant-pro-global-header, .ant-layout.dark .ant-pro-global-header, .ant-layout.realdark .ant-pro-global-header, .ant-pro-layout.dark .ant-pro-global-header, .ant-pro-layout.realdark .ant-pro-global-header, body.dark .ant-layout-header .ant-pro-global-header, body.realdark .ant-layout-header .ant-pro-global-header, .ant-pro-layout.dark .ant-layout-header .ant-pro-global-header, .ant-pro-layout.realdark .ant-layout-header .ant-pro-global-header { /* 核心:背景色和边框 */ background: #001529 !important; border-bottom: 1px solid #1f1f1f !important; box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) !important; color: rgba(255, 255, 255, 0.85) !important; /* 强制所有子元素文字颜色 */ * { color: rgba(255, 255, 255, 0.85) !important; } /* Logo 区域 */ .ant-pro-global-header-logo { background: transparent !important; color: rgba(255, 255, 255, 0.85) !important; h1 { color: rgba(255, 255, 255, 0.85) !important; } img { opacity: 0.9; } * { color: rgba(255, 255, 255, 0.85) !important; } } } /* Header 内容区域(中间部分,包含刷新按钮等) */ .ant-pro-global-header-content { background: transparent !important; color: rgba(255, 255, 255, 0.85) !important; * { color: rgba(255, 255, 255, 0.85) !important; } /* 刷新按钮等图标 */ .anticon { color: rgba(255, 255, 255, 0.85) !important; &:hover { color: #1890ff !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 4px; } } /* 工具提示内的图标 */ .ant-tooltip-open .anticon { color: rgba(255, 255, 255, 0.85) !important; } } /* Header 右侧内容区域(包含头像、语言选择、设置按钮) */ .ant-pro-global-header-index-right { background: transparent !important; color: rgba(255, 255, 255, 0.85) !important; * { color: rgba(255, 255, 255, 0.85) !important; } /* 操作按钮(头像、语言、设置) */ .ant-pro-global-header-index-action { color: rgba(255, 255, 255, 0.85) !important; &:hover { color: #1890ff !important; background: rgba(255, 255, 255, 0.08) !important; } .anticon { color: rgba(255, 255, 255, 0.85) !important; } } /* 头像区域 */ .ant-pro-account-avatar { color: rgba(255, 255, 255, 0.85) !important; span { color: rgba(255, 255, 255, 0.85) !important; } .antd-pro-global-header-index-avatar { background: rgba(255, 255, 255, 0.25) !important; } } /* 下拉菜单触发器 */ .ant-pro-drop-down, .ant-dropdown-trigger { color: rgba(255, 255, 255, 0.85) !important; &:hover { color: #1890ff !important; background: rgba(255, 255, 255, 0.08) !important; } .anticon { color: rgba(255, 255, 255, 0.85) !important; } } } /* 链接样式 */ a { color: rgba(255, 255, 255, 0.85) !important; &:hover { color: #1890ff !important; } } /* 所有图标 */ .anticon { color: rgba(255, 255, 255, 0.85) !important; &:hover { color: #1890ff !important; } } /* 浅色主题下的 .ant-pro-global-header */ body.light .ant-pro-global-header, .ant-layout.light .ant-pro-global-header, .ant-pro-layout.light .ant-pro-global-header, body.light .ant-layout-header .ant-pro-global-header, .ant-pro-layout.light .ant-layout-header .ant-pro-global-header { background: #fff !important; border-bottom: 1px solid #e8e8e8 !important; color: rgba(0, 0, 0, 0.85) !important; } } /* ========== 全局布局主题适配 - 强化覆盖 ========== */ :global(.ant-pro-layout) { /* 暗黑主题下的完整布局 */ &.dark, &.realdark { /* 0. 基础 Layout 背景 - 确保整体背景变暗 */ :global(.ant-layout) { background-color: #001529 !important; } /* 1. 顶部 Header */ :global(.ant-layout-header) { background: #001529 !important; border-bottom: 1px solid #1f1f1f !important; color: rgba(255, 255, 255, 0.85) !important; :global(.ant-pro-global-header) { background: #001529 !important; border-bottom: none !important; color: rgba(255, 255, 255, 0.85) !important; * { color: rgba(255, 255, 255, 0.85) !important; } } } /* 2. 中间内容区域 */ :global(.ant-layout-content) { background: #141414 !important; color: rgba(255, 255, 255, 0.85) !important; } :global(.ant-pro-basicLayout-content) { background: #141414 !important; color: rgba(255, 255, 255, 0.85) !important; } } /* 浅色主题下的完整布局 */ &.light { /* 0. 基础 Layout 背景 */ :global(.ant-layout) { background-color: #f0f2f5 !important; } /* 1. 顶部 Header */ :global(.ant-layout-header) { background: #fff !important; border-bottom: 1px solid #e8e8e8 !important; color: rgba(0, 0, 0, 0.85) !important; } /* 2. 中间内容区域 */ :global(.ant-layout-content) { background: #f0f2f5 !important; color: rgba(0, 0, 0, 0.85) !important; } :global(.ant-pro-basicLayout-content) { background: #f0f2f5 !important; color: rgba(0, 0, 0, 0.85) !important; } } } .ant-pro-global-header-index-right { margin-right: 8px; &.ant-pro-global-header-index-dark { .ant-pro-global-header-index-action { color: hsl(0deg 0% 100% / 85%); &:hover { background: #1890ff; } } /* 暗黑主题下的头像下拉菜单 */ .ant-pro-account-avatar { color: rgba(255, 255, 255, 0.85); .antd-pro-global-header-index-avatar { background: rgba(255, 255, 255, 0.25) !important; } span { color: rgba(255, 255, 255, 0.85); } } /* 语言选择器和设置按钮 */ .ant-pro-drop-down { color: rgba(255, 255, 255, 0.85); &:hover { color: #1890ff; background: rgba(255, 255, 255, 0.08); } } } /* 浅色主题下的头像样式 */ .ant-pro-account-avatar { .antd-pro-global-header-index-avatar { margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0; margin-right: 8px; color: @primary-color; vertical-align: top; background: rgb(255 255 255 / 85%); } } .menu { .anticon { margin-right: 8px; } .ant-dropdown-menu-item { min-width: 100px; } } } /* 暗黑主题下的下拉菜单样式 */ :global { .ant-pro-layout.dark, .ant-pro-layout.realdark { .ant-dropdown-menu { background: #1f1f1f !important; border: 1px solid #303030 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; .ant-dropdown-menu-item { color: rgba(255, 255, 255, 0.85) !important; &:hover { background: #262626 !important; color: #1890ff !important; } } .ant-dropdown-menu-item-divider { background: #303030 !important; } } } } /* 手机端适配 */ @media (max-width: 768px) { :global { /* 使用更具体的选择器强制覆盖 */ .ant-layout-header .ant-pro-global-header .ant-pro-global-header-logo, .ant-pro-layout .ant-layout-header .ant-pro-global-header .ant-pro-global-header-logo, body .ant-layout-header .ant-pro-global-header .ant-pro-global-header-logo, .ant-pro-global-header-logo { padding: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } } }