gx

src/components/header.vue

@@ -32,7 +32,22 @@
           </div>
         </div>
         <div class="cd">
-          <img class="title" src="../assets/cd.png" alt="" />
+          <img
+            class="title"
+            src="../assets/cd.png"
+            alt=""
+            @click="data.menushow = !data.menushow"
+          />
+          <div class="menuBox" v-if="data.menushow">
+            <div
+              v-for="item in data.urlLeft1"
+              class="menuTitle"
+              :class="item.zt ? 'menuTitle1' : ''"
+              @click="onMenu(item)"
+            >
+              {{ item.name }}
+            </div>
+          </div>
         </div>
         <img src="../assets/RightLine.gif" class="rightLineClass" />
         <img src="../assets/RightLine.gif" class="leftLineClass" />
@@ -73,10 +88,46 @@ const to = (url) => {
   });
   data.nowTab = url;
 };
+const onMenu = (val) => {
+  console.log(val);
+  data.urlLeft1.forEach((parent, index) => {
+    parent.zt = false;
+    if (parent.name === val.name) {
+      parent.zt = !parent.zt;
+    }
+  });
+  router.push({
+    path: `${val.url}`,
+  });
+  data.menushow = false;
+};
 const router = useRouter();
 const routers = useRoute();
 let menuIf = ref(true);
 const data = reactive({
+  menushow: false,
+  urlLeft1: [
+    {
+      name: "养老",
+      url: "/home/yl",
+      zt: true,
+    },
+    {
+      name: "卫生",
+      url: "/home/hygiene",
+      zt: false,
+    },
+    {
+      name: "教育",
+      url: "/home/education",
+      zt: false,
+    },
+    {
+      name: "救助",
+      url: "/home/work",
+      zt: false,
+    },
+  ],
   urlLeft: [
     {
       name: "评估模型",
@@ -154,13 +205,52 @@ onMounted(() => {
   .cd {
     position: absolute;
     right: 50px;
-    top: 38px;
+    top: 35px;
     cursor: pointer;
     img {
       width: 22px;
       height: 22px;
     }
+    .menuBox {
+      position: absolute;
+      right: 0px;
+      top: 25px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 18px;
+      color: #ffffff;
+      width: 120px;
+      height: 184px;
+      background: rgba(8, 65, 131, 0.18);
+      box-shadow: inset 0px 0px 26px 0px rgba(181, 216, 255, 0.63);
+      border-radius: 4px;
+      border: 1px solid rgba(3, 136, 255, 0.34);
+      // opacity: 0; /* 初始状态隐藏 */
+      // transition: opacity 0.3s ease-in-out; /* 添加过渡动画 */
+      // .menuBox.show {
+      //   opacity: 1; /* 显示时的状态 */
+      // }
+      .menuTitle {
+        width: 100%;
+        height: 25%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
       }
+      .menuTitle1 {
+        width: 100%;
+        height: 25%;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        background: rgba(20, 130, 242, 0.29);
+        box-shadow: inset 0px 0px 23px 0px #3e9dff;
+        filter: blur(0px);
+      }
+    }
+  }
+
   .time {
     width: 200px;
     height: 70%;

src/view/sy_table.vue

@@ -173,7 +173,7 @@ const router = useRouter();
 const routers = useRoute();
 // 路由跳转
 const goto = (url, val) => {
-  console.log(val);
+  // console.log(val);
   if (val.name == "最低生活保障") {
     router.push({
       path: `${url}`,