From d2c3715feb6ccfb965944bafe0bbf7fd66a3e82b Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Wed, 26 Feb 2025 18:27:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=AD=E9=97=B4=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/layout/arrow/arrow-down.png | Bin 0 -> 362 bytes
 src/assets/images/layout/arrow/arrow-item.png | Bin 0 -> 205 bytes
 src/assets/images/layout/arrow/arrow-up.png   | Bin 0 -> 379 bytes
 src/layout/components/AppMain/MainCenter.vue  | 104 +++++++++++-------
 src/layout/components/AppMain/MainLeft.vue    |  13 +--
 .../AppMain/components/MainCenterItem.vue     |  22 ++++
 .../AppMain/components/MainCenterPercent.vue  |  41 +++++++
 uno.config.ts                                 |   2 +
 8 files changed, 133 insertions(+), 49 deletions(-)
 create mode 100644 src/assets/images/layout/arrow/arrow-down.png
 create mode 100644 src/assets/images/layout/arrow/arrow-item.png
 create mode 100644 src/assets/images/layout/arrow/arrow-up.png
 create mode 100644 src/layout/components/AppMain/components/MainCenterItem.vue
 create mode 100644 src/layout/components/AppMain/components/MainCenterPercent.vue

diff --git a/src/assets/images/layout/arrow/arrow-down.png b/src/assets/images/layout/arrow/arrow-down.png
new file mode 100644
index 0000000000000000000000000000000000000000..39ddabae6424cfbba0dd68d14656f4a4f37b042a
GIT binary patch
literal 362
zcmV-w0hRuVP)<h;3K|Lk000e1NJLTq000dD000*V1^@s6(5A(K00004b3#c}2nYxW
zd<bNS0003YNkl<ZI8S3_AOkRxp@)IGnjCLzS7-kFpKFh{*Lif;;Izs4`qndy42;H%
zj4aZ-HQb&dYaG=C4UGW^2&bDn%ozXu*W9b=xe(+E^muZ(zFmQt@t@yb4ev={=Q-Tp
z&%yHj`_uo741$b|3@LjwyyhWm`u+be8}t8v2N)R{<^MDM_l5h(`NmcchX0J~85#bw
z{bythXZZiW0+b^DF)^7l{`<EQs8Heme};K`wY-v10s^Ly;XeZl1LOZkKut<O_G4hO
zmIZ6j^h{-7Wc-H_dSH$J7&ikIG6N;S^2i!Me5^t4d~JIK1H-@NKtC}2`~QE-K20xw
zkPWazi!+{Fu5FwCkBPzO9y_P%14YLlM5S_kIhwjTm+CeF093V#GraeEPXGV_07*qo
IM6N<$g0G6CS^xk5

literal 0
HcmV?d00001

diff --git a/src/assets/images/layout/arrow/arrow-item.png b/src/assets/images/layout/arrow/arrow-item.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed7848d9e52bfe810270eac26b55079df01bc2a4
GIT binary patch
literal 205
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`EX7WqAsj$Z!;#Vf<hOXbIEGmG
zC#NhBFi3jw|9?EAhT4GxCn_2xHXHIXy!`dQo@qjiLyzJOUWJ1Kci03nIqH}@3|clY
zvhXOLW9U%iZb)G^NRU@J&R59x=YKxKl_?BYVjASOw(uTUESVy)FycU_@fp=0mlz$-
z?ud0baPtSV;3RRb4XhH|_BdJya6ZxK;$>hE-mEL=;x;=1=pF`7S3j3^P6<r_>Apds

literal 0
HcmV?d00001

diff --git a/src/assets/images/layout/arrow/arrow-up.png b/src/assets/images/layout/arrow/arrow-up.png
new file mode 100644
index 0000000000000000000000000000000000000000..92a68ee4dac07f30583996758a9f3185420c0cda
GIT binary patch
literal 379
zcmV->0fhdEP)<h;3K|Lk000e1NJLTq000dD000*V1^@s6(5A(K00004b3#c}2nYxW
zd<bNS0003pNkl<ZI8S3_AOkRxp@)I`n*QI3kY!X^@fh7TIBoiKJLNRfe+C^!=AY_}
z%8MT%Ys9MQ@15kyjQ<&P7=f<;&&Y6#k^P?~qwL&wFpU_R{@zaQ01B2fF#P+^z`z7#
z0x1T@bBrASTwxkfH2uAu(f~BQ9;ogMP}6e;MkZB8#{XCT|7X+z>O9BD&uY&oHth>s
z6S4+ICI<Ka|Nl<{+F;Dc`d{n+Z^k)5O;$j|jxY+adV)3mf0oAe|Lgw~K&A{M<3C?U
zmAOa%-A*|J*2Ml-nt_Ak)BlgZcLL>&fxh&B+w}i_f&jyRCV57sc^5$jA!}lkoA>Ph
zt1KRdkH2&nRp*?*8RY1i2nIPen?^MO;|Ubxv<ry;x1;%hDS-t!b>mFs#AJW!XLnq-
Z0sym5ll5|r0(JlZ002ovPDHLkV1iQCtpET3

literal 0
HcmV?d00001

diff --git a/src/layout/components/AppMain/MainCenter.vue b/src/layout/components/AppMain/MainCenter.vue
index 350142e..f924194 100644
--- a/src/layout/components/AppMain/MainCenter.vue
+++ b/src/layout/components/AppMain/MainCenter.vue
@@ -1,4 +1,7 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import MainCenterItem from '@/layout/components/AppMain/components/MainCenterItem.vue';
+import MainCenterPercent from '@/layout/components/AppMain/components/MainCenterPercent.vue';
+</script>
 
 <template>
   <div class="main-center flex-center">
@@ -9,10 +12,22 @@
 
       <!-- 中间布局 -->
       <div class="main-inner">
-        <div class="main-inner-1">智能管控</div>
-        <div class="main-inner-2">智能管控</div>
-        <div class="main-inner-3">智能管控</div>
-        <div class="main-inner-3">智能管控</div>
+        <div class="pos-relative">
+          <MainCenterItem :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
+          <MainCenterPercent :percent="44" class="top-[73px] left-[193px]" />
+        </div>
+        <div class="pos-relative">
+          <MainCenterItem :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
+          <MainCenterPercent :percent="25" class="top-[73px] right-[192px]" />
+        </div>
+        <div class="pos-relative">
+          <MainCenterItem :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
+          <MainCenterPercent :percent="25" class="top-[40px] left-[193px]" />
+        </div>
+        <div class="pos-relative">
+          <MainCenterItem :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
+          <MainCenterPercent :percent="44" class="top-[40px] left-[66px]" />
+        </div>
 
         <div class="main-inner-center">
           <div class="main-inner-middle flex-center">
@@ -30,50 +45,55 @@
   height: 650px;
   background: url('@/assets/images/bg/bg-middle.png') no-repeat center;
   background-size: cover;
+}
 
-  .main-center-title {
-    height: 61px;
-    background: url('@/assets/images/bg/bg-main-title.png');
+// 中间部分标题
+.main-center-title {
+  height: 61px;
+  background: url('@/assets/images/bg/bg-main-title.png') no-repeat center;
+  background-size: cover;
 
-    h1 {
-      font-size: 22px;
-      text-align: center;
-    }
-  }
-
-  // 中间部分四个部分
-  .main-inner {
-    margin: 28px 0 77px 0;
-    width: 666px;
-    position: relative;
-    height: 400px;
-    background: url('@/assets/images/bg/bg-main-1.png') no-repeat center;
-    background-size: cover;
+  h1 {
+    font-size: 22px;
+    text-align: center;
   }
 }
 
-// 中心智能管控
-.main-inner-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 138px;
-  height: 138px;
+// 中间部分四个部分
+.main-inner {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  position: relative;
+  margin: 28px 0 77px 0;
+  width: 666px;
+  height: 400px;
+  background: url('@/assets/images/bg/bg-main-1.png') no-repeat center;
+  background-size: cover;
 
-  .main-inner-middle {
-    width: 100%;
-    height: 100%;
-    background: url('@/assets/images/bg/bg-main-center.png');
-    background-size: cover;
-    animation: rotate 30s linear infinite;
-  }
+  // 中心智能管控
+  .main-inner-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 138px;
+    height: 138px;
 
-  h1 {
-    width: 53px;
-    font-size: 19px;
-    text-align: center;
-    animation: rotate-reverse 30s linear infinite;
+    .main-inner-middle {
+      width: 100%;
+      height: 100%;
+      background: url('@/assets/images/bg/bg-main-center.png');
+      background-size: cover;
+      animation: rotate 30s linear infinite;
+    }
+
+    h1 {
+      width: 53px;
+      font-size: 19px;
+      text-align: center;
+      animation: rotate-reverse 30s linear infinite;
+    }
   }
 }
 </style>
diff --git a/src/layout/components/AppMain/MainLeft.vue b/src/layout/components/AppMain/MainLeft.vue
index 4f301d4..4cb2dc1 100644
--- a/src/layout/components/AppMain/MainLeft.vue
+++ b/src/layout/components/AppMain/MainLeft.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-  <div class="left mr-[20px ]">
+  <div class="left mr-[20px]">
     <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
       <!-- 路况 -->
       <div class="road-condition w-[218px] h-[59px]">
@@ -13,27 +13,27 @@
         <li class="flex-x-around w-[330px] h-[60px]">
           <img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
           <p class="c-white">入卡口（西北门）</p>
-          <span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
+          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
         <li class="flex-x-around w-[330px] h-[60px]">
           <img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
           <p class="c-white">入卡口（东北门）</p>
-          <span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
+          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
         <li class="flex-x-around w-[330px] h-[60px]">
           <img alt="car-1" src="@/assets/images/layout/car/car-2.png" />
           <p class="c-white">入卡口（东北门）</p>
-          <span class="dashed-circle c-[#FFBE44] border-b-[#FFBE44]">拥堵</span>
+          <span class="dashed-circle c-warning border-b-warning">拥堵</span>
         </li>
         <li class="flex-x-around w-[330px] h-[60px]">
           <img alt="car-1" src="@/assets/images/layout/car/car-1.png" />
           <p class="c-white">入卡口（东南门）</p>
-          <span class="dashed-circle c-[#66FFFF] border-b-[#66FFFF]">畅通</span>
+          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
       </ul>
 
       <!-- 建议 -->
-      <div class="suggest">
+      <div class="suggest c-white">
         <h5>车流量建议</h5>
         <p>
           高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
@@ -64,7 +64,6 @@
     padding: 15px 14px 17px 20px;
     width: 330px;
     height: 157px;
-    color: #fff;
     font-size: 14px;
     background: url('@/assets/images/bg/bg-suggest.png') no-repeat center;
     background-size: cover;
diff --git a/src/layout/components/AppMain/components/MainCenterItem.vue b/src/layout/components/AppMain/components/MainCenterItem.vue
new file mode 100644
index 0000000..e3f1a7b
--- /dev/null
+++ b/src/layout/components/AppMain/components/MainCenterItem.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+defineProps({
+  count: Number,
+  door: String,
+});
+</script>
+
+<template>
+  <div class="flex-y-between position-relative">
+    <h1 class="font-size-[34px] c-primary-secondary">{{ count }}</h1>
+    <div class="mt-[-12px] font-size-[16px] c-white">今日 进出车辆数/辆</div>
+    <div class="mt-[7px] font-size-[18px] c-primary">{{ door }}</div>
+    <div class="flex-center mt-[8px] c-primary">
+      <span class="float-left font-size-[14px] c-primary-secondary">查看</span>
+      <img
+        alt="arrow-item"
+        class="float-left h-[16px]"
+        src="@/assets/images/layout/arrow/arrow-item.png"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/layout/components/AppMain/components/MainCenterPercent.vue b/src/layout/components/AppMain/components/MainCenterPercent.vue
new file mode 100644
index 0000000..5b22441
--- /dev/null
+++ b/src/layout/components/AppMain/components/MainCenterPercent.vue
@@ -0,0 +1,41 @@
+<script lang="tsx" setup>
+defineProps({
+  percent: Number,
+});
+
+import ArrowDown from '@/assets/images/layout/arrow/arrow-down.png';
+import ArrowUp from '@/assets/images/layout/arrow/arrow-up.png';
+
+const calPercentItem: Element = (percent: number) => {
+  return percent > 25 ? (
+    <div class="flex-center font-size-[20px] c-warning">
+      <img alt="arrow" class="mt-2 h-[23px]" src={ArrowUp} />
+      <span>{percent}%</span>
+    </div>
+  ) : (
+    <div class="flex-center font-size-[20px] c-primary-secondary">
+      <img alt="arrow" class="mt-2 h-[23px]" src={ArrowDown} />
+      <span>{percent}%</span>
+    </div>
+  );
+};
+</script>
+
+<template>
+  <div class="main-center-percent">
+    <div class="flex-y-around mt-[16px] mr-[13px] mb-[20px] ml-[13px]">
+      <component :is="calPercentItem(percent)" />
+      <span class="font-size-[15px] text-center c-info">环比</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.main-center-percent {
+  position: absolute;
+  width: 86px;
+  height: 86px;
+  background: url('@/assets/images/bg/bg-main-2.png') no-repeat center;
+  background-size: cover;
+}
+</style>
diff --git a/uno.config.ts b/uno.config.ts
index 3c89a86..7867bed 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -16,11 +16,13 @@ export default defineConfig({
     'flex-x-around': 'flex items-center justify-around',
     'flex-y-center': 'flex flex-col flex-wrap justify-center items-center',
     'flex-y-between': 'flex flex-col flex-wrap justify-between items-center',
+    'flex-y-around': 'flex flex-col flex-wrap justify-around items-center',
   },
   theme: {
     colors: {
       primary: '#027AFF',
       'primary-secondary': '#00FFFF',
+      info: '#7CC1FF',
       warning: '#FFBE44',
       'warning-secondary': '#FEDB65',
     },