h5-uniapp/pages/startup/startup.vue

<template>
	<view class="page">
		<view @click="goIndex" class="tiaoguo">{{i18n.startup.skip}}</view>
		<view class="checked">
			<view v-if="lineVisible[0]" class="txt">{{i18n.startup.line1}}</view>
			<view v-if="lineVisible[1]" class="txt">{{i18n.startup.line2}}</view>
			<view v-if="lineVisible[2]" class="txt">{{i18n.startup.line3}}</view>
			<view v-if="lineVisible[3]" class="txt">{{i18n.startup.line4}}</view>
		</view>
		<view class="foot">{{i18n.startup.slogan}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timers: '',
				lineVisible: [false, false, false, false],
				lineTimers: []
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			}
		},
		onShow() {
			// #ifdef H5
				// if(window.location.hostname == 'localhost'){
				// 	console.log('本地运行',window.location.hostname)
				// }else{
				// 	var width = uni.getSystemInfoSync().windowWidth
				// 	if(width>=500){
				// 		window.location.href='https://www.apec.io/'
				// 	}
				// }
			// #endif
			const firstLaunch = !uni.getStorageSync('startupShown')
			if (!firstLaunch) {
				// 非首次，直接进入首页
				this.goIndex()
				return
			}
			// 首次，正常显示启动页
			uni.setStorageSync('startupShown', true)
			this.timers = setTimeout(() => {
				this.goIndex()
			}, 2000)
			// 顺序加载文案
			this.lineVisible = [false, false, false, false]
			this.lineTimers = []
			for (let i = 0; i < 4; i++) {
				const t = setTimeout(() => {
					this.$set(this.lineVisible, i, true)
				}, i * 400)
				this.lineTimers.push(t)
			}
		},
		onHide() {
			clearTimeout(this.timers)
			this.lineTimers.forEach(t => clearTimeout(t))
			this.lineTimers = []
		},
		onUnload() {
			clearTimeout(this.timers)
			this.lineTimers.forEach(t => clearTimeout(t))
			this.lineTimers = []
		},
		methods: {
			goIndex() {
				clearTimeout(this.timers)
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
		}
	}
</script>

<style>
	page {
		background-image: url(/static/start.jpg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		/* background: #121418; */
	}

	.page {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.tiaoguo {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 8rpx 24rpx;
		font-size: 26rpx;
		color: rgba(255,255,255,0.92);
		position: fixed;
		top: 120rpx;
		right: 40rpx;
		border: 2rpx solid rgba(255,255,255,0.92);
		border-radius: 40rpx;
	}

	.checked {
		position: fixed;
		left: 48rpx;
		bottom: 170rpx;
		display: flex;
		flex-direction: column;
		gap: 18rpx;
	}

	.txt {
		font-size: 28rpx;
		line-height: 1.2;
		color: #2E62FF;
		opacity: 0.95;
	}

	.foot {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 46rpx;
		text-align: center;
		font-size: 30rpx;
		color: #2E62FF;
		font-weight: 500;
		letter-spacing: 1rpx;
	}

	.imgs {
		width: 330rpx;
		height: 330rpx;
		position: fixed;
		top: 400rpx;
		left: 50%;
		margin-left: -165rpx;
		animation: myfirst 0.8s;
	}

	@keyframes myfirst {
		from {
			width: 0;
			height: 0;
		}
		
		to {
			width: 330rpx;
			height: 330rpx;
		}
	}
</style>