添加首页导航栏

src/component/common/InformationBox.vue

@@ -44,7 +44,7 @@ onMounted(() => {
     // 数据转换
     Object.entries(props.data).forEach(([key, value]) => {
         // 判读key是不是存在field中，存在就添加到表格数据，不存在则不添加
-        if (Object.hasOwn(props.field, key)) {
+        if (Object.hasOwn(props.field, key) && value) {
             tableDatas.value.push({
                 title: props.field[key],
                 content: value

src/router/index.ts

@@ -5,18 +5,22 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      redirect: '/rainstorm',
+      name: 'index',
-    },
+      component: () => import('@/views/Index.vue'),
+      redirect: 'rainstorm',
+      children: [
         {
-      path: '/rainstorm',
+          path: 'rainstorm',
           name: 'rainstorm',
           component: () => import('@/views/home/rainstorm/Rainstorm.vue'),
         },
         {
-      path: '/earthquake',
+          path: 'earthquake',
           name: 'earthquake',
           component: () => import('@/views/home/earthquake/Earthquake.vue'),
         }
+      ]
+    }
   ],
 })
 

src/views/Index.vue

@@ -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>