自己写的日历

写的太过杂乱，仅供个人查阅

<template>
  <div>
    <div class="popout"></div>
    <div id="lq_audits">
      <div class="header">
        <span>日志详情</span>
        <span class="header_span el-icon-close" @click="$emit('isgraduateLogS',false)"></span>
      </div>
      <div style="overflow: auto;height: 668px;" v-if="isRender">
        <div class="content">
          <div class="grad_span">
            <span
              v-for="(item,index) in aWeekTime"
              :key="index"
              @click="above(index)"
              :style="{background:item.background}"
            >
              <i>{{item.num}}</i>
              <i style="float:right;padding-right:10px;color:#cccccc">{{item.week}}</i>
              <div class="ss" v-if="item.state === 1" style="display:inline-block;color:#666">已提交</div>
              <div class="ss" v-else style="display:inline-block;color:#dd1f1f">未提交</div>
            </span>
            <span
              class="Log_calendar"
              v-if="isClass"
              style="margin-left: -4px;"
              @click="isAllWeeks"
            >
              <i style="visibility: hidden;">{{date.num}}</i>
              <!-- <i style="float:right;padding-right:10px;">{{date.week}}</i>
              <div class="ss" style="display:inline-block">{{date.content}}</div>-->
              <i></i>
            </span>
            <span class="Log_calendars" v-else style="margin-left: -4px;" @click="isAllWeeks">
              <i style="visibility: hidden;">{{date.num}}</i>
              <!-- <i style="float:right;padding-right:10px;">{{date.week}}</i>
              <div class="ss" style="display:inline-block">{{date.content}}</div>-->
              <i></i>
            </span>
          </div>
          <div
            v-if="isAllWeek"
            style="border:1px solid #ccc; 633px;height: 600px;margin-top:-1px; position: absolute;background:#fff;z-index:999 "
          >
            <div class="grad_bottom" v-if="isRenders">
              <div>
                <div style="border-bottom:1px solid #ccc;padding-top:20px;padding-bottom:20px">
                  <span style="color:#666666">{{presentTime[0]}} 年 {{presentTime[1]}} 月</span>
                  <span class="grad_boult" style="float:right">
                    <!-- <i style="margin-right:20px"><<</i> -->
                    <i class="back_lastmonth" style="margin-right:20px" @click="changeTime(-1)"></i>
                    <i class="back_nextmonth" style="margin-right:20px" @click="changeTime(1)"></i>
                    <!-- <i>>></i> -->
                  </span>
                </div>
                <div style="display:flex;554px;height:36px;line-height:43px">
                  <span class="grad_week">一</span>
                  <span class="grad_week">二</span>
                  <span class="grad_week">三</span>
                  <span class="grad_week">四</span>
                  <span class="grad_week">五</span>
                  <span class="grad_week">六</span>
                  <span class="grad_week">日</span>
                </div>
                <div class="grad_span">
                  <span
                    v-for="(item,index) in OneMonth"
                    :key="index"
                    :style="{background:item.background}"
                    @click="clickDetails(index)"
                  >
                    <i style="color:#666666">{{item.releaseTime.split('-')[2]}}</i>
                    <div class="ss" v-if="item.state === 1" style="color:#666666">已提交</div>
                    <div class="ss" v-else :style="{color:'#dd1f1f'}">未提交</div>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top:32px" v-if="latelyLog.length">
            <div style="margin-bottom:0px;position: relative;">
              <label
                for
                style="position: absolute;margin-right: 20px;top:4px"
                v-if="latelyLog[0].summary"
              >日志 :</label>
              <span>
                <span
                  style="line-height:2;font-family: MicrosoftYaHei; 704px;display: inline-block;padding-left: 55px;"
                  v-for="(item,index) in latelyLog"
                  :key="index"
                >{{item.summary}}</span>
              </span>
              <!-- <span v-else style="line-height:2;font-family: MicrosoftYaHei; 704px;display: inline-block;padding-left: 55px;">暂未提交报告</span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "graduateLogS",
  props: {
    obj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      form: {
        desc: ""
      },
      value: new Date(),
      datas: [],
      date: { num: "55", content: "∧" },
      datess: [],
      isAllWeek: false, // 显示日历
      dateList: [], // 日期（七天）// 通过接口获取的
      aWeekTime: [], // 一星期的时间
      isRender: false, // 是否渲染
      isRenders: false, // 是否渲染(一个月的)
      presentTime: [], // 记录当前时间
      OneMonth: [], // 一个月的所有时间
      dateListOneMonth: [], // 日期（一个月）通过接口获取的
      firstWeek: "", // 一号是星期几
      isClass: true, // 切换图片
      lastMonth: new Date(), // 上个月
      nextMonth: new Date(), // 下个月
      allList: [], // 一个月的所有日志
      Index: "",
      isclick: true, // 是否进入
      latelyLog: [] // 距离最近的日志
    };
  },
  computed: {},
  created() {
    // console.log(this.obj);
    // console.log(this.dateFormat(new Date(1567319986042)))
    this.allAWeek(); // 获取一个星期所有日期
    // console.log(this.lastDay(this.presentTime.join('-')))
  },
  mounted() {
    this.getHebdomadLog(); // 获取七天日志
    this.handleClick();
  },
  watch: {},
  methods: {
    handleClick() {
      var time = this.dateFormat(new Date());
      time = time.split("-").slice(0, 2);
      // time[1] = 11
      this.presentTime = time; // 获取当前的年份和月份
      this.lastMonth = time;
      this.nextMonth = time;
      this.AllMonth(); // 获取本月的全部日期
      this.FirstWeek(); // 获取当月开始时间是星期几
      this.OneMonthLog(); // 获取一个的日志详情
    },
    onSubmit() {},
    // 显示全部日历
    isAllWeeks() {
      this.isClass = !this.isClass;
      this.isRenders = false;
      var time = this.dateFormat(new Date());
      time = time.split("-").slice(0, 2);
      // time[1] = 11
      this.presentTime = time; // 获取当前的年份和月份
      this.lastMonth = time;
      this.nextMonth = time;
      this.AllMonth(); // 获取本月的全部日期
      this.FirstWeek(); // 获取当月开始时间是星期几
      this.OneMonthLog(); // 获取一个的日志详情
      this.isAllWeek = !this.isAllWeek;
      // console.log(11)
    },
    // 获取七天日志详情
    getHebdomadLog() {
      this.$get(
        "/sxsx/sxsxactivityreport/JournalTeacherDay",
        {
          id: this.obj.id,
          studentId: this.obj.stuID // 学生id
        },
        res => {
          // console.log(res);
          this.dateList = Array.from(
            new Set(
              res.data.map(item => {
                return item.releaseTime;
              })
            )
          );
          // console.log(this.dateList);
          for (var i = 0; i < this.aWeekTime.length; i++) {
            for (var s = 0; s < res.data.length; s++) {
              if (this.aWeekTime[i].releaseTime == res.data[s].releaseTime) {
                this.aWeekTime[i] = res.data[s];
                this.aWeekTime[i].num = Number(
                  this.getWeek(i, new Date()).split("-")[2]
                ); // 上边显示的几号
                switch (i) {
                  case 0:
                    this.aWeekTime[i].week = "一";
                    break;
                  case 1:
                    this.aWeekTime[i].week = "二";
                    break;
                  case 2:
                    this.aWeekTime[i].week = "三";
                    break;
                  case 3:
                    this.aWeekTime[i].week = "四";
                    break;
                  case 4:
                    this.aWeekTime[i].week = "五";
                    break;
                  case 5:
                    this.aWeekTime[i].week = "六";
                    break;
                  case 6:
                    this.aWeekTime[i].week = "日";
                    break;
                }
              }
            }
          }
          // console.log(this.aWeekTime,this.dateFormat(new Date()))
          //       let num = this.aWeekTime.findIndex(
          //   item => item.releaseTime === this.dateFormat(new Date())
          // );
          // console.log(num, this.aWeekTime.slice(0, num),this.aWeekTime);
          // 找到距离七天内距离当前时间最近的日志
          let befor = Array.from(
            new Set(
              this.aWeekTime
                .filter(item => item.state)
                .map(item => item.releaseTime)
            )
          );
          // console.log(befor)
          for (var i = 0; i < befor.length; i++) {
            befor[i] = new Date(befor[i]).getTime();
          }
          // befor.push(new Date().getTime())
          // console.log(befor)
          let time = this.dateFormat(new Date(befor.sort()[befor.length - 1])); // 对日期进行排序
          // console.log(time)
          // console.log(this.dateFormat(new Date(befor.sort()[befor.length-1])))
          // console.log(res.data.filter(item => item.releaseTime == time))

          this.latelyLog = res.data.filter(item => item.releaseTime == time); // 找到距离最近的日志
          // console.log(this.latelyLog)

          this.Index = this.aWeekTime.findIndex(
            item => item.releaseTime == this.dateFormat(new Date())
          );
          this.aWeekTime[this.Index].background = "rgba(23,118,225,0.1)";
          // console.log(this.aWeekTime);
          this.isRender = true; // 现在渲染
        },
        err => {
          this.$message.error(err.msg);
          throw err;
        }
      );
    },
    // 转化日期格式
    dateFormat(now) {
      var year = now.getFullYear(); //取得4位数的年份
      var month =
        now.getMonth() + 1 < 10
          ? "0" + (now.getMonth() + 1)
          : now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
      var date = now.getDate() < 10 ? "0" + now.getDate() : now.getDate(); //返回日期月份中的天数（1到31）
      return year + "-" + month + "-" + date;
    },
    // 获取本周所有日期的方法
    getWeek(i, f) {
      var now = new Date(f);
      var firstDay = new Date(now - (now.getDay() - 1) * 86400000);
      firstDay.setDate(firstDay.getDate() + i);
      var mon =
        Number(firstDay.getMonth()) + 1 < 10
          ? "0" + (Number(firstDay.getMonth()) + 1)
          : Number(firstDay.getMonth()) + 1;
      return (
        now.getFullYear() +
        "-" +
        mon +
        "-" +
        (firstDay.getDate() < 10
          ? "0" + firstDay.getDate()
          : firstDay.getDate())
      );
    },
    // 获取一个星期的时间
    allAWeek() {
      // console.log(Number(this.getWeek(0, new Date()).split('-')[2]))
      for (var i = 0; i < 7; i++) {
        this.aWeekTime.push({
          releaseTime: this.getWeek(i, new Date()),
          num: Number(this.getWeek(i, new Date()).split("-")[2]) // 上边显示的几号
        });
        switch (i) {
          case 0:
            this.aWeekTime[i].week = "一";
            break;
          case 1:
            this.aWeekTime[i].week = "二";
            break;
          case 2:
            this.aWeekTime[i].week = "三";
            break;
          case 3:
            this.aWeekTime[i].week = "四";
            break;
          case 4:
            this.aWeekTime[i].week = "五";
            break;
          case 5:
            this.aWeekTime[i].week = "六";
            break;
          case 6:
            this.aWeekTime[i].week = "日";
            break;
        }
      }
    },
    // // 获取本月的全部日期
    AllMonth() {
      // console.log(this.dateFormat(new Date(new Date().setDate(1))))
      // new Date().setDate(1);
      this.FirstWeek();
      this.OneMonth = [];
      if (this.firstWeek !== 1 && this.firstWeek !== "") {
        // 前一个月的天数
        var count = new Date(
          this.lastDay(this.presentTime.join("-")).split("-")[0],
          this.lastDay(this.presentTime.join("-")).split("-")[1],
          0
        ).getDate();
        for (var i = 0; i < this.firstWeek - 1; i++) {
          this.OneMonth.push({
            releaseTime: this.getWeek(
              i,
              this.lastDay(this.presentTime.join("-"))
            ),
            num: this.getWeek(
              i,
              this.lastDay(this.presentTime.join("-"))
            ).split("-")[2],
            background: "#f2f2f2"
          });
        }
        // console.log(this.OneMonth);
      }
      // return
      this.OneMonth.push({
        // this.dateFormat(new Date(new Date().setDate(1))), 当月的第一天
        releaseTime: this.dateFormat(
          new Date(new Date(this.presentTime.join("-")).setDate(1))
        ),
        num: 1
      });
      // 获取当月的天数
      var count = new Date(
        this.presentTime[0],
        this.presentTime[1],
        0
      ).getDate();
      // a 表示当前星期几（this.getWeek需要传入，不然有问题）
      var a = new Date(
        this.dateFormat(
          new Date(new Date(this.presentTime.join("-")).setDate(1))
        )
      ).getDay();
      // console.log(a,new Date(new Date(this.presentTime.join("-")).setDate(1)))
      for (var i = 0; i < count - 1; i++) {
        this.OneMonth.push({
          releaseTime: this.getWeek(
            a,
            new Date(this.presentTime.join("-")).setDate(1)
          ), // 当月的第一天
          num: i + 2
        });
        a++;
      }
      // console.log(this.OneMonth);
    },
    // 获取一个月的日志详情
    OneMonthLog(oldTime) {
      // console.log(this.dateFormat(new Date()));
      this.$get(
        "/sxsx/sxsxactivityreport/JournalTeacherWeek",
        {
          id: this.obj.id,
          studentId: this.obj.stuID, // 学生id
          week: oldTime ? oldTime : this.dateFormat(new Date()) // 指定月份（传入）
        },
        res => {
          // console.log(res.data);
          this.allList = res.data;
          this.dateListOneMonth = Array.from(
            new Set(
              res.data.map(item => {
                return item.releaseTime;
              })
            )
          );
          // console.log(this.dateListOneMonth);
          // 找到与日期对应的
          for (var i = 0; i < this.OneMonth.length; i++) {
            for (var s = 0; s < res.data.length; s++) {
              if (this.OneMonth[i].releaseTime == res.data[s].releaseTime) {
                this.OneMonth[i] = res.data[s];
                this.OneMonth[i].num = this.OneMonth[i - 1].num + 1; // 表示几号
              }
            }
          }
          // console.log(this.OneMonth);
          // 给星期六天加背景色
          for (var f = 0; f < this.OneMonth.length; f++) {
            if (
              new Date(this.OneMonth[f].releaseTime).getDay() === 0 ||
              new Date(this.OneMonth[f].releaseTime).getDay() === 6
            ) {
              this.OneMonth[f].background = "#f2f2f2";
            }
          }
          // console.log(this.dateFormat(new Date()))
          this.presentTime[2] = "01";
          // 找到当前时间在数组中的索引
          let num = res.data.findIndex(
            item => item.releaseTime === this.dateFormat(new Date())
          );
          // console.log(num, res.data.slice(0, num));
          // let befor = Array.from(
          //   new Set(
          //     res.data.filter(item => item.state).map(item => item.releaseTime)
          //   )
          // );
          // console.log(befor)

          // for (var i = 0; i < befor.length; i++) {
          //   befor[i] = new Date(befor[i]).getTime();
          // }
          // // befor.push(new Date().getTime())
          // console.log(befor)
          // let time = this.dateFormat(new Date(befor.sort()[befor.length - 1])); // 对日期进行排序
          // console.log(time)
          // // console.log(this.dateFormat(new Date(befor.sort()[befor.length-1])))
          // // console.log(res.data.filter(item => item.releaseTime == time))

          // this.latelyLog = res.data.filter(item => item.releaseTime == time); // 找到距离最近的日志
          // console.log(this.latelyLog)
          // 选中后的颜色
          if (this.isclick) {
            var count = this.OneMonth.findIndex(
              item => item.releaseTime == this.aWeekTime[this.Index].releaseTime
            );
            this.OneMonth[count].background = "rgba(23,118,225,0.1)";
          }

          this.isRenders = true;
        },
        err => {
          this.$message.error(err.msg);
          throw err;
        }
      );
    },
    // 获取当月的最后一天
    getCurrentMonthLast() {
      var date = new Date();
      var currentMonth = date.getMonth();
      var nextMonth = ++currentMonth;
      var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
      var oneDay = 1000 * 60 * 60 * 24;
      return new Date(nextMonthFirstDay - oneDay);
    },
    // 获取上个月的最后一天
    lastDay(time) {
      var nowdays = new Date(time);
      var year = nowdays.getFullYear();
      var month = nowdays.getMonth();
      if (month == 0) {
        month = 12;
        year = year - 1;
      }
      if (month < 10) {
        month = "0" + month;
      }
      var firstDay = year + "-" + month + "-" + "01"; //上个月的第一天

      var myDate = new Date(year, month, 0);
      var lastDay = year + "-" + month + "-" + myDate.getDate(); //上个月的最后一天
      return lastDay;
    },
    // 获取当月开始日期是星期几
    FirstWeek() {
      this.firstWeek = new Date(
        this.dateFormat(
          new Date(new Date(this.presentTime.join("-")).setDate(1))
        )
      ).getDay();
      switch (this.firstWeek) {
        case 1:
          this.firstWeek = 1;
          break;
        case 2:
          this.firstWeek = 2;
          break;
        case 3:
          this.firstWeek = 3;
          break;
        case 4:
          this.firstWeek = 4;
          break;
        case 5:
          this.firstWeek = 5;
          break;
        case 6:
          this.firstWeek = 6;
          break;
        case 0:
          this.firstWeek = 7;
          break;
      }
    },
    // 加减时间(月份)
    changeTime(num) {
      // 减
      this.isclick = false;
      if (num === -1) {
        // console.log(this.lastMonth,this.nextMonth);
        this.isRenders = false;
        var d = new Date(this.lastMonth.join("-"));
        d.setMonth(d.getMonth() + num);
        // console.log(d.toLocaleString().split('/'));
        this.lastMonth[0] = d.toLocaleString().split("/")[0];
        this.lastMonth[1] =
          Number(d.toLocaleString().split("/")[1]) < 10
            ? "0" + d.toLocaleString().split("/")[1]
            : d.toLocaleString().split("/")[1];
        this.lastMonth[2] = "01";
        this.AllMonth(); // 获取本月的全部日期
        this.FirstWeek(); // 获取当月开始时间是星期几
        this.OneMonthLog(this.lastMonth.join("-")); // 获取一个的日志详情
        // console.log(this.lastMonth.join("-"));
      } else {
        // 加
        this.isRenders = false;
        var d = new Date(this.lastMonth.join("-"));
        d.setMonth(d.getMonth() + num);
        // console.log(d.toLocaleString().split('/'));
        this.lastMonth[0] = d.toLocaleString().split("/")[0];
        this.lastMonth[1] =
          Number(d.toLocaleString().split("/")[1]) < 10
            ? "0" + d.toLocaleString().split("/")[1]
            : d.toLocaleString().split("/")[1];
        this.lastMonth[2] = "01";
        this.AllMonth(); // 获取本月的全部日期
        this.FirstWeek(); // 获取当月开始时间是星期几
        this.OneMonthLog(this.lastMonth.join("-")); // 获取一个的日志详情
        // console.log(999);
      }
    },
    // 点击上边的())
    above(index) {
      // console.log(this.aWeekTime[index],this.allList)
      // console.log(this.aWeekTime.filter(item => item.releaseTime == this.aWeekTime[index].releaseTime))
      this.latelyLog = this.aWeekTime.filter(
        item => item.releaseTime == this.aWeekTime[index].releaseTime
      );
      // console.log(new Date(this.dateFormat(this.getCurrentMonthLast())).getTime());
      // console.log(index, new Date(this.aWeekTime[index].releaseTime).getTime()>new Date(this.dateFormat(this.getCurrentMonthLast())).getTime());
      // return;
      let times = this.dateFormat(new Date()).split("-");
      times.pop();
      times[2] = "01";
      // console.log(times.join('-'))
      // this.presentTime.pop()
      // console.log(this.presentTime.join('-'))
      if (this.presentTime.join("-") !== times.join("-")) {
        return;
      }
      this.isRender = false;
      this.isRenders = false;
      this.Index = index; // 记录当前点击的索引
      this.presentTime[2] = "01";
      let num = this.OneMonth.findIndex(
        item => item.releaseTime == this.presentTime.join("-")
      ); // 找到月份开始的索引
      // 循环的是一个月的日期
      for (var f = num; f < this.OneMonth.length; f++) {
        this.OneMonth[f].background = "";
        if (
          new Date(this.OneMonth[f].releaseTime).getDay() === 0 ||
          new Date(this.OneMonth[f].releaseTime).getDay() === 6
        ) {
          this.OneMonth[f].background = "#f2f2f2";
        }
      }
      // 循环7天的日期
      for (var i = 0; i < this.aWeekTime.length; i++) {
        this.aWeekTime[i].background = "";
      }
      this.aWeekTime[index].background = "rgba(23,118,225,0.1)";
      var count = this.OneMonth.findIndex(
        item => item.releaseTime == this.aWeekTime[index].releaseTime
      );
      // 判断点击的是不是下个月的
      // 当月最后一天< 点击之后的
      if (
        new Date(this.aWeekTime[index].releaseTime).getTime() >
        new Date(this.dateFormat(this.getCurrentMonthLast())).getTime()
      ) {
        this.isRender = true;
        this.isRenders = true;
        return;
      }
      this.OneMonth[count].background = "rgba(23,118,225,0.1)";
      this.isRender = true;
      this.isRenders = true;
    },
    // 点击某天查看日志详情
    clickDetails(index) {
      // console.log(this.OneMonth[index])
      // this.OneMonth[index]
      this.isRender = false;
      this.presentTime[2] = "01";
      let num = this.OneMonth.findIndex(
        item => item.releaseTime == this.presentTime.join("-")
      ); // 找到月份开始的索引
      // 循环的是一个月的日期
      for (var f = 0; f < this.OneMonth.length; f++) {
        if (f < num) {
          this.OneMonth[f].background = "#f2f2f2";
        } else {
          this.OneMonth[f].background = "";
        }
        if (
          new Date(this.OneMonth[f].releaseTime).getDay() === 0 ||
          new Date(this.OneMonth[f].releaseTime).getDay() === 6
        ) {
          this.OneMonth[f].background = "#f2f2f2";
        }
      }
      var indexs = this.aWeekTime.findIndex(
        item => item.releaseTime == this.OneMonth[index].releaseTime
      );
      if (indexs !== -1) {
        // console.log(indexs)
        for (var i = 0; i < this.aWeekTime.length; i++) {
          this.aWeekTime[i].background = "";
        }
        this.aWeekTime[indexs].background = "rgba(23,118,225,0.1)";
      }
      this.OneMonth[index].background = "rgba(23,118,225,0.1)";
      this.isRender = true;
      if (this.OneMonth[index].state === 1) {
        // console.log(1)
        this.$emit("clickLoGs", {
          isok: true,
          TheDay: this.OneMonth[index], // 当天时间
          allList: this.allList // 所有数据
        });
      }
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.grad_boult i {
  cursor: pointer;
}
.grad_week {
  flex: 1;
  color: #ccc;
}
i {
  font-style: normal;
}
.grad_bottom {
   633px;
  height: 524px;
  padding-left: 40px;
  padding-right: 39px;
  box-sizing: border-box;
}
.grad_span {
  height: 80px;
  span {
    padding-left: 9px;
    display: inline-block;
     80px;
    height: 80px;
    border: solid 1px #e4e4e4;
    box-sizing: border-box;
    margin-right: -1px;
    // margin-left: -4px;
    position: relative;
    cursor: pointer;
    .ss {
      display: inline-block;
      position: absolute;
      font-size: 12px;
      bottom: 19px;
      left: 22px;
    }
  }
}
.record_span {
  color: #666666;
  display: block;
  padding-bottom: 18px;
}
#lq_audits /deep/ textarea {
   809px;
  height: 496px;
  resize: none;
}
.el-button--primary {
  color: #fff;
  background-color: #00bfb8;
  border-color: #00bfb8;
}
.el-button--default:hover {
  background: #fff;
  color: #606266;
  border-color: #dcdfe6;
}
#lq_audits /deep/ .el-form-item__content {
  display: inline-block;
}
#lq_audits {
   910px;
  // height: 710px;
  height: 787px;
  position: absolute;
  background: #fff;
  z-index: 999;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  text-align: left;
  box-sizing: border-box;
  .header {
    height: 42px;
    border-radius: 5px 5px 0 0;
    background-color: #00bfb8;
    padding: 14px 20px;
    box-sizing: border-box;
    span {
      font-size: 14px;
      color: white;
    }
    .header_span {
      cursor: pointer;
      float: right;
    }
  }
  .content {
     811px;
    // height: 100%;
    // margin-bottom: 50px;
    padding-top: 30px;
    padding-left: 50px;
    font-size: 14px;
    .content_top {
      display: flex;
      span {
        display: inline-block;
      }
    }
    .content_bottom {
      span {
        display: inline-block;
      }
    }
  }
  .footer {
    padding-right: 50px;
    // position: absolute;
    text-align: right;
    margin-top: 73px;

    // text-align: right;
  }
}
// 遮罩层
.popout {
  position: fixed;
  top: 0;
  left: 0;
   100%;
  height: 100%;
  background: #000;
  opacity: 0.5;
  z-index: 99;
}
// 日历
.Log_calendar {
  background: url("../../../assets/back_fold.png") no-repeat center;
}
.Log_calendars {
  background: url("../../../assets/back_unfold.png") no-repeat center;
}
// 上个月
.back_lastmonth {
  display: inline-block;
   8px;
  height: 14px;
  background: url("../../../assets/back_lastmonth.png") no-repeat center;
}
.back_nextmonth {
  display: inline-block;
   8px;
  height: 14px;
  background: url("../../../assets/back_nextmonth.png") no-repeat center;
}
// 点击后变背景色
.classBack {
  background: rgba(23, 118, 225, 0.1);
}
</style>

　　最后呈现的效果