133 lines
3.7 KiB
Vue
133 lines
3.7 KiB
Vue
<!--
|
||
* @Description:测评前置,用于测试介绍展示
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-05 09:16:10
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-05 13:58:47
|
||
-->
|
||
<template>
|
||
<view class="introduce">
|
||
<view
|
||
class="intro-history"
|
||
@click="$Router.push({name:'EvaluationResult'})"
|
||
>测评记录</view>
|
||
<view class="intro-content">
|
||
<view class="intro-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="require('../../static/imgs/indro.png')"
|
||
:lazy-load="true"
|
||
/>
|
||
<view class="answer">开始测评</view>
|
||
</view>
|
||
<view class="remark">
|
||
本评测会收集孕产情况、健康状况、家族病史、用药情况信息，用于开展相关评测，为你生成分析报告。
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
content: `本测试预计完成时间5-8分钟
|
||
<br/>
|
||
—
|
||
<br/>
|
||
适用于18-65岁，存在亚健康或尿酸偏高人群`,
|
||
shadowStyle: {
|
||
backgroundImage: "none",
|
||
paddingTop: "0",
|
||
marginTop: "20rpx",
|
||
},
|
||
};
|
||
},
|
||
};
|
||
</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>
|