EpicSoul/xqk/chapter6/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 == 2">
						<view class="item-box">
							<view class="box-two">
								<image @click="gotoPath('/subPackages/techan/detail?id=40')" :src="showImg('/uploads/20250904/0bfd974c3fc411811463e066c96f3d35.png')"
									mode="widthFix" class="img2-text"></image>
								<image @click="gotoPath('/subPackages/techan/detail?id=40')" style="margin-left: 39rpx;" :src="showImg('/uploads/20250904/262814b745a934c3d5bdd114109ff564.png')"
									mode="widthFix" class="img2-text"></image>
							</view>
							<view class="box-two" style="margin-top: 46rpx;">
								<image @click="gotoPath('/subPackages/techan/detail?id=40')" :src="showImg('/uploads/20250904/425a5716993c38bf8e4a6a66882d8685.png')"
									mode="widthFix" class="img2-text"></image>
								<image @click="gotoPath('/subPackages/techan/detail?id=40')" style="margin-left: 39rpx;" :src="showImg('/uploads/20250904/728878284ea30f148bc87376d85684d9.png')"
									mode="widthFix" class="img2-text"></image>
							</view>
						</view>
					</template>
					<template v-if="index== 3">
						<image style="width: 100vw;height: 100vh;padding-top: env(safe-area-inset-top);padding-bottom: env(safe-area-inset-bottom);" :src="showImg('/uploads/20250904/f5926e170dc0dc886a33422a334dae56.png')" :show-menu-by-longpress="true" mode="widthFix"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>
		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/04/fbc13519-cfe5-4088-89b2-59f138bc23cb.MP3" />
		<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: 5,
				swiperImages: [
					this.showImg('/uploads/20250904/07e27812a048efbef08593649c9e6504.png'),
					this.showImg('/uploads/20250904/5c32fa0bc571085d2c4f2b03fd6291a5.png'),
					this.showImg('/uploads/20250904/c282ee859a5da1e1eb0cc1ded809dd09.png'),
					,
				],
				inputValue: '',
				inputValues: '',
			}
		},
		methods: {
			handleJumpToPage(idx) {

			},
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
			},
		},
	}
</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;
		display: flex;
		align-items: center;
		justify-content: center;
		.item-box{
			.box-two{
				display: flex;
				align-items: center;
				justify-content: center;
				
			}
			position: absolute;
			top:289rpx;
			left:99rpx;
			.img2-text{
				width: 257rpx;
			}
		}
		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 84rpx;
		}

		.img7-1,
		.img7-2 {
			width: 437.67rpx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			top: 365rpx;
		}

		.bgm-box {
			width: 437.67rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 650rpx;
			margin: 0 auto;
			flex-wrap: wrap;

			view {
				width: 207.89rpx;
				line-height: 42.77rpx;
				border-radius: 2rpx;
				text-align: center;
				color: #fff;
				font-size: 20rpx;
				border: 1rpx solid #fff;
			}

			view:nth-child(n+3) {
				margin-top: 17rpx;
			}

			.bgm-active {
				border-color: #00C48C;
				color: #00C48C;
			}
		}

		.img7-btn {
			width: 439.66rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 244rpx;
			margin: 0 auto;
		}
	}

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

	.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 #747c8e;
			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>