daoshiyuyue-teacher/pages/scheduling/index.vue

<template>
	<view class="sheduling">
		<!-- 添加排班 -->
		<u-popup v-model="teacher_show" mode="right" border-radius="19" @close="handleClose">
			<view class="pop_wrap pop_wrap_1" style="width: 85vw;">
				<view class="pop_top">
					<text class="title">请您确认排班时间</text>
				</view>
				<u-form :model="form" ref="uForm" label-width="180" style="width: 80vw;">
					<u-form-item label="值班日期">
						{{now_date}}
					</u-form-item>
					<u-form-item label="值班时间">
						{{time.start_time}}-{{time.end_time}}
					</u-form-item>
					<u-form-item label="最大预约人数">
						<u-input placeholder="请输入最大预约人数" v-model="form.max_student_nums" type='number'  clearable></u-input>
					</u-form-item>
					<u-form-item label="教室名称">
						<u-input v-model="form.room_name" type="select" @click="roomShow = true" />
					</u-form-item>
					<u-select mode="mutil-column-auto" value-name="id" label-name="name" :list="roomList"
						@confirm="actionSheetCallback" v-model="roomShow"></u-select>
				</u-form>
				<view class="pop_bootom">
					<button type="default" @click="sure_choose">确认</button>
				</view>
			</view>
		</u-popup>
		<!-- 取消排班 -->
		<u-popup v-model="cancel_show" mode="center" border-radius="19">
			<view class="pop_wrap">
				<view class="pop_top">
					<text class="title">您确定要取消如下排班吗</text>
				</view>
				<view class="pop_center">
					<text>上课日期：{{cancel_detail.day}}</text>
					<text>上课时间：{{cancel_detail.start_time}}-{{cancel_detail.end_time}}</text>
				</view>
				<view class="pop_bootom">
					<button type="default" @click="sure_cancel">确定取消</button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="stu_show" mode="center" border-radius="42" width="85%">
			<view class="student-show">
				<view class="stu-title">
					预约学生基本信息
				</view>
				<view class="stu-mess">
					<image :src="stu_detail.student ? stu_detail.student.headimg : '../../static/images/avator.png'"
						mode="">
					</image>
					<view class="right">
						<view class="stu-text">
							姓名：{{stu_detail.student?stu_detail.student.truename:'--'}}
						</view>
						<view class="stu-text">
							学号：{{stu_detail.student?stu_detail.student.account:'--'}}
						</view>
						<view class="stu-text">
							班级：{{stu_detail.student ? stu_detail.student.class :'--'}}
						</view>
						<view class="stu-text">
							手机号：{{stu_detail.student ? stu_detail.student.mobile :'--'}}
						</view>
					</view>
				</view>
				<view class="e-mail">
					<u-icon name="email"></u-icon>：{{stu_detail.student ? stu_detail.student.email :'--'}}
				</view>
				<view class="remark-title">
					{{stu_detail.student?stu_detail.student.sex==2?"她":"他":'--'}}的备注
				</view>
				<view class="remark">
					{{stu_detail.remark?stu_detail.remark:'暂无'}}
				</view>
			</view>
		</u-popup>
		<view class="sheduling-top" v-if="notice.length>0">
			<image src="../../static/images/nock.png" mode=""></image>
			<view class="title">
				<u-notice-bar :volume-icon="false" type='none' color='#2B9155' :speed="120" :list="notice">
				</u-notice-bar>
			</view>
		</view>
		<view class="tab">
			<view v-for="(item,index) in tab_list" :key='index' :class="current_tab==index ? 'active-item' : 'item'"
				@click="changTab(index)">
				<view class="week">
					{{item}}
				</view>
				<text class="line" v-if="current_tab==index">
				</text>
			</view>
		</view>
		<view class="content">
			<view class="top">
				<view :class="current_date==index ? 'active-item':'item'" v-for="(item,index) in table_week"
					:key='index' @click="changeDate(index,item)">
					<view class="week">
						{{item.week}}
					</view>
					<view class="date">
						{{getDay(item.day)}}
					</view>
				</view>
			</view>
			<view class="shedule">
				<view class="left">
					<view class="left_1">
						<view :class="current_time==-1 ? 'active-item':'item'" @click="changeTime(-1)">
							<image class="all" v-if="current_time==-1" src="../../static/images/all.png" mode="">
							</image>
							全部时间
							<image class="jian" v-if="current_time==-1" src="../../static/images/01.png" mode="">
							</image>
						</view>
						<view :class="current_time==index? 'active-item':'item'" v-for="(item,index) in time_list"
							:key='index' @click="changeTime(item,index)">
							{{item.start_time}}-{{item.end_time}}
							<image v-if="current_time==index" class="jian" src="../../static/images/01.png" mode="">
								<!-- <image v-if="current_time==item.id" class="jian" src="../../static/images/01.png" mode=""> -->
							</image>
						</view>
					</view>
				</view>
				<view class="right">
					<view class="" v-for="(item,index) in shedule_list" :key='index'>
						<view v-if="item.schedulings && index==current_time && index!=-1">
							<view class="item" v-for="(child,value) in item.schedulings">
								<view class="item-right">
									<view class="text">
										<image src="../../static/images/icon-2.png" mode=""></image>
										<view class="time">
											{{child.scheduling.day}}
										</view>
									</view>
									<view class="text">
										<image src="../../static/images/icon-1.png" mode=""></image>
										<view class="time">
											{{child.scheduling.start_time}}-{{child.scheduling.end_time}}
										</view>
									</view>
									<view class="text">
										<image src="../../static/images/icon-3.png" mode=""></image>
										<view class="time">
											{{child.scheduling.teacher ? child.scheduling.teacher.truename :'--'}}
										</view>
									</view>
									<view class="text">
										<image src="../../static/images/icon-3.png" mode=""></image>
										<view class="time">
											{{child.scheduling.room_name }}
										</view>
									</view>
								</view>
								<view class="cancel" @click="cancelShedule(child)" v-if="child.is_me && child.is_del">
									取消
								</view>
								<view class="cancel" @click="stuDetail(child.scheduling)"
									v-if="child.scheduling.student">
									查看学生
								</view>
								<view class="" v-if="!item.schedulings">
									{{ item.is_scheduling == false ? '已过期' : '立即排班' }}
								</view>
							</view>
						</view>
						<!-- 当时间未全部index==0 -->
						<view v-if="item.schedulings.length>0 && current_time==-1">
							<view class="item" v-for="(child,value) in item.schedulings">
								<view class="item-right">
									<view class="text">
										<image src="../../static/images/icon-2.png" mode=""></image>
										<view class="time">
											{{child.scheduling.day}}
										</view>
									</view>
									<view class="text">
										<image src="../../static/images/icon-1.png" mode=""></image>
										<view class="time">
											{{child.scheduling.start_time}}-{{child.scheduling.end_time}}
										</view>
									</view>
									<view class="text">
										<image src="../../static/images/icon-3.png" mode=""></image>
										<view class="time">
											{{child.scheduling.teacher ? child.scheduling.teacher.truename :'--'}}
										</view>
									</view>
									<view class="text">
										<image src="../../static/images/icon-3.png" mode=""></image>
										<view class="time">
											{{child.scheduling.room_name }}
										</view>
									</view>
								</view>
								<view class="cancel" @click="cancelShedule(child)" v-if="child.is_me && child.is_del">
									取消
								</view>
								<view class="cancel" @click="stuDetail(child.scheduling)"
									v-if="child.scheduling.student">
									查看学生
								</view>
								<view class="" v-if="!item.schedulings">
									{{ item.is_scheduling == false ? '已过期' : '立即排班' }}
								</view>
							</view>
						</view>
						<view class="add add1" v-if=" index == current_time">
							<image src="../../static/images/pass1.png" mode="widthFix"
								v-if="item.schedulings.length==0">
							</image>
							<view class="add-buttom" v-if="current_time != -1" @click="teacher_show = true">
								添加排班
							</view>
						</view>
						<!-- 	<view class="add"
							v-if="!item.scheduling &&item.is_scheduling == false && index == current_time ">
							<image src="../../static/images/pass1.png" mode="widthFix"></image>
							<view class="add-text">
								已截止
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<view class="table">
				<view class="title">
					工作排班信息
				</view>
				<view class="table_1">
					<view class="table-week">
						<view class="table-item" v-for="(item,index) in table_week" :key='index'>
							<view>{{ item.week ? item.week.slice(1) : '--'}}</view>
							<view>{{getDay(item.day)}}</view>
						</view>
					</view>
					<view class="table-tr">
						<view class="table-time" v-for="(item1,index1) in table_list" :key='index1'>
							<view v-for="(item,index) in item1" :key='index' class="time-item"
								:class="checkShedul(item.schedulings) ? 'me-item' : '' ">
								<view class="" v-if="item.schedulings.length>0" @click="lookTeacher(item.schedulings)">
									<view class="teacher" style="text-align: center;">
										{{item.schedulings.length}}位导师排班
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tips">
					<view class="tip-item">
						<span class="yellow">*</span>点击单元格可查看导师排班列表
					</view>
				</view>
			</view>
			<!-- 添加排班 -->
			<u-popup v-model="paibanList" mode="right">
				<view class="shedule-detail">
					<view class="pop_top">
						<text class="title">导师排班列表</text>
					</view>
					<view class="shedul-list">
						<view class="item" v-for="(item,index) in tableList" :key="index">
							<view class="item-right">
								<view class="text">
									<image src="../../static/images/icon-2.png" mode=""></image>
									<view class="time">
										{{item.scheduling.day}}
									</view>
								</view>
								<view class="text">
									<image src="../../static/images/icon-1.png" mode=""></image>
									<view class="time">
										{{item.scheduling.start_time}}-{{item.scheduling.end_time}}
									</view>
								</view>
								<view class="text">
									<image src="../../static/images/icon-3.png" mode=""></image>
									<view class="time">
										{{item.scheduling.teacher ? item.scheduling.teacher.truename :'--'}}
									</view>
								</view>
								<view class="text">
									<image src="../../static/images/icon-3.png" mode=""></image>
									<view class="time">
										{{item.scheduling.room_name }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<tab-bar :current="1"></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					status: 1,
					room_type: 1,
					room_name: '',
					room_id: '',
					max_student_nums:'',
				},
				roomList: [],
				roomShow: false,
				teacher_show: false,
				time_detail: '', //预约时间弹框
				stu_show: false, //学生信息弹框
				stu_detail: '', //查看学生详情
				date: [1, 1, 1, 1, 1, 1, 1],
				time_list: [1, 1, 1, 1, 1, 1],
				current_time: 0, //当前时间
				current_date: 0,
				current_tab: 0, //本周下周
				tab_list: ['本周', '下周'],
				table_week: 7,
				time_list: [],
				current_item: 0, //当前周索引
				now_date: '', //今天日期日期
				shedule_list: [], //排班列表
				teacher_id: '',
				time: '', //当前选中的时间段的内容--传参添加页面使用
				table_list: [], //表格列数
				day: '', //当天日期
				notice: '', //通知公告
				now_time: '',
				now_list: [],
				cancel_detail: '',
				cancel_show: false, //取消排班
				paibanList: false,
				tableList: []
			}
		},
		async onShow() {
			await this.getNowDate()
			await this.getSheuling()
			//await this.getList()
		},
		onLoad() {
			if (this.is_weixin()) {
				this.navTitle()
			}
			this.notice = []
			this.teacher_id = this.$store.state.vuex_user.type_id
			this.getNotice()
			this.getSetting()
		},
		computed: {
			getEmpty() {
				let a = true
				for (let i in this.shedule_list) {
					console.log(i, this.shedule_list[i].scheduling, 'YYYYYYYY')
					// console.log(this.shedule_list[i-1], 'YYTTTTTTTT')
					if (this.shedule_list[i].scheduling != null) {
						a = false
						break
					}
				}
				return a
			},
		},
		methods: {
			handleClose() {
				this.form = {
					status: 1,
					room_type: 0,
					room_name: '',
					room_id: '',
				}
				this.teacher_show = false
			},
			//获取配置项
			getSetting() {
				this.$u.get('/base/setting-key', {
					key: 'CLASS_ROOM_LIST'
				}).then(res => {
					this.roomList = JSON.parse(res.data.value)
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(e) {
				console.log(e, 'ppp')
				this.form.room_id = e[0].value
				this.form.room_name = e[0].label
			},
			checkShedul(arr) {
				var status = false
				if (arr.length > 0) {
					arr.map((item) => {
						if (item.teacher_id == this.teacher_id) {
							status = true
							return
						}
					})
				} else {
					status = false
				}
				return status
			},
			//判断是否是微信
			is_weixin() {
				let ua = navigator.userAgent.toLowerCase();
				return ua.indexOf('micromessenger') != -1;
			},
			navTitle() {
				let navTitle = document.getElementsByTagName('uni-page-head');
				navTitle[0].style.display = 'none'
			},
			//取消排班
			cancelShedule(item) {
				console.log(item.scheduling, 'ppp')
				this.cancel_detail = item.scheduling
				this.cancel_show = true
			},
			sure_cancel() {
				let id = this.cancel_detail.id
				this.$u.delete('/mentor/scheduling/' + id).then(res => {
					console.log(res, 'ppp')
					if (res.code == 200) {
						uni.showToast({
							title: '取消排班成功',
							icon: 'none'
						})
					}
					this.cancel_show = false
					this.getSheuling()
				})
			},

			//获取通知公告
			getNotice() {
				this.$u.get('/notice').then(res => {
					console.log(res, 'pppppp')
					if (res.data.notice) {
						this.notice.push(res.data.notice)
					}

				})
			},
			//姓名截取 获取前三个字
			getName(name) {
				if (name) {
					return name.truename.substr(0, 3)
				} else {
					return '--'
				}
			},
			//日期截取
			getDay(day) {
				if (day) {
					return day.slice(5)
				}
			},
			//查看学生信息
			stuDetail(item) {
				console.log(item, 'item')
				this.stu_show = true
				this.stu_detail = item
			},
			//查看导师列表
			lookTeacher(item) {
				console.log(item)
				this.paibanList = true
				this.tableList = item
			},
			//获取值班列表
			// async getList() {
			// 	console.log(this.current_tab, '当前时间')
			// 	if (this.current_tab == 1) {

			// 		if (this.current_date != 0) {

			// 		} else {
			// 			this.now_date = this.table_week[0].day
			// 			this.current_date = 0
			// 		}
			// 	}
			// 	console.log(this.now_date, '当前时间')
			// 	let data = {
			// 		day: this.now_date,
			// 		time_id: this.current_time == 0 ? '' : this.current_time,
			// 	}
			// 	await this.$u.get('/mentor/scheduling', data).then(res => {
			// 		console.log(res, '我的值班信息')
			// 		this.shedule_list = res.data.list
			// 	})
			// },
			//获取排班信息
			async getSheuling() {
				await this.$u.get('/mentor/scheduling-calendar', {
					type: this.current_tab
				}).then(res => {
					console.log(res, '排班信息')
					this.time_list = res.data.times
					this.table_list = res.data.list
					this.time = res.data.times[0]
					let table_week = res.data.days

					table_week.map((item, index) => {
						// if (this.current_tab == 0) {
						// 	this.now_date = this.day
						// }
						// this.now_date = this.table_week[this.current_date].day
						if (this.now_date == item.day) {
							this.current_date = index
						}

						switch (item.week) {
							case 0:
								item.week = '周日'
								break
							case 1:
								item.week = '周一'
								break
							case 2:
								item.week = '周二'
								break
							case 3:
								item.week = '周三'
								break
							case 4:
								item.week = '周四'
								break
							case 5:
								item.week = '周五'
								break
							case 6:
								item.week = '周六'
								break
						}
						return item
					})

					this.table_week = table_week
					this.now_date = this.table_week[this.current_date].day
					let data = res.data.list
					this.shedule_list = data[this.current_date]
					console.log(this.shedule_list)
					console.log(this.current_date, 'YYYYYYYYYYY')
				})
			},
			//获取当前年月日
			getNowDate() {
				//获取当前年月日
				let nowDate = new Date()
				let year = nowDate.getFullYear()
				let month = nowDate.getMonth() + 1
				let date = nowDate.getDate()
				month = month >= 10 ? month : '0' + month
				date = date >= 10 ? date : '0' + date
				this.day = this.now_date = year + '-' + month + '-' + date
				console.log(this.now_date, '09--25')

			},
			//选择日期
			changeDate(index, item) {
				console.log(index, 'index----')
				console.log(item, 'index----')
				this.current_date = index
				this.now_date = item.day
				this.getSheuling()
			},
			//选择时间段
			changeTime(item, index) {
				console.log(item, 'llllllll')
				if (item.id) {
					this.current_time = index
					this.time = item
				} else {
					this.current_time = item
				}

			},
			//选择本周还是下周
			async changTab(index) {

				this.current_tab = index
				if (index == 0) {
					this.now_date = this.day
				}

				if (index == 1) {
					this.current_date = 0
					this.now_date = this.table_week[0].day
					console.log(this.now_date, 'pppp')
				}
				console.log(this.now_date, 'pppp')
				this.getSheuling();

			},
			// //添加排班
			// add() {
			// 	uni.navigateTo({
			// 		url: './add?time_id=' + this.current_time + '&day=' + this.now_date +
			// 			'&start_time=' + this
			// 			.time.start_time + '&end_time=' + this.time.end_time
			// 	})
			// },
			//确认添加排班
			sure_choose() {
				// let data = {
				// 	status: 1,
				// 	teacher_id: this.$store.state.vuex_user.type_id,
				// 	day: this.now_date,
				// 	time_ids: this.time.id
				// }
				if(this.form.max_student_nums==''){
					uni.showToast({
						title:'请输入最大预约人数',
						icon:'none'
					})
					return
				}
				if(!this.form.room_id){
					uni.showToast({
						title:'请选择值班教室',
						icon:'none'
					})
					return
				}
				this.form.teacher_id = this.$store.state.vuex_user.type_id
				this.form.day = this.now_date
				this.form.time_ids = this.time.id
				this.$u.post('/mentor/scheduling', this.form).then(res => {
					console.log(res, '添加排班')
					if (res.code == 200) {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						this.teacher_show = false
						this.getSheuling()

					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sheduling {
		padding-bottom: 70px;

		.shedule-detail {
			width: 270px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.pop_top {
				margin-top: 32px;

				text {
					display: block;
					font-size: 13px;
					color: rgba(40, 40, 40, 0.5);
					text-align: center;
					line-height: 18px;
				}

				.title {
					font-size: 18px;
					font-weight: bold;
					color: #282828;
					line-height: 25px;
					margin-bottom: 2px;
				}
			}

			.shedul-list {
				width: 90%;
				overflow-y: auto;
				height: 85vh;
			}

			.item {
				display: flex;
				position: relative;
				align-items: center;
				padding: 10px;
				margin-top: 12px;
				font-size: 13px;
				background: rgba(234, 237, 242, .28);
				border-radius: 7px;

				.tips {
					position: absolute;
					width: 57px;
					height: 20px;
					background: #C1915A;
					line-height: 20px;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					opacity: 1;
					opacity: 1;
					right: 12px;
					z-index: 2;
					top: 0;
					text-align: center;
					border-radius: 0px 0px 6px 6px;
				}

				.item-left {
					margin-right: 10px;

					.image {
						height: 42px;
						width: 42px;
						border: solid 1px;
						border-radius: 50%;
						background-position: center;
						background-repeat: no-repeat;
						background-size: cover;
					}

					.name {
						font-size: 10px;
						font-family: PingFang SC;
						font-weight: 400;
						text-align: center;
						line-height: 20px;
						color: #292929;
						opacity: 1;
						width: 50px;
						/*指定宽度*/
						word-break: keep-all;
						/* 不换行 */
						white-space: nowrap;
						/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
						overflow: hidden;
						/* 内容超出宽度时隐藏超出部分的内容 */
						text-overflow: ellipsis;
						/* IE 专有属性，当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
					}
				}

				.item-right {
					flex: 1;

					.text {
						line-height: 17px;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 400;
						color: #282828;
						opacity: 1;

						image {

							height: 13px;
							width: 13px;
							display: inline-block;
							margin-right: 4px;
						}

						.time {
							font-family: PingFang SC;
							font-weight: 400;
							color: #282828;
							opacity: 1;
							display: inline-block;

							margin-top: 4px;
						}
					}
				}
			}

		}

		//添加排班弹框
		.pop_wrap {
			width: 290px;
			height: 250px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.pop_top {
				margin-top: 32px;

				text {
					display: block;
					font-size: 13px;
					color: rgba(40, 40, 40, 0.5);
					text-align: center;
					line-height: 18px;
				}

				.title {
					font-size: 18px;
					font-weight: bold;
					color: #282828;
					line-height: 25px;
					margin-bottom: 2px;
				}
			}

			.pop_center {
				margin-top: 22px;

				text {
					font-size: 16px;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20px;
					color: #353535;
					opacity: 0.79;
					display: block;
					margin-bottom: 6px;
				}
			}

			.pop_bootom {
				margin-top: 30px;

				button {
					border: 1px solid #FF5A26;
					width: 98px;
					// height: 36px;
					padding: 0 5px;
					line-height: 36px;
					background-color: #fff;
					color: #FF5A26;
				}
			}
		}

		//查看学生信息弹框
		.student-show {
			padding-bottom: 5px;

			.stu-title {
				font-size: 20px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #282828;
				opacity: 1;
				text-align: center;
				padding: 20px 0 30px;
			}

			.stu-mess {
				display: flex;
				padding: 0 22px;

				image {
					height: 75px;
					width: 75px;
					margin-right: 14px;
					border-radius: 9px;
				}

				.right {
					flex: 1;

					.stu-text {
						font-size: 13px;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 20px;
						color: #282828;
						overflow: hidden;

						display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;

						text-overflow: ellipsis; //溢出部分用省略号代替

						-webkit-line-clamp: 2; //设置文本显示两行

						-webkit-box-orient: vertical; //从上到下排列子元素;

						white-space: normal;
					}
				}
			}

			.e-mail {
				margin: 18px 22px 10px;
				height: 36px;
				line-height: 36px;
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(40, 40, 40, .78);
				border-bottom: 1px solid rgba(112, 112, 112, .06);
			}

			.remark-title {
				margin: 10px 22px 0px;
				padding: 5px;
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #282828;
				opacity: 0.61;
			}

			.remark {
				margin: 0px 22px 22px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: #282828;
				opacity: 0.54;
				padding: 5px;
				overflow: hidden;
				display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;

				text-overflow: ellipsis; //溢出部分用省略号代替

				-webkit-line-clamp: 3; //设置文本显示两行

				-webkit-box-orient: vertical; //从上到下排列子元素;

				white-space: normal;
				// border-bottom: 1px solid rgba(112, 112, 112, .06);
			}
		}

		.sheduling-top {
			display: flex;
			align-items: center;
			justify-items: center;
			height: 46px;
			background-color: #E6FFF0;
			padding: 0 30px;
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #2B9155;

			image {
				height: 20px;
				width: 20px;
				margin-right: 9px;
			}

			.title {
				flex: 1;
				white-space: nowrap;
				/*设置不换行*/
				overflow: hidden;
				/*设置隐藏*/
				text-overflow: ellipsis;
				/*设置隐藏部分为省略号*/
			}
		}

		.tab {
			display: flex;
			align-items: center;
			width: 50%;
			margin: 0 auto;

			// background-color: #18B566;


			.item,
			.active-item {

				margin-top: 17px;

				view {
					display: block;
				}

				font-size: 18px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: rgba(113, 113, 113, .43);
				opacity: 0.43;
				opacity: 1;
				flex: 1;
				text-align: center;

				.week {
					padding-bottom: 12px;
				}

				.line {
					width: 25px;
					height: 4px;
					background: #96203a;
					opacity: 1;
					border-radius: 1px;
					display: block;
					margin: 0 auto;

				}
			}

			.active-item {
				font-size: 18px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #96203a;

				.week {
					padding-bottom: 8px;
				}

			}
		}

		.content {
			padding: 17px;

			.top {
				display: flex;
				align-items: center;
				justify-items: center;
				background: rgba(238, 238, 238, .46);
				border-radius: 12px 12px 0 0;
				overflow: hidden;


				.item,
				.active-item {
					padding: 9px 0;
					flex: 1;
					text-align: center;

					.week {
						font-size: 14px;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 20px;
						color: #282828;
						opacity: 1;
					}

					.date {
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 20px;
						color: #282828;
						opacity: 0.6;
					}
				}

				.active-item {
					background-color: #96203a;

					.week,
					.date {
						color: #fff;
					}

				}
			}

			.shedule {
				display: flex;
				position: relative;

				.add {
					display: flex;
					text-align: center;
					align-items: center;
					flex-direction: column;
					color: #FFFFFF;
					opacity: 1;

					image {
						width: 60%;
						margin-top: 25%;
					}

					.add-buttom {
						font-size: 14px;
						color: #292929;
						padding: 10px 20px;
						background-color: #3E7855;
						color: #fff;
						margin-top: 30px;
						border-radius: 10px;
					}

					.add-text {
						color: #3E7855;
						font-size: 14px;
						margin-top: 40px;
					}
				}

				.left {
					flex: 0 0 100px;
					height: 425px;


					opacity: 1;
					overflow-y: auto;
					border-radius: 0px 0px 0px 12px;

					.left_1 {
						height: 100%;
						width: 92px;
						background: #F7F7F7;
					}

					.item,
					.active-item {
						font-size: 13px;
						padding: 15px 0;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;

						.all {
							height: 13px;
							width: 13px;
							margin-right: 6px;
						}

						.jian {
							position: absolute;
							height: 14px;
							width: 8px;
							right: -8px;
						}
					}

					.active-item {
						background-color: #96203a;
						color: #FFFFFF;
					}
				}

				.right {
					flex: 1;
					margin-left: 3px;
					height: 425px;
					overflow-y: scroll;

					.item {
						display: flex;
						position: relative;
						align-items: center;
						padding: 10px;
						margin-top: 12px;
						font-size: 13px;
						background: rgba(234, 237, 242, .28);
						border-radius: 7px;

						.tips {
							position: absolute;
							width: 57px;
							height: 20px;
							background: #C1915A;
							line-height: 20px;
							font-size: 12px;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							opacity: 1;
							opacity: 1;
							right: 12px;
							z-index: 2;
							top: 0;
							text-align: center;
							border-radius: 0px 0px 6px 6px;
						}

						.item-left {
							margin-right: 10px;

							.image {
								height: 42px;
								width: 42px;
								border: solid 1px;
								border-radius: 50%;
								background-position: center;
								background-repeat: no-repeat;
								background-size: cover;
							}

							.name {
								font-size: 10px;
								font-family: PingFang SC;
								font-weight: 400;
								text-align: center;
								line-height: 20px;
								color: #292929;
								opacity: 1;
								width: 50px;
								/*指定宽度*/
								word-break: keep-all;
								/* 不换行 */
								white-space: nowrap;
								/* 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。不换行 */
								overflow: hidden;
								/* 内容超出宽度时隐藏超出部分的内容 */
								text-overflow: ellipsis;
								/* IE 专有属性，当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
							}
						}

						.item-right {
							flex: 1;

							.text {
								line-height: 17px;
								font-size: 12px;
								font-family: PingFang SC;
								font-weight: 400;
								color: #282828;
								opacity: 1;

								image {

									height: 13px;
									width: 13px;
									display: inline-block;
									margin-right: 4px;
								}

								.time {
									font-family: PingFang SC;
									font-weight: 400;
									color: #282828;
									opacity: 1;
									display: inline-block;

									margin-top: 4px;
								}
							}
						}

						.cancel {
							width: 58px;
							height: 23px;
							line-height: 23px;
							border: 1px solid rgba(193, 145, 90, 0.44);
							border-radius: 12px;
							font-size: 12px;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 20px;
							color: #C1915A;
							opacity: 1;
							text-align: center;
						}
					}
				}
			}

			.table {
				.tips {
					display: flex;
					margin-top: 25px;

					.tip-item {
						flex: 1;
						font-size: 11px;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 20px;
						color: rgba(40, 40, 40, .56);
						opacity: 1;

						.yellow {
							color: #3E7855;
						}
					}
				}

				.title {
					font-size: 18px;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 20px;
					color: #282828;
					opacity: 1;
					margin: 30px 0
				}

				.table_1 {
					background-color: rgba(249, 250, 252, 1);

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

						.table-item {
							display: flex;
							justify-content: center;
							flex-direction: column;
							height: 53px;
							// line-height: 53px;
							text-align: center;
							flex: 1;
							border-right: solid 1px rgba(112, 112, 112, .08);

							view:last-child {
								font-size: 10px;
							}

						}
					}

					.table-tr {
						display: flex;

						.table-time {
							flex: 1;

							.time-item {
								display: flex;
								justify-content: center;
								align-items: center;
								flex-flow: column;
								height: 53px;
								border-top: solid 1px rgba(112, 112, 112, .08);
								border-right: solid 1px rgba(112, 112, 112, .08);
								font-size: 10px;
								font-family: PingFang SC;
								font-weight: 400;
								color: #333;
								opacity: 1;
							}

							.active-time-item {
								display: flex;
								justify-content: center;
								align-items: center;
								flex-flow: column;
								height: 53px;
								border-top: solid 1px rgba(255, 255, 255, .08);
								border-right: solid 1px rgba(255, 255, 255, .08);
								font-size: 10px;
								font-family: PingFang SC;
								font-weight: 400;
								color: #333;
								opacity: 1;
								background-color: rgba(62, 120, 85, 1);

								.teacher {
									font-size: 10px;
									font-family: PingFang SC;
									font-weight: 500;
									line-height: 20px;
									color: #FFFFFF;
									opacity: 1;
									text-align: center;
									white-space: nowrap;
									/*设置不换行*/
									overflow: hidden;
									opacity: 1;

								}

								.stu {
									text-align: center;
									font-size: 10px;
									font-family: PingFang SC;
									font-weight: 400;
									line-height: 20px;
									color: #FEEF7E;
									opacity: 1;

								}
							}

							.me-item {
								display: flex;
								justify-content: center;
								align-items: center;
								flex-flow: column;
								height: 53px;

								border-top: solid 1px rgba(255, 255, 255, .08);
								border-right: solid 1px rgba(255, 255, 255, .08);
								font-size: 10px;
								font-family: PingFang SC;
								font-weight: 400;
								color: #333;
								opacity: 1;
								background-color: rgba(193, 145, 90, 1);

								.teacher {
									font-size: 10px;
									font-family: PingFang SC;
									font-weight: 500;
									line-height: 20px;
									color: #FFFFFF;
									opacity: 1;
								}

								.stu {
									font-size: 10px;
									font-family: PingFang SC;
									font-weight: 400;
									line-height: 20px;
									color: #FEEF7E;
									opacity: 1;
									text-align: center;
								}
							}
						}
					}
				}

			}
		}
	}
</style>