From a954bafb1bb4a70b2baf768230f2c50fd5c7163c Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期四, 13 六月 2024 14:20:53 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/math/assets/images/tjfx.jpg | 0
src/books/artAndDrama/assets/images/3-3.gif | 0
src/books/artAndDrama/assets/images/dy3.jpg | 0
src/books/artAndDrama/assets/images/0017-1.jpg | 0
src/books/math/assets/images/0102-2.jpg | 0
src/books/artAndDrama/assets/images/3-1单元大图.gif | 0
src/books/artAndDrama/assets/images/0007-1.jpg | 0
src/books/childHealth/view/content/index.vue | 2
src/books/artAndDrama/assets/images/0016-2.jpg | 0
src/books/artAndDrama/assets/images/0036-2.jpg | 0
src/books/artAndDrama/assets/images/dy1.jpg | 0
src/books/artAndDrama/assets/images/2-4.gif | 0
src/books/sportsAndHealth/view/components/testDynaicTable.vue | 21
src/books/math/assets/images/wttc.jpg | 0
src/books/math/view/components/index.vue | 841 ++++++++
src/books/artAndDrama/view/components/index.vue | 913 ++++++++
src/books/math/assets/images/0100-1.jpg | 0
src/books/math/view/index.vue | 76
src/books/artAndDrama/assets/images/4-2.gif | 0
src/books/artAndDrama/assets/images/0020-2.jpg | 0
src/books/sportsAndHealth/view/components/index.vue | 34
src/books/math/assets/images/0103-1.jpg | 0
src/books/artAndDrama/assets/images/0021-1.jpg | 0
src/books/math/assets/images/stlx.jpg | 0
src/books/artAndDrama/assets/images/0024-1.jpg | 0
src/books/artAndDrama/assets/images/0035-1.jpg | 0
src/books/math/assets/main.less | 828 +++++++
src/books/artAndDrama/view/index.vue | 76
src/books/math/assets/images/tbts.jpg | 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/math/assets/images/0100-2.jpg | 0
src/books/math/assets/images/dy3.jpg | 0
src/books/artAndDrama/assets/images/0028-1.jpg | 0
src/books/artAndDrama/assets/images/1-3.gif | 0
src/components/examinations/index.vue | 25
src/books/English/view/components/index.vue | 1
src/books/math/assets/images/icon/heart-check.png | 0
src/books/sportsAndHealth/css/default.less | 36
src/books/artAndDrama/assets/images/0034-1.jpg | 0
src/books/artAndDrama/assets/images/2-3.gif | 0
src/components/pdfview/index.vue | 220 +
src/books/math/assets/images/icon/heart.png | 0
src/books/artAndDrama/assets/images/4-0单元大图.gif | 0
src/books/math/assets/images/cxgk.jpg | 0
src/books/math/assets/images/question/0103-1-2.png | 0
src/books/math/assets/images/question/0103-1-4.png | 0
src/books/artAndDrama/assets/images/1-5.gif | 0
src/books/math/assets/images/0101-2.jpg | 0
src/books/math/assets/images/dy1.jpg | 0
src/books/artAndDrama/view/components/chapter001.vue | 723 ++++++
src/books/math/view/components/header.vue | 140 +
src/books/artAndDrama/assets/images/page5.png | 0
src/books/artAndDrama/assets/images/dydd.jpg | 0
src/books/artAndDrama/assets/images/0033-1.jpg | 0
src/books/lifeCare/view/components/chapter001.vue | 2
src/books/artAndDrama/assets/images/xsyty.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/page6-header-green.png | 0
src/books/artAndDance/view/components/index.vue | 1
src/books/artAndDrama/assets/images/3-2.gif | 0
src/books/math/assets/images/0102-1.jpg | 0
src/books/artAndDrama/assets/images/0010-1.jpg | 0
src/books/math/assets/images/xxmb.jpg | 0
src/books/artAndDrama/assets/images/0020-1.jpg | 0
src/books/artAndDrama/assets/images/tzyys.jpg | 0
src/books/artAndDrama/assets/images/FD.jpg | 0
src/books/math/assets/images/Covers.png | 0
src/books/artAndDrama/assets/images/0016-1.jpg | 0
src/books/math/assets/images/0103-2.jpg | 0
src/books/artAndDrama/assets/images/0036-1.jpg | 0
src/books/sportsAndHealth/view/components/testPp.vue | 106
src/books/artAndDrama/assets/images/ym.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 | 10
src/books/childHealth/view/content/components/chapter007.vue | 35
src/books/artAndDrama/assets/images/2-0单元大图.gif | 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/English/view/components/chapter001.vue | 1
src/books/lifeCare/css/default.less | 23
src/books/math/assets/images/0100-3.jpg | 0
src/books/artAndDrama/assets/images/1-4.gif | 0
src/books/artAndDrama/assets/images/0032-1.jpg | 0
src/books/artAndDrama/view/components/header.vue | 71
src/books/artAndDrama/assets/main.less | 573 +++++
src/books/artAndDrama/assets/images/0038-1.jpg | 0
src/books/artAndDrama/assets/images/1-1单元大图.gif | 0
src/books/artAndDrama/assets/images/4-3.gif | 0
src/books/math/assets/images/question/0103-1-1.png | 0
src/books/math/assets/images/question/0103-1-3.png | 0
src/books/math/view/components/chapter001.vue | 818 +++++++
src/books/artAndDrama/assets/images/0026-1.jpg | 0
src/books/artAndDrama/assets/images/rhybx.jpg | 0
src/books/math/assets/images/Cover.jpg | 0
src/books/artAndDrama/assets/images/0009-1.jpg | 0
src/books/artAndDrama/assets/images/2-2.gif | 0
src/books/artAndDrama/view/components/chapter002.vue | 637 ++++++
src/books/math/assets/images/hzjl.jpg | 0
src/books/artAndDrama/assets/images/0014-1.jpg | 0
src/books/math/assets/images/0101-1.jpg | 0
src/App.vue | 19
110 files changed, 6,048 insertions(+), 184 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 6949a2d..17da598 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,11 +3,13 @@
<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>
+ <mathBook v-if="activeBook.name == 'mathBook'"></mathBook>
</div>
</template>
@@ -18,7 +20,8 @@
import english from "./books/English/view/index.vue";
import sportsAndHealth from "./books/sportsAndHealth/view/index";
import artAndDance from "./books/artAndDance/view/index.vue";
-
+import mathBook from "./books/mathBook/view/index.vue";
+import artAndDrama from "./books/artAndDrama/view/index.vue";
export default {
name: "App",
components: {
@@ -27,7 +30,9 @@
embedded,
english,
sportsAndHealth,
- artAndDance
+ artAndDance,
+ mathBook,
+ artAndDrama
},
data() {
return {
@@ -56,6 +61,14 @@
}
});
} else {
+ // childHealth
+ // lifeCare
+ // sportsAndHealth
+ // embedded
+ // english
+ // artAndDance
+ // artAndDrama
+ // mathBook
this.activeBook = await this.config.getBookConfig(
process.env.VUE_APP_RESOURCE_CTX +
(process.env.VUE_APP_ENV == "product"
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 9aaab13..34edb72 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -2672,6 +2672,7 @@
};
},
setBookQuestion() {
+ console.log('淇濆瓨');
localStorage.setItem(
"english-book-question-one",
JSON.stringify(this.questionData)
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index a911a6c..8722e79 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -834,6 +834,7 @@
}
// chooseWords
},
+
// 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
getAduio() {
let allVideo = (
diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue
index 288065b..57aea29 100644
--- a/src/books/artAndDance/view/components/header.vue
+++ b/src/books/artAndDance/view/components/header.vue
@@ -1,8 +1,9 @@
<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"></div>
- <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
+ <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 v-if="showPageList.indexOf(2) > -1">
@@ -69,4 +70,7 @@
};
</script>
-<style scoped></style>
+<style scoped>
+
+
+</style>
diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue
index 0c3cdbe..5574cf3 100644
--- a/src/books/artAndDance/view/components/index.vue
+++ b/src/books/artAndDance/view/components/index.vue
@@ -60,6 +60,7 @@
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
+ name:"pageContent",
data() {
return {
catalogLength: 7, // 鎬荤珷鑺傛暟
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..8e97bab
--- /dev/null
+++ b/src/books/artAndDrama/assets/main.less
@@ -0,0 +1,573 @@
+.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: 430px) {
+ .ans-drama {
+ .page-box {
+ min-height: 750px;
+ }
+ .pg-mh {
+ min-height: 815px !important;
+ }
+ }
+ }
+@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..51a51c5
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -0,0 +1,723 @@
+<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" class="audio" 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" class="audio" controls></audio>
+ </h1>
+ <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
+ <!-- 杩炵嚎棰� -->
+ <matching :rawData="rawData" :item="question"></matching>
+ </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div style="position: relative;">
+ <h1 style="position: relative; z-index: 1;">
+ <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+ <div style="position: absolute; z-index: 99; background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; bottom: 38px; text-align: center; line-height: 30px; font-size: 20px;">2</div>
+ </h1>
+ </div>
+ <!-- <div style="position: relative; ">
+ <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; top: 38px; text-align: center; font-size: 25px;">2</div>
+ <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ </div> -->
+ </div>
+ </div>
+ <div 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="../../assets/images/rhybx.jpg" />
+ </h3>
+ <p>
+ <span class="hs1">鈼�</span
+ >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ </p>
+ <h1><audio :src="auidoPathThree" class="audio" 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="../../assets/images/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" class="audio" 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>
+ <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" class="audio" 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: "",
+ 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",
+ },
+ ],
+ },
+ 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"
+ // );
+ },
+ setBookQuestion() {
+ console.log("淇濆瓨");
+ localStorage.setItem(
+ "english-book-question-one",
+ JSON.stringify(this.questionData)
+ );
+ },
+ },
+};
+</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..1fb35c7
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -0,0 +1,637 @@
+<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: "",
+ 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",
+ },
+ ],
+ },
+ 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/header.vue b/src/books/artAndDrama/view/components/header.vue
new file mode 100644
index 0000000..de54d78
--- /dev/null
+++ b/src/books/artAndDrama/view/components/header.vue
@@ -0,0 +1,71 @@
+<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 " page="3">
+ <div v-if="showPageList.indexOf(3) > -1" >
+ <ul class="fl fl-cl ju-bt pg-mh" style="display: flex; flex-direction: column; justify-content: flex-end; " >
+ <li>
+ <div class="bodystyle" 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>
+
+</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..c37fbcf
--- /dev/null
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -0,0 +1,913 @@
+<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>
+ </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: "",
+ currentTime: null,
+ videoList: [],
+ };
+ },
+ 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) {
+ 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 = (
+ 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,
+
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ 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
+ ).querySelectorAll(".audio");
+ allVideo = Array.from(allVideo);
+ this.videoList = allVideo;
+ if (allVideo.length) {
+ // 鏌ユ壘鎾斁鐘舵�佺殑鏈�鍚庝竴鏉￠煶棰�
+ const playAudio = allVideo
+ .reverse()
+ .find((item) => item.paused == false);
+ if (playAudio) {
+ const bottomGap = playAudio.getBoundingClientRect().bottom;
+ if (bottomGap < 0) {
+ playAudio.pause();
+ this.audioPath = playAudio.src;
+ this.currentTime = playAudio.currentTime;
+ }
+ }
+ }
+ },
+ // 椤甸潰鍚戜笂婊氬姩锛岄煶棰戝皬绐楀洖鏀�
+ handleAudio() {
+ if (!this.audioPath) return false;
+ let allVideo = (
+ this.container ? this.container : document
+ ).querySelectorAll(".audio");
+ allVideo = Array.from(allVideo);
+ if (allVideo.length) {
+ //鏌ユ壘涓庡皬绐楁挱鏀鹃煶棰戝悓婧愮殑椤甸潰audio DOM
+ const playAudio = allVideo.find((item) => item.src == this.audioPath);
+ if (playAudio) {
+ const bottomGap = playAudio.getBoundingClientRect().bottom;
+ if (bottomGap >= 0) {
+ if (this.$refs.audioPlayer) {
+ const playerState = this.$refs.audioPlayer.getVideoPlayer();
+ this.audioPath = "";
+ playAudio.currentTime = playerState.currentTime;
+ if (!playerState.paused) playAudio.play();
+ }
+ }
+ }
+ }
+ },
+ // 鍏抽棴mini video
+ closeMiniAudio() {
+ this.audioPath = "";
+ },
+ },
+ components: {
+ pageHeader,
+ chapterOne,
+ chapterTwo,
+ 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;
+ }
+ }
+ </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
diff --git a/src/books/childHealth/view/content/components/chapter007.vue b/src/books/childHealth/view/content/components/chapter007.vue
index 7d692ca..f60d4ec 100644
--- a/src/books/childHealth/view/content/components/chapter007.vue
+++ b/src/books/childHealth/view/content/components/chapter007.vue
@@ -385,41 +385,6 @@
</p>
<p class="block">甯歌浜庤儍鑲犻亾鐤剧梾銆�</p>
<p class="block">2.澶т究鎬х姸寮傚父</p>
- <p class="block">锛�2锛夌淮鐢熺礌A鎴栫淮鐢熺礌D涓瘨锛屼篃浼氬紩璧峰帉椋熴��</p>
- <p class="block">锛�3锛夐暱鏈熸憚椋熸棤鐩愰ギ椋燂紝涔熷彲浣块娆蹭綆涓嬨��</p>
- <p class="block">2.椋熸浜㈣繘</p>
- <p class="block">
- 锛�1锛夊辜鍎胯嫢鍚冨緱澶氥�佸枬寰楀銆佸翱寰楀锛屽簲妫�鏌ユ槸鍚︽偅鏈夌敳鐘惰吅鍔熻兘浜㈣繘鎴栫硸灏跨梾銆�
- </p>
- <p class="block">锛�2锛夊績鐞嗗紓甯镐篃鍙椽椋熴��</p>
- <p class="block">锛�3锛夊鏃忛仐浼犳�ц偉鑳栨偅鍎夸篃鏈夎椽椋熶範鎯��</p>
- <p class="block">3.寮傚棞鐧�</p>
- <p class="block">
- 寮傚棞鐧栨槸鎸囧辜鍎垮椋熺墿浠ュ鐨勯潪椋熺墿鐗╁搧琛ㄧ幇鍑轰笉鍙嚜鍒剁殑椋熸锛屽鍠滈娉ュ湡銆佺叅鏍搞�佺焊寮犮�佸鐨瓑銆傚父瑙佷簬浣撳唴閿屻�侀搧涓ラ噸缂轰箯鐨勫辜鍎匡紝鍦ㄤ腑鍥藉崡鏂逛篃鍙浜庨挬铏梾銆�
- </p>
- <p class="block"><b>涓夈�佺潯鐪犲紓甯�</b></p>
- <p class="block">
- 姝ｅ父骞煎効涓婂簥鍚庡彲寰堝揩鍏ョ潯锛岀潯鐪犲钩绋炽�佹棤榧惧０锛屽彲鏈夊井姹椼��
- </p>
- <p class="block">鐫＄湢寮傚父涓昏鍖呮嫭浠ヤ笅3绉嶃��</p>
- <p class="block">1.鍏ョ潯鍥伴毦</p>
- <p class="block">锛�1锛夎繘鍏ユ柊鐨勭幆澧冿紝涓嶈兘閫傚簲銆�</p>
- <p class="block">锛�2锛夌簿绁炵揣寮犮�佸帇鍔涜繃澶с��</p>
- <p class="block">锛�3锛夌柧鐥呯柤鐥涙墍鑷达紝濡傚墽鐑堢墮鐤煎彲鑷村叆鐫″洶闅俱��</p>
- <p class="block">2.鐫＄湢涓嶅畨</p>
- <p class="block">锛�1锛変綕鍋荤梾绛夋墍鑷淬��</p>
- <p class="block">锛�2锛変綋鍐呮湁铔茶櫕娲诲姩銆�</p>
- <p class="block">锛�3锛夊績鐞嗗洜绱犮��</p>
- <p class="block">3.鍡滅潯</p>
- <p class="block">甯歌浜庤剳鑶滅値銆佽剳鐐庣瓑鐤剧梾鐨勬棭鏈熻〃鐜般��</p>
- <p class="block"><b>鍥涖�佸ぇ渚垮紓甯�</b></p>
- <p class="block">鍖呮嫭澶т究娆℃暟寮傚父鍜屽ぇ渚挎�х姸寮傚父銆�</p>
- <p class="block">1.澶т究娆℃暟寮傚父</p>
- <p class="block">
- 鎺掍究娆℃暟杈冨钩鏃舵湁鏄庢樉鍑忓皯鎴栧澶氾紝鎺掍究鏃舵湁涓嶈垝鏈嶆劅銆�
- </p>
- <p class="block">甯歌浜庤儍鑲犻亾鐤剧梾銆�</p>
- <p class="block">2.澶т究鎬х姸寮傚父</p>
<p class="block">
锛�1锛夎渚匡細绮究甯﹁锛岃壊椴滅孩銆佹殫绾㈡垨鍛堟煆娌圭姸锛岄噺澶氬皯涓嶇瓑锛屽彲娣锋湁鑴撴恫銆侀粡娑诧紝缁熺О渚胯鎴栬渚裤��
</p>
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 1b0f7fa..b2392ea 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -171,7 +171,7 @@
},
mounted() {
// 榛樿鍔犺浇绔犺妭
- this.showCatalogList = [1];
+ this.showCatalogList = [8];
// 婊氬姩鐩戝惉鑺傛祦
this.throttledScrollHandler = _.throttle(
this.scrollFun,
diff --git a/src/books/lifeCare/css/default.less b/src/books/lifeCare/css/default.less
index a88af5e..0e59f3f 100644
--- a/src/books/lifeCare/css/default.less
+++ b/src/books/lifeCare/css/default.less
@@ -256,6 +256,29 @@
.chapter {
font-family: "瀹嬩綋";
+ .bk1-h3 {
+ border: 2px solid #a5c24f;
+ color: #a5c24f;
+ font-weight: normal;
+ height: 35px;
+ border-top-right-radius: 25px;
+ border-bottom-right-radius: 25px;
+ display: inline-flex;
+ justify-content: space-between;
+ align-items: center;
+
+ span {
+ color: #fff;
+ display: inline-block;
+ width: 50px;
+ height: 100%;
+ line-height: 35px;
+ text-align: center;
+ box-sizing: border-box;
+ background-color: #a5c24f;
+ }
+ }
+
.topImg {
padding-top: 0 !important;
margin-bottom: 2em;
diff --git a/src/books/lifeCare/view/components/chapter001.vue b/src/books/lifeCare/view/components/chapter001.vue
index 22db22e..818d404 100644
--- a/src/books/lifeCare/view/components/chapter001.vue
+++ b/src/books/lifeCare/view/components/chapter001.vue
@@ -1386,7 +1386,7 @@
</div>
<div class="bodystyle">
<p>璧拌鐨勬墭鑲插洯涓�鏃ョ敓娲讳繚鑲茶姹傚強鍏蜂綋鍐呭瑙佽〃1-1-3銆�</p>
- <p class="img">琛�1-1-3銆�______鎵樿偛鍥竴鏃ョ敓娲讳繚鑲茶姹傚強鍏蜂綋鍐呭</p>
+ <p class="img">琛�1-1-3<input type="text" maxlength="6" v-model="chapter001.text113Item" class="tk-line"/>鎵樿偛鍥竴鏃ョ敓娲讳繚鑲茶姹傚強鍏蜂綋鍐呭</p>
<div style="margin-bottom: 40px">
<table class="table112 table113">
<thead>
diff --git a/src/books/math/assets/images/0100-1.jpg b/src/books/math/assets/images/0100-1.jpg
new file mode 100644
index 0000000..124863b
--- /dev/null
+++ b/src/books/math/assets/images/0100-1.jpg
Binary files differ
diff --git a/src/books/math/assets/images/0100-2.jpg b/src/books/math/assets/images/0100-2.jpg
new file mode 100644
index 0000000..355c83f
--- /dev/null
+++ b/src/books/math/assets/images/0100-2.jpg
Binary files differ
diff --git a/src/books/math/assets/images/0100-3.jpg b/src/books/math/assets/images/0100-3.jpg
new file mode 100644
index 0000000..5bce2ed
--- /dev/null
+++ b/src/books/math/assets/images/0100-3.jpg
Binary files differ
diff --git a/src/books/math/assets/images/0101-1.jpg b/src/books/math/assets/images/0101-1.jpg
new file mode 100644
index 0000000..f0dee55
--- /dev/null
+++ b/src/books/math/assets/images/0101-1.jpg
Binary files differ
diff --git a/src/books/math/assets/images/0101-2.jpg b/src/books/math/assets/images/0101-2.jpg
new file mode 100644
index 0000000..e280296
--- /dev/null
+++ b/src/books/math/assets/images/0101-2.jpg
Binary files differ
diff --git a/src/books/math/assets/images/0102-1.jpg b/src/books/math/assets/images/0102-1.jpg
new file mode 100644
index 0000000..2971271
--- /dev/null
+++ b/src/books/math/assets/images/0102-1.jpg
Binary files differ
diff --git a/src/books/math/assets/images/0102-2.jpg b/src/books/math/assets/images/0102-2.jpg
new file mode 100644
index 0000000..609ec06
--- /dev/null
+++ b/src/books/math/assets/images/0102-2.jpg
Binary files differ
diff --git a/src/books/math/assets/images/0103-1.jpg b/src/books/math/assets/images/0103-1.jpg
new file mode 100644
index 0000000..4e363d1
--- /dev/null
+++ b/src/books/math/assets/images/0103-1.jpg
Binary files differ
diff --git a/src/books/math/assets/images/0103-2.jpg b/src/books/math/assets/images/0103-2.jpg
new file mode 100644
index 0000000..b16f1ed
--- /dev/null
+++ b/src/books/math/assets/images/0103-2.jpg
Binary files differ
diff --git a/src/books/math/assets/images/Cover.jpg b/src/books/math/assets/images/Cover.jpg
new file mode 100644
index 0000000..c8a593c
--- /dev/null
+++ b/src/books/math/assets/images/Cover.jpg
Binary files differ
diff --git a/src/books/math/assets/images/Covers.png b/src/books/math/assets/images/Covers.png
new file mode 100644
index 0000000..6806a3b
--- /dev/null
+++ b/src/books/math/assets/images/Covers.png
Binary files differ
diff --git a/src/books/math/assets/images/cxgk.jpg b/src/books/math/assets/images/cxgk.jpg
new file mode 100644
index 0000000..98351d7
--- /dev/null
+++ b/src/books/math/assets/images/cxgk.jpg
Binary files differ
diff --git a/src/books/math/assets/images/dy1.jpg b/src/books/math/assets/images/dy1.jpg
new file mode 100644
index 0000000..735b0f6
--- /dev/null
+++ b/src/books/math/assets/images/dy1.jpg
Binary files differ
diff --git a/src/books/math/assets/images/dy3.jpg b/src/books/math/assets/images/dy3.jpg
new file mode 100644
index 0000000..353647e
--- /dev/null
+++ b/src/books/math/assets/images/dy3.jpg
Binary files differ
diff --git a/src/books/math/assets/images/hzjl.jpg b/src/books/math/assets/images/hzjl.jpg
new file mode 100644
index 0000000..b7e975f
--- /dev/null
+++ b/src/books/math/assets/images/hzjl.jpg
Binary files differ
diff --git a/src/books/math/assets/images/icon/heart-check.png b/src/books/math/assets/images/icon/heart-check.png
new file mode 100644
index 0000000..74d469c
--- /dev/null
+++ b/src/books/math/assets/images/icon/heart-check.png
Binary files differ
diff --git a/src/books/math/assets/images/icon/heart.png b/src/books/math/assets/images/icon/heart.png
new file mode 100644
index 0000000..7817ec4
--- /dev/null
+++ b/src/books/math/assets/images/icon/heart.png
Binary files differ
diff --git a/src/books/math/assets/images/question/0103-1-1.png b/src/books/math/assets/images/question/0103-1-1.png
new file mode 100644
index 0000000..e47e8f0
--- /dev/null
+++ b/src/books/math/assets/images/question/0103-1-1.png
Binary files differ
diff --git a/src/books/math/assets/images/question/0103-1-2.png b/src/books/math/assets/images/question/0103-1-2.png
new file mode 100644
index 0000000..450c079
--- /dev/null
+++ b/src/books/math/assets/images/question/0103-1-2.png
Binary files differ
diff --git a/src/books/math/assets/images/question/0103-1-3.png b/src/books/math/assets/images/question/0103-1-3.png
new file mode 100644
index 0000000..b598f6f
--- /dev/null
+++ b/src/books/math/assets/images/question/0103-1-3.png
Binary files differ
diff --git a/src/books/math/assets/images/question/0103-1-4.png b/src/books/math/assets/images/question/0103-1-4.png
new file mode 100644
index 0000000..ed6f101
--- /dev/null
+++ b/src/books/math/assets/images/question/0103-1-4.png
Binary files differ
diff --git a/src/books/math/assets/images/stlx.jpg b/src/books/math/assets/images/stlx.jpg
new file mode 100644
index 0000000..28a6bf1
--- /dev/null
+++ b/src/books/math/assets/images/stlx.jpg
Binary files differ
diff --git a/src/books/math/assets/images/tbts.jpg b/src/books/math/assets/images/tbts.jpg
new file mode 100644
index 0000000..ac9fe80
--- /dev/null
+++ b/src/books/math/assets/images/tbts.jpg
Binary files differ
diff --git a/src/books/math/assets/images/tjfx.jpg b/src/books/math/assets/images/tjfx.jpg
new file mode 100644
index 0000000..6c5c188
--- /dev/null
+++ b/src/books/math/assets/images/tjfx.jpg
Binary files differ
diff --git a/src/books/math/assets/images/wttc.jpg b/src/books/math/assets/images/wttc.jpg
new file mode 100644
index 0000000..98ad962
--- /dev/null
+++ b/src/books/math/assets/images/wttc.jpg
Binary files differ
diff --git a/src/books/math/assets/images/xxmb.jpg b/src/books/math/assets/images/xxmb.jpg
new file mode 100644
index 0000000..3fdd816
--- /dev/null
+++ b/src/books/math/assets/images/xxmb.jpg
Binary files differ
diff --git a/src/books/math/assets/main.less b/src/books/math/assets/main.less
new file mode 100644
index 0000000..c201a0b
--- /dev/null
+++ b/src/books/math/assets/main.less
@@ -0,0 +1,828 @@
+.math-book {
+ width: 100%;
+ height: 100%;
+ font-family: "瀹嬩綋", SimSun, sans-serif;
+ mn{
+ font-size:1em;
+ }
+ mi{
+ font-size:1em;
+ }
+
+ ul {
+ list-style-type:none;
+ }
+
+ li {
+ list-style-type:none;
+ }
+
+ div.bodystyle {
+ font-family:'FZLTXIHJW',"Times New Roman";
+ font-size:18px;
+ text-align:justify;
+ margin:5%;
+ line-height:30px;
+ }
+ .info {
+ position: relative;
+ }
+
+
+ .em_circle {
+ text-decoration:dashed;
+ }
+
+ .fieldset {
+ background: #E7F4FC;
+ padding:1em;
+ border-radius: 5px;
+ border-radius: 0.6em;
+ }
+
+ .inline{
+ height:1.2em;
+ vertical-align:top;
+
+ }
+ .inline2{
+ height:2.9em;
+ margin-top:2em;
+ margin-bottom:-0.4em;
+ }
+ .imz{
+ height:96%;
+ text-align:center;
+
+
+ }
+
+ .note{
+ font-size: 0.85em;
+ }
+
+
+ .block{
+ font-family:"STKaiti";
+ }
+
+ .block1
+ {
+ font-family:"STKaiti";
+ text-align:right;
+ margin-left:0%;
+ margin-right:2em;
+ }
+
+ .block2
+ {
+ font-family:"STKaiti";
+ text-indent:0em;
+ text-align:center;
+ margin-left:0%;
+ margin-right:0%;
+ }
+
+ .block3
+ {
+ font-family:"STKaiti";
+ text-align:left;
+ text-indent:0em;
+ margin-left:0%;
+ margin-right:0%;
+
+ }
+
+ .img{color:#146Eb4;
+ text-align: center;
+ font-size:0.85em;
+ text-indent: 0em;
+ }
+
+ body {
+ font-family:"Times New Roman", "锟斤拷锟斤拷";
+ }
+
+
+
+
+ p
+ {
+ margin-top: 0.5em;
+ text-indent: 2em;
+ line-height: 1.5em;
+ }
+ .cover {
+ width:100%;
+ padding:0px;
+ }
+ .center {
+ text-align: center;
+ margin-left: 0%;
+ margin-right: 0%;
+ text-indent: 0em
+ }
+ .left1 {
+ text-indent: 1em;
+ text-align: left;
+ }
+ .left {
+ text-indent: 0em;
+ margin-left: 0%;
+ margin-right: 0%;
+ }
+ .right {
+ 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:"Times New Roman", "锟斤拷锟斤拷";
+ }
+ h1 {
+ color: #9f052f;
+ font-family:"Times New Roman", "锟斤拷锟斤拷";
+ text-align: center;
+ font-size:1.5em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ font-family:"Times New Roman", "锟斤拷锟斤拷";
+ }
+
+ h2 {
+ font-family:"Times New Roman", "锟斤拷锟斤拷";
+ font-weight:bold;
+ font-size:1.3em;
+ margin-top: 1em;
+ margin-bottom: 0.2em;
+ }
+ h3 {
+
+ font-family:"Times New Roman", "锟斤拷锟斤拷";
+ text-align: left;
+ font-size:1.2em;
+ margin-top: 1em;
+ margin-bottom: 0.2em;
+ }
+ h4 {
+
+ font-family:"Times New Roman", "锟斤拷锟斤拷";
+ color: #00A1E9;
+ text-align: left;
+ font-weight:bold;
+ font-size:medium;
+ margin-top: 1em;
+ margin-bottom: 0.2em;
+ }
+ h5 {
+
+ font-family:"Times New Roman", "锟斤拷锟斤拷";
+ text-align: left;
+ font-weight:bold;
+ font-size:small;
+ margin-top: 0.8em;
+ margin-bottom: 0.2em;
+ }
+ h6 {
+
+ font-family:"Times New Roman", "锟斤拷锟斤拷";
+ text-align: left;
+ font-weight:bold;
+ font-size:x-small;
+ margin-top: 1em;
+ margin-bottom: 0.2em;
+ }
+ .u {
+
+ text-decoration: underline; }
+
+ .img-0{
+ width:100%;
+ }
+ .img-a{
+ width:90%;
+ }
+ .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-h{
+ width:20%;
+ }
+ .img-i{
+ width:10%;
+ }
+ .img-j{
+ width:5%;
+ }
+ .img-n{
+ height:1em;
+ }
+
+ .img-gn{
+ height:3em;
+ }
+ .img-gn1{
+ height:2.2em;
+ }
+ .img-gn2{
+ height:1.9em;
+ }
+ .border-1{
+ border: 1px solid #E6E6FA;
+ background-color:#E6E6FA;
+ border-radius: 0.6em;
+ padding-top: 30%;
+ padding-bottom: 70%;
+ margin: 20% 10% 20% 10%;
+ }
+ .border-2{
+ border: 1px solid #FFF5EE;
+ background-color:#FFF5EE;
+ border-radius: 0.6em;
+ padding-top: 30%;
+ padding-bottom: 70%;
+ margin: 20% 10% 20% 10%;
+ }
+ /*锟铰伙拷锟斤拷*/
+ .em_dot {
+ -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;
+ }
+ blockquote.kindle-cn-blockquote {
+ background: #f9f9f9;
+ border-left: 0.5em solid #ccc;
+ margin: 1.5em;
+ padding: 1em;
+ text-indent:2em;
+ line-height:1.5em;
+ }
+ div.bj{ background-color:#D3EDFA;
+ padding: 0.3em;
+ margin-top:1em;
+ margin-bottom:1em;
+ }
+ .hs
+ {
+ font-family:"Times New Roman", "锟斤拷锟斤拷";
+ color:red;
+ }
+
+
+ .zt-ls{
+ color: #00A1E9;
+ }
+ .zt-ls1{
+ color: #00A1E9;
+ font-weight:bold;
+ font-size:0.9em;
+ }
+
+ .zt-ls2{
+ font-family:'FZLTXIHJW',"Times New Roman";
+ color: #00A1E9;
+ font-weight:bold;
+ }
+
+ .fontsz1
+ {
+ color: #00A1E9;
+ font-size:0.8em;
+ }
+ .fontsz2
+ {
+ color: #00A1E9;
+ font-size:0.6em;
+ }
+
+
+ div.bk-hzjl{
+ border:2px solid #00A1E9;
+ background:#F6FBFF;
+ border-radius: 0 0 0 5px;
+ padding:15px;
+ margin-bottom:2em;
+ margin-top:2em;
+ border-radius:0em 0em 2em 0em;
+ }
+
+ div.bj1-hzjl{
+ padding:0.01em 1em 0.01em 1em;
+ margin-top:-2.4em;
+ margin-left:-0.5em;
+ margin-right:-1em;
+ }
+
+ div.bk{
+ border:2px solid #00A1E9;
+ padding:0.8em;
+ margin-bottom:2em;
+ margin-top:2em;
+ box-shadow: inset -0.5em -0.5em 0 0 #E0F2FC;
+ }
+
+ div.bj1{
+ padding:0.01em 1em 0.01em 1em;
+ margin-top:-2.6em;
+ margin-left:-0.5em;
+ margin-right:-1em;
+ }
+
+
+ p.bj2{
+ background-color:#81CFF5;
+ color:#FFFFFF;
+ display: inline-block;
+ padding:1px;
+ font-size: 1.1em;
+ padding: 3px 10px 3px 10px;
+ font-weight: bold;
+ box-shadow: -0.3em -0.3em 0px 0px #2FBDEF;
+ margin: 0;
+ text-indent: 0em;
+ margin-top:1em;
+ margin-bottom:1em;
+ }
+
+ .bj-sp{
+ background-color:#FFFFFF;
+ color:#53C3F1;
+ padding:0.3em 1em 0.3em 1em;
+ margin-top:0em;
+ margin-left:-3em;
+ }
+
+ .fieldset1 {
+ border:2px solid #33BCF0;
+ padding:1em;
+ border-radius: 5px;
+ border-radius: 0.6em;
+ }
+
+ // 鑷畾涔�
+ .page-box {
+ position: relative;
+ box-sizing: border-box;
+ min-height: 1150px;
+ margin-bottom: 20px;
+ box-shadow: 0 3px 6px 1px #00000029;
+ background-color: #fff;
+ }
+ .book {
+ margin: 0 auto;
+ width: 816px;
+ }
+
+ .text-center {
+ text-align: center;
+ }
+ .tl {
+ text-align: left !important;
+ }
+ .tl-ri {
+ text-align: right !important;
+ }
+ .tl-ju {
+ text-align: justify;
+ }
+ .ti2 {
+ text-indent: 2em !important;
+ }
+ .lineInput {
+ width: 90%;
+ font-size: 14px;
+ color: #666;
+ border: none;
+ border-bottom: 1px solid #15c0f2;
+ outline: none;
+ background: transparent;
+ }
+ .textarea-border {
+ border-color: #15c0f2;
+ }
+ .completion-input {
+ width: 64px !important;
+ color: #000 !important;
+ }
+ .judge-input {
+ width: 20px;
+ font-size: 14px;
+ color: #000;
+ border: none;
+ border: 0;
+ outline: none;
+ background: transparent;
+ }
+
+ .sport-text {
+ font-size: 20px;
+ line-height: 40px;
+ }
+ .img-text {
+ color: #000;
+ text-align: center;
+ font-size: 16px;
+ text-indent: 0em;
+ font-weight: 700;
+ }
+ .text-size {
+ font-size: 20px;
+ }
+ .fl {
+ display: flex;
+ }
+ .fl-evenly {
+ justify-content: space-evenly;
+ }
+ .fl-around {
+ justify-content: space-around;
+ }
+ .fl-between {
+ justify-content: space-between;
+ }
+ .ju-cn {
+ justify-content: center;
+ }
+ .fl-di {
+ flex-direction: column;
+ }
+ .fl-cn {
+ align-items: center;
+ }
+ .al-end {
+ align-items: flex-end;
+ }
+ .fz-18 {
+ font-size: 18px;
+ }
+ .fz-16 {
+ font-size: 16px;
+ }
+ .fz-14 {
+ font-size: 14px;
+ }
+ .fz-12 {
+ font-size: 12px;
+ }
+ .suspend-title {
+ white-space: nowrap;
+ min-width: 120px;
+ position: absolute;
+ top: -27px;
+ left: -15px;
+ background-color: #32a59e;
+ height: 34px;
+ line-height: 34px;
+ border-radius: 13px;
+ color: #fff;
+ text-align: center;
+ }
+ .m0 {
+ margin: 0;
+ }
+ .t0 {
+ text-indent: 0;
+ }
+ .t2 {
+ text-indent: 2em;
+ }
+ .m0-t0 {
+ margin: 0;
+ text-indent: 0 !important;
+ }
+
+ .learn-btn img {
+ cursor: pointer;
+ height: 30px;
+ // width: 25px;
+ }
+
+ .lh {
+ line-height: 1.5em;
+ margin-top: 0.5em;
+ }
+ .page-box {
+ box-sizing: border-box;
+ min-height: 1150px ;
+ margin-bottom: 20px;
+ box-shadow: 0 3px 6px 1px #00000029;
+ background-color: #fff;
+ }
+ .ds-bl {
+ display: block;
+ }
+ ul {
+ list-style: none;
+ padding: 0;
+ }
+
+ .lh2 {
+ line-height: 2em;
+ }
+ // 濂囨暟椤甸〉鐪�
+ .page-header-box {
+ margin: 0;
+ margin-bottom: 20px;
+ width: 100%;
+ height: 104px;
+ display: flex;
+ li:first-child {
+ height: 100%;
+ width: 88%;
+ display: flex;
+ align-items: flex-end;
+ P {
+ margin: 0 !important;
+ width: 100%;
+ height: 24px;
+ background-color: #97a4d3;
+ text-align: right;
+ padding-right: 20px;
+ color: #fff;
+ }
+ }
+ li:last-child {
+ margin-left: 20px;
+ p {
+ margin: 0 !important;
+ height: 100%;
+ padding:0 4px;
+ width: min-content;
+ border: 1px solid #7b8cc5;
+ text-indent: 0em;
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ }
+ }
+ }
+ .page-header-odd {
+ margin: 0;
+ margin-bottom: 20px;
+ width: 100%;
+ height: 104px;
+ display: flex;
+ justify-content: space-between;
+ li:first-child {
+ border: 1px solid #7b8cc5;
+ width: 15%;
+ height: 24px;
+ text-align: right;
+ padding-right: 4px;
+ box-sizing: border-box;
+ }
+ li:nth-child(2) {
+ padding: 0 4px;
+ min-width:132px;
+ height: 24px;
+ border: 1px solid #7b8cc5;
+ text-align: center;
+ box-sizing: border-box;
+ color: #5f7abc;
+ font-weight: bold;
+ }
+ li:last-child {
+ width: 64%;
+ height: 24px;
+ background-color: #97a4d3;
+ }
+ }
+ .fw-b {
+ font-weight: bold;
+ }
+ .italic {
+ font-style: italic;
+ }
+ .mb-0 {
+ margin-bottom: 0;
+ }
+ .mb-20 {
+ margin: 20px 0 !important;
+ }
+ .mb-40 {
+ margin-bottom: 40px !important;
+ }
+ .mt-20 {
+ margin-top: 20px;
+ }
+ .mt-40 {
+ margin-top: 40px;
+ }
+ .mb-80 {
+ margin-bottom: 80px !important;
+ }
+ .mr-20 {
+ margin-right: 20px;
+ }
+ .ml-30 {
+ margin-left: 30px;
+ }
+ .table-box {
+ width: 94%;
+ font-family: "STKaiti";
+ line-height: 1.5em;
+ }
+ .dl-bl {
+ display: inline-block;
+ }
+ .mt-10 {
+ margin-top: 10px;
+ }
+ .w100 {
+ width: 100% !important;
+ }
+ .primary-color {
+ color: #15c0f2;
+ }
+ .video-border {
+ border: 1px solid #15c0f2;
+ border-radius: 30px;
+ }
+ .fm-st {
+ font-family: "STKaiti";
+ }
+ .btn {
+ cursor: pointer;
+ width: 23px;
+ border-radius: 5px;
+ margin-left: 5px;
+ }
+ .table-br-color {
+ border-color: #e9e9e9;
+ }
+ .span-border {
+ margin-left: -13px;
+ display: block;
+ width: 104%;
+ margin-top: 20px;
+ border-bottom: 2px dotted #1eb9ee;
+ border-radius: 10px;
+ }
+ .wh-no {
+ white-space: nowrap;
+ }
+ .annotation-border {
+ margin: 20px 0;
+ width: 150px;
+ border: 1px solid #00aeef;
+ }
+ .word-break-all {
+ word-break: break-all;
+ }
+ .textarea-text {
+ font-size: 16px;
+ font-family: "STKaiti";
+ }
+ .mt-20 {
+ margin-top: 20px;
+ }
+ .mt-40 {
+ margin-top: 40px;
+ }
+ .ta-br {
+ border-color: #c0c4cc;
+ }
+ textarea:focus {
+ border-color: #15c0f2;
+ outline: none;
+ }
+ .cl-66 {
+ color: #666;
+ }
+
+ .svg-btn {
+ margin-left: 5px;
+ cursor: pointer;
+ display: flex;
+ padding: 3px;
+ fill: #fff;
+ border: 1px solid #008bff;
+ border-radius: 5px;
+ background-color: #008bff;
+ &:hover{
+ fill: #008bff;
+ background-color: #fff;
+ }
+ }
+ a {
+ cursor: default;
+ }
+ ul {
+ list-style: none;
+ }
+ li {
+ list-style: none !important;
+ }
+ .collect-btn {
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ margin-left: 10px;
+ }
+ // 鏄剧ず绛旀鎸夐挳
+ .btn-box {
+ margin-left: 5px;
+ cursor: pointer;
+ text-indent: 0;
+ display: inline-block;
+ border:1px solid #00a1e9;
+ height: 22px;
+ padding: 3px;
+ background-color:#00a1e9 ;
+ border-radius: 5px;
+ svg {
+ fill: #fff;
+ }
+ &:hover {
+ background-color: #fff;
+ svg {
+ fill:#00a1e9 ;
+ }
+ }
+ }
+}
+
+/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
+@media (max-width: 430px) {
+ .ans-dance {
+ .page-box {
+ min-height: 750px;
+ }
+ .pg-mh {
+ min-height: 815px;
+ }
+ }
+}
+@media (max-width: 660px) {
+ .math-book {
+ /* 鍒嗛〉padding */
+ .page-padding {
+ padding: 104px 20px;
+ }
+ .padding-96 {
+ padding: 0 20px 40px 20px;
+ }
+ /* video澶у皬 */
+ .video-box {
+ max-width: 260px;
+ }
+ .audio-box {
+ margin-top: 20px;
+ flex-wrap: wrap;
+ li {
+ width: 100%;
+ }
+ li:nth-child(2) {
+ margin-top: 10px;
+ }
+ }
+ }
+}
+@media (min-width: 660px) {
+ .math-book{
+ .page-padding {
+ padding: 104px 96px;
+ }
+ .padding-96 {
+ padding: 0 96px 104px 96px;
+ }
+ .video-box {
+ max-width: 370px;
+ }
+ .audio-box {
+ margin-top: 20px;
+ flex-wrap: nowrap;
+ li {
+ width: 58%;
+ }
+ li:nth-child(2) {
+ margin-left: 10px;
+ }
+ }
+ }
+}
diff --git a/src/books/math/view/components/chapter001.vue b/src/books/math/view/components/chapter001.vue
new file mode 100644
index 0000000..814a932
--- /dev/null
+++ b/src/books/math/view/components/chapter001.vue
@@ -0,0 +1,818 @@
+<template>
+ <div class="chapter" num="2">
+ <div class="page-box" page="4">
+ <div v-if="showPageList.indexOf(4) > -1">
+ <h1 id="a007">
+ <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
+ </h1>
+ <div class="padding-96">
+ <p>
+ 鍦ㄥ瑙備笘鐣屼腑瀛樺湪鍚勭鍚勬牱鐨勮繍鍔ㄥ彉鍖栫幇璞�.濡傛惌杞界鑸熷崄鍥涘彿杞戒汉椋炶埞鐨勯暱寰佷簩鍙疯繍杞界伀绠彂灏勮繃绋嬩腑锛岄鑸逛笌鍙戝皠鐐硅窛绂讳細闅忕潃鏃堕棿鐨勫彉鍖栬�屽彉鍖栵紱娣辨捣鍕囧＋鍙疯浇浜烘綔姘村櫒鍦ㄤ笅娼滃疄楠岃繃绋嬩腑锛屽叾鍘嬪己闅忕潃涓嬫綔娣卞害鐨勫鍔犺�屽澶э紱浠ｈ〃鏂拌兘婧愭妧鏈殑鍏変紡鍙戠數鍜岄鑳藉彂鐢碉紝鎴戝浗鐨勮鏈哄閲忛殢鏃堕棿鍙樺寲鑰屽闀匡紱鎴戝浗蹇�熷彂灞曠殑楂橀�熼搧璺紝鍏舵�婚噷绋嬫槸閫愬勾澧炲姞鐨勶紝鐜板凡绐佺牬4涓噆m
+ 锛岀ǔ灞呬笘鐣岀涓�锛涙瘡涓汉鐨勪綋娓╅殢鐫�鏃堕棿鐨勫彉鍖栬�屽彉鍖栵紱鍒板晢搴楄喘涔板悓涓�绉嶉ギ鏂欑殑鏁伴噺瓒婂锛屼粯璐硅秺澶氱瓑.杩欎簺鍔ㄦ�佸彉鍖栫幇璞￠兘琛ㄧ幇涓哄彉閲忎箣闂寸殑瀵瑰簲鍏崇郴锛屾垜浠父鐢ㄥ嚱鏁版ā鍨嬫潵鎻忚堪杩欎簺鍙橀噺涔嬮棿鐨勫叧绯诲拰瑙勫緥锛屽苟閫氳繃鐮旂┒鍑芥暟鏉ヨ璇嗗瑙備笘鐣�.
+ </p>
+ <p>
+ 鍑芥暟鏄弿杩板瑙備笘鐣屽彉鍖栬寰嬪拰瑙ｅ喅鏁板闂鐨勯噸瑕佸伐鍏�.瀹冧笌浠ｆ暟寮忋�佹柟绋嬨�佷笉绛夊紡绛夌煡璇嗚仈绯荤揣瀵嗭紝鏄繘涓�姝ュ涔犳暟瀛︾殑閲嶈鍩虹.鍑芥暟鐨勬蹇靛強鍏跺弽鏄犵殑鏁板鎬濇兂鍜屾柟娉曞凡骞挎硾娓楅�忓埌鏁板鐨勫悇涓鍩燂紝骞跺湪鐜板疄鐢熸椿涓湁鐫�骞挎硾鐨勫簲鐢�.
+ </p>
+ <p>
+ 鏈崟鍏冧富瑕佸涔犲嚱鏁扮殑姒傚康銆佸嚱鏁扮殑琛ㄧず鏂规硶銆佸嚱鏁扮殑鍗曡皟鎬у拰濂囧伓鎬т互鍙婂嚱鏁扮殑搴旂敤.鏈崟鍏冪殑瀛︿範锛岄噸鍦ㄦ劅鍙楃敤鐩磋鎯宠薄浠庡叿浣撻棶棰樹腑鎶借薄鍑烘暟瀛﹂棶棰橈紝骞剁敤绮剧‘鐨勬暟瀛︾鍙疯瑷�琛ㄨ揪姒傚康銆佹�ц川銆佹帹鐞嗙瓑锛涙帉鎻＄爺绌跺嚱鏁扮殑鍩烘湰鍐呭銆佽繃绋嬪拰鏂规硶锛涜繍鐢ㄥ缓绔嬪垎娈靛嚱鏁般�佷簩娆″嚱鏁扮瓑鏁板妯″瀷瑙ｅ喅瀹為檯闂鐨勬柟娉曪紱绉疮涓�瀹氱殑鏁板缁忛獙鍜屾柟娉曪紝鎻愬崌鐩磋鎯宠薄銆佹暟瀛︽娊璞°�佹暟瀛﹀缓妯°�侀�昏緫鎺ㄧ悊绛夋牳蹇冪礌鍏�.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="5">
+ <div v-if="showPageList.indexOf(5) > -1">
+ <div class="padding-96">
+ <p class="left">
+ <img class="inline2" alt="" src="../../assets/images/xxmb.jpg" />
+ </p>
+ <div class="fieldset">
+ <p>1.鍑芥暟鐨勬蹇�.</p>
+ <p>
+ 鑳戒粠鍏蜂綋鎯呭涓娊璞℃鎷嚭鍑芥暟鐨勬蹇碉紝瀛︿範鐢ㄩ泦鍚堣瑷�鍜屽搴斿叧绯绘弿杩板嚱鏁版蹇�.
+ </p>
+ <p>2.鍑芥暟鐨勮〃绀烘柟娉�.</p>
+ <p>浜嗚В鍑芥暟鐨勪笁绉嶈〃绀烘柟娉曪紝浼氭伆褰撳湴閫夌敤杩欎簺鏂规硶琛ㄧず鍑芥暟锛�</p>
+ <p>鐞嗚В鍒嗘鍑芥暟鐨勬蹇碉紱</p>
+ <p>閫氳繃鐮旂┒鍑芥暟鐨勫彉鍖栬寰嬫潵鎶婃彙瀹㈣涓栫晫涓簨鐗╃殑鍙樺寲瑙勫緥.</p>
+ <p>3.鍑芥暟鐨勫崟璋冩�у拰濂囧伓鎬�.</p>
+ <p>
+ 瀛︿範鐢ㄧ簿鍑嗙殑鏁板绗﹀彿璇█鎻忚堪鍑芥暟鐨勬�ц川锛屾帉鎻″垽鏂嚱鏁板崟璋冩�у拰濂囧伓鎬х殑鏂规硶.
+ </p>
+ <p>4.鍑芥暟鐨勫簲鐢�.</p>
+ <p>鍒濇鎺屾彙寤虹珛鍒嗘鍑芥暟銆佷簩娆″嚱鏁版ā鍨嬫潵瑙ｅ喅瀹為檯闂鐨勬柟娉曪紱</p>
+ <p>鑳借繍鐢ㄥ嚱鏁扮殑鎬濇兂鍜屾柟娉曡В鍐冲疄闄呴棶棰橈紝鎻愬崌鏍稿績绱犲吇鍜屾�濈淮鍝佽川.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="6">
+ <div v-if="showPageList.indexOf(6) > -1">
+ <ul class="page-header-box">
+ <li>
+ <p>绗笁鍗曞厓 鍑芥暟</p>
+ </li>
+ <li>
+ <p><span>089</span></p>
+ </li>
+ </ul>
+ <div class="padding-96">
+ <h3 id="c031">
+ 3.3.2 鍑芥暟鐨勫鍋舵��<span class="fontsz2">锛烇紴锛�</span>
+ </h3>
+ <p class="left">
+ <img class="img-gn" alt="" src="../../assets/images/wttc.jpg" />
+ </p>
+ <p>
+ 鍑芥暟<i>f</i>锛�<i>x</i>锛�=|<i>x</i>|鍜�<i>g</i>锛�<i>x</i>锛�=<i>x</i
+ ><sup>2</sup>鐨勫浘鍍忕殑瀵圭О鎬у浣曪紵
+ </p>
+ <p class="left">
+ <img class="img-gn" alt="" src="../../assets/images/tjfx.jpg" />
+ </p>
+ <p>
+ 鍒楀嚭琛�3-11鍜岃〃3-12锛岀敾鍑哄嚱鏁�<i>f</i>锛�<i>x</i>锛�=|<i>x</i>|
+ 鍜�<i>g</i>锛�<i>x</i>锛�=<i>x</i><sup>2</sup>鐨勫浘鍍忥紝濡傚浘3-14锛�1锛�
+ 鍜岋紙2锛� 鎵�绀�.
+ </p>
+ <p class="img">琛�3-11</p>
+ <p class="center">
+ <img class="img-a" alt="" src="../../assets/images/0100-1.jpg" />
+ </p>
+ <p class="img">琛�3-12</p>
+ <p class="center">
+ <img class="img-a" alt="" src="../../assets/images/0100-2.jpg" />
+ </p>
+ <iframe
+ src="https://www.geogebra.org/calculator"
+ frameborder="0"
+ class="iframe-box"
+ ></iframe>
+ <p class="center openImgBox">
+ <img class="img-c" alt="" src="../../assets/images/0100-3.jpg" />
+ </p>
+ <p class="img">鍥�3-14</p>
+ <p>
+ 瑙傚療鍥�3-14锛�1锛�
+ 鍙戠幇锛屽嚱鏁�<i>f</i>锛�<i>x</i>锛�=|<i>x</i>|鐨勫畾涔夊煙鏄紙-鈭烇紝+鈭烇級锛屽嚱鏁板浘鍍忓叧浜�<i>y</i>杞村绉�.浠庤〃3-11涓繕鍙戠幇锛屽綋鑷彉閲忓彇涓�瀵圭浉鍙嶆暟鏃讹紝瀵瑰簲鐨勫嚱鏁板�肩浉绛夛紝濡�<i>f</i>锛�-1锛�=<i>f</i>锛�1锛�=1锛�<i>f</i>锛�-2锛�=<i>f</i>锛�2锛�=2锛�<i>f</i>锛�-3锛�=<i>f</i>锛�3锛�=3锛屸�﹀疄闄呬笂锛屽浠绘剰<i>x</i>鈭堬紙-鈭烇紝+鈭烇級锛岄兘鏈�<i>f</i>锛�-<i>x</i>锛�=|-<i>x</i>|=|<i>x</i>|=<i>f</i>锛�<i>x</i>锛夛紝鍗�<i>f</i>锛�-<i>x</i>锛�=<i>f</i>锛�<i>x</i>锛�.
+ </p>
+ <p>
+ 鍥�3-14锛�2锛� 涓紝鍑芥暟<i>g</i>锛�<i>x</i>锛�=<i>x</i
+ ><sup>2</sup
+ >鐨勫畾涔夊煙鏄紙-鈭烇紝+鈭烇級锛屽嚱鏁板浘鍍忎篃鍏充簬<i>y</i>杞村绉�.琛�3-12涓紝褰撹嚜鍙橀噺鍙栦竴瀵圭浉鍙嶆暟鏃讹紝瀵瑰簲鐨勫嚱鏁板�肩浉绛夛紝濡�<i>g</i>锛�-1锛�=<i>g</i>锛�1锛�=1锛�<i>g</i>锛�-2锛�=<i>g</i>锛�2锛�=4锛�<i>g</i>锛�-3锛�=<i>g</i>锛�3锛�=9锛屸�﹀疄闄呬笂锛屽浠绘剰<i>x</i>鈭堬紙-鈭烇紝+鈭烇級锛岄兘鏈�<i>g</i>锛�-<i>x</i>锛�=锛�-<i>x</i>锛�<sup>2</sup>=<i
+ >x</i
+ ><sup>2</sup
+ >=<i>g</i>锛�<i>x</i>锛夛紝鍗�<i>g</i>锛�-<i>x</i>锛�=<i>g</i>锛�<i>x</i>锛�.
+ </p>
+ <p>
+ 杩欎袱涓嚱鏁扮殑鍥惧儚閮藉叧浜�<i>y</i>杞村绉帮紱褰撹嚜鍙橀噺鍙栧畾涔夊煙涓换鎰忎竴瀵圭浉鍙嶆暟鏃讹紝瀵瑰簲鐨勫嚱鏁板�奸兘鐩哥瓑锛岃繖绉嶅嚱鏁板氨鏄伓鍑芥暟.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="7">
+ <div v-if="showPageList.indexOf(7) > -1">
+ <ul class="page-header-odd fl al-end">
+ <li>090</li>
+ <li>鏁板.鍩虹妯″潡</li>
+ <li></li>
+ </ul>
+ <div class="padding-96">
+ <p class="left">
+ <img class="img-gn" alt="" src="../../assets/images/cxgk.jpg" />
+ </p>
+ <p>
+ 涓�鑸湴锛岃鍑芥暟<i>f</i>锛�<i>x</i>锛夌殑瀹氫箟鍩熶负<i>D</i>锛屽鏋滃浜�<span
+ class="u"
+ >浠绘剰</span
+ ><i>x</i>鈭�<i>D</i>锛�<span class="u">閮芥湁</span
+ >-<i>x</i>鈭�<i>D</i>锛屼笖<i>f</i>锛�-<i>x</i>锛�=<i>f</i>锛�<i>x</i>锛夛紝閭ｄ箞鍑芥暟<i>f</i>锛�<i>x</i>锛夊氨鍙綔<b>鍋跺嚱鏁�</b>锛屽鍥�3-15鎵�绀�.<b>鍋跺嚱鏁扮殑鍥惧儚鍏充簬<i>y</i>杞村绉�</b>.
+ </p>
+ <p>
+ 鎴戜滑鍙互鐢卞嚱鏁扮殑鍥惧儚鏄惁鍏充簬<i>y</i>杞村绉版潵鍒ゆ柇鍑芥暟鏄笉鏄伓鍑芥暟.
+ </p>
+ <p class="center openImgBox">
+ <img
+ class="img-c"
+ alt=""
+ src="../../assets/images/0101-1.jpg"
+ style="width: 40%"
+ />
+ </p>
+ <p class="img fl al-cn ju-cn">
+ <span>鍥�3-15</span>
+ <img
+ :src="chapterData.isCollectImg ? collectCheck : collectImg"
+ alt=""
+ class="collect-btn"
+ @click="handleCollect('img')"
+ />
+ </p>
+ <video
+ :src="videoPath"
+ webkit-playsinline="true"
+ x-webkit-airplay="true"
+ playsinline="true"
+ x5-video-orientation="h5"
+ x5-video-player-fullscreen="true"
+ x5-playsinline=""
+ controls
+ controlslist="nodownload"
+ class="video-border w100"
+ ></video>
+ <p class="img fl al-cn ju-cn">
+ <span>瑙嗛锛氬垽鏁板嚱鏁板鍋舵�х殑鏂规硶鍜屾楠� </span>
+ <img
+ :src="chapterData.isCollectVideo ? collectCheck : collectImg"
+ alt=""
+ class="collect-btn"
+ @click="handleCollect('video')"
+ />
+ </p>
+ <p>
+ <span class="zt-ls"><b>渚�1</b></span
+ >銆�鏍规嵁鍥�3-16涓嚱鏁扮殑鍥惧儚锛屽垽鏂摢浜涘嚱鏁版槸鍋跺嚱鏁�.
+ <span class="btn-box" @click="isShowExampleOne = !isShowExampleOne">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20.501"
+ height="20.501"
+ viewBox="0 0 20.501 20.501"
+ >
+ <path
+ class="a"
+ d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+ transform="translate(-3327.144 15329)"
+ />
+ </svg>
+ </span>
+ </p>
+ <p class="center openImgBox">
+ <img class="img-c" alt="" src="../../assets/images/0101-2.jpg" />
+ </p>
+ <p class="img">鍥�3-16</p>
+ <div v-if="isShowExampleOne">
+ <p>
+ <span class="zt-ls"><b>瑙�</b></span> 鍦ㄥ洓涓嚱鏁板浘鍍忎腑锛屽浘3-16锛�1锛�
+ 鍜屽浘3-16锛�4锛� 鐨勫嚱鏁板浘鍍忓叧浜�<i>y</i>杞村绉帮紱鍥�3-16锛�2锛�
+ 鍜屽浘3-16锛�3锛�
+ 鐨勫嚱鏁板浘鍍忎笉鍏充簬<i>y</i>杞村绉�.鏍规嵁鍋跺嚱鏁扮殑鍥惧儚鍏锋湁鍏充簬<i>y</i>杞村绉扮殑鐗圭偣锛屽浘3-16锛�1锛夊拰鍥�3-16锛�4锛夌殑鍑芥暟鏄伓鍑芥暟锛屽浘3-16锛�2锛夊拰鍥�3-16锛�3锛夌殑鍑芥暟涓嶆槸鍋跺嚱鏁�.
+ </p>
+ </div>
+ <p>
+ <span class="zt-ls"><b>渚�2</b></span
+ >銆�宸茬煡<i>f</i>锛�<i>x</i>锛�=|<i>x</i>|+1鍥惧儚鍦�<i>y</i>杞村彸杈圭殑閮ㄥ垎濡傚浘3-17鎵�绀�.璇曠敾鍑鸿繖涓嚱鏁板浘鍍忓湪<i>y</i>杞村乏杈圭殑閮ㄥ垎.
+ <span class="btn-box" @click="isShowExampleTwo = !isShowExampleTwo">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20.501"
+ height="20.501"
+ viewBox="0 0 20.501 20.501"
+ >
+ <path
+ class="a"
+ d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+ transform="translate(-3327.144 15329)"
+ />
+ </svg>
+ </span>
+ </p>
+ <p class="center openImgBox">
+ <img
+ class="img-c"
+ alt=""
+ src="../../assets/images/0102-1.jpg"
+ style="width: 40%"
+ />
+ </p>
+ <p class="img">鍥�3-17</p>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="8">
+ <div v-if="showPageList.indexOf(8) > -1">
+ <ul class="page-header-box">
+ <li>
+ <p>绗笁鍗曞厓 鍑芥暟</p>
+ </li>
+ <li>
+ <p><span>091</span></p>
+ </li>
+ </ul>
+ <div class="padding-96">
+ <p v-if="isShowExampleTwo">
+ <span class="zt-ls"><b>瑙�</b></span>
+ 鍑芥暟<i>f</i>锛�<i>x</i>锛�=|<i>x</i>|+1鐨勫畾涔夊煙鏄紙-鈭烇紝+鈭烇級锛屽洜涓哄畠鏄伓鍑芥暟锛屾墍浠ユ牴鎹叾鍥惧儚鍏充簬<i>y</i>杞村绉扮殑鐗圭偣锛屽嵆鍙敾鍑鸿繖涓嚱鏁板湪<i>x</i>鈭堬紙-鈭烇紝0锛戒笂鐨勫浘鍍�.
+ </p>
+ <p>
+ 濡傚浘3-18鎵�绀猴紝鍦�<i>y</i>杞村彸杈圭殑鍥惧儚涓婂彇涓ょ偣<i>A</i>鍜�<i>B</i>锛屽垎鍒敾鍑哄畠浠叧浜�<i>y</i>杞村绉扮殑鐐�<i>A</i>鈥插拰<i>B</i>鈥诧紝鐒跺悗杩炵嚎<i>A</i>鈥�<i>B</i>鈥诧紝灏卞緱鍒拌繖涓嚱鏁扮殑鍥惧儚鍦�<i>y</i>杞村乏杈圭殑閮ㄥ垎.
+ </p>
+ <p class="center openImgBox">
+ <img
+ class="img-c"
+ alt=""
+ src="../../assets/images/0102-2.jpg"
+ style="width: 40%"
+ />
+ </p>
+ <p class="img">鍥�3-18</p>
+ <div class="bk">
+ <div class="bj1">
+ <p class="left">
+ <img
+ class="img-gn1"
+ alt=""
+ src="../../assets/images/tbts.jpg"
+ />
+ </p>
+ </div>
+ <p class="block">
+ 涓�涓嚱鏁版槸涓嶆槸鍋跺嚱鏁帮紝鍙互鐢卞嚱鏁扮殑鍥惧儚鏄惁鍏充簬<i>y</i>杞村绉版潵鍒ゆ柇锛涘綋鍑芥暟鐢ㄨВ鏋愭硶琛ㄧず鏃讹紝鍙互鐢ㄥ伓鍑芥暟鐨勫畾涔夋潵鍒ゆ柇.
+ </p>
+ </div>
+ <p>
+ <span class="zt-ls"><b>渚�3</b></span
+ >銆�鍒ゆ柇涓嬪垪鍑芥暟鏄笉鏄伓鍑芥暟.
+ </p>
+ <ul>
+ <li class="fl fl-cn">
+ <p>锛�1锛� <i>f</i>锛�<i>x</i>锛�=3<i>x</i><sup>2</sup>+1锛�</p>
+ <span
+ class="btn-box"
+ @click="isShowExampleThree = !isShowExampleThree"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20.501"
+ height="20.501"
+ viewBox="0 0 20.501 20.501"
+ >
+ <path
+ class="a"
+ d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+ transform="translate(-3327.144 15329)"
+ />
+ </svg>
+ </span>
+ <span class="btn-box" @click="openThinkingDialog">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20.545"
+ height="22.112"
+ viewBox="0 0 20.545 22.112"
+ >
+ <path
+ class="a"
+ d="M3771.2-14311.889a2.356,2.356,0,0,1-1.727-.626c-.027-.054-.053-.1-.079-.148l0-.007c-.123-.224-.2-.371-.076-.629a.869.869,0,0,1,.784-.471.205.205,0,0,1,.158.079.205.205,0,0,0,.158.079.187.187,0,0,0,.038.1.143.143,0,0,0,.117.05h.158a.573.573,0,0,0,.471.158,2.2,2.2,0,0,0,.916-.3l.023-.011a.572.572,0,0,1,.471-.158.575.575,0,0,1,.626.626.526.526,0,0,1,.036.409.664.664,0,0,1-.349.375A3.582,3.582,0,0,1,3771.2-14311.889Zm-1.885-1.723h-.155a.718.718,0,0,1-.784-.63.38.38,0,0,1-.021-.3.976.976,0,0,1,.492-.485l4.86-1.252a1.047,1.047,0,0,1,.784.626c.151.3-.128.61-.471.784l-4.705,1.256Zm-.155-1.885H3769a.716.716,0,0,1-.784-.626c-.149-.3.129-.611.471-.784l4.234-1.1v-.158l-.021.007a7.808,7.808,0,0,1-1.861.31,5.3,5.3,0,0,1-3.137-.942,5.789,5.789,0,0,1-2.666-4.076,6.421,6.421,0,0,1,1.256-5.018,7.038,7.038,0,0,1,2.194-1.568,7.848,7.848,0,0,1,2.666-.472,6.43,6.43,0,0,1,2.979.784,4.958,4.958,0,0,1,2.2,2.194,5.522,5.522,0,0,1,.313,5.177,13.113,13.113,0,0,1-1.256,1.882l-.313.313a2.156,2.156,0,0,0-.78,1.244l0,.012a1.731,1.731,0,0,1-1.727,1.723l-.313.158-3.292.939Zm1.256-6.271v1.256h1.41v-1.256Zm.784-4.234c.718,0,1.1.271,1.1.784a.925.925,0,0,1-.316.783l-.468.156a2.235,2.235,0,0,0-.63.471l-.012.024a2.2,2.2,0,0,0-.3.918v.155h1.1v-.155a1.2,1.2,0,0,1,.313-.629.543.543,0,0,0,.315-.153c.007,0,.315,0,.315-.16a1.226,1.226,0,0,0,.626-.626,2.277,2.277,0,0,0,.313-1.1,1.409,1.409,0,0,0-.626-1.252,2.337,2.337,0,0,0-1.569-.471,2.258,2.258,0,0,0-2.507,2.353l1.252.154A1.121,1.121,0,0,1,3771.2-14326Zm-6.51,9.645a.769.769,0,0,1-.549-.237.772.772,0,0,1-.235-.549.772.772,0,0,1,.235-.548l.939-.939a.781.781,0,0,1,.55-.234.772.772,0,0,1,.547.234.772.772,0,0,1,.238.549.772.772,0,0,1-.238.549l-.939.938A.769.769,0,0,1,3764.686-14316.356Zm13.174-.157a.774.774,0,0,1-.549-.234l-.943-.942a.678.678,0,0,1-.233-.47.678.678,0,0,1,.233-.47.774.774,0,0,1,.549-.234.774.774,0,0,1,.549.234l.942.939a.427.427,0,0,1,.228.324.74.74,0,0,1-.228.618A.774.774,0,0,1,3777.859-14316.514Zm2.9-6.351h-1.414c-.469-.158-.784-.474-.784-.784a.743.743,0,0,1,.784-.784h1.414a.743.743,0,0,1,.784.784A.743.743,0,0,1,3780.761-14322.864Zm-17.566-.158h-1.41c-.469-.157-.784-.473-.784-.784a.743.743,0,0,1,.784-.784h1.41a.743.743,0,0,1,.784.784A.743.743,0,0,1,3763.195-14323.022Zm13.861-5.723a.759.759,0,0,1-.529-.237.776.776,0,0,1-.235-.549.772.772,0,0,1,.235-.549l.939-.938a.44.44,0,0,1,.413-.238.759.759,0,0,1,.529.238.772.772,0,0,1,.235.549.772.772,0,0,1-.235.548l-.942.939A.435.435,0,0,1,3777.055-14328.745Zm-11.429,0a.776.776,0,0,1-.55-.237l-.939-1.1a.678.678,0,0,1-.235-.469.678.678,0,0,1,.235-.47.772.772,0,0,1,.549-.238.772.772,0,0,1,.549.238l.939,1.1a.675.675,0,0,1,.238.47.675.675,0,0,1-.238.47A.767.767,0,0,1,3765.626-14328.745Zm5.724-2.273a.743.743,0,0,1-.784-.785v-1.413c.157-.469.473-.784.784-.784a.743.743,0,0,1,.784.784v1.413A.743.743,0,0,1,3771.35-14331.019Z"
+ transform="translate(-3761 14334.001)"
+ />
+ </svg>
+ </span>
+ <span class="btn-box" @click="stepDialog = true">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="19.28"
+ height="20.563"
+ viewBox="0 0 19.28 20.563"
+ >
+ <g transform="translate(-109.056 -82.941)">
+ <path
+ class="a"
+ d="M3439.656-15185.7h-12.643a1.815,1.815,0,0,1-1.816-1.81v-16.944a1.83,1.83,0,0,1,1.816-1.809h15.674a1.8,1.8,0,0,1,1.79,1.809v13.93h-4.217a.6.6,0,0,0-.6.6v4.217h0Zm-9.819-2.764a.5.5,0,0,0-.5.5.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5.5.5,0,0,0-.5-.5Zm0-2a.5.5,0,0,0-.5.5.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5.5.5,0,0,0-.5-.5Zm1.393-8.525a2.416,2.416,0,0,0-2.416,2.411,2.421,2.421,0,0,0,2.416,2.42h.111a1.8,1.8,0,0,0,1.1,1.1,1.809,1.809,0,0,0,.6.107,1.808,1.808,0,0,0,1.7-1.206h4.072l-.172.172a.635.635,0,0,0-.179.454.569.569,0,0,0,.179.4.637.637,0,0,0,.435.176.6.6,0,0,0,.424-.176l1.2-1.214a.618.618,0,0,0,0-.858l-1.2-1.187a.619.619,0,0,0-.431-.176.6.6,0,0,0-.427.176.615.615,0,0,0,0,.854l.172.176h-4.072a1.8,1.8,0,0,0-1.1-1.1,1.755,1.755,0,0,0-.6-.1,1.808,1.808,0,0,0-1.7,1.206h-.111a.554.554,0,0,1-.145-.016,1.2,1.2,0,0,1-.84-.4,1.217,1.217,0,0,1-.3-.878,1.2,1.2,0,0,1,1.206-1.137.407.407,0,0,1,.069,0h3.729a1.807,1.807,0,0,0,1.118,1.114,1.816,1.816,0,0,0,.576.091,1.789,1.789,0,0,0,1.7-1.205h.309a2.415,2.415,0,0,0,1.679-.775,2.407,2.407,0,0,0,.637-1.729,2.411,2.411,0,0,0-2.419-2.324h-6.213a1.821,1.821,0,0,0-1.107-1.1,1.8,1.8,0,0,0-.6-.1,1.814,1.814,0,0,0-1.706,1.2,1.8,1.8,0,0,0,.077,1.389,1.787,1.787,0,0,0,1.026.92,1.841,1.841,0,0,0,.6.1,1.807,1.807,0,0,0,1.706-1.2h6.266a1.179,1.179,0,0,1,.836.4,1.22,1.22,0,0,1,.305.874,1.213,1.213,0,0,1-1.214,1.146h-.172a1.8,1.8,0,0,0-1.118-1.118,1.711,1.711,0,0,0-.576-.1,1.8,1.8,0,0,0-1.706,1.214Z"
+ transform="translate(-3316.14 15289.201)"
+ />
+ <path
+ class="a"
+ d="M316.806,239.727a.6.6,0,1,0,.6-.6A.6.6,0,0,0,316.806,239.727Zm-5.421-4.207a.6.6,0,1,0,.6.6A.587.587,0,0,0,311.385,235.52Zm2.4,8.438a.607.607,0,1,0-.6-.613A.621.621,0,0,0,313.789,243.958Z"
+ transform="translate(-196.896 -148.921)"
+ />
+ <path
+ class="a"
+ d="M763.392,793.79l3.262-3.262h-3.262Z"
+ transform="translate(-638.661 -690.634)"
+ />
+ </g>
+ </svg>
+ </span>
+ <span class="btn-box" @click="openMathDiaolog">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="18.323"
+ height="18.939"
+ viewBox="0 0 18.323 15.939"
+ >
+ <g transform="translate(-398 -946)">
+ <path
+ class="a"
+ d="M11.985,1.241a.894.894,0,0,1-.242.623.79.79,0,0,1-.6.263.644.644,0,0,1-.547-.229,3.034,3.034,0,0,1-.339-.741A.935.935,0,0,0,10.1.846a.4.4,0,0,0-.291-.1.36.36,0,0,0-.333.18,1.836,1.836,0,0,0-.2.478L8.251,4.753H9.7l-.27.79H8.043l-1.51,4.849a27.9,27.9,0,0,1-1.06,2.93,5.5,5.5,0,0,1-1.316,1.857,3.11,3.11,0,0,1-2.189.755,2.258,2.258,0,0,1-1.455-.409A1.192,1.192,0,0,1,0,14.618a.97.97,0,0,1,.27-.693.894.894,0,0,1,.693-.291.741.741,0,0,1,.693.27,1.815,1.815,0,0,1,.2.693c0,.381.2.575.492.575a.817.817,0,0,0,.693-.478,6.983,6.983,0,0,0,.568-1.469L6,5.543H4.5l.236-.776h1.5l.159-.54a14.548,14.548,0,0,1,.693-2.016A4.544,4.544,0,0,1,8.313.694,2.91,2.91,0,0,1,10.281,0a2.425,2.425,0,0,1,.8.145,1.5,1.5,0,0,1,.693.429.963.963,0,0,1,.236.693Z"
+ transform="translate(398 948)"
+ />
+ <path
+ class="b"
+ d="M18.323,5.668a3.505,3.505,0,0,1-.152,1.046H17.36a3.969,3.969,0,0,0,.166-1.06.5.5,0,0,0-.062-.236.27.27,0,0,0-.249-.132.346.346,0,0,0-.229.076c-.069.055-.222.208-.471.471L14.936,7.489a22.329,22.329,0,0,0-1.552,1.621l-1.815,1.974a2.168,2.168,0,0,1-1.385.859c-.492,0-.741-.333-.741-.991a3.575,3.575,0,0,1,.3-1.385h.914a4.766,4.766,0,0,0-.263,1.1c0,.18.048.263.159.263s.242-.111.464-.333l2.147-2.286c-.006-.033,1.525-1.611,1.524-1.6l1.3-1.385a2.078,2.078,0,0,1,1.385-.8.755.755,0,0,1,.776.388,1.9,1.9,0,0,1,.173.776Z"
+ transform="translate(398 948)"
+ />
+ <path
+ class="a"
+ d="M14.936,7.489l.693,2.251a5.154,5.154,0,0,0,.236.61c.083.159.18.242.3.242a.82.82,0,0,0,.533-.457,4.849,4.849,0,0,0,.339-.817H17.8a4.849,4.849,0,0,1-.693,1.51,2.813,2.813,0,0,1-.873.852,1.766,1.766,0,0,1-.88.27,1.178,1.178,0,0,1-1.018-.464,4.357,4.357,0,0,1-.623-1.309l-.326-1.067a6.4,6.4,0,0,0-.222-.8L12.747,7c-.083-.27-.152-.478-.2-.6a1.136,1.136,0,0,0-.194-.312.4.4,0,0,0-.284-.118c-.326,0-.6.423-.817,1.261h-.769a6.671,6.671,0,0,1,.6-1.5,3.034,3.034,0,0,1,.81-.873,1.663,1.663,0,0,1,.942-.312,1.344,1.344,0,0,1,1.067.471,3.692,3.692,0,0,1,.644,1.268l.139.436C14.672,6.7,14.936,7.489,14.936,7.489Z"
+ transform="translate(398 948)"
+ />
+ </g>
+ </svg>
+ </span>
+ </li>
+ <li class="fl fl-cn">
+ <p>锛�2锛� <i>f</i>锛�<i>x</i>锛�=<i>x</i><sup>2</sup>+<i>x</i>锛�</p>
+ <span
+ class="btn-box"
+ @click="isShowExampleFour = !isShowExampleFour"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20.501"
+ height="20.501"
+ viewBox="0 0 20.501 20.501"
+ >
+ <path
+ class="a"
+ d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+ transform="translate(-3327.144 15329)"
+ />
+ </svg>
+ </span>
+ <span class="btn-box" @click="openMathDiaolog">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="18.323"
+ height="18.939"
+ viewBox="0 0 18.323 15.939"
+ >
+ <g transform="translate(-398 -946)">
+ <path
+ class="a"
+ d="M11.985,1.241a.894.894,0,0,1-.242.623.79.79,0,0,1-.6.263.644.644,0,0,1-.547-.229,3.034,3.034,0,0,1-.339-.741A.935.935,0,0,0,10.1.846a.4.4,0,0,0-.291-.1.36.36,0,0,0-.333.18,1.836,1.836,0,0,0-.2.478L8.251,4.753H9.7l-.27.79H8.043l-1.51,4.849a27.9,27.9,0,0,1-1.06,2.93,5.5,5.5,0,0,1-1.316,1.857,3.11,3.11,0,0,1-2.189.755,2.258,2.258,0,0,1-1.455-.409A1.192,1.192,0,0,1,0,14.618a.97.97,0,0,1,.27-.693.894.894,0,0,1,.693-.291.741.741,0,0,1,.693.27,1.815,1.815,0,0,1,.2.693c0,.381.2.575.492.575a.817.817,0,0,0,.693-.478,6.983,6.983,0,0,0,.568-1.469L6,5.543H4.5l.236-.776h1.5l.159-.54a14.548,14.548,0,0,1,.693-2.016A4.544,4.544,0,0,1,8.313.694,2.91,2.91,0,0,1,10.281,0a2.425,2.425,0,0,1,.8.145,1.5,1.5,0,0,1,.693.429.963.963,0,0,1,.236.693Z"
+ transform="translate(398 948)"
+ />
+ <path
+ class="b"
+ d="M18.323,5.668a3.505,3.505,0,0,1-.152,1.046H17.36a3.969,3.969,0,0,0,.166-1.06.5.5,0,0,0-.062-.236.27.27,0,0,0-.249-.132.346.346,0,0,0-.229.076c-.069.055-.222.208-.471.471L14.936,7.489a22.329,22.329,0,0,0-1.552,1.621l-1.815,1.974a2.168,2.168,0,0,1-1.385.859c-.492,0-.741-.333-.741-.991a3.575,3.575,0,0,1,.3-1.385h.914a4.766,4.766,0,0,0-.263,1.1c0,.18.048.263.159.263s.242-.111.464-.333l2.147-2.286c-.006-.033,1.525-1.611,1.524-1.6l1.3-1.385a2.078,2.078,0,0,1,1.385-.8.755.755,0,0,1,.776.388,1.9,1.9,0,0,1,.173.776Z"
+ transform="translate(398 948)"
+ />
+ <path
+ class="a"
+ d="M14.936,7.489l.693,2.251a5.154,5.154,0,0,0,.236.61c.083.159.18.242.3.242a.82.82,0,0,0,.533-.457,4.849,4.849,0,0,0,.339-.817H17.8a4.849,4.849,0,0,1-.693,1.51,2.813,2.813,0,0,1-.873.852,1.766,1.766,0,0,1-.88.27,1.178,1.178,0,0,1-1.018-.464,4.357,4.357,0,0,1-.623-1.309l-.326-1.067a6.4,6.4,0,0,0-.222-.8L12.747,7c-.083-.27-.152-.478-.2-.6a1.136,1.136,0,0,0-.194-.312.4.4,0,0,0-.284-.118c-.326,0-.6.423-.817,1.261h-.769a6.671,6.671,0,0,1,.6-1.5,3.034,3.034,0,0,1,.81-.873,1.663,1.663,0,0,1,.942-.312,1.344,1.344,0,0,1,1.067.471,3.692,3.692,0,0,1,.644,1.268l.139.436C14.672,6.7,14.936,7.489,14.936,7.489Z"
+ transform="translate(398 948)"
+ />
+ </g>
+ </svg>
+ </span>
+ </li>
+ <li class="fl fl-cn">
+ <p>锛�3锛� <i>f</i>锛�<i>x</i>锛�=5<i>x</i>+2.</p>
+ <span
+ class="btn-box"
+ @click="isShowExampleFive = !isShowExampleFive"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20.501"
+ height="20.501"
+ viewBox="0 0 20.501 20.501"
+ >
+ <path
+ class="a"
+ d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+ transform="translate(-3327.144 15329)"
+ />
+ </svg>
+ </span>
+ <span class="btn-box" @click="openMathDiaolog">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="18.323"
+ height="18.939"
+ viewBox="0 0 18.323 15.939"
+ >
+ <g transform="translate(-398 -946)">
+ <path
+ class="a"
+ d="M11.985,1.241a.894.894,0,0,1-.242.623.79.79,0,0,1-.6.263.644.644,0,0,1-.547-.229,3.034,3.034,0,0,1-.339-.741A.935.935,0,0,0,10.1.846a.4.4,0,0,0-.291-.1.36.36,0,0,0-.333.18,1.836,1.836,0,0,0-.2.478L8.251,4.753H9.7l-.27.79H8.043l-1.51,4.849a27.9,27.9,0,0,1-1.06,2.93,5.5,5.5,0,0,1-1.316,1.857,3.11,3.11,0,0,1-2.189.755,2.258,2.258,0,0,1-1.455-.409A1.192,1.192,0,0,1,0,14.618a.97.97,0,0,1,.27-.693.894.894,0,0,1,.693-.291.741.741,0,0,1,.693.27,1.815,1.815,0,0,1,.2.693c0,.381.2.575.492.575a.817.817,0,0,0,.693-.478,6.983,6.983,0,0,0,.568-1.469L6,5.543H4.5l.236-.776h1.5l.159-.54a14.548,14.548,0,0,1,.693-2.016A4.544,4.544,0,0,1,8.313.694,2.91,2.91,0,0,1,10.281,0a2.425,2.425,0,0,1,.8.145,1.5,1.5,0,0,1,.693.429.963.963,0,0,1,.236.693Z"
+ transform="translate(398 948)"
+ />
+ <path
+ class="b"
+ d="M18.323,5.668a3.505,3.505,0,0,1-.152,1.046H17.36a3.969,3.969,0,0,0,.166-1.06.5.5,0,0,0-.062-.236.27.27,0,0,0-.249-.132.346.346,0,0,0-.229.076c-.069.055-.222.208-.471.471L14.936,7.489a22.329,22.329,0,0,0-1.552,1.621l-1.815,1.974a2.168,2.168,0,0,1-1.385.859c-.492,0-.741-.333-.741-.991a3.575,3.575,0,0,1,.3-1.385h.914a4.766,4.766,0,0,0-.263,1.1c0,.18.048.263.159.263s.242-.111.464-.333l2.147-2.286c-.006-.033,1.525-1.611,1.524-1.6l1.3-1.385a2.078,2.078,0,0,1,1.385-.8.755.755,0,0,1,.776.388,1.9,1.9,0,0,1,.173.776Z"
+ transform="translate(398 948)"
+ />
+ <path
+ class="a"
+ d="M14.936,7.489l.693,2.251a5.154,5.154,0,0,0,.236.61c.083.159.18.242.3.242a.82.82,0,0,0,.533-.457,4.849,4.849,0,0,0,.339-.817H17.8a4.849,4.849,0,0,1-.693,1.51,2.813,2.813,0,0,1-.873.852,1.766,1.766,0,0,1-.88.27,1.178,1.178,0,0,1-1.018-.464,4.357,4.357,0,0,1-.623-1.309l-.326-1.067a6.4,6.4,0,0,0-.222-.8L12.747,7c-.083-.27-.152-.478-.2-.6a1.136,1.136,0,0,0-.194-.312.4.4,0,0,0-.284-.118c-.326,0-.6.423-.817,1.261h-.769a6.671,6.671,0,0,1,.6-1.5,3.034,3.034,0,0,1,.81-.873,1.663,1.663,0,0,1,.942-.312,1.344,1.344,0,0,1,1.067.471,3.692,3.692,0,0,1,.644,1.268l.139.436C14.672,6.7,14.936,7.489,14.936,7.489Z"
+ transform="translate(398 948)"
+ />
+ </g>
+ </svg>
+ </span>
+ </li>
+ </ul>
+ <div v-if="isShowExampleThree">
+ <p>
+ <span class="zt-ls"><b>瑙�</b></span
+ >锛�1锛� 鍑芥暟<i>f</i>锛�<i>x</i>锛�=3<i>x</i
+ ><sup>2</sup
+ >+1鐨勫畾涔夊煙鏄�<b>R</b>锛屽浠绘剰<i>x</i>鈭�<b>R</b>锛岄兘鏈�-<i>x</i>鈭�<b>R</b>锛�
+ </p>
+ <p>鑰�</p>
+ <p class="center">
+ <i>f</i>锛�-<i>x</i>锛�=3锛�-<i>x</i>锛�<sup>2</sup>+1=3<i>x</i
+ ><sup>2</sup>+1=<i>f</i>锛�<i>x</i>锛夛紝
+ </p>
+ <p>
+ 鎵�浠ワ紝鍑芥暟<i>f</i>锛�<i>x</i>锛�=3<i>x</i><sup>2</sup>+1鏄伓鍑芥暟.
+ </p>
+ </div>
+ <div v-if="isShowExampleFour">
+ <p>
+ 锛�2锛� 鍑芥暟<i>f</i>锛�<i>x</i>锛�=<i>x</i
+ ><sup>2</sup
+ >+<i>x</i>鐨勫畾涔夊煙鏄�<b>R</b>锛屽浠绘剰<i>x</i>鈭�<b>R</b>锛岄兘鏈�-<i>x</i>鈭�<b>R</b>锛岃��
+ </p>
+ <p class="center">
+ <i>f</i>锛�-<i>x</i>锛�=锛�-<i>x</i>锛�<sup>2</sup>+锛�-<i>x</i>锛�=<i
+ >x</i
+ ><sup>2</sup>-<i>x</i>鈮�<i>f</i>锛�<i>x</i>锛夛紝
+ </p>
+ <p>
+ 鎵�浠ワ紝鍑芥暟<i>f</i>锛�<i>x</i>锛�=<i>x</i
+ ><sup>2</sup>+<i>x</i>涓嶆槸鍋跺嚱鏁�.
+ </p>
+ </div>
+ <div v-if="isShowExampleFive">
+ <p>
+ 锛�3锛�
+ 鍑芥暟<i>f</i>锛�<i>x</i>锛�=5<i>x</i>+2鐨勫畾涔夊煙鏄�<b>R</b>锛屽浠绘剰<i>x</i>鈭�<b>R</b>锛岄兘鏈�-<i>x</i>鈭�<i>R</i>锛岃��
+ </p>
+ <p class="center">
+ <i>f</i
+ >锛�-<i>x</i>锛�=5锛�-<i>x</i>锛�+2=-5<i>x</i>+2鈮�<i>f</i>锛�<i>x</i>锛夛紝
+ </p>
+ <p>鎵�浠ワ紝鍑芥暟<i>f</i>锛�<i>x</i>锛�=5<i>x</i>+2涓嶆槸鍋跺嚱鏁�.</p>
+ </div>
+ <div class="bk-hzjl">
+ <div class="bj1-hzjl">
+ <p class="left">
+ <img
+ class="img-gn2"
+ alt=""
+ src="../../assets/images/hzjl.jpg"
+ />
+ </p>
+ </div>
+ <p class="block">
+ 濡傛灉<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>锛変粛鏄伓鍑芥暟鍚楋紵
+ </p>
+ </div>
+ <textarea
+ cols="30"
+ rows="4"
+ v-model="chapterData.txtOne"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ class="w100 ta-br textarea-text"
+ @input="handleChapterData"
+ ></textarea>
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="9">
+ <div v-if="showPageList.indexOf(9) > -1">
+ <ul class="page-header-odd fl al-end">
+ <li>092</li>
+ <li>鏁板.鍩虹妯″潡</li>
+ <li></li>
+ </ul>
+ <div class="padding-96">
+ <p class="left">
+ <img class="img-gn" alt="" src="../../assets/images/stlx.jpg" />
+ </p>
+ <div class="bj">
+ <examinations
+ :cardList="questionData"
+ v-if="questionData"
+ :isReal="false"
+ ></examinations>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 鍑芥暟鎺т欢寮圭獥 -->
+ <el-dialog
+ title=""
+ :visible.sync="dialogVisible"
+ width="60%"
+ :append-to-body="true"
+ >
+ <iframe
+ src="https://www.geogebra.org/calculator"
+ frameborder="0"
+ class="iframe-box"
+ ></iframe>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="dialogVisible = false"
+ >纭� 瀹�</el-button
+ >
+ </span>
+ </el-dialog>
+ <!-- 瑙ｉ鎬濊矾寮圭獥 -->
+ <el-dialog
+ title="瑙ｉ鎬濊矾"
+ :visible.sync="thinkingDialog"
+ width="40%"
+ :append-to-body="true"
+ >
+ <ul>
+ <li v-for="(item, index) in thinkOne" :key="index">
+ <div v-if="item.isShow">
+ <p class="txt-p">{{ item.txt }}</p>
+ <div style="text-align: center">
+ <svg
+ @click="showNext(index + 1)"
+ v-if="index != thinkOne.length - 1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ t="1710234570135"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ p-id="5067"
+ width="15"
+ height="15"
+ >
+ <path
+ d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
+ fill="#1296db"
+ p-id="5068"
+ />
+ <path
+ d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
+ fill="#1296db"
+ p-id="5069"
+ />
+ </svg>
+ </div>
+ </div>
+ </li>
+ </ul>
+
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="thinkingDialog = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="thinkingDialog = false"
+ >纭� 瀹�</el-button
+ >
+ </span>
+ </el-dialog>
+ <!-- 瑙ｉ姝ラ寮圭獥 -->
+ <el-dialog
+ title="瑙ｉ姝ラ"
+ :visible.sync="stepDialog"
+ width="40%"
+ :append-to-body="true"
+ >
+ <ul>
+ <li v-for="(item, index) in stepOne" :key="index">
+ <div v-if="item.isShow">
+ <p class="txt-p">{{ item.txt }}</p>
+ <div style="text-align: center">
+ <svg
+ @click="showNextChange(index + 1)"
+ v-if="index != thinkOne.length - 1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ t="1710234570135"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ p-id="5067"
+ width="15"
+ height="15"
+ >
+ <path
+ d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
+ fill="#1296db"
+ p-id="5068"
+ />
+ <path
+ d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
+ fill="#1296db"
+ p-id="5069"
+ />
+ </svg>
+ </div>
+ </div>
+ </li>
+ </ul>
+
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="stepDialog = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="stepDialog = false">纭� 瀹�</el-button>
+ </span>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import examinations from "@/components/examinations/index.vue";
+import { getResourcePath } from "@/assets/methods/resources";
+import axios from "axios";
+export default {
+ name: "chapter-one",
+ components: { examinations },
+ props: {
+ showPageList: {
+ type: Array,
+ default: [],
+ },
+ },
+ mounted() {
+ const data = localStorage.getItem("math-chapterData");
+ if (data) {
+ this.chapterData = JSON.parse(data);
+ }
+ this.getPath();
+ this.getQuestionData();
+ },
+ data() {
+ return {
+ collectImg: require("../../assets/images/icon/heart.png"),
+ collectCheck: require("../../assets/images/icon/heart-check.png"),
+ isShowExampleOne: false,
+ isShowExampleTwo: false,
+ isShowExampleThree: false,
+ isShowExampleFour: false,
+ isShowExampleFive: false,
+ dialogVisible: false,
+ thinkingDialog: false,
+ stepDialog: false,
+ videoPath: "",
+ questionData: [],
+ chapterData: {
+ isCollectImg: false,
+ isCollectVideo: false,
+ txtOne: "",
+ },
+ thinkOne: [
+ {
+ txt: "1:涓�涓嚱鏁版槸涓� 鏄伓鍑芥暟,鍙互鐢� 鍑芥暟鐨勫浘鍍忔槸鍚﹀叧 浜巠 杞� 瀵� 绉� 鏉� 鍒� 鏂�;褰撳嚱鏁扮敤瑙ｆ瀽 娉曡〃绀烘椂,鍙互鐢� 鍋� 鍑� 鏁� 鐨� 瀹� 涔� 鏉� 鍒ゆ柇銆� 鍋跺嚱鏁�:涓�鑸湴锛岃鍑芥暟f(x)鐨勫畾涔夊煙涓篋锛屽鏋滃浜庝换鎰弜ED锛岄兘鏈塜ED锛屼笖f(-x)=f(x)锛岄偅涔堝嚱鏁癴(x)灏卞彨浣滃伓鍑芥暟",
+ isShow: true,
+ },
+ {
+ txt: "2:璁＄畻f(-x)",
+ isShow: false,
+ },
+ {
+ txt: "3:鍒ゆ柇f(-x)鏄惁绛変簬f(x)",
+ isShow: false,
+ },
+ ],
+ stepOne: [
+ {
+ txt: "1:(1)鍑芥暟f(x)=3x2+1鐨勫畾涔夊煙鏄疪锛屽浠绘剰XER锛岄兘鏈�-XER",
+ isShow: true,
+ },
+ {
+ txt: "2:f(-x)=3(-x)2+1=3x2+1=f(x)",
+ isShow: false,
+ },
+ ],
+ };
+ },
+ methods: {
+ handleChapterData() {
+ localStorage.setItem(
+ "math-chapterData",
+ JSON.stringify(this.chapterData)
+ );
+ },
+ async getPath() {
+ this.videoPath = await getResourcePath(
+ "a28cd862d61b5df2201406b76e9f01b0"
+ );
+ },
+ getQuestionData() {
+ axios
+ .get(this.config.activeBook.resourceUrl + "/question.json")
+ .then((res) => {
+ let oldAnswer = localStorage.getItem(
+ this.config.activeBook.name + "oldAnswerData"
+ );
+ if (oldAnswer) {
+ oldAnswer = JSON.parse(oldAnswer);
+ console.log("鏃ф暟鎹�", oldAnswer);
+ if (oldAnswer[9]) {
+ for (let index = 0; index < res.data.data.length; index++) {
+ const item = res.data.data[index];
+ if (item.infoList.length) {
+ for (
+ let cindex = 0;
+ cindex < item.infoList.length;
+ cindex++
+ ) {
+ const citem = item.infoList[cindex];
+ const question = oldAnswer[9].find(
+ (ditem) => ditem.id == citem.id
+ );
+ if (question) {
+ citem.userAnswer = question.userAnswer;
+ }
+ }
+ }
+ }
+ }
+ }
+ this.questionData = res.data.data;
+ });
+ },
+ handleCollect(type) {
+ if (type == "img") {
+ this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
+ } else if (type == "video") {
+ this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
+ }
+ this.handleChapterData();
+ },
+ openMathDiaolog() {
+ this.dialogVisible = true;
+ },
+ openThinkingDialog() {
+ this.thinkingDialog = true;
+ },
+ showNext(num) {
+ const number = this.thinkOne.findIndex((item, index) => index == num);
+ console.log(number);
+ this.thinkOne[number].isShow = true;
+ },
+ showNextChange(num) {
+ const number = this.stepOne.findIndex((item, index) => index == num);
+ this.stepOne[number].isShow = true;
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.iframe-box {
+ width: 100%;
+ min-height: 800px;
+ border: 1px solid #8281ed;
+}
+li {
+ list-style: none;
+}
+.txt-p {
+ margin-top: 0;
+ border-bottom: 1px dashed #000;
+ padding: 10px 0;
+}
+</style>
diff --git a/src/books/math/view/components/header.vue b/src/books/math/view/components/header.vue
new file mode 100644
index 0000000..91d39fb
--- /dev/null
+++ b/src/books/math/view/components/header.vue
@@ -0,0 +1,140 @@
+<template>
+ <div class="chapter" num="1">
+ <!-- 灏侀潰 -->
+ <div class="page-box cover mt-20" page="1" style="min-height: auto">
+ <div v-if="showPageList.indexOf(1) > -1">
+ <img src="../../assets/images/Cover.jpg" alt="" class="w100" />
+ </div>
+ </div>
+ <div class="page-box" page="2" style="min-height: auto">
+ <div v-if="showPageList.indexOf(2) > -1">
+ <img src="../../assets/images/Covers.png" alt="" class="w100" />
+ </div>
+ </div>
+ <!-- 鐗堟潈椤� -->
+ <div class="page-box text-center" style="padding: 136px 0" page="3">
+ <div v-if="showPageList.indexOf(3) > -1">
+ <div class="box">
+ <hr class="line" />
+ <p class="tl fz-14"><b>鍥句功鍦ㄧ増缂栫洰锛圕IP锛夋暟鎹�</b></p>
+ <p class="tl fz-14 m0">
+ 鏁板锛氬熀纭�妯″潡.涓婂唽/鏇逛竴楦ｏ紝浠樺媷锛岃懀杩炴槬涓荤紪.鈥�4鐗�.鈥斿寳浜細鍖椾含甯堣寖澶у鍑虹増绀撅紝2021.8锛�2023.6閲嶅嵃锛�
+ </p>
+ <p class="tl" style="margin-bottom: 10px">ISBN 978-7-303-27089-7</p>
+ <p class="tl fz-14 m0" style="margin-bottom: 10px">
+ 鈪�.鈶犳暟鈥� 鈪�.鈶犳浌鈥� 鈶′粯鈥� 鈶㈣懀鈥� 鈪�.鈶犳暟瀛﹁-涓瓑涓撲笟瀛︽牎-鏁欐潗 鈪�.鈶燝634.603
+ </p>
+ <p class="tl fz-14">涓浗鐗堟湰鍥句功棣咰IP鏁版嵁鏍稿瓧锛�2021锛夌127012鍙�</p>
+ <hr class="line" style="height: 1px" />
+ <p class="tl fz-14 m0" style="margin-top: 136px">
+ <b>鏁欐潗鎰忚鍙嶉鑱旂郴鐢佃瘽銆�010-58807762 58806368</b>
+ </p>
+ <p class="tl fz-14 m0">
+ <b>鏁欐潗鎰忚鍙嶉鐢靛瓙淇＄銆�yjp@bnupg.com lz@bnupg.com</b>
+ </p>
+ <p class="tl fz-14 m0">钀ラ攢涓績鐢佃瘽銆�010-58806880 58801876</p>
+ <hr class="line" style="height: 1px" />
+ <p class="tl fz-14 m0">鍑虹増鍙戣锛氬寳浜笀鑼冨ぇ瀛﹀嚭鐗堢ぞ www.bnupg.com</p>
+ <p class="tl fz-14 m0">銆�銆�銆�銆�銆�鍖椾含甯傝タ鍩庡尯鏂拌鍙ｅ澶ц12-3鍙�</p>
+ <p class="tl fz-14 m0">銆�銆�銆�銆�銆�閭斂缂栫爜锛�100088</p>
+ <p class="tl fz-14 m0">鍗般��銆�鍒凤細澶╂触鏃潪鍗板埛鏈夐檺鍏徃</p>
+ <p class="tl fz-14 m0">缁忋��銆�閿�锛氬叏鍥芥柊鍗庝功搴�</p>
+ <p class="tl fz-14 m0">寮�銆�銆�鏈細889mm脳1194mm 1/16</p>
+ <p class="tl fz-14 m0">鍗般��銆�寮狅細14</p>
+ <p class="tl fz-14 m0">瀛椼��銆�鏁帮細214鍗冨瓧</p>
+ <p class="tl fz-14 m0">鐗堛��銆�娆★細2021骞�8鏈堢4鐗�</p>
+ <p class="tl fz-14 m0">鍗般��銆�娆★細2023骞�6鏈堢39娆″嵃鍒�</p>
+ <p class="tl fz-14 m0">瀹氥��銆�浠凤細27.00鍏�</p>
+ <hr class="line" />
+ <ul class="fl fl-between m0" style="padding: 0">
+ <li>
+ <p class="tl fz-14 m0">绛栧垝缂栬緫锛氭灄銆�瀛愩��浣欏骞�</p>
+ <p class="tl fz-14 m0">缇庢湳缂栬緫锛氱劍銆�涓�</p>
+ <p class="tl fz-14 m0">璐ｄ换鏍″锛氶檲銆�姘�</p>
+ </li>
+ <li>
+ <p class="tl fz-14 m0">璐ｄ换缂栬緫锛氶┈鍔涙晱</p>
+ <p class="tl fz-14 m0">瑁呭抚璁捐锛氱劍銆�涓�</p>
+ <p class="tl fz-14 m0">璐ｄ换鍗板埗锛氶┈銆�娲�</p>
+ </li>
+ </ul>
+ <p class="center m0" style="margin-top: 20px; font-size: 20px">
+ <b>鐗堟潈鎵�鏈� 渚垫潈蹇呯┒</b>
+ </p>
+ <p class="center m0"><b>鍙嶇洍鐗堛�� 渚垫潈涓炬姤鐢佃瘽锛�</b>010-58800697</p>
+ <p class="block2 m0">鍖椾含璇昏�呮湇鍔￠儴鐢佃瘽锛�010-58808104</p>
+ <p class="block2 m0">澶栧煚閭喘鐢佃瘽锛�010-58808083</p>
+ <p class="block2 m0">
+ 鏈功濡傛湁鍗拌璐ㄩ噺闂锛� 璇蜂笌鍗板埗绠＄悊閮ㄨ仈绯昏皟鎹€��
+ </p>
+ <p class="block2 m0">鍗板埗绠＄悊閮ㄧ數璇濓細010-58805079</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+</template>
+
+<script>
+export default {
+ name: "page-header",
+ props: {
+ showPageList: {
+ type: Array,
+ // default: [],
+ },
+ data() {
+ return {};
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+.cover img {
+ width: 100%;
+ object-fit: contain;
+}
+.box {
+ max-width: 400px;
+ margin: 0 auto;
+}
+.line {
+ background-color: #000;
+ height: 2px;
+}
+.tixing {
+ position: relative;
+ margin-bottom: 110px;
+}
+.tixing-left {
+ position: absolute;
+ top: 0px;
+ width: 200px;
+ border-top: 50px solid #1eb9ee;
+ border-right: 20px solid transparent;
+ border-bottom: 30px solid transparent;
+ border-left: 0px solid transparent;
+}
+.tixing-right {
+ max-width: 200px;
+ border-top: 40px solid transparent;
+ border-right: 0px solid transparent;
+ border-bottom: 40px solid #8dd7f7;
+ border-left: 40px solid transparent;
+}
+.tixing-box {
+ width: 100%;
+ height: 50px;
+ background-color: #8dd7f7;
+}
+.tixing-text {
+ position: absolute;
+ top: -36px;
+ left: 44px;
+}
+.preface-text {
+ font-size: 24px;
+ color: #fff;
+}
+</style>
diff --git a/src/books/math/view/components/index.vue b/src/books/math/view/components/index.vue
new file mode 100644
index 0000000..b135e8a
--- /dev/null
+++ b/src/books/math/view/components/index.vue
@@ -0,0 +1,841 @@
+<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>
+ </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 chapterFive from './chapter005.vue'
+// import chapterSix from './chapter006.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 {
+ name:"pageContent",
+ data() {
+ return {
+ catalogLength: 2, // 鎬荤珷鑺傛暟
+ 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,
+ // chapterFive,
+ // chapterSix,
+ },
+};
+</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>
diff --git a/src/books/math/view/index.vue b/src/books/math/view/index.vue
new file mode 100644
index 0000000..a507376
--- /dev/null
+++ b/src/books/math/view/index.vue
@@ -0,0 +1,76 @@
+<template>
+ <div class="math-book" @mouseup="handleMouseUp">
+ <pageContent></pageContent>
+ </div>
+</template>
+
+<script>
+import pageContent from "./components/index.vue";
+export default {
+ name:"ansAndDance",
+ 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
diff --git a/src/books/sportsAndHealth/css/default.less b/src/books/sportsAndHealth/css/default.less
index 94cd6a1..5e889a2 100644
--- a/src/books/sportsAndHealth/css/default.less
+++ b/src/books/sportsAndHealth/css/default.less
@@ -18,7 +18,6 @@
font-size: 18px;
.chapter {
-
textarea {
width: 100%;
font-family: 'FZLTXIHJW';
@@ -1732,7 +1731,42 @@
}
}
+.pdfModal {
+ width: 100%;
+ height: 90vh;
+}
+@media screen and (max-width:800px) {
+ .pdfModal {
+ width: 100%;
+ height: 60vh;
+ }
+
+ .custom-dialog {
+ .el-dialog {
+ width: 90vw !important;
+ }
+ }
+}
+
+
+.custom-dialog {
+ .el-dialog__body {
+ padding: 0;
+ }
+
+ .el-dialog__header {
+ background-color: rgba(0, 0, 0, 0.8);
+
+ .el-dialog__title,
+ .el-dialog__headerbtn .el-dialog__close {
+ color: #fff;
+ font-weight: 900;
+ font-size: 16px;
+ font-family: 'FZLTXIHJW';
+ }
+ }
+}
.tablePublic input[type="checkbox"]:checked+.checkmark {
background: #000 !important;
diff --git a/src/books/sportsAndHealth/view/components/index.vue b/src/books/sportsAndHealth/view/components/index.vue
index 8b6a584..2348ec2 100644
--- a/src/books/sportsAndHealth/view/components/index.vue
+++ b/src/books/sportsAndHealth/view/components/index.vue
@@ -264,11 +264,8 @@
},
methods: {
changeDomViewer() {
- setTimeout(() => {
- this.initViewer();
- }, 500);
+ this.initViewer();
},
-
// 婊氬姩鐩戝惉
scrollFun(event) {
// 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
@@ -605,19 +602,19 @@
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
- );
+ 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
- );
+ obj[key] = await getQuestionList(
+ [],
+ testData[catalog][page][key],
+ this.config.activeBook
+ );
}
this.questionDataMap[page] = obj;
}
@@ -638,7 +635,10 @@
// 楂樹寒琛�
setTimeout(() => {
// 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
- const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT);
+ const pageTextList = document.createTreeWalker(
+ target,
+ NodeFilter.SHOW_TEXT
+ );
// 鍖归厤鍏抽敭瀛�
const allPageTextNodes = [];
let currentNode = pageTextList.nextNode();
@@ -814,7 +814,7 @@
propsData: {
showPageList: [],
questionData: {},
- isSearch: true
+ isSearch: true,
},
});
pageExample.$mount(
@@ -846,7 +846,7 @@
propsData: {
showPageList: [pageNum],
questionData: {},
- isSearch: true
+ isSearch: true,
},
});
pageExample.$mount(
diff --git a/src/books/sportsAndHealth/view/components/testDynaicTable.vue b/src/books/sportsAndHealth/view/components/testDynaicTable.vue
index e9a1656..ec82452 100644
--- a/src/books/sportsAndHealth/view/components/testDynaicTable.vue
+++ b/src/books/sportsAndHealth/view/components/testDynaicTable.vue
@@ -114,22 +114,11 @@
</div>
</div>
</div>
- <!-- <div class="page-box" page="226">
- <div v-if="showPageList.indexOf(226)>-1">
- <div class="bodystyle">
- <pdfView :md5="md5"></pdfView>
- </div>
- </div>
- </div> -->
</div>
</template>
<script>
-// import pdfView from '@/components/pdfview'
export default {
name: "testD",
- // components:{
- // pdfView
- // },
props: {
showPageList: {
type: Array,
@@ -138,10 +127,12 @@
type: Object,
},
},
- data(){
+ methods: {},
+ data() {
return {
- md5:'54741d14a21eb47b2ed06a2231271cd5'
- }
- }
+ md5: "54741d14a21eb47b2ed06a2231271cd5",
+ dialogVisible: true,
+ };
+ },
};
</script>
diff --git a/src/books/sportsAndHealth/view/components/testPp.vue b/src/books/sportsAndHealth/view/components/testPp.vue
index 4a203fa..334f9ad 100644
--- a/src/books/sportsAndHealth/view/components/testPp.vue
+++ b/src/books/sportsAndHealth/view/components/testPp.vue
@@ -1456,12 +1456,31 @@
</div>
</div>
</div>
+ <div>
+ <el-dialog
+ size="small"
+ :title="pdfTitle"
+ :visible.sync="dialogVisible"
+ width="60vw"
+ :before-close="handleClose"
+ append-to-body
+ class="custom-dialog"
+ >
+ <div class="pdfModal" v-if="dialogVisible">
+ <preView :isClear="dialogVisible" :md5="p_md5"></preView>
+ </div>
+ </el-dialog>
+ </div>
</div>
</template>
<script>
+import preView from "@/components/pdfview";
import { getResourcePath } from "@/assets/methods/resources";
export default {
name: "testPp",
+ components: {
+ preView,
+ },
props: {
showPageList: {
type: Array,
@@ -1476,27 +1495,75 @@
},
data() {
return {
+ pdfTitle: "",
+ p_md5: "",
+ dialogVisible: false,
isShowXyx02: false,
pingpang: require("../../image/pdf.png"),
chapter002: {
isShowXyx01: true,
textBybItem1: "",
pdfMd5: {
- 1: "54741d14a21eb47b2ed06a2231271cd5",
- 2: "1b7ecc924bfab900ec10f0ed4bb2466b",
- 3: "f1597b91fb3110eb6fd59c84f5ddbfd1",
- 4: "515f3dd2554dbdea779c59800a8da6b2",
- 5: "b32afdfb8555ad8db1aa1fd95750369f",
- 6: "57481cd4e7e7ce535eb6585d375e317e",
- 7: "878a8bbb91f093107cae210ade9a387e",
- 8: "e242f94d2bdc54de7b5340d452256515",
- 9: "1ce6dc7953b1783de746e0de672ffbe4",
- 10: "030b943ad33a4c0f31524f0f1ec9c14f",
- 11: "2a458d11dc021318e2d3aa4f92cf3e36",
- 12: "81957321d71fd270f67fe74f7ef2b9e8",
- 13: "5f675eff789c96ce8a6cf80679c8a992",
- 14: "02236dec8a8e87176b1df2435b82fb87",
- 15: "fa38047ab9eed59f3296940778cc6cfd",
+ 1: {
+ md5: "54741d14a21eb47b2ed06a2231271cd5",
+ name: "1 涔掍箵鐞冪殑甯哥敤鏈锛堜竴锛�",
+ },
+ 2: {
+ md5: "1b7ecc924bfab900ec10f0ed4bb2466b",
+ name: "2 涔掍箵鐞冪殑甯哥敤鏈锛堜簩锛�",
+ },
+ 3: {
+ md5: "f1597b91fb3110eb6fd59c84f5ddbfd1",
+ name: "3 妯″潡涓�锛堜竴锛夊崟椤规妧鏈缁� 骞冲嚮鍙戠悆",
+ },
+ 4: {
+ md5: "515f3dd2554dbdea779c59800a8da6b2",
+ name: "4 妯″潡涓�锛堜簩锛夊熀鏈垬鏈缁� 鎺ュ钩鍑荤悆鎶㈡敾",
+ },
+ 5: {
+ md5: "b32afdfb8555ad8db1aa1fd95750369f",
+ name: "5 妯″潡涓�锛堜笁锛夌粍鍚堟妧鑳界粌涔� 鎺ㄦ尅+渚ц韩鏀�",
+ },
+ 6: {
+ md5: "57481cd4e7e7ce535eb6585d375e317e",
+ name: "6 妯″潡浜岋紙涓�锛夊崟椤规妧鏈缁� 姝ｆ墜蹇甫",
+ },
+ 7: {
+ md5: "878a8bbb91f093107cae210ade9a387e",
+ name: "7 妯″潡浜岋紙涓�锛夊崟椤规妧鏈缁� 杞笌涓嶈浆鐞冨彂鐞�",
+ },
+ 8: {
+ md5: "e242f94d2bdc54de7b5340d452256515",
+ name: "8 妯″潡浜岋紙浜岋級鍩烘湰鎴樻湳瀛︾粌 鍙戣浆涓庝笉杞悆鎶㈡敾",
+ },
+ 9: {
+ md5: "1ce6dc7953b1783de746e0de672ffbe4",
+ name: "9 妯″潡浜岋紙涓夛級缁勫悎鎶�鑳界粌涔� 宸︽帹+鍙虫敾",
+ },
+ 10: {
+ md5: "030b943ad33a4c0f31524f0f1ec9c14f",
+ name: "10 妯″潡涓夛紙涓�锛夊崟椤规妧鏈缁� 寮у湀鐞�",
+ },
+ 11: {
+ md5: "2a458d11dc021318e2d3aa4f92cf3e36",
+ name: "11 妯″潡涓夛紙涓�锛夊崟椤规妧鏈缁� 蹇悡",
+ },
+ 12: {
+ md5: "81957321d71fd270f67fe74f7ef2b9e8",
+ name: "12 妯″潡涓夛紙涓�锛夊崟椤规妧鏈缁� 鍙嶆墜蹇嫧",
+ },
+ 13: {
+ md5: "5f675eff789c96ce8a6cf80679c8a992",
+ name: "13 妯″潡涓夛紙浜岋級鍩烘湰鎴樻湳瀛︾粌 鎼撴敾鎴樻湳",
+ },
+ 14: {
+ md5: "02236dec8a8e87176b1df2435b82fb87",
+ name: "14 妯″潡涓夛紙涓夛級缁勫悎鎶�鑳界粌涔� 鎺ㄦ尅+渚ц韩鏀�",
+ },
+ 15: {
+ md5: "fa38047ab9eed59f3296940778cc6cfd",
+ name: "15 鎷撳睍璧勬枡锛氫箳涔撶悆瑁佸垽娉�",
+ },
},
videoMd5: {
v1: { md5: "bfbb956d884e0a11ba6368846176657d", name: "1鏍稿績鎶�鏈�" },
@@ -1617,9 +1684,14 @@
}
},
methods: {
- async toUrl(val) {
+ handleClose(done) {
+ done();
+ },
+ toUrl(val) {
if (val) {
- window.open(await getResourcePath(this.chapter002.pdfMd5[val]));
+ this.dialogVisible = true;
+ this.p_md5 = this.chapter002.pdfMd5[val].md5;
+ this.pdfTitle = this.chapter002.pdfMd5[val].name;
}
},
async getVideo(md5, val) {
diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue
index 4998f9c..5efb3b0 100644
--- a/src/components/examinations/index.vue
+++ b/src/components/examinations/index.vue
@@ -68,7 +68,7 @@
v-for="(itemText, indexText) in value.stem"
:key="indexText"
>
- <span v-if="typeof itemText == 'string'">{{ itemText }}</span>
+ <span v-if="typeof itemText == 'string'" v-html="itemText" ></span>
<!-- -->
<el-input
v-else
@@ -124,7 +124,9 @@
:src="getPublicImage(content.img, 115)"
v-show="content.img"
:preview-src-list="[getPublicImage(content.img)]"
+ v-if="isReal"
></el-image>
+ <img :src="content.img" alt="" v-if="!isReal" class="radio-img">
</p>
<p
class="optionContent"
@@ -402,17 +404,17 @@
</ul>
</div>
<div class="bottom-btn" v-if="!loading">
- <el-button class="btn-box" @click="saveAnswer">淇濆瓨</el-button>
+ <el-button class="examinations-btn-box" @click="saveAnswer">淇濆瓨</el-button>
<el-button
@click="handleQuestion"
- class="btn-box"
+ class="examinations-btn-box"
:style="{ borderColor: primaryColor }"
>鎻愪氦</el-button
>
- <el-button @click="redo" class="btn-box">閲嶅仛</el-button>
+ <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button>
<el-button
@click="openAnswers"
- class="btn-box"
+ class="examinations-btn-box"
:style="{ borderColor: primaryColor }"
>鏌ョ湅绛旀</el-button
>
@@ -437,13 +439,18 @@
page: {
type: Number,
},
+ isReal:{
+ type:Boolean,
+ default:true
+ }
},
data() {
return {
type: "option",
loading: false,
cardData:[],
- loading:true
+ loading:true,
+
};
},
watch:{
@@ -638,7 +645,7 @@
list-style: none;
}
}
-.btn-box {
+.examinations-btn-box {
height: 30px;
width: 78px;
padding: 4px 10px;
@@ -1135,4 +1142,8 @@
margin-top: 10px;
}
}
+.radio-img {
+ width: 200px;
+ object-fit: contain;
+}
</style>
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index fa18ac8..4e64d88 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,16 +1,31 @@
<template>
- <div class="imgbox">
- <img
- ref="image"
- :onLoad="initFun"
- :onDragStart="dragStart"
- :onWheel="handleScroll"
- :src="currentPageSrc"
- alt=""
- />
+ <div class="preview" v-if="this.preViewMd5">
+ <div id="imageParent" class="imageBox"></div>
+ <div class="bottom_tool">
+ <svg
+ @click="downloadPdf"
+ t="1718251204993"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="4418"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="25"
+ height="25"
+ >
+ <path
+ d="M557 564.974l153.188-181.04c16.054-18.972 44.448-21.34 63.42-5.286 18.972 16.054 21.338 44.448 5.284 63.42L550.56 711.92a44.982 44.982 0 0 1-8.95 10.254 44.872 44.872 0 0 1-15.082 8.432A44.944 44.944 0 0 1 512 733c-16.264 0-30.512-8.628-38.42-21.556L245.65 442.068c-16.052-18.972-13.686-47.366 5.286-63.42 18.972-16.052 47.366-13.686 63.42 5.286l152.646 180.4V157c0-24.852 20.148-45 45-45s45 20.148 45 45v407.974zM823 630c0-24.852 20.148-45 45-45s45 20.148 45 45v238c0 24.87-20.176 45.026-45.046 45l-710-0.726c-24.834-0.026-44.954-20.166-44.954-45V630c0-24.852 20.148-45 45-45s45 20.148 45 45v192.32l620 0.634V630z"
+ p-id="4419"
+ ></path>
+ </svg>
+ </div>
</div>
</template>
<script>
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+import { getResourcePath } from "@/assets/methods/resources";
export default {
name: "pdf_view",
props: {
@@ -20,126 +35,163 @@
title: {
type: String,
},
+ isClear: {
+ type: Boolean,
+ default: false,
+ },
},
data() {
return {
currentPageSrc: "",
- fileLoading: false,
- visible: true,
- close: null,
currentPage: 1,
totalPage: 1,
- rcViewerOptions: {
- // inline: true
- },
- zoom: 1,
- catalogVisible: false,
- tocData: [],
- generateList: [],
- expandedKeys: [],
- searchValue: "",
- autoExpandParent: true,
- drawerSize: "default",
+ viewerCon: null,
+ preViewMd5: "",
};
},
watch: {
+ isClear: {
+ immediate: true,
+ handler(val) {
+ if (val == true) this.preViewMd5 = "";
+ },
+ },
md5: {
- handler(newVal, oldVal) {
- if (newVal) {
- this.getFileInfo();
+ immediate: true,
+ handler(val) {
+ if (val) {
+ this.preViewMd5 = val;
+ this.currentPage = 1;
+ this.currentPageSrc = "";
+ this.totalPage = 1;
+ this.viewerCon?.destroy();
}
},
},
},
- created() {
+ mounted() {
+ this.scrollBottom();
+ this.clearDom();
this.getFileInfo();
},
methods: {
- initFun() {
- // 鍒濆鍖栨嫋鎷�
- let image = this.refs.image;
- let imageBox = this.refs.imageBox;
- let initLeft = imageBox.offsetWidth / 2 - image.offsetWidth / 2;
- image.style.left = initLeft + "px";
- image.style.top = 0 + "px";
- let canMove = false;
- let offsetX, offsetY, oldLeft, oldTop;
- image.onmousedown = function (e) {
- canMove = true;
- offsetX = e.x;
- offsetY = e.y;
- oldLeft = parseFloat(image.style.left.split("px")[0]);
- oldTop = parseFloat(image.style.top.split("px")[0]);
- };
- imageBox.onmousemove = function (e) {
- if (canMove == true) {
- let left = e.clientX - offsetX;
- let top = e.clientY - offsetY;
- image.style.left = oldLeft + left + "px";
- image.style.top = oldTop + top + "px";
- }
- };
- image.onmouseup = function () {
- canMove = false;
- };
- this.fileLoading = false;
+ async downloadPdf() {
+ window.open(await getResourcePath(this.preViewMd5));
},
- dragStart(e) {
- if (e && e.preventDefault) {
- e.preventDefault();
- } else {
- window.event.returnValue = false;
- }
+ domViewer() {
+ let ele = (this.container ? this.container : document).getElementById(
+ "imageParent"
+ );
+ this.viewerCon = new Viewer(ele, {
+ inline: false,
+ container: this.container
+ ? this.container.querySelector("#app")
+ : "body",
+ navbar: true, // 鏄剧ず瀵艰埅鏍�
+ toolbar: true, // 鏄剧ず宸ュ叿鏍�
+ title: true, // 鏄剧ず鏍囬
+ });
},
- handleScroll(e) {
- if (e.nativeEvent.deltaY <= 0) {
- if (this.zoom < 3) {
- let newZoom = this.zoom + 0.1;
- this.zoom = newZoom;
- this.refs.image.style.height = newZoom * 100 + "%";
+ clearDom() {
+ let ele = (this.container ? this.container : document).getElementById(
+ "imageParent"
+ );
+ ele.innerHtml = "";
+ },
+ createDom(page) {
+ var that = this;
+ let ele = (this.container ? this.container : document).getElementById(
+ "imageParent"
+ );
+ const img = document.createElement("img");
+ img.src = this.getPageImage(page);
+ img.alt = "";
+ img.style.maxWidth = "90%";
+ img.style.padding = "30px 5%";
+ img.className = "imgHover";
+ img.onclick = () => {
+ that.viewerCon?.destroy();
+ that.domViewer();
+ };
+ ele.appendChild(img);
+ },
+ scrollBottom() {
+ var that = this;
+ var ele = (this.container ? this.container : document).getElementById(
+ "imageParent"
+ );
+ ele.addEventListener("scroll", function () {
+ // 璁＄畻婊氬姩鏉¤窛绂诲簳閮ㄧ殑浣嶇疆
+ const scrollBottom =
+ ele.scrollHeight - ele.scrollTop - ele.clientHeight;
+ if (scrollBottom <= 10) {
+ that.currentPage++;
+ if (that.currentPage <= that.totalPage) {
+ that.createDom(that.currentPage, ele);
+ }
}
- } else {
- if (this.zoom > 0.5) {
- let newZoom = this.zoom - 0.1;
- this.zoom = newZoom;
- this.refs.image.style.height = newZoom * 100 + "%";
- }
- }
+ });
},
getFileInfo() {
// 鑾峰彇鐩綍
this.MG.file
- .getPdfInfo({ md5: this.md5 })
+ .getPdfInfo({ md5: this.preViewMd5 })
.then((res) => {
this.totalPage = res.totalPages;
- this.getPageImage(this.currentPage);
+ this.createDom(this.currentPage);
})
.catch((err) => {
+ this.totalPage = 1;
+ this.createDom(this.currentPage);
console.error(err);
});
},
getPageImage(page) {
const ctx = process.env.VUE_APP_API_URL;
- this.fileLoading = true;
- this.currentPageSrc =
+ return (
ctx +
"/file/GetPdfPageImage" +
"?md5=" +
- this.md5 +
+ this.preViewMd5 +
"&index=" +
page +
- "&dpi=150";
+ "&dpi=200"
+ );
},
},
};
</script>
<style scoped lang="less">
-.imgbox {
+.preview {
width: 100%;
height: 100%;
- background-color: aquamarine;
- img {
- width: 100%;
+
+ .imageBox {
+ height: calc(100% - 30px);
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #ccc;
+ box-sizing: border-box;
+ }
+
+ .imageBox:hover {
+ cursor: zoom-in !important;
+ }
+
+ .bottom_tool {
+ height: 30px;
+ background-color: rgba(0, 0, 0, 0.8);
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ svg {
+ margin-right: 10px;
+ fill: #999;
+ }
+ svg:hover {
+ fill: #fff;
+ cursor: pointer;
+ }
}
}
</style>
--
Gitblit v1.9.1