TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

优化

Browse Source
This commit is contained in:
张冬雪
2022-01-14 14:44:06 +08:00
parent 6c39e3484e
commit b9beabec76
3 changed files with 262 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

520
pages/evaluation/result.vue
View File

@@ -6,315 +6,235 @@
* @LastEditTime: 2022-01-13 17:30:56
-->
<template>
<view
class="answer"
v-if='loaded'
>
<!-- 头像 -->
<view class="user">
<view class="left">
<u-image
width="80rpx"
height="80rpx"
:src="info.user.avatar?info.user.avatar:require('../../static/imgs/avatar.png')"
:lazy-load="true"
shape="circle"
/>
<span class="name">{{info.user.nickname}}</span>
</view>
<view class="right">
<u-icon
name="arrow-right"
color="#34ce98"
size="14"
:bold="true"
label="重新评测"
labelPos="left"
labelSize="14"
labelColor="#34ce98"
space="1"
@click="reEva"
/>
</view>
</view>
<!-- 皮肤年龄 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">{{info.title}}{{info.explain.title}}</view>
<u-icon
name="share-square"
color="#333"
size="30"
/>
</view>
<!-- 雷达图 -->
<view class="charts-box">
<view class="charts-box">
<qiun-data-charts
type="radar"
:chartData="chartData"
:loadingType="4"
background="none"
:tooltipShow="false"
:tapLegend="false"
/>
</view>
</view>
<!-- 描述 -->
<view class="des">
<u-read-more
class="intro-des"
:toggle="true"
showHeight="140"
ref="uReadMore"
:shadowStyle="shadowStyle"
color='#34ce98'
textIndent="0"
>
<rich-text :nodes="info.explain.content"></rich-text>
</u-read-more>
</view>
</view>
<!-- 建议改进 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">建议从一下几个方面改进</view>
</view>
<block
v-for="(itme,index) in 3"
:key="index"
>
<view class="title2">
<u-image
width="34rpx"
height="34rpx"
:src="require('../../static/icon/health.png')"
:lazy-load="true"
shape="circle"
/>
<span>严厉节食导致营养不良，内分泌紊乱</span>
</view>
<!-- 描述 -->
<view class="des">
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
</view>
</block>
</view>
<!-- 营养建议 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">营养建议</view>
</view>
<block
v-for="(item,index) in 3"
:key="index"
>
<view class="title2">
<span>{{item}}. 低Gi</span>
</view>
<!-- 描述 -->
<view class="des">
饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。
</view>
</block>
</view>
<!-- 更多 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">更多护肤知识</view>
<u-icon
name="arrow-right"
color="#333"
size="20"
/>
</view>
<!-- 横向滚动推荐 -->
<scroll-view
class="scroll-view_H"
scroll-x="true"
>
<view
v-for="(item,index) in 6"
:key="index"
id="demo1"
class="scroll-view-item_H"
>
<u-image
width="180rpx"
height="180rpx"
:src="require('../../static/imgs/indro.png')"
:lazy-load="true"
radius="4"
/>
<view class="title">{{item}}正确洗脸</view>
</view>
</scroll-view>
</view>
</view>
<view class="answer" v-if="loaded">
<!-- 头像 -->
<view class="user">
<view class="left">
<u-image width="80rpx" height="80rpx" :src="info.user.avatar ? info.user.avatar : require('@/static/user/cover.png')" :lazy-load="true" shape="circle" />
<span class="name">{{ info.user.nickname }}</span>
</view>
<view class="right">
<u-icon name="arrow-right" color="#34ce98" size="14" :bold="true" label="重新评测" labelPos="left" labelSize="14" labelColor="#34ce98" space="1" @click="reEva" />
</view>
</view>
<!-- 皮肤年龄 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">{{ info.title }}{{ info.explain.title }}</view>
<u-icon name="share-square" color="#333" size="30" />
</view>
<!-- 雷达图 -->
<view class="charts-box">
<view class="charts-box"><qiun-data-charts type="radar" :chartData="chartData" :loadingType="4" background="none" :tooltipShow="false" :tapLegend="false" /></view>
</view>
<!-- 描述 -->
<view class="des">
<u-read-more class="intro-des" :toggle="true" showHeight="140" ref="uReadMore" :shadowStyle="shadowStyle" color="#34ce98" textIndent="0">
<rich-text :nodes="info.explain.content"></rich-text>
</u-read-more>
</view>
</view>
<!-- 建议改进 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content"><view class="title">建议从一下几个方面改进</view></view>
<block v-for="(itme, index) in 3" :key="index">
<view class="title2">
<u-image width="34rpx" height="34rpx" :src="require('../../static/icon/health.png')" :lazy-load="true" shape="circle" />
<span>严厉节食导致营养不良，内分泌紊乱</span>
</view>
<!-- 描述 -->
<view class="des">饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。</view>
</block>
</view>
<!-- 营养建议 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content"><view class="title">营养建议</view></view>
<block v-for="(item, index) in 3" :key="index">
<view class="title2">
<span>{{ item }}. 低Gi</span>
</view>
<!-- 描述 -->
<view class="des">饮食营养及生活方式对维持面部年轻态影响较大，建议注意食材选择，逐步清淡口味；规律作息，逐个改善不良生活习惯；帮助改善当前皮肤状态。</view>
</block>
</view>
<!-- 更多 -->
<view class="answer-item">
<!-- 标题 -->
<view class="title-content">
<view class="title">更多护肤知识</view>
<u-icon name="arrow-right" color="#333" size="20" />
</view>
<!-- 横向滚动推荐 -->
<scroll-view class="scroll-view_H" scroll-x="true">
<view v-for="(item, index) in 6" :key="index" id="demo1" class="scroll-view-item_H">
<u-image width="180rpx" height="180rpx" :src="require('../../static/imgs/indro.png')" :lazy-load="true" radius="4" />
<view class="title">{{ item }}正确洗脸</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import { evaluationsAnswersInfo } from "@/apis/interfaces/evaluation.js";
import { evaluationsAnswersInfo } from '@/apis/interfaces/evaluation.js';
export default {
data() {
return {
chartData: {},
info: {},
shadowStyle: {
backgroundImage: "none",
paddingTop: "0",
marginTop: "20rpx",
},
loaded: false,
};
},
onShow() {
this.getInfo();
},
methods: {
getInfo() {
evaluationsAnswersInfo(this.$Route.query.id).then((res) => {
this.info = res;
this.chartData = {
categories: res.veidoo.categories,
series: [
{
data: res.veidoo.data,
},
],
};
this.loaded = true;
});
},
reEva() {
uni.navigateTo({
url: `/pages/evaluation/index?id=${this.$Route.query.id}`,
});
},
},
data() {
return {
chartData: {},
info: {},
shadowStyle: {
backgroundImage: 'none',
paddingTop: '0',
marginTop: '20rpx'
},
loaded: false
};
},
onShow() {
this.getInfo();
},
methods: {
getInfo() {
evaluationsAnswersInfo(this.$Route.query.id).then(res => {
this.info = res;
this.chartData = {
categories: res.veidoo.categories,
series: [
{
data: res.veidoo.data
}
]
};
this.loaded = true;
});
},
reEva() {
uni.navigateTo({
url: `/pages/evaluation/index?id=${this.$Route.query.id}`
});
}
}
};
</script>
<style lang="scss" scoped>
.answer {
min-height: 100vh;
padding-bottom: $padding;
min-height: 100vh;
padding-bottom: $padding;
// 用户头像
.user {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: $padding;
border-bottom: solid 1rpx #f7f7f7;
margin-bottom: $margin * 1.5;
.left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
font-size: $title-size-m;
.name {
padding-left: $padding;
width: 320rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $text-color;
font-weight: bold;
}
}
.right {
border: solid 1rpx rgba($color: $main-color, $alpha: 0.6);
padding: 10rpx $padding * 0.4 10rpx $padding * 0.7;
border-radius: $padding;
}
}
// 展示列表
.answer-item {
background: rgba($color: #fff, $alpha: 1);
padding: $padding * 1.3 $padding;
margin: $margin;
border-radius: $radius;
position: relative;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
//标题
.title-content {
font-size: $title-size + 6;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.title {
color: $text-color;
font-weight: bold;
}
}
// 描述
.des {
font-size: $title-size - 4;
color: $text-color;
line-height: $title-size * 2 - 18;
// 介绍
.intro-des {
line-height: $title-size * 1.8;
color: $text-color;
position: relative;
top: -10rpx;
font-size: $title-size-m !important;
padding-bottom: 20rpx;
}
}
// 雷达图
.charts-box {
width: 100%;
height: 400rpx;
margin: $margin 0;
}
//二级标题
.title2 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 40rpx;
margin-bottom: 20rpx;
span {
font-size: $title-size-m + 2;
font-weight: bold;
margin-left: $margin * 0.3;
}
}
// 横向滚动
.scroll-view_H {
white-space: nowrap;
border-radius: $radius;
.scroll-view-item_H {
display: inline-block;
width: 180rpx;
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
box-shadow: 0 0 10rpx 4rpx
rgba($color: $main-color, $alpha: 0.1);
.title {
text-align: center;
padding: $padding * 0.6 $padding * 0.3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $text-gray;
font-size: $title-size - 4;
}
}
}
}
// 用户头像
.user {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: $padding;
border-bottom: solid 1rpx #f7f7f7;
margin-bottom: $margin * 1.5;
.left {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
font-size: $title-size-m;
.name {
padding-left: $padding;
width: 320rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $text-color;
font-weight: bold;
}
}
.right {
border: solid 1rpx rgba($color: $main-color, $alpha: 0.6);
padding: 10rpx $padding * 0.4 10rpx $padding * 0.7;
border-radius: $padding;
}
}
// 展示列表
.answer-item {
background: rgba($color: #fff, $alpha: 1);
padding: $padding * 1.3 $padding;
margin: $margin;
border-radius: $radius;
position: relative;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
//标题
.title-content {
font-size: $title-size + 6;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
.title {
color: $text-color;
font-weight: bold;
}
}
// 描述
.des {
font-size: $title-size - 4;
color: $text-color;
line-height: $title-size * 2 - 18;
// 介绍
.intro-des {
line-height: $title-size * 1.8;
color: $text-color;
position: relative;
top: -10rpx;
font-size: $title-size-m !important;
padding-bottom: 20rpx;
}
}
// 雷达图
.charts-box {
width: 100%;
height: 400rpx;
margin: $margin 0;
}
//二级标题
.title2 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
margin-top: 40rpx;
margin-bottom: 20rpx;
span {
font-size: $title-size-m + 2;
font-weight: bold;
margin-left: $margin * 0.3;
}
}
// 横向滚动
.scroll-view_H {
white-space: nowrap;
border-radius: $radius;
.scroll-view-item_H {
display: inline-block;
width: 180rpx;
margin: $margin * 1.6 $margin * 0.5 $margin * 0.3 $margin * 0.5;
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
.title {
text-align: center;
padding: $padding * 0.6 $padding * 0.3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: $text-gray;
font-size: $title-size - 4;
}
}
}
}
}
</style>