From e4cc9274577e4fc2682e896e31e4366f52d6dd37 Mon Sep 17 00:00:00 2001
From: dfish <>
Date: Mon, 13 Dec 2021 02:50:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A9=E5=A4=B4=E9=83=A8=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E3=80=81=E4=BE=A7=E8=BE=B9=E6=A0=8F=E4=BB=A5=E5=8F=8A=E5=B7=A6?=
 =?UTF-8?q?=E4=BE=A7=E8=8F=9C=E5=8D=95=E7=9A=84=E5=AE=BD=E3=80=81=E9=AB=98?=
 =?UTF-8?q?=E6=9B=B4=E5=AE=B9=E6=98=93=E8=B0=83=E6=95=B4=20(make=20it=20ea?=
 =?UTF-8?q?sy=20to=20adjust=20the=20height=20or=20width=20of=20header,=20s?=
 =?UTF-8?q?idebar=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%;