feat：完善首页样式

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

@@ -6,14 +6,11 @@
       </template>
     </Title1>
     <div class="flex pt-20">
-      <div
+      <!--   :class="{ core: index == 0, queue: index == 1, congestion: index == 2 }" -->
-        class="item"
+      <div class="item" v-for="(item, index) in homeData?.scenicSpot" :key="index">
-        :class="{ core: index == 0, queue: index == 1, congestion: index == 2 }"
+        <img class="item-icon" src="@/assets/images/core.png" alt="" />
-        v-for="(item, index) in homeData?.scenicSpot"
+        <span class="item-label">{{ item.name }}</span>
-        :key="index"
+        <div class="item-value flex align-end rela">
-      >
-        <span class="label">{{ item.name }}</span>
-        <div class="flex align-end">
           <countup :end-val="item.value" /><span class="unit">个</span>
         </div>
       </div>
@@ -241,26 +238,37 @@
     }
     .item {
       position: relative;
-      flex: 1;
-      padding-left: vw(70);
       height: vh(52);
       margin: 0 vh(10);
+      flex: 1;
+      z-index: 1;
       display: flex;
       align-items: center;
       background-size: 100% 100%;
-      .label {
+      &-icon {
         position: absolute;
+        width: 100%;
+        height: auto;
+        z-index: -1;
+      }
+      &-label {
+        position: absolute;
+        left: vw(80);
         top: vh(-10);
         font-weight: 400;
         font-size: vw(14);
         color: rgba(255, 255, 255, 0.7);
       }
+      &-value {
+        position: absolute;
+        left: vw(80);
         .countup-wrap {
           color: #02f9fa;
           font-size: vw(28);
           font-weight: bold;
         }
       }
+    }
     .unit {
       color: #02f9fa;
       font-size: vw(14);

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

@@ -218,6 +218,7 @@
               <countup class="value" :end-val="homeData?.carShipData?.ship?.count || 0" />
               <span class="unit">辆</span>
             </div>
+          </div>
           <div class="table">
             <div class="header">
               <div>景区</div>
@@ -238,7 +239,6 @@
           </div>
         </div>
       </div>
-      </div>
       <div class="hotel">
         <div>
           <div class="item">
@@ -320,7 +320,7 @@
     margin-top: vh(120);
     width: vw(750);
     height: vh(950);
-    padding: vw(8);
+    padding-left: vw(8);
     box-sizing: border-box;
     background-image: url('@/assets/images/bg-5.png');
     background-size: 100% 100%;
@@ -357,13 +357,14 @@
       background-image: url('@/assets/images/bg-3.png');
       background-size: 100% 100%;
     }
-    .stop-box {
-      display: flex;
-      gap: vw(20);
     .icon {
       width: vw(45);
       height: auto;
     }
+    .stop-box {
+      display: flex;
+      gap: vw(20);
+
       & > div {
         flex: 1;
         height: vh(70);
@@ -395,28 +396,24 @@
       flex: 1;
       & > div {
         position: relative;
-        flex: 1;
+        height: vh(110);
-        height: vh(113);
         display: flex;
         align-items: center;
         background-image: url('@/assets/images/bg-4.png');
         background-size: 100% 100%;
-        .icon {
-          padding-left: vw(90);
-          width: vw(352);
-          height: vh(70);
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          box-sizing: border-box;
-        }
         .car {
           @extend .icon;
+          padding-left: vw(90);
+          width: vw(352);
+          height: vw(70);
           background-image: url('@/assets/images/icon-6.png');
           background-size: 100% 100%;
         }
         .ship {
           @extend .icon;
+          padding-left: vw(90);
+          width: vw(352);
+          height: vw(70);
           background-image: url('@/assets/images/icon-7.png');
           background-size: 100% 100%;
         }
@@ -441,7 +438,7 @@
           position: absolute;
           left: vw(160);
           width: vw(200);
-          height: vh(100);
+          height: vh(96);
           z-index: 2;
           background: rgba(0, 150, 255, 0.17);
           .header {
@@ -509,8 +506,7 @@
       }
     }
     .hotel {
-      flex: 1;
+      margin: 0 vw(6);
-      margin-left: vw(6);
       & > div:nth-child(1) {
         display: flex;
         width: vw(360);
@@ -547,11 +543,10 @@
         }
       }
       & > div:nth-child(2) {
-        padding-top: vh(10);
+        padding-top: vh(6);
         margin-top: vh(6);
         width: vw(360);
-        height: vh(156);
+        background-image: url('@/assets/images/bg-3.png');
-        background-image: url('@/assets/images/bg-4.png');
         background-size: 100% 100%;
       }
     }

src/views/home/components/occupancy.vue

@@ -161,6 +161,6 @@
 <style scoped lang="scss">
   .lodging-ratio {
     width: 100%;
-    height: vh(120);
+    height: vh(130);
   }
 </style>