ZM概览

src/router/modules/ZMGame.js

+//ZM博弈概览
+import ZMGame from "@/views/ZMGame/index.vue";
+
+const ZMGameRoutes = [
+  //创新主体
+  {
+    path: "/ZMGame",
+    name: "ZMGame",
+    component: ZMGame,
+    meta: {
+      title: "ZM博弈概览"
+    }
+  }
+
+]
+
+export default ZMGameRoutes
\ No newline at end of file

src/views/ZMGame/component/riskToday/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: 100%;
+  height: 100%;
+
+}
+</style>
\ No newline at end of file

src/views/ZMGame/component/scienceNews/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: 100%;
+  height: 100%;
+
+}
+</style>
\ No newline at end of file

src/views/ZMGame/index.vue

+<!--ZM博弈概览页-->
+<template>
+  <div class="home-wrapper">
+    <div class="home-header">
+      <div class="header-left">
+        <HeaderMenu></HeaderMenu>
+      </div>
+      <div class="header-right">
+        <input :value="input">
+      </div>
+    </div>
+    <div class="content-box">
+      <div class="btn-box">
+        <div v-for="item in riskItems" :key="item" :class="aciveBtn === item ? 'btn-select' : 'btn'"
+          @click="aciveBtn = item">
+          <img src="./assets/icons/btn-select-icon.png" v-if="aciveBtn === item" class="btn-icon" />{{
+            item }}
+        </div>
+      </div>
+      <RiskToday v-if="aciveBtn === '最新风险动态'" />
+      <ScienceNews v-if="aciveBtn === '最新科技要闻'" />
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref, computed } from "vue";
+import HeaderMenu from "@/components/headerMenu.vue";
+import RiskToday from './component/riskToday/index.vue'
+import ScienceNews from './component/scienceNews/index.vue'
+const input = ref('')
+const riskItems = ref([
+  "最新风险动态", "最新科技要闻", "美对我打压遏制TS", "中美科技博弈概况"
+]);
+const aciveBtn = ref('最新风险动态')
+</script>
+
+<style lang="scss" scoped>
+.home-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow-y: hidden;
+
+  .home-header {
+    height: 64px;
+    background: url("./assets/images/header-bg.png");
+    box-sizing: border-box;
+    padding: 0 160px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .content-box {
+    width: 100%;
+    height: 100%;
+    padding: 16px 160px;
+
+    .btn-box {
+      /* 概览页导航 */
+      width: 1598px;
+      height: 55px;
+      /* 自动布局 */
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 8;
+      padding: 4px 5px 4px 5px;
+      margin-bottom: 20px;
+      border: 1px solid rgba(255, 255, 255, 1);
+      border-radius: 10px;
+      /* 业务系统/模块阴影 */
+      box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
+      background: rgba(255, 255, 255, 0.65);
+
+      font-family: YouSheBiaoTiHei;
+      color: rgba(59, 65, 75, 1);
+
+      font-family: YouSheBiaoTiHei;
+      font-style: Regular;
+      font-size: 24px;
+      font-weight: 400;
+      line-height: 31px;
+      letter-spacing: 0px;
+      text-align: center;
+
+      .btn {
+        /* 容器 1464 */
+        width: 391px;
+        height: 47px;
+        /* 自动布局 */
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 10;
+        padding: 8px 66px 8px 66px;
+
+
+      }
+
+      .btn-select {
+        /* 容器 1462 */
+        width: 391px;
+        height: 47px;
+        padding: 8px 66px 8px 66px;
+        box-sizing: border-box;
+        border: 1px solid rgba(174, 214, 255, 1);
+        border-radius: 10px;
+        background: rgba(246, 250, 255, 1);
+      }
+
+      .btn-icon {
+        /* 容器 1554 */
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+      }
+    }
+  }
+
+}
+</style>
\ No newline at end of file