<template>
  <div class="space-between header">
    <div :class="resourceData.isTransparent?'search-transparent':'bgWhite'" class="search">
      <input type="search" :class="resourceData.isTransparent?'search-transparent':''" class="input" v-model="message" :placeholder="resourceData.placeholder"/>
      <img class="search-img" src='../../images/Group2@2x.png'>
    </div>
    <div class="header-right">
      <img class="info" src='../../images/msg1.png'>
      <div :class="resourceData.isTransparent?'transparent':'not-transparent'" class="info-count fs10">{{resourceData.count}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'header',
  data(){
    return {
            
    }
  },
  components: {
  },
  props: {
      resourceData: {
          type: Object,
          default:()=>{
              return {
                isTransparent: true,
                placeholder: '请输入课程名称',
                img: '../../images/msg1.png',
                count: "10"
              }
          }
      }
  },
  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;
}
.search-transparent{
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}
.search-transparent::-webkit-input-placeholder{ 
    color:    #fff;
}
.white{
  color: #fff;
}
.header-right{
  width: px2rem(30px);
  height: px2rem(30px);
  position: relative;
}
.fs30{
  font-size: px2rem(15px);
}
.gxy-study{
  margin-right: px2rem(19px);
}
.gxy{
  font-size: px2rem(25px);
  margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
  width: 100%;
  padding: 0 px2rem(25px) 0 px2rem(15px);
  position: relative;
}
.search{
  width: px2rem(290px);
  height: px2rem(30px);
  border-radius: px2rem(19px);
}
.input{
  outline: none;
  border: none;
  float: left;
  font-size: px2rem(13px);
  margin: px2rem(6px) 0 px2rem(6px) px2rem(15px);
  line-height: px2rem(18px);
  width: 80%;
}
.search-img{
  width: px2rem(16px);
  height: px2rem(16px);
  margin: px2rem(6px) px2rem(15px) px2rem(9px) 0;
  float: right;
}
.info{
  width: px2rem(20px);
  height: px2rem(20px);
}
.info-count{
  position:absolute;
  top: 0;
  left: px2rem(21px);
  /*width: px2rem(15px);*/
  padding:0 px2rem(3px);
  height: px2rem(15px);
  border-radius: 50%;
  text-align: center;
  line-height: px2rem(15px);
}
.transparent{
  background-color: #fff;
  color: RGBA(53, 134, 126, 1);
}
.not-transparent{
  background-color: RGBA(251, 91, 82, 1);
  color: #fff;
}
.hot-tag{
  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);
}
.font-title{
  font-size: px2rem(18px);
  padding: 0 0 px2rem(21px) px2rem(15px);
  float: left;
  width: 100%;
  text-align: left;
}
.title{
  font-size: px2rem(16px);
}
.cource-left{
  float: left;
  padding-left: px2rem(15px);
}
.need-left{
  float: left;
  padding: 0 0 px2rem(40px) px2rem(15px);
}
.cource-time{
  float: left;
}
.cource-img{
  width: px2rem(170px);
  height: px2rem(96px);
  margin-bottom: px2rem(10px);
}
.cource-more{
  font-size: px2rem(15px);
  color: #999999;
}
.need{
  width: 100%;
  height: px2rem(325px);
  margin-top: px2rem(35px);
}
</style>
