Platform/src/views/project/Project.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from 'vue-router'
import breadcrumbStore from '@/store/modules/breadcrumb'

const route = useRoute()

const { setBreadcrumb } = breadcrumbStore
setBreadcrumb([
  {
    label: '项目列表',
    path: '/project-list'
  },
  {
    label: '莲花路电力迁改项目'
  }
])
</script>

<template>
  <article class="project-page">
    <header
      class="header"
      id="project-header"
      :class="{ 'short-header': route.fullPath.startsWith('/project/summary') }"
    >
      <h1 class="name">莲花路电力迁改项目</h1>
      <el-descriptions :column="4" size="mini">
        <el-descriptions-item label="申请单位：">某某建筑公司</el-descriptions-item>
        <el-descriptions-item label="审批单位：">某某审批单位</el-descriptions-item>
        <el-descriptions-item label="工程类型：">某某类型</el-descriptions-item>
        <el-descriptions-item label="项目编号：">100000</el-descriptions-item>
        <el-descriptions-item label="工程时间：">2022-01-01 至 2023-12-31</el-descriptions-item>
        <el-descriptions-item label="状态：">
          <el-tag size="small">待审批</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="当前流程：">
          <el-tag size="small" type="success">某某步骤</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="工程地址：">珠海市香洲区某某街道某某路100号</el-descriptions-item>
      </el-descriptions>

      <el-affix :offset="64">
        <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>
      </el-affix>
    </header>
    <main class="main">
      <router-view></router-view>
    </main>
  </article>
</template>

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