From 39d1f60746dd617b1ab6cde9a48955ce2017b91e Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 25 六月 2024 16:17:13 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/English/assets/images/0048-1.jpg       |    0 
 src/books/English/assets/images/dy2-le1.jpg      |    0 
 src/books/English/view/components/chapter001.vue | 2303 ++++++++++-----------
 src/books/English/assets/images/0025-1.jpg       |    0 
 src/books/English/assets/images/0041-1.jpg       |    0 
 src/books/English/assets/images/dy3-le1.jpg      |    0 
 src/books/English/assets/images/0049-3.jpg       |    0 
 src/books/English/assets/images/0035-1.jpg       |    0 
 src/books/English/assets/main.less               |   54 
 src/books/English/assets/images/0030-1.jpg       |    0 
 src/books/English/assets/images/dy2-le2.jpg      |    0 
 src/books/English/assets/images/0020-1.jpg       |    0 
 src/books/English/assets/images/0049-2.jpg       |    0 
 src/books/English/assets/images/0044-2.jpg       |    0 
 src/books/English/assets/images/0056-1.jpg       |    0 
 src/books/English/assets/images/dy3-le2.jpg      |    0 
 src/books/English/assets/images/0046-1.jpg       |    0 
 src/books/English/assets/images/0054-2.jpg       |    0 
 src/books/English/assets/images/0026-1.jpg       |    0 
 src/books/English/assets/images/0028-1.jpg       |    0 
 src/books/English/assets/images/dy3.jpg          |    0 
 src/books/English/view/components/index.vue      |  121 
 src/books/English/assets/images/dy1-le3.jpg      |    0 
 src/books/English/assets/images/dy3-le3.jpg      |    0 
 src/books/English/assets/images/0034-1.jpg       |    0 
 src/books/English/view/components/chapter003.vue | 1806 +++++++++++++++++
 src/books/English/assets/images/dy2.jpg          |    0 
 src/books/English/assets/images/0044-1.jpg       |    0 
 src/books/English/assets/images/0054-1.jpg       |    0 
 src/books/English/assets/images/0049-5.jpg       |    0 
 src/books/English/assets/images/0059-1.jpg       |    0 
 src/books/English/assets/images/0029-1.jpg       |    0 
 src/books/English/assets/images/0031-3.jpg       |    0 
 src/books/English/assets/images/0055-1.jpg       |    0 
 src/books/English/view/components/chapter002.vue | 2008 +++++++++++++++++++
 src/books/English/assets/images/0049-4.jpg       |    0 
 src/books/English/assets/images/0055-2.jpg       |    0 
 src/books/English/assets/images/0045-2.jpg       |    0 
 src/books/English/assets/images/0027-1.jpg       |    0 
 39 files changed, 5,017 insertions(+), 1,275 deletions(-)

diff --git a/src/books/English/assets/images/0020-1.jpg b/src/books/English/assets/images/0020-1.jpg
new file mode 100644
index 0000000..80584f4
--- /dev/null
+++ b/src/books/English/assets/images/0020-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0025-1.jpg b/src/books/English/assets/images/0025-1.jpg
new file mode 100644
index 0000000..21c2892
--- /dev/null
+++ b/src/books/English/assets/images/0025-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0026-1.jpg b/src/books/English/assets/images/0026-1.jpg
new file mode 100644
index 0000000..3d46361
--- /dev/null
+++ b/src/books/English/assets/images/0026-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0027-1.jpg b/src/books/English/assets/images/0027-1.jpg
new file mode 100644
index 0000000..7f7d969
--- /dev/null
+++ b/src/books/English/assets/images/0027-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0028-1.jpg b/src/books/English/assets/images/0028-1.jpg
new file mode 100644
index 0000000..47cc995
--- /dev/null
+++ b/src/books/English/assets/images/0028-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0029-1.jpg b/src/books/English/assets/images/0029-1.jpg
new file mode 100644
index 0000000..5d1481b
--- /dev/null
+++ b/src/books/English/assets/images/0029-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0030-1.jpg b/src/books/English/assets/images/0030-1.jpg
new file mode 100644
index 0000000..36245ec
--- /dev/null
+++ b/src/books/English/assets/images/0030-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0031-3.jpg b/src/books/English/assets/images/0031-3.jpg
new file mode 100644
index 0000000..5459c44
--- /dev/null
+++ b/src/books/English/assets/images/0031-3.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0034-1.jpg b/src/books/English/assets/images/0034-1.jpg
new file mode 100644
index 0000000..26682e7
--- /dev/null
+++ b/src/books/English/assets/images/0034-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0035-1.jpg b/src/books/English/assets/images/0035-1.jpg
new file mode 100644
index 0000000..60053cb
--- /dev/null
+++ b/src/books/English/assets/images/0035-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0041-1.jpg b/src/books/English/assets/images/0041-1.jpg
new file mode 100644
index 0000000..1d34ef9
--- /dev/null
+++ b/src/books/English/assets/images/0041-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0044-1.jpg b/src/books/English/assets/images/0044-1.jpg
new file mode 100644
index 0000000..81e0042
--- /dev/null
+++ b/src/books/English/assets/images/0044-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0044-2.jpg b/src/books/English/assets/images/0044-2.jpg
new file mode 100644
index 0000000..006f2c3
--- /dev/null
+++ b/src/books/English/assets/images/0044-2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0045-2.jpg b/src/books/English/assets/images/0045-2.jpg
new file mode 100644
index 0000000..d18d000
--- /dev/null
+++ b/src/books/English/assets/images/0045-2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0046-1.jpg b/src/books/English/assets/images/0046-1.jpg
new file mode 100644
index 0000000..6fef7f6
--- /dev/null
+++ b/src/books/English/assets/images/0046-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0048-1.jpg b/src/books/English/assets/images/0048-1.jpg
new file mode 100644
index 0000000..af9e42a
--- /dev/null
+++ b/src/books/English/assets/images/0048-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0049-2.jpg b/src/books/English/assets/images/0049-2.jpg
new file mode 100644
index 0000000..82a36e3
--- /dev/null
+++ b/src/books/English/assets/images/0049-2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0049-3.jpg b/src/books/English/assets/images/0049-3.jpg
new file mode 100644
index 0000000..e0e035e
--- /dev/null
+++ b/src/books/English/assets/images/0049-3.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0049-4.jpg b/src/books/English/assets/images/0049-4.jpg
new file mode 100644
index 0000000..62dcbbe
--- /dev/null
+++ b/src/books/English/assets/images/0049-4.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0049-5.jpg b/src/books/English/assets/images/0049-5.jpg
new file mode 100644
index 0000000..926a611
--- /dev/null
+++ b/src/books/English/assets/images/0049-5.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0054-1.jpg b/src/books/English/assets/images/0054-1.jpg
new file mode 100644
index 0000000..5b01655
--- /dev/null
+++ b/src/books/English/assets/images/0054-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0054-2.jpg b/src/books/English/assets/images/0054-2.jpg
new file mode 100644
index 0000000..542b5ba
--- /dev/null
+++ b/src/books/English/assets/images/0054-2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0055-1.jpg b/src/books/English/assets/images/0055-1.jpg
new file mode 100644
index 0000000..edc9882
--- /dev/null
+++ b/src/books/English/assets/images/0055-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0055-2.jpg b/src/books/English/assets/images/0055-2.jpg
new file mode 100644
index 0000000..6e1b472
--- /dev/null
+++ b/src/books/English/assets/images/0055-2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0056-1.jpg b/src/books/English/assets/images/0056-1.jpg
new file mode 100644
index 0000000..f729254
--- /dev/null
+++ b/src/books/English/assets/images/0056-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0059-1.jpg b/src/books/English/assets/images/0059-1.jpg
new file mode 100644
index 0000000..6f6b2d8
--- /dev/null
+++ b/src/books/English/assets/images/0059-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy1-le3.jpg b/src/books/English/assets/images/dy1-le3.jpg
new file mode 100644
index 0000000..8a2eece
--- /dev/null
+++ b/src/books/English/assets/images/dy1-le3.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy2-le1.jpg b/src/books/English/assets/images/dy2-le1.jpg
new file mode 100644
index 0000000..2b96de4
--- /dev/null
+++ b/src/books/English/assets/images/dy2-le1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy2-le2.jpg b/src/books/English/assets/images/dy2-le2.jpg
new file mode 100644
index 0000000..28d8dfc
--- /dev/null
+++ b/src/books/English/assets/images/dy2-le2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy2.jpg b/src/books/English/assets/images/dy2.jpg
new file mode 100644
index 0000000..5d6b01f
--- /dev/null
+++ b/src/books/English/assets/images/dy2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy3-le1.jpg b/src/books/English/assets/images/dy3-le1.jpg
new file mode 100644
index 0000000..05d9fe2
--- /dev/null
+++ b/src/books/English/assets/images/dy3-le1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy3-le2.jpg b/src/books/English/assets/images/dy3-le2.jpg
new file mode 100644
index 0000000..033aec5
--- /dev/null
+++ b/src/books/English/assets/images/dy3-le2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy3-le3.jpg b/src/books/English/assets/images/dy3-le3.jpg
new file mode 100644
index 0000000..5513c6b
--- /dev/null
+++ b/src/books/English/assets/images/dy3-le3.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy3.jpg b/src/books/English/assets/images/dy3.jpg
new file mode 100644
index 0000000..de585e8
--- /dev/null
+++ b/src/books/English/assets/images/dy3.jpg
Binary files differ
diff --git a/src/books/English/assets/main.less b/src/books/English/assets/main.less
index b9457af..2ba9808 100644
--- a/src/books/English/assets/main.less
+++ b/src/books/English/assets/main.less
@@ -755,6 +755,24 @@
   .event-text-color {
     color: #639bc2;
   }
