From 5f52ef1659fee6858532c6a9731bd352d2f6fe6f Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期四, 05 九月 2024 15:25:24 +0800 Subject: [PATCH] 舞蹈艺术意见单修改完成 --- src/books/artAndDance/view/components/index.vue | 116 +++++++++++++++++++++++++++------------------------------- 1 files changed, 54 insertions(+), 62 deletions(-) diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue index 7bf5d1c..6636390 100644 --- a/src/books/artAndDance/view/components/index.vue +++ b/src/books/artAndDance/view/components/index.vue @@ -3,50 +3,22 @@ <div id="searchDomBox" style="display: none"> <div id="searchContent"></div> </div> - <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> - <chapterTwo - v-if="showCatalogList.indexOf(3) > -1" - :showPageList="loadPageList" - > + <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> + <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :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> + <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> - <miniAudio - :path="audioPath" - :currentTime="currentTime" - @closeMiniAudio="closeMiniAudio" - ref="audioPlayer" - ></miniAudio> + <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer"> + </miniAudio> </div> </template> @@ -192,19 +164,19 @@ // 娴嬭瘯椤甸潰璺宠浆 // setTimeout(() => { // this.gotoPage(6, 30); - // setTimeout(() => { - // this.renderSign("Highlight", { - // id: "2ACA9359", - // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩", - // page: "10", - // type: "Highlight", - // color: "#F5E12A" - // }); - // setTimeout(() => { - // this.delSign({ - // ids: ["2ACA9359"] - // }); - // }, 2000); + // setTimeout(() => { + // this.renderSign("Highlight", { + // id: "2ACA9359", + // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩", + // page: "10", + // type: "Highlight", + // color: "#F5E12A" + // }); + // setTimeout(() => { + // this.delSign({ + // ids: ["2ACA9359"] + // }); + // }, 2000); // }, 500); // const pageDom = (this.container ? this.container : document) @@ -238,6 +210,7 @@ // }, // 婊氬姩鐩戝惉 scrollFun(event) { + this.handleVideoPicture() // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩 if (event.target.scrollTop > this.previousScrollTop) { this.getAduio(); @@ -478,8 +451,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] - ? chapterThemeColor[chapterNum] - : bookThemeColor; + ? chapterThemeColor[chapterNum] + : bookThemeColor; if (themeColor) { domItem.style.color = themeColor; } @@ -496,8 +469,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] - ? chapterThemeColor[chapterNum] - : bookThemeColor; + ? chapterThemeColor[chapterNum] + : bookThemeColor; if (themeColor) { domItem.style.backgroundColor = themeColor; } @@ -514,8 +487,8 @@ page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] - ? chapterThemeColor[chapterNum] - : bookThemeColor; + ? chapterThemeColor[chapterNum] + : bookThemeColor; if (themeColor) { domItem.style.borderColor = themeColor; } @@ -846,7 +819,7 @@ // 璁板綍楂樹寒淇℃伅 this.highlightData = data; // 璺宠浆 - this.gotoPage(data.catalog, data.page, () => {}); + this.gotoPage(data.catalog, data.page, () => { }); }, // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳� getAduio() { @@ -935,6 +908,24 @@ }); } }, + // 瑙嗛灏忕獥 + 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, @@ -954,6 +945,7 @@ width: 100%; height: 100%; overflow: auto; + .page-content { max-width: 816px; min-width: 375px; -- Gitblit v1.9.1