<template>
  <div class="hello">
    <div class="header">
      <div class="search">
        <input type="search" class="input" v-model="message" placeholder="请输入课程名称"/>
        <img class="searchImg" src="../../images/Shape@2x.png">
      </div>
      <div class="white gxy">高血压</div>
      <div>
        <span class="white fs30 gxyStudy">287,387人学习</span>
        <span class="white fs30">327,387人关注</span>
      </div>
      <Banner/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'header',
  components: {
  },
  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: 750px;
  height: 100%;
  background-color: #F8F8F8;
}
.white{
  color: #fff;
}
.fs30{
  font-size: 30px;
}
.gxyStudy{
  margin-right: 38px;
}
.gxy{
  font-size: 50px;
  margin: 50px 0 22px 0;
}
.header{
  width: 100%;
  height: 416px;
  background-image: url('http://pica-pro.oss-cn-shanghai.aliyuncs.com/teach/bg.png');
  padding-top: 40px;
}
.search{
  width: 580px;
  height: 60px;
  border-radius: 38px;
  background-color: #fff;
  margin: 0 auto;
}
.input{
  outline: none;
  border: none;
  float: left;
  font-size: 26px;
  margin: 12px 0 12px 30px;
  line-height: 36px;
  width: 80%;
}
.searchImg{
  width: 32px;
  height: 32px;
  margin: 16px 36px 16px 0;
  float: right;
}
.hotTag{
  width: 100%;
  height: 300px;
}
.hotTagTitle{
  font-size: 36px;
  padding: 147px 30px;
  float: left;
  background-color: #fff;
}
.cource{
  width: 100%;
  height: 700px;
}
.fontTitle{
  font-size: 36px;
  padding: 0 0 42px 30px;
  float: left;
  width: 100%;
  text-align: left;
}
.title{
  font-size: 32px;
}
.courceLeft{
  float: left;
  padding-left: 30px;
}
.needLeft{
  float: left;
  padding: 0 0 80px 30px;
}
.courceTime{
  float: left;
}
.courceImg{
  width: 340px;
  height: 192px;
  margin-bottom: 20px;
}
.courceMore{
  font-size: 30px;
  color: #999999;
}
.need{
  width: 100%;
  height: 650px;
  margin-top: 70px;
}
</style>
