@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); // 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; // } // // PageContainer Header样式 - 固定悬浮在UmiJS Header下方 // div[class*='page-container-header'], // .ant-pro-page-container > div[class*='page-container-header'], // .ant-pro-page-container-header { // position: fixed !important; // top: 64px !important; /* UmiJS Header的高度 */ // right: 0 !important; // left: 220px !important; /* 侧边栏宽度 */ // z-index: 999 !important; // margin: 0 !important; // padding: 8px 24px !important; /* 增加padding */ // background: #ffffff !important; // border-bottom: 1px solid #f0f0f0 !important; // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; // height: auto !important; // min-height: 40px !important; // max-height: 52px !important; // display: flex !important; // align-items: center !important; // } // // 当侧边栏折叠时,调整tabs header的left值 // .ant-layout-sider-collapsed ~ .ant-layout .ant-pro-page-container-header { // left: 64px !important; // } // // 强制PageContainer header样式 // .ant-pro-page-container .ant-pro-page-container-header { // position: fixed !important; // top: 64px !important; // right: 0 !important; // left: 220px !important; // z-index: 999 !important; // margin: 0 !important; // padding: 8px 24px !important; // min-height: 40px !important; // max-height: 52px !important; // display: flex !important; // align-items: center !important; // } // // 确保UmiJS Header固定在顶部 // .ant-pro-header, // .ant-layout-header { // position: fixed !important; // top: 0 !important; // right: 0 !important; // left: 220px !important; // z-index: 1000 !important; // width: auto !important; // background: #ffffff !important; // border-bottom: 1px solid #f0f0f0 !important; // } // .ant-layout-sider-collapsed ~ .ant-layout .ant-pro-header, // .ant-layout-sider-collapsed + .ant-layout .ant-pro-header { // left: 64px !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; // display: flex !important; // align-items: center !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; // display: flex !important; // align-items: center !important; // } // .ant-pro-page-container-header .ant-tabs-tab, // div[class*='page-container-header'] .ant-tabs-tab { // padding: 4px 10px !important; // background: #f5f5f5; // border-radius: 4px; // margin-right: 4px; // transition: all 0.2s; // height: 26px !important; // line-height: 26px !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; // } // // 内容区域 - 调整padding以适应固定的header .ant-pro-grid-content { padding: 15px; // padding-top: 20px; /* 64px UmiJS Header + 48px tabs header + 8px */ } .ant-page-header { padding: 0 15px !important; } // .ant-pro-page-container { // padding-top: 0 !important; // } // .ant-pro-page-container-warp { // padding: 0 !important; // } // .ant-pro-page-container-children-content { // padding: 24px !important; // padding-top: 0 !important; // } // // 确保主内容区域正确的padding // .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; } .my-prefix-sider-actions { // display: none !important; } // 确保顶部Header始终显示,不受响应式影响 // .ant-pro-header { // display: flex !important; // width: 100% !important; // } // 确保在所有屏幕尺寸下header都显示 // @media (min-width: 0px) { // .ant-pro-header { // display: flex !important; // } // } // .ant-layout-header { // display: flex !important; // } // // 确保顶部Header显示 // .ant-pro-header { // display: flex !important; // } // // 确保PageContainer的affix header显示 // .ant-pro-page-container-affix { // display: block !important; // }