feat：完善首页样式

src/components/CoreVideo/index.vue

@@ -1,26 +1,41 @@
 <template>
   <div class="core-video">
     <div class="title">核心景区视频</div>
-    <ul class="list">
+    <ul class="list" v-loading="loading">
       <li
         class="item"
-        :style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
-        v-for="(item, index) in 10"
+        :style="{ backgroundImage: `url(${index == 0 ? primary : error})` }"
+        v-for="(item, index) in list"
         :key="index"
       >
-        <p class="item-title">三峡之巅-最新异常名称</p>
-        <img class="item-img" src="@/assets/images/cover.png" />
+        <div>
+          <p :class="[index % 2 === 0 ? 'item-title--primary' : 'item-title--error']">
+            三峡之巅-最新异常名称三峡之巅-最新异常名称三峡之巅-最新异常名称
+          </p>
+          <img class="item-img" src="@/assets/images/cover.png" />
+        </div>
       </li>
     </ul>
   </div>
 </template>
 
 <script setup>
-  import item1 from '@/assets/images/item-1.png'
-  import item2 from '@/assets/images/item-2.png'
+  import primary from '@/assets/images/item-1.png'
+  import error from '@/assets/images/item-2.png'
+  let loading = ref(true)
+  let list = ref(0)
+  onMounted(() => {
+    setTimeout(() => {
+      loading.value = false
+      list.value = 10
+    }, 2000)
+  })
 </script>
 
 <style lang="scss" scoped>
+  :deep(.el-loading-mask) {
+    background-color: transparent !important;
+  }
   .core-video {
     margin: vh(10);
     width: vw(300);
@@ -29,16 +44,13 @@
     background-size: 100% 100%;
 
     .title {
-      width: vw(260);
+      width: 100%;
       height: vh(26);
       text-align: center;
       line-height: vh(26);
-      margin-left: vw(32.5);
       font-size: vw(16);
       font-weight: 800;
       color: #fff;
-      background-image: url('@/assets/images/title-1.png');
-      background-size: 100% 100%;
     }
 
     .list {
@@ -69,19 +81,31 @@
     }
 
     .item {
-      margin-bottom: vh(13);
+      margin-bottom: vh(10);
+      padding: vw(10);
       background-size: 100% 100%;
+      & > div {
+        position: relative;
+      }
       &-title {
-        margin-bottom: vh(6);
-        margin-left: vw(45);
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        padding: vw(10);
         color: #fff;
-        font-size: vw(16);
-        height: vh(24);
-        line-height: vh(24);
+        font-size: vw(14);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
       }
+      &-title--error {
+        @extend .item-title;
+        background-color: rgba(226, 27, 27, 0.72);
+      }
+      &-title--primary {
+        @extend .item-title;
+        background-color: rgba(4, 30, 69, 0.72);
+      }
       &-img {
         width: 100%;
         height: vh(164);

src/components/Dropdown/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="dropdown">
+    <el-dropdown trigger="click" @command="handleCommand">
+      <div class="title-box">
+        <span class="title">{{ label }}</span>
+        <img class="icon" src="@/assets/images/arrow-down.png" />
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="(item, index) in options" :key="index" :command="item">
+            <span class="label"> {{ item.label }}</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    label: {
+      type: String,
+      default: '请选择'
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  })
+  const handleCommand = (command) => {
+    console.log(command)
+  }
+</script>
+
+<style scoped lang="scss">
+  .title-box {
+    cursor: pointer;
+    width: vw(140);
+    padding: vw(10) 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: vw(54);
+    border: 1px solid rgba(0, 114, 220, 0.3);
+    background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
+    .title {
+      font-weight: 400;
+      font-size: vw(13);
+      color: #ffffff;
+    }
+    .icon {
+      width: vw(20);
+      height: auto;
+      margin-left: vh(4);
+    }
+  }
+  .label {
+    font-weight: 400;
+    font-size: vw(24);
+  }
+  :deep(.el-dropdown-menu__item) {
+    line-height: vh(24);
+    padding: vh(10) vw(20) !important;
+  }
+</style>

src/components/ScrollNumber/index.vue

@@ -57,7 +57,6 @@
   .number-digital {
     .box-item {
       position: relative;
-      height: vh(40);
       list-style: none;
       color: #2d7cff;
       writing-mode: vertical-lr;
@@ -93,11 +92,11 @@
 
         & > i {
           position: absolute;
-          top: vh(10);
+          top: 20%;
           left: 50%;
           transform: translate(-50%, 0);
           transition: transform 1s ease-in-out;
-          letter-spacing: 10px;
+          letter-spacing: vh(17);
         }
       }
     }