<template>
	<view class="content">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" :style="{'height':windowHeight}"
		 @animationfinish="animationfinish">
			<swiper-item>
				<view class="swiper-item" :style="{'height':windowHeight}">
				<view class="swimg">
					<image src="../../static/img/shan.png" mode=""></image>
				</view>
				</view>
			</swiper-item>

		</swiper>
	
	<view class="jumpover" @click="jump">跳过</view>	
	</view>

</template>

<script>
	export default {
		data() {
			return {
				windowHeight: '603px' //定义手机屏幕高度值变量
			}
		},

		onLoad() {
			var _me = this;
			uni.getSystemInfo({ //获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高
				success: function(res) {
					console.log(res.model);
					console.log(res.pixelRatio);
					console.log(res.windowWidth);
					console.log(res.windowHeight); //这里是手机屏幕高度
					console.log(res.language);
					console.log(res.version);
					console.log(res.platform);
					_me.windowHeight = res.windowHeight + 'px';
					console.log('手机屏幕高度为' + _me.windowHeight);
				}
			});
		},
		methods: {
			jump: function() {
				/**
				 * 向本地存储中设置launchFlag的值，即启动标识；
				 */
				uni.setStorage({
					key: 'launchFlag',
					data: true,
				});
				uni.navigateTo({
					
					url: '/pages/index/index'
				});

			},
			animationfinish(e) {
				console.log(JSON.stringify(e.detail.current));
				//判断到最后一张后，自动转向进入首页
				if (e.detail.current == 3) {
					console.log('动画已经播放结束');
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/main/main'
						});
					}, 1000)
				}
			}
		}
	}
</script>
<style>
	.swiper {
		width: 100%;
		/*     height: 100vw; */
		/* background: red; */
	}
	image{
		width:100%;
		height:100%;
		
	}
	.swimg{
		width:100%;
		height:100%;
	}
	.jumpover{
		position: absolute;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		border-radius: 30rpx;
		font-size: 32rpx;
		color: #5A5D62;
		border: 1rpx solid #D8D8D8;
		z-index: 999;
		right: 45rpx;
		top: 125rpx;
		color:#D8D8D8;
		font-size: 32rpx;
		text-align: center;
		line-height: 60rpx;
	}
</style>