路由样式修复

src/components/RouterBanner.vue

@@ -9,34 +9,58 @@
         class="first_level"
         v-if="routerObj.isShow === 'all' || routerObj.isShow === isManufacturer"
         @click="showLink(index)"
-        :class="{selectStyle: isShowLink[index]}"
+        :class="{ selectStyle: isShowLink[index] }"
         @mouseenter="enterDiv(index)"
         @mouseleave="leaveDiv(index)"
       >
-        <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
+            class="icon"
+            :style="{ backgroundImage: 'url(' + routerObj.img1 + ')' }"
+            v-if="!isShowLink[index] && isHover[index]"
+          ></div>
+          <div
+            class="icon"
+            :style="{ backgroundImage: 'url(' + routerObj.img2 + ')' }"
+            v-else
+          ></div>
+          <p>{{ routerObj.title }}</p>
+          <div class="switch">
+            <img src="../img/switch2.png" v-if="!isShowLink[index]" />
+            <img src="../img/switch1.png" v-else />
+          </div>
         </div>
+        <!-- 模块下没有子路由 -->
         <div v-else class="first_level">
           <router-link :to="routerObj.path" tag="li" class="title">
-            <p  @click="getNavTitle(routerObj.title, '')">{{routerObj.title}}</p>
+            <div
+              class="icon"
+              :style="{ backgroundImage: 'url(' + routerObj.img1 + ')' }"
+              v-if="!isShowLink[index] && isHover[index]"
+            ></div>
+            <div
+              class="icon"
+              :style="{ backgroundImage: 'url(' + routerObj.img2 + ')' }"
+              v-else
+            ></div>
+            <p @click="getNavTitle(routerObj.title, '')">
+              {{ routerObj.title }}
+            </p>
+            <div class="switch">
+              <img src="../img/switch2.png" v-if="!isShowLink[index]" />
+              <img src="../img/switch1.png" v-else />
+            </div>
           </router-link>
         </div>
-        <div class="switch">
-          <img src="../img/switch2.png" v-if="!isShowLink[index]">
-          <img src="../img/switch1.png" v-else/>
-        </div>
       </div>
+      <!-- 模块的子路由 -->
       <div
         v-if="routerObj.list.length"
         class="second_level"
         v-show="isShowLink[index]"
       >
-        <div
-          v-for="(list, index) in routerObj.list"
-          :key="index">
+        <div v-for="(list, index) in routerObj.list" :key="index">
           <router-link
             v-if="list.isShow === 'all' || list.isShow === isManufacturer"
             :to="list.path"
@@ -44,8 +68,10 @@
           >
             <p
               @click="getNavTitle(routerObj.title, list.title)"
-              :class="{blueColor: list.path === routerPath}"
-            >- {{ list.title }}</p>
+              :class="{ blueColor: list.path === routerPath }"
+            >
+              - {{ list.title }}
+            </p>
           </router-link>
         </div>
       </div>
