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/chapter006.vue | 8
src/books/artAndDance/view/components/chapter003.vue | 4
src/books/artAndDance/view/components/chapter001.vue | 10
src/books/artAndDance/view/components/chapter005.vue | 4
src/books/artAndDance/assets/main.less | 4
src/books/artAndDance/assets/images/fengdi.png | 0
src/books/artAndDance/view/components/header.vue | 16 +-
src/books/artAndDance/view/components/chapter002.vue | 25 ++-
src/books/artAndDrama/view/components/chapter001.vue | 2
src/books/artAndDance/view/components/chapter004.vue | 4
src/books/artAndDance/view/components/index.vue | 116 +++++++++----------
src/App.vue | 2
src/books/artAndDrama/view/components/index.vue | 127 ++++++++++++++------
13 files changed, 187 insertions(+), 135 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 10565ff..b1f30bd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -67,7 +67,7 @@
process.env.VUE_APP_RESOURCE_CTX +
(process.env.VUE_APP_ENV == "product"
? process.env.VUE_APP_BOOK_ID
- : "mathBook")
+ : "artAndDance")
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/artAndDance/assets/images/fengdi.png b/src/books/artAndDance/assets/images/fengdi.png
new file mode 100644
index 0000000..c5b1375
--- /dev/null
+++ b/src/books/artAndDance/assets/images/fengdi.png
Binary files differ
diff --git a/src/books/artAndDance/assets/main.less b/src/books/artAndDance/assets/main.less
index 714d1c2..f263258 100644
--- a/src/books/artAndDance/assets/main.less
+++ b/src/books/artAndDance/assets/main.less
@@ -206,6 +206,7 @@
}
.img-0 {
+ display: flex;
width: 100%;
}
.imz {
@@ -423,6 +424,9 @@
font-family: "FangSong", "PMingLiU", serif;
font-weight: bold;
}
+ .front{
+ text-align: left !important;
+ }
}
/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
diff --git a/src/books/artAndDance/view/components/chapter001.vue b/src/books/artAndDance/view/components/chapter001.vue
index d462483..120eded 100644
--- a/src/books/artAndDance/view/components/chapter001.vue
+++ b/src/books/artAndDance/view/components/chapter001.vue
@@ -20,7 +20,7 @@
<h2 class="lefth2" id="b001">
<img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
</h2>
- <h3 id="c001" class="fw-400 fz-26 mb-20">鍏冪礌</h3>
+ <h3 id="c001" class="fz-26 mb-20">鍏冪礌</h3>
<p class="block2 fw-400 fz-26">鍗曟墜鎸ュ埆</p>
<p class="block1 w70"><span class="ls fz-26">鈥斺�斿崟鏅冩墜</span></p>
<p class="block2 fz-26">鍙屾墜鎸ュ埆</p>
@@ -33,7 +33,7 @@
<img src="../../assets/images/icon/tree.jpg" />
<span class="dl-ib"> 2 </span>
</li>
- <li>
+ <li class="fl">
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
</li>
</ul>
@@ -64,7 +64,7 @@
</li>
</ul>
<h3 id="c003">榛勯工妤奸�佸瓱娴╃劧涔嬪箍闄�</h3>
- <p class="block2 fm-son ">銆斿攼銆曟潕鐧�</p>
+ <p class="block2 fm-son " style="margin-right: 7.5%;">銆斿攼銆曟潕鐧�</p>
<p class="block2 m16-0">鏁呬汉瑗胯緸榛勯工妤硷紝</p>
<p class="block2 m16-0">鐑熻姳涓夋湀涓嬫壃宸炪��</p>
<p class="block2 m16-0">瀛ゅ竼杩滃奖纰х┖灏斤紝</p>
@@ -90,7 +90,7 @@
<img src="../../assets/images/icon/tree.jpg" />
</div>
</li>
- <li>
+ <li class="fl">
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
</li>
</ul>
@@ -137,7 +137,7 @@
<img src="../../assets/images/icon/tree.jpg" />
<span class="dl-ib"> 4 </span>
</li>
- <li>
+ <li class="fl">
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
</li>
</ul>
diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue
index 08778f8..8357ff8 100644
--- a/src/books/artAndDance/view/components/chapter002.vue
+++ b/src/books/artAndDance/view/components/chapter002.vue
@@ -17,18 +17,17 @@
<p class="center">
<img class="img-b" alt="" src="../../assets/images/04-2.gif" />
</p>
- <!-- <ul class="fl al-cn ju-bt img-state " style="margin-top: 100px;">
+ <ul class="fl al-cn ju-bt img-state " style="min-height: 370px" >
<li style="width: 45%;">
- <img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:num / 10}">
+ <img @click="clickImg" title="鐐瑰嚮姝ゅ鏌ョ湅鍥剧墖" src="../../assets/images/05.gif" alt="" class="w100" style="cursor:pointer" >
</li>
- <li style="width: 35%;">
- <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: (-num) / 10}">
+ <li style="width: 35%;" v-if="appearsImg">
+ <img src="../../assets/images/girl.png" alt="" class="w100" >
</li>
- </ul> -->
- <p class="center">
+ </ul>
+ <!-- <p class="center">
<img :src="num >= 0 ? shape : girl" alt="" :style="{opacity:num >= 0 ? num / 10 : (-num) / 10 , width:num >= 0 ? '80%' : '34%'}">
- </p>
-
+ </p> -->
<p class="img">鈥滅緤瑙掑紡鈥濊垶濮�</p>
</div>
<ul class="pb-box">
@@ -36,7 +35,7 @@
<img src="../../assets/images/icon/tree.jpg" />
<span class="dl-ib"> 6 </span>
</li>
- <li>
+ <li class="fl">
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
</li>
</ul>
@@ -90,7 +89,7 @@
<img src="../../assets/images/icon/tree.jpg" />
</div>
</li>
- <li>
+ <li class="fl">
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
</li>
</ul>
@@ -157,7 +156,7 @@
<img src="../../assets/images/icon/tree.jpg" />
<span class="dl-ib"> 8 </span>
</li>
- <li>
+ <li class="fl">
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
</li>
</ul>
@@ -195,6 +194,7 @@
cutTimer:null,
auidoPathOne:"",
auidoPathTwo:"",
+ appearsImg: false,
shape:require("../../assets/images/05.gif"),
girl:require("../../assets/images/girl.png")
};
@@ -225,6 +225,9 @@
}
},200)
},
+ clickImg(){
+ this.appearsImg = !this.appearsImg
+ },
},
};
</script>
diff --git a/src/books/artAndDance/view/components/chapter003.vue b/src/books/artAndDance/view/components/chapter003.vue
index 7091624..42f5ff2 100644
--- a/src/books/artAndDance/view/components/chapter003.vue
+++ b/src/books/artAndDance/view/components/chapter003.vue
@@ -63,8 +63,8 @@
<audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</li>
</ul>
- <h3 id="c009">灏忓効鍨傞挀</h3>
- <p class="block2 fm-son">銆斿攼銆曡儭浠よ兘</p>
+ <h3 id="c009" style="margin-right: 4.5%;">灏忓効鍨傞挀</h3>
+ <p class="block2 fm-son" style="margin-right: 7.5%;">銆斿攼銆曡儭浠よ兘</p>
<p class="block2 m16-0">钃ご绋氬瓙瀛﹀瀭绾讹紝</p>
<p class="block2 m16-0">渚у潗鑾撹嫈鑽夋槧韬��</p>
<p class="block2 m16-0">璺汉鍊熼棶閬ユ嫑鎵嬶紝</p>
diff --git a/src/books/artAndDance/view/components/chapter004.vue b/src/books/artAndDance/view/components/chapter004.vue
index 73e3e16..cfe88c0 100644
--- a/src/books/artAndDance/view/components/chapter004.vue
+++ b/src/books/artAndDance/view/components/chapter004.vue
@@ -69,8 +69,8 @@
<audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
</li>
</ul>
- <h3 id="c012">瀵婚殣鑰呬笉閬�</h3>
- <p class="block2 fm-son">銆斿攼銆曡淳宀�</p>
+ <h3 id="c012" style="margin-right: 6%;">瀵婚殣鑰呬笉閬�</h3>
+ <p class="block2 fm-son" style="margin-right: 8%;">銆斿攼銆曡淳宀�</p>
<p class="block2 m16-0">鏉句笅闂瀛愶紝瑷�甯堥噰鑽幓銆�</p>
<p class="block2 m16-0">鍙湪姝ゅ北涓紝浜戞繁涓嶇煡澶勩��</p>
<video
diff --git a/src/books/artAndDance/view/components/chapter005.vue b/src/books/artAndDance/view/components/chapter005.vue
index 699ddd4..8c103b2 100644
--- a/src/books/artAndDance/view/components/chapter005.vue
+++ b/src/books/artAndDance/view/components/chapter005.vue
@@ -86,8 +86,8 @@
></audio>
</li>
</ul>
- <h3 id="c015">娓旀瓕瀛�</h3>
- <p class="block2 fm-son">銆斿攼銆曞紶蹇楀拰</p>
+ <h3 id="c015" style="margin-right: 3%;" >娓旀瓕瀛�</h3>
+ <p class="block2 fm-son" style="margin-right: 7%;">銆斿攼銆曞紶蹇楀拰</p>
<p class="block2 m16-0">瑗垮灞卞墠鐧介弓椋烇紝</p>
<p class="block2 m16-0">妗冭姳娴佹按槌滈奔鑲ャ��</p>
</div>
diff --git a/src/books/artAndDance/view/components/chapter006.vue b/src/books/artAndDance/view/components/chapter006.vue
index 5a18c81..1658b05 100644
--- a/src/books/artAndDance/view/components/chapter006.vue
+++ b/src/books/artAndDance/view/components/chapter006.vue
@@ -311,9 +311,11 @@
</ul>
</div>
</div>
- <!-- <div class="page-box" page="30">
- <paint ></paint>
- </div> -->
+ <div class="page-box mt-20" page="30">
+ <div v-if="showPageList.indexOf(30) > -1">
+ <img class="img-0" alt="" src="../../assets/images/fengdi.png" />
+ </div>
+ </div>
</div>
</template>
diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue
index 04df044..ebc24ca 100644
--- a/src/books/artAndDance/view/components/header.vue
+++ b/src/books/artAndDance/view/components/header.vue
@@ -20,12 +20,12 @@
<div class="bodystyle" style="margin-bottom: 100px">
<h1 id="a003" class="front">缂栧浼�</h1>
<hr />
- <p>椤俱��銆�闂細<span class="kaiti">褰悏璞°��鍚曡壓鐢�</span></p>
- <p>涓汇��銆�缂栵細<span class="kaiti">鐜嬫澃</span></p>
- <p>鍓� 涓� 缂栵細<span class="kaiti">浜庢檽闆��寰愭ⅵ濠�</span></p>
+ <p class="kaiti">椤俱��銆�闂細<span class="kaiti">褰悏璞°��鍚曡壓鐢�</span></p>
+ <p class="kaiti">涓汇��銆�缂栵細<span class="kaiti">鐜嬫澃</span></p>
+ <p class="kaiti">鍓� 涓� 缂栵細<span class="kaiti">浜庢檽闆��寰愭ⅵ濠�</span></p>
<ul class="fl">
<li>
- <p class="wh-nr">缂栧啓濮斿憳锛�</p>
+ <p class="wh-nr kaiti">缂栧啓濮斿憳锛�</p>
</li>
<li class="fl fl-cl">
<span class="kaiti">閭㈤珮鐔欍��鐜嬨��鐜层��鐜嬨��閿︺��宕旀槬鏉�</span>
@@ -33,16 +33,16 @@
<span class="kaiti">鏌��鍜忋��寮犺壓鐟躲��灏氬皬闆��鍛ㄣ��鐙�</span>
</li>
</ul>
- <p>缇庢湳缁樼敾锛�<span class="kaiti">寮犲鑽�</span></p>
- <p>涓昏鏁欏笀锛�<span class="kaiti">寮犳偊銆�銆�楂樻檽姊�</span></p>
+ <p class="kaiti">缇庢湳缁樼敾锛�<span class="kaiti">寮犲鑽�</span></p>
+ <p class="kaiti">涓昏鏁欏笀锛�<span class="kaiti">寮犳偊銆�銆�楂樻檽姊�</span></p>
<ul class="fl">
<li>
- <p class="wh-nr">琛� 婕� 鑰咃細</p>
+ <p class="wh-nr kaiti">琛� 婕� 鑰咃細</p>
</li>
<li class="fl fl-cl">
<span class="kaiti">钁ｆ仼姹愩��濮氭槦鏈点��鍛ㄦ竻绔广��鏈卞婕�</span>
<span class="kaiti">鎴村槈澧ㄣ��楂樺瓙娣囥��鑸掑崥鐟炪��鏇规仼娣�</span>
- <span class="kaiti">鍒樺瓙鐠愩��閮戞竻濡�</span>
+ <span class="kaiti" style="z-index: 10;">鍒樺瓙鐠愩��閮戞竻濡�</span>
</li>
</ul>
<p></p>
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;
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 1849a0e..2afd848 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -72,7 +72,7 @@
<p class="center text">
<video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
- controlslist="nodownload" class="w100 video "
+ controlslist="nodownload" class="w100 video"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
</p>
<p class="center videoname">
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index 2c93eb8..9c02de6 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -3,20 +3,46 @@
<div id="searchDomBox" style="display: none">
<div id="searchContent"></div>
</div>
- <div class="page-content" :style="{
- fontSize: fontSize ? fontSize + 'px' : '19px',
- 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>
+ <div
+ class="page-content"
+ :style="{
+ fontSize: fontSize ? fontSize + 'px' : '19px',
+ 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>
</div>
<!-- 闊抽灏忕獥鎾斁缁勪欢 -->
- <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
+ <miniAudio
+ :path="audioPath"
+ :currentTime="currentTime"
+ @closeMiniAudio="closeMiniAudio"
+ ref="audioPlayer"
+ >
</miniAudio>
</div>
</template>
@@ -207,6 +233,7 @@
// },
// 婊氬姩鐩戝惉
scrollFun(event) {
+ this.handleVideoPicture()
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
if (event.target.scrollTop > this.previousScrollTop) {
this.getAduio();
@@ -312,7 +339,10 @@
this.container ? this.container : document
).querySelector(`[page="${data.page}"]`);
// 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
- const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
+ const treeWalker = document.createTreeWalker(
+ pageDom,
+ NodeFilter.SHOW_TEXT
+ );
const allTextNodes = [];
let currentNode = treeWalker.nextNode();
while (currentNode) {
@@ -444,8 +474,8 @@
page && pageThemeColor && pageThemeColor[page]
? pageThemeColor[page]
: chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
- ? chapterThemeColor[chapterNum]
- : bookThemeColor;
+ ? chapterThemeColor[chapterNum]
+ : bookThemeColor;
if (themeColor) {
domItem.style.color = themeColor;
}
@@ -462,8 +492,8 @@
page && pageThemeColor && pageThemeColor[page]
? pageThemeColor[page]
: chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
- ? chapterThemeColor[chapterNum]
- : bookThemeColor;
+ ? chapterThemeColor[chapterNum]
+ : bookThemeColor;
if (themeColor) {
domItem.style.backgroundColor = themeColor;
}
@@ -480,8 +510,8 @@
page && pageThemeColor && pageThemeColor[page]
? pageThemeColor[page]
: chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
- ? chapterThemeColor[chapterNum]
- : bookThemeColor;
+ ? chapterThemeColor[chapterNum]
+ : bookThemeColor;
if (themeColor) {
domItem.style.borderColor = themeColor;
}
@@ -577,7 +607,10 @@
// 楂樹寒琛�
setTimeout(() => {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
+ const pageTextList = document.createTreeWalker(
+ target,
+ NodeFilter.SHOW_TEXT
+ );
// 鍖归厤鍏抽敭瀛�
const allPageTextNodes = [];
let currentNode = pageTextList.nextNode();
@@ -728,7 +761,7 @@
propsData: {
showPageList: [],
questionData: {},
- isSearch: true
+ isSearch: true,
},
});
pageExample.$mount(
@@ -760,7 +793,7 @@
propsData: {
showPageList: [pageNum],
questionData: {},
- isSearch: true
+ isSearch: true,
},
});
pageExample.$mount(
@@ -774,7 +807,10 @@
.querySelector(`[page="${pageNum}"]`);
if (thisPageDom) {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
+ const pageTextList = document.createTreeWalker(
+ thisPageDom,
+ NodeFilter.SHOW_TEXT
+ );
// 鍖归厤鍏抽敭瀛�
const allPageTextNodes = [];
let currentNode = pageTextList.nextNode();
@@ -813,7 +849,7 @@
// 璁板綍楂樹寒淇℃伅
this.highlightData = data;
// 璺宠浆
- this.gotoPage(data.catalog, data.page, () => { });
+ this.gotoPage(data.catalog, data.page, () => {});
},
// 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
getAduio() {
@@ -867,17 +903,16 @@
).querySelectorAll(".audio");
for (let index = 0; index < allAudio.length; index++) {
const item = allAudio[index];
- item.addEventListener('play',() => {
+ item.addEventListener("play", () => {
const audioList = Array.from(allAudio);
- for (let cindex = 0; cindex < audioList.length; cindex++) {
+ for (let cindex = 0; cindex < audioList.length; cindex++) {
const citem = audioList[cindex];
- if(citem.currentSrc != item.src) {
- citem.pause()
-
+ if (citem.currentSrc != item.src) {
+ citem.pause();
}
}
- this.closeMiniAudio()
- })
+ this.closeMiniAudio();
+ });
}
},
// 鍏抽棴mini video
@@ -891,18 +926,34 @@
).querySelectorAll(".video");
for (let index = 0; index < allVideo.length; index++) {
const item = allVideo[index];
- item.addEventListener('playing',(item) => {
- const path = item.srcElement.src
+ 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()
+ 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,
@@ -929,4 +980,4 @@
padding-bottom: 100px;
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1