feat：新增景区页面

src/views/scenic/components/count-item.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="count-item">
+    <div class="flex align-center">
+      <img src="@/assets/images/dian.svg" />
+      <span class="label">{{ label }}</span>
+    </div>
+    <div class="count">
+      <img class="bg" src="@/assets/images/count-bg.svg" />
+      <div class="flex align-center">
+        <countup class="value" :end-val="count" />
+        <span class="suffix">{{ suffix }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import countup from 'vue-countup-v3'
+  let props = defineProps({
+    label: {
+      type: Number,
+      default: ''
+    },
+    count: {
+      type: Number,
+      default: 0
+    },
+    suffix: {
+      type: String,
+      default: ''
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .count-item {
+    flex: 1;
+    .label {
+      font-weight: 400;
+      font-size: vw(14);
+      margin-left: vw(4);
+      color: rgba(255, 255, 255, 0.9);
+    }
+    .count {
+      position: relative;
+      margin-top: vh(10);
+      z-index: 1;
+      .value {
+        padding-left: vw(20);
+        font-weight: bold;
+        font-size: vw(28);
+        color: #02f9fa;
+      }
+      .suffix {
+        margin-top: vh(4);
+        font-weight: bold;
+        font-size: vw(12);
+        color: #02f9fa;
+      }
+      .bg {
+        width: 100%;
+        height: vh(40);
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+      }
+    }
+  }
+</style>