舞蹈分页

闫增涛

2024-06-05 3fb594dc317848107fd7bbb51631cfb763c19f5f

舞蹈分页

 src/App.vue

@@ -72,7 +72,7 @@
        // embedded
        // english
        // artAndDance
        this.config.resourceCtx + "childHealth"
        this.config.resourceCtx + "artAndDance"
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/assets/methods/resources.js

@@ -4,8 +4,8 @@
  await fileApi.getAliVod({
    md5,appRefCode
  }).then(res => {
    if(res.data.length) {
      path =  res.data
    if(typeof res == 'string') {
      path =  res
    } else {
      path =   process.env.VUE_APP_API_URL + '/file/api/ApiDownload?md5=' + md5
    }

 src/books/English/view/components/chapter001.vue

@@ -514,9 +514,9 @@
                corresponding descriptions.</b
              >
            </p>
            <p class="center">
            <!-- <p class="center">
              <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
            </p>
            </p> -->
            <div>
              <ul class="fl ju-bt">
                <li>Speakers　Chinese Cultural Symbols</li>

 src/books/English/view/components/index.vue

@@ -18,7 +18,11 @@
        :showPageList="loadPageList"
      ></chapterOne>
    </div>
    <miniAudio :path="audioPath"></miniAudio>
    <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      ref="audioPlayer"
    ></miniAudio>
  </div>
</template>

@@ -47,7 +51,9 @@
      loadPageList: [],
      questionData: {},
      renderSignMap: {},
      audioPath:''
      audioPath: "",
      currentTime: null,
      videoList: [],
    };
  },
  computed: {
@@ -82,7 +88,7 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.getAduio();
          // this.getAduio();
        }, 200);
      },
    },
@@ -160,6 +166,7 @@
    scrollFun(event) {
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        this.getAduio();
        // 向下
        const currentScrollTop =
          event.target.scrollTop + event.target.offsetHeight;
@@ -183,6 +190,7 @@
          }
        }
      } else if (event.target.scrollTop < this.previousScrollTop) {
        this.handleAudio();
        // 向上
        const currentScrollTop = event.target.scrollTop;
        if (currentScrollTop <= this.loadThreshold) {
@@ -635,17 +643,48 @@
      }
      // chooseWords
    },
    // 获取auido实例
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo)
      allVideo = Array.from(allVideo);
      this.videoList = allVideo;
      if (allVideo.length) {
        const playAudio = allVideo.reverse().find((item) => item.paused == false);
        // 查找播放状态的最后一条音频
        const playAudio = allVideo
          .reverse()
          .find((item) => item.paused == false);
        if (playAudio) {
          console.log("第个音频在播放", playAudio.src);
          this.audioPath = playAudio.src
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap < 0) {
            playAudio.pause();
            this.audioPath = playAudio.src;
            this.currentTime = playAudio.currentTime;
          }
        }
      }
    },
    // 页面向上滚动，音频小窗回收
    handleAudio() {
      if (!this.audioPath) return false;
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if (allVideo.length) {
        //查找与小窗播放音频同源的页面audio DOM
        const playAudio = allVideo.find((item) => item.src == this.audioPath);
        if (playAudio) {
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap >= 0) {
            if (this.$refs.audioPlayer) {
              const playerState = this.$refs.audioPlayer.getVideoPlayer();
              this.audioPath = "";
              playAudio.currentTime = playerState.currentTime;
              if (!playerState.paused) playAudio.play();
            }
          }
        }
      }
    },

 src/books/artAndDance/assets/images/06.gif

 src/books/artAndDance/assets/images/07.gif

 src/books/artAndDance/assets/images/08.gif

 src/books/artAndDance/assets/images/09.gif

 src/books/artAndDance/assets/images/10-2.gif

 src/books/artAndDance/assets/images/chapter-five-header.png

 src/books/artAndDance/assets/images/chapter-four-header.png

 src/books/artAndDance/assets/images/chapter-three-header.png

 src/books/artAndDance/assets/images/crane.png

 src/books/artAndDance/assets/images/image26-1.jpg

 src/books/artAndDance/assets/images/image26-2.jpg

 src/books/artAndDance/assets/images/image26-3.jpg

 src/books/artAndDance/assets/images/image26-4.jpg

 src/books/artAndDance/assets/images/image27-1.jpg

 src/books/artAndDance/assets/images/image27-2.jpg

 src/books/artAndDance/assets/images/image27-3.jpg

 src/books/artAndDance/assets/images/image27-4.jpg

 src/books/artAndDance/assets/images/image28-1.jpg

 src/books/artAndDance/assets/images/image28-2.jpg

 src/books/artAndDance/assets/images/image28-3.jpg

 src/books/artAndDance/assets/images/image28-4.jpg

 src/books/artAndDance/assets/images/image29-1.jpg

 src/books/artAndDance/assets/images/image29-2.jpg

 src/books/artAndDance/assets/images/image29-3.jpg

 src/books/artAndDance/assets/images/image30-1.jpg

 src/books/artAndDance/assets/images/image30-2.jpg

 src/books/artAndDance/assets/images/image30-3.jpg

 src/books/artAndDance/assets/images/image30-4.jpg

 src/books/artAndDance/assets/images/rise.png

 src/books/artAndDance/assets/main.less

