refactor: 优化项目代码

src/assets/styles/animations/animations.scss

@@ -0,0 +1 @@
+@use "src/rotate";

src/assets/styles/animations/src/rotate.scss

@@ -0,0 +1,19 @@
+/* 旋转动画 */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 反向旋转动画 */
+@keyframes rotate-reverse {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}

src/assets/styles/common/common.scss

@@ -0,0 +1,3 @@
+@use "src/element";
+
+

src/assets/styles/common/src/element.scss

@@ -0,0 +1,10 @@
+// 空心的虚线圆
+.dashed-circle {
+  width: 46px; /* 圆圈的宽度 */
+  height: 46px; /* 圆圈的高度 */
+  line-height: 40px;
+  font-size: 16px;
+  text-align: center;
+  border: 2px dashed; /* 边框宽度、样式和颜色 */
+  border-radius: 50%; /* 将元素变成圆形 */
+}

src/assets/styles/global.scss

@@ -1,29 +1,2 @@
-.dashed-circle {
-  width: 46px; /* 圆圈的宽度 */
-  height: 46px; /* 圆圈的高度 */
-  line-height: 40px;
-  font-size: 16px;
-  text-align: center;
-  border: 2px dashed; /* 边框宽度、样式和颜色 */
-  border-radius: 50%; /* 将元素变成圆形 */
-}
-
-/* 旋转动画 */
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* 反向旋转动画 */
-@keyframes rotate-reverse {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(-360deg);
-  }
-}
+@use "animations/animations";
+@use "common/common";

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-defineProps<{ msg: string }>();
-
-const count = ref(0);
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code>
-      to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>
-    , the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank">
-      Vue Docs Scaling up Guide
-    </a>
-    .
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/Layout/MainCenterItem.vue

