fix:修改导航栏样式

src/common/sider.vue

@@ -1,16 +1,17 @@
 <template>
-    <el-aside width="280">
+    <el-aside style="width: 254px;">
       <div class="sidebar">
         <div class="side-logo">
           <img src="/static/image/logo.png" class="logo" />
         </div>
-        <el-menu class="sidebar-el-menu" :default-active="$route.path" :collapse="collapse" background-color="#324157"
+        <el-menu class="sidebar-el-menu" :default-active="$route.path" :collapse="collapse" background-color="#00152A"
           text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
           <template v-for="item in items">
             <template v-if="item.children">
               <el-submenu :index="item.path" :key="item.path">
                 <template slot="title">
                   <!-- <i :class="[item.icon,'aliFamily']"></i> -->
+                  <img v-if="item.icon" class="side-bar-icon" :src="item.icon" />
                   <span slot="title">{{ item.title }}</span>
                 </template>
                 <template v-for="subItem in item.children">
@@ -25,7 +26,8 @@
             </template>
             <template v-else>
               <el-menu-item :index="item.path" :key="item.path">
-                <i :class="[item.icon,'aliFamily']"></i>
+                <!-- <i :class="[item.icon,'aliFamily']"></i> -->
+                <img :src="item.icon" v-if="item.icon" />
                 <span slot="title">{{ item.title }}</span>
               </el-menu-item>
             </template>
@@ -58,6 +60,13 @@
 </script>
 
 <style scoped>
+  /deep/ .el-submenu .el-menu-item {
+    padding-left: 76px !important;
+  }
+  /deep/ .el-menu-item.is-active {
+    color: #fff !important;
+    border-right: 6px solid #009CFF;
+  }
   .sidebar {
     display: block;
     position: absolute;
@@ -84,6 +93,12 @@
     width: 204px;
     height: 44px;
   }
+  .side-bar-icon {
+    width: 21px;
+    height: 21px;
+    margin-right: 18px;
+    margin-left: 14px;
+  }
   .aliFamily {
     font-size: 24px;
     margin-right: 10px;
@@ -94,7 +109,8 @@
   }
 
   .sidebar-el-menu:not(.el-menu--collapse) {
-    width: 280px;
+    width: 254px;
+    box-sizing: border-box;
   }
 
   .sidebar>ul {

src/router/index.js

@@ -9,18 +9,19 @@ const router = new Router({
       path: '/',
       name: 'home',
       component: () => import('../views/home.vue'),
-      title: '首页',
+      title: '一键发单',
+      icon: '/static/image/order-icon.png',
       children: [
         {
           path: '/',
           name: 'HomeIndex',
-          title: '测试导航栏-1',
+          title: '订单列表',
           component: () => import('../components/Home.vue')
         },
         {
           path: '/helloWorld',
           name: 'helloWorld',
-          title: '测试导航栏-2',
+          title: '订单查询',
           component: () => import('../components/HelloWorld.vue')
         }
       ]

src/views/home.vue

@@ -2,12 +2,12 @@
   <el-container>
     <sidebar></sidebar>
     <el-container>
-      <el-header style="text-align: right;height: 80px;">
-        <span>充值中心</span>
-        <span>打印设置</span>
+      <el-header style="text-align: right;height: 80px;line-height: 80px;">
+        <span class="header-button">充值中心</span>
+        <span class="header-button">打印设置</span>
         <el-dropdown trigger="click">
           <span class="el-dropdown-link">
-            <span>nickName</span>
+            <span style="cursor: pointer;">nickName</span>
             <i class="el-icon-arrow-down el-icon--right"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
@@ -66,14 +66,24 @@
 
   .el-main {
     position: absolute;
-    left: 280px;
+    left: 254px;
     right: 0;
     top: 80px;
     bottom: 0;
-    overflow-y: scroll;
+    overflow-y: auto;
+    background-color: #F1F2F5;
 
   }
 
+  .header-button {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #777777;
+    cursor: pointer;
+    margin-right: 40px;
+  }
+
   .home-content {
     display: flex;