feat: 左侧中间完成

.vscode/extensions.json

@@ -1,6 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "rvest.vs-code-prettier-eslint"
-  ]
-}

package.json

@@ -21,7 +21,7 @@
     "@vueuse/core": "^12.8.2",
     "animate.css": "^4.1.1",
     "autofit.js": "^3.2.4",
-    "axios": "^1.7.9",
+    "axios": "1.8.2",
     "boxen": "^8.0.1",
     "dayjs": "^1.11.13",
     "echarts": "^5.6.0",

pnpm-lock.yaml

@@ -36,8 +36,8 @@ importers:
         specifier: ^3.2.4
         version: 3.2.4
       axios:
-        specifier: ^1.7.9
-        version: 1.7.9
+        specifier: 1.8.2
+        version: 1.8.2
       boxen:
         specifier: ^8.0.1
         version: 8.0.1
@@ -1115,8 +1115,8 @@ packages:
   autofit.js@3.2.4:
     resolution: {integrity: sha512-THNaA9w55nVNzhsajMgQjtg01VZmHG0jq+HtzDOK7SXCtCiuzDu6tzbGPmt0EbuIM+7oSlKUnfRnXKKGYv8/PA==}
 
-  axios@1.7.9:
-    resolution: {integrity: sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==}
+  axios@1.8.2:
+    resolution: {integrity: sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -3636,7 +3636,7 @@ snapshots:
 
   autofit.js@3.2.4: {}
 
-  axios@1.7.9:
+  axios@1.8.2:
     dependencies:
       follow-redirects: 1.15.9
       form-data: 4.0.2

src/components/PanelItem/DigitalNumber.tsx

@@ -1,7 +1,7 @@
-import formatter from '@/utils/digte-formatter';
+import { formatter } from '@/utils/chart';
 
 /** 显示金额 */
-export const displayContent = (money) => {
+export const displayContent = (money: any) => {
   const moneyString: string = formatter(money);
   const moneyStringList = moneyString
     .split(/(\d,)/g)

src/layout/index.vue

@@ -1,15 +1,22 @@
 <script lang="ts" setup>
+import { onBeforeMount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import CommonHeader from '@/components/CommonHeader/CommonHeader.vue';
 import LayoutHeader from '@/components/CommonHeader/LayoutHeader.vue';
+import { useAppStore } from '@/store/app';
 
 const router = useRouter();
 const route = useRoute();
+const appStore = useAppStore();
+
+onBeforeMount(() => {
+  appStore.setBackground('../assets/images/common/bg/bg-layout.png');
+});
 </script>
 
 <template>
-  <div class="layout-container">
+  <div :style="{ background: appStore.background }" class="layout-container">
     <layout-header v-if="route.name === 'welcome'" />
     <common-header v-else />
 
@@ -24,8 +31,9 @@ const route = useRoute();
   position: relative;
   width: 100%;
   height: 100%;
-  background: url('@/assets/images/common/bg/bg-layout.png') no-repeat center;
-  background-size: cover;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  background-size: cover !important;
 }
 
 main {

src/plugins/echarts.ts

@@ -1,4 +1,4 @@
-import { BarChart, LineChart, PictorialBarChart, PieChart } from 'echarts/charts';
+import { BarChart, GaugeChart, LineChart, PictorialBarChart, PieChart } from 'echarts/charts';
 import {
   DataZoomComponent,
   GraphicComponent,
@@ -31,6 +31,7 @@ use([
   DataZoomComponent,
   VisualMapComponent,
   PictorialBarChart,
+  GaugeChart,
 ]);
 
 /**

src/plugins/index.ts

@@ -16,6 +16,7 @@ export default {
     setupDirective(app);
     // 根据需求引入echarts
     useEcharts(app);
+    // 使用autoFit，在环境配置文件中设置
     autoFit();
   },
 };

src/store/app.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia';
+
+import { isCSSColor, isPath } from '@/utils/regexp/regexpBackground';
+
+const useAppStore = defineStore('appStore', {
+  state() {
+    return {
+      background: '',
+    };
+  },
+  getters: {},
+  actions: {
+    setBackground(background) {
+      if (isCSSColor(background)) {
+        this.background = background;
+      } else if (isPath(background)) {
+        const href = new URL(background, import.meta.url).href;
+        this.background = `url(${href})`;
+      } else {
+        const href = new URL('../assets/images/common/bg/bg-layout.png', import.meta.url).href;
+        this.background = `url(${href})`;
+      }
+    },
+  },
+});
+
+export { useAppStore };

src/store/modules/user.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { user } from '@/api/test';
 
 /** 用户信息 */
-export const useUserStore = defineStore('userStore', {
+const useUserStore = defineStore('userStore', {
   state() {
     return {
       userinfo: {},
@@ -19,3 +19,5 @@ export const useUserStore = defineStore('userStore', {
     },
   },
 });
+
+export { useUserStore };

src/utils/chart.ts

@@ -2,13 +2,18 @@ import { useEventListener } from '@vueuse/core';
 import type { EChartsType } from 'echarts';
 
 /** 通用重置图表样式 */
-export const debounceChart = (myChart: EChartsType) => {
-  useEventListener(
-    window,
-    'resize',
-    () => {
-      myChart.resize();
-    },
-    500
-  );
+export const debounceChart = (myChart: EChartsType | undefined) => {
+  useEventListener(window, 'resize', () => {
+    myChart!.resize();
+  });
+};
+
+/** 数字格式化 */
+export const formatter = (number: any) => {
+  const numbers = number.toString().split('').reverse();
+  const segs = [];
+
+  while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
+
+  return segs.join(',').split('').reverse().join('');
 };

src/utils/digte-formatter.ts

@@ -1,10 +0,0 @@
-export function formatter(number) {
-  const numbers = number.toString().split('').reverse();
-  const segs = [];
-
-  while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
-
-  return segs.join(',').split('').reverse().join('');
-}
-
-export default formatter;

src/utils/regexp/regexpBackground.ts

@@ -0,0 +1,29 @@
+/** 判断是否是CSS颜色 */
+function isCSSColor(str) {
+  // 匹配十六进制颜色（如 #fff, #ffffff）
+  const hexColor = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+  // 匹配RGB/RGBA颜色（如 rgb(255, 255, 255), rgba(255, 255, 255, 0.5)）
+  const rgbColor = /^rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(,\s*[\d\.]+)?\s*\)$/;
+
+  // 匹配HSL/HSLA颜色（如 hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.5)）
+  const hslColor = /^hsla?\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*(,\s*[\d\.]+)?\s*\)$/;
+
+  // 匹配预定义颜色名称（如 red, blue, green）
+  const namedColor = /^[a-zA-Z]+$/;
+
+  return hexColor.test(str) || rgbColor.test(str) || hslColor.test(str) || namedColor.test(str);
+}
+
+/** 判断是否是相对路径或绝对路径 */
+function isPath(str) {
+  // 匹配相对路径（如 ./path, ../path, path/to/file）
+  const relativePath = /^\.{0,2}\/[^\/].*$/;
+
+  // 匹配绝对路径（如 /path/to/file, C:\path\to\file）
+  const absolutePath = /^(?:\/|[A-Za-z]:\\).*$/;
+
+  return relativePath.test(str) || absolutePath.test(str);
+}
+
+export { isCSSColor, isPath };

src/views/big-data/charts/left-middle.tsx

@@ -0,0 +1,120 @@
+import 'echarts/lib/component/dataZoom';
+
+import type { EChartsOption, EChartsType } from 'echarts';
+import { defineComponent, onMounted, type Ref, ref, watch } from 'vue';
+
+import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
+
+const itemStyles = [
+  {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      { offset: 0, color: '#00CCD2' },
+      { offset: 1, color: '#00A2FF' },
+    ]),
+  },
+  {
+    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      { offset: 0, color: '#CBB668' },
+      { offset: 1, color: '#FABC00' },
+    ]),
+  },
+];
+
+const option: Ref<EChartsOption | undefined> = ref<EChartsOption>();
+option.value = {
+  grid: { top: '9%', right: '0%', left: '0%', bottom: '0%', containLabel: false },
+  series: [
+    {
+      type: 'gauge',
+      title: { fontSize: 14, color: '#fff', offsetCenter: ['0%', '14%'] },
+      startAngle: 90,
+      endAngle: -270,
+      pointer: { show: false },
+      progress: { show: true, overlap: false, roundCap: false, clip: false },
+      axisLine: { lineStyle: { width: 14 } },
+      splitLine: { show: false, distance: 0, length: 10 },
+      axisTick: { show: false },
+      axisLabel: { show: false, distance: 50 },
+      // data: [
+      //   {
+      //     value: 80,
+      //     name: '环比变化',
+      //     detail: { valueAnimation: true, offsetCenter: ['0%', '-20%'] },
+      //     itemStyle: {
+      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //         { offset: 0, color: '#00CCD2' },
+      //         { offset: 1, color: '#00A2FF' },
+      //       ]),
+      //     },
+      //   },
+      // ],
+      detail: {
+        width: 10,
+        height: 50,
+        fontSize: 14,
+        fontWeight: 0,
+        color: '#fff',
+        formatter: '+{value}%',
+      },
+    },
+  ],
+};
+
+/** 绘制图表 */
+export const renderEcharts: any = (
+  myChart: Ref<EChartsType | undefined>,
+  element: Ref<HTMLDivElement | undefined>
+) => {
+  myChart.value = echarts.init(element.value, null, {
+    renderer: 'svg',
+    devicePixelRatio: window.devicePixelRatio,
+  }) as any;
+
+  debounceChart(myChart.value);
+
+  myChart.value!.setOption(option.value!);
+};
+
+/* 封装组件 */
+export const ChartProgress = defineComponent({
+  props: {
+    percent: {
+      type: Number,
+    },
+  },
+  setup(props) {
+    const chart = ref<HTMLDivElement>();
+    const myChart = ref<EChartsType>();
+
+    onMounted(() => {
+      renderEcharts(myChart, chart);
+      updateChart(myChart, props);
+      watch(
+        () => props.percent,
+        () => {
+          updateChart(myChart, props);
+        }
+      );
+    });
+
+    return () => <div ref={chart} class="progress"></div>;
+  },
+});
+
+const updateChart = (myChart: Ref<EChartsType | undefined>, props: any) => {
+  myChart.value?.setOption({
+    series: [
+      {
+        data: [
+          {
+            name: '环比变化',
+            value: props.percent,
+            detail: { valueAnimation: true, offsetCenter: ['0%', '-20%'] },
+            itemStyle: props.percent >= 20 ? itemStyles[0] : itemStyles[1],
+          },
+        ],
+      },
+    ],
+  });
+};

src/views/big-data/components/big-data-left/components/left-middle.vue

@@ -1,13 +1,101 @@
-<script lang="ts" setup></script>
+<script lang="tsx" setup>
+import { onMounted, ref } from 'vue';
+
+import { formatter } from '@/utils/chart';
+import { ChartProgress } from '@/views/big-data/charts/left-middle';
+
+const randomNumber = (range: number = 100) => {
+  return parseInt((Math.random() * range).toFixed(0));
+};
+
+const list = ref([
+  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+]);
+
+const renderItem = () => {
+  return (
+    <>
+      {list.value.map((item, index) => {
+        return (
+          <li key={index}>
+            <div>
+              <h1>{item.title}</h1>
+              <em>¥ {formatter(item.amount)}</em>
+            </div>
+            <ChartProgress percent={item.percent} />
+          </li>
+        );
+      })}
+    </>
+  );
+};
+
+onMounted(() => {
+  setInterval(() => {
+    list.value = [
+      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+    ];
+  }, 1000);
+});
+</script>
 
 <template>
   <div class="big-data__sidebar-item h-[389px]">
     <div class="flex-x-between">
-      <div class="big-data__sidebar-title">
-        <h1>规模效益</h1>
-      </div>
+      <h1 class="big-data__sidebar-title">规模效益</h1>
+      <span class="big-data__sidebar-title-describe">截止时间至2021年6月</span>
     </div>
+
+    <ul>
+      <component :is="renderItem()" />
+    </ul>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: space-between;
+  margin: 18px 0 0 0;
+  width: 100%;
+  height: 300px;
+}
+
+li {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 18px 0 14px;
+  width: 248px;
+  height: 143px;
+  background: url('@/assets/images/big-data/bg/bg-middle.png') no-repeat center;
+  background-size: cover;
+
+  .progress {
+    position: absolute;
+    top: -10px;
+    right: -5px;
+    width: 90px;
+    height: 90px;
+  }
+
+  h1 {
+    font-size: 18px;
+  }
+
+  em {
+    font-size: 28px;
+    color: var(--color-warning-secondary);
+    font-style: normal;
+  }
+}
+</style>

src/views/big-data/components/big-data-left/components/left-top.vue

@@ -15,10 +15,7 @@ const timeList = ref<TimeSelectType[]>([
 <template>
   <div class="big-data__sidebar-item">
     <div class="flex-x-between">
-      <div class="big-data__sidebar-title">
-        <h1>规模效益</h1>
-      </div>
-
+      <h1 class="big-data__sidebar-title">规模效益</h1>
       <TimeSelect :time-list="timeList" />
     </div>
 
@@ -64,19 +61,20 @@ const timeList = ref<TimeSelectType[]>([
 ul {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   width: 100%;
-  height: 100%;
+  height: 198px;
 
   li {
     display: flex;
     flex-direction: column;
-    margin: 18px 0 0 0;
+    margin: 9px 0 0 0;
     width: 100%;
   }
 }
 
 .big-data__sidebar-item {
-  height: 296px;
+  height: 274px;
 
   &-body-title {
     display: flex;

src/views/big-data/components/big-data-right/components/right-top.vue

@@ -12,7 +12,7 @@ const timeList = ref<TimeSelectType[]>([
 </script>
 
 <template>
-  <div class="big-data__sidebar-item h-[200px]">
+  <div class="big-data__sidebar-item">
     <div class="flex-x-between">
       <div class="big-data__sidebar-title">
         <h1>规模效益</h1>
@@ -25,4 +25,8 @@ const timeList = ref<TimeSelectType[]>([
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.big-data__sidebar-item {
+  height: 274px;
+}
+</style>

src/views/big-data/index.vue

@@ -1,7 +1,16 @@
 <script lang="ts" setup>
+import { onBeforeMount } from 'vue';
+
+import { useAppStore } from '@/store/app';
 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';
+
+const appStore = useAppStore();
+
+onBeforeMount(async () => {
+  appStore.setBackground('#04072F');
+});
 </script>
 
 <template>
@@ -17,7 +26,7 @@ import BigDataRight from '@/views/big-data/components/big-data-right/index.vue';
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 25px;
+  padding: 0 25px 14px 25px;
   width: 100%;
   height: 100%;
 

src/views/business-supervision/charts/contentBottom.ts

@@ -53,10 +53,10 @@ option.value = {
           { offset: 1, color: '#00A2FF' },
         ]),
       },
-      emphasis: {
-        shadowBlur: 10, // 取消阴影模糊
-        shadowColor: '#000', // 取消阴影颜色
-      },
+      // emphasis: {
+      //   shadowBlur: 10, // 取消阴影模糊
+      //   shadowColor: '#000', // 取消阴影颜色
+      // },
       label: { show: true, position: 'top', color: '#fff', fontSize: 14 },
       data: [10, 52, 200, 334, 390, 330, 220, 500, 482, 499, 999, 444],
     },
@@ -64,7 +64,7 @@ option.value = {
 };
 
 export const renderEcharts = (element: Ref<HTMLDivElement>) => {
-  const myChart = echarts.init(element.value, null, {
+  const myChart: any = echarts.init(element.value, null, {
     renderer: 'svg',
     devicePixelRatio: window.devicePixelRatio,
   });

src/views/business-supervision/charts/leftSidebarMiddle.ts

@@ -1,12 +1,11 @@
 import 'echarts/lib/component/dataZoom';
 
-import type { EChartsOption } from 'echarts';
 import { type Ref, ref } from 'vue';
 
 import echarts from '@/plugins/echarts';
 import { debounceChart } from '@/utils/chart';
 
-const option = ref<EChartsOption>();
+const option = ref();
 option.value = {
   tooltip: { trigger: 'item' },
   grid: { top: 0, left: 0, right: 0, bottom: 0, containLabel: false },
@@ -85,7 +84,7 @@ option.value = {
 };
 
 export const renderEcharts = (element: Ref<HTMLDivElement>) => {
-  const myChart = echarts.init(element.value, null, {
+  const myChart: any = echarts.init(element.value, null, {
     renderer: 'svg',
     devicePixelRatio: window.devicePixelRatio,
   });

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-bottom.vue

@@ -20,9 +20,7 @@ const devices = ref<any>([
 <template>
   <div class="business-supervision__sidebar-item h-[294px]">
     <div class="flex-x-between">
-      <div class="business-supervision__sidebar-title">
-        <h1>地理规划</h1>
-      </div>
+      <h1 class="business-supervision__sidebar-title">地理规划</h1>
       <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]">

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue

@@ -13,9 +13,7 @@ onMounted(() => {
 <template>
   <div class="business-supervision__sidebar-item h-[354px]">
     <div class="flex-x-between">
-      <div class="business-supervision__sidebar-title">
-        <h1>企业信息</h1>
-      </div>
+      <h1 class="business-supervision__sidebar-title">企业信息</h1>
       <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
     </div>
 

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue

@@ -23,9 +23,7 @@ onMounted(() => {
 <template>
   <div class="business-supervision__sidebar-item h-[246px]">
     <div class="flex-x-between">
-      <div class="business-supervision__sidebar-title">
-        <h1>园区进出口额</h1>
-      </div>
+      <h1 class="business-supervision__sidebar-title">园区进出口额</h1>
       <div>
         <span class="business-supervision__sidebar-tag">总数据</span>
         <TimeSelect :time-list="timeList" />

src/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue

@@ -17,9 +17,7 @@ onMounted(() => {
 <template>
   <div class="business-supervision__sidebar-item h-[294px]">
     <div class="flex-x-between">
-      <div class="business-supervision__sidebar-title">
-        <h1>地理规划</h1>
-      </div>
+      <h1 class="business-supervision__sidebar-title">地理规划</h1>
       <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
     </div>
 

src/views/business-supervision/components/business-supervision-right/components/sidebar-right-middle.vue

@@ -10,9 +10,7 @@ const list = [
 <template>
   <div class="business-supervision__sidebar-item h-[354px]">
     <div class="flex-x-between">
-      <div class="business-supervision__sidebar-title">
-        <h1>企业信息</h1>
-      </div>
+      <h1 class="business-supervision__sidebar-title">企业信息</h1>
       <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
     </div>
 

src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue

@@ -14,10 +14,7 @@ const timeList = ref<TimeSelectType[]>([
 <template>
   <div class="business-supervision__sidebar-item h-[246px]">
     <div class="flex-x-between">
-      <div class="business-supervision__sidebar-title">
-        <h1>园区进出口额</h1>
-      </div>
-
+      <h1 class="business-supervision__sidebar-title">园区进出口额</h1>
       <div>
         <span class="business-supervision__sidebar-tag">总数据</span>
         <TimeSelect :time-list="timeList" />

src/views/business-supervision/index.vue

@@ -1,7 +1,16 @@
 <script lang="ts" setup>
+import { onBeforeMount } from 'vue';
+
+import { useAppStore } from '@/store/app';
 import MangeContent from '@/views/business-supervision/components/business-supervision-content/index.vue';
 import BusinessSupervisionLeft from '@/views/business-supervision/components/business-supervision-left/index.vue';
 import BusinessSupervisionRight from '@/views/business-supervision/components/business-supervision-right/index.vue';
+
+const appStore = useAppStore();
+
+onBeforeMount(() => {
+  appStore.setBackground('../assets/images/common/bg/bg-secondary.png');
+});
 </script>
 
 <template>

src/views/smart-park/index.vue

@@ -20,5 +20,40 @@ import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/ind
 </template>
 
 <style lang="scss">
-@use 'style.scss';
+.smart-park {
+  width: 100%;
+  height: 100%;
+
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+
+    img {
+      width: 65px;
+    }
+  }
+
+  &__sidebar {
+    width: 380px;
+    height: 650px;
+    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-park__sidebar-title {
+      width: 218px;
+      height: 59px;
+      background: url('@/assets/images/smart-park/bg/bg-road-condition.png') no-repeat center;
+      background-size: cover;
+
+      h1 {
+        color: #fff;
+        font-size: 18px;
+      }
+    }
+  }
+}
 </style>

src/views/smart-park/style.scss

@@ -1,36 +0,0 @@
-.smart-park {
-  width: 100%;
-  height: 100%;
-
-  &__arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-
-    img {
-      width: 65px;
-    }
-  }
-
-  &__sidebar {
-    width: 380px;
-    height: 650px;
-    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-park__sidebar-title {
-      width: 218px;
-      height: 59px;
-      background: url('@/assets/images/smart-park/bg/bg-road-condition.png') no-repeat center;
-      background-size: cover;
-
-      h1 {
-        color: #fff;
-        font-size: 18px;
-      }
-    }
-  }
-}

src/views/welcome/index.vue

@@ -11,5 +11,32 @@ import WelcomeFooter from '@/views/welcome/components/welcome-footer.vue';
 </template>
 
 <style lang="scss">
-@use 'style.scss';
+.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;
+    }
+  }
+}
 </style>

src/views/welcome/style.scss

@@ -1,28 +0,0 @@
-.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;
-    }
-  }
-}

tsconfig.json

@@ -20,6 +20,7 @@
     "forceConsistentCasingInFileNames": true,
     "jsx": "preserve",
     "jsxFactory": "h",
+    "jsxImportSource": "vue",
     "jsxFragmentFactory": "Fragment",
     "paths": {
       "@/*": [