<template>
  <div class="teach-top">
    <span class="back" @click="goBack">
      <img src="../../images/left-icon.png">
    </span>
    <div class="tc title">{{parmObj}}</div>
    <div class="tc count" v-if="isShowCount">{{studyCount.toLocaleString()}}人学习&nbsp;&nbsp;&nbsp;&nbsp;{{followCount.toLocaleString()}}人关注</div>
  </div>
</template>

<script>

export default {
  data () {
      return {
        parmObj:''
      }
  },
  props:{
      isShowCount:{
        default:false,
        type:Boolean
      },
      followCount:{
         type:Number,
        default:0
      },
      studyCount:{
        type:Number,
        default:0
      },
      statusBarHeight:{   
        type:Number,
        default:0
      },
  },
  mounted(){
   this.parmObj = this.isShowCount ? '讲师集' : '讲师之'
    ///console.log(this.followCount);
  },
 
  methods: {
    goBack(){
      this.$router.back(-1);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.teach-top{
  width: 100%;
  height: px2rem(185px);
  position: relative;
  @include bis('../../images/headerTop.png');
  .tc{
    text-align: center;
  }
  .back{
    position: absolute;
    left:px2rem(18px);
    top: px2rem(25px);
    display: inline-block;
    width: px2rem(50px);
    height: px2rem(50px);
    img{
      width: px2rem(25px);
      height: px2rem(25px);

    }
  }
  .title{
    font-size: px2rem(25px);
    color: #fff;
    padding: px2rem(55px) 0 px2rem(8px) 0;
    font-weight: 500
  }
  .count{
    font-size: px2rem(15px);
    line-height: px2rem(21px);
    color: #fff;
  }
}



</style>
