<template>
  <div class="refueling1" :style="{backgroundImage:`url(${imgUrl.bg})`}">
    <div>
      <div class="bg-block">
        <img :src="imgUrl.title" class="title" >
        <img :src="nowLesson.content.banner[0].url" v-if="nowLesson.content.banner[0]" class="bg">
        <div :class="{'audio-block-ref':true}" v-if="nowLesson.content.radio[0]">
          <audio-div :src="nowLesson.content.radio[0].url" :autoPlay="true" />
        </div>
      </div>
      <div class="bottom-block">
        <img :src="imgUrl.backBtn" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="imgUrl.next" @click="goNext(nowLesson.content.nextIndex,true)"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {refueling1} from "../../util/imgUrl";
  import audioDiv from "../public/audioPlay"
  export default {
    name: "refueling1",
    props:[
      'nowLesson'
    ],
    data(){
      return{
        imgUrl:refueling1,
        audioActive:false
      }
    },
    components:{
      audioDiv
    },
    mounted(){
      window._hmt.push(['_trackPageview', '/#/PV/card']);
    },
    methods:{
      goNext(i,next){
        this.$emit('goNext',{i:i,next:!!next})
      },
    },
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .refueling1{
    background-size: 100% 100%;
    padding-top: 10 * @toVw;
    .audio-block-ref{
      width: 200 * @toVw;
      position: absolute;
      bottom: 30 * @toVw;
      left: 25 * @toVw;
      z-index: 2;
      transition: all .3s;
    }
    .bg-block{
      width: 325 * @toVw;
      background: white;
      border-radius: 8 * @toVw;
      padding: 10 * @toVw;
      position: relative;
      text-align: center;
    }
    .title{
      width: 280 * @toVw ;
    }
    .bottom-block{
      margin-top: 10 * @toVw;
      width: 100%;
      text-align: center;
      img{
        width: 127 * @toVw;
        &:first-child{
          margin-right: 10*@toVw;
        }
      }
    }
    .pageNo{
      position: absolute;
      width: 100%;
      color: #888888;
      font-size: 12px;
      left: 0;
      display: inline-block;
      text-align: center;
      bottom:0;
    }
      .bg{
        width: 100%;
      }
  }
</style>
