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);