EpicSoul/xqk/chapter2/index.vue

<template>
	<view style="width: 100vw;">
		<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})` }">
					<template v-if="index == 1" >
						<image @click="gotoPath('/xqk/chapter5/index')" :src="showImg('/uploads/20250903/dcfd8b8a708f4f2d43edf35a906f75ba.png')" mode="widthFix" class="img1-text"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>
		<AudioControl audioSrc="https://des.dayunyuanjian.cn/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: 2,
				swiperImages: [
					this.showImg('/uploads/20250903/3bd4fe43f2a6a8806799f06a548f9477.png'),
					this.showImg('/uploads/20250903/8fe8d66210edd96a9f322a661b4d9ba4.png'),
					
				],
				// 控制图片显示的变量
				showImg7_1: false,
				showImg7_2: false,
				showImg7_3: false,
				// 存储定时器
				timers: [],
				popupIndex: 1
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			// if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
		},
		onUnload() {
			// 清除定时器
			this.timers.forEach(timer => clearTimeout(timer))
		},
		methods: {
			handleJumpToPage(idx) {
			},
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			// 第八页气泡弹框
			openPopup(i) {
				this.popupIndex = i
				this.$refs.chapterPopup.open();
			},
			getImageUrl(path) {
				if (typeof path === 'object') {
					path = path.url;
				}
				return `https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter2/${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;
		.img1-text{
			width: 484rpx;
			position: absolute;
			bottom: 100rpx;
			left: 250rpx;
		}
		.img10-text {
			width: 484rpx;
			position: absolute;
			top: 170rpx;
			left: 100rpx;
		}

		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 100rpx;
		}
		
		.module-img {
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 564.25rpx;
		}
		.module1 {
			top: 630rpx;
		}
		.module2 {
			top: 780rpx;
		}
		.module3 {
			top: 930rpx;
		}
		.module4 {
			top: 1080rpx;
		}
	}

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

	/* 渐入动画样式 */
	.fade-in-image {
		/* 初始状态：透明 */
		opacity: 0;
		/* 添加过渡动画：1秒内透明度从0到1 */
		animation: fadeIn 1s ease-out forwards;
		/* 根据需要调整图片的定位 */
		position: absolute;
	}

	/* 渐入动画关键帧 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx); /* 可选：添加轻微上移动画 */
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fade-in-image:nth-child(1) {
		width: 22.97rpx;
		top: 825rpx;
		right: 191rpx;
	}

	.fade-in-image:nth-child(2) {
		width: 34.95rpx;
		top: 790rpx;
		right: 170rpx;
	}

	.fade-in-image:nth-child(3) {
		width: 144.81rpx;
		top: 680rpx;
		right: 71rpx;
	}
</style>