133 lines
3.3 KiB
Vue
133 lines
3.3 KiB
Vue
<!--
|
||
* @Description:测评前置,用于测试介绍展示
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-05 09:16:10
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-13 17:26:38
|
||
-->
|
||
<template>
|
||
<view class="introduce">
|
||
<view class="intro-history" @click="info.is_answer?'toResult':''">{{info.is_answer?'测评记录':'暂未测评'}}</view>
|
||
<view class="intro-content">
|
||
<view class="intro-title">{{ info.title }}</view>
|
||
<u-read-more class="intro-des" :toggle="true" showHeight="140" ref="uReadMore" :shadowStyle="shadowStyle" color="#34ce98" textIndent="0">
|
||
<rich-text :nodes="content"></rich-text>
|
||
</u-read-more>
|
||
<u-image class="intro-img" width="100%" radius="20rpx" height="700rpx" :src="info.cover ? info.cover : require('../../static/imgs/indro.png')" :lazy-load="true" />
|
||
<view class="answer" @click="nowAn">开始测评</view>
|
||
</view>
|
||
<view class="remark">本评测会收集孕产情况、健康状况、家族病史、用药情况信息，用于开展相关评测，为你生成分析报告。</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { evaluationsInfo } from '@/apis/interfaces/evaluation.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
info: {},
|
||
content: `本测试预计完成时间5-8分钟
|
||
<br/>
|
||
—
|
||
<br/>
|
||
适用于18-65岁，存在亚健康或尿酸偏高人群`,
|
||
shadowStyle: {
|
||
backgroundImage: 'none',
|
||
paddingTop: '0',
|
||
marginTop: '20rpx'
|
||
}
|
||
};
|
||
},
|
||
onShow() {
|
||
evaluationsInfo(this.$Route.query.id).then(res => {
|
||
this.content = res.content;
|
||
this.info = res;
|
||
});
|
||
},
|
||
methods: {
|
||
nowAn() {
|
||
uni.navigateTo({
|
||
url: `/pages/evaluation/index?id=${this.$Route.query.id}`
|
||
});
|
||
},
|
||
toResult(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/evaluation/result?id=${this.$Route.query.id}`
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.introduce {
|
||
background-color: $main-color;
|
||
min-height: 100vh;
|
||
.intro-history {
|
||
padding: $padding * 1.5 $padding;
|
||
color: $window-color;
|
||
text-decoration: underline;
|
||
font-size: $title-size-lg;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
}
|
||
// 测评展示
|
||
.intro-content {
|
||
background: rgba($color: #fff, $alpha: 1);
|
||
min-height: 30vh;
|
||
padding: 0 $padding;
|
||
margin: $margin * 1.5;
|
||
border-radius: $radius;
|
||
position: relative;
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
// 标题
|
||
.intro-title {
|
||
font-size: $title-size * 1.8;
|
||
font-weight: bold;
|
||
color: $text-color;
|
||
position: relative;
|
||
top: -40rpx;
|
||
}
|
||
// 介绍
|
||
.intro-des {
|
||
line-height: $title-size * 1.8;
|
||
color: $text-color;
|
||
position: relative;
|
||
top: -10rpx;
|
||
font-size: $title-size-m;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
// 图片
|
||
.intro-img {
|
||
margin-top: $padding * 0.8;
|
||
}
|
||
// 开始测评
|
||
.answer {
|
||
position: absolute;
|
||
bottom: -30rpx;
|
||
width: 400rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
left: 50%;
|
||
text-align: center;
|
||
background: rgba($color: #fff, $alpha: 0.94);
|
||
margin-left: -200rpx;
|
||
border-radius: $radius-m * 4;
|
||
font-weight: bold;
|
||
color: $text-color;
|
||
font-size: $title-size-m + 6;
|
||
}
|
||
}
|
||
// 备注信息
|
||
.remark {
|
||
color: $text-gray;
|
||
font-size: $title-size - 6;
|
||
padding: $padding * 2 $padding;
|
||
line-height: $title-size * 1.3;
|
||
}
|
||
}
|
||
</style>
|