<template>
    <div class="hotTeacher">
        <div :style="{'text-align': resourceData.direction}" class="hotTagTitle">{{resourceData.title}}</div>
        <div class="teacherItem space-between">
            <div :style="{'background-color':resourceData.item.pic1.bg}" class="category-left">
                <div class="img1-title fs14 center fw">{{resourceData.item.pic1.title}}</div>
                <div class="fs14 fw gray">{{resourceData.item.pic1.time}}</div>
                <img class="category-img-tag" :src="resourceData.item.pic1.left"/>
                <img class="category-img1" :src="right"/>
            </div>
            <div class="category-right">
                <div class="relative category-img2">
                    <div class="category-img2-title fs14">{{resourceData.item.pic2.title}}</div>
                    <img class="category-img-tag" :src="resourceData.item.pic2.left"/>
                    <img class="category-img" :src="resourceData.item.pic2.bg"/>
                </div>
                <div class="category-img3">
                    <div class="category-img2-title fs14">{{resourceData.item.pic3.title}}</div>
                    <img class="category-img-tag" :src="resourceData.item.pic3.left"/>
                    <img class="category-img" :src="resourceData.item.pic3.bg"/>
                </div>
            </div>
        </div>
    </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';
.hotTagTitle{
    font-size: px2rem(18px);
    font-weight: bold;
    margin-bottom: px2rem(15px);
}
.hotTeacher{
    width: 100%;
    background-color: #fff;
    padding: 0 px2rem(15px) px2rem(26px);
    .teacherItem{
        width: 100%;
        height: px2rem(190px);
        .category-left{
            width: px2rem(168px);
            height: px2rem(190px);
            position: relative;
            padding: px2rem(10px);
            .category-img{
                width: 100%;
                height: 100%;
            }
            .category-img1{
                width: px2rem(101px);
                height: px2rem(120px);
                position:absolute;
                bottom: 0;
                right: 0;
            }
            .category-img-tag{
                width: px2rem(55px);
                height: px2rem(17px);
                position:absolute;
                bottom: px2rem(10px);
                left: px2rem(10px);
            }
            .img1-title{
                color: RGBA(49, 125, 121, 1);
                margin: px2rem(5px) 0 px2rem(3px) 0;
            }
        }
        .category-right{
            width: px2rem(168px);
            height: px2rem(190px);
            position: relative;
            .category-img2-title{
                color: RGBA(74, 85, 102, 1);
            }
            .category-img{
                width: 100%;
                height: 100%;
            }
            .category-img-tag{
                width: px2rem(55px);
                height: px2rem(17px);
                position:absolute;
                bottom: px2rem(10px);
                left: px2rem(10px);
            }
            .category-img3{
                width: px2rem(168px);
                height: px2rem(90px);
                margin-top: px2rem(10px);
            }
            .category-img2{
                width: px2rem(168px);
                height: px2rem(90px);
            }
            .category-img2-title{
                position:absolute;
                color: RGBA(74, 85, 102, 1);
                margin: px2rem(10px);
            }
        }
        .teacherItemImg{
            width: px2rem(23px);
            height: px2rem(23px);
            border-radius: 50%;
            position: absolute;
            top: 10px;
        }
    }
}
</style>
