班级点名页面改版

pages/teacher/callNames/classCall.vue

@@ -2,7 +2,85 @@
 	<view>
 		<u-navbar title="班级点名"></u-navbar>
 		<view class="main">
-			<u-cell-group>
+			<view class="infos">
+				<view class="class">
+					芭蕾舞新生班
+				</view>
+				<view class="item">
+					<view class="title">
+						上课时间：
+					</view>
+					<view class="value">
+						2023-01-03 08:30-10:00
+						
+					</view>
+				</view>
+				<view class="item">
+					<view class="title">
+						上课教室：
+					</view>
+					<view class="value">
+						二楼舞蹈一教室
+					</view>
+				</view>
+				<view class="item">
+					<view class="title">
+						授课老师：
+					</view>
+					<view class="value">
+						夏奕琳
+					</view>
+				</view>
+				<view class="item">
+					<view class="title">
+						学员总数：
+					</view>
+					<view class="value">
+						20人
+					</view>
+				</view>
+			</view>
+			<view class="tabs">
+				<u-tabs bar-width="80" inactive-color="#777777" active-color="#4F3C27" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+			</view>
+			<view class="details">
+				<view class="item" v-for="item in 2">
+					<view class="picture">
+						<img src="../../../assets/img/photo@1x.png" alt="">
+					</view>
+					<view class="info">
+						<view class="name-tel">
+							<view class="name">
+								周梓轩
+							</view>
+							<view class="tel">
+								<view class="img">
+									<img src="../../../assets/img/riLine-smartphone-line@1x.png" alt="">
+								</view>
+								<view>17700112233</view>
+							</view>
+						</view>
+						<view class="else">
+							<view class="remain">
+								<view>剩余课时</view>
+								<view class="num">40</view>
+							</view>
+							<view class="leaved">
+								<view>已请假</view>
+								<view class="num">3</view>
+							</view>
+						</view>
+						
+					</view>
+					<view class="state">
+												<view class="text">到课</view>
+												<view class="icon">
+													<u-icon name="arrow-right" color="#cccccc"></u-icon>
+												</view>
+											</view>
+				</view>
+			</view>
+			<!-- <u-cell-group>
 				<u-cell-item title="班级名称" :value="classList.className" :arrow="false"></u-cell-item>
 				<u-cell-item title="上课时间" :value="scheduleSheet.courseDate+' '+scheduleSheet.coursePeriods" :arrow="false"></u-cell-item>
 				<u-cell-item title="上课教室" :value="classRoom.name" :arrow="false"></u-cell-item>
@@ -10,7 +88,7 @@
 					@click="gotoUrl('pages/teacher/myCourse/teacherHomepage?id='+employee.employeeId)"></u-cell-item>
 				<u-cell-item title="学员总数" :value="studentList.length+'人'" :arrow="false"></u-cell-item>
 				<u-cell-item title="点名结果批量设置" :value="resultName" @click="show = true"></u-cell-item>
-			</u-cell-group>
+			</u-cell-group> -->
 		</view>
 		<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selectorObj" range-key="cateName"
 			@confirm="confirm"></u-picker>
@@ -74,12 +152,30 @@
 					<view class="itemClass truant">
 						旷课<text>{{scheduleSheet.kkNum!=null?scheduleSheet.kkNum:'0'}}</text>
 					</view>
-					<view class="itemClass make-up">
+					<!-- <view class="itemClass make-up">
 						补课<text>{{scheduleSheet.bkNum!=null?scheduleSheet.bkNum:'0'}}</text>
+					</view> -->
+					<view class="itemClass stop">
+						停课<text>{{scheduleSheet.bkNum!=null?scheduleSheet.bkNum:'0'}}</text>
 					</view>
 				</view>
 			</view>
-			<button @click="save()">保存</button>
+			<view class="set-btn">
+				<view class="set">
+					<view class="set-text">点名结果批量设置</view>
+					<view class="choose">
+						<view class="text">
+							到课
+						</view>
+						<view class="icon">
+							<u-icon size="28" color="#cccccc" name="arrow-right"></u-icon>
+						</view>
+					</view>
+				</view>
+				<view class="btn">
+					<button @click="save()">保存</button>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -116,7 +212,16 @@
 						cateName: '补课',
 						id: '4'
 					}
