<template>
<div>
    <div class="contentBox qm zb"  v-if="zbList.length>0" >
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">精彩直播课</span>
        <span class="tip">在线与名师互动</span> 
        <div  class="more"></div>
        <!-- <a href="#"></a> -->
        <!-- <a  ref="zb" class="more qm">更多 <i class="iconfont icon-youjiantou"></i> </a> -->
      </div>
      <div class="content">
        <div class="contentItem qm" ref="zbitem" v-for="item in zbList" @click="goLink(item.link,'zb')">
          <img  :src="item.url"  alt="">
          <div class="text">
            <div class="title">{{item.title}}</div>
            <div class="line"></div>
            <div class="enTitle">{{item.sub_title}}</div>
            <div class="lookData"><i class="iconfont icon-yanjing"></i>{{item.watch_num}}人</div>
          </div>
        </div>
      </div>
    </div>
</div>
</template>

<script>
  import {
  bannerListApi
} from "../../service/api";
  export default {
    name: "med",
    components: {
    },
    data(){
      return{
        zbList:[],
      }
    },
    created() {
      this.getBannerListApi();
    },
    methods:{
      getBannerListApi() {
        let json = {
            limit: 999,
            page: 1
          };
        bannerListApi(5,json).then(res=>{
          this.zbList = res.list
        })
      },
      goLink(link,word){
      this.$sa.quick('trackHeatMap',this.$refs.zbitem)
        window.location.href = link
      // qmitem
    },
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .contentBox{
  padding: 20 * @toVw 20 * @toVw;
  background: white;
  margin: 10px 0;
  .commonTitle{
    display: flex;
    vertical-align: top;
    .line{height: 20px;width: 4px;border-radius:2px;margin-right: 10px;margin:auto 10px auto 0;}
    .more{height: 33px;line-height:43px;font-size: 12px;color: #666666;flex:1;text-align:right;overflow: hidden;
    .iconfont{font-size: 14px;color: #666666;}
     }
    .title{font-size: 24px;height: 33px;line-height: 33px;display: inline-block;margin-right: 10px;font-weight: bold;}
    .tip{font-size: 12px;color: #999999;height: 33px;display: inline-block;line-height: 43px;overflow: hidden;}
  }
  .lookData{font-size: 12px;
  .iconfont{font-size: 12px;}
  }
  .btn{
      width: 100%;height: 47*@toVw;background:white;color: black;line-height:47*@toVw; border-radius: 4px;border-radius:23*@toVw; margin-top: 27*@toVw;border: 2px solid black;
  }
}
.qm{
  .commonTitle{
    .line{
    background: #FF7875;
   }
  }
  .content{
    text-align: center;
    .contentItem{
    margin-top: 18 * @toVw;
    position: relative;
    box-shadow: 1 * @toVw 2 * @toVw 5 * @toVw 0 * @toVw rgba(0,0,0,0.2);
    border-radius:16 * @toVw;
    overflow: hidden;
    img{width: 335 * @toVw;height:150 * @toVw;  }
      .text{
        display: flex;
        display: -webkit-flex;
        width: 335 * @toVw;
        color: #999999;
        padding: 19 * @toVw 15 * @toVw;
        box-sizing: border-box;
        .title{font-size: 12 * @toVw;color: black;}
        .line{border-right:1 * @toVw solid #999999;height: 20 * @toVw;margin: 0 10 * @toVw; }
        .lookData{flex: 1;text-align: right;}
        .enTitle{font-size: 12 * @toVw;}
      }
    }
  }
}
.zb{
  .commonTitle{
    .line{
    background: #FFD454;
   }
  }
}
</style>