头部导航

kuangshp · kuangshp · commit 05e19ebd5c61 · 2020-06-01T14:58:12.000+08:00
diff --git a/src/components/menus/Menus.vue b/src/components/menus/Menus.vue
@@ -52,16 +52,16 @@ export default {
   top: 70px;
   bottom: 0;
   overflow-y: scroll;
-  box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.12);
 }
 .sidebar::-webkit-scrollbar {
   width: 0;
 }
 .sidebar-el-menu {
   height: calc(100vh - 50px);
+  box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.12);
 }
 .sidebar-el-menu:not(.el-menu--collapse) {
-  width: 230px;
+  width: 240px;
 }
 .sidebar > ul {
   height: 100%;
diff --git a/src/layout/header/Index.vue b/src/layout/header/Index.vue
@@ -1,7 +1,16 @@
 <template>
   <div class="app-header">
     <div class="logo">
-      <router-link to="/">XX公司权限管理平台</router-link>
+      <router-link to="/">
+        <div
+          class="log1"
+          v-if="sidebarOpened"
+        ></div>
+        <div
+          class="log2"
+          v-else
+        ></div>
+      </router-link>
     </div>
     <!-- 头部切换左侧菜单 -->
     <div
@@ -10,11 +19,11 @@
     >
       <i
         v-if="sidebarOpened"
-        class="el-icon-s-fold"
+        class="trigger el-icon-s-fold"
       ></i>
       <i
         v-else
-        class="el-icon-s-unfold"
+        class="trigger el-icon-s-unfold"
       ></i>
     </div>
     <!-- 头部导航 -->
@@ -82,19 +91,46 @@ export default {
   flex-direction: row;
   line-height: 50px;
   color: #fff;
-  .menus {
-    width: 30px;
-    height: 30px;
-    font-size: 25px;
-    padding: 0 21px;
-    cursor: pointer;
-  }
   .logo {
-    width: 240px;
-    height: inherit;
+    height: 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transition: width 0.3s;
+    .log1 {
+      width: 240px;
+      height: 40px;
+      background: rgba(255, 255, 255, 0.2);
+    }
+    .log2 {
+      width: 65px;
+      height: 40px;
+      background: rgba(255, 255, 255, 0.2);
+    }
+  }
+  .menus {
+    width: 50px;
+    height: 50px;
     text-align: center;
-    a {
-      text-decoration: none;
+    line-height: 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: 5px;
+    .trigger {
+      color: #fff;
+      font-size: 30px;
+      width: 35px;
+      height: 35px;
+      padding: 5px;
+      margin-top: 4px;
+      cursor: pointer;
+      transition: color 0.3s;
+    }
+    .trigger:hover {
+      background: #40a9ff;
       color: #fff;
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -52,16 +52,16 @@ export default {`
`52`	`52`	`top: 70px;`
`53`	`53`	`bottom: 0;`
`54`	`54`	`overflow-y: scroll;`
`55`		`- box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.12);`
`56`	`55`	`}`
`57`	`56`	`.sidebar::-webkit-scrollbar {`
`58`	`57`	`width: 0;`
`59`	`58`	`}`
`60`	`59`	`.sidebar-el-menu {`
`61`	`60`	`height: calc(100vh - 50px);`
	`61`	`+ box-shadow: 0 0 1.2em rgba(0, 0, 0, 0.12);`
`62`	`62`	`}`
`63`	`63`	`.sidebar-el-menu:not(.el-menu--collapse) {`
`64`		`- width: 230px;`
	`64`	`+ width: 240px;`
`65`	`65`	`}`
`66`	`66`	`.sidebar > ul {`
`67`	`67`	`height: 100%;`