| src/books/English/view/components/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/assets/main.less | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/chapter001.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/chapter002.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/chapter003.vue | 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/chapter004.vue | 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/header.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDrama/view/components/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
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> <!-- 连线题 --> @@ -56,9 +56,15 @@ <p><br /></p> <!-- 此次为页脚部分（需要设置页码） --> <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,12 +231,6 @@ >的。 </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 /> <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"> @@ -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>
