Merge b1723f16be into 274198a7bd

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

@@ -22,21 +22,23 @@
                     <img src="../assets/img/img.jpg" />
                 </div>
                 <!-- 用户名下拉菜单 -->
-                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+               <div class="user-name">
+                 <el-dropdown trigger="click" @command="handleCommand">
                     <span class="el-dropdown-link">
                         {{username}}
                         <i class="el-icon-caret-bottom"></i>
                     </span>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
-                                <el-dropdown-item>项目仓库</el-dropdown-item>
-                            </a>
-                            <el-dropdown-item command="user">个人中心</el-dropdown-item>
-                            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
+                   <template #dropdown>
+                     <el-dropdown-menu>
+                       <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
+                         <el-dropdown-item>项目仓库</el-dropdown-item>
+                       </a>
+                       <el-dropdown-item command="user">个人中心</el-dropdown-item>
+                       <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
+                     </el-dropdown-menu>
+                   </template>
+                 </el-dropdown>
+               </div>
             </div>
         </div>
     </div>
@@ -58,7 +60,7 @@ export default {
         };
 
         onMounted(() => {
-            if (document.body.clientWidth < 1500) {
+            if (document.body.clientWidth < 1000) {
                 collapseChage();
             }
         });
@@ -89,7 +91,7 @@ export default {
     position: relative;
     box-sizing: border-box;
     width: 100%;
-    height: 70px;
+    height: var(--header-height);
     font-size: 22px;
     color: #fff;
 }
@@ -97,12 +99,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 +112,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%;