TourismAppqianduan/pages/index/index.vue

<template>
	<view class="guide-bg">
		<image class="bg-img" src="/static/bg.png" mode="aspectFill"></image>
		<view class="guide-content">
			<view class="guide-title">悠游</view>
			<view class="guide-welcome">欢迎</view>
			<view class="guide-desc">
				分享你的美妙瞬间照片，<br />
				即刻开始你的交友旅程！
			</view>
			<view class="guide-line"></view>
			<button class="guide-btn" @click="goLogin">马上进入</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
</script>

<style>
	.guide-bg {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

	.bg-img {
		position: absolute;
		left: 0; top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 0;
	}

	.guide-content {
		position: relative;
		z-index: 1;
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 38vh;
	}

	.guide-title {
		font-size: 90rpx;
		color: #fff;
		font-weight: bold;
		margin-bottom: 80rpx;
		letter-spacing: 8rpx;
		text-shadow: 0 4rpx 12rpx rgba(0,0,0,0.2);
		margin-top: -10rpx;
	}

	.guide-welcome {
		font-size: 40rpx;
		color: #fff;
		margin-bottom: 80rpx;
		font-weight: 500;
	}

	.guide-desc {
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		margin-bottom: 80rpx;
		line-height: 1.8;
		text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.15);
	}

	.guide-line {
		width: 60rpx;
		height: 6rpx;
		background: #fff;
		border-radius: 3rpx;
		margin-bottom: 80rpx;
	}

	.guide-btn {
		width: 70vw;
		height: 80rpx;
		background: #7ac81e;
		color: #fff;
		font-size: 32rpx;
		border-radius: 40rpx;
		margin-top: 80rpx;
		box-shadow: 0 4rpx 16rpx rgba(122,200,30,0.15);
	}
</style>