LabCenter/pages/index/index.vue

<template>
	<!-- 'padding-top':navHeight + 57+ 'px' -->
	<view :style="{'padding-top':navHeight + 'px'}" style="min-height: 100vh;background: #F5F5F5;" class="u-skeleton">
		<u-skeleton :loading="loading" :animation="true"></u-skeleton>
		<!-- 弹框 -->
		<u-popup v-model="show" 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">
					{{detailMsg.lesson ? detailMsg.lesson.name :'未知'}}
				</view>
				<view class="content-item">
					<view class="prop-label">
						授课老师：
					</view>
					<view class="prop-text">
						{{detailMsg.teacher.name == undefined ? '未知' : detailMsg.teacher.name}}
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						实验室：
					</view>
					<view class="prop-text">
						{{detailMsg.room? detailMsg.room.name : '--'}}
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						上课班级：
					</view>
					<view class="prop-text">
						{{detailMsg.grade ?detailMsg.grade.name :'--'}}
					</view>
				</view>

				<view class="content-item">
					<view class="prop-label">
						授课方式：
					</view>
					<view class="prop-text">
						{{detailMsg.teach_type == 2 ? '实验' :'理论'}}({{detailMsg.group_name}})
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						上课人数：
					</view>
					<view class="prop-text">
						{{detailMsg.student_nums}}人
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						上课时间：
					</view>
					<view class="prop-text">
						{{detailMsg.day}} · 第{{detailMsg.week}}周 · {{detailMsg.week_index}} · {{detailMsg.time.name}}节
					</view>
				</view>
				<view class="content-item">
					<view class="prop-label">
						上课内容：
					</view>
					<view class="prop-text">
						{{detailMsg.teach_title}}
					</view>
				</view>
				<view class="prop-srue" @click="show=false">
					确定
				</view>
			</view>
		</u-popup>
		<!-- 弹框结束 -->
		<header-nav>
			<view style="font-size:#333333 ;font-weight: 550;font-size: 17px;display: inline-block;">
				首页
			</view>
		</header-nav>
		<!-- :style="{'top':navHeight + 'px'}" -->
		<view class="daiban" v-if="hasmessage==1" :style="{'top':navHeight + 'px'}">
			<view class="notice-left">
				<u-icon name="bell-fill" class="notice-icon" size="34">
				</u-icon>
				<text> 您有新的未读消息！</text>
			</view>
			<view class="notice-right" @click="lookMessage">
				立即查看
			</view>
		</view>
		<view class="index" :class="hasmessage==1 ?'has-message' :''">
			<view class="index-top">
				<view class="top-left">
					<view class="num">
						{{homeMsg.lesson_total_nums || 0}}
					</view>
					<view class="text">
						今日教学任务
					</view>
				</view>
				<view class="top-right">
					<view class="num">
						{{homeMsg.wait_approve_nums || 0}}
					</view>
					<view class="text">
						待审批任务数
					</view>
				</view>
			</view>
			<view class="index-top_2">
				<view class="top-left" @click="handleClick"
					v-if="$transformAuth('100205')|| $transformAuth('100101')||$transformAuth('100102')">
					<view class="num">
						<image src="../../static/image/index/icon_5.png" mode="aspectFill"></image>
					</view>
					<view class="text">
						停调补课
					</view>
				</view>
				<view class="top-left top-middle open-order" @click="openOrder" v-if="$transformAuth('100103') && !is_admin">
					<view class="num">
						<image src="../../static/image/index/icon_3.png" mode="aspectFill"></image>
					</view>
					<view class="text">
						预约实验室
					</view>
				</view>
				<view class="top-left top-middle" @click="goOrderlist"
					v-if="$transformAuth('100103')|| $transformAuth('100101')||$transformAuth('100102')">
					<view class="num">
						<image src="../../static/image/index/icon_3.png" mode="aspectFill"></image>
					</view>
					<view class="text">
						开放预约
					</view>
				</view>
				<view class="top-left top-right" @click="checkAccount" v-if="$transformAuth('100301')">
					<view class="num">
						<image src="../../static/image/index/icon_4.png" mode="aspectFill"></image>
					</view>
					<view class="text">
						账号审批
					</view>
				</view>
			</view>
			<!-- 实时课表 -->
			<view class="content_1" v-if="courseLsit.length>0">
				<view class="title">
					今日实时课表
				</view>
				<view class="table">
					<u-tabs :list="courseLsit" count="nums" :offset="[18,7]" :current="currentRoom" @change="change">
					</u-tabs>
					<view class="table-list">
						<view class="table-item complete" @click="courseDetail(item)"
							v-for="(item,index) in courseLsit[currentRoom].data" :key="index">
							<view class="item-border">
							</view>
							<view class="">
								<view class="room-name">
									{{item.lesson == null ? '未知' : item.lesson.name}}({{item.teacher ?item.teacher.name :'未知'}})
								</view>
								<view class="teacher">
									<text style="padding: 2px;">{{item.time.name}}节</text>·<text
										style="padding: 2px;">{{item.grade.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 通知公告 -->
			<view class="content_1">
				<view class="title">
					通知公告
				</view>
				<view class="notice">
					<view class="notice-list" v-for="(item,index) in noticeList" :key='index'
						@click="noticeDetail(item.id)">
						<view class="list-item">
							<view class="notice-title">
								{{item.name}}
							</view>
							<view class="notice-time">
								<view class="time">
									{{item.updated_at}}
								</view>
								<view class="views">
									{{item.view_count}}人已看
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 今日代办 -->
			<view class="content_1"
				v-if="$transformAuth('100103')||$transformAuth('100205') || $transformAuth('100301') || $transformAuth('100207')">
				<view class="title">
					待审核
					<!-- {{$transformAuth('100301') && ($transformAuth('100101') || $transformAuth('100301')) && ($transformAuth('100207') || $transformAuth('100208')) ?'待审核' :'我的申请'}} -->
				</view>
				<view class="wait">
					<u-tabs :list="list " count="sort" :current="currentTab" v-if="$transformAuth('100301')"
						bg-color='#F5F5F5' @change="changeTab">
					</u-tabs>
					<u-tabs :list="teacherList " count="sort" :current="currentTab" v-else bg-color='#F5F5F5'
						@change="changeTab">
					</u-tabs>
					<view class="" v-if="currentTab==0">
						<!-- 停调补课申请 -->
						<view class="wait-list" v-for="(item,index) in handleList" :key="index">
							<view class="wait-title">
								<view class="left">
									{{item.lesson? item.lesson.name :'--'}}
								</view>
								<view class="right" @click="lookCheckStep(item)">
									<text v-if="item.status == 6" class="status_text"> {{ item.status_text }}</text>
									<text class="loading" v-if="item.status == 1 || item.status == 4">
										{{ item.status_text }}
									</text>
									<text class="loading" v-if="item.status == 2">待实验中心审核

									</text>
									<text class="fail" v-if="item.status == 3 || item.status == 5">
										{{ item.status_text }}</text>
									<text class="fail" v-if="item.status == 0 || item.status == 7">
										{{ item.status_text }}</text>
								</view>
							</view>
							<view class="wait-content">
								<view class="content-item">
									<view class="label">
										申请人：
									</view>
									<view class="content-text">
										{{item.admin? item.admin.name:'--'}}
									</view>
								</view>

								<view class="content-item">
									<view class="label">
										实验室：
									</view>
									<view class="content-text">
										{{ item.schedule_data.room ? item.schedule_data.room.name : '--' }}
									</view>
								</view>
								<view class="content-item">
									<view class="label">
										上课时间：
									</view>
									<view class="content-text">
										第{{ item.schedule_data ? item.schedule_data.week : '--' }}周 / 周{{
									                item.schedule_data
									                  ? transformWeek(item.schedule_data.week_index)
									                  : '--'
									              }}({{ item.schedule_data.day }}) /
										{{ item.schedule_data.time ? item.schedule_data.time.name : '--' }}节
									</view>
								</view>
								<view class="content-item">
									<view class="label">
										申请类型：
									</view>
									<view class="content-text">
										<text style="color:red;" v-if="item.type == 1">停课</text>
										<text style="color:#FFAD33 ;" v-if="item.type == 2">调课</text>
										<text style="color:#13ce66 ;" v-if="item.type == 3">补课</text>
									</view>
								</view>
							</view>
							<view class="wait-time">
								<view class="time">
									申请时间：{{item.created_at}}
								</view>
								<view class="buttom" @click="handleDetail(item.id)">
									查看详情
								</view>
							</view>
						</view>
					</view>
					<!-- 开放预约申请 -->
					<view class="" v-if="currentTab==1">
						<!-- 停调补课申请 -->
						<view class="wait-list" v-for="(item,index) in openOrderList" :key="index">
							<view class="wait-title">
								<view class="left">
									<text v-if="item.template == 1">外院正常上班</text>
									<text v-if="item.template == 2">外院非正常上班</text>
									<text v-if="item.template == 3">信息技术学院教师</text>
								</view>
								<view class="right" @click="lookOpenCheckStep(item)">
									<text v-if="item.status == 7" class="status_text"> {{ item.status_text }}</text>
									<text class="loading"
										v-if="  item.status == 1 ||item.status == 2 ||item.status == 5 ||item.status == 3">
										{{ item.status_text }}
									</text>
									<text class="fail" v-if="item.status == 6 || item.status == 8 || item.status == 4">
										{{ item.status_text }}</text>
									<text class="fail" v-if="item.status == 0 ">
										{{ item.status_text }}</text>
								</view>
							</view>
							<view class="wait-content">
								<view class="content-item">
									<view class="label">
										申请人：
									</view>
									<view class="content-text">
										{{item.applicant_name || '--'}}（{{item.applicant_mobile || '--'}})
									</view>
								</view>
								<!-- <view class="content-item">
									<view class="label">
										联系方式：
									</view>
									<view class="content-text">
										{{item.applicant_mobile || '--'}}
									</view>
								</view> -->

								<view class="content-item">
									<view class="label">
										申请人部门：
									</view>
									<view class="content-text">
										{{ item.department || '--'}}
									</view>
								</view>
								<view class="content-item">
									<view class="label">
										使用人数：
									</view>
									<view class="content-text">
										{{item.use_people_nums || '--'}}人
									</view>
								</view>
								<view class="content-item">
									<view class="label">
										申请节数：
									</view>
									<view class="content-text">
										<!-- <u-tag :text="item.use_data.length" mode="light" size="mini" /> 节 -->
										{{item.use_data.length}}节

									</view>
								</view>
								<!-- 	<view class="content-item">
									<view class="label">
										申请类型：
									</view>
									<view class="content-text">
										<text style="color:red;" v-if="item.type == 1">停课</text>
										<text style="color:#FFAD33 ;" v-if="item.type == 2">调课</text>
										<text style="color:#13ce66 ;" v-if="item.type == 3">补课</text>
									</view>
								</view> -->
							</view>
							<view class="wait-time">
								<view class="time">
									申请时间：{{item.created_at}}
								</view>
								<view class="buttom" @click="openOrderDetail(item.id)">
									查看详情
								</view>
							</view>
						</view>
					</view>
					<!-- 账号审核 -->
					<view class="" v-if="currentTab==2">
						<view class="message">
							<view class="msg-li" v-for="(item,index) in accountList" :key="index">
								<view class="li-top">
									<text style="font-size: 15px;font-weight: bold;color: #333333;">{{item.name}}
										{{item.mobile}}</text>
									<text style="font-size: 12px;font-weight: 400;color: #FFAD33;"
										v-if="item.check_status==0">待审核</text>
									<image src="/static/image/record/tongguo.png"
										style="width: 55px;height: 55px;margin-bottom: -38px;"
										v-if="item.check_status==1"></image>
									<image src="/static/image/record/shibai.png"
										style="width: 55px;height: 55px;margin-bottom: -38px;"
										v-if="item.check_status==2"></image>
								</view>
								<view class="li-center">
									<text>部门：{{item.department}}</text>
									<text>工号：{{item.account}}</text>
								</view>
								<view class="li-bottom">
									<text
										style="font-size: 13px;font-weight: 400;color: #333;">申请时间：{{item.created_at}}</text>
									<view @click="showTrue(item.id,item.check_status,item.check_result)"
										v-if="item.check_status!=1">
										<text>审核</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="empty" style="padding-top: 20px;"
						v-if="(currentTab==0 && handleList.length==0) ||(currentTab==1 && openOrderList.length==0)|| (currentTab==2 && accountList.length==0)">
						<u-empty text="暂无申请" mode="list"></u-empty>
					</view>
				</view>
			</view>
			<!-- 账号审核弹窗 -->
			<view class="pop-bj" v-show="accountSshow"></view>
			<view class="pop" v-if="accountSshow">
				<image src="/static/image/record/laba.png" mode="" style="width: 91px;height: 68px;margin-top: -34px;">
				</image>
				<text class="txt1">温馨提示</text>
				<text class="txt2">是否确定通过审核？</text>
				<view class="pop-btn">
					<view @click="accountSshow=false" style="background: #F5F5F5;color: #333333;">
						<text>取消</text>
					</view>
					<view style="background: #3665FF;color: #fff;" @click="confirm">
						<text>确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	var app = getApp()
	export default {
		data() {
			return {
				homeMsg: '', //首页的数据
				show: false,
				accountSshow: false,
				navHeight: app.globalData.navHeight,
				currentRoom: 0,
				currentTab: 0,
				page: 1,
				last: false,
				room_id: 0,
				list: [{
					name: '停/调/补课审核',
				}, {
					name: '开放预约审核',
				}, {
					name: '账号申请审核',
				}, ],
				teacherList: [{
					name: '停/调/补课审核',
				}, {
					name: '开放预约审核',
				}],
				courseLsit: [],
				noticeList: [1, 2],
				detailMsg: '',
				handleList: [], //停调补课申请列表
				openOrderList: [], //开放预约申请
				accountList: [], //账号审批列表
				// 账号审核弹框表单
				id: '',
				status: '',
				result: '',
				hasmessage: 0, //是否有未读消息
				checkStepShow: true, //审核进度弹框
				loading: true,
				a_total_page: 1,
				b_total_page: 1,
				c_total_page: 1,
				is_monitor: false,
				is_polling: false,
				is_admin: false,
			}
		},
		async onLoad() {

			console.log(this.$u.http.config.baseUrl, '.$u.http')
			await this.checkRole();
			await this.getHome();
			await this.getHandle();
		},
		onShow() {
			console.log(this.vuex_term_id, 'vuex_term_idvuex_term_idvuex_term_idvuex_term_id')
			// this.page = 1
			// this.last = false
			// this.currentTab = 0
			// this.handleList = []
		},
		onPullDownRefresh() {
			this.day = ''
			this.page = 1;
			this.last = false
			// this.handleList = [] //停调补课申请列表
			// this.openOrderList = [] //开放预约申请
			// this.accountList = [] //账号审批列表
			if (this.currentTab == 0) {
				this.getHandle()
			}
			if (this.currentTab == 1) {
				this.getOpenOrder()
			}
			if (this.currentTab == 2) {
				this.getAccountOrder()

			}
			this.getHome();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (!this.last) {
				console.log(this.last, 'this.last')
				this.page++
				if (this.currentTab == 0 && this.a_total_page > this.page) {
					console.log(123)
					this.getHandle()
				}
				if (this.currentTab == 1 && this.b_total_page > this.page) {
					this.getOpenOrder()
				}
				if (this.currentTab == 2 && this.c_total_page > this.page) {
					this.getAccountOrder()
				}
			}

		},
		methods: {
			//判断权限
			checkRole() {
				let status = false
				let roles = this.$store.state.vuex_user.roles
				let arr = []
				roles.map(item => {
					arr.push(item.name)
				})
				let index = arr.indexOf('polling')
				if (index >= 0) this.is_polling = true
				let index2 = arr.indexOf('monitor')
				if (index2 >= 0) this.is_monitor = true
				let index3 = arr.indexOf('admin')
				if (index3 >= 0) this.is_admin = true
				console.log(index, index2, index3)

			},
			//查看停调补课审核进度
			lookCheckStep(item) {
				console.log(11)
				uni.navigateTo({
					url: '/pages/index/checkStep?id=' + item.id + '&time=' + item.created_at + '&apply_name=' +
						(item.admin ? item.admin.name : '--')
				})
			},
			//查看开放预约审核进度
			lookOpenCheckStep(item) {
				uni.navigateTo({
					url: '/pages/index/openCheckStep?id=' + item.id + '&time=' + item.created_at + '&enlength=' +
						item.enclosure.length + '&apply_name=' +
						(item.admin ? item.admin.name : '--')
				})
			},
			//获取用户未读消息
			getUserMessage() {
				this.$u.get('/news/message/user-message?is_read=0').then(res => {
					if (resd.data.list.length > 0) this.hasmessage = 1
					else this.hasmessage = 0
				})
			},
			//未读信息
			lookMessage() {
				uni.navigateTo({
					url: '/pages/laboratory/history'
				})
			},
			//通过审核
			showTrue(id, status, result) {
				this.accountSshow = true;
				this.id = id;
				this.status = status;
				this.result = result
			},
			confirm() {
				//确定通过审核，
				this.$u.post('/lab/account/check', {
					id: this.id,
					check_status: this.status,
					check_result: this.result,
					type: 3
				}).then(res => {
					console.log(res)
					this.$u.toast('审核成功');
					this.accountSshow = false;
				}).catch(err => {
					console.log(err)
					this.accountSshow = false;
				})
			},
			//转换日期
			transformWeek(week) {
				switch (week) {
					case 0:
						return '一'
					case 1:
						return '二'
					case 2:
						return '三'
					case 3:
						return '四'
					case 4:
						return '五'
					case 5:
						return '六'
					case 6:
						return '日'
				}
			},
			//获取账号待审批列表
			getAccountOrder() {
				let data = {
					status: 2,
					page: this.page
				}
				this.$u.get('/lab/account', data).then(res => {
					let data = res.data.list;
					this.c_total_page = res.data.meta.pagination.total_pages;
					if (data.length == 0) {
						this.last = true
					} else {
						this.accountList = this.accountList.concat(data)
					}
				})
			},
			//获取开放预约待审批
			getOpenOrder() {
				// "100101": "院系开放预约审核权限",
				// "100102": "实验中心开放预约审核权限",
				//2实验中心
				//3院系
				let status = 0
				if (this.$transformAuth('100101') && this.$transformAuth('100102')) status = '2,3'
				// 院系开放预约审核权限
				if (this.$transformAuth('100101') && !this.$transformAuth('100102')) status = '3'
				// 实验中心开放预约审核权限
				if (!this.$transformAuth('100101') && this.$transformAuth('100102')) status = '2'
				let data = {
					status: status,
					page: this.page
				}
				this.$u.get('/lab/open-appointment', data).then(res => {
					let data = res.data.list;
					this.b_total_page = res.data.meta.pagination.total_pages;
					console.log(res, 'course1')
					if (data.length == 0) {
						this.last = true
					} else {
						this.openOrderList = this.openOrderList.concat(data)
					}
				})
			},

			//获取停调补课待审核
			async getHandle() {
				// 1"待院系审核",
				//2"院系审核成功，待实验中心审核",
				// "100207": "院系审核排课权限",
				//"100208": "实验中心审核排课权限",
				let status = 0
				if (this.$transformAuth('100207') && this.$transformAuth('100208')) status = '1,2'
				// 院系开放预约审核权限
				if (this.$transformAuth('100207') && !this.$transformAuth('100208')) status = 1
				// 实验中心开放预约审核权限
				if (!this.$transformAuth('100207') && this.$transformAuth('100208')) status = 2
				console.log(status)
				let data = {
					status: status,
					page: this.page
				}
				await this.$u.get('/school/schedule/record', data).then(res => {
					let data = res.data.list;
					this.a_total_page = res.data.meta.pagination.total_pages;
					console.log(res, 'course1')
					if (data.length == 0) {
						this.last = true
					} else {
						this.handleList = this.handleList.concat(data)
					}
				})
			},
			//查看停调补课详情
			handleDetail(id) {
				uni.navigateTo({
					url: '/pages/record/tutorialDetail?id=' + id
				})
			},
			//开放预约相亲
			openOrderDetail(id) {
				uni.navigateTo({
					url: '/pages/record/reserveDetail?id=' + id
				})
			},
			//获取首页接口
			async getHome() {
				uni.showLoading()
				let dataTime
				let yy = new Date().getFullYear();
				let mm = (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() +
					1);
				let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
				dataTime = `${yy}-${mm}-${dd}`;
				await this.$u.get('/lab/home-mobile', {
					day: '2022-06-01',
					room_id: this.room_id
				}).then(res => {
					console.log(res, 'home')
					this.noticeList = res.data.notices.list;
					this.homeMsg = res.data;
					this.loading = false;
					var lesson = res.data.lessons;
					for (var i = 0; i < lesson.length; i++) {
						for (var j = 0; j < lesson[i].data.length; j++) {
							if (lesson[i].data[j].week_index == 0) {
								lesson[i].data[j].week_index = '星期一'
							}
							if (lesson[i].data[j].week_index == 1) {
								lesson[i].data[j].week_index = '星期二'
							}
							if (lesson[i].data[j].week_index == 2) {
								lesson[i].data[j].week_index = '星期三'
							}
							if (lesson[i].data[j].week_index == 3) {
								lesson[i].data[j].week_index = '星期四'
							}
							if (lesson[i].data[j].week_index == 4) {
								lesson[i].data[j].week_index = '星期五'
							}
							if (lesson[i].data[j].week_index == 5) {
								lesson[i].data[j].week_index = '星期六'
							}
							if (lesson[i].data[j].week_index == 6) {
								lesson[i].data[j].week_index = '星期日'
							}
						}
					}
					console.log(lesson)
					this.courseLsit = lesson;
					uni.hideLoading()
				})
			},
			//选择当前实验室
			change(item) {
				this.currentRoom = item;
			},
			changeTab(item) {
				console.log(123)
				this.currentTab = item
				this.page = 1
				this.last = false
				if (item == 0) {
					this.page = 1
					this.last = false
					this.handleList = []
					this.getHandle()
				}
				if (item == 1) {
					this.page = 1
					this.last = false
					this.openOrderList = []
					this.getOpenOrder()
				}
				if (item == 2) {
					this.page = 1
					this.last = false
					this.accountList = [];
					this.getAccountOrder()
				}
			},
			//停调补课管理
			handleClick() {
				uni.navigateTo({
					url: '/pages/record/myClssList'
				})
			},
			//开放预约管理
			openOrder() {
				uni.navigateTo({
					url: '/pages/index/openOrder'
				})
			},
			//开放预约列表
			goOrderlist() {
				uni.navigateTo({
					url: '/pages/record/reserve'
				})
			},
			//账号审核
			checkAccount() {
				uni.navigateTo({
					url: '/pages/record/userApproval'
				})
			},
			//通知公告详情
			noticeDetail(id) {
				uni.navigateTo({
					url: '/pages/mine/noticeDetail?id=' + id
				})
			},
			//点击查看课程详情
			courseDetail(msg) {
				this.show = true;
				this.detailMsg = msg;
			}
		}
	}
</script>
<style lang="scss" scoped>
	// u-tabs{
	// 	border-radius: 8px!important;
	// }
	//弹框样式
	.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;
			}
		}

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

	//弹框样式结束
	.index {
		font-size: 14px;
		padding: 15px;
		background-color: #F5F5F5;
	}

	.has-message {
		padding-top: 57px;
	}

	.daiban {
		height: 42px;
		line-height: 42px;
		background: #d6dfff;

		color: #3665FF;
		padding: 0 15px;
		display: flex;
		align-items: center;
		position: fixed;
		width: 100%;
		left: 0;

		.notice-left {
			flex: 1;

			.notice-icon {
				display: inline-block;
				vertical-align: top;
				margin-right: 5px;
			}

			text {
				display: inline-block;
				vertical-align: top;
			}
		}

		.notice-right {
			display: inline-block;
			padding: 0 10px;
			background-color: #fff;
			height: 24px;
			font-size: 12px;
			border-radius: 12px;
			line-height: 24px;
		}
	}

	.index-top {
		display: flex;
		color: #FFFFFF;

		.top-left {
			margin-right: 11px;
			background-image: url(../../static/image/index/icon_1.png);
			background-position: center;
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.top-right {

			background-image: url(../../static/image/index/icon_2.png);
			background-position: center;
			background-size: 100%;
			background-repeat: no-repeat;
		}

		.top-middle {
			margin-right: 11px;
		}

		.top-left,
		.top-right {
			flex: 1;
			height: 85px;
			text-align: center;
		}

		.num {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
			margin-top: 16px;
		}

		.text {
			font-size: 14px;
			font-weight: 400;
		}
	}

	.index-top_2 {
		display: flex;
		color: #FFFFFF;
		margin-top: 12px;

		.top-left {
			margin-right: 11px;
			background: linear-gradient(268deg, #FF9748 0%, #FF760D 100%);
			background-size: 100%;
		}

		.top-right {
			background: linear-gradient(268deg, #6B93F9 0%, #4376F8 100%);
			background-size: 100%;
		}

		.top-middle {
			background: linear-gradient(90deg, #24B54E 0%, #4DC671 100%);
			// margin-right: 11px;
		}

		.open-order {
			background: linear-gradient(90deg, #eccd46 0%, #eccd46 100%);

		}

		.top-left,
		.top-right,
		.top-middle {
			border-radius: 15px;
			flex: 1;
			height: 85px;
			text-align: center;
		}
		.top-left:last-child{
			margin-right: 0;
		}

		.num {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
			margin-top: 16px;

			image {
				height: 24px;
				width: 24px;
			}
		}

		.text {
			font-size: 14px;
			font-weight: 400;
		}
	}

	.content_1 {
		margin-top: 25px;

		.title {
			font-size: 16px;
			font-weight: bold;
			color: #333333;
		}

		.table {
			margin-top: 12px;
			border-radius: 8px;
			background-color: #FFFFFF;
			overflow: hidden;

			.table-item {
				padding: 15px 12px;
				border-top: solid 1px #F2F2F2;
				display: flex;

				.item-border {
					width: 4px;
					background-color: #30D143;
					border-radius: 2px;
					margin-right: 8px;
				}

				.room-name {
					margin-bottom: 5px;
					color: #333333;
				}

				.teacher {
					color: #999999;
					font-size: 12px;
					width: 100%;
					// word-wrap: break-word;
					// white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}

				.status_1 {
					background-color: #FCBD12;
				}

				.status_2 {
					background-color: #30D143;
				}
			}
		}

		.notice {
			margin-top: 12px;
			border-radius: 8px;
			background-color: #FFFFFF;
			overflow: hidden;

			.notice-list {
				padding: 12px;
				border-bottom: solid 1px #E0E0E0;

				.notice-title {
					font-size: 15px;
					font-weight: bold;
					color: #333333;
				}

				.notice-time {
					display: flex;
					color: #9F9F9F;
					margin-top: 10px;
					font-size: 12px;

					view {
						flex: 1;
					}

					.views {
						text-align: right;
					}
				}
			}

			.notice-list:last-child {
				border: none;
			}
		}

		.wait {


			.wait-list {
				background-color: #FFFFFF;
				border-radius: 8px;
				overflow: hidden;
				margin-bottom: 20px;
			}

			.wait-title {
				display: flex;
				padding: 12px;

				.left {
					flex: 1;
					font-size: 15px;
					font-weight: bold;
					color: #333333;
				}

				.right {
					font-size: 12px;
					font-weight: 400;
					color: #FFAD33;
				}

			}

			.wait-content {
				border-bottom: solid 1px #F2F2F2;
				border-top: solid 1px #F2F2F2;
				padding: 12px;

				.content-item {
					display: flex;
					line-height: 22px;
				}
			}

			.wait-time {
				padding: 12px;
				display: flex;
				align-items: center;

				.time {
					flex: 1;
				}

				.buttom {
					padding: 5px 8px;
					background-color: #3665FF;
					color: #FFFFFF;
					font-size: 12px;
					border-radius: 26px;
				}
			}
		}
	}

	.message {
		width: 91.5%;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		// padding-top: 122px;

		.msg-li {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 12px 12px 9px 12px;
			box-sizing: border-box;
			background: white;
			margin-top: 12px;

			.li-top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 12px;
			}

			.li-center {
				padding: 12px 0px;
				border-top: 1px solid #F2F2F2;
				border-bottom: 1px solid #F2F2F2;
				display: flex;
				flex-direction: column;
				height: 63px;
				justify-content: space-between;
				font-size: 13px;
				color: #333;
				font-weight: 400;
			}

			.li-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 9px;

				view {
					width: 64px;
					height: 28px;
					background: #3665FF;
					border-radius: 14px 14px 14px 14px;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					color: #FFFFFF;
					font-weight: 400;
				}
			}
		}
	}

	// 账号审核弹框
	.pop-bj {
		width: 100vw;
		height: 100vh;
		background: #000000;
		opacity: 0.6;
		z-index: 2;
		position: fixed;
		top: 0;
		left: 0;
	}

	.pop {
		width: 327px;
		height: 201px;
		background: #FFFFFF;
		border-radius: 12px 12px 12px 12px;
		opacity: 1;
		position: fixed;
		transform: translate(-50%, -50%);
		background: white;
		z-index: 2;
		top: 50%;
		left: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.txt1 {
			font-size: 18px;
			font-weight: bold;
			color: #333;
			padding-top: 16px;
		}

		.txt2 {
			padding-top: 16px;
			font-size: 16px;
			color: #333;
			font-weight: 400;
		}

		.pop-btn {
			margin-top: 24px;
			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;
				opacity: 1;
			}
		}
	}

	.status_text,
	.loading,
	.fail {
		display: inline-block;
		padding-bottom: 3px;
		cursor: pointer;
		padding: 0 3px;
		color: #13ce66;
		// border-bottom: solid 2px #13ce66;
	}

	.loading {
		color: #ffba00;
		// border-bottom: solid 2px #ffba00;
	}

	.fail {
		color: #ff4d4f;
		// border-bottom: solid 2px #ff4d4f;
	}
</style>