yyky_new_app/pages/index/condition/blood_oxygen/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/oxygen.png" mode=""></image>
						<text>{{dayInfo.min}}</text>
					</view>
					<text>HbO2</text>
				</view>
			</view>
			<view class="box-item">
				<text>平均</text>
				<view class="item-under">
					<view class="item-under-left">
						<image src="/static/image/oxygen.png" mode=""></image>
						<text>{{dayInfo.avg}}</text>
					</view>
					<text>HbO2</text>
				</view>
			</view>
			<view class="box-item">
				<text>最高</text>
				<view class="item-under">
					<view class="item-under-left">
						<image src="/static/image/oxygen.png" mode=""></image>
						<text>{{dayInfo.max}}</text>
					</view>
					<text>HbO2</text>
				</view>
			</view>
		</view>
		<view class="word-box">
			<view class="word-title">
				测量结果仅供参考，成人静息心率：
			</view>
			<view class="word">
				<p>{{word1}}</p>
				<p>{{word2}}</p>
				<p>{{word3}}</p>
			</view>
		</view>
		<view class="list-box">
			<block v-for="(item,index) in dayInfo.list" :key="index">
				<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.bloodOxygen}}</view>
						<view>HbO2</view>
					</view>
				</view>
			</block>

		</view>
	</view>
</template>

<script>
	// import lineChart from './line_chart.vue'
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	export default {
		props: {
		    dayInfo: {
		        type: Object,
		        default: {},
		    },
		},
		// components: {
		// 	lineChart
		// },
		data() {
			return {
				list: [{
					time: '09:00',
					num: 63
				}, {
					time: '09:10',
					num: 63
				}, {
					time: '09:10',
					num: 63
				}],
				word1: '正常水平: 95%~100%;',
				word2: '高风险值:小于80%,可能会造成多器官乏氧,造成损伤;',
				word3: '调整建议:当确认存在低氧血症后，会查找病因，采取相应治疗措施。',
			}
		},
		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-around;

			.box-item {
				width: 218rpx;
				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 {
						display: flex;
						align-items: center;
						margin-right: 5rpx;
						image {
							width: 32rpx;
							height: 32rpx;
						}

						text {
							margin-left: 12rpx;
							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;

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

			.word {
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				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>