style:首页样式

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

@@ -2,7 +2,12 @@
   <div class="box-1">
     <div class="title">核心景区视频</div>
     <ul class="list">
-      <li class="item" v-for="(item, index) in 10" :key="index">
+      <li
+        class="item"
+        :style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
+        v-for="(item, index) in 10"
+        :key="index"
+      >
         <p class="item-title">三峡之巅-最新异常名称</p>
         <img class="item-img" src="@/assets/images/img-1.png" alt="" />
       </li>
@@ -10,14 +15,20 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+  import item1 from '@/assets/images/item-1.png'
+  import item2 from '@/assets/images/item-2.png'
+
+  console.log(item1, 'item1')
+</script>
 
 <style lang="scss" scoped>
   .box-1 {
     margin: vh(10);
     width: vw(326);
     border-radius: vw(2);
-    background: linear-gradient(270deg, #08366a 0%, #004192 100%);
+    background-image: url('@/assets/images/bg-1.png');
+    background-size: 100% 100%;
 
     .title {
       width: vw(260);
@@ -61,21 +72,22 @@
 
     .item {
       margin-bottom: vh(13);
+      background-size: 100% 100%;
       &-title {
+        margin-bottom: vh(6);
+        margin-left: vw(45);
         color: #fff;
         font-size: vw(16);
-        margin-bottom: vh(6);
         height: vh(24);
         line-height: vh(24);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        border-radius: vh(2);
-        background: linear-gradient(270deg, #0063ff 0%, rgba(0, 5, 25, 0) 100%);
       }
       &-img {
         width: 100%;
         height: vh(164);
+        display: block;
       }
     }
   }