添加首页导航栏

2026-04-12 09:44:32 +08:00
parent 824c980dbc
commit 9d932efaa2
5 changed files with 125 additions and 12 deletions
@@ -0,0 +1,109 @@
+<!-- 入口 -->
+<template>
+    <div class="nav-container">
+        <div class="top-nav" :style="{ 'background-image': `url(${backgroundImage})` }">
+            <div class="logo-img">
+                <img :src="mainLogo" alt="西安应急智慧logo" id="main_logo" />
+            </div>
+            <div class="nav-list">
+                <router-link v-for="(item, index) in topNavMap" :key="index"
+                    :to="{ name: item.name, query: item.query }" class="nav-item"
+                    :class="{ 'active': isActive(item.query.identification) }">
+                    {{ item.title }}
+                </router-link>
+            </div>
+        </div>
+    </div>
+    <div class="content-container">
+        <RouterView />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useViewerStore } from '@/stores/useViewerStore';
+import { RouterView, useRoute } from 'vue-router';
+import mainLogo from '@/assets/images/main-logo.png';
+import backgroundImage from '@/assets/images/background-image.png';
+
+useViewerStore().setViewerLoadingCompleted(true);
+
+const route = useRoute();
+
+const topNavMap = [
+    { title: '暴雨灾害链', name: 'rainstorm', query: { identification: 1 } },
+    { title: '地震灾害链', name: 'earthquake', query: { identification: 2 } },
+    { title: '多灾种灾害链分析', name: 'index', query: { identification: 3 } },
+    { title: '灾害链情景推演', name: 'index', query: { identification: 4 } },
+    { title: '数据管理', name: 'index', query: { identification: 5 } },
+    { title: '文件管理', name: 'index', query: { identification: 6 } }
+];
+
+// 判断当前导航项是否激活
+const isActive = (identification: number) => {
+    const targetId = identification.toString();
+    let currentId = route.query.identification;
+    if(!currentId) return targetId === '1'
+    if (Array.isArray(currentId)) currentId = currentId[0];
+    return currentId === targetId || route.query.identification === targetId;
+};
+</script>
+
+<style scoped>
+.nav-container {
+    height: 50px;
+    width: 100%;
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 10000000;
+}
+
+.top-nav {
+    width: 100%;
+    height: 50px;
+    background-size: cover;
+    background-position: center;
+    padding: 0 40px;
+    box-sizing: border-box;
+    display: flex;
+}
+
+.nav-list {
+    margin-left: 100px;
+    display: flex;
+    align-items: center;
+}
+
+.nav-item {
+    color: white;
+    text-decoration: none;
+    padding: 0 20px;
+    height: 50px;
+    line-height: 50px;
+    transition: background-color 0.3s;
+}
+
+.nav-item:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+.content-container {
+    height: 100vh;
+    width: 100vw;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+#main_logo {
+    height: 50px;
+    margin-right: 100px;
+}
+
+.nav-item.active {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-bottom: 3px solid #409eff;
+    font-weight: bold;
+    box-sizing: border-box;
+}
+</style>