修改菜单图标

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,15 +3,19 @@
     <template v-if="showSidebarItem(item.children, item)">
       <Link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
       <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
-        <item :meta="onlyOneChild.meta || item.meta" />
-        <template #title>{{ onlyOneChild.meta?.title }}</template>
+        <!-- <item :meta="onlyOneChild.meta || item.meta" /> -->
+        <div v-if="onlyOneChild.meta.elSvgIcon || item.meta.elSvgIcon" class="menuIcon" :class="onlyOneChild.path"></div>
+        <template #title>
+          <div :class="onlyOneChild.meta.elSvgIcon || item.meta.elSvgIcon ? 'menuText' : ''">{{ onlyOneChild.meta?.title }}</div>
+        </template>
       </el-menu-item>
       </Link>
     </template>
     <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template v-if="item.meta" #title>
-        <item :meta="item.meta" />
-        <span>{{ item.meta.title }}</span>
+        <div class="menuIcon" :class="item.path.replace('/','')"></div>
+        <!-- <item :meta="item.meta" /> -->
+        <span class="menuText">{{ item.meta.title }}</span>
       </template>
       <SidebarItem v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" />
     </el-sub-menu>
@@ -77,3 +81,37 @@ const resolvePath = (routePath: string) => {
   return path.resolve(props.basePath, routePath);
 };
 </script>
+
+<style lang="scss" scoped>
+.menuIcon {
+  width: 16px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-right: 16px;
+}
+.menuText {
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #ffffff;
+}
+.dashboard {
+  background-image: url("@/assets/menus/ic_cockpit_menu.png");
+}
+.realTime {
+  background-image: url("@/assets/menus/ic_view_nav\ .png");
+}
+.dataQuery {
+  background-image: url("@/assets/menus/ic_data_query\ .png");
+}
+.userManagement {
+  background-image: url("@/assets/menus/ic_user_manage_nav.png");
+}
+.BasicsData {
+  background-image: url("@/assets/menus/ic_basic_data_nav.png");
+}
+.systemSettings {
+  background-image: url("@/assets/menus/ic_system_setting_nav.png");
+}
+</style>