src/style/common/index.less

@@ -12,7 +12,7 @@ body {
   width: 1200px;
   // overflow: auto;
   margin: 0 auto;
-  min-height: calc(100vh - 570px);
+  min-height: calc(100vh - 470px);
   background: #fff;
 }
 

src/style/hdjl/index.less

@@ -8,7 +8,7 @@
     .el-card{
       margin: 15px 0;
       .el-card__header{
-        background: #409EFF;
+        background: #1b68c0;
         .moduleName{
           color: #fff;
           font-weight: bold;

src/style/home/index.less

@@ -372,7 +372,7 @@
 .part {
   display: flex;
   width: 97%;
-  margin-left: 3%;
+  padding: 10px 3% 50px 3%;
 }
 
 .part-box {

src/style/zwgk/menuModule.less

@@ -1,107 +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;
-        background: #f2f2f2;
-        border: 1px solid #ddd;
-
-        &:hover {
-          .el-sub-menu__title {
-            color: #fff;
-            background: #1b68c0;
-          }
-        }
-
-        .el-sub-menu__title {
-          height: 70px;
-          color: #1c68c0;
-
-          .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,118 @@
+.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-icon {
+          color: #1c68c0;
+          font-size: 20px;
+        }
+      }
+
+      .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;
+          }
+
+          .el-icon {
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}

src/views/footer/index.vue

@@ -29,15 +29,14 @@
   </div>
 </template>
 <script setup lang="ts" name="">
-import {} from 'vue'
+import {} from "vue";
 </script>
 <style scoped lang="less">
 .footer {
   padding: 20px 0;
   background-color: #7898c0;
   border-top: 2px solid #37e;
-  background: url('../../assets/bgImage/footer.png') 100% 100% no-repeat;
-  margin-top: 30px;
+  background: url("../../assets/bgImage/footer.png") 100% 100% no-repeat;
   .link {
     ul {
       width: 380px;

src/views/hdjl/index.vue

@@ -94,15 +94,15 @@
     </div>
     <div class="featureArea">
       <div class="feature" @click="jumpModule('/hdjl/ldxx')">
-        <img src="@/assets/logo/wyxx1.png" />
+        <img src="@/assets/hdjl/wyxx1.png" />
         <span>领导信箱</span>
       </div>
       <div class="feature" @click="jumpModule('/hdjl/xfjb')">
-        <img src="@/assets/logo/wyxx2.png" />
+        <img src="@/assets/hdjl/wyxx2.png" />
         <span>信访举报</span>
       </div>
       <div class="feature" @click="jumpModule('/hdjl/myzj')">
-        <img src="@/assets/logo/wyxx4.png" />
+        <img src="@/assets/hdjl/wyxx4.png" />
         <span>民意征集</span>
       </div>
     </div>

src/views/zwgk/modules/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page" :class="{ homeStyle: props.showView == 'IPP' }">
+  <div class="menuView" :class="{ homeStyle: props.showView == 'IPP' }">
     <div class="searchBox" v-if="props.showView != 'IPP'">
       <input
         type="text"
@@ -39,13 +39,15 @@ function chkSearch() {
 }
 </script>
 <style scoped lang="less">
-.page {
+.menuView {
   width: 1128px;
   height: 100%;
   overflow: hidden;
-  background-color: rgb(242, 242, 242);
   margin: 0 auto;
-  padding: 20px 36px 20px 36px;
+  padding: 35px;
+  background-color: #fff;
+  border: 1px solid #f0f2f5;
+  box-shadow: 2px 2px 20px 2px #e6e8eb;
 
   .searchBox {
     display: block;
@@ -109,13 +111,12 @@ function chkSearch() {
     height: 100%;
 
     .contentView {
-      display: block;
       float: left;
-      width: calc(100% - 310px);
-      background-color: #fff;
-      border: 1px solid #dfdfdf;
+      display: block;
       padding: 0px 20px;
       margin-left: 18px;
+      width: calc(100% - 310px);
+      background-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,77 @@ 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;
+    let path = newValue.replace("/zwgk/", "");
+    activeMenu.value = path == "info" ? "zfxxgkzn" : path;
   },
   { immediate: true }
 );
 </script>
+<style lang="less" scoped>
+@import url(@/style/zwgk/menuStyle.less);
+</style>

src/views/zwgk/pages/ysqgk.vue

@@ -3,22 +3,22 @@
     <bread-crumb />
     <div class="funModule">
       <div class="fun" @click="jumpModule('apply')">
-        <img src="@/assets/logo/zdgk2.png" alt="申请">
+        <img src="@/assets/hdjl/zdgk2.png" alt="申请" />
         <span>申请</span>
       </div>
       <div class="fun" @click="jumpModule('query')">
-        <img src="@/assets/logo/qh-sy-search-more.png" alt="查询">
+        <img src="@/assets/hdjl/qh-sy-search-more.png" alt="查询" />
         <span>查询</span>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts" name="">
-import { useRouter } from 'vue-router'
-import BreadCrumb from "@/components/breadcrumbModule/index.vue"
+import { useRouter } from "vue-router";
+import BreadCrumb from "@/components/breadcrumbModule/index.vue";
 const router = useRouter();
 function jumpModule(path) {
-  router.push('/zwgk/ysqgk/' + path);
+  router.push("/zwgk/ysqgk/" + path);
 }
 </script>
 <style scoped lang="less">
@@ -27,7 +27,7 @@ function jumpModule(path) {
 
   .funModule {
     padding: 20px;
-    height: calc(100vh - 560px);
+    height: calc(100vh - 580px);
 
     .fun {
       float: left;
@@ -50,4 +50,4 @@ function jumpModule(path) {
     }
   }
 }
-</style>
+</style>