diff --git a/src/assets/images/manage-forms/bg/device-carriage.png b/src/assets/images/manage-forms/bg/device-carriage.png
new file mode 100644
index 0000000..5ccfbb3
Binary files /dev/null and b/src/assets/images/manage-forms/bg/device-carriage.png differ
diff --git a/src/assets/images/smart-parking/arrow/arrow-down.png b/src/assets/images/smart-park/arrow/arrow-down.png
similarity index 100%
rename from src/assets/images/smart-parking/arrow/arrow-down.png
rename to src/assets/images/smart-park/arrow/arrow-down.png
diff --git a/src/assets/images/smart-parking/arrow/arrow-item.png b/src/assets/images/smart-park/arrow/arrow-item.png
similarity index 100%
rename from src/assets/images/smart-parking/arrow/arrow-item.png
rename to src/assets/images/smart-park/arrow/arrow-item.png
diff --git a/src/assets/images/smart-parking/arrow/arrow-left.png b/src/assets/images/smart-park/arrow/arrow-left.png
similarity index 100%
rename from src/assets/images/smart-parking/arrow/arrow-left.png
rename to src/assets/images/smart-park/arrow/arrow-left.png
diff --git a/src/assets/images/smart-parking/arrow/arrow-right.png b/src/assets/images/smart-park/arrow/arrow-right.png
similarity index 100%
rename from src/assets/images/smart-parking/arrow/arrow-right.png
rename to src/assets/images/smart-park/arrow/arrow-right.png
diff --git a/src/assets/images/smart-parking/arrow/arrow-up.png b/src/assets/images/smart-park/arrow/arrow-up.png
similarity index 100%
rename from src/assets/images/smart-parking/arrow/arrow-up.png
rename to src/assets/images/smart-park/arrow/arrow-up.png
diff --git a/src/assets/images/smart-parking/bg/bg-frame-2.png b/src/assets/images/smart-park/bg/bg-frame-2.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-frame-2.png
rename to src/assets/images/smart-park/bg/bg-frame-2.png
diff --git a/src/assets/images/smart-parking/bg/bg-frame-3.png b/src/assets/images/smart-park/bg/bg-frame-3.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-frame-3.png
rename to src/assets/images/smart-park/bg/bg-frame-3.png
diff --git a/src/assets/images/smart-parking/bg/bg-frame.png b/src/assets/images/smart-park/bg/bg-frame.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-frame.png
rename to src/assets/images/smart-park/bg/bg-frame.png
diff --git a/src/assets/images/smart-parking/bg/bg-main-1.png b/src/assets/images/smart-park/bg/bg-main-1.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-main-1.png
rename to src/assets/images/smart-park/bg/bg-main-1.png
diff --git a/src/assets/images/smart-parking/bg/bg-main-center.png b/src/assets/images/smart-park/bg/bg-main-center.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-main-center.png
rename to src/assets/images/smart-park/bg/bg-main-center.png
diff --git a/src/assets/images/smart-parking/bg/bg-main-title.png b/src/assets/images/smart-park/bg/bg-main-title.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-main-title.png
rename to src/assets/images/smart-park/bg/bg-main-title.png
diff --git a/src/assets/images/smart-parking/bg/bg-middle.png b/src/assets/images/smart-park/bg/bg-middle.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-middle.png
rename to src/assets/images/smart-park/bg/bg-middle.png
diff --git a/src/assets/images/smart-parking/bg/bg-road-condition.png b/src/assets/images/smart-park/bg/bg-road-condition.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-road-condition.png
rename to src/assets/images/smart-park/bg/bg-road-condition.png
diff --git a/src/assets/images/smart-parking/bg/bg-side.png b/src/assets/images/smart-park/bg/bg-side.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-side.png
rename to src/assets/images/smart-park/bg/bg-side.png
diff --git a/src/assets/images/smart-parking/bg/bg-suggest.png b/src/assets/images/smart-park/bg/bg-suggest.png
similarity index 100%
rename from src/assets/images/smart-parking/bg/bg-suggest.png
rename to src/assets/images/smart-park/bg/bg-suggest.png
diff --git a/src/assets/images/smart-parking/car/car-1.png b/src/assets/images/smart-park/car/car-1.png
similarity index 100%
rename from src/assets/images/smart-parking/car/car-1.png
rename to src/assets/images/smart-park/car/car-1.png
diff --git a/src/assets/images/smart-parking/car/car-2.png b/src/assets/images/smart-park/car/car-2.png
similarity index 100%
rename from src/assets/images/smart-parking/car/car-2.png
rename to src/assets/images/smart-park/car/car-2.png
diff --git a/src/assets/images/smart-parking/car/car-39.png b/src/assets/images/smart-park/car/car-39.png
similarity index 100%
rename from src/assets/images/smart-parking/car/car-39.png
rename to src/assets/images/smart-park/car/car-39.png
diff --git a/src/assets/styles/views/src/manage-forms.scss b/src/assets/styles/views/src/manage-forms.scss
index a4e27d4..864180b 100644
--- a/src/assets/styles/views/src/manage-forms.scss
+++ b/src/assets/styles/views/src/manage-forms.scss
@@ -27,4 +27,6 @@
     font-size: 12px;
     color: var(--color-info-secondary);
   }
+
+
 }
