feat: 园区布局完成

src/layout/index.vue

@@ -27,4 +27,9 @@ const route = useRoute();
   background: url('@/assets/images/bg/bg-layout.png') no-repeat center;
   background-size: cover;
 }
+
+main {
+  width: 100%;
+  height: calc(100% - 108px);
+}
 </style>

src/router/index.ts

@@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [...remaining, ...error];
 const router = createRouter({
   history: createWebHashHistory(),
   routes,
-  scrollBehavior: () => ({ x: 0, y: 0, behavior: 'smooth' }),
+  scrollBehavior: () => ({ top: 0, behavior: 'smooth' }),
 });
 
 /** 全局注册 router */

src/router/modules/home.ts

@@ -4,7 +4,7 @@ const routes: RouteConfigsTable[] = [
   {
     path: '/welcome',
     name: 'welcome',
-    component: () => import('@/views/home/index.vue'),
+    component: () => import('@/views/welcome/index.vue'),
     meta: { transition: 'fade', title: '后台管理系统大标题' },
   },
   {
@@ -13,6 +13,12 @@ const routes: RouteConfigsTable[] = [
     component: () => import('@/views/smart-parking/index.vue'),
     meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
   },
+  {
+    path: '/manage-forms',
+    name: 'manageForms',
+    component: () => import('@/views/manage-forms/index.vue'),
+    meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
+  },
 ];
 
 export default routes;

src/views/manage-forms/components/manage-content/index.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="content-container">
+    <ul class="card-list">
+      <li>进出口</li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content-container {
+  width: 759px;
+  height: 100%;
+  background-color: #fff;
+}
+</style>

src/views/manage-forms/components/manage-left/index.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="manage-container flex-y-between">
+    <div class="money">
+      <h1>园区进出口金额</h1>
+    </div>
+
+    <div class="enterprise-info">
+      <h1>园区进出口金额</h1>
+    </div>
+
+    <div class="plan">
+      <h1>园区进出口金额</h1>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.manage-container {
+  width: 530px;
+  height: 100%;
+
+  .money {
+    width: 100%;
+    height: 246px;
+    background: mediumpurple;
+  }
+
+  .enterprise-info {
+    width: 530px;
+    height: 354px;
+    background: mediumpurple;
+  }
+
+  .plan {
+    width: 530px;
+    height: 294px;
+    background: mediumpurple;
+  }
+}
+</style>

src/views/manage-forms/components/manage-right/index.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="manage-container flex-y-between">
+    <div class="money">
+      <h1>园区进出口金额</h1>
+    </div>
+
+    <div class="enterprise-info">
+      <h1>园区进出口金额</h1>
+    </div>
+
+    <div class="plan">
+      <h1>园区进出口金额</h1>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.manage-container {
+  width: 530px;
+  height: 100%;
+
+  .money {
+    width: 100%;
+    height: 246px;
+    background: mediumpurple;
+  }
+
+  .enterprise-info {
+    width: 530px;
+    height: 354px;
+    background: mediumpurple;
+  }
+
+  .plan {
+    width: 530px;
+    height: 294px;
+    background: mediumpurple;
+  }
+}
+</style>

src/views/manage-forms/index.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import MangeContent from '@/views/manage-forms/components/manage-content/index.vue';
+import ManageLeft from '@/views/manage-forms/components/manage-left/index.vue';
+import ManageRight from '@/views/manage-forms/components/manage-right/index.vue';
+</script>
+
+<template>
+  <div class="manage flex-x-between">
+    <manage-left />
+    <mange-content />
+    <manage-right />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.manage {
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+  background: #20a0ff;
+}
+</style>

src/views/management-forms/index.vue

@@ -1,5 +0,0 @@
-<script lang="ts" setup></script>
-
-<template></template>
-
-<style lang="scss" scoped></style>

src/views/smart-parking/components/parking-content/index.vue

@@ -5,7 +5,7 @@ import TruckMonitor from '@/views/smart-parking/components/parking-content/truck
 </script>
 
 <template>
-  <main class="mt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
+  <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
     <road-condition />
     <truck-monitor />
     <traffic-overview />

src/views/welcome/components/welcome-content/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import PageList from '@/views/home/layout-content/page-list.vue';
+import PageList from '@/views/welcome/components/welcome-content/page-list.vue';
 </script>
 
 <template>

src/views/welcome/components/welcome-content/page-list.vue

@@ -7,23 +7,23 @@ const router = useRouter();
 <template>
   <ul class="page-list flex-x-between">
     <li class="flex-y-center" @click="router.push('/smart-parking')">
-      <img alt="car" src="../../../assets/images/icon/smart/car.png" />
+      <img alt="car" src="@/assets/images/icon/smart/car.png" />
       <span>智慧停车</span>
     </li>
     <li class="flex-y-center">
-      <img alt="distribution" src="../../../assets/images/icon/smart/distribution.png" />
+      <img alt="distribution" src="@/assets/images/icon/smart/distribution.png" />
       <span>智慧配送</span>
     </li>
     <li class="flex-y-center">
-      <img alt="muck" src="../../../assets/images/icon/smart/muck.png" />
+      <img alt="muck" src="@/assets/images/icon/smart/muck.png" />
       <span>智慧渣土</span>
     </li>
     <li class="flex-y-center">
-      <img alt="clean-city" src="../../../assets/images/icon/smart/clean-city.png" />
+      <img alt="clean-city" src="@/assets/images/icon/smart/clean-city.png" />
       <span>智慧洁城</span>
     </li>
     <li class="flex-y-center">
-      <img alt="lamp" src="../../../assets/images/icon/smart/lamp.png" />
+      <img alt="lamp" src="@/assets/images/icon/smart/lamp.png" />
       <span>智慧路灯</span>
     </li>
   </ul>

src/views/welcome/components/welcome-footer/index.vue

@@ -5,8 +5,8 @@ const router = useRouter();
 
 const list = [
   { icon: 'material-symbols:home-and-garden', name: '园区', target: '/' },
-  { icon: 'ri:community-fill', name: '园区', target: '/' },
+  { icon: 'fa:building', name: '园区', target: '/' },
-  { icon: 'ri:community-fill', name: '园区', target: '/' },
+  { icon: 'fa-solid:chart-line', name: '经营', target: '/manage-forms' },
   { icon: 'ri:community-fill', name: '园区', target: '/' },
 ];
 </script>
@@ -14,7 +14,7 @@ const list = [
 <template>
   <footer class="flex-y-around">
     <ul class="flex-x-between">
-      <li v-for="(item, index) in list" :key="index">
+      <li v-for="(item, index) in list" :key="index" @click="router.push(item.target)">
         <i :class="`i-${item.icon}`" />
         <span class="hover">{{ item.name }}</span>
       </li>

src/views/welcome/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import LayoutContent from '@/views/home/layout-content/index.vue';
+import LayoutContent from '@/views/welcome/components/welcome-content/index.vue';
-import LayoutFooter from '@/views/home/layout-footer/index.vue';
+import LayoutFooter from '@/views/welcome/components/welcome-footer/index.vue';
 </script>
 
 <template>