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.
147 lines
3.1 KiB
147 lines
3.1 KiB
<template>
|
|
<view>
|
|
<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 />
|
|
</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>
|