feat: 中间部分完成

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="pos-relative">
-        <div class="main-inner-2">智能管控</div>
+          <MainCenterItem :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
-        <div class="main-inner-3">智能管控</div>
+          <MainCenterPercent :percent="44" class="top-[73px] left-[193px]" />
-        <div class="main-inner-3">智能管控</div>
+        </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;
+.main-center-title {
-    background: url('@/assets/images/bg/bg-main-title.png');
+  height: 61px;
+  background: url('@/assets/images/bg/bg-main-title.png') no-repeat center;
+  background-size: cover;
 
-    h1 {
+  h1 {
-      font-size: 22px;
+    font-size: 22px;
-      text-align: center;
+    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;
   }
 }
 
-// 中心智能管控
+// 中间部分四个部分
-.main-inner-center {
+.main-inner {
-  position: absolute;
+  display: grid;
-  top: 50%;
+  grid-template-columns: 1fr 1fr;
-  left: 50%;
+  grid-template-rows: 1fr 1fr;
-  transform: translate(-50%, -50%);
+  position: relative;
-  width: 138px;
+  margin: 28px 0 77px 0;
-  height: 138px;
+  width: 666px;
+  height: 400px;
+  background: url('@/assets/images/bg/bg-main-1.png') no-repeat center;
+  background-size: cover;
 
-  .main-inner-middle {
+  // 中心智能管控
-    width: 100%;
+  .main-inner-center {
-    height: 100%;
+    position: absolute;
-    background: url('@/assets/images/bg/bg-main-center.png');
+    top: 50%;
-    background-size: cover;
+    left: 50%;
-    animation: rotate 30s linear infinite;
+    transform: translate(-50%, -50%);
-  }
+    width: 138px;
+    height: 138px;
 
-  h1 {
+    .main-inner-middle {
-    width: 53px;
+      width: 100%;
-    font-size: 19px;
+      height: 100%;
-    text-align: center;
+      background: url('@/assets/images/bg/bg-main-center.png');
-    animation: rotate-reverse 30s linear infinite;
+      background-size: cover;
+      animation: rotate 30s linear infinite;
+    }
+
+    h1 {
+      width: 53px;
+      font-size: 19px;
+      text-align: center;
+      animation: rotate-reverse 30s linear infinite;
+    }
   }
 }
 </style>

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;

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>

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>

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