style(dashboard1): 优化大屏样式与地图交互

- 引入优设标题黑/圆字体并替换顶部标题为整图
- 统一页面边距与卡片背景为半透明渐变模糊
- 底部导航改用整图背景配透明热区
- 新增地图放大预览与机器人光圈扩散动画
- 视频监控改为白光/红外双路独立拉流

src/views/dashboard1/index.vue

@@ -1,33 +1,53 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import SwitchPageBtn from "./components/btn";
-import backgroundVideo from "./assets/循环背景动画.mp4";
+import backgroundImage from "./assets/循环背景.png";
+import bottomNavCenter from "@/assets/底部.png";
+import bottomNavEquipment from "@/assets/底部-1.png";
+import bottomNavVideo from "@/assets/底部-2.png";
+import bottomNavAlarm from "@/assets/底部-3.png";
+import bottomNavPatrol from "@/assets/底部-4.png";
+import bottomNavReport from "@/assets/底部-5.png";
 
 interface DashboardTab {
   id: number;
   text: string;
   path: string;
+  // 热区在底部导航图上的定位（百分比，对应 底部.png 内菜单项位置）
+  left: string;
+  width: string;
 }
 
 const route = useRoute();
 const router = useRouter();
 
-const tabs: Record<"left" | "right", DashboardTab[]> = {
-  left: [
-    { id: 1, text: "监管中心", path: "/dashboard/integrated-center" },
-    { id: 2, text: "设备管理", path: "/dashboard/equipment-management" },
-    { id: 3, text: "视频中心", path: "/dashboard/video-center" },
-  ],
-  right: [
-    { id: 4, text: "告警管理", path: "/dashboard/alarm-management" },
-    { id: 5, text: "巡检记录", path: "/dashboard/patrol-plan" },
-    { id: 6, text: "统计分析", path: "/dashboard/data-report" },
-  ],
-};
+// 底部导航项：left/width 按底部导航图（2715x140）中各菜单的实际像素区间实测换算
+// 对应像素：监管中心 327-717、设备管理 717-1037、视频中心 1041-1337、
+// 告警管理 1344-1669、巡检记录 1676-1989、统计分析 1998-2407
+const tabs: DashboardTab[] = [
+  { id: 1, text: "监管中心", path: "/dashboard/integrated-center", left: "12.0%", width: "14.4%" },
+  { id: 2, text: "设备管理", path: "/dashboard/equipment-management", left: "26.4%", width: "11.8%" },
+  { id: 3, text: "视频中心", path: "/dashboard/video-center", left: "38.3%", width: "10.9%" },
+  { id: 4, text: "告警管理", path: "/dashboard/alarm-management", left: "49.5%", width: "12.0%" },
+  { id: 5, text: "巡检记录", path: "/dashboard/patrol-plan", left: "61.7%", width: "11.6%" },
+  { id: 6, text: "统计分析", path: "/dashboard/data-report", left: "73.6%", width: "15.0%" },
+];
 
 const activeTabId = computed(() => Number(route.meta.tabId) || 1);
 
+// 各菜单对应的底部导航图（图片本身已带当前菜单的高亮效果）
+const bottomNavImages: Record<number, string> = {
+  1: bottomNavCenter, // 监管中心
+  2: bottomNavEquipment, // 设备管理
+  3: bottomNavVideo, // 视频中心
+  4: bottomNavAlarm, // 告警管理
+  5: bottomNavPatrol, // 巡检记录
+  6: bottomNavReport, // 统计分析
+};
+
+// 当前页面高亮的底部导航图
+const bottomNavImage = computed(() => bottomNavImages[activeTabId.value] ?? bottomNavCenter);
+
 function switchPage(tab: DashboardTab) {
   if (route.path !== tab.path) {
     router.push(tab.path);
@@ -37,43 +57,29 @@ function switchPage(tab: DashboardTab) {
 
 <template>
   <div class="dashboard">
-    <video
-      autoplay
-      class="background"
-      loop
-      muted
-      preload="auto"
-      :src="backgroundVideo"
-    ></video>
+    <!-- 背景使用视频首帧截图，避免播放动画 -->
+    <img class="background" :src="backgroundImage" alt="" />
     <div class="main">
-      <div class="btn-group">
-        <div class="left">
-          <SwitchPageBtn
-            v-for="tab in tabs.left"
-            :key="tab.id"
-            :active="activeTabId === tab.id"
-            :text="tab.text"
-            direction="left"
-            @click="switchPage(tab)"
-          />
-        </div>
-        <div class="right">
-          <SwitchPageBtn
-            v-for="tab in tabs.right"
-            :key="tab.id"
-            :active="activeTabId === tab.id"
-            :text="tab.text"
-            direction="right"
-            @click="switchPage(tab)"
-          />
-        </div>
-      </div>
       <div class="content-stage">
         <RouterView v-slot="{ Component, route }">
           <component :is="Component" :key="route.fullPath" />
         </RouterView>
       </div>
     </div>
+    <!-- 底部导航：使用整张导航图，菜单项用透明热区覆盖 -->
+    <nav class="bottom-nav" :style="{ backgroundImage: `url(${bottomNavImage})` }">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="['nav-hit', { active: activeTabId === tab.id }]"
+        :style="{ left: tab.left, width: tab.width }"
+        type="button"
+        :aria-label="tab.text"
+        @click="switchPage(tab)"
+      >
+        <span class="nav-hit-label">{{ tab.text }}</span>
+      </button>
+    </nav>
   </div>
 </template>