修改图标

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,12 +126,12 @@ export default {
       }
       return path.resolve(this.basePath, routePath);
     },
-    getClass(path) {
+    getClass (path) {
       const p = path.split("/").join("");
       if (p) {
         return p;
       } else {
-        return "dashboard";
+        return "advance";
       }
     },
   },
@@ -228,6 +210,15 @@ export default {
   .sourceDataItem {
     background: url("../../../assets/nav/ic_list_nav_source_check.png");
   }
+
+  .BasicsData {
+    background: url("../../../assets/nav/ic_data_governance_check .png")
+      no-repeat;
+  }
+
+  .systemSettings {
+    background: url("../../../assets/nav/ic_setting_nav_check.png") no-repeat;
+  }
 }
 // ::v-deep .el-menu-item {
 //   transition: border-color 0.3s, background-color 0s, color 0s;
@@ -396,6 +387,22 @@ export default {
   }
 }
 
+.BasicsData {
+  background: url("../../../assets/nav/ic_data_governance_default.png")
+    no-repeat;
+  &:hover {
+    background: url("../../../assets/nav/ic_data_governance_check .png")
+      no-repeat;
+  }
+}
+
+.systemSettings {
+  background: url("../../../assets/nav/ic_setting_nav_default.png") no-repeat;
+  &:hover {
+    background: url("../../../assets/nav/ic_setting_nav_check.png") no-repeat;
+  }
+}
+
 // .el-tooltip__popper.is-dark{
 //   background: #255395;
 // }

src/layout/components/Sidebar/index.vue

@@ -2,24 +2,8 @@
   <div :class="{ 'has-logo': showLogo }">
     <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        class="navMenu"
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="variables.menusBg"
-        :text-color="variables.menuText"
-        :unique-opened="false"
-        :active-text-color="variables.menuActiveText"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item
-          v-for="(route, index) in permission_routes"
-          :key="index"
-          :item="route"
-          :base-path="route.path"
-          :leup="leup"
-        />
+      <el-menu class="navMenu" :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menusBg" :text-color="variables.menuText" :unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
+        <sidebar-item v-for="(route, index) in permission_routes" :key="index" :item="route" :base-path="route.path" :leup="leup" />
       </el-menu>
     </el-scrollbar>
     <div class="rloop" @click="updata" style="cursor: w-resize">
@@ -37,7 +21,7 @@ import SidebarItem from "./SidebarItem";
 import variables from "@/styles/variables.scss";
 
 export default {
-  data() {
+  data () {
     return {
       leup: false,
     };
@@ -45,7 +29,7 @@ export default {
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters(["sidebar", "permission_routes"]),
-    routes() {
+    routes () {
       const power =
         typeof this.userPowerList == "string"
           ? JSON.parse(this.userPowerList)
@@ -72,7 +56,7 @@ export default {
       //   return datas;
       // }
     },
-    activeMenu() {
+    activeMenu () {
       const route = this.$route;
       const { meta, path } = route;
       // if set path, the sidebar will highlight the path you set
@@ -81,18 +65,18 @@ export default {
       }
       return path;
     },
-    showLogo() {
+    showLogo () {
       return this.$store.state.settings.sidebarLogo;
     },
-    variables() {
+    variables () {
       return variables;
     },
-    isCollapse() {
+    isCollapse () {
       return !this.sidebar.opened;
     },
   },
   methods: {
-    updata() {
+    updata () {
       this.leup = !this.leup;
       this.$emit("leup", this.leup);
     },
@@ -209,6 +193,14 @@ export default {
       background: url("../../../assets/nav/ic_list_nav_source_check.png")
         no-repeat;
     }
+    .BasicsData {
+      background: url("../../../assets/nav/ic_data_governance_check .png")
+        no-repeat;
+    }
+
+    .systemSettings {
+      background: url("../../../assets/nav/ic_setting_nav_check.png") no-repeat;
+    }
   }
 }
 </style>