<template>
  <card title="校长寄语">
    <template #header-aside><nuxt-link to="/about/news?type=70">查看更多+</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">
          <nuxt-link :to="`/about/news/${item.id}?type=70`"><img :src="item.photo_uri" class="banner-img" /></nuxt-link>
        </van-swipe-item>
      </template>
    </van-swipe>
  </card>
</template>

<script>
import Card from '@/components/Card'
export default {
  components: { Card },
  data() {
    return { list: [] }
  },
  async fetch() {
    const params = { page: 1, per_page: 5, type: 70, project_id: 1013 }
    this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
  }
}
</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>
