src/style/zwgk/menuModule.less

@@ -1,128 +0,0 @@
-.page {
-  background: #fff !important;
-
-  .featureBox {
-    width: 240px;
-    float: left;
-    border-radius: 5px 5px 0 0;
-
-    .el-menu {
-      border: none;
-
-      .el-menu-item-group {
-        height: 70px;
-        text-align: center;
-        margin-bottom: 15px;
-        background: #2c66a4;
-
-        .title {
-          color: #fff;
-          font-size: 26px;
-          line-height: 35px;
-          font-weight: bold;
-        }
-      }
-
-      .el-menu-item {
-        height: 80px;
-        font-size: 23px;
-        border-radius: 6px;
-        margin-bottom: 15px;
-        background: #f2f2f2;
-        border: 1px solid #ddd;
-
-        &:hover {
-          background: #1b68c0;
-
-          .muneName {
-            color: #fff;
-          }
-        }
-
-        img {
-          width: 40px;
-          float: left;
-          margin-top: 6px;
-          margin-left: 20px;
-          padding-right: 20px;
-        }
-
-        .muneName {
-          width: 110px;
-          display: block;
-          font-size: 23px;
-          color: #1c68c0;
-          line-height: 28px;
-          white-space: normal;
-          word-wrap: break-word;
-        }
-      }
-
-      .is-active {
-        background: #1b68c0;
-
-        .muneName {
-          color: #fff;
-        }
-      }
-
-      .menuBox {
-        font-size: 23px;
-
-        margin-bottom: 15px;
-
-        .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;
-          }
-        }
-
-        .el-sub-menu__title {
-          height: 70px;
-          color: #1c68c0;
-          &:hover {
-            color: #fff;
-            background: #1b68c0;
-          }
-          .el-icon {
-            font-size: 22px;
-          }
-        }
-
-        img {
-          width: 40px;
-          float: left;
-          margin-top: 6px;
-          margin-left: 20px;
-          padding-right: 20px;
-        }
-
-        span {
-          width: 110px;
-          display: block;
-          font-size: 23px;
-          line-height: 28px;
-          white-space: normal;
-          word-wrap: break-word;
-        }
-      }
-    }
-  }
-}

src/style/zwgk/menuStyle.less

