350 lines
7.9 KiB
Vue
350 lines
7.9 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="top">
|
||
<text class="overflow">{{info.nickname}}{{$t('common.infoHeight')}}{{$t('common.titleIncrement')}}</text>
|
||
</view>
|
||
<table class="table table3">
|
||
<tr>
|
||
<th>{{$t('common.infoNickname')}}</th>
|
||
<td>{{info.nickname}}</td>
|
||
<th>{{$t('common.infoGender')}}</th>
|
||
<td>{{info.gender==0?$t('common.infoUnknown'):info.gender==1?$t('common.infoMan'):$t('common.infoWoman')}}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>{{$t('common.infoBirthday')}}</th>
|
||
<td>{{info.birthday}}</td>
|
||
<th>{{$t('common.infoAge')}}</th>
|
||
<td>{{info.age?info.age:$t('common.infoAgeunit')}}</td>
|
||
</tr>
|
||
</table>
|
||
<view class="title">{{$t('Measuredheight')}}{{$t('common.titleIncrement')}}</view>
|
||
<table class="table table2">
|
||
<tr>
|
||
<th>{{$t('ProjectName')}}</th>
|
||
<th>{{$t('Result')}}</th>
|
||
<th>{{$t('Conclusion')}}</th>
|
||
</tr>
|
||
<tr>
|
||
<td>{{$t('Measuredheight')}}</td>
|
||
<td>{{height.height?height.height:0}}cm</td>
|
||
<td>{{height.statusHeight}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{$t('halfYear')}}</td>
|
||
<td>{{height.halfyearheight?height.halfyearheight:0}}cm</td>
|
||
<td>{{height.statusHalfyear}}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>{{$t('pastYear')}}</td>
|
||
<td>{{height.yearheight?height.yearheight:0}}cm</td>
|
||
<td>{{height.statusYear}}</td>
|
||
</tr>
|
||
</table>
|
||
<!-- 实测身高 -->
|
||
<view class="box">
|
||
<view class="title">
|
||
{{$t('Measuredheight')}}：{{height.height?height.height:0}}cm
|
||
<text class="btn btn2" v-if="height.statusHeight"
|
||
:style="{backgroundColor:height.colorHeight}">{{height.statusHeight}}</text>
|
||
</view>
|
||
<view class="rank" :class="{TextLeft:list.length>6}">
|
||
<view class="list" v-for="(item , index) in list" :key="index">
|
||
<view class="left"><text>{{item.minvalue}}cm</text></view>
|
||
<view class="center" :style="{backgroundColor:item.color}"><text>{{item.text}}</text></view>
|
||
<view class="right">
|
||
<view v-if="height.heightlevel==item.level" :style="{color:item.color}">
|
||
<text class="triangle_left" :style="{borderRightColor:item.color}"></text>
|
||
<text class="text">{{height.height}}</text>cm
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
{{$t("babyHeight")}}
|
||
<span :style="{color:height.colorHeight}">{{height.statusHeight}}</span>,{{$t("babydata")}}
|
||
</view>
|
||
</view>
|
||
<!-- 近半年增量 -->
|
||
<view class="box">
|
||
<view class="title">
|
||
{{$t('halfYear')}}：{{height.halfyearheight?height.halfyearheight:0}}cm
|
||
<text class="btn btn2" v-if="height.statusHalfyear"
|
||
:style="{backgroundColor:height.colorHalfyear}">{{height.statusHalfyear}}</text>
|
||
</view>
|
||
<view class="rank">
|
||
<view class="list list3" v-for="(item , ind) in height.halfyearstandlist" :key="ind">
|
||
<view class="left"><text>{{item.val}}cm</text></view>
|
||
<view class="center" :style="{backgroundColor:item.color}"><text>{{item.text}}</text></view>
|
||
<view class="right">
|
||
<view v-if="height.halfyearheightlevel==item.level" :style="{color:item.color}">
|
||
<text class="triangle_left" :style="{borderRightColor:item.color}"></text>
|
||
<text class="text">{{height.halfyearheight}}</text>cm
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
{{$t("tips.msgTitle")}}：{{$t("Recently")}}<span
|
||
:style="{color:height.colorHalfyear}">{{height.statusHalfyear}}</span>,{{$t("babydata")}}
|
||
</view>
|
||
</view>
|
||
<!-- 近一年增量 -->
|
||
<view class="box">
|
||
<view class="title">
|
||
{{$t('pastYear')}}：{{height.yearheight?height.yearheight:0}}cm
|
||
<text class="btn btn2" v-if="height.statusYear"
|
||
:style="{backgroundColor:height.colorYear}">{{height.statusYear}}</text>
|
||
</view>
|
||
<view class="rank">
|
||
<view class="list list3" v-for="(item , ind) in height.yearstandlist" :key="ind">
|
||
<view class="left"><text>{{item.val}}cm</text></view>
|
||
<view class="center" :style="{backgroundColor:item.color}"><text>{{item.text}}</text></view>
|
||
<view class="right">
|
||
<view v-if="height.yearheightlevel==item.level" :style="{color:item.color}">
|
||
<text class="triangle_left" :style="{borderRightColor:item.color}"></text>
|
||
<text class="text">{{height.yearheight}}</text>cm
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
{{$t("Recently")}}<span
|
||
:style="{color:height.colorYear}">{{height.statusYear}}</span>,{{$t("babydata")}}
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState
|
||
} from "vuex";
|
||
export default {
|
||
computed: {
|
||
...mapState(["user"]),
|
||
info() {
|
||
return this.user
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
isF4: true,
|
||
height: {},
|
||
list: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
let that = this
|
||
that.$model.getYearHeightInfo({
|
||
aud_id: that.user.id
|
||
}).then(res => {
|
||
console.log("身高增量对比", res)
|
||
if (res.code != 0) false
|
||
that.height = res.data
|
||
that.list = res.data.list.length ? res.data.list : []
|
||
})
|
||
|
||
//
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped="scoped" lang="scss">
|
||
.content {
|
||
padding: 15px;
|
||
background: #fff;
|
||
}
|
||
|
||
.title {
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
margin: 30rpx auto;
|
||
|
||
.btn {
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
padding: 2px 7px;
|
||
border-radius: 2px;
|
||
margin-left: 30rpx;
|
||
background-color: #6492f6;
|
||
}
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border: 1px solid #d69231;
|
||
border-bottom: none;
|
||
box-sizing: border-box;
|
||
border-spacing: inherit;
|
||
font-size: 12px;
|
||
height: auto;
|
||
overflow: hidden;
|
||
border-right: none;
|
||
|
||
th {
|
||
width: 20%;
|
||
float: left;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
background: #ffcf85;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #d69231;
|
||
border-right: 1px solid #d69231;
|
||
text-align: center;
|
||
}
|
||
|
||
td {
|
||
box-sizing: border-box;
|
||
background: #e4cdac21;
|
||
display: block;
|
||
float: left;
|
||
width: 30%;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
padding-right: 10px;
|
||
padding-left: 10px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
border-bottom: 1px solid #d69231;
|
||
border-right: 1px solid #d69231;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.table2 {
|
||
margin-top: 30rpx;
|
||
|
||
th,
|
||
td {
|
||
height: 35px;
|
||
line-height: 35px;
|
||
width: 33.3%;
|
||
display: inherit;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.top {
|
||
text-align: center;
|
||
line-height: 30px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
margin: 30rpx;
|
||
color: #999;
|
||
|
||
text {
|
||
width: 100%;
|
||
display: block;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.TextLeft :nth-last-child(2).list {
|
||
.center text {
|
||
position: absolute;
|
||
top: 50%;
|
||
z-index: 9;
|
||
text-align: center;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.rank {
|
||
text-align: center;
|
||
margin-top: 50rpx;
|
||
|
||
.list {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
display: flex;
|
||
margin-left: 20px;
|
||
line-height: 20px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.left {
|
||
width: 90px;
|
||
line-height: 60px;
|
||
text-align: left;
|
||
color: #666;
|
||
font-size: 13px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
|
||
.center {
|
||
width: 50px;
|
||
height: 40px;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.right {
|
||
width: 120px;
|
||
|
||
view {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.triangle_left:after {
|
||
clear: both;
|
||
content: "";
|
||
display: inline-block;
|
||
margin-top: 12px;
|
||
margin-right: 10px;
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 8px solid transparent;
|
||
border-right: 8px solid;
|
||
border-bottom: 8px solid transparent;
|
||
}
|
||
|
||
.text {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
:last-child .left {
|
||
border-bottom: none;
|
||
}
|
||
|
||
}
|
||
|
||
.list3 {
|
||
height: 60px !important;
|
||
// line-height: 60px !important;
|
||
|
||
.center {
|
||
height: 60px !important;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
font-size: 12px;
|
||
margin-top: 15px;
|
||
line-height: 25px;
|
||
color: #666;
|
||
|
||
span {
|
||
color: red;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
display: inline-block;
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
</style> |