tongan-points-h5/pages/index/index.vue

<template>
	<view class="container">
		<view class="animations" ref="apiAnimateDemo">
			<view v-for="(item,index) in animations">
				<gal-css-animate v-if="item.show" :animateName="item.name" :class='item.class' :duration="item.duration"
					:autoPlay="item.autoplay" timingFunction="ease-in">
					<image @click="toMap(item.click)" :src="item.content"
						:style="{'width':item.width,'height':item.height}"></image>
				</gal-css-animate>
			</view>
		</view>
		<view>
			<image class="boat" :src="boat"></image>
		</view>
		<view class="support">
			<view>
				<p>主办单位：中共苏州工业园区斜塘街道工作委员会</p>
				<p>承办单位：江苏有线苏州分公司</p>
			</view>

		</view>
		<view class="bg-bottom"></view>
	</view>
</template>

<script>
	import  galCssAnimate from "@/GAL/components/gal-css-animate.vue"
	export default {
		components:{
			galCssAnimate
		},
		data() {
			return {
				boat: require('../../static/xtdk/index-boat.png'),
				animations: [{
						name: 'fadeIn',
						duration: '1s',
						timer: 1000,
						content: require('../../static/xtdk/index-logo.png'),
						autoplay: false,
						class: 'logo',
						show: false,
						width: '135rpx',
						height: '100rpx'
					}, {
						name: 'zoomIn',
						duration: '1.5s',
						timer: 1500,
						content: require('../../static/xtdk/index-title.png'),
						autoplay: false,
						class: 'title',
						show: false,
						width: '514rpx',
						height: '274rpx'
					},
					{
						name: 'wobble',
						duration: '1.5s',
						timer: 1500,
						content: require('../../static/xtdk/index-btn.png'),
						autoplay: false,
						class: 'btn',
						show: false,
						width: '349rpx',
						height: '98rpx',
						click: true,
					}
				],
			}
		},
		onLoad() {
			this.play(0)
		},
		methods: {
			toMap(click) {
				if (click) {
					uni.navigateTo({
						url: '/pages/map/map'
					})
				}

			},
			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">
	.container {
		height: 100vh;
		width: 100vw;
		background: url(../../static/xtdk/index-bg.png) no-repeat top left;
		background-size: 100% 100%;
		position: relative;

		// z-index:1;
		.animations {
			position: absolute;
			z-index: 9;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;

			.logo {
				position: absolute;
				top: 100rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.title {
				position: absolute;
				top: 240rpx;
				left: 50%;
				transform: translate(-50%, 0);
			}

			.btn {
				position: absolute;
				top: 560rpx;
				left: 200rpx;
				// transform: translate(-50%, 0);
			}

		}

		//   .boat {
		//   }
		.boat {
			position: absolute;
			bottom: 100rpx;
			left: 0rpx;
			width: 207rpx;
			height: 160rpx;
			z-index: 9;
			animation: slide-in 5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
		}

		@keyframes slide-in {
			0% {
				transform: translateX(-100%);
			}
			// 50% {
			// 	transform: translateX(236rpx);
			// }
			100% {
				transform: translateX(469rpx);
			}
		}

		.bg-bottom {
			height: 628rpx;
			width: 100vw;
			background: url(../../static/xtdk/index-bg-bottom.png) no-repeat top left;
			background-size: 100% 100%;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		.support{
			position: absolute;
			bottom:10rpx;
			width:100%;
			font-size: 24rpx;
			color:#666;
			font-family: '宋体';
			opacity: 1;
			text-align: center;
			z-index:9;
		}
	}
</style>