diff --git a/src/assets/styles/common/src/sidebar.scss b/src/assets/styles/common/src/sidebar.scss
new file mode 100644
index 0000000..551f179
--- /dev/null
+++ b/src/assets/styles/common/src/sidebar.scss
@@ -0,0 +1,45 @@
+@mixin sidebar-1() {
+  &__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.2);
+    }
+
+    &-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/sidebar/bg-frame-4.png') no-repeat;
+      background-size: cover;
+    }
+
+    &-title-describe {
+      font-size: 12px;
+      color: var(--color-info-secondary-1);
+    }
+  }
+}
diff --git a/src/components/CommonItem/DigitalNumber.tsx b/src/components/PanelItem/DigitalNumber.tsx
similarity index 100%
rename from src/components/CommonItem/DigitalNumber.tsx
rename to src/components/PanelItem/DigitalNumber.tsx
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index 3016fd7..03ab716 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -1,4 +1,3 @@
-import Layout from '@/layout/index.vue';
 import type { RouteConfigsTable } from '@/types/router/Route';
 
 const routes: RouteConfigsTable[] = [
@@ -8,30 +7,23 @@ const routes: RouteConfigsTable[] = [
     component: () => import('@/views/welcome/index.vue'),
     meta: { transition: 'fade', title: '后台管理系统大标题' },
   },
-
-  {
-    path: '/business-supervision',
-    name: 'manageForms',
-    component: () => import('@/views/business-supervision/index.vue'),
-    meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
-  },
-
   {
     path: '/smart-park',
-    name: 'smartParking',
+    name: 'smartPark',
     component: () => import('@/views/smart-park/index.vue'),
     meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
   },
   {
-    path: '/redirect',
-    component: Layout,
-    meta: { hidden: true },
-    children: [
-      {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect/index.vue'),
-      },
-    ],
+    path: '/business-supervision',
+    name: 'businessSupervision',
+    component: () => import('@/views/business-supervision/index.vue'),
+    meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
+  },
+  {
+    path: '/big-data',
+    name: 'bigData',
+    component: () => import('@/views/big-data/index.vue'),
+    meta: { title: '大数据可视化中心', subtitle: '大数据可视化' },
   },
 ];
 
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 16fed53..b8ab162 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -9,7 +9,20 @@ const routes: RouteRecordRaw[] = [
     name: 'layout',
     component: Layout,
     redirect: 'welcome',
-    children: [...home],
+    children: [
+      ...home,
+      {
+        path: '/redirect',
+        component: Layout,
+        meta: { hidden: true },
+        children: [
+          {
+            path: '/:path(.*)',
+            component: () => import('@/views/redirect/index.vue'),
+          },
+        ],
+      },
+    ],
   },
   {
     path: '/redirect',
diff --git a/src/views/big-data/components/big-data-content/components/content-bottom.vue b/src/views/big-data/components/big-data-content/components/content-bottom.vue
new file mode 100644
index 0000000..82f77e3
--- /dev/null
+++ b/src/views/big-data/components/big-data-content/components/content-bottom.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+top
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/big-data/components/big-data-content/components/content-middle.vue b/src/views/big-data/components/big-data-content/components/content-middle.vue
new file mode 100644
index 0000000..2df2af1
--- /dev/null
+++ b/src/views/big-data/components/big-data-content/components/content-middle.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>top</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/big-data/components/big-data-content/components/content-top.vue b/src/views/big-data/components/big-data-content/components/content-top.vue
new file mode 100644
index 0000000..82f77e3
--- /dev/null
+++ b/src/views/big-data/components/big-data-content/components/content-top.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+top
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/big-data/components/big-data-content/index.vue b/src/views/big-data/components/big-data-content/index.vue
new file mode 100644
index 0000000..9b82c94
--- /dev/null
+++ b/src/views/big-data/components/big-data-content/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import ContentBottom from '@/views/big-data/components/big-data-content/components/content-bottom.vue';
+import ContentMiddle from '@/views/big-data/components/big-data-content/components/content-middle.vue';
+import ContentTop from '@/views/big-data/components/big-data-content/components/content-top.vue';
+</script>
+
+<template>
+  <div class="big-data__content">
+    <content-top />
+    <content-middle />
+    <content-bottom />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/big-data/components/big-data-left/components/left-bottom.vue b/src/views/big-data/components/big-data-left/components/left-bottom.vue
new file mode 100644
index 0000000..410020e
--- /dev/null
+++ b/src/views/big-data/components/big-data-left/components/left-bottom.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="big-data__sidebar-item h-[272px]">
+    <div class="flex-x-between">
+      <div class="big-data__sidebar-title">
+        <h1>规模效益</h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/big-data/components/big-data-left/components/left-middle.vue b/src/views/big-data/components/big-data-left/components/left-middle.vue
new file mode 100644
index 0000000..de036cb
--- /dev/null
+++ b/src/views/big-data/components/big-data-left/components/left-middle.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="big-data__sidebar-item h-[389px]">
+    <div class="flex-x-between">
+      <div class="big-data__sidebar-title">
+        <h1>规模效益</h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/big-data/components/big-data-left/components/left-top.vue b/src/views/big-data/components/big-data-left/components/left-top.vue
new file mode 100644
index 0000000..ee5c63a
--- /dev/null
+++ b/src/views/big-data/components/big-data-left/components/left-top.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
+
+const timeList = ref<TimeSelectType[]>([
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+]);
+</script>
+
+<template>
+  <div class="big-data__sidebar-item h-[200px]">
+    <div class="flex-x-between">
+      <div class="big-data__sidebar-title">
+        <h1>规模效益</h1>
+      </div>
+
+      <div>
+        <TimeSelect :time-list="timeList" />
+      </div>
+    </div>
+    <ul>
+      <li>
+        <div class="big-data__left-main-title">
+          <h1>进出口总值</h1>
+          <span>
+            总值增幅
+            <em>+123%</em>
+          </span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+ul {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+
+  li {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .big-data__left-main-title {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/big-data/components/big-data-left/index.vue b/src/views/big-data/components/big-data-left/index.vue
new file mode 100644
index 0000000..98571fa
--- /dev/null
+++ b/src/views/big-data/components/big-data-left/index.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import LeftBottom from '@/views/big-data/components/big-data-left/components/left-bottom.vue';
+import LeftMiddle from '@/views/big-data/components/big-data-left/components/left-middle.vue';
+import LeftTop from '@/views/big-data/components/big-data-left/components/left-top.vue';
+</script>
+
+<template>
+  <div class="big-data__sidebar">
+    <left-top />
+    <left-middle />
+    <left-bottom />
+  </div>
+</template>
diff --git a/src/views/big-data/components/big-data-right/components/right-bottom.vue b/src/views/big-data/components/big-data-right/components/right-bottom.vue
new file mode 100644
index 0000000..82f77e3
--- /dev/null
+++ b/src/views/big-data/components/big-data-right/components/right-bottom.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+top
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/big-data/components/big-data-right/components/right-middle.vue b/src/views/big-data/components/big-data-right/components/right-middle.vue
new file mode 100644
index 0000000..82f77e3
--- /dev/null
+++ b/src/views/big-data/components/big-data-right/components/right-middle.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+top
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/big-data/components/big-data-right/components/right-top.vue b/src/views/big-data/components/big-data-right/components/right-top.vue
new file mode 100644
index 0000000..b7ec083
--- /dev/null
+++ b/src/views/big-data/components/big-data-right/components/right-top.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
+
+const timeList = ref<TimeSelectType[]>([
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+]);
+</script>
+
+<template>
+  <div class="big-data__sidebar-item h-[200px]">
+    <div class="flex-x-between">
+      <div class="big-data__sidebar-title">
+        <h1>规模效益</h1>
+      </div>
+
+      <div>
+        <TimeSelect :time-list="timeList" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/big-data/components/big-data-right/index.vue b/src/views/big-data/components/big-data-right/index.vue
new file mode 100644
index 0000000..382853c
--- /dev/null
+++ b/src/views/big-data/components/big-data-right/index.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import RightBottom from '@/views/big-data/components/big-data-right/components/right-bottom.vue';
+import RightMiddle from '@/views/big-data/components/big-data-right/components/right-middle.vue';
+import RightTop from '@/views/big-data/components/big-data-right/components/right-top.vue';
+</script>
+
+<template>
+  <div class="big-data__sidebar">
+    <right-top />
+    <right-middle />
+    <right-bottom />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/big-data/index.vue b/src/views/big-data/index.vue
new file mode 100644
index 0000000..c6d4f10
--- /dev/null
+++ b/src/views/big-data/index.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import BigDataContent from '@/views/big-data/components/big-data-content/index.vue';
+import BigDataLeft from '@/views/big-data/components/big-data-left/index.vue';
+import BigDataRight from '@/views/big-data/components/big-data-right/index.vue';
+</script>
+
+<template>
+  <div class="big-data">
+    <big-data-left />
+    <big-data-content />
+    <big-data-right />
+  </div>
+</template>
+
+<style lang="scss">
+@use 'style';
+</style>
diff --git a/src/views/big-data/style.scss b/src/views/big-data/style.scss
new file mode 100644
index 0000000..a5aac7e
--- /dev/null
+++ b/src/views/big-data/style.scss
@@ -0,0 +1,17 @@
+@use "@/assets/styles/common/src/sidebar" as  *;
+
+.big-data {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  @include sidebar-1();
+
+  &__content {
+    width: 748px;
+    height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/views/business-supervision/components/business-supervision-content/index.vue b/src/views/business-supervision/components/business-supervision-content/index.vue
index 55a2d33..764cb94 100644
--- a/src/views/business-supervision/components/business-supervision-content/index.vue
+++ b/src/views/business-supervision/components/business-supervision-content/index.vue
@@ -11,5 +11,3 @@ import ContentTop from '@/views/business-supervision/components/business-supervi
     <content-bottom />
   </div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
index d83f7a6..aeafdcc 100644
--- a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
+++ b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
@@ -1,7 +1,7 @@
 <script lang="tsx" setup>
 import { onMounted, ref } from 'vue';
 
-import { displayContent } from '@/components/CommonItem/DigitalNumber';
+import { displayContent } from '@/components/PanelItem/DigitalNumber';
 import TimeSelect from '@/components/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/TimeSelect/type';
 import { renderEcharts } from '@/views/business-supervision/components/business-supervision-left/charts/sidebarTop';
diff --git a/src/views/business-supervision/index.vue b/src/views/business-supervision/index.vue
index aba1399..2c72af4 100644
--- a/src/views/business-supervision/index.vue
+++ b/src/views/business-supervision/index.vue
@@ -12,6 +12,6 @@ import BusinessSupervisionRight from '@/views/business-supervision/components/bu
   </div>
 </template>
 
-<style>
-@import 'style.scss';
+<style lang="scss">
+@use 'style.scss';
 </style>
diff --git a/src/views/business-supervision/style.scss b/src/views/business-supervision/style.scss
index 56ab965..ee40e81 100644
--- a/src/views/business-supervision/style.scss
+++ b/src/views/business-supervision/style.scss
@@ -1,3 +1,5 @@
+@use "@/assets/styles/common/src/sidebar" as  *;
+
 .business-supervision {
   display: flex;
   justify-content: space-between;
@@ -6,49 +8,7 @@
   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/sidebar/bg-frame-4.png') no-repeat;
-      background-size: cover;
-    }
-
-    &-title-describe {
-      font-size: 12px;
-      color: var(--color-info-secondary-1);
-    }
-  }
+  @include sidebar-1();
 
   &__content {
     width: 759px;
@@ -56,5 +16,3 @@
   }
 }
 
-
-
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
index 9a1288a..94aff0c 100644
--- a/src/views/redirect/index.vue
+++ b/src/views/redirect/index.vue
@@ -11,5 +11,5 @@ const router = useRouter();
 const { params, query } = route;
 const { path } = params;
 
-router.replace({ path: '/' + path, query });
+router.replace({ path: '/', query });
 </script>
diff --git a/src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue b/src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue
index 0efc37e..b4354cf 100644
--- a/src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue
+++ b/src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue
@@ -15,7 +15,7 @@ defineProps({
       <img
         alt="arrow-item"
         class="float-left h-[16px]"
-        src="../../../../../../../assets/images/smart-park/arrow/arrow-item.png"
+        src="@/assets/images/smart-park/arrow/arrow-item.png"
       />
     </div>
   </div>
diff --git a/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue b/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue
index d73263a..d8d02e8 100644
--- a/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue
+++ b/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue
@@ -11,22 +11,22 @@
       <!-- 汽车列表 -->
       <ul class="mt-[32px]">
         <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="../../../../../../assets/images/smart-park/car/car-1.png" />
+          <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">
-          <img alt="car-1" src="../../../../../../assets/images/smart-park/car/car-1.png" />
+          <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">
-          <img alt="car-1" src="../../../../../../assets/images/smart-park/car/car-2.png" />
+          <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">
-          <img alt="car-1" src="../../../../../../assets/images/smart-park/car/car-1.png" />
+          <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>
diff --git a/src/views/smart-park/index.vue b/src/views/smart-park/index.vue
index 880a871..5317f43 100644
--- a/src/views/smart-park/index.vue
+++ b/src/views/smart-park/index.vue
@@ -19,6 +19,6 @@ import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/ind
   </div>
 </template>
 
-<style>
-@import 'style.scss';
+<style lang="scss">
+@use 'style.scss';
 </style>
diff --git a/src/views/welcome/components/welcome-content/content-list.vue b/src/views/welcome/components/welcome-content/content-list.vue
index a535cea..8ca5fbd 100644
--- a/src/views/welcome/components/welcome-content/content-list.vue
+++ b/src/views/welcome/components/welcome-content/content-list.vue
@@ -7,26 +7,23 @@ const router = useRouter();
 <template>
   <ul class="welcome__content-list">
     <li @click="router.push('/smart-park')">
-      <img alt="car" src="../../../../assets/images/welcome/icon/center/car.png" />
+      <img alt="car" src="@/assets/images/welcome/icon/center/car.png" />
       <span>智慧停车</span>
     </li>
     <li>
-      <img
-        alt="distribution"
-        src="../../../../assets/images/welcome/icon/center/distribution.png"
-      />
+      <img alt="distribution" src="@/assets/images/welcome/icon/center/distribution.png" />
       <span>智慧配送</span>
     </li>
     <li>
-      <img alt="muck" src="../../../../assets/images/welcome/icon/center/muck.png" />
+      <img alt="muck" src="@/assets/images/welcome/icon/center/muck.png" />
       <span>智慧渣土</span>
     </li>
     <li>
-      <img alt="clean-city" src="../../../../assets/images/welcome/icon/center/clean-city.png" />
+      <img alt="clean-city" src="@/assets/images/welcome/icon/center/clean-city.png" />
       <span>智慧洁城</span>
     </li>
     <li>
-      <img alt="lamp" src="../../../../assets/images/welcome/icon/center/lamp.png" />
+      <img alt="lamp" src="@/assets/images/welcome/icon/center/lamp.png" />
       <span>智慧路灯</span>
     </li>
   </ul>
diff --git a/src/views/welcome/components/welcome-content/index.vue b/src/views/welcome/components/welcome-content/index.vue
index 2e37ffc..0028056 100644
--- a/src/views/welcome/components/welcome-content/index.vue
+++ b/src/views/welcome/components/welcome-content/index.vue
@@ -3,10 +3,10 @@ import ContentList from '@/views/welcome/components/welcome-content/content-list
 </script>
 
 <template>
-  <div class="welcome__content flex-y-around">
+  <div class="flex-y-around">
     <div class="mt-[158px]">
       <p>
-        <img alt="welcome-bg" src="../../../../assets/images/welcome/icon/welcome.png" />
+        <img alt="welcome-bg" src="@/assets/images/welcome/icon/welcome.png" />
         <i>xxxx</i>
         你好 欢迎使用xxxxxxxzz
       </p>
diff --git a/src/views/welcome/components/welcome-footer.vue b/src/views/welcome/components/welcome-footer.vue
index ad291f1..00a08f7 100644
--- a/src/views/welcome/components/welcome-footer.vue
+++ b/src/views/welcome/components/welcome-footer.vue
@@ -8,7 +8,7 @@ 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: '/business-supervision' },
-  { icon: 'i-ri:community-fill', name: '园区', target: '/' },
+  { icon: 'i-eos-icons:big-data-outlined', name: '大数据', target: '/big-data' },
 ]);
 </script>
 
diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
index 6334520..2ff8546 100644
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -10,6 +10,6 @@ import WelcomeFooter from '@/views/welcome/components/welcome-footer.vue';
   </div>
 </template>
 
-<style>
-@import 'style.scss';
+<style lang="scss">
+@use 'style.scss';
 </style>