最新ZM概览

src/router/modules/ZMOverView.js

@@ -4,8 +4,8 @@ import ZMOverview from "@/views/ZMOverView/index.vue";
 const ZMOverviewRoutes = [
   //创新主体
   {
-    path: "/ZMOerView",
-    name: "ZMOerView",
+    path: "/ZMOverView",
+    name: "ZMOverView",
     component: ZMOverview,
     meta: {
       title: "ZM博弈概览"

src/views/ZMOverView/components/fourSuppress/components/addDomain/index.vue

+<!--科技要闻-->
+<template>
+	<div class="content-wrapper">
+		全领域
+	</div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from "vue";
+
+</script>
+
+<style lang="scss" scoped>
+.content-wrapper {
+    width: 1666px;
+    height: 2132px;
+    
+}
+</style>

src/views/ZMOverView/components/fourSuppress/components/allElement/index.vue

+<!--科技要闻-->
+<template>
+	<div class="content-wrapper">
+		全要素
+	</div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from "vue";
+
+</script>
+
+<style lang="scss" scoped>
+.content-wrapper {
+    width: 1666px;
+    height: 2132px;
+    
+}
+</style>

src/views/ZMOverView/components/fourSuppress/components/allUnion/index.vue

+<!--科技要闻-->
+<template>
+	<div class="content-wrapper">
+		全联盟
+	</div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from "vue";
+
+</script>
+
+<style lang="scss" scoped>
+.content-wrapper {
+    width: 1666px;
+    height: 2132px;
+    
+}
+</style>

src/views/ZMOverView/components/fourSuppress/index.vue

 <!--科技要闻-->
 <template>
 	<div class="content-wrapper">
-		美对华四全打压
+		<div class="main-nav">
+			<div 
+                v-for="item in navList" 
+                :key="item.name" 
+                class="nav-item" 
+                :class="{ active: activeNav === item.name }"
+                @click="handleNavClick(item.name)"
+            >
+                <div class="item-content">
+                    <img v-if="activeNav === item.name" :src="right" class="active-icon" alt="" />
+                    <span>{{ item.name }}</span>
+                </div>
+                <img v-if="activeNav === item.name" :src="background" class="active-bg" alt="" />
+			</div>
+		</div>
+		<!-- 切换不同的组件 -->
+		<AllGovernment v-if="activeNav === '全政府'" />
+		<AddDomain v-if="activeNav === '全领域'" />
+		<AllUnion v-if="activeNav === '全联盟'" />
+		<AllElement v-if="activeNav === '全要素'" />
 	</div>
 </template>
 
 <script setup>
 import { onMounted, ref, computed } from "vue";
+import right from "./assets/right.png";
+import background from "./assets/background.png";
 
+// 组件引入
+import AllGovernment from "./components/allGovernment/index.vue";
+import AddDomain from "./components/addDomain/index.vue";
+import AllUnion from "./components/allUnion/index.vue";
+import AllElement from "./components/allElement/index.vue";
+
+const navList = ref([
+    { name: "全政府" },
+    { name: "全领域" },
+    { name: "全联盟" },
+    { name: "全要素" }
+]);
+
+const activeNav = ref("全政府");
+
+const handleNavClick = (name) => {
+    activeNav.value = name;
+};
 </script>
 
 <style lang="scss" scoped>
 .content-wrapper {
-    width: 100%;
+    width: 1601px;
     height: 2203px;
-    
+    margin: 0 auto;
+    .main-nav {
+        width: 100%;
+        height: 55px;
+		padding: 4px 5px;
+        display: flex;
+        align-items: center;
+		border-radius: 10px;
+		background-color: rgba(255, 255, 255, 0.65);
+		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+        box-sizing: border-box;
+        gap: 8px;
+		margin-bottom: 16px;
+        .nav-item {
+            flex: 1;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            position: relative;
+            // transition: all 0.3s;
+
+            .item-content {
+                display: flex;
+                align-items: center;
+                z-index: 1;
+
+                .active-icon {
+                    width: 18px;
+                    height: 18px;
+                    margin-right: 8px;
+                }
+
+                span {
+                    font-family: 'YouSheBiaoTiHei';
+                    font-size: 24px;
+                    font-weight: 400;
+                    line-height: 31px;
+                    color: rgb(59, 65, 75);
+                }
+            }
+
+            .active-bg {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 400px;
+                height: 60px;
+                z-index: 0;
+            }
+
+            &.active {
+                background-color: rgba(246, 250, 255, 1);
+                border: 1px solid rgba(174, 214, 255, 1);
+                border-radius: 10px;
+                
+                span {
+                    color: rgb(5, 95, 194);
+                }
+            }
+        }
+    }
 }
 </style>

src/views/ZMOverView/components/newRisk/index.vue

@@ -280,7 +280,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .content-wrapper {
 	width: 100%;
-	height: 100%;
+	// height: 100%;
 
 	.policy-monitoring {
 		font-family: Arial, sans-serif;