EpicSoul/bmzm/home/home.vue

<template>
    <view>
        <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 === 3">
                        <image 
                            :src="`https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4-${i + 1}.png`" 
                            v-for="i in 4" 
                            :key="i" 
                            :class="'module'+(i+1)"
                            :style="{ animationDelay: `${i * animationConfig.delay}s` }"
                            @click="setStorage(i);gotoPath(`/bmzm/chapter1/index?index=${i + 1}`)"
                        ></image>
                    </template>
                </view>
            </swiper-item>
        </swiper>
		<MusicControl />
    </view>
</template>

<script>
import MusicControl from '@/components/MusicControl.vue';
export default {
	components: {
	    MusicControl
	},
    data() {
        return {
            currentIndex: 0,
            swiperImages: [
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home1s.gif',
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home2.png',
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home3.png',
                'https://static.ticket.sz-trip.com/epicSoul/bmzm/home/home4.png'
            ],
            animationConfig: {
                delay: 0.5,
                duration: 3,
                keyframes: {
                    start: 1,
                    first: 0.8,
                    second: 1.2,
                    third: 0.9,
                    end: 1.1
                }
            }
        };
    },
	onShow() {
		uni.removeStorageSync('answerObj');
		const app = getApp();
		app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/bmzm.mp3');
		app.initBackgroundMusic(); // 初始化背景音乐
		uni.$bgMusic.play(); // 播放音乐
	},
    methods: {
        handleSwiperChange(e) {
            this.currentIndex = e.detail.current;
        },
		// 存储答案，供后面使用
		setStorage(i) {
			let text = ''
			switch (i){
				case 0:
					text = '月光白'
					break;
				case 1:
					text = '黎明青'
					break;
				case 2:
					text = '玄天黑'
					break;
				case 3:
					text = '胭脂红'
					break;
				default:
					break;
			}
			this.appendToStorage('answerObj', { answer1: text });
		}
    }
};
</script>

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

.swiper-item {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    position: relative;

    .module1 {
        position: absolute;
        width: 345.97rpx;
        height: 323.42rpx;
        top: 154rpx;
        left: 48rpx;
        animation: randomSize 3s infinite alternate;
    }
    .module2 {
        position: absolute;
        width: 271.11rpx;
        height: 293.67rpx;
        top: 276rpx;
        right: 36rpx;
        animation: randomSize 3s infinite alternate;
    }
    .module3 {
        position: absolute;
        width: 245.2rpx;
        height: 232.25rpx;
        top: 746rpx;
        left: 71rpx;
        animation: randomSize 3s infinite alternate;
    }
    .module4 {
        position: absolute;
        width: 293.19rpx;
        height: 270.15rpx;
        top: 605rpx;
        right: 115rpx;
        animation: randomSize 3s infinite alternate;
    }
}

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

@keyframes randomSize {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1.1);
    }
}
</style>