EpicSoul/xqk/chapter3/index.vue

<template>
	<view style="width: 100vw; position: relative;">
		<BackButton/>
			<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
				<swiper-item v-for="(image, index) in swiperImages" :key="index">
					<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
						<!-- 第5页内容 -->
						<template v-if="index === 2">
							<image :src="showImg('/uploads/20250904/3728c0eb6f25e433d539b0c0781039d0.png')"
								mode="widthFix" class="img2-text"></image>
								<image @click="gotoPath('/xqk/chapter4/index')" v-if="currentIndex == swiperImages.length-1"
									:src="showImg('/uploads/20250905/692abbf32b38257ffb2153651f468a63.png')" class="imgJump"
									mode=""></image>
						</template>
					
					</view>
				</swiper-item>
			</swiper>
		<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/04/fbc13519-cfe5-4088-89b2-59f138bc23cb.MP3" />
		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<MusicControl />
	</view>
</template>

<script>
	import AudioControl from '@/components/AudioControl.vue';
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	export default {
		components: {
			MusicControl,
			NavMenu,
			AudioControl
		},
		data() {
			return {
				currentIndex: 0,
				navIndex: 3,
				swiperImages: [
					this.showImg('/uploads/20250904/c07ff8c707b5368df0faaf5b425e32c3.png'),
					this.showImg('/uploads/20250904/4c2b9c8b647b736f7cb20a42aa5f8fb3.png'),
					this.showImg('/uploads/20250904/c5c2622499089799e6eaf6a704508a07.gif'),
				],
				inputValue: '',
				swipeDirection: ''
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
		},
		methods: {
			handleJumpToPage(idx) {
				this.navIndex = idx
				if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1
			},
			handleTouchStart(e) {
				this.startY = e.touches[0].clientY;
			},
			handleTouchMove(e) {
				const moveY = e.touches[0].clientY;
				this.swipeDirection = moveY < this.startY ? 'down' : 'up';
			},
			handleSwiperChange(e) {
				const newIndex = e.detail.current;
				this.currentIndex = newIndex;
			},
			submit() {
				if (!this.inputValue.trim()) return;
				this.$refs.customPopup.close()
				this.currentIndex = 6;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 原有样式保持不变 */
	.swiper {
		width: 100vw;
		height: 100vh;
	}
	.imgJump{
		position: absolute;
		bottom:100rpx;
		left:247rpx;
		width: 273rpx;
		height: 85rpx;
		opacity: 1;
		z-index: 999999;
	}
	.swiper-item {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		background-color: #000;
		background-repeat: no-repeat;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		.img2-text {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 407rpx;
			position: absolute;
			top: 500rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
		}

		// .img6-btn {
		// 	position: absolute;
		// 	width: 520.31rpx;
		// 	bottom: 210rpx;
		// 	left: 0;
		// 	right: 0;
		// 	margin: 0 auto;
		// }

		/* 其他样式保持不变 */
		.img7-box {
			position: relative;
			top: 170rpx;
			margin: 0 auto;
		}

		.img7-textBg {
			background-image: url('https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter3/img7-textBg.png');
			background-size: 100% 100%;
			padding: 30rpx 50rpx;
			font-size: 50rpx;
			text-align: center;
			color: #fff;
			width: 520.31rpx;
			margin: 0 auto;
		}

		.img7-text {
			display: block;
			margin: 60rpx auto 0;
			width: 447.4rpx;
		}

		.img8-text {
			width: 379.49rpx;
			position: absolute;
			top: 170rpx;
			left: 100rpx;
		}

		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 100rpx;
		}
	}

	.swipe-blocker {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9;
	}

	.popup-content {
		width: 85vw;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;

		.input-area {
			width: 100%;
			min-height: 180rpx;
			padding: 20rpx;
			border: 2rpx solid #eee;
			border-radius: 8rpx;
			font-size: 28rpx;
			resize: none;
			box-sizing: border-box;
			margin-bottom: 15rpx;
		}

		.word-count {
			text-align: right;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 35rpx;
		}

		.confirm-btn {
			width: 100%;
		}
	}
</style>