<!-- 消息滚动组件 -->
<script setup lang="ts" name="MessageScrolling">
import { ref } from 'vue'
const systemMsg = ref([
  { id: 1, title: '入主白宫近10日 拜登做了10件大事' },
  { id: 2, title: '全民带货？小红书外链淘宝权限将大范围开放' },
  { id: 3, title: '贾跃亭FF将在纳斯达克上市 股票代码为FFIE' },
])
</script>

<template>
  <!-- 我这个需求是有消息时才会让这个功能显示，所以使用了v-if -->
  <div v-if="systemMsg.length > 0" class="bs-sysMsg">
    <i class="el-alert__icon el-icon-warning" />
    <div class="msg__content">
      <el-carousel height="20px" direction="vertical" indicator-position="none" :autoplay="true">
        <el-carousel-item v-for="item in systemMsg" :key="item.id" class="carousel-item">
          <el-icon style="margin-right: 10px;">
            <svg-icon name="icon-radio" />
          </el-icon>
          {{ item.title }}
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 轮翻消息 */
.bs-sysMsg {
  position: relative;
  display: flex;
  width: 100%;
  padding: 8px 12px;
  border-radius: 2px;
  color: #e6a23c;
  background-color: #fdf6ec;
  overflow: hidden;
  opacity: 1;
  align-items: center;
  transition: opacity 0.2s;
}

.carousel-item {
  display: flex;
  // justify-content: center;
  align-items: center;
}

.bs-sysMsg .msg__content {
  display: table-cell;
  padding: 0 8px;
  width: 100%;
}

.bs-sysMsg .msg__content a.item {
  color: #e6a23c;
  font-size: 14px;
  opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover { text-decoration: underline; }
</style>