<template>
	<view class="banner">
		<view class="swiper_wrap">
			<swiper class='swiper' @change="e => currentNum = e.detail.current" :indicator-dots='false' :autoplay='true' interval='3000' duration='300' width="100%" height="350rpx"
				circular="true">
				<block v-for='(item,index) in imageList' :key="index">
					<swiper-item>
						<view class='exp__list'>
							<image :lazy-load="true" class="swiper_img" :src="item"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="indicator-num">
			<text class="indicator-num__text">{{imageList.length==0?'0':currentNum+1}}/{{imageList.length}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Banner",
		
		props:{
			imageList:Array,
		},
		data() {
			return {
				currentNum:0
			};
		},
    methods:{
      getVal(e){
        this.$emit('getVal',e)
      }
    }
	}
</script>

<style lang="scss" scoped>

.banner{
	position: relative;
	// background-color: #000;
	border-radius: 20rpx;
	.banner_image{
		width: 100%;
		height: 350rpx;
	}
	.indicator-num{
		position: absolute;
		bottom:20rpx;
		right: 20rpx;
		.indicator-num__text{
			font-size: 24rpx;
			color: #fff;
			padding:6rpx 20rpx;
			background: rgba(0, 0, 0,0.4);
			border-radius: 60rpx;
		}
	}
	.swiper-items{
		height: 350rpx;
		image{
			height: 350rpx;
			display: block;
		}
	}
	.swiper{
	  height: 350rpx;
	  width: 100%;
	}
	.swiper_img{
	  width: 100%;
	  height: 350rpx;
	  border-radius: 10rpx;
	}
}

</style>
