<template>
    <div class="hot-teacher">
        <div class="title">
            {{title}}
        </div>
        <div class="tea-list">
            <div class="tea-listbox">
                <div class="tea-item" :key="index" v-for="(item,index) in hotTeachers">
                    <div class="head-pic">
                        <img class="tea-itemimg" src="../../images/552064153@2x.png"/>
                    </div>
                    <span class="tea-itemname">{{item.name}}</span>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    name: 'YqyHotTeacher',

    props: {
        title:{
            type:String,
            default:'云鹊名师'
        },
        hotTeachers: {
            type: Array,
            default:()=>{
                return [
                    {
                        img: '../../images/552064153@2x.png',
                        name: '蒋立新'
                    },
                    {
                        img: '../../images/head-test.png',
                        name: '蒋立新'
                    },
                    {
                       img: '../../images/head-test.png',
                        name: '蒋立新'
                    },
                    {
                        img: '../../images/head-test.png',
                        name: '蒋立新'
                    },
                    {
                        img: '../../images/head-test.png',
                        name: '蒋立新'
                    },
                    {
                        img: '../../images/head-test.png',
                        name: '蒋立新'
                    },
                    {
                        img: '../../images/head-test.png',
                        name: '蒋立新'
                    }
                ]
            }
        }
    },
  data () {
    return {
    }
  },
  mounted(){
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.hot-teacher{
    width: 100%;
    background-color: #fff;
    padding: 0 0  px2rem(26px) px2rem(15px);
    .title{
        font-size: px2rem(18px);
        padding: 0 0 px2rem(21px) px2rem(5px);
        font-weight: bold;
    }
    .tea-list{
        width: 100%;
        overflow: hidden;
        height:  px2rem(75px);
        overflow-x: scroll;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        outline: 0;
        -webkit-overflow-scrolling : touch;
    }
    .tea-listbox{
        width: 1100px;
        clear: both;
    }
    .tea-item{
        font-size: px2rem(13px);
        margin: 0 px2rem(19px) 0 0;
        display: inline-block;
       
        position: relative;
        float: left;
        text-align: center;
        .head-pic{
            background: #ECECEC;
            width: px2rem(50px);
            height: px2rem(50px);
            border-radius: 50%;
    
        }
        .tea-itemimg{
            width: px2rem(39px);
            height: px2rem(44px);
            margin-top: px2rem(6px);
            border-radius: 50%;
        }
        .tea-itemname{
            color: RGBA(102, 102, 102, 1);
            padding-top: px2rem(5px);
            font-size: px2rem(13px);
            line-height: px2rem(19px);
        }
    }
}
</style>
