drama优化

user1

2024-06-13 b83dfcd4b8c31b2ba07770157d5ef0aba828e72d

drama优化

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

@@ -834,6 +834,7 @@
      }
      // chooseWords
    },
    
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (

 src/books/artAndDrama/assets/main.less

@@ -511,6 +511,16 @@
    }
  }
  /* 媒体查询做基础响应式布局 */
@media (max-width: 430px) {
    .ans-drama  {
      .page-box {
        min-height: 750px;
      }
      .pg-mh {
        min-height: 815px;
      }
    }
  }
@media (max-width: 660px) {
    .ans-drama {
      /* 分页padding */

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

@@ -5,7 +5,7 @@
        <h1 id="a004">
            <!-- 这里的动图有问题，没有背景图片 -->
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
          <audio :src="auidoPathOne" controls></audio>
          <audio :src="auidoPathOne" class="audio" controls></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -47,7 +47,7 @@
            >大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          </p>
          <h1>
            <audio :src="auidoPathTwo" controls></audio>
            <audio :src="auidoPathTwo" class="audio" controls></audio>
          </h1>
          <p>小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>
          <!-- 连线题 -->
@@ -55,10 +55,16 @@
        </div>
        <p><br /></p>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div style="position: relative; "> 
    <div style="position: relative;">  
      <h1 style="position: relative; z-index: 1;">  
      <img class="img-0" alt="" src="../../assets/images/ym.jpg" />  
      <div style="position: absolute; z-index: 99; background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; bottom: 38px; text-align: center; line-height: 30px; font-size: 20px;">2</div>     
      </h1>  
    </div>
        <!-- <div style="position: relative; "> 
            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; top: 38px; text-align: center; font-size: 25px;">2</div>
            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        </div>
        </div> -->
      </div>
    </div>
    <div class="page-box" page="6" style="min-height: auto">
@@ -124,13 +130,13 @@
          <img src="../../assets/images/page5.png" alt="" />
          <h2 id="b002">第二课　津津乐道</h2>
          <h3 class="lefth3" id="c003">
            <img class="img-gn1" alt="" src="image/rhybx.jpg" />
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
            >请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathThree" controls></audio></h1>
          <h1><audio :src="auidoPathThree" class="audio" controls></audio></h1>
        
          <div class="bj3">
            <p class="center">
@@ -154,7 +160,7 @@
            </p>
          </div>
          <h3 class="lefth3" id="c004">
            <img class="img-gn1" alt="" src="image/czysj.jpg" />
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
@@ -199,7 +205,7 @@
            <span class="hs1">◇</span
            >请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathTwo" controls></audio></h1>
          <h1><audio :src="auidoPathTwo" class="audio" controls></audio></h1>
          <div class="bj3">
            <p class="center">
              <span class="hs"
@@ -225,13 +231,7 @@
              >的。
            </p>
          </div>
          <h3 class="lefth3" id="c006">
            <img class="img-gn1" alt="" src="image/czysj.jpg" />
          </h3>
          <p class="center">
            <img class="img-e" alt="" src="image/0010-1.jpg" />
          </p>
          <hr />
           <hr />
          <p class="note">
            <a id="m1">1</a>
            朱自清：《春》，见温儒敏等：《义务教育教科书 语文
@@ -309,7 +309,7 @@
            >请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1>
            <audio :src="auidoPathTwo" controls></audio>  
            <audio :src="auidoPathTwo" class="audio" controls></audio>  
          </h1>

          <div class="bj3">
@@ -485,7 +485,7 @@
    showPageList: {
      type: Array,
    },
  },  
  },
  //在这里对调用的方法进行挂载
  mounted() {
    this.getVidoePath();
@@ -663,8 +663,6 @@
    };
  },



  methods: {
    //视频和音频的MD5地址
    async getVidoePath() {
@@ -690,6 +688,13 @@
        "e93c0fdde08be5a4386c8c863892a287"
      );
    },
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "english-book-question-one",
        JSON.stringify(this.questionData)
      );
    },
  },
};
</script>

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

@@ -445,11 +445,11 @@
</template>
    
    <script>
