feat：完善页面样式和功能

src/views/home/components/box-2.vue

@@ -2,7 +2,7 @@
   <div class="box-2">
     <Title1 title="景区信息">
       <template #right>
-        <span class="more" />
+        <img class="more" src="@/assets/images/more.png" />
       </template>
     </Title1>
     <div class="flex pt-20">
@@ -118,7 +118,7 @@
     <div class="ticket-box">
       <Title2 title="景区购票数" />
       <div class="ticket-wrap">
-        <img src="@/assets/images/ticket.png" alt="" />
+        <img src="@/assets/images/ticket.png" />
         <div> <span class="label">当日购票量：</span><countup endVal="768578" /> </div>
         <div> <span class="label">未来3天购票量：</span><countup endVal="768578" /> </div>
         <div> <span class="label">3天后购票量：</span><countup endVal="768578" /> </div>
@@ -216,9 +216,7 @@
       right: vw(20);
       cursor: pointer;
       width: vw(60);
-      height: vh(24);
-      background-image: url('@/assets/images/more.png');
-      background-size: 100% 100%;
+      height: auto;
     }
     .item {
       position: relative;
@@ -339,7 +337,7 @@
       }
       .icon {
         width: vw(26);
-        height: vh(28);
+        height: auto;
         margin-right: vw(4);
       }
       .text {
@@ -389,12 +387,13 @@
       }
     }
     .ticket-wrap {
+      margin-top: vh(8);
       display: flex;
       align-items: center;
       justify-content: space-between;
       & > img {
         width: vw(74);
-        height: vh(74);
+        height: auto;
       }
       & > div {
         flex: 1;

src/views/home/components/box-3.vue

@@ -5,15 +5,15 @@
         <div class="left">
           <div class="item">
             <div class="label">今年总游客数</div>
-            <countup v-for="item in count" :endVal="item" />
+            <ScrollNumber :count="count" prefix="1" />
           </div>
           <div class="item">
             <div class="label">全县景区总游客人数</div>
-            <countup v-for="item in count" :endVal="item" />
+            <ScrollNumber :count="count" prefix="2" />
           </div>
           <div class="item">
             <div class="label">总在园人数</div>
-            <countup v-for="item in count" :endVal="item" />
+            <ScrollNumber :count="count" prefix="3" />
           </div>
         </div>
         <div class="right">
@@ -120,9 +120,8 @@
 </template>
 
 <script setup>
+  import ScrollNumber from '@/components/ScrollNumber/index.vue'
   import countup from 'vue-countup-v3'
-  import Map from '@/components/Map/index.vue'
-
   let count = ref('6945959')
 </script>
 
@@ -288,4 +287,3 @@
     }
   }
 </style>
-

src/views/home/components/box-4.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="box-4">
     <Title1 title="交通信息" />
-    <div class="flex justify-evenly pt-10">
+    <div class="flex justify-evenly pt-10 pb-20">
       <div v-for="item in list" class="cell">
         <img class="icon" :src="item.icon" alt="" width="64" height="64" />
         <div>
@@ -324,7 +324,7 @@
       align-items: center;
       .icon {
         width: vw(64);
-        height: vh(60);
+        height: auto;
       }
       .countup-wrap {
         color: #02f9fa;
@@ -357,7 +357,7 @@
       gap: vw(20);
       .icon {
         width: vw(45);
-        height: vh(48);
+        height: auto;
       }
       & > div {
         flex: 1;
@@ -403,16 +403,17 @@
           display: flex;
           flex-direction: column;
           justify-content: center;
-          background-size: 100% 100%;
           box-sizing: border-box;
         }
         .car {
           @extend .icon;
           background-image: url('@/assets/images/icon-6.png');
+          background-size: 100% 100%;
         }
         .ship {
           @extend .icon;
           background-image: url('@/assets/images/icon-7.png');
+          background-size: 100% 100%;
         }
         .label {
           font-weight: 400;

src/views/home/components/vacancy.vue

@@ -66,15 +66,15 @@
             fontSize: fitChartSize(12)
           },
           verticalAlign: 'bottom',
-          padding: [0, 0, 6, 0],
+          padding: [0, 0, fitChartSize(6), 0],
           inside: true,
           formatter: function (value) {
-            return `余{value|${value}}`
+            return `{label|余} {value|${value}}`
           },
           rich: {
-            name: {
+            label: {
               align: 'center',
-              color: '#D3E5FF',
+              color: '#fff',
               fontSize: fitChartSize(14),
               fontFamily: 'Source Han Sans CN'
             },

src/views/home/index.vue

@@ -11,6 +11,7 @@
   import box2 from './components/box-2.vue'
   import box3 from './components/box-3.vue'
   import box4 from './components/box-4.vue'
+  let numm = ref(1231241)
   const navLeft = [
     { name: '安全', path: '/monitor' },
     { name: '景区', path: '/scenic' },
@@ -22,5 +23,8 @@
     { name: '舆情', path: '/sentiment' },
     { name: '酒店' }
   ]
+  const handleChange = () => {
+    numm.value++
+  }
   onMounted(() => {})
 </script>