<template>
  <div style="height: 100%; overflow: hidden; min-width: 60px" class="carousel">
    <el-carousel
      height="50px"
      :initial-index="3"
      :interval="2000"
      :loop="true"
      direction="vertical"
      arrow="never"
      :autoplay="true"
    >
      <el-carousel-item v-for="item in props.list" :key="item">
        <div style="line-height: 50px; font-weight: bold">{{ item }}</div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    list: {
      type: Array,
      default: () => ['第一条警告', '第二条警告']
    }
  })
</script>

<style scoped lang="less">
  ::v-deep(.carousel) {
    .el-carousel__indicator {
      display: none;
    }
  }
</style>
