修改顶部导航样式

Author: bigrocs

src/components/Layout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout">
+  <div class="layout ">
     <div class="layout-menu-left">
       <layout-sidebar/>
     </div>
@@ -37,6 +37,14 @@
     position: relative;
     overflow: hidden;
     display: -webkit-box;
+    &.hideSidebar {
+      >.layout-menu-left {
+        width: 50px;
+        >.sidebar-container {
+          width:50px;
+        }
+      }
+    }
   }
   .layout-menu-left{
     width: 200px;

src/components/Layout/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="layout-header">
-    <span class="toggle" @click="toggleClick"><i class="fa fa-sliders"></i></span>
+    <a class="toggle" @click="toggleClick"><i class="fa fa-sliders"></i></a>
     <el-menu default-active="1" class="el-menu-navbar" mode="horizontal">
       <el-menu-item index="1"> <i class="fa fa-archive"></i> 系统</el-menu-item>
       <el-menu-item index="2"> <i class="fa fa-archive"></i> CMS</el-menu-item>
@@ -20,28 +20,34 @@
 </script>
 <style lang="scss" scoped>
   .layout-header{
-    background: #fff;
+    background-color: #dd4b39;
     box-shadow: 0 1px 1px rgba(0,0,0,.1);
     display: -webkit-box;
   }
   .toggle{
     display: -webkit-box;
-    margin: 15px;
+    padding: 9px;
     font-size: 22px;
-    :hover{
-      color: #20a0ff;
+    color: #fff;
+    &:hover{
+      background-color: #d73925;
+      border-bottom: 2px solid #fff;
     }
   }
   .el-menu-item{
+    line-height: 50px;
+    height: 50px;
+    color: #fff;
     border-bottom: 2px solid transparent;
+    &:hover{
+      background-color: #d73925;
+      border-bottom: 2px solid #fff;
+    }
   }
   .el-menu-item.is-active{
-    border-bottom: 2px solid #20a0ff;
-  }
-  .el-menu-item:hover{
-    border-bottom: 2px solid #20a0ff;
+    border-bottom: 2px solid #fff;
   }
   .el-menu{
-    background-color: #fff;
+    background-color: #dd4b39;
   }
 </style>

src/components/Layout/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
-    <el-menu default-active="1-4-1" theme="dark">
-      <div class="layout-logo-left">CoreCMF 后台管理</div>
+    <el-menu default-active="1-4-1" theme="dark" class="sidebar-container">
+      <div class="layout-logo-left">CoreCMF</div>
       <el-submenu index="1">
         <template slot="title">导航一</template>
         <el-menu-item-group title="分组一">
@@ -55,16 +55,15 @@
 <style lang="scss" scoped>
   @import  './../../assets/sass/mixin.scss';
   .layout-logo-left {
-    background: #5b6270;
-    border-radius: 3px;
+    background-color: #d73925;
+    height: 50px;
+    line-height: 50px;
+    font-size: 20px;
     color: #fff;
-    height: 30px;
-    line-height: 30px;
-    margin: 15px auto;
     text-align: center;
-    width: 90%;
+    width: 100%;
   }
-  .el-menu {
+  .sidebar-container {
     position: fixed;
     width:200px;
     min-height: 100%;