@@ -15,7 +15,7 @@ defineProps({
       <img
         alt="arrow-item"
         class="float-left h-[16px]"
-        src="@/assets/images/layout/arrow/arrow-item.png"
+        src="@/assets/images/arrow/arrow-item.png"
       />
     </div>
   </div>

src/components/Layout/MainCenterPercent.vue

@@ -3,10 +3,10 @@ defineProps({
   percent: Number,
 });
 
-import ArrowDown from '@/assets/images/layout/arrow/arrow-down.png';
-import ArrowUp from '@/assets/images/layout/arrow/arrow-up.png';
+import ArrowDown from '@/assets/images/arrow/arrow-down.png';
+import ArrowUp from '@/assets/images/arrow/arrow-up.png';
 
-const calPercentItem: Element = (percent: number) => {
+const calPercentItem = (percent: number): Element => {
   return percent > 25 ? (
     <div class="flex-center c-warning">
       <img alt="arrow" class="mt-[6px] w-[13px] h-[23px]" src={ArrowUp} />

src/layout/components/AppMain/MainCenter.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import MainCenterItem from '@/layout/components/AppMain/components/MainCenterItem.vue';
-import MainCenterPercent from '@/layout/components/AppMain/components/MainCenterPercent.vue';
+import MainCenterItem from '@/components/Layout/MainCenterItem.vue';
+import MainCenterPercent from '@/components/Layout/MainCenterPercent.vue';
 </script>
 
 <template>
@@ -85,12 +85,12 @@ import MainCenterPercent from '@/layout/components/AppMain/components/MainCenter
       height: 100%;
       background: url('@/assets/images/bg/bg-main-center.png');
       background-size: cover;
+      font-size: 19px;
       animation: rotate 30s linear infinite;
     }
 
     h1 {
       width: 53px;
-      font-size: 19px;
       text-align: center;
       animation: rotate-reverse 30s linear infinite;
     }

src/layout/components/AppMain/MainLeft.vue

@@ -1,33 +1,33 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="left mr-[20px]">
+  <div class="left">
     <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
       <!-- 路况 -->
-      <div class="road-condition w-[218px] h-[59px]">
+      <div class="road-condition">
         <h1 class="c-white">实时道路情况</h1>
       </div>
 
       <!-- 汽车列表 -->
       <ul class="mt-[32px]">
-        <li class="car-item flex-x-around w-[330px] h-[60px]">
-          <img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-1.png" />
-          <p class="c-white font-size-[14px]">入卡口（西北门）</p>
+        <li class="car-item flex-x-around">
+          <img alt="car-1" src="@/assets/images/car/car-1.png" />
+          <p class="c-white">入卡口（西北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
-        <li class="car-item flex-x-around w-[330px] h-[60px]">
-          <img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-1.png" />
-          <p class="c-white font-size-[14px]">入卡口（东北门）</p>
+        <li class="car-item flex-x-around">
+          <img alt="car-1" src="@/assets/images/car/car-1.png" />
+          <p class="c-white">入卡口（东北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
-        <li class="car-item flex-x-around w-[330px] h-[60px]">
-          <img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-2.png" />
-          <p class="c-white font-size-[14px]">入卡口（东北门）</p>
+        <li class="car-item flex-x-around">
+          <img alt="car-1" src="@/assets/images/car/car-2.png" />
+          <p class="c-white">入卡口（东北门）</p>
           <span class="dashed-circle c-warning border-b-warning">拥堵</span>
         </li>
-        <li class="car-item flex-x-around w-[330px] h-[60px]">
-          <img alt="car-1" class="w-[60px]" src="@/assets/images/layout/car/car-1.png" />
-          <p class="c-white font-size-[14px]">入卡口（东南门）</p>
+        <li class="car-item flex-x-around">
+          <img alt="car-1" src="@/assets/images/car/car-1.png" />
+          <p class="c-white">入卡口（东南门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
       </ul>
@@ -47,6 +47,7 @@
 
 <style lang="scss" scoped>
 .left {
+  margin: 0 20px 0 0;
   transform: rotateY(180deg);
 
   .car-item {
@@ -55,6 +56,14 @@
     margin: 0 0 9px 0;
     background: url('@/assets/images/bg/bg-frame.png') no-repeat center;
     background-size: cover;
+
+    img {
+      width: 60px;
+    }
+
+    p {
+      font-size: 14px;
+    }
   }
 
   .suggest {

src/layout/components/AppMain/MainRight.vue

@@ -14,7 +14,7 @@ onMounted(() => {
   <div class="right ml-[20px]">
     <div class="pt-[55px] pl-[25px]">
       <!-- 路况 -->
-      <div class="road-condition w-[218px] h-[59px]">
+      <div class="road-condition">
         <h1 class="c-white">近7天车流量概览</h1>
       </div>
 
@@ -22,16 +22,18 @@ onMounted(() => {
       <ul class="flex-x-around mt-[32px] w-[331px]">
         <li class="detail-item flex-y-between">
           <span class="bg-frame c-white">最高进园车流量</span>
-          <span class="bg-frame c-[#66FFFF]">897</span>
+          <span class="bg-frame c-primary-secondary">897</span>
         </li>
         <li class="detail-item flex-y-between">
           <span class="bg-frame c-white">最高进园车流量</span>
-          <span class="bg-frame c-[#66FFFF]">494</span>
+          <span class="bg-frame c-primary-secondary">494</span>
         </li>
       </ul>
 
       <!-- 七天数据 -->
-      <div ref="weekDataChart" class="week-data" />
+      <div class="w-[325px] h-[205px]">
+        <div ref="weekDataChart" class="week-data" />
+      </div>
     </div>
   </div>
 </template>
@@ -63,8 +65,8 @@ onMounted(() => {
 
 .week-data {
   margin: 71px 0 0 0;
-  width: 325px;
-  height: 205px;
+  width: 100%;
+  height: 100%;
   transform: scale(1);
   transform-origin: 0 0;
 }

src/layout/components/AppMain/data.ts

@@ -5,7 +5,8 @@ import { type Ref, ref } from 'vue';
 
 import echarts from '@/plugins/echarts';
 
-const option = ref<EChartsOption>({
+const option = ref<EChartsOption>();
+option.value = {
   backgroundColor: 'transparent',
   grid: { right: 10, left: 10, bottom: 20 },
   title: {
@@ -21,7 +22,7 @@ const option = ref<EChartsOption>({
     icon: 'rect',
     right: 0,
     top: 0,
-    itemGap: 34,
+    itemGap: 9,
     orient: 'horizontal',
     align: 'left',
     textStyle: { fontSize: 14, color: '#fff' },
@@ -92,11 +93,12 @@ const option = ref<EChartsOption>({
       lineStyle: { color: '#4182FF', width: 3 },
     },
   ],
-});
+};
 
 export const renderEcharts = (element: Ref<HTMLDivElement>) => {
   const myChart = echarts.init(element.value, null, {
     renderer: 'svg',
+    devicePixelRatio: window.devicePixelRatio,
   });
   myChart.setOption(option.value);
 };

src/layout/components/Footer/index.vue

@@ -1,25 +1,36 @@
 <script lang="ts" setup></script>
 
 <template>
-  <footer class="mt-[66px] mx-auto w-[772px] h-[125px]">
+  <footer>
     <ul class="flex-x-around">
-      <li
-        v-for="index in new Array(5)"
-        :key="index"
-        class="rectangle w-[138px] h-[125px] flex-y-center bg-[#0E094D55]"
-      >
+      <li v-for="index in new Array(5)" :key="index" class="rectangle flex-y-center">
         <img alt="车辆管理" src="@/assets/images/layout/footer-39.png" />
-        <span class="font-size-[15px] font-100 text-white">车辆管理</span>
+        <span class="text-white">车辆管理</span>
       </li>
     </ul>
   </footer>
 </template>
 
 <style lang="scss" scoped>
+footer {
+  margin: 66px auto auto auto;
+  width: 772px;
+  height: 125px;
+}
+
 .rectangle {
+  width: 138px;
+  height: 125px;
+  background: #0e094d55;
+
   img {
     width: 67px;
     height: 67px;
   }
+
+  span {
+    font-size: 15px;
+    font-weight: lighter;
+  }
 }
 </style>

src/layout/components/NavBar/index.vue

@@ -2,20 +2,20 @@
 
 <template>
   <header class="h-[105px]">
-    <div class="time ml-[41px] c-primary">2025年2月25日22:45:14</div>
+    <div class="time c-primary">2025年2月25日22:45:14</div>
 
     <div class="title">
-      <h1 class="c-white text-align-center">智慧智能监管中心</h1>
-      <h2 class="text-align-center c-primary-secondary">车辆监控中心</h2>
+      <h1 class="c-white">智慧智能监管中心</h1>
+      <h2 class="c-primary-secondary">车辆监控中心</h2>
     </div>
 
-    <div class="bar-op flex items-center h-[36px]">
-      <ul class="float-left flex-x-around w-[148px]">
-        <li><img alt="icon-1" class="w-[36px]" src="@/assets/images/layout/icon-1.png" /></li>
-        <li><img alt="icon-2" class="w-[36px]" src="@/assets/images/layout/icon-2.png" /></li>
-        <li><img alt="icon-3" class="w-[36px]" src="@/assets/images/layout/icon-3.png" /></li>
+    <div class="bar-op">
+      <ul class="flex-x-around">
+        <li><img alt="icon-1" src="@/assets/images/layout/icon-1.png" /></li>
+        <li><img alt="icon-2" src="@/assets/images/layout/icon-2.png" /></li>
+        <li><img alt="icon-3" src="@/assets/images/layout/icon-3.png" /></li>
       </ul>
-      <span class="float-left font-size-[12px] c-primary">王菠萝</span>
+      <span class="c-primary">王菠萝</span>
     </div>
   </header>
 </template>
@@ -29,11 +29,14 @@ header {
 
 .time {
   position: absolute;
+  margin: 0 0 0 41px;
   line-height: 60px;
   font-size: 14px;
 }
 
 .title {
+  text-align: center;
+
   h1 {
     font-size: 42px;
     line-height: 60px;
@@ -47,8 +50,25 @@ header {
 }
 
 .bar-op {
+  display: flex;
+  align-items: center;
   position: absolute;
   top: 11px;
   right: 20px;
+  height: 36px;
+
+  ul {
+    float: left;
+    width: 148px;
+
+    img {
+      width: 36px;
+    }
+  }
+
+  span {
+    float: left;
+    font-size: 12px;
+  }
 }
 </style>

src/layout/index.vue

@@ -5,15 +5,15 @@ import NavBar from '@/layout/components/NavBar/index.vue';
 </script>
 
 <template>
-  <div class="layout w-full h-full">
+  <div class="layout">
     <div class="arrow left-[38px]">
-      <img alt="左箭头" class="w-[65px]" src="@/assets/images/layout/arrow/arrow-left.png" />
+      <img alt="左箭头" src="@/assets/images/arrow/arrow-left.png" />
     </div>
     <NavBar />
     <AppMain />
     <Footer />
     <div class="arrow right-[38px]">
-      <img alt="左箭头" class="w-[65px]" src="@/assets/images/layout/arrow/arrow-right.png" />
+      <img alt="左箭头" src="@/assets/images/arrow/arrow-right.png" />
     </div>
   </div>
 </template>
@@ -31,5 +31,9 @@ import NavBar from '@/layout/components/NavBar/index.vue';
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
+
+  img {
+    width: 65px;
+  }
 }
 </style>

uno.config.ts

@@ -26,6 +26,12 @@ export default defineConfig({
       warning: '#FFBE44',
       'warning-secondary': '#FEDB65',
     },
+    fontSizes: {
+      sm: 'font-size-[14px]',
+      base: 'font-size-[16px]',
+      lg: 'font-size-[18px]',
+      xl: 'font-size-[22px]',
+    },
   },
   presets: [
     presetUno(),