<template>
  <div class="audio-page">
    <div class="content" v-if="showObj.audio">
      <audio ref="audio" @durationchange="canPlay" @play="playing()" :src="showObj.audio[index].url"></audio>
      <div class="hp-left">
        <div class="hp-top">
          <div class="image-block" @click="imgPop=true">
            <img :src="showObj.audio[index].image">
          </div>
          <div>
            <div class="title-block">
              <div class="title">
                {{showObj.audio[index].title}}
              </div>
              <div class="tips">
                {{showObj.audio[index].tips}}
              </div>
            </div>
            <div class="btn-group hp">
              <i class="playImage list" @click="popupVisible=!popupVisible"></i>
              <i class="playImage last" @click="lastOne()"></i>
              <i class="playImage play" v-if="!playFlag" @click="onPlay"></i>
              <i class="playImage stop" v-if="playFlag" @click="onStop"></i>
              <i class="playImage next" @click="nextOne()"></i>
              <i :class="{playImage:true,replay:playType===1,replayAll:playType===0,listPlay:playType==2}" @click="changeType()"></i>
            </div>
          </div>
        </div>
        <div class="range-block">
          <div class="time-block">
            <div class="left-time">{{startTime}}</div>
            <div class="right-time">{{overTime}}</div>
          </div>
          <input type="range" min="0" :max="offset" v-model="range" :style="{backgroundSize:`${offset?range/offset*100:0}% 100%`}"/>
        </div>
      </div>
      <div class="btn-group">
        <i class="playImage toBig" @click="imgPop=true;sendConsole('放大图片')"></i>
        <i class="playImage list" @click="popupVisible=!popupVisible;sendConsole('展开列表')"></i>
        <i class="playImage last" @click="lastOne()"></i>
        <i class="playImage play" v-if="!playFlag" @click="onPlay(true)"></i>
        <i class="playImage stop" v-if="playFlag" @click="onStop(true)"></i>
        <i class="playImage next" @click="nextOne(true)"></i>
        <i :class="{playImage:true,replay:playType===1,replayAll:playType===0,listPlay:playType==2}" @click="changeType()"></i>
        <i :class="{playImage:true,collectDefault:!hasCollect,collect:!!hasCollect}" @click="changeCollect"></i>
      </div>
      <div class="btn-block">
        <div v-if="contentData.content.age" class="age-block" @click="ageShow = !ageShow">
          <div v-if="contentData.age === 1">0-3岁<i class="playImage _154722344142123489"></i></div>
          <div v-if="contentData.age === 2">4-6岁<i class="playImage _154722344142123489"></i></div>
        </div>
        <div class="age-change-block" v-show="ageShow" v-if="contentData.content.age">
          <div @click="contentData.age = 1;sendConsole('选择分龄')">0-3岁<i class="playImage _282918034425091245" v-if="contentData.age === 1"></i></div>
          <div @click="contentData.age = 2;sendConsole('选择分龄')">4-6岁<i class="playImage _282918034425091245" v-if="contentData.age === 2"></i></div>
        </div>
        <div v-if="showObj.change" class="change-block-HP" @click="contentData.type = 'video';sendConsole('切换视频教学')">
          <div class="">
            <img :src="tapToVideo"/>
          </div>
        </div>
        <div v-if="showObj.change" class="change-block">
          <div @click="contentData.type = 'video';sendConsole('切换视频教学')">视频教学</div>
          <div class="active" >音频教学</div>
        </div>
      </div>
    </div>
    <mt-popup
      v-model="popupVisible"
      position="bottom" style="background: transparent">
      <div class="list-popup"  v-if="showObj.audio">
        <div :class="{'list-block':true,active:i=== index}" v-for="(data,i) in this.showObj.audio" @click="changeIndex(i);sendConsole('列表选择音频')">
          {{data.title}}
          <i :class="{playImage:true,zDefaultIcon:i !== index,zIcon:i === index}"></i>
        </div>
        <div class="close-btn" @click="popupVisible=false">
          关闭
        </div>
      </div>
    </mt-popup>
    <mt-popup
      v-model="imgPop"
      style="background: transparent">
      <div class="imgPop-block"  v-if="showObj.audio">
        <img :src="showObj.audio[index].image"/>
      </div>
    </mt-popup>
    <guide-block/>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import guideBlock from '../guide/audio'
  import tapToVideo from '../../assets/tapToVideo.png'
  import {getUserCollectApi,addUserCollectApi,delUserCollectApi} from "../../service/api";
  export default {
    name: "fun",
    props:[
      'contentData'
    ],
    components:{
      guideBlock
    },
    data(){
      return{
        popupVisible:false,
        collectPop:false,
        index:0,
        hasCollect:false,
        ageShow:false,
        imgPop:false,
        startTime:'00:00',
        overTime:'00:00',
        range:0,
        showObj:{
          audio:null,
          change:false
        },
        tapToVideo:tapToVideo,
        playFlag:false,
        offset:0,
        timer:null,
        playType:Number(localStorage.getItem('playType'))|0
      }
    },
    mounted(){
      this.changeAge(this.contentData.age);
      this.checkCollect();
    },
    methods:{
      sendConsole(data){
        this.$sa.track('watchClick',{
          buttonName:data,
          partName:this.contentData.partName,
          elementID:this.$route.query.elementId.toString(),
        });
      },
      // 改变收藏状态
      changeCollect(){
        if(this.hasCollect){
          // 神策埋点 点击操作
          this.$sa.track('watchClick',{
            buttonName:'取消收藏',
            partName:this.contentData.partName,
            elementID:this.$route.query.elementId.toString(),
          });
          delUserCollectApi(this.hasCollect).then(res=>{
            this.hasCollect = false;
            Toast('取消收藏');
            this.checkCollect()
          })
        }else{
          // 神策埋点 点击操作
          this.$sa.track('watchClick',{
            buttonName:'添加收藏',
            partName:this.contentData.partName,
            elementID:this.$route.query.elementId.toString(),
          });
          let lessonDetail = JSON.parse(localStorage.getItem('lessonDetail'));
          let json = {
            category_id:lessonDetail.id,
            type:1,
            title:this.showObj.audio[this.index].title,
            sub_title:'来自于 '+lessonDetail.title,
            url:this.showObj.audio[this.index].url,
            cover:this.showObj.audio[this.index].image
          };
          addUserCollectApi(json).then(res=>{
            Toast('收藏成功,快去主页磨耳朵看一看吧');
            this.checkCollect()
          }).catch(this.checkCollect())
        }
      },
      // 获取收藏状态
      checkCollect(){
        let json ={
          url:this.showObj.audio[this.index].url
        };
        getUserCollectApi(json).then(res=>{
          this.hasCollect = res.list.length<1? false : res.list[0].id
        })
      },
      // 播放音频
      onPlay(flag){
        if(flag){
          // 神策埋点 点击操作
          this.$sa.track('watchClick',{
            buttonName:'播放音频',
            partName:this.contentData.partName,
            elementID:this.$route.query.elementId.toString(),
          });
        }
        this.$refs.audio.play();
      },
      lastOne(){
        this.$sa.track('watchClick',{
          buttonName:'上一首',
          partName:this.contentData.partName,
          elementID:this.$route.query.elementId.toString(),
        });
        if(this.index > 0){
          this.index --;
          this.keepPlay()
        }else if(this.playType === 0 && this.showObj.audio.length > 1){
          this.index = this.showObj.audio.length-1;
          this.keepPlay()
        }else{
          Toast('已经是第一首');

        }
      },
      changeIndex(i){
        this.index = i;
        this.popupVisible = false;
        this.keepPlay()
      },
      keepPlay(){
        if(this.playFlag){
          this.$nextTick(()=>{
            this.onPlay()
          })
        }else{
          this.$nextTick(()=>{
            this.onStop()
          })
        }
      },
      nextOne(flag){
        if(flag){
          // 神策埋点 点击操作
          this.$sa.track('watchClick',{
            buttonName:'下一首',
            partName:this.contentData.partName,
            elementID:this.$route.query.elementId.toString(),
          });
        }
        if(this.index < this.showObj.audio.length-1){
          this.index ++;
          this.keepPlay()
        }else if(this.playType === 0 && this.showObj.audio.length > 1){
          this.index = 0;
          this.keepPlay()
        }else{
          Toast('已经是最后一首');
        }
      },
      // 音频准备就绪
      canPlay(){
        let audio = this.$refs.audio;
        this.offset = Math.ceil(parseInt(audio.duration)|0);
        this.$nextTick(()=>{
          this.getDuration()
        })
      },
      // 播放中方法
      playing(){
        let audio = this.$refs.audio;
        this.playFlag = true;
        this.timer = setInterval(() => {
          let min = null;
          if(parseInt(audio.currentTime / 60)<10){
            min = '0' + parseInt(audio.currentTime / 60)
          }else{
            min = parseInt(audio.currentTime / 60)
          }
          let sec = parseInt(audio.currentTime % 60);
          if (sec < 10) {
            sec = "0" + sec;
          }
          this.startTime = min + ':' + sec;   /*  00:00  */
          this.range = parseInt(audio.currentTime);
          if(this.range === this.offset && this.offset !== 0) {
            this.range=0;/*播放结束后进度条归零*/
            this.startTime='00:00'; /*播放结束后时间归零*/
            this.onOver();
            clearInterval(this.timer)
          }
        }, 1000)
      },
      // 暂停计时器
      stopTime(){
        clearInterval(this.timer);
      },
      // 获取音频总长度
      getDuration(){
        let min = null;
        if(this.offset === 0 ){
          this.overTime = '正在加载中...'
        }else{
          if(parseInt(this.offset / 60)<10){
            min = '0' + parseInt(this.offset / 60)
          }else{
            min = parseInt(this.offset / 60)
          }
          let sec = parseInt(this.offset % 60);
          if (sec < 10) {
            sec = "0" + sec;
          }
          this.overTime = min + ':' + sec;   /*  00:00  */
        }

      },
      // 播放暂停
      onStop(flag){
        if(flag){
          // 神策埋点 点击操作
          this.$sa.track('watchClick',{
            buttonName:'暂停播放',
            partName:this.contentData.partName,
            elementID:this.$route.query.elementId.toString(),
          });
        }
        this.$refs.audio.pause();
        this.playFlag = false
      },
      // 播放完毕
      onOver(){
        switch (this.playType) {
          case 0:
            if(this.index < this.showObj.audio.length-1){
              this.index++
            }else{
              this.index=0
            }
            this.$nextTick(()=>{
              this.onPlay()
            });
            break;
          case 1:
            this.range = 0;
            this.$nextTick(()=>{
              this.onPlay()
            });
            break;
          case 2:
            if(this.index < this.showObj.audio.length-1){
              this.index++;
              this.$nextTick(()=>{
                this.onPlay()
              });
            }else{
              this.index=0;
              this.$nextTick(()=>{
                this.onStop()
              });
            }
        }
      },
      // 改变循环状态
      changeType(){
        this.playType < 2 ? this.playType++ :this.playType =0;
        window.localStorage.setItem('playType',this.playType);
        switch (this.playType) {
          case 1:
            // 神策埋点 点击操作
            this.$sa.track('watchClick',{
              buttonName:'单曲循环',
              partName:this.contentData.partName,
              elementID:this.$route.query.elementId.toString(),
            });
            Toast('单曲循环');
            break;
          case 2:
            // 神策埋点 点击操作
            this.$sa.track('watchClick',{
              buttonName:'顺序播放',
              partName:this.contentData.partName,
              elementID:this.$route.query.elementId.toString(),
            });
            Toast('顺序播放');
            break;
          case 0:
            // 神策埋点 点击操作
            this.$sa.track('watchClick',{
              buttonName:'列表循环',
              partName:this.contentData.partName,
              elementID:this.$route.query.elementId.toString(),
            });
            Toast('列表循环');
            break
        }
      },
      changeAge(value){
        if(this.contentData.content.age && value === 2){
          this.showObj = {
            audio:this.contentData.content.audio2,
            change:this.contentData.content.change2
          }
        }else{
          this.showObj = {
            audio:this.contentData.content.audio,
            change:this.contentData.content.change
          }
        }
        this.playFlag = false;
        this.startTime='00:00';
        this.overTime='00:00'
      }
    },
    watch:{
      'contentData':{
        handler:function() {   //特别注意，不能用箭头函数，箭头函数，this指向全局
          this.changeAge(this.contentData.age);
          this.index = 0;
          this.checkCollect()
        },
        deep: true
      },
      'index'(value){
        this.checkCollect();
      },
      'range'(value,value2){
        let audio = this.$refs.audio;
        if(Math.abs(value - value2) > 2){
          this.timer = setInterval(() => {
            let min = null;
            if(parseInt(audio.currentTime / 60)<10){
              min = '0' + parseInt(audio.currentTime / 60)
            }else{
              min = parseInt(audio.currentTime / 60)
            }
            let sec = parseInt(audio.currentTime % 60);
            if (sec < 10) {
              sec = "0" + sec;
            }
            this.startTime = min + ':' + sec;   /*  00:00  */
            this.range = parseInt(audio.currentTime);
            if(this.range == this.offset && this.offset !== 0) {
              this.range=0;/*播放结束后进度条归零*/
              this.startTime='00:00'; /*播放结束后时间归零*/
              this.onOver();
              clearInterval(this.timer)
            }
          }, 1000);
          audio.currentTime = value;
        }
      }
    },
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .playImage{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/imgPlayAudio.png')  no-repeat;background-size:40*@toVw 290*@toVw;display: inline-block}
  ._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 0;}
  ._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 -8*@toVw;vertical-align: bottom}
  .next{height:16*@toVw;width:16*@toVw;background-position:0 -13*@toVw;}
  .listPlay{height:16*@toVw;width:16*@toVw;background-position:0 -29*@toVw;}
  .replay{height:16*@toVw;width:16*@toVw;background-position:0 -45*@toVw;}
  .toBig{height:16*@toVw;width:16*@toVw;background-position:0 -61*@toVw;}
  .replayAll{height:16*@toVw;width:16*@toVw;background-position:0 -77*@toVw;}
  .collectDefault{height:16*@toVw;width:16*@toVw;background-position:0 -93*@toVw;}
  .collect{height:16*@toVw;width:16*@toVw;background-position:0 -109*@toVw;}
  .last{height:16*@toVw;width:16*@toVw;background-position:0 -125*@toVw;}
  .list{height:16*@toVw;width:16*@toVw;background-position:0 -141*@toVw;}
  .close{height:17*@toVw;width:17*@toVw;background-position:0 -157*@toVw;}
  .zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -174*@toVw;float: right}
  .zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -192*@toVw;float: right;}
  .play{height:40*@toVw;width:40*@toVw;background-position:0 -210*@toVw;}
  .stop{height:40*@toVw;width:40*@toVw;background-position:0 -250*@toVw;}
  .collect-block{
    padding: 10*@toVw;
    border-radius: 4*@toVw;
    background: white;
  }
  .content{
    background: white;
    width: 315*@toVw;
    position: absolute;
    top: 80*@toVw;
    left: 20*@toVw;
    right: 20*@toVw;
    bottom: 20*@toVw;
    overflow: auto;
    margin: auto;
    display: block;
    border-radius: 8*@toVw;
    text-align: center;
    padding: 10*@toVw;
    .image-block{
      width: 188*@toVw;
      height: 188*@toVw;
      margin-top: 20*@toVw;
      box-shadow: 0 0 30*@toVw 5*@toVw #ddd;
      overflow: hidden;
      border-radius: 8*@toVw;
      img{
        width: 100%;
      }
    }
    .title-block{
      margin-top: 24*@toVw;
      .title{
        font-size:16*@toVw;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(102,102,102,1);
      }
      .tips{
        font-size:14*@toVw;
        margin-top: 6*@toVw;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
      }
    }
    .range-block{
      width: 250 * @toVw;
      margin-top: 16*@toVw;
      .time-block{
        font-size:12*@toVw;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(102,102,102,1);
        text-align: left;
        &:after{
          content: '';
          display: block;

          clear: both;
        }
        .left-time{
          float: left;
        }
        .right-time{
          float: right;
        }
      }
      input[type=range] {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-appearance: none;
        background: -webkit-linear-gradient(#49E2A5, #49E2A5) no-repeat,#D8D8D8;
        background-size: 75% 100%;/*设置左右宽度比例*/
        width: 100%;
        border-radius: 10*@toVw; /*这个属性设置使填充进度条时的图形为圆角*/
      }
      input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
      }
      input[type=range]::-webkit-slider-runnable-track {
        height: 4*@toVw;
        border-radius: 2*@toVw ;
      }
      input[type=range]:focus {
        outline: none;
      }
      input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border-radius: 50%; /*外观设置为圆形*/
        height: 16*@toVw;
        width:  16*@toVw;
        margin-top: -6*@toVw; /*使滑块超出轨道部分的偏移量相等*/
        background: #49E2A5;
      }
    }
    .btn-group{
      margin-top: 30*@toVw;
      width: 280*@toVw;
      display: flex;
      &.hp{
        display: none;
      }
    }
  }
  .list-popup{
    width: 375*@toVw;
    max-height: 345*@toVw;
    overflow: auto;
    border-radius: 8*@toVw 8*@toVw 0 0;
    background: white;
    padding-top: 20*@toVw;
    .list-block{
      display: block;
      width: auto;
      margin: 0 20*@toVw;
      padding:12*@toVw 36*@toVw;
      border-bottom: 1*@toVw solid #dddddd;
      &.active{
        color: #49E2A5;
      }
    }
    .close-btn{
      text-align: center;
      padding: 20*@toVw;
    }
  }
  .imgPop-block{
    max-height: 500*@toVw;
    overflow: auto;
    img{
      max-width: 300*@toVw;
    }
  }
  .btn-block{
    position: relative;
    margin-top: 28*@toVw;
    text-align: center;
    .age-block{
      height: 28*@toVw;
      line-height: 28*@toVw;
      border: 1*@toVw solid #666;
      position: absolute;
      padding: 0 13*@toVw;
      border-radius: 100*@toVw;
      font-size:12*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(102,102,102,1);
    }
    .age-change-block{
      position: absolute;
      top: 37*@toVw;
      left: 0;
      width: 66*@toVw;
      border-radius: 8*@toVw;
      border: 1*@toVw solid #666666;
      font-size:12*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
      color:rgba(102,102,102,1);
      &>div{
        padding: 6*@toVw 11*@toVw;
        text-align: left;
        &:first-child{
          border-bottom: 1*@toVw solid #eee;
        }
      }
    }
    .change-block{
      border-radius: 1000*@toVw;
      width: 144*@toVw;
      border:1*@toVw solid #40A9FF;
      &:after{
        content: '';
        display: block;
        clear: both;
      }
      div{
        float: left;
        width: 50%;
        border-radius: 100*@toVw;
        font-size:12*@toVw;
        height: 28*@toVw;
        line-height: 28*@toVw;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(204,204,204,1);
        &.active{
          background: #40A9FF;
          color: white;
        }
      }
    }
  }
  .change-block-HP{
    display: none;
  }

  @media screen and (orientation: landscape) {
    @toVw:100/667vw;
    .playImage{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2')  no-repeat;background-size:40*@toVw 225*@toVw;display: inline-block}
    ._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 0;}
    ._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 -4*@toVw;vertical-align: bottom}
    .last{height:16*@toVw;width:16*@toVw;background-position:0 -13*@toVw;}
    .listPlay{height:16*@toVw;width:16*@toVw;background-position:0 -29*@toVw;}
    .replay{height:16*@toVw;width:16*@toVw;background-position:0 -45*@toVw;}
    .next{height:16*@toVw;width:16*@toVw;background-position:0 -61*@toVw;}
    .replayAll{height:16*@toVw;width:16*@toVw;background-position:0 -77*@toVw;}
    .list{height:16*@toVw;width:16*@toVw;background-position:0 -93*@toVw;}
    .zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -109*@toVw; float: right}
    .zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -127*@toVw;; float: right}
    .play{height:40*@toVw;width:40*@toVw;background-position:0 -145*@toVw;}
    .stop{height:40*@toVw;width:40*@toVw;background-position:0 -185*@toVw;}

    .audio-page{
      position: absolute;
      top: 5*@toVw;
      bottom: 5*@toVw;
      left: 5*@toVw;
      right: 5*@toVw;
      overflow: auto;
      border-radius:8*@toVw;
      .content{
        position: static;
        height: 100%;
        width: 100%;
        display: flex;
        border-radius: 8*@toVw;
        padding: 0;
        .hp-left{
          flex: 1;
          margin-right: 20*@toVw;
          .hp-top{
            display: flex;
            width: 100%;
          }
        }
        .image-block{
          width: 150*@toVw;
          height: 150*@toVw;
          box-shadow: 0 0 30*@toVw 5*@toVw #ddd;
          overflow: hidden;
          display: block;
          margin: auto;
          border-radius: 8*@toVw;
          img{
            width: 100%;
          }
        }
        .title-block{
          margin-top: 24*@toVw;
          .title{
            font-size:16*@toVw;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(102,102,102,1);
          }
          .tips{
            font-size:14*@toVw;
            margin-top: 6*@toVw;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
        }
        .range-block{
          width: auto;
          margin-top: 16*@toVw;
          .time-block{
            font-size:12*@toVw;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(102,102,102,1);
            text-align: left;
            &:after{
              content: '';
              display: block;
              clear: both;
            }
            .left-time{
              float: left;
            }
            .right-time{
              float: right;
            }
          }
          input[type=range] {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-appearance: none;
            background: -webkit-linear-gradient(#49E2A5, #49E2A5) no-repeat,#D8D8D8;
            background-size: 75% 100%;/*设置左右宽度比例*/
            width: 100%;
            border-radius: 10*@toVw; /*这个属性设置使填充进度条时的图形为圆角*/
          }
          input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
          }
          input[type=range]::-webkit-slider-runnable-track {
            height: 4*@toVw;
            border-radius: 2*@toVw ;
          }
          input[type=range]:focus {
            outline: none;
          }
          input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            border-radius: 50%; /*外观设置为圆形*/
            height: 16*@toVw;
            width:  16*@toVw;
            margin-top: -6*@toVw; /*使滑块超出轨道部分的偏移量相等*/
            background: #49E2A5;
          }
        }
        .btn-group{
          margin-top: 15vh;
          display: none;
          width: 200*@toVw;
          &.hp{
            display: flex;
          }
        }
      }
      .list-popup{
        width: 375*@toVw;
        max-height: 345*@toVw;
        overflow: auto;
        border-radius: 8*@toVw 8*@toVw 0 0;
        background: white;
        padding-top: 20*@toVw;
        .list-block{
          display: block;
          width: auto;
          margin: 0 20*@toVw;
          padding:12*@toVw 36*@toVw;
          border-bottom: 1*@toVw solid #dddddd;
          &.active{
            color: #49E2A5;
          }
        }
        .close-btn{
          text-align: center;
          padding: 20*@toVw;
        }
      }
      .imgPop-block{
        max-height: 500*@toVw;
        overflow: auto;
        img{
          max-width: 300*@toVw;
        }
      }
      .btn-block{
        position:relative;
        min-width:90*@toVw ;
        margin-top: 0;
        display: block;
        height: 100%;
        .age-block{
          display: block;
          position: static;
          padding: 0;
          height: 28*@toVw;
          width: 88*@toVw;
          line-height: 28*@toVw;
          border: 1*@toVw solid #666;
          border-radius: 100*@toVw;
          font-size:12*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(102,102,102,1);
        }
        .age-change-block{
          position: static;
          width: 80*@toVw;
          margin-top: 10*@toVw;
          border-radius: 8*@toVw;
          border: 1*@toVw solid #666666;
          font-size:12*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(102,102,102,1);
          &>div{
            padding: 6*@toVw 11*@toVw;
            text-align: left;
            &:first-child{
              border-bottom: 1*@toVw solid #eee;
            }
          }
        }
        .change-block-HP{
          position: absolute;
          top: ~"calc(100vh - 12.5vw)";
          display: block;
          width: 78*@toVw;
          img{
            width: 100%;
          }
        }
        .change-block{
          display: none;
        }
      }
    }
  }
  @media screen and (min-aspect-ratio: ~"20/8"){
    @toVw:100/900vw;
    .playImage{background:url('https://static-cdn.changchangenglish.com/new-sing/static/images/playImage.png?v=2')  no-repeat;background-size:40*@toVw 225*@toVw;display: inline-block}
    ._154722344142123489{height:5*@toVw;width:9*@toVw;background-position:0 0;}
    ._282918034425091245{height:8*@toVw;width:9*@toVw;background-position:0 -4*@toVw;vertical-align: bottom}
    .last{height:16*@toVw;width:16*@toVw;background-position:0 -13*@toVw;}
    .listPlay{height:16*@toVw;width:16*@toVw;background-position:0 -29*@toVw;}
    .replay{height:16*@toVw;width:16*@toVw;background-position:0 -45*@toVw;}
    .next{height:16*@toVw;width:16*@toVw;background-position:0 -61*@toVw;}
    .replayAll{height:16*@toVw;width:16*@toVw;background-position:0 -77*@toVw;}
    .list{height:16*@toVw;width:16*@toVw;background-position:0 -93*@toVw;}
    .zDefaultIcon{height:18*@toVw;width:18*@toVw;background-position:0 -109*@toVw; float: right}
    .zIcon{height:18*@toVw;width:18*@toVw;background-position:0 -127*@toVw;; float: right}
    .play{height:40*@toVw;width:40*@toVw;background-position:0 -145*@toVw;}
    .stop{height:40*@toVw;width:40*@toVw;background-position:0 -185*@toVw;}

    .audio-page{
      position: absolute;
      top: 5*@toVw;
      bottom: 5*@toVw;
      left: 5*@toVw;
      right: 5*@toVw;
      overflow: auto;
      border-radius:8*@toVw;
      .content{
        position:static;
        height: 100%;
        width: 100%;
        display: flex;
        border-radius: 8*@toVw;
        padding: 0;
        .hp-left{
          flex: 1;
          margin-right: 20*@toVw;
          .hp-top{
            display: flex;
            width: 100%;
          }
        }
        .image-block{
          width: 150*@toVw;
          height: 150*@toVw;
          box-shadow: 0 0 30*@toVw 5*@toVw #ddd;
          overflow: hidden;
          display: block;
          margin: auto;
          border-radius: 8*@toVw;
          img{
            width: 100%;
          }
        }
        .title-block{
          margin-top: 24*@toVw;
          .title{
            font-size:16*@toVw;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(102,102,102,1);
          }
          .tips{
            font-size:14*@toVw;
            margin-top: 6*@toVw;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(153,153,153,1);
          }
        }
        .range-block{
          width: auto;
          margin-top: 16*@toVw;
          .time-block{
            font-size:12*@toVw;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(102,102,102,1);
            text-align: left;
            &:after{
              content: '';
              display: block;
              clear: both;
            }
            .left-time{
              float: left;
            }
            .right-time{
              float: right;
            }
          }
          input[type=range] {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-appearance: none;
            background: -webkit-linear-gradient(#49E2A5, #49E2A5) no-repeat,#D8D8D8;
            background-size: 75% 100%;/*设置左右宽度比例*/
            width: 100%;
            border-radius: 10*@toVw; /*这个属性设置使填充进度条时的图形为圆角*/
          }
          input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
          }
          input[type=range]::-webkit-slider-runnable-track {
            height: 4*@toVw;
            border-radius: 2*@toVw ;
          }
          input[type=range]:focus {
            outline: none;
          }
          input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            border-radius: 50%; /*外观设置为圆形*/
            height: 16*@toVw;
            width:  16*@toVw;
            margin-top: -6*@toVw; /*使滑块超出轨道部分的偏移量相等*/
            background: #49E2A5;
          }
        }
        .btn-group{
          margin-top: 15vh;
          display: none;
          width: 200*@toVw;
          &.hp{
            display: flex;
          }
        }
      }
      .list-popup{
        width: 375*@toVw;
        max-height: 345*@toVw;
        overflow: auto;
        border-radius: 8*@toVw 8*@toVw 0 0;
        background: white;
        padding-top: 20*@toVw;
        .list-block{
          display: block;
          width: auto;
          margin: 0 20*@toVw;
          padding:12*@toVw 36*@toVw;
          border-bottom: 1*@toVw solid #dddddd;
          &.active{
            color: #49E2A5;
          }
        }
        .close-btn{
          text-align: center;
          padding: 20*@toVw;
        }
      }
      .imgPop-block{
        max-height: 500*@toVw;
        overflow: auto;
        img{
          max-width: 300*@toVw;
        }
      }
      .btn-block{
        position:relative;
        min-width:90*@toVw ;
        margin-top: 0;
        display: block;
        height: 100%;
        .age-block{
          display: block;
          position: static;
          padding: 0;
          height: 28*@toVw;
          width: 88*@toVw;
          line-height: 28*@toVw;
          border: 1*@toVw solid #666;
          border-radius: 100*@toVw;
          font-size:12*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(102,102,102,1);
        }
        .age-change-block{
          position: static;
          width: 80*@toVw;
          margin-top: 10*@toVw;
          border-radius: 8*@toVw;
          border: 1*@toVw solid #666666;
          font-size:12*@toVw;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(102,102,102,1);
          &>div{
            padding: 6*@toVw 11*@toVw;
            text-align: left;
            &:first-child{
              border-bottom: 1*@toVw solid #eee;
            }
          }
        }
        .change-block-HP{
          position: absolute;
          top: ~"calc(100vh - 12.5vw)";
          display: block;
          width: 78*@toVw;
          img{
            width: 100%;
          }
        }
        .change-block{
          display: none;
        }
      }
    }
  }
</style>