@@ -159,7 +159,7 @@
  h2.whleft2 {
    text-align: left;
    color: #af0206;
    font-size: 1.2em;
    font-size: 38px;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    text-indent: 0em;
@@ -403,6 +403,16 @@
}

/* 媒体查询做基础响应式布局 */
@media (max-width: 430px) {
  .ans-dance  {
    .page-box {
      min-height: 750px;
    }
    .pg-mh {
      min-height: 815px;
    }
  }
}
@media (max-width: 660px) {
  .ans-dance {
    /* 分页padding */
@@ -416,6 +426,16 @@
    .video-box {
      max-width: 260px;
    }
    .audio-box {
      margin-top: 20px;
      flex-wrap: wrap;
      li {
        width: 100%;
      }
      li:nth-child(2) {
        margin-top: 10px;
      }
    }
  }
}
@media (min-width: 660px) {
@@ -429,5 +449,15 @@
    .video-box {
      max-width: 370px;
    }
    .audio-box {
      margin-top: 20px;
      flex-wrap: nowrap;
      li {
        width: 50%;
      }
      li:nth-child(2) {
        margin-left: 10px;
      }
    }
  }
}

 src/books/artAndDance/view/components/chapter001.vue

@@ -4,10 +4,11 @@
      <div v-if="showPageList.indexOf(4) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
        <img src="../../assets/images/01.gif" alt="" style="width: 53%;" class="cover-img">
        <audio></audio>
      </div>
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1" class="pg-mh fl fl-cl ju-bt">
      <div v-if="showPageList.indexOf(5) > -1" class="pg-mh fl fl-cl">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
@@ -28,7 +29,7 @@
          <p class="block2 fz-26">配合步伐</p>
          <p class="block1 w70"><span class="ls fz-26">——上步晃手</span></p>
        </div>
        <ul>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 2 </span>
@@ -51,6 +52,24 @@
          <h2 class="lefth2" id="b002">
            <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
          </h2>
          <ul class="fl audio-box">
            <li class="fl al-cn">
              <span class="wh-nr">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
            </li>
            <li class="fl al-cn">
              <span class="wh-nr">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls></audio>
            </li>
          </ul>
          <h3 id="c003">黄鹤楼送孟浩然之广陵</h3>
          <p class="block2">〔唐〕李白</p>
          <p class="block2">故人西辞黄鹤楼，</p>
          <p class="block2">烟花三月下扬州。</p>
          <p class="block2">孤帆远影碧空尽，</p>
          <p class="block2">唯见长江天际流。</p>
          <video
            :src="videoPathOne"
            webkit-playsinline="true"
@@ -62,12 +81,6 @@
            controls
            class="w100"
          ></video>
          <h3 id="c003">黄鹤楼送孟浩然之广陵</h3>
          <p class="block2">〔唐〕李白</p>
          <p class="block2">故人西辞黄鹤楼，</p>
          <p class="block2">烟花三月下扬州。</p>
          <p class="block2">孤帆远影碧空尽，</p>
          <p class="block2">唯见长江天际流。</p>
          <p class="center">
            <img class="img-g" alt="" src="image/i0007-1.jpg" />
          </p>
@@ -137,7 +150,7 @@
</template>

