yyky_new_app/pages/index/condition/temperature/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>°C</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>°C</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>°C</text>
				</view>
			</view>
		</view>
		<view class="word-box">
			<view class="word-title">
				测量结果仅供参考，正常体温范围: 35-37.5
			</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">
				<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.temperature}}</view>
					<view>°C</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:63},{time:'09:10',num:63},{time:'09:10',num:63}],
				word1:'100<心率值<160，称为窦性心动过速;',
				word2:'45<心率值<60称为窦性心动过缓;',
				word3:'心率值<45，应考虑有病态窦房结综合症、房室传导阻滞等情况。',
			}
		},
		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 {
						image {
							width: 32rpx;
							height: 32rpx;
						}

						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;

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