让头部区域、侧边栏以及左侧菜单的宽、高更容易调整

(make it easy to adjust the height or width of header, sidebar and sidemenu)

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;

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 {

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%;