walk-suzhou-wx/pages/index/index.vue

<template>
	<view class="wrap">
		
	<view class="container">
		<image class="container-bg" :src="require('@/static/index-bg.png')"></image>
		<view class="animations" ref="apiAnimateDemo">
			<view v-for="(item,index) in animations">
				<gal-css-animate v-if="item.show" :animateName="item.name" :style="{'top':item.class=='logo1'?navBarBoxHeight+'px':''}" :class='item.class' :duration="item.duration"
					:autoPlay="item.autoplay" timingFunction="ease-in">
					<image :src="item.content" :style="{'width':item.width,'height':item.height}"></image>
				</gal-css-animate>
			</view>
		</view>

		<view class="titlewrap">
			<view class="title-progress">
				<view class="progress-text">{{progressPercentage}}%</view>
				<view class="progress-bar-container">
					<view class="progress-bar" :style="{'width':progressPercentage+'%'}"></view>
				</view>
			</view>
			<view   @click="toHome">
				<gal-css-animate v-if="showBtn" :animateName="'wobble'" class="title-btn" :duration="'1s'"
					 timingFunction="ease-in">
					<image style="width: 322rpx;height: 211rpx;margin-top:70rpx" :src="require('@/static/index-btn.png')"></image>
				</gal-css-animate>
			</view>


		</view>

		<!-- <view class="support">
			<view>
				<p>技术支撑：江苏有线苏州分公司</p>
			</view>
		</view> -->
	</view>
	</view>
</template>

<script>
	import galCssAnimate from "@/GAL/components/gal-css-animate.vue"

	export default {
		components: {
			galCssAnimate
		},
		data() {
			return {
				progressPercentage: 0,
				interval: null,
				isShare: false,
				showBtn:false,
				navBarBoxHeight:0,
				animations: [{
						name: 'flipInX',
						duration: '2s',
						timer: 1500,
						content: require('../../static/index-map.png'),
						autoplay: false,
						class: 'logo',
						show: false,
						width: '745rpx',
						height: '857rpx'
					}, 
					// {
					// 	name: 'fadeIn',
					// 	duration: '1s',
					// 	timer: 1000,
					// 	content: require('../../static/index-icon.png'),
					// 	autoplay: false,
					// 	class: 'logo1',
					// 	show: false,
					// 	width: '58rpx',
					// 	height: '86rpx'
					// },
					{
						name: 'zoomIn',
						duration: '1s',
						timer: 1500,
						content: require('../../static/index-title.png'),
						autoplay: false,
						class: 'title',
						show: false,
						width: '512rpx',
						height: '131rpx'
					}
				],
			}
		},
		async onLoad() {
			// await this.$onLaunched;
			this.play(0)
			this.start();
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarBoxHeight = MenuButton.top + MenuButton.height + 10
		},
		beforeDestroy() {
			clearInterval(this.interval);
		},
		methods: {
			toHome(){
				uni.switchTab({
					url:'/pages/home/home'
				})
			},
			start() {
				this.interval = setInterval(() => {
					if (this.progressPercentage < 100) {
						this.progressPercentage++;
					} else {
						clearInterval(this.interval);
						this.showBtn = true
					}

				}, 30);
			},
			play(index) {
				if (index > this.animations.length - 1) {
					return
				}
				this.animations[index]['show'] = true
				this.animations[index]['autoplay'] = true
				setTimeout(() => {
					this.play(index + 1);
				}, this.animations[index].timer)
			},
		},
	}
</script>

<style lang="scss">
	.wrap{
		height: 120vh;
		width: 100vw;
		position: relative;
	}
	.container {
		background: #efe9df;
		&-bg{
			position: absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
		}

		.logo {
			position: absolute;
			top: 60rpx;
			left: 0rpx;

		}

		.logo1 {

			position: absolute;
			top: 130rpx;
			right: 50rpx;

		}

		.title {
			// width: 512rpx;
			// height: 131rpx;
			position: absolute;
			top: 850rpx;
			left: 50%;
			transform: translate(-50%, 0%);
		}

		.titlewrap {
			position: absolute;
			top: 1020rpx;
			left: 50%;
			transform: translate(-50%, 0%);
			text-align: center;
			width: 70%;

			.title-btn {
				width: 322rpx;
				height: 211rpx;
				margin:0 auto;
				margin-top: 70rpx;
			}

			.title-progress {
				margin-top: 30rpx;
				.progress-text {
					text-align: center;
					color: #960909;
					font-size: 60rpx;
					margin-bottom: 20rpx
				}

				.progress-bar-container {
					width: 100%;
					height: 40rpx;
					background-color: #f7f1e2;
					overflow: hidden;
					border: 4rpx solid #d6aca1;
					border-radius: 20rpx;
					margin: 0 auto;
					font-size: 0;
				}

				.progress-bar {
					height: 100%;
					background-color: #960909;
					width: 0;
					border-radius: 0 16rpx 16rpx 0;
				}

			}

		}

		.support {
			position: absolute;
			bottom: 10rpx;
			width: 100%;
			font-size: 24rpx;
			color: #333;
			font-family: '宋体';
			opacity: 1;
			text-align: center;
			z-index: 9;
		}
	}
</style>