yyky_new_app/pages/index/condition/blood_pressure/components/content.vue

<template>
	<view class="content-box">
		<!-- <line-chart></line-chart> -->
		<view class="number-box">
			<view class="box-item">
				<text>最小</text>
				<view class="item-under">
					<view class="item-under-left">
						<image src="/static/image/contract.png" mode=""></image>
						<text>{{dayInfo.hypotensionMax}}</text>
						<text>收缩压</text>
					</view>
					<text>mmHg</text>
				</view>
				<view class="item-under">
					<view class="item-under-left">
						<image src="/static/image/diastole.png" mode=""></image>
						<text>{{dayInfo.hypotensionMin}}</text>
						<text>舒张压</text>
					</view>
					<text>mmHg</text>
				</view>
			</view>
			<view class="box-item">
				<text>最大</text>
				<view class="item-under">
					<view class="item-under-left">
						<image src="/static/image/contract.png" mode=""></image>
						<text>{{dayInfo.hypertensionMax}}</text>
						<text>收缩压</text>
					</view>
					<text>mmHg</text>
				</view>
				<view class="item-under">
					<view class="item-under-left">
						<image src="/static/image/diastole.png" mode=""></image>
						<text>{{dayInfo.hypertensionMin}}</text>
						<text>舒张压</text>
					</view>
					<text>mmHg</text>
				</view>
			</view>
		</view>
		<view class="word-box">
				<p>{{word1}}</p>
				<p>{{word2}}</p>
				<p>{{word3}}</p>
				<p>{{word4}}</p>
				<p>{{word5}}</p>
				<p>{{word6}}</p>
		</view>
		<view class="list-box" >
			<block v-for="(item,index) in dayInfo.list">
				<view class="list-box-item">
				<view class="list-box-left">
					<image src="/static/image/hearticon.png" mode=""></image>
					<text>{{formatDate(item.createTime)}}</text>
				</view>
				<view class="list-box-right">
					<view class="num">{{item.hypertension}} / {{item.hypotension}}</view>
					<view>mmHg</view>
				</view>
			</view>
			</block>
			
		</view>
	</view>
</template>

<script>
	// import lineChart from './line_chart.vue'
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	export default {
		// components: {
		// 	lineChart
		// },
		props: {
		    dayInfo: {
		        type: Object,
		        default: {},
		    },
		},
		data() {
			return {
				list:[{time:'09:00',num:'111/80'},{time:'09:10',num:'111/80'},{time:'09:10',num:'111/80'}],
				word1:'成年人正常值，收缩压<1200，舒张压<80',
				word2:'正常高值，收缩压120-139，舒张压80-89',
				word3:'高血压，收缩压>120,舒张压>80',
				word4:'1级高血压，收缩压140-159，舒张压90-99',
				word5:'2级高血压，收缩压160-179，舒张压100-109',
				word6:'3级高血压，收缩压>180，舒张压>110',
			}
		},
		onLoad() {

		},
		methods: {
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			},
		},
	}
</script>

<style lang="scss">
	.content-box {
		background-color: #F7F7F7;
		// height: 100vh;

		.number-box {
			// height: 131rpx;
			background-color: #fff;
			display: flex;
			margin-top: 16rpx;
			padding: 16rpx 32rpx;
			justify-content: space-between;

			.box-item {
				// width: 218rpx;
				width: 48%;
				// height: 99rpx;
				padding: 10rpx 16rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
				border: 2rpx solid rgba(119, 119, 119, 0.3);
				text{
					font-size: 24rpx;
					font-weight: 400;
					color: #777777;
				}
				.item-under {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;

					.item-under-left {
						image {
							width: 32rpx;
							height: 28rpx;
						}

						text {
							margin-left: 15rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: #000000;
						}
					}

					text {
						font-size: 24rpx;
						font-weight: 400;
						color: #777777;
					}
				}
			}
		}

		.word-box {
			margin-top: 16rpx;
			background-color: #fff;
			padding: 32rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #000000;
			line-height: 40rpx;

			// .word-title {
			// 	font-size: 32rpx;
			// 	font-weight: 600;
			// 	color: #000000;
			// }

			// .word {
			// 	font-size: 28rpx;
			// 	font-weight: 400;
			// 	color: #000000;
			// 	margin-top: 18rpx;
			// }
		}

		.list-box {
			margin-top: 16rpx;
			background-color: #fff;
			padding:0 32rpx;
			

			.list-box-item {
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.list-box-left {
					display: flex;
					align-items: center;
					image{
						width: 48rpx;
						height: 48rpx;
					}
					text{
						margin-left: 32rpx;
						font-size: 32rpx;
						font-weight: 400;
						color: #000000;
					}
				}
				.list-box-right{
					display: flex;
					font-size: 32rpx;
					font-weight: 600;
					color: #000000;
					.num{
						margin-right: 30rpx;
					}
					
				}
			}

		}
	}
</style>