jp-education-student/pages/teacher/callNames/classCall.vue

<template>
	<view>
		<u-navbar back-text="点名签到"></u-navbar>
		<view class="main">
			<u-cell-group>
				<u-cell-item  title="班级名称" value="芭蕾舞新生班" :arrow="false"></u-cell-item>
				<u-cell-item  title="上课时间" value="2023-01-03 08:30-10:00"  :arrow="false"></u-cell-item>
				<u-cell-item  title="上课教室" value="二楼舞蹈一教室"  :arrow="false"></u-cell-item>
				<u-cell-item  class="teacher" title="任课老师" value="夏奕琳"  ></u-cell-item>
				<u-cell-item  title="学员总数" value="20人"  :arrow="false"></u-cell-item>
				<u-cell-item  title="点名结果批量设置" value="到课"  ></u-cell-item>
			</u-cell-group>
		</view>
		<view class="student-details">
			<view class="photo">
				<img src="../../../assets/img/photo@1x.png" alt="">
			</view>
			<view class="details">
				<view class="name-tel">
					<view class="name">
						周梓轩
					</view>
					<view class="tel">
						17700112233
					</view>
				</view>
				<view class="class-leave">
					<view class="class">
						剩余课时<text>40</text>
					</view>
					<view class="leave">
						已请假<text>1</text>
					</view>
				</view>
			</view>
			<view class="to-class">
				到课<u-icon name="arrow-right" color="#cccccc"></u-icon>
			</view>
		</view>
		<view class="student-details">
			<view class="photo">
				<img src="../../../assets/img/photo@1x.png" alt="">
			</view>
			<view class="details">
				<view class="name-tel">
					<view class="name">
						王紫瑄
					</view>
					<view class="tel">
						17700112233
					</view>
				</view>
				<view class="class-leave">
					<view class="class">
						剩余课时<text>40</text>
					</view>
					<view class="leave">
						已请假<text>11</text>
					</view>
				</view>
			</view>
			<view class="to-class">
				到课<u-icon name="arrow-right" color="#cccccc"></u-icon>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<view class="sign-result">
				<view class="title">
					签到结果
				</view>
				  <view class="result">
				  	<view class="item arrive">
				  		到课<text>16</text>
				  	</view>
					<view class="item leave">
						请假<text>16</text>
					</view>
					<view class="item truant">
						旷课<text>16</text>
					</view>
					<view class="item make-up">
						补课<text>16</text>
					</view>
				  </view>
			</view>
			<button @click="save()">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			save() {
				uni.navigateBack({
					url: '/pages/teacher/callNames/callNames'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		padding-left: 12px;
		background-color: #fff;
		margin-bottom: 12px;
	}

/deep/.u-cell_title{
		color: rgba(119, 119, 119, 1);
	}
	/deep/.u-cell__value{
		color: #333333;
	}
   .teacher{
	   /deep/.u-cell__value{
	   	color: #00BAC8;
	   }
   }
 
   .student-details{
	   padding: 12px 16px;
	   background-color: #fff;
	   display: flex;
	   position: relative;
	   border-bottom:  1px solid rgba(229, 231, 234, 1);;
	   .photo{
		   width: 56px;
		   height: 56px;
		   border-radius: 4px;
		   overflow: hidden;
		   margin-right: 11px;
		   img{
			   width: 100%;
			   height: 100%;
		   }
	   }
	   .details{
		   display: flex;
		   flex-direction: column;
		   justify-content: space-around;
		   .name-tel{
			   display:flex;
			   
			   .name{
				   margin-right: 12px;
				   color: rgba(51, 51, 51, 1);
				   font-size: 18px;
			   }
			   .tel{
				   color: rgba(119, 119, 119, 1);

			   }
		   }
		   .class-leave{
			   color: rgba(119, 119, 119, 1);
			   display: flex;
			   .class{
				   margin-right: 12px;
				   line-height: 14px;
				   display: flex;
				   align-items: center;
			   }
			   .leave{
				   display: flex;
				   align-items: center;
			   }
			   text{
				   display: inline-block;
				   width: 16px;
				   height: 16px;
				   line-height: 16px;
				   border-radius: 4px;
				   background-color: rgba(153, 153, 153, 1);
				   color: rgba(255, 255, 255, 1);
				   font-size: 12px;
				   text-align: center;
				   margin-left: 4px;

			   }
			   
		   }
		  
	   }
	   .to-class{
	   			    color: #333333;
				   position: absolute;
				   bottom: 34rpx;
				   right: 24rpx;
	   }
   }

// 底部
.bottom{
	padding: 12px 16px;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.sign-result{
		display: flex;
		justify-content: space-between;
		padding-bottom: 22rpx;
	  border-bottom: 2rpx solid rgba(229, 231, 234, 1);
		 .title{
			 color: rgba(119, 119, 119, 1);
			 line-height: 40rpx;
		 }
		.result{
			display: flex;
			justify-content: space-between;
			.item{
				font-size: 32rpx;
				display: flex;
				align-items: center;
				margin-left: 24rpx;
				text{
					display: inline-block;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 8rpx;
					background-color: rgba(22, 132, 252, 1);
					color: rgba(255, 255, 255, 1);
					font-size: 24rpx;
					text-align: center;
					margin-left: 6rpx;
				}
			}
			.arrive{
				color: rgba(22, 132, 252, 1);
			}
			.leave{
				color: rgba(129, 97, 255, 1);
				text{
					background-color: rgba(129, 97, 255, 1);
				}
			}
			.truant{
				color: rgba(255, 61, 0, 1);
				text{
					background-color: rgba(255, 61, 0, 1);
				}
			}
			.make-up{
				color: rgba(0, 187, 170, 1);
				text{
					background-color: rgba(0, 187, 170, 1);
				}
			}
		}
	}
	button{
		background-color: rgba(13, 186, 199, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		margin-top: 10px;
	}
}


</style>