<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">{{resourceData.message}}</div>
        <div>
          <span class="gray fs24 keepon-right">已学习:{{resourceData.week}} 周</span>
          <span class="gray fs24 keepon-right">剩余:{{resourceData.Remaining}}%</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',
  components: {
  },
  props: {
      resourceData: {
          type: Object,
          default:()=>{
              return {
                message: '动态血压监测与高血压精准治疗该如何进行',
                week: 2,
                Remaining: 2
              }
          }
      }
  },
  watch: {
  },
  data () {
    return {
      isShow: true
    }
  },
  mounted(){
  },
  methods: {
    continueStudy(){
      console.log('continueStudy');
      this.$emit('continueStudy')
    },
    cancel(){
      console.log('cancel');
      this.isShow = false;
      this.$emit('cancel')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>
