201911281810

src/App.vue

@@ -48,7 +48,7 @@ html, body, #app, .box{
 .box{
   .header{
     width: 100%;
-    height: 35px;
+    height: 50px;
     padding: 0;
   }
 }

src/assets/theme/light.scss

@@ -1,7 +1,7 @@
 .light{
   .sider,.header,.content{
     background-color: #fff;
-    color: #000;
+    color: #515a6e;
   }
   .sider{
     border-right: 1px solid #dcdee2;
@@ -21,4 +21,17 @@
       }
     }
   }
+  .header{
+    border-bottom: 1px solid #dcdee2;
+    .header-box{
+      color: #808695;
+      i{
+        &:hover{
+          color: #515a6e;
+          background-color: #efefef;
+          border-bottom: 1px solid #808695;
+        }
+      }
+    }
+  }
 }

src/components/zy_header.vue

@@ -18,30 +18,26 @@ export default {
 <style lang="scss" scoped>
 .header-box{
   height: 100%;
-  border: 1px solid #000;
   -webkit-app-region: drag;
   -webkit-user-select: none;
+  display: flex;
+  justify-content: space-between;
   .left,.right{
-    display: inline-block;
-    height: 35px;
+    display: flex;
+    align-items: center;
+    height: 50px;
+    width: 50%;
     i{
-      -webkit-app-region: no-drag;
       font-size: 20px;
-      width:35px;
-      height:35px;
-      line-height:35px;
+      width:50px;
+      height:50px;
+      line-height:50px;
       cursor: pointer;
-      background-color: #aaa;
+      -webkit-app-region: no-drag;
     }
   }
-  .left{
-    top: 0;
-    left: 0;
-  }
   .right{
-    position: absolute;
-    top: 0;
-    right: 0;
+    justify-content: flex-end;
   }
 }
 </style>