添加图标

src/components/RouterBanner.vue

@@ -1,181 +1,181 @@
-<template>
-  <div class="router_banner">
-    <div
-      class="router_management"
-      v-for="(routerObj, index) in routerList"
-      :key="index"
-    >
-      <div class="first_level" v-if="routerObj.isShow === 'all' || routerObj.isShow === isManufacturer">
-        <div class="icon">
-          <img src="" alt="icon" />
-        </div>
-        <div class="title" v-if="!routerObj.path">
-          {{ routerObj.title }}
-        </div>
-        <div v-else>
-          <router-link :to="routerObj.path" tag="li" class="title">
-            <p  @click="getNavTitle(routerObj.title, '')">{{routerObj.title}}</p>
-          </router-link>
-        </div>
-        <div class="switch">
-          <img src="" alt="" />
-        </div>
-      </div>
-      <div v-if="routerObj.list.length" class="second_level">
-        <div
-          v-for="(list, index) in routerObj.list"
-          :key="index">
-        <router-link
-          v-if="list.isShow === 'all' || list.isShow === isManufacturer"
-          :to="list.path"
-          tag="li"
-        >
-          <p
-            @click="getNavTitle(routerObj.title, list.title)"
-            :class="{blueColor: list.path === routerPath}"
-          >- {{ list.title }}</p>
-          
-        </router-link>          
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    isManufacturer: {
-      type: String,
-      default: 'distributor'
-    }
-  },
-  data() {
-    return {
-      routerList: [
-        {
-          title: "数据管理",
-          path: "",
-          img: "",
-          isShow: "all", // 厂商和经销商都有权限
-          list: [
-            {
-              title: "上传记录",
-              path: "/uploadRecord",
-              isShow: "manufacturer" // 只有厂商有权限
-            },
-            {
-              title: "链接上传", 
-              path: "/uploadLink",
-              isShow: "all" // 厂商和经销商都有权限
-            },
-            {
-              title: "上传资料",
-              path: "/uploadInfor",
-              isShow: "manufacturer" // 只有厂商有权限
-            },
-            {
-              title: "资料列表",
-              path: "/inforList",
-              isShow: "distributor" // 只有经销商有权限
-            },
-          ],
-        },
-        {
-          title: "账号管理",
-          path: "/accountIndex",
-          img: "",
-          list: [],
-          isShow: "all"  // 厂商和经销商都有权限
-        },
-        {
-          title: "参数设置",
-          path: "/parameterIndex",
-          img: "",
-          list: [],
-          isShow: "manufacturer" // 只有厂商有权限
-        },
-      ],
-    };
-  },
-  computed: {
-      routerPath: function() {
-        console.log(this.$route.path);
-        return this.$route.path
-      }
-  },
-  methods: {
-    getNavTitle: function(navTitle1, navTitle2) {
-      // 点击路由的时候，修改导航栏
-      this.$emit('change_nav', navTitle1, navTitle2);
-    }
-  },
-  mounted() {
-    console.log(this.isManufacturer);
-  }
-};
-</script>
-
-<style scoped lang="less">
-.router_banner {
-  width: 100%;
-  border-top: 10px solid #eee;
-  .router_management {
-    width: 100%;
-    .first_level {
-      display: flex;
-      height: 35px;
-      align-items: center;
-      &:hover {
-        cursor: pointer;
-        background-color: rgb(0, 86, 160);
-        color: #fff;
-        .title{
-          color: #fff;
-        }
-        p{
-          color: #fff;
-        }
-      }
-      .title {
-        font-size: 14px;
-        margin-left: 4px;
-      }
-      .icon {
-        width: 35px;
-        height: 35px;
-        margin-left: 10px;
-        background: #fff;
-        img {
-          width: 35px;
-          height: 35px;
-        }
-      }
-      .switch {
-        width: 11px;
-        height: 11px;
-        background: #fff;
-        margin-left: 20px;
-      }
-    }
-    .second_level {
-      li {
-        width: 100%;
-        height: 38px;
-        line-height: 38px;
-        text-align: center;
-        p{
-          &:hover {
-          cursor: pointer;
-          color: rgb(0, 86, 160);
-        }
-        }
-      }
-    }
-  }
-}
-// 选中变色
-.blueColor{
-  color: #0056a0;
-}
-</style>
+<template>
+  <div class="router_banner">
+    <div
+      class="router_management"
+      v-for="(routerObj, index) in routerList"
+      :key="index"
+    >
+      <div class="first_level" v-if="routerObj.isShow === 'all' || routerObj.isShow === isManufacturer">
+        <div class="icon">
+          <img :src="routerObj.img" alt="icon" />
+        </div>
+        <div class="title" v-if="!routerObj.path">
+          {{ routerObj.title }}
+        </div>
+        <div v-else>
+          <router-link :to="routerObj.path" tag="li" class="title">
+            <p  @click="getNavTitle(routerObj.title, '')">{{routerObj.title}}</p>
+          </router-link>
+        </div>
+        <div class="switch">
+          <img src="" alt="" />
+        </div>
+      </div>
+      <div v-if="routerObj.list.length" class="second_level">
+        <div
+          v-for="(list, index) in routerObj.list"
+          :key="index">
+        <router-link
+          v-if="list.isShow === 'all' || list.isShow === isManufacturer"
+          :to="list.path"
+          tag="li"
+        >
+          <p
+            @click="getNavTitle(routerObj.title, list.title)"
+            :class="{blueColor: list.path === routerPath}"
+          >- {{ list.title }}</p>
+
+        </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    isManufacturer: {
+      type: String,
+      default: 'distributor'
+    }
+  },
+  data() {
+    return {
+      routerList: [
+        {
+          title: "数据管理",
+          path: "",
+          img: require("../img/edit-manage.png"),
+          isShow: "all", // 厂商和经销商都有权限
+          list: [
+            {
+              title: "上传记录",
+              path: "/uploadRecord",
+              isShow: "manufacturer" // 只有厂商有权限
+            },
+            {
+              title: "链接上传",
+              path: "/uploadLink",
+              isShow: "all" // 厂商和经销商都有权限
+            },
+            {
+              title: "上传资料",
+              path: "/uploadInfor",
+              isShow: "manufacturer" // 只有厂商有权限
+            },
+            {
+              title: "资料列表",
+              path: "/inforList",
+              isShow: "distributor" // 只有经销商有权限
+            },
+          ],
+        },
+        {
+          title: "账号管理",
+          path: "/accountIndex",
+          img: require("../img/User-Settings.png"),
+          list: [],
+          isShow: "all"  // 厂商和经销商都有权限
+        },
+        {
+          title: "参数设置",
+          path: "/parameterIndex",
+          img: require("../img/setting.png"),
+          list: [],
+          isShow: "manufacturer" // 只有厂商有权限
+        },
+      ],
+    };
+  },
+  computed: {
+      routerPath: function() {
+        console.log(this.$route.path);
+        return this.$route.path
+      }
+  },
+  methods: {
+    getNavTitle: function(navTitle1, navTitle2) {
+      // 点击路由的时候，修改导航栏
+      this.$emit('change_nav', navTitle1, navTitle2);
+    }
+  },
+  mounted() {
+    console.log(this.isManufacturer);
+  }
+};
+</script>
+
+<style scoped lang="less">
+.router_banner {
+  width: 100%;
+  border-top: 10px solid #eee;
+  .router_management {
+    width: 100%;
+    .first_level {
+      display: flex;
+      height: 35px;
+      align-items: center;
+      &:hover {
+        cursor: pointer;
+        background-color: rgb(0, 86, 160);
+        color: #fff;
+        .title{
+          color: #fff;
+        }
+        p{
+          color: #fff;
+        }
+      }
+      .title {
+        font-size: 14px;
+        margin-left: 4px;
+      }
+      .icon {
+        width: 35px;
+        height: 35px;
+        margin-left: 10px;
+        background: #fff;
+        img {
+          width: 35px;
+          height: 35px;
+        }
+      }
+      .switch {
+        width: 11px;
+        height: 11px;
+        background: #fff;
+        margin-left: 20px;
+      }
+    }
+    .second_level {
+      li {
+        width: 100%;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        p{
+          &:hover {
+          cursor: pointer;
+          color: rgb(0, 86, 160);
+        }
+        }
+      }
+    }
+  }
+}
+// 选中变色
+.blueColor{
+  color: #0056a0;
+}
+</style>