diff --git a/src/global.less b/src/global.less new file mode 100644 index 0000000..48268ae --- /dev/null +++ b/src/global.less @@ -0,0 +1,100 @@ +@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 { + display: flex !important; + justify-content: space-between; + align-items: center; + padding: 0 24px !important; + background: #ffffff !important; + border-bottom: 1px solid #f0f0f0; + line-height: 64px; +} + +.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; +} + +// 内容区域 +.ant-pro-grid-content { + padding: 24px; +} + +// 页面容器卡片 +.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; +}