src/router/modules/News.route.js

@@ -73,13 +73,13 @@ const testRouter = [
       {
         path: "picture",
         name: "picture",
-        meta: { title: "图片列表", tagRoute: "GIP" },
+        meta: { title: "图片新闻", tagRoute: "GIP" },
         component: () => import("@/views/News/picture/index.vue"),
       },
       {
         path: "pictureDetails",
         name: "pictureDetails",
-        meta: { title: "图片列表详情", tagRoute: "GIP" },
+        meta: { title: "图片新闻", tagRoute: "GIP" },
         component: () => import("@/views/News/pictureDetails/index.vue"),
       },
     ],

src/style/home/index.less

@@ -75,7 +75,6 @@
         text-align: center;
         line-height: 40px;
         border: 1px #cbd9e3 solid;
-        border-radius: 8px;
         margin-right: 14px;
         cursor: pointer;
       }
@@ -211,12 +210,13 @@
 }
 
 .col-box-title {
-  width: 102px;
+  width: 132px;
   line-height: 40px;
   margin-bottom: 12px;
   text-indent: 1ch;
-  color: #0176c9;
+  color: #fff;
   font-weight: bold;
+  background-color: #0176c9;
   border-bottom: 1px #0176c9 solid;
 }
 

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/Home/components/broadcast.vue

@@ -90,7 +90,7 @@ export default {
       // console.log(1221);
       //定义一个路径
       let href = router.resolve({
-        path: "/News/picture",
+        path: "/News/imgesDel",
         // query: { type: "ttxmbt" },
       }).href;
       //打开新的页面 到 href 这个页面

src/views/Home/index.vue

@@ -24,14 +24,20 @@
 				<div class="title">
 					<p class="errorClass" :class="{ actives: isHovered == 1 ? true : false }" @mouseenter="mouseenterIactives(1)"
 						@click="tabsData('1')">
+						<img class="img_trxt" v-if="isHovered == 1" src="../../assets/homeImg/gwyxx.png" alt="" />
+						<img class="img_trxt" v-else src="../../assets/homeImg/gwyxx-h.png" alt="" />
 						国务院信息
 					</p>
 					<p class="errorClass" :class="{ actives: isHovered == 2 ? true : false }" @mouseenter="mouseenterIactives(2)"
 						@click="tabsData('2')">
+						<img class="img_trxt" v-if="isHovered == 2" src="../../assets/homeImg/qhyw.png" alt="" />
+						<img class="img_trxt" v-else src="../../assets/homeImg/qhyw-h.png" alt="" />
 						青海要闻
 					</p>
 					<p class="errorClass" :class="{ actives: isHovered == 3 ? true : false }" @mouseenter="mouseenterIactives(3)"
 						@click="tabsData('3')">
+						<img class="img_trxt" v-if="isHovered == 3" src="../../assets/homeImg/hyxx.png" alt="" />
+						<img class="img_trxt" v-else src="../../assets/homeImg/hyxx-h.png" alt="" />
 						行业信息
 					</p>
 				</div>
@@ -93,7 +99,10 @@
 		<div class="col-box">
 			<div class="col-box-left">
 				<div class="col-box-text">
-					<p class="col-box-title">政务公开</p>
+					<p class="col-box-title">
+						<img class="img_trxt1" src="../../assets/homeImg/zwgk.png" alt="" />
+						政务公开
+					</p>
 				</div>
 				<div class="col-box-content">
 					<div class="col-content-top">
@@ -151,7 +160,10 @@
       </div> -->
 			<div class="col-box-left">
 				<div class="col-box-text">
-					<p class="col-box-title">互动交流</p>
+					<p class="col-box-title">
+						<img class="img_trxt1" src="../../assets/homeImg/hdjl.png" alt="" />
+						互动交流
+					</p>
 				</div>
 				<div class="col-box-content">
 					<div class="col-content-top1">
@@ -567,6 +579,13 @@ function getDIcList() {
 	width: 98%;
 }
 
+.errorClass {
+	background-color: #fafafa;
+	color: #3274c3;
+	font-weight: bold;
+}
+
+
 .actives {
 	background-color: #3274c3;
 	color: #ffffff;
@@ -584,6 +603,21 @@ function getDIcList() {
 	color: #333;
 }
 
+.img_trxt {
+	width: 18px;
+	height: 18px;
+	vertical-align: middle;
+	margin-bottom: 0px;
+}
+
+.img_trxt1 {
+	width: 22px;
+	height: 22px;
+	margin-right: 6px;
+	vertical-align: middle;
+	margin-bottom: 0px;
+}
+
 .bag-time {
 	width: 18%;
 }

src/views/News/pictureDetails/index.vue

@@ -4,7 +4,7 @@
     <div class="content-lzyj">
       <article-module :article="pageData.article">
         <div class="articleInfo">
-          <span class="title">[发布时间] <span>{{ pageData.publishTime }}</span></span>
+          <span class="title">发布时间: <span>{{ pageData.publishTime }}</span></span>
         </div>
       </article-module>
     </div>
@@ -43,4 +43,8 @@ function getPageData() {
 
   .articleInfo {}
 }
+
+.title {
+  color: #969696;
+}
 </style>

src/views/footer/index.vue

@@ -37,6 +37,7 @@ import {} from "vue";
   background-color: #7898c0;
   border-top: 2px solid #37e;
   background: url("../../assets/bgImage/footer.png") 100% 100% no-repeat;
+  margin-top: 30px;
   .link {
     ul {
       width: 380px;

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>