<template>
    <view class="content pr" v-if="list.length > 0">
        <swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#ff0000" :autoplay="autoplay"
            :interval="interval" :duration="duration" @change="($event) => current = $event.detail.current + 1">
            <swiper-item v-for="(item, index) in list" :key="index">
                <image :src="item"></image>
            </swiper-item>
        </swiper>
        <!-- 定位到图片的右下角 -->
        <text class="text pa cfff fwn">{{ current }}/{{ total }}</text>
    </view>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
});
const autoplay = ref(true); //自动播放
const interval = ref(3000);//3m切换
const duration = ref(500);//动画时常0.5m

//当前页
const current = ref(1);
//总页数
const total = ref(props.list.length);
</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 750rpx;

    .swiper {
        width: 100%;
        height: 100%;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .text {
        z-index: 1;
        bottom: 20rpx;
        right: 20rpx;
        color: #cccccc;
        font-size: $uni-font-size-sm;
    }
}
</style>