EpicSoul/xxdf/chapter1/cover1.vue

<template>
    <view>
        <view class="chapter-cover">
            <image class="cover-img" src="https://des.dayunyuanjian.cn/epicSoul/image/chapter1/cover2.png" mode=""></image>
            
            <!-- 使用循环渲染五个感官按钮 -->
            <view 
                v-for="(sense, index) in senses" 
                :key="sense.id" 
                class="five-senses-content"
                :class="sense.className"
                @click="goToSense(index)"
            >
                <image 
                    src="https://des.dayunyuanjian.cn/epicSoul/circle.png" 
                    mode="" 
                    :class="{'bubble-active': loadingStates[index]}"
                ></image>
                <view class="senses-txt">
                    {{ sense.text }}
                </view>
            </view>
            
            <image @click="goback" class="btn" src="https://des.dayunyuanjian.cn/epicSoul/image/chapter1/abandon-btn.png" mode=""></image>
        </view>
        <MusicControl />
		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
		<AudioControl audioSrc="https://des.dayunyuanjian.cn/data/2025/09/05/fac61c02-6cfd-41bf-9270-0ecd69881da2.MP3" />
    </view>
</template>

<script>
import MusicControl from '@/components/MusicControl.vue';
import NavMenu from '../components/NavMenu.vue';
import AudioControl from '@/components/AudioControl.vue';
export default {
    components: {
        MusicControl,
		NavMenu,
		AudioControl
    },
    data() {
        return {
            // 感官按钮配置
            senses: [
                { id: 'feel', text: '触觉', className: '', path: '/xxdf/chapter1/detail1' },
                { id: 'vision', text: '视觉', className: 'vision', path: '/xxdf/chapter1/detail2' },
                { id: 'hearing', text: '听觉', className: 'hearing', path: '/xxdf/chapter1/detail3' },
                { id: 'olfactory', text: '嗅觉', className: 'olfactory', path: '/xxdf/chapter1/detail4' },
                { id: 'gustation', text: '味觉', className: 'gustation', path: '/xxdf/chapter1/detail5' }
            ],
            // 使用数组管理所有加载状态
            loadingStates: Array(5).fill(false)
        }
    },
    methods: {
        goback() {
            const app = getApp();
            app.globalData.mainSliderIndex = 2;
            uni.redirectTo({
            	url: '/xxdf/home/home'
            });
        },
        // 统一的点击处理函数
        goToSense(index) {
            // 设置对应按钮的加载状态
            this.loadingStates[index] = true;
			this.$forceUpdate()
            
            setTimeout(() => {
                // 恢复加载状态
                this.loadingStates[index] = false;
				this.$forceUpdate()
                // 跳转到对应页面
                uni.navigateTo({
                    url: this.senses[index].path
                });
            }, 1000);
        }
    }
};
</script>

<style scoped>
.chapter-cover {
    width: 100%;
    height: 100vh;
    position: relative;
}

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

.five-senses-content {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.five-senses-content image {
    width: 40rpx;
    height: 40rpx;
    transition: transform 1s;
}
/* 气泡效果 */
.bubble-active {
    transform: scale(1.5);
}

/* 定位样式 */
.five-senses-content {
    top: 32%;
    right: 28%;
}
.vision {
    top: 54%;
    right: 47%;
}
.hearing {
    top: 62%;
    right: 8%;
}
.olfactory {
    top: 64%;
    right: 76%;
}
.gustation {
    top: 73%;
    right: 86%;
}

.senses-txt {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 20rpx;
}

.btn {
    position: absolute;
    left: 50%;
    bottom: 11%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 280rpx;
    height: 60rpx;
}
</style>