import matching from "@/components/matching/matching.vue";
//import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapterTwo",
  components: { matching },
  //components: { matching },
  props: {
    showPageList: {
      type: Array,
@@ -462,8 +462,12 @@
  data() {
    return {
      videoPathOne: "",
      videoPathTwo: "",
      videoPathThree: "",
      videoPathFour: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree: "",
      rawData: {
        left: [
          {

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

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

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

@@ -10,12 +10,11 @@
        <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
      </div>
    </div>
    <div class="page-box mt-20" page="3">
    <div class="page-box " page="3">
      <div v-if="showPageList.indexOf(3) > -1" >
        <div  class="bodystyle">
        <ul class="fl fl-cl ju-bt pg-mh"   style="display: flex;  flex-direction: column; justify-content: flex-end; " >
          <li>
            <div style="margin-bottom: 100px;" >
            <div class="bodystyle" style="margin-bottom: 100px;" >
              <p id="a003" class="front" style="margin: 0%;">编委会</p>
              <hr />
              <p>顾　　问：<span class="kaiti">彭吉象　严燕生</span></p>
@@ -54,7 +53,7 @@
      </div>
      </div>
    </div>
  </div>

</template>
  
  <script>

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

@@ -24,17 +24,23 @@
          :showPageList="loadPageList"
        >
        </chapterTwo>
        <chapterThree
        <!-- <chapterThree
        v-if="showCatalogList.indexOf(4) > -1"
          :showPageList="loadPageList"
        ></chapterThree>
        <chapterFour
        v-if="showCatalogList.indexOf(5) > -1"
          :showPageList="loadPageList"
        ></chapterFour>
        ></chapterFour> -->
       
      </div>
  
      <!-- 音频小窗播放组件 -->
      <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    ></miniAudio>
    </div>
  </template>
  
@@ -42,9 +48,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 chapterThree from "./chapter003.vue";
  // import chapterFour from "./chapter004.vue";
  import NoteIcon from "@/assets/images/biji.png";
  import miniAudio from "@/components/miniAudio/index.vue";
  import _ from "lodash";
  import Swiper from "swiper/bundle";
  import "swiper/swiper-bundle.css";
@@ -53,7 +60,7 @@
  export default {
    data() {
      return {
        catalogLength: 4, // 总章节数
        catalogLength: 3, // 总章节数
        showCatalogList: [], // 显示的章节
        loadThreshold: 300, // 触发加载阈值
        throttleThreshold: 100, // 节流阈值
@@ -65,6 +72,9 @@
        questionDataMap: {},
        renderSignMap: {},
        highlightData: null,
        audioPath: "",
      currentTime: null,
      videoList: [],
      };
    },
    computed: {
@@ -219,6 +229,7 @@
      scrollFun(event) {
        // 判断向上滚动还是向下滚动
        if (event.target.scrollTop > this.previousScrollTop) {
          this.getAduio();
          // 向下
          const currentScrollTop =
            event.target.scrollTop + event.target.offsetHeight;
@@ -243,6 +254,7 @@
          }
        } else if (event.target.scrollTop < this.previousScrollTop) {
          // 向上
          this.handleAudio();
          const currentScrollTop = event.target.scrollTop;
          if (currentScrollTop <= this.loadThreshold) {
            // 到达阈值
@@ -722,10 +734,9 @@
          pageHeader,
          chapterOne,
          chapterTwo,
          chapterThree,
          chapterFour,
          chapterFive,
          chapterSix,
          // chapterThree,
          // chapterFour,
   
        };
        // 遍历所有章节文件
        for (const key in pageData) {
@@ -824,13 +835,64 @@
        // 跳转
        this.gotoPage(data.catalog, data.page, () => {});
      },
          // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      this.videoList = allVideo;
      if (allVideo.length) {
        // 查找播放状态的最后一条音频
        const playAudio = allVideo
          .reverse()
          .find((item) => item.paused == false);
        if (playAudio) {
          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();
            }
          }
        }
      }
    },
    // 关闭mini video
    closeMiniAudio() {
      this.audioPath = "";
    },
    },
    components: {
      pageHeader,
      chapterOne,
      chapterTwo,
      chapterThree,
      chapterFour,
      miniAudio
      // chapterThree,
      // chapterFour,
      
    },
  };
  </script>