<template>
  <div class="box-1">
    <div class="title">核心景区视频</div>
    <ul class="list">
      <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>
    </ul>
  </div>
</template>

<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-image: url('@/assets/images/bg-1.png');
    background-size: 100% 100%;

    .title {
      width: vw(260);
      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 {
      overflow-y: auto;
      overflow-x: hidden;
      height: vh(1026);
      padding: vw(8);
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(0); /* 滚动条的宽度 */
      }

      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: #f1f1f1; /* 轨道的背景色 */
      }

      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: #888; /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }

      /* 当鼠标悬停在滚动条上时滑块的样式 */
      &::-webkit-scrollbar-thumb:hover {
        background: #555; /* 滑块的背景色 */
      }
    }

    .item {
      margin-bottom: vh(13);
      background-size: 100% 100%;
      &-title {
        margin-bottom: vh(6);
        margin-left: vw(45);
        color: #fff;
        font-size: vw(16);
        height: vh(24);
        line-height: vh(24);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      &-img {
        width: 100%;
        height: vh(164);
        display: block;
      }
    }
  }
</style>
