LabCenter/pages/record/myClssList.vue

<template>
	<view class="box u-skeleton">
		<u-skeleton :loading="loading" :animation="true"></u-skeleton>
		<view class="table-list" v-if="list.length>0">
			<view class="table-item complete" v-for="(item,index) in list" :key="index" @click="details(item.id)">
				<!-- <view class="item-border">
				</view> -->
				<view class="" style="width: 100%;">
					<view class="room-name">
						<text>上课时间：{{item.day}} · 第{{item.week}}周 · {{item.week_index}} · {{item.time_id.name}}节</text>
						<text style="color:red;" v-if="item.status == 2">停课</text>
						<text style="color:#FFAD33 ;" v-if="item.status == 3">调课</text>
						<text style="color:#13ce66 ;" v-if="item.status == 1 && item.migrate_id!=0">补课</text>
						<text style="color:#1890ff ;" v-if="item.status == 1 && item.migrate_id==0">正常</text>
					</view>
					<view class="teacher">
						<text>上课班级：{{item.grade.name}}</text>
						<text>课程名称：{{item.lesson == null ? '未知' : item.lesson.name}}({{item.teacher ?item.teacher.name :'未知'}})</text>
						<text>上课人数：{{item.student_nums}}人</text>
						<!-- <text>上课时间：{{item.day}} · 第{{item.week}}周 · {{item.week_index}} · {{item.time_id.name}}节</text> -->
						<text v-if="item.type == 2">调整后时间：{{item.day}} · 第{{item.week}}周 · {{item.week_index}} · {{item.time_id.name}}节</text>
					</view>
					<view class="right">
						<view @click="showPop(item)" v-if="item.status==1" style="background: #3665FF;"><text>停调课</text></view>
						<view @click="showLesson(item)" v-if="item.status==2" style="background: red;"><text>补课</text></view>
					</view>
				</view>
			</view>
			<u-loadmore :status="statuss " :load-text="loadText" icon="true" />
			<!-- 停调可弹框 -->
			<u-popup v-model="showFalse" mode="center" border-radius="24" width="90%" z-index="10076" :mask-close-able="false">
				<view class="prop-content">
					<!-- <image src="../../static/image/index/icon_6.png" mode="" class="prop-image"></image> -->
					<view class="prop-title">
						{{ detail.lesson ? detail.lesson.name : "--" }}
					</view>
					<view style="width: 100%">
						<!-- <scroll-view scroll-y="true" style="height: 200px;"> -->
						<view class="content-item">
							<view class="prop-label"> 停调课类型： </view>
							<view class="prop-text">
								<u-radio-group v-model="type" @change="radioGroupChange">
									<u-radio @change="radioChange" v-for="(item, index) in list_sel" :key="index"
										:name="item.id">
										{{ item.name }}
									</u-radio>
								</u-radio-group>
							</view>
						</view>
			
						<view class="content-item" v-if="type == 2">
							<view class="prop-label"> 调课时间： </view>
							<view class="prop-text">
								<view class="change-time" @click="chaneTime"> 选择时间 </view>
							</view>
						</view>
						<view class="content-item" v-if="migrate_data.length > 0 && type == 2">
							<view class="prop-text">
								<view class="table-title">
									<view class="title-item"> 实验室 </view>
									<view class="title-item"> 日期 </view>
									<view class="title-item"> 节次 </view>
								</view>
								<view class="table-title" v-for="(item, index) in migrate_data" :key="index">
									<view class="title-item">
										{{ item.room_name }}
									</view>
									<view class="title-item">
										{{ item.day }} · 第{{ item.week }}周 · 星期{{
			                $transformWeek(item.week_index)
			              }}
									</view>
									<view class="title-item">
										{{ getTime(item.time_id) }}
									</view>
								</view>
							</view>
						</view>
						<view class="content-item">
							<view class="prop-label"> 停调课原因： </view>
						</view>
						<view class="content-item">
							<view class="prop-text">
								<textarea v-model="body" rows="2" placeholder="请输入停调课原因"></textarea>
								<!-- <u-input v-model="body" type="textarea" border height="150" auto-height /> -->
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->
					<view class="pop-btn">
						<view @click="cancelHandle" style="
			          opacity: 1;
			          background: #f5f5f5;
			          color: #333333;
			          margin-right: 10px;
			        ">
							<text>取消</text>
						</view>
						<view style="background: #3665ff; color: #fff" @click="sureHandle">
							<text>确定</text>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 选择时间弹框 -->
			<view class="change-time-prop" v-if="simpleShow" @touchmove.stop.prevent="disabledScroll">
					<view style="font-size: #333333; font-weight: 550; font-size: 17px;padding-left: 10px;">
						第{{ simple_week }}周
					</view>
				<view class="table_1">
					<u-tabs :list="roomList" :current="simple_currentRoom" @change="simpleChangeRoom"></u-tabs>
					<view class="table-border">
						<view class="jie">
							<view class="jie-item" style="height: 55px; line-height: 20px">
							</view>
							<view class="jie-item" v-for="(item, index) in simple_left" :key="index">
								{{ item.name }}
							</view>
						</view>
						<view class="day">
							<view v-for="(item, index) in simple_weekList" :key="index" class="day-item"
								:class="[checkOld(item.day) ? 'day-item-1' : '']">
								<view class="time" :class="checkToday(item.day) ? 'today' : ''"
									style="height: 55px; line-height: 20px">
									<view style="padding-top: 8px">{{ item.week }}</view>
									<view>{{ item.day }}</view>
								</view>
			
								<view v-for="(course, index1) in simple_calendar[index].lists" :key="index1"
									class="jie-item">
									<!-- 时间段已过期 -->
									<view v-if="checkOld(item.day)"></view>
									<view v-else class="course" @click="selectTime(simple_calendar[index], index1)">
										<view v-if="!course.is_lesson" class="course kong" :class="
			                  checkIselect(
			                    simple_calendar[index].week_index,
			                    simple_jieList[index1].id
			                  )
			                    ? 'xuan'
			                    : ''
			                ">
											<view>{{
			                  checkIselect(
			                    simple_calendar[index].week_index,
			                    simple_jieList[index1].id
			                  )
			                    ? "已选"
			                    : "可选"
			                }}</view>
										</view>
										<view v-if="
			                  current_course.week == simple_week &&
			                  current_course.room_id == simple_room_id &&
			                  simple_calendar[index].week_index ==
			                    current_course.week_index &&
			                  current_course.time_id == simple_jieList[index1].id
			                " class="course current-course">
											当前课程
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="simple-week">
						<view :class="simple_week == 1 ? 'disable-buttom' : 'change-buttom'" @click="simpleLastWeek">
							上一周
						</view>
			
						<view :class="simple_week == maxWeek ? 'disable-buttom' : 'change-buttom'" @click="simpleNextWeek">
							下一周
						</view>
					</view>
					<view class="sure-buttom">
						<view class="cancel" @click="cancelSelectTime"> 取消 </view>
						<view class="sure" @click="sureSelectTime"> 确定 </view>
					</view>
				</view>
			</view>
			<!-- 补课弹框 -->
			<u-popup v-model="makeLesson" mode="center" border-radius="24" width="90%" z-index="10076" :mask-close-able="false">
				<view class="prop-content">
					<!-- <image src="../../static/image/index/icon_6.png" mode="" class="prop-image"></image> -->
					<view class="prop-title">
						{{ detail.lesson ? detail.lesson.name : "--" }}
					</view>
					<view style="width: 100%">
						<!-- <scroll-view scroll-y="true" style="height: 200px;"> -->
						<view class="content-item" style="align-items: center;">
							<view class="prop-label"> 补课时间： </view>
							<view class="prop-text">
								<view class="change-time" @click="chaneTime"> 选择时间 </view>
							</view>
						</view>
						<view class="content-item" v-if="migrate_data.length > 0">
							<view class="prop-text">
								<view class="table-title">
									<view class="title-item"> 实验室 </view>
									<view class="title-item"> 日期 </view>
									<view class="title-item"> 节次 </view>
								</view>
								<view class="table-title" v-for="(item, index) in migrate_data" :key="index">
									<view class="title-item">
										{{ item.room_name }}
									</view>
									<view class="title-item">
										{{ item.day }} · 第{{ item.week }}周 · 星期{{
			                $transformWeek(item.week_index)
			              }}
									</view>
									<view class="title-item">
										{{ getTime(item.time_id) }}
									</view>
								</view>
							</view>
						</view>
						<view class="content-item">
							<view class="prop-label"> 停调课原因： </view>
						</view>
						<view class="content-item">
							<view class="prop-text">
								<textarea v-model="body" rows="2" placeholder="请输入停调课原因"></textarea>
								<!-- <u-input v-model="body" type="textarea" border height="150" auto-height /> -->
							</view>
						</view>
					</view>
					<!-- </scroll-view> -->
					<view class="pop-btn">
						<view @click="makeLesson = false , totalCourse = []" style="
			          opacity: 1;
			          background: #f5f5f5;
			          color: #333333;
			          margin-right: 10px;
			        ">
							<text>取消</text>
						</view>
						<view style="background: #3665ff; color: #fff" @click="make_les">
							<text>确定</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<view class="empty" v-if="list.length==0" style="padding-top: 110px;">
			<u-empty text="暂无记录~" mode="favor"></u-empty>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				list: '',
				statuss: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page: 1,
				meta: '',
				loading: true,
				showFalse:false,
				list_sel: [{
						id: 1,
						name: "停课",
					},
					{
						id: 2,
						name: "调课",
					},
				],
				type: "", //停调课类型、1停课，2调课
				detail:'',
				simple_week: 0,
				simple_currentRoom: 0,
				simpleShow:false,
				room_id: 18,
				week: 0,
				currentRoom: 0,
				migrate_data: [],
				simple_weekList:[],
				today: "", //今日日期
				selected: [], //已选择
				jieList: [],
				roomList:[],
				simple_left:[],
				makeLesson:false,
				body:'',
				maxWeek:0
			}
		},
		onLoad() {
			// this.$u.get('/school/schedule').then(res => {
			// 	console.log(res)
			// 	this.list = res.data.list;
			// 	this.loading = false;
			// })
			this.lists();
			this.maxWeek = Number(this.vuex_term_weeks);
			this.getRoomList();
			console.log(this.roomList, "---");
			this.user_id = this.vuex_user.id;
		},
		onPullDownRefresh() {
			this.lists()
			this.page = 1;
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.statuss = 'loading';
			var page = this.page;
			if (page >= this.meta.total_pages) {
				this.statuss = 'nomore';
			} else {
				this.$u.get('/school/schedule?page=' + Number(page + 1)).then(res => {
					console.log(res)
					this.list = this.list.concat(this.foreach(res.data.list));
					this.page = ++page;
				})
				this.statuss = 'loadmore';
			}
		},
		methods: {
			details(id){
				console.log(id)
				// uni.navigateTo({
				// 	url:'/pages/record/tutorialDetail?id='+id
				// })
			},
			//获取实验室列表
			async getRoomList() {
				await this.$u
					.get("/school/room-select-options", {
						status: 1,
					})
					.then((res) => {
						this.roomList = res.data;
						this.room_id = res.data[this.currentRoom].id;
						this.simple_room_id = res.data[this.currentRoom].id;
					});
			},
			//获取时间选择列表
			getChangeTime() {
				this.$u
					.post("/school/schedule/calendar-simple", {
						room_id: this.simple_room_id,
						week: this.simple_week,
					})
					.then((res) => {
						this.simple_jieList = res.data.times;
						var head = res.data.headers;
						var xingqi = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
						for (var i = 0; i < head.length; i++) {
							head[i].week = xingqi[i];
							head[i].day = head[i].day.slice(5, 11).replace("-", "/");
						}
						this.simple_weekList = head;
						this.simple_calendar = res.data.calendar;
						this.simple_week = res.data.week;
						this.simple_left = res.data.times;
						// console.log(this.simple_jieList)
					});
					
			},
			//选择时间切换实验室
			simpleChangeRoom(item) {
				this.simple_currentRoom = item;
				this.simple_room_id = this.roomList[item].id;
				this.getChangeTime();
			},
			//点击选择时间
			chaneTime() {
				this.simpleShow = true;
				this.simple_room_id = this.room_id;
				this.simple_week = this.week;
				this.simple_currentRoom = this.currentRoom;
				this.getChangeTime();
			},
			//匹配节次
			getTime(time) {
				console.log(time)
				var time1 = "";
				this.simple_jieList.map((item) => {
					if (item.id == time) {
						time1 = item.name;
					}
				});
				return time1;
			},
			//判断是否已选择
			checkIselect(week_index, time_id) {
				var status = false;
				if (this.selected.length == 0) return false;
				this.selected.map((item) => {
					if (
						this.simple_week == item.week &&
						this.simple_room_id == item.room_id &&
						week_index == item.week_index &&
						time_id == item.time_id
					) {
						status = true;
					}
				});
				return status;
			},
			//选择时间点
			selectTime(row, index1) {
				this.selected = [];
				this.migrate_data = [];
				let id =
					row.week_index.toString() +
					this.simple_jieList[index1].id.toString() +
					this.simple_room_id.toString();
				let index = false;
				this.migrate_data.map((item) => {
					if (item.id == id) index = true;
				});
				console.log(index, "000", id);
				if (!index) {
					let arr1 = [{
						id: id,
						week: row.week,
						day: row.day,
						week_index: row.week_index,
						time_id: this.simple_jieList[index1].id,
						time_name: this.simple_jieList[index1].name,
						room_id: this.simple_room_id,
						room_name: this.roomList[this.simple_currentRoom].name,
					}, ];
					this.migrate_data = this.migrate_data.concat(arr1);
					let arr = [{
						id: row.week_index.toString() +
							this.simple_jieList[index1].id.toString() +
							this.simple_room_id.toString(),
						time_id: this.simple_jieList[index1].id,
						week_index: row.week_index,
						week: row.week,
						room_id: this.simple_room_id,
					}, ];
					// this.selected = this.selected.concat(arr) //开放预约可多选
			
					this.selected = arr;
					// this.$forceUpdate()
					// this.$set(this.selected, this.selected.concat(arr))
				} else {
					this.selected = this.selected.filter((item) => {
						return item.id !== id;
					});
					this.migrate_data = this.migrate_data.filter((item) => {
						return item.id !== id;
					});
				}
			},
			disabledScroll() {
				return;
			},
			lists() {
				//数据列表 请求方法
				this.$u.get('/school/schedule').then(res => {
					console.log(res)
					this.meta = res.data.meta.pagination;
					if (res.data.list.length < 10) {
						this.statuss = 'nomore'
					}
					this.list = this.foreach(res.data.list);
					this.loading = false;
				})
			},
			foreach(lesson) {
				for (var i = 0; i < lesson.length; i++) {
						if (lesson[i].week_index == 0) {
							lesson[i].week_index = '星期一'
						}
						if (lesson[i].week_index == 1) {
							lesson[i].week_index = '星期二'
						}
						if (lesson[i].week_index == 2) {
							lesson[i].week_index = '星期三'
						}
						if (lesson[i].week_index == 3) {
							lesson[i].week_index = '星期四'
						}
						if (lesson[i].week_index == 4) {
							lesson[i].week_index = '星期五'
						}
						if (lesson[i].week_index == 5) {
							lesson[i].week_index = '星期六'
						}
						if (lesson[i].week_index == 6) {
							lesson[i].week_index = '星期日'
						}
				}
				return lesson;
			},
			radioGroupChange(e) {
				console.log(e);
			},
			radioChange(e) {
				//单选按钮事件
			},
			showPop(item){
				//显示停调课弹窗
				console.log(item)
				// this.detail = item;
				// this.showFalse = true;
				uni.navigateTo({
					url:'/pages/record/StoTtransfer?detail='+JSON.stringify(item)+'&type=1'
				})
			},
			showLesson(item){
				uni.navigateTo({
					url:'/pages/record/StoTtransfer?detail='+JSON.stringify(item)+'&type=2'
				})
					// this.detail = item;
					// this.makeLesson = true;
			},
			//判断是否为当天日期
			checkToday(tableDay) {
				var nowDay = Number(this.today.replace(/-/g, ""));
				//表格日期
				var day2 = Number(tableDay.replace(/-/g, ""));
				if (nowDay == day2) {
					return true;
				} else {
					return false;
				}
			},
			//选择时间上一周
			simpleLastWeek() {
				if (this.simple_week > 1) {
					this.simple_week--;
					this.getChangeTime();
				}
			},
			//选择时间下一周
			simpleNextWeek() {
				if (this.simple_week < this.maxWeek) {
					this.simple_week++;
					this.getChangeTime();
				}
			},
			//判断课程是否过期
			checkOld(tableDay) {
				var nowDay = Number(this.today.replace(/-/g, ""));
				//表格日期
				var day2 = Number(tableDay.replace(/-/g, ""));
				if (nowDay > day2) {
					return true;
				} else {
					return false;
				}
			},
			//取消选择时间
			cancelSelectTime() {
				(this.selected = []), (this.migrate_data = []);
				this.simpleShow = false;
			},
			//确定选择
			sureSelectTime() {
				this.simpleShow = false;
			},
			// 补课申请
			make_les(){
				if (this.migrate_data.length == 0) {
					uni.showToast({
						title: "请选择补课时间",
						icon: "none",
					})
				}else{
					let data = {
						type: 3,
						body: this.body, 
						id: this.detail.id,
						migrate_data: this.migrate_data[0],
					};
					this.$u.post("/school/schedule/change", data).then((res) => {
						this.show = false;
						this.makeLesson = false;
						// this.handleClear();
						uni.showToast({
							title: "提交成功，请等待管理员审核!",
							icon: "none",
						});
					});
				}
			},
			//确定停调课
			sureHandle() {
				if (!this.type) {
					uni.showToast({
						title: "请选择类型",
						icon: "none",
					});
					return;
				}
				if (this.type == 2 && this.migrate_data.length == 0) {
					uni.showToast({
						title: "请选择调课时间",
						icon: "none",
					});
					return;
				}
				if (!this.body) {
					uni.showToast({
						title: "请输入停调课原因",
						icon: "none",
					});
					return;
				}
				let data = {
					type: this.type,
					body: this.body,
					id: this.detail.id,
					migrate_data: this.migrate_data[0],
				};
				this.$u.post("/school/schedule/change", data).then((res) => {
					this.show = false;
					this.showFalse = false;
					this.handleClear();
					uni.showToast({
						title: "提交成功，请等待管理员审核!",
						icon: "none",
					});
				});
			}, //取消停调可
			cancelHandle() {
				this.showFalse = false;
				this.totalCourse = [];
				this.handleClear();
			},
			//清除表单信息
			handleClear() {
				this.selected = [];
				this.migrate_data = [];
				this.type = "";
				this.body = "";
			},
		}
	}
