<template>
  <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
    <template v-for="(item, index) in list">
      <van-swipe-item :key="index">
        <nuxt-link :to="`/about/news/${item.id}`"><img :src="item.photo_uri" class="banner-img" /></nuxt-link>
      </van-swipe-item>
    </template>
  </van-swipe>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  async fetch() {
    const params = { page: 1, per_page: 5, type: 69, project_id: 1013 }
    this.list = await this.$axios.$get('/api/zws/v1/cms/news', { params }).then(res => res)
  }
}
</script>

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