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

<template>
	<view>
		<u-navbar title="学员详情"></u-navbar>
		<view class="student-card">
			 <view class="title">
			 	<view><img src="../../../assets/img/fas fa-graduation-cap@1x.png" alt=""></view>
				<view >
					学员详情
				</view>
			 </view>
			 <view class="details">
				 <view class="photo">
				 	<img src="../../../assets/img/photo@1x.png" alt="">
				 </view>
				 <view class="information">
					 <view class="name">
					 	周梓轩
					 </view>
					 <view class="item">
					 	<view class="item-name">
					 		年龄6岁1个月
					 	</view>
						<view class="item-content">
							年龄6岁1个月
						</view>
					 </view>
					 <view class="item">
					 	<view class="item-name">
					 		联系人手机号
					 	</view>
					 	<view class="item-content">
					 		17712939405
					 	</view>
					 </view>
					 <view class="item">
					 	<view class="item-name">
					 		第二联系人手机号
					 	</view>
					 	<view class="item-content">
					 		17712905129
					 	</view>
					 </view>
					 <view class="item">
					 	<view class="item-name">
					 		接送家长姓名
					 	</view>
					 	<view class="item-content">
					 		周勇
					 	</view>
					 </view>
				 	
				 </view>
			 	
			 </view>
		</view>
	
	<view class="tab">
		<u-subsection  mode="subsection" :list="list" :current="curNow" @change="sectionChange" height="64" active-color="#0DBAC7" ></u-subsection>
	</view>
	<view class="course" v-if="this.curNow==0">
		<view class="details-box" @click="gotoUrl('pages/teacher/myClass/classInfos')">
			<view class="title-box">
				<view class="title">
					芭蕾舞新生班
				</view>
				<view class="location-time">
					<view class="location">
						文艺部
					</view>
					<view class="location">
						中国舞项目
					</view>
				
				</view>
			</view>
			
			
			<view class="number">
				学员数 <text>20</text><u-icon name="arrow-right"></u-icon>
			</view>
			
		</view>
		<view class="details-box">
			<view class="title-box">
				<view class="title">
					钢琴一对一新生班
				</view>
				<view class="location-time">
					<view class="location">
						文艺部
					</view>
					<view class="location">
						钢琴项目
					</view>
				
				</view>
			</view>
			
			
			<view class="number">
				学员数 <text>1</text><u-icon name="arrow-right"></u-icon>
			</view>
			
		</view>
		
	</view>
	
	
	<view class="record" v-if="this.curNow==1">
		<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>
		<button class="btn" @click="gotoUrl('pages/teacher/myClass/signRecord')">查看全部签到记录</button>
	</view>
	
	<view class="thermometry" v-if="this.curNow==2">
		 <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 5">
				<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>
		 <button class="btn" @click="gotoUrl('pages/teacher/myClass/temperatureRecord')">查看全部测温记录</button>
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '报名课程'
				},  {
					name: '签到记录',
				},{
					name:'测温记录'
				}],
				curNow: 0
			}
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.student-card{
		margin: 24rpx 32rpx;
		padding: 40rpx 32rpx 20rpx 32rpx; 
		background-color: #fff;
		border-radius: 12px;
		.title{
			display: flex;
			align-items: center;
			color: rgba(51, 51, 51, 1);
			font-weight: bold;
			img{
				vertical-align: middle;
				margin-right: 16rpx;
			}
		}
		.details{
			margin-top: 40rpx;
			display: flex;
			.photo{
				width: 80px;
				height: 80px;
				border-radius: 8px;
				margin-right: 32rpx;
			   overflow: hidden;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.information{
			.name{
				color: rgba(51, 51, 51, 1);
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.item{
				display: flex;
				margin-bottom: 16rpx;
				justify-content: space-between;
				.item-name{
					color: rgba(119, 119, 119, 1);
				}
				.item-content{
					color: rgba(51, 51, 51, 1);
					margin-left: 16rpx;
				}
				
			}
			
		}
	}
	
	.tab{
		padding: 0 32rpx;
		::v-deep.u-subsection{
			border-radius: 50px !important;
			
			background-color: #fff !important;
			
		}
		::v-deep.u-item{
			border: none !important;
		}
		
		
	}
	
	.details-box{
		margin: 0 32rpx;
		margin-top: 12px;
		background-color: #fff;
		padding: 12px ;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
			.title-box{
				width: 68%;
				.title{
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
					font-weight: bold;
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
			}
			
		
		
		.location-time{
			display: flex;
			margin-top: 8px;
			.location,.time{
				line-height: 20px;
				border-radius: 4px;
				background-color: rgba(241, 243, 244, 1);
				color: rgba(136, 133, 133, 1);
	            padding: 0px 8px;
				margin-right: 8px;
				font-size: 24rpx
			}
		}
	}
	.number{
		color: rgba(119, 119, 119, 1);
		font-size: 32rpx;
		text-align: right;
		text{
			display: inline-block;
			text-align: center;
			width: 40rpx;
			line-height: 40rpx;
			border-radius: 8rpx;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			 margin-left: 8rpx;
		}
	}


.record{
	margin:0 16px;
	.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);
		}
	}
	
}
.btn{
		color: rgba(13, 186, 199, 1);
		height: 40px;
		line-height: 40px;
		border-radius: 12px;
		background-color: #fff;
		margin-top: 12px;
		font-size: 14px
	}
.thermometry{
	padding: 0 12px;
	.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);
				}
			}
		}
	}
}
</style>