美化导航栏

src/assets/less/global.css

@@ -0,0 +1,53 @@
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  padding: 0;
+  background: #f3f3f4;
+}
+body #app {
+  height: 100%;
+}
+body #app .con-wrap {
+  padding-left: 160px;
+}
+body #app .con-wrap h3 {
+  margin-top: 0;
+  color: #324157;
+}
+body #app .con-wrap .page-component-wrap {
+  padding: 15px;
+}
+body #app .con-wrap.conCollapse {
+  padding-left: 64px;
+}
+.el-menu {
+  width: 100%;
+}
+.el-menu-item [class^='el-icon-'] {
+  vertical-align: middle;
+  color: #ddd;
+}
+.el-submenu [class^='el-icon-'] {
+  color: #ddd;
+}
+.el-submenu__title i {
+  vertical-align: middle;
+  color: #ddd;
+}
+.required-self label.el-form-item__label:before {
+  content: '*';
+  color: #ff4949;
+  margin-right: 4px;
+}
+#sidebar-wrap ul ul li {
+  background: #283446 !important;
+}
+#sidebar-wrap ul ul li:hover {
+  background: #48576a !important;
+}
+.el-menu .el-submenu__title i {
+  color: #fff;
+}

src/assets/less/global.less

@@ -52,3 +52,7 @@ body {
     background: #48576a !important;
   }
 }
+
+.el-menu .el-submenu__title i {
+  color: #fff;
+}

src/components/SideBar.vue

@@ -5,15 +5,15 @@
         <h3 class="logo">
           <span class="rythm twist1">{{toggSiderBar ? 'VUE': 'AUTO VUE'}}</span>
         </h3>
-        <el-menu background-color="#324157" text-color="#ddd" :default-active="$route.path" :unique-opened="true" :router="true" mode="vertical" :collapse="toggSiderBar">
+        <el-menu background-color="#353d47" text-color="#fff" :default-active="$route.path" :unique-opened="true" :router="true" mode="vertical" :collapse="toggSiderBar">
             <template v-for="item in menu">
                 <el-submenu v-if="item.children.length !== 0" :index="item.router" :key="item.router">
                     <template slot="title">
                         <i :class="item.icon"></i>
                         <span slot="title">{{langType === 'en'? item.name_en: item.name}}</span>
                     </template>
                     <el-menu-item v-for="child in item.children" :index="child.router" :key="child.router">
-                        <i :class="child.icon"></i>
+                        <!-- <i :class="child.icon"></i> -->
                         <span slot="title">{{langType === 'en'? child.name_en: child.name}}</span>
                     </el-menu-item>
                 </el-submenu>
@@ -130,9 +130,11 @@ export default {
   .logo {
     color: #fff;
     text-align: center;
-    background: #324157;
+    background: #20a0ff;
     padding: 18px 0;
     margin: 0;
+    height: 60px;
+    box-sizing: border-box;
   }
 }
 
