LabCenter/pages/index/openOrder.vue

<template>
	<view class="box">
		<text class="txt">申请人</text>
		<input type="text" v-model="form.applicant_name" placeholder="请输入申请人姓名">
		<text class="txt">申请人联系方式</text>
		<input type="number" v-model="form.applicant_mobile" placeholder="请输入申请人联系方式">
		<text class="txt">所属部门</text>
		<view class="input">
			<picker @change="bindPickerChange" :value="index" :range="departmentList" :range-key="'name'">
				<view class="uni-input">
					<text v-if="index==null" style="color:#6d6e71">请选择部门</text>
					<text v-else>{{departmentList[index].name}}</text>
					<view class="input-icon">
						<u-icon name="arrow-down" color="#6d6e71" size="28"></u-icon>
					</view>
				</view>
			</picker>
		</view>
		<text class="txt">科室</text>
		<input type="text" v-model="form.department" placeholder="请输入所属科室">
		<text class="txt">使用时间</text>
		<!-- <input type="text" placeholder="请选择使用时间"> -->
		<view class="buttom" @click="changTime">
			点击选择时间
		</view>
		<view class="txt" v-if="migrate_data.length>0">
			<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>
		<!-- 	<text class="txt">使用地点</text>
		<input type="text" placeholder="请选择使用地点"> -->
		<text class="txt" v-if="!is_teacher || is_admin">申请表类型</text>
		<!-- <input type="text" v-model="form.template" placeholder="请选择申请表">
		 -->
		<view class="" v-if="!is_teacher || is_admin">
			<u-radio-group v-model="form.template" wrap>
				<u-radio :name="1">
					正常上班时间使用
				</u-radio>
				<u-radio :name="2">
					非正常上班时间使用
				</u-radio>
				<u-radio :name="3" v-if="is_admin">
					信息技术学院教师
				</u-radio>
			</u-radio-group>
		</view>
		<text class="txt">使用人数</text>
		<input type="text" v-model="form.use_people_nums" placeholder="请选择使用人数">
		<text class="txt">申请原因</text>

		<textarea type="text" v-model="form.use_reason" placeholder="请填写申请原因"></textarea>
		<text class="txt">使用需求</text>
		<textarea type="text" v-model="form.use_need" placeholder="请填写使用需求"></textarea>
		<view class="btm">
			<view style="background: #F5F5F5;color: #333333;" @click="cancel">
				<text>取消</text>
			</view>
			<view style="background: #3665FF;color: white;" @click="onSubmit">
				<text>确定</text>
			</view>
		</view>
		<!-- 保存成功点击下载 -->
		<u-popup v-model="successShow" mode="center" border-radius="24" width="85%">
			<view class="prop-content">
				<image src="../../static/image/index/icon_6.png" mode="" class="prop-image"></image>
				<view class="prop-title">
					申请成功,等待上传开放预约申请表...
				</view>
				<view class="content-item">

					<view class="prop-text">
						1、请教师下载实验室开放预约申请表，并签字盖章。
					</view>
				</view>
				<view class="content-item">
					<view class="prop-text">
						2、教师需将签字盖章后的申请表上传为附件。
					</view>
				</view>
				<view class="content-item">
					<view class="prop-text">
						3、点击立即下载即可下载【实验室开放使用申请表】
					</view>
				</view>
				<view class="pop-btn">
					<view @click="myRecord" class="prop-cancel">
						我的申请
					</view>
					<view @click="downLoad" class="prop-success">
						立即下载
					</view>
				</view>

			</view>
		</u-popup>
		<!-- 选择时间弹框 -->
		<view class="change-time-prop" v-if="simpleShow" @touchmove.stop.prevent="disabledScroll">
			<view class="simple-week">
				<view class="sit-num">
					座位：{{room_num}}
				</view>
				<view :class="simple_week==1 ?'disable-buttom':'change-buttom'" @click="simpleLastWeek">
					上一周
				</view>
				<view class="week-text">
					第{{simple_week}}周
				</view>
				<view :class="simple_week==maxWeek ?'disable-buttom':'change-buttom'" @click="simpleNextWeek">
					下一周
				</view>
			</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_jieList">
							{{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="sure-buttom">
					<view class="cancel" @click="cancelSelectTime">
						取消
					</view>
					<view class="sure" @click="sureSelectTime">
						确定
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				navHeight: app.globalData.navHeight,
				simpleShow: false,
				successShow: false, //申请成功弹出框
				// 时间选择简版课表数据开始
				simple_weekList: [],
				simple_jieList: [],
				simple_calendar: [],
				simple_room_id: 18,
				simple_week: 0,
				simple_currentRoom: 0,
				roomList: [],
				//时间选择简版数据结束
				maxWeek: '',
				today: '', //今日日期
				selected: [], //已选择
				migrate_data: [],
				form: {
					template: 1,
					applicant_mobile: '',
					applicant_name: '',
					department: '', //科室
					use_data: [],
					use_need: '',
					use_people_nums: '',
					use_reason: '',
					branch_id: '' //部门
				},
				id: '',
				index: null,
				departmentList: [],
				is_teacher: false, //是否是本系教师
				is_admin: false, //是否是实验中心管理员
				room_num: 0

			}
		},
		onLoad() {
			let roles = this.vuex_user.roles
			let roles_list = []
			roles.map(item => {
				roles_list.push(item.name)
			})
			//判断当前用户是不是信息技术学院教师或者是不是管理员
			let index = roles_list.indexOf('teacher')
			let index1 = roles_list.indexOf('admin')
			if (index !== -1) {
				this.is_teacher = true
			}
			if (index1 !== -1) {
				this.is_admin = true
			}
			this.maxWeek = Number(this.vuex_term_weeks)
			this.getRoomList()
			this.getDepartment()
		},
		methods: {
			bindPickerChange(e) {
				let index = Number(e.detail.value)
				this.index = index
				this.form.branch_id = this.departmentList[index].id
				console.log(e, '00000000')
			},
			//获取部门列表
			getDepartment() {
				this.$u.get('/common/department-tree', {
					status: 1
				}).then(res => {
					console.log(res, 'oooo')
					this.departmentList = res.data
				})
			},
			disabledScroll() {
				return
			},
			//匹配节次
			getTime(time) {
				var time1 = "";
				this.simple_jieList.map((item) => {
					if (item.id == time) {
						time1 = item.name;
					}
				});
				return time1;
			},
			//判断课程是否过期
			checkOld(tableDay) {
				var nowDay = Number(this.today.replace(/-/g, ""));
				//表格日期
				var day2 = Number(tableDay.replace(/-/g, ""));
				if (nowDay > day2) {
					return true;
				} else {
					return false;
				}
			},
			//判断是否为当天日期
			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();
				}

			},
			//判断是否已选择
			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) {
				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(this.simple_currentRoom,
					'simple_currentRoomsimple_currentRoomsimple_currentRoomsimple_currentRoom')
				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) //开放预约可多选
					console.log(this.selected, 'klklklklklklk')
					// 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;
					});
				}
			},
			//选择时间切换实验室
			simpleChangeRoom(item) {
				this.simple_currentRoom = item;
				this.simple_room_id = this.roomList[item].id;
				this.room_num = this.roomList[item].open_use_student_nums
				this.getChangeTime();
			},
			//取消选择时间
			cancelSelectTime() {
				(this.selected = []), (this.migrate_data = []);
				this.simpleShow = false;
			},
			//确定选择
			sureSelectTime() {
				this.simpleShow = false;
				this.form.use_data = this.migrate_data
			},
			//获取实验室列表
			getRoomList() {
				this.$u
					.get("/school/room-select-options", {
						status: 1,
					})
					.then((res) => {
						this.roomList = res.data;
						this.simple_room_id = res.data[this.simple_currentRoom].id;
						this.room_num = res.data[this.simple_currentRoom].open_use_student_nums
					});
			},
			//获取时间选择列表
			getChangeTime() {
				this.$u
					.post("/school/schedule/calendar-simple", {
						room_id: this.simple_room_id,
						// term_id: this.vuex_term_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;
					});
			},
			//点击选择时间
			changTime() {
				this.simpleShow = true;
				// this.simple_room_id = this.room_id;
				// this.simple_week = this.week;
				// this.simple_currentRoom = this.currentRoom;
				this.getChangeTime();
			},
			onSubmit() {
				console.log('opopopop')
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/

				var number = new RegExp('^[0-9]*[1-9][0-9]*$')

				if (!myreg.test(this.form.applicant_mobile)) {
					uni.showToast({
						title: '您输入的手机号格式错误!',
						icon: 'none'
					})

					return
				}
				if (this.form.use_data.length <= 0) {
					uni.showToast({
						title: '请选择申请时间、地点!',
						icon: 'none'
					})
					return
				}
				if (
					this.form.use_people_nums !== 0 &&
					!number.test(this.form.use_people_nums)
				) {
					uni.showToast({
						title: '使用人数必须为大于0整数！',
						icon: 'none'
					})
					this.form.use_people_nums = ''
					return
				}
				if (!this.form.use_reason) {
					uni.showToast({
						title: '申请原因不能为空!',
						icon: 'none'
					})

					return
				}
				if (this.is_teacher) {
					this.form.template = 3
				}
				this.form.use_reason = this.form.use_reason.replace(/\n/g, '<br />')
				if (this.form.use_need)
					this.form.use_need = this.form.use_need.replace(/\n/g, '<br />')
				let message, data
				this.$u.post('/lab/open-appointment', this.form).then(res => {
					message = res.message
					data = res.data
					this.id = res.data.id
					this.successShow = true
				})
				// uni.showToast({
				// 	title: message,
				// 	icon: 'none'
				// })

				// setTimeout(() => {
				// 	uni.navigateTo({
				// 		url: '/pages/record/reserve'
				// 	})
				// }, 1500)
			},
			cancel() {
				// uni.reLaunch({
				// 	url: '/pages/index/index'
				// })
				uni.navigateBack()
			},
			//保存编辑
			onSave() {
				if (this.fileList.length > 0) {
					this.form.enclosure = []
					this.fileList.map((item) => {
						this.form.enclosure.push(item.response.data.id)
					})
				}
				this.$refs['form'].validate(async (valid) => {
					var number = new RegExp('^[0-9]*[1-9][0-9]*$')
					if (valid) {
						if (
							this.form.use_people_nums !== 0 &&
							!number.test(this.form.use_people_nums)
						) {
							this.$message.warning('使用人数必须为大于0整数！')
							this.form.use_people_nums = ''
							return
						}

						if (this.form.enclosure.length == 0) {
							this.$message.warning('请上传附件！')
							return
						}
						this.form.use_reason = this.form.use_reason.replace(/\n/g, '<br />')
						this.form.use_need = this.form.use_need.replace(/\n/g, '<br />')

						const {
							message
						} = await eidtOrderList(this.form)
						this.$baseMessage(
							message,
							'success',
							false,
							'vab-hey-message-success'
						)
						this.handleClose()
					}
				})
			},
			//查看我的申请
			myRecord() {
				uni.reLaunch({
					url: '/pages/record/reserve'
				})
				this.successShow = false
			},
			//删除申请表
			deleteApply(name) {
				this.$u.get('/lab/open-appointment/delete-down-print?filename=' + name).then(res => {

				})
			},
			//立即下载
			downLoad() {

				this.$u.get('/lab/open-appointment/down-print?id=' + this.id).then(res => {
					console.log(this.$u.http.config, '-----')
					uni.downloadFile({
						url: this.$u.http.config.downloadUrl + res.data.url,
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('下载成功');
							}
							console.log(res.tempFilePath);
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success(e) {
									uni.openDocument({
										filePath: e.savedFilePath,
										showMenu: true, //showMenu是否显示右上角菜单

										fail: (e) => {
											uni.showToast({
												title: `打开失败` + e
											})
										}
									})
									this.deleteApply(res.filename)
								},
								fail: (e) => {
									uni.showToast({
										title: '文件下载失败',
										icon: "none",
									})
								}

							});
							this.successShow = false
							uni.reLaunch({
								url: '/pages/record/reserve'
							})
						},
						fail: (e) => {
							uni.showToast({
								title: '文件下载失败',
								icon: "none",
							})
						}
					});
				})

				//下载文件
				// uni.downloadFile({ //只能是GET请求
				// 	url: this.$u.http.config.baseUrl + '/lab/open-appointment/down-print?id=16', //请求地址
				// 	header: {
				// 		'content-type': 'application/msword', //自定义请求头信息
				// 		'Authorization': this.vuex_token
				// 	},
				// 	filePath: wx.env.USER_DATA_PATH + '/file.doc',
				// 	success: (res) => {
				// 		//下载成功
				// 		if (res.statusCode === 200) {
				// 			//保存文件
				// 			console.log(res, 'res.tempFilePath-----')
				// 			uni.openDocument({
				// 				filePath: res.filePath,
				// 				showMenu: true, //showMenu是否显示右上角菜单
				// 				success: function(res) {
				// 					console.log(res, '打开文档成功');
				// 				},
				// 				fail: (e) => {
				// 					uni.showToast({
				// 						title: `打开失败` + e
				// 					})
				// 				}
				// 			});
				// 			// uni.saveFile({
				// 			// 	tempFilePath: res.filePath, //下载成功之后返回的临时路径
				// 			// 	success: (e) => {

				// 			// 		console.log(e, 'res.tempFilePath')
				// 			// 		//保存成功之后 打开文件
				// 			// 		uni.openDocument({
				// 			// 			filePath: e.savedFilePath,
				// 			// 			fail: (e) => {
				// 			// 				uni.showToast({
				// 			// 					title: `打开失败` + e
				// 			// 				})
				// 			// 			}
				// 			// 		})
				// 			// 	},
				// 			// 	fail: (e) => {
				// 			// 		console.log(res, 'res.tempFilePath')
				// 			// 		console.log(e, 'res.tempFilePath')
				// 			// 		uni.showToast({
				// 			// 			title: `保存失败` + e
				// 			// 		})
				// 			// 	}
				// 			// })
				// 		}
				// 	},
				// 	fail: (e) => {
				// 		this.isDownloading = false
				// 		console.log(e, 'pppppppppppppppp', this.$u.http.config.baseUrl)
				// 		uni.showToast({
				// 			title: `文件下载失败` + e,
				// 			icon: "none",
				// 		})
				// 	}
				// });


			},

		},

	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		display: flex;
		flex-direction: column;
		padding: 0px 16px;
		box-sizing: border-box;
		padding-bottom: 100px;
		position: relative;

		.txt {
			font-size: 16px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			padding-top: 12px;
			padding-bottom: 8px;
			.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;
					font-weight: 400;
					font-size: 13px;
				}
			}
			.table-title:first-child {
				background-color: #e3e3e3;
				border-top: solid 1px #b3b3b3;

			}
		}
		.buttom {
			height: 40px;
			line-height: 40px;
			padding: 0 10px;
			background-color: #3665FF;
			text-align: center;
			color: #fff;
		}
		input {
			height: 48px;
			background: #F8F8F8;
			border-radius: 4px;
			opacity: 1;
			padding-left: 12px;
			box-sizing: border-box;
			font-size: 16px;
			width: 100%;
		}
		.input {
			.uni-input {
				height: 48px;
				background: #F8F8F8;
				border-radius: 4px;
				line-height: 48px;
				opacity: 1;
				padding: 0 12px;
				box-sizing: border-box;
				font-size: 16px;

				.input-icon {
					display: inline-block;
					float: right;
				}
			}
		}

		textarea {
			width: 100%;
			height: 148px;
			background: #F8F8F8;
			border-radius: 4px;
			opacity: 1;
			padding-left: 12px;
			padding-top: 12px;
			box-sizing: border-box;
			font-size: 16px;
		}

		.btm {
			width: 100%;
			height: 68px;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: fixed;
			bottom: 0px;
			z-index: 99;

			view {
				width: 152px;
				height: 44px;
				border-radius: 22px;
				opacity: 1;
				font-size: 16px;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	//弹框样式
	.prop-image {
		// position: absolute;
		// top: -50px;
		height: 68px;
		width: 90px;
		margin-top: -54px;
		position: fixed;
	}

	.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 80px;
				font-size: 15px;
				font-weight: 550;
			}

			.prop-content {
				font-size: 15px;
			}
		}

		.pop-btn {
			margin-top: 40px;
			width: 84%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			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;
			}

			.prop-cancel {
				opacity: 1;
				border: 1px solid #3665FF;
				background: rgba(54, 101, 255, 0.15);
				color: #3665FF;
				box-sizing: border-box;
				margin-right: 8px;
			}

			.prop-success {
				background: #3665FF;
				color: #fff;

			}
		}

		.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;
		}
	}

	//时间选择弹框
	.change-time-prop {
		height: 100vh;
		width: 100%;
		background-color: #fff;
		position: fixed;
		// position: absolute;
		top: 0;
		left: 0;
		z-index: 9999999999;
		overflow-y: auto;

		.simple-week {
			text-align: right;
			padding: 10px;
			background-color: #fff;
			border-bottom: solid 1px #dddcdc;

			.sit-num {
				display: inline-block;
				text-align: left;
				float: left;
				padding: 10px 0;
				color: red;
			}

			.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;
			}
		}

		.table_1 {
			// overflow-y: auto;

			.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 0.5px #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>