<template>
  <div class="alarm">
    <p class="alarm-title">异常点位告警排名</p>
    <ul class="alarm-list">
      <li class="alarm-item" v-for="(item, index) in 10" :key="index">
        <div class="alarm-item__rank">{{ index + 1 }}</div>
        <p class="alarm-item__label">核心监控点1</p>
      </li>
    </ul>
  </div>
</template>

<script setup></script>

<style scoped lang="scss">
  .alarm {
    &-title {
      padding-bottom: vh(10);
      font-weight: bold;
      font-size: vw(14);
      color: #37d8fc;
    }
    &-list {
      width: vw(140);
      height: vh(160);
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
    }

    &-item {
      margin-bottom: vh(10);
      display: flex;
      align-items: center;
      background: linear-gradient(90deg, #1b5ec7 0%, rgba(27, 94, 199, 0) 100%);
      &:nth-child(1) {
        background: linear-gradient(90deg, #ffc10b 0%, rgba(255, 209, 44, 0) 100%);
        .alarm-item__rank {
          background-image: url('@/assets/images/rk-1.png');
          background-size: 100% 100%;
        }
      }
      &:nth-child(2) {
        background: linear-gradient(90deg, #919191 0%, rgba(175, 175, 175, 0) 100%);
        .alarm-item__rank {
          background-image: url('@/assets/images/rk-2.png');
          background-size: 100% 100%;
        }
      }
      &:nth-child(3) {
        background: linear-gradient(90deg, #919191 0%, rgba(175, 175, 175, 0) 100%);
        .alarm-item__rank {
          background-image: url('@/assets/images/rk-3.png');
          background-size: 100% 100%;
        }
      }
    }
    &-item__rank {
      width: vw(24);
      height: vw(24);
      font-weight: bold;
      font-size: vw(14);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('@/assets/images/rk-4.png');
      background-size: 100% 100%;
    }
    &-item__label {
      font-weight: 400;
      font-size: vw(14);
      color: #ffffff;
    }
  }
</style>
