<template>
  <div class="container relative">
    <div class="absolute w-full h-full">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in bannerUrls" :key="index">
          <vantImage fit="cover" class="h-full w-full" :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { Image } from "vant";

export default defineComponent({
  components: {
    vantImage: Image,
  },
  props: {
    bannerUrls: {
      type: Array as PropType<string[]>,
      default() {
        return [
          "https://img01.yzcdn.cn/vant/apple-1.jpg",
          "https://img01.yzcdn.cn/vant/apple-2.jpg",
        ];
      },
    },
  },
});
</script>

<style scoped lang="less">
.container {
  padding-bottom: 40%;
}

.my-swipe {
  height: 100%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #e8edf0;
}
</style>
