<template>
<div>
    <div class="contentBox med" v-if="medList.length>0">
      <div class="commonTitle">
        <span class="line"></span>
        <span class="title">磨耳朵</span>
        <span class="tip">每天10分钟 成长看得见</span> 
        <div class="more"></div>
      </div>
      <div class="content">
        <div class="contentItem" ref="item" v-for="(item,index) in medList"  @click="goMed(index)">
          <img  :src="item.url" alt="">
          <div class="white"></div>
          <div class="text">
            <div class="title">{{item.title}}</div>
            <div class="enTitle">{{item.sub_title}}</div>
            <div class="lookData"><i class="iconfont icon-yanjing"></i>{{item.watch_num}}人</div>
          </div>
        </div>
        <div class="btn" ref="btn" @click="toOut">
          获取更多资源
        </div>
      </div>
    </div>
  <audio-page ref="audioPage" v-if="showObj.audio.length>0" sc="1" v-show="showObj.show" :showObj="showObj"/>
</div>

</template>

<script>
  import {
  bannerListApi
} from "../../service/api";
import audioPage from '../collection/audio'
  export default {
    name: "med",
    components: {
      audioPage
    },
    data(){
      return{
        medList:[],
        showObj:{
        audio:[],
        audioIndex:0,
        show:false
      },
      }
    },
    created() {
      this.getBannerListApi();
    },
    methods:{
     getBannerListApi() {
      let json = {
          limit: 999,
          page: 1
        };
      bannerListApi(2,json).then(res=>{
        this.medList = res.list
        this.showObj.audio = res.list
      })
    },
    goMed(index){
      this.showObj.audioIndex = index;
      this.showObj.show = true
      this.$refs.audioPage.onPlay()
      this.$sa.quick('trackHeatMap',this.$refs.item)
    },
    toOut(){
      this.$sa.quick('trackHeatMap',this.$refs.btn)
      window.location.href="https://wx840a79781fa6f66d.h5.xiaoe-tech.com/content_page/eyJ0eXBlIjozLCJyZXNvdXJjZV90eXBlIjoiIiwicmVzb3VyY2VfaWQiOiIiLCJwcm9kdWN0X2lkIjoicF81YmExZTc4YTcxODAyX0w4QXZxcGZpIiwiYXBwX2lkIjoiYXBwYU5RTGZrdEgzNzE3In0"
    }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .contentBox{
  padding: 10 * @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;
  }
}
.med{
  .commonTitle{
    .line{
    background: #4A90E2;
   }
  }
  .content{
    display: flex;
    text-align: center;
    flex-wrap:wrap;
    .contentItem{
    width: 50%;
    height: 191 * @toVw;
    margin-top: 18px;
    position: relative;
    img{width: 107 * @toVw;height:107 * @toVw;position: absolute;top: 0;left: 27 * @toVw;border-radius:53 * @toVw ; }
    .white{position: absolute;background: white;width: 20px;height: 20px;border-radius: 10px;top:43.5 * @toVw ; left: 70.5 * @toVw;}
    .text{
      width: 161 * @toVw;
      height: 161 * @toVw;
      margin-top: 30 * @toVw;
      color: #999999;
      padding-top: 90 * @toVw;
      box-shadow: 1px 2px 5px 0px rgba(0,0,0,0.2);
      border-radius:16px;
      box-sizing: border-box;
      .title{font-size: 14px;color: black;}
      .enTitle{font-size: 12px;line-height: 17px;}
    }
    }
  }
}
</style>
