<script setup lang="ts">
import { onMounted, ref } from "vue";
</script>

<template>
  <article class="project-page">
    <header class="header">
      <span class="project-name">市妇幼保健医院新址配套市政道路工程</span>
      <ul class="nav">
        <router-link custom to="/project" v-slot="{ navigate, isExactActive }">
          <li
            class="item overview"
            @click="navigate"
            :class="{ 'exact-active': isExactActive }"
          >
            项目概况
          </li>
        </router-link>
        <router-link
          custom
          to="/project/process"
          v-slot="{ navigate, isExactActive }"
        >
          <li
            class="item process"
            @click="navigate"
            :class="{ 'exact-active': isExactActive }"
          >
            项目流程
          </li>
        </router-link>
        <router-link
          custom
          to="/project/summary"
          v-slot="{ navigate, isExactActive }"
        >
          <li
            class="item summary"
            @click="navigate"
            :class="{ 'exact-active': isExactActive }"
          >
            项目流汇总
          </li>
        </router-link>
        <router-link
          custom
          to="/project/report"
          v-slot="{ navigate, isExactActive }"
        >
          <li
            class="item report"
            @click="navigate"
            :class="{ 'exact-active': isExactActive }"
          >
            报表
          </li>
        </router-link>
      </ul>
    </header>
    <router-view></router-view>
  </article>
</template>

<style lang="scss" src="./style.scss" scoped></style>
