refactor: 优化代码

build/css.ts

@@ -7,10 +7,16 @@ export const css = (mode): CSSOptions => {
   const plugins: Plugin[] = [usePostCssPxToViewport8plugin(mode)];
 
   return {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/assets/styles/minix/sidebar" as  *;`,
+        api: 'modern-compiler',
+      },
+    },
     postcss: {
       plugins: plugins.filter(Boolean),
     },
-  };
+  } as CSSOptions;
 };
 
 /** 是否启用px转换vw插件 */

src/assets/styles/minix/sidebar.scss

@@ -1,25 +1,18 @@
-.business-supervision {
+@mixin view-style-default($sidebar-width,$content-width) {
-  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;
+    width: $sidebar-width;
     height: 100%;
     color: #fff;
 
     &-item {
       padding: 9px 15px;
       width: 100%;
-      background: rgba(14, 95, 255, 0.20);
+      background: rgba(14, 95, 255, 0.2);
     }
 
     &-tag {
@@ -51,10 +44,7 @@
   }
 
   &__content {
-    width: 759px;
+    width: $content-width;
     height: 100%;
   }
 }
-
-
-

src/components/PanelItem/TimeSelect/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
 
 defineProps({
   timeList: Array<TimeSelectType>,

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',
+    path: '/business-supervision',
-    component: Layout,
+    name: 'businessSupervision',
-    meta: { hidden: true },
+    component: () => import('@/views/business-supervision/index.vue'),
-    children: [
+    meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
-      {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect/index.vue'),
   },
-    ],
+  {
+    path: '/big-data',
+    name: 'bigData',
+    component: () => import('@/views/big-data/index.vue'),
+    meta: { title: '大数据可视化中心', subtitle: '大数据可视化' },
   },
 ];
 

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',

src/utils/chart.ts

@@ -0,0 +1,14 @@
+import { useEventListener } from '@vueuse/core';
+import type { EChartsType } from 'echarts';
+
+/** 通用重置图表样式 */
+export const debounceChart = (myChart: EChartsType) => {
+  useEventListener(
+    window,
+    'resize',
+    () => {
+      myChart.resize();
+    },
+    500
+  );
+};

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>

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>

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>

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>

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>

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>

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

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/PanelItem/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 class="big-data__body">
+      <li class="big-data__body-item">
+        <div class="big-data__body-title">
+          <h1>进出口总值</h1>
+          <span>
+            总值增幅
+            <em>+123%</em>
+          </span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.big-data__body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  &-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 18px 15px;
+    width: 100%;
+  }
+
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+
+    em {
+      font-style: normal;
+    }
+  }
+}
+</style>

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>

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>

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>

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/PanelItem/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/PanelItem/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>

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>

src/views/big-data/index.vue

@@ -0,0 +1,26 @@
+<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">
+.big-data {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  @include view-style-default(530px, 748px);
+}
+</style>

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

@@ -1,10 +1,10 @@
 import 'echarts/lib/component/dataZoom';
 
-import { useDebounceFn, useEventListener } from '@vueuse/core';
 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>();
 option.value = {
@@ -69,10 +69,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     devicePixelRatio: window.devicePixelRatio,
   });
 
-  const debouncedFn = useDebounceFn(() => {
+  debounceChart(myChart);
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
 
   myChart.setOption(option.value);
 };

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

@@ -1,10 +1,10 @@
 import 'echarts/lib/component/dataZoom';
 
-import { useDebounceFn, useEventListener } from '@vueuse/core';
 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>();
 option.value = {
@@ -90,10 +90,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     devicePixelRatio: window.devicePixelRatio,
   });
 
-  const debouncedFn = useDebounceFn(() => {
+  debounceChart(myChart);
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
 
   myChart.setOption(option.value);
 };

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

@@ -1,10 +1,10 @@
 import 'echarts/lib/component/dataZoom';
 
-import { useDebounceFn, useEventListener } from '@vueuse/core';
 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>();
 option.value = {
@@ -50,10 +50,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     devicePixelRatio: window.devicePixelRatio,
   });
 
-  const debouncedFn = useDebounceFn(() => {
+  debounceChart(myChart);
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
 
   myChart.setOption(option.value);
 };

src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import TimeSelect from '@/components/TimeSelect/index.vue';
+import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
-import { renderEcharts } from '@/views/business-supervision/components/business-supervision-content/charts/contentBottom';
+import { renderEcharts } from '@/views/business-supervision/charts/contentBottom';
 
 const chartYear = ref();
 

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>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/business-supervision/components/business-supervision-left/charts/sidebarMiddle';
+import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarMiddle';
 
 const chartPie = ref<HTMLDivElement>();
 

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

@@ -1,10 +1,10 @@
 <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 TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
-import { renderEcharts } from '@/views/business-supervision/components/business-supervision-left/charts/sidebarTop';
+import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarTop';
 
 const chartProgress = ref<HTMLDivElement>();
 const money = '1386114';

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import BottomChart from '@/views/business-supervision/components/business-supervision-right/chart/bottom-chart.vue';
+import BottomChart from '@/views/business-supervision/charts/right-bottom-chart.vue';
 
 const charData1 = ref(Math.round(Math.random() * 100));
 const charData2 = ref(Math.round(Math.random() * 100));
@@ -99,6 +99,10 @@ onMounted(() => {
     &-change {
       display: flex;
 
+      p {
+        font-size: 13px;
+      }
+
       span {
         display: inline-block;
         margin: 0 0 0 9px;

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import TimeSelect from '@/components/TimeSelect/index.vue';
+import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },

src/views/business-supervision/index.vue

@@ -12,6 +12,15 @@ import BusinessSupervisionRight from '@/views/business-supervision/components/bu
   </div>
 </template>
 
-<style>
+<style lang="scss">
-@import 'style.scss';
+.business-supervision {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  @include view-style-default(530px, 759px);
+}
 </style>

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>

src/views/smart-park/charts/right-sidebar.ts

@@ -1,10 +1,10 @@
 import 'echarts/lib/component/dataZoom';
 
-import { useDebounceFn, useEventListener } from '@vueuse/core';
 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>();
 option.value = {
@@ -102,10 +102,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     devicePixelRatio: window.devicePixelRatio,
   });
 
-  const debouncedFn = useDebounceFn(() => {
+  debounceChart(myChart);
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
 
   myChart.setOption(option.value);
 };

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>

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>

src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/charts/charts';
+import { renderEcharts } from '@/views/smart-park/charts/right-sidebar';
 
 const weekDataChart = ref<HTMLDivElement>();
 

src/views/smart-park/index.vue

@@ -19,6 +19,6 @@ import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/ind
   </div>
 </template>
 
-<style>
+<style lang="scss">
-@import 'style.scss';
+@use 'style.scss';
 </style>

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
+      <img alt="distribution" src="@/assets/images/welcome/icon/center/distribution.png" />
-        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>

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>

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>
 

src/views/welcome/index.vue

@@ -10,6 +10,6 @@ import WelcomeFooter from '@/views/welcome/components/welcome-footer.vue';
   </div>
 </template>
 
-<style>
+<style lang="scss">
-@import 'style.scss';
+@use 'style.scss';
 </style>