EpicSoul/xqk/chapter4/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 === swiperImages.length - 1">
							<!-- 所有maskImage，每个占一行 -->
							<view class="mask-container">
								<view class="mask-item" v-for="(maskItem, maskIndex) in maskImage"
									:key="'mask-' + maskIndex" :class="maskIndex == 2?'topImg':''">
									<image :src="maskItem.main" mode="aspectFill" class="main-image"></image>
									<image v-if="!hiddenMasks[maskIndex]" :src="maskItem.mask" mode="aspectFill"
										class="mask-image" @click="hideMask(maskIndex)"
										:style="maskIndex == 1?'opacity: 0.8':''"></image>
								</view>
							</view>
							<image @click="gotoPath('/xqk/chapter6/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: 4,
				hiddenMasks: [false, false, false, false], // 控制每个遮罩层的显示状态
				maskImage: [{
						main: this.showImg('/uploads/20250904/35745646266436c060f56067d96a3e99.png'),
						mask: this.showImg('/uploads/20250904/d6d95bbbc38b1626021d127ccf425091.png'),
					},
					{
						main: this.showImg('/uploads/20250904/5cb81451599707b7ff65178b0cc74e7b.png'),
						mask: this.showImg('/uploads/20250904/32caadcddd64aa911270f7c67960df10.png'),
					},
					{
						main: this.showImg('/uploads/20250904/c768952bdb4ae59506685fad6416adf0.png'),
						mask: this.showImg('/uploads/20250904/5e37bb76dffb86caa495361503e68cf0.png'),
					},
					{
						main: this.showImg('/uploads/20250904/09792d96ceb8503d8ea01fcc1c083399.png'),
						mask: this.showImg('/uploads/20250904/6f3062a2ed9f35aec241b2b0b3d15a58.png'),
					},
				],
				swiperImages: [
					this.showImg('/uploads/20250904/49ed0f441175de9fba8ed644962c10a2.png'),
					this.showImg('/uploads/20250904/c9e6fa6112b9803202b6d50591e7b986.png'),
					this.showImg('/uploads/20250904/48c55f56d649a6d1c92d8ed16fb4df08.png'),
					this.showImg('/uploads/20250904/645920955d2dbda9f86422e39f167da1.png'),
					this.showImg('/uploads/20250904/ec18a2d2b6a0836d2b284bf116728441.png'),
				],
				popupIndex: 1
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
		},
		methods: {
			handleJumpToPage(idx) {

			},
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
			openPopup(i) {
				this.popupIndex = i
				this.$refs.chapterPopup.open();
			},
			hideMask(index) {
				// 隐藏指定索引的遮罩层
				this.$set(this.hiddenMasks, index, true);
			},
			getImageUrl(path) {
				if (typeof path === 'object') {
					path = path.url;
				}
				return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/${path}`;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100vw;
		height: 100vh;
	}
	.imgJump{
		position: absolute;
		bottom:53rpx;
		right:0;
		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;

		.img5-text {
			width: 576.23rpx;
			position: absolute;
			top: 170rpx;
			left: 100rpx;
		}

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

		.module-box {
			position: absolute;
			top: 460rpx;
			text-align: center;

			image {
				width: 650rpx;
				margin-bottom: 80rpx;
			}
		}

		// maskImage容器样式
		.mask-container {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;
			padding-top: 20rpx;

			.topImg {
				margin-top: 211rpx;
			}

			.mask-item {
				position: relative;
				width: 693rpx;
				height: 300rpx;
				border-radius: 10rpx;
				overflow: hidden;

				.main-image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}

				.mask-image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					cursor: pointer;
					transition: opacity 0.3s ease;

					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}

	.swiper-img {
		width: 100vw;
		height: 100vh;
	}
</style>