-				]
+				],
+					list: [{
+									name: '正常18'
+								}, {
+									name: '请假1	'
+								}, {
+									name: '停课1',
+									
+								}],
+								current: 0
 			}
 		},
 		onLoad(op) {
@@ -184,15 +289,124 @@
 					this.studentId = '';
 				}
 			},
+			change(index) {
+							this.current = index;
+						}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
 	.main {
-		padding-left: 12px;
-		background-color: #fff;
-		margin-bottom: 12px;
+		
+		background: linear-gradient(180deg, rgba(13,186,199,1) 0%,rgba(244,246,246,1) 100%);
+		.infos{
+			color: #fff;
+			padding: 32rpx;
+			.class{
+				color: rgba(255, 255, 255, 1);
+				font-size: 48rpx;
+				font-weight: bold;
+				margin-bottom: 16rpx;
+			}
+			.item{
+				display: flex;
+				margin-top: 16rpx;
+				.value{
+					margin-left: 8rpx;
+				}
+			}
+		}
+		.tabs{
+			border-radius: 16px 16px 0px 0px;
+			background-color: rgba(255, 255, 255, 1);
+			height: 88rpx;
+			padding: 0 170rpx;
+		}
+		.details{
+			background-color: #fff;
+			.item{
+				padding: 24rpx 32rpx;
+				display: flex;
+				border-top: 1px solid rgba(229, 231, 234, 1);
+				.picture{
+					width: 112rpx;
+					height: 112rpx;
+					img{
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.info{
+					margin-left: 24rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-around;
+					.name-tel{
+						display: flex;
+						align-items: center;
+						
+						.name{
+							color: rgba(51, 51, 51, 1);
+							font-size: 18px;
+							font-weight:bold
+						}
+						.tel{
+							color: rgba(119, 119, 119, 1);
+                            display: flex;
+							align-items: center;	
+							line-height: 32rpx; 
+							margin-left: 24rpx;
+							.img{
+								width: 32rpx;
+								height: 32rpx;
+								margin-right: 8rpx;
+								img{
+									width: 100%;
+									height: 100%;
+									
+								}
+							}
+						}
+					}
+					.else{
+						display: flex;
+						align-items: center;
+						.remain,.leaved{
+							display: flex;
+							color: rgba(119, 119, 119, 1);
+							align-items: center;
+							margin-right:24rpx;
+							.num{
+								width: 40rpx;
+								height: 32rpx;
+								line-height: 32rpx;
+								border-radius: 4px;
+								background-color: rgba(153, 153, 153, 1);
+								color: rgba(255, 255, 255, 1);
+								font-size: 24rpx;
+								text-align: center;
+								margin-left: 8rpx;
+							}
+						}
+						
+					}
+				
+				}
+				.state{
+					display: flex;
+					align-items: center;
+					margin-left: auto;
+					
+					.text{
+						color: rgba(51, 51, 51, 1);
+					}
+					.icon{
+						margin-left: 8rpx;
+					}
+				}
+			}
+		}
 	}
 
 	/deep/.u-cell_title {
@@ -364,14 +578,51 @@
 						background-color: rgba(0, 187, 170, 1);
 					}
 				}
+				.stop{
+					color: rgba(238, 49, 56, 1);
+					text{
+						background-color: rgba(238, 49, 56, 1); ;
+					}
+				}
 			}
 		}
 
-		button {
-			background-color: rgba(13, 186, 199, 1);
-			color: rgba(255, 255, 255, 1);
-			font-size: 16px;
-			margin-top: 10px;
+		.set-btn{
+			display: flex;
+			 margin-top: 20rpx;
+			.set{
+				display: flex;
+				align-items: center;
+				.set-text{
+					color: rgba(51, 51, 51, 1);
+				}
+				.choose{
+					margin-left: 34rpx;
+					display: flex;
+					align-items: center;
+					height: 20px;
+					.text{
+						color: rgba(13, 186, 199, 1);
+						font-weight: bold;
+					}
+					.icon{
+						margin-left: 8rpx;
+					}
+				}
+			}
+			.btn{
+				width: 272rpx;
+				margin-left: auto;
+			}
+			button {
+				
+				border-radius: 50px;
+				background-color: rgba(13, 186, 199, 1);
+				color: rgba(255, 255, 255, 1);
+				font-size: 16px;
+				height: 80rpx;
+				line-height:80rpx ;
+			}
 		}
 	}
 </style>