<template>
    <div class="hot-teacher">
        <div :style="{'text-align': resourceData.direction}" class="title">{{resourceData.title}}</div>

        <!--展示形式 左一 右二-->
        <div class="teacher-item space-between">
            <div class="category-left">
                <img class="category-img1" v-lazy="resourceData.item.pic1.right"/>
            </div>
            <div class="category-right">
                <div class="right-img">
                    <img class="category-img" v-lazy="resourceData.item.pic2.bg"/>
                </div>
                <div class="right-img mt5">
                    <img class="category-img" v-lazy="resourceData.item.pic3.bg"/>
                </div>
            </div>
        </div>
        <di class="holder-img">
            <img v-lazy="resourceData.item.pic3.bg" class="category-img"/>
        </di>
    </div>
</template>

<script>
export default {
  name: 'YqyHotTeacher',
  components: {
  },
  watch: {
  },
  props: {
    resourceData: {
        type: Object,
        default:()=>{
            return {
                title: '专题分类',
                direction: 'left',
                item: {
                    pic1:{
                        bg: 'RGBA(230, 243, 243, 1)',
                        title: '用医学知识 赢百万现金',
                        time: '每周四20:00开赛',
                        left: '../../images/Shape@2x.png',
                        right: '../../images/Shape@2x.png'
                    },
                    pic2:{
                        bg: '../../images/Shape@2x.png',
                        title: '心血管病高危人群早期筛查与综合干预',
                        left: '../../images/Shape@2x.png'
                    },
                    pic3:{
                        bg: '../../images/Shape@2x.png',
                        title: '心血管病高危人群早期筛查与综合干预',
                        left: '../../images/Shape@2x.png'
                    }
                }
            }
        }
    }
  },
  data () {
    return {
    }
  },
  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';
.title{
    font-size: px2rem(18px);
    font-weight: bold;
    margin-bottom: px2rem(15px);
}
.hot-teacher{
    width: 100%;
    margin-top: px2rem(15px);
    padding: 0 px2rem(15px) px2rem(26px);
    .teacher-item{
        width: 100%;
        height: px2rem(190px);
        .category-left{
            width: px2rem(170px);
            height: px2rem(195px); 
        }
        .category-img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .mt5{
            margin-top:  px2rem(5px);
        }
        .category-right{
            width: px2rem(170px);
            height: px2rem(190px);
            .category-img{
                width: 100%;
                height: 100%;
            }
            .right-img{
                width: px2rem(170px);
                height: px2rem(95px);
            }
            
        }
        
    }
    .holder-img{
        width: 100%;
        height: px2rem(125px);

    }
}
</style>
