修改图标

src/style/zwgk/menuModule.less

@@ -8,6 +8,7 @@
 
     .el-menu {
       border: none;
+
       .el-menu-item-group {
         height: 70px;
         text-align: center;
@@ -56,21 +57,38 @@
           word-wrap: break-word;
         }
       }
-      .is-active{
+
+      .is-active {
         background: #1b68c0;
-        .muneName{
+
+        .muneName {
           color: #fff;
         }
       }
 
       .menuBox {
         font-size: 23px;
+
         margin-bottom: 15px;
-        background: #f2f2f2;
-        border: 1px solid #ddd;
 
-        &:hover {
-          .el-sub-menu__title {
+        .el-sub-menu__title {
+          color: #fff;
+          height: 80px !important;
+          border-radius: 6px;
+          background: #f2f2f2;
+          border: 1px solid #ddd;
+        }
+
+        .el-menu-item {
+          width: 100%;
+          margin: 10px 0;
+          background: #FAFAFA;
+
+          .muneName {
+            width: 100%;
+          }
+
+          &:hover {
             color: #fff;
             background: #1b68c0;
           }
@@ -79,7 +97,10 @@
         .el-sub-menu__title {
           height: 70px;
           color: #1c68c0;
-
+          &:hover {
+            color: #fff;
+            background: #1b68c0;
+          }
           .el-icon {
             font-size: 22px;
           }

src/views/zwgk/modules/menuModule copy.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="featureBox">
+    <el-menu
+      :collapse="isCollapse"
+      :default-active="activeMenu"
+      class="el-menu-vertical-demo dark-mode"
+    >
+      <template v-for="item in menuList" :key="item.key">
+        <el-sub-menu
+          class="menuBox"
+          :index="item.path"
+          v-if="item.children"
+          @mouseenter="
+            (el) => {
+              moveToMenu(el, item.icon);
+            }
+          "
+          @mouseleave="
+            (el) => {
+              leaveToMenu(el, item.icon);
+            }
+          "
+        >
+          <template #title>
+            <img :src="getUrl(item.icon)" alt="" />
+            <span>{{ item.name }}</span>
+          </template>
+          <el-menu-item
+            :index="son.path"
+            v-for="son in item.children"
+            @click="jumpModule(son.path)"
+          >
+            <template #title>
+              <span class="muneName">{{ son.name }}</span>
+            </template>
+          </el-menu-item>
+        </el-sub-menu>
+
+        <el-menu-item
+          v-else
+          :index="item.path"
+          @mouseenter="
+            (el) => {
+              moveToMenu(el, item.icon);
+            }
+          "
+          @mouseleave="
+            (el) => {
+              leaveToMenu(el, item.icon);
+            }
+          "
+          @click="jumpModule(item.path)"
+        >
+          <img :src="getUrl(item.icon)" alt="" />
+          <template #title>
+            <span class="muneName">{{ item.name }}</span>
+          </template>
+        </el-menu-item>
+      </template>
+      <slot />
+    </el-menu>
+  </div>
+</template>
+<script setup>
+import { ref, watch, reactive } from "vue";
+import { useRouter } from "vue-router";
+import "@/style/zwgk/menuModule.less";
+
+const router = useRouter();
+const activeMenu = ref("zfxxgkzn");
+
+const menuList = reactive([
+  {
+    path: "zfxxgkzn",
+    icon: "zfxxgkzn",
+    name: "政府信息公开指南",
+  },
+  {
+    path: "zfxxgkzd",
+    icon: "zfxxgkzd",
+    name: "政府信息公开制度",
+  },
+  {
+    path: "zfxxgknb",
+    icon: "zfxxgknb",
+    name: "政府信息公开年报",
+  },
+  {
+    path: "fdgknr",
+    icon: "fdgknr",
+    name: "法定公开内容",
+    children: [
+      {
+        path: "fdgknr/lzyj",
+        name: "履职依据",
+      },
+      {
+        path: "fdgknr/jgzz",
+        name: "机构职能",
+      },
+      {
+        path: "fdgknr/ldzc",
+        name: "领导之窗",
+      },
+      {
+        path: "fdgknr/zdgkwj",
+        name: "主动公开文件",
+      },
+      // {
+      //   path: "fdgknr/xzcf",
+      //   name: "行政处罚",
+      // },
+      // {
+      //   path: "fdgknr/xzxk",
+      //   name: "行政许可",
+      // },
+      {
+        path: "fdgknr/ghjh",
+        name: "规划计划",
+      },
+      {
+        path: "fdgknr/czys",
+        name: "财政预决算",
+      },
+    ],
+  },
+  {
+    path: "zcwj",
+    icon: "zcwj",
+    name: "政策文件",
+  },
+  {
+    path: "zcjd",
+    icon: "zcjd",
+    name: "政策解读",
+  },
+  {
+    path: "xzgfxwj",
+    icon: "xzgfxwj",
+    name: "行政规范性文件",
+  },
+  {
+    path: "ysqgk",
+    icon: "ysqgk",
+    name: "依申请公开",
+  },
+  {
+    path: "zfwzgznb",
+    icon: "zfwzgznb",
+    name: "政府网站工作年报",
+  },
+]);
+function jumpModule(path) {
+  activeMenu.value = path;
+  router.push("/zwgk/" + path);
+}
+function getUrl(name) {
+  if (name == activeMenu.value) {
+    name = name + "s";
+  }
+  return new URL(`../../../assets/hdjl/${name}.png`, import.meta.url).href;
+}
+// 鼠标移入菜单
+function moveToMenu(el, url) {
+  let urls = url + "s";
+  // 找到当前菜单项中的 img 元素
+  let imgElement = el.target.querySelector("img");
+  if (imgElement) {
+    imgElement.src = imgElement.src.replace(url, urls);
+  }
+}
+// 鼠标移出菜单
+function leaveToMenu(el, url) {
+  let urls = url + "s";
+  // 找到当前菜单项中的 img 元素
+  let imgElement = el.target.querySelector("img");
+  if (imgElement) {
+    imgElement.src = imgElement.src.replace(urls, url);
+  }
+}
+
+watch(
+  () => router.currentRoute.value.name,
+  (newValue) => {
+    activeMenu.value = newValue == "zwgk" ? "zfxxgkzn" : newValue;
+  },
+  { immediate: true }
+);
+</script>