From ee3eb8715b362e975c25f8fb303e41e925a23b3a Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期四, 13 六月 2024 11:57:23 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
/dev/null | 0
src/books/artAndDrama/view/components/header.vue | 7 +-
src/books/artAndDrama/assets/main.less | 10 +++
src/books/artAndDrama/view/components/chapter002.vue | 8 ++
src/books/artAndDrama/view/components/chapter001.vue | 43 ++++++++------
src/books/English/view/components/index.vue | 1
src/books/artAndDrama/view/components/index.vue | 86 ++++++++++++++++++++++++----
7 files changed, 118 insertions(+), 37 deletions(-)
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index a911a6c..8722e79 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -834,6 +834,7 @@
}
// chooseWords
},
+
// 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
getAduio() {
let allVideo = (
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index d978cba..036701d 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/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 */
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 288d87f..cc77a5c 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/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>
<!-- 杩炵嚎棰� -->
@@ -55,10 +55,16 @@
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div style="position: relative; ">
+ <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,13 +231,7 @@
>鐨勩��
</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 />
+ <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">
@@ -485,7 +485,7 @@
showPageList: {
type: Array,
},
- },
+ },
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
this.getVidoePath();
@@ -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>
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index cf089e2..1fb35c7 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/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: [
{
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
deleted file mode 100644
index e69de29..0000000
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ /dev/null
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
deleted file mode 100644
index e69de29..0000000
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ /dev/null
diff --git a/src/books/artAndDrama/view/components/header.vue b/src/books/artAndDrama/view/components/header.vue
index acdc8f3..de54d78 100644
--- a/src/books/artAndDrama/view/components/header.vue
+++ b/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>
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index d53531e..c37fbcf 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/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>
--
Gitblit v1.9.1