<template>
  <div class="header bgWhite">
    <div v-show="isShow" class="border-bottom space-between">
      <div>
        <div class="gray keeponTitle">{{resourceData.message}}</div>
        <div>
          <span class="gray fs24 keeponRight">已学习:{{resourceData.week}} 周</span>
          <span class="gray fs24 keeponRight">剩余:{{resourceData.Remaining}}%</span>
          <span class="gray fs24 continueStudy" @click="continueStudy">继续学习></span>
        </div>
      </div>
      <div>
        <img @click="cancel" src="../../images/Shape@2x.png"/>
      </div>
    </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';
.header{
  width: 100%;
  padding: 0 px2rem(15px);
  .border-bottom{
    width: 100%;
    border-bottom: 1px solid RGBA(231, 231, 231, 1);
    padding-bottom: px2rem(10px);
  }
  .keeponTitle{
    font-size: px2rem(14px);
  }
  .continueStudy{
    color: RGBA(31, 121, 115, 1);
  }
  .keeponRight{
    margin-right: px2rem(15px);
  }
}
</style>
15px