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

<template>
	<view>
		<u-navbar title="签到记录"></u-navbar>
		<view class="screen">
			<view class="date" @click="show = true">
				<view class="text">
					{{signTime}}
				</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="record" >
			<view class="record-card">
				<view class="title-time">
					<view class="title">
						芭蕾舞新生班
					</view>
					<view class="time">
						2023-01-05 08:30-10:00
					</view>
				</view>
				
				<view class="condition">
					到课
				</view>
				
			</view>
			<view class="record-card">
				<view class="title-time">
					<view class="title">
						芭蕾舞新生班
					</view>
					<view class="time">
						2023-01-05 08:30-10:00
					</view>
				</view>
				
				<view class="condition leave">
					请假
				</view>
				
			</view>
			<view class="record-card">
				<view class="title-time">
					<view class="title">
						芭蕾舞新生班
					</view>
					<view class="time">
						2023-01-05 08:30-10:00
					</view>
				</view>
				
				<view class="condition truant">
					旷课
				</view>
				
			</view>
			<u-divider>没有更多数据了</u-divider>
		</view>
		
		
	</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.signTime = this.defaultTime;
		},
		methods: {
			confirm(params) {
				this.signTime = 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;
		}
	}
}

.record{
	margin:112rpx 32rpx 0;
	.record-card{
		margin-top: 12px;
		background-color: #fff;
		border-radius: 12px;
		padding: 12px;
		display: flex;
		justify-content: space-between;
		.title-time{
			color: rgba(51, 51, 51, 1);
			.title{
				font-weight: bold;
				font-size: 18px;
			}
			.time{
				margin-top: 16rpx;
				font-size: 12px;
			}
		}
		.condition{
			color:#0DBAC7;
			font-size: 16px;
			display: flex;
			align-items: center;
		}
		.leave{
			color: rgba(129, 97, 255, 1);
		}
		.truant{
			color: rgba(255, 61, 0, 1);
		}
	}
	
}
::v-deep.u-divider{
	margin-top: 12px !important;
}
</style>