html, body, #root { width: 100%; height: 100%; margin: 0; } :root { --theme-color: #081A48; --theme-front: #fff; --header-height: 94px; --siderbar-width: 240px; } .main-layout { height: 100vh; display: flex; flex-direction: column; } .fixd-header { width: 100%; position: fixed; top: 0; height: var(--header-height); line-height: var(--header-height); z-index: 100; } .ant-layout { background-color: #f0f2f5; } .ant-layout-header { line-height: var(--header-height); box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); // border-bottom: 1px solid gainsboro; z-index: 10; } .layout-sidebar { width: var(--siderbar-width); background-color: var(--theme-color); color: var(--theme-front); box-shadow: 1px 0 4px 0 rgba(0, 21, 41, 0.08); .ant-menu { font-size: 16px; background: #0D267C; } .ant-menu-item { overflow: hidden; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .ant-menu-title-content { padding-left: 2em; } &.ant-layout-sider-collapsed { .ant-menu-title-content { padding-left: 0; } } } .ant-menu-horizontal > .ant-menu-item a { color: #fff !important; } // 兼容 360 .ant-pro-sider-collapsed-button { top: 18px; right: -13px; } .ant-pro .ant-pro-layout .ant-pro-sider-logo { padding: 16px; } .ant-pro .ant-pro-query-filter .ant-form-item { margin: 0; } .ant-pro-page-container .ant-pro-page-container-warp-page-header ~ .ant-pro-grid-content .ant-pro-page-container-children-content { margin: 8px 40px 40px 40px; } .ant-pro-table-list-toolbar-container { padding: 16px 0; } .ant-pro-card .ant-pro-card-body { padding: 16px 24px; }