refactor: 主页等内容优化

src/assets/styles/global.scss

@@ -1,9 +1,8 @@
 @use "animations/animations";
 @use "common/common";
-@use "views/views";
 
 :root {
-  --colot-primary: #027AFF;
+  --color-primary: #027AFF;
   --color-primary-secondary: #00FFFF;
   --color-info: #7CC1FF;
   --color-info-secondary: #707070;

src/assets/styles/views/src/manage-forms.scss

@@ -1,32 +0,0 @@
-.manage-forms {
-  padding: 19px 25px;
-  width: 100%;
-  height: 100%;
-
-  .manage-forms-slide {
-    width: 530px;
-    height: 100%;
-    color: #fff;
-  }
-
-  .common-bg {
-    padding: 10px 15px;
-    background: rgba(14, 95, 255, 0.20);
-  }
-
-  .title {
-    width: 172px;
-    height: 42px;
-    font-size: 22px;
-    color: #fff;
-    background: url('@/assets/images/manage-forms/bg/bg-frame-4.png') no-repeat;
-    background-size: cover;
-  }
-
-  .title-description {
-    font-size: 12px;
-    color: var(--color-info-secondary);
-  }
-
-
-}

src/assets/styles/views/views.scss

@@ -1 +0,0 @@
-@use "@/assets/styles/views/src/manage-forms";

src/components/CommonHeader/CommonHeader.vue

@@ -26,11 +26,11 @@ onMounted(() => {
 
 <template>
   <header>
-    <div class="time c-primary">{{ time }}</div>
+    <div class="header-time c-primary">{{ time }}</div>
 
-    <div class="title">
+    <div class="header-title">
-      <h1 class="c-white">{{ route.meta.title }}</h1>
+      <h1>{{ route.meta.title }}</h1>
-      <h2 class="c-primary-secondary">{{ route.meta.subtitle }}</h2>
+      <h2>{{ route.meta.subtitle }}</h2>
       <img
         alt="icon-setting"
         class="ml-[-284px]"
@@ -52,14 +52,14 @@ header {
   background-size: cover;
 }
 
-.time {
+.header-time {
   position: absolute;
   margin: 0 0 0 41px;
   line-height: 60px;
   font-size: 14px;
 }
 
-.title {
+.header-title {
   position: relative;
   text-align: center;
 
@@ -76,11 +76,13 @@ header {
   }
 
   h1 {
+    color: #fff;
     font-size: 42px;
     line-height: 60px;
   }
 
   h2 {
+    color: var(--color-primary-secondary);
     font-size: 24px;
     line-height: 45px;
     font-weight: lighter;

src/components/CommonHeader/HeaderBarOp.vue

@@ -2,12 +2,12 @@
 
 <template>
   <div class="bar-op">
-    <ul class="flex-x-around">
+    <ul>
       <li><img alt="icon-1" src="@/assets/images/common/icon/icon-1.png" /></li>
       <li><img alt="icon-2" src="@/assets/images/common/icon/icon-2.png" /></li>
       <li><img alt="icon-3" src="@/assets/images/common/icon/icon-3.png" /></li>
     </ul>
-    <span class="hover c-primary">王菠萝</span>
+    <span class="hover">王菠萝</span>
   </div>
 </template>
 
@@ -21,6 +21,9 @@
   height: 36px;
 
   ul {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
     float: left;
     width: 148px;
 
@@ -30,6 +33,7 @@
   }
 
   span {
+    color: var(--color-primary);
     float: left;
     font-size: 12px;
     cursor: pointer;

src/components/CommonHeader/LayoutHeader.vue

@@ -9,21 +9,22 @@ const route = useRoute();
 
 <template>
   <header>
-    <div class="title">
+    <div class="header-title">
-      <h1 class="c-white">{{ route.meta.title }}</h1>
+      <h1>{{ route.meta.title }}</h1>
       <BarOp />
     </div>
   </header>
 </template>
 
 <style lang="scss" scoped>
-.title {
+.header-title {
   width: 100%;
   height: 108px;
   background: url('@/assets/images/common/header/bg-layout-header.png') no-repeat center;
   background-size: cover;
 
   h1 {
+    color: #fff;
     text-align: center;
     line-height: 100px;
     font-size: 42px;

src/router/modules/home.ts

@@ -10,9 +10,9 @@ const routes: RouteConfigsTable[] = [
   },
 
   {
-    path: '/manage-forms',
+    path: '/business-supervision',
     name: 'manageForms',
-    component: () => import('@/views/manage-forms/index.vue'),
+    component: () => import('@/views/business-supervision/index.vue'),
     meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
   },
 

src/views/business-supervision/business-supervision-left/compontens/enterprise-info.vue

@@ -54,12 +54,11 @@ ul {
   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: url('@/assets/images/business-supervision/bg/frame-1.png') no-repeat center;
     background-size: cover;
 
     h1 {

src/views/business-supervision/business-supervision-left/compontens/import-export-value.vue

@@ -53,7 +53,7 @@ const displayContent = () => {
     margin: 0 3.5px;
     width: 49px;
     height: 69px;
-    background: url('@/assets/images/manage-forms/bg/bg-count.png') no-repeat;
+    background: url('@/assets/images/business-supervision/bg/bg-count.png') no-repeat;
     background-size: cover;
   }
 }

src/views/business-supervision/business-supervision-left/compontens/manage-device.vue

@@ -41,7 +41,7 @@ defineProps<{
     justify-content: center;
     width: 74px;
     height: 46px;
-    background: url('@/assets/images/manage-forms/bg/device-carriage.png') no-repeat center;
+    background: url('@/assets/images/business-supervision/bg/device-carriage.png') no-repeat center;
     background-size: cover;
 
     i {

src/views/business-supervision/business-supervision-left/index.vue

@@ -3,11 +3,11 @@ import { ref } from 'vue';
 
 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 EnterpriseInfo from '@/views/business-supervision/business-supervision-left/compontens/enterprise-info.vue';
-import ImportExportValue from '@/views/manage-forms/components/manage-left/compontens/import-export-value.vue';
+import ImportExportValue from '@/views/business-supervision/business-supervision-left/compontens/import-export-value.vue';
-import ManageDevice from '@/views/manage-forms/components/manage-left/compontens/manage-device.vue';
+import ManageDevice from '@/views/business-supervision/business-supervision-left/compontens/manage-device.vue';
 
-const devices = ref([
+const devices = ref<any>([
   [
     { color: '#ff7e5f', title: 738, description: '设备总数1' },
     { color: '#ff7e5f', title: 738, description: '设备总数' },
@@ -30,14 +30,14 @@ const timeList = ref<TimeSelectType[]>([
 </script>
 
 <template>
-  <div class="manage-forms-slide flex-y-between">
+  <div class="business-supervision__sidebar">
-    <div class="common-bg money">
+    <div class="business-supervision__sidebar-item h-[246px]">
       <div class="flex-x-between">
-        <div class="title">
+        <div class="business-supervision__sidebar-title">
           <h1>园区进出口额</h1>
         </div>
         <div>
-          <span class="all-data">总数据</span>
+          <span class="business-supervision__sidebar-tag">总数据</span>
           <TimeSelect :time-list="timeList" />
         </div>
       </div>
@@ -45,23 +45,23 @@ const timeList = ref<TimeSelectType[]>([
       <import-export-value />
     </div>
 
-    <div class="enterprise-info common-bg">
+    <div class="business-supervision__sidebar-item h-[354px]">
       <div class="flex-x-between">
-        <div class="title">
+        <div class="business-supervision__sidebar-title">
           <h1>企业信息</h1>
         </div>
-        <span class="title-description">截止时间至2021.12.30</span>
+        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
       </div>
 
       <enterprise-info />
     </div>
 
-    <div class="common-bg plan">
+    <div class="business-supervision__sidebar-item h-[294px]">
       <div class="flex-x-between">
-        <div class="title">
+        <div class="business-supervision__sidebar-title">
           <h1>地理规划</h1>
         </div>
-        <span class="title-description">截止时间至2021.12.30</span>
+        <span class="business-supervision__sidebar-title-describe">截止时间至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">
@@ -71,33 +71,3 @@ const timeList = ref<TimeSelectType[]>([
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.money {
-  width: 100%;
-  height: 246px;
-
-  .all-data {
-    float: left;
-    margin: 0 7px 0 0;
-    width: 62px;
-    height: 26px;
-    line-height: 26px;
-    font-size: 14px;
-    text-align: center;
-    background: rgba(24, 69, 135, 0.55);
-    color: #fff;
-  }
-}
-
-.enterprise-info {
-  padding: 10px 15px;
-  width: 530px;
-  height: 354px;
-}
-
-.plan {
-  width: 530px;
-  height: 294px;
-}
-</style>

src/views/business-supervision/business-supervision-right/index.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="business-supervision__sidebar flex-y-between">
+    <div class="business-supervision__sidebar-item h-[246px]">
+      <div class="flex-x-between">
+        <div class="business-supervision__sidebar-title">
+          <h1>园区进出口额</h1>
+        </div>
+      </div>
+    </div>
+
+    <div class="business-supervision__sidebar-item h-[354px]">
+      <div class="flex-x-between">
+        <div class="business-supervision__sidebar-title">
+          <h1>企业信息</h1>
+        </div>
+        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+      </div>
+    </div>
+
+    <div class="business-supervision__sidebar-item h-[294px]">
+      <div class="flex-x-between">
+        <div class="business-supervision__sidebar-title">
+          <h1>地理规划</h1>
+        </div>
+        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+      </div>
+    </div>
+  </div>
+</template>

src/views/business-supervision/index.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import MangeContent from '@/views/business-supervision/business-supervision-content/index.vue';
+import BusinessSupervisionLeft from '@/views/business-supervision/business-supervision-left/index.vue';
+import BusinessSupervisionRight from '@/views/business-supervision/business-supervision-right/index.vue';
+</script>
+
+<template>
+  <div class="business-supervision">
+    <business-supervision-left />
+    <mange-content />
+    <business-supervision-right />
+  </div>
+</template>
+
+<style>
+@import 'style.scss';
+</style>

src/views/business-supervision/style.scss

@@ -0,0 +1,52 @@
+.business-supervision {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  &__sidebar {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 530px;
+    height: 100%;
+    color: #fff;
+
+    &-item {
+      padding: 9px 15px;
+      width: 100%;
+      background: rgba(14, 95, 255, 0.20);
+    }
+
+    &-tag {
+      float: left;
+      margin: 0 7px 0 0;
+      width: 62px;
+      height: 26px;
+      line-height: 26px;
+      font-size: 14px;
+      text-align: center;
+      background: rgba(24, 69, 135, 0.55);
+      color: #fff;
+      cursor: default;
+    }
+
+    &-title {
+      width: 172px;
+      height: 42px;
+      font-size: 22px;
+      color: #fff;
+      background: url('@/assets/images/business-supervision/bg/bg-frame-4.png') no-repeat;
+      background-size: cover;
+    }
+
+    &-title-describe {
+      font-size: 12px;
+      color: var(--color-info-secondary);
+    }
+  }
+}

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

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

src/views/manage-forms/index.vue

@@ -1,13 +0,0 @@
-<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-forms flex-x-between">
-    <manage-left />
-    <mange-content />
-    <manage-right />
-  </div>
-</template>

src/views/smart-park/smart-park-footer.vue

@@ -2,12 +2,8 @@
 
 <template>
   <footer>
-    <ul class="flex-x-around">
+    <ul class="smart-park__footer-nav">
-      <li
+      <li v-for="index in new Array(5)" :key="index" class="smart-park__footer-item">
-        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>
@@ -22,20 +18,30 @@ footer {
   height: 125px;
 }
 
-.smart-park__footer--nav-item {
+.smart-park__footer-nav {
-  width: 138px;
+  display: flex;
-  height: 125px;
+  justify-content: space-around;
-  background: rgba(16, 11, 87, 0.55);
+  align-items: center;
-  border-radius: 10px;
 
-  img {
+  li {
-    width: 67px;
+    display: flex;
-    height: 67px;
+    flex-direction: column;
-  }
+    justify-content: center;
+    align-items: center;
+    width: 138px;
+    height: 125px;
+    background: rgba(16, 11, 87, 0.55);
+    border-radius: 10px;
 
-  span {
+    img {
-    font-size: 15px;
+      width: 67px;
-    font-weight: lighter;
+      height: 67px;
+    }
+
+    span {
+      font-size: 15px;
+      font-weight: lighter;
+    }
   }
 }
 </style>

src/views/smart-park/smart-park-main/smart-park-center.vue

@@ -4,7 +4,7 @@ import CentralPercent from '@/views/smart-park/smart-park-main/components/centra
 </script>
 
 <template>
-  <div class="smart-park__center flex-center">
+  <div class="smart-park__center">
     <div class="h-[570px] flex-y-between">
       <div class="smart-park__center-title">
         <h1>卡口车辆监控</h1>
@@ -41,6 +41,9 @@ import CentralPercent from '@/views/smart-park/smart-park-main/components/centra
 
 <style lang="scss" scoped>
 .smart-park__center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 824px;
   height: 650px;
   background: url('@/assets/images/smart-park/bg/bg-middle.png') no-repeat center;

src/views/smart-park/smart-park-main/smart-park-sidebar-left.vue

@@ -10,22 +10,22 @@
 
       <!-- 汽车列表 -->
       <ul class="mt-[32px]">
-        <li class="smart-park__sidebar--left-item flex-x-around">
+        <li class="smart-park__sidebar--left-item">
           <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="smart-park__sidebar--left-item flex-x-around">
+        <li class="smart-park__sidebar--left-item">
           <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="smart-park__sidebar--left-item flex-x-around">
+        <li class="smart-park__sidebar--left-item">
           <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="smart-park__sidebar--left-item flex-x-around">
+        <li class="smart-park__sidebar--left-item">
           <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>
@@ -51,6 +51,9 @@
   transform: rotateY(180deg);
 
   &-item {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
     width: 330px;
     height: 61px;
     margin: 0 0 9px 0;

src/views/smart-park/smart-park-main/smart-park-sidebar-right.vue

@@ -20,11 +20,11 @@ onMounted(() => {
 
       <!-- 汽车列表 -->
       <ul class="flex-x-around mt-[32px] w-[331px]">
-        <li class="smart-park__sidebar-flow-item flex-y-between">
+        <li class="smart-park__sidebar-flow-item">
           <span>最高进园车流量</span>
           <span>897</span>
         </li>
-        <li class="smart-park__sidebar-flow-item flex-y-between">
+        <li class="smart-park__sidebar-flow-item">
           <span>最高进园车流量</span>
           <span>494</span>
         </li>
@@ -32,7 +32,7 @@ onMounted(() => {
 
       <!-- 七天数据 -->
       <div class="w-[325px] h-[205px]">
-        <div ref="weekDataChart" class="smart-park__sidebar-week-data" />
+        <div ref="weekDataChart" class="smart-park__sidebar-charts" />
       </div>
     </div>
   </div>
@@ -40,6 +40,9 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .smart-park__sidebar-flow-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   width: 162px;
   height: 111px;
   text-align: center;
@@ -65,11 +68,9 @@ onMounted(() => {
   }
 }
 
-.smart-park__sidebar-week-data {
+.smart-park__sidebar-charts {
   margin: 71px 0 0 0;
   width: 100%;
   height: 100%;
-  transform: scale(1);
-  transform-origin: 0 0;
 }
 </style>

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

@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-import PageList from '@/views/welcome/components/welcome-content/page-list.vue';
-</script>
-
-<template>
-  <div class="welcome flex-y-around">
-    <div class="mt-[158px]">
-      <p class="c-white">
-        <img alt="welcome" src="@/assets/images/welcome/icon/welcome.png" />
-        <i class="c-primary-secondary">xxxx</i>
-        你好 欢迎使用xxxxxxxzz
-      </p>
-    </div>
-    <page-list />
-  </div>
-</template>
-
-<style lang="scss  " scoped>
-.welcome {
-  p {
-    font-size: 16px;
-  }
-
-  img {
-    width: 239px;
-    height: 34px;
-  }
-}
-</style>

src/views/welcome/index.vue

@@ -1,21 +1,15 @@
 <script lang="ts" setup>
-import LayoutContent from '@/views/welcome/components/welcome-content/index.vue';
+import WelcomeContent from '@/views/welcome/welcome-content/index.vue';
-import LayoutFooter from '@/views/welcome/components/welcome-footer/index.vue';
+import WelcomeFooter from '@/views/welcome/welcome-footer.vue';
 </script>
 
 <template>
-  <div class="particle">
+  <div class="welcome">
-    <layout-content />
+    <welcome-content />
-
+    <welcome-footer />
-    <layout-footer />
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style>
-.particle {
+@import 'style.scss';
-  width: 100%;
-  height: 100%;
-  background: url('@/assets/images/welcome/bg/bg-particle.png') no-repeat center;
-  background-size: cover;
-}
 </style>

src/views/welcome/style.scss

@@ -0,0 +1,28 @@
+.welcome {
+  width: 100%;
+  height: 100%;
+  background: url('@/assets/images/welcome/bg/bg-particle.png') no-repeat center;
+  background-size: cover;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items: center;
+
+    p {
+      color: #fff;
+      font-size: 16px;
+
+      i {
+        color: var(--color-primary-secondary);
+      }
+    }
+
+    img {
+      width: 239px;
+      height: 34px;
+    }
+  }
+}

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

@@ -5,24 +5,24 @@ const router = useRouter();
 </script>
 
 <template>
-  <ul class="page-list flex-x-between">
+  <ul class="welcome__content-list">
-    <li class="flex-y-center" @click="router.push('/smart-park')">
+    <li @click="router.push('/smart-park')">
       <img alt="car" src="@/assets/images/welcome/icon/center/car.png" />
       <span>智慧停车</span>
     </li>
-    <li class="flex-y-center">
+    <li>
       <img alt="distribution" src="@/assets/images/welcome/icon/center/distribution.png" />
       <span>智慧配送</span>
     </li>
-    <li class="flex-y-center">
+    <li>
       <img alt="muck" src="@/assets/images/welcome/icon/center/muck.png" />
       <span>智慧渣土</span>
     </li>
-    <li class="flex-y-center">
+    <li>
       <img alt="clean-city" src="@/assets/images/welcome/icon/center/clean-city.png" />
       <span>智慧洁城</span>
     </li>
-    <li class="flex-y-center">
+    <li>
       <img alt="lamp" src="@/assets/images/welcome/icon/center/lamp.png" />
       <span>智慧路灯</span>
     </li>
@@ -30,13 +30,21 @@ const router = useRouter();
 </template>
 
 <style lang="scss" scoped>
-.page-list {
+.welcome__content-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin: 104px 0 0 0;
   width: 1477px;
   height: 260px;
 
   li {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
     width: 280px;
     height: 260px;
     cursor: pointer;

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

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import ContentList from '@/views/welcome/welcome-content/content-list.vue';
+</script>
+
+<template>
+  <div class="welcome__content flex-y-around">
+    <div class="mt-[158px]">
+      <p>
+        <img alt="welcome-bg" src="@/assets/images/welcome/icon/welcome.png" />
+        <i>xxxx</i>
+        你好 欢迎使用xxxxxxxzz
+      </p>
+    </div>
+    <content-list />
+  </div>
+</template>

src/views/welcome/welcome-footer.vue

@@ -7,14 +7,14 @@ const router = useRouter();
 const list = ref([
   { icon: 'i-material-symbols:home-and-garden', name: '园区', target: '/' },
   { icon: 'i-fa:building', name: '园区', target: '/' },
-  { icon: 'i-fa-solid:chart-line', name: '经营', target: '/manage-forms' },
+  { icon: 'i-fa-solid:chart-line', name: '经营', target: '/business-supervision' },
   { icon: 'i-ri:community-fill', name: '园区', target: '/' },
 ]);
 </script>
 
 <template>
-  <footer class="flex-y-around">
+  <footer>
-    <ul class="flex-x-between">
+    <ul>
       <li v-for="(item, index) in list" :key="index" @click="router.push(item.target)">
         <i :class="`${item.icon}`" />
         <span class="hover">{{ item.name }}</span>
@@ -25,9 +25,16 @@ const list = ref([
 
 <style lang="scss" scoped>
 footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
   margin: 190px 0 0 0;
 
   ul {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     width: 431px;
     height: 90px;