feat: update layout styles

update layout styles by variables in the variables.less

Change-Id: I43fa54f52c791e629f9a04484c80947a04849556
This commit is contained in:
Jingwei.Zhang 2023-06-14 14:31:07 +08:00
parent 1ad65d35d5
commit 4496eb4f05
6 changed files with 12 additions and 10 deletions

View File

@ -14,7 +14,7 @@
"property-no-unknown": [ "property-no-unknown": [
true, true,
{ {
"ignoreProperties": ["/Color$/"] "ignoreProperties": ["/Color$/", "/Height$/"]
} }
] ]
} }

View File

@ -98,7 +98,7 @@
.ant-btn-link { .ant-btn-link {
position: absolute; position: absolute;
min-width: 280px; min-width: 280px;
min-height: 40px; min-height: @header-height;
} }
} }
} }

View File

@ -60,8 +60,8 @@ export class GlobalNav extends React.Component {
const { navItems = [] } = this.props; const { navItems = [] } = this.props;
const drawerStyle = { const drawerStyle = {
top: '40px', top: globalCSS.headerHeight,
height: 'calc(100% - 40px)', height: `calc(100% - ${globalCSS.headerHeight})`,
}; };
return ( return (

View File

@ -3,7 +3,7 @@
.global-nav-icon { .global-nav-icon {
position: relative; position: relative;
float: left; float: left;
width: @header-height; width: @sider-collapsed-width;
height: @header-height; height: @header-height;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;

View File

@ -19,7 +19,7 @@
.header-collapsed { .header-collapsed {
&:extend(.header); &:extend(.header);
padding-left: 40px; padding-left: @sider-collapsed-width;
} }
.logo { .logo {
@ -258,7 +258,7 @@
} }
.base-layout-sider-collapsed { .base-layout-sider-collapsed {
width: 40px; width: @sider-collapsed-width;
transition: all 0.2s; transition: all 0.2s;
.menu-collapsed { .menu-collapsed {
@ -274,14 +274,14 @@
.base-layout-right { .base-layout-right {
position: absolute; position: absolute;
top: 40px; top: @header-height;
right: 0; right: 0;
left: 230px; left: 230px;
height: calc(100vh - 40px); height: calc(100vh - @header-height);
} }
.base-layout-right-collapsed { .base-layout-right-collapsed {
left: 40px; left: @sider-collapsed-width;
} }
.base-layout-sider-hover { .base-layout-sider-hover {

View File

@ -128,6 +128,7 @@
/* sider */ /* sider */
@sider-background: #26262b; @sider-background: #26262b;
@sider-open-background: #222121; @sider-open-background: #222121;
@sider-collapsed-width: 40px;
/* login */ /* login */
@login-error: #a43a39; @login-error: #a43a39;
@ -144,4 +145,5 @@
dangerColor: @danger-color; dangerColor: @danger-color;
moneyColor: @money-color; moneyColor: @money-color;
infoColor: @info-color; infoColor: @info-color;
headerHeight: @header-height;
} }