<i18n>
{
  "zh-CN": {
    "announce": "银行公告",
    "msg1": "这是一条测试公告",
    "msg2": "另外一条测试公告",
    "msg3": "还有一条测试公告"
  },
  "zh-TW": {
    "announce": "銀行公告",
    "msg1": "這是一條測試公告",
    "msg2": "另外一條測試公告",
    "msg3": "還有一條測試公告"
  }
}
</i18n>
<template>
  <el-alert class="annnounce" :closable="false">
    <div>
      <i class="el-icon-bell" />
      <span class="announce-title">{{ t('announce') }}</span>
      <el-carousel height="20px" style="flex: 1;" direction="vertical" indicator-position="none">
        <el-carousel-item v-for="msg in msgs" :key="msg">
          {{ t(msg) }}
        </el-carousel-item>
      </el-carousel>
    </div>
  </el-alert>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue-demi'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'AnnounceIndex',
  setup () {
    const msgs = reactive([
      'msg1',
      'msg2',
      'msg3'
    ])

    const { t } = useI18n()

    return {
      msgs,
      t
    }
  }
})

</script>

<style lang="scss">
.annnounce {
  line-height: 20px;
  padding-top: 10px;
  padding: 0;
  width: 100%;
  .el-alert__content{
    width: 100%;
    .el-alert__description {
      margin: 0;
      & > div {
        display: flex;
        width: 100%;
        align-items: center;
        .announce-title {
          font-weight: bold;
          margin: 0 5px;
        }
      }
    }
  }
}
</style>
