jp-education-student/pages/teacher/myClass/temperatureRecord.vue

<template>
	<view>
		<u-navbar title="测温记录"></u-navbar>
		<view class="screen">
			<view class="date" @click="show = true">
				<view class="text">
					{{temperatureTime}}
				</view>
				<view class="icon">
					<u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
				</view>
			</view>
			<u-picker mode="time" :defaultTime="defaultTime" v-model="show" :params="params"
				@confirm="confirm"></u-picker>
			<view class="course">
				<view class="text">
					所有课程
				</view>
				<view class="icon">
					<u-icon name="arrow-down-fill" color="#999999" size="10"></u-icon>
				</view>
			</view>
		</view>
		<view class="thermometry" >
			 <view class="main">
			 	<view class="item" @click="gotoUrl('pages/teacher/myClass/temperatureRecordDetails')">
			 		<view class="date">
			 			2023-01-03 08:47
			 		</view>
					<view class="temperature">
						<view class="text">
							正常 36.3
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
						</view>
					</view>
			 	</view>
				<view class="item">
					<view class="date">
						2023-01-03 08:47
					</view>
					<view class="temperature">
						<view class="text abnormal">
							异常 38.3
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="date">
						2023-01-03 08:47
					</view>
					<view class="temperature">
						<view class="text abnormal">
							异常 37.3
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
						</view>
					</view>
				</view>
				<view class="item" v-for="item in 11">
					<view class="date">
						2023-01-03 08:47
					</view>
					<view class="temperature">
						<view class="text ">
							正常 36.3
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
						</view>
					</view>
				</view>
			 </view>
			 
		</view>
		<u-divider>没有更多数据了</u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signTime: '',
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				defaultTime: '',
			}
		},
		onLoad() {
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			if(month >= 1 && month <= 9) {
				month = '0' + month;
			}
			this.defaultTime = year + '-' + month;
			this.temperatureTime = this.defaultTime;
		},
		methods: {
			confirm(params) {
				this.temperatureTime = params.year + '-' + params.month;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.screen{
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		text-align: center;
		height: 44px;
		line-height: 44px;
		position:fixed;
		top: 88rpx;
		left: 0;
		right: 0;
		z-index: 999;
		.date{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.text{
				margin-right: 8rpx;
			}
		}
		.course{
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
			.text{
				margin-right: 8rpx;
			}
		}
	}
	.thermometry{
		padding: 0 24rpx;
		margin-top: 112rpx;
		.main{
			border-radius: 12px;
			background-color: #fff;
			margin-top: 12px;
			padding: 0px 13px 0 13px;
			
			.item{
				height: 44px;
				line-height: 44px;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid rgba(229, 231, 234, 1);
				.date{
					color: rgba(51, 51, 51, 1);
				}
				.temperature{
					display: flex;
					.text{
						color: rgba(56, 158, 13, 1);
					}
					.abnormal{
						color: rgba(238, 49, 56, 1);
					}
				}
			}
		}
	}
::v-deep.u-divider{
	margin-top: 12px !important;
}
</style>