</script>

<style scoped lang="scss">
	.table-item {
		padding: 15px 12px;
		border-top: solid 1px #F2F2F2;
		display: flex;
		width: 100%;
		box-sizing: border-box;
		// .item-border {
		// 	width: 4px;
		// 	background-color: #30D143;
		// 	border-radius: 2px;
		// 	margin-right: 8px;
		// }

		.room-name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #333333;
			font-size: 13px;
			font-weight: 800;
		}

		.teacher {
			display: flex;
			flex-wrap: wrap;
			color: #333;
			width: 100%;
			font-size: 13px;
			// word-wrap: break-word;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;

			text {
				width: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				padding-top: 5px;
			}
		}

		.right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			view {
				width: 64px;
				height: 28px;
				border-radius: 14px;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				color: #FFFFFF;
				font-weight: 400;
			}
		}
	}
	.prop-content {
		padding: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.prop-title {
			text-align: center;
			font-size: 18px;
			margin-bottom: 5px;
			font-weight: bold;
			color: #333333;
			margin-top: 30px;
		}
	
		.content-item {
			display: flex;
			color: #333333;
			margin-top: 8px;
			width: 100%;
	
			.prop-label {
				flex: 0 0 90px;
				font-size: 15px;
				font-weight: 550;
			}
	
			.prop-text {
				flex: 1;
	
				.change-time {
					display: inline-block;
					padding: 0 8px;
					line-height: 30px;
					height: 30px;
					font-size: 12px;
					color: #ffffff;
					background-color: #3665ff;
					border-radius: 5px;
				}
	
				.table-title {
					display: flex;
					border-left: solid 1px#b3b3b3;
	
					.title-item {
						flex: 1;
						padding: 5px 0;
						text-align: center;
						border-right: solid 1px #b3b3b3;
						border-bottom: solid 1px#b3b3b3;
					}
				}
	
				.table-title:first-child {
					background-color: #e3e3e3;
					border-top: solid 1px #b3b3b3;
				}
	
				textarea {
					border: solid 1px #b3b3b3;
					width: auto;
					border-radius: 8px;
					padding: 8px;
					height: 100px;
				}
			}
	
			.prop-content {
				font-size: 15px;
			}
		}
	
		.prop-srue {
			width: 279px;
			height: 44px;
			background: #3665ff;
			text-align: center;
			margin-top: 30px;
			line-height: 44px;
			color: #ffffff;
			border-radius: 22px 22px 22px 22px;
			font-size: 16px;
			margin-bottom: 5px;
		}
	
		.pop-btn {
			margin-top: 40px;
			width: 84%;
			display: flex;
			align-items: center;
			justify-content: center;
	
			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 130px;
				height: 44px;
				font-size: 16px;
				font-weight: bold;
				border-radius: 22px 22px 22px 22px;
				opacity: 1;
			}
		}
	}
	//时间选择弹框
	.change-time-prop {
		// height: 100%;
		height: 100vh;
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999999999;
		overflow-y: auto;
	
		.table_1 {
			.simple-week {
				text-align: right;
				padding: 10px;
				background-color: #fff;
				border-bottom: solid 1px #dddcdc;
	
				.change-buttom,
				.disable-buttom {
					display: inline-block;
					padding: 8px 30px;
					background-color: #3665ff;
					color: #ffffff;
					// margin-left: 10px;
					border-radius: 18px;
				}
	
				.week-text {
					display: inline-block;
					font-size: 15px;
					margin: 0 10px;
					font-weight: bold;
				}
	
				.disable-buttom {
					background-color: #dddcdc;
					color: #7c7b7b;
				}
			}
	
			.sure-buttom {
				text-align: center;
				margin-top: 20px;
	
				.cancel {
					display: inline-block;
	
					width: 150px;
					height: 45px;
					line-height: 45px;
					border: solid 1px #3665ff;
					color: #3665ff;
					border-radius: 22px;
				}
	
				.sure {
					display: inline-block;
					width: 150px;
					height: 45px;
					line-height: 45px;
					background-color: #3665ff;
					color: #ffffff;
					margin-left: 10px;
					border-radius: 22px;
				}
			}
	
			.table-border {
				display: flex;
	
				.week {
					display: flex;
					padding: 8px;
					color: #333333;
					font-size: 12px;
					border-bottom: solid 1px #f2f2f2;
					border-top: solid 1px #f2f2f2;
					background-color: #fbfcff;
	
					.week-item {
						flex: 1;
						text-align: center;
	
						.week-day {
							margin-top: 3px;
						}
					}
				}
	
				.jie {
					text-align: center;
					background-color: #fbfcff;
				}
	
				.jie-item:first-child {
					background-color: #fbfcff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
	
				.jie-item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px dashed #f2f2f2;
					border-right: none;
					border-top: none;
					height: 50px;
					border-left: none;
					text-align: center;
				}
	
				.kong {
					text-align: center;
					// background-color: #0077ff;
					color: #0077ff;
					cursor: pointer;
					// border-bottom: solid 1px #fff;
				}
	
				.course {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 50px;
					border-left: none;
					text-align: center;
					width: 100%;
				}
	
				.current-course {
					text-align: center;
					background-color: #0077ff;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
	
				.xuan {
					text-align: center;
					background-color: #00b315;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
	
				.jie-item:last-child {
					border-bottom: none;
				}
	
				.day {
					flex: 1;
					display: flex;
					text-align: center;
	
					.day-item {
						flex: 1;
	
						.time {
							border-bottom: 1px dashed #f2f2f2;
							background-color: #fbfcff;
						}
	
						.today {
							color: #df4d76;
						}
	
						background-color: #fff;
						border: 1px dashed #f2f2f2;
					}
	
					.day-item-1 {
						background-color: #cdced0;
					}
				}
			}
		}
	}
</style>