zhaojunlong
37c67ce25b
- 引入优设标题黑/圆字体并替换顶部标题为整图 - 统一页面边距与卡片背景为半透明渐变模糊 - 底部导航改用整图背景配透明热区 - 新增地图放大预览与机器人光圈扩散动画 - 视频监控改为白光/红外双路独立拉流
89 lines
3.3 KiB
Vue
89 lines
3.3 KiB
Vue
<script lang="ts" setup>
|
||
import { computed } from "vue";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
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();
|
||
|
||
// 底部导航项：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);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="dashboard">
|
||
<!-- 背景使用视频首帧截图，避免播放动画 -->
|
||
<img class="background" :src="backgroundImage" alt="" />
|
||
<div class="main">
|
||
<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>
|
||
|
||
<style lang="less">
|
||
@import "./index";
|
||
</style>
|