<template>
    <div class="hotTeacher">
        <div class="space-between">
            <img class="img" src="../../images/Shape@2x.png"/>
            <div @click="fiveMinutesMore" class="five-more gray fs11">更多></div>
        </div>
        <div class="teacherItem space-between" :key="index" v-for="(item,index) in hotTeachers">
            <div class="teacherItemImg">
                <img :src="item.img"/>
            </div>
            <div class="fiveText">
                <div class="teacherItemName fs14">{{item.name}}</div>
                <div class="five-tag fs11">#心动时刻</div>
                <img @click="video(index)" class="five-radio" src="../../images/Shape@2x.png"/>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'YqyFiveMinutes',
    components: {
    },
    watch: {
    },
    props: {
        hotTeachers: {
            type: Array,
            default:()=>{
                return [
                    {
                        img: '../../images/Shape@2x.png',
                        name: '原来高血压还能这么预防最有效！赶快来看看',
                        hospital: '北京大学人民医院'
                    },
                    {
                        img: '../../images/Shape@2x.png',
                        name: '蒋立新',
                        hospital: '医院'
                    },
                    {
                        img: '../../images/Shape@2x.png',
                        name: '蒋立新',
                        hospital: '医院'
                    },
                    {
                        img: '../../images/Shape@2x.png',
                        name: '蒋立新',
                        hospital: '医院'
                    }
                ]
            }
        }
    },
  data () {
    return {
    }
  },
  mounted(){
  },
  methods: {
      fiveMinutesMore(){
          console.log('fiveMinutesMore');
          this.$emit('fiveMinutesMore')
      },
      video(val){
          console.log('video',val);
          this.$emit('video')
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.hotTeacher{
    width: 100%;
    background-color: #fff;
    padding: 0 px2rem(15px) px2rem(26px);
    .img{
        width: px2rem(109px);
        height: px2rem(22px);
    }
    .five-more{
        border: 1px solid RGBA(169, 174, 183, 1);
        border-radius: px2rem(9px);
        width: px2rem(40px);
        height: px2rem(16px);
        text-align: center;
        line-height: px2rem(15px);
    }
    .teacherItem{
        width: 100%;
        height: px2rem(85px);
        position: relative;
        margin-top: px2rem(20px);
        &:not(:last-child){
            border-bottom: 1px solid RGBA(240, 240, 240, 1);
        }
        .teacherItemImg{
            width: px2rem(65px);
            height: px2rem(65px);
            border-radius: px2rem(3px);
        }
        .fiveText{
            width: px2rem(260px);
            height: px2rem(38px);
        }
        .teacherItemName{
            color: RGBA(102, 102, 102, 1);
            margin-bottom: px2rem(13px);
        }
        .five-tag{
            width: px2rem(61px);
            height: px2rem(17px);
            border-radius: 0 px2rem(3px) px2rem(3px) px2rem(3px);
            color: RGBA(191, 158, 21, 1);
            background-color: RGBA(250, 229, 175, 1);
        }
        .five-radio{
            width: px2rem(25px);
            height: px2rem(25px);
            border-radius: 50%;
            position:absolute;
            right: 0;
            top: px2rem(46px);
        }
    }
}
</style>
