You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
2.4 KiB
133 lines
2.4 KiB
<template>
|
|
<view class="chapter-cover">
|
|
<image class="cover-img" src="/static/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="/static/images/chapter1/abandon-btn.png" mode=""></image>
|
|
</view>
|
|
<MusicControl />
|
|
</template>
|
|
|
|
<script setup>
|
|
const goback = ()=>{
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
}
|
|
const goFeel = ()=>{
|
|
uni.navigateTo({
|
|
url:'/pages/chapter1/detail1'
|
|
})
|
|
}
|
|
const goVision = ()=>{
|
|
uni.navigateTo({
|
|
url:'/pages/chapter1/detail2'
|
|
})
|
|
}
|
|
const goHearing = ()=>{
|
|
uni.navigateTo({
|
|
url:'/pages/chapter1/detail3'
|
|
})
|
|
}
|
|
const goOlfactory = ()=>{
|
|
uni.navigateTo({
|
|
url:'/pages/chapter1/detail4'
|
|
})
|
|
}
|
|
const goGustation = ()=>{
|
|
uni.navigateTo({
|
|
url:'/pages/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>
|