<template>
	<view>
		<u-transition :show="show" mode="fade-down">
			<view>
				<image src="@/static/image/home/line.png" mode="" class="line"></image>
				<image src="@/static/image/home/flower.png" mode="" class="flower"></image>
			</view>
			<view class="text">正在跳转至首页</view>
		</u-transition>
		<u-transition :show="showTxt" mode="fade-down">
			
			<view class="title-one">- - -验证成功欢迎来到- - -</view>
			<image class="img" src="@/static/image/home/fonchain.png"></image>
			<image class="logo" src="@/static/image/home/logo.png"></image>
		</u-transition>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			showTxt:false
		};
	},
	onShow() {
		setTimeout(() => {
			this.show = true;
		}, 400);
		setTimeout(() => {
			this.showTxt = true;
		}, 500);
		setTimeout(() => {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}, 2000);
	},
	methods: {
		
	}
};
</script>

<style lang="scss">
page {
	background: url('@/static/image/home/welcomeBg.png') no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	height: 100vh;
	// border: 1px solid red;
}
.line {
	width: 2rpx;
	height: 164rpx;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
}
.flower {
	width: 43rpx;
	height: 43rpx;
	position: absolute;
	left: 47%;
	top: 167rpx;
	// transform: translateX(-50%);
	animation: fadenum 1s infinite;
}
.text {
	position: absolute;
	left: 37%;
	top: 227rpx;
	
}
.title-one{
	color: #558BF2;
	position: absolute;
	font-size: 33upx;
	left: 26%;
	top: 600rpx;
}
.img{
	width: 500upx;
	height: 80upx;
	position: absolute;
	left: 16%;
	top: 650rpx;
}
.logo{
	width: 200upx;
	height: 55upx;
	position: absolute;
	left: 36%;
	bottom: 20rpx;
}
@keyframes fadenum {
	100% {
		transform: rotate(360deg);
	}
}
</style>