EpicSoul/xqk/chapter1/index.vue

<template>
	<view style="width: 100vw;">
		<SwipeToNext :is-last-slide="isLastSlide"  :target-path="'/xqk/chapter2/index'">
			<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})` }">
						<!-- 	<template v-if="index === 1">
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/img2-dian.png"
							v-for="i in 3" :key="i" mode="widthFix" :class="['module'+(i+1)]"
							@click="openPopup(i+1)"></image>
					</template> -->

						<template v-if="index == 2">
							<video :src="showImg('/uploads/20250903/7af32cc4f824b724560f78c597c85864.mp4')"
								style="width: 100vw;height: 30vh;" objectFit="cover"></video>
						</template>
					</view>
				</swiper-item>
			</swiper>
		</SwipeToNext>
		<!-- 第二页气泡弹框 -->
		<!-- <uni-popup ref="chapterPopup">
			<view style="width: 100vw;height: 100vh;" @click="$refs.chapterPopup.close()">
				<image :src="getImageUrl(`img2-${popupIndex}.png`)" mode="widthFix" :class="[`img2-${popupIndex}`]">
				</image>
			</view>
		</uni-popup> -->

		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<MusicControl />
	</view>
</template>

<script>
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	import SwipeToNext from '@/components/SwipeToNext.vue';
	export default {
		components: {
			MusicControl,
			NavMenu,
			SwipeToNext
		},
		data() {
			return {
				currentIndex: 0,
				navIndex: 1,
				swiperImages: [
					this.showImg('/uploads/20250903/24303e4b7218eaf3d857c846417eb490.png'),
					this.showImg('/uploads/20250903/17495ef65648c64c31920d312301e991.png'),
					this.showImg('/uploads/20250903/92d6f1c6f8f7de040f3c31c8faf98927.png'),
				],
				animationConfig: {
					delay: 0.5,
					duration: 3,
					keyframes: {
						start: 1,
						first: 0.8,
						second: 1.2,
						third: 0.9,
						end: 1.1
					}
				},
				popupIndex: 1,
				isLastSlide:false,
			}
		},
		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
			},
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
				if (this.currentIndex == this.swiperImages.length - 1) {
					this.navIndex = 2;
					this.isLastSlide = true;
				} else {
					this.navIndex = 1
					this.isLastSlide = false;
				}
			},
			// 第二页气泡弹框
			openPopup(i) {
				this.popupIndex = i
				this.$refs.chapterPopup.open();
			},
			// 生成图片完整 URL
			getImageUrl(path) {
				if (typeof path === 'object') {
					path = path.url;
				}
				return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter1/${path}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100vw;
		height: 100vh;
	}

	.swiper-item {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		background-color: #000;
		background-repeat: no-repeat;
		position: relative;

		.module1 {
			position: absolute;
			width: 52.1rpx;
			top: 1020rpx;
			left: 235rpx;
			animation: breath1 3s ease-in-out infinite;
		}

		.module2 {
			position: absolute;
			width: 52.1rpx;
			top: 760rpx;
			left: 317rpx;
			animation: breath2 4s ease-in-out infinite;
		}

		.module3 {
			position: absolute;
			width: 52.1rpx;
			top: 700rpx;
			left: 498rpx;
			animation: breath3 5s ease-in-out infinite;
		}

		// 呼吸效果动画 - 不同频率
		@keyframes breath1 {

			0%,
			100% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.2);
			}
		}

		@keyframes breath2 {

			0%,
			100% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.2);
			}
		}

		@keyframes breath3 {

			0%,
			100% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.2);
			}
		}

		.img4-text {
			width: 428.43rpx;
			position: absolute;
			top: 170rpx;
			left: 100rpx;
		}

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

	.swiper-img {
		width: 100vw;
		height: 100vh;
	}

	.img2-1 {
		width: 267.37rpx;
		position: fixed;
		top: 395rpx;
		left: 70rpx;
	}

	.img2-2 {
		width: 332.24rpx;
		position: fixed;
		top: 210rpx;
		left: 360rpx;
	}

	.img2-3 {
		width: 600.59rpx;
		position: fixed;
		bottom: 215rpx;
		right: 40rpx;
	}
</style>