<template>
	<view class="view_body">
		<u-navbar :is-back="false" title='班级' title-color="#2E4975" :border-bottom="false" :background="bgc"
			id="navbar">
		</u-navbar>
		<view class="nocont" v-show="shownocont">
			<view class="nocont_tip">
				<view class="nocont_tip_img">
					<image src="https://file.langsi.online/yasiimg/web/static/uVcz1RzZi6US2NKa0ssl"></image>
				</view>

				<view class="nocont_tip_txt">暂无学生，快去添加吧！</view>
			</view>
			<view class="nocont_button">
				添加学生
			</view>

		</view>

		<view class="student_page" v-show="shownocont == false">
			<view class="student_page_top">
				<view class="search_box">
					<view class="check_search">
						{{ checkindex == 1 ? '班级' : '学生' }}
						<!-- <view class="iconfont icon-arow_down"></view> -->
					</view>
					<view class="serchbox">
						<view class="serchimg">
							<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0"
								mode="scaleToFill">

							</image>
						</view>
						<input type="text" v-model="searchKeyword" placeholder="搜索相关内容..." class="input"
							placeholder-style="color:#C7CDD3" @input="search()">
					</view>
				</view>
				<view class="info_box">
					<view class="info_cont" style="width:80rpx ;">
						<view class="info_cont_top">
							学生人数
						</view>
						<view class="info_cont_bot">
							{{totalLastNum}}
						</view>
					</view>
					<view class="info_cont">
						<view class="info_cont_top">
							平均成绩/分
						</view>
						<view class="info_cont_bot">
							{{totalAvgScore }}
						</view>
					</view>
					<view class="info_cont">
						<view class="info_cont_top">
							作业完成度
						</view>
						<view class="info_cont_bot">
							{{totalWorkCompletionDegre}}%
						</view>
					</view>
				</view>
				<view class="chekbox">
					<view class="check" :class="checkindex == 1 ? 'act1' : ''" @click="checkindex = 1">
						班级
					</view>
					<view class="check" :class="checkindex == 0 ? 'act1' : ''" @click="checkindex = 0">
						学生
					</view>

					<view class="add" @click="addsmt()">
						+ 添加
					</view>
				</view>

			</view>
			<view class="class_box" v-if="checkindex == 1">
				<view class="class_box_top">

					<view @click="changeclass()" class="class_box_top_cont">
						班级人数
						<view class="iconfont icon-arow_down"></view>
						<view class="dropdown_box" v-show="classnum">
							<view class="dropdown_item" :class="classnumindex == 0 ? 'act2' : ''"
								@click="chengclassnumindex(0)">
								降序
							</view>
							<view class="dropdown_item" :class="classnumindex == 1 ? 'act2' : ''"
								@click="chengclassnumindex(1)">
								升序
							</view>

						</view>
					</view>

					<view @click="changetext()" class="class_box_top_cont">
						标签文字
						<view class="iconfont icon-arow_down"></view>
						<view class="dropdown_box" v-show="showtext">
							<view class="dropdown_item" :class="textindex == 1 ? 'act2' : ''"
								@click="chengetextindex(1)">
								听力
							</view>
							<view class="dropdown_item" :class="textindex == 2 ? 'act2' : ''"
								@click="chengetextindex(2)">
								阅读
							</view>
							<view class="dropdown_item" :class="textindex == 3 ? 'act2' : ''"
								@click="chengetextindex(3)">
								写作
							</view>
							<view class="dropdown_item" :class="textindex == 4 ? 'act2' : ''"
								@click="chengetextindex(4)">
								口语
							</view>
						</view>
					</view>

					<!-- 下拉框内容 -->





				</view>

				<view class="class_card" v-for="(item, index) in classlist" v-if="isloding == false" :key="index"
					@click="toclassdetal(item)">
					<view class="class_card_top">
						<view class="class_card_left">
							<image src=" https://file.langsi.online/yasiimg/web/static/udWNTRG6GulmTtgPRQ49"></image>
						</view>
						<view class="class_card_right">
							<view class="class_card_right_top" v-html="highlightSearch(item.name)">
								<!-- {{ item.name }} -->
							</view>
							<view class="class_card_right_bot" v-show="item.classify == 1">
								听力
							</view>
							<view class="class_card_right_bot" v-show="item.classify == 2">
								阅读
							</view>
							<view class="class_card_right_bot" v-show="item.classify == 3">
								写作
							</view>
							<view class="class_card_right_bot" v-show="item.classify == 4">
								口语
							</view>
						</view>
					</view>
					<view class="class_infobox">
						<view class="class_info" style="width:80rpx ;">
							<view class="class_info_top">
								班级人数
							</view>
							<view class="class_info_bot">
								{{ item.totalMembers }}
							</view>
						</view>
						<view class="class_info">
							<view class="class_info_top">
								平均成绩/分
							</view>
							<view class="class_info_bot">
								{{ item.avgScore }}
							</view>
						</view>
						<view class="class_info">
							<view class="class_info_top">
								作业完成度
							</view>
							<view class="class_info_bot">
								{{ item.workCompletionDegree }}%

							</view>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: 50rpx;">

				</view>
			</view>
		</view>
		<view class="overlay" v-if="false">
			<view class="addstudent" v-show="false">

				<view class="close">
					<image src="https://file.langsi.online/yasiimg/web/static/uSzPsPoFgoVwcsl7pJ89"></image>
				</view>

				<view class="addstudent_tit">
					添加学生
				</view>
				<view class="addstudent_input_box">
					<view class="addstudent_input_tit">
						学员名称
					</view>
					<view class="addstudent_input">
						<input type="text" placeholder="搜索相关内容..." class="input"
							placeholder-style="color:#C7CDD3;font-size: 24rpx; ">
					</view>
				</view>
				<view class="addstudent_input_box">
					<view class="addstudent_input_tit">
						学员ID
					</view>
					<view class="addstudent_input">
						<input type="text" placeholder="搜索相关内容..." class="input"
							placeholder-style="color:#C7CDD3;font-size: 24rpx; ">
					</view>
				</view>
				<view class="addbtn">
					添加
				</view>
			</view>
			<view class="addtip" v-show="false">
				<view class="logo">
					<image src="https://file.langsi.online/yasiimg/web/static/uxsaoHOpSUoxnX7lU3Fe"></image>
				</view>
				<view class="close">
					<image src="https://file.langsi.online/yasiimg/web/static/uSzPsPoFgoVwcsl7pJ89"></image>
				</view>
				已添加成功
			</view>
		</view>
		<indexlist v-show="checkindex == 0" />
		<u-popup v-model="show" mode="bottom" length="75%" :safe-area-inset-bottom='true' :closeable="true"
			:duration="300" border-radius="25">
			<view class="pop-up">
				<view class="caption">创建班级</view>
				<!-- 班级图像 -->
				<view style="margin-top: 16rpx;">
					<view class="caption_top">班级头像</view>
					<view
						style="width: 112rpx; height: 112rpx; position: relative;border: 2rpx solid #DDE2EE;border-radius: 50%;"
						@click="btn()">
						<view class="imgbox" style="width: 112rpx; height: 112rpx;border-radius: 50%;">
							<image :src="imgurl" mode="" style="width: 112rpx; height: 112rpx;border-radius: 50%;">
							</image>
						</view>

						<view class="dashboard">
							<image src="https://file.langsi.online/yasiimg/web/static/u03pE8b1O2DykSYUg2mp" mode="">
							</image>
						</view>
					</view>
				</view>
				<!-- 班级名称 -->
				<view>
					<view class="caption_top">班级名称</view>
					<view class="caption_input">
						<u-input v-model="designation" :type="type" :border="border" placeholder="请输入班级名称" />
					</view>
				</view>
				<!-- 班级标签 -->
				<view>
					<view class="caption_top">班级标签</view>
					<!-- 弹出层 -->
					<u-select v-model="show2" :list="list" @confirm="confirm"></u-select>

					<view class="caption_input">
						<u-input  v-model="form.name" @click="showPopup" placeholder="请输入班级标签" />
					</view>




				</view>
				<!-- 班级学生 -->
				<view class="class_body">
					<view class="caption_flex">
						<view>班级学生</view>
						<view class="caption_boder_text2">点击头像选择班级学员</view>
					</view>
					<view class="select_box" style="display: flex;flex-wrap: wrap;">
						<view class="class_ys" v-for="(item, index) in stuinfo" :key="index"
							style="position: relative;">
							<view class="close"
								style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;"
								@click="delstu(item.id)">
								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE" mode="">
								</image>
							</view>
							<view class="class_tp">
								<image :src="item.avatar" mode=""
									style="width: 56rpx;height: 56rpx;border-radius: 50%;"></image>
							</view>
							<view class="class_wz">{{ item.name }}</view>
						</view>
						<view class="caption_boder" @click="toaddstu()">

							<view class="class_tp_image" >
								<image src="https://file.langsi.online/yasiimg/web/static/utw2UbXetgo1FDQpvGKq" mode="">
								</image>
							</view>
						</view>
					</view>

				</view>
				<!-- 班级老师 -->
				<view class="class_body">
					<view class="caption_flex">
						<view>班级老师</view>
						<view class="caption_boder_text2">点击加号选择班级老师</view>
					</view>
					<view class="select_box" style="display: flex;flex-wrap: wrap;">
						<view class="class_ys" v-for="(item, index) in teacherinfo" :key="index"
							style="position: relative;">
							<view class="close"
								style="position: absolute;top: 0rpx;right: 8rpx;width: 20rpx;height: 20rpx;"
								@click="delstu(item.id)">
								<image src="https://file.langsi.online/yasiimg/web/static/ueH3qwYazyVXmiYoVPJE" mode="">
								</image>
							</view>
							<view class="class_tp">
								<image :src="item.avatar" mode=""
									style="width: 56rpx;height: 56rpx;border-radius: 50%;"></image>
							</view>
							<view class="class_wz">{{ item.name }}</view>
						</view>
						<view class="caption_boder" @click="addteacher()">
				
							<view class="class_tp_image" >
								<image src="https://file.langsi.online/yasiimg/web/static/utw2UbXetgo1FDQpvGKq" mode="">
								</image>
							</view>
						</view>
					</view>
				
				</view>
				<view class="caption_add" @click="addclass()">添加</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import indexlist from "../compoents/indexList.vue"
	export default {
		components: {
			indexlist
		},
		data() {
			return {
				shownocont: false,
				bgc: {
					backgroundColor: "#F6F9FC",
				},
				checkindex: 1,
				isDropdownOpen: true,
				classlist: {},
				isloding: true,
				changeclasslist: {},
				classnum: false,
				classnumindex: -1,
				showtext: false,
				textindex: 0,
				searchKeyword: '',
				totalLastNum: '',
				totalAvgScore: '',
				totalWorkCompletionDegre: 0,
				// 班级名称数据绑定
				designation: '',
				// 班级标签数据绑定
				labels: '',
				// 弹出层的变量
				show: false,
				// 下拉框
				show2: false,
				form:{
					name: '',
				},
				
				list: [{
						value: '1',
						label: '听力'
					},
					{
						value: '2',
						label: '阅读'
					},
					{
						value: '3',
						label: '写作'
					},
					{
						value: '4',
						label: '口语'
					}
				],
				icons: 'arrow-down-fill',
				icons_rigth: 'arrow-down-fill',
				icons_top: 'arrow-up-fill',
				imgurl: "",
				token: '',
				userImgs: '',
				teacherinfo: [],
				stuinfo: [],
			}
		},
		onLoad(option) {
			this.getclassList()
			uni.removeStorageSync('selectedteacherinfo');
			uni.removeStorageSync('selectedStuInfo');
		},
		onShow() {
			const selectedteacherinfo = uni.getStorageSync('selectedteacherinfo');

			if (selectedteacherinfo && selectedteacherinfo.length > 0) {
				this.teacherinfo = selectedteacherinfo
				// Remove duplicates from this.classinfo
				//     this.classinfo = this.classinfo.filter(item => !selectedClassInfo.some(selectedItem => selectedItem.id === item.id));

				//     // Add non-duplicate items from selectedClassInfo to this.classinfo
				//     this.classinfo = this.classinfo.concat(selectedClassInfo);

			}
			const selectedstuInfo = uni.getStorageSync('selectedStuInfo');

			if (selectedstuInfo && selectedstuInfo.length > 0) {
				this.stuinfo = selectedstuInfo
				// Remove duplicates from this.classinfo
				// this.stuinfo = this.stuinfo.filter(item => !selectedstuInfo.some(selectedItem => selectedItem.id === item.id));

				// // Add non-duplicate items from selectedClassInfo to this.classinfo
				// this.stuinfo = this.stuinfo.concat(selectedstuInfo);

			}
		},
		methods: {
			addclass(){
				
				let memberIds =[]
				let teacherIds =[]
				this.stuinfo.forEach(item => {
					memberIds.push(item.id); // 将 id 添加到数组中
				});
				this.teacherinfo.forEach(item => {
					teacherIds.push(item.id); // 将 id 添加到数组中
				});
				let classif =''
				if(this.form.name=='听力'){
					classif=1
				}else if(this.form.name=='阅读'){
					classif=2
				}else if(this.form.name=='写作'){
					classif=3
				}else if(this.form.name=='口语'){
					classif=4
				}
				let data ={
					name:this.designation,
					avatar:this.imgurl,
					classify:classif,
					memberIds:memberIds,
					teacherIds:teacherIds
					
				} 
				this.$u.post(`https://api.admin-v2.langsi.online/admin-api/classroom/create`, data).then(res => {
					if (res.code === 0) {
						this.$refs.uToast.show({
							title: '添加成功',
							type: 'success',
							position:'top'
						})
						uni.removeStorageSync('selectedteacherinfo');
						uni.removeStorageSync('selectedStuInfo');
						this.getclassList()
						this.stuinfo=[]
						this.teacherinfo=[]
						this.designation=''
						this.form.name=''
						this.imgurl=''
						this.show=false
					}else{
						this.$refs.uToast.show({
							title: '添加失败',
							type: 'error',
							position:'top'
							
						})
						
					}
				});
				console.log(data,'data');
			},
			delcls(id) {
				this.teacherinfo = this.teacherinfo.filter(item => item.id !== id);
			},
			delstu(id) {
				this.stuinfo = this.stuinfo.filter(item => item.id !== id);
			},
			toaddstu() {
				uni.navigateTo({
					url: "/pages_teacher/pages_add/add_studentsforwork?stuinfo=" + encodeURIComponent(JSON
						.stringify(this.stuinfo))

				}).then(res => {

				}).catch(err => {

				});
			},
			addteacher() {
				uni.navigateTo({
					url: "/pages/Mystudent/addTeacher?teacherinfo=" + encodeURIComponent(JSON.stringify(this.teacherinfo))
				}).then(res => {

				}).catch(err => {

				});
			},
			getQiniuToken() {
				wx.request({
					url: 'https://v2.ielts.langsi.online/file/getToken',
					method: 'get', // Adjust the request method as needed
					// data: yourData,
					header: {
						'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJub3RfeWJzX3VzZXJfa2V5IjoiNWZiYzA4YmUtNDZlMi00NDUzLThmYjQtMjFlNzhjZDIxY2EyIn0.jw2fyMnlNEW-zx8cH6aPh_H-WqEAHDQdh4oCpYg3qBIJZEmw6L4oNWJPvKHM9edmRdLO0p2z7_vlCYoY00NqxA '
					},
					success: (res) => {
						console.log(res);
						this.token = res.data.data.token
					},
					fail: (err) => {
						console.log(err);
					}
				});
				// this.$u.get('https://v2.ielts.langsi.online/file/getToken').then(res => {
				// 	console.log(res.data);
				// 	this.token = res.data.token
				// }).catch(err => {
				// 	console.log(err)
				// })

			},
			btn() {
				this.getQiniuToken()
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseImage({
					success: (chooseImageRes) => {
						let tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						tempFilePaths.forEach(item => {
							// 上传图片到七牛云
							wx.uploadFile({
								url: 'https://upload-cn-east-2.qiniup.com',
								name: 'file',
								filePath: item,
								formData: {
									token: _this.token, //后端返回的token
									key: 'yasiimg/header/' + math
								},
								success: function(res) {

									let str = JSON.parse(res.data)
									// console.log(str.key)
									_this.userImgs = 'https://file.langsi.online/' + str
										.key
									console.log(_this.userImgs)
									_this.imgurl = _this.userImgs
								}
							});
						})


					}
				});
			},
			addsmt() {
				if (this.checkindex == 1) {
					this.create()
				}
			},
			create() {
				this.show = !this.show
			},
			showPopup() {
				this.show2 = !this.show2
				this.icons = this.icons_top
			},
			confirm(e) {
				this.icons = this.icons_rigth
				e.forEach(item => {
					this.form.name = item.label
				})
			},
			highlightSearch(name) {
				// 使用正则表达式替换匹配到的 searchKeyword 为带有颜色的文字
				if (this.searchKeyword) {
					const regex = new RegExp(this.searchKeyword, 'gi');
					return name.replace(regex, match => `<span style="color: #2D7CE6 ;">${match}</span>`);
				}
				return name;
			},
			toclassdetal(item) {

				uni.navigateTo({
					url: "/pages_teacher/teacher_class/class_detail?id=" + item.id
				}).then(res => {

				}).catch(err => {

				});
			},
			search() {
				// 根据关键字过滤 this.classlist
				if (this.searchKeyword != '') {
					const filteredList = JSON.parse(JSON.stringify(this.changeclasslist)).filter(item => item.name
						.includes(this.searchKeyword));
					// 更新 this.classlist 为过滤后的列表
					this.classlist = filteredList;
				} else {
					this.fuwei()
				}

			},
			calculatePercentage(value1, value2) {
				if (value2 === 0) {

					return '0%'; // 或者返回其他默认值
				}

				return ((value1 / value2) * 100).toFixed(0) + '%';
			},
			changeclass() {
				this.classnum = !this.classnum
			},
			chengclassnumindex(num) {
				if (num == this.classnumindex) {
					this.classnumindex = -1
				} else {
					this.classnumindex = num
				}
				if (this.classnumindex == 0) {
					this.classlist.sort((a, b) => b.totalMembers - a.totalMembers);
				}
				if (this.classnumindex == 1) {
					// 升序排列 classlist 数组，根据 totalMembers 属性
					this.classlist.sort((a, b) => a.totalMembers - b.totalMembers);
				}
				if (this.classnumindex == -1) {
					this.fuwei()
				}

			},
			fuwei() {

				this.classlist = JSON.parse(JSON.stringify(this.changeclasslist));
			},
			changetext() {
				this.showtext = !this.showtext
			},
			chengetextindex(num) {
				if (num == this.textindex) {
					this.textindex = 0
				} else {
					this.textindex = num
				}
				if (this.textindex !== 0 || this.classnumindex === 1) {
					this.classlist.sort((a, b) => {
						if (this.textindex !== 0 && a.classify === this.textindex) {
							return -1; // 将匹配的项放在前面
						}
						if (this.textindex !== 0 && b.classify === this.textindex) {
							return 1; // 将匹配的项放在前面
						}
						if (this.classnumindex === 0) {
							return b.totalMembers - a.totalMembers; // 对 totalMembers 进行降序排列
						}
						if (this.classnumindex === 1) {
							return a.totalMembers - b.totalMembers; // 对 totalMembers 进行升序排列
						}
						return 0; // 保持原有顺序
					});
				} else {

					this.fuwei();
				}


			},
			getclassList() {
				this.$u.get("https://api.admin-v2.langsi.online/admin-api/classroom/page").then(res => {

					if (res.code === 0) {
						this.classlist = res.data.list;
						this.changeclasslist = JSON.parse(JSON.stringify(this.classlist));
						this.isloding = false;
						const list = res.data.list;

						if (list.length > 0) {
							// 计算 totalMembers 总和
							const totalMembersSum = list.reduce((sum, item) => sum + item.totalMembers, 0);

							// 计算 workCompletionDegree 平均值
							const workCompletionDegreeAvg = list.reduce((sum, item) => sum + item
								.workCompletionDegree, 0) / list.length;

							// 计算 avgScore 平均值
							const avgScoreAvg = list.reduce((sum, item) => sum + item.avgScore, 0) / list.length;
							console.log(workCompletionDegreeAvg, 'workCompletionDegreeworkCompletionDegree');
							// 将计算结果赋值给对应的变量
							this.totalLastNum = totalMembersSum;
							this.totalWorkCompletionDegre = workCompletionDegreeAvg;
							this.totalAvgScore = avgScoreAvg;
							// console.log(this.totalworkCompletionDegree,'totalworkCompletionDegreetotalworkCompletionDegree');
						} else {
							// 处理空数组的情况，例如设置默认值或者给出提示
							this.totalLastNum = 0;
							this.totalWorkCompletionDegre = 0;
							this.totalAvgScore = 0;
						}
					}
				});
			},
			getstuList() {
				this.$u.get("https://api.admin-v2.langsi.online/admin-api/classroom/page").then(res => {


					if (res.code == 0) {
						this.classlist = res.data.list
						this.isloding = false

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.view_body {
		width: 750rpx;
		background: #F6F9FC;

		.nocont {
			margin-top: 340rpx;
			margin-left: 216rpx;

			.nocont_tip {
				margin-left: 28rpx;
				width: 264rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.nocont_tip_img {
					width: 213.36rpx;
					height: 220rpx;
				}

				.nocont_tip_txt {
					font-size: 24rpx;
					font-family: Microsoft YaHei, Microsoft YaHei;
					font-weight: 400;
					color: #0E3B77
				}
			}

			.nocont_button {
				margin-top: 100rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				width: 320rpx;
				height: 80rpx;
				background: #2E7CE6;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 24rpx;
				font-family: 'PingFang', 'PingFang';
				font-weight: 800;
				color: #FFFFFF;
			}
		}

		.student_page {
			.student_page_top {
				padding: 32rpx;

				.search_box {
					width: 686rpx;
					height: 88rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					display: flex;
					flex-wrap: nowrap;

					.check_search {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: center;
						width: 148rpx;
						height: 88rpx;
						background: #FFF2E4;
						border-radius: 20rpx 0rpx 0rpx 20rpx;
						font-size: 28rpx;
						font-family: 'PingFang', 'PingFang';
						font-weight: 500;
						color: #F39852;

						.icon-arow_down {
							margin-left: 8rpx;
							font-size: 20rpx;
						}
					}

					.serchbox {
						// padding: 0 32rpx;
						display: flex;
						flex-wrap: nowrap;
						// margin-top: 30rpx;
						align-items: center;
						justify-content: space-between;
						width: 538rpx;
						height: 88rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;

						.serchimg {
							margin-left: 32rpx;

							width: 32rpx;
							height: 32rpx;

						}

						.input {
							// margin-left: 24rpx;
							width: 452rpx;
							height: 88rpx;
							// border-radius: 30rpx;
							// background-color: #f5f8fc;
							// display: flex;
							// justify-content: center;
							// align-items: center;
							// text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN, Source Han Sans CN-Light;
							font-weight: 300;
							text-align: left;
							color: #a7b9cd;
							letter-spacing: 1.2rpx;
							line-height: 36rpx;
							// padding: 0 100rpx;
							// padding-right: 135rpx;
							box-sizing: border-box;

						}
					}
				}

				.info_box {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-around;
					margin-top: 20rpx;
					width: 686rpx;
					height: 128rpx;
					background: linear-gradient(179deg, rgba(255, 237, 223, 0.65) 0%, #FFFFFF 100%);
					border-radius: 18rpx 18rpx 18rpx 18rpx;

					.info_cont {
						width: 110rpx;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;

						.info_cont_top {
							font-size: 20rpx;
							font-family: 'PingFang', 'PingFang';
							font-weight: 500;
							color: rgba(7, 47, 90, 0.5);
							line-height: 24rpx;
						}

						.info_cont_bot {
							margin-top: 12rpx;
							font-size: 28rpx;
							font-family: 'PingFang', 'PingFang';
							font-weight: 800;
							color: #2D7CE6;
						}
					}
				}

				.chekbox {
					margin-top: 32rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					.check {
						margin-right: 84rpx;
						font-size: 28rpx;
						font-family: 'PingFang', 'PingFang';
						font-weight: 500;
						color: rgba(7, 47, 90, 0.6);
					}

					.act1 {
						font-size: 32rpx;
						font-family: 'PingFang', 'PingFang';
						font-weight: 800;
						color: #2D7CE6;
					}

					.add {
						margin-left: auto;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 138rpx;
						height: 52rpx;
						background: #FFF2E4;
						border-radius: 26rpx 26rpx 26rpx 26rpx;

						font-size: 24rpx;
						font-family: 'PingFang', 'PingFang';
						font-weight: 500;
						color: #F18F21;
					}
				}

			}

			.class_box {
				padding: 0 32rpx;
				display: flex;
				flex-wrap: wrap;

				.class_box_top {
					width: 100%;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;


					// justify-content: space-around;
					.class_box_top_cont {
						position: relative;
						margin-right: 12rpx;
						display: flex;
						flex-wrap: nowrap;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						padding: 14rpx 30rpx;
						font-size: 20rpx;
						font-family: 'PingFang', 'PingFang';
						font-weight: 500;
						color: rgba(7, 47, 90, 0.6);

						.icon-arow_down {
							margin-left: 8rpx;
							font-size: 18rpx;
						}

						.dropdown_box {
							left: 0;
							top: 100%;
							position: absolute;
							width: 160rpx;
							// height: 204rpx;
							background: #FFFFFF;
							box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
							border-radius: 20rpx 20rpx 20rpx 20rpx;

							.dropdown_item:last-child {
								border-bottom: 0rpx solid #FFFFFF;
							}

							.dropdown_item {
								padding: 20rpx 40rpx;
								font-size: 20rpx;
								font-family: 'PingFang', 'PingFang';
								font-weight: 500;
								color: rgba(46, 73, 117, 0.6);
								border-bottom: 2rpx solid #F3F3F3;
							}

							.act2 {
								color: #2D7CE6;
							}
						}
					}





				}

				.class_card {
					margin-top: 20rpx;
					width: 686rpx;
					height: 296rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding: 32rpx;

					.class_card_top {
						display: flex;
						flex-wrap: nowrap;
						align-items: center;

						.class_card_left {
							width: 84rpx;
							height: 84rpx;
						}

						.class_card_right {
							margin-left: 12rpx;
							display: flex;
							flex-wrap: wrap;

							.class_card_right_top {
								width: 100%;
								font-size: 32rpx;
								font-family: 'PingFang', 'PingFang';
								font-weight: bold;
								color: #072F5A;
							}

							.class_card_right_bot {
								margin-top: 8rpx;
								background: #EBF3FF;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								padding: 10rpx 20rpx;
								font-size: 20rpx;
								font-family: 'PingFang', 'PingFang';
								font-weight: 500;
								color: #2D7CE6;
							}
						}
					}

					.class_infobox {
						margin-top: 20rpx;
						display: flex;
						flex-wrap: nowrap;
						align-items: center;
						justify-content: space-around;
						width: 622rpx;
						height: 128rpx;
						background: #F9F9F9;
						border-radius: 20rpx 20rpx 20rpx 20rpx;

						.class_info {
							width: 110rpx;
							display: flex;
							flex-wrap: wrap;
							justify-content: center;

							.class_info_top {
								font-size: 20rpx;
								font-family: 'PingFang', 'PingFang';
								font-weight: 500;
								color: rgba(7, 47, 90, 0.5);
							}

							.class_info_bot {
								margin-top: 12rpx;
								font-size: 28rpx;
								font-family: 'PingFang', 'PingFang';
								font-weight: 800;
								color: #2D7CE6;
							}
						}
					}
				}
			}
		}

		.overlay {
			display: flex;
			justify-content: center;
			align-items: center;

			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 100; // 设置遮罩层在上方

			.addstudent {
				position: relative;
				padding: 40rpx;
				width: 600rpx;
				height: 632rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.close {
					top: 20rpx;
					right: 20rpx;
					position: absolute;
					width: 20rpx;
					height: 20rpx;
				}

				.addstudent_tit {
					width: 100%;
					text-align: center;
					font-size: 36rpx;
					font-family: 'PingFang';
					font-weight: 800;
					color: #2E4975;
					line-height: 36rpx;

				}

				.addstudent_input_box {
					margin-top: 40rpx;

					.addstudent_input_tit {
						font-size: 28rpx;
						font-family: 'PingFang';
						font-weight: 500;
						color: #2E4975;
					}

					.addstudent_input {
						margin-top: 16rpx;
						width: 520rpx;
						height: 80rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;

						border: 2rpx solid #DDE2EE;

						.input {
							// margin-left: 24rpx;
							width: 520rpx;
							height: 80rpx;
							// border-radius: 30rpx;
							// background-color: #f5f8fc;
							// display: flex;
							// justify-content: center;
							// align-items: center;
							// text-align: center;
							font-size: 28rpx;
							font-family: Source Han Sans CN, Source Han Sans CN-Light;
							font-weight: 300;
							text-align: left;
							color: #a7b9cd;
							letter-spacing: 1.2rpx;
							line-height: 36rpx;
							padding-left: 32rpx;
							box-sizing: border-box;

						}
					}
				}

				.addbtn {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 76rpx;
					width: 520rpx;
					height: 88rpx;
					background: #2D7CE6;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					font-size: 28rpx;
					font-family: 'PingFang';
					font-weight: 500;
					color: #FFFFFF;
				}

			}

			.addtip {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 440rpx;
				height: 138rpx;
				font-size: 32rpx;
				font-family: 'PingFang', 'PingFang';
				font-weight: 800;
				color: #2D7CE6;
				background: linear-gradient(180deg, #C2DCFF 0%, #FFFFFF 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.logo {
					position: absolute;
					width: 182rpx;
					height: 244rpx;
					top: -244rpx;
					left: 130rpx;
				}

				.close {
					position: absolute;
					top: 10rpx;
					right: 20rpx;

					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.pop-up {
			padding: 30rpx 32rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.caption {
				font-size: 36rpx;
				text-align: center;
				font-weight: 800;
				color: #2E4975;
				padding-top: 20rpx;
			}

			.caption_top {
				font-size: 28rpx;
				font-family: 'PingFang';
				color: #2E4975;
				margin-top: 40rpx;

				.imgbox {
					width: 112rpx;
					height: 112rpx;
					border: 2rpx solid #DDE2EE;
					border-radius: 50%;
				}
			}

			.dashboard {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				bottom: 0;
				right: 0;
			}

			.caption_input {
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx solid #DDE2EE;
				margin-top: 16rpx;
				padding: 0 20rpx;
			}

			.caption_top_links {
				font-size: 20rpx;
				font-family: 'PingFang';
				font-weight: 500;
				color: #2D7CE6;
			}

			.element.style {
				background-color: red;
			}

			.u-list-item u-add-wrap {
				width: 62rpx !important;
			}

			.caption_add {
				width: 93.1%;
				background: #2D7CE6;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				text-align: center;
				margin: 0 auto;
				padding: 24rpx 0;
				color: #fff;
				margin-top: 40rpx;
			}

			.caption_class {
				margin-top: 40rpx;
			}

			.class_body {
				margin-top: 40rpx;

				.caption_flex {
					display: flex;
					align-items: center;

					.caption_boder_text2 {
						font-size: 23rpx;
						font-weight: 500;
						color: #2D7CE6;
					}
				}

				.select_box {
					.class_ys:nth-child(3n) {
						margin-right: 0;
					}

					.class_ys {
						margin-top: 20rpx;
						margin-right: 20rpx;
						width: 215rpx;
						height: 96rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 20rpx;
						// width: 215rpx;
						height: 96rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						border: 2rpx solid #F0F0F0;

						.class_tp {
							width: 56rpx;
							height: 56rpx;
							margin-right: 12rpx;
						}

						.class_wz {
							width: 125rpx;
							font-size: 28rpx;
							font-family: 'PingFang';
							font-weight: 500;
							color: #072F5A;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

					}

					.caption_boder {
						position: relative;
						width: 96rpx;
						height: 96rpx;
						background: #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						border: 2rpx solid #DDE2EE;
						margin-top: 17rpx;

						.class_tp_image {
							position: absolute;
							top: 28rpx;
							right: 32rpx;
							bottom: 0;
							width:
								28rpx;
							height:
								28rpx;
						}

					}
				}

			}


		}
	}
</style>