From e4cc9274577e4fc2682e896e31e4366f52d6dd37 Mon Sep 17 00:00:00 2001 From: dfish <> Date: Mon, 13 Dec 2021 02:50:26 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E8=AE=A9=E5=A4=B4=E9=83=A8=E5=8C=BA?= =?UTF-8?q?=E5=9F=9F=E3=80=81=E4=BE=A7=E8=BE=B9=E6=A0=8F=E4=BB=A5=E5=8F=8A?= =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E7=9A=84=E5=AE=BD=E3=80=81?= =?UTF-8?q?=E9=AB=98=E6=9B=B4=E5=AE=B9=E6=98=93=E8=B0=83=E6=95=B4=20(make?= =?UTF-8?q?=20it=20easy=20to=20adjust=20the=20height=20or=20width=20of=20h?= =?UTF-8?q?eader,=20sidebar=20and=20sidemenu)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/main.css | 14 ++++++++++++-- src/components/Header.vue | 10 +++++----- src/components/Sidebar.vue | 4 ++-- 3 files changed, 19 insertions(+), 9 deletions(-) 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%; From b1723f16be38b7ad90e0dfc601b6bd65693409c5 Mon Sep 17 00:00:00 2001 From: dfish <> Date: Mon, 13 Dec 2021 11:45:19 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D.user-name=E4=B8=8D?= =?UTF-8?q?=E7=94=9F=E6=95=88=E9=97=AE=E9=A2=98(make=20the=20.user-name=20?= =?UTF-8?q?style=20in=20Header.vue=20work)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Header.vue | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/Header.vue b/src/components/Header.vue index 849d241..0fd031c 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -22,21 +22,23 @@ - +
+ {{username}} - - + + +