<template>
  <div class="keep-learn">
    <div v-show="isShow" class="border-bottom space-between keep-learnbox">
      <div class="learning-txt">
        <div class="gray keepon-title">{{parmObj.name}}</div>
        <div>
          <span class="gray fs24 keepon-right">已学习：{{parmObj.day}} 天</span>
          <span class="gray fs24 keepon-right">剩余：{{parmObj.remanentCourseNum}}%</span>
          <span class="gray fs24 continue-study" @click="continueStudy">继续学习></span>
        </div>
        
      </div>
      <span class="close-m">
        <img @click="cancel" src="../../images/close.png"/>
      </span>

    </div>
  </div>
</template>

<script>
export default {
  name: 'YqyHomeKeepon',
  data(){
    return {
      isShow: true,
      parmObj:{}
    }
  },
  mounted(){
    this.getData();
  },
  methods: {
    continueStudy(){

    },
    cancel(){

    },
    getData(){
      let _this = this,
      parm = {
       
        token:'EA67293E35C249C1832583F7AD2669EC',
        setEntry: 'headers'
      }
      _this.GET('contents/courses/continueLearningCourse',parm).then(function(res){

        if(res.code === '000000'){
          _this.parmObj =  res.data && res.data.continueLearningCourseModel || {};
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.keep-learn{
  width: 100%;
  padding: 0 px2rem(15px);
  margin-top: px2rem(15px);

  .keep-learnbox{
   
    padding: px2rem(10px);
    position: relative;
  }
  .border-bottom{
    width: 100%;
    border-bottom: 1px solid RGBA(231, 231, 231, 1);
    padding-bottom: px2rem(10px);
  }
  .keepon-title{
    font-size: px2rem(14px);
  }
  .continue-study{
    color: RGBA(31, 121, 115, 1);
  }
  .keepon-right{
    margin-right: px2rem(15px);
  }
  .learning-txt{
    position: relative;
  }
  .close-m{
    position: absolute;
    width: px2rem(25px);
    height: px2rem(25px);
    display: inline-block;
    right: px2rem(10px);
    top:50%;
    margin-top:-(px2rem(8px));
    img{
      width: 100%;
      display: block;
    }
  }
}
</style>
