main

src/api/Navs.js

@@ -11,7 +11,7 @@ let navs = [ {
     "show": "1",
     "grouplist": "2,5",
     "memo": "",
-    "clicon": "front_icon",
+    "icon": "icon-location",
     "childs": [
         {
             "clmid": "21",
@@ -26,7 +26,7 @@ let navs = [ {
             "show": "1",
             "grouplist": "2,5",
             "memo": null,
-            "clicon": "home_icon"
+            "icon": "home_icon"
         },{
             "clmid": "22",
             "spclmid": "0",
@@ -40,7 +40,7 @@ let navs = [ {
             "show": "1",
             "grouplist": "2,5",
             "memo": null,
-            "clicon": "home_icon"
+            "icon": "home_icon"
         },{
             "clmid": "23",
             "spclmid": "0",
@@ -54,7 +54,7 @@ let navs = [ {
             "show": "1",
             "grouplist": "2,5",
             "memo": null,
-            "clicon": "home_icon"
+            "icon": "home_icon"
         },
     ]
 },
@@ -71,7 +71,7 @@ let navs = [ {
         "show": "1",
         "grouplist": "2,5",
         "memo": "",
-        "clicon": "front_icon",
+        "icon": "icon-list",
         "childs": [
             {
                 "clmid": "31",
@@ -86,7 +86,7 @@ let navs = [ {
                 "show": "1",
                 "grouplist": "2,5",
                 "memo": null,
-                "clicon": "home_icon"
+                "icon": "home_icon"
             },
             {
                 "clmid": "32",
@@ -101,7 +101,7 @@ let navs = [ {
                 "show": "1",
                 "grouplist": "2,5",
                 "memo": null,
-                "clicon": "home_icon"
+                "icon": "home_icon"
             },
         ]
     },
@@ -118,7 +118,7 @@ let navs = [ {
         "show": "1",
         "grouplist": "2,5",
         "memo": "",
-        "clicon": "front_icon",
+        "icon": "icon-equip",
         "childs": [
             {
                 "clmid": "41",
@@ -133,7 +133,7 @@ let navs = [ {
                 "show": "1",
                 "grouplist": "2,5",
                 "memo": null,
-                "clicon": "home_icon"
+                "icon": "home_icon"
             },
             {
                 "clmid": "42",
@@ -148,7 +148,7 @@ let navs = [ {
                 "show": "1",
                 "grouplist": "2,5",
                 "memo": null,
-                "clicon": "home_icon"
+                "icon": "home_icon"
             },
         ]
     },
@@ -165,7 +165,7 @@ let navs = [ {
         "show": "1",
         "grouplist": "2,5",
         "memo": "",
-        "clicon": "front_icon",
+        "icon": "icon-qrcode",
         "childs": [
             {
                 "clmid": "51",
@@ -180,7 +180,7 @@ let navs = [ {
                 "show": "1",
                 "grouplist": "2,5",
                 "memo": null,
-                "clicon": "home_icon"
+                "icon": "home_icon"
             },
             {
                 "clmid": "52",
@@ -195,7 +195,7 @@ let navs = [ {
                 "show": "1",
                 "grouplist": "2,5",
                 "memo": null,
-                "clicon": "home_icon"
+                "icon": "home_icon"
             }, {
                 "clmid": "53",
                 "spclmid": "0",
@@ -209,7 +209,7 @@ let navs = [ {
                 "show": "1",
                 "grouplist": "2,5",
                 "memo": null,
-                "clicon": "home_icon"
+                "icon": "home_icon"
             },
         ]
     },
@@ -226,7 +226,7 @@ let navs = [ {
         "show": "1",
         "grouplist": "2,5",
         "memo": "",
-        "clicon": "front_icon",
+        "icon": "icon-setting",
         "childs": [
             {
                 "clmid": "61",
@@ -241,7 +241,7 @@ let navs = [ {
                 "show": "1",
                 "grouplist": "2,5",
                 "memo": null,
-                "clicon": "home_icon"
+                "icon": "home_icon"
             },
             {
                 "clmid": "62",
@@ -256,7 +256,7 @@ let navs = [ {
                 "show": "1",
                 "grouplist": "2,5",
                 "memo": null,
-                "clicon": "home_icon"
+                "icon": "home_icon"
             },
         ]
     },

src/components/Navside.vue

@@ -1,8 +1,6 @@
 <template>
     <div>
         <el-row  :class="[{'shortnav':isCollapse},{'longNav':!isCollapse}]">
-            <img src="../assets/logo.png" class="logo" width="100%" height="60px" alt="" v-if="!isCollapse">
-            <img src="../assets/logo.png" class="littleLogo" width="65px" height="60px" alt="" v-if="isCollapse">
             <el-col :span="24">
                 <el-menu
                         default-active="2"
@@ -17,12 +15,12 @@
                         :collapse="isCollapse"
                 >
                     <el-menu-item index="1" route="/" title="系统首页">
-                        <i class="el-icon-location"></i>
+                        <i class="icon-home"></i>
                         <span slot="title">系统首页</span>
                     </el-menu-item>
                     <el-submenu :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs">
                         <template slot="title">
-                            <i class="el-icon-location"></i>
+                            <i :class="nav.icon"></i>
                             <span>{{nav.clmname}}</span>
                         </template>
                         <el-menu-item-group v-for="(child,j) in nav.childs">
@@ -31,7 +29,7 @@
                         </el-menu-item-group>
                     </el-submenu>
                     <el-menu-item index="99" route="#" title="退出登陆"  @click="clickLogout">
-                        <i class="el-icon-location"></i>
+                        <i class="icon-logout"></i>
                         <span slot="title">退出登陆</span>
                     </el-menu-item>
                 </el-menu>
@@ -90,7 +88,7 @@
     .shortnav {
         position: absolute;
         width: 65px;
-        top: 0;
+        top: 40px;
         bottom: 0;
         overflow: hidden;
         display: block;
@@ -112,7 +110,12 @@
     .el-col, .el-menu {
         height: 100%;
     }
-
+    .el-menu-item, /deep/.el-menu {
+        background-color: rgba(255,255,255,0.4)!important;
+    }
+    /deep/ .el-submenu__title {
+        background-color: rgba(255,255,255,0.4)!important;
+    }
     .logout {
         color: #fff;
         font-size: 14px;
@@ -127,4 +130,59 @@
     .littleLogo {
         float: left;
     }
+    .icon-home {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/icon/home.png") top center no-repeat;
+        background-size: 100%;
+    }
+    .icon-location {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/icon/location.png") top center no-repeat;
+        background-size: 100%;
+    }
+    .icon-list {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/icon/list.png") top center no-repeat;
+        background-size: 100%;
+    }
+    .icon-equip {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/icon/equip.png") top center no-repeat;
+        background-size: 100%;
+    }
+    .icon-qrcode {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/icon/qrcode.png") top center no-repeat;
+        background-size: 100%;
+    } .icon-setting {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/icon/setting.png") top center no-repeat;
+        background-size: 100%;
+    }
+    .icon-logout {
+        width: 18px;
+        height: 18px;
+        float: left;
+        margin-top: 20px;
+        background: url("../assets/img/icon/logout.png") top center no-repeat;
+        background-size: 100%;
+    }
 </style>

src/views/Index.vue

@@ -1,14 +1,13 @@
 <template>
     <div class="container">
         <el-container>
+            <el-header>
+                <Headside @lefthide="left_hide"></Headside>
+            </el-header>
             <el-aside :class="[{'shortElaside':isCollapse},{'lognElaside':!isCollapse}]">
                 <Navside :isCollapse="isCollapse" @TabsAdd="handleTabsAdd"></Navside>
             </el-aside>
             <el-container>
-                <el-header>
-                    <Headside @lefthide="left_hide"></Headside>
-                </el-header>
-                <!--<Tabs :handleTabsList="handleTabsList" :editableTabsValue="editableTabsValue"></Tabs>-->
                 <el-main>
                     <keep-alive>
                         <router-view></router-view>