|
|
@@ -0,0 +1,815 @@
|
|
|
+<!-- 活动解析 -->
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <!-- table 表格 -->
|
|
|
+ <el-row :gutter="20" class="main-items" >
|
|
|
+ <el-col class="aside" :span="3" :offset="2" style="padding: 0 !important;">
|
|
|
+ <div
|
|
|
+ class="table-aside"
|
|
|
+ v-for="(v, k) in ItemList"
|
|
|
+ :key="k"
|
|
|
+ :class="{active:k == modelindex}"
|
|
|
+ @click="selectTitle(k)"
|
|
|
+ >{{v.text}}</div>
|
|
|
+ </el-col>
|
|
|
+ <!--排班表-->
|
|
|
+ <el-col :span="17" class="main" v-if="modelindex == 0">
|
|
|
+ <el-row :gutter="20" >
|
|
|
+ <el-col :span="6" :offset="2" >
|
|
|
+ <div class="selectBox">
|
|
|
+ <div
|
|
|
+ class="Ageclass"
|
|
|
+ @click="choiceclass()"
|
|
|
+ @mouseover="selectStyle()"
|
|
|
+ @mouseout="outStyle()"
|
|
|
+ >
|
|
|
+ <span class="age-tip">{{selecttitlepag}}</span>
|
|
|
+ <span :class="[gardeListDown ?'el-icon-caret-top':'el-icon-caret-bottom']"></span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="class-download"
|
|
|
+ v-show="gardeListDown"
|
|
|
+ @mouseover="selectStyle()"
|
|
|
+ @mouseout="outStyle()"
|
|
|
+ >
|
|
|
+ <ul v-for="(item, k) in options" :key="k">
|
|
|
+ <li @click="selectTip(item)">{{item.label}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="selectBox">
|
|
|
+ <div
|
|
|
+ class="Ageclass"
|
|
|
+ @click="choiceclass()"
|
|
|
+ @mouseover="selectStyle1()"
|
|
|
+ @mouseout="outStyle1()"
|
|
|
+ >
|
|
|
+ <span class="age-tip">{{selecttitleage}}</span>
|
|
|
+ <span :class="[gardeListDownage ?'el-icon-caret-top':'el-icon-caret-bottom']"></span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="class-download"
|
|
|
+ v-show="gardeListDownage"
|
|
|
+ @mouseover="selectStyle1()"
|
|
|
+ @mouseout="outStyle1()"
|
|
|
+ >
|
|
|
+ <ul v-for="(item, k) in grades" :key="k">
|
|
|
+ <li @click="selectTipage(item)">{{item.label}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class='month'>
|
|
|
+ <span >{{currentDateStr }}排班情况</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="24" >
|
|
|
+ <el-col :span="20" :offset="2" >
|
|
|
+ <!-- 日期 -->
|
|
|
+ <div class="date">
|
|
|
+ <div class="calendar-week">
|
|
|
+ <div class="week-item" v-for="item of weekList" :key="item">{{ item }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="calendar-inner">
|
|
|
+ <div class="calendar-item" v-for="(item, index) of calendarList" :key="index"
|
|
|
+ :class="[item.disable ? 'disabled' : '']">
|
|
|
+ <el-popover
|
|
|
+ placement="bottom"
|
|
|
+ width="500"
|
|
|
+ trigger="click">
|
|
|
+ <div class="month-day">{{month}}月{{today}}日</div>
|
|
|
+ <el-table :data="gridData" :header-cell-style="{
|
|
|
+ 'color': '#393939',
|
|
|
+ 'font-size': '14px'
|
|
|
+ }">
|
|
|
+ <el-table-column width="150" label="日期" header-align="center" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :class="[scope.$index == 0?'date-time-active':'']">{{scope.row.date}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="60" label="最少" header-align="center" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :class="[scope.$index == 0?'date-time-active':'']">{{scope.row.less}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="60" label="饱和" header-align="center" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :class="[scope.$index == 0?'date-time-active':'']">{{scope.row.saturation}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="60" label="已选" header-align="center" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :class="[scope.$index == 0?'date-time-active':'']">{{scope.row.select}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="130" property="" label="" header-align="center" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button size="small" type="primary" round :class="[scope.$index == 0?'date-btn-active':'']">排班</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div slot="reference" @click="classSet(index,item.date,item.month)" :class="[item.status ? 'checked' : '']" class="day-setting">
|
|
|
+ <div class="date-day">{{ item.date }}</div>
|
|
|
+ <div class="people">
|
|
|
+ <div class="people-items" v-for="(item, key) of levelList" :key="key">
|
|
|
+ <div class="people-items-num" :class="[key == 2?'num-red':'']">22</div>
|
|
|
+ <div class="people-items-text">{{item}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <!--排班设置-->
|
|
|
+ <el-col :span="17" class="main" v-if="modelindex == 1">
|
|
|
+ <el-row :gutter="20" >
|
|
|
+ <el-col :span="18" class='month' :offset="2">
|
|
|
+ <span >{{currentDateStr }}排班设置</span>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="24" >
|
|
|
+ <el-col :span="20" :offset="2" >
|
|
|
+ <!-- 日期 -->
|
|
|
+ <div class="date">
|
|
|
+ <div class="calendar-week">
|
|
|
+ <div class="week-item" v-for="item of weekList" :key="item">{{ item }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="calendar-inner">
|
|
|
+ <div class="calendar-item" v-for="(item, index) of setCalendarList" :key="index"
|
|
|
+ :class="[item.disable ? 'disabled' : '']" >
|
|
|
+ <el-popover
|
|
|
+ placement="bottom"
|
|
|
+ width="108"
|
|
|
+ trigger="click">
|
|
|
+ <div class='date-set'>
|
|
|
+ <div>待开放</div>
|
|
|
+ <div>不开放</div>
|
|
|
+ </div>
|
|
|
+ <div slot="reference" v-if="!item.disable" @click="settingClick(index)" :class="[item.status ? 'checked' : '']" class="day-setting">
|
|
|
+ <div class="date-day-set-num">{{ item.date }}</div>
|
|
|
+ <div class="date-day-set">待开放</div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { mapGetters, mapActions } from "vuex";
|
|
|
+ import { IMG_BASE_URL } from '@/ImgConfig'
|
|
|
+ export default {
|
|
|
+ components: { },
|
|
|
+ name: "actvResolveLabel",
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ BASE_URL:IMG_BASE_URL,
|
|
|
+ selMonth:'',
|
|
|
+ hiddenModel:false,
|
|
|
+ isPigai:false,
|
|
|
+ gardeListDown: false,
|
|
|
+ gardeListDownage: false,
|
|
|
+ modelindex:0,
|
|
|
+ selecttitlepag: "选老师",
|
|
|
+ selecttitleage: "选科目",
|
|
|
+ current: {}, // 当前时间
|
|
|
+ weekList: ['一', '二', '三', '四', '五', '六', '日'],
|
|
|
+ calendarList: [], // 排班列表
|
|
|
+ setCalendarList: [], // 排班设置列表
|
|
|
+ shareDate: new Date(), // 享元模式，用来做优化的
|
|
|
+ month:'',
|
|
|
+ today:'',
|
|
|
+ gridData: [{
|
|
|
+ date: '10:00-12:00',
|
|
|
+ less: '22',
|
|
|
+ saturation: '25',
|
|
|
+ select:'43'
|
|
|
+ }, {
|
|
|
+ date: '15:00-17:00',
|
|
|
+ less: '22',
|
|
|
+ saturation: '25',
|
|
|
+ select:'53'
|
|
|
+ }, {
|
|
|
+ date: '17:00-19:00',
|
|
|
+ less: '22',
|
|
|
+ saturation: '25',
|
|
|
+ select:'3'
|
|
|
+ }, {
|
|
|
+ date: '19:00-21:00',
|
|
|
+ less: '22',
|
|
|
+ saturation: '5',
|
|
|
+ select:'13'
|
|
|
+ }],
|
|
|
+ filters: {
|
|
|
+ actvNm: "",
|
|
|
+ actvCrtUserId: "",
|
|
|
+ actvType: "",
|
|
|
+ actvSmallType: "",
|
|
|
+ // 排序
|
|
|
+ MaxtimeValue:'',
|
|
|
+ oneMonth:'',
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ count: 0,
|
|
|
+ orderField: "",
|
|
|
+ orderAD: ""
|
|
|
+ },
|
|
|
+ levelList:['最少','饱和','已选'],
|
|
|
+ ItemList: [
|
|
|
+ {
|
|
|
+ text: "排班表"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "排班设置"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "0",
|
|
|
+ label: "1~2年级",
|
|
|
+ str: "一年级,二年级"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "1",
|
|
|
+ label: "3~4年级",
|
|
|
+ str: "三年级,四年级"
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ grades: [
|
|
|
+ {
|
|
|
+ value: "0",
|
|
|
+ label: "语文",
|
|
|
+ str: "语文"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "1",
|
|
|
+ label: "数学",
|
|
|
+ str: "数学"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "2",
|
|
|
+ label: "英语",
|
|
|
+ str: "英语"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "3",
|
|
|
+ label: "全部"
|
|
|
+ // str:""
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ allotList:{
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ count: 0,
|
|
|
+ grade:'',
|
|
|
+ subject:'',
|
|
|
+ homeworkId:'',
|
|
|
+ TeacherType:''
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ // ,'homeworkRecoveryList'
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["getUser",'homeworkRecoveryList','TeacherAllotList']),
|
|
|
+ // 显示当前时间
|
|
|
+ currentDateStr() {
|
|
|
+ let { year, month } = this.current;
|
|
|
+ return `${this.pad(month + 1)}月`;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(["setUser"]),
|
|
|
+ // 表格头部样式
|
|
|
+ tableheaderClassName({ row, rowIndex }) {
|
|
|
+ return "table-head-th";
|
|
|
+ },
|
|
|
+ //弹框
|
|
|
+ isShow(str,t,id,type){
|
|
|
+ this.isPigai = true;
|
|
|
+ this.allotList.grade = str;
|
|
|
+ this.allotList.subject = t;
|
|
|
+ this.allotList.homeworkId = id
|
|
|
+ this.allotList.TeacherType = type
|
|
|
+ this.TeacherAllot()
|
|
|
+ },
|
|
|
+
|
|
|
+ selectStyle() {
|
|
|
+ this.gardeListDown = true;
|
|
|
+ },
|
|
|
+ outStyle() {
|
|
|
+ this.gardeListDown = false;
|
|
|
+ },
|
|
|
+ selectStyle1() {
|
|
|
+ this.gardeListDownage = true;
|
|
|
+ },
|
|
|
+ outStyle1() {
|
|
|
+ this.gardeListDownage = false;
|
|
|
+ },
|
|
|
+ selectTitle(k) {
|
|
|
+ this.modelindex = k;
|
|
|
+
|
|
|
+ },
|
|
|
+ selectTip(item) {
|
|
|
+
|
|
|
+ this.selecttitlepag = item.label;
|
|
|
+ this.gardeListDown = false;
|
|
|
+ },
|
|
|
+ selectTipage(item) {
|
|
|
+
|
|
|
+ this.selecttitleage = item.label;
|
|
|
+ this.gardeListDownage = false;
|
|
|
+ },
|
|
|
+ // 分页
|
|
|
+ pageChange(val) {
|
|
|
+ this.allotList.pageNo = val;
|
|
|
+ this.TeacherAllot();
|
|
|
+ },
|
|
|
+ pageChange1(val) {
|
|
|
+ this.filters.pageNo = val;
|
|
|
+ this.HomeworkRecoveryList();
|
|
|
+ },
|
|
|
+ changeDateSlot(dateSlot) {
|
|
|
+ if (dateSlot) {
|
|
|
+ this.filters.startDate = dateSlot[0];
|
|
|
+ this.filters.endDate = dateSlot[1];
|
|
|
+ } else {
|
|
|
+ this.filters.startDate = null;
|
|
|
+ this.filters.endDate = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ actvTypeChange(typeList) {
|
|
|
+ switch (typeList.length) {
|
|
|
+ case 1:
|
|
|
+ this.filters.actvType = typeList[0];
|
|
|
+ this.filters.actvSmallType = null;
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.filters.actvType = null;
|
|
|
+ this.filters.actvSmallType = typeList[1];
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ this.filters.actvType = null;
|
|
|
+ this.filters.actvSmallType = null;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.allotList.pageSize = val;
|
|
|
+ this.TeacherAllot();
|
|
|
+ },
|
|
|
+ handleSizeChange1(val) {
|
|
|
+ this.filters.pageSize = val;
|
|
|
+ this.HomeworkRecoveryList();
|
|
|
+ },
|
|
|
+ // 排序
|
|
|
+ sortChange(sort) {
|
|
|
+ this.filters.orderField = sort.prop;
|
|
|
+ this.filters.orderAD = sort.order != null ? sort.order : "";
|
|
|
+ this.itemListReshow();
|
|
|
+ },
|
|
|
+ clearSearch() {
|
|
|
+ this.filters.actvNm = null;
|
|
|
+ this.filters.actvCrtUserId = null;
|
|
|
+ this.filters.actvType = null;
|
|
|
+ this.filters.actvSmallType = null;
|
|
|
+ this.filtersActvType = [];
|
|
|
+ this.createDateSlot = null;
|
|
|
+ },
|
|
|
+ // 日期处理
|
|
|
+ init() {
|
|
|
+ // 初始化当前时间
|
|
|
+ this.setCurrent();
|
|
|
+ this.calendarCreator();
|
|
|
+ },
|
|
|
+ // 判断当前月有多少天
|
|
|
+ getDaysByMonth(year, month) {
|
|
|
+ return new Date(year, month + 1, 0).getDate();
|
|
|
+ },
|
|
|
+ getFirstDayByMonths(year, month) {
|
|
|
+ return new Date(year, month, 1).getDay();
|
|
|
+ },
|
|
|
+ getLastDayByMonth(year, month) {
|
|
|
+ return new Date(year, month + 1, 0).getDay();
|
|
|
+ },
|
|
|
+ // 对小于 10 的数字，前面补 0
|
|
|
+ pad(str) {
|
|
|
+ return str < 10 ? `0${str}` : str;
|
|
|
+ },
|
|
|
+ // 点击上一月
|
|
|
+ prevMonth() {
|
|
|
+ this.current.month--;
|
|
|
+ // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
|
|
|
+ this.correctCurrent();
|
|
|
+ // 生成新日期
|
|
|
+ this.calendarCreator();
|
|
|
+ },
|
|
|
+ // 点击下一月
|
|
|
+ nextMonth() {
|
|
|
+ this.current.month++;
|
|
|
+ // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
|
|
|
+ this.correctCurrent();
|
|
|
+ // 生成新日期
|
|
|
+ this.calendarCreator();
|
|
|
+ },
|
|
|
+ // 格式化时间，与主逻辑无关
|
|
|
+ stringify(year, month, date) {
|
|
|
+ let str = [year, this.pad(month + 1), this.pad(date)].join('-');
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ // 设置或初始化 current
|
|
|
+ setCurrent(d = new Date()) {
|
|
|
+ let year = d.getFullYear();
|
|
|
+ let month = d.getMonth();
|
|
|
+ let date = d.getDate();
|
|
|
+ this.current = {
|
|
|
+ year,
|
|
|
+ month,
|
|
|
+ date
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 修正 current
|
|
|
+ correctCurrent() {
|
|
|
+ let { year, month, date } = this.current;
|
|
|
+
|
|
|
+ let maxDate = this.getDaysByMonth(year, month);
|
|
|
+ // 预防其他月跳转到2月，2月最多只有29天，没有30-31
|
|
|
+ date = Math.min(maxDate, date);
|
|
|
+
|
|
|
+ let instance = new Date(year, month, date);
|
|
|
+ this.setCurrent(instance);
|
|
|
+ },
|
|
|
+ // 生成日期
|
|
|
+ calendarCreator() {
|
|
|
+ // 一天有多少毫秒
|
|
|
+ const oneDayMS = 24 * 60 * 60 * 1000;
|
|
|
+
|
|
|
+ let list = [];
|
|
|
+ let setList = [];
|
|
|
+ let { year, month } = this.current;
|
|
|
+
|
|
|
+ // 当前月份第一天是星期几, 0-6
|
|
|
+ let firstDay = this.getFirstDayByMonths(year, month);
|
|
|
+ // 填充多少天
|
|
|
+ let prefixDaysLen = firstDay === 0 ? 6 : firstDay - 1;
|
|
|
+ // 毫秒数
|
|
|
+ let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;
|
|
|
+
|
|
|
+ // 当前月份最后一天是星期几, 0-6
|
|
|
+ let lastDay = this.getLastDayByMonth(year, month);
|
|
|
+ // 填充多少天， 和星期的排放顺序有关
|
|
|
+ let suffixDaysLen = lastDay === 0 ? 0 : 7 - lastDay;
|
|
|
+ // 毫秒数
|
|
|
+ let end = new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
|
|
|
+ // 计算今天几号
|
|
|
+ let today = new Date().getDate();
|
|
|
+ // 饱和度
|
|
|
+ // console.log(today)
|
|
|
+ while (begin <= end) {
|
|
|
+ // 享元模式，避免重复 new Date
|
|
|
+ this.shareDate.setTime(begin);
|
|
|
+ let year = this.shareDate.getFullYear();
|
|
|
+ let curMonth = this.shareDate.getMonth();
|
|
|
+ let date = this.shareDate.getDate();
|
|
|
+ // console.log(curMonth,date)
|
|
|
+ // 排班
|
|
|
+ list.push({
|
|
|
+ year: year,
|
|
|
+ month: curMonth,
|
|
|
+ date: date,
|
|
|
+ disable: curMonth !== month || date < today,
|
|
|
+ status:false,
|
|
|
+ value: this.stringify(year, curMonth, date)
|
|
|
+ });
|
|
|
+ // 排班设置
|
|
|
+ setList.push({
|
|
|
+ year: year,
|
|
|
+ month: curMonth,
|
|
|
+ date: date,
|
|
|
+ status:false,
|
|
|
+ disable: curMonth !== month,
|
|
|
+ value: this.stringify(year, curMonth, date)
|
|
|
+ });
|
|
|
+ begin += oneDayMS;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.calendarList = list;
|
|
|
+ this.setCalendarList = setList;
|
|
|
+ console.log(this.calendarList)
|
|
|
+ },
|
|
|
+ // 排班点击
|
|
|
+ classSet(k,d,m){
|
|
|
+ // console.log(k,d,m)
|
|
|
+ this.month = m + 1;
|
|
|
+ this.today = d;
|
|
|
+ for (var i in this.calendarList) {
|
|
|
+ this.calendarList[i].status = false;
|
|
|
+ }
|
|
|
+ this.calendarList[k].status = !this.calendarList[k].status;
|
|
|
+ },
|
|
|
+ // 排班设置点击
|
|
|
+ settingClick(k){
|
|
|
+ for (var i in this.setCalendarList) {
|
|
|
+ this.setCalendarList[i].status = false;
|
|
|
+ }
|
|
|
+ this.setCalendarList[k].status = !this.setCalendarList[k].status;
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ sessionStorage.setItem('tabIndex',5);
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+ .main{
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 16px;
|
|
|
+ padding: 0 !important;
|
|
|
+ border: 1px solid #E1E1E1;
|
|
|
+ min-height: 980px;
|
|
|
+ }
|
|
|
+
|
|
|
+ el-table{
|
|
|
+ color: #999999;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .main-items{
|
|
|
+ color: #393939;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80px;
|
|
|
+ }
|
|
|
+ .aside {
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 16px;
|
|
|
+ margin-right: 16px;
|
|
|
+ padding: 0;
|
|
|
+ min-height: 880px;
|
|
|
+}
|
|
|
+.selectBox {
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: 57px;
|
|
|
+}
|
|
|
+.Ageclass {
|
|
|
+ display: inline-block;
|
|
|
+ height: 40px;
|
|
|
+ width: 120px;
|
|
|
+ background-color: #f1f2f4;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.active {
|
|
|
+ background-color: #52cc60 !important;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+.table-aside {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+el-table {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+ .input-with-select .el-input-group__prepend {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .showModel {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #000000;
|
|
|
+ opacity: 0.2;
|
|
|
+ overflow: hidden;
|
|
|
+ z-index: 1000;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .model {
|
|
|
+ z-index: 10000;
|
|
|
+ width: 60%;
|
|
|
+ height: auto;
|
|
|
+ position: fixed;
|
|
|
+ top: 15%;
|
|
|
+ left: 30%;
|
|
|
+ margin: auto;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .model-text {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .model-items-left {
|
|
|
+ width: 100%;
|
|
|
+ color: #393939;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ .model-items-left-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .model-items-left-top-img {
|
|
|
+ width: 68px;
|
|
|
+ height: 68px;
|
|
|
+ border-radius: 8px;
|
|
|
+ position: relative;
|
|
|
+ bottom: 25px;
|
|
|
+ }
|
|
|
+ .model-items-left-top-number {
|
|
|
+ color: #7e7e7e;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table .table-head-th{
|
|
|
+ background-color:#F6F7FB;
|
|
|
+ font-size: 16px !important;
|
|
|
+ color: #393939;
|
|
|
+
|
|
|
+ }
|
|
|
+ .month{
|
|
|
+ color:#393939;
|
|
|
+ font-size:30px;
|
|
|
+ margin-top: 57px;
|
|
|
+ }
|
|
|
+ .model-manager {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 30px;
|
|
|
+ color: #393939;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ .allocation-items{
|
|
|
+ width: 45%;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-bottom:30px;
|
|
|
+ }
|
|
|
+ .allocation{
|
|
|
+ color: #52CC60;
|
|
|
+ font-size: 20px;
|
|
|
+ text-decoration: underline;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+.el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
|
+ background-color:#52cc60!important;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+ .pages{
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+ .age-tip {
|
|
|
+ width: 80%;
|
|
|
+ height: 40px;
|
|
|
+ color: #747070;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .class-download {
|
|
|
+ background-color: #fff;
|
|
|
+ width: 160px;
|
|
|
+ z-index: 999999;
|
|
|
+ position: absolute;
|
|
|
+ border: 1px solid #e0dddd;
|
|
|
+ border-radius: 5px;
|
|
|
+ top: 58px;
|
|
|
+ }
|
|
|
+ .class-download ul li {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #b6b6b6;
|
|
|
+ }
|
|
|
+ .class-download ul li:hover {
|
|
|
+ background-color: #52cc60;
|
|
|
+ color: #ffff;
|
|
|
+ }
|
|
|
+ .date{
|
|
|
+ margin-top: 68px;
|
|
|
+ }
|
|
|
+ .calendar-week{
|
|
|
+ border: 1px solid #E5E5E5;
|
|
|
+ text-align: center;
|
|
|
+ border-right: none;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .week-item{
|
|
|
+ display: inline-block;
|
|
|
+ background: #F9F9F9;
|
|
|
+ width: 14.28%;
|
|
|
+ border-right: 1px solid #E5E5E5;
|
|
|
+ }
|
|
|
+ .calendar-inner{
|
|
|
+ border-left:1px solid #E5E5E5;
|
|
|
+ }
|
|
|
+ .calendar-item {
|
|
|
+ float: left;
|
|
|
+ width: 14.28%;
|
|
|
+ height: 130px;
|
|
|
+ line-height: 130px;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom:1px solid #E5E5E5;
|
|
|
+ border-right:1px solid #E5E5E5;
|
|
|
+ border-left:1px solid #E5E5E5;
|
|
|
+}
|
|
|
+.day-setting{
|
|
|
+ height: 130px;
|
|
|
+ line-height: 130px;
|
|
|
+}
|
|
|
+.calendar-item.disabled {
|
|
|
+ color: #ccc;
|
|
|
+ background:rgba(255,255,255,0.2);
|
|
|
+}
|
|
|
+.checked {
|
|
|
+ background: #F6F7FB;
|
|
|
+}
|
|
|
+.date-day{
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 60px;
|
|
|
+ color: #aaa;
|
|
|
+}
|
|
|
+.people{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.people-items{
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 70px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.people-items-num{
|
|
|
+ line-height: 15px;
|
|
|
+ padding: 3px 8px;
|
|
|
+}
|
|
|
+.people-items-text{
|
|
|
+ line-height: 30px;
|
|
|
+}
|
|
|
+.num-red{
|
|
|
+ background:rgba(255,100,101,1);
|
|
|
+ border-radius:9px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.month-day{
|
|
|
+ margin: 10px 30px;
|
|
|
+ color: #393939;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.date-set{
|
|
|
+ text-align: center;
|
|
|
+ width:100%;
|
|
|
+}
|
|
|
+.date-set>div{
|
|
|
+ color:#393939;
|
|
|
+ font-size:16px;
|
|
|
+ margin:25px;
|
|
|
+}
|
|
|
+.date-day-set{
|
|
|
+ line-height: 40px;
|
|
|
+ color: #393939;;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.date-day-set-num{
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 70px;
|
|
|
+ color: #aaa;
|
|
|
+}
|
|
|
+.date-red{
|
|
|
+ color: #FF6465;
|
|
|
+}
|
|
|
+.date-time-active{
|
|
|
+ color: #e5e5e5;
|
|
|
+}
|
|
|
+.date-btn-active{
|
|
|
+ background:rgba(114,151,255,0.3);
|
|
|
+ border:none;
|
|
|
+}
|
|
|
+</style>
|
xiaoyuhao