<template>
  <div class="my-swipe">
    <van-swipe :autoplay="autoplay" indicator-color="#000000" @change="swipeChange">
      <van-swipe-item v-for="(item, index) in list" :key="index">
        <img class="vimg" :src="item.image" alt="极度证券">
        <!-- <van-image
          width="100%"
          height="37.3333vw"
          fit="cover"
          :src="item.image"
        /> -->
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
export default {
  props: ['list'],
  data () {
    return {
      targetIndex: 0
    }
  },
  computed: {
    autoplay() {
      if (this.list[this.targetIndex]) {
        return (this.list[this.targetIndex].s * 1000)
      }
      return 3000
    }
  },
  methods: {
    swipeChange(index) {
      this.targetIndex = index
    }
  }
}
</script>
<style lang="less" scoped>
.my-swipe {
  margin-bottom: 22px;
}
.vimg {
  display: block;
  width: 100%;
  border-radius: 8px;
}
.van-image {
  display: block;
  border-radius: 6px;
  overflow: hidden;
}
::v-deep {
  .van-swipe__indicator {
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background-color: #fff;
    opacity: 1;
  }
}
</style>