\ No newline at end of file
diff --git a/src/assets/styles/views/views.scss b/src/assets/styles/views/views.scss
index 2aa73e7..20428f2 100644
--- a/src/assets/styles/views/views.scss
+++ b/src/assets/styles/views/views.scss
@@ -1,2 +1 @@
-@use "@/assets/styles/views/src/smart-parking";
 @use "@/assets/styles/views/src/manage-forms";
diff --git a/src/components/TimeSelect/index.vue b/src/components/TimeSelect/index.vue
new file mode 100644
index 0000000..5ec0536
--- /dev/null
+++ b/src/components/TimeSelect/index.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { TimeSelectType } from '@/components/TimeSelect/type';
+
+defineProps({
+  timeList: Array<TimeSelectType>,
+});
+</script>
+
+<template>
+  <select class="time-select" name="timeSelect">
+    <option v-for="(item, index) in timeList" :key="index" :value="item.value">
+      {{ item.label }}
+    </option>
+  </select>
+</template>
+
+<style lang="scss" scoped>
+.time-select {
+  float: left;
+  width: 100px;
+  height: 26px;
+  font-size: 14px;
+  background: rgba(24, 69, 135, 0.55);
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: rgba(14, 95, 255, 0.38);
+  }
+}
+</style>
diff --git a/src/components/TimeSelect/type.ts b/src/components/TimeSelect/type.ts
new file mode 100644
index 0000000..e81e105
--- /dev/null
+++ b/src/components/TimeSelect/type.ts
@@ -0,0 +1,4 @@
+export interface TimeSelectType {
+  value: string | number;
+  label: string | number;
+}
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index 3ac3a43..874293a 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -17,9 +17,9 @@ const routes: RouteConfigsTable[] = [
   },
 
   {
-    path: '/smart-parking',
+    path: '/smart-park',
     name: 'smartParking',
-    component: () => import('@/views/smart-parking/index.vue'),
+    component: () => import('@/views/smart-park/index.vue'),
     meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
   },
   {
diff --git a/src/views/manage-forms/components/manage-content/index.vue b/src/views/manage-forms/components/manage-content/index.vue
index 419deae..d7e94b3 100644
--- a/src/views/manage-forms/components/manage-content/index.vue
+++ b/src/views/manage-forms/components/manage-content/index.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="content-container">
-    <ul class="card-list">
+  <div class="manage-forms-content-container">
+    <ul class="manage-forms-card-list">
       <li>进出口</li>
     </ul>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.content-container {
+.manage-forms-content-container {
   width: 759px;
   height: 100%;
   background-color: #fff;
diff --git a/src/views/manage-forms/components/manage-left/compontens/enterprise-info.vue b/src/views/manage-forms/components/manage-left/compontens/enterprise-info.vue
new file mode 100644
index 0000000..e42d56d
--- /dev/null
+++ b/src/views/manage-forms/components/manage-left/compontens/enterprise-info.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup></script>
+
+<template>
+  <ul>
+    <li>
+      <h1>报税金额</h1>
+      <p class="c-warning-secondary">¥1551154545</p>
+    </li>
+    <li>
+      <div class="flex-x-between">
+        <div>
+          <h1>企业数量</h1>
+          <p class="c-primary-secondary">783</p>
+        </div>
+        <div>111</div>
+      </div>
+      <div class="enterprise-type">
+        <span class="mr-[13px]">
+          <i class="bg-primary-secondary" />
+          国营企业 345
+        </span>
+        <span>
+          <i class="bg-warning-secondary" />
+          私营企业 345
+        </span>
+      </div>
+    </li>
+    <li>
+      <div class="flex-x-between">
+        <h1>总投资金额</h1>
+        <span class="font-size-[12px]">环比变化</span>
+        <span class="font-size-[12px]">+123%</span>
+      </div>
+      <p class="c-primary-secondary">¥1551154545</p>
+    </li>
+    <li>
+      <div class="flex-x-between">
+        <h1>税收总金额</h1>
+        <span class="font-size-[12px]">环比变化</span>
+        <span class="font-size-[12px]">-123%</span>
+      </div>
+      <p class="c-primary-secondary">¥1551154545</p>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  width: 100%;
+  height: 100%;
+
+  li {
+    //margin: 15px 0 0 0;
+    padding: 9px 16px 0 19px;
+    margin: 15px 0 0 0;
+    width: 242px;
+    height: 124px;
+    background: url('@/assets/images/manage-forms/bg/frame-1.png') no-repeat center;
+    background-size: cover;
+
+    h1 {
+      margin: 0 0 2px 0;
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 30px;
+    }
+  }
+
+  .enterprise-type {
+    width: 100%;
+
+    span {
+      font-size: 13px;
+    }
+
+    i {
+      display: inline-block;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/src/views/manage-forms/components/manage-left/compontens/import-export-value.vue b/src/views/manage-forms/components/manage-left/compontens/import-export-value.vue
new file mode 100644
index 0000000..993ce32
--- /dev/null
+++ b/src/views/manage-forms/components/manage-left/compontens/import-export-value.vue
@@ -0,0 +1,74 @@
+<script lang="tsx" setup>
+import { ref } from 'vue';
+
+import formatter from '@/utils/digte-formatter';
+
+const money = ref('1386114');
+
+/** 显示金额 */
+const displayContent = () => {
+  formatter(money);
+  return (
+    <>
+      <span>¥</span>
+      {money.value.split('').map((item, index) => (
+        <span key={index}>{item}</span>
+      ))}
+    </>
+  );
+};
+</script>
+
+<template>
+  <div class="money-digit">
+    <component :is="displayContent()" />
+  </div>
+  <div>
+    <div class="progress">111</div>
+    <ul class="import-export-value flex-x-between">
+      <li>
+        进口额
+        <i>¥1551154545</i>
+      </li>
+      <li class="thin-line h-[20px]" />
+      <li>
+        <i>¥1551154545</i>
+        出口额
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.money-digit {
+  display: flex;
+  justify-content: end;
+  margin: 26px 0 0 0;
+  color: var(--color-primary-secondary);
+  font-size: 45px;
+  text-align: center;
+
+  span {
+    float: left;
+    margin: 0 3.5px;
+    width: 49px;
+    height: 69px;
+    background: url('@/assets/images/manage-forms/bg/bg-count.png') no-repeat;
+    background-size: cover;
+  }
+}
+
+.progress {
+  margin: 21px 0 0 0;
+}
+
+.import-export-value {
+  font-size: 18px;
+
+  i {
+    font-style: normal;
+    font-size: 20px;
+    color: var(--color-primary-secondary);
+  }
+}
+</style>
diff --git a/src/views/manage-forms/components/manage-left/compontens/manage-device.vue b/src/views/manage-forms/components/manage-left/compontens/manage-device.vue
new file mode 100644
index 0000000..3a71d5b
--- /dev/null
+++ b/src/views/manage-forms/components/manage-left/compontens/manage-device.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+defineProps<{
+  color: PropType<string>;
+  title: PropType<string | number>;
+  description: PropType<string>;
+}>();
+</script>
+
+<template>
+  <div class="manage-device">
+    <h1>{{ title.toString() }}</h1>
+    <p>{{ description }}</p>
+    <div class="device-carriage">
+      <i :style="{ color }" class="i-mdi:electricity" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.manage-device {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 120px;
+
+  h1 {
+    text-align: center;
+    font-size: 24px;
+  }
+
+  p {
+    margin: 0 0 2px 0;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .device-carriage {
+    display: flex;
+    justify-content: center;
+    width: 74px;
+    height: 46px;
+    background: url('@/assets/images/manage-forms/bg/device-carriage.png') no-repeat center;
+    background-size: cover;
+
+    i {
+      //color: #ff7e5f;
+      font-size: 26px;
+    }
+  }
+}
+</style>
diff --git a/src/views/manage-forms/components/manage-left/index.vue b/src/views/manage-forms/components/manage-left/index.vue
index c3e1f12..e384661 100644
--- a/src/views/manage-forms/components/manage-left/index.vue
+++ b/src/views/manage-forms/components/manage-left/index.vue
@@ -1,48 +1,48 @@
 <script lang="tsx" setup>
 import { ref } from 'vue';
 
-import formatter from '@/utils/digte-formatter';
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
+import EnterpriseInfo from '@/views/manage-forms/components/manage-left/compontens/enterprise-info.vue';
+import ImportExportValue from '@/views/manage-forms/components/manage-left/compontens/import-export-value.vue';
+import ManageDevice from '@/views/manage-forms/components/manage-left/compontens/manage-device.vue';
 
-const money = ref('1386114');
+const devices = ref([
+  [
+    { color: '#ff7e5f', title: 738, description: '设备总数1' },
+    { color: '#ff7e5f', title: 738, description: '设备总数' },
+    { color: '#fff', title: 738, description: '设备总数' },
+    { color: '#ff7e5f', title: 738, description: '设备总数' },
+  ],
+  [
+    { color: '#2a65ea', title: '7.3k㎡', description: '设备总数' },
+    { color: '#2a65ea', title: 738, description: '设备总数' },
+    { color: '#fff', title: 738, description: '设备总数' },
+    { color: '#2a65ea', title: 738, description: '设备总数' },
+  ],
+]);
 
-const displayContent = () => {
-  formatter(money);
-  return (
-    <>
-      <span>¥</span>
-      {money.value.split('').map((item, index) => (
-        <span key={index}>{item}</span>
-      ))}
-    </>
-  );
-};
+const timeList = ref<TimeSelectType[]>([
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+]);
 </script>
 
 <template>
   <div class="manage-forms-slide flex-y-between">
     <div class="common-bg money">
-      <div class="title">
-        <h1>园区进出口额</h1>
+      <div class="flex-x-between">
+        <div class="title">
+          <h1>园区进出口额</h1>
+        </div>
+        <div>
+          <span class="all-data">总数据</span>
+          <TimeSelect :time-list="timeList" />
+        </div>
       </div>
 
-      <div class="money-digit">
-        <component :is="displayContent()" />
-      </div>
-
-      <div>
-        <div class="progress">111</div>
-        <ul class="import-export-value flex-x-between">
-          <li>
-            进口额
-            <i>¥1551154545</i>
-          </li>
-          <li class="thin-line h-[20px]" />
-          <li>
-            <i>¥1551154545</i>
-            出口额
-          </li>
-        </ul>
-      </div>
+      <import-export-value />
     </div>
 
     <div class="enterprise-info common-bg">
@@ -53,47 +53,7 @@ const displayContent = () => {
         <span class="title-description">截止时间至2021.12.30</span>
       </div>
 
-      <ul>
-        <li>
-          <h1>报税金额</h1>
-          <p class="c-warning-secondary">¥1551154545</p>
-        </li>
-        <li>
-          <div class="flex-x-between">
-            <div>
-              <h1>企业数量</h1>
-              <p class="c-primary-secondary">783</p>
-            </div>
-            <div>111</div>
-          </div>
-          <div class="enterprise-type">
-            <span class="mr-[13px]">
-              <i class="bg-primary-secondary" />
-              国营企业 345
-            </span>
-            <span>
-              <i class="bg-warning-secondary" />
-              私营企业 345
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="flex-x-between">
-            <h1>总投资金额</h1>
-            <span class="font-size-[12px]">环比变化</span>
-            <span class="font-size-[12px]">+123%</span>
-          </div>
-          <p class="c-primary-secondary">¥1551154545</p>
-        </li>
-        <li>
-          <div class="flex-x-between">
-            <h1>税收总金额</h1>
-            <span class="font-size-[12px]">环比变化</span>
-            <span class="font-size-[12px]">-123%</span>
-          </div>
-          <p class="c-primary-secondary">¥1551154545</p>
-        </li>
-      </ul>
+      <enterprise-info />
     </div>
 
     <div class="common-bg plan">
@@ -103,6 +63,11 @@ const displayContent = () => {
         </div>
         <span class="title-description">截止时间至2021.12.30</span>
       </div>
+      <ul v-for="(parent, pIndex) in devices" :key="pIndex" class="flex-x-around mt-[12px]">
+        <li v-for="(item, index) in parent" :key="index">
+          <manage-device :color="item.color" :description="item.description" :title="item.title" />
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -112,36 +77,16 @@ const displayContent = () => {
   width: 100%;
   height: 246px;
 
-  .money-digit {
-    display: flex;
-    justify-content: end;
-    margin: 26px 0 0 0;
-    color: var(--color-primary-secondary);
-    font-size: 45px;
+  .all-data {
+    float: left;
+    margin: 0 7px 0 0;
+    width: 62px;
+    height: 26px;
+    line-height: 26px;
+    font-size: 14px;
     text-align: center;
-
-    span {
-      float: left;
-      margin: 0 3.5px;
-      width: 49px;
-      height: 69px;
-      background: url('@/assets/images/manage-forms/bg/bg-count.png') no-repeat;
-      background-size: cover;
-    }
-  }
-
-  .progress {
-    margin: 21px 0 0 0;
-  }
-
-  .import-export-value {
-    font-size: 18px;
-
-    i {
-      font-style: normal;
-      font-size: 20px;
-      color: var(--color-primary-secondary);
-    }
+    background: rgba(24, 69, 135, 0.55);
+    color: #fff;
   }
 }
 
@@ -149,49 +94,6 @@ const displayContent = () => {
   padding: 10px 15px;
   width: 530px;
   height: 354px;
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: flex-start;
-    width: 100%;
-    height: 100%;
-
-    li {
-      //margin: 15px 0 0 0;
-      padding: 9px 16px 0 19px;
-      margin: 15px 0 0 0;
-      width: 242px;
-      height: 124px;
-      background: url('@/assets/images/manage-forms/bg/frame-1.png') no-repeat center;
-      background-size: cover;
-
-      h1 {
-        margin: 0 0 2px 0;
-        font-size: 18px;
-      }
-
-      p {
-        font-size: 30px;
-      }
-    }
-
-    .enterprise-type {
-      width: 100%;
-
-      span {
-        font-size: 13px;
-      }
-
-      i {
-        display: inline-block;
-        width: 9px;
-        height: 9px;
-        border-radius: 50%;
-      }
-    }
-  }
 }
 
 .plan {
diff --git a/src/views/smart-park/index.vue b/src/views/smart-park/index.vue
new file mode 100644
index 0000000..c8eec4a
--- /dev/null
+++ b/src/views/smart-park/index.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import SmartPartFooter from '@/views/smart-park/smart-park-footer.vue';
+import SmartPartContent from '@/views/smart-park/smart-park-main/index.vue';
+</script>
+
+<template>
+  <div class="smart-park">
+    <div class="smart-park__arrow left-[38px]">
+      <img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-left.png" />
+    </div>
+    <smart-part-content />
+    <smart-part-footer />
+    <div class="smart-park__arrow right-[38px]">
+      <img alt="左箭头" src="@/assets/images/smart-park/arrow/arrow-right.png" />
+    </div>
+  </div>
+</template>
+
+<style>
+@import 'style.scss';
+</style>
diff --git a/src/views/smart-parking/components/parking-footer/index.vue b/src/views/smart-park/smart-park-footer.vue
similarity index 59%
rename from src/views/smart-parking/components/parking-footer/index.vue
rename to src/views/smart-park/smart-park-footer.vue
index 0578cc7..7902846 100644
--- a/src/views/smart-parking/components/parking-footer/index.vue
+++ b/src/views/smart-park/smart-park-footer.vue
@@ -3,8 +3,12 @@
 <template>
   <footer>
     <ul class="flex-x-around">
-      <li v-for="index in new Array(5)" :key="index" class="rectangle flex-y-center">
-        <img alt="车辆管理" src="@/assets/images/smart-parking/car/car-39.png" />
+      <li
+        v-for="index in new Array(5)"
+        :key="index"
+        class="smart-park__footer--nav-item flex-y-center"
+      >
+        <img alt="车辆管理" src="@/assets/images/smart-park/car/car-39.png" />
         <span class="text-white hover">车辆管理</span>
       </li>
     </ul>
@@ -18,10 +22,11 @@ footer {
   height: 125px;
 }
 
-.rectangle {
+.smart-park__footer--nav-item {
   width: 138px;
   height: 125px;
-  background: #0e094d55;
+  background: rgba(16, 11, 87, 0.55);
+  border-radius: 10px;
 
   img {
     width: 67px;
diff --git a/src/views/smart-parking/components/parking-content/data.ts b/src/views/smart-park/smart-park-main/charts.ts
similarity index 100%
rename from src/views/smart-parking/components/parking-content/data.ts
rename to src/views/smart-park/smart-park-main/charts.ts
diff --git a/src/views/smart-parking/components/parking-content/truck-monitor-center-item.vue b/src/views/smart-park/smart-park-main/components/central-item.vue
similarity index 90%
rename from src/views/smart-parking/components/parking-content/truck-monitor-center-item.vue
rename to src/views/smart-park/smart-park-main/components/central-item.vue
index 0cb5aa2..b4354cf 100644
--- a/src/views/smart-parking/components/parking-content/truck-monitor-center-item.vue
+++ b/src/views/smart-park/smart-park-main/components/central-item.vue
@@ -15,7 +15,7 @@ defineProps({
       <img
         alt="arrow-item"
         class="float-left h-[16px]"
-        src="@/assets/images/smart-parking/arrow/arrow-item.png"
+        src="@/assets/images/smart-park/arrow/arrow-item.png"
       />
     </div>
   </div>
diff --git a/src/views/smart-parking/components/parking-content/truck-monitor-center-percent.vue b/src/views/smart-park/smart-park-main/components/central-percent.vue
similarity index 81%
rename from src/views/smart-parking/components/parking-content/truck-monitor-center-percent.vue
rename to src/views/smart-park/smart-park-main/components/central-percent.vue
index e6a29f2..7886263 100644
--- a/src/views/smart-parking/components/parking-content/truck-monitor-center-percent.vue
+++ b/src/views/smart-park/smart-park-main/components/central-percent.vue
@@ -3,8 +3,8 @@ defineProps({
   percent: Number,
 });
 
-import ArrowDown from '@/assets/images/smart-parking/arrow/arrow-down.png';
-import ArrowUp from '@/assets/images/smart-parking/arrow/arrow-up.png';
+import ArrowDown from '@/assets/images/smart-park/arrow/arrow-down.png';
+import ArrowUp from '@/assets/images/smart-park/arrow/arrow-up.png';
 
 const calPercentItem = (percent: number): Element => {
   return percent > 25 ? (
@@ -22,7 +22,7 @@ const calPercentItem = (percent: number): Element => {
 </script>
 
 <template>
-  <div class="main-center-percent">
+  <div class="smart-park__main-percent-item">
     <div class="flex-y-around mt-[16px] mr-[13px] mb-[20px] ml-[13px]">
       <component :is="calPercentItem(percent)" />
       <span class="font-size-[15px] text-center c-info">环比</span>
@@ -31,7 +31,7 @@ const calPercentItem = (percent: number): Element => {
 </template>
 
 <style lang="scss" scoped>
-.main-center-percent {
+.smart-park__main-percent-item {
   position: absolute;
   width: 86px;
   height: 86px;
diff --git a/src/views/smart-park/smart-park-main/index.vue b/src/views/smart-park/smart-park-main/index.vue
new file mode 100644
index 0000000..7625061
--- /dev/null
+++ b/src/views/smart-park/smart-park-main/index.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import SmartPartCenter from '@/views/smart-park/smart-park-main/smart-park-center.vue';
+import SmartPartSidebarLeft from '@/views/smart-park/smart-park-main/smart-park-sidebar-left.vue';
+import SmartPartSidebarRight from '@/views/smart-park/smart-park-main/smart-park-sidebar-right.vue';
+</script>
+
+<template>
+  <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
+    <smart-part-sidebar-left />
+    <smart-part-center />
+    <smart-part-sidebar-right />
+  </main>
+</template>
diff --git a/src/views/smart-park/smart-park-main/smart-park-center.vue b/src/views/smart-park/smart-park-main/smart-park-center.vue
new file mode 100644
index 0000000..c27b1e2
--- /dev/null
+++ b/src/views/smart-park/smart-park-main/smart-park-center.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import CentralItem from '@/views/smart-park/smart-park-main/components/central-item.vue';
+import CentralPercent from '@/views/smart-park/smart-park-main/components/central-percent.vue';
+</script>
+
+<template>
+  <div class="smart-park__center flex-center">
+    <div class="h-[570px] flex-y-between">
+      <div class="smart-park__center-title">
+        <h1>卡口车辆监控</h1>
+      </div>
+
+      <!-- 中间布局 -->
+      <div class="smart-park__center-inner">
+        <div class="pos-relative">
+          <central-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
+          <central-percent :percent="44" class="top-[73px] left-[193px]" />
+        </div>
+        <div class="pos-relative">
+          <central-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
+          <central-percent :percent="25" class="top-[73px] right-[192px]" />
+        </div>
+        <div class="pos-relative">
+          <central-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
+          <central-percent :percent="25" class="top-[40px] left-[193px]" />
+        </div>
+        <div class="pos-relative">
+          <central-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
+          <central-percent :percent="44" class="top-[40px] left-[66px]" />
+        </div>
+
+        <div class="smart-park__center-content">
+          <div class="smart-park__center-content-headline flex-center">
+            <h1>智能管控</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.smart-park__center {
+  width: 824px;
+  height: 650px;
+  background: url('@/assets/images/smart-park/bg/bg-middle.png') no-repeat center;
+  background-size: cover;
+
+  // 中间部分标题
+  &-title {
+    height: 61px;
+    background: url('@/assets/images/smart-park/bg/bg-main-title.png') no-repeat center;
+    background-size: cover;
+
+    h1 {
+      color: #fff;
+      font-size: 22px;
+      text-align: center;
+    }
+  }
+
+  // 中间部分四个部分
+  &-inner {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    position: relative;
+    margin: 28px 0 77px 0;
+    width: 666px;
+    height: 400px;
+    background: url('@/assets/images/smart-park/bg/bg-main-1.png') no-repeat center;
+    background-size: cover;
+  }
+
+  // 中心智能管控
+  &-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 138px;
+    height: 138px;
+
+    &-headline {
+      width: 100%;
+      height: 100%;
+      background: url('@/assets/images/smart-park/bg/bg-main-center.png');
+      background-size: cover;
+      font-size: 19px;
+      animation: rotate 30s linear infinite;
+
+      h1 {
+        width: 53px;
+        color: var(--color-primary-secondary);
+        text-align: center;
+        animation: rotate-reverse 30s linear infinite;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/smart-parking/components/parking-content/road-condition.vue b/src/views/smart-park/smart-park-main/smart-park-sidebar-left.vue
similarity index 51%
rename from src/views/smart-parking/components/parking-content/road-condition.vue
rename to src/views/smart-park/smart-park-main/smart-park-sidebar-left.vue
index c78e479..7503486 100644
--- a/src/views/smart-parking/components/parking-content/road-condition.vue
+++ b/src/views/smart-park/smart-park-main/smart-park-sidebar-left.vue
@@ -1,43 +1,43 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="smart-parking-common-card-container">
+  <div class="smart-park__sidebar smart-park__sidebar--left">
     <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
       <!-- 路况 -->
-      <div class="smart-parking-common-title">
-        <h1 class="c-white">实时道路情况</h1>
+      <div class="smart-park__sidebar-title">
+        <h1>实时道路情况</h1>
       </div>
 
       <!-- 汽车列表 -->
       <ul class="mt-[32px]">
-        <li class="car-item flex-x-around">
-          <img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
-          <p class="c-white">入卡口（西北门）</p>
+        <li class="smart-park__sidebar--left-item flex-x-around">
+          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <p>入卡口（西北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
-        <li class="car-item flex-x-around">
-          <img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
-          <p class="c-white">入卡口（东北门）</p>
+        <li class="smart-park__sidebar--left-item flex-x-around">
+          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <p>入卡口（东北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
-        <li class="car-item flex-x-around">
-          <img alt="car-1" src="@/assets/images/smart-parking/car/car-2.png" />
-          <p class="c-white">入卡口（东北门）</p>
+        <li class="smart-park__sidebar--left-item flex-x-around">
+          <img alt="car-1" src="@/assets/images/smart-park/car/car-2.png" />
+          <p>入卡口（东北门）</p>
           <span class="dashed-circle c-warning border-b-warning">拥堵</span>
         </li>
-        <li class="car-item flex-x-around">
-          <img alt="car-1" src="@/assets/images/smart-parking/car/car-1.png" />
-          <p class="c-white">入卡口（东南门）</p>
+        <li class="smart-park__sidebar--left-item flex-x-around">
+          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <p>入卡口（东南门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
       </ul>
 
       <!-- 建议 -->
-      <div class="suggest c-white">
+      <div class="smart-park__sidebar--left-suggest">
         <h5>车流量建议</h5>
         <p>
           高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
-          <span class="c-warning-secondary">可建议XXX企业向后延迟15min错峰入园。</span>
+          <span>可建议XXX企业向后延迟15min错峰入园。</span>
           高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
         </p>
       </div>
@@ -46,15 +46,15 @@
 </template>
 
 <style lang="scss" scoped>
-.smart-parking-common-card-container {
+.smart-park__sidebar--left {
   margin: 0 20px 0 0;
   transform: rotateY(180deg);
 
-  .car-item {
+  &-item {
     width: 330px;
     height: 61px;
     margin: 0 0 9px 0;
-    background: url('@/assets/images/smart-parking/bg/bg-frame.png') no-repeat center;
+    background: url('@/assets/images/smart-park/bg/bg-frame.png') no-repeat center;
     background-size: cover;
 
     img {
@@ -62,18 +62,24 @@
     }
 
     p {
+      color: #fff;
       font-size: 14px;
     }
   }
 
-  .suggest {
+  &-suggest {
     margin: 24px 0 0 0;
     padding: 15px 14px 17px 20px;
     width: 330px;
     height: 157px;
+    color: #fff;
     font-size: 14px;
-    background: url('@/assets/images/smart-parking/bg/bg-suggest.png') no-repeat center;
+    background: url('@/assets/images/smart-park/bg/bg-suggest.png') no-repeat center;
     background-size: cover;
+
+    span {
+      color: var(--color-warning-secondary);
+    }
   }
 }
 </style>
diff --git a/src/views/smart-parking/components/parking-content/traffic-overview.vue b/src/views/smart-park/smart-park-main/smart-park-sidebar-right.vue
similarity index 52%
rename from src/views/smart-parking/components/parking-content/traffic-overview.vue
rename to src/views/smart-park/smart-park-main/smart-park-sidebar-right.vue
index 69dab8d..b88cb41 100644
--- a/src/views/smart-parking/components/parking-content/traffic-overview.vue
+++ b/src/views/smart-park/smart-park-main/smart-park-sidebar-right.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/smart-parking/components/parking-content/data';
+import { renderEcharts } from '@/views/smart-park/smart-park-main/charts';
 
 const weekDataChart = ref<HTMLDivElement>();
 
@@ -11,35 +11,35 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="smart-parking-common-card-container ml-[20px]">
+  <div class="smart-park__sidebar ml-[20px]">
     <div class="pt-[55px] pl-[25px]">
       <!-- 路况 -->
-      <div class="smart-parking-common-title">
-        <h1 class="c-white">近7天车流量概览</h1>
+      <div class="smart-park__sidebar-title">
+        <h1>近7天车流量概览</h1>
       </div>
 
       <!-- 汽车列表 -->
       <ul class="flex-x-around mt-[32px] w-[331px]">
-        <li class="detail-item flex-y-between">
-          <span class="bg-frame c-white">最高进园车流量</span>
-          <span class="bg-frame c-primary-secondary">897</span>
+        <li class="smart-park__sidebar-flow-item flex-y-between">
+          <span>最高进园车流量</span>
+          <span>897</span>
         </li>
-        <li class="detail-item flex-y-between">
-          <span class="bg-frame c-white">最高进园车流量</span>
-          <span class="bg-frame c-primary-secondary">494</span>
+        <li class="smart-park__sidebar-flow-item flex-y-between">
+          <span>最高进园车流量</span>
+          <span>494</span>
         </li>
       </ul>
 
       <!-- 七天数据 -->
       <div class="w-[325px] h-[205px]">
-        <div ref="weekDataChart" class="week-data" />
+        <div ref="weekDataChart" class="smart-park__sidebar-week-data" />
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.detail-item {
+.smart-park__sidebar-flow-item {
   width: 162px;
   height: 111px;
   text-align: center;
@@ -47,23 +47,25 @@ onMounted(() => {
   span:nth-child(1) {
     width: 161px;
     height: 40px;
+    color: #fff;
     line-height: 40px;
     font-size: 16px;
-    background: url('@/assets/images/smart-parking/bg/bg-frame-2.png') no-repeat center;
+    background: url('@/assets/images/smart-park/bg/bg-frame-2.png') no-repeat center;
     background-size: cover;
   }
 
   span:nth-child(2) {
     width: 161px;
     height: 66px;
+    color: var(--color-primary-secondary);
     line-height: 66px;
     font-size: 34px;
-    background: url('@/assets/images/smart-parking/bg/bg-frame-3.png') no-repeat center;
+    background: url('@/assets/images/smart-park/bg/bg-frame-3.png') no-repeat center;
     background-size: cover;
   }
 }
 
-.week-data {
+.smart-park__sidebar-week-data {
   margin: 71px 0 0 0;
   width: 100%;
   height: 100%;
diff --git a/src/assets/styles/views/src/smart-parking.scss b/src/views/smart-park/style.scss
similarity index 59%
rename from src/assets/styles/views/src/smart-parking.scss
rename to src/views/smart-park/style.scss
index 70423a6..fb66070 100644
--- a/src/assets/styles/views/src/smart-parking.scss
+++ b/src/views/smart-park/style.scss
@@ -1,8 +1,8 @@
-.smart-parking {
+.smart-park {
   width: 100%;
   height: 100%;
 
-  .arrow {
+  &__arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -13,21 +13,22 @@
     }
   }
 
-  .smart-parking-common-card-container {
+  &__sidebar {
     width: 380px;
     height: 650px;
-    background: url('@/assets/images/smart-parking/bg/bg-side.png') no-repeat center;
+    background: url('@/assets/images/smart-park/bg/bg-side.png') no-repeat center;
     background-size: cover;
     transition: transform 0.8s;
     transform-style: preserve-3d;
 
-    .smart-parking-common-title {
+    .smart-park__sidebar-title {
       width: 218px;
       height: 59px;
-      background: url('@/assets/images/smart-parking/bg/bg-road-condition.png') no-repeat center;
+      background: url('@/assets/images/smart-park/bg/bg-road-condition.png') no-repeat center;
       background-size: cover;
 
       h1 {
+        color: #fff;
         font-size: 18px;
       }
     }
diff --git a/src/views/smart-parking/components/parking-content/index.vue b/src/views/smart-parking/components/parking-content/index.vue
deleted file mode 100644
index d8375b7..0000000
--- a/src/views/smart-parking/components/parking-content/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts" setup>
-import RoadCondition from '@/views/smart-parking/components/parking-content/road-condition.vue';
-import TrafficOverview from '@/views/smart-parking/components/parking-content/traffic-overview.vue';
-import TruckMonitor from '@/views/smart-parking/components/parking-content/truck-monitor.vue';
-</script>
-
-<template>
-  <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
-    <road-condition />
-    <truck-monitor />
-    <traffic-overview />
-  </main>
-</template>
diff --git a/src/views/smart-parking/components/parking-content/truck-monitor.vue b/src/views/smart-parking/components/parking-content/truck-monitor.vue
deleted file mode 100644
index a2ea50d..0000000
--- a/src/views/smart-parking/components/parking-content/truck-monitor.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script lang="ts" setup>
-import TruckMonitorCenterItem from '@/views/smart-parking/components/parking-content/truck-monitor-center-item.vue';
-import TruckMonitorCenterPercent from '@/views/smart-parking/components/parking-content/truck-monitor-center-percent.vue';
-</script>
-
-<template>
-  <div class="main-center flex-center">
-    <div class="h-[570px] flex-y-between">
-      <div class="main-center-title">
-        <h1 class="c-white">卡口车辆监控</h1>
-      </div>
-
-      <!-- 中间布局 -->
-      <div class="main-inner">
-        <div class="pos-relative">
-          <truck-monitor-center-item
-            :count="45"
-            class="top-[37px] left-[40px] w-[175px]"
-            door="西北门"
-          />
-          <truck-monitor-center-percent :percent="44" class="top-[73px] left-[193px]" />
-        </div>
-        <div class="pos-relative">
-          <truck-monitor-center-item
-            :count="67"
-            class="top-[37px] left-[120px] w-[175px]"
-            door="东北门"
-          />
-          <truck-monitor-center-percent :percent="25" class="top-[73px] right-[192px]" />
-        </div>
-        <div class="pos-relative">
-          <truck-monitor-center-item
-            :count="345"
-            class="top-[45px] left-[34px] w-[175px]"
-            door="西南门"
-          />
-          <truck-monitor-center-percent :percent="25" class="top-[40px] left-[193px]" />
-        </div>
-        <div class="pos-relative">
-          <truck-monitor-center-item
-            :count="145"
-            class="top-[45px] left-[130px] w-[175px]"
-            door="东南门"
-          />
-          <truck-monitor-center-percent :percent="44" class="top-[40px] left-[66px]" />
-        </div>
-
-        <div class="main-inner-center">
-          <div class="main-inner-middle flex-center">
-            <h1 class="c-primary-secondary">智能管控</h1>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.main-center {
-  width: 824px;
-  height: 650px;
-  background: url('@/assets/images/smart-parking/bg/bg-middle.png') no-repeat center;
-  background-size: cover;
-}
-
-// 中间部分标题
-.main-center-title {
-  height: 61px;
-  background: url('@/assets/images/smart-parking/bg/bg-main-title.png') no-repeat center;
-  background-size: cover;
-
-  h1 {
-    font-size: 22px;
-    text-align: center;
-  }
-}
-
-// 中间部分四个部分
-.main-inner {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  position: relative;
-  margin: 28px 0 77px 0;
-  width: 666px;
-  height: 400px;
-  background: url('@/assets/images/smart-parking/bg/bg-main-1.png') no-repeat center;
-  background-size: cover;
-
-  // 中心智能管控
-  .main-inner-center {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 138px;
-    height: 138px;
-
-    .main-inner-middle {
-      width: 100%;
-      height: 100%;
-      background: url('@/assets/images/smart-parking/bg/bg-main-center.png');
-      background-size: cover;
-      font-size: 19px;
-      animation: rotate 30s linear infinite;
-    }
-
-    h1 {
-      width: 53px;
-      text-align: center;
-      animation: rotate-reverse 30s linear infinite;
-    }
-  }
-}
-</style>
diff --git a/src/views/smart-parking/index.vue b/src/views/smart-parking/index.vue
deleted file mode 100644
index f2a8d43..0000000
--- a/src/views/smart-parking/index.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import ParkingContent from '@/views/smart-parking/components/parking-content/index.vue';
-import ParkingFooter from '@/views/smart-parking/components/parking-footer/index.vue';
-</script>
-
-<template>
-  <div class="smart-parking">
-    <div class="arrow left-[38px]">
-      <img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-left.png" />
-    </div>
-    <parking-content />
-    <parking-footer />
-    <div class="arrow right-[38px]">
-      <img alt="左箭头" src="@/assets/images/smart-parking/arrow/arrow-right.png" />
-    </div>
-  </div>
-</template>
diff --git a/src/views/welcome/components/welcome-content/index.vue b/src/views/welcome/components/welcome-content/index.vue
index 92f4b52..9b73a22 100644
--- a/src/views/welcome/components/welcome-content/index.vue
+++ b/src/views/welcome/components/welcome-content/index.vue
@@ -3,7 +3,7 @@ import PageList from '@/views/welcome/components/welcome-content/page-list.vue';
 </script>
 
 <template>
-  <div class="flex-y-around welcome">
+  <div class="welcome flex-y-around">
     <div class="mt-[158px]">
       <p class="c-white">
         <img alt="welcome" src="@/assets/images/welcome/icon/welcome.png" />
diff --git a/src/views/welcome/components/welcome-content/page-list.vue b/src/views/welcome/components/welcome-content/page-list.vue
index 338c74b..12287c6 100644
--- a/src/views/welcome/components/welcome-content/page-list.vue
+++ b/src/views/welcome/components/welcome-content/page-list.vue
@@ -6,7 +6,7 @@ const router = useRouter();
 
 <template>
   <ul class="page-list flex-x-between">
-    <li class="flex-y-center" @click="router.push('/smart-parking')">
+    <li class="flex-y-center" @click="router.push('/smart-park')">
       <img alt="car" src="@/assets/images/welcome/icon/center/car.png" />
       <span>智慧停车</span>
     </li>