shanjuandong/pages/index/shan.vue

<template>
	<view class="bg">
		<image class="back-icon" src="/static/back.png" @click="goBack()"></image>
		<!-- 第三页 -->
		<view class="content">
			<image class="bg-image" src="/static/5/3.png" mode="widthFix"></image>
			<view class="btn-box">
				<image src="/static/5/btn1.png" mode="widthFix" class="btn1"></image>
				<image src="/static/5/btn2.png" mode="" class="btn2" @click="navigateToPage('/pages/index/tiansheng')">
				</image>
				<image src="/static/5/btn3.png" mode="" class="btn2" @click="navigateToPage('/pages/index/dongLing')"
					style="left: 449rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			// 页面加载时的逻辑
		},
		methods: {
			// 跳转到指定页面
			navigateToPage(url) {
				uni.navigateTo({
					url: url,
				})
			},
			
		},
		beforeDestroy() {
		}
	};
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		min-height: 100vh;
		font-size: 0;
		background: black;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.bg-image {
			width: 100%;
			min-height: 100vh;
			height: auto;
		}

		.btn_1 {
			width: 569rpx;
			height: 74rpx;
			position: absolute;
			bottom: 68rpx;
			left: 95rpx;
		}

		&.content_2 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.title_2 {
				width: 65rpx;
				height: 76rpx;
			}

			.progress-container {
				width: 387rpx;
				height: 24rpx;
				border-radius: 20rpx;
				border: 2px solid #8F76EE;
				margin: 26rpx 0;

				.progress {
					height: 100%;
					background: rgba(143, 118, 238, 0.3);
					border-radius: 20rpx;
					width: 0;
					overflow: hidden;
					position: relative;
				}
			}
		}


	}

	.content_bg {
		height: 100vh;
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.btn-box {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		bottom: 0;

		image {
			position: absolute;
		}


		.btn1 {
			width: 100%;
			top: 131rpx;
			left: 0;
			right: 0;
		}

		.btn2 {
			width: 243rpx;
			height: 74rpx;
			bottom: 223rpx;
			left: 78rpx;
		}
	}

	.dongxiao {
		position: absolute;
		right: 0;
		height: 100%;
		width: 158rpx;
	}

	.swiper-box {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.content-first {
		animation: flipFade 2s forwards;
		opacity: 1;
		transform: rotateY(0deg);
	}

	/* 定义动画 */
	@keyframes flipFade {
		0% {
			opacity: 1;
			transform: rotateY(0deg);
		}

		100% {
			opacity: 0;
			transform: rotateY(180deg);
		}
	}
</style>