From 2dfe58ec96a3ec0a560a9bd38e04f363d938bbdc Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期四, 13 六月 2024 14:12:57 +0800
Subject: [PATCH] 优化

---
 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/math/assets/images/wttc.jpg                        |    0 
 src/books/math/view/components/index.vue                     |   31 
 src/books/artAndDrama/view/components/index.vue              |  913 +++++++++++
 src/books/math/assets/images/0100-1.jpg                      |    0 
 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          |    2 
 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                              |  856 +++++----
 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/artAndDrama/assets/images/0034-1.jpg               |    0 
 src/books/artAndDrama/assets/images/2-3.gif                  |    0 
 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                    |  105 
 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/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/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/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             |    5 
 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/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/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                                                  |   14 
 101 files changed, 4,411 insertions(+), 477 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ca0154f..f35507f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,12 +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>
-    <mathDom v-if="activeBook.name == 'math'"></mathDom>
+    <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama>
+    <mathBook v-if="activeBook.name == 'math'"></mathBook>
   </div>
 </template>
 
@@ -19,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 mathDom from './books/math/view/index'
+import mathBook from './books/math/view/index.vue'
+import artAndDrama from './books/artAndDrama/view/index.vue'
 export default {
   name: "App",
   components: {
@@ -29,7 +31,8 @@
     english,
     sportsAndHealth,
     artAndDance,
-    mathDom
+    mathBook,
+    artAndDrama
   },
   data() {
     return {
@@ -74,8 +77,9 @@
         // embedded
         // english
         // artAndDance
+        // artAndDrama
         // math
-        this.config.resourceCtx + "sportsAndHealth"
+        this.config.resourceCtx + "lifeCare"
       );
       // 娴嬭瘯璇曡30椤�
       // this.activeBook.tryPageCount = 10;
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 52ab8f4..57aea29 100644
--- a/src/books/artAndDance/view/components/header.vue
+++ b/src/books/artAndDance/view/components/header.vue
@@ -70,4 +70,7 @@
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+
+
+</style>
diff --git a/src/books/artAndDrama/assets/images/0007-1.jpg b/src/books/artAndDrama/assets/images/0007-1.jpg
new file mode 100644
index 0000000..e5b5bfd
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0007-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0009-1.jpg b/src/books/artAndDrama/assets/images/0009-1.jpg
new file mode 100644
index 0000000..6de1db1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0009-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0010-1.jpg b/src/books/artAndDrama/assets/images/0010-1.jpg
new file mode 100644
index 0000000..d67edf1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0010-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0012-1.jpg b/src/books/artAndDrama/assets/images/0012-1.jpg
new file mode 100644
index 0000000..b5043f6
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0012-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0014-1.jpg b/src/books/artAndDrama/assets/images/0014-1.jpg
new file mode 100644
index 0000000..6f93fad
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0014-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0016-1.jpg b/src/books/artAndDrama/assets/images/0016-1.jpg
new file mode 100644
index 0000000..6986960
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0016-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0016-2.jpg b/src/books/artAndDrama/assets/images/0016-2.jpg
new file mode 100644
index 0000000..5416544
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0016-2.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0017-1.jpg b/src/books/artAndDrama/assets/images/0017-1.jpg
new file mode 100644
index 0000000..b114599
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0017-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0019-1.jpg b/src/books/artAndDrama/assets/images/0019-1.jpg
new file mode 100644
index 0000000..75bd7a1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0019-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0020-1.jpg b/src/books/artAndDrama/assets/images/0020-1.jpg
new file mode 100644
index 0000000..3eca349
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0020-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0020-2.jpg b/src/books/artAndDrama/assets/images/0020-2.jpg
new file mode 100644
index 0000000..4a0f9f1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0020-2.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0021-1.jpg b/src/books/artAndDrama/assets/images/0021-1.jpg
new file mode 100644
index 0000000..07586e3
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0021-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0022-1.jpg b/src/books/artAndDrama/assets/images/0022-1.jpg
new file mode 100644
index 0000000..cfb4b09
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0022-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0024-1.jpg b/src/books/artAndDrama/assets/images/0024-1.jpg
new file mode 100644
index 0000000..25ca68d
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0024-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0025-1.jpg b/src/books/artAndDrama/assets/images/0025-1.jpg
new file mode 100644
index 0000000..285779a
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0025-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0026-1.jpg b/src/books/artAndDrama/assets/images/0026-1.jpg
new file mode 100644
index 0000000..25891cf
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0026-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0028-1.jpg b/src/books/artAndDrama/assets/images/0028-1.jpg
new file mode 100644
index 0000000..2334dac
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0028-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0030-1.jpg b/src/books/artAndDrama/assets/images/0030-1.jpg
new file mode 100644
index 0000000..e9d1afc
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0030-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0032-1.jpg b/src/books/artAndDrama/assets/images/0032-1.jpg
new file mode 100644
index 0000000..a0a0dd2
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0032-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0033-1.jpg b/src/books/artAndDrama/assets/images/0033-1.jpg
new file mode 100644
index 0000000..47ad3c7
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0033-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0034-1.jpg b/src/books/artAndDrama/assets/images/0034-1.jpg
new file mode 100644
index 0000000..36c3c70
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0034-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0035-1.jpg b/src/books/artAndDrama/assets/images/0035-1.jpg
new file mode 100644
index 0000000..2845166
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0035-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0036-1.jpg b/src/books/artAndDrama/assets/images/0036-1.jpg
new file mode 100644
index 0000000..e36cd16
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0036-1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0036-2.jpg b/src/books/artAndDrama/assets/images/0036-2.jpg
new file mode 100644
index 0000000..3e46f8c
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0036-2.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/0038-1.jpg b/src/books/artAndDrama/assets/images/0038-1.jpg
new file mode 100644
index 0000000..21e1091
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/0038-1.jpg
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/1-1\345\215\225\345\205\203\345\244\247\345\233\276.gif" "b/src/books/artAndDrama/assets/images/1-1\345\215\225\345\205\203\345\244\247\345\233\276.gif"
new file mode 100644
index 0000000..55957c1
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/1-1\345\215\225\345\205\203\345\244\247\345\233\276.gif"
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/1-2\350\232\202\350\232\201\344\270\276\345\244\247\346\240\221.gif" "b/src/books/artAndDrama/assets/images/1-2\350\232\202\350\232\201\344\270\276\345\244\247\346\240\221.gif"
new file mode 100644
index 0000000..b36167d
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/1-2\350\232\202\350\232\201\344\270\276\345\244\247\346\240\221.gif"
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/1-3.gif b/src/books/artAndDrama/assets/images/1-3.gif
new file mode 100644
index 0000000..eace09a
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/1-3.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/1-4.gif b/src/books/artAndDrama/assets/images/1-4.gif
new file mode 100644
index 0000000..063979b
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/1-4.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/1-5.gif b/src/books/artAndDrama/assets/images/1-5.gif
new file mode 100644
index 0000000..0587a6e
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/1-5.gif
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/2-0\345\215\225\345\205\203\345\244\247\345\233\276.gif" "b/src/books/artAndDrama/assets/images/2-0\345\215\225\345\205\203\345\244\247\345\233\276.gif"
new file mode 100644
index 0000000..a5f0f7b
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/2-0\345\215\225\345\205\203\345\244\247\345\233\276.gif"
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/2-1.gif b/src/books/artAndDrama/assets/images/2-1.gif
new file mode 100644
index 0000000..5af13a0
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/2-1.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/2-2.gif b/src/books/artAndDrama/assets/images/2-2.gif
new file mode 100644
index 0000000..c6220b8
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/2-2.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/2-3.gif b/src/books/artAndDrama/assets/images/2-3.gif
new file mode 100644
index 0000000..2e05b49
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/2-3.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/2-4.gif b/src/books/artAndDrama/assets/images/2-4.gif
new file mode 100644
index 0000000..5b38d32
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/2-4.gif
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/3-1\345\215\225\345\205\203\345\244\247\345\233\276.gif" "b/src/books/artAndDrama/assets/images/3-1\345\215\225\345\205\203\345\244\247\345\233\276.gif"
new file mode 100644
index 0000000..551886c
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/3-1\345\215\225\345\205\203\345\244\247\345\233\276.gif"
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/3-2.gif b/src/books/artAndDrama/assets/images/3-2.gif
new file mode 100644
index 0000000..473d468
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/3-2.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/3-3.gif b/src/books/artAndDrama/assets/images/3-3.gif
new file mode 100644
index 0000000..ab723c1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/3-3.gif
Binary files differ
diff --git "a/src/books/artAndDrama/assets/images/4-0\345\215\225\345\205\203\345\244\247\345\233\276.gif" "b/src/books/artAndDrama/assets/images/4-0\345\215\225\345\205\203\345\244\247\345\233\276.gif"
new file mode 100644
index 0000000..b93cc28
--- /dev/null
+++ "b/src/books/artAndDrama/assets/images/4-0\345\215\225\345\205\203\345\244\247\345\233\276.gif"
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/4-1.gif b/src/books/artAndDrama/assets/images/4-1.gif
new file mode 100644
index 0000000..6cb83be
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/4-1.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/4-2.gif b/src/books/artAndDrama/assets/images/4-2.gif
new file mode 100644
index 0000000..15afe4d
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/4-2.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/4-3.gif b/src/books/artAndDrama/assets/images/4-3.gif
new file mode 100644
index 0000000..a500cd4
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/4-3.gif
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/Cover.jpg b/src/books/artAndDrama/assets/images/Cover.jpg
new file mode 100644
index 0000000..cae01e4
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/Cover.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/FD.jpg b/src/books/artAndDrama/assets/images/FD.jpg
new file mode 100644
index 0000000..951db68
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/FD.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/SMY.jpg b/src/books/artAndDrama/assets/images/SMY.jpg
new file mode 100644
index 0000000..1cefc8b
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/SMY.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/czysj.jpg b/src/books/artAndDrama/assets/images/czysj.jpg
new file mode 100644
index 0000000..0a01c2f
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/czysj.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dy1.jpg b/src/books/artAndDrama/assets/images/dy1.jpg
new file mode 100644
index 0000000..c62b280
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dy1.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dy2.jpg b/src/books/artAndDrama/assets/images/dy2.jpg
new file mode 100644
index 0000000..fb2f7b0
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dy2.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dy3.jpg b/src/books/artAndDrama/assets/images/dy3.jpg
new file mode 100644
index 0000000..5bfd5dc
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dy3.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dy4.jpg b/src/books/artAndDrama/assets/images/dy4.jpg
new file mode 100644
index 0000000..c35a4aa
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dy4.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/dydd.jpg b/src/books/artAndDrama/assets/images/dydd.jpg
new file mode 100644
index 0000000..7e777e2
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/dydd.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/header-green.png b/src/books/artAndDrama/assets/images/header-green.png
new file mode 100644
index 0000000..69e012e
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/header-green.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/page5.png b/src/books/artAndDrama/assets/images/page5.png
new file mode 100644
index 0000000..126ca93
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/page5.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/page6-header-green.png b/src/books/artAndDrama/assets/images/page6-header-green.png
new file mode 100644
index 0000000..16db856
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/page6-header-green.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/rhybx.jpg b/src/books/artAndDrama/assets/images/rhybx.jpg
new file mode 100644
index 0000000..cb3ab22
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/rhybx.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/tzyys.jpg b/src/books/artAndDrama/assets/images/tzyys.jpg
new file mode 100644
index 0000000..50d3194
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/tzyys.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/xsyty.jpg b/src/books/artAndDrama/assets/images/xsyty.jpg
new file mode 100644
index 0000000..62214f8
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/xsyty.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/ym.jpg b/src/books/artAndDrama/assets/images/ym.jpg
new file mode 100644
index 0000000..c348ee1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/ym.jpg
Binary files differ
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
new file mode 100644
index 0000000..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
+            >澶у0鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
+          </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
+            >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+          </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>鐨勬牱瀛愶紝娆f鐒�<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">绗笁璇俱��鍐呭績鐨勫0闊�</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
+            >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+          </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
+            >鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫0闊冲嚭鐜帮細涓�涓0闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓0闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓g殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
+          </p>
+          <p>姝d箟闃熼暱锛氣��
+            <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
+            >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+          </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鈥濈殑闊炽�傚0闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
+          </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">
+              鎴忓墽琛ㄦ紨涓殑鍔ㄤ綔銆佷綋鎬併�佺溂绁炪�佸0闊冲湪濉戦�犺鑹叉椂璧峰埌浜嗛噸瑕佺殑浣滅敤銆傛湰鍗曞厓鎴戜滑灏嗙户缁涔犮�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽苟浠ュ伓鍓х殑褰㈠紡杩涜琛ㄦ紨銆�
+            </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
+              >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+            </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>鐨勬牱瀛愶紝娆f鐒�<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">绗笁璇俱��鍐呭績鐨勫0闊�</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
+              >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+            </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
+              >鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫0闊冲嚭鐜帮細涓�涓0闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓0闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓g殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
+            </p>
+            <p>姝d箟闃熼暱锛氣�淿________________________________銆傗��</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
+              >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+            </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鈥濈殑闊炽�傚0闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
+            </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">
-              姝e父骞煎効涓婂簥鍚庡彲寰堝揩鍏ョ潯锛岀潯鐪犲钩绋炽�佹棤榧惧0锛屽彲鏈夊井姹椼��
-            </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/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/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
index 8d1dbdb..c201a0b 100644
--- a/src/books/math/assets/main.less
+++ b/src/books/math/assets/main.less
@@ -2,331 +2,387 @@
   width: 100%;
   height: 100%;
   font-family: "瀹嬩綋", SimSun, sans-serif;
-  ul {
-    list-style-type: none;
-  }
-
-  li {
-    list-style-type: none;
-  }
-
-  .ls1 {
-    font-family: "HiFont Hei GB";
-    color: #30aad1;
-    font-weight: bold;
-  }
-  .hs {
-    font-family: "HiFont Hei GB";
-    color: #ea6b00;
-    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 {
+  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;
-  }
-
-  .img {
+    }
+    
+    
+    .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:18px;
-    color: #000;
-    margin-left: 0%;
-    margin-right: 0%;
+    font-size:0.85em;
     text-indent: 0em;
-  }
-
-  .img1 {
-    text-align: right;
-    font-size: 0.85em;
-    margin-left: 0%;
-    margin-right: 2em;
-    text-indent: 0em;
-  }
-
-  p {
-    // margin-top: 1em;
-    margin: 0;
-    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%;
-    text-indent: 0em;
-  }
-
-  .left {
-    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;
-  }
-
-  h2 {
-    font-family: "STKaiti";
-    text-align: center;
-    font-size: 1.2em;
-    margin-top: 0.2em;
-    margin-bottom: 0.2em;
-    text-indent: 0em;
-  }
-
-  h2.lefth2 {
-    text-align: left;
-    font-size: 1.2em;
-    margin-top: 0.2em;
-    margin-bottom: 0.2em;
-    text-indent: 0em;
-  }
-
-  h2.whleft2 {
-    text-align: left;
-    color: #af0206;
-    font-size: 38px;
-    margin-top: 0.2em;
-    margin-bottom: 0.2em;
-    text-indent: 0em;
-  }
-
-  h3 {
-    font-family: "STKaiti";
-    color: #ef495d;
-    font-weight: bold;
-    // font-size: 1.15em;
-    font-size: 26px;
-    margin-top: 2em;
-    text-align: center;
-    margin-bottom: 20px;
-    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%;
-  }
-  .img-gn {
-    width: 48%;
-  }
-  .img-gn1 {
-    width: 18%;
-  }
-  .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;
-    font-size: 26px;
-    text-align: center;
-    text-indent: 0em;
-    margin: 6px 0;
-  }
-
-  .bj1 {
-    border: 2px solid #0aa19c;
-    background: #e3efd7;
-    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: 1em;
-    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";
-  }
+    }
+    
+    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 {
@@ -418,6 +474,9 @@
   .fl-cn {
     align-items: center;
   }
+  .al-end {
+    align-items: flex-end;
+  }
   .fz-18 {
     font-size: 18px;
   }
@@ -485,54 +544,73 @@
   .lh2 {
     line-height: 2em;
   }
-
-  .header-box {
-    position: relative;
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 20px;
-  }
-
-  .header-border-box {
-    width: 90%;
-    height: 100px;
-    border-bottom: 1px solid #00aeef;
-    border-left: 1px solid #00aeef;
-  }
-
-  .header-num-box {
-    box-sizing: border-box;
-    position: absolute;
-    top: 50px;
-    width: 100%;
-    height: 26px !important;
-    line-height: 26px;
-    background-color: #15c0f2;
-    color: #fff;
-    padding-left: 50px;
-  }
+  // 濂囨暟椤甸〉鐪�
   .page-header-box {
-    padding-top: 96px;
+    margin: 0;
+    margin-bottom: 20px;
+    width: 100%;
+    height: 104px;
     display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    margin-bottom: 28px;
+    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-text {
-    color: #616161;
-    font-size: 14px;
-  }
-  .page-header-num {
-    display: inline-block;
-    width: 100px;
-    height: 30px;
-    line-height: 30px;
-    padding-left: 20px;
-    box-sizing: border-box;
-    background-color: #15c0f2;
-    color: #fff;
-    margin-left: 20px;
-    font-weight: bold;
+  .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;
@@ -582,7 +660,8 @@
     color: #15c0f2;
   }
   .video-border {
-    border: 1px dotted #15c0f2;
+    border: 1px solid #15c0f2;
+    border-radius: 30px;
   }
   .fm-st {
     font-family: "STKaiti";
@@ -653,6 +732,39 @@
   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 ;
+      }
+    }
+  }
 }
 
 /* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
@@ -667,13 +779,13 @@
   }
 }
 @media (max-width: 660px) {
-  .ans-dance {
+  .math-book {
     /* 鍒嗛〉padding */
     .page-padding {
       padding: 104px 20px;
     }
     .padding-96 {
-      padding: 0 20px;
+      padding: 0 20px 40px 20px;
     }
     /* video澶у皬 */
     .video-box {
@@ -692,12 +804,12 @@
   }
 }
 @media (min-width: 660px) {
-  .ans-dance {
+  .math-book{
     .page-padding {
       padding: 104px 96px;
     }
     .padding-96 {
-      padding: 0 96px;
+      padding: 0 96px 104px 96px;
     }
     .video-box {
       max-width: 370px;
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>
+            鍦ㄥ瑙備笘鐣屼腑瀛樺湪鍚勭鍚勬牱鐨勮繍鍔ㄥ彉鍖栫幇璞�.濡傛惌杞界鑸熷崄鍥涘彿杞戒汉椋炶埞鐨勯暱寰佷簩鍙疯繍杞界伀绠彂灏勮繃绋嬩腑锛岄鑸逛笌鍙戝皠鐐硅窛绂讳細闅忕潃鏃堕棿鐨勫彉鍖栬�屽彉鍖栵紱娣辨捣鍕囧+鍙疯浇浜烘綔姘村櫒鍦ㄤ笅娼滃疄楠岃繃绋嬩腑锛屽叾鍘嬪己闅忕潃涓嬫綔娣卞害鐨勫鍔犺�屽澶э紱浠h〃鏂拌兘婧愭妧鏈殑鍏変紡鍙戠數鍜岄鑳藉彂鐢碉紝鎴戝浗鐨勮鏈哄閲忛殢鏃堕棿鍙樺寲鑰屽闀匡紱鎴戝浗蹇�熷彂灞曠殑楂橀�熼搧璺紝鍏舵�婚噷绋嬫槸閫愬勾澧炲姞鐨勶紝鐜板凡绐佺牬4涓噆m
+            锛岀ǔ灞呬笘鐣岀涓�锛涙瘡涓汉鐨勪綋娓╅殢鐫�鏃堕棿鐨勫彉鍖栬�屽彉鍖栵紱鍒板晢搴楄喘涔板悓涓�绉嶉ギ鏂欑殑鏁伴噺瓒婂锛屼粯璐硅秺澶氱瓑.杩欎簺鍔ㄦ�佸彉鍖栫幇璞¢兘琛ㄧ幇涓哄彉閲忎箣闂寸殑瀵瑰簲鍏崇郴锛屾垜浠父鐢ㄥ嚱鏁版ā鍨嬫潵鎻忚堪杩欎簺鍙橀噺涔嬮棿鐨勫叧绯诲拰瑙勫緥锛屽苟閫氳繃鐮旂┒鍑芥暟鏉ヨ璇嗗瑙備笘鐣�.
+          </p>
+          <p>
+            鍑芥暟鏄弿杩板瑙備笘鐣屽彉鍖栬寰嬪拰瑙e喅鏁板闂鐨勯噸瑕佸伐鍏�.瀹冧笌浠f暟寮忋�佹柟绋嬨�佷笉绛夊紡绛夌煡璇嗚仈绯荤揣瀵嗭紝鏄繘涓�姝ュ涔犳暟瀛︾殑閲嶈鍩虹.鍑芥暟鐨勬蹇靛強鍏跺弽鏄犵殑鏁板鎬濇兂鍜屾柟娉曞凡骞挎硾娓楅�忓埌鏁板鐨勫悇涓鍩燂紝骞跺湪鐜板疄鐢熸椿涓湁鐫�骞挎硾鐨勫簲鐢�.
+          </p>
+          <p>
+            鏈崟鍏冧富瑕佸涔犲嚱鏁扮殑姒傚康銆佸嚱鏁扮殑琛ㄧず鏂规硶銆佸嚱鏁扮殑鍗曡皟鎬у拰濂囧伓鎬т互鍙婂嚱鏁扮殑搴旂敤.鏈崟鍏冪殑瀛︿範锛岄噸鍦ㄦ劅鍙楃敤鐩磋鎯宠薄浠庡叿浣撻棶棰樹腑鎶借薄鍑烘暟瀛﹂棶棰橈紝骞剁敤绮剧‘鐨勬暟瀛︾鍙疯瑷�琛ㄨ揪姒傚康銆佹�ц川銆佹帹鐞嗙瓑锛涙帉鎻$爺绌跺嚱鏁扮殑鍩烘湰鍐呭銆佽繃绋嬪拰鏂规硶锛涜繍鐢ㄥ缓绔嬪垎娈靛嚱鏁般�佷簩娆″嚱鏁扮瓑鏁板妯″瀷瑙e喅瀹為檯闂鐨勬柟娉曪紱绉疮涓�瀹氱殑鏁板缁忛獙鍜屾柟娉曪紝鎻愬崌鐩磋鎯宠薄銆佹暟瀛︽娊璞°�佹暟瀛﹀缓妯°�侀�昏緫鎺ㄧ悊绛夋牳蹇冪礌鍏�.
+          </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>鍒濇鎺屾彙寤虹珛鍒嗘鍑芥暟銆佷簩娆″嚱鏁版ā鍨嬫潵瑙e喅瀹為檯闂鐨勬柟娉曪紱</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>锛夛紝閭d箞鍑芥暟<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>
+    <!-- 瑙i鎬濊矾寮圭獥 -->
+    <el-dialog
+      title="瑙i鎬濊矾"
+      :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>
+    <!-- 瑙i姝ラ寮圭獥 -->
+    <el-dialog
+      title="瑙i姝ラ"
+      :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瀽 娉曡〃绀烘椂,鍙互鐢� 鍋� 鍑� 鏁� 鐨� 瀹� 涔� 鏉� 鍒ゆ柇銆� 鍋跺嚱鏁�:涓�鑸湴锛岃鍑芥暟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
index 957ff78..91d39fb 100644
--- a/src/books/math/view/components/header.vue
+++ b/src/books/math/view/components/header.vue
@@ -1,37 +1,38 @@
-
 <template>
   <div class="chapter" num="1">
     <!-- 灏侀潰 -->
-    <div class="page-box cover mt-20" page="1" style="min-height:auto">
+    <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="" />
+        <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(1) > -1">
-        <img src="../../assets/images/Cover.jpg" alt="" />
+    <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 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">
-            瀛﹀墠鍎跨鍗敓涓庝繚鍋�/寮犲叞棣欙紝娼樼钀嶄富缂�.鈥�3鐗�.鈥斿寳浜細鍖椾含甯堣寖澶у鍑虹増绀撅紝2023.2锛�2024.2閲嶅嵃锛�
+            鏁板锛氬熀纭�妯″潡.涓婂唽/鏇逛竴楦o紝浠樺媷锛岃懀杩炴槬涓荤紪.鈥�4鐗�.鈥斿寳浜細鍖椾含甯堣寖澶у鍑虹増绀撅紝2021.8锛�2023.6閲嶅嵃锛�
           </p>
-          <p class="tl" style="margin-bottom: 10px">ISBN 978-7-303-26340-0</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">
-            鈪�.鈶犲鈥� 鈪�.鈶犲紶鈥� 鈶℃綐鈥� 鈪�.鈶犲鍓嶅効绔モ�斿崼鐢熶繚鍋モ�斿辜鍎垮笀鑼冨鏍♀�旀暀鏉� 鈪�.鈶燫179
+            鈪�.鈶犳暟鈥� 鈪�.鈶犳浌鈥� 鈶′粯鈥� 鈶㈣懀鈥� 鈪�.鈶犳暟瀛﹁-涓瓑涓撲笟瀛︽牎-鏁欐潗 鈪�.鈶燝634.603
           </p>
-          <p class="tl fz-14">涓浗鐗堟湰鍥句功棣咰IP鏁版嵁鏍稿瓧锛�2020锛夌179545鍙�</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>鏁欐潗鎰忚鍙嶉锛歡aozhifk@bnupg.com 010-58805079</b>
+            <b>鏁欐潗鎰忚鍙嶉鑱旂郴鐢佃瘽銆�010-58807762 58806368</b>
           </p>
-          <p class="tl fz-14 m0">钀ラ攢涓績鐢佃瘽锛�010-58802755 58800035</p>
-          <p class="tl fz-14 m0">缂栬緫閮ㄧ數璇濓細010-58802883</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">銆�銆�銆�銆�銆�鍖椾含甯傝タ鍩庡尯鏂拌鍙e澶ц12-3鍙�</p>
@@ -39,22 +40,22 @@
           <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">鍗般��銆�寮狅細18.25</p>
-          <p class="tl fz-14 m0">瀛椼��銆�鏁帮細373鍗冨瓧</p>
-          <p class="tl fz-14 m0">鐗堛��銆�娆★細2023骞�2鏈堢3鐗�</p>
-          <p class="tl fz-14 m0">鍗般��銆�娆★細2024骞�2鏈堢23娆″嵃鍒�</p>
-          <p class="tl fz-14 m0">瀹氥��銆�浠凤細39.80鍏�</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">璐d换鏍″锛氶檲姘�</p>
+              <p class="tl fz-14 m0">绛栧垝缂栬緫锛氭灄銆�瀛愩��浣欏骞�</p>
+              <p class="tl fz-14 m0">缇庢湳缂栬緫锛氱劍銆�涓�</p>
+              <p class="tl fz-14 m0">璐d换鏍″锛氶檲銆�姘�</p>
             </li>
             <li>
-              <p class="tl fz-14 m0">璐d换缂栬緫锛氬懆楣�</p>
-              <p class="tl fz-14 m0">瑁呭抚璁捐锛氱劍涓�</p>
-              <p class="tl fz-14 m0">璐d换鍗板埗锛氶┈娲�</p>
+              <p class="tl fz-14 m0">璐d换缂栬緫锛氶┈鍔涙晱</p>
+              <p class="tl fz-14 m0">瑁呭抚璁捐锛氱劍銆�涓�</p>
+              <p class="tl fz-14 m0">璐d换鍗板埗锛氶┈銆�娲�</p>
             </li>
           </ul>
           <p class="center m0" style="margin-top: 20px; font-size: 20px">
@@ -70,6 +71,7 @@
         </div>
       </div>
     </div>
+
   </div>
 </template>
 
@@ -82,12 +84,57 @@
       // default: [],
     },
     data() {
-      return {
-      }
+      return {};
     },
   },
 };
 </script>
 
 <style lang="less" scoped>
-</style>
\ No newline at end of file
+.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
index bb50f45..b135e8a 100644
--- a/src/books/math/view/components/index.vue
+++ b/src/books/math/view/components/index.vue
@@ -15,31 +15,10 @@
         v-if="showCatalogList.indexOf(1) > -1"
         :showPageList="loadPageList"
       ></pageHeader>
-      <!-- <chapterOne
+      <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>
-      <chapterFive
-      v-if="showCatalogList.indexOf(6) > -1"
-        :showPageList="loadPageList"
-      ></chapterFive>
-      <chapterSix
-        v-if="showCatalogList.indexOf(7) > -1"
-        :showPageList="loadPageList"
-      ></chapterSix> -->
     </div>
 
   </div>
@@ -47,7 +26,7 @@
 
 <script>
 import pageHeader from "./header.vue";
-// import chapterOne from "./chapter001.vue";
+import chapterOne from "./chapter001.vue";
 // import chapterTwo from "./chapter002.vue";
 // import chapterThree from "./chapter003.vue"
 // import chapterFour from './chapter004.vue'
@@ -63,7 +42,7 @@
   name:"pageContent",
   data() {
     return {
-      catalogLength: 7, // 鎬荤珷鑺傛暟
+      catalogLength: 2, // 鎬荤珷鑺傛暟
       showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
       loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
       throttleThreshold: 100, // 鑺傛祦闃堝��
@@ -730,7 +709,7 @@
       // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
       const pageData = {
         pageHeader,
-        // chapterOne,
+        chapterOne,
         // chapterTwo,
         // chapterThree,
         // chapterFour,
@@ -837,7 +816,7 @@
   },
   components: {
     pageHeader,
-    // chapterOne,
+    chapterOne,
     // chapterTwo,
     // chapterThree,
     // chapterFour,
diff --git a/src/books/sportsAndHealth/view/components/index.vue b/src/books/sportsAndHealth/view/components/index.vue
index 209dd7e..2348ec2 100644
--- a/src/books/sportsAndHealth/view/components/index.vue
+++ b/src/books/sportsAndHealth/view/components/index.vue
@@ -188,7 +188,7 @@
   },
   mounted() {
     // 榛樿鍔犺浇绔犺妭
-    this.showCatalogList = [4];
+    this.showCatalogList = [1];
     // 婊氬姩鐩戝惉鑺傛祦
     this.throttledScrollHandler = _.throttle(
       this.scrollFun,
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>
                   <!-- &nbsp; -->
                   <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>

--
Gitblit v1.9.1