<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>