划过路由，图标变色

src/App.vue

@@ -36,7 +36,7 @@ export default {
     return {
       navTitle1: ' > 数据管理',
       navTitle2: '',
-      isManufacturer: 'manufacturer', // distributor 经销商 manufacturer 厂商
+      isManufacturer: 'distributor', // distributor 经销商 manufacturer 厂商
     }
   },
   methods: {

src/components/RouterBanner.vue

@@ -10,10 +10,12 @@
         v-if="routerObj.isShow === 'all' || routerObj.isShow === isManufacturer"
         @click="showLink(index)"
         :class="{selectStyle: isShowLink[index]}"
+        @mouseenter="enterDiv(index)"
+        @mouseleave="leaveDiv(index)"
       >
-        <div class="icon">
-          <img :src="routerObj.img"/>
+        <div class="icon" :style="{backgroundImage: 'url('+ routerObj.img1 + ')'}" v-if="!isShowLink[index] && isHover[index]">
         </div>
+        <div class="icon" v-else :style="{backgroundImage: 'url('+ routerObj.img2 + ')'}"></div>
         <div class="title" v-if="!routerObj.path">
           {{ routerObj.title }}
         </div>
@@ -61,12 +63,14 @@ export default {
   },
   data() {
     return {
-      isShowLink: [true, false, false],
+      isShowLink: [true, false, false, false], // 四个大模块
+      isHover: [true, true, true, true],
       routerList: [
         {
           title: "数据管理",
           path: "",
-          img: require("../img/edit-manage.png"),
+          img1: require("../img/edit-manage1.png"), // 没点击的背景图
+          img2: require("../img/edit-manage2.png"), // 点击了的背景图
           isShow: "all", // 厂商和经销商都有权限
           list: [
             {
@@ -99,21 +103,24 @@ export default {
         {
           title: "账号管理", // 厂商的账号管理
           path: "/accountIndex",
-          img: require("../img/User-Settings.png"),
+          img1: require("../img/User-Settings1.png"),
+          img2: require("../img/User-Settings2.png"),
           list: [],
           isShow: "manufacturer"  // 厂商有权限
         },
         {
           title: "账号管理",
           path: "/accountManage",
-          img: require("../img/User-Settings.png"),
+          img1: require("../img/User-Settings1.png"),
+          img2: require("../img/User-Settings2.png"),
           list: [],
           isShow: "distributor"  // 经销商有权限
         },
         {
           title: "参数设置",
           path: "/parameterIndex",
-          img: require("../img/setting.jpg"),
+          img1: require("../img/Setting1.png"),
+          img2: require("../img/Setting2.png"),
           list: [],
           isShow: "manufacturer" // 只有厂商有权限
         },
@@ -135,6 +142,14 @@ export default {
       let flag = this.isShowLink[i];
       this.isShowLink = [false, false, false];
       this.isShowLink.splice(i, 1, !flag);
+    },
+    // 鼠标移入变白色背景
+    enterDiv: function(i) {
+      this.isHover.splice(i, 1, false);
+    },
+    // 鼠标移出变蓝色背景
+    leaveDiv: function(i) {
+      this.isHover.splice(i, 1, true);
     }
   },
   mounted() {
@@ -171,6 +186,8 @@ export default {
         width: 26px;
         height: 26px;
         margin-left: 10px;
+        background-size: contain;
+        background-repeat: no-repeat;
         img {
           width: 26px;
           height: 26px;