@@ -148,11 +150,12 @@ export default {
 .el-submenu .el-menu-item {
   padding: 0 20px;
   min-width: 160px;
-  padding-left: 20px !important;
+  padding-left: 53px !important;
 }
 
 // 改变元素属性，要不动画效果不管用，是不是很厉害啊？哈哈哈
 .rythm.twist1 {
   display: block;
 }
+
 </style>

src/components/TopBar.vue

@@ -4,7 +4,7 @@
     <div id="topbar-wrap" :class="{ topCollapsed: isCollapse }">
         <el-row type="flex" justify="space-between">
             <el-col :span="5">
-                <i :class="[isCollapse? 'nav-rotate': '','fa fa-bars']" @click="toggleSiderBar"></i>
+                <i :class="[isCollapse ? 'icon-spread': 'icon-recovery','iconfont']" @click="toggleSiderBar"></i>
             </el-col>
             <el-col :span="12">
                 <el-row type="flex" class="row-right" justify="end">
@@ -28,6 +28,7 @@
 <script>
 import screenfull from 'screenfull'
 import bus from '@/bus'
+import '../../static/css/iconfont.css'
 export default {
   name: 'topbar',
   data() {
@@ -77,9 +78,9 @@ export default {
 <style scoped lang="less">
 #topbar-wrap {
   overflow: hidden;
-  border-bottom: 1px solid #e7eaec;
-  background: #324157;
-  color: #fff;
+  border-bottom: 1px solid #ddd;
+  background: #fff;
+  color: #353d47;
   padding: 0 15px;
   z-index: 4;
   box-sizing: border-box;
@@ -115,7 +116,7 @@ export default {
     line-height: 60px;
   }
   a.logout {
-    color: #fff;
+    color: #353d47;
     text-decoration: none;
     &:hover {
       color: #20a0ff;
@@ -126,14 +127,14 @@ export default {
     line-height: 60px;
   }
   .logout {
-    color: #fff;
+    color: #353d47;
     &:hover {
       color: #20a0ff;
     }
   }
 }
-.fa.nav-rotate {
-  transform: rotate(90deg);
+.iconfont:hover {
+  cursor: pointer;
 }
 .row-right > div {
   text-align: center;

static/css/iconfont.css

@@ -0,0 +1,21 @@
+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1543909700525'); /* IE9*/
+  src: url('iconfont.eot?t=1543909700525#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAATQAAsAAAAAB4AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8hEgBY21hcAAAAYAAAABSAAABfn6J6rdnbHlmAAAB1AAAAQUAAAFs4MlSJGhlYWQAAALcAAAALwAAADYTd+iFaGhlYQAAAwwAAAAcAAAAJAfeA4RobXR4AAADKAAAAAwAAAAMDAAAAGxvY2EAAAM0AAAACAAAAAgAXgC2bWF4cAAAAzwAAAAfAAAAIAERAERuYW1lAAADXAAAAUUAAAJtPlT+fXBvc3QAAASkAAAAKgAAADtkZqGveJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8T3jZ27438AQw9zA0AAUZgTJAQDfaAwAeJztkLkNgEAMBMc+Q4AQNEFAQDFE139EG4cfymClGWlXjgxMQHMux0A6QuT2VXJvLLkbR95Y7M8+hnsLe7e0umb+rOnzaxp/KupzBfoC7RwLpQAAeJxNzkFOhDAUBuD3Q2mbYEYJDRAh06DJaGJkEkXYufMCHmJm48atK1Zu3bgZFh7BI3gCzuEt7NhCxGmaJv//mpePGNH+2//wTykmTVfUEkHw1UWFu6hu2kZjabPwywo2lksojvJsVTe35U2yAA56/22QSoItQikHyX3mX//UWZ5n3pDl2rya3gVs0sLufDwY4akLWMgEAwXHgOhYKuHhAfk6h3vMrqgKe81ursieyd5b+wkVdEk1Udw2SZqISHHB16jQxiNNjExYsuLnln9v4f/983CkmPAmdyArh8ozB9R4wcYF0zu1+fwbKa3x3tnPQu5JRiNaheZr9mE7kbGdq18+wjrzAAAAeJxjYGRgYABi3WlzcuP5bb4ycLMwgMANnSAXBP3/GQsDsxSQy8HABBIFAAJLCMEAeJxjYGRgYG7438AQw8IAAkCSkQEVMAMARwkCbAQAAAAEAAAABAAAAAAAAAAAXgC2eJxjYGRgYGBmsGBgYQABJiDmAkIGhv9gPgMADm8BVgB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICZkYmRmZGFga24oCg1MYWjKDU5vyy1qJKBAQA/QgYYAAA=') format('woff'),
+  url('iconfont.ttf?t=1543909700525') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1543909700525#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-spread:before { content: "\e60e"; }
+
+.icon-recovery:before { content: "\e60f"; }
+