<script>
import getResourcePath from "@/assets/methods/resources";
import {getResourcePath} from "@/assets/methods/resources";
export default {
  name: "chapterOne",
  props: {
@@ -151,11 +164,16 @@
  data() {
    return {
      videoPathOne: "",
      auidoPathOne:"",
      auidoPathTwo:"",
    
    };
  },
  methods: {
    getVidoePath() {
      this.videoPathOne = getResourcePath("db8040667457cc6fc9b0209009acb316");
   async getVidoePath() {
      this.videoPathOne = await getResourcePath("db8040667457cc6fc9b0209009acb316");
      this.auidoPathOne = await getResourcePath("2c5f6c69b0f9f7a3c03e473cb8c977f5");
      this.auidoPathTwo = await getResourcePath("e93c0fdde08be5a4386c8c863892a287");
    },
  },
};

 src/books/artAndDance/view/components/chapter002.vue

@@ -62,6 +62,18 @@
          <h2 class="lefth2" id="b006">
            <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
          </h2>
          <ul class="fl audio-box">
            <li class="fl al-cn">
              <span class="wh-nr">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
            </li>
            <li class="fl al-cn">
              <span class="wh-nr">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls></audio>
            </li>
          </ul>
          <h3 id="c006">亡羊补牢</h3>
          <p class="block2">席一元</p>
          <p class="block2">羊啊羊啊咩咩叫，有只小羊不见了。</p>
@@ -134,7 +146,7 @@
            </div>
          <!-- <p class="center"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></p> -->
        </div>
        <ul class="pb-box">
        <ul style="margin-top: 20px">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 8 </span>
@@ -149,7 +161,7 @@
</template>

<script>
import getResourcePath from "@/assets/methods/resources";
import {getResourcePath} from "@/assets/methods/resources";
export default {
  name: "chapterTwo",
  props: {
@@ -174,12 +186,17 @@
      videoPathOne: "",
      num:0,
      addTimer:null,
      cutTimer:null
      cutTimer:null,
      auidoPathOne:"",
      auidoPathTwo:"",

    };
  },
  methods: {
    getVidoePath() {
      this.videoPathOne = getResourcePath("f6aaaed901868114d948031615250bed");
   async getVidoePath() {
      this.videoPathOne = await getResourcePath("f6aaaed901868114d948031615250bed");
      this.auidoPathOne = await getResourcePath("39fd9a021904ed3de1b8b9e036777ea3");
      this.auidoPathTwo = await getResourcePath("a143777eff52ee24e53521d16afc85d9");
    },
    addNum() {
      this.addTimer =  setInterval(() => {

 src/books/artAndDance/view/components/chapter003.vue

New file
@@ -0,0 +1,187 @@
<template>
  <div class="chapter" num="4">
    <div class="page-box" page="12" style="min-height: auto">
      <div v-if="showPageList.indexOf(12) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
        <img src="../../assets/images/07.gif" alt="" style="width: 56%;" class="cover-gif">
      </div>
    </div>
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1" class="pg-mh fl fl-cl">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <p class="center">
            <img class="img-a" alt="" src="../../assets/images/06.gif" />
          </p>
          <h2 class="lefth2" id="b001">
            <img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
          </h2>
          <h3 id="c001" class="fw-400 fz-26 mb-20">元素</h3>
          <p class="block2 fw-400 fz-26">双手按于身体两旁，模仿孩童天真可爱的样子</p>
          <p class="block1 w70"><span class="ls fz-26">——旁按手</span></p>
          <p class="block2 fz-26">单手旁按，指向1点方向</p>
          <p class="block1 w70"><span class="ls fz-26">——模仿钓鱼</span></p>
          <p class="block2 fz-26">单腿交替吸跳</p>
          <p class="block1 w70"><span class="ls fz-26">——吸跳步</span></p>
        </div>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 10 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <div>
          <img src="../../assets/images/chapter-three-header.png" class="w100" />
        </div>
        <div class="padding-96">
          <h3 id="c002">空间与方向</h3>
          <p class="block2">高、中空间</p>
          <p class="block2">1、2、4、8点方向</p>
          <h2 class="lefth2" id="b002">
            <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
          </h2>
          <ul class="fl audio-box">
            <li class="fl al-cn">
              <span class="wh-nr">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
            </li>
            <li class="fl al-cn">
              <span class="wh-nr">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls></audio>
            </li>
          </ul>
          <h3 id="c009">小儿垂钓</h3>
          <p class="block2">〔唐〕胡令能</p>
          <p class="block2">蓬头稚子学垂纶，</p>
          <p class="block2">侧坐莓苔草映身。</p>
          <p class="block2">路人借问遥招手，</p>
          <p class="block2">怕得鱼惊不应人。</p>
          <video
            :src="videoPathOne"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            class="w100"
          ></video>
          <p class="center">
            <img class="img-g" alt="" src="image/i0007-1.jpg" />
          </p>
          <h2 class="lefth2" id="b003">
            <img class="img-gn" alt="" src="image/czysj.jpg" />
          </h2>
        </div>
        <ul>
          <li class="fl ju-end mr-40">
            <div>
              <span class="dl-ib"> 11 </span>
              <img src="../../assets/images/icon/tree.jpg" />
            </div>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <div class="bj1">
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />运用所学舞蹈元素，设立孩童钓鱼的两个不同场景。
            </p>
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />学生自愿分组，每组自行设置与该诗情感相关的主题，在教师的引导下进行创编，并富有情感地展示出来。
            </p>
          </div>
          <h2 class="lefth2" id="b004">
            <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
          </h2>
          <div class="bj2">
            <p class="block">
              观察生活中钓鱼者的形象，根据已学舞蹈元素，创编出新的单一舞蹈动作或者造型吧。
            </p>
          </div>
          <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
        </div>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 12 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {getResourcePath} from "@/assets/methods/resources";
  export default {
    name:"chapterThree",
    props:{
      showPageList:{
        type:Array,
      }
    },
    mounted() {
      this.getVidoePath()
    },
    data() {
      return {
        videoPathOne:"",
        auidoPathOne:"",
        auidoPathTwo:""
      }
    },
    methods: {
   async getVidoePath() {
      this.videoPathOne = await getResourcePath("36a2cffb28e494bea887f9a905b11863");
      this.auidoPathOne = await getResourcePath("85923e871441c541991be07fe4ce8771");
      this.auidoPathTwo = await getResourcePath("c018f7a6434abfac0b0e0da1174d643a");
    },
  },
  }
</script>

<style lang="less" scoped>
.cover-gif {
  position: absolute;
  top: 32%;
  left: 22%;

}
</style>

 src/books/artAndDance/view/components/chapter004.vue

New file
@@ -0,0 +1,191 @@
<template>
  <div class="chapter" num="5">
    <div class="page-box" page="16" style="min-height: auto;">
      <div v-if="showPageList.indexOf(16) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
        <img src="../../assets/images/08.gif" alt="" style="width: 55%;" class="cover-gif">
      </div>
    </div>
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -1" class="pg-mh fl fl-cl ju-bt">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <p class="center">
            <img class="img-a" alt="" src="../../assets/images/09.gif" />
          </p>
          <h2 class="lefth2" id="b001">
            <img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
          </h2>
          <h3 id="c001" class="fw-400 fz-26 mb-20">元素</h3>
          <p class="block2 fw-400 fz-26">男生、女生基本手形</p>
          <p class="block1 w70"><span class="ls fz-26">——兰花指（女）、掌形手（男）</span></p>
          <p class="block2 fz-26">单臂或双臂于体旁</p>
          <p class="block1 w70"><span class="ls fz-26">——单山膀、双山膀</span></p>
          <p class="block2 fz-26">单臂于头顶上方</p>
          <p class="block1 w70"><span class="ls fz-26">——单托掌</span></p>
          <p class="block2 fz-26">单手或双手于胸前</p>
          <p class="block1 w70"><span class="ls fz-26">——单按掌、胸前交叉按掌</span></p>
        </div>
        <ul>
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 14 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
        <div>
          <img src="../../assets/images/chapter-four-header.png" class="w100" />
        </div>
        <div class="padding-96">
          <p class="block2 fz-26">单托掌和单山膀手</p>
          <p class="block1 w70"><span class="ls fz-26">——顺风旗</span></p>
          <p class="block2 fz-26">双臂同时体前划圆</p>
          <p class="block1 w70"><span class="ls fz-26">——双晃手</span></p>
          <h3 id="c002">空间与方向</h3>
          <p class="block2">高、中空间</p>
          <p class="block2">1-8点方向</p>
          <h2 class="lefth2" id="b002">
            <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
          </h2>
          <ul class="fl audio-box">
            <li class="fl al-cn">
              <span class="wh-nr">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
            </li>
            <li class="fl al-cn">
              <span class="wh-nr">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls></audio>
            </li>
          </ul>
          <h3 id="c012">寻隐者不遇</h3>
          <p class="block2">〔唐〕贾岛</p>
          <p class="block2">松下问童子，言师采药去。</p>
          <p class="block2">只在此山中，云深不知处。</p>
          <video
            :src="videoPathOne"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            class="w100"
          ></video>
          <p class="center">
            <img class="img-g" alt="" src="image/i0007-1.jpg" />
          </p>
          <h2 class="lefth2" id="b003">
            <img class="img-gn" alt="" src="image/czysj.jpg" />
          </h2>
        </div>
        <ul>
          <li class="fl ju-end mr-40">
            <div>
              <span class="dl-ib"> 15 </span>
              <img src="../../assets/images/icon/tree.jpg" />
            </div>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="19">
      <div v-if="showPageList.indexOf(19) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <div class="bj1">
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />运用所学舞蹈元素，设立询问他人的两个不同场景。
            </p>
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />学生自愿分组，每组自行设置与该诗情感相关的主题，在教师的引导下进行创编，并富有情感地展示出来。
            </p>
          </div>
          <h2 class="lefth2" id="b004">
            <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
          </h2>
          <div class="bj2">
            <p class="block">
              请思考一下，除了舞蹈中“只在此山中”的动作之外，还有什么舞蹈动作也可以体现这句诗的含义呢？
            </p>
          </div>
          <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
        </div>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 16 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {getResourcePath} from "@/assets/methods/resources";
  export default {
    name:"chapterFour",
    props:{
      showPageList:{
        type:Array,
      }
    },
    mounted() {
      this.getVidoePath()
    },
    data() {
      return {
        videoPathOne:"",
        auidoPathOne:"",
        auidoPathTwo:""
      }
    },
    methods: {
   async getVidoePath() {
      this.videoPathOne = await getResourcePath("20b7d2311433c78a4fddf69d09a5fb43");
      this.auidoPathOne = await getResourcePath("a865ff99b91fa24d87ac81a883be54db");
      this.auidoPathTwo = await getResourcePath("66f3cc00d272a120514201e13e87fb9d");
    },
  },
  }
</script>

<style lang="less" scoped>
.cover-gif {
  position: absolute;
  top: 32%;
  left: 22%;

}
</style>

 src/books/artAndDance/view/components/chapter005.vue

New file
@@ -0,0 +1,240 @@
<template>
  <div class="chapter" num="6">
    <div class="page-box" page="20" style="min-height: auto">
      <div v-if="showPageList.indexOf(20) > -1">
        <img class="img-0" alt="" src="../../assets/images/dy5.jpg" />
        <img
          src="../../assets/images/10-2.gif"
          alt=""
          style="width: 54%"
          class="cover-gif"
        />
      </div>
    </div>
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -1" class="pg-mh fl fl-cl">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <ul class="fl fl-cl al-cn img-state" style="margin-top: 100px">
            <li style="width: 45%">
              <img
                src="../../assets/images/crane.png"
                alt=""
                class="w100"
                :style="{ opacity: (10 - num) / 10 }"
              />
            </li>
            <li style="width: 35%">
              <img
                src="../../assets/images/rise.png"
                alt=""
                class="w100"
                :style="{ opacity: num / 10 }"
              />
            </li>
          </ul>
          <p class="img">“西塞山前白鹭飞”动作</p>
        </div>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 18 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
        <div>
          <img
            src="../../assets/images/chapter-five-header.png"
            class="w100"
          />
        </div>
        <div class="padding-96">
          <h2 class="lefth2" id="b001">
            <img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
          </h2>
          <h3 id="c001" class="fw-400 fz-26 mb-20">元素</h3>
          <p class="block2 fw-400 fz-26">模仿白鹭轻扇翅膀</p>
          <p class="block1 w70">
            <span class="ls fz-26">——小波浪手</span>
          </p>
          <p class="block2 fz-26">模仿白鹭翱翔</p>
          <p class="block1 w70">
            <span class="ls fz-26">——大波浪手</span>
          </p>
          <h3 id="c002">空间与方向</h3>
          <p class="block2">高、中、低空间</p>
          <p class="block2">1、2、3、7、8点方向</p>
          <h2 class="lefth2" id="b002">
            <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
          </h2>
          <ul class="fl audio-box">
            <li class="fl al-cn">
              <span class="wh-nr">男童音</span>
              <audio :src="auidoPathOne" controls></audio>
            </li>
            <li class="fl al-cn">
              <span class="wh-nr"> 女童音 </span>
              <audio :src="auidoPathTwo" controls></audio>
            </li>
          </ul>
          <h3 id="c015">渔歌子</h3>
          <p class="block2">〔唐〕张志和</p>
          <p class="block2">西塞山前白鹭飞，</p>
          <p class="block2">桃花流水鳜鱼肥。</p>
        </div>
        <ul>
          <li class="fl ju-end mr-40">
            <div>
              <span class="dl-ib"> 19 </span>
              <img src="../../assets/images/icon/tree.jpg" />
            </div>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="23">
      <div v-if="showPageList.indexOf(23) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <p class="block2">青箬笠，绿蓑衣，</p>
          <p class="block2">斜风细雨不须归。</p>
          <video
            :src="videoPathOne"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            class="w100"
          ></video>
          <div class="bj1">
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />运用所学舞蹈元素，设立白鹭飞翔的两个不同场景。
            </p>
            <p class="block">
              <img
                class="inline"
                alt=""
                src="../../assets/images/dn.png"
              />学生自愿分组，每组自行设置与该诗情感相关的主题，在教师的引导下进行创编，并富有情感地展示出来。
            </p>
          </div>
          <h2 class="lefth2" id="b004">
            <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
          </h2>
          <div class="bj2">
            <p class="block">
              根据本单元所学的舞蹈元素以及古诗寓意，发挥想象，创编新的单一舞蹈动作或造型吧。
            </p>
          </div>
          <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
        </div>
        <ul>
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 20 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapterFive",
  props: {
    showPageList: {
      type: Array,
    },
  },
  mounted() {
    this.getVidoePath();
    this.addNum();
  },
  data() {
    return {
      videoPathOne: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      num: 0,
    };
  },
  unmounted() {
    if (this.addTimer) {
      clearInterval(this.addTimer);
    }
    if (this.cutTimer) {
      clearInterval(this.cutTimer);
    }
  },
  methods: {
    async getVidoePath() {
      this.videoPathOne = await getResourcePath(
        "97758c885b8668f42c9df0b3ff030672"
      );
      this.auidoPathOne = await getResourcePath(
        "aed4d7b398283b35df0ca46f7c0bbdd4"
      );
      this.auidoPathTwo = await getResourcePath(
        "ec8b7f69df81b1d6230968ad2313132c"
      );
    },
    addNum() {
      this.addTimer = setInterval(() => {
        if (this.num < 10) {
          this.num++;
        } else {
          clearInterval(this.addTimer);
          this.cutNum();
        }
      }, 200);
    },
    cutNum() {
      this.cutTimer = setInterval(() => {
        if (this.num > 0) {
          this.num--;
        } else {
          clearInterval(this.cutTimer);
          this.addNum();
        }
      }, 200);
    },
  },
};
</script>

<style lang="less" scoped>
.cover-gif {
  position: absolute;
  top: 32%;
  left: 22%;
}
</style>

 src/books/artAndDance/view/components/chapter006.vue

New file
@@ -0,0 +1,333 @@
<template>
  <div class="chapter" num="7">
    <div class="page-box" page="24" style="min-height: auto">
      <div v-if="showPageList.indexOf(24) > -1">
        <img class="img-0" alt="" src="../../assets/images/dzk.jpg" />
      </div>
    </div>
    <div class="page-box" page="25">
      <div v-if="showPageList.indexOf(25) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <h2 class="whleft2" id="b021">第一单元 黄鹤楼送孟浩然之广陵</h2>
          <div class="banshi openImgBox">
            <div class="swiper-container swiper-img">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image26-1.jpg"
                      alt="1 “故人西辞黄鹤楼”动作"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image26-2.jpg"
                      alt="2 “烟花三月下扬州”动作"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image26-3.jpg"
                      alt="3 “孤帆远影碧空尽”动作"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image26-4.jpg"
                      alt="4 “唯见长江天际流”动作"
                    />
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
        </div>
        <ul>
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 22 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="26">
      <div v-if="showPageList.indexOf(26) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <h2 class="whleft2" id="b022">第二单元 亡羊补牢</h2>
          <div class="banshi openImgBox">
            <div class="swiper-container swiper-img">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image27-1.jpg"
                      alt="1 “羊角式”舞姿"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image27-2.jpg"
                      alt="2 模仿“窟窿”舞姿"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image27-3.jpg"
                      alt="3 “捂嘴状”舞姿"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image27-4.jpg"
                      alt="4 “双人配合”舞姿"
                    />
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
        </div>
        <ul>
          <li class="fl ju-end mr-40">
            <div>
              <span class="dl-ib"> 23 </span>
              <img src="../../assets/images/icon/tree.jpg" />
            </div>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="27">
      <div v-if="showPageList.indexOf(27) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <h2 class="whleft2" id="b023">第三单元 小儿垂钓</h2>
          <div class="banshi openImgBox">
            <div class="swiper-container swiper-img">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image28-1.jpg"
                      alt="1 吸跳步"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image28-2.jpg"
                      alt="2 “侧坐莓苔草映身”动作"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image28-3.jpg"
                      alt="3 “路人借问遥招手”动作"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image28-4.jpg"
                      alt="4 模仿“钓鱼”舞姿"
                    />
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
        </div>
        <ul class="pb-box">
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 24 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="28">
      <div v-if="showPageList.indexOf(28) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <h2 class="whleft2" id="b024">第四单元 寻隐者不遇</h2>
          <div class="banshi openImgBox">
            <div class="swiper-container swiper-img">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image29-1.jpg"
                      alt="1 “松下问童子”动作"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image29-2.jpg"
                      alt="2 “言师采药去”动作"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image29-3.jpg"
                      alt="3 “云深不知处”动作"
                    />
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
        </div>
        <ul>
          <li class="fl ju-end mr-40">
            <div>
              <span class="dl-ib"> 25 </span>
              <img src="../../assets/images/icon/tree.jpg" />
            </div>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
    <div class="page-box" page="29">
      <div v-if="showPageList.indexOf(29) > -1" class="pg-mh">
        <img
          src="../../assets/images/pageContentHeader.jpg"
          alt=""
          class="w100 mb-40"
        />
        <div class="padding-96">
          <h2 class="whleft2" id="b025">第五单元 渔歌子</h2>
          <div class="banshi openImgBox">
            <div class="swiper-container swiper-img">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image30-1.jpg"
                      alt="1 吸跳步"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image30-2.jpg"
                      alt="2 “侧坐莓苔草映身”动作"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image30-3.jpg"
                      alt="3 “路人借问遥招手”动作"
                    />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img
                      src="../../assets/images/image30-4.jpg"
                      alt="4 模仿“钓鱼”舞姿"
                    />
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
        </div>
        <ul >
          <li class="ml-40">
            <img src="../../assets/images/icon/tree.jpg" />
            <span class="dl-ib"> 26 </span>
          </li>
          <li>
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "chapterSix",
  props: {
    showPageList: {
      type: Array,
    },
  },
};
</script>

<style lang="less" scoped>
.banshi {
  width: 100%;
  height: 800px;
}
</style>

 src/books/artAndDance/view/components/header.vue

@@ -11,7 +11,7 @@
    </div>
    <div class="page-box" page="3">
      <div v-if="showPageList.indexOf(3) > -1">
        <ul class="fl fl-cl ju-bt" style="min-height: 1150px">
        <ul class="fl fl-cl ju-bt">
          <li>
            <img src="../../assets/images/pageHeader.png" alt="" class="w100" />
          </li>
@@ -48,7 +48,7 @@
              <p>　　　　　</p>
              <p>　　　　　</p>
            </div>
            <p class="center">
            <p class="center pb-box">
              <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
            </p>
          </li>

 src/books/artAndDance/view/components/index.vue

@@ -22,7 +22,24 @@
        :showPageList="loadPageList"
      >
      </chapterTwo>
      <chapterThree
      v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
      v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
      <chapterFive
      v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
      ></chapterSix>
    </div>

  </div>
</template>

@@ -30,6 +47,10 @@
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";
import chapterThree from "./chapter003.vue"
import chapterFour from './chapter004.vue'
import chapterFive from './chapter005.vue'
import chapterSix from './chapter006.vue'
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
@@ -39,7 +60,7 @@
export default {
  data() {
    return {
      catalogLength: 3, // 总章节数
      catalogLength: 7, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -641,6 +662,10 @@
    pageHeader,
    chapterOne,
    chapterTwo,
    chapterThree,
    chapterFour,
    chapterFive,
    chapterSix
  },
};
</script>

 src/components/matching/matching.vue

@@ -15,7 +15,7 @@
            :key="index"
            ref="left"
            @mousedown="(e) => touchstart(e, item, index)"
            :style="{backgroundColor:bc}"
            :style="{backgroundColor:primaryColor}"
          >
            {{ item.label.txt }}
          </div>
@@ -26,7 +26,7 @@
            v-for="(item, index) in rightArr"
            :key="index"
            ref="right"
            :style="{backgroundColor:bc}"
            :style="{backgroundColor:primaryColor}"
          >
            {{ item.label.txt }}
          </div>
@@ -48,9 +48,9 @@
    <!-- 按钮 -->
    <div class="btn-bottom">
      <el-button @click="submitData">提交</el-button>
      <el-button @click="saveData">保存</el-button>
      <el-button @click="redo">重做</el-button>
      <el-button @click="handleAnswer">查看答案</el-button>
      <el-button @click="saveData" :style="{borderColor:primaryColor}">保存</el-button>
      <el-button @click="redo" >重做</el-button>
      <el-button @click="handleAnswer" :style="{borderColor:primaryColor}">查看答案</el-button>
    </div>
    <!-- 解析 -->
    <ul class="show-answer" v-if="isShowAnswer">
@@ -105,7 +105,7 @@
        return [];
      },
    },
    bc:{
    primaryColor:{
      type:String,
      default:"#0bab87"
    }
@@ -181,7 +181,6 @@
    },
    // 触摸结束
    touchend(e, index) {
      console.log("抬起", e, this.checkItem);
      this.isDragging = false;
      if (this.item.showAnswer) {
        return false;
@@ -220,12 +219,11 @@
        .filter((r) => r.right !== undefined);
      this.$emit("input", model);
      this.item.userChoise = model;
      console.log(JSON.stringify(model));
      // console.log(JSON.stringify(model));
    },
    // 触摸开始
    touchstart(e, item, index) {
      this.isDragging = true;
      console.log("按下", e);
      this.checkItem = item;
      this.checkItemIndex = index;
      e.stopPropagation();
@@ -254,7 +252,6 @@
      if (this.item.showAnswer) {
        return false;
      }
      // console.log('移动',e);
      this.checkItem.line[2] = e.pageX;
      this.checkItem.line[3] =
        e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop;
@@ -282,8 +279,8 @@
      canvasA.lineWidth = 2;
      for (let i = 0; i < this.leftArr.length; i++) {
        const line = this.leftArr[i].line;
        console.log(line);
        console.log(this.leftArr[i]);
        // console.log(line);
        // console.log(this.leftArr[i]);
        if (line.length) {
          canvasA.moveTo(line[0], line[1]);
          canvasA.lineTo(line[2], line[3]);
@@ -343,12 +340,12 @@
      }
      this.isRight = this.areArraysEqual(this.item.userChoise,answerArr)
      this.item.showAnswer = true
      console.log(
        "答案",
        answerArr,
        this.item.userChoise,
        this.isRight 
      );
      // console.log(
      //   "答案",
      //   answerArr,
      //   this.item.userChoise,
      //   this.isRight 
      // );
    },
    // 获取当前页码
    handlePage() {
@@ -381,7 +378,7 @@
    saveData() {
      if(this.item.userChoise.length)
      localStorage.setItem(this.config.activeBook.name + '-matching-' + this.pageNum,JSON.stringify(this.item.userChoise))
      console.log('保存成功',this.config.activeBook.name,this.pageNum);
      // console.log('保存成功',this.config.activeBook.name,this.pageNum);
    },
    // 重做
    redo() {
@@ -439,7 +436,7 @@
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      line-height: 40px;
      line-height: 24px;
      padding: 6px;
    }

@@ -474,7 +471,7 @@
}
.el-button {
  height:30px;
  padding:9px;
  padding:7px;
  min-width: 78px
}
</style>

 src/components/miniAudio/index.vue

@@ -1,24 +1,62 @@
<template>
  <div class="mini-audio" v-if="path">
    <audio controls :src="path"></audio>
    <audio controls :src="path" class="aduioPlayer"></audio>
  </div>
</template>

<script>
  export default {
    name:"mini-audio",
    props:{
      path:{
        type:String
export default {
  name: "mini-audio",
  props: {
    path: {
      type: String,
    },
    currentTime: {
      type: Number,
    },
  },
  watch: {
    path: {
      handler(newVal) {
        if (newVal) {
          setImmediate(() => {
            this.play();
          }, 200);
        }
      },
    },
  },
  methods: {
    play() {
      const player = (this.container ? this.container : document).querySelector(
        ".aduioPlayer"
      );
      if (player) {
        player.currentTime = this.currentTime;
        player.play();
      }
    }
  }
    },
    getVideoPlayer() {
      let obj = null;
      const player = (this.container ? this.container : document).querySelector(
        ".aduioPlayer"
      );
      if (player) {
        obj = {
          currentTime: player.currentTime,
          paused: player.paused,
        };
      }
      return obj
    },
  },
};
</script>

<style lang="less" scoped>
.mini-audio {
  position: fixed;
  right:40px;
  right: 40px;
  bottom: 100px;
}
</style>
</style>