| src/App.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/English/view/components/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDance/view/components/chapter001.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDance/view/components/chapter002.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDance/view/components/chapter003.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDance/view/components/chapter004.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDance/view/components/chapter005.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/books/artAndDance/view/components/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/App.vue
@@ -65,7 +65,7 @@ process.env.VUE_APP_RESOURCE_CTX + (process.env.VUE_APP_ENV == "product" ? process.env.VUE_APP_BOOK_ID : "childHealth") : "artAndDance") ); // 测试试读30页 // this.activeBook.tryPageCount = 10; src/books/English/view/components/index.vue
@@ -1,21 +1,48 @@ <template> <div class="page-main" @scroll="throttledScrollHandler"> <div class="page-content" :style="{ fontSize: fontSize ? fontSize + 'px' : '16px', transform: `scale(${pageZoom ? pageZoom : 1})`, transformOrigin: 'center top', }"> <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader> <chapterOne @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio" v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne> <chapterTwo @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio" v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo> <chapterThree @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio" v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree> <chapterFour @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio" v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour> <div class="page-content" :style="{ fontSize: fontSize ? fontSize + 'px' : '16px', transform: `scale(${pageZoom ? pageZoom : 1})`, transformOrigin: 'center top', }" > <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList" ></pageHeader> <chapterOne @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio" v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" ></chapterOne> <chapterTwo @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio" v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" ></chapterTwo> <chapterThree @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio" v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" ></chapterThree> <chapterFour @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio" v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" ></chapterFour> </div> <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer"> <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer" > </miniAudio> </div> </template> @@ -23,9 +50,9 @@ <script> 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 chapterTwo from "./chapter002.vue"; import chapterThree from "./chapter003.vue"; import chapterFour from "./chapter004.vue"; import miniAudio from "@/components/miniAudio/index.vue"; import NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; @@ -157,33 +184,33 @@ // 测试页面跳转 // setTimeout(() => { // this.gotoPage(4,59); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", // txt: "题一学习主题一 运动", // page: "10", // type: "Highlight", // color: "#F5E12A" // }); // setTimeout(() => { // this.delSign({ // ids: ["2ACA9359"] // }); // }, 2000); // }, 5000); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", // txt: "题一学习主题一 运动", // page: "10", // type: "Highlight", // color: "#F5E12A" // }); // setTimeout(() => { // this.delSign({ // ids: ["2ACA9359"] // }); // }, 2000); // }, 5000); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") // .querySelectorAll(".page-box"); // 检索 // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage"); // 检索跳转 // this.searchItemLocation({ // catalog: 2, // page: 10, // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ", // txtIndex: 57 // }); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") // .querySelectorAll(".page-box"); // 检索 // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage"); // 检索跳转 // this.searchItemLocation({ // catalog: 2, // page: 10, // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ", // txtIndex: 57 // }); // }, 50); }, methods: { @@ -443,8 +470,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.color = themeColor; } @@ -461,8 +488,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.backgroundColor = themeColor; } @@ -479,8 +506,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.borderColor = themeColor; } @@ -623,23 +650,19 @@ autoplay: { //自动开始 delay: 3000, //时间间隔 disableOnInteraction: false //*手动操作轮播图后不会暂停* disableOnInteraction: false, //*手动操作轮播图后不会暂停* }, paginationClickable: true, slidesPerView: 1, // 一组三个 spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector( ".swiper-button-next" ), prevEl: dom.querySelector( ".swiper-button-prev" ) nextEl: dom.querySelector(".swiper-button-next"), prevEl: dom.querySelector(".swiper-button-prev"), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 observer: true, observeParents: true observeParents: true, // // 如果需要分页器 // pagination: { // el: (this.container ? this.container : document).querySelector( @@ -662,12 +685,8 @@ spaceBetween: 30, // 间隔 // 如果需要前进后退按钮 navigation: { nextEl: dom.querySelector( ".swiper-button-next" ), prevEl: dom.querySelector( ".swiper-button-prev" ) nextEl: dom.querySelector(".swiper-button-next"), prevEl: dom.querySelector(".swiper-button-prev"), }, // 窗口变化,重新init,针对F11全屏和放大缩小,必须加 observer: true, @@ -686,8 +705,8 @@ var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; } } }, }, }); } }, @@ -729,7 +748,7 @@ propsData: { showPageList: [], questionData: {}, isSearch: true isSearch: true, }, }); pageExample.$mount( @@ -761,7 +780,7 @@ propsData: { showPageList: [pageNum], questionData: {}, isSearch: true isSearch: true, }, }); pageExample.$mount( @@ -817,7 +836,7 @@ // 记录高亮信息 this.highlightData = data; // 跳转 this.gotoPage(data.catalog, data.page, () => { }); this.gotoPage(data.catalog, data.page, () => {}); }, // 点击事件：将生僻单词传给 主应用 从而调用词典功能 saveCharacters(event, word) { src/books/artAndDance/view/components/chapter001.vue
@@ -54,13 +54,13 @@ <ul class="fl fl-cl al-cn audio-box"> <li class="fl al-cn"> <span class="wh-nr auido-text mr-8 ">男童音</span> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay" ></audio> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> <li class="fl al-cn mt-20 " > <span class="wh-nr auido-text mr-8 "> 女童音 </span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> </ul> <h3 id="c003">黄鹤楼送孟浩然之广陵</h3> @@ -172,9 +172,6 @@ this.auidoPathOne = await getResourcePath("2c5f6c69b0f9f7a3c03e473cb8c977f5"); this.auidoPathTwo = await getResourcePath("e93c0fdde08be5a4386c8c863892a287"); }, audioPlay(e) { this.$emit('closeAudio',e.srcElement.currentSrc) } }, }; </script> src/books/artAndDance/view/components/chapter002.vue
@@ -69,13 +69,13 @@ <ul class="fl fl-cl al-cn audio-box"> <li class="fl al-cn"> <span class="wh-nr auido-text mr-8">男童音</span> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> <li class="fl al-cn mt-20"> <span class="wh-nr auido-text mr-8"> 女童音 </span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> </ul> <h3 id="c006">亡羊补牢</h3> @@ -225,9 +225,6 @@ } },200) }, audioPlay(e) { this.$emit('closeAudio',e.srcElement.currentSrc) } }, }; </script> src/books/artAndDance/view/components/chapter003.vue
@@ -54,13 +54,13 @@ <ul class="fl fl-cl al-cn audio-box"> <li class="fl al-cn"> <span class="wh-nr auido-text mr-8">男童音</span> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> <li class="fl al-cn mt-20"> <span class="wh-nr auido-text mr-8"> 女童音 </span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio> </li> </ul> <h3 id="c009">小儿垂钓</h3> @@ -171,9 +171,6 @@ this.auidoPathOne = await getResourcePath("85923e871441c541991be07fe4ce8771"); this.auidoPathTwo = await getResourcePath("c018f7a6434abfac0b0e0da1174d643a"); }, audioPlay(e) { this.$emit('closeAudio',e.srcElement.currentSrc) } }, } </script> src/books/artAndDance/view/components/chapter004.vue
@@ -60,13 +60,13 @@ <ul class="fl fl-cl al-cn audio-box"> <li class="fl al-cn"> <span class="wh-nr auido-text mr-8">男童音</span> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> <li class="fl al-cn mt-20"> <span class="wh-nr auido-text mr-8"> 女童音 </span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> </ul> <h3 id="c012">寻隐者不遇</h3> @@ -175,9 +175,6 @@ this.auidoPathOne = await getResourcePath("a865ff99b91fa24d87ac81a883be54db"); this.auidoPathTwo = await getResourcePath("66f3cc00d272a120514201e13e87fb9d"); }, audioPlay(e) { this.$emit('closeAudio',e.srcElement.currentSrc) } }, } </script> src/books/artAndDance/view/components/chapter005.vue
@@ -66,11 +66,11 @@ <ul class="fl fl-cl al-cn audio-box"> <li class="fl al-cn"> <span class="wh-nr auido-text mr-8">男童音</span> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> <li class="fl al-cn mt-20"> <span class="wh-nr auido-text mr-8"> 女童音 </span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> </li> </ul> <h3 id="c015">渔歌子</h3> @@ -219,9 +219,6 @@ } },200) }, audioPlay(e) { this.$emit('closeAudio',e.srcElement.currentSrc) } }, }; </script> src/books/artAndDance/view/components/index.vue
@@ -18,28 +18,23 @@ <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" ></chapterOne> <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" > </chapterTwo> <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" ></chapterThree> <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" ></chapterFour> <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" ></chapterFive> <chapterSix v-if="showCatalogList.indexOf(7) > -1" @@ -123,6 +118,7 @@ setTimeout(() => { this.initSwiper(); this.initViewer(); this.closeAudio() }, 200); }, }, @@ -899,21 +895,27 @@ closeMiniAudio() { this.audioPath = ""; }, // 点击音频播放，关闭其他音频 closeAudio(path) { let allVideo = ( closeAudio() { let allAudio = ( this.container ? this.container : document ).querySelectorAll(".audio"); allVideo = Array.from(allVideo); if(allVideo.length) { for (let index = 0; index < allVideo.length; index++) { const item = allVideo[index]; if(item.currentSrc != path) { item.pause() for (let index = 0; index < allAudio.length; index++) { const item = allAudio[index]; item.addEventListener('play',() => { console.log('播放',item.src); const audioList = Array.from(allAudio); for (let cindex = 0; cindex < audioList.length; cindex++) { const citem = audioList[cindex]; if(citem.currentSrc != item.src) { citem.pause() } } } this.closeMiniAudio() }) } this.closeMiniAudio() } }, components: {
