From d699fe9586830b5fefe53038c8b5b6b2dbb4ac90 Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期四, 13 六月 2024 09:36:14 +0800
Subject: [PATCH] drama
---
src/books/artAndDrama/assets/images/3-3.gif | 0
src/books/artAndDrama/assets/images/dy3.jpg | 0
src/books/artAndDrama/assets/images/page5.png | 0
src/books/artAndDrama/assets/images/dydd.jpg | 0
src/books/artAndDrama/assets/images/0017-1.jpg | 0
src/books/artAndDrama/assets/images/0033-1.jpg | 0
src/books/artAndDrama/assets/images/3-1单元大图.gif | 0
src/books/artAndDrama/assets/images/0007-1.jpg | 0
src/books/artAndDrama/assets/images/0016-2.jpg | 0
src/books/artAndDrama/view/components/chapter004.vue | 0
src/books/artAndDrama/assets/images/xsyty.jpg | 0
src/books/artAndDrama/assets/images/0036-2.jpg | 0
src/books/artAndDrama/assets/images/header-green.png | 0
src/books/artAndDrama/assets/images/dy2.jpg | 0
src/books/artAndDrama/assets/images/0030-1.jpg | 0
src/books/artAndDrama/assets/images/dy1.jpg | 0
src/books/artAndDrama/assets/images/page6-header-green.png | 0
src/books/artAndDrama/assets/images/2-4.gif | 0
src/books/artAndDrama/assets/images/3-2.gif | 0
src/books/artAndDrama/assets/images/0010-1.jpg | 0
src/books/artAndDrama/assets/images/0020-1.jpg | 0
src/books/artAndDrama/assets/images/tzyys.jpg | 0
src/books/artAndDrama/view/components/index.vue | 851 +++++++++++++++++
src/books/artAndDrama/assets/images/FD.jpg | 0
src/books/artAndDrama/assets/images/0016-1.jpg | 0
src/books/artAndDrama/assets/images/0036-1.jpg | 0
src/books/artAndDrama/assets/images/4-2.gif | 0
src/books/artAndDrama/assets/images/ym.jpg | 0
src/books/artAndDrama/assets/images/0020-2.jpg | 0
src/books/artAndDrama/assets/images/dy4.jpg | 0
src/books/artAndDrama/assets/images/4-1.gif | 0
src/books/artAndDance/view/components/header.vue | 5
src/books/artAndDrama/assets/images/0021-1.jpg | 0
src/books/artAndDrama/assets/images/2-0单元大图.gif | 0
src/books/artAndDrama/assets/images/0024-1.jpg | 0
src/books/artAndDrama/assets/images/czysj.jpg | 0
src/books/artAndDrama/assets/images/Cover.jpg | 0
src/books/artAndDrama/assets/images/0019-1.jpg | 0
src/books/artAndDrama/assets/images/0025-1.jpg | 0
src/books/artAndDrama/assets/images/1-2蚂蚁举大树.gif | 0
src/books/artAndDrama/assets/images/0035-1.jpg | 0
src/books/artAndDrama/view/index.vue | 76 +
src/books/artAndDrama/assets/images/1-4.gif | 0
src/books/artAndDrama/assets/images/2-1.gif | 0
src/books/artAndDrama/assets/images/SMY.jpg | 0
src/books/artAndDrama/assets/images/0022-1.jpg | 0
src/books/artAndDrama/assets/images/0012-1.jpg | 0
src/books/artAndDrama/assets/images/0032-1.jpg | 0
src/books/artAndDrama/view/components/header.vue | 72 +
src/books/artAndDrama/assets/main.less | 563 +++++++++++
src/books/artAndDrama/assets/images/0038-1.jpg | 0
src/books/artAndDrama/assets/images/0028-1.jpg | 0
src/books/artAndDrama/assets/images/1-1单元大图.gif | 0
src/books/artAndDrama/assets/images/1-3.gif | 0
src/books/artAndDrama/assets/images/4-3.gif | 0
src/books/artAndDrama/assets/images/0034-1.jpg | 0
src/books/artAndDrama/assets/images/2-3.gif | 0
src/books/artAndDrama/assets/images/0026-1.jpg | 0
src/books/artAndDrama/view/components/chapter003.vue | 0
src/books/artAndDrama/assets/images/rhybx.jpg | 0
src/books/artAndDrama/assets/images/4-0单元大图.gif | 0
src/books/artAndDrama/assets/images/0009-1.jpg | 0
src/books/artAndDrama/assets/images/2-2.gif | 0
src/books/artAndDrama/assets/images/1-5.gif | 0
src/books/artAndDrama/view/components/chapter002.vue | 633 ++++++++++++
src/books/artAndDrama/view/components/chapter001.vue | 714 ++++++++++++++
src/books/artAndDrama/assets/images/0014-1.jpg | 0
src/App.vue | 10
68 files changed, 2,920 insertions(+), 4 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 81ff827..152c8da 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,11 +3,12 @@
<childHealth v-if="activeBook.name == 'childHealth'"></childHealth>
<lifeCare v-if="activeBook.name == 'lifeCare'"></lifeCare>
<embedded v-if="activeBook.name == 'embedded'"></embedded>
- <english v-if="activeBook.name == 'english'"> </english>
+ <english v-if="activeBook.name == 'english'"></english>
<sportsAndHealth
v-if="activeBook.name == 'sportsAndHealth'"
></sportsAndHealth>
<artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance>
+ <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama>
</div>
</template>
@@ -18,6 +19,7 @@
import english from "./books/English/view/index.vue";
import sportsAndHealth from "./books/sportsAndHealth/view/index";
import artAndDance from './books/artAndDance/view/index.vue'
+import artAndDrama from './books/artAndDrama/view/index.vue'
export default {
name: "App",
@@ -27,7 +29,8 @@
embedded,
english,
sportsAndHealth,
- artAndDance
+ artAndDance,
+ artAndDrama
},
data() {
return {
@@ -72,7 +75,8 @@
// embedded
// english
// artAndDance
- this.config.resourceCtx + "sportsAndHealth"
+ // artAndDrama
+ this.config.resourceCtx + "artAndDrama"
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue
index 288065b..08d8f2c 100644
--- a/src/books/artAndDance/view/components/header.vue
+++ b/src/books/artAndDance/view/components/header.vue
@@ -69,4 +69,7 @@
};
</script>
-<style scoped></style>
+<style scoped>
+
+
+</style>
diff --git a/src/books/artAndDrama/assets/images/0007-1.jpg b/src/books/artAndDrama/assets/images/0007-1.jpg
new file mode 100644
index 0000000..e5b5bfd
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0007-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0009-1.jpg b/src/books/artAndDrama/assets/images/0009-1.jpg
new file mode 100644
index 0000000..6de1db1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0009-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0010-1.jpg b/src/books/artAndDrama/assets/images/0010-1.jpg
new file mode 100644
index 0000000..d67edf1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0010-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0012-1.jpg b/src/books/artAndDrama/assets/images/0012-1.jpg
new file mode 100644
index 0000000..b5043f6
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0012-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0014-1.jpg b/src/books/artAndDrama/assets/images/0014-1.jpg
new file mode 100644
index 0000000..6f93fad
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0014-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0016-1.jpg b/src/books/artAndDrama/assets/images/0016-1.jpg
new file mode 100644
index 0000000..6986960
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0016-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0016-2.jpg b/src/books/artAndDrama/assets/images/0016-2.jpg
new file mode 100644
index 0000000..5416544
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0016-2.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0017-1.jpg b/src/books/artAndDrama/assets/images/0017-1.jpg
new file mode 100644
index 0000000..b114599
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0017-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0019-1.jpg b/src/books/artAndDrama/assets/images/0019-1.jpg
new file mode 100644
index 0000000..75bd7a1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0019-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0020-1.jpg b/src/books/artAndDrama/assets/images/0020-1.jpg
new file mode 100644
index 0000000..3eca349
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0020-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0020-2.jpg b/src/books/artAndDrama/assets/images/0020-2.jpg
new file mode 100644
index 0000000..4a0f9f1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0020-2.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0021-1.jpg b/src/books/artAndDrama/assets/images/0021-1.jpg
new file mode 100644
index 0000000..07586e3
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0021-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0022-1.jpg b/src/books/artAndDrama/assets/images/0022-1.jpg
new file mode 100644
index 0000000..cfb4b09
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0022-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0024-1.jpg b/src/books/artAndDrama/assets/images/0024-1.jpg
new file mode 100644
index 0000000..25ca68d
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0024-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0025-1.jpg b/src/books/artAndDrama/assets/images/0025-1.jpg
new file mode 100644
index 0000000..285779a
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0025-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0026-1.jpg b/src/books/artAndDrama/assets/images/0026-1.jpg
new file mode 100644
index 0000000..25891cf
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0026-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0028-1.jpg b/src/books/artAndDrama/assets/images/0028-1.jpg
new file mode 100644
index 0000000..2334dac
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0028-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0030-1.jpg b/src/books/artAndDrama/assets/images/0030-1.jpg
new file mode 100644
index 0000000..e9d1afc
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0030-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0032-1.jpg b/src/books/artAndDrama/assets/images/0032-1.jpg
new file mode 100644
index 0000000..a0a0dd2
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0032-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0033-1.jpg b/src/books/artAndDrama/assets/images/0033-1.jpg
new file mode 100644
index 0000000..47ad3c7
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0033-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0034-1.jpg b/src/books/artAndDrama/assets/images/0034-1.jpg
new file mode 100644
index 0000000..36c3c70
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0034-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0035-1.jpg b/src/books/artAndDrama/assets/images/0035-1.jpg
new file mode 100644
index 0000000..2845166
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0035-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0036-1.jpg b/src/books/artAndDrama/assets/images/0036-1.jpg
new file mode 100644
index 0000000..e36cd16
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0036-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0036-2.jpg b/src/books/artAndDrama/assets/images/0036-2.jpg
new file mode 100644
index 0000000..3e46f8c
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0036-2.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0038-1.jpg b/src/books/artAndDrama/assets/images/0038-1.jpg
new file mode 100644
index 0000000..21e1091
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0038-1.jpg
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/1-1\345\215\225\345\205\203\345\244\247\345\233\276.gif" "b/src/books/artAndDrama/assets/images/1-1\345\215\225\345\205\203\345\244\247\345\233\276.gif"
new file mode 100644
index 0000000..55957c1
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/1-1\345\215\225\345\205\203\345\244\247\345\233\276.gif"
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/1-2\350\232\202\350\232\201\344\270\276\345\244\247\346\240\221.gif" "b/src/books/artAndDrama/assets/images/1-2\350\232\202\350\232\201\344\270\276\345\244\247\346\240\221.gif"
new file mode 100644
index 0000000..b36167d
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/1-2\350\232\202\350\232\201\344\270\276\345\244\247\346\240\221.gif"
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/1-3.gif b/src/books/artAndDrama/assets/images/1-3.gif
new file mode 100644
index 0000000..eace09a
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/1-3.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/1-4.gif b/src/books/artAndDrama/assets/images/1-4.gif
new file mode 100644
index 0000000..063979b
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/1-4.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/1-5.gif b/src/books/artAndDrama/assets/images/1-5.gif
new file mode 100644
index 0000000..0587a6e
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/1-5.gif
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/2-0\345\215\225\345\205\203\345\244\247\345\233\276.gif" "b/src/books/artAndDrama/assets/images/2-0\345\215\225\345\205\203\345\244\247\345\233\276.gif"
new file mode 100644
index 0000000..a5f0f7b
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/2-0\345\215\225\345\205\203\345\244\247\345\233\276.gif"
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/2-1.gif b/src/books/artAndDrama/assets/images/2-1.gif
new file mode 100644
index 0000000..5af13a0
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/2-1.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/2-2.gif b/src/books/artAndDrama/assets/images/2-2.gif
new file mode 100644
index 0000000..c6220b8
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/2-2.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/2-3.gif b/src/books/artAndDrama/assets/images/2-3.gif
new file mode 100644
index 0000000..2e05b49
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/2-3.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/2-4.gif b/src/books/artAndDrama/assets/images/2-4.gif
new file mode 100644
index 0000000..5b38d32
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/2-4.gif
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/3-1\345\215\225\345\205\203\345\244\247\345\233\276.gif" "b/src/books/artAndDrama/assets/images/3-1\345\215\225\345\205\203\345\244\247\345\233\276.gif"
new file mode 100644
index 0000000..551886c
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/3-1\345\215\225\345\205\203\345\244\247\345\233\276.gif"
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/3-2.gif b/src/books/artAndDrama/assets/images/3-2.gif
new file mode 100644
index 0000000..473d468
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/3-2.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/3-3.gif b/src/books/artAndDrama/assets/images/3-3.gif
new file mode 100644
index 0000000..ab723c1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/3-3.gif
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/4-0\345\215\225\345\205\203\345\244\247\345\233\276.gif" "b/src/books/artAndDrama/assets/images/4-0\345\215\225\345\205\203\345\244\247\345\233\276.gif"
new file mode 100644
index 0000000..b93cc28
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/4-0\345\215\225\345\205\203\345\244\247\345\233\276.gif"
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/4-1.gif b/src/books/artAndDrama/assets/images/4-1.gif
new file mode 100644
index 0000000..6cb83be
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/4-1.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/4-2.gif b/src/books/artAndDrama/assets/images/4-2.gif
new file mode 100644
index 0000000..15afe4d
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/4-2.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/4-3.gif b/src/books/artAndDrama/assets/images/4-3.gif
new file mode 100644
index 0000000..a500cd4
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/4-3.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/Cover.jpg b/src/books/artAndDrama/assets/images/Cover.jpg
new file mode 100644
index 0000000..cae01e4
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/Cover.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/FD.jpg b/src/books/artAndDrama/assets/images/FD.jpg
new file mode 100644
index 0000000..951db68
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/FD.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/SMY.jpg b/src/books/artAndDrama/assets/images/SMY.jpg
new file mode 100644
index 0000000..1cefc8b
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/SMY.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/czysj.jpg b/src/books/artAndDrama/assets/images/czysj.jpg
new file mode 100644
index 0000000..0a01c2f
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/czysj.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dy1.jpg b/src/books/artAndDrama/assets/images/dy1.jpg
new file mode 100644
index 0000000..c62b280
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dy1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dy2.jpg b/src/books/artAndDrama/assets/images/dy2.jpg
new file mode 100644
index 0000000..fb2f7b0
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dy2.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dy3.jpg b/src/books/artAndDrama/assets/images/dy3.jpg
new file mode 100644
index 0000000..5bfd5dc
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dy3.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dy4.jpg b/src/books/artAndDrama/assets/images/dy4.jpg
new file mode 100644
index 0000000..c35a4aa
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dy4.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dydd.jpg b/src/books/artAndDrama/assets/images/dydd.jpg
new file mode 100644
index 0000000..7e777e2
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dydd.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/header-green.png b/src/books/artAndDrama/assets/images/header-green.png
new file mode 100644
index 0000000..69e012e
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/header-green.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/page5.png b/src/books/artAndDrama/assets/images/page5.png
new file mode 100644
index 0000000..126ca93
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/page5.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/page6-header-green.png b/src/books/artAndDrama/assets/images/page6-header-green.png
new file mode 100644
index 0000000..16db856
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/page6-header-green.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/rhybx.jpg b/src/books/artAndDrama/assets/images/rhybx.jpg
new file mode 100644
index 0000000..cb3ab22
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/rhybx.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/tzyys.jpg b/src/books/artAndDrama/assets/images/tzyys.jpg
new file mode 100644
index 0000000..50d3194
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/tzyys.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/xsyty.jpg b/src/books/artAndDrama/assets/images/xsyty.jpg
new file mode 100644
index 0000000..62214f8
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/xsyty.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/ym.jpg b/src/books/artAndDrama/assets/images/ym.jpg
new file mode 100644
index 0000000..c348ee1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/ym.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
new file mode 100644
index 0000000..d978cba
--- /dev/null
+++ b/src/books/artAndDrama/assets/main.less
@@ -0,0 +1,563 @@
+.ans-drama {
+ width: 100%;
+ height: 100%;
+ font-family: "瀹嬩綋", SimSun, sans-serif;
+span.un1{
+ -webkit-text-emphasis-style:dot;
+ -moz-text-emphasis-style:dot;
+ -ms-text-emphasis-style:dot;
+ text-emphasis-style:dot;
+-webkit-text-emphasis-position:under;
+ -moz-text-emphasis-position:under;
+ -ms-text-emphasis-position:under;
+ text-emphasis-position:under;
+}
+
+ ul {
+ list-style-type:none;
+ }
+
+ li {
+ list-style-type:none;
+ }
+
+
+.ls1{
+ font-family:"HiFont Hei GB";
+ color:#30AAD1;
+ font-weight:bold;
+}
+.hs{
+ color:#B0441D;
+}
+.hs1{
+ color:#E78D2D;
+ font-weight:bold;
+}
+
+.zs1{
+ font-family:"HiFont Hei GB";
+ color:#857EB4;
+ font-weight:bold;
+}
+
+span.under1{
+ border-bottom:2px solid #F0BD4A;
+ border-width:2px;
+
+}
+
+div.bodystyle {
+ font-size:18px;
+ text-align:justify;
+ margin:5%;
+ line-height:30px;
+}
+
+span.zt-0
+{
+ color:#0087AF;
+}
+
+p.pzt-0
+{
+ color:#0087AF;
+ font-size:18px;
+}
+p.pzt-0-right
+{
+ font-size:18px;
+ color:#0087AF;
+ text-align:right;
+}
+p.pzt-1
+{
+ font-weight:bold;
+ color:#0087AF;
+ font-size:18px;
+}
+
+.note{
+font-size:0.85em;
+}
+
+
+.img{
+ text-align:center;
+ font-size:0.8em;
+ color:#5D78BB;
+ margin-left:0%;
+ margin-right:0%;
+ text-indent:0em;
+}
+
+.img1{
+ text-align:right;
+ font-size:0.85em;
+ margin-left:0%;
+ margin-right:2em;
+ text-indent:0em;
+}
+
+
+p
+{
+ margin-top:1em;
+ text-indent:2em;
+ line-height:30px;
+ font-size:18px;
+ text-align:justify;
+
+}
+.cover {
+ width:100%;
+ padding:0px;
+}
+.center {
+ text-align:center;
+ margin-left:0%;
+ margin-right:0%;
+ text-indent:0em;
+}
+
+.center1
+{
+ font-family:"STKaiti";
+ text-align:center;
+ margin-left:0%;
+ margin-right:0%;
+ font-size:1.2em;
+ text-indent:0em;
+ font-weight:bold;
+}
+
+
+.left {
+ text-indent:0em;
+ margin-left:0%;
+ margin-right:0%;
+}
+
+.left1 {
+ font-family:"STKaiti";
+ text-indent:0em;
+ margin-left:0%;
+ margin-right:0%;
+}
+.right {
+ text-align:right;
+ margin-left:0%;
+ margin-right:0%;
+}
+.right1 {
+ font-family:"STKaiti";
+ text-align:right;
+ margin-left:0%;
+ margin-right:0%;
+}
+.quote {
+ margin-top:0%;
+ margin-bottom:0%;
+ margin-left:1em;
+ margin-right:1em;
+ text-align:justify;
+ font-family:"cnepub", serif;
+}
+h1 {
+
+ font-family:"STKaiti";
+ text-align:center;
+ font-size:1.8em;
+ color:#515594;
+ margin-bottom:0.5cm;
+ margin-top:0.5cm;
+}
+
+h1.left-h1 {
+ text-indent:0em;
+ text-align:left;
+ text-indent:0em;
+}
+
+
+h2 {
+
+ font-family:"STKaiti";
+ text-align:center;
+ font-size:1.5em;
+ margin-top:1.5em;
+ margin-bottom:1.5em;
+ text-indent:0em;
+}
+
+h2.whleft2{
+
+ text-align:left;
+ color:#AF0206;
+ font-size:1.2em;
+ margin-top:0.2em;
+ margin-bottom:0.2em;
+ text-indent:0em;
+}
+
+h3 {
+ font-family:"STKaiti";
+ color:#EF495D;
+ font-weight:bold;
+ font-size:1.2em;
+ margin-top:2em;
+ text-align:center;
+ margin-bottom:2em;
+ text-indent:0em;
+}
+
+h3.lefth3{
+
+ text-align:left;
+ margin-top:0.2em;
+ margin-bottom:0.2em;
+ text-indent:0em;
+}
+
+h4 {
+
+ font-weight:bold;
+ color:#5877BA;
+ font-size:1.1em;
+ margin-top:0.2em;
+ margin-bottom:1em;
+ text-indent:0em;
+}
+h5 {
+
+ font-weight:bold;
+ color:#C96653;
+ font-size:1em;
+ margin-top:0.2em;
+ margin-bottom:1em;
+ text-indent:2em;
+}
+h6 {
+
+ font-family:"cnepub", serif;
+ color:#36C3F4;
+ font-size:1.1em;
+ margin-top:10px;
+ text-indent:2em;
+ margin-bottom:10px;
+}
+.u {
+
+ text-decoration:underline; }
+
+.img-0{
+width:100%;
+}
+.imz{
+ width:96%;
+ text-align:center;
+
+
+}
+
+.img-a{
+width:95%;
+}
+.img-b{
+width:80%;
+}
+.img-c{
+width:70%;
+}
+.img-d{
+width:60%;
+}
+.img-e{
+width:50%;
+}
+.img-f{
+width:40%;
+}
+.img-g{
+width:30%;
+}
+.img-gh1{
+width:30%;
+text-align:right;
+}
+.img-gh2{
+width:45%;
+text-align:right;
+}
+.img-h{
+width:25%;
+}
+.img-i{
+width:10%;
+}
+.img-j{
+width:5%;
+}
+
+.inline{
+height:2em;
+margin-bottom:-0.5em;
+}
+.inline1{
+height:1.5em;
+margin-top:-1em;
+margin-bottom:-0.4em;
+}
+.inline2{
+height:2.5em;
+margin-top:2em;
+margin-bottom:-0.4em;
+}
+.inline3{
+height:4em;
+margin-top:2em;
+margin-bottom:-0.4em;
+}
+.block
+{
+ font-family:"STKaiti";
+ font-size:1.15em;
+}
+
+.block1
+{
+ font-family:"STKaiti";
+ color:#08A496;
+ text-align:right;
+ font-size:1.15em;
+ margin-right:2em;
+ text-indent:0em;
+}
+.block2
+{
+ font-family:"STKaiti";
+ font-size:1.15em;
+ text-align:center;
+ text-indent:0em;
+}
+
+.block3
+{
+ font-weight:bold;
+ font-family:"STKaiti";
+ font-size:1.2em;
+}
+div.bj{
+ border:2px solid #E04239;
+ background:#FDECD2;
+ border-style:solid none none none;
+ padding:0.2em 0.4em 0.2em 0.4em;
+ margin-top:1em;
+ margin-left:0.5em;
+ margin-right:0.5em;
+ margin-bottom:-0.8em;
+ font-size:1.1em;
+ box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
+}
+
+
+.bj2{
+ border:2px solid #E04239;
+ background:#FDECD2;
+ border-style:solid none none none;
+ padding:0.2em 0.4em 0.2em 0.4em;
+ margin-top:1em;
+ margin-left:0.5em;
+ margin-right:0.5em;
+ margin-bottom:-0.8em;
+ font-size:1.1em;
+ box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
+}
+
+.kaiti{
+ font-family:"STKaiti";
+}
+
+
+div.bk{
+ border:4px dashed #3FB135;
+ padding:15px;
+ margin-bottom:2em;
+ margin-top:1em;
+}
+
+div.bj1{
+ padding:0.01em 1em 0.01em 1em;
+ margin-top:-2.95em;
+ margin-left:-1em;
+ margin-right:-1em;
+
+}
+.img-gn{
+ height:2em;
+ margin-bottom:-0.4em;
+}
+
+.img-gn1{
+ height:2em;
+}
+
+div.bj3{
+ background:#C6DFA5;
+ padding:0.2em 0.5em 0.2em 0.5em;
+ margin-top:1em;
+ margin-left:0.5em;
+ margin-right:0.5em;
+ border-radius:1em;
+ margin-bottom:1.5em;
+ font-size:1.1em;
+}
+
+ // 鑷畾涔�
+ .page-box {
+ position: relative;
+ box-sizing: border-box;
+ min-height: 1150px;
+ margin-bottom: 20px;
+ box-shadow: 0 3px 6px 1px #00000029;
+ background-color: #fff;
+ }
+ ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+ .fl {
+ display: flex;
+ }
+ .fw-wr {
+ flex-wrap: wrap;
+ }
+ .fl-cl {
+ flex-direction: column;
+ }
+ .ju-bt {
+ justify-content: space-between;
+ }
+ .ju-end {
+ justify-content: flex-end;
+ }
+ .al-cn {
+ align-items: center;
+ }
+ .wh-nr {
+ white-space: nowrap;
+ }
+ .w100 {
+ width: 100%;
+ }
+ .m0 {
+ margin: 0;
+ }
+ .mr-8 {
+ margin-right: 8px;
+ }
+ .mt-20 {
+ margin-top: 20px;
+ }
+ .mt-40 {
+ margin-top: 40px !important;
+ }
+ .mb-20 {
+ margin-bottom: 20px;
+ }
+ .mb-40 {
+ margin-bottom: 40px;
+ }
+ .ml-40 {
+ margin-left: 40px;
+ }
+ .mr-40 {
+ margin-right: 40px;
+ }
+ .pg-mh {
+ min-height: 1150px;
+ }
+ .dl-ib {
+ display: inline-block;
+ }
+ .w-min {
+ width: min-content;
+ }
+ .w40 {
+ width: 40px;
+ }
+ .pb-box {
+ position: absolute;
+ bottom: 0;
+ }
+ .m16-0 {
+ margin: 16px 0;
+ }
+ .fm-son {
+ font-family: "瀹嬩綋", SimSun, sans-serif;
+ }
+ .auido-text {
+ font-size: 22px;
+ font-family: "FangSong", "PMingLiU", serif;
+ font-weight: bold;
+ }
+ .input-bottom-border {
+ border: 0;
+ border-bottom: 1px solid #000000;
+ width: 40%;
+ &:focus {
+ outline: none;
+ }
+ }
+ /* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
+@media (max-width: 660px) {
+ .ans-drama {
+ /* 鍒嗛〉padding */
+ .page-padding {
+ padding: 104px 20px;
+ }
+ .padding-96 {
+ padding: 0 20px 104px 20px;
+ }
+ /* video澶у皬 */
+ .video-box {
+ max-width: 260px;
+ }
+ }
+ }
+ @media (min-width: 660px) {
+ .ans-drama {
+ .page-padding {
+ padding: 104px 96px;
+ }
+ .padding-96 {
+ padding: 0 96px 104px 96px;
+ }
+ .video-box {
+ max-width: 370px;
+ }
+ }
+ }
+}
+::-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/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
new file mode 100644
index 0000000..46bf7ba
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -0,0 +1,714 @@
+<template>
+ <div class="chapter" num="2">
+ <div class="page-box" page="4" style="min-height: auto">
+ <div v-if="showPageList.indexOf(4) > -1">
+ <h1 id="a004">
+ <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
+ <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
+ <audio :src="auidoPathOne" controls></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 class="block">
+ 鍦ㄦ晠浜嬨�婁竴鍧楀ザ閰�嬩腑锛岃殏铓佸搴殑姣忎竴浣嶆垚鍛橀兘涓轰簡鍏卞悓鐨勭洰鏍囧垎宸ュ崗浣溿�佸姫鍔涘鏂楋紝鍦ㄩ潰瀵硅鎯戝拰鎸戞垬鏃舵洿鏄弗浜庡緥宸便�侀伒瀹堝洟闃熺邯寰嬨�傛湰鍗曞厓锛岃鎴戜滑璇讳竴璇汇�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽涔犺殏铓佷滑鐨勪紭绉�鍝佹牸鍚э紒
+ </p>
+ </div>
+ </div>
+ <p><br /></p>
+ <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ </div>
+ </div>
+ <div class="page-box" page="5" style="min-height: auto">
+ <div v-if="showPageList.indexOf(5) > -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="b001">绗竴璇俱��榻愬績鍗忓姏</h2>
+ <h3 class="lefth3" id="c001">
+ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
+ </h3>
+ <p>
+ 鍦ㄨ瑷�琛ㄨ堪涓紝涓轰簡绐佸嚭鎴栧己璋冩煇浜涙剰鎬濓紝鎴戜滑浼氫娇鐢ㄢ�滈�昏緫閲嶉煶鈥濊繖涓�鎶�宸с�傚悓鏍蜂竴鍙ヨ瘽锛屼笉鍚岀殑閫昏緫閲嶉煶鍙互琛ㄨ揪鍑轰笉涓�鏍风殑鎰忔�濄��
+ </p>
+ <p>
+ <span class="hs1">鈼�</span
+ >澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
+ </p>
+ <h1>
+ <audio :src="auidoPathTwo" controls></audio>
+ </h1>
+ <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
+ <!-- 杩炵嚎棰� -->
+ <matching :rawData="rawData" :item="question"></matching>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div style="position: relative; ">
+ <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; top: 38px; text-align: center; font-size: 25px;">2</div>
+ <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="6" style="min-height: auto">
+ <div v-if="showPageList.indexOf(6) > -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 openImgBox">
+ <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; border-radius: 10px; border: 2px solid green;"
+ ></video>
+ <h2>瑙嗛: 鎴戜滑鏄竴瀹朵汉</h2>
+ </div>
+
+ <p class="center">
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </p>
+ </div>
+ </div>
+ <div class="page-box" page="7" style="min-height: auto">
+ <div v-if="showPageList.indexOf(7) > -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>
+ <h1><audio :src="auidoPathThree" controls></audio></h1>
+
+ <div class="bj3">
+ <p class="center">
+ <span class="hs"
+ >鏄�<a id="w1"><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">1</a>
+ 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
+ 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
+ </p>
+ </div>
+
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div>
+ <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">4</div>
+ <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="8" style="min-height: auto">
+ <div v-if="showPageList.indexOf(8) > -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 openImgBox" 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>
+ <h1><audio :src="auidoPathTwo" controls></audio></h1>
+ <div class="bj3">
+ <p class="center">
+ <span class="hs"
+ >鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</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">1</a>
+ 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
+ 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
+ </p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div>
+ <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">6</div>
+ <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ </div>
+ </div>
+ <div class="page-box" page="9" style="min-height: auto">
+ <div v-if="showPageList.indexOf(9) > -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 openImgBox">
+ <img
+ class="img-e"
+ alt=""
+ src="../../assets/images/1-4.gif"
+ style="height: auto; width: 50%"
+ />
+ </h1>
+ <p>
+ <span class="hs1">鈼�</span
+ >鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
+ </p>
+ <p>姝ｄ箟闃熼暱锛氣��
+ <input
+ v-model="questionData.warnUp.one.value"
+ class="input-bottom-border fz-18"
+ @blur="handleQuestion('one')"
+ @change="setBookQuestion" />鈥�</p>
+ <p>榛戞殫闃熼暱锛氣�� <input
+ v-model="questionData.warnUp.one.value"
+ class="input-bottom-border fz-18"
+ @blur="handleQuestion('two')"
+ @change="setBookQuestion" />鈥�</p>
+ </div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div>
+ <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">8</div>
+ <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ </div>
+ </div>
+ <div class="page-box" page="10" style="min-height: auto">
+ <div v-if="showPageList.indexOf(10) > -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>
+ <h1>
+ <audio :src="auidoPathTwo" controls></audio>
+ </h1>
+
+ <div class="bj3">
+ <p class="center">
+ <span class="hs"
+ >鏄�<a id="w1"><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>
+ 鎴戞槸铓傝殎 <input
+ v-model="questionData.warnUp.one.value"
+ class="input-bottom-border fz-18"
+ style=" width: 10%;"
+ @blur="handleQuestion('three')"
+ @change="setBookQuestion" />锛堝悕瀛楋級锛屼粖澶╂槸
+ <input
+ v-model="questionData.warnUp.one.value"
+ class="input-bottom-border fz-18"
+ style=" width: 10%;"
+ @blur="handleQuestion('four')"
+ @change="setBookQuestion" />锛堝ぉ姘旓級锛屾垜鐨勫ザ閰壒鍒� <input
+ v-model="questionData.warnUp.one.value"
+ class="input-bottom-border fz-18"
+ style=" width: 10%;"
+ @blur="handleQuestion('five')"
+ @change="setBookQuestion" />锛堣交/閲嶏級锛屾垜鎰熻濂� <input
+ v-model="questionData.warnUp.one.value"
+ class="input-bottom-border fz-18"
+ style=" width: 10%;"
+ @blur="handleQuestion('six')"
+ @change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
+ </p>
+ <hr />
+ <p class="note">
+ <a id="m1">1</a>
+ 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
+ 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
+ </p>
+ </div>
+ </div>
+ <p class="center">
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </p>
+ </div>
+ <div class="page-box" page="11" style="min-height: auto">
+ <div v-if="showPageList.indexOf(11) > -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 openImgBox">
+ <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="12" style="min-height: auto">
+ <div v-if="showPageList.indexOf(12) > -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="13" style="min-height: auto">
+ <div v-if="showPageList.indexOf(13) > -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; border-radius: 10px; border: 2px solid green;"
+ ></video>
+ <h2>瑙嗛: 鎴戜滑鏄竴瀹朵汉</h2>
+ </p>
+ </div>
+ </div>
+ <p class="center">
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </p>
+ </div>
+ </div>
+</template>
+
+ <script>
+import matching from "@/components/matching/matching.vue";
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+ name: "chapterOne",
+ components: { matching },
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ mounted() {
+ this.getVidoePath();
+ },
+ data() {
+ return {
+ videoPathOne: "",
+ auidoPathOne: "",
+ auidoPathTwo: "",
+ 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",
+ },
+ ],
+ },
+ questionType: "matching",
+ stem: {
+ stemTxt: "鎸夐『搴忚繛绾�",
+ },
+ stemStyle: undefined,
+ titleDescription: "1",
+ userChoise: [],
+ value: [],
+ },
+ questionData: {
+ warnUp: {
+ one: {
+ value: "",
+ isRight: null,
+ answer: "Chinese knot",
+ },
+ two: {
+ value: "",
+ isRight: null,
+ answer: "Chinese medicine",
+ },
+ three: {
+ value: "",
+ isRight: null,
+ answer: "Chinese calligraphy",
+ },
+ four: {
+ value: "",
+ isRight: null,
+ answer: "Taichi",
+ },
+ five: {
+ value: "",
+ isRight: null,
+ answer: "sweet dumpling",
+ },
+ six: {
+ value: "",
+ isRight: null,
+ answer: "Chinese chess",
+ },
+ },
+ reading: {
+ one: "",
+ two: "",
+ },
+ table: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven: "",
+ enight: "",
+ nine: "",
+ },
+ },
+ };
+ },
+
+
+
+ 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"
+ );
+ this.auidoPathTwo = await getResourcePath(
+ "e93c0fdde08be5a4386c8c863892a287"
+ );
+ this.auidoPathThree = await getResourcePath(
+ "e93c0fdde08be5a4386c8c863892a287"
+ );
+ },
+ },
+};
+</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;
+}
+</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
new file mode 100644
index 0000000..cf089e2
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -0,0 +1,633 @@
+<template>
+ <div class="chapter" num="3">
+ <div class="page-box" page="14" style="min-height: auto">
+ <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>
+ </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 class="block">
+ 鎴忓墽琛ㄦ紨涓殑鍔ㄤ綔銆佷綋鎬併�佺溂绁炪�佸０闊冲湪濉戦�犺鑹叉椂璧峰埌浜嗛噸瑕佺殑浣滅敤銆傛湰鍗曞厓鎴戜滑灏嗙户缁涔犮�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽苟浠ュ伓鍓х殑褰㈠紡杩涜琛ㄦ紨銆�
+ </p>
+ </div>
+ </div>
+ <p><br /></p>
+ <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ </div>
+ </div>
+ <div class="page-box" page="15" style="min-height: auto">
+ <div v-if="showPageList.indexOf(15) > -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="b006">绗竴璇俱��浜斿畼鐨勫姏閲�</h2>
+ <h3 class="lefth3" id="c011">
+ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
+ </h3>
+ <p><span class="hs1">鈼�</span>鎴戞槸灏忕敾瀹�</p>
+ <p>淇濇寔澶撮儴涓嶅姩锛岃瘯鐫�鐢ㄧ溂绁炵敾鍑轰笅闈㈢殑鍥炬鍚э紒</p>
+ <p class="center">
+ <img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
+ </p>
+ <p><span class="hs1">鈼�</span>鍡呰澶у啋闄�</p>
+ <p>
+ 浣犳渶鐖卞悆鐨勯鐗╂槸_________銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+ </p>
+ <p>
+ 浣犳渶涓嶇埍鍚冪殑椋熺墿鏄痏________銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+ </p>
+ <h3 class="lefth3" id="c012">
+ <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
+ </h3>
+ <p>
+ <span class="hs1">鈼�</span
+ >浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
+ </p>
+ <p class="center">
+ <img class="img-e" alt="" src="../../assets/images/0016-2.jpg" />
+ </p>
+ </div>
+ <p><br /></p>
+ <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ </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>
+
+ <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" />
+ </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>
+ <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>
+</template>
+
+ <script>
+import matching from "@/components/matching/matching.vue";
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+ name: "chapterTwo",
+ components: { matching },
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ mounted() {
+ this.getVidoePath();
+ },
+ data() {
+ return {
+ videoPathOne: "",
+ auidoPathOne: "",
+ auidoPathTwo: "",
+ 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",
+ },
+ ],
+ },
+ questionType: "matching",
+ stem: {
+ stemTxt: "鎸夐『搴忚繛绾�",
+ },
+ stemStyle: undefined,
+ titleDescription: "1",
+ userChoise: [],
+ value: [],
+ },
+ };
+ },
+
+
+ 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"
+ );
+ this.auidoPathTwo = await getResourcePath(
+ "e93c0fdde08be5a4386c8c863892a287"
+ );
+ this.auidoPathThree = await getResourcePath(
+ "e93c0fdde08be5a4386c8c863892a287"
+ );
+ },
+ },
+};
+</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;
+}
+</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..e69de29
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter003.vue
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter004.vue
diff --git a/src/books/artAndDrama/view/components/header.vue b/src/books/artAndDrama/view/components/header.vue
new file mode 100644
index 0000000..acdc8f3
--- /dev/null
+++ b/src/books/artAndDrama/view/components/header.vue
@@ -0,0 +1,72 @@
+<template>
+ <div class="chapter" num="1">
+ <div class="page-box mt-20" page="1" style="min-height: auto">
+ <div v-if="showPageList.indexOf(1) > -1">
+ <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
+ </div>
+ </div>
+ <div class="page-box mt-20" page="2" style="min-height: auto">
+ <div v-if="showPageList.indexOf(2) > -1">
+ <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
+ </div>
+ </div>
+ <div class="page-box mt-20" page="3">
+ <div v-if="showPageList.indexOf(3) > -1" >
+ <div class="bodystyle">
+ <ul class="fl fl-cl ju-bt pg-mh" style="display: flex; flex-direction: column; justify-content: flex-end; " >
+ <li>
+ <div style="margin-bottom: 100px;" >
+ <p id="a003" class="front" style="margin: 0%;">缂栧浼�</p>
+ <hr />
+ <p>椤俱��銆�闂細<span class="kaiti">褰悏璞°��涓ョ嚂鐢�</span></p>
+ <p>涓汇��銆�缂栵細<span class="kaiti">楹绘枃鐞�</span></p>
+ <p>鍓� 涓� 缂栵細<span class="kaiti">闄堛��鍒�</span></p>
+ <ul class="fl">
+ <li>
+ <p class="wh-nr" style="margin: 0%;">缂栧啓濮斿憳锛�</p>
+ </li>
+ <li class="fl fl-cl">
+ <span class="kaiti">鐜嬭胺宸濄��璋㈤湝鍗椼��鏉庢櫒鎴愩��鍛ㄥ姏鍚涖��</span>
+ <span class="kaiti">闊╃嚂妤犺彶</span>
+ </li>
+ </ul>
+ <p>缇庢湳缁樼敾锛�<span class="kaiti">浣曘��鍐�</span></p>
+ <ul class="fl">
+ <li>
+ <p class="wh-nr" style="margin: 0%;">琛� 婕� 鑰咃細</p>
+ </li>
+ <li class="fl fl-cl">
+ <span class="kaiti">鏈功閮ㄥ垎鏂囧瓧浣滃搧钁椾綔鏉冪敱涓浗鏂囧瓧钁椾綔鏉冨崗浼氭巿鏉冿紝</span>
+ <span class="kaiti">鐢佃瘽锛�010-65978917锛屼紶鐪燂細010-65978926锛�</span>
+ <span class="kaiti">E-mail锛歸enzhuxie@126.com銆�</span>
+ </li>
+ </ul>
+ <p></p>
+ <p>銆�銆�銆�銆�銆�</p>
+ <p>銆�銆�銆�銆�銆�</p>
+ </div>
+ <!-- <p class="center pb-box">
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ </p> -->
+ </li>
+ </ul>
+
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+ <script>
+export default {
+ name: "pageHeader",
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ },
+};
+</script>
+
+ <style scoped></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
new file mode 100644
index 0000000..d53531e
--- /dev/null
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -0,0 +1,851 @@
+<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>
+
+ </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 _ 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: 4, // 鎬荤珷鑺傛暟
+ showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+ loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+ throttleThreshold: 100, // 鑺傛祦闃堝��
+ previousScrollTop: 0,
+ throttledScrollHandler: null,
+ observer: null,
+ loadPageObserver: null,
+ loadPageList: [],
+ questionDataMap: {},
+ renderSignMap: {},
+ highlightData: null,
+ };
+ },
+ computed: {
+ fontSize() {
+ return this.$store.state.qiankun.fontSize;
+ },
+ 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);
+ },
+ },
+ 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;
+ },
+ },
+ },
+ 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) {
+ // 鍚戜笅
+ 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) {
+ // 鍚戜笂
+ 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 = (
+ 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 = (
+ 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;
+ }
+ }
+ // 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;
+ }
+ }
+ },
+ 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");
+ // 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 // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
+ // }
+ });
+ }
+ 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,
+ chapterSix,
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ 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, () => {});
+ },
+ },
+ components: {
+ pageHeader,
+ chapterOne,
+ chapterTwo,
+ 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;
+ }
+ }
+ </style>
+
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/index.vue b/src/books/artAndDrama/view/index.vue
new file mode 100644
index 0000000..9748d24
--- /dev/null
+++ b/src/books/artAndDrama/view/index.vue
@@ -0,0 +1,76 @@
+<template>
+ <div class="ans-drama" @mouseup="handleMouseUp">
+ <pageContent></pageContent>
+ </div>
+ </template>
+
+ <script>
+ import pageContent from "./components/index.vue";
+ export default {
+ name:"ansAndDrama",
+ components: {
+ pageContent,
+ },
+ data() {
+ return {};
+ },
+
+ mounted() {},
+ methods: {
+ getParentWithClass(element, className) {
+ while (element.parentElement) {
+ element = element.parentElement;
+ if (element.classList.contains(className)) {
+ return element;
+ }
+ }
+ },
+ handleMouseUp(e) {
+ const selection = (
+ this.container ? this.container : window
+ ).getSelection();
+ const txt = selection.toString();
+ if (selection.type != "none" && txt) {
+ let node = selection.anchorNode.parentNode;
+ let pageHtml = this.getParentWithClass(
+ selection.anchorNode,
+ "page-box"
+ );
+ let chapterDom = this.getParentWithClass(
+ selection.anchorNode,
+ "chapter"
+ );
+ let chapterNum;
+ if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+ if (pageHtml) {
+ const page = pageHtml.getAttribute("page");
+ // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶
+ if (this.$store.state.qiankun.windowSelection) {
+ this.$store.state.qiankun.windowSelection({
+ chapterNum,
+ txt,
+ page,
+ x: e.x,
+ y: e.y,
+ });
+ }
+ }
+ } else {
+ if (this.$store.state.qiankun.windowSelection) {
+ this.$store.state.qiankun.windowSelection({
+ chapterNum: "",
+ txt: "",
+ page: "",
+ x: e.x,
+ y: e.y,
+ });
+ }
+ }
+ },
+ },
+ };
+ </script>
+
+ <style lang="less">
+ @import "../assets/main.less";
+ </style>
\ No newline at end of file
--
Gitblit v1.9.1