<template>
	<view>
		<view class="zaiui-swiper-background-box show" name='aa' >
			<block v-for="(item,index) in listbanner" :index="index" :key="index">
				<view class="swiper-background" :style="[{background: item.background_color }]"
				:class="index == indexs?'show':''"></view>
			</block>
		</view>
		<view class="zaiui-head-search-box"  :style="[{backgroundColor:'rgba(229, 77, 66,'+ headInfo.opacity +')'}]">
			<view class="zaiui-swiper-box">
				<swiper class="screen-swiper" autoplay circular   @change="swiperChange">
					<!-- indicator-dots轮播图圆点 -->
					<swiper-item v-for="(item,index) in listbanner" :index="index" :key="index">
						<view class="swiper-padding">
							<image :src="item.img_url" />
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listbanner: [{
						img_url: '/static/index_banner.png',
						background_color:'#c65252'
					}
				],
				headInfo: {Class: "", opacity: 0,},
				indexs: 0
			};
		},
		
		methods:{
			
			swiperChange(e) {
				this.indexs = e.detail.current;
				//向上透出模板切换事件，返回banner对象
				this.$emit('onSwiperChenge', this.list[e.detail.current])
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20rpx 0 10rpx 0;
	}
	image{
		width: 100%;
		height: 100%;
		border-radius: 30rpx;
	}
	.zaiui-swiper-box {
		.screen-swiper {
			height: 250rpx;
			padding: 20rpx;
			.swiper-padding {
				height: 250rpx;
			}
		}
	}
	.zaiui-swiper-background-box {
		position: absolute;
		height: 348rpx;
		width: 100%;
		top: 0;
		display: none;
		transition: 0s;
		.swiper-background {
			position: absolute;
			height: 100%;
			width: 100%;
			opacity: 0;
			top: 0;
			background-size: cover;
			transition: opacity .25s;
		}
		.swiper-background.show {
			opacity: 1;
			transition: opacity .25s;
		}
	}
	.zaiui-swiper-background-box.show {
		display: block;
		transition: 0s;
	}
	.zaiui-swiper-background-box.welcome {
		top: calc(var(--status-bar-height) + 101rpx);
		transition: top .25s;
	}
</style>
