pendulum/web/src/views/Enterprise/Emergency/index.vue

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()

const subMenuItems = [
  { path: '/enterprise/emergency/flood', title: '洪涝灾害救援' },
  { path: '/enterprise/emergency/forest-fire', title: '森林火灾救援' },
  { path: '/enterprise/emergency/earthquake', title: '地震与地质灾害救援' },
  { path: '/enterprise/emergency/mountain-rescue', title: '山岳搜救' }
]

const currentPath = computed(() => route.path)
</script>

<template>
  <div class="emergency-view">
    <div class="header">
      <h1>应急救援解决方案</h1>
      <p class="description">为应急救援提供高效、精准的数字化支持</p>
    </div>

    <!-- 子菜单导航 -->
    <nav class="sub-nav">
      <router-link
        v-for="item in subMenuItems"
        :key="item.path"
        :to="item.path"
        class="nav-item"
        :class="{ active: currentPath === item.path }"
      >
        {{ item.title }}
      </router-link>
    </nav>

    <!-- 子路由视图 -->
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/assets/styles/variables' as v;
@use '@/assets/styles/mixins' as m;

.emergency-view {
  padding: v.$spacing-xl v.$spacing-xl * 2;

  .header {
    text-align: center;
    margin-bottom: v.$spacing-xl * 2;

    h1 {
      font-size: v.$font-size-xxl;
      color: v.$text-primary;
      margin-bottom: v.$spacing-md;
    }

    .description {
      font-size: v.$font-size-lg;
      color: v.$text-secondary;
    }
  }

  .sub-nav {
    display: flex;
    justify-content: center;
    gap: v.$spacing-md;
    margin-bottom: v.$spacing-xl;
    padding: v.$spacing-md;
    background-color: v.$background-light;
    border-radius: v.$border-radius-lg;
    box-shadow: v.$shadow-sm;

    .nav-item {
      padding: v.$spacing-sm v.$spacing-md;
      color: v.$text-primary;
      text-decoration: none;
      border-radius: v.$border-radius-md;
      transition: all v.$transition-fast;

      &:hover {
        background-color: rgba(v.$primary-color, 0.1);
        color: v.$primary-color;
      }

      &.active {
        background-color: v.$primary-color;
        color: white;
      }
    }
  }

  .content {
    max-width: 1200px;
    margin: 0 auto;
  }
}
</style>