From 3fb594dc317848107fd7bbb51631cfb763c19f5f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 05 六月 2024 18:47:03 +0800
Subject: [PATCH] 舞蹈分页
---
src/books/English/view/components/chapter001.vue | 4
src/books/artAndDance/assets/images/06.gif | 0
src/books/artAndDance/view/components/chapter003.vue | 187 ++++++++
src/books/artAndDance/assets/images/image27-4.jpg | 0
src/books/artAndDance/assets/images/image28-1.jpg | 0
src/books/artAndDance/assets/images/image26-2.jpg | 0
src/books/artAndDance/assets/images/chapter-four-header.png | 0
src/books/artAndDance/assets/main.less | 32 +
src/books/artAndDance/assets/images/image27-1.jpg | 0
src/books/artAndDance/assets/images/image29-3.jpg | 0
src/books/artAndDance/assets/images/08.gif | 0
src/books/artAndDance/assets/images/image30-1.jpg | 0
src/books/artAndDance/assets/images/07.gif | 0
src/books/artAndDance/view/components/chapter004.vue | 191 +++++++++
src/books/artAndDance/assets/images/image26-3.jpg | 0
src/books/artAndDance/view/components/index.vue | 27 +
src/assets/methods/resources.js | 4
src/books/artAndDance/assets/images/chapter-three-header.png | 0
src/books/artAndDance/assets/images/image28-2.jpg | 0
src/books/English/view/components/index.vue | 55 ++
src/books/artAndDance/assets/images/10-2.gif | 0
src/books/artAndDance/assets/images/image27-2.jpg | 0
src/books/artAndDance/assets/images/chapter-five-header.png | 0
src/books/artAndDance/view/components/chapter006.vue | 333 +++++++++++++++
src/books/artAndDance/assets/images/image29-1.jpg | 0
src/books/artAndDance/assets/images/image30-2.jpg | 0
src/books/artAndDance/assets/images/09.gif | 0
src/books/artAndDance/view/components/chapter001.vue | 40 +
src/books/artAndDance/assets/images/image30-3.jpg | 0
src/books/artAndDance/view/components/chapter005.vue | 240 +++++++++++
src/books/artAndDance/assets/images/image26-4.jpg | 0
src/books/artAndDance/assets/images/image28-3.jpg | 0
src/books/artAndDance/view/components/header.vue | 4
src/books/artAndDance/assets/images/image27-3.jpg | 0
src/books/artAndDance/view/components/chapter002.vue | 27 +
src/books/artAndDance/assets/images/image29-2.jpg | 0
src/books/artAndDance/assets/images/rise.png | 0
src/books/artAndDance/assets/images/image30-4.jpg | 0
src/components/matching/matching.vue | 39 -
src/books/artAndDance/assets/images/crane.png | 0
src/books/artAndDance/assets/images/image26-1.jpg | 0
src/components/miniAudio/index.vue | 58 ++
src/App.vue | 2
src/books/artAndDance/assets/images/image28-4.jpg | 0
44 files changed, 1,179 insertions(+), 64 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 4bc027e..de22ec3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,7 +72,7 @@
// embedded
// english
// artAndDance
- this.config.resourceCtx + "childHealth"
+ this.config.resourceCtx + "artAndDance"
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/assets/methods/resources.js b/src/assets/methods/resources.js
index 37168bb..95409fb 100644
--- a/src/assets/methods/resources.js
+++ b/src/assets/methods/resources.js
@@ -4,8 +4,8 @@
await fileApi.getAliVod({
md5,appRefCode
}).then(res => {
- if(res.data.length) {
- path = res.data
+ if(typeof res == 'string') {
+ path = res
} else {
path = process.env.VUE_APP_API_URL + '/file/api/ApiDownload?md5=' + md5
}
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index d7b3a6e..8978021 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -514,9 +514,9 @@
corresponding descriptions.</b
>
</p>
- <p class="center">
+ <!-- <p class="center">
<img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
- </p>
+ </p> -->
<div>
<ul class="fl ju-bt">
<li>Speakers銆�Chinese Cultural Symbols</li>
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 3af9f8a..7729adb 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -18,7 +18,11 @@
:showPageList="loadPageList"
></chapterOne>
</div>
- <miniAudio :path="audioPath"></miniAudio>
+ <miniAudio
+ :path="audioPath"
+ :currentTime="currentTime"
+ ref="audioPlayer"
+ ></miniAudio>
</div>
</template>
@@ -47,7 +51,9 @@
loadPageList: [],
questionData: {},
renderSignMap: {},
- audioPath:''
+ audioPath: "",
+ currentTime: null,
+ videoList: [],
};
},
computed: {
@@ -82,7 +88,7 @@
setTimeout(() => {
this.initSwiper();
this.initViewer();
- this.getAduio();
+ // this.getAduio();
}, 200);
},
},
@@ -160,6 +166,7 @@
scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
if (event.target.scrollTop > this.previousScrollTop) {
+ this.getAduio();
// 鍚戜笅
const currentScrollTop =
event.target.scrollTop + event.target.offsetHeight;
@@ -183,6 +190,7 @@
}
}
} else if (event.target.scrollTop < this.previousScrollTop) {
+ this.handleAudio();
// 鍚戜笂
const currentScrollTop = event.target.scrollTop;
if (currentScrollTop <= this.loadThreshold) {
@@ -635,17 +643,48 @@
}
// chooseWords
},
- // 鑾峰彇auido瀹炰緥
+ // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
getAduio() {
let allVideo = (
this.container ? this.container : document
).querySelectorAll(".audio");
- allVideo = Array.from(allVideo)
+ allVideo = Array.from(allVideo);
+ this.videoList = allVideo;
if (allVideo.length) {
- const playAudio = allVideo.reverse().find((item) => item.paused == false);
+ // 鏌ユ壘鎾斁鐘舵�佺殑鏈�鍚庝竴鏉￠煶棰�
+ const playAudio = allVideo
+ .reverse()
+ .find((item) => item.paused == false);
if (playAudio) {
- console.log("绗釜闊抽鍦ㄦ挱鏀�", playAudio.src);
- this.audioPath = playAudio.src
+ 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();
+ }
+ }
}
}
},
diff --git a/src/books/artAndDance/assets/images/06.gif b/src/books/artAndDance/assets/images/06.gif
new file mode 100644
index 0000000..d898022
--- /dev/null
+++ b/src/books/artAndDance/assets/images/06.gif
Binary files differ
diff --git a/src/books/artAndDance/assets/images/07.gif b/src/books/artAndDance/assets/images/07.gif
new file mode 100644
index 0000000..b1ea008
--- /dev/null
+++ b/src/books/artAndDance/assets/images/07.gif
Binary files differ
diff --git a/src/books/artAndDance/assets/images/08.gif b/src/books/artAndDance/assets/images/08.gif
new file mode 100644
index 0000000..e1d2936
--- /dev/null
+++ b/src/books/artAndDance/assets/images/08.gif
Binary files differ
diff --git a/src/books/artAndDance/assets/images/09.gif b/src/books/artAndDance/assets/images/09.gif
new file mode 100644
index 0000000..e93c1c3
--- /dev/null
+++ b/src/books/artAndDance/assets/images/09.gif
Binary files differ
diff --git a/src/books/artAndDance/assets/images/10-2.gif b/src/books/artAndDance/assets/images/10-2.gif
new file mode 100644
index 0000000..8913cc7
--- /dev/null
+++ b/src/books/artAndDance/assets/images/10-2.gif
Binary files differ
diff --git a/src/books/artAndDance/assets/images/chapter-five-header.png b/src/books/artAndDance/assets/images/chapter-five-header.png
new file mode 100644
index 0000000..69c447b
--- /dev/null
+++ b/src/books/artAndDance/assets/images/chapter-five-header.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/chapter-four-header.png b/src/books/artAndDance/assets/images/chapter-four-header.png
new file mode 100644
index 0000000..b7de987
--- /dev/null
+++ b/src/books/artAndDance/assets/images/chapter-four-header.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/chapter-three-header.png b/src/books/artAndDance/assets/images/chapter-three-header.png
new file mode 100644
index 0000000..2f960d3
--- /dev/null
+++ b/src/books/artAndDance/assets/images/chapter-three-header.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/crane.png b/src/books/artAndDance/assets/images/crane.png
new file mode 100644
index 0000000..42102e4
--- /dev/null
+++ b/src/books/artAndDance/assets/images/crane.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-1.jpg b/src/books/artAndDance/assets/images/image26-1.jpg
index 71a2cf8..7b2ccca 100644
--- a/src/books/artAndDance/assets/images/image26-1.jpg
+++ b/src/books/artAndDance/assets/images/image26-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-2.jpg b/src/books/artAndDance/assets/images/image26-2.jpg
index b60baf1..0e602b1 100644
--- a/src/books/artAndDance/assets/images/image26-2.jpg
+++ b/src/books/artAndDance/assets/images/image26-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-3.jpg b/src/books/artAndDance/assets/images/image26-3.jpg
index 353ca5e..db761e8 100644
--- a/src/books/artAndDance/assets/images/image26-3.jpg
+++ b/src/books/artAndDance/assets/images/image26-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-4.jpg b/src/books/artAndDance/assets/images/image26-4.jpg
index 3095046..b624f0f 100644
--- a/src/books/artAndDance/assets/images/image26-4.jpg
+++ b/src/books/artAndDance/assets/images/image26-4.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-1.jpg b/src/books/artAndDance/assets/images/image27-1.jpg
index 484eb1c..252f193 100644
--- a/src/books/artAndDance/assets/images/image27-1.jpg
+++ b/src/books/artAndDance/assets/images/image27-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-2.jpg b/src/books/artAndDance/assets/images/image27-2.jpg
index eab8076..66b0489 100644
--- a/src/books/artAndDance/assets/images/image27-2.jpg
+++ b/src/books/artAndDance/assets/images/image27-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-3.jpg b/src/books/artAndDance/assets/images/image27-3.jpg
index 7eed5d8..d584d64 100644
--- a/src/books/artAndDance/assets/images/image27-3.jpg
+++ b/src/books/artAndDance/assets/images/image27-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-4.jpg b/src/books/artAndDance/assets/images/image27-4.jpg
index 9b55c8f..000d0db 100644
--- a/src/books/artAndDance/assets/images/image27-4.jpg
+++ b/src/books/artAndDance/assets/images/image27-4.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-1.jpg b/src/books/artAndDance/assets/images/image28-1.jpg
index 6867c09..1e983cc 100644
--- a/src/books/artAndDance/assets/images/image28-1.jpg
+++ b/src/books/artAndDance/assets/images/image28-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-2.jpg b/src/books/artAndDance/assets/images/image28-2.jpg
index aae4239..9ed2a18 100644
--- a/src/books/artAndDance/assets/images/image28-2.jpg
+++ b/src/books/artAndDance/assets/images/image28-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-3.jpg b/src/books/artAndDance/assets/images/image28-3.jpg
index b8fdeff..2dc30b8 100644
--- a/src/books/artAndDance/assets/images/image28-3.jpg
+++ b/src/books/artAndDance/assets/images/image28-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-4.jpg b/src/books/artAndDance/assets/images/image28-4.jpg
index 5d60b1a..cd3e38d 100644
--- a/src/books/artAndDance/assets/images/image28-4.jpg
+++ b/src/books/artAndDance/assets/images/image28-4.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-1.jpg b/src/books/artAndDance/assets/images/image29-1.jpg
index 6012bb2..b1e92eb 100644
--- a/src/books/artAndDance/assets/images/image29-1.jpg
+++ b/src/books/artAndDance/assets/images/image29-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-2.jpg b/src/books/artAndDance/assets/images/image29-2.jpg
index 274329e..87ef8c6 100644
--- a/src/books/artAndDance/assets/images/image29-2.jpg
+++ b/src/books/artAndDance/assets/images/image29-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-3.jpg b/src/books/artAndDance/assets/images/image29-3.jpg
index cc68bb1..7be96b2 100644
--- a/src/books/artAndDance/assets/images/image29-3.jpg
+++ b/src/books/artAndDance/assets/images/image29-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-1.jpg b/src/books/artAndDance/assets/images/image30-1.jpg
index feed285..c22dbaa 100644
--- a/src/books/artAndDance/assets/images/image30-1.jpg
+++ b/src/books/artAndDance/assets/images/image30-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-2.jpg b/src/books/artAndDance/assets/images/image30-2.jpg
index 08f475d..e8bee76 100644
--- a/src/books/artAndDance/assets/images/image30-2.jpg
+++ b/src/books/artAndDance/assets/images/image30-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-3.jpg b/src/books/artAndDance/assets/images/image30-3.jpg
index 0d05cb9..ff3703d 100644
--- a/src/books/artAndDance/assets/images/image30-3.jpg
+++ b/src/books/artAndDance/assets/images/image30-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-4.jpg b/src/books/artAndDance/assets/images/image30-4.jpg
index e5ef59a..0685c41 100644
--- a/src/books/artAndDance/assets/images/image30-4.jpg
+++ b/src/books/artAndDance/assets/images/image30-4.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/rise.png b/src/books/artAndDance/assets/images/rise.png
new file mode 100644
index 0000000..bbf2dfe
--- /dev/null
+++ b/src/books/artAndDance/assets/images/rise.png
Binary files differ
diff --git a/src/books/artAndDance/assets/main.less b/src/books/artAndDance/assets/main.less
index ba003e5..a44cdff 100644
--- a/src/books/artAndDance/assets/main.less
+++ b/src/books/artAndDance/assets/main.less
@@ -159,7 +159,7 @@
h2.whleft2 {
text-align: left;
color: #af0206;
- font-size: 1.2em;
+ font-size: 38px;
margin-top: 0.2em;
margin-bottom: 0.2em;
text-indent: 0em;
@@ -403,6 +403,16 @@
}
/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
+@media (max-width: 430px) {
+ .ans-dance {
+ .page-box {
+ min-height: 750px;
+ }
+ .pg-mh {
+ min-height: 815px;
+ }
+ }
+}
@media (max-width: 660px) {
.ans-dance {
/* 鍒嗛〉padding */
@@ -416,6 +426,16 @@
.video-box {
max-width: 260px;
}
+ .audio-box {
+ margin-top: 20px;
+ flex-wrap: wrap;
+ li {
+ width: 100%;
+ }
+ li:nth-child(2) {
+ margin-top: 10px;
+ }
+ }
}
}
@media (min-width: 660px) {
@@ -429,5 +449,15 @@
.video-box {
max-width: 370px;
}
+ .audio-box {
+ margin-top: 20px;
+ flex-wrap: nowrap;
+ li {
+ width: 50%;
+ }
+ li:nth-child(2) {
+ margin-left: 10px;
+ }
+ }
}
}
\ No newline at end of file
diff --git a/src/books/artAndDance/view/components/chapter001.vue b/src/books/artAndDance/view/components/chapter001.vue
index 2c63268..8936c81 100644
--- a/src/books/artAndDance/view/components/chapter001.vue
+++ b/src/books/artAndDance/view/components/chapter001.vue
@@ -4,10 +4,11 @@
<div v-if="showPageList.indexOf(4) > -1">
<img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
<img src="../../assets/images/01.gif" alt="" style="width: 53%;" class="cover-img">
+ <audio></audio>
</div>
</div>
<div class="page-box" page="5">
- <div v-if="showPageList.indexOf(5) > -1" class="pg-mh fl fl-cl ju-bt">
+ <div v-if="showPageList.indexOf(5) > -1" class="pg-mh fl fl-cl">
<img
src="../../assets/images/pageContentHeader.jpg"
alt=""
@@ -28,7 +29,7 @@
<p class="block2 fz-26">閰嶅悎姝ヤ紣</p>
<p class="block1 w70"><span class="ls fz-26">鈥斺�斾笂姝ユ檭鎵�</span></p>
</div>
- <ul>
+ <ul class="pb-box">
<li class="ml-40">
<img src="../../assets/images/icon/tree.jpg" />
<span class="dl-ib"> 2 </span>
@@ -51,6 +52,24 @@
<h2 class="lefth2" id="b002">
<img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
</h2>
+ <ul class="fl audio-box">
+ <li class="fl al-cn">
+ <span class="wh-nr">鐢风闊�</span>
+ <audio :src="auidoPathOne" controls></audio>
+ </li>
+ <li class="fl al-cn">
+ <span class="wh-nr">
+ 濂崇闊�
+ </span>
+ <audio :src="auidoPathTwo" controls></audio>
+ </li>
+ </ul>
+ <h3 id="c003">榛勯工妤奸�佸瓱娴╃劧涔嬪箍闄�</h3>
+ <p class="block2">銆斿攼銆曟潕鐧�</p>
+ <p class="block2">鏁呬汉瑗胯緸榛勯工妤硷紝</p>
+ <p class="block2">鐑熻姳涓夋湀涓嬫壃宸炪��</p>
+ <p class="block2">瀛ゅ竼杩滃奖纰х┖灏斤紝</p>
+ <p class="block2">鍞闀挎睙澶╅檯娴併��</p>
<video
:src="videoPathOne"
webkit-playsinline="true"
@@ -62,12 +81,6 @@
controls
class="w100"
></video>
- <h3 id="c003">榛勯工妤奸�佸瓱娴╃劧涔嬪箍闄�</h3>
- <p class="block2">銆斿攼銆曟潕鐧�</p>
- <p class="block2">鏁呬汉瑗胯緸榛勯工妤硷紝</p>
- <p class="block2">鐑熻姳涓夋湀涓嬫壃宸炪��</p>
- <p class="block2">瀛ゅ竼杩滃奖纰х┖灏斤紝</p>
- <p class="block2">鍞闀挎睙澶╅檯娴併��</p>
<p class="center">
<img class="img-g" alt="" src="image/i0007-1.jpg" />
</p>
@@ -137,7 +150,7 @@
</template>
<script>
-import getResourcePath from "@/assets/methods/resources";
+import {getResourcePath} from "@/assets/methods/resources";
export default {
name: "chapterOne",
props: {
@@ -151,11 +164,16 @@
data() {
return {
videoPathOne: "",
+ auidoPathOne:"",
+ auidoPathTwo:"",
+
};
},
methods: {
- getVidoePath() {
- this.videoPathOne = getResourcePath("db8040667457cc6fc9b0209009acb316");
+ async getVidoePath() {
+ this.videoPathOne = await getResourcePath("db8040667457cc6fc9b0209009acb316");
+ this.auidoPathOne = await getResourcePath("2c5f6c69b0f9f7a3c03e473cb8c977f5");
+ this.auidoPathTwo = await getResourcePath("e93c0fdde08be5a4386c8c863892a287");
},
},
};
diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue
index 36c736e..b71081b 100644
--- a/src/books/artAndDance/view/components/chapter002.vue
+++ b/src/books/artAndDance/view/components/chapter002.vue
@@ -62,6 +62,18 @@
<h2 class="lefth2" id="b006">
<img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
</h2>
+ <ul class="fl audio-box">
+ <li class="fl al-cn">
+ <span class="wh-nr">鐢风闊�</span>
+ <audio :src="auidoPathOne" controls></audio>
+ </li>
+ <li class="fl al-cn">
+ <span class="wh-nr">
+ 濂崇闊�
+ </span>
+ <audio :src="auidoPathTwo" controls></audio>
+ </li>
+ </ul>
<h3 id="c006">浜＄緤琛ョ墷</h3>
<p class="block2">甯竴鍏�</p>
<p class="block2">缇婂晩缇婂晩鍜╁挬鍙紝鏈夊彧灏忕緤涓嶈浜嗐��</p>
@@ -134,7 +146,7 @@
</div>
<!-- <p class="center"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></p> -->
</div>
- <ul class="pb-box">
+ <ul style="margin-top: 20px">
<li class="ml-40">
<img src="../../assets/images/icon/tree.jpg" />
<span class="dl-ib"> 8 </span>
@@ -149,7 +161,7 @@
</template>
<script>
-import getResourcePath from "@/assets/methods/resources";
+import {getResourcePath} from "@/assets/methods/resources";
export default {
name: "chapterTwo",
props: {
@@ -174,12 +186,17 @@
videoPathOne: "",
num:0,
addTimer:null,
- cutTimer:null
+ cutTimer:null,
+ auidoPathOne:"",
+ auidoPathTwo:"",
+
};
},
methods: {
- getVidoePath() {
- this.videoPathOne = getResourcePath("f6aaaed901868114d948031615250bed");
+ async getVidoePath() {
+ this.videoPathOne = await getResourcePath("f6aaaed901868114d948031615250bed");
+ this.auidoPathOne = await getResourcePath("39fd9a021904ed3de1b8b9e036777ea3");
+ this.auidoPathTwo = await getResourcePath("a143777eff52ee24e53521d16afc85d9");
},
addNum() {
this.addTimer = setInterval(() => {
diff --git a/src/books/artAndDance/view/components/chapter003.vue b/src/books/artAndDance/view/components/chapter003.vue
new file mode 100644
index 0000000..55d0e3d
--- /dev/null
+++ b/src/books/artAndDance/view/components/chapter003.vue
@@ -0,0 +1,187 @@
+<template>
+ <div class="chapter" num="4">
+ <div class="page-box" page="12" style="min-height: auto">
+ <div v-if="showPageList.indexOf(12) > -1">
+ <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
+ <img src="../../assets/images/07.gif" alt="" style="width: 56%;" class="cover-gif">
+ </div>
+ </div>
+ <div class="page-box" page="13">
+ <div v-if="showPageList.indexOf(13) > -1" class="pg-mh fl fl-cl">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <p class="center">
+ <img class="img-a" alt="" src="../../assets/images/06.gif" />
+ </p>
+ <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>
+ <p class="block2 fw-400 fz-26">鍙屾墜鎸変簬韬綋涓ゆ梺锛屾ā浠垮绔ュぉ鐪熷彲鐖辩殑鏍峰瓙</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�旀梺鎸夋墜</span></p>
+ <p class="block2 fz-26">鍗曟墜鏃佹寜锛屾寚鍚�1鐐规柟鍚�</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�旀ā浠块挀楸�</span></p>
+ <p class="block2 fz-26">鍗曡吙浜ゆ浛鍚歌烦</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�斿惛璺虫</span></p>
+ </div>
+ <ul class="pb-box">
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 10 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="14">
+ <div v-if="showPageList.indexOf(14) > -1">
+ <div>
+ <img src="../../assets/images/chapter-three-header.png" class="w100" />
+ </div>
+ <div class="padding-96">
+ <h3 id="c002">绌洪棿涓庢柟鍚�</h3>
+ <p class="block2">楂樸�佷腑绌洪棿</p>
+ <p class="block2">1銆�2銆�4銆�8鐐规柟鍚�</p>
+ <h2 class="lefth2" id="b002">
+ <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
+ </h2>
+ <ul class="fl audio-box">
+ <li class="fl al-cn">
+ <span class="wh-nr">鐢风闊�</span>
+ <audio :src="auidoPathOne" controls></audio>
+ </li>
+ <li class="fl al-cn">
+ <span class="wh-nr">
+ 濂崇闊�
+ </span>
+ <audio :src="auidoPathTwo" controls></audio>
+ </li>
+ </ul>
+ <h3 id="c009">灏忓効鍨傞挀</h3>
+ <p class="block2">銆斿攼銆曡儭浠よ兘</p>
+ <p class="block2">钃ご绋氬瓙瀛﹀瀭绾讹紝</p>
+ <p class="block2">渚у潗鑾撹嫈鑽夋槧韬��</p>
+ <p class="block2">璺汉鍊熼棶閬ユ嫑鎵嬶紝</p>
+ <p class="block2">鎬曞緱楸兼儕涓嶅簲浜恒��</p>
+ <video
+ :src="videoPathOne"
+ webkit-playsinline="true"
+ x-webkit-airplay="true"
+ playsinline="true"
+ x5-video-orientation="h5"
+ x5-video-player-fullscreen="true"
+ x5-playsinline=""
+ controls
+ class="w100"
+ ></video>
+ <p class="center">
+ <img class="img-g" alt="" src="image/i0007-1.jpg" />
+ </p>
+ <h2 class="lefth2" id="b003">
+ <img class="img-gn" alt="" src="image/czysj.jpg" />
+ </h2>
+ </div>
+ <ul>
+ <li class="fl ju-end mr-40">
+ <div>
+ <span class="dl-ib"> 11 </span>
+ <img src="../../assets/images/icon/tree.jpg" />
+ </div>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="15">
+ <div v-if="showPageList.indexOf(15) > -1" class="pg-mh">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <div class="bj1">
+ <p class="block">
+ <img
+ class="inline"
+ alt=""
+ src="../../assets/images/dn.png"
+ />杩愮敤鎵�瀛﹁垶韫堝厓绱狅紝璁剧珛瀛╃閽撻奔鐨勪袱涓笉鍚屽満鏅��
+ </p>
+ <p class="block">
+ <img
+ class="inline"
+ alt=""
+ src="../../assets/images/dn.png"
+ />瀛︾敓鑷効鍒嗙粍锛屾瘡缁勮嚜琛岃缃笌璇ヨ瘲鎯呮劅鐩稿叧鐨勪富棰橈紝鍦ㄦ暀甯堢殑寮曞涓嬭繘琛屽垱缂栵紝骞跺瘜鏈夋儏鎰熷湴灞曠ず鍑烘潵銆�
+ </p>
+ </div>
+ <h2 class="lefth2" id="b004">
+ <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
+ </h2>
+ <div class="bj2">
+ <p class="block">
+ 瑙傚療鐢熸椿涓挀楸艰�呯殑褰㈣薄锛屾牴鎹凡瀛﹁垶韫堝厓绱狅紝鍒涚紪鍑烘柊鐨勫崟涓�鑸炶箞鍔ㄤ綔鎴栬�呴�犲瀷鍚с��
+ </p>
+ </div>
+ <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
+ </div>
+ <ul class="pb-box">
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 12 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import {getResourcePath} from "@/assets/methods/resources";
+ export default {
+ name:"chapterThree",
+ props:{
+ showPageList:{
+ type:Array,
+ }
+ },
+ mounted() {
+ this.getVidoePath()
+ },
+ data() {
+ return {
+ videoPathOne:"",
+ auidoPathOne:"",
+ auidoPathTwo:""
+ }
+ },
+ methods: {
+ async getVidoePath() {
+ this.videoPathOne = await getResourcePath("36a2cffb28e494bea887f9a905b11863");
+ this.auidoPathOne = await getResourcePath("85923e871441c541991be07fe4ce8771");
+ this.auidoPathTwo = await getResourcePath("c018f7a6434abfac0b0e0da1174d643a");
+ },
+ },
+ }
+</script>
+
+<style lang="less" scoped>
+.cover-gif {
+ position: absolute;
+ top: 32%;
+ left: 22%;
+
+}
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDance/view/components/chapter004.vue b/src/books/artAndDance/view/components/chapter004.vue
new file mode 100644
index 0000000..95c2859
--- /dev/null
+++ b/src/books/artAndDance/view/components/chapter004.vue
@@ -0,0 +1,191 @@
+<template>
+ <div class="chapter" num="5">
+ <div class="page-box" page="16" style="min-height: auto;">
+ <div v-if="showPageList.indexOf(16) > -1">
+ <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
+ <img src="../../assets/images/08.gif" alt="" style="width: 55%;" class="cover-gif">
+ </div>
+ </div>
+ <div class="page-box" page="17">
+ <div v-if="showPageList.indexOf(17) > -1" class="pg-mh fl fl-cl ju-bt">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <p class="center">
+ <img class="img-a" alt="" src="../../assets/images/09.gif" />
+ </p>
+ <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>
+ <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>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�斿崟灞辫唨銆佸弻灞辫唨</span></p>
+ <p class="block2 fz-26">鍗曡噦浜庡ご椤朵笂鏂�</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�斿崟鎵樻帉</span></p>
+ <p class="block2 fz-26">鍗曟墜鎴栧弻鎵嬩簬鑳稿墠</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�斿崟鎸夋帉銆佽兏鍓嶄氦鍙夋寜鎺�</span></p>
+ </div>
+ <ul>
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 14 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="18">
+ <div v-if="showPageList.indexOf(18) > -1">
+ <div>
+ <img src="../../assets/images/chapter-four-header.png" class="w100" />
+ </div>
+ <div class="padding-96">
+ <p class="block2 fz-26">鍗曟墭鎺屽拰鍗曞北鑶�鎵�</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�旈『椋庢棗</span></p>
+ <p class="block2 fz-26">鍙岃噦鍚屾椂浣撳墠鍒掑渾</p>
+ <p class="block1 w70"><span class="ls fz-26">鈥斺�斿弻鏅冩墜</span></p>
+ <h3 id="c002">绌洪棿涓庢柟鍚�</h3>
+ <p class="block2">楂樸�佷腑绌洪棿</p>
+ <p class="block2">1-8鐐规柟鍚�</p>
+ <h2 class="lefth2" id="b002">
+ <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
+ </h2>
+ <ul class="fl audio-box">
+ <li class="fl al-cn">
+ <span class="wh-nr">鐢风闊�</span>
+ <audio :src="auidoPathOne" controls></audio>
+ </li>
+ <li class="fl al-cn">
+ <span class="wh-nr">
+ 濂崇闊�
+ </span>
+ <audio :src="auidoPathTwo" controls></audio>
+ </li>
+ </ul>
+ <h3 id="c012">瀵婚殣鑰呬笉閬�</h3>
+ <p class="block2">銆斿攼銆曡淳宀�</p>
+ <p class="block2">鏉句笅闂瀛愶紝瑷�甯堥噰鑽幓銆�</p>
+ <p class="block2">鍙湪姝ゅ北涓紝浜戞繁涓嶇煡澶勩��</p>
+ <video
+ :src="videoPathOne"
+ webkit-playsinline="true"
+ x-webkit-airplay="true"
+ playsinline="true"
+ x5-video-orientation="h5"
+ x5-video-player-fullscreen="true"
+ x5-playsinline=""
+ controls
+ class="w100"
+ ></video>
+ <p class="center">
+ <img class="img-g" alt="" src="image/i0007-1.jpg" />
+ </p>
+ <h2 class="lefth2" id="b003">
+ <img class="img-gn" alt="" src="image/czysj.jpg" />
+ </h2>
+ </div>
+ <ul>
+ <li class="fl ju-end mr-40">
+ <div>
+ <span class="dl-ib"> 15 </span>
+ <img src="../../assets/images/icon/tree.jpg" />
+ </div>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="19">
+ <div v-if="showPageList.indexOf(19) > -1" class="pg-mh">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <div class="bj1">
+ <p class="block">
+ <img
+ class="inline"
+ alt=""
+ src="../../assets/images/dn.png"
+ />杩愮敤鎵�瀛﹁垶韫堝厓绱狅紝璁剧珛璇㈤棶浠栦汉鐨勪袱涓笉鍚屽満鏅��
+ </p>
+ <p class="block">
+ <img
+ class="inline"
+ alt=""
+ src="../../assets/images/dn.png"
+ />瀛︾敓鑷効鍒嗙粍锛屾瘡缁勮嚜琛岃缃笌璇ヨ瘲鎯呮劅鐩稿叧鐨勪富棰橈紝鍦ㄦ暀甯堢殑寮曞涓嬭繘琛屽垱缂栵紝骞跺瘜鏈夋儏鎰熷湴灞曠ず鍑烘潵銆�
+ </p>
+ </div>
+ <h2 class="lefth2" id="b004">
+ <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
+ </h2>
+ <div class="bj2">
+ <p class="block">
+ 璇锋�濊�冧竴涓嬶紝闄や簡鑸炶箞涓�滃彧鍦ㄦ灞变腑鈥濈殑鍔ㄤ綔涔嬪锛岃繕鏈変粈涔堣垶韫堝姩浣滀篃鍙互浣撶幇杩欏彞璇楃殑鍚箟鍛紵
+ </p>
+ </div>
+ <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
+ </div>
+ <ul class="pb-box">
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 16 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import {getResourcePath} from "@/assets/methods/resources";
+ export default {
+ name:"chapterFour",
+ props:{
+ showPageList:{
+ type:Array,
+ }
+ },
+ mounted() {
+ this.getVidoePath()
+ },
+ data() {
+ return {
+ videoPathOne:"",
+ auidoPathOne:"",
+ auidoPathTwo:""
+ }
+ },
+ methods: {
+ async getVidoePath() {
+ this.videoPathOne = await getResourcePath("20b7d2311433c78a4fddf69d09a5fb43");
+ this.auidoPathOne = await getResourcePath("a865ff99b91fa24d87ac81a883be54db");
+ this.auidoPathTwo = await getResourcePath("66f3cc00d272a120514201e13e87fb9d");
+ },
+ },
+ }
+</script>
+
+<style lang="less" scoped>
+.cover-gif {
+ position: absolute;
+ top: 32%;
+ left: 22%;
+
+}
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDance/view/components/chapter005.vue b/src/books/artAndDance/view/components/chapter005.vue
new file mode 100644
index 0000000..c05e589
--- /dev/null
+++ b/src/books/artAndDance/view/components/chapter005.vue
@@ -0,0 +1,240 @@
+<template>
+ <div class="chapter" num="6">
+ <div class="page-box" page="20" style="min-height: auto">
+ <div v-if="showPageList.indexOf(20) > -1">
+ <img class="img-0" alt="" src="../../assets/images/dy5.jpg" />
+ <img
+ src="../../assets/images/10-2.gif"
+ alt=""
+ style="width: 54%"
+ class="cover-gif"
+ />
+ </div>
+ </div>
+ <div class="page-box" page="21">
+ <div v-if="showPageList.indexOf(21) > -1" class="pg-mh fl fl-cl">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <ul class="fl fl-cl al-cn img-state" style="margin-top: 100px">
+ <li style="width: 45%">
+ <img
+ src="../../assets/images/crane.png"
+ alt=""
+ class="w100"
+ :style="{ opacity: (10 - num) / 10 }"
+ />
+ </li>
+ <li style="width: 35%">
+ <img
+ src="../../assets/images/rise.png"
+ alt=""
+ class="w100"
+ :style="{ opacity: num / 10 }"
+ />
+ </li>
+ </ul>
+ <p class="img">鈥滆タ濉炲北鍓嶇櫧楣鈥濆姩浣�</p>
+ </div>
+ <ul class="pb-box">
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 18 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="22">
+ <div v-if="showPageList.indexOf(22) > -1">
+ <div>
+ <img
+ src="../../assets/images/chapter-five-header.png"
+ class="w100"
+ />
+ </div>
+ <div class="padding-96">
+ <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>
+ <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>
+ <p class="block1 w70">
+ <span class="ls fz-26">鈥斺�斿ぇ娉㈡氮鎵�</span>
+ </p>
+ <h3 id="c002">绌洪棿涓庢柟鍚�</h3>
+ <p class="block2">楂樸�佷腑銆佷綆绌洪棿</p>
+ <p class="block2">1銆�2銆�3銆�7銆�8鐐规柟鍚�</p>
+ <h2 class="lefth2" id="b002">
+ <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
+ </h2>
+ <ul class="fl audio-box">
+ <li class="fl al-cn">
+ <span class="wh-nr">鐢风闊�</span>
+ <audio :src="auidoPathOne" controls></audio>
+ </li>
+ <li class="fl al-cn">
+ <span class="wh-nr"> 濂崇闊� </span>
+ <audio :src="auidoPathTwo" controls></audio>
+ </li>
+ </ul>
+ <h3 id="c015">娓旀瓕瀛�</h3>
+ <p class="block2">銆斿攼銆曞紶蹇楀拰</p>
+ <p class="block2">瑗垮灞卞墠鐧介弓椋烇紝</p>
+ <p class="block2">妗冭姳娴佹按槌滈奔鑲ャ��</p>
+ </div>
+ <ul>
+ <li class="fl ju-end mr-40">
+ <div>
+ <span class="dl-ib"> 19 </span>
+ <img src="../../assets/images/icon/tree.jpg" />
+ </div>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="23">
+ <div v-if="showPageList.indexOf(23) > -1" class="pg-mh">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <p class="block2">闈掔绗狅紝缁胯搼琛ｏ紝</p>
+ <p class="block2">鏂滈缁嗛洦涓嶉』褰掋��</p>
+ <video
+ :src="videoPathOne"
+ webkit-playsinline="true"
+ x-webkit-airplay="true"
+ playsinline="true"
+ x5-video-orientation="h5"
+ x5-video-player-fullscreen="true"
+ x5-playsinline=""
+ controls
+ class="w100"
+ ></video>
+ <div class="bj1">
+ <p class="block">
+ <img
+ class="inline"
+ alt=""
+ src="../../assets/images/dn.png"
+ />杩愮敤鎵�瀛﹁垶韫堝厓绱狅紝璁剧珛鐧介弓椋炵繑鐨勪袱涓笉鍚屽満鏅��
+ </p>
+ <p class="block">
+ <img
+ class="inline"
+ alt=""
+ src="../../assets/images/dn.png"
+ />瀛︾敓鑷効鍒嗙粍锛屾瘡缁勮嚜琛岃缃笌璇ヨ瘲鎯呮劅鐩稿叧鐨勪富棰橈紝鍦ㄦ暀甯堢殑寮曞涓嬭繘琛屽垱缂栵紝骞跺瘜鏈夋儏鎰熷湴灞曠ず鍑烘潵銆�
+ </p>
+ </div>
+ <h2 class="lefth2" id="b004">
+ <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
+ </h2>
+ <div class="bj2">
+ <p class="block">
+ 鏍规嵁鏈崟鍏冩墍瀛︾殑鑸炶箞鍏冪礌浠ュ強鍙よ瘲瀵撴剰锛屽彂鎸ユ兂璞★紝鍒涚紪鏂扮殑鍗曚竴鑸炶箞鍔ㄤ綔鎴栭�犲瀷鍚с��
+ </p>
+ </div>
+ <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p>
+ </div>
+ <ul>
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 20 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+ name: "chapterFive",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ },
+ mounted() {
+ this.getVidoePath();
+ this.addNum();
+ },
+ data() {
+ return {
+ videoPathOne: "",
+ auidoPathOne: "",
+ auidoPathTwo: "",
+ num: 0,
+ };
+ },
+ unmounted() {
+ if (this.addTimer) {
+ clearInterval(this.addTimer);
+ }
+ if (this.cutTimer) {
+ clearInterval(this.cutTimer);
+ }
+ },
+ methods: {
+ async getVidoePath() {
+ this.videoPathOne = await getResourcePath(
+ "97758c885b8668f42c9df0b3ff030672"
+ );
+ this.auidoPathOne = await getResourcePath(
+ "aed4d7b398283b35df0ca46f7c0bbdd4"
+ );
+ this.auidoPathTwo = await getResourcePath(
+ "ec8b7f69df81b1d6230968ad2313132c"
+ );
+ },
+ addNum() {
+ this.addTimer = setInterval(() => {
+ if (this.num < 10) {
+ this.num++;
+ } else {
+ clearInterval(this.addTimer);
+ this.cutNum();
+ }
+ }, 200);
+ },
+ cutNum() {
+ this.cutTimer = setInterval(() => {
+ if (this.num > 0) {
+ this.num--;
+ } else {
+ clearInterval(this.cutTimer);
+ this.addNum();
+ }
+ }, 200);
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.cover-gif {
+ position: absolute;
+ top: 32%;
+ left: 22%;
+}
+</style>
diff --git a/src/books/artAndDance/view/components/chapter006.vue b/src/books/artAndDance/view/components/chapter006.vue
new file mode 100644
index 0000000..ba07dae
--- /dev/null
+++ b/src/books/artAndDance/view/components/chapter006.vue
@@ -0,0 +1,333 @@
+<template>
+ <div class="chapter" num="7">
+ <div class="page-box" page="24" style="min-height: auto">
+ <div v-if="showPageList.indexOf(24) > -1">
+ <img class="img-0" alt="" src="../../assets/images/dzk.jpg" />
+ </div>
+ </div>
+ <div class="page-box" page="25">
+ <div v-if="showPageList.indexOf(25) > -1" class="pg-mh">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <h2 class="whleft2" id="b021">绗竴鍗曞厓 榛勯工妤奸�佸瓱娴╃劧涔嬪箍闄�</h2>
+ <div class="banshi openImgBox">
+ <div class="swiper-container swiper-img">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image26-1.jpg"
+ alt="1 鈥滄晠浜鸿タ杈為粍楣ゆゼ鈥濆姩浣�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image26-2.jpg"
+ alt="2 鈥滅儫鑺变笁鏈堜笅鎵窞鈥濆姩浣�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image26-3.jpg"
+ alt="3 鈥滃甯嗚繙褰辩ⅶ绌哄敖鈥濆姩浣�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image26-4.jpg"
+ alt="4 鈥滃敮瑙侀暱姹熷ぉ闄呮祦鈥濆姩浣�"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="swiper-pagination"></div>
+ <div class="swiper-button-next"></div>
+ <div class="swiper-button-prev"></div>
+ </div>
+ </div>
+ </div>
+ <ul>
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 22 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="26">
+ <div v-if="showPageList.indexOf(26) > -1" class="pg-mh">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <h2 class="whleft2" id="b022">绗簩鍗曞厓 浜＄緤琛ョ墷</h2>
+ <div class="banshi openImgBox">
+ <div class="swiper-container swiper-img">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image27-1.jpg"
+ alt="1 鈥滅緤瑙掑紡鈥濊垶濮�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image27-2.jpg"
+ alt="2 妯′豢鈥滅獰绐库�濊垶濮�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image27-3.jpg"
+ alt="3 鈥滄崅鍢寸姸鈥濊垶濮�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image27-4.jpg"
+ alt="4 鈥滃弻浜洪厤鍚堚�濊垶濮�"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="swiper-pagination"></div>
+ <div class="swiper-button-next"></div>
+ <div class="swiper-button-prev"></div>
+ </div>
+ </div>
+ </div>
+ <ul>
+ <li class="fl ju-end mr-40">
+ <div>
+ <span class="dl-ib"> 23 </span>
+ <img src="../../assets/images/icon/tree.jpg" />
+ </div>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="27">
+ <div v-if="showPageList.indexOf(27) > -1" class="pg-mh">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <h2 class="whleft2" id="b023">绗笁鍗曞厓 灏忓効鍨傞挀</h2>
+ <div class="banshi openImgBox">
+ <div class="swiper-container swiper-img">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image28-1.jpg"
+ alt="1 鍚歌烦姝�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image28-2.jpg"
+ alt="2 鈥滀晶鍧愯帗鑻旇崏鏄犺韩鈥濆姩浣�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image28-3.jpg"
+ alt="3 鈥滆矾浜哄�熼棶閬ユ嫑鎵嬧�濆姩浣�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image28-4.jpg"
+ alt="4 妯′豢鈥滈挀楸尖�濊垶濮�"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="swiper-pagination"></div>
+ <div class="swiper-button-next"></div>
+ <div class="swiper-button-prev"></div>
+ </div>
+ </div>
+ </div>
+ <ul class="pb-box">
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 24 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="28">
+ <div v-if="showPageList.indexOf(28) > -1" class="pg-mh">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <h2 class="whleft2" id="b024">绗洓鍗曞厓 瀵婚殣鑰呬笉閬�</h2>
+ <div class="banshi openImgBox">
+ <div class="swiper-container swiper-img">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image29-1.jpg"
+ alt="1 鈥滄澗涓嬮棶绔ュ瓙鈥濆姩浣�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image29-2.jpg"
+ alt="2 鈥滆█甯堥噰鑽幓鈥濆姩浣�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image29-3.jpg"
+ alt="3 鈥滀簯娣变笉鐭ュ鈥濆姩浣�"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="swiper-pagination"></div>
+ <div class="swiper-button-next"></div>
+ <div class="swiper-button-prev"></div>
+ </div>
+ </div>
+ </div>
+ <ul>
+ <li class="fl ju-end mr-40">
+ <div>
+ <span class="dl-ib"> 25 </span>
+ <img src="../../assets/images/icon/tree.jpg" />
+ </div>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="page-box" page="29">
+ <div v-if="showPageList.indexOf(29) > -1" class="pg-mh">
+ <img
+ src="../../assets/images/pageContentHeader.jpg"
+ alt=""
+ class="w100 mb-40"
+ />
+ <div class="padding-96">
+ <h2 class="whleft2" id="b025">绗簲鍗曞厓 娓旀瓕瀛�</h2>
+ <div class="banshi openImgBox">
+ <div class="swiper-container swiper-img">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image30-1.jpg"
+ alt="1 鍚歌烦姝�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image30-2.jpg"
+ alt="2 鈥滀晶鍧愯帗鑻旇崏鏄犺韩鈥濆姩浣�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image30-3.jpg"
+ alt="3 鈥滆矾浜哄�熼棶閬ユ嫑鎵嬧�濆姩浣�"
+ />
+ </div>
+ </div>
+ <div class="swiper-slide">
+ <div class="imgBox" style="width: 100%; height: 100%">
+ <img
+ src="../../assets/images/image30-4.jpg"
+ alt="4 妯′豢鈥滈挀楸尖�濊垶濮�"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="swiper-pagination"></div>
+ <div class="swiper-button-next"></div>
+ <div class="swiper-button-prev"></div>
+ </div>
+ </div>
+ </div>
+ <ul >
+ <li class="ml-40">
+ <img src="../../assets/images/icon/tree.jpg" />
+ <span class="dl-ib"> 26 </span>
+ </li>
+ <li>
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "chapterSix",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.banshi {
+ width: 100%;
+ height: 800px;
+}
+</style>
diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue
index 9e03cea..f33c54e 100644
--- a/src/books/artAndDance/view/components/header.vue
+++ b/src/books/artAndDance/view/components/header.vue
@@ -11,7 +11,7 @@
</div>
<div class="page-box" page="3">
<div v-if="showPageList.indexOf(3) > -1">
- <ul class="fl fl-cl ju-bt" style="min-height: 1150px">
+ <ul class="fl fl-cl ju-bt">
<li>
<img src="../../assets/images/pageHeader.png" alt="" class="w100" />
</li>
@@ -48,7 +48,7 @@
<p>銆�銆�銆�銆�銆�</p>
<p>銆�銆�銆�銆�銆�</p>
</div>
- <p class="center">
+ <p class="center pb-box">
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
</p>
</li>
diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue
index 6a63a4f..628befe 100644
--- a/src/books/artAndDance/view/components/index.vue
+++ b/src/books/artAndDance/view/components/index.vue
@@ -22,7 +22,24 @@
: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>
</div>
+
</div>
</template>
@@ -30,6 +47,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 chapterFive from './chapter005.vue'
+import chapterSix from './chapter006.vue'
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
@@ -39,7 +60,7 @@
export default {
data() {
return {
- catalogLength: 3, // 鎬荤珷鑺傛暟
+ catalogLength: 7, // 鎬荤珷鑺傛暟
showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
throttleThreshold: 100, // 鑺傛祦闃堝��
@@ -641,6 +662,10 @@
pageHeader,
chapterOne,
chapterTwo,
+ chapterThree,
+ chapterFour,
+ chapterFive,
+ chapterSix
},
};
</script>
diff --git a/src/components/matching/matching.vue b/src/components/matching/matching.vue
index 875ff46..02fd744 100644
--- a/src/components/matching/matching.vue
+++ b/src/components/matching/matching.vue
@@ -15,7 +15,7 @@
:key="index"
ref="left"
@mousedown="(e) => touchstart(e, item, index)"
- :style="{backgroundColor:bc}"
+ :style="{backgroundColor:primaryColor}"
>
{{ item.label.txt }}
</div>
@@ -26,7 +26,7 @@
v-for="(item, index) in rightArr"
:key="index"
ref="right"
- :style="{backgroundColor:bc}"
+ :style="{backgroundColor:primaryColor}"
>
{{ item.label.txt }}
</div>
@@ -48,9 +48,9 @@
<!-- 鎸夐挳 -->
<div class="btn-bottom">
<el-button @click="submitData">鎻愪氦</el-button>
- <el-button @click="saveData">淇濆瓨</el-button>
- <el-button @click="redo">閲嶅仛</el-button>
- <el-button @click="handleAnswer">鏌ョ湅绛旀</el-button>
+ <el-button @click="saveData" :style="{borderColor:primaryColor}">淇濆瓨</el-button>
+ <el-button @click="redo" >閲嶅仛</el-button>
+ <el-button @click="handleAnswer" :style="{borderColor:primaryColor}">鏌ョ湅绛旀</el-button>
</div>
<!-- 瑙ｆ瀽 -->
<ul class="show-answer" v-if="isShowAnswer">
@@ -105,7 +105,7 @@
return [];
},
},
- bc:{
+ primaryColor:{
type:String,
default:"#0bab87"
}
@@ -181,7 +181,6 @@
},
// 瑙︽懜缁撴潫
touchend(e, index) {
- console.log("鎶捣", e, this.checkItem);
this.isDragging = false;
if (this.item.showAnswer) {
return false;
@@ -220,12 +219,11 @@
.filter((r) => r.right !== undefined);
this.$emit("input", model);
this.item.userChoise = model;
- console.log(JSON.stringify(model));
+ // console.log(JSON.stringify(model));
},
// 瑙︽懜寮�濮�
touchstart(e, item, index) {
this.isDragging = true;
- console.log("鎸変笅", e);
this.checkItem = item;
this.checkItemIndex = index;
e.stopPropagation();
@@ -254,7 +252,6 @@
if (this.item.showAnswer) {
return false;
}
- // console.log('绉诲姩',e);
this.checkItem.line[2] = e.pageX;
this.checkItem.line[3] =
e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop;
@@ -282,8 +279,8 @@
canvasA.lineWidth = 2;
for (let i = 0; i < this.leftArr.length; i++) {
const line = this.leftArr[i].line;
- console.log(line);
- console.log(this.leftArr[i]);
+ // console.log(line);
+ // console.log(this.leftArr[i]);
if (line.length) {
canvasA.moveTo(line[0], line[1]);
canvasA.lineTo(line[2], line[3]);
@@ -343,12 +340,12 @@
}
this.isRight = this.areArraysEqual(this.item.userChoise,answerArr)
this.item.showAnswer = true
- console.log(
- "绛旀",
- answerArr,
- this.item.userChoise,
- this.isRight
- );
+ // console.log(
+ // "绛旀",
+ // answerArr,
+ // this.item.userChoise,
+ // this.isRight
+ // );
},
// 鑾峰彇褰撳墠椤电爜
handlePage() {
@@ -381,7 +378,7 @@
saveData() {
if(this.item.userChoise.length)
localStorage.setItem(this.config.activeBook.name + '-matching-' + this.pageNum,JSON.stringify(this.item.userChoise))
- console.log('淇濆瓨鎴愬姛',this.config.activeBook.name,this.pageNum);
+ // console.log('淇濆瓨鎴愬姛',this.config.activeBook.name,this.pageNum);
},
// 閲嶅仛
redo() {
@@ -439,7 +436,7 @@
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
- line-height: 40px;
+ line-height: 24px;
padding: 6px;
}
@@ -474,7 +471,7 @@
}
.el-button {
height:30px;
- padding:9px;
+ padding:7px;
min-width: 78px
}
</style>
diff --git a/src/components/miniAudio/index.vue b/src/components/miniAudio/index.vue
index a014da5..6f9d294 100644
--- a/src/components/miniAudio/index.vue
+++ b/src/components/miniAudio/index.vue
@@ -1,24 +1,62 @@
<template>
<div class="mini-audio" v-if="path">
- <audio controls :src="path"></audio>
+ <audio controls :src="path" class="aduioPlayer"></audio>
</div>
</template>
<script>
- export default {
- name:"mini-audio",
- props:{
- path:{
- type:String
+export default {
+ name: "mini-audio",
+ props: {
+ path: {
+ type: String,
+ },
+ currentTime: {
+ type: Number,
+ },
+ },
+ watch: {
+ path: {
+ handler(newVal) {
+ if (newVal) {
+ setImmediate(() => {
+ this.play();
+ }, 200);
+ }
+ },
+ },
+ },
+ methods: {
+ play() {
+ const player = (this.container ? this.container : document).querySelector(
+ ".aduioPlayer"
+ );
+ if (player) {
+ player.currentTime = this.currentTime;
+ player.play();
}
- }
- }
+ },
+ getVideoPlayer() {
+ let obj = null;
+ const player = (this.container ? this.container : document).querySelector(
+ ".aduioPlayer"
+ );
+ if (player) {
+ obj = {
+ currentTime: player.currentTime,
+ paused: player.paused,
+ };
+ }
+ return obj
+ },
+ },
+};
</script>
<style lang="less" scoped>
.mini-audio {
position: fixed;
- right:40px;
+ right: 40px;
bottom: 100px;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1