<template>
	<view>
    <view class="chapter-cover">
        <image class="cover-img" src="https://static.ticket.sz-trip.com/epicSoul/images/chapter1/cover2.png" mode=""></image>
        <view class="five-senses-content" @click="goFeel">
            <view class="box1"></view>
            <view class="senses-txt">
                触觉
            </view>
        </view>
        <view class="five-senses-content vision" @click="goVision">
            <view class="box1"></view>
            <view class="senses-txt">
                视觉
            </view>
        </view>
        <view class="five-senses-content hearing" @click="goHearing">
            <view class="box1"></view>
            <view class="senses-txt">
                听觉
            </view>
        </view>
        <view class="five-senses-content olfactory" @click="goOlfactory">
            <view class="box1"></view>
            <view class="senses-txt">
                嗅觉
            </view>
        </view>
        <view class="five-senses-content gustation" @click="goGustation">
            <view class="box1"></view>
            <view class="senses-txt">
                味觉
            </view>
        </view>
        <image @click="goback" class="btn" src="https://static.ticket.sz-trip.com/epicSoul/images/chapter1/abandon-btn.png" mode=""></image>
    </view>
    <MusicControl />
	</view>
</template>

<script>
export default {
    methods: {
        goback() {
            uni.navigateBack({
                delta: 1
            });
        },
        goFeel() {
            uni.navigateTo({
                url: '/xxdf/chapter1/detail1'
            });
        },
        goVision() {
            uni.navigateTo({
                url: '/xxdf/chapter1/detail2'
            });
        },
        goHearing() {
            uni.navigateTo({
                url: '/xxdf/chapter1/detail3'
            });
        },
        goOlfactory() {
            uni.navigateTo({
                url: '/xxdf/chapter1/detail4'
            });
        },
        goGustation() {
            uni.navigateTo({
                url: '/xxdf/chapter1/detail5'
            });
        }
    }
};
</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;
    top: 32%;
    right: 28%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vision {
    top: 54% !important;
    right: 47% !important;
}

.hearing {
    top: 62% !important;
    right: 8% !important;
}

.olfactory {
    top: 64% !important;
    right: 76% !important;
}

.gustation {
    top: 73% !important;
    right: 86% !important;
}

.box1 {
    background: #fff;
    border-radius: 50%;
    opacity: 0.4;
    width: 40rpx;
    height: 40rpx;
}

.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>