examTeamApp/pageTwo/home/childPK.vue

<template>
	<view class="content">
		<view class="top">
			<text class="overflow">{{info.nickname}}身高/体重增量对比</text>
		</view>
		<table class="table table3">
			<tr>
				<th>姓名</th>
				<td>{{info.nickname}}</td>
				<th>性别</th>
				<td>{{info.gender==0?"未知":info.sex==1?"男":"女"}}</td>
			</tr>
			<tr>
				<th>出生年月</th>
				<td>{{info.birthday}}</td>
				<th>年龄</th>
				<td>{{info.age?info.age:"0岁"}}</td>
			</tr>
		</table>
		<view class="title">实测身高增量对比</view>
		<table class="table table2">
			<tr>
				<th>项目名称</th>
				<th>结果</th>
				<th>结论</th>
			</tr>
			<tr>
				<td>实测身高</td>
				<td>{{height.height?height.height:0}}cm</td>
				<td>{{height.statusHeight}}</td>
			</tr>
			<tr>
				<td>近半年增量</td>
				<td>{{height.halfyearheight?height.halfyearheight:0}}cm</td>
				<td>{{height.statusHalfyear}}</td>
			</tr>
			<tr>
				<td>近一年增量</td>
				<td>{{height.yearheight?height.yearheight:0}}cm</td>
				<td>{{height.statusYear}}</td>
			</tr>
		</table>
		<!-- 实测身高 -->
		<view class="box">
			<view class="title">
				实测身高：{{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">
				在{{user.age}}的{{user.sex==0?"未知":user.sex==1?"男":"女"}}宝宝中身高属于<span
					:style="{color:height.colorHeight}">{{height.statusHeight}}</span>,请每月记录身高，持续监测孩子生长发育情况
			</view>
		</view>
		<!-- 近半年增量 -->
		<view class="box">
			<view class="title">
				近半年增量：{{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}">{{item.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">
				提示：最近宝宝生长<span
					:style="{color:height.colorHalfyear}">{{height.statusHalfyear}}</span>,请持续跟踪宝宝数据，检测孩子生长发育情况
			</view>
		</view>
		<!-- 近一年增量 -->
		<view class="box">
			<view class="title">
				近一年增量：{{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}">{{item.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">
				最近宝宝生长<span :style="{color:height.colorYear}">{{height.statusYear}}</span>,请持续跟踪宝宝数据，检测孩子生长发育情况</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;

			.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;
			}

			.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>