feat：完善整体样式

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

@@ -1,9 +1,20 @@
 <template>
   <div class="box-1">
     <div class="header">
-      <div>
-        <div class="label">今年总游客数</div>
-        <countup v-for="item in count" :endVal="item" />
+      <div class="header__left">
+        <img src="@/assets/images/ticket.png" />
+        <div class="header__left-item">
+          <div class="label">当日购票量：</div>
+          <countup :endVal="1234" />
+        </div>
+        <div class="header__left-item">
+          <div class="label">未来3天购票量：</div>
+          <countup :endVal="1234" />
+        </div>
+        <div class="header__left-item">
+          <div class="label">3天后购票量：</div>
+          <countup :endVal="1234" />
+        </div>
       </div>
       <div>
         <div>
@@ -82,7 +93,7 @@
             </p>
           </div>
         </div>
-        <div class="more">查看更多</div>
+        <img class="more" src="@/assets/images/more-col.png" alt="查看更多" />
       </div>
     </div>
   </div>
@@ -98,7 +109,7 @@
 <style scoped lang="scss">
   .box-1 {
     margin-top: vh(120);
-    width: vw(800);
+    width: vw(900);
     height: vh(950);
     padding: vw(10);
     box-sizing: border-box;
@@ -107,43 +118,57 @@
     .header {
       display: flex;
       margin-top: vh(10);
-      & > div:nth-child(1) {
-        width: vw(300) !important;
+      &__left {
+        display: flex;
+        align-items: center;
+        > img {
+          width: vw(74);
+          height: auto;
+        }
+      }
+      &__left-item {
+        position: relative;
+        width: vw(120);
+        height: vh(58);
+        padding-left: vw(10);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        background-image: url('@/assets/images/ticket-item-bg.png');
+        background-size: 100% 100%;
+        .label {
+          position: absolute;
+          top: vh(-4);
+          font-weight: 400;
+          font-size: vw(14);
+          color: #ffffff;
+        }
       }
       & > div:nth-child(2) {
         flex: 1;
         display: flex;
         justify-content: space-between;
+        .label {
+          font-weight: 400;
+          font-size: vw(16);
+          color: #ffffff;
+        }
+        .value {
+          font-weight: bold;
+          font-size: vw(28);
+          color: #02f9fa;
+          text-align: center;
+          line-height: vh(60);
+        }
+        .error {
+          color: #ff4400;
+        }
       }
-      .label {
-        font-weight: 400;
-        font-size: vw(16);
-        color: #ffffff;
-      }
-      .value {
-        font-weight: bold;
-        font-size: vw(28);
-        color: #02f9fa;
-        text-align: center;
-        line-height: vh(60);
-      }
-      .error {
-        color: #ff4400;
-      }
+
       .countup-wrap {
-        margin-top: vh(10);
-        display: inline-block;
-        width: vw(40);
-        height: vh(40);
-        margin-right: vw(4);
-        border-radius: vw(4);
-        color: #ffffff;
+        color: #02f9fa;
         font-size: vw(28);
         font-weight: bold;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
       }
     }
     .main {
@@ -232,18 +257,9 @@
       }
       .more {
         cursor: pointer;
+        width: auto;
+        height: vh(100);
         margin-top: vh(12);
-        width: vw(26);
-        height: vh(98);
-        font-weight: 400;
-        font-size: vw(14);
-        line-height: vh(10);
-        color: #ffffff;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #034e99;
       }
     }
   }