+  .event-header-bc-unit2 {
+    background: linear-gradient(to right, #bc5a74, #fff);
+  }
+  .event-header-text-bc-unit2 {
+    background-color: #f0d1c8;
+  }
+  .event-text-color-unit2 {
+    color: #bc5a74;
+  }
+  .event-header-bc-unit3 {
+    background: linear-gradient(to right, #3ab186, #fff);
+  }
+  .event-header-text-bc-unit3 {
+    background-color: #cbe6d3;
+  }
+  .event-text-color-unit3 {
+    color: #3ab186;
+  }
   .y-bc {
     background-color: #f3e3c7;
   }
@@ -841,14 +859,41 @@
     .chapter-left-bc {
       background-color: #639bc2;
     }
+    .chapter-left-bc-unit2 {
+      background-color: #bc5a74;
+    }
+    .chapter-left-bc-unit3 {
+      background-color: #3ab186;
+    }
     .chapter-right-bc {
       background-color: #bbd4ec;
+    }
+    .chapter-right-bc-unit2 {
+      background-color: #f0d1c8;
+      padding-right: 10%;
+    }
+    .chapter-right-bc-unit3 {
+      background-color: #cbe6d3;
+      padding-right: 10%;
     }
     .chapter-right-cl {
       color: #639bc2;
     }
+    .chapter-right-cl-unit2 {
+      color: #bc5a74;
+    }
+    .chapter-right-cl-unit3 {
+      color: #3ab186;
+    }
   }
-  .parimary-btn {
+  .tl-w-45{
+      width: 45%;
+    }
+    .mr-rg{
+      margin-right: 0;
+
+    }
+    .parimary-btn {
     min-width: 80px;
     height: 30px;
     font-size: 14px;
@@ -906,6 +951,9 @@
   .tl-cn {
     text-align: center;
   }
+  .tl-left{
+    text-align: left;
+  }
   .b0 {
     border: 0;
   }
@@ -955,6 +1003,10 @@
     word-break: break-all;
     resize: none;
   }
+  .textarea-box-right{
+    width: 500px;
+    height: 36px;
+  }
 }
 /* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
 @media (max-width: 660px) {
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 109862d..9af3354 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -26,10 +26,7 @@
     <div class="page-box" page="8">
       <div v-if="showPageList.indexOf(8) > -1">
         <div class="w100 mb-20" style="padding-right: 20px">
-          <div
-            class="event-header-bc fl al-end"
-            style="height: 100px; padding-left: 40px"
-          >
+          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
             <div class="preface-header-box event-header-text-bc">
               <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
               <span class="g-text event-text-color">鍩虹妯″潡涓�</span>
@@ -43,22 +40,13 @@
             </h2>
             <h3 id="c001"><span class="bjh3">Warm-up</span></h3>
             <p>
-              <b
-                >鈪�.Write down the English words for the Chinese cultural symbols
-                in the following pictures.</b
-              >
+              <b>鈪�.Write down the English words for the Chinese cultural symbols
+                in the following pictures.</b>
               <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20.501"
-                  height="20.501"
-                  viewBox="0 0 20.501 20.501"
-                >
-                  <path
-                    class="a"
+                <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)"
-                  />
+                    transform="translate(-3327.144 15329)" />
                 </svg>
               </span>
             </p>
@@ -70,120 +58,57 @@
                       <img src="../../assets/images/0012-1.jpg" class="w100" />
                     </p>
                     <p class="center">
-                      1.<input
-                        v-model="questionData.warnUp.one.value"
-                        class="input-bottom-border fz-18"
-                        @blur="handleQuestion('one')"
-                        @change="setBookQuestion"
-                      />
+                      1.<input v-model="questionData.warnUp.one.value" class="input-bottom-border fz-18"
+                        @blur="handleQuestion('one')" @change="setBookQuestion" />
                       <span class="icon-box">
-                        <svg
-                          v-if="questionData.warnUp.one.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.one.isRight" t="1716986419862" class="icon"
+                          viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="questionData.warnUp.one.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.one.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerTwo"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                     绛旀锛欳hinese knot
                   </p>
                 </div>
                 <div class="right" style="width: 48%">
                   <div>
                     <p class="center">
-                      <img
-                        src="../../assets/images/0012-2.jpg"
-                        style="width: 94%"
-                      />
+                      <img src="../../assets/images/0012-2.jpg" style="width: 94%" />
                     </p>
                     <p class="center">
-                      2.<input
-                        class="input-bottom-border fz-18"
-                        v-model="questionData.warnUp.two.value"
-                        @blur="handleQuestion('two')"
-                        @change="setBookQuestion"
-                      />
+                      2.<input class="input-bottom-border fz-18" v-model="questionData.warnUp.two.value"
+                        @blur="handleQuestion('two')" @change="setBookQuestion" />
                       <span class="icon-box">
-                        <svg
-                          v-if="questionData.warnUp.two.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.two.isRight" t="1716986419862" class="icon"
+                          viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="questionData.warnUp.two.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.two.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerTwo"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                     绛旀锛欳hinese medicine
                   </p>
                 </div>
@@ -196,120 +121,57 @@
                       <img src="../../assets/images/0012-3.jpg" class="w100" />
                     </p>
                     <p class="center">
-                      3.<input
-                        class="input-bottom-border fz-18"
-                        v-model="questionData.warnUp.three.value"
-                        @blur="handleQuestion('three')"
-                        @change="setBookQuestion"
-                      />
+                      3.<input class="input-bottom-border fz-18" v-model="questionData.warnUp.three.value"
+                        @blur="handleQuestion('three')" @change="setBookQuestion" />
                       <span class="icon-box">
-                        <svg
-                          v-if="questionData.warnUp.three.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.three.isRight" t="1716986419862" class="icon"
+                          viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="questionData.warnUp.three.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.three.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerTwo"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                     绛旀锛欳hinese calligraphy
                   </p>
                 </div>
                 <div class="right" style="width: 48%">
                   <div>
                     <p class="center">
-                      <img
-                        src="../../assets/images/0012-4.jpg"
-                        style="width: 93%"
-                      />
+                      <img src="../../assets/images/0012-4.jpg" style="width: 93%" />
                     </p>
                     <p class="center">
-                      4.<input
-                        class="input-bottom-border fz-18"
-                        v-model="questionData.warnUp.four.value"
-                        @blur="handleQuestion('four')"
-                        @change="setBookQuestion"
-                      />
+                      4.<input class="input-bottom-border fz-18" v-model="questionData.warnUp.four.value"
+                        @blur="handleQuestion('four')" @change="setBookQuestion" />
                       <span class="icon-box">
-                        <svg
-                          v-if="questionData.warnUp.four.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.four.isRight" t="1716986419862" class="icon"
+                          viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="questionData.warnUp.four.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.four.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerTwo"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                     绛旀锛歍aichi
                   </p>
                 </div>
@@ -322,120 +184,57 @@
                       <img src="../../assets/images/0012-5.jpg" class="w100" />
                     </p>
                     <p class="center">
-                      5.<input
-                        class="input-bottom-border fz-18"
-                        v-model="questionData.warnUp.five.value"
-                        @blur="handleQuestion('five')"
-                        @change="setBookQuestion"
-                      />
+                      5.<input class="input-bottom-border fz-18" v-model="questionData.warnUp.five.value"
+                        @blur="handleQuestion('five')" @change="setBookQuestion" />
                       <span class="icon-box">
-                        <svg
-                          v-if="questionData.warnUp.five.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.five.isRight" t="1716986419862" class="icon"
+                          viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="questionData.warnUp.five.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.five.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerTwo"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                     绛旀锛歴weet dumpling
                   </p>
                 </div>
                 <div class="right" style="width: 48%">
                   <div>
                     <p class="center">
-                      <img
-                        src="../../assets/images/0012-6.jpg"
-                        style="width: 92%"
-                      />
+                      <img src="../../assets/images/0012-6.jpg" style="width: 92%" />
                     </p>
                     <p class="center">
-                      6.<input
-                        class="input-bottom-border fz-18"
-                        v-model="questionData.warnUp.six.value"
-                        @blur="handleQuestion('six')"
-                        @change="setBookQuestion"
-                      />
+                      6.<input class="input-bottom-border fz-18" v-model="questionData.warnUp.six.value"
+                        @blur="handleQuestion('six')" @change="setBookQuestion" />
                       <span class="icon-box">
-                        <svg
-                          v-if="questionData.warnUp.six.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.six.isRight" t="1716986419862" class="icon"
+                          viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="questionData.warnUp.six.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="questionData.warnUp.six.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerTwo"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                     绛旀锛欳hinese chess
                   </p>
                 </div>
@@ -450,32 +249,17 @@
                 鏄剧ず绛旀
               </button> -->
               <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20.501"
-                  height="20.501"
-                  viewBox="0 0 20.501 20.501"
-                >
-                  <path
-                    class="a"
+                <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)"
-                  />
+                    transform="translate(-3327.144 15329)" />
                 </svg>
               </span>
             </p>
             <p class="t0">
-              <input
-                v-model="questionData.warnUp.seven"
-                class="input-bottom-border fz-18"
-                style="width: 100%"
-              />
+              <input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" style="width: 100%" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="width: 100%"
-              v-if="showAnswerOne"
-            >
+            <p class="event-header-text-bc pd-5" style="width: 100%" v-if="showAnswerOne">
               绛旀锛�1. Hanfu 2. Qipao 3. Tang Suit 4. Chinese tea 5. Chinese
               silk 6. Chinese calligraphy & painting 7. Chinese embroidery 8.
               Chinese papercut 9. Chinese lantern 10. Moon cake 11. Memorial
@@ -496,28 +280,19 @@
           <li class=""></li>
           <li class="fz-18">
             <span class="chapter-left-bc">MODULE 1</span>
-            <span class="chapter-right-bc fw-bl chapter-right-cl"
-              >CHINA,A WONDERLAND</span
-            >
+            <span class="chapter-right-bc fw-bl chapter-right-cl">CHINA,A WONDERLAND</span>
           </li>
-        </ul>
+        </ul>a
         <div class="padding-102">
           <div class="bodystyle">
             <h3 id="c002" class="fl al-cn">
               <span class="bjh3">Listening</span>
-              <audio
-                :src="resource.listenOne"
-                controls
-                class="audio"
-                @play="audioPlay"
-              ></audio>
+              <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
             </h3>
             <p>
-              <b
-                >Four foreigners are talking about their impressions on Chinese
+              <b>Four foreigners are talking about their impressions on Chinese
                 culture.Listen to the recording and match the items with the
-                corresponding descriptions.</b
-              >
+                corresponding descriptions.</b>
             </p>
             <!-- <p class="center">
               <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
@@ -531,12 +306,7 @@
             </div>
             <h3 id="c003" class="fl al-cn">
               <span class="bjh3">Reading</span>
-              <audio
-                :src="resource.readingOne"
-                controls
-                class="audio"
-                @play="audioPlay"
-              ></audio>
+              <audio :src="resource.readingOne" controls class="audio" @play="audioPlay"></audio>
             </h3>
             <p>
               1.How was Chinese culture introduced to the world in ancient
@@ -548,33 +318,16 @@
                 鏄剧ず绛旀
               </button> -->
               <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20.501"
-                  height="20.501"
-                  viewBox="0 0 20.501 20.501"
-                >
-                  <path
-                    class="a"
+                <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)"
-                  />
+                    transform="translate(-3327.144 15329)" />
                 </svg>
               </span>
             </p>
-            <textarea
-              v-model="questionData.reading.one"
-              placeholder="璇疯緭鍏ュ唴瀹�"
-              rows="6"
-              style="margin-left: 40px; width: 92%"
-              class="fz-16 fm-son"
-              @change="setBookQuestion"
-            ></textarea>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 91%"
-              v-if="showAnswerThree"
-            >
+            <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
               绛旀锛歍he Silk Road &nbsp;&nbsp;&nbsp; Immigrants Sinologist
             </p>
             <p>
@@ -587,33 +340,16 @@
                 鏄剧ず绛旀
               </button> -->
               <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20.501"
-                  height="20.501"
-                  viewBox="0 0 20.501 20.501"
-                >
-                  <path
-                    class="a"
+                <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)"
-                  />
+                    transform="translate(-3327.144 15329)" />
                 </svg>
               </span>
             </p>
-            <textarea
-              v-model="questionData.reading.two"
-              placeholder="璇疯緭鍏ュ唴瀹�"
-              rows="6"
-              style="margin-left: 40px; width: 92%"
-              class="fz-16 fm-son"
-              @change="setBookQuestion"
-            ></textarea>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 91%"
-              v-if="showAnswerFour"
-            >
+            <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
               绛旀锛�(1)Various delicious food (2)Unique architectures
               (3)Beautiful (4)Intangible cultural heritage, such as Taichi,
               shadow puppet show, traditional Chinese medicine, Peking Opera
@@ -629,41 +365,29 @@
             </p>
             <p>
               My
-              <span class="word-bc" @click="saveWord($event, 'incredible')"
-                >incredible</span
-              >
+              <span class="word-bc" @click="saveWord($event, 'incredible')">incredible</span>
               journey to China started in 2017 when I got selected as a foreign
               student for PhD studies at one university.When I arrived in
               China,I was like Alice in Alice in Wonderland.I was curious about
               the people,the culture,the
-              <span class="word-bc" @click="saveWord($event, 'cuisine')"
-                >cuisine</span
-              >
+              <span class="word-bc" @click="saveWord($event, 'cuisine')">cuisine</span>
               and of course the huge variety of
-              <span class="word-bc" @click="saveWord($event, 'landscapes')"
-                >landscapes</span
-              >.
+              <span class="word-bc" @click="saveWord($event, 'landscapes')">landscapes</span>.
             </p>
             <p>
               I found many great people and made several Chinese friends along
               the way.These friends made me see China through the eyes of the
               locals.I always found Chinese people very friendly and
-              <span class="word-bc" @click="saveWord($event, 'hospitable')"
-                >hospitable</span
-              >
+              <span class="word-bc" @click="saveWord($event, 'hospitable')">hospitable</span>
               towards foreigners.These Chinese friends made my understanding of
               Chinese culture and
-              <span class="word-bc" @click="saveWord($event, 'civilization')"
-                >civilization</span
-              >
+              <span class="word-bc" @click="saveWord($event, 'civilization')">civilization</span>
               much easier,enjoyable and memorable.I consider China my second
               home and love it like my own country!
             </p>
             <p>
               You cannot
-              <span class="word-bc" @click="saveWord($event, 'explore')"
-                >explore</span
-              >
+              <span class="word-bc" @click="saveWord($event, 'explore')">explore</span>
               China properly if you do not try its delicious variety of food.If
               you ate
             </p>
@@ -678,10 +402,7 @@
     <div class="page-box" page="10">
       <div v-if="showPageList.indexOf(10) > -1">
         <div class="w100 mb-20" style="padding-right: 20px">
-          <div
-            class="event-header-bc fl al-end"
-            style="height: 100px; padding-left: 40px"
-          >
+          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
             <div class="preface-header-box event-header-text-bc">
               <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
               <span class="g-text event-text-color">鍩虹妯″潡涓�</span>
@@ -695,16 +416,10 @@
               Chinese food would still never end! Though I love to eat almost
               all kinds of Chinese cuisine,I found Sichuan and Hunan cuisine
               quite
-              <span class="word-bc" @click="saveWord($event, 'mouth-watering')"
-                >mouth-watering</span
-              >
+              <span class="word-bc" @click="saveWord($event, 'mouth-watering')">mouth-watering</span>
               and
-              <span class="word-bc" @click="saveWord($event, 'stimulating')"
-                >stimulating</span
-              >.For a
-              <span class="word-bc" @click="saveWord($event, 'foodie')"
-                >foodie</span
-              >
+              <span class="word-bc" @click="saveWord($event, 'stimulating')">stimulating</span>.For a
+              <span class="word-bc" @click="saveWord($event, 'foodie')">foodie</span>
               like me,China is a heaven.I simply cannot live without Chinese
               food.
             </p>
@@ -714,15 +429,8 @@
               its own story and history.From the big and advanced cities like
               Shanghai or Guangzhou to the ancient cities like Xi鈥檃n and
               Hangzhou,each city has its
-              <span class="word-bc" @click="saveWord($event, 'unique')"
-                >unique</span
-              >
-              <span
-                class="word-bc"
-                style="margin-left: 5px"
-                @click="saveWord($event, 'atmosphere')"
-                >atmosphere</span
-              >
+              <span class="word-bc" @click="saveWord($event, 'unique')">unique</span>
+              <span class="word-bc" style="margin-left: 5px" @click="saveWord($event, 'atmosphere')">atmosphere</span>
               that attracts you.I visited more than a dozen cities and came
               across their charming features and unique landscapes such as
               Huangshan,the Great Wall,Canton Tower.
@@ -736,18 +444,11 @@
               <img class="img-g" alt="" src="../../assets/images/0014-1.jpg" />
             </p> -->
             <p class="fl al-cn mt-40">
-              <span class="zt-cs" style="font-size: 20px"
-                >Words &amp; Expressions</span
-              >
+              <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
               <span class="line-border-box"></span>
             </p>
-            <audio
-              :src="resource.readingTwo"
-              controls
-              style="margin-left: 10px"
-              class="audio"
-              @play="audioPlay"
-            ></audio>
+            <audio :src="resource.readingTwo" controls style="margin-left: 10px" class="audio"
+              @play="audioPlay"></audio>
             <p>wonderland /藞w蕦nd蓹l忙nd/ <i>n.</i> 鏈夎澶氬濡欎簨鐗╃殑鍦版柟</p>
             <div class="bkbj">
               <p><i>land or place full of marvels or wonderful things</i></p>
@@ -761,9 +462,7 @@
             </p>
             <div class="bkbj">
               <p>
-                <i
-                  >the food served in a restaurant (usually an expensive one)</i
-                >
+                <i>the food served in a restaurant (usually an expensive one)</i>
               </p>
             </div>
             <p>landscape /藞l忙ndske瑟p/ <i>n.</i> 锛堥檰涓婏級 椋庢櫙锛屾櫙鑹�</p>
@@ -780,20 +479,16 @@
             </p>
             <div class="bkbj">
               <p>
-                <i
-                  >a society,its culture and its way of life (during a
+                <i>a society,its culture and its way of life (during a
                   particular period of time or in a particular part of the
-                  world)</i
-                >
+                  world)</i>
               </p>
             </div>
             <p>explore /瑟k藞spl蓴藧(r)/ <i>v.</i> 鎺㈢储锛涜�冨療</p>
             <div class="bkbj">
               <p>
-                <i
-                  >to travel into or around an area or a country in order to
-                  learn about it</i
-                >
+                <i>to travel into or around an area or a country in order to
+                  learn about it</i>
               </p>
             </div>
             <p>mouth-watering <i>adj.</i> 浠や汉鍨傛稁鐨勶紱缇庡懗鐨�</p>
@@ -814,9 +509,7 @@
           <li class=""></li>
           <li class="fz-18">
             <span class="chapter-left-bc">MODULE 1</span>
-            <span class="chapter-right-bc fw-bl chapter-right-cl"
-              >CHINA,A WONDERLAND</span
-            >
+            <span class="chapter-right-bc fw-bl chapter-right-cl">CHINA,A WONDERLAND</span>
           </li>
         </ul>
         <div class="padding-93">
@@ -826,31 +519,25 @@
             </p>
             <div class="bkbj">
               <p>
-                <i>making you feel more active and healthy</i> 
+                <i>making you feel more active and healthy</i>
               </p>
             </div>
             <p>foodie /藞fu藧di/<i>n.</i> 鍚冭揣锛涚編椋熷</p>
             <div class="bkbj">
               <p>
-                <i
-                >a person who is very interested in cooking and eating different
-                kinds of food</i
-              >
+                <i>a person who is very interested in cooking and eating
+                  different kinds of food</i>
               </p>
             </div>
-            <p>
-              unique /ju<i>藞</i>ni藧k/ <i>adj.</i> 鍞竴鐨勶紱鐙竴鏃犱簩鐨�
-            </p>
+            <p>unique /ju<i>藞</i>ni藧k/ <i>adj.</i> 鍞竴鐨勶紱鐙竴鏃犱簩鐨�</p>
             <div class="bkbj">
               <p><i>being the only one of its type</i></p>
             </div>
             <p>atmosphere /藞忙tm蓹sf瑟蓹(r)/ <i>n.</i> 姘旀皼锛涙皼鍥�</p>
             <div class="bkbj">
               <p>
-                <i
-                  >the feeling or mood that you have in a particular place or
-                  situation</i
-                >
+                <i>the feeling or mood that you have in a particular place or
+                  situation</i>
               </p>
             </div>
             <ul class="w100 fl fw-wr">
@@ -868,9 +555,8 @@
             <div class="bj-note">
               <p class="m0"><b class="fz-18">Notes:</b></p>
               <p class="m0">
-                <i>Alice in Wonderland</i> 锛�<i
-                  >Alice's Adventures in Wonderland</i
-                >鐨勭畝鍐欙紝涓枃璇戜负銆婄埍涓戒笣姊︽父浠欏銆嬶級锛屾槸19涓栫邯鑻卞浗浣滃鍒樻槗鏂峰崱缃楀皵鍒涗綔鐨勮憲鍚嶅効绔ユ枃瀛︿綔鍝侊紝璁茶堪浜嗕竴涓悕鍙埍涓戒笣鐨勮嫳鍥藉皬濂冲涓轰簡杩介�愪竴鍙彛鐫�鎬�琛ㄣ�佷細璇磋瘽鐨勫厰瀛愯�屼笉鎱庢帀鍏ヤ簡鍏斿瓙娲烇紝浠庤�岃繘鍏ヤ簡涓�涓濂囩殑鍥藉害骞剁粡鍘嗕簡涓�绯诲垪濂囧够鍐掗櫓鐨勬晠浜嬨��
+                <i>Alice in Wonderland</i> 锛�<i>Alice's Adventures in
+                  Wonderland</i>鐨勭畝鍐欙紝涓枃璇戜负銆婄埍涓戒笣姊︽父浠欏銆嬶級锛屾槸19涓栫邯鑻卞浗浣滃鍒樻槗鏂峰崱缃楀皵鍒涗綔鐨勮憲鍚嶅効绔ユ枃瀛︿綔鍝侊紝璁茶堪浜嗕竴涓悕鍙埍涓戒笣鐨勮嫳鍥藉皬濂冲涓轰簡杩介�愪竴鍙彛鐫�鎬�琛ㄣ�佷細璇磋瘽鐨勫厰瀛愯�屼笉鎱庢帀鍏ヤ簡鍏斿瓙娲烇紝浠庤�岃繘鍏ヤ簡涓�涓濂囩殑鍥藉害骞剁粡鍘嗕簡涓�绯诲垪濂囧够鍐掗櫓鐨勬晠浜嬨��
               </p>
             </div>
             <p><b>鈪�.Reading comprehension.</b></p>
@@ -879,80 +565,34 @@
               China.
             </p>
             <p>
-              <input
-                type="checkbox"
-                name="ball"
-                value="Language"
-                id="1"
-                v-model="testData.check"
-              />
+              <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
               Language
             </p>
             <p>
-              <input
-                type="checkbox"
-                name="ball"
-                value="People"
-                id="2"
-                v-model="testData.check"
-              />
+              <input type="checkbox" name="ball" value="People" id="2" v-model="testData.check" />
               People
             </p>
             <p>
-              <input
-                type="checkbox"
-                name="ball"
-                value="Culture"
-                id="3"
-                v-model="testData.check"
-              />
+              <input type="checkbox" name="ball" value="Culture" id="3" v-model="testData.check" />
               Culture
             </p>
             <p>
-              <input
-                type="checkbox"
-                name="ball"
-                value="Cuisine"
-                id="4"
-                v-model="testData.check"
-              />
+              <input type="checkbox" name="ball" value="Cuisine" id="4" v-model="testData.check" />
               Cuisine
             </p>
             <p>
-              <input
-                type="checkbox"
-                name="ball"
-                value="Folk"
-                id="5"
-                v-model="testData.check"
-              />
+              <input type="checkbox" name="ball" value="Folk" id="5" v-model="testData.check" />
               Folk art
             </p>
             <p>
-              <input
-                type="checkbox"
-                name="ball"
-                value="Landscapes"
-                id="6"
-                v-model="testData.check"
-              />
+              <input type="checkbox" name="ball" value="Landscapes" id="6" v-model="testData.check" />
               Landscapes
             </p>
             <p>
-              <input
-                type="checkbox"
-                name="ball"
-                value="Transportation"
-                id="7"
-                v-model="testData.check"
-              />
+              <input type="checkbox" name="ball" value="Transportation" id="7" v-model="testData.check" />
               Transportation
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 35px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 35px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛欳ulture,Cuisine,Landscapes
             </p>
           </div>
@@ -966,10 +606,7 @@
     <div class="page-box" page="12">
       <div v-if="showPageList.indexOf(12) > -1">
         <div class="w100 mb-20" style="padding-right: 20px">
-          <div
-            class="event-header-bc fl al-end"
-            style="height: 100px; padding-left: 40px"
-          >
+          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
             <div class="preface-header-box event-header-text-bc">
               <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
               <span class="g-text event-text-color">鍩虹妯″潡涓�</span>
@@ -982,82 +619,37 @@
               B.Write down the answer to each question according to the passage.
             </p>
             <p>1.What鈥檙e the author鈥檚 comments about Chinese food?</p>
-            <textarea
-              v-model="testData.tx.one"
-              placeholder="璇疯緭鍏ュ唴瀹�"
-              rows="4"
-              style="margin-left: 40px; width: 92%"
-              class="fz-16 textarea-text"
-            ></textarea>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <textarea v-model="testData.tx.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="4" style="margin-left: 40px; width: 92%"
+              class="fz-16 textarea-text"></textarea>
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛欳hinese food is very delicious. Sichuan and Hunan cuisines
               are quite mouth-watering and stimulating.
             </p>
             <p>2.When and why did the author start her journey to China?</p>
-            <textarea
-              v-model="testData.tx.two"
-              placeholder="璇疯緭鍏ュ唴瀹�"
-              rows="4"
-              style="margin-left: 40px; width: 92%"
-              class="fz-16 textarea-text"
-            ></textarea>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <textarea v-model="testData.tx.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="4" style="margin-left: 40px; width: 92%"
+              class="fz-16 textarea-text"></textarea>
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛歐hen the author got selected as a foreign student for PhD
               studies at one university in 2017, she started her journey to
               China.
             </p>
             <p>3.What are the author鈥檚 expectations of her stay in China?</p>
-            <textarea
-              v-model="testData.tx.three"
-              placeholder="璇疯緭鍏ュ唴瀹�"
-              rows="4"
-              style="margin-left: 40px; width: 92%"
-              class="fz-16 textarea-text"
-            ></textarea>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <textarea v-model="testData.tx.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="4" style="margin-left: 40px; width: 92%"
+              class="fz-16 textarea-text"></textarea>
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛歍he author looks forward to exploring more during her stay.
             </p>
             <p>4.What did the author think of Chinese people?</p>
-            <textarea
-              v-model="testData.tx.four"
-              placeholder="璇疯緭鍏ュ唴瀹�"
-              rows="4"
-              style="margin-left: 40px; width: 92%"
-              class="fz-16 textarea-text"
-            ></textarea>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <textarea v-model="testData.tx.four" placeholder="璇疯緭鍏ュ唴瀹�" rows="4" style="margin-left: 40px; width: 92%"
+              class="fz-16 textarea-text"></textarea>
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛歍he author thought the local Chinese were very friendly and
               hospitable.
             </p>
             <p>5.What鈥檚 the author鈥檚 impression of the cities in China?</p>
-            <textarea
-              v-model="testData.tx.five"
-              placeholder="璇疯緭鍏ュ唴瀹�"
-              rows="4"
-              style="margin-left: 40px; width: 92%"
-              class="fz-16 textarea-text"
-            ></textarea>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <textarea v-model="testData.tx.five" placeholder="璇疯緭鍏ュ唴瀹�" rows="4" style="margin-left: 40px; width: 92%"
+              class="fz-16 textarea-text"></textarea>
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛欵ach city has its unique atmosphere with charming features
               and unique landscapes.
             </p>
@@ -1071,42 +663,20 @@
             <p>
               In 2017,the author arrived in China.When she arrived,she was like
               Alice in <i>Alice in Wonderland</i>.She was curious about the
-              people,the culture,the c<input
-                type="text"
-                class="input-bottom-border"
-                style="width: 60px"
-                v-model="testData.in.one"
-              />
-              ,and of course the huge variety of l<input
-                v-model="testData.in.two"
-                type="text"
-                class="input-bottom-border"
-                style="width: 60px"
-              />.Chinese friends helped her a lot in understanding Chinese
-              culture and c<input
-                v-model="testData.in.three"
-                type="text"
-                class="input-bottom-border"
-                style="width: 60px"
-              />.The author believes that one cannot e<input
-                type="text"
-                v-model="testData.in.four"
-                class="input-bottom-border"
-                style="width: 60px"
-              />China properly if he/she does not try its delicious variety of
+              people,the culture,the c<input type="text" class="input-bottom-border" style="width: 60px"
+                v-model="testData.in.one" />
+              ,and of course the huge variety of l<input v-model="testData.in.two" type="text"
+                class="input-bottom-border" style="width: 60px" />.Chinese friends helped her a lot in understanding
+              Chinese
+              culture and c<input v-model="testData.in.three" type="text" class="input-bottom-border"
+                style="width: 60px" />.The author believes that one cannot e<input type="text"
+                v-model="testData.in.four" class="input-bottom-border" style="width: 60px" />China properly if he/she
+              does not try its delicious variety of
               food.China has thousands of years of rich and beautiful
-              culture.Each city has its u<input
-                v-model="testData.in.five"
-                type="text"
-                class="input-bottom-border"
-                style="width: 60px"
-              />atmosphere that attracts people.
+              culture.Each city has its u<input v-model="testData.in.five" type="text" class="input-bottom-border"
+                style="width: 60px" />atmosphere that attracts people.
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛歝uisine, landscapes, civilization, explore, unique
             </p>
             <p>
@@ -1114,82 +684,42 @@
               sentences with them.
             </p>
             <p>
-              1.get selected as<input
-                v-model="testData.line.one"
-                type="text"
-                class="input-bottom-border"
-                style="width: 77%"
-              />
+              1.get selected as<input v-model="testData.line.one" type="text" class="input-bottom-border"
+                style="width: 77%" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛歋he got selected as the cultural ambassador to show Chinese
               culture on campus.
             </p>
             <p>
-              2.be curious about<input
-                v-model="testData.line.two"
-                type="text"
-                class="input-bottom-border"
-                style="width: 75%"
-              />
+              2.be curious about<input v-model="testData.line.two" type="text" class="input-bottom-border"
+                style="width: 75%" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛歁any foreigners are curious about the amazing Chinese
               martial arts.
             </p>
             <p>
-              3.along the way<input
-                v-model="testData.line.three"
-                type="text"
-                class="input-bottom-border"
-                style="width: 77%"
-              />
+              3.along the way<input v-model="testData.line.three" type="text" class="input-bottom-border"
+                style="width: 77%" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛欼 suggest that you go to Tibet by train so that you can
               enjoy the natural scenery along the way.
             </p>
             <p>
-              4.come across<input
-                v-model="testData.line.four"
-                type="text"
-                class="input-bottom-border"
-                style="width: 79%"
-              />
+              4.come across<input v-model="testData.line.four" type="text" class="input-bottom-border"
+                style="width: 79%" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛欻e came across the temple fair in Beijing during the Spring
               Festival.
             </p>
             <p>
-              5.look forward to<input
-                v-model="testData.line.five"
-                type="text"
-                class="input-bottom-border"
-                style="width: 76%"
-              />
+              5.look forward to<input v-model="testData.line.five" type="text" class="input-bottom-border"
+                style="width: 76%" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛歋he is looking forward to visiting the incredible cities in
               China.
             </p>
@@ -1207,9 +737,7 @@
           <li class=""></li>
           <li class="fz-18">
             <span class="chapter-left-bc">MODULE 1</span>
-            <span class="chapter-right-bc fw-bl chapter-right-cl"
-              >CHINA,A WONDERLAND</span
-            >
+            <span class="chapter-right-bc fw-bl chapter-right-cl">CHINA,A WONDERLAND</span>
           </li>
         </ul>
         <div class="padding-93">
@@ -1220,17 +748,9 @@
               people.
             </p>
             <p>
-              <input
-                v-model="testData.ts.one"
-                type="text"
-                class="input-bottom-border"
-              />
+              <input v-model="testData.ts.one" type="text" class="input-bottom-border" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛氬瓟瀛愬紑鍒涗簡骞虫皯鍖栫殑鏁欒偛銆�
             </p>
             <p>
@@ -1238,17 +758,9 @@
               greatly promoted the development of ancient Chinese civilization.
             </p>
             <p>
-              <input
-                v-model="testData.ts.two"
-                type="text"
-                class="input-bottom-border"
-              />
+              <input v-model="testData.ts.two" type="text" class="input-bottom-border" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛氬珮绁栧彂鏄庝簡涓浗缂笣鎶�鏈紝杩欐瀬澶у湴淇冭繘浜嗕腑鍥藉彜浠f枃鏄庣殑鍙戝睍銆�
             </p>
             <p>
@@ -1256,17 +768,9 @@
               tea culture in depth.
             </p>
             <p>
-              <input
-                v-model="testData.ts.three"
-                type="text"
-                class="input-bottom-border"
-              />
+              <input v-model="testData.ts.three" type="text" class="input-bottom-border" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛氶檰缇斤紝銆婅尪缁忋�嬬殑浣滆�咃紝瀵逛腑鍥借尪閬撹繘琛屼簡娣卞叆鐨勭爺绌躲��
             </p>
             <p>
@@ -1274,63 +778,33 @@
               Chinese medical science.
             </p>
             <p>
-              <input
-                v-model="testData.ts.four"
-                type="text"
-                class="input-bottom-border"
-              />
+              <input v-model="testData.ts.four" type="text" class="input-bottom-border" />
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛氬紶浠叉櫙鏄竴浣嶅涓浗鍖诲鏈夌潃閲嶅ぇ褰卞搷鐨勫尰瀛﹀銆�
             </p>
             <p>
               <b>鈪�.Grammar focus:The conditional sentence鈥攊f-clause.</b>
               <span class="btn-box" @click="showAnswer('showImg')">
-                <svg
-                  t="1717037443722"
-                  class="icon"
-                  viewBox="0 0 1024 1024"
-                  version="1.1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  p-id="30864"
-                  xmlns:xlink="http://www.w3.org/1999/xlink"
-                  width="20"
-                  height="20"
-                >
+                <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                  xmlns="http://www.w3.org/2000/svg" p-id="30864" xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
+                  height="20">
                   <path
                     d="M387.2 471.152l-154.768 258.72v103.488h515.792V626.384l-149.12 103.488z m283.712-51.744a77.632 77.632 0 1 0 77.392 77.616 77.504 77.504 0 0 0-77.472-77.616zM640 0H160.72A96.736 96.736 0 0 0 64 96.72V927.36a96.736 96.736 0 0 0 96.72 96.64h702.56A96.704 96.704 0 0 0 960 927.36V298.016z m7.808 94.736l226.544 211.008h-146.544a80.08 80.08 0 0 1-80-80zM896 927.36a32.688 32.688 0 0 1-32.72 32.64h-702.56A32.704 32.704 0 0 1 128 927.36V96.72A32.752 32.752 0 0 1 160.72 64l423.088 0.384v161.44a144.176 144.176 0 0 0 144 143.92H896z"
-                    p-id="30865"
-                  ></path>
+                    p-id="30865"></path>
                 </svg>
               </span>
             </p>
-            <el-image
-              v-if="showImg"
-              :src="imgThirteen"
-              :preview-src-list="[imgThirteen]"
-            />
+            <el-image v-if="showImg" :src="imgThirteen" :preview-src-list="[imgThirteen]" />
             <p>A.Combine the following sentences into if-clauses.</p>
             <p>
               1.Try using sticks.You can enjoy the fun of having a real Chinese
               meal.
             </p>
             <p>
-              <b>If</b
-              ><input
-                v-model="testData.gr.one"
-                type="text"
-                class="input-bottom-border"
-              />.
+              <b>If</b><input v-model="testData.gr.one" type="text" class="input-bottom-border" />.
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛欼f you try using sticks, you can enjoy the fun of having a
               real Chinese meal.
             </p>
@@ -1339,35 +813,17 @@
               there.
             </p>
             <p>
-              <b>If</b
-              ><input
-                v-model="testData.gr.two"
-                type="text"
-                class="input-bottom-border"
-              />.
+              <b>If</b><input v-model="testData.gr.two" type="text" class="input-bottom-border" />.
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛欼f you go to my Chinese New Year party, you will meet my
               Chinese friends there.
             </p>
             <p>3.Drink some Longjing tea,and you will love it.</p>
             <p>
-              <b>If</b
-              ><input
-                type="text"
-                v-model="testData.gr.three"
-                class="input-bottom-border"
-              />.
+              <b>If</b><input type="text" v-model="testData.gr.three" class="input-bottom-border" />.
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛欼f you drink some Longjing tea, you will love it.
             </p>
             <p>
@@ -1375,18 +831,9 @@
               warriors.
             </p>
             <p>
-              <b>If</b
-              ><input
-                v-model="testData.gr.four"
-                type="text"
-                class="input-bottom-border"
-              />.
+              <b>If</b><input v-model="testData.gr.four" type="text" class="input-bottom-border" />.
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛欼f I go to Xi鈥檃n one day, I will visit the terracotta
               warriors.
             </p>
@@ -1395,18 +842,9 @@
               Chicken would possibly be in top three.
             </p>
             <p>
-              <b>If</b
-              ><input
-                v-model="testData.gr.five"
-                type="text"
-                class="input-bottom-border"
-              />.
+              <b>If</b><input v-model="testData.gr.five" type="text" class="input-bottom-border" />.
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛� If you ask foreigners about their favorite Chinese food,
               Kung Pao Chicken would possible be in top three
             </p>
@@ -1415,51 +853,27 @@
               <i>whether</i>.
             </p>
             <p>
-              1.I was wondering<input
-                v-model="testData.cm.one"
-                type="text"
-                class="input-bottom-border"
-                style="width: 60px"
-              />to go for a walk in the Summer Palace.
+              1.I was wondering<input v-model="testData.cm.one" type="text" class="input-bottom-border"
+                style="width: 60px" />to go for a walk in the Summer Palace.
             </p>
             <p>
-              2.We can spend the afternoon on the beach<input
-                v-model="testData.cm.two"
-                type="text"
-                class="input-bottom-border"
-                style="width: 60px"
-              />the weather is fine.
+              2.We can spend the afternoon on the beach<input v-model="testData.cm.two" type="text"
+                class="input-bottom-border" style="width: 60px" />the weather is fine.
             </p>
             <p>
-              3.I called Wang to find out<input
-                v-model="testData.cm.three"
-                type="text"
-                class="input-bottom-border"
-                style="width: 60px"
-              />or not he really went to see the Peking opera show.
+              3.I called Wang to find out<input v-model="testData.cm.three" type="text" class="input-bottom-border"
+                style="width: 60px" />or not he really went to see the Peking opera show.
             </p>
             <p>
-              4.We鈥檙e not interested in<input
-                v-model="testData.cm.four"
-                type="text"
-                class="input-bottom-border"
-                style="width: 60px"
-              />we get great jobs and that kind of thing.
+              4.We鈥檙e not interested in<input v-model="testData.cm.four" type="text" class="input-bottom-border"
+                style="width: 60px" />we get great jobs and that kind of thing.
             </p>
             <p>
-              5.<input
-                v-model="testData.cm.five"
-                type="text"
-                class="input-bottom-border"
-                style="width: 60px"
-              />I go to Sichuan,I will visit Chengdu Research Base of Giant
+              5.<input v-model="testData.cm.five" type="text" class="input-bottom-border" style="width: 60px" />I go to
+              Sichuan,I will visit Chengdu Research Base of Giant
               Panda Breeding.
             </p>
-            <p
-              class="event-header-text-bc pd-5"
-              style="margin-left: 40px; width: 93%"
-              v-if="showQuestionAnswer"
-            >
+            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
               绛旀锛� 1.whether &nbsp; 2.if &nbsp; 3.whether &nbsp; 4.whether
               &nbsp; 5.if
             </p>
@@ -1481,10 +895,7 @@
                   </button>
                 </li>
                 <li>
-                  <button
-                    @click="showQuestionAnswer = !showQuestionAnswer"
-                    class="parimary-btn"
-                  >
+                  <button @click="showQuestionAnswer = !showQuestionAnswer" class="parimary-btn">
                     鏌ョ湅绛旀
                   </button>
                 </li>
@@ -1501,10 +912,7 @@
     <div class="page-box" page="14">
       <div v-if="showPageList.indexOf(14) > -1">
         <div class="w100 mb-20" style="padding-right: 20px">
-          <div
-            class="event-header-bc fl al-end"
-            style="height: 100px; padding-left: 40px"
-          >
+          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
             <div class="preface-header-box event-header-text-bc">
               <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
               <span class="g-text event-text-color">鍩虹妯″潡涓�</span>
@@ -1532,19 +940,9 @@
               <p>銆�銆�銆�銆�3.What does he/she know about it?</p>
             </div>
             <p class="left">
-              <img
-                class="img-gn"
-                alt=""
-                src="../../assets/images/dy1-worksheet.jpg"
-              />
+              <img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" />
             </p>
-            <table
-              border="1"
-              cellpadding="4"
-              cellspacing="0"
-              style="border-color: #fff"
-              class="fz-14"
-            >
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
               <tr class="table-th-bc">
                 <td class="tl-cn">Interviewees</td>
                 <td class="wh-no tl-cn">Chinese Culture</td>
@@ -1563,133 +961,64 @@
               </tr>
               <tr class="table-tr-bc">
                 <td>
-                  <textarea
-                    v-model="questionData.table.one"
-                    class="w100 table-tr-bc b0 table-textarea textarea-box"
-                    @change="setBookQuestion"
-                  ></textarea>
+                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea
-                    v-model="questionData.table.two"
-                    class="w100 table-tr-bc b0 table-textarea textarea-box"
-                    @change="setBookQuestion"
-                  ></textarea>
+                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea
-                    v-model="questionData.table.three"
-                    class="w100 table-tr-bc b0 table-textarea"
-                    @change="setBookQuestion"
-                  ></textarea>
+                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
                 </td>
               </tr>
               <tr class="table-tr-bc">
                 <td>
-                  <textarea
-                    v-model="questionData.table.four"
-                    class="w100 table-tr-bc b0 table-textarea textarea-box"
-                    @change="setBookQuestion"
-                  ></textarea>
+                  <textarea v-model="questionData.table.four" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea
-                    v-model="questionData.table.five"
-                    class="w100 table-tr-bc b0 table-textarea textarea-box"
-                    @change="setBookQuestion"
-                  ></textarea>
+                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea
-                    v-model="questionData.table.six"
-                    class="w100 table-tr-bc b0 table-textarea"
-                    @change="setBookQuestion"
-                  ></textarea>
+                  <textarea v-model="questionData.table.six" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
                 </td>
               </tr>
               <tr class="table-tr-bc">
                 <td>
-                  <textarea
-                    v-model="questionData.table.seven"
-                    class="w100 table-tr-bc b0 table-textarea textarea-box"
-                    @change="setBookQuestion"
-                  ></textarea>
+                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea
-                    v-model="questionData.table.enight"
-                    class="w100 table-tr-bc b0 table-textarea textarea-box"
-                    @change="setBookQuestion"
-                  ></textarea>
+                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
                 </td>
                 <td>
-                  <textarea
-                    v-model="questionData.table.nine"
-                    class="w100 table-tr-bc b0 table-textarea"
-                    @change="setBookQuestion"
-                  ></textarea>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
                 </td>
               </tr>
             </table>
             <p class="left">
-              <img
-                class="img-gn"
-                alt=""
-                src="../../assets/images/dy1-wordbank.jpg"
-              />
+              <img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" />
             </p>
             <div class="bk-wh">
               <p class="dl-box">
-                <span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'exquisite')"
-                  >exquisite</span
-                >
-                <span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'ancient')"
-                  >ancient</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'incredible')"
-                  >incredible</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'unique')"
-                  >unique</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'traditional')"
-                  >traditional</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'outstanding')"
-                  >outstanding</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'mouth-watering')"
-                  >mouth-watering</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'diverse')"
-                  >diverse</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'hospitable')"
-                  >hospitable</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'enjoyable')"
-                  >enjoyable</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'memorable')"
-                  >memorable</span
-                ><span
-                  class="word-bc mr-20 dl-span"
-                  @click="saveWord($event, 'charming')"
-                  >charming</span
-                >
+                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'exquisite')">exquisite</span>
+                <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'ancient')">ancient</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'incredible')">incredible</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'unique')">unique</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'traditional')">traditional</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'outstanding')">outstanding</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'mouth-watering')">mouth-watering</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'diverse')">diverse</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'hospitable')">hospitable</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'enjoyable')">enjoyable</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'memorable')">memorable</span><span
+                  class="word-bc mr-20 dl-span" @click="saveWord($event, 'charming')">charming</span>
               </p>
             </div>
             <div class="resource-primary-border" style="padding: 8px">
@@ -1853,9 +1182,7 @@
           <li class=""></li>
           <li class="fz-18">
             <span class="chapter-left-bc">MODULE 1</span>
-            <span class="chapter-right-bc fw-bl chapter-right-cl"
-              >CHINA,A WONDERLAND</span
-            >
+            <span class="chapter-right-bc fw-bl chapter-right-cl">CHINA,A WONDERLAND</span>
           </li>
         </ul>
         <div class="padding-93">
@@ -1865,10 +1192,8 @@
             </h2>
             <h3 id="c005"><span class="bjh3">Warm-up</span></h3>
             <p>
-              <b
-                >Put the expressions in the box below on the corresponding
-                answer line under each picture.</b
-              >
+              <b>Put the expressions in the box below on the corresponding
+                answer line under each picture.</b>
             </p>
             <div class="bk-wh">
               <p>
@@ -1881,136 +1206,68 @@
                 <div class="left" style="width: 48%">
                   <div>
                     <p class="center">
-                      <img
-                        src="../../assets/images/0019-1.jpg"
-                        alt=""
-                        class="w100"
-                      />
+                      <img src="../../assets/images/0019-1.jpg" alt="" class="w100" />
                     </p>
                     <p class="center">
                       1.
                       <select v-model="dropdownData.one.value">
-                        <option
-                          v-for="(item, index) in dropDownList"
-                          :key="index"
-                          :value="item"
-                        >
+                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                           {{ item }}
                         </option>
                       </select>
                       <span class="icon-box">
-                        <svg
-                          v-if="dropdownData.one.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
+                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="dropdownData.one.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.one.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerFive"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                     绛旀锛歩ntercity train
                   </p>
                 </div>
                 <div class="right" style="width: 48%">
                   <div>
                     <p class="center">
-                      <img
-                        src="../../assets/images/0019-2.jpg"
-                        alt=""
-                        style="width: 98%"
-                      />
+                      <img src="../../assets/images/0019-2.jpg" alt="" style="width: 98%" />
                     </p>
                     <p class="center">
                       2.
                       <select v-model="dropdownData.two.value">
-                        <option
-                          v-for="(item, index) in dropDownList"
-                          :key="index"
-                          :value="item"
-                        >
+                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                           {{ item }}
                         </option>
                       </select>
                       <span class="icon-box">
-                        <svg
-                          v-if="dropdownData.two.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
+                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="dropdownData.two.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.two.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerFive"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                     绛旀锛歰nline shopping
                   </p>
                 </div>
@@ -2020,136 +1277,68 @@
                 <div class="left" style="width: 48%">
                   <div>
                     <p class="center">
-                      <img
-                        src="../../assets/images/0019-3.jpg"
-                        alt=""
-                        style="width: 98%"
-                      />
+                      <img src="../../assets/images/0019-3.jpg" alt="" style="width: 98%" />
                     </p>
                     <p class="center">
                       3.
                       <select v-model="dropdownData.three.value">
-                        <option
-                          v-for="(item, index) in dropDownList"
-                          :key="index"
-                          :value="item"
-                        >
+                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                           {{ item }}
                         </option>
                       </select>
                       <span class="icon-box">
-                        <svg
-                          v-if="dropdownData.three.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
+                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="dropdownData.three.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.three.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerFive"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                     绛旀锛歟lectronic payment
                   </p>
                 </div>
                 <div class="right" style="width: 48%">
                   <div>
                     <p class="center">
-                      <img
-                        src="../../assets/images/0019-4.jpg"
-                        alt=""
-                        style="width: 94%"
-                      />
+                      <img src="../../assets/images/0019-4.jpg" alt="" style="width: 94%" />
                     </p>
                     <p class="center">
                       4.
                       <select v-model="dropdownData.four.value">
-                        <option
-                          v-for="(item, index) in dropDownList"
-                          :key="index"
-                          :value="item"
-                        >
+                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                           {{ item }}
                         </option>
                       </select>
                       <span class="icon-box">
-                        <svg
-                          v-if="dropdownData.four.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
+                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="dropdownData.four.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.four.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerFive"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                     绛旀锛歴hared bike
                   </p>
                 </div>
@@ -2159,136 +1348,68 @@
                 <div class="left" style="width: 48%">
                   <div>
                     <p class="center">
-                      <img
-                        src="../../assets/images/0019-5.jpg"
-                        alt=""
-                        class="w100"
-                      />
+                      <img src="../../assets/images/0019-5.jpg" alt="" class="w100" />
                     </p>
                     <p class="center">
                       5.
                       <select v-model="dropdownData.five.value">
-                        <option
-                          v-for="(item, index) in dropDownList"
-                          :key="index"
-                          :value="item"
-                        >
+                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                           {{ item }}
                         </option>
                       </select>
                       <span class="icon-box">
-                        <svg
-                          v-if="dropdownData.five.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
+                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="dropdownData.five.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.five.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerFive"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                     绛旀锛歵ake-away service
                   </p>
                 </div>
                 <div class="right" style="width: 48%">
                   <div>
                     <p class="center">
-                      <img
-                        src="../../assets/images/0019-6.jpg"
-                        alt=""
-                        style="width: 98%"
-                      />
+                      <img src="../../assets/images/0019-6.jpg" alt="" style="width: 98%" />
                     </p>
                     <p class="center">
                       6.
                       <select v-model="dropdownData.six.value">
-                        <option
-                          v-for="(item, index) in dropDownList"
-                          :key="index"
-                          :value="item"
-                        >
+                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                           {{ item }}
                         </option>
                       </select>
                       <span class="icon-box">
-                        <svg
-                          v-if="dropdownData.six.isRight"
-                          t="1716986419862"
-                          class="icon"
-                          viewBox="0 0 1820 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="18767"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="40"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
+                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                           <path
                             d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
-                            fill="#1AFA29"
-                            p-id="18768"
-                          ></path>
+                            fill="#1AFA29" p-id="18768"></path>
                         </svg>
-                        <svg
-                          v-if="dropdownData.six.isRight == false"
-                          t="1716987085767"
-                          class="icon"
-                          viewBox="0 0 1024 1024"
-                          version="1.1"
-                          xmlns="http://www.w3.org/2000/svg"
-                          p-id="25745"
-                          xmlns:xlink="http://www.w3.org/1999/xlink"
-                          width="20"
-                          height="20"
-                        >
+                        <svg v-if="dropdownData.six.isRight == false" t="1716987085767" class="icon"
+                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                           <path
                             d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
-                            fill="#d81e06"
-                            p-id="25746"
-                          ></path>
+                            fill="#d81e06" p-id="25746"></path>
                         </svg>
                       </span>
                     </p>
                   </div>
-                  <p
-                    class="event-header-text-bc pd-5"
-                    style="width: 90%"
-                    v-if="showAnswerFive"
-                  >
+                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                     绛旀锛歠acial recognition
                   </p>
                 </div>
@@ -2296,10 +1417,7 @@
             </div>
             <div class="w100 fl ju-cn">
               <div class="fl ju-ev mt-40" style="width: 80%">
-                <button
-                  class="btn-border btn-w"
-                  @click="handleDropdown('judge')"
-                >
+                <button class="btn-border btn-w" @click="handleDropdown('judge')">
                   鎻愪氦
                 </button>
                 <button @click="setDropdownData" class="btn-border btn-w">
@@ -2308,10 +1426,7 @@
                 <button class="btn-border btn-w" @click="changeDropdown">
                   閲嶅仛
                 </button>
-                <button
-                  @click="showAnswerFive = !showAnswerFive"
-                  class="parimary-btn"
-                >
+                <button @click="showAnswerFive = !showAnswerFive" class="parimary-btn">
                   鏌ョ湅绛旀
                 </button>
               </div>
@@ -2320,6 +1435,759 @@
         </div>
         <div class="preface-bottom">
           <span class="contet-num-box">9</span>
+        </div>
+      </div>
+    </div>
+    <!-- 10 -->
+    <div class="page-box" page="16">
+      <div v-if="showPageList.indexOf(16) > -1">
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <div class="padding-93">
+          <div class="bodystyle">
+            <h3 id="c006"><span class="bjh3">Reading</span></h3>
+            <p class="center">
+              <img class="img-g" alt="" src="../../assets/images/0020-1.jpg" />
+            </p>
+            <p class="img"></p>
+            <p>
+              1.We are witnessing the rapid development of modern society.What
+              impresses you most?
+            </p>
+            <p>2.What will our life be like in ten or twenty years?</p>
+            <p class="center"><b>The Great Progress in China</b></p>
+            <p>
+              On August 31st,2012,as I landed my feet on Chinese ground,I
+              started to breathe in the air coming from the breeze.It was
+              familiar.I felt so excited to be back in China,though that time
+              was for my studies.In a matter of days,I made a lot of friends
+              from different countries and one afternoon,my friends and I
+              planned to visit the world-famous Sun Yat-sen
+              Mausoleum.A._______________ I looked around with curiosity,and
+              everything seemed to move at a quick pace.
+            </p>
+            <p>
+              Six months later,as I walked down the hall of my dormitory,I met
+              my neighbour who was overwhelmed by big and small packages and
+              boxes.I asked,鈥淗ey,Alison.What are all these?鈥� She
+              replied,鈥淗ello,Vanessa.I received my packages from the delivery
+              man.I鈥檝e been buying a lot of stuff via an online shop.鈥� I went to
+              my room to turn on my laptop and typed in the key words.I was
+              stunned; I couldn鈥檛 believe my eyes.It is actually an online
+              shopping website where you can buy anything you can think of.
+            </p>
+            <p>
+              After my graduation in 2015,I joined another university in
+              Shanghai for further studies.I always saw my Chinese classmates
+              paying with their phones; this triggered my attention.With the
+              help of my classmates,I finally got my own online payment
+              account.This is an absolute gadget,very convenient and easy to
+              use.With the start of this new era,I always go out without my
+              wallet.
+            </p>
+            <p>
+              B._______________ I went through all the necessary procedures and
+              couldn鈥檛 wait to ride my first shared bike.
+            </p>
+            <p>
+              Last but not least,nearly at the end of 2016,the ordering
+              platforms made their appearance on all Chinese
+              phones.C._______________ What makes my life easier is that I can
+              buy vegetables and fruits online and get them delivered to my
+              door.
+            </p>
+            <p>
+              The five aspects that I mentioned above changed the life of
+              millions of people around China.The Chinese economy is
+              booming,which makes people well off.I鈥檝e been in China for several
+              years and witnessed China鈥檚 potential.
+            </p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">10</span>
+        </div>
+      </div>
+    </div>
+    <!-- 11 -->
+    <div class="page-box" page="17">
+      <div v-if="showPageList.indexOf(17) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc">MODULE 1</span>
+            <span class="chapter-right-bc fw-bl chapter-right-cl">CHINA,A WONDERLAND</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p class="fl al-cn mt-40">
+              <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
+              <span class="line-border-box"></span>
+            </p>
+            <audio :src="resource.readingTwo" controls style="margin-left: 10px" class="audio"
+              @play="audioPlay"></audio>
+            <p>breeze /bri藧z/ <i>n.</i> 寰锛涘拰椋�</p>
+            <div class="bkbj">
+              <p><i>a light wind</i></p>
+            </div>
+            <p>mausoleum /藢m蓴藧s蓹藞li藧蓹m/ <i>n.</i> 锛堝ぇ鑰岀簿鑷寸殑锛� 闄靛</p>
+            <div class="bkbj">
+              <p><i>a large,finely built tomb</i></p>
+            </div>
+            <p>metro /藞metr蓹蕣/ <i>n.</i> 鍦伴搧</p>
+            <div class="bkbj">
+              <p><i>an underground train system</i></p>
+            </div>
+            <p>extraordinary /瑟k藞str蓴藧dnri/ <i>adj.</i> 闈炲嚒鐨勶紱涓嶆櫘閫氱殑</p>
+            <div class="bkbj">
+              <p><i>beyond what is ordinary; remarkable</i></p>
+            </div>
+            <p>pace /pe瑟s/ <i>n.</i> 閫熷害</p>
+            <div class="bkbj">
+              <p><i>speed,esp.of walking or running</i></p>
+            </div>
+            <p>dormitory /藞d蓴藧m蓹tri/ <i>n.</i> 瀛︾敓瀹胯垗锛涢泦浣撳鑸�</p>
+            <div class="bkbj">
+              <p>
+                <i>a room for several people to sleep in,esp.in a school or
+                  other institution</i>
+              </p>
+            </div>
+            <p>neighbour /藞ne瑟b蓹(r)/ <i>n.</i> 閭诲眳锛涢偦浜�</p>
+            <div class="bkbj">
+              <p><i>a person who lives next to you or near you</i></p>
+            </div>
+            <p>overwhelm /藢蓹蕣v蓹藞welm/ <i>v.</i> 娣规病锛涙极杩�</p>
+            <div class="bkbj">
+              <p><i>to cover sb./sth.completely</i></p>
+            </div>
+            <p>via /藞va瑟蓹/ <i>prep.</i> 缁忕敱锛涢�氳繃</p>
+            <div class="bkbj">
+              <p><i>by way of; through</i></p>
+            </div>
+            <p>laptop /藞l忙pt蓲p/ <i>n.</i> 渚挎惡寮忕數鑴戯紱绗旇鏈數鑴�</p>
+            <div class="bkbj">
+              <p>
+                <i>a small computer that can work with a battery and be easily
+                  carried</i>
+              </p>
+            </div>
+            <p>stun /st蕦n/ <i>v.</i> 浣块渿鎯婏紙鎴栨儕鎰曘�佺洰鐬彛鍛嗭級</p>
+            <div class="bkbj">
+              <p>
+                <i>to surprise or shock sb.so much that he/she cannot think
+                  clearly or speak</i>
+              </p>
+            </div>
+            <p>trigger /藞tr瑟伞蓹(r)/ <i>v.</i> 寮曡捣锛涜Е鍙�</p>
+            <div class="bkbj">
+              <p><i>to make sth.happen suddenly</i></p>
+            </div>
+            <p>gadget /藞伞忙d蕭瑟t/<i> n.</i> 灏忓櫒鍏凤紱灏忚缃�</p>
+            <div class="bkbj">
+              <p><i>a small tool or device that does sth.useful</i></p>
+            </div>
+            <p>era /藞瑟蓹r蓹/ <i>n.</i> 鏃朵唬锛涘勾浠�</p>
+            <div class="bkbj">
+              <p>
+                <i>a period of time,usually in history,that is different from
+                  other periods because of particular characteristics or
+                  events</i>
+              </p>
+            </div>
+            <p>economy /瑟藞k蓲n蓹mi/ <i>n.</i> 缁忔祹锛涚粡娴庢儏鍐�</p>
+            <div class="bkbj">
+              <p>
+                <i>the relationship between production,trade and the supply of
+                  money in a particular country or region</i>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">11</span>
+        </div>
+      </div>
+    </div>
+    <!-- 12 -->
+    <div class="page-box" page="18">
+      <div v-if="showPageList.indexOf(18) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>boom /bu藧m/ <i>v.</i> 杩呴�熷彂灞曪紱绻佽崳鏄岀洓</p>
+            <div class="bkbj">
+              <p>
+                <i>to have a period of rapid growth; to become bigger,more
+                  successful,etc.</i>
+              </p>
+            </div>
+            <p>potential /p蓹藞ten蕛l/ <i>n.</i> 娼滃姏锛涙綔鑳�</p>
+            <div class="bkbj">
+              <p><i>qualities that exist and can be developed</i></p>
+            </div>
+            <div style="display: flex">
+              <div class="left" style="width: 48%">
+                <p>a matter of days 浠呬粎鍑犲ぉ</p>
+                <p>go through 鍔炵悊锛堟墜缁級锛涚粡鍘�</p>
+                <p>well off 锛堝挨鎸囷級 瀵岃</p>
+              </div>
+              <div class="right" style="width: 48%">
+                <p>type in ...閿叆鈥︹��</p>
+                <p>last but not least 鏈�鍚庡悓鏍烽噸瑕佺殑鏄�</p>
+              </div>
+            </div>
+            <p><b>鈪�.Reading comprehension.</b></p>
+            <p>
+              A.Read the passage and put the following sentences in the proper
+              blanks.
+            </p>
+            <p>
+              1.It wasn鈥檛 long until I discovered the shared bikes in
+              2016,serving people in several cities.
+            </p>
+            <p>
+              2.People can order their desired food,from soup to noodles,from
+              barbecue to hot pot.
+            </p>
+            <p>
+              3.It was at that moment that I knew about the metro system.It was
+              new,fast,and extraordinary.
+            </p>
+            <p>
+              B.Decide whether the following statements are true (T) or false
+              (F).
+            </p>
+            <p>
+              (銆�) 1.Vanessa made a lot of friends as soon as she arrived in
+              China.
+            </p>
+            <p>
+              (銆�) 2.Before Vanessa came to China,she knew a lot about the metro
+              system.
+            </p>
+            <p>
+              (銆�) 3.Vanessa didn鈥檛 know about online shopping before she met
+              her neighbour Alison.
+            </p>
+            <p>(銆�) 4.Vanessa got her own online payment account by herself.</p>
+            <p>
+              (銆�) 5.Buying vegetables and fruits online makes Vanessa鈥檚 life
+              easier.
+            </p>
+            <p><b>鈪�.Language focus.</b></p>
+            <p>
+              A.Replace the words in italics with the exact words in the passage
+              and change the form if necessary.
+            </p>
+            <p>
+              1.Tom was shocked by China鈥檚 progress that she had
+              <i>noticed</i>.________
+            </p>
+            <p>
+              2.China has made <i>amazing</i> progress in the manufacturing
+              industry.________
+            </p>
+            <p>
+              3.Ordering platforms supported <i>by</i> various Apps is very
+              convenient.________
+            </p>
+            <p>
+              4.The <i>age</i> of artificial intelligence was brought into being
+              by the Internet.________
+            </p>
+            <p>
+              5.The <i>rhythm</i> of ancient people鈥檚 lives is slower than that
+              of modern people.________
+            </p>
+            <p>
+              B.Fill in the blanks with the proper form of the expressions given
+              below.
+            </p>
+            <div class="bk-wh">
+              <p>
+                a matter of銆�go through銆�last but not least銆�well off銆�type in
+              </p>
+            </div>
+            <p>1.China has________great changes in the era of big data.</p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">12</span>
+        </div>
+      </div>
+    </div>
+    <!-- 13 -->
+    <div class="page-box" page="19">
+      <div v-if="showPageList.indexOf(19) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc">MODULE 1</span>
+            <span class="chapter-right-bc fw-bl chapter-right-cl">CHINA,A WONDERLAND</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>
+              2.________key words and you can search for the needed goods in
+              online shops.
+            </p>
+            <p>
+              3.A dispute over online shopping can be settled in________days.
+            </p>
+            <p>4.China has,in all respects,become very________.</p>
+            <p>
+              5.________,all the people committed to Shenzhou Spacecrafts
+              deserve respect.
+            </p>
+            <p><b>鈪�.Grammar focus:The simple sentence.</b></p>
+            <p>
+              Read the examples and write down the sentence structure of the
+              following sentences in the brackets.
+            </p>
+            <p><b>Examples:</b></p>
+            <div class="fieldset">
+              <p>1.My incredible journey to China started in 2017.(S+V)</p>
+              <p>2.Vanessa made a lot of friends.(S+V+O)</p>
+              <p>3.Local Chinese are very friendly.(S+V+P)</p>
+              <p>
+                4.China gives the author the impression of a
+                wonderland.(S+V+O+O)
+              </p>
+              <p>
+                5.I always saw my Chinese classmates paying with their
+                phones.锛圫+V+O+C)
+              </p>
+            </div>
+            <p>1.It is actually an online shopping website.锛坃_______锛�</p>
+            <p>
+              2.Vanessa finally got her own online payment account.锛坃_______锛�
+            </p>
+            <p>
+              3.China offers researchers world-class advanced research
+              facilities in the institutes. 锛坃_______锛�
+            </p>
+            <p>
+              4.These friends made Vanessa see China through the eyes of the
+              locals.锛坃_______锛�
+            </p>
+            <p>5.The list of Chinese food never ends.锛坃_______锛�</p>
+            <h3 id="c007"><span class="bjh3">Mini-project</span></h3>
+            <p>
+              Life today is much better than that of 10 years ago.Work in
+              groups,and find out the major changes.Each group should list at
+              least three items and offer suggestions on how to keep up with the
+              changes,then report to the class.
+            </p>
+            <p class="left">
+              <img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" />
+            </p>
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="tl-cn">Items</td>
+                <td class="wh-no tl-cn">A Decade Ago</td>
+                <td class="tl-cn">Now</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="tl-cn">Transportation</td>
+                <td class="tl-cn">
+                  We had our own bikes because they were major vehicles and most
+                  families had bikes.
+                </td>
+                <td>
+                  We needn't have our own bikes, butwe ride shared bikes because
+                  they arevery convenient and cheap,
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">13</span>
+        </div>
+      </div>
+    </div>
+    <!-- 14 -->
+    <div class="page-box" page="20">
+      <div v-if="showPageList.indexOf(20) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="tl-cn">Items</td>
+                <td class="wh-no tl-cn">A Decade Ago</td>
+                <td class="tl-cn">Now</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="tl-cn">Shopping</td>
+                <td class="tl-cn">
+                  We bought necessities mainly in brick-and-mortar stores.
+                </td>
+                <td>Online shopping is very common.</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.four" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.six" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td colspan="3">
+                  Your suggestion:
+                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+            </table>
+            <h2 id="b002">
+              <img class="img-0" alt="" src="../../assets/images/dy1-le3.jpg" />
+            </h2>
+            <h3 id="c008"><span class="bjh3">Listening</span></h3>
+            <p>
+              <b>鈪�.Listen to Tom,an overseas student,talking about his journey
+                to China and fill in the blanks with what you hear.</b>
+            </p>
+            <audio :src="resource.readingTwo" controls style="margin-left: 10px" class="audio"
+              @play="audioPlay"></audio>
+            <p>
+              After studying in China for almost three years by now,I call China
+              my second homeland.I love the natural beauty,the 1.________,the
+              people and the food.China is a large country with diverse
+              landscapes awaiting adventurers to 2.________.There is a modern
+              public transportation system including city
+              buses,3.________,high-speed trains,and airports,as well as a large
+              highway network.These make travel 4.________and efficient and
+              allow me to go to many places to enjoy the scenery and
+              culture.China鈥檚 natural beauty keeps on 5.________me,from the pure
+              blue waterfalls in Jiuzhaigou to the snowcapped mountains of
+              Shangri-la,from the sandy 6.________of Sanya to the rocky seaside
+              of Laoshan鈥� China is such a beautiful country!
+            </p>
+            <p>
+              <b>鈪�.Listen to the conversation about planning for the upcoming
+                Chinese Culture Week and circle the right expressions to
+                complete the following sentences.</b>
+            </p>
+            <p>
+              1.They would like to organize an activity for foreign students to
+              experience Chinese handcrafts / learn Chinese calligraphy.
+            </p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">14</span>
+        </div>
+      </div>
+    </div>
+    <!-- 15 -->
+    <div class="page-box" page="21">
+      <div v-if="showPageList.indexOf(21) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc">MODULE 1</span>
+            <span class="chapter-right-bc fw-bl chapter-right-cl">CHINA,A WONDERLAND</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>
+              2.They decide to hold a Chinese crafts show / paper-cutting
+              contest.
+            </p>
+            <p>3.Linda is to design the posters / reserve rooms.</p>
+            <p>
+              4.Li Hong is to invite students to compete in the contest /
+              handcraftsmen to show their talent.
+            </p>
+            <p>
+              5.Zhang Ping is to arrange the room set-up / send out invitations.
+            </p>
+            <h3 id="c009"><span class="bjh3">Practical Writing</span></h3>
+            <p>Work with your partner to discuss the following questions.</p>
+            <p>1.How do you let others know about an upcoming event?</p>
+            <p>
+              2.What information would you like to tell them about the event?
+            </p>
+            <p>
+              <b>鈪�.Read the following tips for designing an event poster and
+                mark the key elements in the following poster.</b>
+            </p>
+            <p>
+              An event poster is a marketing tool designed to attract visitors
+              to an upcoming gathering.With right design elements,a poster can
+              successfully impress a wide audience.The following are some tips
+              for creating an effective event poster.
+            </p>
+            <p>鈻� Use a large and eye-catching font for the title.</p>
+            <p>鈻� Add the date,time and location of the event.</p>
+            <p>鈻� Add the logo or branding of the organizer.</p>
+            <p>鈻� Describe your event or why people should attend.</p>
+            <p>鈻� Include a relevant call to action.</p>
+            <div class="horizontal" style="display: flex">
+              <div class="left" style="width: 48%">
+                <p class="center">
+                  <img class="img-e" alt="" src="../../assets/images/0025-1.jpg" />
+                </p>
+              </div>
+              <div class="right" style="width: 48%">
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  Name of the event
+                </p>
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  Date and time
+                </p>
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  Location
+                </p>
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  Greetings
+                </p>
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  Warnings
+                </p>
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  Organizer
+                </p>
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  Signature
+                </p>
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  A short description of the event
+                </p>
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  Contact information
+                </p>
+                <p>
+                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+                  Pictures of the event
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">15</span>
+        </div>
+      </div>
+    </div>
+    <!-- 16 -->
+    <div class="page-box" page="22">
+      <div v-if="showPageList.indexOf(22) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>
+              <b>鈪�.DIY Crafts Club is planning a paper-cutting contest to
+                promote Chinese handicrafts.The contest will be held in the
+                lobby of Student Center at</b>6锛�00-8锛�00<b> November</b>16<b>.You're in charge of publicity in the club
+                and are required to
+                design a poster for the contest.Complete the necessary
+                information in the following poster.</b>
+            </p>
+            <p class="center">
+              <img class="img-a" alt="" src="../../assets/images/0026-1.jpg" />
+            </p>
+            <p>
+              <b>鈪�.Your class has prepared a Chinese culture exhibition for
+                foreign exchange students.Your group takes the responsibility of
+                designing a poster for it.Discuss with your partner and try to
+                answer the questions below to find out what information is
+                needed.</b>
+            </p>
+            <div class="dy1-bj4">
+              <p class="center"><b>Information to put into our poster</b></p>
+            </div>
+            <div class="dy1-bj5">
+              <p>1.What can be the title of the exhibition?</p>
+              <p>_________________________________________</p>
+              <p>2.What should be included in the exhibition?</p>
+              <p>_________________________________________</p>
+              <p>3.Where will the exhibition be held?</p>
+              <p>_________________________________________</p>
+              <p>4.When will the exhibition be held?</p>
+              <p>_________________________________________</p>
+              <p>...</p>
+            </div>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">16</span>
+        </div>
+      </div>
+    </div>
+    <!-- 17 -->
+    <div class="page-box" page="23">
+      <div v-if="showPageList.indexOf(23) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc">MODULE 1</span>
+            <span class="chapter-right-bc fw-bl chapter-right-cl">CHINA,A WONDERLAND</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>
+              鈪�<b>.Design a poster for the exhibition according to the
+                information in the table above.</b>
+            </p>
+            <p class="center">
+              <img class="img-b" alt="" src="../../assets/images/0027-1.jpg" />
+            </p>
+            <div class="un-h2">
+              <h2 id="b004">Unit Project</h2>
+            </div>
+            <p>
+              The Youth League of your college is planning to organize an
+              activity called Chinese Culture Conversation Circle for
+              international students.This activity is to help them get a better
+              understanding of China and integrate into Chinese culture and life
+              faster.Work in groups and make a plan for this event.
+            </p>
+            <p>
+              Step 1:Brainstorm some activities and topics to discuss.For
+              example,Chinese cuisine,ethnic groups,handicrafts.
+            </p>
+            <p>
+              Step 2:Create a poster with such information as the date,the
+              time,the location,the contact information,etc.
+            </p>
+            <p>
+              Step 3:Display your poster to the class and introduce the
+              highlights of your activity.
+            </p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">17</span>
+        </div>
+      </div>
+    </div>
+    <!-- 18 -->
+    <div class="page-box" page="24">
+      <div v-if="showPageList.indexOf(24) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p class="left">
+              <img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" />
+            </p>
+            <p class="center">
+              <img class="img-b" alt="" src="../../assets/images/0028-1.jpg" />
+            </p>
+            <div class="fieldset-1">
+              <p class="center">
+                <b>Questions You May Ask When Planning an Event</b>
+              </p>
+              <p>How many people do you need to make the event happen?</p>
+              <p>What resources do you need?</p>
+              <p>What does the audience need to know?</p>
+              <p>What will hold the audience鈥檚 interest?</p>
+              <p>What do you hope to achieve through this event?</p>
+            </div>
+          </div>
+          <div class="preface-bottom">
+            <span class="contet-num-box">18</span>
+          </div>
         </div>
       </div>
     </div>
@@ -2676,7 +2544,7 @@
       };
     },
     setBookQuestion() {
-      console.log('淇濆瓨');
+      console.log("淇濆瓨");
       localStorage.setItem(
         "english-book-question-one",
         JSON.stringify(this.questionData)
@@ -2702,32 +2570,32 @@
       if (type == "one") {
         this.questionData.warnUp.one.value
           ? (this.questionData.warnUp.one.isRight =
-              this.questionData.warnUp.one.value == "Chinese knot")
+            this.questionData.warnUp.one.value == "Chinese knot")
           : (this.questionData.warnUp.one.isRight = null);
       } else if (type == "two") {
         this.questionData.warnUp.two.value
           ? (this.questionData.warnUp.two.isRight =
-              this.questionData.warnUp.two.value == "Chinese medicine")
+            this.questionData.warnUp.two.value == "Chinese medicine")
           : (this.questionData.warnUp.two.isRight = null);
       } else if (type == "three") {
         this.questionData.warnUp.three.value
           ? (this.questionData.warnUp.three.isRight =
-              this.questionData.warnUp.three.value == "Chinese calligraphy")
+            this.questionData.warnUp.three.value == "Chinese calligraphy")
           : (this.questionData.warnUp.three.isRight = null);
       } else if (type == "four") {
         this.questionData.warnUp.four.value
           ? (this.questionData.warnUp.four.isRight =
-              this.questionData.warnUp.four.value == "Taichi")
+            this.questionData.warnUp.four.value == "Taichi")
           : (this.questionData.warnUp.four.isRight = null);
       } else if (type == "five") {
         this.questionData.warnUp.five.value
           ? (this.questionData.warnUp.five.isRight =
-              this.questionData.warnUp.five.value == "sweet dumpling")
+            this.questionData.warnUp.five.value == "sweet dumpling")
           : (this.questionData.warnUp.five.isRight = null);
       } else if (type == "six") {
         this.questionData.warnUp.six.value
           ? (this.questionData.warnUp.six.isRight =
-              this.questionData.warnUp.six.value == "Chinese chess")
+            this.questionData.warnUp.six.value == "Chinese chess")
           : (this.questionData.warnUp.six.isRight = null);
       }
     },
@@ -2739,7 +2607,7 @@
           item.value == item.answer
             ? (item.isRight = true)
             : (item.isRight = false);
-            console.log(item.value,item.answer);
+          console.log(item.value, item.answer);
         }
       }
       this.dropdownData = dropdownDatas;
@@ -2772,9 +2640,11 @@
 p {
   font-size: 16px !important;
 }
+
 .bodystyle {
   margin: 0 !important;
 }
+
 .line-border-box {
   margin-left: 10px;
   display: inline-block;
@@ -2782,12 +2652,15 @@
   height: 3px;
   background-color: #f9a71b;
 }
+
 .mr-20 {
   margin-right: 20px;
 }
+
 .dl-box {
   display: flex;
   flex-wrap: wrap;
+
   .dl-span {
     display: inline-block;
     text-indent: 0;
@@ -2796,17 +2669,20 @@
     line-height: 20px;
   }
 }
+
 .btn-w {
   font-size: 14px;
   border-width: 1px;
   min-width: 80px;
   height: 30px;
   background-color: #fff;
+
   &:hover {
     background-color: #0bab87;
     color: #fff;
   }
 }
+
 .banshi {
   position: relative;
   margin-top: 40px;
@@ -2814,6 +2690,7 @@
   height: 350px;
   margin: 0 auto;
 }
+
 .pageBox {
   z-index: 9999999999;
   color: #999;
@@ -2821,9 +2698,11 @@
   left: 48%;
   bottom: 0px;
 }
+
 select {
   height: 24px;
 }
+
 .mini-audio {
   width: 200px;
   height: 200px;
diff --git a/src/books/English/view/components/chapter002.vue b/src/books/English/view/components/chapter002.vue
new file mode 100644
index 0000000..efa84b1
--- /dev/null
+++ b/src/books/English/view/components/chapter002.vue
@@ -0,0 +1,2008 @@
+<template>
+  <div class="chapter" num="3">
+    <!-- 19 -->
+    <div class="page-box" page="25">
+      <div class="bodystyle" v-if="showPageList.indexOf(25) > -1">
+        <h1 id="a005">
+          <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
+        </h1>
+        <p class="img"></p>
+        <p><b>This unit will help you to:</b></p>
+        <p>鉃� Learn words and expressions about different cultures</p>
+        <p>
+          鉃� Review the usage of 鈥渋t鈥� as formal subject and active and passive
+          voice
+        </p>
+        <p>
+          鉃� Be able to express differences and similarities among cultural
+          groups
+        </p>
+        <p>鉃� Be able to make an event schedule effectively and properly</p>
+        <p>鉃� Develop cross-cultural understanding in the workplace</p>
+        <p class="center">
+          <img class="img-0" alt="" src="../../assets/images/0029-1.jpg" />
+        </p>
+        <p class="img"></p>
+      </div>
+    </div>
+    <!-- 20 -->
+    <div class="page-box" page="26">
+      <div v-if="showPageList.indexOf(26) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc-unit2 fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc-unit2">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color-unit2">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <h2 id="b005">
+              <img class="img-0" alt="" src="../../assets/images/dy2-le1.jpg" />
+            </h2>
+            <h3 id="c010"><span class="bjh3">Warm-up</span></h3>
+            <p>
+              <b>鈪�.Draw a line to connect each country with its cultural
+                features and facts.</b>
+            </p>
+            <p class="center">
+              <img class="img-a" alt="" src="../../assets/images/0030-1.jpg" />
+            </p>
+            <p>
+              <b>鈪�.What are the customs and cultures of other countries you
+                know? Work with your partner to complete the table below.</b>
+            </p>
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="tl-cn">Countries</td>
+                <td class="tl-cn">Customs and Cultures</td>
+              </tr>
+
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.two"
+                    class="w100 table-tr-bc b0 table-textarea textarea-box-right" @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.four"
+                    class="w100 table-tr-bc b0 table-textarea textarea-box-right" @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.six"
+                    class="w100 table-tr-bc b0 table-textarea textarea-box-right" @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.enight"
+                    class="w100 table-tr-bc b0 table-textarea textarea-box-right" @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">20</span>
+        </div>
+      </div>
+    </div>
+    <!-- 21 -->
+    <div class="page-box" page="27">
+      <div v-if="showPageList.indexOf(27) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc-unit2">MODULE 2</span>
+            <span class="chapter-right-bc-unit2 fw-bl chapter-right-cl-unit2">GOING GLOBAL</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <h3 id="c011"><span class="bjh3">Listening</span></h3>
+            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+            <p>
+              <b>Four people are sharing their experiences of working with their
+                colleagues.Listen to the recording and mark the true statements
+                according to the speaker.</b>
+            </p>
+            <p class="center">
+              <img class="img-a" alt="" src="../../assets/images/0031-3.jpg" />
+            </p>
+            <h3 id="c012"><span class="bjh3">Reading</span></h3>
+            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+            <p>
+              1.Culture shock is a normal part of the life when moving somewhere
+              new,such as travelling abroad,or studying abroad.So,what鈥檚 the
+              definition of culture shock?
+            </p>
+            <p>
+              2.Can you offer some examples of culture shock in regard to
+              different languages,different table manners or different food
+              customs?
+            </p>
+            <p class="center"><b>Challenges of Working Across Cultures</b></p>
+            <p>
+              It is not a secret that a company鈥檚 success is heavily based on
+              its people.An employee is defined by his/her talents,knowledge and
+              abilities.This is the 鈥渧isible鈥� side of an employee.The
+              鈥渉idden鈥漵ide,which is also important,is the cultural identity.The
+              culture of an employee impacts his/her views on life,work,business
+              relationships and how they handle challenges.There are some issues
+              that may arise when working in a cross-cultural environment.
+            </p>
+            <p>
+              When your colleagues speak different languages,it is easy to
+              misunderstand each other.When I applied for the position at an
+              international trade company,during the interview,my
+              interviewer,who is from Egypt,was saying 鈥渜uote鈥�,but to me,it
+              sounded like 鈥渃ourt鈥�.It took me a while to
+            </p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">21</span>
+        </div>
+      </div>
+    </div>
+    <!-- 22 -->
+    <div class="page-box" page="28">
+      <div v-if="showPageList.indexOf(28) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc-unit2 fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc-unit2">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color-unit2">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>
+              understand what he meant,and I still remember how confused I felt
+              when I had to reply without knowing what he was asking about.You
+              may feel uncomfortable to ask your conversation partner to repeat
+              the sentence.However,it will save you from making mistakes and
+              show your partner that you are really trying your best to
+              understand him.
+            </p>
+            <p>
+              Things that are normal or routine in one culture can be totally
+              unacceptable in another culture.In my home country of Latvia,it is
+              a normal practice not to expect replies by email after normal
+              working hours and I will only disturb a colleague if the matter is
+              very serious.However,in other countries,like Russia and Egypt,the
+              tendency is to work 24/7 in response to the industry needs.Get
+              familiar with the behavior patterns accepted in your colleagues鈥�
+              countries,and learn about their traditions,you will finally find
+              the best way to respectfully communicate.
+            </p>
+            <p>
+              Language and cultural barriers can cause frustration.Don鈥檛 let
+              emotions take over.Think about the objective you want to
+              reach,make an effort to understand the other person and use the
+              most appropriate means for it.For example,email does not convey
+              the speaker鈥檚 emotions and limits the possibility to ask
+              questions.Calling someone on the phone and hearing his/her tone
+              can make the communication more smooth,and you will be surprised
+              by the level of understanding you will receive in return.
+            </p>
+            <p>
+              Working with colleagues from other countries or cultures can at
+              times be challenging,but it is so rewarding when you can learn
+              from each other and open your eyes to other ways of life.
+            </p>
+            <p class="fl al-cn mt-40">
+              <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
+              <span class="line-border-box"></span>
+            </p>
+            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+            <p>define /d瑟藞fa瑟n/ <i>v.</i> 缁欌�︹�︿笅瀹氫箟</p>
+            <div class="bkbj">
+              <p><i>to state precisely the meaning of sth.</i></p>
+            </div>
+            <p>visible /藞v瑟z蓹bl/ <i>adj.</i> 鍙鐨勶紱鏄庢樉鐨�</p>
+            <div class="bkbj">
+              <p><i>that can be seen or obvious enough to be noticed</i></p>
+            </div>
+            <p>identity /a瑟藞dent蓹ti/ <i>n.</i> 鐗规�э紱韬唤</p>
+            <div class="bkbj">
+              <p>
+                <i>the characteristics,feelings or beliefs that make people
+                  different from others</i>
+              </p>
+            </div>
+            <p>handle /藞h忙ndl/ <i>v.</i> 澶勭悊锛涘簲瀵�</p>
+            <div class="bkbj">
+              <p>
+                <i>to deal with a situation,a person,an area of work or a strong
+                  emotion</i>
+              </p>
+            </div>
+            <p>arise /蓹藞ra瑟z/ <i>v.</i> 鍑虹幇锛涗骇鐢�</p>
+            <div class="bkbj">
+              <p>
+                <i>(esp.of a problem or a difficult situation) to happen</i>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">22</span>
+        </div>
+      </div>
+    </div>
+    <!-- 23 -->
+    <div class="page-box" page="29">
+      <div v-if="showPageList.indexOf(29) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc-unit2">MODULE 2</span>
+            <span class="chapter-right-bc-unit2 fw-bl chapter-right-cl-unit2">GOING GLOBAL</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>quote /kw蓹蕣t/ <i>v.</i> 鎶ワ紙浠凤級</p>
+            <div class="bkbj">
+              <p><i>to name (an amount) as the price of sth.</i></p>
+            </div>
+            <p>confused /k蓹n藞fju藧zd/ <i>adj.</i> 绯婃秱鐨�</p>
+            <div class="bkbj">
+              <p><i>unable to think clearly</i></p>
+            </div>
+            <p>routine /ru藧藞ti藧n/ <i>adj.</i> 骞冲父鐨�</p>
+            <div class="bkbj">
+              <p><i>usual</i></p>
+            </div>
+            <p>unacceptable /藢蕦n蓹k藞sept蓹bl/ <i>adj.</i> 涓嶈兘鎺ュ彈鐨�</p>
+            <div class="bkbj">
+              <p><i>so bad that you think it should not be allowed</i></p>
+            </div>
+            <p>disturb /d瑟藞st蓽藧b/ <i>v.</i> 鎵撴壈锛涘Θ纰�</p>
+            <div class="bkbj">
+              <p>
+                <i>to interrupt sb.when they are trying to work,sleep,etc.</i>
+              </p>
+            </div>
+            <p>tendency/藞tend蓹nsi/ <i>n.</i> 锛堜汉鎴栫墿鍛堢幇鐨勶級 鍊惧悜锛涜秼鍔�</p>
+            <div class="bkbj">
+              <p><i>the way a person or thing tends to be or behave</i></p>
+            </div>
+            <p>tradition /tr蓹藞d瑟蕛n/ <i>n.</i> 鎯緥锛涗紶缁�</p>
+            <div class="bkbj">
+              <p>
+                <i>a belief,custom or way of doing sth.that has existed for a
+                  long time</i>
+              </p>
+            </div>
+            <p>barrier /藞b忙r瑟蓹(r) / <i>n.</i> 闅滅锛涘鍨�</p>
+            <div class="bkbj">
+              <p>
+                <i>a problem,rule or situation that prevents sb.from doing
+                  sth.,or that makes sth.impossible; hindrance</i>
+              </p>
+            </div>
+            <p>frustration /fr蕦藞stre瑟蕛n/ <i>n.</i> 锛堝彈锛� 鎸紱娌抚</p>
+            <div class="bkbj">
+              <p><i>the feeling of being frustrated</i></p>
+            </div>
+            <p>appropriate /蓹藞pr蓹蕣pr瑟蓹t/ <i>adj.</i> 閫傚綋鐨勶紱鍚堥�傜殑</p>
+            <div class="bkbj">
+              <p><i>suitable,right and proper</i></p>
+            </div>
+            <p>tone /t蓹蕣n/ <i>n.</i> 璇皵锛涜厰璋�</p>
+            <div class="bkbj">
+              <p>
+                <i>the quality of sb.鈥檚 voice,esp.expressing a particular
+                  emotion</i>
+              </p>
+            </div>
+            <p>rewarding /r瑟藞w蓴藧d瑟艐/ <i>adj.</i> 鍊煎緱鍋氱殑锛涗护浜烘弧鎰忕殑</p>
+            <div class="bkbj">
+              <p><i>worth doing; satisfying</i></p>
+            </div>
+            <div style="display: flex">
+              <div class="left" style="width: 48%">
+                <p>apply for 鐢宠</p>
+                <p>get familiar with 鐔熸倝</p>
+                <p>make an effort 鍔姏</p>
+              </div>
+              <div class="right" style="width: 48%">
+                <p>at times 鏈夋椂锛涘伓灏�</p>
+                <p>in response to 鍝嶅簲锛涘弽搴�</p>
+                <p>take over 鎺у埗锛涚鐞�</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">23</span>
+        </div>
+      </div>
+    </div>
+    <!-- 24 -->
+    <div class="page-box" page="30">
+      <div v-if="showPageList.indexOf(30) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc-unit2 fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc-unit2">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color-unit2">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <div class="bj-note">
+              <p><b>Notes:</b></p>
+              <p>
+                Latvia锛氭媺鑴辩淮浜氬叡鍜屽浗锛岀畝绉版媺鑴辩淮浜氥�備綅浜庝笢娆у钩鍘熻タ閮ㄣ�佹尝缃楃殑娴蜂笢宀革紝鍚岀埍娌欏凹浜氥�佷縿缃楁柉銆佺櫧淇勭綏鏂拰绔嬮櫠瀹涙帴澹ゃ�傚浗鍦熼潰绉�64
+                589骞虫柟鍗冪背銆�
+              </p>
+            </div>
+            <p><b>鈪�.Reading comprehension.</b></p>
+            <p>A.Read the passage and complete the following mind map.</p>
+            <p class="center">
+              <img class="img-b" alt="" src="../../assets/images/0034-1.jpg" />
+            </p>
+            <p>
+              B.Decide whether the following statements are true (T) or false
+              (F).
+            </p>
+            <p>
+              (銆�) 1.An employee is usually defined by his/her talents and
+              abilities.
+            </p>
+            <p>
+              (銆�) 2.During the interview,I didn鈥檛 have difficulty in
+              understanding my interviewer.
+            </p>
+            <p>
+              (銆�) 3.In Latvia,it is normal to expect replies by email after
+              normal working hours.
+            </p>
+            <p>
+              (銆�) 4.Learning about your colleagues鈥� traditions can help you
+              move forward.
+            </p>
+            <p>
+              (銆�) 5.Email can make the communication more smooth because it
+              conveys the emotions.
+            </p>
+            <p>
+              (銆�) 6.We can learn a lot from each other when working in a
+              cross-cultural environment.
+            </p>
+            <p><b>鈪�.Language focus.</b></p>
+            <p>
+              A.Fill in the blanks with the proper form of the words given
+              below.
+            </p>
+            <div class="fieldset">
+              <p>reward銆�disturb銆�tradition銆�accept銆�colleague銆�arise</p>
+            </div>
+            <p>
+              1.Working with photographers is one of the most ________ parts of
+              my job.
+            </p>
+            <p>2.All families must have ________ that they regularly follow.</p>
+            <p>3.Being late is ________ in any working environment.</p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">24</span>
+        </div>
+      </div>
+    </div>
+    <!-- 25 -->
+    <div class="page-box" page="31">
+      <div v-if="showPageList.indexOf(31) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc-unit2">MODULE 2</span>
+            <span class="chapter-right-bc-unit2 fw-bl chapter-right-cl-unit2">GOING GLOBAL</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>
+              4.Sarah鈥檚 ________ Li Lin made her feel welcome on her first day
+              at work.
+            </p>
+            <p>
+              5.Problems will ________ from communication between people from
+              different cultures.
+            </p>
+            <p>
+              6.I鈥檓 sorry to ________ you,but can I talk to you for a moment?
+            </p>
+            <p>
+              B.Underline the following expressions in the passage and make
+              sentences with them.
+            </p>
+            <p>1.apply for____________________________________</p>
+            <p>2.in response to________________________________</p>
+            <p>3.get familiar with______________________________</p>
+            <p>4.take over____________________________________</p>
+            <p>5.make an effort________________________________</p>
+            <p>C.Translate the following sentences into Chinese.</p>
+            <p>
+              1.When working in a cross-cultural setting,there can be some
+              language barriers among employees.
+            </p>
+            <p>_____________________________________________</p>
+            <p>
+              2.You could go for a walk or jog to manage your frustration at
+              work.
+            </p>
+            <p>_____________________________________________</p>
+            <p>
+              3.They gave us some advice on how to correctly handle cultural
+              differences in the workplace.
+            </p>
+            <p>_____________________________________________</p>
+            <p>
+              4.Wearing appropriate clothes in the office will make you feel
+              comfortable and confident.
+            </p>
+            <p>_____________________________________________</p>
+            <p><b>鈪�.Grammar focus:鈥渋t鈥� as formal subject.</b></p>
+            <p>
+              A.Read the example and underline the real subject that 鈥渋t鈥�
+              represents in the following sentences.
+            </p>
+            <p><b>Example:</b></p>
+            <p class="center">
+              <img class="img-b" alt="" src="../../assets/images/0035-1.jpg" />
+            </p>
+            <p>
+              1.It is not a secret that a company鈥檚 success is heavily based on
+              its people.
+            </p>
+            <p>
+              2.It is obvious to all that we should be aware of our body
+              language.
+            </p>
+            <p>3.It can be very different to have a greeting or handshake.</p>
+            <p>4.It鈥檚 hard to say how long your team meeting should last.</p>
+            <p>
+              5.It is abnormal to expect replies by email after normal working
+              hours.
+            </p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">25</span>
+        </div>
+      </div>
+    </div>
+    <!-- 26 -->
+    <div class="page-box" page="32">
+      <div v-if="showPageList.indexOf(32) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc-unit2 fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc-unit2">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color-unit2">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>
+              B.Read the example and rewrite the following sentences by using
+              formal subject 鈥渋t鈥�.
+            </p>
+            <p><b>Example:</b></p>
+            <div class="fieldset-2">
+              <p>
+                To misunderstand each other is easy when you speak different
+                languages.
+              </p>
+              <p>
+                鈥擨t is easy to misunderstand each other when you speak different
+                languages.
+              </p>
+            </div>
+            <p>1.To share new ideas with others makes us feel good.</p>
+            <p>______________________________________________.</p>
+            <p>2.To get along well with colleagues is really important.</p>
+            <p>______________________________________________.</p>
+            <p>
+              3.To have an open mind towards a new culture is necessary in the
+              workplace.
+            </p>
+            <p>_____________________________________________.</p>
+            <p>
+              4.To think twice before acting is always necessary for everyone.
+            </p>
+            <p>______________________________________________.</p>
+            <p>5.You are very kind to help me with my sales report.</p>
+            <p>______________________________________________.</p>
+            <h3 id="c013"><span class="bjh3">Mini-project</span></h3>
+            <p>
+              Most foreigners in China have a hard time keeping up with Chinese
+              traditions and culture.In order to get along well with Chinese
+              counterparts,it is important for foreign employees to learn
+              something about Chinese etiquette.Work in pairs and list the 鈥渄os鈥�
+              and 鈥渄on鈥檛s鈥� in Chinese culture.
+            </p>
+            <p class="left">
+              <img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" />
+            </p>
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="wh-no tl-cn">Items</td>
+                <td class="wh-no tl-cn">Dos</td>
+                <td class="tl-cn">Don鈥檛s</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="wh-no tl-cn">Greeting</td>
+                <td class="wh-no tl-cn">
+                  Start by addressing the senior frst.
+                </td>
+                <td>
+                  Don't try to reach for a hug when you meetsomeone for the
+                  first time.
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="tl-cn">Eye Contact</td>
+                <td>
+                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="wh-no tl-cn">Gift Exchange</td>
+                <td>
+                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.six" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="wh-no tl-cn">Table Manners</td>
+                <td>
+                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">26</span>
+        </div>
+      </div>
+    </div>
+    <!-- 27 -->
+    <div class="page-box" page="33">
+      <div v-if="showPageList.indexOf(34) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc-unit2">MODULE 2</span>
+            <span class="chapter-right-bc-unit2 fw-bl chapter-right-cl-unit2">GOING GLOBAL</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>continued</p>
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="wh-no tl-cn">Items</td>
+                <td class="wh-no tl-cn">Dos</td>
+                <td class="tl-cn">Don鈥檛s</td>
+              </tr>
+              <tr class="table-tr-bc" style="width: 40%">
+                <td class="wh-no tl-cn">Gift Exchange</td>
+                <td class="tl-w-45">
+                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td class="tl-w-45">
+                  <textarea v-model="questionData.table.six" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="wh-no tl-cn">Table Manners</td>
+                <td class="tl-w-45">
+                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td class="tl-w-45">
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+            </table>
+            <p class="left">
+              <img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" />
+            </p>
+            <div class="bk-wh">
+              <p>
+                direct銆�formal銆�respect銆�privacy銆�hand-shaking銆�touch銆�comfortable銆�toast銆�chopsticks銆�seating
+                arrangement
+              </p>
+            </div>
+            <h2 id="b006"><img class="img-0" alt="" src="../../assets/images/dy2-le2.jpg" /></h2>
+            <h3 id="c014"><span class="bjh3">Warm-up</span></h3>
+            <audio :src="resource.readingTwo" controls style="margin-left: 10px" class="audio"
+              @play="audioPlay"></audio>
+            <p><b>Appreciate the theme song of the Beijing</b>2022<b> Winter Olympics<i> Together for a Shared
+                  Future</i> and fill in the blanks.</b></p>
+            <p class="center"><b><i>Together for a Shared Future</i></b></p>
+            <p class="center">There鈥檚 a twinkle in your eye</p>
+            <p class="center">Reflects the snow that gently covers the tiles</p>
+            <p class="center">Fly to the 1._______</p>
+            <p class="center">See the world鈥檚 new coat of crystal white</p>
+            <p class="center">This feeling you just can鈥檛 2._______</p>
+            <p class="center">Feels as snow as pure as that azure ice</p>
+            <p class="center">Fly to the sky</p>
+            <p class="center">Ride the 3._______watch your fears roll by</p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">27</span>
+        </div>
+      </div>
+    </div>
+    <!-- 28 -->
+    <div class="page-box" page="34">
+      <div v-if="showPageList.indexOf(34) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc-unit2 fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc-unit2">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color-unit2">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p class="center">When everyone needs 4._______</p>
+            <p class="center">Let鈥檚 go hand in hand and rise above</p>
+            <p class="center">Together for a shared future</p>
+            <p class="center">You and I</p>
+            <p class="center">We can 5._______the sky</p>
+            <p class="center">We all know how to love</p>
+            <p class="center">Open up your 6._______and that鈥檚 enough</p>
+            <p class="center">Together for a shared future</p>
+            <p class="center">You and I</p>
+            <p class="center">Together</p>
+            <p class="center">We can touch the sky</p>
+            <h3 id="c015"><span class="bjh3">Reading</span></h3>
+            <audio :src="resource.readingTwo" controls style="margin-left: 10px" class="audio"
+              @play="audioPlay"></audio>
+            <p>1.Have you watched the Beijing 2022 Winter Olympics? What did you think of the opening ceremony?</p>
+            <p>2.What impressed you most during the Beijing 2022 Winter Olympics?</p>
+            <p class="center"><b>From 2008 to 2022:The Road of My Country and My Growth</b></p>
+            <p>For an individual or a country,a period of 14 years is long enough to become calm,confident and mature.On
+              the road from 2008 to 2022,I learned to grow up with my country and the Olympics.</p>
+            <p>In 2008,hosting the Olympics was new to China and I was then new in covering the Olympics as a
+              journalist.Seven years later when we won the right to host the Winter Games,I did not think that Beijing
+              would be the world鈥檚 first city to host both the Summer and Winter Olympics.Now it was real and I was
+              simply enjoying the moment.</p>
+            <p>Turning up as simple but impressive,the opening ceremony lasted for about two hours with less performing
+              artists but more audio-visual technologies to tell the story of 鈥渢ogetherness鈥� rather than introducing
+              鈥渕yself鈥� 14 years ago at the same sports field.The snowflake-shaped Olympic cauldron,formed by the smaller
+              snowflakes with names of the participating countries and regions on them,was lit by two young Chinese
+              athletes.</p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">28</span>
+        </div>
+      </div>
+    </div>
+    <!-- 29 -->
+    <div class="page-box" page="35">
+      <div v-if="showPageList.indexOf(35) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc-unit2">MODULE 2</span>
+            <span class="chapter-right-bc-unit2 fw-bl chapter-right-cl-unit2">GOING GLOBAL</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>As the chief director of the opening ceremony said,2022 would not repeat 2008 though the latter was
+              鈥渆xceptional鈥�,not only because of the pandemic situation but also a different China now 鈥攎ore confident in
+              its culture.</p>
+            <p>In the summer 14 years ago,I was like a festivalgoer full of energy rushing for work but also making
+              errors.I,like many Chinese fellows,cried after Liu Xiang moved away from the track due to injury.In the
+              winter of 2022,I shared my passion in the Olympics in another way 鈥攎ore serious at work,fitter self
+              鈥攖hanks to regular exercise and a positive view of sports competition.</p>
+            <p>It was like getting over my schoolgirl crush and focusing on learning to love.</p>
+            <p>I could not agree more with what a gold medal winner said during an interview.鈥淚n 2008 we impressed the
+              world while in 2022 we became people-centered 鈥攆or athletes and the people.鈥�</p>
+            <p>I failed to control myself the moments when the Chinese national anthem was played and when images of
+              people from all walks of life were displayed during the scene of 鈥淧aying Tribute to the People鈥�.It is this
+              country and its people that made the Olympics happen.I鈥檓 as tearful as usual for now I鈥檓 deeply in love.
+            </p>
+            <p class="fl al-cn mt-40">
+              <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
+              <span class="line-border-box"></span>
+            </p>
+            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+            <p>individual /藢瑟nd瑟藞v瑟d蕭蕣蓹l/ <i>n.</i> 涓汉锛涗釜浣�</p>
+            <div class="bkbj">
+              <p><i>a person considered separately rather than as part of a group</i></p>
+            </div>
+            <p>mature /m蓹藞t蕛蕣蓹/ <i>adj.</i> 鎴愮啛鐨勶紱鐞嗘櫤鐨�</p>
+            <div class="bkbj">
+              <p><i>(of a child or young person) behaving in a sensible way,like an adult</i></p>
+            </div>
+            <p>journalist /藞d蕭蓽藧n蓹l瑟st/ <i>n.</i> 鏂伴椈璁拌�咃紱鎶ョ焊鎾扮浜�</p>
+            <div class="bkbj">
+              <p><i>a person whose job is to collect and write news stories for newspapers,magazines,radio,television or
+                  online news sites</i></p>
+            </div>
+            <p>impressive /瑟m藞pres瑟v/ <i>adj.</i> 锛堜簨鐗╂垨浜猴級 浠や汉璧炲徆鐨勶紱浠や汉鏁僵鐨�</p>
+            <div class="bkbj">
+              <p><i>(of things or people) making you feel admiration,because they are very large,good,skillful,etc.</i>
+              </p>
+            </div>
+            <p>ceremony /藞ser蓹m蓹ni/ <i>n.</i> 浠紡锛涘吀绀�</p>
+            <div class="bkbj">
+              <p><i>a public or religious occasion that includes a series of formal or traditional actions</i></p>
+            </div>
+            <p>audio-visual <i>adj.</i> 瑙嗗惉鐨�</p>
+            <div class="bkbj">
+              <p><i>involving both hearing and seeing</i></p>
+            </div>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">29</span>
+        </div>
+      </div>
+    </div>
+    <!-- 30 -->
+    <div class="page-box" page="36">
+      <div v-if="showPageList.indexOf(36) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc-unit2 fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc-unit2">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color-unit2">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>snowflake /藞sn蓹蕣fle瑟k/ <i>n.</i> 闆姳</p>
+            <div class="bkbj">
+              <p><i>a small soft piece of frozen water that falls from the sky as snow</i></p>
+            </div>
+            <p>cauldron /藞k蓴藧ldr蓹n/ <i>n.</i> 澶ч攨</p>
+            <div class="bkbj">
+              <p><i>a large deep pot for boiling liquids or cooking food over a fire</i></p>
+            </div>
+            <p>participate /p蓱藧藞t瑟s瑟pe瑟t/ <i>v.</i> 鍙傚姞锛涘弬涓�</p>
+            <div class="bkbj">
+              <p><i>to take part in or become involved in an activity</i></p>
+            </div>
+            <p>exceptional /瑟k藞sep蕛蓹nl/ <i>adj.</i> 闈炲嚒鐨勶紱鍗撹秺鐨�</p>
+            <div class="bkbj">
+              <p><i>unusually good; outstanding</i></p>
+            </div>
+            <p>pandemic /p忙n藞dem瑟k/ <i>adj</i>./<i>n.</i> 鍏ㄥ浗鎴栧叏涓栫晫娴佽鐨勶紙鐤剧梾锛�</p>
+            <div class="bkbj">
+              <p><i>a disease that spreads over a whole country or the whole world</i></p>
+            </div>
+            <p>festivalgoer /藞fest蓹vl藢伞蓹蕣蓹/ <i>n.</i> 鍙傚姞鑺傛棩娲诲姩鑰�</p>
+            <div class="bkbj">
+              <p><i>an attender of a festival</i></p>
+            </div>
+            <p>track /tr忙k/ <i>n.</i> 璺戦亾</p>
+            <div class="bkbj">
+              <p><i>a piece of ground that is used for races involving running</i></p>
+            </div>
+            <p>competition /藢k蓲mp蓹藞t瑟蕛n/ <i>n.</i> 绔炶禌锛涚珵浜�</p>
+            <div class="bkbj">
+              <p><i>an event in which people compete with each other to find out who is the best at sth.</i></p>
+            </div>
+            <p>impress /瑟m藞pres/ <i>v.</i> 缁欎簣鏌愪汉娣卞埢鍗拌薄</p>
+            <div class="bkbj">
+              <p><i>to have a favourable effect on sb.</i></p>
+            </div>
+            <p>anthem /藞忙n胃蓹m/ <i>n</i>.鍥芥瓕</p>
+            <div class="bkbj">
+              <p><i>a song that has a special importance for a country</i></p>
+            </div>
+            <div style="display: flex">
+              <div class="left" style="width: 48%">
+                <p>move away 绉诲紑</p>
+                <p>focus on ...鑱氱劍浜庘�︹��</p>
+                <p>pay tribute to ...鍚戔�︹�﹁嚧鏁�</p>
+              </div>
+              <div class="right" style="width: 48%">
+                <p>due to 鐢变簬</p>
+                <p>fail to do ...鏈兘鍋氣�︹��</p>
+              </div>
+            </div>
+            <p><b>鈪�.Reading comprehension.</b></p>
+            <p>A.Read the passage and answer the following questions.</p>
+            <p>1.What was the theme of the Beijing 2022 Winter Olympics?</p>
+            <p>______________________________________________</p>
+            <p>2.What made the Beijing 2022 Winter Olympics 鈥渆xceptional鈥�?</p>
+            <p>______________________________________________</p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">30</span>
+        </div>
+      </div>
+    </div>
+    <!-- 31 -->
+    <div class="page-box" page="37">
+      <div v-if="showPageList.indexOf(37) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc-unit2">MODULE 2</span>
+            <span class="chapter-right-bc-unit2 fw-bl chapter-right-cl-unit2">GOING GLOBAL</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>3.How does the author feel about China holding two Olympic Games?</p>
+            <p>______________________________________________</p>
+            <p>B.Read the author鈥檚 opinions of the two Olympics,and put the number of the sentence into the right
+              column.</p>
+            <p>1.I was full of energy rushing for work but also making errors.</p>
+            <p>2.I was more serious at work and my body became fitter.</p>
+            <p>3.I cried after Liu Xiang moved away off the track due to injury.</p>
+            <p>4.I couldn鈥檛 control myself when the Chinese anthem was played.</p>
+            <p>5.More audio-visual technologies were used in the opening ceremony.</p>
+            <p>6.It focused more on introducing 鈥渕yself鈥� instead of telling the story of 鈥渢ogetherness鈥�.</p>
+            <p class="center"><img class="img-a" alt="" src="../../assets/images/0041-1.jpg" /></p>
+            <p><b>鈪�.Language focus.</b></p>
+            <p>A.Replace the words or expressions in italics with the exact words in the passage and change the form if
+              necessary.</p>
+            <p>1.Each <i>person</i> has a particular job within the company._________</p>
+            <p>2.Lin Wei showed <i>excellent</i> mechanic skills as an auto technician._________</p>
+            <p>3.As a team member,I always <i>take part</i> in the discussions as much as possible._________</p>
+            <p>4.She was the winner of the business plan <i>contest</i> in my company._________</p>
+            <p>5.He is a good <i>reporter</i> who is curious about new information every time._________</p>
+            <p>B.Fill in the blanks with the proper form of the expressions given below.</p>
+            <div class="bk-wh">
+              <p>fail to銆�focus on銆�due to銆�move away銆�pay tribute to</p>
+            </div>
+            <p>1.The delivery man was praised by us ________ his positive attitude.</p>
+            <p>2.The manager basically ________ cost reduction and quality improvement.</p>
+            <p>3.Li Ming ________ control his emotions when he saw the Chinese flag flying at the Olympic Stadium.</p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">31</span>
+        </div>
+      </div>
+    </div>
+    <!-- 32 -->
+    <div class="page-box" page="38">
+      <div v-if="showPageList.indexOf(38) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc-unit2 fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc-unit2">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color-unit2">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p>4.The boss ________ what she had done for the company.</p>
+            <p>5.To be creative,we鈥檇 better ________ from traditional ideas at work.</p>
+            <p><b>鈪�.Grammar focus:Active and passive voice.</b></p>
+            <p>Complete the passage using the correct form of the verbs in the brackets.</p>
+            <p>Fashion designer Vivienne Tam 1. ________ (name) 鈥淵in Yok鈥� when she was born.She was given her English
+              name when she started studying in Hong Kong.Her teacher 2. ________ (teach) English at school but she
+              spoke Chinese at home.Her parents 3. ________ (tell) her to remember Chinese culture.At the same
+              time,Western ideas 4. ________ (introduce) to her since people from many cultures were living in Hong
+              Kong.This mix of East and West in her life 5. ________ (see) in her designs even now.Vivienne 6. ________
+              (move) to New York when she was twenty-five.Her new and interesting designs were liked by important shops
+              there,so a lot of orders for her clothing 7 ________ (place).Today she 8. ________ (sell) East-meets-West
+              clothes not only in New York,but also in cities around the world.</p>
+            <h3 id="c016"><span class="bjh3">Mini-project</span></h3>
+            <p>China has a history of over 5,000 years with rich cultural heritage and great achievements that have
+              drawn admiration from around the world.There are plenty of good reasons to be proud of her.List the things
+              you love about China and explain your reasons.</p>
+            <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="tl-cn">Items</td>
+                <td class="tl-cn">Reasons</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="tl-cn">Chinses Music</td>
+                <td>
+                  I am fond of Chinese folk songs. They are inspired by everyday life of Chinese peopleand are passed
+                  down from generation to generation.
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="tl-cn">Chinses Art</td>
+                <td>
+                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">32</span>
+        </div>
+      </div>
+    </div>
+    <!-- 33 -->
+    <div class="page-box" page="39">
+      <div v-if="showPageList.indexOf(39) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc-unit2">MODULE 2</span>
+            <span class="chapter-right-bc-unit2 fw-bl chapter-right-cl-unit2">GOING GLOBAL</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p class="mr-rg">continued</p>
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="tl-cn">Items</td>
+                <td class="tl-cn">Reasons</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.four" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td style="width: 90%;">
+                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.sex" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td style="width: 90%;">
+                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+            </table>
+            <h2 id="b007"><img class="img-0" alt="" src="image/dy2-le3.jpg" /></h2>
+            <h3 id="c017"><span class="bjh3">Listening</span></h3>
+            <p><b>鈪�.Listen to the introduction to Cultural Diversity Day and fill in the following blanks.</b></p>
+            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="tl-cn" colspan="2">Cultural Diversity Day</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>When is it?</td>
+                <td>1.On_______21st</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>Why do we celebrate it?</td>
+                <td>Recognizing cultural 2._______
+                  Understanding the concept of culture.
+                  Getting to know each other through the differences in language,3._______race,
+                  religion and other elements.
+                  Giving people a sense of 4._______in their own culture.
+                  .Leading to community 5._______and personal growth.</td>
+              </tr>
+            </table>
+            <p><b>鈪�.Listen to the conversation and mark the activities when mentioned.</b></p>
+            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
+              Lecture on Ancient Chinese History</p>
+            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />Calligraphy &amp;
+              Painting Demonstration</p>
+            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />Traditional Chinese
+              Music</p>
+            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />Sichuan Opera</p>
+            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />Chinese Cuisine</p>
+            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />Tea Ceremony</p>
+            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />Tai Chi</p>
+            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />Traditional Chinese
+              Medicine</p>
+            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />Traditional Chinese
+              Crafts</p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">33</span>
+        </div>
+      </div>
+    </div>
+    <!-- 34 -->
+    <div class="page-box" page="40">
+      <div v-if="showPageList.indexOf(40) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc-unit2 fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc-unit2">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color-unit2">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <h3 id="c018"><span class="bjh3">Practical Writing</span></h3>
+            <p>Work with your partner to discuss the following questions.</p>
+            <p>1.Why is a schedule important for everyone attending the event?</p>
+            <p>2.What are the elements of a schedule?</p>
+            <p><b>鈪�.Read the following tips for making a schedule of an event and find out how you can improve your
+                schedule.</b></p>
+            <p>An event schedule is a document that organizers provide for the attendees and participants.It usually
+              includes the general direction and landmarks of the event venue,which helps people figure out where and
+              when they are going.</p>
+            <div class="fieldset">
+              <p>鈼� Use a table for your schedule to keep your content organized.</p>
+              <p>鈼� Make it short and specific.</p>
+              <p>鈼� Be realistic about how much you want to accomplish in one day.</p>
+              <p>鈼� Add a time allowance to your plans for unexpected events.</p>
+              <p class="center"><img class="img-h" alt="" src="../../assets/images/0044-1.jpg" /></p>
+            </div>
+            <p><b>鈪�.Read the schedule of Chinese Culture Week</b>2023<b> and fill in the blanks by translating the
+                Chinese in the brackets.</b></p>
+            <p class="center"><img class="img-a" alt="" src="../../assets/images/0044-2.jpg" /></p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">34</span>
+        </div>
+      </div>
+    </div>
+    <!-- 35 -->
+    <div class="page-box" page="41">
+      <div v-if="showPageList.indexOf(41) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc-unit2">MODULE 2</span>
+            <span class="chapter-right-bc-unit2 fw-bl chapter-right-cl-unit2">GOING GLOBAL</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <p><b>鈪�.Malaysian student Andy writes an email to his Chinese friend Wang Hua about his trip to
+                China.Complete the schedule of his visit to Chengdu with the information from the email.</b></p>
+            <p class="center"><img class="img-0" alt="" src="../../assets/images/0045-2.jpg" /></p>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">35</span>
+        </div>
+      </div>
+    </div>
+    <!-- 36 -->
+    <div class="page-box" page="42">
+      <div v-if="showPageList.indexOf(42) > -1">
+        <!-- 澶撮儴 -->
+        <div class="w100 mb-20" style="padding-right: 20px">
+          <div class="event-header-bc-unit2 fl al-end" style="height: 100px; padding-left: 40px">
+            <div class="preface-header-box event-header-text-bc-unit2">
+              <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+              <span class="g-text event-text-color-unit2">鍩虹妯″潡涓�</span>
+            </div>
+          </div>
+        </div>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="tl-cn">Day</td>
+                <td class="wh-no tl-cn">Events/Activities</td>
+                <td class="tl-cn">Place</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>1._________</td>
+                <td>Attend the festival activities</td>
+                <td>
+                  The International Intangible Cultural Heritage Park
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>Wednesday</td>
+                <td>Climb the mountain</td>
+                <td>
+                  2.___________
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>Thursday</td>
+                <td>Visit attractions in the downtown
+                  3.____________ </td>
+                <td>
+                  Wuhou Temple & Jinsha Site MuseumShunxing Tea House
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>Friday</td>
+                <td> 4.____________ Buy souvenirs</td>
+                <td>
+                  Panda Base 5.____________
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>Saturday</td>
+                <td>6.___________</td>
+                <td>
+                  Shuangliu International Airport
+                </td>
+              </tr>
+            </table>
+            <p>鈪�.<b>A delegation from Chiang Mai University is going to visit your college from December</b> 10-12<b> to
+                promote Chinese language teaching and cultural exchange in Thailand.Arrange a three-day schedule for the
+                delegation including the activities below.</b></p>
+            <p>l Visit the college history museum</p>
+            <p>l Have a meeting with the director of International Exchange and Cooperation Department</p>
+            <p>l Sign an agreement on the student-exchange program</p>
+            <p>l Attend a welcome party</p>
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="tl-cn" colspan="4">Schedule for Chiang Mai UniversityDelegation's Visit</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="tl-cn">Date</td>
+                <td class="tl-cn">Time</td>
+                <td class="tl-cn">Activities</td>
+                <td class="tl-cn">Place</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.four" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td >
+                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.six" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">36</span>
+        </div>
+      </div>
+    </div>
+    <!-- 37 -->
+    <div class="page-box" page="43">
+      <div v-if="showPageList.indexOf(43) > -1">
+        <!-- 澶撮儴 -->
+        <ul class="preface-odd-header w100 fl ju-bt">
+          <li class=""></li>
+          <li class="fz-18">
+            <span class="chapter-left-bc-unit2">MODULE 2</span>
+            <span class="chapter-right-bc-unit2 fw-bl chapter-right-cl-unit2">GOING GLOBAL</span>
+          </li>
+        </ul>
+        <!-- 鍐呭 -->
+        <div class="padding-93">
+          <div class="bodystyle">
+            <div class="un-h2">
+              <h2 id="b008">Unit Project</h2>
+            </div>
+            <p>International Sister City Week will be celebrated in your hometown.Participants of sister cities from
+              other countries will join the event to promote exchange and expand communication with your
+              hometown.Arrange a three-day event schedule for your guests.</p>
+            <p>Step 1: Work in groups of five.</p>
+            <p>Step 2: Discuss what activities will be held during the event. (For reference: welcome banquet,
+              round-table meeting, cultural forum, performances, photo shows,etc.)</p>
+            <p>Step 3: Make an event schedule for the participants.</p>
+            <p>Step 4: Present your arrangement to the class.</p>
+            <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
+            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+              <tr class="table-th-bc">
+                <td class="tl-cn" colspan="4">Schedule</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td class="tl-cn">Date</td>
+                <td class="tl-cn">Time</td>
+                <td class="tl-cn">Activities</td>
+                <td class="tl-cn">Place</td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td rowspan="3">
+                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.four" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.six" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td rowspan="3">
+                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.four" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.six" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td rowspan="3">
+                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.four" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.six" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+              <tr class="table-tr-bc">
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+                <td>
+                  <textarea v-model="questionData.table.nine" class="w100 table-tr-bc b0 table-textarea"
+                    @change="setBookQuestion"></textarea>
+                </td>
+              </tr>
+            </table>
+            <div class="fieldset">
+              <p class="center"><b>Useful Expressions for Making Arrangements</b></p>
+              <p><b>Activities</b>: welcome banquet,round-table meeting,cultural forum,folk culture performances,city
+                photos show 鈥�</p>
+              <p><b>Local highlights</b>:(take Beijing for example) climbing the Great Wall,visiting the Forbidden
+                City,tasting Beijing roast duck,enjoying Peking opera,exploring the old alleys 鈥�</p>
+            </div>
+          </div>
+        </div>
+        <div class="preface-bottom">
+          <span class="contet-num-box">37</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import matching from "@/components/matching/matching.vue";
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+  name: "chapter-two",
+  components: { matching },
+  props: {
+    showPageList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      imgThirteen: require("../../assets/images/grammar.jpg"),
+      showAnswerOne: false,
+      showAnswerTwo: false,
+      showAnswerThree: false,
+      showAnswerFour: false,
+      showAnswerFive: false,
+      showImg: false,
+      showQuestionAnswer: false,
+      rawData: {
+        left: [
+          {
+            oldId: "FB34",
+            txt: "Martin銆�銆�銆�銆�Silk",
+          },
+          {
+            oldId: "64D6",
+            txt: "Jessica銆�銆�The Great Wall",
+          },
+          {
+            oldId: "2ED4",
+            txt: "Soren銆�銆�Chinese Food",
+          },
+          {
+            oldId: "44DE",
+            txt: "Chinese銆�銆�銆�銆�Tea",
+          },
+        ],
+        right: [
+          {
+            oldId: "64D6",
+            txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
+          },
+          {
+            oldId: "FB34",
+            txt: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
+          },
+          {
+            oldId: "2ED4",
+            txt: "The clothing material is quite popular among Roman women inancient times.",
+          },
+          {
+            oldId: "44DE",
+            txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+          },
+        ],
+      },
+      value: [],
+      question: {
+        KnowledgePoint: "123",
+        analysis: "123",
+        answer: [
+          {
+            id: "FB34",
+            linkValue:
+              "The clothing material is quite popular among Roman women inancient times.",
+            value: "Silk",
+          },
+          {
+            id: "64D6",
+            linkValue:
+              "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
+            value: "The Great Wall",
+          },
+          {
+            id: "2ED4",
+            linkValue:
+              "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+            value: "Chinese Food",
+          },
+          {
+            id: "44DE",
+            linkValue:
+              "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
+            value: "Chinese Tea",
+          },
+        ],
+        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: [],
+        answerImg: require("../../assets/images/matching-one.png"),
+      },
+      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",
+          },
+          seven: "",
+        },
+        reading: {
+          one: "",
+          two: "",
+        },
+        table: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+          six: "",
+          seven: "",
+          enight: "",
+          nine: "",
+        },
+      },
+      testData: {
+        check: [],
+        tx: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+        in: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+        line: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+        ts: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+        },
+        gr: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+        cm: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+      },
+      resource: {
+        listenOne: "",
+        readingOne: "",
+        readingTwo: "",
+      },
+      dropDownList: [
+        "online shopping",
+        "facial recognition",
+        "electronic payment",
+        "intercity train",
+        "shared bike",
+        "take-away service",
+      ],
+      dropdownData: {
+        one: {
+          value: "",
+          isRight: null,
+          answer: "intercity train",
+        },
+        two: {
+          value: "",
+          isRight: null,
+          answer: "online shopping",
+        },
+        three: {
+          value: "",
+          isRight: null,
+          answer: "electronic payment",
+        },
+        four: {
+          value: "",
+          isRight: null,
+          answer: "shared bike",
+        },
+        five: {
+          value: "",
+          isRight: null,
+          answer: "take-away service",
+        },
+        six: {
+          value: "",
+          isRight: null,
+          answer: "facial recognition",
+        },
+      },
+    };
+  },
+  mounted() {
+    const testData = localStorage.getItem("english-testOne");
+    if (testData) {
+      this.testData = JSON.parse(testData);
+    }
+    const bookQuestion = localStorage.getItem("english-book-question-one");
+    if (bookQuestion) {
+      this.questionData = JSON.parse(bookQuestion);
+    }
+    const dropdownData = localStorage.getItem("english-dropdown-one");
+    if (dropdownData) {
+      this.dropdownData = JSON.parse(dropdownData);
+    }
+    this.getPath();
+  },
+  methods: {
+    saveWord(event, word) {
+      this.$emit("saveCharacters", event, word);
+    },
+    setTestData() {
+      localStorage.setItem("english-testOne", JSON.stringify(this.testData));
+    },
+    changeTestData() {
+      localStorage.removeItem("english-testOne");
+      this.testData = {
+        check: [],
+        tx: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+        in: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+        line: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+        ts: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+        },
+        gr: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+        cm: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+        },
+      };
+    },
+    setBookQuestion() {
+      console.log("淇濆瓨");
+      localStorage.setItem(
+        "english-book-question-one",
+        JSON.stringify(this.questionData)
+      );
+    },
+    async getPath() {
+      this.resource.listenOne = await getResourcePath(
+        "422139A2EF66EA888C5ED1D550AE23E0"
+      );
+      this.resource.readingOne = await getResourcePath(
+        "3F442B682D84C8AB06C800B29D734920"
+      );
+      this.resource.readingTwo = await getResourcePath(
+        "E8719EC88026BCFB11D292AA999F6D3D"
+      );
+    },
+    showAnswer(type) {
+      if (type == "showImg") {
+        this.showImg = !this.showImg;
+      }
+    },
+    handleQuestion(type) {
+      if (type == "one") {
+        this.questionData.warnUp.one.value
+          ? (this.questionData.warnUp.one.isRight =
+            this.questionData.warnUp.one.value == "Chinese knot")
+          : (this.questionData.warnUp.one.isRight = null);
+      } else if (type == "two") {
+        this.questionData.warnUp.two.value
+          ? (this.questionData.warnUp.two.isRight =
+            this.questionData.warnUp.two.value == "Chinese medicine")
+          : (this.questionData.warnUp.two.isRight = null);
+      } else if (type == "three") {
+        this.questionData.warnUp.three.value
+          ? (this.questionData.warnUp.three.isRight =
+            this.questionData.warnUp.three.value == "Chinese calligraphy")
+          : (this.questionData.warnUp.three.isRight = null);
+      } else if (type == "four") {
+        this.questionData.warnUp.four.value
+          ? (this.questionData.warnUp.four.isRight =
+            this.questionData.warnUp.four.value == "Taichi")
+          : (this.questionData.warnUp.four.isRight = null);
+      } else if (type == "five") {
+        this.questionData.warnUp.five.value
+          ? (this.questionData.warnUp.five.isRight =
+            this.questionData.warnUp.five.value == "sweet dumpling")
+          : (this.questionData.warnUp.five.isRight = null);
+      } else if (type == "six") {
+        this.questionData.warnUp.six.value
+          ? (this.questionData.warnUp.six.isRight =
+            this.questionData.warnUp.six.value == "Chinese chess")
+          : (this.questionData.warnUp.six.isRight = null);
+      }
+    },
+    handleDropdown(type) {
+      const dropdownDatas = this.dropdownData;
+      for (let key in dropdownDatas) {
+        const item = dropdownDatas[key];
+        if (type == "judge") {
+          item.value == item.answer
+            ? (item.isRight = true)
+            : (item.isRight = false);
+          console.log(item.value, item.answer);
+        }
+      }
+      this.dropdownData = dropdownDatas;
+    },
+    changeDropdown() {
+      localStorage.removeItem("english-dropdown-one");
+      for (let key in this.dropdownData) {
+        const item = this.dropdownData[key];
+        item.value = "";
+        item.isRight = null;
+      }
+    },
+    setDropdownData() {
+      localStorage.setItem(
+        "english-dropdown-one",
+        JSON.stringify(this.dropdownData)
+      );
+    },
+    saveData() {
+      console.log(this.testData);
+    },
+    audioPlay() {
+      this.$emit("closeMiniAudio");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  font-size: 16px !important;
+}
+
+.bodystyle {
+  margin: 0 !important;
+}
+
+.line-border-box {
+  margin-left: 10px;
+  display: inline-block;
+  width: 50%;
+  height: 3px;
+  background-color: #f9a71b;
+}
+
+.mr-20 {
+  margin-right: 20px;
+}
+
+.dl-box {
+  display: flex;
+  flex-wrap: wrap;
+
+  .dl-span {
+    display: inline-block;
+    text-indent: 0;
+    margin-bottom: 15px;
+    height: 20px;
+    line-height: 20px;
+  }
+}
+
+.btn-w {
+  font-size: 14px;
+  border-width: 1px;
+  min-width: 80px;
+  height: 30px;
+  background-color: #fff;
+
+  &:hover {
+    background-color: #0bab87;
+    color: #fff;
+  }
+}
+
+.banshi {
+  position: relative;
+  margin-top: 40px;
+  width: 100%;
+  height: 350px;
+  margin: 0 auto;
+}
+
+.pageBox {
+  z-index: 9999999999;
+  color: #999;
+  position: absolute;
+  left: 48%;
+  bottom: 0px;
+}
+
+select {
+  height: 24px;
+}
+
+.mini-audio {
+  width: 200px;
+  height: 200px;
+  position: fixed;
+  right: 0;
+  background-color: red;
+}
+</style>
diff --git a/src/books/English/view/components/chapter003.vue b/src/books/English/view/components/chapter003.vue
new file mode 100644
index 0000000..55c40af
--- /dev/null
+++ b/src/books/English/view/components/chapter003.vue
@@ -0,0 +1,1806 @@
+<template>
+    <div class="chapter" num="4"> <!-- 涓嬩竴涓崟鍏� -->
+        <!-- 38 -->
+        <div class="page-box" page="44">
+            <div class="bodystyle" v-if="showPageList.indexOf(44) > -1">
+                <h1 id="a005">
+                    <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
+                </h1>
+                <p class="img"></p>
+                <p><b>This unit will help you to:</b></p>
+                <p>鉃� Learn words and expressions about volunteering</p>
+                <p>鉃� Review the structure of the present continuous tense and the simple future tense</p>
+                <p>鉃� Ask for clarification politely</p>
+                <p>鉃� Be able to fill in the profile properly</p>
+                <p>鉃� Get ready to volunteer</p>
+                <p class="center">
+                    <img class="img-0" alt="" src="../../assets/images/0048-1.jpg" />
+                </p>
+                <p class="img"></p>
+            </div>
+        </div>
+        <!-- 39 -->
+        <div class="page-box" page="45">
+            <div v-if="showPageList.indexOf(45) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <h2 id="b009"><img class="img-0" alt="" src="../../assets/images/dy3-le1.jpg" /></h2>
+                        <h3 id="c019"><span class="bjh3">Warm-up</span></h3>
+                        <p><b>鈪�.Put the expressions in the box below on the corresponding answer line under each
+                                picture.</b></p>
+                        <div class="bk-wh">
+                            <p>animal rescue and care銆�blood donation銆�community clean-ups銆�language service</p>
+                        </div>
+                        <div class="openImgBox">
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0049-2.jpg" alt="" class="w100" />
+                                        </p>
+                                        <p class="center">
+                                            1.
+                                            <select v-model="dropdownData.one.value">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.one.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歜lood donation
+                                    </p>
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0049-3.jpg" alt="" style="width: 98%" />
+                                        </p>
+                                        <p class="center">
+                                            2.
+                                            <select v-model="dropdownData.two.value">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.two.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歭anguage service
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="fl ju-bt">
+                                <div class="left" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0049-4.jpg" alt="" style="width: 98%" />
+                                        </p>
+                                        <p class="center">
+                                            3.
+                                            <select v-model="dropdownData.three.value">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.three.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歝ommunity clean-ups
+                                    </p>
+                                </div>
+                                <div class="right" style="width: 48%">
+                                    <div>
+                                        <p class="center">
+                                            <img src="../../assets/images/0049-5.jpg" alt="" style="width: 94%" />
+                                        </p>
+                                        <p class="center">
+                                            4.
+                                            <select v-model="dropdownData.four.value">
+                                                <option v-for="(item, index) in dropDownList" :key="index"
+                                                    :value="item">
+                                                    {{ item }}
+                                                </option>
+                                            </select>
+                                            <span class="icon-box">
+                                                <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon"
+                                                    viewBox="0 0 1820 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="18767"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
+                                                    <path
+                                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                                                        fill="#1AFA29" p-id="18768"></path>
+                                                </svg>
+                                                <svg v-if="dropdownData.four.isRight == false" t="1716987085767"
+                                                    class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                                    xmlns="http://www.w3.org/2000/svg" p-id="25745"
+                                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
+                                                    <path
+                                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                                                        fill="#d81e06" p-id="25746"></path>
+                                                </svg>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
+                                        绛旀锛歛nimal rescue and care
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="w100 fl ju-cn">
+                            <div class="fl ju-ev mt-40" style="width: 80%">
+                                <button class="btn-border btn-w" @click="handleDropdown('judge')">
+                                    鎻愪氦
+                                </button>
+                                <button @click="setDropdownData" class="btn-border btn-w">
+                                    淇濆瓨
+                                </button>
+                                <button class="btn-border btn-w" @click="changeDropdown">
+                                    閲嶅仛
+                                </button>
+                                <button @click="showAnswerFive = !showAnswerFive" class="parimary-btn">
+                                    鏌ョ湅绛旀
+                                </button>
+                            </div>
+                        </div>
+                        <p><b>鈪�.Talk to your partner about the types of volunteer work you know.</b></p>
+                        <h3 id="c020"><span class="bjh3">Listening</span></h3>
+                        <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+                        <p><b>Watch the video and mark the best answer to each question.</b></p>
+                        <div style="display: flex;">
+                            <div class="left" style="width: 55%; margin-top: 11%;">
+                                <p>1.Why do you want to be a volunteer?</p>
+                            </div>
+                            <div class="right" style="widtinputh: 45%;">
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" /> You can change lives.</p>
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" /> You can stay with friends.</p>
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" /> You can teach new skills.</p>
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" /> You can make more money.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">39</span>
+                </div>
+            </div>
+        </div>
+        <!-- 40 -->
+        <div class="page-box" page="46">
+            <div v-if="showPageList.indexOf(46) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <div style="display: flex">
+                            <div class="left" style="width: 55%; margin-top: 11%;">
+                                <p>2.Who are more likely to be volunteers?</p>
+                            </div>
+                            <div class="right" style="width: 45%;">
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" /> College students.</p>
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" /> Nonprofessionals.</p>
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" /> People without jobs.</p>
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" /> Children.</p>
+                            </div>
+                        </div>
+                        <div style="display: flex">
+                            <div class="left" style="width: 50%; margin-top: 11%;">
+                                <p>3.Which activity is NOT mentioned in the video?</p>
+                            </div>
+                            <div class="right" style="width: 50%;">
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" />Volunteering in sport.</p>
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" />Emergency services.</p>
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" />Helping people with disabilities.</p>
+                                <p>銆�<input type="checkbox" name="ball" value="Language" id="1"
+                                        v-model="testData.check" />Teaching.</p>
+                            </div>
+                        </div>
+                        <h3 id="c021"><span class="bjh3">Reading</span></h3>
+                        <p>1.As the saying goes,鈥淭he rose is in her hand,the flavor in mine.鈥� What鈥檚 your understanding
+                            of this saying?</p>
+                        <p>2.In what way do you help others in daily life?</p>
+                        <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+                        <p class="center"><b>Volunteering and Its Surprising Benefits</b></p>
+                        <p>With busy life,it can be hard to find time to volunteer.However,the benefits of volunteering
+                            can be enormous.</p>
+                        <p>One of the most well-known benefits of volunteering is the impact on the
+                            community.Volunteering allows you to connect to your community and make it a better
+                            place.Even helping out with the smallest tasks can make a real difference to the life of
+                            people in need.Volunteering can benefit you and your family as well as the people you choose
+                            to help.Doing volunteer work helps you make new friends,expand your network,and boost your
+                            social skills.</p>
+                        <p>Volunteering helps reduce the effects of stress,anger,and anxiety.The social contact aspect
+                            of helping and working with others can have a great effect on your overall mental
+                            health.Nothing reduces stress better than a meaningful connection to another person.Studies
+                            have found that those who volunteer have a lower mortality rate than those who do not.</p>
+                        <p>If you鈥檙e considering a new career,volunteering can help you get experience in your area of
+                            interest and meet people in the field.Even if you鈥檙e not planning to change
+                            careers,volunteering can give you the opportunity to practice important qualities and skills
+                            used in work,such as teamwork,communication skills and problem-solving skills.You might feel
+                            more comfortable stretching your wings at work once you鈥檝e developed these qualities and
+                            skills in a volunteer position first.</p>
+                    </div>
+                    <div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">40</span>
+                </div>
+            </div>
+        </div>
+        <!-- 41 -->
+        <div class="page-box" page="47">
+            <div v-if="showPageList.indexOf(47) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>What鈥檚 more,volunteering is a fun and easy way to explore your interests and passions.Doing
+                            volunteer work can be a relaxing,energizing escape from your day-to-day routine of
+                            work,school,or family commitments.Volunteering also provides you with
+                            creativity,motivation,and vision that can carry over into your personal life and your
+                            career.</p>
+                        <p>In a word,volunteering has a great influence on your body and mental health.Remember when you
+                            help people,you help yourself as well.When you make plans for yourself,it is always a good
+                            idea to spare some time for volunteering service.Not only can volunteering improve your
+                            r茅sum茅,but it can also help connect you to more people and bring fulfillment to your life.
+                        </p>
+                        <p class="fl al-cn mt-40">
+                            <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
+                            <span class="line-border-box"></span>
+                        </p>
+                        <audio :src="resource.readingTwo" controls style="margin-left: 10px" class="audio"
+                            @play="audioPlay"></audio>
+                        <p>enormous /瑟藞n蓴藧m蓹s/ <i>adj.</i> 宸ㄥぇ鐨勶紱搴炲ぇ鐨�</p>
+                        <div class="bkbj">
+                            <p><i>extremely large</i></p>
+                        </div>
+                        <p>expand /瑟k藞sp忙nd/ <i>v.</i> 鎵╁ぇ锛屽鍔狅紙灏虹爜銆佹暟閲忔垨閲嶈鎬э級</p>
+                        <div class="bkbj">
+                            <p><i>to become greater in size,number or importance; to make sth.greater in size,number or
+                                    importance</i></p>
+                        </div>
+                        <p>boost /bu藧st/ <i>v.</i> 浣垮闀匡紱浣垮叴鏃�</p>
+                        <div class="bkbj">
+                            <p><i>to make sth.increase,or become better or more successful</i></p>
+                        </div>
+                        <p>anxiety /忙艐藞za瑟蓹ti/ <i>n.</i> 鐒﹁檻锛涘咖铏�</p>
+                        <div class="bkbj">
+                            <p><i>the state of feeling nervous or worried that sth.bad is going to happen</i></p>
+                        </div>
+                        <p>meaningful /藞mi藧n瑟艐fl/ <i>adj.</i> 閲嶈鐨勶紱涓ヨ們鐨�</p>
+                        <div class="bkbj">
+                            <p><i>serious and important</i></p>
+                        </div>
+                        <p>mortality /m蓴藧藞t忙l蓹ti/ <i>n.</i> 姝讳骸鐜囷紱姝讳骸鏁伴噺</p>
+                        <div class="bkbj">
+                            <p><i>the number of deaths in a particular situation or period of time</i></p>
+                        </div>
+                        <p>communication /k蓹藢mju藧n瑟藞ke瑟蕛n/ <i>n.</i> 琛ㄨ揪锛涗氦娴�</p>
+                        <div class="bkbj">
+                            <p><i>the activity or process of expressing ideas and feelings or of giving people
+                                    information</i></p>
+                        </div>
+                        <p>passion /藞p忙蕛n/ <i>n.</i> 婵�鎯咃紱 寮虹儓鎯呮劅</p>
+                        <div class="bkbj">
+                            <p><i>a very strong feeling of love,hatred,anger,enthusiasm,etc.</i></p>
+                        </div>
+                        <p>energize /藞en蓹d蕭a瑟z/ <i>v.</i> 缁欙紙鏌愪汉锛� 澧炴坊鑳介噺锛堟垨绮惧姏銆佹椿鍔涖�佸共鍔诧級</p>
+                        <div class="bkbj">
+                            <p><i>to give sb.more energy,strength,etc.</i></p>
+                        </div>
+                        <p>commitment /k蓹藞m瑟tm蓹nt/ <i>n.</i> 鎵胯锛涜璇�</p>
+                        <div class="bkbj">
+                            <p><i>a promise to do sth.or to behave in a particular way</i></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">41</span>
+                </div>
+            </div>
+        </div>
+        <!-- 42 -->
+        <div class="page-box" page="48">
+            <div v-if="showPageList.indexOf(48) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        p>creativity /藢kri藧e瑟藞t瑟v蓹ti/ <i>n.</i> 鍒涢�犲姏锛涘垱閫犳��</p>
+                        <div class="bkbj">
+                            <p><i>the use of skill and imagination to produce sth.new or to produce art</i></p>
+                        </div>
+                        <p>vision /藞v瑟蕭n/ <i>n.</i> 瑙嗛噹</p>
+                        <div class="bkbj">
+                            <p><i>the area that you can see from a particular position</i></p>
+                        </div>
+                        <p>fulfillment /f蕣l藞f瑟lm蓹nt/ <i>n.</i> 瀹炵幇</p>
+                        <div class="bkbj">
+                            <p><i>the act of doing or achieving what was hoped for or expected</i></p>
+                        </div>
+                        <div style="display: flex;">
+                            <div class="left" style="width: 45%;">
+                                <p>help out 甯姪瑙e喅闅鹃锛涙晳鍑�</p>
+                                <p>stretch one鈥檚 wings 澶у睍鎷宠剼</p>
+                            </div>
+                            <div class="right" style="width: 55%;">
+                                <p>make a difference 鏈夊奖鍝嶏紱鏈夊叧绯�</p>
+                                <p>what鈥檚 more 鑰屼笖锛涙澶�</p>
+                            </div>
+                        </div>
+                        <p>carry over 锛堝湪涓嶅悓鎯呭喌涓嬶級 缁х画瀛樺湪锛屼繚鎸佷笅鍘�</p>
+                        <p></p>
+                        <p><b>鈪�.Reading comprehension.</b></p>
+                        <p>A.Read through the passage and choose the main idea for Paragraph 2 to 5.</p>
+                        <p>1.Paragraph 2銆�銆�a.Volunteering can advance your career.</p>
+                        <p>2.Paragraph 3銆�銆�b.Volunteering brings fun and fulfillment to your life.</p>
+                        <p>3.Paragraph 4銆�銆�c.Volunteering is good for your mind.</p>
+                        <p>4.Paragraph 5銆�銆�d.Volunteering connects you to your community.</p>
+                        <p>B.Choose the best answer to each question according to the information from the passage.</p>
+                        <p>1.What might be the reason that people don鈥檛 volunteer?</p>
+                        <p>a.People are too busy to volunteer.</p>
+                        <p>b.People can鈥檛 find ways to volunteer.</p>
+                        <p>c.There is no benefit in volunteering.</p>
+                        <p>d.The volunteer work is too hard to do.</p>
+                        <p>2.Which of the following is NOT true?</p>
+                        <p>a.Volunteering is a win-win behavior for both parties.</p>
+                        <p>b.Small acts of helping others also matter.</p>
+                        <p>c.Those who volunteer enjoy a lower mortality rate.</p>
+                        <p>d.Volunteering has nothing to do with one鈥檚 mental health.</p>
+                        <p>3.In what way can volunteering help with one鈥檚 career development?</p>
+                        <p>a.Providing one with a new career.</p>
+                        <p>b.Helping to arouse one鈥檚 interests.</p>
+                        <p>c.Offering an opportunity to practice working skills.</p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">42</span>
+                </div>
+            </div>
+        </div>
+        <!-- 43 -->
+        <div class="page-box" page="49">
+            <div v-if="showPageList.indexOf(49) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>d.Bringing more comfort to those who are at work.</p>
+                        <p>4.What suggestion does the writer offer in the last paragraph?</p>
+                        <p>a.Making a plan before volunteering.</p>
+                        <p>b.Preparing a r茅sum茅 in advance.</p>
+                        <p>c.Taking a physical and mental health check.</p>
+                        <p>d.Spending some time volunteering.</p>
+                        <p>5.What is the author鈥檚 attitude towards volunteering?</p>
+                        <p>a.Indifferent. b.Supportive. c.Opposed.d.Unknown.</p>
+                        <p><b>鈪�.Language focus.</b></p>
+                        <p>A.Fill in the blanks with the proper words in the passage.The initial letters of the words
+                            have been given.</p>
+                        <p>There are e______benefits when it comes to volunteering.First,it helps to make the community
+                            a better place,and it also helps you to connect to people and b______your social
+                            skills.Second,volunteering helps to deal with stress,anger and a______.Studies show that
+                            people who volunteer have a lower m______rate.Third,volunteering helps with one鈥檚
+                            career.When you get the chance to practice working skills,you will feel more comfortable at
+                            work.Fourth,when you are tied up with the daily routine,volunteering can be an
+                            e______escape,where you can find your interests and p______.All in all,with all the
+                            benefits,it is always a good idea to spend some time volunteering.</p>
+                        <p>B.Underline the following expressions in the passage and make sentences with them.</p>
+                        <p>1.help out_________________________________________</p>
+                        <p>2.make a difference_________________________________</p>
+                        <p>3.stretch one鈥檚 wings________________________________</p>
+                        <p>4.what鈥檚 more_____________________________________</p>
+                        <p>5.carry over_______________________________________</p>
+                        <p>C.Translate the following sentences into Chinese.</p>
+                        <p>1.Joining the Youth Volunteer Association in college expands her friendship circle.</p>
+                        <p>_______________________________________________________</p>
+                        <p>2.Serving in the Beijing 2022 Winter Olympics was a meaningful and unforgettable experience.
+                        </p>
+                        <p>_______________________________________________________</p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">43</span>
+                </div>
+            </div>
+        </div>
+        <!-- 44 -->
+        <div class="page-box" page="50">
+            <div v-if="showPageList.indexOf(50) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>3.It is the commitment to children that keeps her a teacher in the village school for a life
+                            time.</p>
+                        <p>_______________________________________________________</p>
+                        <p>4.Volunteering in different programs helps him grow up to be a man of vision.</p>
+                        <p>_______________________________________________________</p>
+                        <p><b>鈪�.Grammar focus:The present continuous tense.</b></p>
+                        <p>A.Complete the sentences with the present continuous form of the verbs given in the brackets.
+                        </p>
+                        <p>1.Encouraged by other volunteers,he_________(consider) becoming a regular helper in community
+                            service.</p>
+                        <p>2.At the moment,I_________(plan) to work as a volunteer teacher after graduation.</p>
+                        <p>3.What you_________(do) at present will make a difference to people around you.</p>
+                        <p>4.Currently,they_________(put) a lot of efforts into volunteer work.</p>
+                        <p>5.The smile on her face says that she_________(have) a great time with the old in the nursing
+                            home.</p>
+                        <p>B.Describe each picture below in English using the present continuous tense according to the
+                            Chinese hints.</p>
+                        <div class="fieldset-2">
+                            <p class="center"><img class="img-e" alt="" src="../../assets/images/0054-1.jpg" /></p>
+                            <p>蹇楁効鑰呮鍦ㄨ緟瀵煎瀛愪滑鍋氬姛璇俱��</p>
+                            <p>_______________________________________________</p>
+                            <p>_______________________________________________</p>
+                            <p>_______________________________________________</p>
+                        </div>
+                        <div class="fieldset-2">
+                            <p class="center"><img class="img-e" alt="" src="../../assets/images/0054-2.jpg" /></p>
+                            <p>瀛︾敓浠鍦ㄥ府蹇欏仛鍐滄椿銆�</p>
+                            <p>_______________________________________________</p>
+                            <p>_______________________________________________</p>
+                            <p>_______________________________________________</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">44</span>
+                </div>
+            </div>
+        </div>
+        <!-- 45 -->
+        <div class="page-box" page="51">
+            <div v-if="showPageList.indexOf(51) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <div class="fieldset-2">
+                            <p class="center"><img class="img-e" alt="" src="../../assets/images/0055-1.jpg" /></p>
+                            <p>蹇楁効鑰呮鍦ㄦ矙婊╀笂娓呯悊鍨冨溇銆�</p>
+                            <p>_______________________________________________</p>
+                            <p>_______________________________________________</p>
+                            <p>_______________________________________________</p>
+                        </div>
+                        <div class="fieldset-2">
+                            <p class="center"><img class="img-e" alt="" src="../../assets/images/0055-2.jpg" /></p>
+                            <p>蹇楁効鑰呮鍦ㄨ繘琛岃。鐗╂崘璧犳椿鍔ㄣ��</p>
+                            <p>_______________________________________________</p>
+                            <p>_______________________________________________</p>
+                            <p>_______________________________________________</p>
+                        </div>
+                        <h3 id="c022"><span class="bjh3">Mini-project</span></h3>
+                        <p>We all have done some volunteer work in one way or another before.Take some time to recall
+                            that experience,and then:</p>
+                        <p>1.Interview your partner about his/her volunteering experiences by asking the following
+                            questions;</p>
+                        <p>2.Finish the worksheet and report to the class.</p>
+                        <div class="fieldset">
+                            <p>Questions:1.What volunteer work have you done?</p>
+                            <p>銆�銆�銆�銆�2.How did you feel when you were volunteering?</p>
+                            <p>銆�銆�銆�銆�3.What are the benefits that experience has brought you?</p>
+                        </div>
+                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">The Volunteer Work</td>
+                                <td class="tl-cn">The Feelings</td>
+                                <td class="tl-cn">The Benefits</td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td style="word-break: break-all;">Taking care of left-behind children during summer
+                                    vacation.</td>
+                                <td style="word-break: break-all;">I feel very proud of myself.The work is very
+                                    meaningful.</td>
+                                <td style="word-break: break-all;">It has taught me to be more patient. I have learned
+                                    to take care of others, and to be more considerate.</td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.two"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.three"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.four"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">45</span>
+                </div>
+            </div>
+        </div>
+        <!-- 46 -->
+        <div class="page-box" page="52">
+            <div v-if="showPageList.indexOf(52) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">The Volunteer Work</td>
+                                <td class="tl-cn">The Feelings</td>
+                                <td class="tl-cn">The Benefits</td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.two"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td style="width: 40%;">
+                                    <textarea v-model="questionData.table.three"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                </td>
+                                <td style="width: 40%;">
+                                    <textarea v-model="questionData.table.four"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.six"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.seven"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.enight"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.two"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.three"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.four"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.six"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.seven"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.enight"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                        </table>
+                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-wordbank.jpg" /></p>
+                        <div class="bk-wh">
+                            <p>blood donation銆�volunteer teacher銆�community service銆�nursing
+                                home銆�rewarding銆�challenging銆�demanding銆�interesting銆�overwhelming銆�moving銆�merciful銆�kind-hearted銆�appreciate銆�cherish銆�respect
+                            </p>
+                        </div>
+                        <h2 id="b010"><img class="img-0" alt="" src="../../assets/images/dy3-le2.jpg" /></h2>
+                        <h3 id="c023"><span class="bjh3">Warm-up</span></h3>
+                        <p><b>There are some organizations committed to making the world a better place and making a
+                                difference in people's lives.Work with your partner to do research online and match the
+                                following organizations with their missions.</b></p>
+                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0056-1.jpg" /></p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">46</span>
+                </div>
+            </div>
+        </div>
+        <!-- 47 -->
+        <div class="page-box" page="53">
+            <div v-if="showPageList.indexOf(53) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0056-1.jpg" /></p>
+                        <h3 id="c024"><span class="bjh3">Reading</span></h3>
+                        <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+                        <p>1.More and more organizations and individuals in China are working in public service.Can you
+                            name a few?</p>
+                        <p>2.What changes do they bring to China?</p>
+                        <p class="center"><b>How to Light Up the World</b></p>
+                        <p>锛圗xcerpted from the speech 鈥淟earning from a Barefoot Movement鈥濓級</p>
+                        <p>If you go all over the world to very remote villages,you will often find only very old people
+                            and very young people.The men have already left.So,we came up with the simple solution of
+                            training grandmothers.Grandmothers are compassionate,tolerant,willing to learn,and
+                            patient.All the qualities that you need are there.</p>
+                        <p>Barefoot College follows the lifestyle of Gandhi:Students eat,sleep,and work on the
+                            floor.They can stay for 20 years,or they can go home tomorrow.As of today,we鈥檝e trained 604
+                            women solar engineers from 1,083 villages in 63 countries.</p>
+                        <p>The engineers have solar-electrified 45,000 houses.Please remember that our students are
+                            primarily women who have never left their villages before.They hate the idea of leaving
+                            their families and getting on a plane.When they reach India,sometimes after 19 hours of
+                            travel,they </p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">47</span>
+                </div>
+            </div>
+        </div>
+        <!-- 48 -->
+        <div class="page-box" page="54">
+            <div v-if="showPageList.indexOf(54) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>are faced with strange food,strange people,and strange language.We do all the training in
+                            sign
+                            language.Yet in six months,they will know more about solar engineering than most university
+                            graduates.Some women face problems at home for attending Barefoot College.In most of these
+                            traditional societies,the husband says,鈥淚f you go for training,don鈥檛 come back to me.I will
+                            take
+                            another wife.鈥� Then the wife goes,and when she returns,she helps provide her village with
+                            solar
+                            electricity.And her husband says,鈥淧lease come back to me.鈥� But she says,鈥淣o,I鈥檓 fine.鈥�
+                            Because
+                            the respect she now has is enormous.</p>
+                        <p>We taught a woman from Afghanistan.It was the first time a grandmother had left her
+                            village.Afterwards,at a community gathering,she went to sit with the men,who said,鈥淲hat do
+                            you think you鈥檙e doing? You should be sitting with the women.鈥� And she said quietly,鈥淭oday I
+                            am not a woman; I am an engineer.I have every right to sit with you.鈥�</p>
+                        <p>I have a dream.I would like to provide the world鈥檚 47 least developed countries with Barefoot
+                            College鈥搕rained grandmothers,and together they could solar-electrify more than 100,000
+                            homes.I would like to reach a million people,and I hope you will be a part of this dream.
+                        </p>
+                        <p>I鈥檒l end the passage with a quotation from Gandhi:鈥淔irst they ignore you,then they laugh at
+                            you,then they fight you,and then you win.鈥�</p>
+                        <p class="fl al-cn mt-40">
+                            <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
+                            <span class="line-border-box"></span>
+                        </p>
+                        <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+                        <p>remote /r瑟藞m蓹蕣t/ <i>adj.</i> 鍋忚繙鐨�</p>
+                        <div class="bkbj">
+                            <p><i>far away from places where other people live</i></p>
+                        </div>
+                        <p>solution /s蓹藞lu藧蕛n/ <i>n.</i> 瑙e喅鍔炴硶</p>
+                        <div class="bkbj">
+                            <p><i>a way of solving a problem or dealing with a difficult situation</i></p>
+                        </div>
+                        <p>compassionate /k蓹m藞p忙蕛蓹n蓹t/ <i>adj.</i> 鏈夊悓鎯呭績鐨勶紱鎬滄偗鐨�</p>
+                        <div class="bkbj">
+                            <p><i>feeling or showing sympathy for people or animals who are suffering</i></p>
+                        </div>
+                        <p>tolerant /藞t蓲l蓹r蓹nt/ <i>adj.</i> 瀹藉鐨勶紱瀹瑰繊鐨�</p>
+                        <div class="bkbj">
+                            <p><i>able to accept what other people say or do even if you do not agree with it</i></p>
+                        </div>
+                        <p>solar /藞s蓹蕣l蓹(r)/ <i>adj.</i> 澶槼鑳界殑</p>
+                        <div class="bkbj">
+                            <p><i>using the sun鈥檚 energy</i></p>
+                        </div>
+                        <p>electrify /瑟藞lektr瑟fa瑟/ <i>v.</i> 浣跨數姘斿寲锛涚粰锛堟煇鐗╋級鍏呯數</p>
+                        <div class="bkbj">
+                            <p><i>to convert to the use of electric power; to charge (sth.) with electricity</i></p>
+                        </div>
+                        <p>primarily /pra瑟藞mer蓹li/ <i>adv.</i> 涓昏鍦�</p>
+                        <div class="bkbj">
+                            <p><i>mainly</i></p>
+                        </div>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">48</span>
+                </div>
+            </div>
+        </div>
+        <!-- 49 -->
+        <div class="page-box" page="55">
+            <div v-if="showPageList.indexOf(55) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>attend /蓹藞tend/ <i>v.</i> 鍙傚姞</p>
+                        <div class="bkbj">
+                            <p><i>to be present at an event</i></p>
+                        </div>
+                        <p>traditional /tr蓹藞d瑟蕛蓹nl/ <i>adj.</i> 浼犵粺鐨�</p>
+                        <div class="bkbj">
+                            <p><i>being part of the beliefs,customs or way of life of a particular group of people,which
+                                    have not changed for a long time</i></p>
+                        </div>
+                        <p>afterwards /藞蓱藧ft蓹w蓹dz/ <i>adv.</i> 鍚庢潵锛涗互鍚�</p>
+                        <div class="bkbj">
+                            <p><i>at a later time; after an event that has already been mentioned</i></p>
+                        </div>
+                        <p>quotation /kw蓹蕣藞te瑟蕛n/ <i>n.</i> 寮曡锛涘紩鏂囷紱璇綍</p>
+                        <div class="bkbj">
+                            <p><i>a group of words or a short piece of writing taken from a book,play,speech,etc.and
+                                    repeated because it is interesting or useful</i></p>
+                        </div>
+                        <p>ignore /瑟伞藞n蓴藧(r)/ <i>v</i>.浣鏈锛涗笉浜堢悊鐫�</p>
+                        <div class="bkbj">
+                            <p><i>to pretend that you have not seen sb.or that sb.is not there</i></p>
+                        </div>
+                        <div style="display: flex;">
+                            <div class="left" style="width:40%;">
+                                <p>light up 鐐逛寒</p>
+                                <p>come up with 鎻愬嚭锛涙兂鍑�</p>
+                                <p>end ...with ...浠モ�︹�︾粨鏉熲�︹��</p>
+                            </div>
+                            <div class="right" style="width:60%;">
+                                <p>go over (to ...) 浠庝竴澶勫埌锛堝彟涓�澶勶級</p>
+                                <p>be faced with sth.闈复锛屽繀椤诲浠橈紙鏌愭儏鍐碉級</p>
+                            </div>
+                        </div>
+                        <div class="bj-note">
+                            <p><b>Notes:</b></p>
+                            <p>Barefoot
+                                College锛氳丹鑴氬ぇ瀛︺�傝繖涓叕鐩婇」鐩富瑕侀拡瀵规潵鑷笘鐣屽悇鍦板啘鏉戠殑鏂囩洸鎴栧崐鏂囩洸锛屽ぇ閮ㄥ垎閮芥槸涓勾姣嶄翰鎴栫姣嶏紝涓哄ス浠彁渚涘厤璐圭殑鏁欒偛锛岃濂逛滑鎴愪负姘村姟宸ョ▼甯堛�佸お闃宠兘宸ョ▼甯堛�佽璁″笀銆佸姪浜у+銆佸缓绛戝笀鎴栧啘鏉戠ぞ浼氫紒涓氬銆�
+                            </p>
+                        </div>
+                        <p><b>鈪�.Reading comprehension.</b></p>
+                        <p>A.Fill in the blanks with the numbers in the passage.</p>
+                        <p class="center"><img class="img-a" alt="" src="../../assets/images/0059-1.jpg" /></p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">49</span>
+                </div>
+            </div>
+        </div>
+        <!-- 50 -->
+        <div class="page-box" page="56">
+            <div v-if="showPageList.indexOf(56) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <p>B.Decide whether the following statements are true (T) or false (F).</p>
+                        <p>(銆�) 1.Showing compassion and being patient are qualities needed for training.</p>
+                        <p>(銆�) 2.Women have to overcome a lot of difficulties to attend Barefoot College.</p>
+                        <p>(銆�) 3.Half of the courses in the training are done in sign language.</p>
+                        <p>(銆�) 4.Husbands are always supportive for wives to go for training.</p>
+                        <p>(銆�) 5.The training helps women gain respect for the changes they brought in.</p>
+                        <p><b>鈪�.Language focus.</b></p>
+                        <p>A.Replace the words in italics with the exact words in the passage and change the form if
+                            necessary.</p>
+                        <p>1.In <i>far-away </i>areas,only the old and the kids are left._____</p>
+                        <p>2.The government works on <i>ways</i> to fight against poverty._____</p>
+                        <p>3.People having no access to electricity <i>mainly</i> live in Africa._____</p>
+                        <p>4.Some college students choose to <i>join</i> volunteering programs after graduation._____
+                        </p>
+                        <p>5.Family reunion is a <i>usual </i>way to celebrate the Spring Festival._____</p>
+                        <p>B.Fill in the blanks with the proper form of the expressions given below._____</p>
+                        <div class="fieldset">
+                            <p>end ...with ...銆�come up with銆�light up銆�be faced with銆�go over to</p>
+                        </div>
+                        <p>1.After watching the news,he ________ the idea to support the little girl鈥檚 education.</p>
+                        <p>2.Many Irish people ________ America during the famine 锛堥ゥ鑽掓椂鏈燂級.</p>
+                        <p>3.They ________ the play ________ a song.</p>
+                        <p>4.The teacher鈥檚 smiles ________ the boy鈥檚 life.</p>
+                        <p>5.Girls in some parts of the world ________ gender discrimination.</p>
+                        <p><b>鈪�.Grammar focus:The simple future tense.</b></p>
+                        <p>Underline the parts indicating the future tense.</p>
+                        <p>1.I am about to send you an email with all of our prices.</p>
+                        <p>2.She is to marry John next month.</p>
+                        <p>3.I will call you as soon as I arrive there.</p>
+                        <p>4.We are going to volunteer in the nursing home this weekend.</p>
+                        <p>5.My plane is taking off at 8:20,so I must be at the airport by 7:20.</p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">50</span>
+                </div>
+            </div>
+        </div>
+        <!-- 51 -->
+        <div class="page-box" page="57">
+            <div v-if="showPageList.indexOf(57) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <h3 id="c025"><span class="bjh3">Mini-project</span></h3>
+                        <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+                        <p>Watch the video and mark what the man has done.Then discuss with your partner about what we
+                            can do in reality to make a change in people鈥檚 lives.</p>
+                        <p>Things the man has done:</p>
+                        <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> Hold
+                            the elevator for the lady</p>
+                        <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> Catch
+                            the balloon for the kid</p>
+                        <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> Stop
+                            the shopping cart</p>
+                        <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> Teach
+                            kids to swim</p>
+                        <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> Help
+                            the old cross the street</p>
+                        <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> Plant
+                            trees in the park</p>
+                        <p class="left"><img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" /></p>
+                        <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
+                            <tr class="table-th-bc">
+                                <td class="tl-cn">Things We Can Do</td>
+                                <td class="tl-cn">Changes We Can Make</td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td style="word-break: break-all;">Hold the door for the personbehind me.</td>
+                                <td style="word-break: break-all;">It can be very embarrassing if one gets bumped by a
+                                    door, Holding the door for the person behind me shows that I care for other people.
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.two"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.three"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.two"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.three"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.two"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.three"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                            <tr class="table-tr-bc">
+                                <td>
+                                    <textarea v-model="questionData.table.two"
+                                        class="w100 table-tr-bc b0 table-textarea textarea-box"
+                                        @change="setBookQuestion"></textarea>
+                                </td>
+                                <td>
+                                    <textarea v-model="questionData.table.three"
+                                        class="w100 table-tr-bc b0 table-textarea" @change="setBookQuestion"></textarea>
+                                </td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">51</span>
+                </div>
+            </div>
+        </div>
+        <!-- 52 -->
+        <div class="page-box" page="58">
+            <div v-if="showPageList.indexOf(58) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        <h2 id="b011"><img class="img-0" alt="" src="../../assets/images/dy3-le3.jpg" /></h2>
+                        <h3 id="c026"><span class="bjh3">Listening</span></h3>
+                        <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
+                        <p><b>鈪�.Listen to the recording and fill in the blanks with what you hear.</b></p>
+                        <p>Just now,I was giving people_________in Chinese.I am a_________here in Lotus Lane in
+                            Houhai.I鈥檝e lived in Beijing for 24 years and I鈥檓_________from the United States.My name is
+                            Terry.I鈥檓 64 years old and I鈥檓_________.And I_________some of my time
+                            volunteering,helping_________find their way around this beautiful area of Xicheng District
+                            in Beijing.I love volunteering because I love doing things for people.I like to make people
+                            happy.I think by making people happy they make other people happy.It鈥檚 like_________a stone
+                            into the river.It makes little waves and your_________can be given to other people.</p>
+                        <p><b>鈪�.Listen to the interview and answer the following questions.</b></p>
+                        <p>1.When did Mr.Crossman start volunteering?</p>
+                        <p>_________________________________________________________</p>
+                        <p>2.Why was volunteering not easy in the beginning?</p>
+                        <p>_________________________________________________________</p>
+                        <p>3.What makes him popular?</p>
+                        <p>_________________________________________________________</p>
+                        <p>4.What鈥檚 his understanding of the volunteering spirit?</p>
+                        <p>_________________________________________________________</p>
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">52</span>
+                </div>
+            </div>
+        </div>
+        <!-- 53 -->
+        <div class="page-box" page="59">
+            <div v-if="showPageList.indexOf(59) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle">
+                        
+                    </div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">53</span>
+                </div>
+            </div>
+        </div>
+        <!-- 54 -->
+        <div class="page-box" page="60">
+            <div v-if="showPageList.indexOf(60) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle"></div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">12</span>
+                </div>
+            </div>
+        </div>
+        <!-- 55 -->
+        <div class="page-box" page="61">
+            <div v-if="showPageList.indexOf(61) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle"></div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">39</span>
+                </div>
+            </div>
+        </div>
+        <!-- 56 -->
+        <div class="page-box" page="62">
+            <div v-if="showPageList.indexOf(62) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle"></div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">12</span>
+                </div>
+            </div>
+        </div>
+        <!-- 57 -->
+        <div class="page-box" page="63">
+            <div v-if="showPageList.indexOf(63) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle"></div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">39</span>
+                </div>
+            </div>
+        </div>
+        <!-- 58 -->
+        <div class="page-box" page="64">
+            <div v-if="showPageList.indexOf(64) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle"></div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">12</span>
+                </div>
+            </div>
+        </div>
+        <!-- 绗洓鍗曞厓 -->
+        <!-- 59 -->
+        <div class="page-box" page="65">
+            <div v-if="showPageList.indexOf(65) > -1">
+                <!-- 澶撮儴 -->
+                <ul class="preface-odd-header w100 fl ju-bt">
+                    <li class=""></li>
+                    <li class="fz-18">
+                        <span class="chapter-left-bc-unit3">MODULE 3</span>
+                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
+                            VOLUNTEERS</span>
+                    </li>
+                </ul>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle"></div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">39</span>
+                </div>
+            </div>
+        </div>
+        <!-- 60 -->
+        <div class="page-box" page="66">
+            <div v-if="showPageList.indexOf(66) > -1">
+                <!-- 澶撮儴 -->
+                <div class="w100 mb-20" style="padding-right: 20px">
+                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
+                        <div class="preface-header-box event-header-text-bc-unit3">
+                            <span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
+                            <span class="g-text event-text-color-unit3">鍩虹妯″潡涓�</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 鍐呭 -->
+                <div class="padding-93">
+                    <div class="bodystyle"></div>
+                </div>
+                <div class="preface-bottom">
+                    <span class="contet-num-box">12</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import matching from "@/components/matching/matching.vue";
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+    name: "chapter-three",
+    components: { matching },
+    props: {
+        showPageList: {
+            type: Array,
+        },
+    },
+    data() {
+        return {
+            imgThirteen: require("../../assets/images/grammar.jpg"),
+            showAnswerOne: false,
+            showAnswerTwo: false,
+            showAnswerThree: false,
+            showAnswerFour: false,
+            showAnswerFive: false,
+            showImg: false,
+            showQuestionAnswer: false,
+            rawData: {
+                left: [
+                    {
+                        oldId: "FB34",
+                        txt: "Martin銆�銆�銆�銆�Silk",
+                    },
+                    {
+                        oldId: "64D6",
+                        txt: "Jessica銆�銆�The Great Wall",
+                    },
+                    {
+                        oldId: "2ED4",
+                        txt: "Soren銆�銆�Chinese Food",
+                    },
+                    {
+                        oldId: "44DE",
+                        txt: "Chinese銆�銆�銆�銆�Tea",
+                    },
+                ],
+                right: [
+                    {
+                        oldId: "64D6",
+                        txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
+                    },
+                    {
+                        oldId: "FB34",
+                        txt: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
+                    },
+                    {
+                        oldId: "2ED4",
+                        txt: "The clothing material is quite popular among Roman women inancient times.",
+                    },
+                    {
+                        oldId: "44DE",
+                        txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+                    },
+                ],
+            },
+            value: [],
+            question: {
+                KnowledgePoint: "123",
+                analysis: "123",
+                answer: [
+                    {
+                        id: "FB34",
+                        linkValue:
+                            "The clothing material is quite popular among Roman women inancient times.",
+                        value: "Silk",
+                    },
+                    {
+                        id: "64D6",
+                        linkValue:
+                            "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
+                        value: "The Great Wall",
+                    },
+                    {
+                        id: "2ED4",
+                        linkValue:
+                            "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+                        value: "Chinese Food",
+                    },
+                    {
+                        id: "44DE",
+                        linkValue:
+                            "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
+                        value: "Chinese Tea",
+                    },
+                ],
+                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: [],
+                answerImg: require("../../assets/images/matching-one.png"),
+            },
+            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",
+                    },
+                    seven: "",
+                },
+                reading: {
+                    one: "",
+                    two: "",
+                },
+                table: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                    six: "",
+                    seven: "",
+                    enight: "",
+                    nine: "",
+                },
+            },
+            testData: {
+                check: [],
+                tx: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+                in: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+                line: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+                ts: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                },
+                gr: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+                cm: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+            },
+            resource: {
+                listenOne: "",
+                readingOne: "",
+                readingTwo: "",
+            },
+            dropDownList: [
+                "animal rescue and care",
+                "blood donation",
+                "community clean-ups",
+                "language service",
+            ],
+            dropdownData: {
+                one: {
+                    value: "",
+                    isRight: null,
+                    answer: "blood donation",
+                },
+                two: {
+                    value: "",
+                    isRight: null,
+                    answer: "language service",
+                },
+                three: {
+                    value: "",
+                    isRight: null,
+                    answer: "community clean-ups",
+                },
+                four: {
+                    value: "",
+                    isRight: null,
+                    answer: "animal rescue and care",
+                },
+            },
+        };
+    },
+    mounted() {
+        const testData = localStorage.getItem("english-testOne");
+        if (testData) {
+            this.testData = JSON.parse(testData);
+        }
+        const bookQuestion = localStorage.getItem("english-book-question-one");
+        if (bookQuestion) {
+            this.questionData = JSON.parse(bookQuestion);
+        }
+        const dropdownData = localStorage.getItem("english-dropdown-one");
+        if (dropdownData) {
+            this.dropdownData = JSON.parse(dropdownData);
+        }
+        this.getPath();
+    },
+    methods: {
+        saveWord(event, word) {
+            this.$emit("saveCharacters", event, word);
+        },
+        setTestData() {
+            localStorage.setItem("english-testOne", JSON.stringify(this.testData));
+        },
+        changeTestData() {
+            localStorage.removeItem("english-testOne");
+            this.testData = {
+                check: [],
+                tx: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+                in: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+                line: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+                ts: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                },
+                gr: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+                cm: {
+                    one: "",
+                    two: "",
+                    three: "",
+                    four: "",
+                    five: "",
+                },
+            };
+        },
+        setBookQuestion() {
+            console.log("淇濆瓨");
+            localStorage.setItem(
+                "english-book-question-one",
+                JSON.stringify(this.questionData)
+            );
+        },
+        async getPath() {
+            this.resource.listenOne = await getResourcePath(
+                "422139A2EF66EA888C5ED1D550AE23E0"
+            );
+            this.resource.readingOne = await getResourcePath(
+                "3F442B682D84C8AB06C800B29D734920"
+            );
+            this.resource.readingTwo = await getResourcePath(
+                "E8719EC88026BCFB11D292AA999F6D3D"
+            );
+        },
+        showAnswer(type) {
+            if (type == "showImg") {
+                this.showImg = !this.showImg;
+            }
+        },
+        handleQuestion(type) {
+            if (type == "one") {
+                this.questionData.warnUp.one.value
+                    ? (this.questionData.warnUp.one.isRight =
+                        this.questionData.warnUp.one.value == "Chinese knot")
+                    : (this.questionData.warnUp.one.isRight = null);
+            } else if (type == "two") {
+                this.questionData.warnUp.two.value
+                    ? (this.questionData.warnUp.two.isRight =
+                        this.questionData.warnUp.two.value == "Chinese medicine")
+                    : (this.questionData.warnUp.two.isRight = null);
+            } else if (type == "three") {
+                this.questionData.warnUp.three.value
+                    ? (this.questionData.warnUp.three.isRight =
+                        this.questionData.warnUp.three.value == "Chinese calligraphy")
+                    : (this.questionData.warnUp.three.isRight = null);
+            } else if (type == "four") {
+                this.questionData.warnUp.four.value
+                    ? (this.questionData.warnUp.four.isRight =
+                        this.questionData.warnUp.four.value == "Taichi")
+                    : (this.questionData.warnUp.four.isRight = null);
+            } else if (type == "five") {
+                this.questionData.warnUp.five.value
+                    ? (this.questionData.warnUp.five.isRight =
+                        this.questionData.warnUp.five.value == "sweet dumpling")
+                    : (this.questionData.warnUp.five.isRight = null);
+            } else if (type == "six") {
+                this.questionData.warnUp.six.value
+                    ? (this.questionData.warnUp.six.isRight =
+                        this.questionData.warnUp.six.value == "Chinese chess")
+                    : (this.questionData.warnUp.six.isRight = null);
+            }
+        },
+        handleDropdown(type) {
+            const dropdownDatas = this.dropdownData;
+            for (let key in dropdownDatas) {
+                const item = dropdownDatas[key];
+                if (type == "judge") {
+                    item.value == item.answer
+                        ? (item.isRight = true)
+                        : (item.isRight = false);
+                    console.log(item.value, item.answer);
+                }
+            }
+            this.dropdownData = dropdownDatas;
+        },
+        changeDropdown() {
+            localStorage.removeItem("english-dropdown-one");
+            for (let key in this.dropdownData) {
+                const item = this.dropdownData[key];
+                item.value = "";
+                item.isRight = null;
+            }
+        },
+        setDropdownData() {
+            localStorage.setItem(
+                "english-dropdown-one",
+                JSON.stringify(this.dropdownData)
+            );
+        },
+        saveData() {
+            console.log(this.testData);
+        },
+        audioPlay() {
+            this.$emit("closeMiniAudio");
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+    font-size: 16px !important;
+}
+
+.bodystyle {
+    margin: 0 !important;
+}
+
+.line-border-box {
+    margin-left: 10px;
+    display: inline-block;
+    width: 50%;
+    height: 3px;
+    background-color: #f9a71b;
+}
+
+.mr-20 {
+    margin-right: 20px;
+}
+
+.dl-box {
+    display: flex;
+    flex-wrap: wrap;
+
+    .dl-span {
+        display: inline-block;
+        text-indent: 0;
+        margin-bottom: 15px;
+        height: 20px;
+        line-height: 20px;
+    }
+}
+
+.btn-w {
+    font-size: 14px;
+    border-width: 1px;
+    min-width: 80px;
+    height: 30px;
+    background-color: #fff;
+
+    &:hover {
+        background-color: #0bab87;
+        color: #fff;
+    }
+}
+
+.banshi {
+    position: relative;
+    margin-top: 40px;
+    width: 100%;
+    height: 350px;
+    margin: 0 auto;
+}
+
+.pageBox {
+    z-index: 9999999999;
+    color: #999;
+    position: absolute;
+    left: 48%;
+    bottom: 0px;
+}
+
+select {
+    height: 24px;
+}
+
+.mini-audio {
+    width: 200px;
+    height: 200px;
+    position: fixed;
+    right: 0;
+    background-color: red;
+}
+</style>
\ No newline at end of file
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index d0b26c3..601a887 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -1,36 +1,28 @@
 <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"
-        @closeMiniAudio="closeMiniAudio"
-        v-if="showCatalogList.indexOf(2) > -1"
-        :showPageList="loadPageList"
-      ></chapterOne>
+    <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" @closeMiniAudio="closeMiniAudio"
+        v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne>
+      <chapterTwo @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
+        v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
+        <chapterThree @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
+        v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
     </div>
-    <miniAudio
-      :path="audioPath"
-      :currentTime="currentTime"
-      @closeMiniAudio="closeMiniAudio"
-      ref="audioPlayer"
-    ></miniAudio>
+    <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 miniAudio from "@/components/miniAudio/index.vue";
 import NoteIcon from "@/assets/images/biji.png";
 import _ from "lodash";
@@ -41,7 +33,7 @@
 export default {
   data() {
     return {
-      catalogLength: 2, // 鎬荤珷鑺傛暟
+      catalogLength: 4, // 鎬荤珷鑺傛暟
       showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
       loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
       throttleThreshold: 100, // 鑺傛祦闃堝��
@@ -160,36 +152,36 @@
     }, 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);
+    setTimeout(() => {
+      this.gotoPage(4,56);
+      //   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);
+      // 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
+      // });
+    }, 50);
   },
   methods: {
     // setZoom1() {
@@ -448,8 +440,8 @@
           page && pageThemeColor && pageThemeColor[page]
             ? pageThemeColor[page]
             : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
-            ? chapterThemeColor[chapterNum]
-            : bookThemeColor;
+              ? chapterThemeColor[chapterNum]
+              : bookThemeColor;
         if (themeColor) {
           domItem.style.color = themeColor;
         }
@@ -466,8 +458,8 @@
           page && pageThemeColor && pageThemeColor[page]
             ? pageThemeColor[page]
             : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
-            ? chapterThemeColor[chapterNum]
-            : bookThemeColor;
+              ? chapterThemeColor[chapterNum]
+              : bookThemeColor;
         if (themeColor) {
           domItem.style.backgroundColor = themeColor;
         }
@@ -484,8 +476,8 @@
           page && pageThemeColor && pageThemeColor[page]
             ? pageThemeColor[page]
             : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
-            ? chapterThemeColor[chapterNum]
-            : bookThemeColor;
+              ? chapterThemeColor[chapterNum]
+              : bookThemeColor;
         if (themeColor) {
           domItem.style.borderColor = themeColor;
         }
@@ -720,6 +712,8 @@
       const pageData = {
         pageHeader,
         chapterOne,
+        chapterTwo,
+        chapterThree,
       };
       // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
       for (const key in pageData) {
@@ -819,7 +813,7 @@
       // 璁板綍楂樹寒淇℃伅
       this.highlightData = data;
       // 璺宠浆
-      this.gotoPage(data.catalog, data.page, () => {});
+      this.gotoPage(data.catalog, data.page, () => { });
     },
     // 鐐瑰嚮浜嬩欢锛氬皢鐢熷兓鍗曡瘝浼犵粰 涓诲簲鐢� 浠庤�岃皟鐢ㄨ瘝鍏稿姛鑳�
     saveCharacters(event, word) {
@@ -834,7 +828,7 @@
       }
       // chooseWords
     },
-    
+
     // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
     getAduio() {
       let allVideo = (
@@ -888,6 +882,8 @@
   components: {
     pageHeader,
     chapterOne,
+    chapterTwo,
+    chapterThree,
     miniAudio,
   },
 };
@@ -898,6 +894,7 @@
   width: 100%;
   height: 100%;
   overflow: auto;
+
   .page-content {
     max-width: 816px;
     min-width: 375px;

--
Gitblit v1.9.1