EpicSoul/xrcc/chapter1/index.vue

<template>
	<view style="width: 100vw;">
		<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://des.dayunyuanjian.cn/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 === 3">
						<image src="https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter1/img4-text.png"
							mode="widthFix" class="img4-text"></image>
						<image src="https://des.dayunyuanjian.cn/epicSoul/xrcc/home/btn-img.png" mode="widthFix"
							class="btn-img" @click="gotoPath('/xrcc/chapter2/index')"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>

		<!-- 第二页气泡弹框 -->
		<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>
		<AudioControl audioSrc="https://des.dayunyuanjian.cn/data/2025/09/05/7d970645-f026-4ae0-8d60-a8b5c47bebfc.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: 1,
				swiperImages: [
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter1/img1.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter1/img2.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter1/img3s.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter1/img4.gif',
				],
				animationConfig: {
					delay: 0.5,
					duration: 3,
					keyframes: {
						start: 1,
						first: 0.8,
						second: 1.2,
						third: 0.9,
						end: 1.1
					}
				},
				popupIndex: 1
			}
		},
		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;
				} else {
					this.navIndex = 1
				}
			},
			// 第二页气泡弹框
			openPopup(i) {
				this.popupIndex = i
				this.$refs.chapterPopup.open();
			},
			// 生成图片完整 URL
			getImageUrl(path) {
				if (typeof path === 'object') {
					path = path.url;
				}
				return `https://des.dayunyuanjian.cn/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>