<template>
  <div class="hello">
    <div class="header">
      <div class="white gxy fs50">{{resourceData.title}}</div>
      <div>
        <span class="white fs30 gxyStudy">{{resourceData.studyCount}}人学习</span>
        <span class="white fs30">{{resourceData.follower}}人关注</span>
      </div>
    </div> 
  </div>
</template>

<script>
export default {
  name: 'YqyHeaderTop',
  components: {
  },
  props: {
    resourceData: {
        type: Object,
        default:()=>{
            return {
                title: '高血压',
                studyCount: 27,
                follower: 1
            }
        }
    }
  },
  watch: {
    message(val){
      console.log('val',val);
    }
  },
  data () {
    return {
      message: ''
    }
  },
  mounted(){
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
html,body{
  width: px2rem(375px);
  height: 100%;
  background-color: #F8F8F8;
}
.white{
  color: #fff;
}
.fs30{
  font-size: px2rem(15px);
}
.gxyStudy{
  margin-right: px2rem(19px);
}
.gxy{
  font-size: px2rem(25px);
  margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
  width: 100%;
  height: px2rem(213px);
  background-image: url('http://pica-pro.oss-cn-shanghai.aliyuncs.com/teach/bg.png');
}
.hotTag{
  width: 100%;
  height: px2rem(150px);
}
.hotTagTitle{
  font-size: px2rem(18px);
  padding: px2rem(73px) px2rem(15px);
  float: left;
  background-color: #fff;
}
.cource{
  width: 100%;
  height: px2rem(350px);
}
.fontTitle{
  font-size: px2rem(18px);
  padding: 0 0 px2rem(21px) px2rem(15px);
  float: left;
  width: 100%;
  text-align: left;
}
.title{
  font-size: px2rem(16px);
}
.courceLeft{
  float: left;
  padding-left: px2rem(15px);
}
.needLeft{
  float: left;
  padding: 0 0 px2rem(40px) px2rem(15px);
}
.courceTime{
  float: left;
}
.courceImg{
  width: px2rem(170px);
  height: px2rem(96px);
  margin-bottom: px2rem(10px);
}
.courceMore{
  font-size: px2rem(15px);
  color: #999999;
}
.need{
  width: 100%;
  height: px2rem(325px);
  margin-top: px2rem(35px);
}
</style>
