diff --git a/src/assets/css/main.css b/src/assets/css/main.css index b6531d8..228548c 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -2,6 +2,16 @@ margin: 0; padding: 0; } +:root{ + --header-height:55px; + --sidebar-width:200px; + --sidemenu-height:45px; +} + +.el-menu-item, .el-submenu__title{ + height: var(--sidemenu-height) !important; + line-height: var(--sidemenu-height) !important; +} html, body, @@ -23,9 +33,9 @@ a { .content-box { position: absolute; - left: 250px; + left: var(--sidebar-width); right: 0; - top: 70px; + top: var(--header-height); bottom: 0; padding-bottom: 30px; -webkit-transition: left .3s ease-in-out; diff --git a/src/components/Header.vue b/src/components/Header.vue index 53bb453..849d241 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -58,7 +58,7 @@ export default { }; onMounted(() => { - if (document.body.clientWidth < 1500) { + if (document.body.clientWidth < 1000) { collapseChage(); } }); @@ -89,7 +89,7 @@ export default { position: relative; box-sizing: border-box; width: 100%; - height: 70px; + height: var(--header-height); font-size: 22px; color: #fff; } @@ -97,12 +97,12 @@ export default { float: left; padding: 0 21px; cursor: pointer; - line-height: 70px; + line-height: var(--header-height); } .header .logo { float: left; width: 250px; - line-height: 70px; + line-height: var(--header-height); } .header-right { float: right; @@ -110,7 +110,7 @@ export default { } .header-user-con { display: flex; - height: 70px; + height: var(--header-height); align-items: center; } .btn-fullscreen { diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index d74c5c7..abcb84d 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -138,7 +138,7 @@ export default { display: block; position: absolute; left: 0; - top: 70px; + top: var(--header-height); bottom: 0; overflow-y: scroll; } @@ -146,7 +146,7 @@ export default { width: 0; } .sidebar-el-menu:not(.el-menu--collapse) { - width: 250px; + width: var(--sidebar-width); } .sidebar > ul { height: 100%;