<template>
	<view>
		<view class="box-rds cankao">
			<view class="top_title">
				参考
			</view>
			<view class="flx jcsb lt_title">
				<view class="flx ac">
					<view class="little-circle color0">
					</view>
					<view class="wz">
						偏低
					</view>
				</view>
				<view class="flx ac">
					<view class="little-circle color1">
					</view>
					<view class="wz">
						正常
					</view>
				</view>
				<view class="flx ac">
					<view class="little-circle color2">
					</view>
					<view class="wz">
						偏高
					</view>
				</view>
			</view>
			<view class="ck_tb">
				<view :class="'flx jcsb ac'" v-for="(v,index) in cankaoData" :key="index">
					<view class="tb_tt">
						{{v.name}}
					</view>
					<view class=" zzt">
						<view class="flx fd_row">
							<view v-if="idx1 > 0" :class="'zzt-body color'+(idx1 - 1)" v-for="(vv,idx1) in v.data" :key="idx1" :style="'flex:'+ ((vv - v.data[idx1-1])/v.max)">
							</view>
						</view>
						<view class="flx fd_row ">
							<view v-if="idx1 > 0" :class="'flx '+ (idx1 == 1?'jcsb': 'jc-end')"  v-for="(vv,idx1) in v.data" :key="idx1" :style="'flex:'+ (((vv - v.data[idx1-1])/v.max) + v.adjustment[idx1-1])">
							<view class="font-small">
								{{ idx1 == 1?v.data[idx1-1]:''}}
							</view>
							<view class="font-small">
								{{vv}}
							</view>
							</view>
						</view>
						
						
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		name:"cankao",
		props:{
			cankaoData:Array,
		},
		data() {
			return {
				
			};
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped="scss">
	.body-style {
		background-color: #f6f6f6;
	}
	.color0{
		background-color: #a6e6aa;
	}
	.color1{
		background-color: #29cf6f;
	}
	.color2{
		background-color: #fb8646;
	}
	.little-circle{
		border-radius: 50%;
		width: 20rpx;
		height: 20rpx;
		
	}
	.box-rds {
		background-color: #fff;
		border-radius: 40rpx;
		padding: 30rpx;
		margin: 20rpx;
		
	}
	.cankao{
		.top_title{
			padding-bottom: 20rpx;
		}
		.lt_title{
			padding:20rpx 60rpx;
		}
		.wz{
			font-size: 24rpx;
			margin-left: 10rpx;
			color: #a8a8a8;
		}
		
	}
	.ck_tb{
		.tb_tt{
			font-size: 24rpx;
		}
		.zzt{
			padding: 20rpx 0;
			width: 60%;
			.zzt-body{
				height: 10rpx;
				margin: 2rpx;
			}
			.zzt-body:nth-child(1){
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;;
			}
			.zzt-body:nth-child(3){
				border-top-right-radius: 10rpx;
				border-bottom-right-radius: 10rpx;;
			}
			.font-small{
				font-size: 24rpx;
			}
		}
	}
	
	.flx{
		display: flex;
		
	}
	.jc-end{
		justify-content: end;
	}
	.jc-start{
		justify-content: end;
	}
	.ac{
		align-items: center;
	}
	.jc{
		justify-content: center;
	}
	.jcsb{
		justify-content: space-between;
	}
	.fd_row{
		flex-direction: row;
	}
</style>
