From fcf122755dea8187794abeaba1b610bc291f4132 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期二, 22 十月 2024 15:18:27 +0800 Subject: [PATCH] 民航概论 --- src/books/civilAviation/view/components/index.vue | 201 ++++++++++++++++--------------------------------- 1 files changed, 67 insertions(+), 134 deletions(-) diff --git a/src/books/civilAviation/view/components/index.vue b/src/books/civilAviation/view/components/index.vue index a81abe8..2941d7f 100644 --- a/src/books/civilAviation/view/components/index.vue +++ b/src/books/civilAviation/view/components/index.vue @@ -1,80 +1,22 @@ <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 - @initViewer="initViewer" - v-if="showCatalogList.indexOf(2) > -1" - :showPageList="loadPageList" - ></chapterOne> - <!-- <chapterTwo - @initViewer="initViewer" - v-if="showCatalogList.indexOf(3) > -1" - :showPageList="loadPageList" - ></chapterTwo> - <chapterThree - @initViewer="initViewer" - v-if="showCatalogList.indexOf(4) > -1" - :showPageList="loadPageList" - ></chapterThree> - <chapterFour - @initViewer="initViewer" - v-if="showCatalogList.indexOf(5) > -1" - :showPageList="loadPageList" - ></chapterFour> - <chapterFive - @initViewer="initViewer" - v-if="showCatalogList.indexOf(6) > -1" - :showPageList="loadPageList" - ></chapterFive> - <chapterSix - @initViewer="initViewer" - v-if="showCatalogList.indexOf(7) > -1" - :showPageList="loadPageList" - ></chapterSix> - <chapterSeven - @initViewer="initViewer" - v-if="showCatalogList.indexOf(8) > -1" - :showPageList="loadPageList" - ></chapterSeven> - <chapterEight - @initViewer="initViewer" - v-if="showCatalogList.indexOf(9) > -1" - :showPageList="loadPageList" - ></chapterEight> --> - + <div class="page-main" @scroll="throttledScrollHandler"> + <div id="searchDomBox" style="display: none"> + <div id="searchContent"></div> </div> - <miniAudio - :path="audioPath" - :currentTime="currentTime" - @closeMiniAudio="closeMiniAudio" - ref="audioPlayer" - > - </miniAudio> + <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 v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne> + </div> </div> </template> <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 chapterFive from "./chapter005.vue"; -// import chapterSix from "./chapter006.vue"; -// import chapterSeven from "./chapter007.vue"; -// import chapterEight from "./chapter008.vue"; -import miniAudio from "@/components/miniAudio/index.vue"; import NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; import Swiper from "swiper/bundle"; @@ -82,9 +24,10 @@ import Viewer from "viewerjs"; import "viewerjs/dist/viewer.css"; export default { + name: "pageContent", data() { return { - catalogLength: 9, // 鎬荤珷鑺傛暟 + catalogLength: 2, // 鎬荤珷鑺傛暟 showCatalogList: [], // 鏄剧ず鐨勭珷鑺� loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝�� throttleThreshold: 100, // 鑺傛祦闃堝�� @@ -134,7 +77,7 @@ this.initSwiper(); this.initViewer(); this.closeAudio(); - this.saveWord() + this.closeVideo(); }, 200); }, }, @@ -205,8 +148,8 @@ }, 500); // 娴嬭瘯椤甸潰璺宠浆 - // setTimeout(() => { - // this.gotoPage(5,69); + // setTimeout(() => { + // this.gotoPage(6, 30); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", @@ -220,7 +163,7 @@ // ids: ["2ACA9359"] // }); // }, 2000); - // }, 5000); + // }, 500); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") @@ -234,7 +177,7 @@ // txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ", // txtIndex: 57 // }); - // }, 50); + // }, 500); }, methods: { // setZoom1() { @@ -253,6 +196,7 @@ // }, // 婊氬姩鐩戝惉 scrollFun(event) { + this.handleVideoPicture() // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩 if (event.target.scrollTop > this.previousScrollTop) { this.getAduio(); @@ -493,8 +437,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] - ? chapterThemeColor[chapterNum] - : bookThemeColor; + ? chapterThemeColor[chapterNum] + : bookThemeColor; if (themeColor) { domItem.style.color = themeColor; } @@ -511,8 +455,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] - ? chapterThemeColor[chapterNum] - : bookThemeColor; + ? chapterThemeColor[chapterNum] + : bookThemeColor; if (themeColor) { domItem.style.backgroundColor = themeColor; } @@ -529,15 +473,14 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] - ? chapterThemeColor[chapterNum] - : bookThemeColor; + ? chapterThemeColor[chapterNum] + : bookThemeColor; if (themeColor) { domItem.style.borderColor = themeColor; } }); }, getParentWithClass(element, className) { - console.log(element, className, "element, className"); while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { @@ -684,8 +627,8 @@ prevEl: dom.querySelector(".swiper-button-prev"), }, // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� - observer: true, - observeParents: true, + // observer: true, + // observeParents: true // // 濡傛灉闇�瑕佸垎椤靛櫒 // pagination: { // el: (this.container ? this.container : document).querySelector( @@ -757,13 +700,6 @@ const pageData = { pageHeader, chapterOne, - // chapterTwo, - // chapterThree, - // chapterFour, - // chapterFive, - // chapterSix, - // chapterSeven, - // chapterEight, }; // 閬嶅巻鎵�鏈夌珷鑺傛枃浠� for (const key in pageData) { @@ -863,39 +799,7 @@ // 璁板綍楂樹寒淇℃伅 this.highlightData = data; // 璺宠浆 - this.gotoPage(data.catalog, data.page, () => {}); - }, - // 鐐瑰嚮浜嬩欢锛氬皢鐢熷兓鍗曡瘝浼犵粰 涓诲簲鐢� 浠庤�岃皟鐢ㄨ瘝鍏稿姛鑳� - // saveCharacters(event, word) { - // if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { - // this.$store.state.qiankun.chooseWords({ - // type: "word", - // word, - // x: event.pageX, - // y: event.pageY, - // }); - // } - // }, - saveWord() { - const doms = ( - this.container ? this.container : document - ).querySelectorAll(".word-bc"); - for (let index = 0; index < doms.length; index++) { - const dom = doms[index]; - dom.addEventListener('click',(e) => { - let word = null - dom.getAttribute('word') ? word = dom.getAttribute('word') : word = e.srcElement.innerText - console.log('鍗曡瘝',word) - if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { - this.$store.state.qiankun.chooseWords({ - type: "word", - word, - x: e.pageX, - y: e.pageY, - }); - } - }) - } + this.gotoPage(data.catalog, data.page, () => { }); }, // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳� getAduio() { @@ -965,26 +869,55 @@ }); } }, + // 鐐瑰嚮瑙嗛鍏抽棴鍏朵粬 + closeVideo() { + let allVideo = ( + this.container ? this.container : document + ).querySelectorAll(".video"); + for (let index = 0; index < allVideo.length; index++) { + const item = allVideo[index]; + item.addEventListener("playing", (item) => { + const path = item.srcElement.src; + const videoList = Array.from(allVideo); + for (let cindex = 0; cindex < videoList.length; cindex++) { + const citem = videoList[cindex]; + if (citem.currentSrc != path && path) { + citem.pause(); + } + } + }); + } + }, + // 瑙嗛灏忕獥 + handleVideoPicture() { + let doms = ( + this.container ? this.container : document + ).querySelectorAll(".video"); + doms = Array.from(doms) + if (!doms.length) return false + const playVudio = doms + .reverse() + .find((item) => item.paused == false); + if (playVudio) { + const bottomGap = playVudio.getBoundingClientRect().bottom; + const topGap = playVudio.getBoundingClientRect().top; + if (bottomGap < 0 || topGap > window.innerHeight) { + playVudio.requestPictureInPicture(); + } + } + } }, components: { pageHeader, chapterOne, - // chapterTwo, - // chapterThree, - // chapterFour, - // chapterFive, - // chapterSix, - // chapterSeven, - // chapterEight, - // miniAudio, }, }; </script> <style lang="less" scoped> .page-main { - width: 100%; - height: 100%; + width: 100% !important; + height: 100% !important; overflow: auto; .page-content { -- Gitblit v1.9.1