index.vue

<template>
  <div class="punch-the-clock">
    <div class="rule" @click="punchClockClick()">
      规则
    </div>
    <div class="punch-the-clock-name-image">
      奖励名称
      <div class="yiwancheng">{{ hasEnded ? forthRate === 100 ? '已完成' : '进行中' : forthRate === 100 ? '已完成' : '已结束' }}</div>
    </div>
    <!-- 倒计时 -->
    <div class="punch-the-clock-name-bg">
      <div class="punch-the-clock-name-content">
        <!-- 倒计时 hasEnded 指是否在规定时间内完成学习 -->
        <div class="punch-the-clock-name-contentText" v-if="!hasEnded">很遗憾，您未在指定时间内完成任务哦</div>
        <div class="punch-the-clock-name-content-timer" v-if="hasEnded">
          <span>剩余完成时间</span>
          <span class="timer">{{ countDownDay }}</span>
          <span>天</span>
          <span class="timer">{{ countDownhour }}</span>
          <span>时</span>
          <span class="timer">{{ countDownminu }}</span>
          <span>分</span>
          <span class="timer">{{ countDownsec }}</span>
          <span>秒</span>
        </div>
        <!-- 完成率 -->
        <div class="punch-the-clock-name-content-completion">
          <div class="daka-fu">
            <img :src="punchTheClock.dakaFu" alt="">
          </div>
          <div class="speed">
            <span class="speed-baifen baifenbi" v-show="forthRate + secondRate + thirdRate < 80">100%</span>
            <span class="speed-list speed-list-completed speed-baifen" :style="{ width: forthRate <= 10 ? '10%' : forthRate + '%' }" v-show="forthRate !== 0">{{ forthRate }}%</span>
            <span class="speed-list speed-list-be" :style="{ width: secondRate !== 100 && secondRate + thirdRate >= 90 ? (secondRate + 3) + '%' : (secondRate + 3) + '%' }"></span>
            <span class="speed-list speed-list-card" :style="{ width: thirdRate !== 100 && secondRate + thirdRate >= 90 ? (thirdRate + 1) + '%' : (thirdRate + 2) + '%' }"></span>
          </div>
          <div class="speed-content">
            <div class="speed-content-list">
              <span class="speed-content-list-color speed-content-list-completed"></span>
              <span class="speed-content-list-text">已完成</span>
            </div>
            <div class="speed-content-list">
              <span class="speed-content-list-color speed-content-list-be"></span>
              <span class="speed-content-list-text">待完成</span>
            </div>
            <div class="speed-content-list">
              <span class="speed-content-list-color speed-content-list-card"></span>
              <span class="speed-content-list-text">待补卡</span>
            </div>
            <div class="speed-content-list">
              <span class="speed-content-list-color speed-content-list-waiting"></span>
              <span class="speed-content-list-text">待开课</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 恭喜您已获得奖励 快联系班主任领取吧! -->
    <div class="punch-the-clock-reward" v-if="forthRate === 100">
      <div class="punch-the-clock-reward-title">恭喜您已获得奖励</div>
      <div class="punch-the-clock-reward-title">快联系班主任领取吧!</div>
      <div class="punch-the-clock-reward-erweima">
        <div class="punch-the-clock-reward-erweima-ma">
          <img :src="qrErWeiMa" alt="">
        </div>
      </div>
    </div>
    <!-- 今日卡 -->
    <div class="today-list" v-if="todayData.length !== 0 && forthRate !== 100">
      <div class="punch-list-today" v-for="(item, index) in todayData">
        <div class="punch-card-today">
          <div class="day">今日</div>
          <div class="small-title">{{ item.sub_title }}</div>
          <div class="title">{{ item.name.split(' ')[0] + ' ' +item.name.split(' ')[1] }}</div>
        </div>
        <div class="punch-card-today" @click="punchCardClick(index, item.status, item.type, 9)">
          <div class="punch-card-today-learning">
            <img :src="item.status === 1 ? punchTheClock.kaike_xuexi : item.status === 2 ? punchTheClock.daiwanc : item.status === 3 ? punchTheClock.buka_xuexi : punchTheClock.dakawancheng" alt="">
          </div>
          <div class="punch-card-today-xuexila">学习卡</div>
        </div>
        <div class="punch-card-today" @click="punchCardClick(index, item.status1, item.type1, 9)">
          <div class="punch-card-today-learning">
            <img :src="item.status1 === 1 ? punchTheClock.kaike_chengz : item.status1 === 2 ? punchTheClock.daiwanChangz : item.status1 === 3 ? punchTheClock.buka_changz : punchTheClock.wanchengChengz" alt="">
          </div>
          <div class="punch-card-today-xuexila">成长卡</div>
        </div>
      </div>
    </div>
    <!-- 已完成人数 -->
    <div class="punch-the-clock-completed-persons">
      <div class="punch-the-clock-completed-persons-image">
        <div class="yiwancheng">{{ countIndex }}人已完成</div>
        <div class="portrait" v-for="(item, index) in avatarArr" :key="index">
          <img :src="item" alt="">
        </div>
      </div>
    </div>
    <!-- 我的打卡记录 -->
    <div class="punch-the-clock-record">
      <div class="punch-the-clock-record-title">
        <div class="punch-the-clock-record-title-image"></div>
        <div class="punch-the-clock-record-title-text">我的打卡记录</div>
      </div>
      <!-- tab 导航 -->
      <ul class="punch-the-clock-record-list">
        <li @click="returnCash(index)" :class="[ index === recordListIndex ? 'active' : '' ]" v-for="(item, index) in recordList" :key="index" >
          {{ item.title }} <div class="xian" v-show="index === recordListIndex"></div>
        </li>
      </ul>
      <!-- 我的打卡记录展示 -->
      <div class="today-list">
        <div class="today-list-xian" v-for="(item, index) in punchCardData" v-if="punchCardData.length !== 0" :key="index">
          <!-- 日期 -->
          <div class="punch-card-today">
            <div class="sou" v-if="recordListIndex === 0">
              <img :src="punchTheClock.sou" alt="">
            </div>
            <div class="day"  v-if="recordListIndex !== 0">{{ item.push_time.split('-')[1] }}月{{ item.push_time.split('-')[2] }}日</div>
            <div class="small-title">{{ item.sub_title }}</div>
            <div class="title">{{ item.name.split(' ')[0] + ' ' +item.name.split(' ')[1] }}</div>
          </div>
          <!-- 去学习 -->
          <div class="punch-card-today" @click="punchCardClick(index, item.status, item.type)" v-if="item.type == 1">
            <div class="punch-card-today-learning">
              <img :src="item.status === 1 ? punchTheClock.kaike_xuexi : item.status === 2 ? punchTheClock.daiwanc : item.status === 3 ? punchTheClock.buka_xuexi : punchTheClock.dakawancheng" alt="">
            </div>
            <div class="punch-card-today-xuexila">学习卡</div>
          </div>
          <!-- 成长卡 -->
          <div class="punch-card-today" @click="punchCardClick(index, item.status1, item.type1)" v-if="item.type1 == 2">
            <div class="punch-card-today-learning">
              <img :src="item.status1 === 1 ? punchTheClock.kaike_chengz : item.status1 === 2 ? punchTheClock.daiwanChangz : item.status1 === 3 ? punchTheClock.buka_changz : punchTheClock.wanchengChengz" alt="">
            </div>
            <div class="punch-card-today-xuexila">成长卡</div>
          </div>
        </div>
        <!-- 数据为空 -->
        <div class="today-list-null" v-if="punchCardData.length === 0">
          <div class="null-tu">
            <img :src="punchTheClock.nullTu" alt="">
          </div>
          <div class="today-list-null-text">啊哦，没有数据哦~</div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <div class="punch-the-clock-model" v-show="punchClockModel" @click="punchClockModel = false">
      <div class="punch-the-clock-model-yin" v-if="ruleShow != 2">
        <div class="tishi" v-if="tishi">
          <div class="tishi-image">
            <img :src="punchTheClock.xiaolian" alt="">
          </div>
          <div class="text">恭喜你补卡成功啦~</div>
          <div class="text">-20颗星星</div>
        </div>
        <div class="x-code">
          <img :src="punchTheClock.x" alt="">
        </div>
        <div class="punch-the-clock-model-title">
          <span>{{ typeStatus == 1 ? '学习卡' : '成长卡' }}</span>
        </div>
        <div class="title-text title-padd">课时：{{ modelData.sub_title }}</div>
        <div class="title-text">课节：{{ modelData.aName }}</div>
        <div class="title-text">开课日期：{{ modelData.push_time }}</div>
        <div class="title-text">状态：
          <span :class="[ status === 2 || status === 3 ? 'small-title' : '', 'uiyiyi' ]"></span>
        </div>
        <div class="title-text">{{ modelData.tishi }}</div>
        <!-- 积分获取规则 -->
        <div class="get-stars" v-if="status === 3 && lastValue <= 20">
          <div class="get-stars-content">
            <div class="get-stars-text">当前星星不足补卡哦，如何获得更多星星？</div>
            <div class="get-stars-text get-stars-text-con">
              <span class="get-stars-text-title">1、开始课程学习</span> <span class="get-stars-text-xingxing">+1星星</span>
            </div>
            <div class="get-stars-text get-stars-text-con">
              <span class="get-stars-text-title">2、学完课节</span> <span class="get-stars-text-xingxing">+1星星</span>
            </div>
            <div class="get-stars-text get-stars-text-con">
              <span class="get-stars-text-title">3、提交作业</span> <span class="get-stars-text-xingxing">+1星星</span>
            </div>
          </div>
        </div>
        <!-- 按钮点击 -->
        <div :class="['get-stars-btn', {'get-stars-btn-clo' : status === 3 && lastValue <= 20}]" v-if="status !== 4" @click.stop="modelDataClick(modelData, typeStatus)">
          {{ status === 2 ? ( goWhere == 1 ? '去学习' : '去提交' ) : status === 3 ? '去补卡' : '' }}
        </div>
      </div>
      <!-- 规则 -->
      <div class="punch-the-clock-model-yin punch-the-clock-rule-pad" v-if="ruleShow == 2">
        <div class="x-code">
          <img :src="punchTheClock.x" alt="">
        </div>
        <div class="punch-the-clock-rule">活动规则</div>
        <div class="rule-content">
          <div class="rule-content-list">
            <span class="title">1.活动名称：</span>
            <span class="con">全勤打卡赢奖励</span>
          </div>
          <div class="rule-content-list">
            <span class="title">2.活动时间：</span>
            <span class="con">课程开课时间-结课时间</span>
          </div>
          <div class="rule-content-list">
            <span class="title">3.活动规则：</span><br />
            <span class="con">需在课程开课日完成当日课程的学习卡和成长卡。学完当日课程即可完成学习卡。提交学习记录即可完成成长卡。如延期完成，需消耗星星进行补卡。每20颗星星可补一张待补卡卡片。</span>
          </div>
          <div class="rule-content-list">
            <span class="title">4.如何补卡？</span><br />
            <span class="con">未在当日完成学习卡和成长卡，需先完成。完成后可在补卡列表中，找到对应待补卡卡片。点击后，消耗星星进行补卡</span>
          </div>
          <div class="rule-content-list">
            <span class="title">5.星星不足补卡时，如何获取更多星星？</span><br />
            <span class="con">
              可通过以下3种方式获取星星<br />
              a. 打开未学习课程       星星+1<br />
              b. 不限时间学习完成一节课程    星星+1<br />
              c. 不限时提交成长记录    星星+1
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getReturnCashApi, getFinishUserApi, getCardGoApi, getUserIntegralApi, getUserWatchApi, getNewCashApi, getLessonDetailApi, getTeacherApi } from "../../service/api";
  import { punchTheClock }    from "../../util/imgUrl";
  import { Toast }            from "vant";

  export default {
    name: "index",
    data() {
      return {
        avatarArr: [],      // 头像
        countIndex: 0,      // 完成人数
        countDown: '',      // 倒计时
        countDownDay: 0,    // 倒计时天
        countDownhour: 0,   // 倒计时小时
        countDownminu: 0,   // 倒计时分
        countDownsec: 0,    // 倒计时秒
        goWhere: 0,         // 判断去学习按钮
        hasEnded: true,     // 已完成状态
        lastValue: 0,       // 积分
        modelData: {},      // model数据
        firstRate: 0,       // 待开课率
        ruleShow: 0,        // 规则展示
        status: 0,          // 状态
        secondRate: 0,      // 待完成率
        tishi: false,       // 提示信息展示
        thirdRate: 0,       // 待补卡率
        typeStatus: 0,      // type
        forthRate: 0,       // 打卡完成率
        punchTheClock: punchTheClock, // 图片
        punchCardData: [],  // 待开课、待完成、待补卡、打卡完成切换
        punchClockModel: false, // 弹框
        qrErWeiMa: '',      // 二维码
        recordListIndex: 1, // 我的打卡记录切换
        returnCashData: {}, // 总数据
        todayData: [],      // 当天卡
        currentTime: '',
        dangqianTimer: '',
        recordList: [{ title: '待开课' }, { title: '待完成' }, { title: '待补卡' }, { title: '打卡完成' }]
      }
    },
    methods: {
      /**
       * 打卡数据
       * @param index
       */
      returnCash(index) {
        let periodsId = this.$route.query.periods_id,
            newCash   = { start_at: this.$route.query.start_at, over_at: this.$route.query.over_at }
        getReturnCashApi(periodsId, newCash).then(res => {
          this.returnCashData = res;
          // 倒计时
          let overTimeSplit = res.over_time.split(' ')[0],
              overTimeTimer = overTimeSplit.split('-')[0] + '/' + overTimeSplit.split('-')[1] + '/' + overTimeSplit.split('-')[2] + ' ' + res.over_time.split(' ')[1]
          let overTime = new Date(overTimeTimer).getTime();
          setInterval(() => { this.restTime(overTime) }, 1000);
          // 判断活动是否结束
          if(overTime < new Date().getTime()) {
            this.hasEnded = false
          }
          // 完成率
          this.secondRate = parseInt(res.second_rate);
          this.thirdRate  = parseInt(res.third_rate) === 100 ? 103 : parseInt(res.third_rate);
          this.forthRate  = parseInt(res.forth_rate);
          // 当天卡
          this.todayData = this.integrationFn(res.today)
          // 默认待开课
          let secode = index === 0 ? res.first : index === 1 ? res.second : index === 2 ? res.third : res.forth
          this.recordListIndex = index;
          this.punchCardData = this.integrationFn(secode)
        })
      },
      /**
       * 完成用户
       */
      finishUser() {
        let periodsId = this.$route.query.periods_id
        getFinishUserApi(periodsId).then(res => {
          this.avatarArr = res.avatar
          this.countIndex = res.count
        })
      },
      /**
       * 倒计时方法
       * @param time
       */
      restTime(time) {
        let restSec = time - new Date().getTime();
        this.countDownDay  = this.timerAddLing(parseInt(restSec / (60 * 60 * 24 * 1000)));
        this.countDownhour = this.timerAddLing(parseInt(restSec / (60 * 60 * 1000) % 24));
        this.countDownminu = this.timerAddLing(parseInt(restSec / (60 * 1000) % 60));
        this.countDownsec  = this.timerAddLing(parseInt(restSec / 1000 % 60));
      },
      /**
       * 点击打卡记录
       * @param index  { number }
       * @param status { number }
       * @param type { number }
       * @param state { number }
       */
      punchCardClick(index, status, type, state) {
        this.status     = status;
        this.typeStatus = type;
        this.ruleShow   = 0;
        if(status !== 1) {
          if(this.hasEnded && this.forthRate !== 100) {
            // 今日和其他课程切换
            if(state == 9) {
              this.modelData = this.todayData[index]
            }else {
              this.modelData = this.punchCardData[index]
            }
            // 课节
            this.modelData.aName = this.modelData.name.split(' ')[0] + ' ' + this.modelData.name.split(' ')[1];
            // 状态展示
            let getCardGoData    = { start_at: this.$route.query.start_at, over_at: this.$route.query.over_at, push_time: this.modelData.push_time, type: type };
            if(status === 2) {
              // 判断去学习还是去提交
              getCardGoApi(this.modelData.ele_id, this.modelData.id, this.modelData.periods_id, getCardGoData).then(res => {
                this.goWhere = res.go_where;
                let currentTime = this.timerAddLing(new Date().getFullYear()) + '-' + this.timerAddLing(new Date().getMonth() + 1) + '-' + this.timerAddLing(new Date().getDate())
                let da = new Date(currentTime).getTime()
                let dangqianTimer = new Date(this.modelData.push_time).getTime();
                if(da == dangqianTimer) {
                  this.modelData.state = res.go_where === 1 ? '待学习' : '未提交'
                }else {
                  this.modelData.state = res.go_where === 1 ? '待学习（已延期）' : '未提交（已延期）'
                }
                document.querySelectorAll('.uiyiyi')[0].innerText = this.modelData.state
              })
            }else {
              this.modelData.state =  status === 3 ? '待补卡' : '打卡完成'
              document.querySelectorAll('.uiyiyi')[0].innerText = this.modelData.state
            }
            if(document.querySelectorAll('.get-stars-btn')[0])
              document.querySelectorAll('.get-stars-btn')[0].style.display = 'block';
            // 提示信息
            this.modelData.tishi = status === 2 ? '提示：学习卡与作业卡需在开课日完成哦，如延期完成，需消耗星星补卡' : status === 3 ? `补卡：消耗20星星补卡1次，当前共有${ this.lastValue }颗星星` : ''
            this.punchClockModel = true;
          }else {
            Toast("活动已结束，谢谢参与~");
          }
        }else {
          Toast("课程还未开始，请耐心等待哦～");
        }
      },
      /**
       * 点击打卡
       * @param type
       * @param dataObj
       */
      modelDataClick(dataObj, type) {
        console.log(this.status)
        let getCardGoData = { start_at: this.$route.query.start_at, over_at: this.$route.query.over_at, push_time: dataObj.push_time, type: type };
        if(this.status === 2) {
          // 点击去学习和去提交
          if(this.goWhere === 1) {
            // 进入课程
            this.getLessonDetailFn(dataObj)
          }else {
            // 用户看课统计
            getUserWatchApi({ category_id: dataObj.id }).then(res => {
              let data = Object.assign({}, res, { periods_id: this.modelData.periods_id, category_id: this.modelData.id, element_id: this.modelData.ele_id })
              this.$router.push({path: '/evaluate', query: data})
            });
          }
        }else if(this.status === 3) {
          // 待不卡--补卡
          if(this.lastValue >= 20) {
            getNewCashApi(this.modelData.ele_id, this.modelData.id, this.modelData.periods_id, getCardGoData).then(res => {
              this.tishi = true
              setTimeout(() => { this.tishi = false }, 1500)
              document.querySelectorAll('.get-stars-btn')[0].style.display = 'none';
              this.lastValue = this.lastValue - 20
              this.modelData.tishi = `补卡：消耗20星星补卡1次，当前共有${ this.lastValue }颗星星`
              this.returnCash(2)
            })
          }
        }
      },
      /**
       * 之前的代码后期需要优化
       * @param dataObj { Object }
       */
      getLessonDetailFn(dataObj) {
        getLessonDetailApi(dataObj.periods_id, dataObj.id, dataObj.ele_id).then(res=>{
          res.content = JSON.parse(res.content);
          this.thisLesson = res;
          this.thisLesson.id = dataObj.ele_id.toString();
          this.thisLesson.categoryId = dataObj.id;
          this.thisLesson.domTitle = dataObj.name;
          this.thisLesson.star_num = 0;
          let query = {
            periods_id: dataObj.periods_id,
            category_id: dataObj.id,
            elementId: dataObj.ele_id,
            course_type: this.$route.query.course_type,
            parent_category_id: this.$route.query.parent_category_id,
          };
          this.$store.dispatch('setClassQuery',query)
          sessionStorage.setItem('classQuery',JSON.stringify(query))

          let lessonData = JSON.parse(JSON.stringify(this.thisLesson));
          lessonData.push_time = dataObj.push_time;
          lessonData.themeID = this.$route.query.parent_category_id;
          lessonData.goodsID= dataObj.goods_id;
          lessonData.classID= dataObj.class_id;
          lessonData.nowTime = Date.parse(new Date());
          lessonData.course_title = this.$route.query.course_title
          localStorage.setItem('lessonDetail', JSON.stringify(lessonData));
          this.$router.push({name:'newLesson', query: query})
        })
      },
      /**
       * 时间少于10 加 0
       * @param n
       * @returns {string}
       */
      timerAddLing(n) {
        return n < 10 ? '0' + n : n
      },
      /**
       * 我的打卡记录封装数据
       * @param arr   { Array }
       * @returns {[]}
       */
      integrationFn(arr) {
        let secondArr = []
        for(let key in arr) {
          // 排序
          arr[key].sort((a, b) => { return parseInt(a.type) - parseInt(b.type) });
          if(arr[key].length === 2) {
            // 当数据有两条时
            arr[key][0].type1 = arr[key][1].type;
            arr[key][0].status1 = arr[key][1].status;
            secondArr.push(arr[key][0])
          }else {
            if(arr[key][0].type == 2) {
              arr[key][0].type1 = arr[key][0].type
              arr[key][0].status1 = arr[key][0].status
              delete arr[key][0].type
              delete arr[key][0].status
            }
            secondArr.push(arr[key][0])
          }
        }
        // 去重
        let obj = {};
        let peon = secondArr.reduce((cur,next) => {
          obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
          return cur;
        },[])
        return peon;
      },
      /**
       * 老师二维码
       */
      getTeacher() {
        // 二维码
        getTeacherApi().then(res => {
          this.qrErWeiMa = res.qr;
        });
        // 积分
        getUserIntegralApi().then(res => {
          this.lastValue = res.last_value;
        })
      },
      punchClockClick() {
        this.punchClockModel = true;
        this.ruleShow = 2
      }
    },
    mounted() {
      this.returnCash(1);     // 数据
      this.finishUser();     // 已完成人数
      this.getTeacher()      // 获取老师
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";

  .punch-the-clock {
    width: 100%;
    background: #FFD096;
    padding: 28 * @toVw 0;
    box-sizing: border-box;
    position: relative;

    .rule {
      width: 54 * @toVw;
      height: 30 * @toVw;
      line-height: 30 * @toVw;
      background: rgba(0, 0, 0, .5);
      border-radius: 50px 0 0 50px;
      position: fixed;
      top: 48 * @toVw;
      right: 0;
      z-index: 80;
      font-size: 13 * @toVw;
      text-align: center;
      color: #FFFFFF;
    }

    .punch-the-clock-name-bg {
      width: 335 * @toVw;
      padding: 160 * @toVw 23 * @toVw 20 * @toVw;
      background: #F76D39;
      border-radius: 10 * @toVw;
      box-sizing: border-box;

      .punch-the-clock-name-content {
        width: 100%;
        .punch-the-clock-name-contentText {
          padding-top: 8 * @toVw;
          font-size: 12 * @toVw;
          color: #FFFFFF;
          text-align: center;
        }
        /* 倒计时 */
        .punch-the-clock-name-content-timer {
          padding: 8 * @toVw 0 0;
          box-sizing: border-box;
          font-size: 12 * @toVw;
          color: #75290D;
          span {
            vertical-align: middle;
          }
          .timer {
            width: 20 * @toVw;
            height: 20 * @toVw;
            line-height: 20 * @toVw;
            margin: 0 3 * @toVw;
            display: inline-block;
            background: #FFEEED;
            border-radius: 4 * @toVw;
            text-align: center;
          }
        }
        /* 完成率 */
        .punch-the-clock-name-content-completion {
          width: 288 * @toVw;
          height: 90 * @toVw;
          padding: 41 * @toVw 10 * @toVw 0 13 * @toVw;
          margin-top: 8 * @toVw;
          position: relative;
          background: #FFE4C1;
          border-radius: 10 * @toVw;
          box-sizing: border-box;
          /* 图像 */
          .daka-fu {
            width: 28 * @toVw;
            height: 33 * @toVw;
            position: absolute;
            top: 6 * @toVw;
            right: 10 * @toVw;
            img {
              width: 100%;
              height: 100%;
            }
          }
          /* 进度条 */
          .speed {
            width: 99%;
            height: 12 * @toVw;
            line-height: 9 * @toVw;
            background: #FFFFFF;
            border-radius: 6 * @toVw;
            position: relative;
            text-align: right;
            overflow: hidden;

            .speed-baifen {
              padding-right: 5 * @toVw;
              font-size: 10 * @toVw;
              color: #75290D;
            }
            .baifenbi {
              position: absolute;
              right: 0;
              top: 1 * @toVw;
            }
            .speed-list {
              width: 30%;
              height: 12 * @toVw;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              float: left;
              border-radius: 6 * @toVw;
            }
            .speed-list-completed {
              line-height: 12 * @toVw;
              background: #60ADF0;
              position: relative;
              z-index: 4;
              color: #FFFFFF;
            }
            .speed-list-be {
              margin-left: -3%;
              background: #FFD454;
              position: relative;
              z-index: 2;
            }
            .speed-list-card {
              margin-left: -3%;
              background: #FF7D77;
            }
          }
          /* 解释进度文本 */
          .speed-content {
            width: 100%;
            padding-top: 8 * @toVw;
            font-size: 0;
            .speed-content-list {
              display: inline-block;
              padding-right: 10 * @toVw;
              .speed-content-list-color {
                width: 10 * @toVw;
                height: 10 * @toVw;
                display: inline-block;
                border-radius: 100px;
                vertical-align: middle;
              }
              .speed-content-list-completed {
                background: #60ADF0;
              }
              .speed-content-list-be {
                background: #FFD454;
              }
              .speed-content-list-card {
                background: #FF7D77;
              }
              .speed-content-list-waiting {
                background: #FFFFFF;
              }
              .speed-content-list-text {
                padding-left: 4 * @toVw;
                vertical-align: middle;
                font-size: 12 * @toVw;
                color: #948145;
              }
            }
          }
        }
      }
    }

    .punch-the-clock-name-image {
      width: 100%;
      height: 160 * @toVw;
      background: url("./../../assets/punchTheClock/yezi_title.png") no-repeat;
      background-size: 100% 100%;
      padding-top: 9 * @toVw;
      box-sizing: border-box;
      position: absolute;
      left: 0; top: 28 * @toVw;
      text-align: center;
      font-size: 18 * @toVw;
      color: #FFFFFF;

      .yiwancheng {
        position: absolute;
        bottom: 18 * @toVw;
        right: 58 * @toVw;
        font-size: 14 * @toVw;
        color: #E68453;
      }
    }
    /* 恭喜您已获得奖励 快联系班主任领取吧! */
    .punch-the-clock-reward {
      width: 335 * @toVw;
      height: 275 * @toVw;
      margin-top: 10 * @toVw;
      padding-top: 15 * @toVw;
      background: #FFFFFF;
      border-radius: 10 * @toVw;
      box-sizing: border-box;
      text-align: center;
      .punch-the-clock-reward-title {
        font-size: 17 * @toVw;
        font-weight: 500;
        color: #BB3E00;
      }
      .punch-the-clock-reward-erweima {
        width: 170 * @toVw;
        height: 170 * @toVw;
        margin-top: 5 * @toVw;
        background: #FFE1AE;
        border-right: 7 * @toVw;
        position: relative;
        .punch-the-clock-reward-erweima-ma {
          width: 150 * @toVw;
          height: 150 * @toVw;
          background: #BDBDBD;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    /* 今日卡 */
    .today-list-xian {
      padding-top: 9 * @toVw;
      padding-bottom: 10 * @toVw;
      border-bottom: 1px solid #EFDFD4;
      overflow: hidden;
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        padding-bottom: 0;
        border-bottom: none;
      }
    }

    .today-list {
      width: 335 * @toVw;
      margin-top: 10 * @toVw;
      padding: 19 * @toVw 20 * @toVw 14 * @toVw;
      background: #FFFFFF;
      border-radius: 10 * @toVw;
      box-sizing: border-box;
      overflow: hidden;

      .punch-list-today {
        overflow: hidden;
        padding-top: 19 * @toVw;
        padding-bottom: 14 * @toVw;
        border-bottom: 1px solid #EFDFD4;
        &:first-child {
          padding-top: 0;
        }
        &:last-child {
          padding-bottom: 0;
          border-bottom: none;
        }
      }

      .punch-card-today {
        float: left;
        text-align: left;
        .sou {
          width: 15 * @toVw;
          height: 24 * @toVw;
          text-align: left;
          margin: 1px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .day {
          font-size: 15 * @toVw;
          font-weight: 500;
          color: #6B5617;
        }
        .small-title {
          width: 97 * @toVw;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: 12 * @toVw;
          padding-top: 13 * @toVw;
          color: #A6A59F;
        }
        .title {
          width: 97 * @toVw;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: 12 * @toVw;
          padding-top: 9 * @toVw;
          color: #A6A59F;
        }
        .punch-card-today-learning {
          width: 87 * @toVw;
          height: 57 * @toVw;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .punch-card-today-xuexila {
          padding-top: 8 * @toVw;
          font-size: 12 * @toVw;
          font-weight: 500;
          color: #AF5D21;
          text-align: center;
        }
        &:first-child {
          padding-right: 14 * @toVw;
        }
        &:last-child {
          padding-left: 8 * @toVw;
        }
      }

      .today-list-null {
        padding: 80 * @toVw 0 110 * @toVw;
        .null-tu {
          width: 100 * @toVw;
          height: 100 * @toVw;
          margin: auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .today-list-null-text {
          padding-top: 11 * @toVw;
          font-size: 13 * @toVw;
          color: #666666;
        }
      }
    }
    /* 已完成人数 */
    .punch-the-clock-completed-persons {
      width: 100%;
      padding-top: 5 * @toVw;
      padding-bottom: 10 * @toVw;
      text-align: right;
      .punch-the-clock-completed-persons-image {
        overflow: hidden;
      }
      .yiwancheng {
        padding-right: 21 * @toVw;
        padding-left: 3 * @toVw;
        line-height: 20 * @toVw;
        float: right;
        font-size: 11 * @toVw;
        color: #623F06;
        vertical-align: middle;
      }

      .portrait {
        width: 20 * @toVw;
        height: 20 * @toVw;
        margin-left: -10 * @toVw;
        border-radius: 100px;
        float: right;
        vertical-align: middle;

        img {
          width: 100%;
          height: 100%;
          border-radius: 100px;
        }
      }
    }
    /* 我的打卡记录 */
    .punch-the-clock-record {
      width: 335 * @toVw;
      padding-top: 24 * @toVw;
      padding-bottom: 10 * @toVw;
      background: #FFFFFF;
      border-radius: 10 * @toVw;
      text-align: center;
      .punch-the-clock-record-title {
        width: 100%;
        position: relative;
        .punch-the-clock-record-title-image {
          width: 264 * @toVw;
          height: 4 * @toVw;
          background: url("./../../assets/punchTheClock/line.png") no-repeat;
          background-size: 100% 100%;
        }
        .punch-the-clock-record-title-text {
          position: absolute;
          left: 0;
          right: 0;
          top: -10 * @toVw;
          margin: auto;
        }
      }

      .punch-the-clock-record-list {
        width: 100%;
        padding-top: 29 * @toVw;
        display: flex;
        li {
          flex: 1;
          font-size: 12 * @toVw;
          text-align: center;
          color: #948145;
        }
        .active {
          font-weight: 500;
          position: relative;
          top: 3 * @toVw;
          .xian {
            width: 24 * @toVw;
            height: 4 * @toVw;
            margin-top: 2 * @toVw;
            background: #FF8A5A;
            border-radius: 3 * @toVw;
          }
        }
      }
    }
    /* 弹框 */
    .punch-the-clock-model {
      width: 100%;
      height: 100%;
      padding-top: 50 * @toVw;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(0,0,0,.5);
      z-index: 100;

      .punch-the-clock-model-yin {
        width: 307 * @toVw;
        height: 485 * @toVw;
        padding: 90 * @toVw 30 * @toVw 0;
        position: relative;
        box-sizing: border-box;
        background: url("../../assets/punchTheClock/tankuang.png") no-repeat;
        background-size: 100% 100%;

        .x-code {
          width: 27 * @toVw;
          height: 27 * @toVw;
          position: absolute;
          top: 0;
          right: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        /* 我的打卡记录详情 */
        .punch-the-clock-model-title {
          width: 72 * @toVw;
          height: 10 * @toVw;
          background: url("../../assets/punchTheClock/beijing.png") no-repeat;
          background-size: 100% 100%;
          border-radius: 10px;
          text-align: center;
          span {
            position: relative;
            top: -10 * @toVw;
            font-size: 15 * @toVw;
            font-weight: 600;
            color: #333333;
          }
        }
        .title-text {
          padding-top: 5 * @toVw;
          font-size: 14 * @toVw;
          color: #333333;
          .small-title {
            color: #ff7d7a;
            font-weight: 500;
          }
        }
        .title-padd {
          padding-top: 20 * @toVw;
        }
        .get-stars {
          width: 251 * @toVw;
          height: 88 * @toVw;
          margin-top: 10 * @toVw;
          padding: 8 * @toVw;
          border: 1px solid #FFD454;
          box-sizing: border-box;
          border-radius: 5 * @toVw;

          .get-stars-text {
            font-size: 12 * @toVw;
            color: #666666;
          }

          .get-stars-text-xingxing {
            float: right;
            padding-right: 69 * @toVw;
          }

          .get-stars-text-con {
            padding-top: 1 * @toVw;
          }
        }
        .get-stars-btn {
          width: 240 * @toVw;
          height: 50 * @toVw;
          line-height: 50 * @toVw;
          background: #FFD454;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 50 * @toVw;
          border-radius: 100px;
          font-size: 18 * @toVw;
          font-weight: 500;
          text-align: center;
          color: #FFFFFF;
        }
        .get-stars-btn-clo {
          background: #CCCCCC;
        }
        /* 规则 */
        .punch-the-clock-rule {
          width: 157 * @toVw;
          height: 27 * @toVw;
          line-height: 27 * @toVw;
          background: url("../../assets/punchTheClock/rule_beijing.png") no-repeat;
          background-size: 100% 100%;
          font-size: 15 * @toVw;
          color: #FFFFFF;
          text-align: center;
        }

        .rule-content {
          margin-top: 16 * @toVw;
          height: 295 * @toVw;
          line-height: 25 * @toVw;
          overflow: auto;
          -webkit-overflow-scrolling: touch;
          .rule-content-list {
            width: 100%;
            font-size: 13 * @toVw;
            .title {
              font-weight: 500;
              color: #333333;
            }
            .con {
              color: #aaaaaa;
              text-align: justify;
              text-align-last: justify;
            }
          }
        }

        .tishi {
          width: 141 * @toVw;
          height: 126 * @toVw;
          margin: auto;
          background: rgba(0,0,0,.8);
          border-radius: 10 * @toVw;
          padding-top: 20 * @toVw;
          position: absolute;
          left: 0;
          bottom: 15%;
          right: 0;
          text-align: center;

          .tishi-image {
            width: 26 * @toVw;
            height: 26 * @toVw;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            padding-top: 15 * @toVw;
            font-size: 12 * @toVw;
            color: #FFFFFF;
          }
        }
      }

      .punch-the-clock-rule-pad {
        padding-top: 102 *  @toVw;
      }
    }

    @media screen and (min-width: 600px) {
      .punch-the-clock-model {
        overflow: auto;
      }
    }
  }
</style>