修改侧边栏样式

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,13 +1,8 @@
 <template>
   <div v-if="!item.hidden">
-    <template
-      v-if="hasOneShowingChild(item.children, item) && !item.alwaysShow"
-    >
+    <template v-if="hasOneShowingChild(item.children, item) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item
-          :index="resolvePath(onlyOneChild.path)"
-          :class="{ 'submenu-title-noDropdown': !isNest }"
-        >
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
           <!-- <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> -->
           <!-- <item :icon="onlyOneChild.meta.title||(item.meta&&item.meta.title)"/> -->
           <!-- <el-tooltip
@@ -19,16 +14,8 @@
           <!-- <img class="nav_item" :src="onlyOneChild.meta.imger" /> -->
           <!-- <span class="pathName" :class="getClass(item.path)"></span>
           </el-tooltip> -->
-          <span
-            class="pathName"
-            v-if="!leup"
-            :class="getClass(item.path)"
-          ></span>
-          <span
-            class="pathNamecosy"
-            v-if="leup"
-            :class="getClass(item.path)"
-          ></span>
+          <span class="pathName" v-if="!leup" :class="getClass(item.path)"></span>
+          <span class="pathNamecosy" v-if="leup" :class="getClass(item.path)"></span>
           <span class="pathNameer" v-if="leup">{{
             onlyOneChild.meta.title
           }}</span>
@@ -36,12 +23,7 @@
       </app-link>
     </template>
 
-    <el-submenu
-      v-else
-      ref="subMenu"
-      :index="resolvePath(item.path)"
-      popper-append-to-body
-    >
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
         <img class="nav_item" :src="onlyOneChild.meta.imger" />
       </template>
@@ -82,19 +64,19 @@ export default {
       default: true,
     },
   },
-  data() {
+  data () {
     // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
     // TODO: refactor with render function
     this.onlyOneChild = null;
     return {};
   },
-  mounted() {
+  mounted () {
     // console.log(this.item, 'item')
     // const vnodes
     // vnodes.push(<span slot='title'>{(title)}</span>)
   },
   methods: {
-    hasOneShowingChild(children = [], parent) {
+    hasOneShowingChild (children = [], parent) {
       // console.log(this.item,'item')
       const showingChildren = children.filter((item) => {
         if (item.hidden) {
@@ -135,7 +117,7 @@ export default {
 
       return false;
     },
-    resolvePath(routePath) {
+    resolvePath (routePath) {
       if (isExternal(routePath)) {
         return routePath;
       }
@@ -144,7 +126,7 @@ export default {
       }
       return path.resolve(this.basePath, routePath);
     },
-    getClass(path) {
+    getClass (path) {
       const p = path.split("/").join("");
       if (p) {
         return p;
@@ -162,7 +144,12 @@ export default {
   //设置字体颜色
   color: #ffffff !important;
 }
-
+.router-link-active > li {
+  //设置背景颜色
+  background-color: #2d67e3 !important;
+  //设置字体颜色
+  color: #ffffff !important;
+}
 // ::v-deep .el-menu-item.is-active:hover {
 //   //设置背景颜色
 //   background-color: #2d67e3 !important;
@@ -176,10 +163,57 @@ export default {
 ::v-deep .el-menu-item:hover {
   background: #2d67e3 !important;
   color: #fff !important;
+  .account {
+    background: url("../../../assets/nav/ic_list_nav_account_check.png");
+  }
+  .role {
+    background: url("../../../assets/nav/ic_list_nav_character_check.png");
+  }
+  .authority {
+    background: url("../../../assets/nav/ic_list_nav_permissions_check.png");
+  }
+  .transfer {
+    background: url("../../../assets/nav/ic_list_nav_transit_check.png");
+  }
+  .arrival {
+    background: url("../../../assets/nav/ic_list_nav_arrive_check.png");
+  }
+  .departure {
+    background: url("../../../assets/nav/ic_list_nav_leave_check.png");
+  }
+  .dataCollection {
+    background: url("../../../assets/nav/ic_data_collection_check.png");
+  }
+  .dataParser {
+    background: url("../../../assets/nav/ic_data_governance_check .png");
+  }
+  .dataStore {
+    background: url("../../../assets/nav/ic_data_save_check.png") no-repeat;
+  }
+  .dashboard {
+    background: url("../../../assets/nav/ic_setting_nav_check.png") no-repeat;
+  }
+  .advance {
+    background: url("../../../assets/nav/ic_list_nav_search_check.png");
+  }
+  .integration {
+    background: url("../../../assets/nav/ic_data_governance_check .png");
+  }
+  .protocol {
+    background: url("../../../assets/nav/ic_list_nav_agreement_check.png");
+  }
+
+  .deployNode {
+    background: url("../../../assets/nav/ic_list_nav_node_check.png");
+  }
+
+  .sourceDataItem {
+    background: url("../../../assets/nav/ic_list_nav_source_check.png");
+  }
 }
-::v-deep .el-menu-item {
-  transition: border-color 0.3s, background-color 0s, color 0s;
-}
+// ::v-deep .el-menu-item {
+//   transition: border-color 0.3s, background-color 0s, color 0s;
+// }
 // ::v-deep .el-submenu__title.is-active {
 //   background-color: #6db6ff !important;
 // }

src/styles/sidebar.scss

@@ -86,11 +86,11 @@
       }
     }
 
-    .submenu-title-noDropdown {
-      &:hover {
-        background-color: initial !important;
-      }
-    }
+    // .submenu-title-noDropdown {
+    //   &:hover {
+    //     background-color: initial !important;
+    //   }
+    // }
 
     .is-active > .el-submenu__title {
       color: $subMenuActiveText !important;