@@ -58,8 +84,8 @@ export default {
   props: {
     isManufacturer: {
       type: String,
-      default: 'manufacturer'
-    }
+      default: "manufacturer",
+    },
   },
   data() {
     return {
@@ -68,7 +94,7 @@ export default {
       routerList: [
         {
           title: "数据管理",
-          path: "",
+          path: "", // 空表示与子路由，非空是点击跳转的路由
           img1: require("../img/edit-manage1.png"), // 没点击的背景图
           img2: require("../img/edit-manage2.png"), // 点击了的背景图
           isShow: "all", // 厂商和经销商都有权限
@@ -76,27 +102,27 @@ export default {
             {
               title: "上传记录",
               path: "/uploadRecord",
-              isShow: "manufacturer" // 只有厂商有权限
+              isShow: "manufacturer", // 只有厂商有权限
             },
             {
-              title: "链接上传",   // 厂商的链接上传
+              title: "链接上传", // 厂商的链接上传
               path: "/uploadLinks",
-              isShow: "manufacturer" // 厂商有权限
+              isShow: "manufacturer", // 厂商有权限
             },
             {
               title: "链接上传", // 经销商链接上传
               path: "/uploadLink",
-              isShow: "distributor" // 经销商有权限
+              isShow: "distributor", // 经销商有权限
             },
             {
               title: "上传资料",
               path: "/uploadInfor",
-              isShow: "manufacturer" // 只有厂商有权限
+              isShow: "manufacturer", // 只有厂商有权限
             },
             {
               title: "资料列表",
               path: "/inforList",
-              isShow: "distributor" // 只有经销商有权限
+              isShow: "distributor", // 只有经销商有权限
             },
           ],
         },
@@ -106,7 +132,7 @@ export default {
           img1: require("../img/User-Settings1.png"),
           img2: require("../img/User-Settings2.png"),
           list: [],
-          isShow: "manufacturer"  // 厂商有权限
+          isShow: "manufacturer", // 厂商有权限
         },
         {
           title: "账号管理",
@@ -114,7 +140,7 @@ export default {
           img1: require("../img/User-Settings1.png"),
           img2: require("../img/User-Settings2.png"),
           list: [],
-          isShow: "distributor"  // 经销商有权限
+          isShow: "distributor", // 经销商有权限
         },
         {
           title: "参数设置",
@@ -122,38 +148,37 @@ export default {
           img1: require("../img/Setting1.png"),
           img2: require("../img/Setting2.png"),
           list: [],
-          isShow: "manufacturer" // 只有厂商有权限
+          isShow: "manufacturer", // 只有厂商有权限
         },
       ],
     };
   },
   computed: {
-      routerPath: function() {
-        return this.$route.path
-      }
+    routerPath: function () {
+      return this.$route.path;
+    },
   },
   methods: {
-    getNavTitle: function(navTitle1, navTitle2) {
+    getNavTitle: function (navTitle1, navTitle2) {
       // 点击路由的时候，修改导航栏
-      this.$emit('change_nav', navTitle1, navTitle2);
+      this.$emit("change_nav", navTitle1, navTitle2);
     },
     // 展开、关闭router栏
-    showLink: function(i) {
+    showLink: function (i) {
       let flag = this.isShowLink[i];
-      this.isShowLink = [false, false, false];
+      this.isShowLink = [false, false, false, false];
       this.isShowLink.splice(i, 1, !flag);
     },
     // 鼠标移入变白色背景
-    enterDiv: function(i) {
+    enterDiv: function (i) {
       this.isHover.splice(i, 1, false);
     },
     // 鼠标移出变蓝色背景
-    leaveDiv: function(i) {
+    leaveDiv: function (i) {
       this.isHover.splice(i, 1, true);
-    }
+    },
   },
-  mounted() {
-  }
+  mounted() {},
 };
 </script>
 
@@ -171,39 +196,41 @@ export default {
         cursor: pointer;
         background-color: rgb(0, 86, 160);
         color: #fff;
-        .title{
+        .title {
           color: #fff;
         }
-        p{
+        p {
           color: #fff;
         }
       }
       .title {
         font-size: 14px;
-        margin-left: 4px;
-      }
-      .icon {
-        width: 26px;
-        height: 26px;
-        margin-left: 10px;
-        background-size: contain;
-        background-repeat: no-repeat;
-        img {
+        display: flex;
+        padding: 0 10px;
+        justify-content: space-around;
+        .icon {
           width: 26px;
           height: 26px;
+          background-size: contain;
+          background-repeat: no-repeat;
+          img {
+            width: 26px;
+            height: 26px;
+          }
         }
-      }
-      .switch {
-        width: 11px;
-        height: 11px;
-        margin-left: 20px;
-        img{
+        .switch {
           width: 11px;
           height: 11px;
+          margin-left: 20px;
+          img {
+            width: 11px;
+            height: 11px;
+          }
+        }
+        p {
+          font-size: 14px;
+          margin-left: 9px;
         }
-      }
-      p{
-        font-size: 14px;
       }
     }
     .second_level {
@@ -212,28 +239,28 @@ export default {
         height: 38px;
         line-height: 38px;
         text-align: center;
-        p{
+        p {
           &:hover {
-          cursor: pointer;
-          color: rgb(0, 86, 160);
-        }
+            cursor: pointer;
+            color: rgb(0, 86, 160);
+          }
         }
       }
     }
   }
 }
 // 选中变色
-.blueColor{
+.blueColor {
   color: #0056a0;
 }
-.selectStyle{
+.selectStyle {
   background-color: rgb(0, 86, 160);
   color: #fff;
-  .title{
+  .title {
     color: #fff;
   }
-        p{
-          color: #fff;
-        }
-      }
+  p {
+    color: #fff;
+  }
+}
 </style>