From b86edaa8cd52008edc5bc4a220655fb77336f89a Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期五, 31 五月 2024 15:58:05 +0800
Subject: [PATCH] 优化

---
 src/books/artAndDance/assets/images/dy4.jpg          |    0 
 src/books/artAndDance/assets/images/image27-4.jpg    |    0 
 src/books/artAndDance/assets/images/pageHeader.png   |    0 
 src/books/artAndDance/view/index.vue                 |   76 +++
 src/books/artAndDance/assets/images/image28-1.jpg    |    0 
 src/books/artAndDance/assets/images/image26-2.jpg    |    0 
 src/books/artAndDance/assets/images/image18-1.jpg    |    0 
 src/books/artAndDance/assets/images/czysj.jpg        |    0 
 src/books/childHealth/view/content/index.vue         |   92 ++--
 src/books/artAndDance/assets/main.less               |  353 ++++++++++++++++
 src/books/artAndDance/assets/images/image27-1.jpg    |    0 
 src/books/artAndDance/assets/images/image29-3.jpg    |    0 
 src/books/artAndDance/assets/images/image10-1.jpg    |    0 
 src/books/artAndDance/assets/images/image30-1.jpg    |    0 
 src/books/artAndDance/assets/images/dy1.jpg          |    0 
 src/books/artAndDance/assets/images/image10-2.jpg    |    0 
 src/books/artAndDance/assets/images/image22-1.jpg    |    0 
 src/books/artAndDance/assets/images/image26-3.jpg    |    0 
 src/books/artAndDance/view/components/index.vue      |  653 +++++++++++++++++++++++++++++++
 src/books/artAndDance/assets/images/image28-2.jpg    |    0 
 src/books/English/view/components/index.vue          |    2 
 src/books/artAndDance/assets/images/dy5.jpg          |    0 
 src/books/artAndDance/assets/images/dzk.jpg          |    0 
 src/books/artAndDance/assets/images/rhybx.jpg        |    0 
 src/books/artAndDance/assets/images/image14-1.jpg    |    0 
 src/books/artAndDance/assets/images/image27-2.jpg    |    0 
 src/books/artAndDance/assets/images/dn.png           |    0 
 src/books/artAndDance/assets/images/image29-1.jpg    |    0 
 src/books/artAndDance/assets/images/image30-2.jpg    |    0 
 src/books/artAndDance/assets/images/xsyty.jpg        |    0 
 src/books/artAndDance/view/components/chapter001.vue |    0 
 src/books/artAndDance/assets/images/image30-3.jpg    |    0 
 src/books/artAndDance/assets/images/ym.jpg           |    0 
 src/books/artAndDance/assets/images/image26-4.jpg    |    0 
 src/books/artAndDance/assets/images/tz.jpg           |    0 
 src/books/artAndDance/assets/images/dy2.jpg          |    0 
 src/books/artAndDance/assets/images/image28-3.jpg    |    0 
 src/books/artAndDance/assets/images/Cover.jpg        |    0 
 src/books/artAndDance/assets/images/image6-1.jpg     |    0 
 src/books/artAndDance/view/components/header.vue     |   78 +++
 src/books/artAndDance/assets/images/image27-3.jpg    |    0 
 src/books/artAndDance/assets/images/SMY.jpg          |    0 
 src/books/artAndDance/assets/images/image29-2.jpg    |    0 
 src/books/artAndDance/assets/images/image30-4.jpg    |    0 
 src/books/artAndDance/assets/images/image26-1.jpg    |    0 
 src/App.vue                                          |    6 
 src/books/artAndDance/assets/images/image28-4.jpg    |    0 
 src/books/artAndDance/assets/images/dy3.jpg          |    0 
 48 files changed, 1,213 insertions(+), 47 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5f2160d..eff2cc5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@
     <sportsAndHealth
       v-if="activeBook.name == 'sportsAndHealth'"
     ></sportsAndHealth>
+    <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance>
   </div>
 </template>
 
