EpicSoul/bmzm/chapter6/index.vue

<template>
    <view>
        <swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
            <swiper-item v-for="(imageUrl, index) in imageUrls" :key="index">
                <view class="swiper-item" :style="{ backgroundImage: `url(${imageUrl})` }"
				@click="index == 8 ? gotoPath('/bmzm/chapter7/index') : null">
					<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/btn-img.png" mode="aspectFill"
					 :class="['btn-img', {'btn-imgs': index == 6}]" @click="gotoPaths" v-if="index == 2 || index == 4"></image>
				</view>
            </swiper-item>
        </swiper>
		<MusicControl />
    </view>
</template>

<script>
import MusicControl from '@/components/MusicControl.vue';
export default {
	components: {
	    MusicControl
	},
    data() {
        return {
            currentIndex: 0,
            initialIndex: 1,
            popupIndex: 1,
            // 图片 URL 数组
            imageUrls: [
                "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img2.png",
                // "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img3.png",
                // "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img4.png",
                "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img5.png",
                "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img6.png",
                "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img7.png",
                "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img8.png",
                "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img9.png",
                "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img10.png",
                "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter4/img11.png",
                // 第五章图片
                "https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter5/img1.png"
            ]
        };
    },
    methods: {
        handleSwiperChange(e) {
            this.currentIndex = e.detail.current;
        },
		gotoPaths() {
			uni.switchTab({
				url: '/pages/index/sensoryStore'
			})
		}
    }
};
</script>

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

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

.btn-img {
	position: absolute;
	width: 217.71rpx;
	height: 36.95rpx;
	left: 61rpx;
	bottom: 86rpx;
}
.btn-imgs {
	left: 465rpx;
	bottom: 550rpx;
}
</style>