<template>
  <card :title="$t('home.msg.title')">
    <template #header-aside><nuxt-link to="/about/news?type=img_text_school">{{ $t('viewMore') }}</nuxt-link></template>
    <van-swipe class="my-swipe" :autoplay="5000" :vertical="true" indicator-color="white">
      <template v-for="(item, index) in list">
        <van-swipe-item :key="index">
          <new-link :item="{ news: { data: item, path: '/about/news' } }">
            <img :src="item.web_img_uri" class="banner-img" />
          </new-link>
        </van-swipe-item>
      </template>
    </van-swipe>
  </card>
</template>

<script>
import Card from '@/components/Card'
import NewLink from '@/components/NewLink'
export default {
  components: { Card, NewLink },
  data() {
    return { list: [] }
  },
  async fetch() {
    const params = { project_id: process.env.projectId, type_tag: 'img_text_school' }
    this.list = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
  }
}
</script>

<style lang="scss" scoped>
.my-swipe {
  height: 1.36rem;
}
.banner-img {
  display: block;
  width: 100%;
  height: 1.36rem;
  object-fit: cover;
}
::v-deep .van-swipe__indicators--vertical {
  left: auto;
  right: 6px;
}
::v-deep .van-swipe__indicator {
  width: 2px;
  height: 2px;
  background-color: #fff;
  opacity: 1;
}
::v-deep .van-swipe__indicator--active {
  height: 10px;
  border-radius: 2px;
}
</style>
