<template>
    <div class="hot-teacher">
        <div :style="{'text-align': direction}" class="title">{{title}}</div>
        <div class="teacher-item" :key="index" v-for="(item,index) in hotTeachers">
            <img class="tea-itemimg" v-lazy="item.img"/>
            <span class="tea-itemname">{{item.name}}</span>
            <span class="tea-hospital">{{item.hospital}}</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'YqyHotTeacher',
  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: '医院'
                    }
                ]
            }
        },
        direction: {
            type: String,
            default: 'left'
        },
        title: {
            type: String,
            default: '热门标签'
        }
    },
  data () {
    return {
    }
  },
  mounted(){
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.title{
    font-size: px2rem(18px);
    font-weight: bold;
}
.hot-teacher{
    width: 100%;
    background-color: #fff;
    padding: 0 px2rem(15px) px2rem(26px);
    .teacher-item{
        font-size: px2rem(13pt);
        margin: px2rem(10pt) px2rem(15pt) 0 0;
        display: inline-block;
        background-color: RGBA(244, 247, 255, 1);
        border-radius: px2rem(16px);
        padding: px2rem(8px) px2rem(10px);
        position: relative;
        .tea-itemimg{
            width: px2rem(23px);
            height: px2rem(23px);
            border-radius: 50%;
            position: absolute;
            top: 10px;
        }
        .tea-itemname{
            color: RGBA(102, 102, 102, 1);
            padding: px2rem(2px) px2rem(6px);
            font-size: px2rem(14pt);
            margin-left: px2rem(24px);
        }
        .tea-hospital{
            color: RGBA(153, 153, 153, 1);
            font-size: px2rem(12pt);
        }
    }
}
</style>