@@ -16,6 +17,7 @@
 import embedded from "./books/embedded/view/index.vue";
 import english from "./books/English/view/index.vue";
 import sportsAndHealth from "./books/sportsAndHealth";
+import artAndDance from './books/artAndDance/view/index.vue'
 
 export default {
   name: "App",
@@ -24,7 +26,8 @@
     lifeCare,
     embedded,
     english,
-    sportsAndHealth
+    sportsAndHealth,
+    artAndDance
   },
   data() {
     return {
@@ -66,6 +69,7 @@
         // sportsAndHealth
         // embedded
         // english
+        // artAndDance
         this.config.resourceCtx + "lifeCare"
       );
       // 娴嬭瘯璇曡30椤�
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index bb1feca..a8700d0 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -33,7 +33,7 @@
 export default {
   data() {
     return {
-      catalogLength: 13, // 鎬荤珷鑺傛暟
+      catalogLength: 2, // 鎬荤珷鑺傛暟
       showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
       loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
       throttleThreshold: 100, // 鑺傛祦闃堝��
diff --git a/src/books/artAndDance/assets/images/Cover.jpg b/src/books/artAndDance/assets/images/Cover.jpg
new file mode 100644
index 0000000..c7804b6
--- /dev/null
+++ b/src/books/artAndDance/assets/images/Cover.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/SMY.jpg b/src/books/artAndDance/assets/images/SMY.jpg
new file mode 100644
index 0000000..7561c15
--- /dev/null
+++ b/src/books/artAndDance/assets/images/SMY.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/czysj.jpg b/src/books/artAndDance/assets/images/czysj.jpg
new file mode 100644
index 0000000..3feeb9f
--- /dev/null
+++ b/src/books/artAndDance/assets/images/czysj.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/dn.png b/src/books/artAndDance/assets/images/dn.png
new file mode 100644
index 0000000..76890dd
--- /dev/null
+++ b/src/books/artAndDance/assets/images/dn.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/dy1.jpg b/src/books/artAndDance/assets/images/dy1.jpg
new file mode 100644
index 0000000..f9b9ffa
--- /dev/null
+++ b/src/books/artAndDance/assets/images/dy1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/dy2.jpg b/src/books/artAndDance/assets/images/dy2.jpg
new file mode 100644
index 0000000..e73accf
--- /dev/null
+++ b/src/books/artAndDance/assets/images/dy2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/dy3.jpg b/src/books/artAndDance/assets/images/dy3.jpg
new file mode 100644
index 0000000..e941511
--- /dev/null
+++ b/src/books/artAndDance/assets/images/dy3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/dy4.jpg b/src/books/artAndDance/assets/images/dy4.jpg
new file mode 100644
index 0000000..658aa72
--- /dev/null
+++ b/src/books/artAndDance/assets/images/dy4.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/dy5.jpg b/src/books/artAndDance/assets/images/dy5.jpg
new file mode 100644
index 0000000..4ec20d1
--- /dev/null
+++ b/src/books/artAndDance/assets/images/dy5.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/dzk.jpg b/src/books/artAndDance/assets/images/dzk.jpg
new file mode 100644
index 0000000..839aaa3
--- /dev/null
+++ b/src/books/artAndDance/assets/images/dzk.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image10-1.jpg b/src/books/artAndDance/assets/images/image10-1.jpg
new file mode 100644
index 0000000..3c76cda
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image10-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image10-2.jpg b/src/books/artAndDance/assets/images/image10-2.jpg
new file mode 100644
index 0000000..cc4fb19
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image10-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image14-1.jpg b/src/books/artAndDance/assets/images/image14-1.jpg
new file mode 100644
index 0000000..d25039f
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image14-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image18-1.jpg b/src/books/artAndDance/assets/images/image18-1.jpg
new file mode 100644
index 0000000..f445dfe
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image18-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image22-1.jpg b/src/books/artAndDance/assets/images/image22-1.jpg
new file mode 100644
index 0000000..5e30f96
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image22-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-1.jpg b/src/books/artAndDance/assets/images/image26-1.jpg
new file mode 100644
index 0000000..71a2cf8
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image26-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-2.jpg b/src/books/artAndDance/assets/images/image26-2.jpg
new file mode 100644
index 0000000..b60baf1
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image26-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-3.jpg b/src/books/artAndDance/assets/images/image26-3.jpg
new file mode 100644
index 0000000..353ca5e
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image26-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image26-4.jpg b/src/books/artAndDance/assets/images/image26-4.jpg
new file mode 100644
index 0000000..3095046
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image26-4.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-1.jpg b/src/books/artAndDance/assets/images/image27-1.jpg
new file mode 100644
index 0000000..484eb1c
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image27-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-2.jpg b/src/books/artAndDance/assets/images/image27-2.jpg
new file mode 100644
index 0000000..eab8076
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image27-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-3.jpg b/src/books/artAndDance/assets/images/image27-3.jpg
new file mode 100644
index 0000000..7eed5d8
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image27-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image27-4.jpg b/src/books/artAndDance/assets/images/image27-4.jpg
new file mode 100644
index 0000000..9b55c8f
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image27-4.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-1.jpg b/src/books/artAndDance/assets/images/image28-1.jpg
new file mode 100644
index 0000000..6867c09
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image28-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-2.jpg b/src/books/artAndDance/assets/images/image28-2.jpg
new file mode 100644
index 0000000..aae4239
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image28-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-3.jpg b/src/books/artAndDance/assets/images/image28-3.jpg
new file mode 100644
index 0000000..b8fdeff
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image28-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image28-4.jpg b/src/books/artAndDance/assets/images/image28-4.jpg
new file mode 100644
index 0000000..5d60b1a
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image28-4.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-1.jpg b/src/books/artAndDance/assets/images/image29-1.jpg
new file mode 100644
index 0000000..6012bb2
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image29-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-2.jpg b/src/books/artAndDance/assets/images/image29-2.jpg
new file mode 100644
index 0000000..274329e
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image29-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image29-3.jpg b/src/books/artAndDance/assets/images/image29-3.jpg
new file mode 100644
index 0000000..cc68bb1
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image29-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-1.jpg b/src/books/artAndDance/assets/images/image30-1.jpg
new file mode 100644
index 0000000..feed285
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image30-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-2.jpg b/src/books/artAndDance/assets/images/image30-2.jpg
new file mode 100644
index 0000000..08f475d
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image30-2.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-3.jpg b/src/books/artAndDance/assets/images/image30-3.jpg
new file mode 100644
index 0000000..0d05cb9
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image30-3.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image30-4.jpg b/src/books/artAndDance/assets/images/image30-4.jpg
new file mode 100644
index 0000000..e5ef59a
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image30-4.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/image6-1.jpg b/src/books/artAndDance/assets/images/image6-1.jpg
new file mode 100644
index 0000000..1a16826
--- /dev/null
+++ b/src/books/artAndDance/assets/images/image6-1.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/pageHeader.png b/src/books/artAndDance/assets/images/pageHeader.png
new file mode 100644
index 0000000..4c2684d
--- /dev/null
+++ b/src/books/artAndDance/assets/images/pageHeader.png
Binary files differ
diff --git a/src/books/artAndDance/assets/images/rhybx.jpg b/src/books/artAndDance/assets/images/rhybx.jpg
new file mode 100644
index 0000000..f03dcf7
--- /dev/null
+++ b/src/books/artAndDance/assets/images/rhybx.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/tz.jpg b/src/books/artAndDance/assets/images/tz.jpg
new file mode 100644
index 0000000..0f2574f
--- /dev/null
+++ b/src/books/artAndDance/assets/images/tz.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/xsyty.jpg b/src/books/artAndDance/assets/images/xsyty.jpg
new file mode 100644
index 0000000..a46257e
--- /dev/null
+++ b/src/books/artAndDance/assets/images/xsyty.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/images/ym.jpg b/src/books/artAndDance/assets/images/ym.jpg
new file mode 100644
index 0000000..c15e1b1
--- /dev/null
+++ b/src/books/artAndDance/assets/images/ym.jpg
Binary files differ
diff --git a/src/books/artAndDance/assets/main.less b/src/books/artAndDance/assets/main.less
new file mode 100644
index 0000000..660c3bd
--- /dev/null
+++ b/src/books/artAndDance/assets/main.less
@@ -0,0 +1,353 @@
+.ans-dance {
+  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 {
+    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;
+    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: 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.15em;
+    margin-top: 2em;
+    text-align: center;
+    margin-bottom: 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%;
+  }
+  .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;
+    text-align: center;
+    text-indent: 0em;
+  }
+
+  .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";
+  }
+
+  // 鑷畾涔�
+  .page-box {
+    box-sizing: border-box;
+    min-height: 1150px !important;
+    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;
+  }
+}
diff --git a/src/books/artAndDance/view/components/chapter001.vue b/src/books/artAndDance/view/components/chapter001.vue
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/books/artAndDance/view/components/chapter001.vue
diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue
new file mode 100644
index 0000000..b8a6a97
--- /dev/null
+++ b/src/books/artAndDance/view/components/header.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="chapter" num="1">
+    <div class="page-box" page="1">
+      <div class="bodystyle">
+        <p class="center">
+          <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
+        </p>
+      </div>
+    </div>
+    <div class="page-box" page="2">
+      <div class="bodystyle">
+        <p class="center">
+          <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
+        </p>
+      </div>
+    </div>
+    <div class="page-box" page="3">
+      <ul class="fl fl-cl ju-bt" style="min-height: 1150px;">
+        <li>
+          <img src="../../assets/images/pageHeader.png" alt="">
+        </li>
+        <li>
+          <div class="bodystyle">
+            <h1 id="a003" class="front">缂栧浼�</h1>
+            <hr />
+            <p>椤俱��銆�闂細<span class="kaiti">褰悏璞°��鍚曡壓鐢�</span></p>
+            <p>涓汇��銆�缂栵細<span class="kaiti">鐜嬫澃</span></p>
+            <p>鍓� 涓� 缂栵細<span class="kaiti">浜庢檽闆��寰愭ⅵ濠�</span></p>
+            <ul class="fl">
+              <li>
+                <p>缂栧啓濮斿憳锛�</p>
+              </li>
+              <li class="fl fl-cl">
+                <span class="kaiti">閭㈤珮鐔欍��鐜嬨��鐜层��鐜嬨��閿︺��宕旀槬鏉�</span>
+                <span class="kaiti">鏉庣传钖囥��鍒樿景鏇︺��鏅併��鑾广��鎴村垬棣欎緷</span>
+                <span class="kaiti">鏌��鍜忋��寮犺壓鐟躲��灏氬皬闆��鍛ㄣ��鐙�</span>
+              </li>
+            </ul>
+            <p>缇庢湳缁樼敾锛�<span class="kaiti">寮犲鑽�</span></p>
+            <p>涓昏鏁欏笀锛�<span class="kaiti">寮犳偊銆�銆�楂樻檽姊�</span></p>
+            <ul class="fl">
+              <li>
+                <p>琛� 婕� 鑰咃細</p>
+              </li>
+              <li class="fl fl-cl">
+                <span class="kaiti"
+                >钁f仼姹愩��濮氭槦鏈点��鍛ㄦ竻绔广��鏈卞婕�</span
+              >
+              <span class="kaiti"
+                >鎴村槈澧ㄣ��楂樺瓙娣囥��鑸掑崥鐟炪��鏇规仼娣�</span
+              >
+              <span class="kaiti">鍒樺瓙鐠愩��閮戞竻濡�</span>
+              </li>
+            </ul>
+            <p>
+              
+            </p>
+            <p>
+              銆�銆�銆�銆�銆�
+            </p>
+            <p>銆�銆�銆�銆�銆�</p>
+          </div>
+          <p class="center">
+            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+          </p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "pageHeader",
+};
+</script>
+
+<style scoped></style>
diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue
new file mode 100644
index 0000000..a8700d0
--- /dev/null
+++ b/src/books/artAndDance/view/components/index.vue
@@ -0,0 +1,653 @@
+<template>
+  <div class="page-main" @scroll="throttledScrollHandler">
+    <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
+        @saveCharacters="saveCharacters"
+        v-if="showCatalogList.indexOf(2) > -1"
+        :showPageList="loadPageList"
+      ></chapterOne>
+    </div>
+  </div>
+</template>
+
+<script>
+import pageHeader from "./header.vue";
+import chapterOne from "./chapter001.vue";
+import NoteIcon from "@/assets/images/biji.png";
+import _ from "lodash";
+import Swiper from "swiper/bundle";
+import "swiper/swiper-bundle.css";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+export default {
+  data() {
+    return {
+      catalogLength: 2, // 鎬荤珷鑺傛暟
+      showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+      loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+      throttleThreshold: 100, // 鑺傛祦闃堝��
+      previousScrollTop: 0,
+      throttledScrollHandler: null,
+      observer: null,
+      loadPageObserver: null,
+      loadPageList: [],
+      questionData: {},
+      renderSignMap: {},
+    };
+  },
+  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);
+      },
+    },
+  },
+  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);
+        },
+      });
+    }
+
+    // 鍒涘缓涓�涓柊鐨� 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);
+    // }, 1000);
+  },
+  methods: {
+    // 婊氬姩鐩戝惉
+    scrollFun(event) {
+      // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
+      if (event.target.scrollTop > this.previousScrollTop) {
+        // 鍚戜笅
+        const currentScrollTop =
+          event.target.scrollTop + event.target.offsetHeight;
+        if (
+          currentScrollTop >=
+          event.target.scrollHeight - this.loadThreshold
+        ) {
+          // 鍒拌揪闃堝��
+          if (
+            this.showCatalogList[this.showCatalogList.length - 1] <
+            this.catalogLength
+          ) {
+            // 鍔犺浇涓嬩竴绔�
+            this.showCatalogList.push(
+              this.showCatalogList[this.showCatalogList.length - 1] + 1
+            );
+            if (this.showCatalogList.length > 3) {
+              // 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔�
+              this.showCatalogList.shift();
+            }
+          }
+        }
+      } else if (event.target.scrollTop < this.previousScrollTop) {
+        // 鍚戜笂
+        const currentScrollTop = event.target.scrollTop;
+        if (currentScrollTop <= this.loadThreshold) {
+          // 鍒拌揪闃堝��
+          if (this.showCatalogList[0] > 0) {
+            // 鍔犺浇涓婁竴绔�
+            this.showCatalogList.unshift(this.showCatalogList[0] - 1);
+            if (this.showCatalogList.length > 3) {
+              // 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔�
+              this.showCatalogList.pop();
+            }
+          }
+        }
+      }
+      // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
+      // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
+      this.previousScrollTop = event.target.scrollTop;
+    },
+    // 绔犺妭銆侀〉闈㈣烦杞�
+    gotoPage(catalog, page) {
+      if (catalog >= 0 && catalog <= this.catalogLength) {
+        // 澶勭悊娓叉煋绔犺妭
+        if (catalog == 0) {
+          this.showCatalogList = [0, 1];
+        } else if (catalog == this.catalogLength) {
+          this.showCatalogList = [
+            this.catalogLength - 2,
+            this.catalogLength - 1,
+            this.catalogLength,
+          ];
+        } else {
+          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
+        }
+        setTimeout(() => {
+          // 璺宠浆椤电爜
+          const pageDom = (
+            this.container ? this.container : document
+          ).querySelector(`[page="${page}"]`);
+          if (pageDom) {
+            pageDom.scrollIntoView();
+          } else {
+            console.log("椤电爜閿欒锛�");
+          }
+        }, 500);
+      } else {
+        console.log("绔犺妭閿欒锛�");
+      }
+    },
+
+    // 澶勭悊鏍囪鏁版嵁
+    handelSignData(type, data) {
+      if (this.loadPageList.indexOf(Number(data.page)) > -1) {
+        // 绔嬪嵆娓叉煋
+        this.renderSign(type, data);
+      }
+
+      // 鍌ㄥ瓨鏁版嵁
+      if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
+      if (!this.renderSignMap[type][data.page])
+        this.renderSignMap[type][data.page] = [];
+      this.renderSignMap[type][data.page].push(data);
+    },
+
+    // 娓叉煋鏍囪
+    renderSign(type, data) {
+      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) {
+      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, 20);
+          }
+          // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
+          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"
+            );
+            const catalog = catalogDom.getAttribute("num");
+            // if (!this.questionData[page]) {
+            //   if (testData && testData[catalog]) {
+            //     if (testData[catalog][page]) {
+            //       if (Array.isArray(testData[catalog][page])) {
+            //         this.questionData[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.questionData[page] = obj;
+            //       }
+            //       console.log("棰樼洰", this.questionData);
+            //     }
+            //   }
+            // }
+            // 娣诲姞椤电爜
+            this.loadPageList.push(Number(page));
+            // 娓叉煋杩欎竴椤电殑鏍囪
+            for (const key in this.renderSignMap) {
+              if (this.renderSignMap[key][page]) {
+                this.renderSignMap[key][page].forEach((item) => {
+                  this.renderSign(key, item);
+                });
+              }
+            }
+            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, // 鏄剧ず鏍囬
+        });
+      }
+    },
+    // 鐐瑰嚮浜嬩欢锛氬皢鐢熷兓鍗曡瘝浼犵粰 涓诲簲鐢� 浠庤�岃皟鐢ㄨ瘝鍏稿姛鑳�
+    saveCharacters(event, word) {
+      console.log("鐢熷兓瀛�", event, word);
+      if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) {
+        this.$store.state.qiankun.chooseWords({
+          type:"word",
+          word,
+          x: event.pageX,
+          y: event.pageY,
+        });
+      }
+      // chooseWords
+    },
+  },
+  components: {
+    pageHeader,
+    chapterOne,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.page-main {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  .page-content {
+    max-width: 816px;
+    min-width: 375px;
+    margin: 0 auto;
+    padding-bottom: 100px;
+  }
+}
+</style>
diff --git a/src/books/artAndDance/view/index.vue b/src/books/artAndDance/view/index.vue
new file mode 100644
index 0000000..0729ee8
--- /dev/null
+++ b/src/books/artAndDance/view/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="ans-dance" @mouseup="handleMouseUp">
+    <pageContent></pageContent>
+  </div>
+</template>
+
+<script>
+import pageContent from "./components/index.vue";
+export default {
+  name:"ansAndDance",
+  components: {
+    pageContent,
+  },
+  data() {
+    return {};
+  },
+
+  mounted() {},
+  methods: {
+    getParentWithClass(element, className) {
+      while (element.parentElement) {
+        element = element.parentElement;
+        if (element.classList.contains(className)) {
+          return element;
+        }
+      }
+    },
+    handleMouseUp(e) {
+      const selection = (
+        this.container ? this.container : window
+      ).getSelection();
+      const txt = selection.toString();
+      if (selection.type != "none" && txt) {
+        let node = selection.anchorNode.parentNode;
+        let pageHtml = this.getParentWithClass(
+          selection.anchorNode,
+          "page-box"
+        );
+        let chapterDom = this.getParentWithClass(
+          selection.anchorNode,
+          "chapter"
+        );
+        let chapterNum;
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        if (pageHtml) {
+          const page = pageHtml.getAttribute("page");
+          // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶
+          if (this.$store.state.qiankun.windowSelection) {
+            this.$store.state.qiankun.windowSelection({
+              chapterNum,
+              txt,
+              page,
+              x: e.x,
+              y: e.y,
+            });
+          }
+        }
+      } else {
+        if (this.$store.state.qiankun.windowSelection) {
+          this.$store.state.qiankun.windowSelection({
+            chapterNum: "",
+            txt: "",
+            page: "",
+            x: e.x,
+            y: e.y,
+          });
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import "../assets/main.less";
+</style>
\ No newline at end of file
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 72fca05..dd6c066 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -119,7 +119,8 @@
       loadPageObserver: null,
       loadPageList: [],
       questionDataMap: {},
-      renderSignMap: {}
+      renderSignMap: {},
+      highlightData: null
     };
   },
   computed: {
@@ -208,7 +209,7 @@
     }, 500);
 
     // 娴嬭瘯椤甸潰璺宠浆
-    setTimeout(() => {
+    // setTimeout(() => {
       //   this.gotoPage(1, 10);
       //   setTimeout(() => {
       //     this.renderSign("Highlight", {
@@ -231,13 +232,13 @@
       // 妫�绱�
       // console.log(this.searchTextByPage("淇濇姢鍐呰剰鍣ㄥ畼"), "searchTextByPage");
       // 妫�绱㈣烦杞�
-      this.searchItemLocation({
-        catalog: 2,
-        page: 10,
-        txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
-        txtIndex: 57
-      });
-    }, 5000);
+      // this.searchItemLocation({
+      //   catalog: 2,
+      //   page: 10,
+      //   txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
+      //   txtIndex: 57
+      // });
+    // }, 5000);
   },
   methods: {
     // 婊氬姩鐩戝惉
@@ -286,7 +287,7 @@
       this.previousScrollTop = event.target.scrollTop;
     },
     // 绔犺妭銆侀〉闈㈣烦杞�
-    gotoPage(catalog, page, callback) {
+    gotoPage(catalog, page) {
       if (catalog >= 0 && catalog <= this.catalogLength) {
         // 澶勭悊娓叉煋绔犺妭
         if (catalog == 0) {
@@ -307,7 +308,6 @@
           ).querySelector(`[page="${page}"]`);
           if (pageDom) {
             pageDom.scrollIntoView();
-            if (callback) callback();
           } else {
             console.log("椤电爜閿欒锛�");
           }
@@ -604,6 +604,36 @@
                 });
               }
             }
+            // 澶勭悊楂樹寒
+            if (this.highlightData) {
+              // 楂樹寒琛�
+              setTimeout(() => {
+                // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+                const pageTextList = (
+                  this.container ? this.container : 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();
@@ -623,7 +653,7 @@
           autoplay: {
             //鑷姩寮�濮�
             delay: 3000, //鏃堕棿闂撮殧
-            disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+            disableOnInteraction: false //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
           },
           paginationClickable: true,
           slidesPerView: 1, // 涓�缁勪笁涓�
@@ -635,11 +665,11 @@
             ),
             prevEl: (this.container ? this.container : document).querySelector(
               ".swiper-button-prev"
-            ),
+            )
           },
           // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
           observer: true,
-          observeParents: true,
+          observeParents: true
           // // 濡傛灉闇�瑕佸垎椤靛櫒
           // pagination: {
           //   el: (this.container ? this.container : document).querySelector(
@@ -820,38 +850,10 @@
     },
     // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
     searchItemLocation(data) {
+      // 璁板綍楂樹寒淇℃伅
+      this.highlightData = data;
       // 璺宠浆
-      this.gotoPage(data.catalog, data.page, () => {
-        // 楂樹寒琛�
-        const thisPageDom = (
-          this.container ? this.container : document
-        ).querySelector(`[page="${data.page}"]`);
-        if (thisPageDom) {
-          // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
-          const pageTextList = (
-            this.container ? this.container : 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(data.txt);
-            if (txtIndex > -1) {
-              textDom.parentNode.style.transition = "background-color 0.8s";
-              textDom.parentNode.scrollIntoView();
-              textDom.parentNode.backgroundColor = "#79bbf0";
-              setTimeout(() => {
-                textDom.parentNode.backgroundColor = "";
-              }, 2000);
-            }
-          }
-        }
-      });
+      this.gotoPage(data.catalog, data.page, () => {});
     }
   },
   components: {

--
Gitblit v1.9.1