@import '~antd/es/style/reset.css'; // 全局样式 body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5715; color: #262626; background-color: #f5f5f5; } // 自定义Logo样式 .custom-logo { display: flex; align-items: center; height: 64px; padding: 0 16px; border-bottom: 1px solid #f0f0f0; transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000); background: #ffffff; } .custom-logo .logo-icon { font-size: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; } .custom-logo .logo-text { margin-left: 12px; font-size: 16px; font-weight: 600; color: #262626; white-space: nowrap; opacity: 1; transition: opacity 0.2s; } // 折叠状态 .ant-layout-sider-collapsed .custom-logo { padding: 0; justify-content: center; } .ant-layout-sider-collapsed .custom-logo .logo-text { display: none; } // 自定义Header样式 .custom-header { position: fixed !important; top: 0 !important; right: 0 !important; left: 220px !important; /* 侧边栏宽度 */ z-index: 1001 !important; /* 提高z-index确保在最上层 */ display: flex !important; justify-content: space-between; align-items: center; height: 64px !important; padding: 0 24px !important; background: #ffffff !important; border-bottom: 1px solid #f0f0f0; line-height: 64px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } // 当侧边栏折叠时,调整header的left值 .ant-layout-sider-collapsed ~ .ant-layout .custom-header, .ant-layout-sider-collapsed + .ant-layout .custom-header { left: 64px !important; } // Tabs Header样式 - 使用padding-top避免重叠 div[class*="page-container-header"], .ant-pro-page-container > div[class*="page-container-header"], .ant-pro-page-container-header { padding-top: 64px !important; /* 等于CustomHeader的高度 */ padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; background: #ffffff !important; border-bottom: 1px solid #f0f0f0 !important; position: relative !important; height: auto !important; } // Tabs header的内部padding .ant-pro-page-container-header > div, div[class*="page-container-header"] > div { padding: 6px 24px !important; /* 内部padding */ } // 强制PageContainer header样式 .ant-pro-page-container .ant-pro-page-container-header { padding-top: 64px !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; background: #ffffff !important; border-bottom: 1px solid #f0f0f0 !important; } // Tabs样式优化 - 减小高度 .ant-pro-page-container-header .tabs-header-only, div[class*="page-container-header"] .tabs-header-only { margin: 0 !important; line-height: 1 !important; height: auto !important; } .ant-pro-page-container-header .ant-tabs, div[class*="page-container-header"] .ant-tabs { margin: 0 !important; height: auto !important; } .ant-pro-page-container-header .ant-tabs-nav, div[class*="page-container-header"] .ant-tabs-nav { margin-bottom: 0 !important; height: auto !important; } .ant-pro-page-container-header .ant-tabs-nav-list, div[class*="page-container-header"] .ant-tabs-nav-list { margin-bottom: 0 !important; height: auto !important; } .ant-pro-page-container-header .ant-tabs-tab, div[class*="page-container-header"] .ant-tabs-tab { padding: 4px 10px !important; /* 减小padding */ background: #f5f5f5; border-radius: 4px; margin-right: 4px; transition: all 0.2s; height: 28px !important; /* 减小标签高度 */ line-height: 28px !important; font-size: 13px; display: inline-flex !important; align-items: center !important; } .ant-pro-page-container-header .ant-tabs-tab-active, div[class*="page-container-header"] .ant-tabs-tab-active { background: #ffffff; font-weight: 500; } .ant-pro-page-container-header .ant-tabs-ink-bar, div[class*="page-container-header"] .ant-tabs-ink-bar { display: none !important; } // 移除PageContainer原有的间距 .ant-pro-page-container { padding-top: 0 !important; } .ant-pro-page-container-warp { padding-top: 0 !important; } .custom-header .header-left { flex: 1; } .custom-header .header-right { display: flex; align-items: center; gap: 16px; } .custom-header .header-right > div { display: flex; align-items: center; transition: opacity 0.2s; } .custom-header .header-right > div:hover { opacity: 0.8; } // 内容区域 - 添加顶部padding避免被固定header遮挡 .ant-pro-grid-content { padding: 24px; padding-top: 24px; /* 恢复正常padding */ } .ant-pro-page-container { padding-top: 0 !important; } .ant-pro-page-container-children-content { padding-top: 0 !important; padding: 24px !important; } // 页面容器卡片 .ant-pro-page-container { background: transparent; } .ant-pro-page-container .ant-pro-page-container-warp { background: #ffffff; border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03); padding: 24px; } // 隐藏侧边栏底部的用户信息区域 .ant-pro-sider .ant-pro-sider-actions { display: none !important; } .ant-pro-sider-collapsed .ant-pro-sider-actions { display: none !important; } // 确保顶部Header显示 .ant-pro-header { display: flex !important; }