<template>
  <div class="audio-page">
    <div class="content" v-if="showObj.audio">
      <img :src="closeUrl" class="colse-btn" @click="close">
      <audio
        ref="audio"
        id="audioTag"
        @durationchange="canPlay"
        @play="playing()"
        :src="showObj.audio[showObj.audioIndex].link"
      ></audio>
      <div class="hp-left">
        <div class="hp-top">
          <div class="title-block">
            <div class="title">{{showObj.audio[showObj.audioIndex].title}}</div>
            <div class="tips">{{showObj.audio[showObj.audioIndex].sub_title}}</div>
          </div>
          <div :class="{'image-block':true}"  ref="imageBlock"  @click="imgPopFn">
            <img ref="imgItem" :src="showObj.audio[showObj.audioIndex].url">
          </div>
          <div>
            <div class="btn-group hp">
              <i v-if="playType===0" class="iconfont icon-icon_change1" @click="changeType()"></i>
              <i v-if="playType===1" class="iconfont icon-icon_change" @click="changeType()"></i>
              <i v-if="playType===2" class="iconfont icon-icon_changge" @click="changeType()"></i>
              <i class="iconfont icon-icon_left" @click="lastOne()"></i>
              <i class="iconfont icon-icon_stop" v-if="!playFlag" @click="onPlay"></i>
              <i class="iconfont icon-icon_begin" v-if="playFlag" @click="onStop"></i>
              <i class="iconfont icon-icon_right" @click="nextOne()"></i>
              <i class="iconfont icon-icon_list" @click="popupVisible=!popupVisible"></i>
            </div>
          </div>
        </div>
        <i v-if="sc!=1&&!hasCollect" class="iconfont icon-icon_like collect" @click="changeCollect"></i>
        <i v-if="sc!=1&&hasCollect" class="iconfont icon-icon_like1 collect" @click="changeCollect"></i>
        <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"></i> -->
        <i v-if="playType===0" class="iconfont icon-icon_change1" @click="changeType()"></i>
        <i v-if="playType===1" class="iconfont icon-icon_change" @click="changeType()"></i>
        <i v-if="playType===2" class="iconfont icon-icon_changge" @click="changeType()"></i>
        <i class="iconfont icon-icon_left" @click="lastOne()"></i>
        <i class="iconfont icon-icon_stop" v-if="!playFlag" @click="onPlay"></i>
        <i class="iconfont icon-icon_begin" v-if="playFlag" @click="onStop"></i>
        <i class="iconfont icon-icon_right" @click="nextOne()"></i>
        <i class="iconfont icon-icon_list" @click="popupVisible=!popupVisible"></i>
        <!-- <i v-if="sc==1" class="replayAll"></i> -->
        <!-- <i v-if="sc!=1" :class="{playImage:true,collectDefault:!hasCollect,collect:!!hasCollect}" @click="changeCollect"></i> -->
      </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=== showObj.audioIndex}"  v-for="(data,i) in this.showObj.audio"  @click="changeIndex(i)">
          {{data.title}}
          <i
            :class="{playImage:true,zDefaultIcon:i !== showObj.audioIndex,zIcon:i === showObj.audioIndex}"
          ></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[showObj.audioIndex].url">
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import {Popup} from 'mint-ui'
import tapToVideo from "../../assets/tapToVideo.png";
import closeUrl from "../../assets/newLesson/audio-close.png";
import {
  getUserCollectApi,
  addUserCollectApi,
  delUserCollectApi
} from "../../service/api";
export default {
  name: "fun",
  props: ["showObj", "sc"],
  components: {
    [Popup.name]:Popup
  },
  data() {
    return {
      popupVisible: false,
      collectPop: false,
      hasCollect: false,
      closeUrl: closeUrl,
      ageShow: false,
      imgPop: false,
      startTime: "00:00",
      overTime: "00:00",
      range: 0,
      tapToVideo: tapToVideo,
      playFlag: false,
      transformStatus:'',
      offset: 0,
      timer: null,
      playType: Number(localStorage.getItem("playType")) | 0
    };
  },
  mounted() {
    this.checkCollect();
    // this.onPlay();
  },
  methods: {
    // 改变收藏状态
    imgPopFn(){
      this.imgPop = true
      // console.log(this.imgPop)
    },
    changeCollect() {
      // console.log(this.hasCollect)
      if (this.hasCollect) {
        delUserCollectApi(this.hasCollect).then(res => {
          this.hasCollect = false;
          Toast("取消收藏");
          this.checkCollect();
        });
      } else {
        let json = {
          category_id: this.showObj.audio[this.showObj.audioIndex].category_id,
          type: 1,
          title: this.showObj.audio[this.showObj.audioIndex].title,
          sub_title:
            "来自于 " + this.showObj.audio[this.showObj.audioIndex].sub_title,
          url: this.showObj.audio[this.showObj.audioIndex].link,
          cover: this.showObj.audio[this.showObj.audioIndex].url
        };
        // debugger
        addUserCollectApi(json).then(res => {
          Toast("收藏成功");
          this.checkCollect();
        });
      }
    },
    // 获取收藏状态
    checkCollect() {
      // console.log(this.sc)
      if (this.sc == 0) {
        let json = {
          url: this.showObj.audio[this.showObj.audioIndex].link
        };
        getUserCollectApi(json).then(res => {
          // debugger
          this.hasCollect = res.list.length < 1 ? false : res.list[0].id;
        });
      }
    },
    // 播放音频
    onPlay() {
      // if(getComputedStyle(this.$refs.imageBlock).transform!='none'){
      //   this.$refs.imageBlock.style.transform.concat('',getComputedStyle(this.$refs.imageBlock).transform)
      // }
      
      this.$refs.audio.play();
      // swin:true
    },
    lastOne() {
      if (this.showObj.audioIndex > 0) {
        this.showObj.audioIndex--;
        this.keepPlay();
      } else if (this.playType === 0 && this.showObj.audio.length > 1) {
        this.showObj.audioIndex = this.showObj.audio.length - 1;
        this.keepPlay();
      } else {
        Toast("已经是第一首");
      }
    },
    changeIndex(i) {
      this.showObj.audioIndex = i;
      this.popupVisible = false;
      this.keepPlay();
    },
    keepPlay() {
      if (this.playFlag) {
        this.$nextTick(() => {
          this.onPlay();
        });
      } else {
        this.$nextTick(() => {
          this.onStop();
        });
      }
    },
    nextOne() {
      if (this.showObj.audioIndex < this.showObj.audio.length - 1) {
        this.showObj.audioIndex++;
        this.keepPlay();
      } else if (this.playType === 0 && this.showObj.audio.length > 1) {
        this.showObj.audioIndex = 0;
        this.keepPlay();
      } else {
        Toast("已经是最后一首");
      }
    },
    // 音频准备就绪
    canPlay() {
      let audio = this.$refs.audio;
      this.offset = Math.ceil(parseInt(audio.duration) | 0);
      this.$nextTick(() => {
        this.getDuration();
      });
    },
    // 播放中方法
    playing() {
      // console.log(220)
      let audio = this.$refs.audio;
      this.playFlag = true;
      this.$refs.imgItem.classList.add('swin')
      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() {
      this.$refs.audio.pause();
      this.playFlag = false;
      var iTransform = getComputedStyle(this.$refs.imgItem).transform;
      var cTransform = getComputedStyle(this.$refs.imageBlock).transform;
      this.$refs.imageBlock.style.transform = cTransform === 'none'
        ? iTransform
        : iTransform.concat(' ', cTransform);
      this.$refs.imgItem.classList.remove('swin');
    },
    close() {
      this.showObj.show = false;
      this.onStop();
    },
    // 播放完毕
    onOver() {
      switch (this.playType) {
        case 0:
          if (this.showObj.audioIndex < this.showObj.audio.length - 1) {
            this.showObj.audioIndex++;
          } else {
            this.showObj.audioIndex = 0;
          }
          this.$nextTick(() => {
            this.onPlay();
          });
          break;
        case 1:
          this.range = 0;
          this.$nextTick(() => {
            this.onPlay();
          });
          break;
        case 2:
          if (this.showObj.audioIndex < this.showObj.audio.length - 1) {
            this.showObj.audioIndex++;
            this.$nextTick(() => {
              this.onPlay();
            });
          } else {
            this.showObj.audioIndex = 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:
          Toast("单曲循环");
          break;
        case 2:
          Toast("顺序播放");
          break;
        case 0:
          Toast("列表循环");
          break;
      }
    }
  },
  watch: {
    "showObj.audioIndex"(value) {
      this.checkCollect();
      this.keepPlay();
    },
    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 {
  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;
  und-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;
}
.iconfont {
  color: #cccccc;
}
.icon-icon_stop {
  font-size: 50 * @toVw;
  color: #69c0ff;
}
.icon-icon_begin {
  font-size: 50 * @toVw;
  color: #69c0ff;
}
.icon-icon_left {
  height: 37 * @toVw;
  width: 37 * @toVw;
  font-size: 32 * @toVw;
  color: #69c0ff;
}
.icon-icon_right {
  height: 37 * @toVw;
  width: 37 * @toVw;
  font-size: 32 * @toVw;
  color: #69c0ff;
}
.icon-icon_list {
  font-size: 20 * @toVw;
}
.icon-icon_change1 {
  font-size: 21 * @toVw;
  width: 20 * @toVw;
}
.icon-icon_change {
  font-size: 20 * @toVw;
  width: 20 * @toVw;
}
.icon-icon_changge {
  font-size: 19 * @toVw;
  width: 20 * @toVw;
}
.hp-left {
  position: relative;
  .collect {
    position: absolute;
    right: 64 * @toVw;
    bottom: 48 * @toVw;
  }
}
.icon-icon_like1 {
  color: #ff7d77;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.swin {
  -webkit-animation: spin 8s linear 1s 5 alternate;
  animation: spin 8s linear infinite;
}
.pause {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.noanimation {
  -webkit-animation: none !important;
  animation: none !important;
}
.collect-block {
  padding: 10 * @toVw;
  border-radius: 4 * @toVw;
  background: white;
}
.colse-btn {
  position: absolute;
  top: 15 * @toVw;
  right: 15 * @toVw;
  width: 20 * @toVw;
}
.content {
  background: white;
  position: fixed;
  z-index: 2002;
  top: 0;
  left: 0;
  padding: 80px 0 0;
  box-sizing: border-box;
  // bottom: 80*@toVw;
  overflow: auto;
  margin: auto;
  display: block;
  height: 100vh;
  width: 375 * @toVw;
  border-radius: 8 * @toVw;
  text-align: center;
  .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: 999 * @toVw;
    box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
    border: 4px solid rgba(255, 255, 255, 1);
    img {
      width: 100%;
      border-radius: 999 * @toVw;
    }
  }
  .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(#69c0ff, #69c0ff) 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 {
      border: none;
      outline: none;
      -webkit-appearance: none;
      border-radius: 50%; /*外观设置为圆形*/
      height: 16 * @toVw;
      width: 16 * @toVw;
      margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
      background: #69c0ff;
    }
  }
  .btn-group {
    margin-top: 30 * @toVw;
    width: 280 * @toVw;
    display: flex;
    justify-content: space-around;
    &.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;
  }
  .icon-icon_stop {
    height: 50 * @toVw;
    width: 50 * @toVw;
    font-size: 48 * @toVw;
    color: #69c0ff;
  }
  .icon-icon_begin {
    height: 50 * @toVw;
    width: 50 * @toVw;
    font-size: 48 * @toVw;
    color: #69c0ff;
  }
  .icon-icon_left {
    height: 37 * @toVw;
    width: 37 * @toVw;
    font-size: 32 * @toVw;
    color: #69c0ff;
  }
  .icon-icon_right {
    height: 37 * @toVw;
    width: 37 * @toVw;
    font-size: 32 * @toVw;
    color: #69c0ff;
  }
  .icon-icon_list {
    font-size: 20 * @toVw;
  }
  .icon-icon_change1 {
    font-size: 21 * @toVw;
  }
  .icon-icon_change {
    font-size: 20 * @toVw;
  }
  .icon-icon_changge {
    font-size: 19 * @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: 999 * @toVw;
        box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
        border: 4px solid rgba(255, 255, 255, 1);
        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(#69c0ff, #69c0ff) 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: #69c0ff;
        }
      }
      .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: 999 * @toVw;
        box-shadow: 0px 0px 4px 0px rgba(96, 173, 240, 1);
        border: 4px solid rgba(255, 255, 255, 1);
        img {
          width: 100%;
          border-radius: 999 * @toVw;
        }
      }
      .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>
