feat: 项目详情页结构

src/router/index.ts

@@ -2,6 +2,11 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
 const routes: Array<RouteRecordRaw> = [
     {
+        path: '/login',
+        name: 'Login',
+        component: () => import(/* webpackChunkName: "login" */ '@/views/login/Login.vue'),
+    },
+    {
         path: '/',
         name: 'Main',
         component: () => import(/* webpackChunkName: "main" */ '@/views/main/Main.vue'),
@@ -9,25 +14,48 @@ const routes: Array<RouteRecordRaw> = [
             {
                 path: '',
                 name: 'Dashboard',
-                component: () => import(/* webpackChunkName: "main" */ '@/views/main/dashboard/Dashboard.vue'),
+                component: () => import(/* webpackChunkName: "dashboard" */ '@/views/main/dashboard/Dashboard.vue'),
             },
             {
                 path: '/projects',
                 name: 'ProjectList',
-                component: () => import(/* webpackChunkName: "main" */ '@/views/main/project-list/ProjectList.vue'),
+                component: () => import(/* webpackChunkName: "projects" */ '@/views/main/project-list/ProjectList.vue'),
             },
             {
                 path: '/ration',
                 name: 'Ration',
-                component: () => import(/* webpackChunkName: "main" */ '@/views/main/ration/Ration.vue'),
+                component: () => import(/* webpackChunkName: "ration" */ '@/views/main/ration/Ration.vue'),
+            },
+            {
+                path: '/project',
+                name: 'Project',
+                component: () => import(/* webpackChunkName: "project" */ '@/views/project/Project.vue'),
+                children: [
+                    {
+                        path: '',
+                        name: 'Overview',
+                        component: () => import(/* webpackChunkName: "overview" */ '@/views/project/overview/Overview.vue'),
+                    },
+                    {
+                        path: 'process',
+                        name: 'Process',
+                        component: () => import(/* webpackChunkName: "overview" */ '@/views/project/process/Process.vue'),
+                    },
+                    {
+                        path: 'summary',
+                        name: 'Summary',
+                        component: () => import(/* webpackChunkName: "overview" */ '@/views/project/summary/Summary.vue'),
+                    },
+                    {
+                        path: 'report',
+                        name: 'Report',
+                        component: () => import(/* webpackChunkName: "overview" */ '@/views/project/report/Report.vue'),
+                    },
+                ]
             }
         ]
     },
-    {
-        path: '/login',
-        name: 'Login',
-        component: () => import(/* webpackChunkName: "login" */ '@/views/login/Login.vue'),
-    },
+
 ];
 
 const router = createRouter({

src/views/main/project-list/style.scss

@@ -4,8 +4,7 @@
         height: 50px;
         font-size: 20px;
         padding-left: 10px;
-        border: 1px solid $border-gray;
-        margin-top: 5px;
+        border-bottom: 1px solid $border-gray;
         background-color: #fff;
     }
 
@@ -13,7 +12,7 @@
         @apply flex items-center;
         height: 50px;
         padding: 0 11px;
-        border: 1px solid $border-gray;
+        border-top: 1px solid $border-gray;
         border-bottom: none;
         margin-top: 5px;
         background-color: #fff;
@@ -64,6 +63,8 @@
         width: 100%;
         background-color: #fff;
         border: 1px solid $border-gray;
+        border-left: none;
+        border-right: none;
 
         &::before {
             display: none;

src/views/main/style.scss

@@ -43,7 +43,6 @@
     }
 
     .main {
-        width: calc(100% - 59px);
-        margin: 0 5px;
+        width: calc(100% - 49px);
     }
 }

src/views/project/Project.vue

@@ -0,0 +1,64 @@
+<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>

src/views/project/overview/Overview.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+</script>
+
+<template>
+  <article class="overview-page">项目概况</article>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

src/views/project/process/Process.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+</script>
+
+<template>
+  <article class="process-page">项目流程</article>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

src/views/project/report/Report.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+</script>
+
+<template>
+  <article class="report-page">报表</article>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

src/views/project/style.scss

@@ -0,0 +1,29 @@
+.project-page {
+    .header {
+        @apply flex items-center;
+        height: 50px;
+        padding: 0 10px;
+        border-bottom: 1px solid $border-gray;
+        background-color: #fff;
+
+        .project-name {
+            @apply flex-1 font-bold;
+            font-size: 20px;
+        }
+        .nav {
+            @apply flex h-full items-center;
+            font-size: 18px;
+
+            .item {
+                @apply h-full cursor-pointer;
+                line-height: 50px;
+                margin: 0 10px;
+
+                &.exact-active {
+                    border-bottom: 3px solid #409eff;
+                    color: #409eff;
+                }
+            }
+        }
+    }
+}

src/views/project/summary/Summary.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+</script>
+
+<template>
+  <article class="report-page">项目流汇总</article>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>