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.
173 lines
3.6 KiB
173 lines
3.6 KiB
<template>
|
|
<view class="view">
|
|
<view class="flex top">
|
|
<view class="left">
|
|
<view class="title">
|
|
<!-- todo -->
|
|
<text class="highlight">战斗世界</text>
|
|
<text>的健康测评</text>
|
|
</view>
|
|
<view class="grade">
|
|
<!-- todo: check key -->
|
|
<view class="grade-text">良好</view>
|
|
<view class="grade-border"></view>
|
|
</view>
|
|
<view class="desc">
|
|
* 报告结果基于FFQ营养测评和4大维度专业健康评估
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<progressCircle ref="progressCircle" :progress="data.score"></progressCircle>
|
|
</view>
|
|
</view>
|
|
<view class="flex">
|
|
<radarChart :score="data.scoreDetail"></radarChart>
|
|
</view>
|
|
<!-- todo: use detail -->
|
|
<view class="section" v-for="item in data.detail" :key="item.id">
|
|
<div class="title">
|
|
<div class="title-zh">{{ item.name }}</div>
|
|
<div class="title-en">{{ item.enTitle }}</div>
|
|
</div>
|
|
<div class="content">
|
|
<div :class="['tag', item.type == '1' ? 'highlight' : '']" v-for="(item, tIdx) in item.schemes" :key="tIdx">{{ item.title }}</div>
|
|
</div>
|
|
</view>
|
|
<!-- <view class="flex section">
|
|
<div class="title">
|
|
<div class="title-zh">首要目标</div>
|
|
<div class="title-en">Top priority</div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="tag highlight">{{ data.topPriority }}</div>
|
|
</div>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import progressCircle from './progressCircle.vue'
|
|
import radarChart from './radarChart.vue';
|
|
|
|
export default {
|
|
components: {
|
|
progressCircle,
|
|
radarChart,
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.view {
|
|
padding: 56rpx 24rpx 0 24rpx;
|
|
}
|
|
|
|
.top {
|
|
align-items: flex-start;
|
|
|
|
|
|
.left {
|
|
padding-right: 16rpx;
|
|
|
|
.title {
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
line-height: 1.2;
|
|
color: #252545CC;
|
|
|
|
.highlight {
|
|
margin-right: 8rpx;
|
|
font-weight: 600;
|
|
color: #252545;
|
|
}
|
|
}
|
|
|
|
.grade {
|
|
margin-top: 30rpx;
|
|
display: inline-block;
|
|
padding-left: 7rpx;
|
|
|
|
&-text {
|
|
font-size: 64rpx;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
font-family: PingFang SC;
|
|
color: transparent;
|
|
background-image: linear-gradient(to right, #4B348F, #845CFA);
|
|
background-clip: text;
|
|
display: inline-block;
|
|
}
|
|
|
|
&-border {
|
|
width: 100%;
|
|
height: 12rpx;
|
|
background-image: linear-gradient(to right, #7451DE, #B1A4FF);
|
|
box-shadow: 4rpx 4rpx 12rpx 0 #4000FF40;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
margin-top: 16rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
line-height: 1.5;
|
|
color: #989898;
|
|
}
|
|
}
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 64rpx;
|
|
|
|
.title {
|
|
font-family: PingFang SC;
|
|
line-height: 1.4;
|
|
|
|
&-zh {
|
|
font-weight: 600;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
&-en {
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.tag {
|
|
padding: 8rpx 40rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
line-height: 1.5;
|
|
color: #252545;
|
|
background: #E5E4EB;
|
|
border-radius: 30rpx;
|
|
|
|
&.highlight {
|
|
margin-left: 40rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
background: #252545;
|
|
}
|
|
}
|
|
}
|
|
</style>
|