学员名单

 <template>
 <template>
 	<view class="wrap_box">
 	<view class="wrap_box">
-		<!-- <uParse v-if="datas" :content="datas"></uParse> -->
-		<view class="tel_index_bg"></view>
 		<view class="stu_list">
 		<view class="stu_list">
 			<view class="stu_search">
 			<view class="stu_search">
-				<u-icon name="search" size="30" color="#659ff5"></u-icon>
+				<u-icon name="search" size="24" color="#979797"></u-icon>
 				<input v-model="keywords" confirm-type="search" @confirm="confirm" class="stu_search-input" type="text"
 				<input v-model="keywords" confirm-type="search" @confirm="confirm" class="stu_search-input" type="text"
-					placeholder="搜索姓名" placeholder-style="color: #428DFE">
+					placeholder="搜索姓名" placeholder-style="color: #C3C3C3">
 			</view>
 			</view>
 			<view class="stu_num">
 			<view class="stu_num">
-				<image class="stu_num-icon" src="@/static/images/xh_icon13.png"></image>
-				<text class="stu_num-text">共{{datas.length}}人</text>
-				<image class="stu_num-icon" src="@/static/images/xh_icon13.png"></image>
+				共<text class="stu_num-text">{{datas.length}}</text>人
 			</view>
 			</view>
 			<scroll-view style="height: 1200rpx;" :scroll-y="true">
 			<scroll-view style="height: 1200rpx;" :scroll-y="true">
-				<view v-for="(item,index) in datas" :key="index" class="stu_li dis_flex">
-
-					<image v-if="item.img" class="stu_li_tx" :src="$service.getimg(item.img)" mode="aspectFill"></image>
-					<image v-else class="stu_li_tx" src="/static/images/tx.png" mode="aspectFill"></image>
-					<view class="flex_1">
-						<view class="stu_li_name">
+				<view v-for="(item,index) in datas" :key="index" class="stu_item">
+					
+					<view class="avatar">
+						<image class="avatar-img" v-if="item.img" :src="$service.getimg(item.img)" mode="aspectFill"></image>
+						<image class="avatar-img" v-else src="/static/imagesV2/tch_index/default-avatar.png" mode="aspectFill"></image>
+						<view class="gender">
+							<image v-if="item.sex!=1" src="/static/imagesV2/stu_selection/icon_female.png" mode="aspectFit"></image>
+							<image v-else src="/static/imagesV2/stu_selection/icon_male.png" mode="aspectFit"></image>
+						</view>
+					</view>
+					
+					<view class="info">
+						<view class="name">
 							{{item.name}}
 							{{item.name}}
-							<image v-if="item.sex!=1" src="/static/images/tch/icon_female.png" mode="aspectFit"></image>
-							<image v-else src="/static/images/tch/icon_male.png" mode="aspectFit"></image>
 						</view>
 						</view>
-						<view class="stu_li_time">
-							{{item.add_time}} 入学
+						<view>
+							<text>
+								{{item.class_name}}
+							</text>
+							<text style="margin-left: 20rpx;">
+								{{item.add_time}}入学
+							</text>
 						</view>
 						</view>
 					</view>
 					</view>
-					<view class="stu_li_ban">
-						{{item.class_name}}
-					</view>
 				</view>
 				</view>
 				<u-empty v-if="datas.length==0" mode="data" text="暂无名单" icon="/static/images/tch/img_blank.png">
 				<u-empty v-if="datas.length==0" mode="data" text="暂无名单" icon="/static/images/tch/img_blank.png">
 				</u-empty>
 				</u-empty>
@@ -200,96 +203,78 @@
 		position: relative;
 		position: relative;
 	}
 	}
 
 
-	.tel_index_bg {
-		position: absolute;
-		top: 0;
-		z-index: 1;
-		width: 100%;
-		min-height: 220rpx;
-		background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
-	}
-
 	.stu_list {
 	.stu_list {
 		position: relative;
 		position: relative;
 		z-index: 2;
 		z-index: 2;
 		width: 100%;
 		width: 100%;
-		padding: 0 30rpx 30rpx;
+		padding: 30rpx;
 
 
 		.stu_search {
 		.stu_search {
-			background-color: rgba(#fff, 0.4);
-			height: 68rpx;
+			background-color:#fff;
 			display: flex;
 			display: flex;
-			border-radius: 200rpx;
+			border-radius: 36rpx;
 			align-items: center;
 			align-items: center;
-			padding: 0 20rpx;
-
+			padding: 20rpx 20rpx 20rpx 30rpx;
+			border-radius: 36rpx;
 			.stu_search-input {
 			.stu_search-input {
 				flex-grow: 1;
 				flex-grow: 1;
 			}
 			}
 		}
 		}
 
 
 		.stu_num {
 		.stu_num {
-			width: 100%;
-			height: 80rpx;
-			display: flex;
-			align-items: center;
-			font-size: 30rox;
-			color: #477FF6;
-			justify-content: center;
-
-			.stu_num-icon {
-				height: 12rpx;
-				width: 50rpx;
-			}
-
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #323232;
+			padding: 20rpx 0;
 			.stu_num-text {
 			.stu_num-text {
-				color: #477FF6;
-				margin: 0 20rpx;
+				color: #2D81FF;
 			}
 			}
 		}
 		}
 
 
-		.stu_li {
-			width: 100%;
-			min-height: 120rpx;
+		.stu_item {
 			background: #FFFFFF;
 			background: #FFFFFF;
-			border-radius: 10rpx;
-			padding: 24rpx 30rpx;
+			border-radius: 20rpx;
+			padding: 30rpx;
+			display: flex;
 			align-items: center;
 			align-items: center;
-
-			&+.stu_li {
-				margin-top: 22rpx;
+			
+			& + .stu_item {
+				margin-top: 20rpx;
 			}
 			}
-
-			.stu_li_tx {
-				width: 64rpx;
-				height: 64rpx;
+			
+			.avatar {
+				width: 110rpx;
+				height: 110rpx;
 				border-radius: 50%;
 				border-radius: 50%;
-				margin-right: 20rpx;
-			}
-
-			.stu_li_name {
-				font-size: 30rpx;
-				color: #545D71;
-				margin-bottom: 10rpx;
-
-				image {
-					width: 28rpx;
-					height: 28rpx;
-					margin-left: 5rpx;
+				position: relative;
+				margin-right: 30rpx;
+				.avatar-img {
+					border-radius: 50%;
+				}
+				.gender {
+					position: absolute;
+					width: 29rpx;
+					height: 24rpx;
+					right: 0rpx;
+					bottom: 12rpx;
 				}
 				}
 			}
 			}
-
-			.stu_li_time {
-				font-size: 28rpx;
-				color: #A9B1C0;
-			}
-
-			.stu_li_ban {
-				font-size: 28rpx;
-				color: #2D81FF;
-				padding: 4rpx 14rpx;
-				background: #2D81FF1a;
+			.info {
+				flex: 1;
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #646464;
+				.name {
+					font-size: 30rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					margin-bottom: 24rpx;
+					color: #323232;
+				}
 			}
 			}
 		}
 		}
+
 	}
 	}
 </style>
 </style>