From 304689614daa96595aeeeed8e46e5dfa992ef2df Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期一, 17 六月 2024 17:33:33 +0800
Subject: [PATCH] 优化
---
src/books/artAndDance/assets/images/image26-3.png | 0
src/books/artAndDrama/view/components/chapter005.vue | 257 +++
src/books/childHealth/view/content/components/chapter008.vue | 33
src/books/artAndDance/assets/images/image27-1.png | 0
src/books/mathBook/view/components/index.vue | 20
src/books/artAndDrama/assets/images/unit3-header-img.png | 0
src/books/artAndDance/assets/images/01-2.gif | 0
src/books/childHealth/view/content/index.vue | 32
src/books/artAndDrama/view/components/chapter004.vue | 295 ++++
src/books/artAndDance/assets/images/image26-2.png | 0
src/books/childHealth/view/content/components/chapter009.vue | 24
src/books/artAndDance/view/components/index.vue | 110 +
src/books/artAndDance/assets/images/image29-3.png | 0
src/books/artAndDance/assets/images/image30-1.png | 0
src/books/artAndDrama/view/components/index.vue | 1640 +++++++++++-----------
src/books/artAndDance/assets/images/image30-3.png | 0
src/books/embedded/view/components/index.vue | 20
src/books/childHealth/view/content/components/chapter0004.vue | 21
src/books/artAndDance/view/components/chapter001.vue | 10
src/books/childHealth/view/content/components/chapter006.vue | 15
src/books/sportsAndHealth/view/components/testPp.vue | 2
src/books/artAndDance/assets/images/image26-1.png | 0
src/books/artAndDance/assets/images/image30-2.png | 0
src/books/artAndDance/assets/images/image29-2.png | 0
src/books/artAndDance/assets/images/image30-4.png | 0
src/books/artAndDance/view/components/header.vue | 4
src/books/childHealth/view/content/components/chapter007.vue | 42
src/books/artAndDance/assets/images/image28-4.png | 0
src/books/artAndDance/view/components/chapter002.vue | 26
src/books/artAndDance/assets/images/image28-3.png | 0
src/books/artAndDrama/assets/images/unit2-header-img.png | 0
src/books/artAndDance/assets/images/image29-1.png | 0
src/books/childHealth/view/content/components/chapter003.vue | 21
src/books/artAndDrama/assets/images/unit4-header-img.png | 0
src/books/artAndDance/assets/images/image28-2.png | 0
src/books/English/view/components/chapter001.vue | 15
src/books/artAndDance/assets/images/06.gif | 0
src/books/artAndDance/view/components/chapter003.vue | 11
src/books/childHealth/view/content/components/chapter002.vue | 12
src/books/artAndDance/assets/main.less | 50
src/books/artAndDance/assets/images/image28-1.png | 0
src/books/mathBook/view/components/chapter001.vue | 149 +
src/books/artAndDrama/assets/main.less | 35
src/books/childHealth/view/content/components/chapter010.vue | 9
src/books/artAndDance/assets/images/08.gif | 0
src/books/artAndDance/assets/images/07.gif | 0
src/books/artAndDance/view/components/chapter004.vue | 9
src/books/childHealth/view/content/components/chapter005.vue | 15
src/components/examinations/index.vue | 23
src/books/English/view/components/index.vue | 20
src/books/childHealth/view/content/components/chapter001.vue | 33
src/books/artAndDance/assets/images/image27-4.png | 0
src/books/sportsAndHealth/css/default.less | 2
src/books/artAndDance/view/components/chapter006.vue | 48
src/books/artAndDrama/view/components/chapter003.vue | 403 +++++
src/components/pdfview/index.vue | 20
src/books/artAndDance/view/components/chapter005.vue | 61
src/books/artAndDance/assets/images/image27-3.png | 0
/dev/null | 0
src/books/artAndDance/assets/images/image26-4.png | 0
src/books/artAndDrama/view/components/chapter002.vue | 752 +++-------
src/books/artAndDrama/view/components/chapter001.vue | 82
src/books/mathBook/assets/main.less | 23
src/books/artAndDance/assets/images/image27-2.png | 0
src/components/miniAudio/index.vue | 2
65 files changed, 2,680 insertions(+), 1,666 deletions(-)
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 34edb72..bf3f4cc 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -826,15 +826,19 @@
</p>
<div class="bkbj">
<p>
- <i>making you feel more active and healthy</i> foodie /藞fu藧di/
- <i>n.</i> 鍚冭揣锛涚編椋熷
+ <i>making you feel more active and healthy</i>
</p>
</div>
- <p>
- <i
+ <p>foodie /藞fu藧di/<i>n.</i> 鍚冭揣锛涚編椋熷</p>
+ <div class="bkbj">
+ <p>
+ <i
>a person who is very interested in cooking and eating different
kinds of food</i
>
+ </p>
+ </div>
+ <p>
unique /ju<i>藞</i>ni藧k/ <i>adj.</i> 鍞竴鐨勶紱鐙竴鏃犱簩鐨�
</p>
<div class="bkbj">
@@ -2564,7 +2568,7 @@
"online shopping",
"facial recognition",
"electronic payment",
- "intercity train",
+ "intercity train",
"shared bike",
"take-away service",
],
@@ -2735,6 +2739,7 @@
item.value == item.answer
? (item.isRight = true)
: (item.isRight = false);
+ console.log(item.value,item.answer);
}
}
this.dropdownData = dropdownDatas;
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 8722e79..d0b26c3 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -628,23 +628,23 @@
autoplay: {
//鑷姩寮�濮�
delay: 3000, //鏃堕棿闂撮殧
- disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
},
paginationClickable: true,
slidesPerView: 1, // 涓�缁勪笁涓�
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
- observeParents: true,
+ observeParents: true
// // 濡傛灉闇�瑕佸垎椤靛櫒
// pagination: {
// el: (this.container ? this.container : document).querySelector(
@@ -667,12 +667,12 @@
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
@@ -691,8 +691,8 @@
var paginationInfoEl = dom.querySelector(".pageBox");
if (paginationInfoEl)
paginationInfoEl.textContent = currentPage + "/" + totalPages;
- },
- },
+ }
+ }
});
}
},
diff --git a/src/books/artAndDance/assets/images/01-2.gif b/src/books/artAndDance/assets/images/01-2.gif
index ba833ea..6750fe1 100644
--- a/src/books/artAndDance/assets/images/01-2.gif
+++ b/src/books/artAndDance/assets/images/01-2.gif
Binary files differ
diff --git a/src/books/artAndDance/assets/images/06.gif b/src/books/artAndDance/assets/images/06.gif
index d898022..4f4f37c 100644
--- a/src/books/artAndDance/assets/images/06.gif
+++ 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
index b1ea008..4dcef17 100644
--- a/src/books/artAndDance/assets/images/07.gif
+++ 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
index e1d2936..1c31550 100644
--- a/src/books/artAndDance/assets/images/08.gif
+++ b/src/books/artAndDance/assets/images/08.gif
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-1.jpg b/src/books/artAndDance/assets/images/image26-1.jpg
deleted file mode 100644
index 7b2ccca..0000000
--- a/src/books/artAndDance/assets/images/image26-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-1.png b/src/books/artAndDance/assets/images/image26-1.png
new file mode 100644
index 0000000..cd2b2ba
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image26-1.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-2.jpg b/src/books/artAndDance/assets/images/image26-2.jpg
deleted file mode 100644
index 0e602b1..0000000
--- a/src/books/artAndDance/assets/images/image26-2.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-2.png b/src/books/artAndDance/assets/images/image26-2.png
new file mode 100644
index 0000000..a88040a
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image26-2.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-3.jpg b/src/books/artAndDance/assets/images/image26-3.jpg
deleted file mode 100644
index db761e8..0000000
--- a/src/books/artAndDance/assets/images/image26-3.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-3.png b/src/books/artAndDance/assets/images/image26-3.png
new file mode 100644
index 0000000..fb42b39
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image26-3.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-4.jpg b/src/books/artAndDance/assets/images/image26-4.jpg
deleted file mode 100644
index b624f0f..0000000
--- a/src/books/artAndDance/assets/images/image26-4.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-4.png b/src/books/artAndDance/assets/images/image26-4.png
new file mode 100644
index 0000000..74ecdc6
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image26-4.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-1.jpg b/src/books/artAndDance/assets/images/image27-1.jpg
deleted file mode 100644
index 252f193..0000000
--- a/src/books/artAndDance/assets/images/image27-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-1.png b/src/books/artAndDance/assets/images/image27-1.png
new file mode 100644
index 0000000..c6c263b
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image27-1.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-2.jpg b/src/books/artAndDance/assets/images/image27-2.jpg
deleted file mode 100644
index 66b0489..0000000
--- a/src/books/artAndDance/assets/images/image27-2.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-2.png b/src/books/artAndDance/assets/images/image27-2.png
new file mode 100644
index 0000000..f8b0b8c
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image27-2.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-3.jpg b/src/books/artAndDance/assets/images/image27-3.jpg
deleted file mode 100644
index d584d64..0000000
--- a/src/books/artAndDance/assets/images/image27-3.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-3.png b/src/books/artAndDance/assets/images/image27-3.png
new file mode 100644
index 0000000..5477a90
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image27-3.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-4.jpg b/src/books/artAndDance/assets/images/image27-4.jpg
deleted file mode 100644
index 000d0db..0000000
--- a/src/books/artAndDance/assets/images/image27-4.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-4.png b/src/books/artAndDance/assets/images/image27-4.png
new file mode 100644
index 0000000..f3a3f18
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image27-4.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-1.jpg b/src/books/artAndDance/assets/images/image28-1.jpg
deleted file mode 100644
index 1e983cc..0000000
--- a/src/books/artAndDance/assets/images/image28-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-1.png b/src/books/artAndDance/assets/images/image28-1.png
new file mode 100644
index 0000000..c51201b
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image28-1.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-2.jpg b/src/books/artAndDance/assets/images/image28-2.jpg
deleted file mode 100644
index 9ed2a18..0000000
--- a/src/books/artAndDance/assets/images/image28-2.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-2.png b/src/books/artAndDance/assets/images/image28-2.png
new file mode 100644
index 0000000..619fda9
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image28-2.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-3.jpg b/src/books/artAndDance/assets/images/image28-3.jpg
deleted file mode 100644
index 2dc30b8..0000000
--- a/src/books/artAndDance/assets/images/image28-3.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-3.png b/src/books/artAndDance/assets/images/image28-3.png
new file mode 100644
index 0000000..52cf198
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image28-3.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-4.jpg b/src/books/artAndDance/assets/images/image28-4.jpg
deleted file mode 100644
index cd3e38d..0000000
--- a/src/books/artAndDance/assets/images/image28-4.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-4.png b/src/books/artAndDance/assets/images/image28-4.png
new file mode 100644
index 0000000..68f45a7
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image28-4.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-1.jpg b/src/books/artAndDance/assets/images/image29-1.jpg
deleted file mode 100644
index b1e92eb..0000000
--- a/src/books/artAndDance/assets/images/image29-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-1.png b/src/books/artAndDance/assets/images/image29-1.png
new file mode 100644
index 0000000..aec5a1e
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image29-1.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-2.jpg b/src/books/artAndDance/assets/images/image29-2.jpg
deleted file mode 100644
index 87ef8c6..0000000
--- a/src/books/artAndDance/assets/images/image29-2.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-2.png b/src/books/artAndDance/assets/images/image29-2.png
new file mode 100644
index 0000000..c6bae5d
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image29-2.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-3.jpg b/src/books/artAndDance/assets/images/image29-3.jpg
deleted file mode 100644
index 7be96b2..0000000
--- a/src/books/artAndDance/assets/images/image29-3.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-3.png b/src/books/artAndDance/assets/images/image29-3.png
new file mode 100644
index 0000000..2d7ab66
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image29-3.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-1.jpg b/src/books/artAndDance/assets/images/image30-1.jpg
deleted file mode 100644
index c22dbaa..0000000
--- a/src/books/artAndDance/assets/images/image30-1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-1.png b/src/books/artAndDance/assets/images/image30-1.png
new file mode 100644
index 0000000..9d7796c
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image30-1.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-2.jpg b/src/books/artAndDance/assets/images/image30-2.jpg
deleted file mode 100644
index e8bee76..0000000
--- a/src/books/artAndDance/assets/images/image30-2.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-2.png b/src/books/artAndDance/assets/images/image30-2.png
new file mode 100644
index 0000000..2d7f83f
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image30-2.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-3.jpg b/src/books/artAndDance/assets/images/image30-3.jpg
deleted file mode 100644
index ff3703d..0000000
--- a/src/books/artAndDance/assets/images/image30-3.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-3.png b/src/books/artAndDance/assets/images/image30-3.png
new file mode 100644
index 0000000..585244d
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image30-3.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-4.jpg b/src/books/artAndDance/assets/images/image30-4.jpg
deleted file mode 100644
index 0685c41..0000000
--- a/src/books/artAndDance/assets/images/image30-4.jpg
+++ /dev/null
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-4.png b/src/books/artAndDance/assets/images/image30-4.png
new file mode 100644
index 0000000..31559cc
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image30-4.png
Binary files differ
diff --git a/src/books/artAndDance/assets/main.less b/src/books/artAndDance/assets/main.less
index 5642906..6b92359 100644
--- a/src/books/artAndDance/assets/main.less
+++ b/src/books/artAndDance/assets/main.less
@@ -420,16 +420,6 @@
}
/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
-@media (max-width: 430px) {
- .ans-dance {
- .page-box {
- min-height: 750px;
- }
- .pg-mh {
- min-height: 815px;
- }
- }
-}
@media (max-width: 660px) {
.ans-dance {
/* 鍒嗛〉padding */
@@ -453,6 +443,15 @@
margin-top: 10px;
}
}
+ .page-box{
+ min-height: 500px;
+ }
+ .pg-mh {
+ min-height: 815px;
+ }
+ .share-img-box {
+ min-height: 460px;
+ }
}
}
@media (min-width: 660px) {
@@ -466,15 +465,38 @@
.video-box {
max-width: 370px;
}
+ .share-img-box {
+ min-height: 650px;
+ }
.audio-box {
margin-top: 20px;
flex-wrap: nowrap;
li {
width: 58%;
}
- li:nth-child(2) {
- margin-left: 10px;
- }
}
}
-}
\ No newline at end of file
+}
+
+
+::-webkit-scrollbar {
+ width: 8px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-track-piece {
+ background-color: rgba(0, 0, 0, 0.1);
+ -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+ height: 5px;
+ background-color: rgba(125, 125, 125, 0.3);
+ -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+ width: 5px;
+ background-color: rgba(125, 125, 125, 0.3);
+ -webkit-border-radius: 6px;
+}
diff --git a/src/books/artAndDance/view/components/chapter001.vue b/src/books/artAndDance/view/components/chapter001.vue
index 859425a..7b8b7f6 100644
--- a/src/books/artAndDance/view/components/chapter001.vue
+++ b/src/books/artAndDance/view/components/chapter001.vue
@@ -1,10 +1,9 @@
<template>
<div class="chapter" num="2">
- <div class="page-box" page="4" style="min-height: auto">
+ <div class="page-box" page="4">
<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">
@@ -55,13 +54,13 @@
<ul class="fl fl-cl al-cn audio-box">
<li class="fl al-cn">
<span class="wh-nr auido-text mr-8 ">鐢风闊�</span>
- <audio :src="auidoPathOne" controls></audio>
+ <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay" ></audio>
</li>
<li class="fl al-cn mt-20 " >
<span class="wh-nr auido-text mr-8 ">
濂崇闊�
</span>
- <audio :src="auidoPathTwo" controls></audio>
+ <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</li>
</ul>
<h3 id="c003">榛勯工妤奸�佸瓱娴╃劧涔嬪箍闄�</h3>
@@ -173,6 +172,9 @@
this.auidoPathOne = await getResourcePath("2c5f6c69b0f9f7a3c03e473cb8c977f5");
this.auidoPathTwo = await getResourcePath("e93c0fdde08be5a4386c8c863892a287");
},
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
},
};
</script>
diff --git a/src/books/artAndDance/view/components/chapter002.vue b/src/books/artAndDance/view/components/chapter002.vue
index 4400f7f..e3c4ee7 100644
--- a/src/books/artAndDance/view/components/chapter002.vue
+++ b/src/books/artAndDance/view/components/chapter002.vue
@@ -1,6 +1,6 @@
<template>
<div class="chapter" num="3">
- <div class="page-box" page="8" style="min-height: auto;">
+ <div class="page-box" page="8">
<div v-if="showPageList.indexOf(8) > -1">
<img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
<img src="../../assets/images/03-2.gif" alt="" style="width: 55%;" class="cover-gif">
@@ -17,14 +17,18 @@
<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="margin-top: 100px;">
<li style="width: 45%;">
- <img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:(10 - num) / 10}">
+ <img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:num / 10}">
</li>
<li style="width: 35%;">
- <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: num / 10}">
+ <img src="../../assets/images/girl.png" alt="" class="w100" :style="{opacity: (-num) / 10}">
</li>
- </ul>
+ </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 class="img">鈥滅緤瑙掑紡鈥濊垶濮�</p>
</div>
<ul class="pb-box">
@@ -65,13 +69,13 @@
<ul class="fl fl-cl al-cn audio-box">
<li class="fl al-cn">
<span class="wh-nr auido-text mr-8">鐢风闊�</span>
- <audio :src="auidoPathOne" controls></audio>
+ <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</li>
<li class="fl al-cn mt-20">
<span class="wh-nr auido-text mr-8">
濂崇闊�
</span>
- <audio :src="auidoPathTwo" controls></audio>
+ <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</li>
</ul>
<h3 id="c006">浜＄緤琛ョ墷</h3>
@@ -191,7 +195,8 @@
cutTimer:null,
auidoPathOne:"",
auidoPathTwo:"",
-
+ shape:require("../../assets/images/05.gif"),
+ girl:require("../../assets/images/girl.png")
};
},
methods: {
@@ -212,13 +217,16 @@
},
cutNum() {
this.cutTimer = setInterval(() => {
- if(this.num > 0) {
+ if(this.num > -10) {
this.num --
} else {
clearInterval(this.cutTimer)
this.addNum()
}
},200)
+ },
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
}
},
};
diff --git a/src/books/artAndDance/view/components/chapter003.vue b/src/books/artAndDance/view/components/chapter003.vue
index 374f78b..85aa071 100644
--- a/src/books/artAndDance/view/components/chapter003.vue
+++ b/src/books/artAndDance/view/components/chapter003.vue
@@ -1,9 +1,9 @@
<template>
<div class="chapter" num="4">
- <div class="page-box" page="12" style="min-height: auto">
+ <div class="page-box" page="12">
<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">
+ <img src="../../assets/images/07.gif" alt="" style="width: 54%;" class="cover-gif">
</div>
</div>
<div class="page-box" page="13">
@@ -54,13 +54,13 @@
<ul class="fl fl-cl al-cn audio-box">
<li class="fl al-cn">
<span class="wh-nr auido-text mr-8">鐢风闊�</span>
- <audio :src="auidoPathOne" controls></audio>
+ <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</li>
<li class="fl al-cn mt-20">
<span class="wh-nr auido-text mr-8">
濂崇闊�
</span>
- <audio :src="auidoPathTwo" controls></audio>
+ <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</li>
</ul>
<h3 id="c009">灏忓効鍨傞挀</h3>
@@ -171,6 +171,9 @@
this.auidoPathOne = await getResourcePath("85923e871441c541991be07fe4ce8771");
this.auidoPathTwo = await getResourcePath("c018f7a6434abfac0b0e0da1174d643a");
},
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
},
}
</script>
diff --git a/src/books/artAndDance/view/components/chapter004.vue b/src/books/artAndDance/view/components/chapter004.vue
index b9631f1..97ce204 100644
--- a/src/books/artAndDance/view/components/chapter004.vue
+++ b/src/books/artAndDance/view/components/chapter004.vue
@@ -1,6 +1,6 @@
<template>
<div class="chapter" num="5">
- <div class="page-box" page="16" style="min-height: auto;">
+ <div class="page-box" page="16">
<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">
@@ -60,13 +60,13 @@
<ul class="fl fl-cl al-cn audio-box">
<li class="fl al-cn">
<span class="wh-nr auido-text mr-8">鐢风闊�</span>
- <audio :src="auidoPathOne" controls></audio>
+ <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</li>
<li class="fl al-cn mt-20">
<span class="wh-nr auido-text mr-8">
濂崇闊�
</span>
- <audio :src="auidoPathTwo" controls></audio>
+ <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</li>
</ul>
<h3 id="c012">瀵婚殣鑰呬笉閬�</h3>
@@ -175,6 +175,9 @@
this.auidoPathOne = await getResourcePath("a865ff99b91fa24d87ac81a883be54db");
this.auidoPathTwo = await getResourcePath("66f3cc00d272a120514201e13e87fb9d");
},
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
},
}
</script>
diff --git a/src/books/artAndDance/view/components/chapter005.vue b/src/books/artAndDance/view/components/chapter005.vue
index 31c6c3e..e0fcfca 100644
--- a/src/books/artAndDance/view/components/chapter005.vue
+++ b/src/books/artAndDance/view/components/chapter005.vue
@@ -1,6 +1,6 @@
<template>
<div class="chapter" num="6">
- <div class="page-box" page="20" style="min-height: auto">
+ <div class="page-box" page="20">
<div v-if="showPageList.indexOf(20) > -1">
<img class="img-0" alt="" src="../../assets/images/dy5.jpg" />
<img
@@ -18,26 +18,12 @@
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 class="padding-96 fl ju-cn al-cn fl-cl">
+ <p class="center share-img-box">
+ <img :src="num >= 0 ? crane : rise" alt="" :style="{opacity:num >= 0 ? num / 10 : (-num) / 10 , width:num >= 0 ? '80%' : '70%'}">
+
+ </p>
+ <p class="img">鈥滆タ濉炲北鍓嶇櫧楣鈥濆姩浣�</p>
</div>
<ul class="pb-box">
<li class="ml-40">
@@ -80,11 +66,11 @@
<ul class="fl fl-cl al-cn audio-box">
<li class="fl al-cn">
<span class="wh-nr auido-text mr-8">鐢风闊�</span>
- <audio :src="auidoPathOne" controls></audio>
+ <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</li>
<li class="fl al-cn mt-20">
<span class="wh-nr auido-text mr-8"> 濂崇闊� </span>
- <audio :src="auidoPathTwo" controls></audio>
+ <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
</li>
</ul>
<h3 id="c015">娓旀瓕瀛�</h3>
@@ -189,6 +175,8 @@
auidoPathOne: "",
auidoPathTwo: "",
num: 0,
+ crane:require("../../assets/images/crane.png"),
+ rise:require("../../assets/images/rise.png")
};
},
unmounted() {
@@ -212,25 +200,28 @@
);
},
addNum() {
- this.addTimer = setInterval(() => {
- if (this.num < 10) {
- this.num++;
+ this.addTimer = setInterval(() => {
+ if(this.num < 10) {
+ this.num ++
} else {
- clearInterval(this.addTimer);
- this.cutNum();
+ clearInterval(this.addTimer)
+ this.cutNum()
}
- }, 200);
+ },200)
},
cutNum() {
- this.cutTimer = setInterval(() => {
- if (this.num > 0) {
- this.num--;
+ this.cutTimer = setInterval(() => {
+ if(this.num > -10) {
+ this.num --
} else {
- clearInterval(this.cutTimer);
- this.addNum();
+ clearInterval(this.cutTimer)
+ this.addNum()
}
- }, 200);
+ },200)
},
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
},
};
</script>
diff --git a/src/books/artAndDance/view/components/chapter006.vue b/src/books/artAndDance/view/components/chapter006.vue
index ba07dae..765ae71 100644
--- a/src/books/artAndDance/view/components/chapter006.vue
+++ b/src/books/artAndDance/view/components/chapter006.vue
@@ -1,6 +1,6 @@
<template>
<div class="chapter" num="7">
- <div class="page-box" page="24" style="min-height: auto">
+ <div class="page-box" page="24">
<div v-if="showPageList.indexOf(24) > -1">
<img class="img-0" alt="" src="../../assets/images/dzk.jpg" />
</div>
@@ -20,7 +20,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image26-1.jpg"
+ src="../../assets/images/image26-1.png"
alt="1 鈥滄晠浜鸿タ杈為粍楣ゆゼ鈥濆姩浣�"
/>
</div>
@@ -28,7 +28,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image26-2.jpg"
+ src="../../assets/images/image26-2.png"
alt="2 鈥滅儫鑺变笁鏈堜笅鎵窞鈥濆姩浣�"
/>
</div>
@@ -36,7 +36,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image26-3.jpg"
+ src="../../assets/images/image26-3.png"
alt="3 鈥滃甯嗚繙褰辩ⅶ绌哄敖鈥濆姩浣�"
/>
</div>
@@ -44,7 +44,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image26-4.jpg"
+ src="../../assets/images/image26-4.png"
alt="4 鈥滃敮瑙侀暱姹熷ぉ闄呮祦鈥濆姩浣�"
/>
</div>
@@ -82,7 +82,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image27-1.jpg"
+ src="../../assets/images/image27-1.png"
alt="1 鈥滅緤瑙掑紡鈥濊垶濮�"
/>
</div>
@@ -90,7 +90,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image27-2.jpg"
+ src="../../assets/images/image27-2.png"
alt="2 妯′豢鈥滅獰绐库�濊垶濮�"
/>
</div>
@@ -98,7 +98,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image27-3.jpg"
+ src="../../assets/images/image27-3.png"
alt="3 鈥滄崅鍢寸姸鈥濊垶濮�"
/>
</div>
@@ -106,7 +106,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image27-4.jpg"
+ src="../../assets/images/image27-4.png"
alt="4 鈥滃弻浜洪厤鍚堚�濊垶濮�"
/>
</div>
@@ -146,7 +146,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image28-1.jpg"
+ src="../../assets/images/image28-1.png"
alt="1 鍚歌烦姝�"
/>
</div>
@@ -154,7 +154,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image28-2.jpg"
+ src="../../assets/images/image28-2.png"
alt="2 鈥滀晶鍧愯帗鑻旇崏鏄犺韩鈥濆姩浣�"
/>
</div>
@@ -162,7 +162,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image28-3.jpg"
+ src="../../assets/images/image28-3.png"
alt="3 鈥滆矾浜哄�熼棶閬ユ嫑鎵嬧�濆姩浣�"
/>
</div>
@@ -170,7 +170,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image28-4.jpg"
+ src="../../assets/images/image28-4.png"
alt="4 妯′豢鈥滈挀楸尖�濊垶濮�"
/>
</div>
@@ -208,7 +208,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image29-1.jpg"
+ src="../../assets/images/image29-1.png"
alt="1 鈥滄澗涓嬮棶绔ュ瓙鈥濆姩浣�"
/>
</div>
@@ -216,7 +216,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image29-2.jpg"
+ src="../../assets/images/image29-2.png"
alt="2 鈥滆█甯堥噰鑽幓鈥濆姩浣�"
/>
</div>
@@ -224,7 +224,7 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image29-3.jpg"
+ src="../../assets/images/image29-3.png"
alt="3 鈥滀簯娣变笉鐭ュ鈥濆姩浣�"
/>
</div>
@@ -264,32 +264,32 @@
<div class="swiper-slide">
<div class="imgBox" style="width: 100%; height: 100%">
<img
- src="../../assets/images/image30-1.jpg"
- alt="1 鍚歌烦姝�"
+ src="../../assets/images/image30-1.png"
+ 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 鈥滀晶鍧愯帗鑻旇崏鏄犺韩鈥濆姩浣�"
+ src="../../assets/images/image30-2.png"
+ 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 鈥滆矾浜哄�熼棶閬ユ嫑鎵嬧�濆姩浣�"
+ src="../../assets/images/image30-3.png"
+ 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 妯′豢鈥滈挀楸尖�濊垶濮�"
+ src="../../assets/images/image30-4.png"
+ alt="4 鈥滄枩椋庣粏闆ㄤ笉椤诲綊鈥濆姩浣�"
/>
</div>
</div>
diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue
index 57aea29..04df044 100644
--- a/src/books/artAndDance/view/components/header.vue
+++ b/src/books/artAndDance/view/components/header.vue
@@ -1,11 +1,11 @@
<template>
<div class="chapter" num="1">
- <div class="page-box mt-20" page="1" style="min-height: auto;">
+ <div class="page-box mt-20" page="1">
<div v-if="showPageList.indexOf(1) > -1">
<img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
</div>
</div>
- <div class="page-box" page="2" style="min-height: auto;">
+ <div class="page-box" page="2" >
<div v-if="showPageList.indexOf(2) > -1">
<img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
</div>
diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue
index 5574cf3..6678a4d 100644
--- a/src/books/artAndDance/view/components/index.vue
+++ b/src/books/artAndDance/view/components/index.vue
@@ -18,30 +18,40 @@
<chapterOne
v-if="showCatalogList.indexOf(2) > -1"
:showPageList="loadPageList"
+ @closeAudio="closeAudio"
></chapterOne>
<chapterTwo
v-if="showCatalogList.indexOf(3) > -1"
:showPageList="loadPageList"
+ @closeAudio="closeAudio"
>
</chapterTwo>
<chapterThree
v-if="showCatalogList.indexOf(4) > -1"
:showPageList="loadPageList"
+ @closeAudio="closeAudio"
></chapterThree>
<chapterFour
v-if="showCatalogList.indexOf(5) > -1"
:showPageList="loadPageList"
+ @closeAudio="closeAudio"
></chapterFour>
<chapterFive
v-if="showCatalogList.indexOf(6) > -1"
:showPageList="loadPageList"
+ @closeAudio="closeAudio"
></chapterFive>
<chapterSix
v-if="showCatalogList.indexOf(7) > -1"
:showPageList="loadPageList"
></chapterSix>
</div>
-
+ <miniAudio
+ :path="audioPath"
+ :currentTime="currentTime"
+ @closeMiniAudio="closeMiniAudio"
+ ref="audioPlayer"
+ ></miniAudio>
</div>
</template>
@@ -54,6 +64,7 @@
import chapterFive from './chapter005.vue'
import chapterSix from './chapter006.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";
@@ -75,6 +86,9 @@
questionDataMap: {},
renderSignMap: {},
highlightData: null,
+ audioPath: "",
+ currentTime: null,
+ videoList: [],
};
},
computed: {
@@ -180,7 +194,7 @@
// 娴嬭瘯椤甸潰璺宠浆
// setTimeout(() => {
- // this.gotoPage(1, 10);
+ // this.gotoPage(6, 26);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -208,7 +222,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- // }, 5000);
+ // }, 500);
},
methods: {
// setZoom1() {
@@ -229,6 +243,7 @@
scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
if (event.target.scrollTop > this.previousScrollTop) {
+ this.getAduio()
// 鍚戜笅
const currentScrollTop =
event.target.scrollTop + event.target.offsetHeight;
@@ -252,6 +267,7 @@
}
}
} else if (event.target.scrollTop < this.previousScrollTop) {
+ this.handleAudio()
// 鍚戜笂
const currentScrollTop = event.target.scrollTop;
if (currentScrollTop <= this.loadThreshold) {
@@ -639,23 +655,23 @@
autoplay: {
//鑷姩寮�濮�
delay: 3000, //鏃堕棿闂撮殧
- disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
},
paginationClickable: true,
slidesPerView: 1, // 涓�缁勪笁涓�
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
- observer: true,
- observeParents: true,
+ // observer: true,
+ // observeParents: true
// // 濡傛灉闇�瑕佸垎椤靛櫒
// pagination: {
// el: (this.container ? this.container : document).querySelector(
@@ -678,12 +694,12 @@
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
@@ -702,8 +718,8 @@
var paginationInfoEl = dom.querySelector(".pageBox");
if (paginationInfoEl)
paginationInfoEl.textContent = currentPage + "/" + totalPages;
- },
- },
+ }
+ }
});
}
},
@@ -834,6 +850,71 @@
// 璺宠浆
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 = "";
+ },
+ // 鐐瑰嚮闊抽鎾斁锛屽叧闂叾浠栭煶棰�
+ closeAudio(path) {
+ let allVideo = (
+ this.container ? this.container : document
+ ).querySelectorAll(".audio");
+ allVideo = Array.from(allVideo);
+ if(allVideo.length) {
+ for (let index = 0; index < allVideo.length; index++) {
+ const item = allVideo[index];
+ if(item.currentSrc != path) {
+ item.pause()
+ }
+ }
+ }
+ this.closeMiniAudio()
+ }
},
components: {
pageHeader,
@@ -843,6 +924,7 @@
chapterFour,
chapterFive,
chapterSix,
+ miniAudio
},
};
</script>
diff --git a/src/books/artAndDrama/assets/images/unit2-header-img.png b/src/books/artAndDrama/assets/images/unit2-header-img.png
new file mode 100644
index 0000000..a454827
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/unit2-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/unit3-header-img.png b/src/books/artAndDrama/assets/images/unit3-header-img.png
new file mode 100644
index 0000000..229cc52
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/unit3-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/unit4-header-img.png b/src/books/artAndDrama/assets/images/unit4-header-img.png
new file mode 100644
index 0000000..a4cc696
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/unit4-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index b30b770..e000d1d 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/src/books/artAndDrama/assets/main.less
@@ -1,7 +1,7 @@
.ans-drama {
width: 100%;
height: 100%;
- font-family: "瀹嬩綋", SimSun, sans-serif;
+ font-family: "STKaiti", SimSun, sans-serif;
span.un1{
-webkit-text-emphasis-style:dot;
-moz-text-emphasis-style:dot;
@@ -50,8 +50,9 @@
div.bodystyle {
font-size:18px;
text-align:justify;
- margin:5%;
+ margin:5% 15%;
line-height:30px;
+
}
span.zt-0
@@ -102,7 +103,8 @@
p
{
- margin-top:1em;
+ // margin-top:1em;
+ margin: 0;
text-indent:2em;
line-height:30px;
font-size:18px;
@@ -169,7 +171,7 @@
text-align:center;
font-size:1.8em;
color:#515594;
- margin-bottom:0.5cm;
+ margin-bottom:0%;
margin-top:0.5cm;
}
@@ -252,6 +254,7 @@
.img-0{
width:100%;
+height: auto;
}
.imz{
width:96%;
@@ -512,6 +515,13 @@
outline: none;
}
}
+ // 鏁磋鐨刬nput鏍囩
+ .input-w-66{
+ width: 66%;
+ }
+ .headerimg{
+ margin-left: 5%;
+ }
.page-footer {
position: relative;
display: flex;
@@ -595,20 +605,13 @@
}
}
/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
-@media (max-width: 430px) {
- .ans-drama {
- .page-box {
- min-height: 750px;
- }
- .pg-mh {
- min-height: 815px !important;
- }
- }
- }
@media (max-width: 660px) {
.ans-drama {
- /* 鍒嗛〉padding */
- .page-padding {
+ .pg-mh {
+ min-height: 815px !important;
+ }
+ /* 鍒嗛〉padding */
+ .page-padding {
padding: 104px 20px;
}
.padding-96 {
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 0de2d1b..54731ea 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -3,9 +3,8 @@
<div class="page-box" page="4">
<div v-if="showPageList.indexOf(4) > -1">
<h1 id="a004">
- <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
- <audio :src="auidoPathOne" class="audio" controls></audio>
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -14,14 +13,12 @@
<img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
</p>
</div>
-
<p class="block">
鍦ㄦ晠浜嬨�婁竴鍧楀ザ閰�嬩腑锛岃殏铓佸搴殑姣忎竴浣嶆垚鍛橀兘涓轰簡鍏卞悓鐨勭洰鏍囧垎宸ュ崗浣溿�佸姫鍔涘鏂楋紝鍦ㄩ潰瀵硅鎯戝拰鎸戞垬鏃舵洿鏄弗浜庡緥宸便�侀伒瀹堝洟闃熺邯寰嬨�傛湰鍗曞厓锛岃鎴戜滑璇讳竴璇汇�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽涔犺殏铓佷滑鐨勪紭绉�鍝佹牸鍚э紒
</p>
</div>
</div>
<p><br /></p>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
<img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-right">1</div>
@@ -30,11 +27,11 @@
</div>
<div class="page-box" page="5">
<div v-if="showPageList.indexOf(5) > -1">
- <h1>
+ <h1 style="margin-bottom: 0%">
<img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b001">绗竴璇俱��榻愬績鍗忓姏</h2>
<h3 class="lefth3" id="c001">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -46,11 +43,13 @@
<span class="hs1">鈼�</span>澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
</p>
<h1>
- <audio :src="auidoPathTwo" class="audio" controls></audio>
+ <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
</h1>
- <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
+
<!-- 杩炵嚎棰� -->
- <matching :rawData="rawData" :item="question"></matching>
+ <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
+ <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
+
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -100,11 +99,11 @@
</div>
<div class="page-box" page="7">
<div v-if="showPageList.indexOf(7) > -1">
- <h1>
+ <h1 style="margin-bottom: 0%">
<img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b002">绗簩璇俱��娲ユ触涔愰亾</h2>
<h3 class="lefth3" id="c003">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -112,7 +111,7 @@
<p>
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
- <h1><audio :src="auidoPathThree" class="audio" controls></audio></h1>
+ <h1><audio :src="auidoPathThree" controls class="audio" @play="audioPlay"></audio></h1>
<div class="bj3">
<p class="center">
@@ -150,18 +149,20 @@
<div class="page-box" page="8">
<div v-if="showPageList.indexOf(8) > -1">
<h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b003">绗笁璇俱��鍐呭績鐨勫０闊�</h2>
- <h1 class="lefth3 openImgBox" id="c005">
- <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
- </h1>
+ <h3 class="lefth3" id="c006">
+ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
+ </h3>
<p>
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
- <h1><audio :src="auidoPathTwo" class="audio" controls></audio></h1>
+ <h1 class="lefth3 openImgBox" id="c005">
+ <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
+ </h1>
+ <h1><audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio></h1>
<div class="bj3">
<p class="center">
<span class="hs">鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</span>
@@ -176,7 +177,7 @@
class="un1">杞绘倓鎮�</span>鐨勶紝鑽�<span class="un1">杞坏缁�</span>鐨勩��
</p>
</div>
- <hr />
+ <hr style="margin-left: 0; width: 20%;" />
<p class="note">
<a id="m1">1</a>
鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
@@ -192,11 +193,11 @@
</div>
<div class="page-box" page="9">
<div v-if="showPageList.indexOf(9) > -1">
- <h1>
+ <h1 style="margin-bottom: 0%;">
<img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
<h3 class="lefth3" id="c006">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
@@ -208,10 +209,10 @@
class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
</p>
<p>姝ｄ箟闃熼暱锛氣��
- <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" />鈥�
+ <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-66" @change="setBookQuestion" />銆傗��
</p>
- <p>榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
- @change="setBookQuestion" />鈥�</p>
+ <p>榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-66" @change="setBookQuestion" />銆傗��
+ </p>
</div>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -234,7 +235,7 @@
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1>
- <audio :src="auidoPathTwo" class="audio" controls></audio>
+ <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bj3">
@@ -263,7 +264,7 @@
v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
@change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
</p>
- <hr />
+ <hr style="margin-left: 0; width: 20%;" />
<p class="note">
<a id="m1">1</a>
鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
@@ -282,8 +283,9 @@
<h1>
<img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
+
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-5.gif" />
</p>
@@ -337,6 +339,7 @@
<h1>
<img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle">
<h3 class="lefth3" id="c010">
<img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
@@ -373,6 +376,10 @@
showPageList: {
type: Array,
},
+ primaryColor: {
+ type: String,
+ default: "red"
+ }
},
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
@@ -385,9 +392,6 @@
data() {
return {
videoPathOne: "",
- videoPathTwo: "",
- videoPathThree: "",
- videoPathFour: "",
auidoPathOne: "",
auidoPathTwo: "",
auidoPathThree: "",
@@ -530,21 +534,11 @@
},
};
},
-
methods: {
//瑙嗛鍜岄煶棰戠殑MD5鍦板潃
async getVidoePath() {
this.videoPathOne = await getResourcePath(
"691cbd2c13198d04afc7800d0f2cafb0"
- );
- this.videoPathTwo = await getResourcePath(
- "a3c9b55ac8227e4c885384ff2fc6c0e7"
- );
- this.videoPathThree = await getResourcePath(
- "dd44a1e31b4304f50d10b2481a148411"
- );
- this.videoPathFour = await getResourcePath(
- "09de7704eeaaf3a210b8c6af0a94d545"
);
// this.auidoPathOne = await getResourcePath(
// "2c5f6c69b0f9f7a3c03e473cb8c977f5"
@@ -563,6 +557,9 @@
JSON.stringify(this.questionData)
);
},
+ audioPlay(e) {
+ this.$emit('closeAudio', e.srcElement.currentSrc)
+ }
},
};
</script>
@@ -591,4 +588,9 @@
height: 100%;
background-color: red;
}
+
+.macthing {
+ background-color: rgb(188, 220, 164);
+ padding: 5% 5%;
+}
</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index 64b2132..e4e8ebb 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -1,10 +1,10 @@
<template>
<div class="chapter" num="3">
- <!-- <div class="page-box" page="14" style="min-height: auto">
+ <div class="page-box" page="14">
<div v-if="showPageList.indexOf(14) > -1">
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
- <audio :src="auidoPathOne" controls></audio>
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -13,27 +13,26 @@
<img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
</p>
</div>
-
<p class="block">
鎴忓墽琛ㄦ紨涓殑鍔ㄤ綔銆佷綋鎬併�佺溂绁炪�佸０闊冲湪濉戦�犺鑹叉椂璧峰埌浜嗛噸瑕佺殑浣滅敤銆傛湰鍗曞厓鎴戜滑灏嗙户缁涔犮�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽苟浠ュ伓鍓х殑褰㈠紡杩涜琛ㄦ紨銆�
</p>
</div>
</div>
<p><br /></p>
- <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">11</div>
+ </div>
</div>
</div>
- <div class="page-box" page="15" style="min-height: auto">
+ <div class="page-box" page="15">
<div v-if="showPageList.indexOf(15) > -1">
<h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b006">绗竴璇俱��浜斿畼鐨勫姏閲�</h2>
<h3 class="lefth3" id="c011">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -45,539 +44,232 @@
</p>
<p><span class="hs1">鈼�</span>鍡呰澶у啋闄�</p>
<p>
- 浣犳渶鐖卞悆鐨勯鐗╂槸_________銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+ 浣犳渶鐖卞悆鐨勯鐗╂槸 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%" />銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
</p>
<p>
- 浣犳渶涓嶇埍鍚冪殑椋熺墿鏄痏________銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+ 浣犳渶涓嶇埍鍚冪殑椋熺墿鏄� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
</p>
- <h3 class="lefth3" id="c012">
+ <h3 class="lefth3 openImgBox" id="c012">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
<p>
- <span class="hs1">鈼�</span
- >浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
+ <span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
</p>
- <p class="center">
- <img class="img-e" alt="" src="../../assets/images/0016-2.jpg" />
+ <p class="center openImgBox">
+ <img class="img-e" alt="" src="../../assets/images/2-1.gif" />
</p>
</div>
<p><br /></p>
- <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">12</div>
+ </div>
</div>
- </div> -->
- <!--<div class="page-box" page="16" style="min-height: auto">
- <div v-if="showPageList.indexOf(16) > -1">
- <h1>
- <img
- src="../../assets/images/page6-header-green.png"
- alt=""
- style="height: auto; width: 100%"
- />
- </h1>
- <div class="bodystyle">
- <h1 class="lefth3" id="c002">
- <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
- </h1>
- <p><span class="hs1">鈼�</span>璇烽�夊嚭浣犺涓烘纭殑绛旀銆�</p>
- <p class="center">
- <img class="img-e" alt="" src="../../assets/images/1-2铓傝殎涓惧ぇ鏍�.gif" />
- </p>
- <p>铓傝殎鏄吀鍨嬬殑锛堛��銆�锛夋槅铏�傦紙澶氶�夛級</p>
- <p>A.缇ゅ眳</p>
- <p>B.绀句細鎬�</p>
- <p>C.鐙眳</p>
- <p>铓傝殎鍐呴儴鏈夛紙銆�銆�锛夊垎宸ャ�傦紙澶氶�夛級</p>
- <p>A.鏄庣‘鐨�</p>
- <p>B.濂囨�殑</p>
- <p>C.鏈夊簭鐨�</p>
- <p>涓�涓紙銆�銆�锛夌兢浣撳皯涓嶄簡榛樺鐨勯厤鍚堛�傦紙澶氶�夛級</p>
- <p>A.鍥㈢粨鐨�</p>
- <p>B.浼樼鐨�</p>
- <p>C.鏉炬暎鐨�</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
- controlslist="nodownload"
- class="w100"
- style="margin-top: 40px"
- ></video>
- </div>
-
+ </div>
+ <div class="page-box" page="16">
+ <div v-if="showPageList.indexOf(16) > -1">
+ <h1>
+ <img src="../../assets/images/unit2-header-img.png" alt="" style="height: auto; width: 100%" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b007">绗簩璇俱��鏄庡療绉嬫</h2>
+ <h3 class="lefth3" id="c013"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鎴戜滑鐨勪笘鐣屼簲褰╂枒鏂撱�傝浣犲～涓�濉紝鎻愬埌杩欎簺棰滆壊锛屼綘鎯冲埌浜嗗摢浜涗簨鐗╋紵</p>
+ <p>榛勮壊锛氭煚妾��<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
+ <p>绾㈣壊锛氶灜鐐��<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
+ <p>缁胯壊锛氬彾瀛愩��<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.eight" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
+ <p>榛戣壊锛氶粦鏉裤��<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.ten" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
+ <p>钃濊壊锛氬ぇ娴枫��<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.twelve" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
+ <h3 class="lefth3" id="c014"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
+ <p>铓傝殎闃熼暱璧拌矾鏄傞鎸鸿兏銆佹浼愬潥瀹氾紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓侊紱灏忚殏铓佽蛋璧疯矾鏉ュ皬蹇冪考缈硷紝鐪肩椋樺拷涓嶅畾锛屽畠鏄竴鍙紙銆�銆�锛夎殏铓侊紱铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓併��</p>
+ <p>A.鑳嗗皬鐨�</p>
+ <p>B.鍠勮壇鐨�</p>
+ <p>C.娌夌ǔ鐨�</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">13</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="17">
+ <div v-if="showPageList.indexOf(17) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <h2 id="b008">绗笁璇俱��闂诲０璇嗕汉</h2>
+ <h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p>甯歌█閬擄細鑹█涓�鍙ヤ笁鍐殩锛屾伓璇激浜哄叚鏈堝瘨銆傝瑷�鍦ㄤ汉涓庝汉鐨勪氦寰�涓捣鐫�閲嶈鐨勪綔鐢紝鏈夌潃鏃犵┓鐨勫姏閲忋��</p>
+ <p><span class="hs1">鈼�</span>濡傛灉鏈嬪弸蹇冩儏涓嶅ソ锛屼綘璇ユ�庝箞瀹夋叞浠�/濂瑰憿锛�</p>
+ <p>鈥�<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 80%"/>銆傗��</p>
+ <p><span class="hs1">鈼�</span>濡傛灉浣犻個璇峰ソ鏈嬪弸鏉ュ閲屽仛瀹紝浣犺璇翠粈涔堟潵娆㈣繋浠�/濂瑰憿锛�</p>
+ <p>鈥�<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 80%"/>銆傗��</p>
+ <h3 class="lefth3" id="c016"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇锋牴鎹彁绀鸿鍑哄彞瀛愶紝娉ㄦ剰澹伴煶鍜岃姘旂殑鍙樺寲銆�</p>
+ <p><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙嫛鐚剧殑铓傝殎锛屾兂瑕佹妸濂堕叒鍋峰伔鍦板崰涓哄繁鏈夛級</p>
+ <p><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙杽鑹殑铓傝殎锛屽湪甯姪浠栦汉鍚庡緱鍒颁簡濂栧姳锛�</p>
+ <p><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜弗鑲冪殑铓傝殎闃熼暱锛屽悜闃熶紞鍙戝嚭鍛戒护锛�</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">14</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="18">
+ <div v-if="showPageList.indexOf(18) > -1">
+ <h1>
+ <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <p><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜竴鍙急灏忕殑铓傝殎锛屽湪鍚戣殏铓侀槦闀胯姹備紤鎭級</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-3.gif" /></p>
+ </div>
+ </div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">15</div>
+ </div>
+ </div>
+ <div class="page-box" page="19">
+ <div v-if="showPageList.indexOf(19) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <h2 id="b009">绗洓璇俱��鐪熷惉鐪熺湅鐪熸劅鍙�</h2>
+ <h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p>寰呬汉鎺ョ墿鏈夌ぜ鏈夎妭銆佽唉鍗戞伃鏁紝鍦ㄨ浠栦汉鎰熷埌濡傛矏鏄ラ鐨勫悓鏃讹紝涔熶細璁╄嚜宸卞彈鍒颁粬浜虹殑灏婇噸鍜岀悊瑙ｃ�傝璇翠竴璇达紝鍦ㄤ笅闈㈣繖浜涘満鏅腑浣犲簲璇ュ浣曞仛锛�</p>
+ <p><span class="hs1">鈼�</span>浣犵湅鍒板濡堢殑姘存澂娌℃按浜嗐��</p>
+ <p><span class="hs1">鈼�</span>鐢垫閲岋紝浣犵珯鍦ㄦ渶鍓嶆帓锛屽悗闈㈢殑浜洪渶瑕佷笅鐢垫銆�</p>
+ <h3 class="lefth3" id="c018"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p>浣犵煡閬撳悧锛熸棤瀹炵墿璁粌鏄竴绉嶈缁冩紨鍛樼殑鏈夋晥鏂规硶锛屼笉浠呰兘澶熷煿鍏绘紨鍛樿壇濂界殑鎯宠薄鑳藉姏锛屾洿鑳藉鍩瑰吇鍏惰鍔ㄧ殑閫昏緫鎬у拰鎯呮櫙閫傚簲鎬э紝鏈�缁堟彁楂樺叾濉戦�犱汉鐗╁舰璞＄殑鑳藉姏銆�</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-4.gif" /></p>
+ <p><span class="hs1">鈼�</span>璇疯瘯鐫�鐢ㄦ棤瀹炵墿琛ㄦ紨鐨勬柟寮忔妸涓嬮潰鐨勬儏鏅〃婕斿嚭鏉ュ惂锛�</p>
+ <p class="center"><img class="img-0" alt="" src="../../assets/images/0020-2.jpg" /></p>
+ </div>
+ </div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">16</div>
+ </div>
+ </div>
+ <div class="page-box" page="20">
+ <div v-if="showPageList.indexOf(20) > -1">
+ <h1>
+ <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b010">鍗曞厓娲诲姩浠诲姟</h2>
+ <h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍚圭焊缁冧範</p>
+ <p class="center"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" /></p>
+ <p>鎵句竴寮犵焊宸撅紝灏嗗畠鎸夊湪澧欎笂銆傜Щ寮�鍙屾墜锛屽姫鍔涚敤姘旀伅灏嗙焊鈥滈拤鈥濆湪澧欓潰涓婏紝涓嶈璁╁畠鍚戜笅婊戣惤銆�</p>
+ <p><span class="hs1">鈼�</span>鍚圭瑪缁冧範</p>
+ <p>灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙ｆ皵灏嗗畠鍚瑰�掋��</p>
+ <p><span class="hs1">鈼�</span>鍚硅瀛愮粌涔�</p>
+ <p>灏嗕竴鍙鏂欒鎶涜嚦绌轰腑锛屽拰浣犵殑灏忎紮浼翠竴璧疯疆娴佸惞姘旓紝閬垮厤濉戞枡琚嬭惤鍦般��</p>
+ </div>
+ </div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">17</div>
+ </div>
+ </div>
+ <div class="page-box" page="21">
+ <div v-if="showPageList.indexOf(21) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <p><span class="hs1">鈼�</span>鍚逛箳涔撶悆缁冧範</p>
+ <p>鐢ㄦ皵鎭皢妗岄潰涓婄殑涔掍箵鐞冧粠鈥滆捣鐐光�濊繍閫佽嚦鈥滅粓鐐光�濓紝杩愰�佽繃绋嬩腑閬垮厤涔掍箵鐞冭Е纰伴殰纰嶇墿銆�</p>
+ <h3 class="lefth3" id="c020"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇疯蛋杩涘墽鍦鸿鐪嬩笉鍚屽墽绉嶇殑鐜板満婕斿嚭锛屾劅鍙楁垙鍓х殑榄呭姏鍚э紒</p>
<p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
- </div>
- <div class="page-box" page="17" style="min-height: auto">
- <div v-if="showPageList.indexOf(17) > -1">
- <h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <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" />
- </h3>
- <p>
- <span class="hs1">鈼�</span
- >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
- </p>
- <audio :src="auidoPathThree" controls></audio>
- <div class="bj3">
- <p class="center">
- <span class="hs"
- >鏄�<a id="w1"></a><a href="chapter003.html#m1"><sup>[1]</sup></a
- >锛堣妭閫夛級</span
- >
- </p>
- <p class="center">鏈辫嚜娓�</p>
- <p class="block">
- 鐩兼湜鐫�锛�<span class="un1">鐩兼湜鐫�</span>锛屼笢椋庢潵浜嗭紝鏄ュぉ鐨勮剼姝�<span
- class="un1"
- >杩�</span
- >浜嗐��
- </p>
- <p class="block">
- 涓�鍒囬兘鍍�<span class="un1">鍒氱潯閱�</span>鐨勬牱瀛愶紝娆ｆ鐒�<span
- class="un1"
- >寮犲紑</span
- >浜嗙溂銆傚北<span class="un1">鏈楁鼎</span>璧锋潵浜嗭紝姘�<span class="un1"
- >娑�</span
- >璧锋潵浜嗭紝澶槼鐨勮劯<span class="un1">绾�</span>璧锋潵浜嗐��
- </p>
- </div>
- <h3 class="lefth3" id="c004">
- <img class="img-gn1" alt="" src="image/czysj.jpg" />
- </h3>
- <p>
- <span class="hs1">鈼�</span
- >鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
- </p>
- <hr />
- <p class="note">
- <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
- 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
- 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
- </p>
- </div>
-
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
- </div>
- <div class="page-box" page="18" style="min-height: auto">
- <div v-if="showPageList.indexOf(18) > -1">
- <h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h2 id="b003">绗笁璇俱��鍐呭績鐨勫０闊�</h2>
- <h1 class="lefth3" id="c005">
- <img
- class="img-gn1"
- alt=""
- src="../../assets/images/1-3.gif"
- style="height: auto; width: 50%"
- />
- </h1>
- <p>
- <span class="hs1">鈼�</span
- >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
- </p>
- <p class="center">
- <img class="img-e" alt="" src="image/0009-1.jpg" />
- </p>
- <audio :src="auidoPathTwo" controls></audio>
- <div class="bj3">
- <p class="center">
- <span class="hs"
- >鏄�<a id="w1"></a><a href="chapter004.html#m1"><sup>[1]</sup></a
- >锛堣妭閫夛級</span
- >
- </p>
- <p class="center">鏈辫嚜娓�</p>
- <p class="block">
- 灏忚崏鍋峰伔鍦颁粠鍦熼噷<span class="un1">閽诲嚭鏉�</span>锛�<span class="un1"
- >瀚╁鐨�</span
- >锛�<span class="un1">缁跨豢鐨�</span>銆傚洯瀛愰噷锛岀敯閲庨噷锛�<span
- class="un1"
- >鐬�</span
- >鍘伙紝涓�澶х墖涓�澶х墖婊℃槸鐨勩��<span class="un1">鍧�</span>鐫�锛�<span
- class="un1"
- >韬�</span
- >鐫�锛�<span class="un1">鎵�</span>涓や釜<span class="un1">婊�</span
- >鍎匡紝<span class="un1">韪�</span>鍑犺剼<span class="un1">鐞�</span
- >锛�<span class="un1">璧�</span>鍑犺稛<span class="un1">璺�</span
- >锛�<span class="un1">鎹�</span>鍑犲洖<span class="un1">杩疯棌</span
- >銆傞<span class="un1">杞绘倓鎮�</span>鐨勶紝鑽�<span class="un1"
- >杞坏缁�</span
- >鐨勩��
- </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 />
- <p class="note">
- <a id="m1"></a><a href="chapter004.html#w1">[1]</a>
- 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
- 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ <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"
+ style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
+ <h2>瑙嗛: 鎯熷鎯熻倴鐨勪汉鐗�</h2>
</p>
- </div>
- <div class="page-box" page="19" style="min-height: auto">
- <div v-if="showPageList.indexOf(19) > -1">
- <h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h3 class="lefth3" id="c006">
- <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
- </h3>
- <h1 class="center">
- <img
- class="img-e"
- alt=""
- src="../../assets/images/1-4.gif"
- style="height: auto; width: 50%"
- />
- </h1>
- <p>
- <span class="hs1">鈼�</span
- >鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
- </p>
- <p>姝ｄ箟闃熼暱锛氣�淿________________________________銆傗��</p>
- <p>榛戞殫闃熼暱锛氣�淿________________________________銆傗��</p>
- </div>
</div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
</div>
- <div class="page-box" page="20" style="min-height: auto">
- <div v-if="showPageList.indexOf(20) > -1">
- <h1>
- <img
- src="../../assets/images/page6-header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <h2 id="b004">绗洓璇俱��韬复鍏跺</h2>
- <h3 class="lefth3" id="c007">
- <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
- </h3>
- <p>
- <span class="hs1">鈼�</span
- >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
- </p>
- <audio :src="auidoPathTwo" controls></audio>
- <div class="bj3">
- <p class="center">
- <span class="hs"
- >鏄�<a id="w1"></a><a href="chapter005.html#m1"><sup>[1]</sup></a
- >锛堣妭閫夛級</span
- >
- </p>
- <p class="center">鏈辫嚜娓�</p>
- <p class="block">
- <span class="un1">妗�</span>鏍戙��<span class="un1">鏉�</span
- >鏍戙��<span class="un1">姊�</span
- >鏍戯紝浣犱笉璁╂垜锛屾垜涓嶈浣狅紝閮藉紑婊′簡鑺辫刀瓒熷効銆傜孩鐨勫儚<span class="un1"
- >鐏�</span
- >锛岀矇鐨勫儚<span class="un1">闇�</span>锛岀櫧鐨勫儚<span class="un1"
- >闆�</span
- >銆傝姳閲屽甫鐫�鐢滃懗鍎库�︹��
- </p>
- </div>
- <h3 class="lefth3" id="c008">
- <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
- </h3>
- <p>
- <span class="hs1">鈼�</span
- >鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
- </p>
- <p>
- 鎴戞槸铓傝殎_________锛堝悕瀛楋級锛屼粖澶╂槸_________锛堝ぉ姘旓級锛屾垜鐨勫ザ閰壒鍒玙________锛堣交/閲嶏級锛屾垜鎰熻濂絖________锛堣韩浣撴劅瑙夛級鍟婏紒
- </p>
- <hr />
- <p class="note">
- <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
- 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
- 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">18</div>
</div>
- <div class="page-box" page="21" style="min-height: auto">
- <div v-if="showPageList.indexOf(21) > -1">
- <h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <p class="center">
- <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
- </p>
- <p>
- <span class="hs1">鈼�</span
- >铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
- <div class="page-box" page="22" style="min-height: auto">
- <div v-if="showPageList.indexOf(22) > -1">
- <h1>
- <img
- src="../../assets/images/page6-header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <h2 id="b005">鍗曞厓娲诲姩浠诲姟</h2>
- <h3 class="lefth3" id="c009">
- <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
- </h3>
- <p><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</p>
- <p>
- 璇蜂綘浜ゆ浛鈥滄斁澶р�濆拰鈥滅缉灏忊�濅簲瀹樸�傚湪鈥滄斁澶р�濇椂锛屾兂璞′簲瀹樿椋炲埌澶栧お绌猴紱鍦ㄢ�滅缉灏忊�濇椂锛屾兂璞′簲瀹樺叏閮ㄧ缉灏忓埌浜嗛蓟灏栦笂銆�
- </p>
- <p><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</p>
- <p>
- 鎯宠薄浣犲湪涓�涓檶鐢熺殑鍦版柟锛岃皝閮戒笉璁よ瘑锛岀獊鐒堕亣瑙佷簡濂芥湅鍙嬶紝浣犲緢楂樺叴锛屼笂鍓嶅拰浠�/濂规墦鎷涘懠銆傚仛涓�鍋氫綘姝ゆ椂鐨勮〃鎯呭惂銆�
- </p>
- <p><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</p>
- <p>
- 璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚０闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
- </p>
- <p><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</p>
- <p>
- 鎯宠薄鑷繁绔欏湪涓�搴ч珮灞变笂锛屽ソ鏈嬪弸鈥滈樋姣涒�濈珯鍦ㄥ闈㈢殑楂樺北涓婏紝浣犺濡備綍鍠婁粬鍛紵
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div>
- <div class="page-box" page="23" style="min-height: auto">
- <div v-if="showPageList.indexOf(23) > -1">
- <h1>
- <img
- src="../../assets/images/page6-header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
- </h1>
- <div class="bodystyle">
- <h3 class="lefth3" id="c010">
- <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
- </h3>
- <p><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
- <p>
- 瀛旇瀺鍥涘瞾灏辨噦绀艰矊銆佺煡璋﹁锛屾槸鎴戜滑瀛︿範鐨勫ソ姒滄牱锛岃鎴戜滑杩愮敤鏈崟鍏冪殑鎴忓墽鐭ヨ瘑锛屾妸浠栫殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒
- </p>
- <p class="center">
- <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"
- style="margin-top: 40px"
- ></video>
- </p>
- </div>
- </div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
- </div> -->
+ </div>
</div>
</template>
-
- <script>
-//import matching from "@/components/matching/matching.vue";
+
+<script>
+
import { getResourcePath } from "@/assets/methods/resources";
export default {
name: "chapterTwo",
- //components: { matching },
props: {
showPageList: {
type: Array,
},
- },
- //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
this.getVidoePath();
+ const bookQuestion = localStorage.getItem("artAndDrama-book-question-two");
+ if (bookQuestion) {
+ this.questionData = JSON.parse(bookQuestion);
+ }
},
data() {
return {
videoPathOne: "",
- videoPathTwo: "",
- videoPathThree: "",
- videoPathFour: "",
auidoPathOne: "",
- auidoPathTwo: "",
- auidoPathThree: "",
- rawData: {
- left: [
- {
- oldId: "FB34",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
- },
- {
- oldId: "64D6",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
- },
- {
- oldId: "2ED4",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
- },
- {
- oldId: "44DE",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
- },
- ],
- right: [
- {
- oldId: "64D6",
- txt: "寮鸿皟鏄瀹�",
- },
- {
- oldId: "FB34",
- txt: "寮鸿皟璇风殑鏄�滀綘鈥�",
- },
- {
- oldId: "2ED4",
- txt: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
- },
- {
- oldId: "44DE",
- txt: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
- },
- ],
- },
- question: {
- KnowledgePoint: "123",
- analysis: "123",
- answer: [
- {
- id: "FB34",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟鏄瀹�",
- },
- {
- id: "64D6",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟璇风殑鏄�滀綘鈥�",
- },
- {
- id: "2ED4",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
- },
- {
- id: "44DE",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
- },
- ],
- optionStyle: undefined,
- id: 489306,
- options: {
- linkValues: [
- {
- oldId: "64D6",
- txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
- },
- {
- oldId: "44DE",
- txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
- },
- {
- oldId: "FB34",
- txt: "The clothing material is quite popular among Roman women inancient times.",
- },
- {
- oldId: "2ED4",
- txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
- },
- ],
- values: [
- {
- oldId: "FB34",
- txt: "Martin Silk",
- },
- {
- oldId: "64D6",
- txt: "The Great Wall",
- },
- {
- oldId: "2ED4",
- txt: "Chinese Food",
- },
- {
- oldId: "44DE",
- txt: "Chinese Tea",
- },
- ],
+ questionData: {
+ warnUp: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven:"",
+ eight:"",
+ nine:"",
+ ten:"",
+ eleven:"",
+ twelve:"",
+ thirteen:"",
+ fourteen:"",
},
- questionType: "matching",
- stem: {
- stemTxt: "鎸夐『搴忚繛绾�",
+ reading: {
+ one: "",
+ two: "",
},
- stemStyle: undefined,
- titleDescription: "1",
- userChoise: [],
- value: [],
+ table: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven: "",
+ enight: "",
+ nine: "",
+ },
},
};
},
@@ -587,50 +279,48 @@
//瑙嗛鍜岄煶棰戠殑MD5鍦板潃
async getVidoePath() {
this.videoPathOne = await getResourcePath(
- "691cbd2c13198d04afc7800d0f2cafb0"
- );
- this.videoPathTwo = await getResourcePath(
"a3c9b55ac8227e4c885384ff2fc6c0e7"
);
- this.videoPathThree = await getResourcePath(
- "dd44a1e31b4304f50d10b2481a148411"
- );
- this.videoPathFour = await getResourcePath(
- "09de7704eeaaf3a210b8c6af0a94d545"
- );
- this.auidoPathOne = await getResourcePath(
- "2c5f6c69b0f9f7a3c03e473cb8c977f5"
- );
- this.auidoPathTwo = await getResourcePath(
- "e93c0fdde08be5a4386c8c863892a287"
- );
- this.auidoPathThree = await getResourcePath(
- "e93c0fdde08be5a4386c8c863892a287"
+ // this.auidoPathOne = await getResourcePath(
+ // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
+ // );
+ },
+ setBookQuestion() {
+ console.log("淇濆瓨");
+ localStorage.setItem(
+ "artAndDrama-book-question-two",
+ JSON.stringify(this.questionData)
);
},
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
},
};
</script>
-
- <style lang="less" scoped>
+
+<style lang="less" scoped>
.w70 {
width: 78%;
}
+
.fw-400 {
font-weight: 400 !important;
}
+
.fz-26 {
font-size: 26px !important;
}
+
.cover-img {
position: absolute;
top: 33%;
left: 23%;
}
+
.division-line {
width: 2px;
height: 100%;
background-color: red;
}
-</style>
-
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
new file mode 100644
index 0000000..67b0f5d
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -0,0 +1,403 @@
+<template>
+ <div class="chapter" num="4">
+ <div class="page-box" page="22">
+ <div v-if="showPageList.indexOf(22) > -1">
+ <h1 id="a004">
+ <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
+ <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay" ></audio>
+ </h1>
+ <div class="bodystyle">
+ <div class="bk">
+ <div class="bj1">
+ <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
+ </div>
+ <p>姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈ｏ紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�</p>
+ </div>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">19</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="23">
+ <div v-if="showPageList.indexOf(23) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%;" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+
+ <h2 id="b011">绗竴璇俱��鍚瑰搷鍔冲姩鐨勯泦缁撳彿</h2>
+ <h3 class="lefth3" id="c021"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p>瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛ｏ紝鍔崇濂斿繖銆�</p>
+ <p>鍥㈢粨涓�蹇冿紝鍚瑰搷鍙疯銆傚垢绂忕敓娲伙紝鍔冲姩鍒涢�犮��</p>
+ <p><span class="hs1">鈼�</span>璇翠竴璇翠綘浼氬仛鍝簺瀹跺姟锛�</p>
+ <p><span class="hs1">鈼�</span>鍜屽皬浼欎即璁ㄨ鍔冲姩鍦ㄧ敓娲讳腑鐨勪綔鐢ㄣ��</p>
+ <p><span class="hs1">鈼�</span>琛ㄦ紨涓�绉嶅鍔″姵鍔紝璇峰皬浼欎即鐚滀竴鐚溿��</p>
+ <h3 class="lefth3" id="c022"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��</p>
+ <p class="center"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">20</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="24">
+ <div v-if="showPageList.indexOf(24) > -1">
+ <h1>
+ <img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b012">绗簩璇俱��鎰忓鍙戠敓浜嗭紒</h2>
+ <h3 class="lefth3" id="c023"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�</p>
+ <h3 class="lefth3" id="c024"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-2.gif" /></p>
+ <p><span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�</p>
+ <!-- 杩炵嚎棰� -->
+ <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'">
+ </matching>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">21</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="25">
+ <div v-if="showPageList.indexOf(25) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <h2 id="b013">绗笁璇俱��鎴戣鎬庝箞鍔烇紵</h2>
+ <h3 class="lefth3" id="c025"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝铓傝殎闃熼暱涔熻捣杩囪椽蹇冿紝浣嗕粬鏈�缁堟垚鍔熷厠鏈嶄簡璐績锛屼綘璁や负浠栨槸鎬庝箞鍋氬埌鐨勫憿锛�</p>
+ <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 90%"/></p>
+ <h3 class="lefth3" id="c026"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">22</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="26">
+ <div v-if="showPageList.indexOf(26) > -1">
+ <h1>
+ <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+
+ <div class="bodystyle">
+
+ <h2 id="b014">绗洓璇俱��鐨嗗ぇ娆㈠枩</h2>
+ <h3 class="lefth3" id="c027"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�</p>
+ <p>鏃堕棿锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>鍦扮偣锛�<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>浜虹墿锛�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>璧峰洜锛�<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>缁忚繃锛�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p>缁撴灉锛�<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
+ <p><span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�</p>
+ <p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 85%"/></p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">23</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="27">
+ <div v-if="showPageList.indexOf(27) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <img src="../../assets/images/page5.png" alt="" />
+ <h3 class="lefth3" id="c028"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>杩愮敤閲嶉煶銆佸唴蹇冪嫭鐧藉拰鍔ㄤ綔璁捐绛夎〃鐜版柟寮忥紝灏嗐�婁竴鍧楀ザ閰�嬬殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒锛堝墽鏈闄勫綍锛�</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">24</div>
+ </div>
+ </div>
+ <div class="page-box" page="28">
+ <div v-if="showPageList.indexOf(28) > -1">
+ <h1>
+ <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b015">鍗曞厓娲诲姩浠诲姟</h2>
+ <h3 class="lefth3" id="c029"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍠樻皵缁冧範</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傛垨鍙夎叞锛屽弻鑴氬垎寮�锛屼笌鑲╁悓瀹姐�傛ā浠垮皬鐙楀枠姘旓紝鎰熷彈鑵归儴鐨勨�滃懠鍚糕�濈姸鎬侊紝鎯宠薄鑷繁鐨勮吂閮ㄦ槸涓�涓皵鐞冿紝鍦ㄥ惛姘旀椂鑵归儴鍚戝鎵╁紶锛屽悙姘旀椂鑵归儴鍚戝唴鏀剁缉銆�</p>
+ <p><span class="hs1">鈼�</span>鈥滃樁鈥濆０缁冧範</p>
+ <p>鍦ㄢ�滃枠姘旂粌涔犫�濈殑鍩虹涓婏紝鍙戝嚭鈥滃樁鈥濋煶锛屾瘡缁�4鐭�1闀裤��</p>
+ <p><span class="hs1">鈼�</span>鈥滃槦鈥濋煶缁冧範</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�傛斁鏉惧弻鍞囷紝娣卞惛姘旓紝鍚瑰嚭姘旀祦甯﹀姩鍢村攪鎶栧姩锛屽彂鍑衡�滃槦鈥濈殑澹伴煶锛屽０闊宠秺闀胯秺濂姐��</p>
+ <p><span class="hs1">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌涔�</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�備互璇存倓鎮勮瘽鐨勬劅瑙夛紝璇村嚭鈥滄垜浠禐缇庨暱姹熲�濓紝骞堕�愭澧炲姞姘斿０鐨勫姏搴︼紝鎵惧埌鍦ㄨ垶鍙颁笂璇存倓鎮勮瘽鐨勬劅瑙夈��</p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">25</div>
+ </div>
+ </div>
+ <div class="page-box" page="29">
+ <div v-if="showPageList.indexOf(29) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
+ </p>
+ <p class="center">
+ <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"
+ style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
+ <h2>瑙嗛: 蹇冩湁澶氬ぇ锛岃垶鍙板氨鏈夊澶�</h2>
+ </p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">26</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import matching from "@/components/matching/matching.vue";
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+ name: "chapterThree",
+ components: { matching },
+ props: {
+ showPageList: {
+ type: Array,
+ },
+
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ mounted() {
+ this.getVidoePath();
+ const bookQuestion = localStorage.getItem("artAndDrama-book-question-three");
+ if (bookQuestion) {
+ this.questionData = JSON.parse(bookQuestion);
+ }
+ },
+ data() {
+ return {
+ videoPathOne: "",
+ auidoPathOne: "",
+ rawData: {
+ left: [
+ {
+ oldId: "FB34",
+ txt: "鈥滄帀浜嗕竴涓锛岃繖璇ユ�庝箞鍔烇紒鈥�",
+ },
+ {
+ oldId: "64D6",
+ txt: "鈥滀涪鎺夛紝瀹炲湪澶彲鎯滐紒鈥�",
+ },
+ {
+ oldId: "2ED4",
+ txt: "鈥滄垜瑕佹槸鍋峰槾璋佷篃鐪嬩笉瑙併�傗��",
+ },
+ ],
+ right: [
+ {
+ oldId: "64D6",
+ txt: "涓嶈兘涓㈡帀鍟婏紝濡傛灉鑳界粰鎴戝悆灏卞お濂戒簡锛�",
+ },
+ {
+ oldId: "FB34",
+ txt: "瑕佷笉鎴戞妸濂堕叒鍋峰伔鍚冧簡鍚с��",
+ },
+ {
+ oldId: "2ED4",
+ txt: "濂藉彲鎯滃晩锛岃繖涔堢編鍛崇殑濂堕叒锛�",
+ },
+ ],
+ },
+ question: {
+ KnowledgePoint: "123",
+ analysis: "123",
+ answer: [
+ {
+ id: "FB34",
+ linkValue: "鈥滄帀浜嗕竴涓锛岃繖璇ユ�庝箞鍔烇紒鈥�",
+ value: "瑕佷笉鎴戞妸濂堕叒鍋峰伔鍚冧簡鍚с��",
+ },
+ {
+ id: "64D6",
+ linkValue: "鈥滀涪鎺夛紝瀹炲湪澶彲鎯滐紒鈥�",
+ value: "涓嶈兘涓㈡帀鍟婏紝濡傛灉鑳界粰鎴戝悆灏卞お濂戒簡锛�",
+ },
+ {
+ id: "2ED4",
+ linkValue: "鈥滄垜瑕佹槸鍋峰槾璋佷篃鐪嬩笉瑙併�傗��",
+ value: "濂藉彲鎯滃晩锛岃繖涔堢編鍛崇殑濂堕叒锛�",
+ },
+ ],
+ optionStyle: undefined,
+ id: 489306,
+ options: {
+ linkValues: [
+ {
+ oldId: "64D6",
+ txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
+ },
+ {
+ oldId: "44DE",
+ txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
+ },
+ {
+ oldId: "FB34",
+ txt: "The clothing material is quite popular among Roman women inancient times.",
+ },
+ {
+ oldId: "2ED4",
+ txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+ },
+ ],
+ values: [
+ {
+ oldId: "FB34",
+ txt: "Martin Silk",
+ },
+ {
+ oldId: "64D6",
+ txt: "The Great Wall",
+ },
+ {
+ oldId: "2ED4",
+ txt: "Chinese Food",
+ },
+ {
+ oldId: "44DE",
+ txt: "Chinese Tea",
+ },
+ ],
+ },
+ questionType: "matching",
+ stem: {
+ stemTxt: "鎸夐『搴忚繛绾�",
+ },
+ stemStyle: undefined,
+ titleDescription: "1",
+ userChoise: [],
+ value: [],
+ },
+ questionData: {
+ warnUp: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven:"",
+ enight:"",
+ },
+ reading: {
+ one: "",
+ two: "",
+ },
+ table: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven: "",
+ enight: "",
+ nine: "",
+ },
+ },
+ };
+ },
+ methods: {
+ //瑙嗛鍜岄煶棰戠殑MD5鍦板潃
+ async getVidoePath() {
+ // 瑙嗛Md5鍦板潃
+ this.videoPathOne = await getResourcePath(
+ "dd44a1e31b4304f50d10b2481a148411"
+ );
+ // 闊抽Md5鍦板潃
+ // this.auidoPathOne = await getResourcePath(
+ // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
+ // );
+
+ },
+ setBookQuestion() {
+ console.log("淇濆瓨");
+ localStorage.setItem(
+ "artAndDrama-book-question-three",
+ JSON.stringify(this.questionData)
+ );
+ },
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.w70 {
+ width: 78%;
+}
+
+.fw-400 {
+ font-weight: 400 !important;
+}
+
+.fz-26 {
+ font-size: 26px !important;
+}
+
+.cover-img {
+ position: absolute;
+ top: 33%;
+ left: 23%;
+}
+
+.division-line {
+ width: 2px;
+ height: 100%;
+ background-color: red;
+}
+
+.macthing {
+ background-color: rgb(188, 220, 164);
+ padding: 5% 0%;
+}
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
new file mode 100644
index 0000000..cb0c15c
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -0,0 +1,295 @@
+<template>
+ <div class="chapter" num="5">
+ <div class="page-box" page="30">
+ <div v-if="showPageList.indexOf(30) > -1">
+ <h1 id="a004">
+ <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
+ <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
+ </h1>
+ <div class="bodystyle">
+ <div class="bk">
+ <div class="bj1">
+ <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
+ </div>
+ <p>鍦ㄦ垙鍓ф紨鍑轰腑锛岄櫎浜嗚垶鍙颁笂鐨勬紨鍛橈紝瀵兼紨銆佺伅鍏夈�侀�犲瀷绛夊箷鍚庝汉鍛樹篃鍙戞尌鐫�閲嶈鐨勪綔鐢ㄣ�傛湰鍗曞厓璁╂垜浠粠鍙板墠璧拌繘骞曞悗锛屽悜榛橀粯濂夌尞鐨勫伐浣滀汉鍛樿嚧鏁紒</p>
+ </div>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">27</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="31">
+ <div v-if="showPageList.indexOf(31) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+
+ <h2 id="b016">绗竴璇俱��涓�妯′竴鏍�</h2>
+ <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅鍥存垚涓�鍦堬紝闈㈡湞鍦堝韫蹭笅锛岀浉閭讳袱浜轰簰鎸庢墜鑷傦紝缁勫憳鍚屾椂绔欒捣鏉ワ紝鐪嬬湅鍝釜缁勬渶蹇紒</p>
+ <p><span class="hs1">鈼�</span>璇翠竴璇达細蹇�熺珯璧锋潵鐨勭璇�鏄粈涔堬紵</p>
+ <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 90%"/></p>
+ <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛岃〃婕斾互涓嬪満鏅紝娉ㄦ剰淇濇寔鍔ㄤ綔涓�鑷村摝銆�</p>
+ <p>铓傝殎闃熼暱鍚瑰搷闆嗗悎鍙凤紝铓傝殎浠繀閫熻窇涓婂満绔欏ソ闃熷舰銆�</p>
+ <p>铓傝殎浠姮鐫�濂堕叒鍚戝墠璧扮潃銆�</p>
+ <p>铓傝殎浠窡闅忚殏铓侀槦闀跨殑鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>
+ <p>铓傝殎浠敱鍥涢潰鍏柟璧板洖鏉ャ��</p>
+ <p>铓傝殎浠姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-1.gif" /></p>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">28</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="32">
+ <div v-if="showPageList.indexOf(32) > -1">
+ <h1>
+ <img src="../../assets/images/unit4-header-img.png" alt="" style="height: auto; width: 100%" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b017">绗簩璇俱��閫犲瀷鍙樺彉鍙�</h2>
+ <h3 class="lefth3" id="c033"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鏄ュぉ鏉ヤ簡锛屾槬椋庡惞杩囷紝鏌虫爲鍙戣娊浜嗭紝杩庢槬鑺卞紑浜嗭紝灏忕嚂瀛愬湪澶╃┖鑷敱鍦伴缈斻�備竴鍒囬兘鏄偅涔堢敓鏈哄媰鍕冦�傝涓衡�滄槬澶┾�濇秱涓婁綘鍠滄鐨勯鑹层��</p>
+ <!-- 鍥剧墖缂哄け -->
+ <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">29</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="33">
+ <div v-if="showPageList.indexOf(33) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍔ㄥ姩鎵嬶紝涓恒�婁竴鍧楀ザ閰�嬩腑鐨勮殏铓佽鑹茶璁＄畝鍗曠殑鏈嶈鍚э紒</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">30</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="34">
+ <div v-if="showPageList.indexOf(34) > -1">
+ <h1>
+ <img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b018">绗笁璇俱��鍙樺簾涓哄疂</h2>
+ <h3 class="lefth3" id="c035"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屽ご椤剁焊鏉紝鑵垮す鎶ョ焊锛岃繘琛屽す绾歌繍鏉父鎴忥紒</p>
+ <h3 class="lefth3" id="c036"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇锋牴鎹�婁竴鍧楀ザ閰�嬬殑鍓ф湰锛屽垪鍑烘紨鍑轰腑闇�瑕佺殑閬撳叿娓呭崟锛岃鎸夌収娓呭崟锛屽埄鐢ㄤ綘鏀堕泦鐨勬棫鐗╁埗浣滈亾鍏峰惂锛�</p>
+ <p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">31</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="35">
+ <div v-if="showPageList.indexOf(35) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <h2 id="b019">绗洓璇俱��濂囧鐨勮垶鍙�</h2>
+ <h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>璇蜂綘璇曠潃妯℃嫙婕斿憳鍊欏満銆佽阿骞曪紝鑸炲彴缇庢湳宸ヤ綔浜哄憳杩涜骞曞悗鍑嗗鐨勫満鏅��</p>
+ <p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></p>
+ <h3 class="lefth3" id="c038"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>閭�璇峰悓浼村叡鍚屽畬鎴愩�婁竴鍧楀ザ閰�嬬殑灞曟紨鍚э紒</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">32</div>
+ </div>
+ </div>
+ <div class="page-box" page="36">
+ <div v-if="showPageList.indexOf(36) > -1">
+ <h1>
+ <img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h2 id="b020">鍗曞厓娲诲姩浠诲姟</h2>
+ <h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
+ <p class="center"><span class="hs">褰綋鎿嶇粌涔�</span></p>
+ <p><span class="hs1">鈼�</span>澶撮儴杩愬姩</p>
+ <p>绗�1涓叓鎷嶏細鍙虫墜瓒婅繃澶撮《鎽稿乏鑰筹紝鍚戝彸杞昏交鍘嬪ご閮ㄣ��</p>
+ <p>绗�2涓叓鎷嶏細宸︽墜瓒婅繃澶撮《鎽稿彸鑰筹紝鍚戝乏杞昏交鍘嬪ご閮ㄣ��</p>
+ <p>绗�3涓叓鎷嶏細澶撮儴椤烘椂閽堣浆涓�鍦堛��</p>
+ <p>绗�4涓叓鎷嶏細澶撮儴閫嗘椂閽堣浆涓�鍦堛��</p>
+ <p><span class="hs1">鈼�</span>寮�鑲╃粌涔�</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
+ <p>绗�1涓叓鎷嶏細绗�1-4鎷嶆墜鑲樺唴渚у悜澶栬浆鍔紝甯﹀姩 鍙岃偐鎵撳紑锛涚5-8鎷嶆墜鑲樺唴渚у悜鍐呮敹鍥烇紝鍚庤儗鎷辫捣锛屽甫鍔ㄥ弻鑲╁唴鎵ｃ��</p>
+ <p>绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
+ <p><span class="hs1">鈼�</span>鎻愭矇鑲╄繍鍔�</p>
+ <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">33</div>
+ </div>
+ </div>
+ <div class="page-box" page="37">
+ <div v-if="showPageList.indexOf(37) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <p>绗�1鑷崇2涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝鍙岃偐涓婃彁鍐嶆矇涓嬶紝涓ゆ媿涓�鍔ㄣ��</p>
+ <p>绗�3鑷崇4涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝宸﹀彸鑲╄唨渚濇涓婃彁鍐嶆矇涓嬶紝涓�鎷嶄竴鍔ㄣ��</p>
+ <p><span class="hs1">鈼�</span>浼稿睍杩愬姩</p>
+ <p>韬綋鏀炬澗锛岃啙鐩栧井灞堬紝涓婅韩鑷劧寮洸涓嬫矇锛屾墜鑷傝嚜鐒朵笅鍨傘��</p>
+ <p>绗�1涓叓鎷嶏細绗�1-7鎷嶈韩浣撶洿璧凤紝鍙岃噦涓捐捣锛岃府璧疯剼灏栵紱绗�8鎷嶈繕鍘熷垵濮嬬姸鎬併��</p>
+ <p>绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
+ <h3 class="lefth3" id="c040"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p><span class="hs1">鈼�</span>鍐欎竴绡囨帓婕旀�荤粨锛屽垎浜涔犵粡楠屽拰鎰熷彈锛�</p>
+ <p class="center">
+ <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"
+ style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
+ <h2>瑙嗛: 鍥㈢粨灏辨槸鍔涢噺</h2>
+ </p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">34</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+ name: "chapterFour",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ mounted() {
+ this.getVidoePath();
+ const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
+ if (bookQuestion) {
+ this.questionData = JSON.parse(bookQuestion);
+ }
+ },
+ data() {
+ return {
+ videoPathOne: "",
+ auidoPathOne: "",
+ questionData: {
+ warnUp: {
+ one: "",
+
+ },
+ reading: {
+ one: "",
+ two: "",
+ },
+ table: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven: "",
+ enight: "",
+ nine: "",
+ },
+ },
+ };
+ },
+ methods: {
+ //瑙嗛鍜岄煶棰戠殑MD5鍦板潃
+ async getVidoePath() {
+ this.videoPathOne = await getResourcePath(
+ "09de7704eeaaf3a210b8c6af0a94d545"
+ );
+ // this.auidoPathOne = await getResourcePath(
+ // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
+ // );
+ },
+ setBookQuestion() {
+ console.log("淇濆瓨");
+ localStorage.setItem(
+ "artAndDrama-book-question-four",
+ JSON.stringify(this.questionData)
+ );
+ },
+ audioPlay(e) {
+ this.$emit('closeAudio',e.srcElement.currentSrc)
+ }
+ },
+
+};
+</script>
+
+<style lang="less" scoped>
+.w70 {
+ width: 78%;
+}
+
+.fw-400 {
+ font-weight: 400 !important;
+}
+
+.fz-26 {
+ font-size: 26px !important;
+}
+
+.cover-img {
+ position: absolute;
+ top: 33%;
+ left: 23%;
+}
+
+.division-line {
+ width: 2px;
+ height: 100%;
+ background-color: red;
+}
+
+.macthing {
+ background-color: rgb(188, 220, 164);
+ padding: 5% 0%;
+}
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter005.vue b/src/books/artAndDrama/view/components/chapter005.vue
new file mode 100644
index 0000000..3305f5e
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter005.vue
@@ -0,0 +1,257 @@
+<template>
+ <div class="chapter" num="6">
+ <div class="page-box" page="38">
+ <div v-if="showPageList.indexOf(38) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <div class="bodystyle">
+ <h1 id="a008">闄勫綍</h1>
+ <p class="block3"><span class="hs">鍓ф湰</span></p>
+ <p class="center1"><span class="hs">涓�鍧楀ザ閰�</span></p>
+ <p class="block">婕斿憳琛細铓傝殎闃熼暱銆佸皬铓傝殎銆佸ぇ澶磋殏铓併�佸皬鐪奸暅铓傝殎銆佽殏铓佸皬濡广�佸ザ閰汉</p>
+ <p class="block3"><span class="hs">閫夋1</span></p>
+ <p class="block">銆愯捣鍏夛紝铓傝殎闃熼暱涓婂満銆�</p>
+ <p class="block">鍜诲捇鈥�</p>
+ <p class="block">銆愯殏铓侀槦闀垮惞鍝嶉泦鍚堝彿锛岃殏铓佷滑杩呴�熻窇涓婂満绔欏ソ闃熷舰銆�</p>
+ <p class="block">铓傝殎闃熼暱锛�<span class="un1">鎴戝甯�</span>锛佷粖澶╂惉杩愮伯椋燂紝鍙<span class="un1">鍑哄姏</span>锛屼笉璁�<span
+ class="un1">鍋峰槾</span>銆傝皝鍋峰槾灏�<span class="un1">缃氳皝</span>锛�</p>
+ <p class="block">铓傝殎浠細鏀跺埌锛�</p>
+ <p class="block">灏忚殏铓侊細锛堝榾鍜曪級瑕佹槸鍋峰槾鐨�<span class="un1">鏄偍鍛�</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙涔夋璇嶄弗锛�<span class="un1">鐓ф牱鍙楃綒</span>锛�</p>
+ <p class="block">銆愯殏铓佷滑榧撴帉銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氱◢鎭紒绔嬫锛佸鎵鹃鐗╋紒鍑哄彂锛�</p>
+ <p class="block">銆愯殏铓佷滑浜夊厛鎭愬悗鍥涘瀵婚銆�</p>
+ <p class="block">澶уご铓傝殎锛氾紙绐佺劧锛�<span class="un1">鎶ュ憡</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氭�庝箞浜嗭紵</p>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">35</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="39">
+ <div v-if="showPageList.indexOf(39) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <p class="block">澶уご铓傝殎锛氾紙鎸囩潃锛夎繖閲屾湁涓�鍧楀ぇ濂堕叒锛�</p>
+ <p class="block">銆愪竴鍧楀ザ閰紙婕斿憳锛夎洞鍦ㄨ钀藉銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙鍏村锛夊摝锛�</p>
+ <p class="block">銆愯殏铓侀槦闀胯濂堕叒鐨勯鍛宠糠浣忥紝杞捣浜嗗湀鍦堛��</p>
+ <p class="block">銆愰煶涔愯捣锛岃殏铓侀槦闀垮拰濂堕叒浜鸿烦璧蜂簡鑸炶箞銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙闄堕唹锛夊ザ閰�︹�﹀ザ閰�︹�﹀～楗辫倸瀛愪笉鍐嶅懕鍛卞彨銆傚ザ閰�︹�﹀ザ閰�︹�﹀悆涓嬩竴鍙ｄ竴澹扮編濡欌�︹��</p>
+ <p class="block">銆愯殏铓佷滑鍋滀笅鎵嬮噷鐨勬惉杩愬伐浣滐紝鐪嬬潃闃熼暱銆�</p>
+ <p class="block">澶уご铓傝殎锛氾紙澶у枈锛夐槦闀匡紒</p>
+ <p class="block">銆愯殏铓侀槦闀胯鍚撻啋锛屽ザ閰汉瓒村湪鍦颁笂銆�</p>
+ <p class="block">灏忕溂闀滆殏铓侊細闃熼暱锛侀槦闀匡紒<span class="un1">蹇偣鎼繍鍚�</span>锛佽繖涔�<span
+ class="un1">鐑�</span>鐨勫ぉ锛屽啀涓嶅嚭鍙戯紝濂堕叒灏�<span class="un1">鍖�</span>鍟︼紒</p>
+ <p class="block">铓傝殎闃熼暱锛氳寰楀锛佹垜鐜板湪灏�<span class="un1">鎼�</span>锛�</p>
+ <p class="block">銆愯殏铓侀槦闀胯蛋鍒板ザ閰潰鍓嶄娇鍔叉姮銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氬搸鍝燂紝鍝庡摕锛屽搸鍝熷摕銆�</p>
+ <p class="block">銆愯殏铓侀槦闀夸竴娆′篃娌℃姮璧锋潵銆�</p>
+ <p class="block3"><span class="hs">閫夋2</span></p>
+ <p class="block">铓傝殎闃熼暱锛氾紙璧疯韩锛�<span class="un1">鎴戝喅瀹氫簡</span>锛佸ぇ瀹�<span
+ class="un1">涓�璧锋惉</span>锛佽繖鍧楀ザ閰互鎴戜负棣栵紝鎼繍鐨勮矾涓�<span class="un1">涓嶈鍋峰悆</span>锛�</p>
+ <p class="block">铓傝殎浠細<span class="un1">鏄�</span>锛�</p>
+ <p class="block">銆愯殏铓佷滑杩呴�熷洿鎴愪竴鍦堬紝铓傝殎闃熼暱绔欏湪濂堕叒鏈�鍓嶉潰銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氬惉鎴戝彛浠わ紒3锛�2锛�1锛佹姮锛�</p>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">36</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="40">
+ <div v-if="showPageList.indexOf(40) > -1">
+ <h1>
+ <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
+ </h1>
+ <div class="bodystyle">
+ <p class="block">銆愬ザ閰鎶捣銆�</p>
+ <p class="block">澶уご铓傝殎锛氬搰锛佽繖鍧楀ザ閰�<span class="un1">濂介鍣�</span>锛�</p>
+ <p class="block">灏忕溂闀滆殏铓侊細鎴戞兂<span class="un1">鍜�</span>涓�鍙ｏ紒</p>
+ <p class="block">灏忚殏铓侊細濡傛灉鑳�<span class="un1">鑸斾竴涓�</span>灏卞ソ浜嗭紒</p>
+ <p class="block">铓傝殎灏忓锛氭垜鐨勫彛姘存祦鍑烘潵浜嗭紒</p>
+ <p class="block">铓傝殎闃熼暱锛氫笉璁哥瀻鎯筹紒涓嶈鍋峰悆锛�<span class="un1">鍑哄彂</span>锛�</p>
+ <p class="block">銆愰煶涔愯捣锛岃殏铓佷滑鎶潃濂堕叒鍚戝墠璧扮潃銆�</p>
+ <p class="block">铓傝殎浠細濂堕叒锛佸ザ閰紒鎴戜滑鐨勫ザ閰紒濂堕叒锛佸ザ閰紒鎴戜滑涓�璧峰垎浜��</p>
+ <p class="block">銆愯殏铓佷滑闄堕唹涓��</p>
+ <p class="block3"><span class="hs">閫夋3</span></p>
+ <p class="block">鍢��</p>
+ <p class="block">銆愯殏铓佷滑鐢ㄥ姴杩囩寷锛屽ザ閰殑涓�涓鎺変簡銆�</p>
+ <p class="block">铓傝殎灏忓锛�<span class="un1">鍟�</span>锛侀槦闀匡紒濂堕叒鐨勮<span class="un1">鎺変簡</span>锛�</p>
+ <p class="block">銆愬ぇ瀹剁湅鍒版帀鍦ㄥ湴涓婄殑濂堕叒銆�</p>
+ <p class="block">铓傝殎浠細鍝囧摝锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氱瓑绛夛紒</p>
+ <p class="block">銆愯垶鍙板彉鍏夛紝婕斿憳鍔ㄤ綔瀹氭牸銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氭帀浜�<span class="un1">涓�涓</span>锛岃繖璇�<span class="un1">鎬庝箞鍔�</span>锛�<span
+ class="un1">涓㈡帀</span>锛屽疄鍦�<span class="un1">澶彲鎯�</span>锛�<span
+ class="un1">瓒佹満鍚冩帀</span>锛屽張瑕佺姱涓嶈鍋峰槾鐨勭浠ゃ�傛�庝箞鍔炲憿锛熸湁涓姙娉曪紒鎴戣鏄�<span class="un1">鍋峰槾</span>璋佷篃<span
+ class="un1">鐪嬩笉瑙�</span>锛�<span class="un1">杩欐牱</span>涓嶅氨琛屽暒锛佸ぇ瀹跺惉濂藉暒锛�</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">37</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="41">
+ <div v-if="showPageList.indexOf(41) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <p class="block3"><span class="hs">閫夋4</span></p>
+ <p class="block">銆愯垶鍙板彉鍏夛紝婕斿憳绔嬫绔欏ソ銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氫紤鎭竴浼氬効锛�</p>
+ <p class="block">铓傝殎灏忓锛�<span class="un1">涓轰粈涔�</span>瑕佷紤鎭憖锛�</p>
+ <p class="block">灏忕溂闀滆殏铓侊細闃熼暱锛佽繖鍧楁帀鍦ㄥ湴涓婄殑濂堕叒<span class="un1">鎬庝箞鍔炲憖</span>锛�</p>
+ <p class="block">澶уご铓傝殎锛氭垜浠涓嶆妸瀹�<span class="un1">鍒嗕簡鍚�</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氬惉鎴戣锛�<span class="un1">浼戞伅</span>锛�<span
+ class="un1">绔嬪埢浼戞伅</span>锛佸ぇ瀹舵惉杩愬お杈涜嫤鍟︼紒鍒嗘暎寮�锛屽摢閲屽噳蹇氨鍒板摢閲屼紤鎭紒</p>
+ <p class="block">銆愬ぇ瀹朵緷鏃т笉鍔ㄣ��</p>
+ <p class="block">铓傝殎闃熼暱锛氬叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒鍚戝悗鈥旇浆锛侀綈姝モ�旇蛋锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氱珛鈥斿畾锛佸師鍦颁紤鎭紒</p>
+ <p class="block">銆愯殏铓佷滑璺熼殢鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>
+ <p class="block3"><span class="hs">閫夋5</span></p>
+ <p class="block">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙灏忓０锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</p>
+ <p class="block">銆愯殏铓侀槦闀夸綆涓嬪ご锛屽梾浜嗕竴涓嬪ザ閰��</p>
+ <p class="block">铓傝殎闃熼暱锛氬懗閬�<span class="un1">鐪�</span>棣欙紒</p>
+ <p class="block">銆愯殏铓侀槦闀跨殑鎵嬩几鍚戝ザ閰福锛岀獊鐒讹紝濂堕叒浜虹珯浜嗚捣鏉ャ��</p>
+ <p class="block">銆愬彉鍏夈��</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">38</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="42">
+ <div v-if="showPageList.indexOf(42) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <p class="block">濂堕叒浜猴細涓嶈鍚冿紒</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙鍚撲簡涓�璺筹級浣犱綘浣狅紒浣犳�庝箞<span class="un1">绔�</span>璧锋潵鍟︼紒</p>
+ <p class="block">濂堕叒浜猴細鎴�<span class="un1">瀹炲湪</span>鐪嬩笉涓嬪幓鍟︼紒</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙瀹虫�曪級鏁戝懡鍝囷紒濂堕叒<span class="un1">娲�</span>鍟︼紒</p>
+ <p class="block">銆愯殏铓侀槦闀胯窇銆�</p>
+ <p class="block">濂堕叒浜猴細<span class="un1">绔欎綇</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氫綘瑕佸共浠�涔堬紵</p>
+ <p class="block">濂堕叒浜猴細<span class="un1">杩欏潡</span>锛�<span class="un1">浣犱笉鑳藉悆</span>锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氫负浠�涔堬紵</p>
+ <p class="block">濂堕叒浜猴細<span class="un1">绗竴</span>锛�<span class="un1">浣�</span>瀹氱殑瑙勭煩锛屼粖澶╂惉杩愪腑锛�<span
+ class="un1">涓嶈鍋峰悆</span>锛佸鏋�<span class="un1">浣�</span>鍋氫笉鍒帮紝浣犲氨<span
+ class="un1">涓嶈兘瑕佹眰鍒汉</span>锛�<span class="un1">绗簩</span>锛佷綘鏄�<span
+ class="un1">铓傝殎闃熼暱</span>锛屽ぇ瀹堕�変綘褰撻槦闀匡紝鏄浣犵殑<span class="un1">淇′换</span>鍜�<span
+ class="un1">灏婇噸</span>锛佷綘鍗磋儗鐫�澶у<span class="un1">鍋峰悆</span>锛�<span class="un1">绗笁</span>锛�<span
+ class="un1">璇氬疄瀹堜俊</span>鏄編寰凤紝浣犲悆鎺夊ザ閰<span class="un1">鎾掕皫</span>锛屾拻浜�<span
+ class="un1">涓�涓�</span>璋庡氨瑕佺敤<span class="un1">鏃犳暟</span>鐨勮皫鏉ュ渾绗竴涓皫锛屾渶鍚�<span
+ class="un1">杩樻槸</span>浼氳鍙戠幇锛�</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙浣庡ご锛夋垜涓嶅悆浜嗭紝鎴戠煡閬�<span class="un1">閿欎簡</span>鈥︹�﹀彲鏄紝杩欐帀鍦ㄥ湴涓婄殑濂堕叒鎬庝箞鍔炲憿锛�</p>
+ <p class="block">濂堕叒浜猴細锛堟兂浜嗘兂锛�<span class="un1">鏈夊姙娉�</span>锛佷綘鍙互閫夋嫨澶у<span
+ class="un1">涓�璧峰垎</span>锛屼篃鍙互閫夋嫨缁欏勾榫勬渶灏忕殑铓傝殎鍚冿紒</p>
+ <p class="block">铓傝殎闃熼暱锛�<span class="un1">濂戒富鎰�</span>锛佹垜杩欏氨闂棶澶у锛岃阿璋綘锛�</p>
+ <p class="block">銆愬彉鍏夛紝濂堕叒鎱㈡參鍦拌汉鍦ㄥ湴涓娿��</p>
+ <p class="block">铓傝殎闃熼暱锛氾紙鍠婏級<span class="un1">娉ㄦ剰鍟�</span>锛佸叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒</p>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">39</div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="43">
+ <div v-if="showPageList.indexOf(43) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle">
+ <p>鍚戝悗杞紒榻愭璧帮紒</p>
+ <p class="block">銆愯殏铓佷滑鐢卞洓闈㈠叓鏂硅蛋鍥炴潵銆�</p>
+ <p class="block">铓傝殎闃熼暱锛氬ぇ瀹朵紤鎭ソ鍟︼紒鎴戞湁涓�涓�<span class="un1">鍐冲畾</span>锛�</p>
+ <p class="block">铓傝殎浠細浠�涔堝喅瀹氾紵</p>
+ <p class="block">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓ｆ槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<span class="un1">浣�</span>鍚冩帀瀹冨惂锛�</p>
+ <p class="block">銆愯殏铓佷滑榧撴帉銆�</p>
+ <p class="block">銆愰煶涔愯捣锛屽ぇ瀹跺姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
+ <p class="block">銆愭敹鍏夈��</p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">40</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "chapterFive",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ mounted() {
+ },
+ data() {
+ return {
+ };
+ },
+ methods: {
+
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.w70 {
+ width: 78%;
+}
+
+.fw-400 {
+ font-weight: 400 !important;
+}
+
+.fz-26 {
+ font-size: 26px !important;
+}
+
+.cover-img {
+ position: absolute;
+ top: 33%;
+ left: 23%;
+}
+
+.division-line {
+ width: 2px;
+ height: 100%;
+ background-color: red;
+}
+
+.macthing {
+ background-color: rgb(188, 220, 164);
+ padding: 5% 0%;
+}
+</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index c37fbcf..c3f7e59 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -1,800 +1,581 @@
<template>
- <div class="page-main" @scroll="throttledScrollHandler">
- <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"
- >
- </chapterTwo>
- <!-- <chapterThree
- v-if="showCatalogList.indexOf(4) > -1"
- :showPageList="loadPageList"
- ></chapterThree>
- <chapterFour
- v-if="showCatalogList.indexOf(5) > -1"
- :showPageList="loadPageList"
- ></chapterFour> -->
-
- </div>
- <!-- 闊抽灏忕獥鎾斁缁勪欢 -->
- <miniAudio
- :path="audioPath"
- :currentTime="currentTime"
- @closeMiniAudio="closeMiniAudio"
- ref="audioPlayer"
- ></miniAudio>
+ <div class="page-main" @scroll="throttledScrollHandler">
+ <div id="searchDomBox" style="display: none">
+ <div id="searchContent"></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 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";
- import Viewer from "viewerjs";
- import "viewerjs/dist/viewer.css";
- export default {
- data() {
- return {
- catalogLength: 3, // 鎬荤珷鑺傛暟
- showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
- loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
- throttleThreshold: 100, // 鑺傛祦闃堝��
- previousScrollTop: 0,
- throttledScrollHandler: null,
- observer: null,
- loadPageObserver: null,
- loadPageList: [],
- questionDataMap: {},
- renderSignMap: {},
- highlightData: null,
- audioPath: "",
+ <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" @closeAudio="closeAudio"></chapterOne>
+ <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterTwo>
+ <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterThree>
+ <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterFour>
+ <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
+ </div>
+ <!-- 闊抽灏忕獥鎾斁缁勪欢 -->
+ <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
+ </miniAudio>
+ </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 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";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+export default {
+ data() {
+ return {
+ catalogLength: 6, // 鎬荤珷鑺傛暟
+ showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+ loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+ throttleThreshold: 100, // 鑺傛祦闃堝��
+ previousScrollTop: 0,
+ throttledScrollHandler: null,
+ observer: null,
+ loadPageObserver: null,
+ loadPageList: [],
+ questionDataMap: {},
+ renderSignMap: {},
+ highlightData: null,
+ audioPath: "",
currentTime: null,
videoList: [],
- };
+ };
+ },
+ computed: {
+ fontSize() {
+ return this.$store.state.qiankun.fontSize;
},
- computed: {
- fontSize() {
- return this.$store.state.qiankun.fontSize;
- },
- pageZoom() {
- return this.$store.state.qiankun.scale / 100;
+ pageZoom() {
+ return this.$store.state.qiankun.scale / 100;
+ },
+ },
+ watch: {
+ showCatalogList: {
+ handler(newVal, oldVal) {
+ if (
+ this.$store.state.qiankun &&
+ this.$store.state.qiankun.catalogChange
+ ) {
+ // 璋冪敤鐖跺眰鏂规硶
+ this.$store.state.qiankun.catalogChange({
+ showCatalogList: newVal,
+ });
+ }
+ // 鍚姩椤电爜瑙傚療
+ setTimeout(() => {
+ this.initObservation();
+ this.initThemeColor();
+ }, 500);
},
},
- watch: {
- showCatalogList: {
- handler(newVal, oldVal) {
- if (
- this.$store.state.qiankun &&
- this.$store.state.qiankun.catalogChange
- ) {
- // 璋冪敤鐖跺眰鏂规硶
- this.$store.state.qiankun.catalogChange({
- showCatalogList: newVal,
- });
- }
- // 鍚姩椤电爜瑙傚療
- setTimeout(() => {
- this.initObservation();
- this.initThemeColor();
- }, 500);
- },
- },
- loadPageList: {
- handler(newVal, oldVal) {
- setTimeout(() => {
- this.initSwiper();
- this.initViewer();
- }, 200);
- },
- },
- pageZoom: {
- handler(newVal, oldVal) {
- const scrollBox = (
- this.container ? this.container : document
- ).querySelector(".page-main");
- scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
- },
+ loadPageList: {
+ handler(newVal, oldVal) {
+ setTimeout(() => {
+ this.initSwiper();
+ this.initViewer();
+ }, 200);
},
},
- mounted() {
- // 榛樿鍔犺浇绔犺妭
- this.showCatalogList = [1];
- // 婊氬姩鐩戝惉鑺傛祦
- this.throttledScrollHandler = _.throttle(
- this.scrollFun,
- this.throttleThreshold,
- { leading: true, trailing: false }
- );
- // 瀹氫箟瀛愬眰鏂规硶
- if (this.setGlobalState) {
- // 鎻愪緵椤甸潰璺宠浆鍔熻兘
- this.setGlobalState({
- gotoPage: (catalog, page) => {
- this.gotoPage(catalog, page);
- },
- // 娓叉煋绗旇銆侀珮浜�佸垝绾�
- renderSign: (type, data) => {
- // 鍥犱负璋冩暣涓洪〉闈㈡噿鍔犺浇锛屾墍浠ユ覆鏌撴爣璁颁篃闇�瑕佹寜鐓ч〉闈㈣繘琛屽鐞嗭紝鍏堝偍瀛樻暟鎹紝椤甸潰鍔犺浇瀹屾垚鍐嶆覆鏌撳搴旂殑鏍囪锛�
- this.handelSignData(type, data);
- // this.renderSign(type, data);
- },
- // 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
- delSign: (data) => {
- this.delSign(data);
- },
- // 鍏ㄦ枃妫�绱�
- searchBookByKeyword: (keyword) => {
- return this.searchTextByPage(keyword);
- },
- // 璺宠浆妫�绱㈢粨鏋滀綅缃�
- jumpSearchItem: (data) => {
- this.searchItemLocation(data);
- },
- });
- }
-
- // 鍒涘缓涓�涓柊鐨� Intersection Observer 瀹炰緥锛岀敤浜庤瀵熺洰鏍囧厓绱犲拰鎵ц鐩稿簲鐨勫洖璋冨嚱鏁般��
- // new IntersectionObserver(callback, options)锛氫娇鐢ㄤ箣鍓嶅畾涔夌殑 callback 鍥炶皟鍑芥暟鍜� options 閰嶇疆閫夐」鏉ュ垵濮嬪寲 Intersection Observer 瀹炰緥銆�
- this.observer = new IntersectionObserver(this.pageChangeCallback, {
- root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
- rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
- threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
- });
-
- this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
- root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
- rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
- threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
- });
-
- // 鍚姩椤电爜瑙傚療
- setTimeout(() => {
- this.initObservation();
- this.initThemeColor();
- }, 500);
-
- // 娴嬭瘯椤甸潰璺宠浆
- // setTimeout(() => {
- // this.gotoPage(1, 10);
- // setTimeout(() => {
- // this.renderSign("Highlight", {
- // id: "2ACA9359",
- // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩",
- // page: "10",
- // type: "Highlight",
- // color: "#F5E12A"
- // });
- // setTimeout(() => {
- // this.delSign({
- // ids: ["2ACA9359"]
- // });
- // }, 2000);
- // }, 5000);
-
- // const pageDom = (this.container ? this.container : document)
- // .querySelector("#app")
- // .querySelectorAll(".page-box");
- // 妫�绱�
- // console.log(this.searchTextByPage("淇濇姢鍐呰剰鍣ㄥ畼"), "searchTextByPage");
- // 妫�绱㈣烦杞�
- // this.searchItemLocation({
- // catalog: 2,
- // page: 10,
- // txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
- // txtIndex: 57
- // });
- // }, 5000);
- },
- methods: {
- // setZoom1() {
- // let scale = this.$store.state.qiankun.scale + 10;
- // const scrollBox = (
- // this.container ? this.container : document
- // ).querySelector(".page-main");
- // this.$store.commit("setZoom", scale);
- // },
- // setZoom2() {
- // let scale = this.$store.state.qiankun.scale - 10;
- // const scrollBox = (
- // this.container ? this.container : document
- // ).querySelector(".page-main");
- // this.$store.commit("setZoom", scale);
- // },
- // 婊氬姩鐩戝惉
- scrollFun(event) {
- // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
- if (event.target.scrollTop > this.previousScrollTop) {
- this.getAduio();
- // 鍚戜笅
- const currentScrollTop =
- event.target.scrollTop + event.target.offsetHeight;
- if (
- currentScrollTop >=
- event.target.scrollHeight - this.loadThreshold
- ) {
- // 鍒拌揪闃堝��
- if (
- this.showCatalogList[this.showCatalogList.length - 1] <
- this.catalogLength
- ) {
- // 鍔犺浇涓嬩竴绔�
- this.showCatalogList.push(
- this.showCatalogList[this.showCatalogList.length - 1] + 1
- );
- if (this.showCatalogList.length > 3) {
- // 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔�
- this.showCatalogList.shift();
- }
- }
- }
- } else if (event.target.scrollTop < this.previousScrollTop) {
- // 鍚戜笂
- this.handleAudio();
- const currentScrollTop = event.target.scrollTop;
- if (currentScrollTop <= this.loadThreshold) {
- // 鍒拌揪闃堝��
- if (this.showCatalogList[0] > 0) {
- // 鍔犺浇涓婁竴绔�
- this.showCatalogList.unshift(this.showCatalogList[0] - 1);
- if (this.showCatalogList.length > 3) {
- // 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔�
- this.showCatalogList.pop();
- }
- }
- }
- }
- // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
- // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
- this.previousScrollTop = event.target.scrollTop;
- },
- // 绔犺妭銆侀〉闈㈣烦杞�
- gotoPage(catalog, page) {
- if (catalog >= 0 && catalog <= this.catalogLength) {
- // 澶勭悊娓叉煋绔犺妭
- if (catalog == 0) {
- this.showCatalogList = [0, 1];
- } else if (catalog == this.catalogLength) {
- this.showCatalogList = [
- this.catalogLength - 2,
- this.catalogLength - 1,
- this.catalogLength,
- ];
- } else {
- this.showCatalogList = [catalog - 1, catalog, catalog + 1];
- }
- setTimeout(() => {
- // 璺宠浆椤电爜
- const pageDom = (
- this.container ? this.container : document
- ).querySelector(`[page="${page}"]`);
- if (pageDom) {
- pageDom.scrollIntoView();
- } else {
- console.log("椤电爜閿欒锛�");
- }
- }, 500);
- } else {
- console.log("绔犺妭閿欒锛�");
- }
- },
-
- // 澶勭悊鏍囪鏁版嵁
- handelSignData(type, data) {
- if (this.loadPageList.indexOf(Number(data.page)) > -1) {
- // 绔嬪嵆娓叉煋
- this.renderSign(type, data);
- }
-
- // 鍌ㄥ瓨鏁版嵁
- if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
- if (!this.renderSignMap[type][data.page])
- this.renderSignMap[type][data.page] = [];
- this.renderSignMap[type][data.page].push(data);
- },
-
- // 娓叉煋鏍囪
- renderSign(type, data) {
- // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
- if (this.$store.state.qiankun.disableSign) {
- return false;
- }
- const existence = (
+ pageZoom: {
+ handler(newVal, oldVal) {
+ const scrollBox = (
this.container ? this.container : document
- ).querySelector(`[dataid="${data.id}"]`);
- // 鍘婚噸
- if (!existence) {
+ ).querySelector(".page-main");
+ scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+ },
+ },
+ },
+ mounted() {
+ // 榛樿鍔犺浇绔犺妭
+ this.showCatalogList = [1];
+ // 婊氬姩鐩戝惉鑺傛祦
+ this.throttledScrollHandler = _.throttle(
+ this.scrollFun,
+ this.throttleThreshold,
+ { leading: true, trailing: false }
+ );
+ // 瀹氫箟瀛愬眰鏂规硶
+ if (this.setGlobalState) {
+ // 鎻愪緵椤甸潰璺宠浆鍔熻兘
+ this.setGlobalState({
+ gotoPage: (catalog, page) => {
+ this.gotoPage(catalog, page);
+ },
+ // 娓叉煋绗旇銆侀珮浜�佸垝绾�
+ renderSign: (type, data) => {
+ // 鍥犱负璋冩暣涓洪〉闈㈡噿鍔犺浇锛屾墍浠ユ覆鏌撴爣璁颁篃闇�瑕佹寜鐓ч〉闈㈣繘琛屽鐞嗭紝鍏堝偍瀛樻暟鎹紝椤甸潰鍔犺浇瀹屾垚鍐嶆覆鏌撳搴旂殑鏍囪锛�
+ this.handelSignData(type, data);
+ // this.renderSign(type, data);
+ },
+ // 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
+ delSign: (data) => {
+ this.delSign(data);
+ },
+ // 鍏ㄦ枃妫�绱�
+ searchBookByKeyword: (keyword) => {
+ return this.searchTextByPage(keyword);
+ },
+ // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+ jumpSearchItem: (data) => {
+ this.searchItemLocation(data);
+ },
+ });
+ }
+
+ // 鍒涘缓涓�涓柊鐨� Intersection Observer 瀹炰緥锛岀敤浜庤瀵熺洰鏍囧厓绱犲拰鎵ц鐩稿簲鐨勫洖璋冨嚱鏁般��
+ // new IntersectionObserver(callback, options)锛氫娇鐢ㄤ箣鍓嶅畾涔夌殑 callback 鍥炶皟鍑芥暟鍜� options 閰嶇疆閫夐」鏉ュ垵濮嬪寲 Intersection Observer 瀹炰緥銆�
+ this.observer = new IntersectionObserver(this.pageChangeCallback, {
+ root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+ rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+ threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+ });
+
+ this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
+ root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+ rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+ threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+ });
+
+ // 鍚姩椤电爜瑙傚療
+ setTimeout(() => {
+ this.initObservation();
+ this.initThemeColor();
+ }, 500);
+
+ // 娴嬭瘯椤甸潰璺宠浆
+ // setTimeout(() => {
+ // this.gotoPage(1, 10);
+ // setTimeout(() => {
+ // this.renderSign("Highlight", {
+ // id: "2ACA9359",
+ // txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩",
+ // page: "10",
+ // type: "Highlight",
+ // color: "#F5E12A"
+ // });
+ // setTimeout(() => {
+ // this.delSign({
+ // ids: ["2ACA9359"]
+ // });
+ // }, 2000);
+ // }, 5000);
+
+ // const pageDom = (this.container ? this.container : document)
+ // .querySelector("#app")
+ // .querySelectorAll(".page-box");
+ // 妫�绱�
+ // console.log(this.searchTextByPage("淇濇姢鍐呰剰鍣ㄥ畼"), "searchTextByPage");
+ // 妫�绱㈣烦杞�
+ // this.searchItemLocation({
+ // catalog: 2,
+ // page: 10,
+ // txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
+ // txtIndex: 57
+ // });
+ // }, 5000);
+ },
+ methods: {
+ // setZoom1() {
+ // let scale = this.$store.state.qiankun.scale + 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
+ // setZoom2() {
+ // let scale = this.$store.state.qiankun.scale - 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
+ // 婊氬姩鐩戝惉
+ scrollFun(event) {
+ // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
+ if (event.target.scrollTop > this.previousScrollTop) {
+ this.getAduio();
+ // 鍚戜笅
+ const currentScrollTop =
+ event.target.scrollTop + event.target.offsetHeight;
+ if (
+ currentScrollTop >=
+ event.target.scrollHeight - this.loadThreshold
+ ) {
+ // 鍒拌揪闃堝��
+ if (
+ this.showCatalogList[this.showCatalogList.length - 1] <
+ this.catalogLength
+ ) {
+ // 鍔犺浇涓嬩竴绔�
+ this.showCatalogList.push(
+ this.showCatalogList[this.showCatalogList.length - 1] + 1
+ );
+ if (this.showCatalogList.length > 3) {
+ // 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔�
+ this.showCatalogList.shift();
+ }
+ }
+ }
+ } else if (event.target.scrollTop < this.previousScrollTop) {
+ // 鍚戜笂
+ this.handleAudio();
+ const currentScrollTop = event.target.scrollTop;
+ if (currentScrollTop <= this.loadThreshold) {
+ // 鍒拌揪闃堝��
+ if (this.showCatalogList[0] > 0) {
+ // 鍔犺浇涓婁竴绔�
+ this.showCatalogList.unshift(this.showCatalogList[0] - 1);
+ if (this.showCatalogList.length > 3) {
+ // 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔�
+ this.showCatalogList.pop();
+ }
+ }
+ }
+ }
+ // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
+ // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
+ this.previousScrollTop = event.target.scrollTop;
+ },
+ // 绔犺妭銆侀〉闈㈣烦杞�
+ gotoPage(catalog, page) {
+ if (catalog >= 0 && catalog <= this.catalogLength) {
+ // 澶勭悊娓叉煋绔犺妭
+ if (catalog == 0) {
+ this.showCatalogList = [0, 1];
+ } else if (catalog == this.catalogLength) {
+ this.showCatalogList = [
+ this.catalogLength - 2,
+ this.catalogLength - 1,
+ this.catalogLength,
+ ];
+ } else {
+ this.showCatalogList = [catalog - 1, catalog, catalog + 1];
+ }
+ setTimeout(() => {
+ // 璺宠浆椤电爜
const pageDom = (
this.container ? this.container : document
- ).querySelector(`[page="${data.page}"]`);
- // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
- const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
- const allTextNodes = [];
- let currentNode = treeWalker.nextNode();
- while (currentNode) {
- allTextNodes.push(currentNode);
- currentNode = treeWalker.nextNode();
+ ).querySelector(`[page="${page}"]`);
+ if (pageDom) {
+ pageDom.scrollIntoView();
+ } else {
+ console.log("椤电爜閿欒锛�");
}
- for (let i = 0; i < allTextNodes.length; i++) {
- const textDom = allTextNodes[i];
- if (textDom.textContent.indexOf(data.txt) > -1) {
- let reg = new RegExp(`${data.txt}`, "ig");
- switch (type) {
- case "Highlight":
- // 楂樹寒
- textDom.parentNode.innerHTML =
- textDom.parentNode.innerHTML.replace(
- reg,
- `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
- );
- break;
- case "Dashing":
- // 鍒掔嚎
- textDom.parentNode.innerHTML =
- textDom.parentNode.innerHTML.replace(
- reg,
- `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
- );
- break;
- case "Note":
- // 绗旇
- textDom.parentNode.innerHTML =
- textDom.parentNode.innerHTML.replace(
- reg,
- `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
- );
- break;
- }
+ }, 500);
+ } else {
+ console.log("绔犺妭閿欒锛�");
+ }
+ },
+
+ // 澶勭悊鏍囪鏁版嵁
+ handelSignData(type, data) {
+ if (this.loadPageList.indexOf(Number(data.page)) > -1) {
+ // 绔嬪嵆娓叉煋
+ this.renderSign(type, data);
+ }
+
+ // 鍌ㄥ瓨鏁版嵁
+ if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
+ if (!this.renderSignMap[type][data.page])
+ this.renderSignMap[type][data.page] = [];
+ this.renderSignMap[type][data.page].push(data);
+ },
+
+ // 娓叉煋鏍囪
+ renderSign(type, data) {
+ // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+ if (this.$store.state.qiankun.disableSign) {
+ return false;
+ }
+ const existence = (
+ this.container ? this.container : document
+ ).querySelector(`[dataid="${data.id}"]`);
+ // 鍘婚噸
+ if (!existence) {
+ const pageDom = (
+ this.container ? this.container : document
+ ).querySelector(`[page="${data.page}"]`);
+ // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
+ const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
+ const allTextNodes = [];
+ let currentNode = treeWalker.nextNode();
+ while (currentNode) {
+ allTextNodes.push(currentNode);
+ currentNode = treeWalker.nextNode();
+ }
+ for (let i = 0; i < allTextNodes.length; i++) {
+ const textDom = allTextNodes[i];
+ if (textDom.textContent.indexOf(data.txt) > -1) {
+ let reg = new RegExp(`${data.txt}`, "ig");
+ switch (type) {
+ case "Highlight":
+ // 楂樹寒
+ textDom.parentNode.innerHTML =
+ textDom.parentNode.innerHTML.replace(
+ reg,
+ `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+ );
+ break;
+ case "Dashing":
+ // 鍒掔嚎
+ textDom.parentNode.innerHTML =
+ textDom.parentNode.innerHTML.replace(
+ reg,
+ `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+ );
+ break;
+ case "Note":
+ // 绗旇
+ textDom.parentNode.innerHTML =
+ textDom.parentNode.innerHTML.replace(
+ reg,
+ `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
+ );
+ break;
}
}
}
- },
- // 鍒犻櫎鏍囪娓叉煋
- delSign({ ids, type }) {
- if (ids && ids.length) {
- for (let i = 0; i < ids.length; i++) {
- const id = ids[i];
- const dom = (
- this.container ? this.container : document
- ).querySelector(`[dataid="${id}"]`);
- dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
- dom.outerHTML,
- dom.outerText
- );
- }
- }
- if (type) {
- const doms = (
+ }
+ },
+ // 鍒犻櫎鏍囪娓叉煋
+ delSign({ ids, type }) {
+ if (ids && ids.length) {
+ for (let i = 0; i < ids.length; i++) {
+ const id = ids[i];
+ const dom = (
this.container ? this.container : document
- ).querySelectorAll(`[datatype="${type}"]`);
- for (let i = 0; i < doms.length; i++) {
- const dom = doms[i];
- dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
- dom.outerHTML,
- dom.outerText
- );
+ ).querySelector(`[dataid="${id}"]`);
+ dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+ dom.outerHTML,
+ dom.outerText
+ );
+ }
+ }
+ if (type) {
+ const doms = (
+ this.container ? this.container : document
+ ).querySelectorAll(`[datatype="${type}"]`);
+ for (let i = 0; i < doms.length; i++) {
+ const dom = doms[i];
+ dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+ dom.outerHTML,
+ dom.outerText
+ );
+ }
+ }
+ },
+ initObservation() {
+ const sections = (
+ this.container ? this.container : document
+ ).querySelectorAll(".page-box");
+ sections.forEach((section) => {
+ if (this.config.activeBook && this.config.activeBook.tryPageCount) {
+ const page = section.getAttribute("page");
+ if (Number(page) > this.config.activeBook.tryPageCount) {
+ let chapterDom = this.getParentWithClass(section, "chapter");
+ const chapterNum = chapterDom.getAttribute("num");
+ this.catalogLength = Number(chapterNum) - 1;
+ section.remove();
+ return false;
}
}
- },
- initObservation() {
- const sections = (
- this.container ? this.container : document
- ).querySelectorAll(".page-box");
- sections.forEach((section) => {
- if (this.config.activeBook && this.config.activeBook.tryPageCount) {
- const page = section.getAttribute("page");
- if (Number(page) > this.config.activeBook.tryPageCount) {
- let chapterDom = this.getParentWithClass(section, "chapter");
- const chapterNum = chapterDom.getAttribute("num");
- this.catalogLength = Number(chapterNum) - 1;
- section.remove();
- return false;
- }
- }
- // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
- const isObserver = section.getAttribute("observer");
- const isLoadObserver = section.getAttribute("loadObserver");
- if (!isObserver) {
- this.observer.observe(section);
- section.setAttribute("observer", "1");
- }
- if (!isLoadObserver) {
- this.loadPageObserver.observe(section);
- section.setAttribute("loadObserver", "1");
- }
- });
- },
- initThemeColor() {
- // 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐�
- const colorDom = (
- this.container ? this.container : document
- ).querySelectorAll(".theme-color");
- const backgroundColorDom = (
- this.container ? this.container : document
- ).querySelectorAll(".theme-back");
- const borderColorDom = (
- this.container ? this.container : document
- ).querySelectorAll(".theme-border");
- // 鑾峰彇閰嶇疆鐨勪富棰樿壊
- const bookThemeColor =
- this.config.activeBook && this.config.activeBook.bookThemeColor
- ? this.config.activeBook.bookThemeColor
- : null;
- const chapterThemeColor =
- this.config.activeBook && this.config.activeBook.chapterThemeColor
- ? this.config.activeBook.chapterThemeColor
- : null;
- const pageThemeColor =
- this.config.activeBook && this.config.activeBook.pageThemeColor
- ? this.config.activeBook.pageThemeColor
- : null;
- colorDom.forEach((domItem) => {
- // 鑾峰彇绔犺妭銆侀〉鐮�
- let pageDom = this.getParentWithClass(domItem, "page-box");
- let chapterDom = this.getParentWithClass(domItem, "chapter");
- let page, chapterNum;
- if (pageDom) page = pageDom.getAttribute("page");
- if (chapterDom) chapterNum = chapterDom.getAttribute("num");
- // 鍚戜笂鍖归厤涓婚鑹�
- const themeColor =
- page && pageThemeColor && pageThemeColor[page]
- ? pageThemeColor[page]
- : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
- ? chapterThemeColor[chapterNum]
- : bookThemeColor;
- if (themeColor) {
- domItem.style.color = themeColor;
- }
- });
- backgroundColorDom.forEach((domItem) => {
- // 鑾峰彇绔犺妭銆侀〉鐮�
- let pageDom = this.getParentWithClass(domItem, "page-box");
- let chapterDom = this.getParentWithClass(domItem, "chapter");
- let page, chapterNum;
- if (pageDom) page = pageDom.getAttribute("page");
- if (chapterDom) chapterNum = chapterDom.getAttribute("num");
- // 鍚戜笂鍖归厤涓婚鑹�
- const themeColor =
- page && pageThemeColor && pageThemeColor[page]
- ? pageThemeColor[page]
- : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
- ? chapterThemeColor[chapterNum]
- : bookThemeColor;
- if (themeColor) {
- domItem.style.backgroundColor = themeColor;
- }
- });
- borderColorDom.forEach((domItem) => {
- // 鑾峰彇绔犺妭銆侀〉鐮�
- let pageDom = this.getParentWithClass(domItem, "page-box");
- let chapterDom = this.getParentWithClass(domItem, "chapter");
- let page, chapterNum;
- if (pageDom) page = pageDom.getAttribute("page");
- if (chapterDom) chapterNum = chapterDom.getAttribute("num");
- // 鍚戜笂鍖归厤涓婚鑹�
- const themeColor =
- page && pageThemeColor && pageThemeColor[page]
- ? pageThemeColor[page]
- : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
- ? 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)) {
- return element;
- }
+ // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
+ const isObserver = section.getAttribute("observer");
+ const isLoadObserver = section.getAttribute("loadObserver");
+ if (!isObserver) {
+ this.observer.observe(section);
+ section.setAttribute("observer", "1");
}
- },
- pageChangeCallback(entries, observer) {
- //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
- entries.forEach((entry) => {
- //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ��
- if (entry.isIntersecting) {
- const target = entry.target;
- //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱�
- const page = target.getAttribute("page");
+ if (!isLoadObserver) {
+ this.loadPageObserver.observe(section);
+ section.setAttribute("loadObserver", "1");
+ }
+ });
+ },
+ initThemeColor() {
+ // 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐�
+ const colorDom = (
+ this.container ? this.container : document
+ ).querySelectorAll(".theme-color");
+ const backgroundColorDom = (
+ this.container ? this.container : document
+ ).querySelectorAll(".theme-back");
+ const borderColorDom = (
+ this.container ? this.container : document
+ ).querySelectorAll(".theme-border");
+ // 鑾峰彇閰嶇疆鐨勪富棰樿壊
+ const bookThemeColor =
+ this.config.activeBook && this.config.activeBook.bookThemeColor
+ ? this.config.activeBook.bookThemeColor
+ : null;
+ const chapterThemeColor =
+ this.config.activeBook && this.config.activeBook.chapterThemeColor
+ ? this.config.activeBook.chapterThemeColor
+ : null;
+ const pageThemeColor =
+ this.config.activeBook && this.config.activeBook.pageThemeColor
+ ? this.config.activeBook.pageThemeColor
+ : null;
+ colorDom.forEach((domItem) => {
+ // 鑾峰彇绔犺妭銆侀〉鐮�
+ let pageDom = this.getParentWithClass(domItem, "page-box");
+ let chapterDom = this.getParentWithClass(domItem, "chapter");
+ let page, chapterNum;
+ if (pageDom) page = pageDom.getAttribute("page");
+ if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+ // 鍚戜笂鍖归厤涓婚鑹�
+ const themeColor =
+ page && pageThemeColor && pageThemeColor[page]
+ ? pageThemeColor[page]
+ : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+ ? chapterThemeColor[chapterNum]
+ : bookThemeColor;
+ if (themeColor) {
+ domItem.style.color = themeColor;
+ }
+ });
+ backgroundColorDom.forEach((domItem) => {
+ // 鑾峰彇绔犺妭銆侀〉鐮�
+ let pageDom = this.getParentWithClass(domItem, "page-box");
+ let chapterDom = this.getParentWithClass(domItem, "chapter");
+ let page, chapterNum;
+ if (pageDom) page = pageDom.getAttribute("page");
+ if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+ // 鍚戜笂鍖归厤涓婚鑹�
+ const themeColor =
+ page && pageThemeColor && pageThemeColor[page]
+ ? pageThemeColor[page]
+ : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+ ? chapterThemeColor[chapterNum]
+ : bookThemeColor;
+ if (themeColor) {
+ domItem.style.backgroundColor = themeColor;
+ }
+ });
+ borderColorDom.forEach((domItem) => {
+ // 鑾峰彇绔犺妭銆侀〉鐮�
+ let pageDom = this.getParentWithClass(domItem, "page-box");
+ let chapterDom = this.getParentWithClass(domItem, "chapter");
+ let page, chapterNum;
+ if (pageDom) page = pageDom.getAttribute("page");
+ if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+ // 鍚戜笂鍖归厤涓婚鑹�
+ const themeColor =
+ page && pageThemeColor && pageThemeColor[page]
+ ? pageThemeColor[page]
+ : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+ ? 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)) {
+ return element;
+ }
+ }
+ },
+ pageChangeCallback(entries, observer) {
+ //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
+ entries.forEach((entry) => {
+ //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ��
+ if (entry.isIntersecting) {
+ const target = entry.target;
+ //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱�
+ const page = target.getAttribute("page");
+ const catalogDom = this.tool.getParentNodeByClassName(
+ target,
+ "chapter"
+ );
+ const catalog = catalogDom.getAttribute("num");
+ let text = null;
+ if (target.querySelector("p")) {
+ text = target.querySelector("p").textContent.substring(0, 50);
+ }
+ // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
+ if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
+ this.$store.state.qiankun.pageChange({
+ page: page,
+ catalog: catalog,
+ text,
+ });
+ // const sections = Array.from(document.querySelectorAll(".section"));
+ //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
+ // let index = sections.findIndex((section) => section === target) + 1;
+ //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併��
+ }
+ });
+ },
+ loadPageCallback(entries, observer) {
+ entries.forEach(async (entry) => {
+ if (entry.isIntersecting) {
+ const target = entry.target;
+ const page = target.getAttribute("page");
+ if (this.loadPageList.indexOf(Number(page)) == -1) {
const catalogDom = this.tool.getParentNodeByClassName(
target,
"chapter"
);
+ // 娣诲姞椤电爜
+ this.loadPageList.push(Number(page));
const catalog = catalogDom.getAttribute("num");
- let text = null;
- if (target.querySelector("p")) {
- text = target.querySelector("p").textContent.substring(0, 50);
- }
- // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
- if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
- this.$store.state.qiankun.pageChange({
- page: page,
- catalog: catalog,
- text,
- });
- // const sections = Array.from(document.querySelectorAll(".section"));
- //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
- // let index = sections.findIndex((section) => section === target) + 1;
- //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併��
- }
- });
- },
- loadPageCallback(entries, observer) {
- entries.forEach(async (entry) => {
- if (entry.isIntersecting) {
- const target = entry.target;
- const page = target.getAttribute("page");
- if (this.loadPageList.indexOf(Number(page)) == -1) {
- const catalogDom = this.tool.getParentNodeByClassName(
- target,
- "chapter"
- );
- // 娣诲姞椤电爜
- this.loadPageList.push(Number(page));
- const catalog = catalogDom.getAttribute("num");
- // if (!this.questionDataMap[page]) {
- // if (testData && testData[catalog]) {
- // if (testData[catalog][page]) {
- // if (Array.isArray(testData[catalog][page])) {
- // this.questionDataMap[page] = await getQuestionList(
- // page,
- // testData[catalog][page],
- // this.config.activeBook
- // );
- // } else {
- // const obj = {};
- // for (let key in testData[catalog][page]) {
- // obj[key] = await getQuestionList(
- // [],
- // testData[catalog][page][key],
- // this.config.activeBook
- // );
- // }
- // this.questionDataMap[page] = obj;
- // }
- // console.log("棰樼洰", this.questionDataMap);
- // }
- // }
- // }
- // 娓叉煋杩欎竴椤电殑鏍囪
- for (const key in this.renderSignMap) {
- if (this.renderSignMap[key][page]) {
- this.renderSignMap[key][page].forEach((item) => {
- this.renderSign(key, item);
- });
- }
- }
- // 澶勭悊楂樹寒
- if (this.highlightData) {
- // 楂樹寒琛�
- setTimeout(() => {
- // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
- // 鍖归厤鍏抽敭瀛�
- const allPageTextNodes = [];
- let currentNode = pageTextList.nextNode();
- while (currentNode) {
- allPageTextNodes.push(currentNode);
- currentNode = pageTextList.nextNode();
- }
- for (let i = 0; i < allPageTextNodes.length; i++) {
- const textDom = allPageTextNodes[i];
- let txtIndex = textDom.textContent.indexOf(
- this.highlightData.txt
- );
- if (txtIndex > -1) {
- textDom.parentNode.style.transition =
- "background-color 0.8s";
- textDom.parentNode.scrollIntoView();
- textDom.parentNode.style.backgroundColor = "#79bbf0";
- setTimeout(() => {
- textDom.parentNode.style.backgroundColor = "";
- }, 1000);
- }
- }
- }, 100);
- }
- if (this.loadPageList.length > 5) {
- // 瓒呰繃5椤�
- this.loadPageList.shift();
- }
- }
- }
- });
- },
- initSwiper() {
- const doms = (
- this.container ? this.container : document
- ).querySelectorAll(".swiper-img");
- for (let i = 0; i < doms.length; i++) {
- const dom = doms[i];
- new Swiper(dom, {
- loop: false, // 鏃犵紳
- autoplay: {
- //鑷姩寮�濮�
- delay: 3000, //鏃堕棿闂撮殧
- disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
- },
- paginationClickable: true,
- slidesPerView: 1, // 涓�缁勪笁涓�
- spaceBetween: 30, // 闂撮殧
- // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
- navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
- ".swiper-button-next"
- ),
- prevEl: (this.container ? this.container : document).querySelector(
- ".swiper-button-prev"
- ),
- },
- // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
- observer: true,
- observeParents: true,
- // // 濡傛灉闇�瑕佸垎椤靛櫒
- // pagination: {
- // el: (this.container ? this.container : document).querySelector(
- // ".swiper-pagination"
- // ),
- // clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
+ // if (!this.questionDataMap[page]) {
+ // if (testData && testData[catalog]) {
+ // if (testData[catalog][page]) {
+ // if (Array.isArray(testData[catalog][page])) {
+ // this.questionDataMap[page] = await getQuestionList(
+ // page,
+ // testData[catalog][page],
+ // this.config.activeBook
+ // );
+ // } else {
+ // const obj = {};
+ // for (let key in testData[catalog][page]) {
+ // obj[key] = await getQuestionList(
+ // [],
+ // testData[catalog][page][key],
+ // this.config.activeBook
+ // );
+ // }
+ // this.questionDataMap[page] = obj;
+ // }
+ // console.log("棰樼洰", this.questionDataMap);
+ // }
+ // }
// }
- });
- }
- const pptDoms = (
- this.container ? this.container : document
- ).querySelectorAll(".swiper_ppt");
- for (let i = 0; i < pptDoms.length; i++) {
- const dom = pptDoms[i];
- new Swiper(dom, {
- loop: false, // 鏃犵紳
- autoplay: false,
- paginationClickable: true,
- slidesPerView: 1, // 涓�缁勪笁涓�
- spaceBetween: 30, // 闂撮殧
- // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
- navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
- ".swiper-button-next"
- ),
- prevEl: (this.container ? this.container : document).querySelector(
- ".swiper-button-prev"
- ),
- },
- // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
- observer: true,
- observeParents: true,
- on: {
- init: (value) => {
- let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
- let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
- var paginationInfoEl = dom.querySelector(".pageBox");
- if (paginationInfoEl)
- paginationInfoEl.textContent = currentPage + "/" + totalPages;
- },
- slideChange: (value) => {
- let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
- let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
- var paginationInfoEl = dom.querySelector(".pageBox");
- if (paginationInfoEl)
- paginationInfoEl.textContent = currentPage + "/" + totalPages;
- },
- },
- });
- }
- },
- initViewer() {
- const doms = (
- this.container ? this.container : document
- ).querySelectorAll(".openImgBox");
- for (let i = 0; i < doms.length; i++) {
- const dom = doms[i];
- new Viewer(dom, {
- container: this.container
- ? this.container.querySelector("#app")
- : "body",
- navbar: true, // 鏄剧ず瀵艰埅鏍�
- toolbar: true, // 鏄剧ず宸ュ叿鏍�
- title: true, // 鏄剧ず鏍囬
- });
- }
- },
- // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
- searchTextByPage(keyword) {
- const searchResult = [];
- let catalogIndex = 0;
- // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
- const pageData = {
- pageHeader,
- chapterOne,
- chapterTwo,
- // chapterThree,
- // chapterFour,
-
- };
- // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
- for (const key in pageData) {
- catalogIndex++;
- let pageComponent, pageExample;
- // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
- pageComponent = Vue.extend(pageData[key]);
- pageExample = new pageComponent({
- propsData: {
- showPageList: [],
- questionData: {},
- isSearch: true
- },
- });
- pageExample.$mount(
- (this.container ? this.container : document).querySelector(
- "#searchContent"
- )
- );
- // 鑾峰彇椤电爜
- const pageDom = (this.container ? this.container : document)
- .querySelector("#searchDomBox")
- .querySelectorAll(".page-box");
- const pages = [];
- for (let i = 0; i < pageDom.length; i++) {
- const pageDomItem = pageDom[i];
- pages.push(Number(pageDomItem.getAttribute("page")));
- }
- // 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
- pageExample.$destroy();
- (this.container ? this.container : document).querySelector(
- "#searchDomBox"
- ).innerHTML = '<div id="searchContent"></div>';
- // 閬嶅巻椤电爜
- if (pages.length) {
- for (let i = 0; i < pages.length; i++) {
- const pageNum = pages[i];
- // 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
- pageComponent = Vue.extend(pageData[key]);
- pageExample = new pageComponent({
- propsData: {
- showPageList: [pageNum],
- questionData: {},
- isSearch: true
- },
- });
- pageExample.$mount(
- (this.container ? this.container : document).querySelector(
- "#searchContent"
- )
- );
- // 鑾峰彇瀵瑰簲椤甸潰dom
- const thisPageDom = (this.container ? this.container : document)
- .querySelector("#searchDomBox")
- .querySelector(`[page="${pageNum}"]`);
- if (thisPageDom) {
+ // 娓叉煋杩欎竴椤电殑鏍囪
+ for (const key in this.renderSignMap) {
+ if (this.renderSignMap[key][page]) {
+ this.renderSignMap[key][page].forEach((item) => {
+ this.renderSign(key, item);
+ });
+ }
+ }
+ // 澶勭悊楂樹寒
+ if (this.highlightData) {
+ // 楂樹寒琛�
+ setTimeout(() => {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
+ const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
// 鍖归厤鍏抽敭瀛�
const allPageTextNodes = [];
let currentNode = pageTextList.nextNode();
@@ -804,38 +585,236 @@
}
for (let i = 0; i < allPageTextNodes.length; i++) {
const textDom = allPageTextNodes[i];
- let txtIndex = textDom.textContent.indexOf(keyword);
+ let txtIndex = textDom.textContent.indexOf(
+ this.highlightData.txt
+ );
if (txtIndex > -1) {
- // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
- searchResult.push({
- page: pageNum,
- catalog: catalogIndex,
- txt: textDom.textContent,
- txtIndex: txtIndex,
- });
+ textDom.parentNode.style.transition =
+ "background-color 0.8s";
+ textDom.parentNode.scrollIntoView();
+ textDom.parentNode.style.backgroundColor = "#79bbf0";
+ setTimeout(() => {
+ textDom.parentNode.style.backgroundColor = "";
+ }, 1000);
}
}
- // 缁撴潫锛屽嵏杞介攢姣�
- pageExample.$destroy();
- (this.container ? this.container : document).querySelector(
- "#searchDomBox"
- ).innerHTML = '<div id="searchContent"></div>';
- }
+ }, 100);
+ }
+ if (this.loadPageList.length > 5) {
+ // 瓒呰繃5椤�
+ this.loadPageList.shift();
}
}
}
- // 杈撳嚭鎼滅储缁撴灉
- console.log(searchResult);
- return searchResult;
- },
- // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
- searchItemLocation(data) {
- // 璁板綍楂樹寒淇℃伅
- this.highlightData = data;
- // 璺宠浆
- this.gotoPage(data.catalog, data.page, () => {});
- },
- // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
+ });
+ },
+ initSwiper() {
+ const doms = (
+ this.container ? this.container : document
+ ).querySelectorAll(".swiper-img");
+ for (let i = 0; i < doms.length; i++) {
+ const dom = doms[i];
+ new Swiper(dom, {
+ loop: false, // 鏃犵紳
+ autoplay: {
+ //鑷姩寮�濮�
+ delay: 3000, //鏃堕棿闂撮殧
+ disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ },
+ paginationClickable: true,
+ slidesPerView: 1, // 涓�缁勪笁涓�
+ spaceBetween: 30, // 闂撮殧
+ // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+ navigation: {
+ nextEl: (this.container ? this.container : document).querySelector(
+ ".swiper-button-next"
+ ),
+ prevEl: (this.container ? this.container : document).querySelector(
+ ".swiper-button-prev"
+ ),
+ },
+ // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+ observer: true,
+ observeParents: true,
+ // // 濡傛灉闇�瑕佸垎椤靛櫒
+ // pagination: {
+ // el: (this.container ? this.container : document).querySelector(
+ // ".swiper-pagination"
+ // ),
+ // clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
+ // }
+ });
+ }
+ const pptDoms = (
+ this.container ? this.container : document
+ ).querySelectorAll(".swiper_ppt");
+ for (let i = 0; i < pptDoms.length; i++) {
+ const dom = pptDoms[i];
+ new Swiper(dom, {
+ loop: false, // 鏃犵紳
+ autoplay: false,
+ paginationClickable: true,
+ slidesPerView: 1, // 涓�缁勪笁涓�
+ spaceBetween: 30, // 闂撮殧
+ // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+ navigation: {
+ nextEl: (this.container ? this.container : document).querySelector(
+ ".swiper-button-next"
+ ),
+ prevEl: (this.container ? this.container : document).querySelector(
+ ".swiper-button-prev"
+ ),
+ },
+ // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+ observer: true,
+ observeParents: true,
+ on: {
+ init: (value) => {
+ let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+ let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+ var paginationInfoEl = dom.querySelector(".pageBox");
+ if (paginationInfoEl)
+ paginationInfoEl.textContent = currentPage + "/" + totalPages;
+ },
+ slideChange: (value) => {
+ let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+ let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+ var paginationInfoEl = dom.querySelector(".pageBox");
+ if (paginationInfoEl)
+ paginationInfoEl.textContent = currentPage + "/" + totalPages;
+ },
+ },
+ });
+ }
+ },
+ initViewer() {
+ const doms = (
+ this.container ? this.container : document
+ ).querySelectorAll(".openImgBox");
+ for (let i = 0; i < doms.length; i++) {
+ const dom = doms[i];
+ new Viewer(dom, {
+ container: this.container
+ ? this.container.querySelector("#app")
+ : "body",
+ navbar: true, // 鏄剧ず瀵艰埅鏍�
+ toolbar: true, // 鏄剧ず宸ュ叿鏍�
+ title: true, // 鏄剧ず鏍囬
+ });
+ }
+ },
+ // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+ searchTextByPage(keyword) {
+ const searchResult = [];
+ let catalogIndex = 0;
+ // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+ const pageData = {
+ pageHeader,
+ chapterOne,
+ chapterTwo,
+ chapterThree,
+ chapterFour,
+ chapterFive
+
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ for (const key in pageData) {
+ catalogIndex++;
+ let pageComponent, pageExample;
+ // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [],
+ questionData: {},
+ isSearch: true
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇椤电爜
+ const pageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelectorAll(".page-box");
+ const pages = [];
+ for (let i = 0; i < pageDom.length; i++) {
+ const pageDomItem = pageDom[i];
+ pages.push(Number(pageDomItem.getAttribute("page")));
+ }
+ // 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ // 閬嶅巻椤电爜
+ if (pages.length) {
+ for (let i = 0; i < pages.length; i++) {
+ const pageNum = pages[i];
+ // 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [pageNum],
+ questionData: {},
+ isSearch: true
+ },
+ });
+ pageExample.$mount(
+ (this.container ? this.container : document).querySelector(
+ "#searchContent"
+ )
+ );
+ // 鑾峰彇瀵瑰簲椤甸潰dom
+ const thisPageDom = (this.container ? this.container : document)
+ .querySelector("#searchDomBox")
+ .querySelector(`[page="${pageNum}"]`);
+ if (thisPageDom) {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
+ // 鍖归厤鍏抽敭瀛�
+ const allPageTextNodes = [];
+ let currentNode = pageTextList.nextNode();
+ while (currentNode) {
+ allPageTextNodes.push(currentNode);
+ currentNode = pageTextList.nextNode();
+ }
+ for (let i = 0; i < allPageTextNodes.length; i++) {
+ const textDom = allPageTextNodes[i];
+ let txtIndex = textDom.textContent.indexOf(keyword);
+ if (txtIndex > -1) {
+ // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
+ searchResult.push({
+ page: pageNum,
+ catalog: catalogIndex,
+ txt: textDom.textContent,
+ txtIndex: txtIndex,
+ });
+ }
+ }
+ // 缁撴潫锛屽嵏杞介攢姣�
+ pageExample.$destroy();
+ (this.container ? this.container : document).querySelector(
+ "#searchDomBox"
+ ).innerHTML = '<div id="searchContent"></div>';
+ }
+ }
+ }
+ }
+ // 杈撳嚭鎼滅储缁撴灉
+ console.log(searchResult);
+ return searchResult;
+ },
+ // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
+ searchItemLocation(data) {
+ // 璁板綍楂樹寒淇℃伅
+ this.highlightData = data;
+ // 璺宠浆
+ this.gotoPage(data.catalog, data.page, () => { });
+ },
+ // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
getAduio() {
let allVideo = (
this.container ? this.container : document
@@ -880,34 +859,51 @@
}
}
},
+ // 鐐瑰嚮闊抽鎾斁锛屽叧闂叾浠栭煶棰�
+ closeAudio(path) {
+ let allVideo = (
+ this.container ? this.container : document
+ ).querySelectorAll(".audio");
+ allVideo = Array.from(allVideo);
+ if (allVideo.length) {
+ for (let index = 0; index < allVideo.length; index++) {
+ const item = allVideo[index];
+ if (item.currentSrc != path) {
+ item.pause()
+ }
+ }
+ }
+ this.closeMiniAudio()
+ },
// 鍏抽棴mini video
closeMiniAudio() {
this.audioPath = "";
},
- },
- components: {
- pageHeader,
- chapterOne,
- chapterTwo,
- miniAudio
- // chapterThree,
- // chapterFour,
-
- },
- };
- </script>
-
- <style lang="less" scoped>
- .page-main {
- width: 100%;
- height: 100%;
- overflow: auto;
- .page-content {
- max-width: 816px;
- min-width: 375px;
- margin: 0 auto;
- padding-bottom: 100px;
- }
+ },
+ components: {
+ pageHeader,
+ chapterOne,
+ chapterTwo,
+ miniAudio,
+ chapterThree,
+ chapterFour,
+ chapterFive
+
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.page-main {
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+
+ .page-content {
+ max-width: 816px;
+ min-width: 375px;
+ margin: 0 auto;
+ padding-bottom: 100px;
}
- </style>
-
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/src/books/childHealth/view/content/components/chapter0004.vue b/src/books/childHealth/view/content/components/chapter0004.vue
index 4c8e692..818446d 100644
--- a/src/books/childHealth/view/content/components/chapter0004.vue
+++ b/src/books/childHealth/view/content/components/chapter0004.vue
@@ -329,7 +329,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ヤ綋閲嶇殑娴嬮噺</p>
</div>
@@ -382,7 +383,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ヨ韩楂樼殑娴嬮噺</p>
</div>
@@ -421,7 +423,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュご鍥寸殑娴嬮噺</p>
</div>
@@ -469,7 +472,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ヨ兏鍥寸殑娴嬮噺</p>
</div>
@@ -752,7 +756,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ョ殑鍋ュ悍妫�鏌�</p>
</div>
@@ -1250,7 +1255,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬効绔ョ粯浜烘祴璇�</p>
</div>
@@ -1595,6 +1601,9 @@
},
gotoLabel(id) {
(this.container ? this.container : document).getElementById(id).scrollIntoView()
+ },
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
}
},
};
diff --git a/src/books/childHealth/view/content/components/chapter001.vue b/src/books/childHealth/view/content/components/chapter001.vue
index 0545773..5496adf 100644
--- a/src/books/childHealth/view/content/components/chapter001.vue
+++ b/src/books/childHealth/view/content/components/chapter001.vue
@@ -322,7 +322,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
</span>
<span class="span-border"></span>
@@ -415,7 +416,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-box video-border"
+ class="video-box video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氶楠�</p>
<h5 id="e001">1.楠ㄧ敓闀胯繀閫�</h5>
@@ -1025,7 +1027,8 @@
controls
controlslist="nodownload"
style="margin-top: 20px"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ懠鍚搁亾鐨勯槻寰＄壒鐐逛笌淇濆仴</p>
</div>
@@ -1485,7 +1488,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ績銆佽绠＄殑鐗圭偣鍙婁繚鍋�</p>
</div>
@@ -1965,7 +1969,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ョ墮榻跨殑鐢熺悊鐗圭偣鍙婁繚鍋�</p>
</div>
@@ -3040,7 +3045,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ唴鍒嗘硨绯荤粺鐨勭敓鐞嗙壒鐐逛笌淇濆仴</p>
</div>
@@ -3440,7 +3446,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
</p>
<p class="img">瑙嗛锛氬鍓嶅効绔ュぇ鑴戠殑鐢熺悊鐗圭偣鍙婁繚鍋�</p>
@@ -3962,7 +3969,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ョ溂鐨勭敓鐞嗙壒鐐逛笌淇濆仴</p>
</div>
@@ -4066,7 +4074,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ヨ�崇殑鐗圭偣鍙婁繚鍋�</p>
</div>
@@ -4272,7 +4281,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ョ毊鑲ょ殑鐗圭偣涓庝繚鍋�</p>
</div>
@@ -4973,6 +4983,9 @@
JSON.stringify(this.chapterOneData)
);
},
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
+ }
},
};
</script>
diff --git a/src/books/childHealth/view/content/components/chapter002.vue b/src/books/childHealth/view/content/components/chapter002.vue
index 74cce9c..7e0ff2d 100644
--- a/src/books/childHealth/view/content/components/chapter002.vue
+++ b/src/books/childHealth/view/content/components/chapter002.vue
@@ -302,7 +302,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬効绔ュ悇闃舵鐨勭壒鐐瑰拰淇濆仴瑕佺偣</p>
</div>
@@ -636,7 +637,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氱敓闀垮彂鑲茬殑鈥滈搧鈥濊寰�</p>
</div>
@@ -1029,7 +1031,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
</div>
</div>
@@ -1505,6 +1508,9 @@
JSON.stringify(this.chapterTwoData)
);
},
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
+ }
},
};
</script>
diff --git a/src/books/childHealth/view/content/components/chapter003.vue b/src/books/childHealth/view/content/components/chapter003.vue
index 44ec39e..bbff559 100644
--- a/src/books/childHealth/view/content/components/chapter003.vue
+++ b/src/books/childHealth/view/content/components/chapter003.vue
@@ -546,7 +546,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬奖鍝嶅鍓嶅効绔ュ績鐞嗗彂灞曠殑鍥犵礌</p>
</div>
@@ -1074,7 +1075,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氳繃搴︿緷璧�</p>
</div>
@@ -1194,7 +1196,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="video-border w100"
+ class="video-border w100 video"
+ @play="videoPlay"
></video>
</p>
<p class="img">瑙嗛锛氳嚜鎱�</p>
@@ -1559,7 +1562,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氳█璇強璇█鍙戣偛闅滅</p>
</div>
@@ -1605,7 +1609,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氭�庢牱鍙戠幇瀛╁瓙鍙戣偛杩熺紦</p>
</div>
@@ -1718,7 +1723,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬効绔ュ鍔ㄧ棁</p>
</div>
@@ -2161,6 +2167,9 @@
},
gotoLabel(id) {
(this.container ? this.container : document).getElementById(id).scrollIntoView()
+ },
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
}
},
};
diff --git a/src/books/childHealth/view/content/components/chapter005.vue b/src/books/childHealth/view/content/components/chapter005.vue
index c32a56a..7f390d6 100644
--- a/src/books/childHealth/view/content/components/chapter005.vue
+++ b/src/books/childHealth/view/content/components/chapter005.vue
@@ -443,7 +443,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氳惀鍏荤礌</p>
</div>
@@ -1598,7 +1599,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氫钩鍎胯緟鍔╅鍝佺殑娣诲姞</p>
</div>
@@ -1905,7 +1907,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- style="width: 100%"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ヨ喅椋熺殑閰嶅埗鍘熷垯</p>
</div>
@@ -2102,7 +2105,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- style="width: 100%"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬効绔ラギ椋熶範鎯殑鍩瑰吇</p>
</div>
@@ -2928,6 +2932,9 @@
},
gotoLabel(id) {
(this.container ? this.container : document).getElementById(id).scrollIntoView()
+ },
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
}
},
};
diff --git a/src/books/childHealth/view/content/components/chapter006.vue b/src/books/childHealth/view/content/components/chapter006.vue
index 93a017e..98e262f 100644
--- a/src/books/childHealth/view/content/components/chapter006.vue
+++ b/src/books/childHealth/view/content/components/chapter006.vue
@@ -839,7 +839,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氭柊鐢熷効鐗圭偣涓庝繚鍋�</p>
</div>
@@ -1145,7 +1146,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氶噸瑙嗘柊鐢熷効鐤剧梾绛涙煡</p>
</div>
@@ -1226,7 +1228,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氭棭浜у効鐨勭壒鐐逛笌淇濆仴</p>
</div>
@@ -2309,7 +2312,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬辜鍎挎湡鐨勭壒鐐逛笌淇濆仴</p>
</div>
@@ -2960,6 +2964,9 @@
},
gotoLabel(id) {
(this.container ? this.container : document).getElementById(id).scrollIntoView()
+ },
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
}
},
};
diff --git a/src/books/childHealth/view/content/components/chapter007.vue b/src/books/childHealth/view/content/components/chapter007.vue
index 9e96de1..61d378d 100644
--- a/src/books/childHealth/view/content/components/chapter007.vue
+++ b/src/books/childHealth/view/content/components/chapter007.vue
@@ -238,7 +238,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氱柧鐥呭熀纭�</p>
</div>
@@ -638,7 +639,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氶仐浼犵梾銆佸嚭鐢熺己闄蜂笌浼樼敓</p>
</div>
@@ -1388,7 +1390,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ父瑙佺柧鐥呪�斺�旇偉鑳栫棁</p>
</div>
@@ -1512,7 +1515,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛涓冿細瀛﹀墠鍎跨甯歌鐤剧梾鈥斺�旂淮鐢熺礌D缂轰箯鎬т綕鍋荤梾</p>
</div>
@@ -1618,7 +1622,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ父瑙佺柧鐥呪�斺�旂己閾佹�ц传琛�</p>
</div>
@@ -1685,7 +1690,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ父瑙佺柧鐥呪�斺�斾笂鍛煎惛閬撴劅鏌�</p>
</div>
@@ -1833,7 +1839,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ父瑙佺柧鐥呪�斺�旈緥榻�</p>
</div>
@@ -1913,7 +1920,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ父瑙佺柧鐥呪�斺�斾腑鑰崇値</p>
</div>
@@ -1959,7 +1967,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ父瑙佺柧鐥呪�斺�斿急瑙�</p>
</div>
@@ -2307,7 +2316,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氫紶鏌撶梾鍩虹鐭ヨ瘑鈥斺�旂壒鎬т笌涓変釜鐜妭</p>
</div>
@@ -2526,7 +2536,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氫紶鏌撶梾鍙婂叾棰勯槻鈥斺�旂柅鑻�</p>
</div>
@@ -3160,7 +3171,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氫紶鏌撶梾鍙婂叾棰勯槻鈥斺�旂媯鐘梾</p>
</div>
@@ -3283,7 +3295,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬鍓嶅効绔ュ父瑙佸瘎鐢熻櫕鐥呪�斺�旇洸铏梾</p>
</div>
@@ -3838,6 +3851,9 @@
},
gotoLabel(id) {
(this.container ? this.container : document).getElementById(id).scrollIntoView()
+ },
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
}
},
};
diff --git a/src/books/childHealth/view/content/components/chapter008.vue b/src/books/childHealth/view/content/components/chapter008.vue
index 7f88cb9..3d3676b 100644
--- a/src/books/childHealth/view/content/components/chapter008.vue
+++ b/src/books/childHealth/view/content/components/chapter008.vue
@@ -333,7 +333,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氫綋娓╂祴閲�</p>
</div>
@@ -386,7 +387,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氱墿鐞嗛檷娓�</p>
</div>
@@ -472,7 +474,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">
瑙嗛锛氬鍓嶅効绔ュ父鐢ㄧ殑鎶ょ悊涓庢�ユ晳鎶�鏈�斺�斿効绔ョ瀛︾敤鑽寚鍗�
@@ -592,7 +595,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氭榧昏</p>
</div>
@@ -1010,7 +1014,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- style="width: 100%"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬紓鐗╃殑澶勭悊</p>
</div>
@@ -1051,7 +1056,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氶奔鍒哄崱鍠夌殑澶勭悊</p>
</div>
@@ -1214,7 +1220,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氭儕鍘ャ�佹檿鍘ャ�佷紤鍏嬬殑澶勭悊</p>
</div>
@@ -1380,7 +1387,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氶鎶樹笌鑴变綅</p>
</div>
@@ -1466,7 +1474,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬績鑲哄鑻�</p>
</div>
@@ -1926,7 +1935,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬辜鍎垮洯瀹夊叏鏁欒偛</p>
</div>
@@ -2586,6 +2596,9 @@
this.$data.pathNine = await getResourcePath("bf45a94562ab237da0ef65ba33631022");
this.$data.pathTen = await getResourcePath("f7b5594f23b2ded96e15b99c296be54d");
},
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
+ }
},
};
</script>
diff --git a/src/books/childHealth/view/content/components/chapter009.vue b/src/books/childHealth/view/content/components/chapter009.vue
index eaccf4e..75d0e96 100644
--- a/src/books/childHealth/view/content/components/chapter009.vue
+++ b/src/books/childHealth/view/content/components/chapter009.vue
@@ -305,7 +305,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬姩鍔涘畾鍨嬪強鍏跺舰鎴�</p>
</div>
@@ -593,7 +594,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- style="width: 100%"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氫竷姝ユ礂鎵嬫硶</p>
</div>
@@ -993,7 +995,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氭櫒闂存鏌�</p>
</div>
@@ -1054,7 +1057,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氶闃叉帴绉�</p>
</div>
@@ -1267,7 +1271,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- style="width: 100%"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氫紶鏌撶梾鍩虹鐭ヨ瘑鈥斺�旈殧绂�</p>
</div>
@@ -1322,7 +1327,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氫紶鏌撶梾鍩虹鐭ヨ瘑鈥斺�旀秷姣�</p>
</div>
@@ -1456,7 +1462,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氱幆澧冨崼鐢熷埗搴︿笌鍗敓淇濆仴鐧昏銆佺粺璁″埗搴�</p>
</div>
@@ -1893,6 +1900,9 @@
"960e9aa17b48e900b08cde6e44b774f3"
);
},
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
+ }
},
};
</script>
diff --git a/src/books/childHealth/view/content/components/chapter010.vue b/src/books/childHealth/view/content/components/chapter010.vue
index 15a32b6..1331d97 100644
--- a/src/books/childHealth/view/content/components/chapter010.vue
+++ b/src/books/childHealth/view/content/components/chapter010.vue
@@ -423,7 +423,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬辜鍎垮洯鍚勫閰嶇疆鐨勫崼鐢熻姹�</p>
</div>
@@ -1090,7 +1091,8 @@
x5-playsinline=""
controls
controlslist="nodownload"
- class="w100 video-border"
+ class="w100 video-border video"
+ @play="videoPlay"
></video>
<p class="img">瑙嗛锛氬辜鍎垮洯鏂囧叿鍜屾暀鐜╁叿鍗敓</p>
</div>
@@ -1490,6 +1492,9 @@
},
gotoLabel(id) {
(this.container ? this.container : document).getElementById(id).scrollIntoView()
+ },
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
}
},
};
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 80a8ec5..cc40f13 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -21,51 +21,61 @@
v-if="showCatalogList.indexOf(2) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterOne>
<chapterTwo
v-if="showCatalogList.indexOf(3) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterTwo>
<chapterThree
v-if="showCatalogList.indexOf(4) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterThree>
<chapterFour
v-if="showCatalogList.indexOf(5) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterFour>
<chapterFive
v-if="showCatalogList.indexOf(6) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterFive>
<chapterSix
v-if="showCatalogList.indexOf(7) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterSix>
<chapterSeven
v-if="showCatalogList.indexOf(8) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterSeven>
<chapterEight
v-if="showCatalogList.indexOf(9) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterEight>
<chapterNine
v-if="showCatalogList.indexOf(10) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterNine>
<chapterTen
v-if="showCatalogList.indexOf(11) > -1"
:showPageList="loadPageList"
:questionData="questionDataMap"
+ @closeVideo="closeVideo"
></chapterTen>
<chapterEleven
v-if="showCatalogList.indexOf(12) > -1"
@@ -227,8 +237,8 @@
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
- setTimeout(() => {
- this.gotoPage(1,10);
+ // setTimeout(() => {
+ // this.gotoPage(1,10);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -242,7 +252,7 @@
// ids: ["2ACA9359"]
// });
// }, 2000);
- // }, 5000);
+ // }, 500);
// const pageDom = (this.container ? this.container : document)
// .querySelector("#app")
@@ -256,7 +266,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- }, 500);
+ // }, 500);
},
methods: {
// setZoom1() {
@@ -896,6 +906,20 @@
this.highlightData = data;
// 璺宠浆
this.gotoPage(data.catalog, data.page, () => {});
+ },
+ closeVideo(path) {
+ let allVideo = (
+ this.container ? this.container : document
+ ).querySelectorAll(".video");
+ allVideo = Array.from(allVideo);
+ if(allVideo.length) {
+ for (let index = 0; index < allVideo.length; index++) {
+ const item = allVideo[index];
+ if(item.currentSrc != path) {
+ item.pause()
+ }
+ }
+ }
}
},
components: {
diff --git a/src/books/embedded/view/components/index.vue b/src/books/embedded/view/components/index.vue
index f187aa3..3c1eeaa 100644
--- a/src/books/embedded/view/components/index.vue
+++ b/src/books/embedded/view/components/index.vue
@@ -610,23 +610,23 @@
autoplay: {
//鑷姩寮�濮�
delay: 3000, //鏃堕棿闂撮殧
- disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
},
paginationClickable: true,
slidesPerView: 1, // 涓�缁勪笁涓�
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
- observeParents: true,
+ observeParents: true
// // 濡傛灉闇�瑕佸垎椤靛櫒
// pagination: {
// el: (this.container ? this.container : document).querySelector(
@@ -649,12 +649,12 @@
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
@@ -673,8 +673,8 @@
var paginationInfoEl = dom.querySelector(".pageBox");
if (paginationInfoEl)
paginationInfoEl.textContent = currentPage + "/" + totalPages;
- },
- },
+ }
+ }
});
}
},
diff --git a/src/books/mathBook/assets/main.less b/src/books/mathBook/assets/main.less
index b390996..4fc2485 100644
--- a/src/books/mathBook/assets/main.less
+++ b/src/books/mathBook/assets/main.less
@@ -841,3 +841,26 @@
}
}
}
+
+
+::-webkit-scrollbar {
+ width: 8px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-track-piece {
+ background-color: rgba(0, 0, 0, 0.1);
+ -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+ height: 5px;
+ background-color: rgba(125, 125, 125, 0.3);
+ -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+ width: 5px;
+ background-color: rgba(125, 125, 125, 0.3);
+ -webkit-border-radius: 6px;
+}
\ No newline at end of file
diff --git a/src/books/mathBook/view/components/chapter001.vue b/src/books/mathBook/view/components/chapter001.vue
index 0c0e400..6715dee 100644
--- a/src/books/mathBook/view/components/chapter001.vue
+++ b/src/books/mathBook/view/components/chapter001.vue
@@ -536,7 +536,7 @@
/>
</p>
</div>
- <p class="block">
+ <p class="block tl">
濡傛灉<i>f</i>锛�<i>x</i>锛夛紝<i>g</i>锛�<i>x</i>锛夐兘鏄畾涔夊煙涓�<i>D</i>鐨勫伓鍑芥暟锛岄偅涔�<i>f</i>锛�<i>x</i>锛�+<i>g</i>锛�<i>x</i>锛夊拰<i>f</i>锛�<i>x</i>锛�<i>g</i>锛�<i>x</i>锛変粛鏄伓鍑芥暟鍚楋紵
<textarea
cols="30"
@@ -565,6 +565,7 @@
<div class="bj">
<examinations
:cardList="questionData"
+ inputBc="#d3edfa"
v-if="questionData"
:isReal="false"
></examinations>
@@ -575,11 +576,37 @@
<!-- 鍑芥暟鎺т欢寮圭獥 -->
<el-dialog
- title=""
:visible.sync="dialogVisible"
width="60%"
:append-to-body="true"
+ :show-close="false"
>
+ <div slot="title" style="padding: 0 0 15px 0;position: relative;">
+ <svg
+ style="position: absolute; right:10px;cursor: pointer;"
+ @click="dialogVisible = false"
+ t="1718596022986"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="4252"
+ width="20"
+ height="20"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <path
+ d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
+ fill="#979797"
+ p-id="4253"
+ ></path>
+ <path
+ d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
+ fill="#979797"
+ p-id="4254"
+ ></path>
+ </svg>
+ </div>
<iframe
src="https://www.geogebra.org/calculator"
frameborder="0"
@@ -588,16 +615,46 @@
</el-dialog>
<!-- 瑙ｉ鎬濊矾寮圭獥 -->
<el-dialog
- title="瑙ｉ鎬濊矾"
:visible.sync="thinkingDialog"
width="40%"
:append-to-body="true"
+ :show-close="false"
>
+ <div slot="title" style="padding: 0; text-align: center; color: #333;display:flex;justify-content: center;">
+ <span style=""> 瑙ｉ鎬濊矾 </span>
+ <svg
+ style="position: absolute; right:10px;cursor: pointer;"
+ @click="thinkingDialog = false"
+ t="1718596022986"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="4252"
+ width="20"
+ height="20"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <path
+ d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
+ fill="#979797"
+ p-id="4253"
+ ></path>
+ <path
+ d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
+ fill="#979797"
+ p-id="4254"
+ ></path>
+ </svg>
+ </div>
<ul>
<li v-for="(item, index) in thinkOne" :key="index">
<div v-if="item.isShow" style="display: flex">
- <span class="step-num">
- <span class="step-num-box">{{ index + 1 }}</span>
+ <span style="position: relative">
+ <span
+ style="position: absolute; top: 16px; left: 13px; color: #fff"
+ >{{ index + 1 }}</span
+ >
<img
src="../../assets/images/icon/blue-group.png"
alt=""
@@ -615,8 +672,20 @@
</div>
</li>
</ul>
- <div class="bottom-btn" @click="showNext(thinkIndex)">
- <img src="../../assets/images/icon/mouse.png" alt="" v-if="thinkIndex != 3" />
+ <div
+ @click="showNext(thinkIndex)"
+ style="
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ "
+ >
+ <img
+ src="../../assets/images/icon/mouse.png"
+ alt=""
+ v-if="thinkIndex != 3"
+ />
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -643,16 +712,50 @@
</el-dialog>
<!-- 瑙ｉ姝ラ寮圭獥 -->
<el-dialog
+ class="stepDialog"
title="瑙ｉ姝ラ"
:visible.sync="stepDialog"
width="40%"
:append-to-body="true"
+ :show-close="false"
>
+ <div slot="title" style="padding: 0; text-align: center; color: #333;display:flex;justify-content: center;">
+ <span>
+ 瑙ｉ姝ラ
+ </span>
+ <svg
+ style="position: absolute; right:10px;cursor: pointer;"
+ @click="stepDialog = false"
+ t="1718596022986"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="4252"
+ width="20"
+ height="20"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <path
+ d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
+ fill="#979797"
+ p-id="4253"
+ ></path>
+ <path
+ d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
+ fill="#979797"
+ p-id="4254"
+ ></path>
+ </svg>
+ </div>
<ul>
<li v-for="(item, index) in stepOne" :key="index">
<div v-if="item.isShow" style="display: flex">
- <span class="step-num">
- <span class="step-num-box">{{ index + 1 }}</span>
+ <span style="position: relative">
+ <span
+ style="position: absolute; top: 16px; left: 13px; color: #fff"
+ >{{ index + 1 }}</span
+ >
<img
src="../../assets/images/icon/blue-group.png"
alt=""
@@ -670,8 +773,20 @@
</div>
</li>
</ul>
- <div class="bottom-btn" @click="showNextChange(stepIndex)">
- <img src="../../assets/images/icon/mouse.png" alt="" v-if="stepIndex != 2" />
+ <div
+ @click="showNextChange(stepIndex)"
+ style="
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ "
+ >
+ <img
+ src="../../assets/images/icon/mouse.png"
+ alt=""
+ v-if="stepIndex != 2"
+ />
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -735,7 +850,7 @@
videoPath: "",
questionData: [],
stepIndex: 1,
- thinkIndex:1,
+ thinkIndex: 1,
chapterData: {
isCollectImg: false,
isCollectVideo: false,
@@ -832,15 +947,15 @@
const number = this.thinkOne.findIndex((item, index) => index == num);
console.log(number);
this.thinkOne[number].isShow = true;
- if(this.thinkIndex <= 2) {
- this.thinkIndex ++
+ if (this.thinkIndex <= 2) {
+ this.thinkIndex++;
}
},
showNextChange(num) {
const number = this.stepOne.findIndex((item, index) => index == num);
this.stepOne[number].isShow = true;
- if(this.stepIndex < 2) {
- this.stepIndex ++
+ if (this.stepIndex < 2) {
+ this.stepIndex++;
}
},
},
@@ -880,4 +995,6 @@
color: #fff;
}
}
+.stepDialog {
+}
</style>
diff --git a/src/books/mathBook/view/components/index.vue b/src/books/mathBook/view/components/index.vue
index b135e8a..d608cce 100644
--- a/src/books/mathBook/view/components/index.vue
+++ b/src/books/mathBook/view/components/index.vue
@@ -618,23 +618,23 @@
autoplay: {
//鑷姩寮�濮�
delay: 3000, //鏃堕棿闂撮殧
- disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+ disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
},
paginationClickable: true,
slidesPerView: 1, // 涓�缁勪笁涓�
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
- observeParents: true,
+ observeParents: true
// // 濡傛灉闇�瑕佸垎椤靛櫒
// pagination: {
// el: (this.container ? this.container : document).querySelector(
@@ -657,12 +657,12 @@
spaceBetween: 30, // 闂撮殧
// 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
navigation: {
- nextEl: (this.container ? this.container : document).querySelector(
+ nextEl: dom.querySelector(
".swiper-button-next"
),
- prevEl: (this.container ? this.container : document).querySelector(
+ prevEl: dom.querySelector(
".swiper-button-prev"
- ),
+ )
},
// 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
observer: true,
@@ -681,8 +681,8 @@
var paginationInfoEl = dom.querySelector(".pageBox");
if (paginationInfoEl)
paginationInfoEl.textContent = currentPage + "/" + totalPages;
- },
- },
+ }
+ }
});
}
},
diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less
index 775f1d2..61eedbb 100644
--- a/src/books/sportsAndHealth/css/default.less
+++ b/src/books/sportsAndHealth/css/default.less
@@ -1951,6 +1951,8 @@
.custom-dialog {
+ overflow: hidden !important;
+
.el-dialog__body {
padding: 0;
}
diff --git a/src/books/sportsAndHealth/view/components/testPp.vue b/src/books/sportsAndHealth/view/components/testPp.vue
index a536cbf..d95e2f5 100644
--- a/src/books/sportsAndHealth/view/components/testPp.vue
+++ b/src/books/sportsAndHealth/view/components/testPp.vue
@@ -1460,7 +1460,9 @@
<el-dialog
:visible.sync="dialogVisible"
width="60vw"
+ top="2vh"
append-to-body
+ lock-scroll
:show-close="false"
class="custom-dialog"
>
diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue
index 5986ef3..f2bdffd 100644
--- a/src/components/examinations/index.vue
+++ b/src/components/examinations/index.vue
@@ -73,12 +73,13 @@
v-html="itemText"
></span>
<!-- -->
- <el-input
+ <input
v-else
type="text"
class="input"
v-model.trim="value.userAnswer[itemText.num]"
:disabled="value.isComplete"
+ :style="{backgroundColor:inputBc}"
/>
<!-- -->
</span>
@@ -495,6 +496,10 @@
type: Boolean,
default: true,
},
+ inputBc: {
+ type: String,
+ default: "#fff",
+ },
},
data() {
return {
@@ -824,23 +829,15 @@
font-weight: 400;
margin-top: 6px;
}
- .el-input {
+ input {
width: 140px;
height: 24px;
- border-top: 0;
+ border: 0;
+ outline: none;
+ border-bottom: 1px solid #15c0f2;
}
/deep/ .el-textarea.is-disabled .el-textarea__inner {
background-color: #fff;
- }
- /deep/.el-input__wrapper {
- border-top: 0 !important;
- }
- /deep/ .el-input__inner {
- border-top: 0 !important;
- border-left: 0 !important ;
- border-right: 0 !important ;
- border-bottom: 1px solid #15c0f2 !important;
- border-radius: 0 !important;
}
/deep/ .el-input.is-disabled .el-input__inner {
background-color: #fff;
diff --git a/src/components/miniAudio/index.vue b/src/components/miniAudio/index.vue
index ac4a2a7..f7e1908 100644
--- a/src/components/miniAudio/index.vue
+++ b/src/components/miniAudio/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="mini-audio" v-if="path">
- <audio controls :src="path" class="aduioPlayer"></audio>
+ <audio controls controlslist="noplaybackrate nodownload" :src="path" class="aduioPlayer"></audio>
<svg
@click="closeMiniAudio"
t="1717642737563"
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index 113c4ad..a7405cb 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -2,7 +2,7 @@
<div class="preview" v-if="this.preViewMd5">
<div id="imageParent" class="imageBox"></div>
<div class="bottom_tool">
- <svg
+ <!-- <svg
t="1718330411310"
@click="downloadPdf"
class="icon"
@@ -17,7 +17,7 @@
d="M1022.955204 522.570753c0 100.19191-81.516572 181.698249-181.718715 181.698249l-185.637977 0c-11.2973 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l185.637977 0c77.628008 0 140.786467-63.148226 140.786467-140.766001 0-77.423347-62.841234-140.448776-140.203182-140.766001-0.419556 0.030699-0.818645 0.051165-1.217734 0.061398-5.945409 0.143263-11.686157-2.292206-15.687284-6.702656-4.001127-4.400217-5.894244-10.335393-5.167696-16.250102 1.330298-10.806113 1.944282-19.760043 1.944282-28.192086 0-60.763922-23.658839-117.884874-66.617234-160.833035-42.968627-42.968627-100.089579-66.617234-160.843268-66.617234-47.368844 0-92.742241 14.449084-131.208321 41.781592-37.616736 26.738991-65.952084 63.700811-81.925894 106.884332-2.425236 6.538927-8.012488 11.399631-14.827707 12.893658-6.815219 1.483794-13.927197-0.603751-18.859533-5.54632-19.289322-19.330254-44.943608-29.972639-72.245418-29.972639-56.322773 0-102.146425 45.813419-102.146425 102.125959 0 0.317225 0.040932 0.982374 0.092098 1.627057 0.061398 0.920976 0.122797 1.831718 0.153496 2.762927 0.337691 9.465582-5.863545 17.928325-15.001669 20.455891-32.356942 8.933463-61.541635 28.550243-82.181721 55.217602-21.305235 27.516704-32.571836 60.508096-32.571836 95.41307 0 86.244246 70.188572 156.422585 156.443052 156.422585l169.981393 0c11.2973 0 20.466124 9.15859 20.466124 20.466124 0 11.2973-9.168824 20.466124-20.466124 20.466124l-169.981393 0c-108.828614 0-197.3753-88.536452-197.3753-197.354833 0-44.053332 14.223956-85.712127 41.126676-120.473839 22.809495-29.460985 53.897537-52.086285 88.710414-64.816215 5.065366-74.322729 67.149353-133.2447 142.751215-133.2447 28.386514 0 55.504128 8.217149 78.651314 23.52581 19.657712-39.868009 48.842405-74.169233 85.497233-100.212376 45.434795-32.295544 99.004875-49.354058 154.918325-49.354058 71.692832 0 139.087778 27.915793 189.782368 78.600149 50.694589 50.694589 78.610382 118.089535 78.610382 189.782368 0 3.704368-0.102331 7.470135-0.296759 11.368932C952.633602 352.568894 1022.955204 429.511287 1022.955204 522.570753zM629.258611 820.711014l-102.023628 102.013395c-3.990894 4.001127-9.230222 5.996574-14.46955 5.996574s-10.478655-1.995447-14.46955-5.996574l-102.023628-102.013395c-7.992021-7.992021-7.992021-20.947078 0-28.939099s20.947078-8.002254 28.939099 0l67.087954 67.077721 0-358.699522c0-11.2973 9.15859-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.168824 20.466124 20.466124l0 358.699522 67.087954-67.077721c7.992021-8.002254 20.947078-7.992021 28.939099 0S637.250632 812.718993 629.258611 820.711014z"
p-id="7122"
></path>
- </svg>
+ </svg> -->
</div>
</div>
</template>
@@ -78,9 +78,7 @@
window.open(await getResourcePath(this.preViewMd5));
},
domViewer() {
- let ele = (this.container ? this.container : document).getElementById(
- "imageParent"
- );
+ let ele = document.getElementById("imageParent");
this.viewerCon = new Viewer(ele, {
inline: false,
container: this.container
@@ -92,16 +90,12 @@
});
},
clearDom() {
- let ele = (this.container ? this.container : document).getElementById(
- "imageParent"
- );
+ let ele = document.getElementById("imageParent");
ele.innerHtml = "";
},
createDom(page) {
var that = this;
- let ele = (this.container ? this.container : document).getElementById(
- "imageParent"
- );
+ let ele = document.getElementById("imageParent");
const img = document.createElement("img");
img.src = this.getPageImage(page);
img.alt = "";
@@ -116,9 +110,7 @@
},
scrollBottom() {
var that = this;
- var ele = (this.container ? this.container : document).getElementById(
- "imageParent"
- );
+ var ele = document.getElementById("imageParent");
ele.addEventListener("scroll", function () {
// 璁＄畻婊氬姩鏉¤窛绂诲簳閮ㄧ殑浣嶇疆
const scrollBottom =
--
Gitblit v1.9.1