@@ -0,0 +1,113 @@
+.page {
+  background: #fff !important;
+
+  .featureBox {
+    width: 240px;
+    float: left;
+    border-radius: 5px 5px 0 0;
+
+    ::v-deep(.el-menu) {
+      border: none;
+      background: transparent;
+
+      .el-menu-item {
+        height: 80px;
+        font-size: 23px;
+        border-radius: 6px;
+        margin-bottom: 15px;
+        background: #f2f2f2;
+        border: 1px solid #ddd;
+
+        img {
+          width: 40px;
+          float: left;
+          margin-top: 6px;
+          margin-left: 20px;
+          padding-right: 20px;
+        }
+
+        .muneName {
+          width: 110px;
+          display: block;
+          font-size: 23px;
+          color: #1c68c0;
+          line-height: 28px;
+          white-space: normal;
+          word-wrap: break-word;
+        }
+
+        &.is-active {
+          background: #1b68c0;
+
+          .muneName {
+            color: #fff;
+          }
+        }
+      }
+
+      //  二级菜单样式
+      .el-sub-menu {
+        margin-bottom: 14px;
+
+        .el-sub-menu__title {
+          height: 80px;
+          font-size: 23px;
+          border-radius: 6px;
+          background: #f2f2f2;
+          border: 1px solid #ddd;
+
+          img {
+            width: 40px;
+            float: left;
+            margin-top: 6px;
+            margin-left: 20px;
+            padding-right: 20px;
+          }
+
+          .muneName {
+            width: 110px;
+            display: block;
+            font-size: 23px;
+            color: #1c68c0;
+            line-height: 28px;
+            white-space: normal;
+            word-wrap: break-word;
+          }
+        }
+
+        .el-menu {
+          .el-menu-item-group {
+            .el-menu-item-group__title {
+              padding: 3px 0 3px 0;
+            }
+
+            .el-menu-item {
+              margin: 0;
+              color: #1c68c0;
+              font-size: 20px;
+              white-space: normal;
+              word-wrap: break-word;
+
+              &.is-active {
+                color: #fff;
+                background: #1b68c0;
+              }
+            }
+          }
+        }
+
+        &.is-active {
+          background: transparent;
+
+          .el-sub-menu__title {
+            background: #1b68c0;
+
+            .muneName {
+              color: #fff;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/views/zwgk/modules/menuModule.vue

@@ -1,91 +1,63 @@
 <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);
-            }
-          "
+    <el-menu :default-active="activeMenu">
+      <template v-for="menu in menuList">
+        <!-- 只有一级菜单 -->
+        <el-menu-item
+          v-if="!menu.children"
+          :index="menu.path"
+          @click="jumpRoute(menu)"
         >
+          <img :src="getImgUrl(menu)" :alt="menu.name" />
+          <span class="muneName">{{ menu.name }}</span>
+        </el-menu-item>
+        <!-- 有二级菜单 -->
+        <el-sub-menu v-else :index="menu.path">
           <template #title>
-            <img :src="getUrl(item.icon)" alt="" />
-            <span>{{ item.name }}</span>
+            <img :src="getImgUrl(menu)" :alt="menu.name" />
+            <span class="muneName">{{ menu.name }}</span>
           </template>
-          <el-menu-item
-            :index="son.path"
-            v-for="son in item.children"
-            @click="jumpModule(son.path)"
+          <el-menu-item-group
+            v-for="menuSub in menu.children"
+            :key="menuSub.path"
           >
-            <template #title>
-              <span class="muneName">{{ son.name }}</span>
-            </template>
-          </el-menu-item>
+            <el-menu-item :index="menuSub.path" @click="jumpRoute(menuSub)">{{
+              menuSub.name
+            }}</el-menu-item>
+          </el-menu-item-group>
         </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([
   {
+    active: true,
     path: "zfxxgkzn",
     icon: "zfxxgkzn",
     name: "政府信息公开指南",
   },
   {
+    active: false,
     path: "zfxxgkzd",
     icon: "zfxxgkzd",
     name: "政府信息公开制度",
   },
   {
+    active: false,
     path: "zfxxgknb",
     icon: "zfxxgknb",
     name: "政府信息公开年报",
   },
   {
+    active: false,
     path: "fdgknr",
     icon: "fdgknr",
     name: "法定公开内容",
@@ -125,65 +97,76 @@ const menuList = reactive([
     ],
   },
   {
+    active: false,
     path: "zcwj",
     icon: "zcwj",
     name: "政策文件",
   },
   {
+    active: false,
     path: "zcjd",
     icon: "zcjd",
     name: "政策解读",
   },
   {
+    active: false,
     path: "xzgfxwj",
     icon: "xzgfxwj",
     name: "行政规范性文件",
   },
   {
+    active: false,
     path: "ysqgk",
     icon: "ysqgk",
     name: "依申请公开",
   },
   {
+    active: false,
     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 jumpRoute(data) {
+  activeMenu.value = data.path;
+  router.push("/zwgk/" + data.path);
 }
-// 鼠标移出菜单
-function leaveToMenu(el, url) {
-  let urls = url + "s";
-  // 找到当前菜单项中的 img 元素
-  let imgElement = el.target.querySelector("img");
-  if (imgElement) {
-    imgElement.src = imgElement.src.replace(urls, url);
+// 获取图片地址
+function getImgUrl(data) {
+  let url = "";
+  if (data.active) {
+    url = data.icon + "s";
+  } else {
+    url = data.icon;
   }
+  return new URL(`../../../assets/hdjl/${url}.png`, import.meta.url).href;
 }
-
+// 监听 选中的菜单对应的图标高亮
+watch(
+  () => activeMenu.value,
+  (newValue) => {
+    let hasSlash = newValue.includes("/");
+    let menuPath = hasSlash ? "fdgknr" : newValue;
+    menuList.forEach((item) => {
+      if (menuPath == item.path) {
+        item.active = true;
+      } else {
+        item.active = false;
+      }
+    });
+  },
+  { immediate: true }
+);
+// 监听路由
 watch(
-  () => router.currentRoute.value.name,
+  () => router.currentRoute.value.path,
   (newValue) => {
-    activeMenu.value = newValue == "zwgk" ? "zfxxgkzn" : newValue;
+    activeMenu.value = newValue.replace("/zwgk/", "");
   },
   { immediate: true }
 );
 </script>
+<style lang="less" scoped>
+@import url(@/style/zwgk/menuStyle.less);
+</style>