From abc4b29e99f9c6cb74767dd6e3d5184834545459 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 16 五月 2025 14:34:51 +0800
Subject: [PATCH] 酒店英语实训活页教程(第2版)(旅游社)

---
 src/assets/js/config.js                                                             |   29 
 src/books/aviationPassengerTransport6th/assets/images/第9页-13.png                    |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/feiye.jpg                   |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/right-page.png              |    0 
 src/books/cognitiveLanDevEduAges0to3/assets/main.less                               |    2 
 src/books/aviationPassengerTransport6th/assets/main.less                            | 1980 +++++++++++
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0025-03.jpg                 |    0 
 src/books/aviationPassengerTransport6th/assets/images/第5页-9.png                     |    0 
 src/books/aviationPassengerTransport6th/view/components/header.vue                  |   27 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0008-01.jpg                 |    0 
 src/books/aviationPassengerTransport6th/assets/images/第9页-12.png                    |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0007-01.jpg                 |    0 
 src/books/aviationPassengerTransport6th/assets/images/第6页-10.png                    |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/a2.jpg                      |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/main.less                          | 2322 +++++++++++++
 src/books/hotelEnglishTrainingBrochure2nd/view/index.vue                            |   80 
 src/books/aviationPassengerTransport6th/assets/images/icon/heart-check.png          |    0 
 src/books/aviationPassengerTransport6th/assets/images/第7页-11.png                    |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/device_phone_frontcover.jpg |    0 
 src/books/childcareInstitutionsManagement/view/components/chapter001.vue            |    4 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0003-01.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-01.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/a3.jpg                      |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0012-01.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0016-01.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/view/components/header.vue                |  117 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-01.jpg                 |    0 
 src/books/aviationPassengerTransport6th/view/components/index.vue                   |  980 +++++
 src/books/preschoolEvaluation/assets/main.less                                      |    7 
 src/books/aviationPassengerTransport6th/assets/images/icon/heart.png                |    0 
 src/books/aviationPassengerTransport6th/view/index.vue                              |   80 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-02.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart-check.png        |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/left-page.png               |    0 
 src/books/aviationPassengerTransport6th/assets/images/pdfLogo.svg                   |    1 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-02.jpg                 |    0 
 src/books/aviationPassengerTransport6th/assets/images/header-left.png               |    0 
 src/books/aviationPassengerTransport6th/assets/Fonts/FZFSK.TTF                      |    0 
 .env.product                                                                        |    9 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/Cover.jpg                   |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0018-01.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0017-01.jpg                 |    0 
 src/books/aviationPassengerTransport6th/assets/images/Cover.jpg                     |    0 
 src/books/aviationPassengerTransport6th/assets/examinationList.js                   |    9 
 src/books/aviationPassengerTransport6th/assets/images/0002-01.jpg                   |    0 
 src/books/aviationPassengerTransport6th/assets/images/delectFile.svg                |    1 
 src/books/aviationPassengerTransport6th/assets/Fonts/FZSSK.TTF                      |    0 
 src/books/aviationPassengerTransport6th/assets/images/uploadFiles.svg               |    1 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0002-01.jpg                 |    0 
 src/books/aviationPassengerTransport6th/view/components/chapter001.vue              | 1130 ++++++
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart.png              |    0 
 src/components/pdfview/index.vue                                                    |  198 
 .env                                                                                |    8 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0020-01.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0022-01.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0013-01.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/a1.jpg                      |    0 
 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0026-01.jpg                 |    0 
 src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue            | 2319 +++++++++++++
 src/App.vue                                                                         |   28 
 src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue                 |  978 +++++
 61 files changed, 10,189 insertions(+), 121 deletions(-)

diff --git a/.env b/.env
index de1e4ef..7351fce 100644
--- a/.env
+++ b/.env
@@ -1,7 +1,7 @@
 VUE_APP_ENV = 'dev'
-VUE_APP_API_URL = "https://jsek.bnuic.com"
-# VUE_APP_API_URL = "https://www.tepcb.com"
-VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
-# VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/'
+# VUE_APP_API_URL = "https://jsek.bnuic.com"
+VUE_APP_API_URL = "https://www.tepcb.com"
+# VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
+VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/'
 # VUE_APP_RESOURCE_CTX = 'https://www.tepcb.com/books/resource/'
 VUE_APP_PUBLIC_PATH = '/books/book'
\ No newline at end of file
diff --git a/.env.product b/.env.product
index 09a15be..b2adbd7 100644
--- a/.env.product
+++ b/.env.product
@@ -1,8 +1,9 @@
 VUE_APP_ENV = 'product'
-VUE_APP_API_URL = "https://jsek.bnuic.com"
+# VUE_APP_API_URL = "https://jsek.bnuic.com"
+VUE_APP_API_URL = "https://www.tepcb.com"
 # VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
 # VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/meetingPlanners'
 VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/'
-VUE_APP_PUBLIC_PATH = 'http://182.92.203.7:3007/books/book/toddlerSportsSafetyProtection'
-VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/childcareInstitutionsManagement/preschoolGameGuidance/kindergartenLanguageActivity/preschoolEvaluation/preschoolBasicKnowledge/practicalCareChildrenManual/OralAndBroadcasting/aurturingAndEducationAged0to3/policiesAndRegulations/kindergartenActivitiesDesignGuidance/toddlerSportsSafetyProtection/artInitiationForAges0to3/childIllnessPreventionCare/behaviorObserveAndGuid/cognitiveLanDevEduAges0to3"
-VUE_APP_BOOK_ID = 'toddlerSportsSafetyProtection'
+VUE_APP_PUBLIC_PATH = 'http://182.92.203.7:3007/books/book/aviationPassengerTransport6th'
+VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/childcareInstitutionsManagement/preschoolGameGuidance/kindergartenLanguageActivity/preschoolEvaluation/preschoolBasicKnowledge/practicalCareChildrenManual/OralAndBroadcasting/aurturingAndEducationAged0to3/policiesAndRegulations/kindergartenActivitiesDesignGuidance/toddlerSportsSafetyProtection/artInitiationForAges0to3/childIllnessPreventionCare/behaviorObserveAndGuid/cognitiveLanDevEduAges0to3/aviationPassengerTransport6th"
+VUE_APP_BOOK_ID = 'aviationPassengerTransport6th'
diff --git a/src/App.vue b/src/App.vue
index 37de466..475884b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -72,6 +72,12 @@
     <cognitiveLanDevEduAges0to3
       v-if="activeBook.name == 'cognitiveLanDevEduAges0to3'"
     ></cognitiveLanDevEduAges0to3>
+    <aviationPassengerTransport6th
+      v-if="activeBook.name == 'aviationPassengerTransport6th'"
+    ></aviationPassengerTransport6th>
+    <hotelEnglishTrainingBrochure2nd
+      v-if="activeBook.name == 'hotelEnglishTrainingBrochure2nd'"
+    ></hotelEnglishTrainingBrochure2nd>
   </div>
 </template>
 <script>
@@ -146,6 +152,10 @@
       import("./books/behaviorObserveAndGuid/view/index.vue"),
     cognitiveLanDevEduAges0to3: () =>
       import("./books/cognitiveLanDevEduAges0to3/view/index.vue"),
+    aviationPassengerTransport6th: () =>
+      import("./books/aviationPassengerTransport6th/view/index.vue"),
+    hotelEnglishTrainingBrochure2nd: () =>
+      import("./books/hotelEnglishTrainingBrochure2nd/view/index.vue"),
   },
   data() {
     return {
@@ -199,26 +209,34 @@
       // policiesAndRegulations  //鏀跨瓥娉曞緥涓庢硶瑙剕鏃呮父绀�
       // practicalCareChildrenManual // 濠村辜鍎跨収鎶ゅ疄褰�
       // OralAndBroadcasting         // 鑸┖鏈嶅姟鍙h浜ら檯涓庢挱闊虫妧宸�
-      // childIllnessPreventionCare // 0~3宀佸┐骞煎効鐤剧梾棰勯槻
+      // childIllnessPreventionCare // 濠村辜鍎垮父瑙佺柧鐥呴闃蹭笌鎶ょ悊
       // artInitiationForAges0to3 // 0~3宀佸┐骞煎効鑹烘湳鍚挋
       // toddlerSportsSafetyProtection // 0~3宀佸┐骞煎効杩愬姩瀹夊叏涓庝繚鎶�
       // behaviorObserveAndGuid  // 濠村辜鍎胯涓鸿瀵熶笌鎸囧
       // cognitiveLanDevEduAges0to3  // 0锝�3宀佸┐骞煎効璁ょ煡涓庤瑷�鍙戝睍鍙婃暀鑲�
+      // aviationPassengerTransport6th  // 姘戣埅鏃呭杩愯緭绗�6鐗�(鏃呮父绀�)
+      // hotelEnglishTrainingBrochure2nd // 閰掑簵鑻辫瀹炶娲婚〉鏁欑▼锛堢2鐗堬級锛堟梾娓哥ぞ锛�
+      console.log("debugger", process.env);
       this.activeBook = await this.config.getBookConfig(
         process.env.VUE_APP_RESOURCE_CTX +
           (process.env.VUE_APP_ENV == "product"
             ? process.env.VUE_APP_BOOK_ID
-            : "mathBook")
+            : "hotelEnglishTrainingBrochure2nd")
       );
+
       // this.activeBook = await this.config.getBookConfig(
-      //   'http://182.92.203.7:3007/books/resource/'+
+      //   'https://jsek.bnuic.com/books/resource/'+
       //   (process.env.VUE_APP_ENV == "product"
       //     ? process.env.VUE_APP_BOOK_ID
-      //     : "botany")
+      //     : "aviationSafety")
       // );
+
       // 娴嬭瘯璇曡30椤�
       // this.activeBook.tryPageCount = 10;
-      this.config.activeBook = this.activeBook;
+      // this.config.activeBook = this.activeBook;
+
+      // 鏃呮父绀惧鐞嗚法鍩熼棶棰�
+      // this.activeBook = this.config.activeBook;
       this.config.goodsStore = this.activeBook.storeRefcode;
     }
   },
diff --git a/src/assets/js/config.js b/src/assets/js/config.js
index cbe0a9a..dd4c667 100644
--- a/src/assets/js/config.js
+++ b/src/assets/js/config.js
@@ -1,22 +1,29 @@
 import axios from "axios";
-// export const resourceCtx = "http://182.92.203.7:3007/books/resource/"; // 璧勬簮璇锋眰鍦板潃
+export const resourceCtx = "http://182.92.203.7:3007/books/resource/"; // 璧勬簮璇锋眰鍦板潃
 // export const resourceCtx = "https://www.tepcb.com/books/resource/"; // 璧勬簮璇锋眰鍦板潃
-export const resourceCtx = "https://jsek.bnuic.com/books/resource/"; // 璧勬簮璇锋眰鍦板潃
-export const tinymceBaseUrl = 'https://jsek.bnuic.com/home/'
-// export const tinymceBaseUrl = 'https://www.tepcb.com/home/'
+// export const resourceCtx = "https://jsek.bnuic.com/books/resource/"; // 璧勬簮璇锋眰鍦板潃
+// export const tinymceBaseUrl = "https://jsek.bnuic.com/home/";
+export const tinymceBaseUrl = "https://www.tepcb.com/home/";
 export let activeBook = {}; // 璧勬簮璇锋眰鍦板潃
+
+// export let activeBook = {
+//   name: "aviationPassengerTransport6th",
+//   rootCmsItemId: "86281",
+//   storeRefcode: "defaultGoodsStore1",
+//   bookId: "5033",
+//   bookName: "姘戣埅鏃呭杩愯緭锛堢6鐗堬級",
+// };
+
 export let goodsStore = "";
 // 璇锋眰鏁欐潗閰嶇疆淇℃伅
 const getBookConfig = async (ctx) => {
-  const response = await axios.get(
-    ctx + "/bookConfig.json"
-  );
+  const response = await axios.get(ctx + "/bookConfig.json");
   return response.data;
 };
-export const appId = 3;
+export const appId = 1;
 export const requestTimeOut = 300000; // 璇锋眰瓒呮椂鏃堕棿
-export const tokenKey = "jsek-token";
-// export const tokenKey = "website-front-token"
+//export const tokenKey = "jsek-token";
+export const tokenKey = "website-front-token";
 
 const config = {
   resourceCtx,
@@ -26,6 +33,6 @@
   tokenKey,
   goodsStore,
   appId,
-  getBookConfig
+  getBookConfig,
 };
 export default config;
diff --git a/src/books/aviationPassengerTransport6th/assets/Fonts/FZFSK.TTF b/src/books/aviationPassengerTransport6th/assets/Fonts/FZFSK.TTF
new file mode 100644
index 0000000..acc5291
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/Fonts/FZFSK.TTF
Binary files differ
diff --git a/src/books/aviationPassengerTransport6th/assets/Fonts/FZSSK.TTF b/src/books/aviationPassengerTransport6th/assets/Fonts/FZSSK.TTF
new file mode 100644
index 0000000..d4f6b93
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/Fonts/FZSSK.TTF
Binary files differ
diff --git a/src/books/aviationPassengerTransport6th/assets/examinationList.js b/src/books/aviationPassengerTransport6th/assets/examinationList.js
new file mode 100644
index 0000000..77f7ad9
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/examinationList.js
@@ -0,0 +1,9 @@
+const testData = {
+  2: {
+    16: [
+      144319, 144320, 144321, 144322, 144323, 144324, 144325, 144326, 144327, 144328
+    ],
+  },
+};
+
+export default testData;
diff --git a/src/books/aviationPassengerTransport6th/assets/images/0002-01.jpg b/src/books/aviationPassengerTransport6th/assets/images/0002-01.jpg
new file mode 100644
index 0000000..ad3a8a6
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/images/0002-01.jpg
Binary files differ
diff --git a/src/books/aviationPassengerTransport6th/assets/images/Cover.jpg b/src/books/aviationPassengerTransport6th/assets/images/Cover.jpg
new file mode 100644
index 0000000..95fa4e0
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/images/Cover.jpg
Binary files differ
diff --git a/src/books/aviationPassengerTransport6th/assets/images/delectFile.svg b/src/books/aviationPassengerTransport6th/assets/images/delectFile.svg
new file mode 100644
index 0000000..c7e64a7
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/images/delectFile.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746781749911" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3806" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M781.28 851.36a58.56 58.56 0 0 1-58.56 58.56H301.28a58.72 58.72 0 0 1-58.56-58.56V230.4h538.56z m-421.6-725.92a11.84 11.84 0 0 1 12-12h281.28a11.84 11.84 0 0 1 12 12V160H359.68zM956.8 160H734.72v-34.56a81.76 81.76 0 0 0-81.76-81.76H371.68a82.08 82.08 0 0 0-81.76 81.76V160H67.2a35.36 35.36 0 0 0 0 70.56h105.12v620.8a128.96 128.96 0 0 0 128.96 128.96h421.44a128.96 128.96 0 0 0 128.96-128.96V230.4H956.8a35.2 35.2 0 0 0 35.2-35.2 34.56 34.56 0 0 0-35.2-35.2zM512 804.16a35.2 35.2 0 0 0 35.2-35.36V393.92a35.2 35.2 0 1 0-70.4 0V768.8a35.2 35.2 0 0 0 35.2 35.36m-164.32 0a35.36 35.36 0 0 0 35.36-35.36V393.92a35.36 35.36 0 1 0-70.56 0V768.8a36.32 36.32 0 0 0 35.2 35.36m328.64 0a35.36 35.36 0 0 0 35.2-35.36V393.92a35.36 35.36 0 1 0-70.56 0V768.8a35.36 35.36 0 0 0 35.36 35.36" fill="#D81E06" p-id="3807"></path></svg>
\ No newline at end of file
diff --git a/src/books/aviationPassengerTransport6th/assets/images/header-left.png b/src/books/aviationPassengerTransport6th/assets/images/header-left.png
new file mode 100644
index 0000000..29d211f
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/images/header-left.png
Binary files differ
diff --git a/src/books/aviationPassengerTransport6th/assets/images/icon/heart-check.png b/src/books/aviationPassengerTransport6th/assets/images/icon/heart-check.png
new file mode 100644
index 0000000..74d469c
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/images/icon/heart-check.png
Binary files differ
diff --git a/src/books/aviationPassengerTransport6th/assets/images/icon/heart.png b/src/books/aviationPassengerTransport6th/assets/images/icon/heart.png
new file mode 100644
index 0000000..7817ec4
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/images/icon/heart.png
Binary files differ
diff --git a/src/books/aviationPassengerTransport6th/assets/images/pdfLogo.svg b/src/books/aviationPassengerTransport6th/assets/images/pdfLogo.svg
new file mode 100644
index 0000000..74ab0de
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/images/pdfLogo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746602907831" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18597" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M704 960h-298.666667c-12.8 0-21.333333-8.533333-21.333333-21.333333v-149.333334h-106.666667c-12.8 0-21.333333-8.533333-21.333333-21.333333v-151.466667l-85.333333-40.533333c-4.266667-2.133333-8.533333-6.4-10.666667-12.8-2.133333-4.266667-2.133333-10.666667 0-17.066667l53.333333-115.2v-6.4c0-200.533333 149.333333-362.666667 330.666667-362.666666s330.666667 162.133333 330.666667 362.666666c0 121.6-55.466667 236.8-149.333334 302.933334v209.066666c0 14.933333-8.533333 23.466667-21.333333 23.466667z m-277.333333-42.666667h256v-198.4c0-6.4 4.266667-12.8 8.533333-17.066666l8.533333-6.4c83.2-59.733333 132.266667-160 132.266667-268.8 0-177.066667-130.133333-320-288-320s-288 142.933333-288 320v10.666666c0 4.266667 0 6.4-2.133333 8.533334l-46.933334 100.266666 78.933334 36.266667c8.533333 4.266667 12.8 10.666667 12.8 19.2v142.933333h106.666666c12.8 0 21.333333 8.533333 21.333334 21.333334v151.466666z" fill="#1C9E3A" p-id="18598"></path><path d="M682.666667 341.333333h-106.666667v-149.333333h106.666667v149.333333z m-64-42.666666h21.333333v-64h-21.333333v64z" fill="#1C9E3A" p-id="18599"></path><path d="M618.666667 480v-32h-170.666667c-23.466667 0-42.666667 19.2-42.666667 42.666667 0 12.8 4.266667 23.466667 12.8 29.866666-8.533333-8.533333-12.8-19.2-12.8-29.866666v-234.666667c0-12.8 8.533333-21.333333 21.333334-21.333333h192v245.333333z m-149.333334-202.666667v85.333334h85.333334v-85.333334h-85.333334z" fill="#1C9E3A" p-id="18600"></path><path d="M554.666667 362.666667h-85.333334v-85.333334h85.333334v85.333334z m-64-21.333334h42.666666v-42.666666h-42.666666v42.666666z" fill="#1C9E3A" p-id="18601"></path><path d="M576 533.333333c0 23.466667 19.2 42.666667 42.666667 42.666667s42.666667-19.2 42.666666-42.666667-19.2-42.666667-42.666666-42.666666v42.666666h-42.666667z" fill="#1C9E3A" p-id="18602"></path><path d="M618.666667 533.333333h-170.666667c-23.466667 0-42.666667-19.2-42.666667-42.666666s19.2-42.666667 42.666667-42.666667h170.666667v85.333333z m-170.666667-64c-12.8 0-21.333333 8.533333-21.333333 21.333334s8.533333 21.333333 21.333333 21.333333h149.333333v-42.666667h-149.333333z" fill="#1C9E3A" p-id="18603"></path></svg>
\ No newline at end of file
diff --git a/src/books/aviationPassengerTransport6th/assets/images/uploadFiles.svg b/src/books/aviationPassengerTransport6th/assets/images/uploadFiles.svg
new file mode 100644
index 0000000..0a835b5
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/images/uploadFiles.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1746781684475" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2838" id="mx_n_1746781684475" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M884.2 909.6H126.8c-38.6 0-70-31.4-70-70V204.6c0-38.6 31.4-70 70-70h328.6c38.6 0 70 31.4 70 70 0 11-9 20-20 20s-20-9-20-20c0-16.6-13.4-30-30-30H126.8c-16.6 0-30 13.4-30 30v635c0 16.6 13.4 30 30 30h757.4c11 0 20 9 20 20s-8.8 20-20 20z" fill="#1c9e3a" p-id="2839"></path><path d="M884.2 909.6c-11 0-20-9-20-20s9-20 20-20c16.6 0 30-13.4 30-30V428.2c0-16.6-13.4-30-30-30H292.6c-16.6 0-30 13.4-30 30v268.6c0 11-9 20-20 20s-20-9-20-20V428.2c0-38.6 31.4-70 70-70h591.6c38.6 0 70 31.4 70 70v411.4c0 38.6-31.4 70-70 70zM734 295h-178.2c-38.6 0-70-31.4-70-70v-10.4c0-11 9-20 20-20s20 9 20 20v10.4c0 16.6 13.4 30 30 30H734c11 0 20 9 20 20s-9 20-20 20z" fill="#1c9e3a" p-id="2840"></path><path d="M192.8 909.6h-15.8c-11 0-20-9-20-20s9-20 20-20h15.8c16.6 0 30-13.4 30-30v-168.6c0-11 9-20 20-20s20 9 20 20v168.6c-0.2 38.6-31.4 70-70 70zM818 398.4c-11 0-20-9-20-20v-53.2c0-16.6-13.4-30-30-30h-90.4c-11 0-20-9-20-20s9-20 20-20H768c38.6 0 70 31.4 70 70v53.2c0 11-9 20-20 20z" fill="#1c9e3a" p-id="2841"></path><path d="M598.2 764.6c-11 0-20-9-20-20V532.4c0-11 9-20 20-20s20 9 20 20v212.2c0 11-9 20-20 20z" fill="#1c9e3a" p-id="2842"></path><path d="M683.8 638c-5.2 0-10.2-2-14.2-5.8L584 546.6c-7.8-7.8-7.8-20.4 0-28.2 7.8-7.8 20.4-7.8 28.2 0L698 604c7.8 7.8 7.8 20.4 0 28.2-4 4-9 5.8-14.2 5.8z" fill="#1c9e3a" p-id="2843"></path><path d="M512.4 638c-5.2 0-10.2-2-14.2-5.8-7.8-7.8-7.8-20.4 0-28.2l85.8-85.8c7.8-7.8 20.4-7.8 28.2 0 7.8 7.8 7.8 20.4 0 28.2l-85.8 85.8c-3.8 4-8.8 5.8-14 5.8z" fill="#1c9e3a" p-id="2844"></path></svg>
\ No newline at end of file
diff --git "a/src/books/aviationPassengerTransport6th/assets/images/\347\254\2545\351\241\265-9.png" "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2545\351\241\265-9.png"
new file mode 100644
index 0000000..824c2fe
--- /dev/null
+++ "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2545\351\241\265-9.png"
Binary files differ
diff --git "a/src/books/aviationPassengerTransport6th/assets/images/\347\254\2546\351\241\265-10.png" "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2546\351\241\265-10.png"
new file mode 100644
index 0000000..674376e
--- /dev/null
+++ "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2546\351\241\265-10.png"
Binary files differ
diff --git "a/src/books/aviationPassengerTransport6th/assets/images/\347\254\2547\351\241\265-11.png" "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2547\351\241\265-11.png"
new file mode 100644
index 0000000..cb824b9
--- /dev/null
+++ "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2547\351\241\265-11.png"
Binary files differ
diff --git "a/src/books/aviationPassengerTransport6th/assets/images/\347\254\2549\351\241\265-12.png" "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2549\351\241\265-12.png"
new file mode 100644
index 0000000..9caa3e4
--- /dev/null
+++ "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2549\351\241\265-12.png"
Binary files differ
diff --git "a/src/books/aviationPassengerTransport6th/assets/images/\347\254\2549\351\241\265-13.png" "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2549\351\241\265-13.png"
new file mode 100644
index 0000000..4d12735
--- /dev/null
+++ "b/src/books/aviationPassengerTransport6th/assets/images/\347\254\2549\351\241\265-13.png"
Binary files differ
diff --git a/src/books/aviationPassengerTransport6th/assets/main.less b/src/books/aviationPassengerTransport6th/assets/main.less
new file mode 100644
index 0000000..268e645
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/assets/main.less
@@ -0,0 +1,1980 @@
+.aviationPassengerTransport6th {
+    width: 100%;
+    height: 100%;
+
+    // 鑷畾涔夊唴瀹�
+    .page-box {
+        box-sizing: border-box;
+        min-height: 1128px;
+        margin-bottom: 20px;
+        box-shadow: 0 3px 6px 1px #00000029;
+        background-color: #fff;
+    }
+
+    .wh-no {
+        white-space: nowrap;
+    }
+
+    .c-g {
+        color: green;
+    }
+
+    .c-r {
+        color: red;
+    }
+
+    .t-right {
+        text-align: right;
+    }
+
+    .mr-0 {
+        margin: 0;
+    }
+
+    .mt-10 {
+        margin-top: 10px !important;
+    }
+
+    .mt-20 {
+        margin-top: 20px !important;
+    }
+
+    .table-pad {
+        padding: 1em 0.7em !important;
+    }
+
+    .mt-30 {
+        margin-top: 30px !important;
+    }
+
+    .mt-70 {
+        margin-top: 70px;
+    }
+
+    .mb-10 {
+        margin-bottom: 10px;
+    }
+
+    .mb-30 {
+        margin-bottom: 30px !important;
+    }
+
+    .ma-l {
+        margin-left: 8%;
+    }
+
+    .ma-0 {
+        margin: 0% !important;
+    }
+
+    .pd-5 {
+        padding: 0 5px;
+    }
+
+    .w100 {
+        width: 100%;
+    }
+
+    .w80 {
+        width: 80%;
+    }
+
+    .w70 {
+        width: 70%;
+    }
+
+    .w25 {
+        width: 25%;
+    }
+
+    .w20 {
+        width: 20%;
+    }
+
+    .fz-13 {
+        font-size: 13px !important;
+    }
+
+    .fz-14 {
+        font-size: 14px !important;
+    }
+
+    .fz-16 {
+        font-size: 16px !important;
+    }
+
+    .fz-18 {
+        font-size: 18px !important;
+    }
+
+    .fz-20 {
+        font-size: 20px;
+    }
+
+    .img-0 {
+        width: 100%;
+    }
+
+    .img-c {
+        width: 70%;
+    }
+
+    .pt-20 {
+        padding-top: 20px;
+    }
+
+    .td-0 {
+        text-indent: 0em !important;
+    }
+
+    .td-1 {
+        text-indent: 1em !important;
+    }
+
+
+    td {
+        padding: 5px 10px;
+    }
+
+    .fl {
+        display: flex;
+    }
+
+    .ju-cn {
+        justify-content: center;
+    }
+
+    .ju-ev {
+        justify-content: space-evenly;
+    }
+
+    .jc-fs {
+        justify-content: flex-start;
+    }
+
+    .fw-w {
+        flex-wrap: wrap;
+    }
+
+    .fd-c {
+        flex-direction: column;
+    }
+
+    .fd-r {
+        flex-direction: row-reverse;
+    }
+
+    .al-c {
+        align-items: center;
+    }
+
+    .al-fe {
+        align-items: flex-end;
+    }
+
+    .ac-f {
+        align-content: flex-end;
+    }
+
+    .jc-fe {
+        justify-content: flex-end;
+    }
+
+    .jc-c {
+        justify-content: center;
+    }
+
+    .jc-sa {
+        justify-content: space-around
+    }
+
+    .ml-40 {
+        margin-left: 40px;
+    }
+
+    .mr-70 {
+        margin-right: 70px;
+    }
+
+    .mr-10 {
+        margin-right: 10px;
+    }
+
+    .pad-t-55 {
+        padding-top: 55px;
+    }
+
+    .ma-t-30 {
+        margin-top: 30px;
+    }
+
+    .ma-t-20 {
+        margin-top: 20px;
+    }
+
+    .pad-l-60 {
+        padding-left: 60px;
+    }
+
+    .pad-l-80 {
+        padding-left: 80px;
+    }
+
+
+    .mb-45 {
+        margin-bottom: 45px;
+    }
+
+    .mb-20 {
+        margin-bottom: 20px !important;
+    }
+
+    .mb-30 {
+        margin-bottom: 30px !important;
+    }
+
+    .page-father {
+        display: flex;
+    }
+
+    .header-left {
+        display: flex;
+        align-items: flex-end;
+        padding: 50px 0 0 0;
+        margin-left: 8%;
+        position: relative;
+
+        img {
+            width: 30%;
+            height: auto;
+            object-fit: contain;
+        }
+    }
+
+    .headerText {
+        position: absolute;
+        bottom: 10%;
+        left: 10%;
+        font-size: 16px;
+        padding-bottom: 5px;
+    }
+
+    .header-left-box {
+        font-size: 14px;
+        margin-left: 8%;
+        padding-bottom: 7%;
+    }
+
+
+
+    .header-right {
+        display: flex;
+        justify-content: flex-end;
+        align-items: flex-end;
+        padding: 50px 0 0 0;
+        margin-right: 10%;
+        margin-bottom: 30px;
+
+        div {
+            width: 9%;
+            text-align: center;
+
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+
+    .headerRight-Number {
+        text-align: right;
+        font-size: 14px;
+        margin-right: 10%;
+        padding-bottom: 7%;
+    }
+
+    .headerRight-Text {
+        font-family: "kaiti";
+        font-size: 16px;
+        padding-bottom: 2px;
+        position: relative;
+        margin-right: 10px;
+    }
+
+    .headerRight-Text::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        /* 杈规楂樺害 */
+        background-image: linear-gradient(to right, rgba(136, 136, 136, 0), #1C9E3A);
+        /* 浠庨�忔槑鍒�#888888鐨勬笎鍙� */
+        z-index: 1;
+        /* 纭繚娓愬彉灞傚湪鍐呭涓婃柟 */
+    }
+
+    .headerRight-box {
+        width: 10px;
+        height: 20px;
+        background-color: #1C9E3A;
+    }
+
+
+    /*浜岀骇鏍囬绔犳爣*/
+    .secondsubHead-1 {
+        text-align: left;
+        line-height: 1.1em;
+        font-size: 1em;
+        text-indent: 0em;
+        margin: 20% auto 0.3em auto;
+        color: #888888;
+    }
+
+    .secondsubHead-2 {
+        font-family: "鏂规鏂版姤瀹�";
+        background-color: #7acab4;
+        display: inline-block;
+        align-items: center;
+        text-align: left;
+        color: #fff;
+        border-radius: 10px;
+        padding: 0px 10px;
+        text-indent: 0em;
+        font-size: 22px;
+        line-height: 28px;
+    }
+
+    .tipes {
+        background-color: #e2f2ed;
+        border: 2px solid #96d3c1;
+        padding: 10px;
+    }
+
+
+
+    table {
+        border-color: none !important;
+    }
+
+    .table-th-bc {
+        background-color: #FEDDB4;
+        color: #000;
+    }
+
+    .table-tr-bc {
+        background-color: #FEF4E4;
+        color: #000;
+    }
+
+    .table-textarea {
+        font-size: 14px;
+        font-family: "Times New Roman", "瀹嬩綋";
+        resize: none;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .textarea-box {
+        border: none;
+        text-align: center;
+        width: 84px;
+        height: 36px;
+        overflow: auto;
+        word-break: break-all;
+        resize: none;
+    }
+
+
+    .b0 {
+        border: 0;
+    }
+
+    .task {
+        width: 16%;
+        margin-bottom: 5em;
+        margin-top: 0;
+        border-top: 0.7em solid #5192C6;
+    }
+
+    .task2 {
+        width: 16%;
+        margin-bottom: 5em;
+        margin-top: 0;
+        border-top: 0.7em solid #F89C1C;
+    }
+
+    .task3 {
+        width: 16%;
+        margin-bottom: 5em;
+        margin-top: 0;
+        border-top: 0.7em solid #448D9C;
+    }
+
+    .task4 {
+        width: 16%;
+        margin-bottom: 5em;
+        margin-top: 0;
+        border-top: 0.7em solid #9EAA60;
+    }
+
+    .p-odd {
+        padding-right: 8%;
+    }
+
+    .p-even {
+        padding-left: 8%;
+    }
+
+    .p-continued {
+        text-align: right;
+        font-size: 14px;
+        margin-bottom: 10px;
+    }
+
+    .img-float {
+        width: 310px;
+        float: left;
+        height: auto;
+        margin: auto;
+        margin-right: 20px;
+
+        img {
+            width: 100%;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    .img-rights {
+        width: 310px;
+        float: right;
+        height: auto;
+        margin: auto;
+        margin-left: 20px;
+
+        img {
+            width: 100%;
+        }
+
+        p {
+            margin: 0 !important;
+        }
+    }
+
+    .w430 {
+        width: 430px;
+    }
+
+    .w395 {
+        width: 395px;
+    }
+
+    .w350 {
+        width: 350px;
+    }
+
+    .w290 {
+        width: 290px;
+    }
+
+    .w280 {
+        width: 280px;
+    }
+
+    .w275 {
+        width: 275px;
+    }
+
+    .w270 {
+        width: 270px;
+    }
+
+    .w250 {
+        width: 250px;
+    }
+
+    .w230 {
+        width: 230px;
+    }
+
+    .w220 {
+        width: 220px;
+    }
+
+    .w210 {
+        width: 210px;
+    }
+
+    .w200 {
+        width: 200px;
+    }
+
+    .w180 {
+        width: 180px;
+    }
+
+    .w150 {
+        width: 150px;
+    }
+
+    .w115 {
+        width: 115px;
+    }
+
+    .pdf .fm-zh {
+        font-family: "鏂规姝i粦" !important;
+    }
+
+    .fm-kt {
+        font-family: "kaiti" !important;
+        font-weight: 500;
+    }
+
+    .fm-fs {
+        font-family: "鏂规浠垮畫" !important;
+    }
+
+    div.bk-ztgs {
+        border: 0.15em dotted #5192c6;
+        padding: 0.5em;
+        margin-bottom: 2em;
+        margin-top: 2em;
+        border-radius: 1em;
+        position: relative;
+    }
+
+    p.bj1-ztgs {
+        background-color: #5192c6;
+        color: #ffffff;
+        display: inline-block;
+        font-size: 1em;
+        padding: 0.1em 0.7em 0.12em 0.7em;
+        font-weight: bold;
+        border-radius: 0em;
+        margin-left: 0em;
+        text-align: center;
+        text-indent: 0em;
+        position: absolute;
+        top: -2em;
+    }
+
+
+    .link-float {
+        width: 150px;
+        float: left;
+        height: auto;
+        margin: auto;
+        margin-right: 20px;
+    }
+
+    .imgBox-003 {
+        width: 100%;
+        height: 280px;
+        margin-bottom: 18px;
+    }
+
+
+    .imgBox {
+        display: flex !important;
+        flex-direction: column-reverse !important;
+        position: relative !important;
+
+        .img {
+            color: #7acab4;
+            margin: 0 !important;
+            font-size: 14px !important;
+            position: absolute !important;
+            left: 50% !important;
+            transform: translateX(-50%);
+            bottom: -2% !important;
+        }
+
+        img {
+            height: 80%;
+        }
+    }
+
+    // 棰樼洰
+
+    .textarea-question {
+        border-color: #1c9e3a !important;
+    }
+
+    .textarea-question:focus {
+        outline: none;
+        /* 绉婚櫎榛樿鐨勭劍鐐硅疆寤� */
+    }
+
+    .textarea-main {
+        background-color: transparent;
+        max-width: 95%;
+        min-width: 95%;
+        outline: none;
+    }
+
+    .textarea-focused {
+        border-color: #5192c6 !important;
+        box-shadow: #5192c6 !important;
+    }
+
+    .select-border {
+        width: 60px;
+        border: 0;
+        border-bottom: 1px solid #767676;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .btn-border {
+        border-radius: 6px;
+        border-color: #5192C6;
+    }
+
+    .btn-w {
+        cursor: pointer;
+        font-size: 14px;
+        border-width: 1px;
+        width: 80px;
+        height: 30px;
+        background-color: #fff;
+
+        &:hover {
+            background-color: #5192C6;
+            color: #fff;
+        }
+    }
+
+    .parimary-btn {
+        cursor: pointer;
+        min-width: 80px;
+        height: 30px;
+        font-size: 14px;
+        margin-left: 5px;
+        background-color: #5192C6;
+        border-color: #5192C6;
+        border-width: 1px;
+        color: #fff;
+        border-radius: 6px;
+
+        &:hover {
+            background-color: #a1afc8;
+            border-color: #a1afc8;
+        }
+    }
+
+    .event-header-text-bc {
+        background-color: #bbd4ec;
+    }
+
+    .video-title {
+        display: flex;
+        align-items: center;
+
+
+        span {
+            margin-left: 10px;
+            color: #1c9e3a !important;
+            font-weight: bold;
+        }
+    }
+
+    .video-box {
+        margin: 10px 0 20px 0;
+        border: 2px dashed #1c9e3a;
+        padding: 3% 2% 2% 2%;
+        position: relative;
+    }
+
+
+
+    .video-img {
+        position: absolute;
+        top: -20px;
+        left: -20px;
+    }
+
+
+    .video-box-left {
+        margin: 20px 8% 20px 0;
+        border: 1px dashed #895B2E;
+        padding: 2% 2%;
+    }
+
+    .videoname {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        span {
+            margin-right: 20px;
+        }
+    }
+
+    .collect-btn {
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+    }
+
+    .collect-btn1 {
+        cursor: pointer;
+        width: 10px;
+        height: 10px;
+        margin-left: 10px;
+        margin-top: 0.8%;
+    }
+
+    .unitImg {
+        position: relative;
+        z-index: 1;
+    }
+
+    .unitBox {
+        z-index: 99;
+        position: absolute;
+        top: -5px;
+        left: 40px;
+    }
+
+    .unit2Box {
+        z-index: 99;
+        position: absolute;
+        top: -200px;
+        left: 40px;
+    }
+
+    .unitGraphic {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: #5192C6;
+        border-radius: 50%;
+        margin-right: 15px;
+    }
+
+    .unit2Graphic {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: #F89C1C;
+        border-radius: 50%;
+        margin-right: 15px;
+    }
+
+    .unit3Graphic {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: #448D9C;
+        border-radius: 50%;
+        margin-right: 15px;
+    }
+
+    .unit4Graphic {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: #9EAA60;
+        border-radius: 50%;
+        margin-right: 15px;
+    }
+
+    // pdf 鏌ョ湅鍣�
+    .pdf-box {
+        margin: 35px 0 20px 0;
+        border: 1px solid #48a65d;
+    }
+
+    .pdf-title {
+        display: flex;
+        background-color: transparent;
+        min-height: 25px;
+        position: relative;
+
+        .bg-img {
+            width: 12%;
+            position: absolute;
+            top: -29.5px;
+        }
+    }
+
+    .pdf-title-name {
+        padding: 0 2%;
+        display: flex;
+        align-items: center;
+        text-indent: 0em;
+        margin: 0 !important;
+        border-right: 1px solid #259e40;
+        color: #259e40;
+
+        img {
+            cursor: pointer;
+            margin-right: 10px;
+        }
+
+        .icon {
+            fill: #078fb9;
+        }
+    }
+
+    .pdf-title-img {
+        width: 75.4%;
+        text-indent: 1em;
+        padding-right: 2%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 0;
+        color: #000;
+
+        span {
+            text-align: center;
+            cursor: pointer;
+            overflow: hidden;
+        }
+
+        img {
+            cursor: pointer;
+        }
+
+        &:hover {
+            text-decoration: underline;
+            color: #259e40;
+        }
+    }
+
+    .unitText {
+        color: #5192C6;
+        font-size: 18px;
+    }
+
+    .unit2Text {
+        color: #F89C1C;
+        font-size: 16px;
+    }
+
+    .unit3Text {
+        color: #448D9C;
+        font-size: 16px;
+    }
+
+    .unit4Text {
+        color: #9EAA60;
+        font-size: 16px;
+    }
+
+
+
+    // 杩佺Щ
+    .bk-bwh {
+        min-height: 800px;
+        background-color: #DFEBF7;
+        font-size: 1.2em;
+        padding: 25px;
+        border: 4px dotted #197ABF;
+    }
+
+    ul {
+        list-style-type: none;
+    }
+
+    li {
+        list-style-type: none;
+    }
+
+    .custom_tag2 {
+        background-color: #F1BE49;
+        color: #FFFFFF;
+        display: inline-block;
+        padding: 0.5px;
+        border-radius: 1.5em;
+        font-size: 1.1em;
+        padding: 2px 10px 2px 10px;
+        font-weight: bold;
+        margin: 0;
+        text-indent: 0em;
+        margin-bottom: 0.5em;
+    }
+
+    .custom_tag1 {
+        background-color: #35ACD6;
+        color: #FFFFFF;
+        display: inline-block;
+        padding: 1px;
+        font-size: 1.1em;
+        padding: 3px 10px 3px 10px;
+        font-weight: bold;
+        box-shadow: 15px 0px 0px 0px #F5D83E, -15px 0px 0px 0px #F5D83E;
+        margin: 0;
+        text-indent: 0em;
+        margin-bottom: 0.5em;
+    }
+
+    .custom_tag {
+        background-color: #35509F;
+        color: #FFFFFF;
+        display: inline-block;
+        padding: 1px;
+        border-radius: 1.5em;
+        font-size: 1.1em;
+        padding: 10px 20px 10px 20px;
+        font-weight: bold;
+        box-shadow: 30px 0px 0px 0px #F5D83E;
+        margin: 0;
+        text-indent: 0em;
+        margin-bottom: 0.5em;
+    }
+
+
+    span.under1 {
+        border-bottom: 2px solid #F0BD4A;
+        border-width: 2px;
+
+    }
+
+    div.bodycontent-div-center {
+        font-family: "DK-HEITI", "鏂规鍏颁涵榛戠畝浣�", "榛戜綋";
+        margin: 1em 1em 1em 1em;
+        font-weight: normal;
+        border-width: 1.5px;
+        border-color: #dfb27d;
+        padding: 1em;
+    }
+
+    img.bodycontent-divcenter-image {
+        float: center;
+        clear: both;
+        height: 140px;
+        margin: 15px;
+    }
+
+    .module_block {
+        display: flex;
+        font-size: 1.1em;
+        position: relative;
+        padding-left: 90px;
+        justify-content: center;
+        align-items: center;
+        margin-right: 91px;
+    }
+
+    .module_block .custom1 {
+        background-color: #9ACC77;
+        padding: 10px 20px;
+        color: #FFFFFF;
+        /* position: absolute; */
+        /* left:0; */
+        /* top: 50%; */
+        border-radius: 0.5em 0em 0em 0.5em;
+        /* transform: translateY(-50%); */
+    }
+
+    .module_block .custom2 {
+        background-color: #E9F3E0;
+        padding: 10px 20px;
+        color: #75A64E;
+        font-weight: bold;
+        border-radius: 0em 0.5em 0.5em 0em;
+    }
+
+
+
+    div.bodycontent-div-left1 {
+        font-family: "DK-HEITI", "鏂规鍏颁涵榛戠畝浣�", "榛戜綋";
+        margin: 1em 1em 1em 1em;
+        font-weight: normal;
+        border-width: 1.5px;
+        border-color: #dfb27d;
+        padding: 1em;
+        background-color: #F0F8FF;
+    }
+
+    div.bodycontent-div-left {
+        font-family: "DK-HEITI", "鏂规鍏颁涵榛戠畝浣�", "榛戜綋";
+        margin: 1em 1em 1em 1em;
+        font-weight: normal;
+        border-width: 1.5px;
+        border-color: #dfb27d;
+        padding: 1em;
+    }
+
+    img.bodycontent-divright-image {
+        float: right;
+        clear: both;
+        height: 140px;
+        margin: 15px;
+    }
+
+    img.bodycontent-divleft-image {
+        float: left;
+        clear: both;
+        height: 110px;
+        margin: 15px;
+    }
+
+
+    div.bodystyle {
+        text-align: justify;
+        margin: 0% 12% 0% 12%;
+        line-height: 30px;
+        min-height: 900px;
+    }
+
+    // div.bodystyle-left {
+    //     text-align: justify;
+    //     margin: 13% 3% 10% 13%;
+    //     line-height: 30px;
+    // }
+
+    .UnitCover {
+        padding-top: 0;
+        padding-bottom: 80px;
+    }
+
+    .Unit-title {
+        margin-left: 2%;
+        margin-bottom: 70px;
+        padding: 150px 30px 20px 0;
+        width: 75%;
+        color: #fff;
+        background-color: #1d9438;
+        position: relative;
+        overflow: hidden;
+
+        p {
+            font-size: 30px;
+            text-align: right;
+        }
+    }
+
+
+
+
+    .Unit-title::after {
+        content: '';
+        position: absolute;
+        right: -1px;
+        bottom: -1px;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0px 0 50px 40px;
+        /* 璋冩暣杩欎釜鍊兼潵鏀瑰彉缂哄け涓夎褰㈢殑澶у皬 */
+        border-color: #fff transparent #fff transparent;
+        /* 浣跨敤涓庤儗鏅浉鍚岀殑棰滆壊鏉モ�滃垏鎺夆�濊 */
+        z-index: 2;
+    }
+
+    .Unit-content {
+        margin: 0 12%;
+    }
+
+    .Unit-title-box {
+        padding: 20px 3% 10px 3%;
+        margin-bottom: 60px;
+        border: 1px dashed #1C9E3A;
+        position: relative;
+
+        span {
+            font-weight: bold;
+        }
+    }
+
+    .box-title {
+        padding: 0px 15px;
+        color: #fff;
+        text-indent: 0em;
+        border-radius: 0 10px 0 0;
+        background-color: #1C9E3A;
+        position: absolute;
+        top: -15px;
+        left: 0;
+    }
+
+    .uploadFiles {
+        display: flex;
+        align-items: flex-end;
+        color: #000;
+
+        img {
+            cursor: pointer;
+            width: 25px;
+            margin-right: 10px;
+        }
+
+        span {
+
+            font-size: 14px;
+            line-height: 20px;
+            font-weight: 400;
+            cursor: pointer;
+        }
+
+        &:hover {
+            color: #1C9E3A !important;
+        }
+
+    }
+
+
+
+    .ppt-box {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        line-height: 25px;
+        font-family: "kaiti";
+
+        p {
+            text-indent: 0em;
+            font-size: 1em;
+            margin-right: 20px;
+            margin-bottom: 0;
+
+            &:hover {
+                text-decoration: underline;
+                color: #1C9E3A;
+            }
+        }
+
+        img {
+            cursor: pointer;
+            width: 25px;
+        }
+
+
+    }
+
+
+
+    .unit-title-parent {
+        text-align: center;
+        margin: 10% 0;
+    }
+
+    .unit-title {
+        font-family: "鏂规姝i粦";
+        display: inline-block;
+        font-size: 1.6em;
+        font-weight: 500;
+        border-bottom: 1px solid #0082D4;
+        padding: 10px 0;
+    }
+
+    .bodyPic {
+        position: relative;
+    }
+
+    .bodyPic-text {
+        position: absolute;
+        top: 15%;
+        left: 8%;
+
+        p {
+            font-family: kaiti;
+            font-size: 16px;
+            line-height: 25px;
+        }
+
+        span {
+            color: #006e92;
+        }
+    }
+
+    span.zt-0 {
+        color: #0087AF;
+    }
+
+    p.pzt-0 {
+        color: #0087AF;
+        font-size: 18px;
+    }
+
+    p.pzt-0-right {
+        font-size: 18px;
+        color: #0087AF;
+        text-align: right;
+    }
+
+    p.pzt-1 {
+        font-weight: bold;
+        color: #0087AF;
+        font-size: 18px;
+    }
+
+    div.sgc-toc-title {
+        font-size: 2em;
+        font-weight: bold;
+        margin-bottom: 1em;
+        text-align: center;
+    }
+
+
+    .block {
+        font-family: "kaiTi";
+        text-indent: 2em;
+        line-height: 30px;
+        font-size: 17px;
+        text-align: justify;
+    }
+
+    .tl-c {
+        text-align: center;
+    }
+
+    .img {
+        text-align: center;
+        font-size: 14px;
+        margin-left: 0%;
+        margin-right: 0%;
+        text-indent: 0em;
+    }
+
+    .img1 {
+        font-family: 'FZLTXIHJW';
+        text-align: right;
+        font-size: 0.85em;
+        margin-left: 0%;
+        margin-right: 2em;
+        text-indent: 0em;
+    }
+
+
+    p {
+        font-family: "鏂规瀹嬩綋";
+        margin-top: 0em;
+        margin-bottom: 0.2em;
+        text-indent: 2em;
+        line-height: 30px;
+        text-align: justify;
+    }
+
+    .cover {
+        width: 100%;
+        padding: 0px;
+    }
+
+    .center {
+        text-align: center;
+        margin-left: 0%;
+        margin-right: 0%;
+        text-indent: 0em;
+    }
+
+    .center-ss {
+        text-align: center;
+        color: #EF8472;
+        font-weight: bold;
+        margin-left: 0%;
+        margin-right: 0%;
+        text-indent: 0em;
+    }
+
+    .left {
+        text-indent: 0em;
+        margin-bottom: 0px;
+        line-height: 20px;
+    }
+
+
+    .img-0 {
+        width: 100%;
+    }
+
+    .img-a {
+        width: 95%;
+    }
+
+    .img-b {
+        width: 70%;
+    }
+
+    .img-c {
+        width: 60%;
+    }
+
+    .img-d {
+        width: 50%;
+    }
+
+    .img-e {
+        width: 45%;
+    }
+
+    .img-f {
+        width: 40%;
+    }
+
+    .img-g {
+        width: 30%;
+    }
+
+    .img-h {
+        width: 20%;
+    }
+
+    .img-h {
+        width: 20%;
+    }
+
+    .img-15 {
+        width: 15%;
+    }
+
+
+    .img-i {
+        width: 10%;
+    }
+
+    .img-j {
+        width: 5%;
+    }
+
+
+    .foreword-img-box {
+        text-align: end;
+        padding: 12% 0 10% 0;
+
+        img {
+            width: 30%;
+        }
+    }
+
+    // epub涓嚜甯︾殑鏍峰紡
+    .editorialBoard {
+        background-color: #fff;
+        border-radius: 50%;
+        /* 椤堕儴鍜屽簳閮ㄤ负0锛屽乏鍙充袱渚т负50% */
+        padding: 5% 10% 20% 10%;
+    }
+
+    .series {
+        padding: 12% 11%;
+        background-color: #e1f1fa;
+    }
+
+    .openingScene {
+
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        min-height: 100%;
+    }
+
+    .quotation-box {
+        padding: 15% 10% 30% 32%;
+    }
+
+    .firstTitle-l {
+        font-family: "鏂规姝i粦";
+        padding: 5% 13%;
+        text-align: center;
+        font-weight: 400;
+    }
+
+
+    .seriesTitle {
+        font-size: 2em;
+        color: #000;
+        font-weight: 400;
+        text-align: center;
+        padding: 15% 0 10% 0;
+    }
+
+    .g-pic {
+        height: 2.5em;
+        vertical-align: middle;
+    }
+
+    .titleQuot-c {
+        font-family: "鏂规鍏颁涵缁嗛粦";
+        color: #00aeef;
+        text-indent: 0em;
+        font-size: 1.7em;
+        line-height: 1.3em;
+        text-align: center;
+        font-weight: 400;
+        padding: 0 5%;
+    }
+
+
+    div.bk3 {
+        background-color: #d6ece5;
+        border: 1px solid #7acab4;
+        padding: 25px 19px 20px 19px;
+        margin-top: 2em;
+        margin-bottom: 1em;
+        position: relative;
+    }
+
+    .bk3-titOne {
+        position: absolute;
+        top: -18px;
+        left: 20%;
+    }
+
+    .bk3-titTwo {
+        position: absolute;
+        top: -18px;
+        left: 38%;
+    }
+
+    .bk3-titThree {
+        position: absolute;
+        top: -18px;
+        right: 38%;
+    }
+
+    .bk3-titFour {
+        position: absolute;
+        top: -18px;
+        right: 20%;
+    }
+
+    .bk3-top {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #fff;
+        border-radius: 0 25px 0 0;
+        transform: rotate(90deg);
+        border-top: 1px solid #7acab4;
+        border-right: 1px solid #7acab4;
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        /* 鏃嬭浆褰㈡垚鎵囧舰 */
+    }
+
+    .bk3-top-right {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #fff;
+        border-radius: 0 25px 0 0;
+        transform: rotate(180deg);
+        border-top: 1px solid #7acab4;
+        border-right: 1px solid #7acab4;
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        /* 鏃嬭浆褰㈡垚鎵囧舰 */
+    }
+
+
+    .bk3-bottom {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #fff;
+        border-radius: 0 25px 0 0;
+        transform: rotate(360deg);
+        border-top: 1px solid #7acab4;
+        border-right: 1px solid #7acab4;
+        position: absolute;
+        bottom: -5.5px;
+        left: -2px;
+        /* 鏃嬭浆褰㈡垚鎵囧舰 */
+    }
+
+    .bk3-bottom-right {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #fff;
+        border-radius: 0 25px 0 0;
+        transform: rotate(270deg);
+        border-top: 1px solid #7acab4;
+        border-right: 1px solid #7acab4;
+        position: absolute;
+        bottom: -5.5px;
+        right: -2px;
+        /* 鏃嬭浆褰㈡垚鎵囧舰 */
+    }
+
+
+    h1 {
+        display: inline-block;
+        text-align: center;
+        background-color: #B4CFAC;
+        padding: 10px 20px;
+        margin: 60px 0 40px 0;
+        border-radius: 25px 0 25px 0;
+        font-size: 1.5em;
+        line-height: 1.2em;
+        text-indent: 0em;
+        font-weight: bold;
+        font-family: "鏂规姝i粦";
+    }
+
+    .firstLevel-t {
+        text-indent: 2em;
+        font-size: 1.1em;
+        font-weight: bold;
+        color: #1C9E3A;
+        margin-top: 50px;
+        margin-bottom: 20px;
+    }
+
+    .Secondary-t {
+        text-indent: 2em;
+        font-size: 1.1em;
+        font-weight: bold;
+        color: #1C9E3A;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    h2 {
+        font-family: '鏂规瀹嬮粦';
+        font-weight: 400;
+        margin: 30px 0;
+    }
+
+    .preface {
+        font-family: "鏂规鏂颁功瀹�";
+        text-indent: 2em;
+        color: #000;
+    }
+
+
+    .right-info {
+        font-family: "kaiti";
+        text-align: right;
+        margin-bottom: 0.5em;
+    }
+
+    .imgdescript-l {
+        margin-left: -5%;
+    }
+
+
+    .titleQuot-l {
+        text-indent: 0em;
+        margin: 15px 0 10px 0;
+        font-size: 1.2em;
+        font-weight: bold;
+    }
+
+    .poemtitle-l {
+        font-family: "鏂规鍏颁涵绾ょ粏";
+        font-size: 1.1em;
+        margin: 15px 0 10px 0;
+        font-weight: bold;
+    }
+
+    .quotation {
+        font-family: "鏂规浠垮畫";
+        text-align: left;
+        text-indent: 2em;
+        margin: 0.1em auto;
+        line-height: 35px;
+    }
+
+    .titleQuot-1 {
+        margin-bottom: 15px;
+        font-family: "鏂规姝i粦";
+        font-size: 1.1em;
+        margin: 20px 0;
+    }
+
+    /*搴曡壊*/
+    .bgColor {
+        padding: 2px 5px;
+        color: #000;
+        background: #aae0f9;
+    }
+
+    // 鎷撳睍瀛︿範
+    .ExpandLearning {
+        padding: 40px 20px 20px 20px;
+        background: #e1f4fc;
+        border-top: 2px solid #008cb7;
+        margin: 1em auto;
+        position: relative;
+    }
+
+    .ExpandLearning-title {
+        text-indent: 0;
+        position: absolute;
+        top: -16px;
+        left: 0px;
+
+        span {
+            background-color: #e1f4fc;
+            height: 20px;
+            width: 30px;
+            padding: 5px;
+            border: 1px solid #008cb7;
+            border-radius: 50%;
+            margin-right: 1px;
+        }
+    }
+
+    .imgdescript {
+        font-size: 13px;
+        text-indent: 0em;
+        text-align: center;
+    }
+
+    .imgdescript-title {
+        color: #7acab4;
+        font-size: 15px;
+        text-indent: 0em;
+        text-align: center;
+    }
+
+    .learningDetection {
+        font-family: "姹変华姝i粦";
+        background-color: #6bcff6;
+        font-weight: bold;
+        margin: 30px 0 20px 0;
+    }
+
+    .poemtitle {
+        text-align: center;
+        font-weight: bold;
+        font-family: "鏂规鍏颁涵缁嗛粦";
+    }
+
+    .bold {
+        color: #00aeef;
+        font-weight: 400;
+        font-family: "鏂规涔﹀畫";
+        margin: 10px 0;
+    }
+
+    .noteContent {
+        font-size: 13.5px;
+        word-break: break-all;
+        margin: 0 !important;
+        line-height: 25px;
+
+        .noteContent-title {
+            font-size: 13.5px;
+            font-weight: bold;
+            margin: 0 !important;
+        }
+    }
+
+    sup {
+        cursor: pointer;
+    }
+}
+
+.dialogQuestion {
+    background-color: #1c9e3a;
+    height: 80px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+
+    span {
+        color: #fff;
+        font-size: 16px;
+        padding: 0 40px 0 20px;
+
+    }
+}
+
+.pdfModal {
+    width: 100%;
+    height: 90vh;
+
+
+    .pdfBox-component {
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        .preview {
+            width: 100%;
+            height: 100%;
+
+            .imageBox {
+                height: calc(100% - 30px);
+                overflow-x: hidden;
+                overflow-y: auto;
+                background: #ccc;
+                box-sizing: border-box;
+            }
+
+            .imageBox:hover {
+                cursor: zoom-in !important;
+            }
+
+            ::v-deep .el-dialog__header {
+                background-color: rgba(0, 0, 0, 0.8);
+
+                .header_title {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: #fff;
+                    font-weight: 900;
+                    font-size: 16px;
+                    font-family: 'FZLTXIHJW';
+
+                    span:nth-child(2):hover {
+                        cursor: pointer;
+                    }
+                }
+
+                ::v-deep .el-dialog__title,
+                ::v-deep .el-dialog__headerbtn .el-dialog__close {
+                    color: #fff;
+                    font-weight: 900;
+                    font-size: 16px;
+                    font-family: 'FZLTXIHJW';
+                }
+            }
+
+            .bottom_tool {
+                height: 30px;
+                background-color: rgba(0, 0, 0, 0.8);
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+
+                svg {
+                    margin-right: 15px;
+                    fill: #d1d1d1;
+                }
+
+                svg:hover {
+                    fill: #fff;
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .notBox {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: calc(100% - 30px);
+            min-height: 300px;
+        }
+    }
+}
+
+.custom-dialog {
+    overflow: hidden !important;
+
+    .el-dialog__body {
+        padding: 0;
+    }
+
+    .el-dialog__header {
+        background-color: rgba(0, 0, 0, 0.8);
+
+        .header_title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #fff;
+            font-weight: 900;
+            font-size: 16px;
+            font-family: 'FZLTXIHJW';
+
+            span:nth-child(2):hover {
+                cursor: pointer;
+            }
+        }
+
+        .el-dialog__title,
+        .el-dialog__headerbtn .el-dialog__close {
+            color: #fff;
+            font-weight: 900;
+            font-size: 16px;
+            font-family: 'FZLTXIHJW';
+        }
+    }
+}
+
+.examination {
+    height: calc(100% - 15px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.header_title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    // color: #fff;
+    font-weight: 900;
+    font-size: 16px;
+    font-family: 'FZLTXIHJW';
+
+    span:nth-child(2):hover {
+        cursor: pointer;
+    }
+}
+
+// 琛ㄦ牸鏍峰紡
+table {
+    border-collapse: collapse; //琛ㄦ牸鐨勮竟妗嗗悎骞讹紝濡傛灉鐩搁偦锛屽垯鍏辩敤涓�涓竟妗嗐��
+    border-spacing: 0px; //璁剧疆琛屼笌鍗曞厓鏍艰竟妗嗙殑闂磋窛銆�
+}
+
+@font-face {
+    font-family: '鏂规浠垮畫';
+    src: url('./Fonts/FZFSK.TTF');
+}
+
+@font-face {
+    font-family: '鏂规瀹嬩綋';
+    src: url('./Fonts/FZSSK.TTF');
+}
+
+// @font-face {
+//     font-family: '鏂规瀹嬮粦';
+//     src: url('./Fonts/FZSHJW.TTF');
+// }
+
+// @font-face {
+//     font-family: '鏂规浠垮畫';
+//     src: url('./Fonts/FZFSK.TTF');
+// }
+
+// @font-face {
+//     font-family: '鏂规鍏颁涵缁嗛粦';
+//     src: url('./Fonts/FZLTXIHK.TTF');
+// }
+
+
+
+// 闅愯棌椤甸潰
+.hidePage {
+    min-height: 0 !important;
+    height: 0 !important;
+    box-shadow: none !important;
+}
+
+/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
+
+@media screen and (max-width: 1024px) {
+    .pdfModal {
+        width: 100%;
+        height: 80vh;
+    }
+
+    .custom-dialog {
+        .el-dialog {
+            width: 90vw !important;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .pdfModal {
+        width: 100%;
+        height: 60vh;
+    }
+
+    .custom-dialog {
+        .el-dialog {
+            width: 90vw !important;
+        }
+    }
+}
+
+@media (max-width: 660px) {
+    .aviationPassengerTransport6th {
+
+        .pad-l-80 {
+            padding-left: 10px;
+        }
+
+        .mr-70 {
+            margin-right: 15px;
+        }
+
+        /* 鍒嗛〉padding */
+        .padding-93 {
+            padding: 0 20px;
+        }
+
+        .padding-102 {
+            padding: 0 20px;
+        }
+
+
+        .img-float {
+            width: 130px;
+        }
+
+        .img-rights {
+            width: 130px;
+        }
+
+        .btn-w {
+            width: 42px;
+        }
+
+        .unitText {
+            color: #5192C6;
+            font-size: 10px;
+        }
+
+        .unit2Text {
+            color: #F89C1C;
+            font-size: 10px;
+        }
+
+        .wh-no {
+            white-space: wrap;
+        }
+
+        td {
+            padding: 5px 10px;
+        }
+    }
+}
+
+@media (min-width: 660px) {
+    .aviationPassengerTransport6th {
+        .padding-93 {
+            padding: 0 93px 0px 93px;
+        }
+
+        .padding-102 {
+            padding: 0 102px 0 102px;
+        }
+    }
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: rgba(0, 0, 0, 0.1);
+    -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+    height: 5px;
+    background-color: rgba(125, 125, 125, 0.3);
+    -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    width: 5px;
+    background-color: rgba(125, 125, 125, 0.3);
+    -webkit-border-radius: 6px;
+}
\ No newline at end of file
diff --git a/src/books/aviationPassengerTransport6th/view/components/chapter001.vue b/src/books/aviationPassengerTransport6th/view/components/chapter001.vue
new file mode 100644
index 0000000..98a8d6a
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/view/components/chapter001.vue
@@ -0,0 +1,1130 @@
+<template>
+  <div class="chapter" num="2">
+    <!-- 2椤� -->
+    <div class="page-box mt-20" page="2" style="min-height: auto">
+      <div v-if="showPageList.indexOf(2) > -1">
+        <img class="img-0" alt="" src="../../assets/images/0002-01.jpg" />
+      </div>
+    </div>
+    <!-- 3椤� -->
+    <div class="page-box" page="3">
+      <div v-if="showPageList.indexOf(3) > -1">
+        <div class="UnitCover">
+          <div class="Unit-title">
+            <p>椤圭洰涓�</p>
+            <p>姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</p>
+          </div>
+          <div class="Unit-content">
+            <div class="Unit-title-box">
+              <p class="box-title">椤圭洰瀵艰</p>
+              <p class="fm-kt">
+                鏈」鐩綔涓哄叏涔︾殑寮�绡囷紝涓昏浠嬬粛涓栫晫浠ュ強涓浗姘戠敤鑸┖杩愯緭涓氫笉鍚屽巻鍙插彂灞曢樁娈电殑鐗圭偣锛岃鏄庝腑鍥芥皯鑸繍杈撲笟钃媰鍙戝睍鐨勭敓鏈哄拰娲诲姏銆�
+              </p>
+            </div>
+            <div class="Unit-title-box">
+              <p class="box-title">瀛︿範鐩爣</p>
+              <p class="fm-kt">
+                <span>鐭ヨ瘑鐩爣锛�</span
+                >浜嗚В涓栫晫浠ュ強涓浗姘戠敤鑸┖杩愯緭鐨勫彂灞曞巻鍙蹭互鍙婁笉鍚岄樁娈电殑鐗圭偣锛涚悊瑙f皯鐢ㄨ埅绌鸿繍杈撳彂灞曠殑瓒嬪娍銆�
+              </p>
+              <p class="fm-kt">
+                <span>鎶�鑳界洰鏍囷細</span
+                >姣旇緝涓浗涓庝笘鐣屾皯鐢ㄨ埅绌鸿繍杈撳彂灞曞巻鍙诧紱鐞嗚В褰撲粖姘戠敤鑸┖杩愯緭鑱旂洘鍖栧彂灞曡秼鍔匡紝浠ュ強涓浗鐢辨皯鑸ぇ鍥藉悜姘戣埅寮哄浗鎺ㄨ繘鐨勬垬鐣ユ瀯鎯炽��
+              </p>
+              <p class="fm-kt">
+                <span>绱犺川鐩爣锛�</span>鏍戠珛鍏ㄦ皯鑸�佸ぇ姘戣埅鐨勮亴涓氳銆�
+              </p>
+            </div>
+            <p class="firstLevel-t center">涓哄叏鐞冭埅绌哄彂灞曟帹杩涘垱鏂�</p>
+            <p>
+              1944骞�12鏈�7鏃ワ紝52涓浗瀹跺湪鑺濆姞鍝ョ缃蹭簡銆婂浗闄呮皯鐢ㄨ埅绌哄叕绾︺�嬶紙閫氱О銆婅姖鍔犲摜鍏害銆嬶級銆傛牴鎹�婅姖鍔犲摜鍏害銆嬬殑瑙勫畾锛�1947骞�4鏈�4鏃ワ紝鍥介檯姘戣埅缁勭粐锛圛CAO锛夋寮忔垚绔嬨��1992骞�9鏈堝彫寮�鐨勫浗闄呮皯鑸粍缁囩29灞婂ぇ浼氬仛鍑哄喅璁紝鑷姖鍔犲摜鍏害绛剧讲50鍛ㄥ勾鐨�1994骞磋捣锛屽皢姣忓勾鐨�12鏈�7鏃ュ畾涓衡�滃浗闄呮皯鑸棩鈥濄��
+            </p>
+          </div>
+        </div>
+        <ul class="headerRight-Number">
+          <li class="">路3路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 4椤� -->
+    <div class="page-box" page="4">
+      <div v-if="showPageList.indexOf(4) > -1">
+        <ul class="header-left">
+          <img src="../../assets/images/header-left.png" alt="" />
+          <li class="headerText">姘戣埅鏃呭杩愯緭</li>
+        </ul>
+        <div class="bodystyle">
+          <p class="fm-fs">
+            1996骞�12鏈�6鏃ワ紝鑱斿悎鍥藉ぇ浼氭牴鎹浗闄呮皯鑸粍缁囩殑鍊¤锛岄�氳繃鍐宠锛堢51/33鍙峰喅璁級锛岃绔嬫瘡骞寸殑12鏈�7鏃ヤ负鈥滃浗闄呮皯鑸棩鈥濓紝鏃ㄥ湪甯姪寤虹珛鍜屽杩涘叏涓栫晫鐨勮璇嗭紝浜嗚В鍥介檯姘戠敤鑸┖瀵瑰悇鍥界ぞ浼氬拰缁忔祹鍙戝睍鐨勯噸瑕佹�э紝浠ュ強鍥介檯姘戣埅缁勭粐涓哄叏浜虹被鏈嶅姟銆佸府鍔╁悇鍥藉悎浣滃苟瀹炵幇鐪熸鐨勫叏鐞冨揩閫熻繃澧冪綉缁滄墍鍙戞尌鐨勭嫭鐗逛綔鐢ㄣ��
+          </p>
+          <p class="fm-fs">
+            姣忛殧浜斿勾锛屽湪鍥介檯姘戣埅缁勭粐鍛ㄥ勾绾康涔嬮檯锛堝2014骞淬��2019骞淬��2024骞寸瓑锛夛紝鍥介檯姘戣埅缁勭粐鐞嗕簨浼氫负鍥介檯姘戣埅鏃ヨ瀹氫竴涓壒瀹氱殑鍛ㄥ勾涓婚锛岀悊浜嬩細浠h〃浠繕涓鸿繖浜涘懆骞寸邯蹇垫棩涔嬮棿鐨勬暣涓洓骞存湡閫夋嫨涓�涓浗闄呮皯鑸棩涓婚銆備负绾康鍥介檯姘戣埅缁勭粐鎴愮珛75鍛ㄥ勾锛岀悊浜嬩細涓�2019骞村簡绁濇椿鍔ㄩ�夋嫨鐨勪富棰樹负鈥滆繛閫氫笘鐣屼竷鍗佷簲杞斤紙75
+            Years of Connecting the
+            World锛夆�濓紝2020骞磋嚦2023骞寸殑鍥介檯姘戣埅鏃ヤ富棰樻槸鈥滀负鍏ㄧ悆鑸┖鍙戝睍鎺ㄨ繘鍒涙柊锛圓dvancing
+            Innovation for Aviation Development锛夆�濄��
+          </p>
+          <p class="fm-fs">
+            鍒涙柊灏嗘垚涓烘鍦ㄦ潵涓寸殑鑸┖鏂版椂浠g殑鏍稿績锛岃嚜涓昏埅绌哄櫒銆佸彲鍐嶇敓鑳芥簮鍜屾帹杩涜兘婧愩�佷簹杞ㄩ亾椋炶銆佷汉宸ユ櫤鑳姐�佸鏉愬埗閫犮�佸ぇ鏁版嵁銆佸尯鍧楅摼鍜岃澶氬叾浠栦护浜哄叴濂嬬殑鍙戝睍閮藉皢鏀瑰彉鎴戜滑鎵�鐭ョ殑椋炶闈㈣矊銆傚浗闄呮皯鑸粍缁囬噰鐢ㄧН鏋佷富鍔ㄧ殑鐩戠璇勪及鏂规硶锛岄紦鍔辨柊瓒嬪娍骞舵帹鍔ㄥ崗璋冿紝浠庤�屽湪鏀寔鑸┖鍒涙柊涓彂鎸ヤ富瑕佷綔鐢紝淇冧娇鑸┖涓氳兘澶熷埄鐢ㄨ繖浜涜秼鍔垮垱閫犳柊鎴愮哗鍙婅幏寰楁柊鑳藉姏銆�
+          </p>
+          <p class="right-info">锛堣祫鏂欐潵婧愶細鍥介檯姘戣埅缁勭粐銆佽仈鍚堝浗缃戠珯锛�</p>
+          <div class="fl jc-c">
+            <h1>浠诲姟涓�銆�浜嗚В涓栫晫姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</h1>
+          </div>
+          <p>
+            鍦ㄥ箍闃旀棤鍨犵殑钃濆ぉ涓婅嚜鐢卞湴椋炵繑锛屾槸浜虹被鑷彜浠ユ潵鐨勬ⅵ鎯炽�備汉绫荤殑椋炲ぉ姊︽兂闆嗕腑鍙嶆槧鍦ㄤ腑澶栧彜浠i琛岀璇濅腑銆傚湪涓浗锛屾湁骞夸负娴佷紶鐨勭編涓界璇濓紝濡傚濞ュ鏈堛�佷粰濂充笅鍑°�佺墰閮庣粐濂筹紱鏈変箻榫欒法鍑ょ殑钀у彶銆佸紕鐜夛紱鏈夊ぉ瀹腑鐨勭帀鐨囧ぇ甯濄�佽剼韫鐏疆鐨勫摢鍚掍笁澶瓙鍙婇鏉ラ鍘荤殑浼楃浠欙紱鏈変竴涓瓔鏂楀崄涓囧叓鍗冮噷鐨勯綈澶╁ぇ鍦e瓩鎮熺┖锛涜繕鏈夐椈鍚嶄笘鐣岀殑鏁︾厡椋炲ぉ绛夛紝閮芥槸涓浗鍙や唬浜虹被鍗囩┖椋炵繑鎰挎湜鐨勭敓鍔ㄤ綋鐜般�傚湪澶栧浗锛屽彜浠i琛岀璇濅富瑕侀泦涓湪鍙ゅ笇鑵娿�佸焹鍙娿�佸嵃搴﹀強闃挎媺浼湴鍖恒�傚湪鍙ゅ笇鑵婄璇濅腑锛屼細椋炵殑绁炴湁寰堝锛屽澶槼绁為樋娉㈢綏銆佺埍绁炰笜姣旂壒绛夛紝閮介暱鐫�涓�鍙岀繀鑶�锛涢樋鎷変集椋炴鐨勭璇濇洿鏄鍠绘埛鏅撱��
+          </p>
+        </div>
+        <ul class="header-left-box">
+          <li class="">路4路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 5椤� -->
+    <div class="page-box" page="5">
+      <div v-if="showPageList.indexOf(5) > -1">
+        <ul class="header-right">
+          <li class="headerRight-Text">椤圭洰涓�銆�姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</li>
+          <span class="headerRight-box"></span>
+        </ul>
+        <div class="bodystyle">
+          <p class="firstLevel-t">涓�銆佽埅绌轰笟鐨勮悓鑺�</p>
+          <p>
+            浜虹被鐪熸椋炰笂澶╁紑濮嬩簬1783骞存硶鍥界殑钂欑壒鍝ヨ彶灏旓紙Montgol铿乪r锛夊厔寮熷埗閫犵殑鐑皵鐞冭浇浜哄崌绌猴紝闅忓悗寰峰浗浜哄張鐢ㄦ皵鐞冭繍閫侀偖浠跺拰涔樺锛岃繖鍙互璇存槸姘戠敤鑸┖鐨勫紑濮嬨��1852骞达紝鍦ㄦ硶鍥藉嚭鐜颁簡椋炶墖锛屽嚭鐜颁簡鍙互鐢变汉鎿嶇旱鐨勬湁鍔ㄥ姏鐨勯琛屽櫒銆傛暣涓�19涓栫邯鏄皵鐞冦�侀鑹囪繖浜涜交浜庣┖姘旂殑鑸┖鍣ㄤ富瀹拌埅绌虹殑鏃朵唬锛屽畠浠鍏堢敤浜庢皯鐢紝浣嗗緢蹇氨琚敤浜庢垬浜夛紝鑰屽啗浜嬬敤閫斿張淇冭繘浜嗚埅绌烘妧鏈殑鍙戝睍銆傝交浜庣┖姘旂殑椋炶鍣ㄤ綋绉ぇ銆侀�熷害鎱紝鎿嶇旱涔熶笉鏂逛究锛屽湪鍐涗簨涓婃槗鍙楁敾鍑伙紝鍥犺�屽畠浠殑鍑虹幇涓嶈鍦ㄦ皯鐢ㄥ拰鍐涚敤棰嗗煙涓兘涓嶄唬琛ㄧ湡姝g殑鑸┖鏃朵唬鐨勫埌鏉ャ��
+          </p>
+          <p>
+            鑸┖浜嬩笟鐨勭湡姝e紑鎷撴槸鍦ㄩ鏈鸿繖绉嶉噸浜庣┖姘旂殑鑸┖鍣ㄥ嚭鐜颁互鍚庯紝閲嶄簬绌烘皵鐨勯琛屽櫒鐨勮鎯冲嚭鐜板緱姣旇交浜庣┖姘旂殑椋炶鍣ㄨ繕瑕佹棭锛屼絾鐩村埌19涓栫邯锛屾硶鍏拌タ绉戝闄㈣繕鍦ㄤ簤璁烘槸鍚﹀彲鑳藉埗閫犲嚭閲嶄簬绌烘皵鐨勯琛屽櫒鐨勯棶棰樸�備笌姝ゅ悓鏃讹紝鑻卞浗绉戝瀹跺嚡鍒╋紙G.
+            Cayley锛夊拰寰峰浗绉戝瀹堕噷鏉庢灄杈惧皵锛圤.
+            Lilienthal锛夊婊戠繑鏈哄仛浜嗗ぇ閲忕殑鐮旂┒鍜屽疄璺碉紝鏉庢灄杈惧皵涓烘浠樺嚭浜嗙敓鍛斤紝浠栦滑鍜屽叾浠栦竴浜涚瀛﹀鐨勭爺绌跺湪绌烘皵鍔ㄥ姏鐨勭悊璁恒�侀鏈虹殑鏋勯�犲拰鎿嶇旱鐨勫疄璺典笂涓洪鏈虹殑鍑虹幇濂犲畾浜嗗熀纭�銆�
+          </p>
+          <p>
+            1903骞�12鏈�17鏃ワ紝缇庡浗鐨勮幈鐗瑰厔寮熷彂鏄庝簡椋炴満锛屽鍥�1-1鎵�绀恒�傚湪姝ゅ悗涓嶅埌鍗佸勾鐨勬椂闂村唴锛屼汉浠氨宸茬粡寮�濮嬭瘯鍥炬妸椋炴満搴旂敤浜庤埅绌鸿繍杈撲簡銆�
+          </p>
+          <div class="fl fd-c al-c openImgBox mt-20">
+            <img class="img-c" src="../../assets/images/绗�5椤�-9.png" alt="" />
+            <p class="img">鍥� 1-1銆�鑾辩壒鍏勫紵鐨勨�滈琛岃�呭彿鈥�</p>
+          </div>
+        </div>
+        <ul class="headerRight-Number">
+          <li class="">路5路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 6椤� -->
+    <div class="page-box" page="6">
+      <div v-if="showPageList.indexOf(6) > -1">
+        <ul class="header-left">
+          <img src="../../assets/images/header-left.png" alt="" />
+          <li class="headerText">姘戣埅鏃呭杩愯緭</li>
+        </ul>
+        <div class="bodystyle">
+          <p>
+            1910骞�11鏈�7鏃ワ紝缇庡浗椋炶鍛樿彶鍒╂櫘路甯曢┈鍒╋紙Philip
+            Parmalee锛夊彈鑾皵璞柉璨傜毊鍏徃鐨勫鎵橈紝椹鹃┒鑾辩壒B鍨嬪弻缈兼満锛屽皢涓�鎵逛笣缁囧搧浠庝唬椤匡紙Dayton锛夎繍寰�鍝ヤ鸡甯冿紙Columbus锛夛紝杩欏彲浠ョ畻浣滅涓�娆¢鏈鸿揣杩愩��
+          </p>
+          <p>
+            1911骞�2鏈�22鏃ワ紙涓�璇存槸20鏃ワ級锛岃嫳鍥界殗瀹舵捣鍐涗腑鏍℃俯寰峰锛圵alter G.
+            Windham锛夎娉曞浗椋炶鍛樹酣鍒┞蜂僵鍑紙Henry
+            Pequet锛夐┚鏈猴紝鎶婁竴鎵逛俊浠朵粠鍗板害鐨勯樋鎷夊搱宸村痉甯傦紙Allahabad锛夊甫寰�濂堝凹绔犲厠鐢筹紙Naini
+            Junction锛夈�傛瘡灏佷俊闄勫姞鑸┖閭垂绾﹀悎2.5渚垮+锛岃繖渚挎槸棣栨閭斂椋炶銆�
+          </p>
+          <p>
+            1914骞�1鏈�1鏃ワ紝缇庡浗钁楀悕闀块�旈琛屽憳鎵樺凹路璐剧撼鏂紙Tony
+            Jannus锛夐┚椹垛�滀集鍔摝鈥濓紙Benoist锛夊彿姘翠笂椋炴満锛岃浇涓�鍚嶄箻瀹紝瀹屾垚浜嗕粠鍦e郊寰楁柉鍫★紙St.
+            Petersburg锛夊埌鍧﹀笗锛圱ampa锛夌殑绗竴娆¤埅鐝琛屻�傝埅绾垮叏闀�31鍏噷锛岃埅琛屾椂闂寸害20鍒嗛挓銆傝繖灏辨槸绗竴娆″杩愯埅鐝��
+          </p>
+          <p>
+            1909骞达紝娉曞浗浜哄竷鑾遍噷濂ワ紙Louis
+            Bleriot锛夋垚鍔熷湴椋炶繃浜嗚嫳鍚夊埄娴峰场锛屽紑鍒涗簡鍘嗗彶涓婄涓�娆″浗闄呴琛屻�傚湪闅忓悗鐨�10骞翠腑锛岄鏈哄緢蹇搴旂敤鍒板啗浜嬩笂锛�1914鈥�1918骞寸殑绗竴娆′笘鐣屽ぇ鎴橈紝鏋佸ぇ鍦版帹鍔ㄤ簡鑸┖鎶�鏈殑鍙戝睍锛岃繖涓�闃舵椋炴満鍑犱箮娌℃湁鐢ㄤ簬杩囬潪鍐涗簨鐢ㄩ�斻��
+          </p>
+          <p>
+            1919骞村勾鍒濓紝寰峰浗棣栧厛寮�濮嬩簡鍥藉唴鐨勬皯鑸繍杈擄紝鍚屽勾8鏈堬紝鑻卞浗鍜屾硶鍥藉紑閫氫簡瀹氭湡鐨勭┖涓湇鍔★紝姘戠敤鑸┖鐨勫巻鍙叉寮忔彮寮�浜嗐��
+          </p>
+          <div class="img-float w350 openImgBox">
+            <img class="img-c" src="../../assets/images/绗�6椤�-10.png" alt="" />
+            <p class="img">鍥� 1-2銆�DC-3 瀹㈡満</p>
+          </div>
+          <span>
+            <p>
+              浠�1919骞村埌1939骞寸殑20骞达紝鏄皯鐢ㄨ埅绌哄垵鍒涘苟鍙戝睍鐨勫勾浠o紝姘戠敤鑸┖杩呴�熶粠娆ф床鍙戝睍鍒板寳缇庯紝鐒跺悗鏅強鍒颁簹銆侀潪銆佹媺缇庡悇娲诧紝杩呴�熸墿灞曞埌鍏ㄧ悆鍚勫湴锛屼腑鍥戒篃鍦�1920骞村紑濮嬪缓绔嬩簡绗竴鏉¤埅绾裤��1933骞达紝缇庡浗浜烘灄鐧斤紙C.
+              A.Lindberg锛夋í瓒婂ぇ瑗挎磱椋炶鐨勬垚鍔燂紝鎶婅埅绌鸿繍杈撶敱娲插唴椋炶鎵╁睍鍒颁簡娲查檯椋炶銆傝繖涓勾浠f渶鍏蜂唬琛ㄦ�х殑姘戣埅瀹㈡満鏄編鍥界殑DC-3锛屽鍥�1-2鎵�绀恒��
+            </p>
+            <p>
+              1939骞达紝绗簩娆′笘鐣屽ぇ鎴樼殑寮�濮嬶紝涓柇浜嗘皯鑸彂灞曠殑姝e父杩涚▼銆傛垬浜夊鑸┖鐨勬帹鍔ㄥ姏杩滄瘮姘戣埅鑾峰彇鍟嗕笟鍒╂鼎鐨勬帹鍔ㄥ姏澶у緱澶氾紝鍦ㄥ叚骞寸殑鎴樹簤涓埅绌烘妧鏈彇寰椾簡椋炶穬寮忕殑鍙戝睍銆�
+            </p>
+          </span>
+        </div>
+        <ul class="header-left-box">
+          <li class="">路6路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 7椤� -->
+    <div class="page-box" page="7">
+      <div v-if="showPageList.indexOf(7) > -1">
+        <ul class="header-right">
+          <li class="headerRight-Text">椤圭洰涓�銆�姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</li>
+          <span class="headerRight-box"></span>
+        </ul>
+        <div class="bodystyle">
+          <div class="pdf-box">
+            <div class="pdf-title">
+              <p class="pdf-title-name">
+                <img src="../../assets/images/pdfLogo.svg" alt="" />
+                <span>鎷撳睍鐭ヨ瘑</span>
+              </p>
+              <p class="pdf-title-img">
+                <span @click="toUrl(1)"> {{ chapter001.pdfMd5[1].name }}</span>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="
+                    chapterData.isCollectVideoOne ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'
+                  "
+                  placement="top-start"
+                >
+                  <img
+                    :src="
+                      collectResourceList.findIndex(
+                        (item) => item.id == 'd26f73df690bb8de6781c40d049560e3'
+                      ) > -1
+                        ? collectCheck
+                        : collectImg
+                    "
+                    alt=""
+                    class="collect-btn"
+                    @click="handleCollect('pdf-01')"
+                  />
+                </el-tooltip>
+              </p>
+            </div>
+          </div>
+          <p class="firstLevel-t">浜屻�佹皯鐢ㄨ埅绌虹殑澶у彂灞曟椂鏈�</p>
+          <p>
+            浠�1945骞寸浜屾涓栫晫澶ф垬缁撴潫鍒�1958骞达紝姘戠敤鑸┖缁忓巻浜嗘仮澶嶅拰澶у彂灞曠殑鏃舵湡銆傝繖涓�鏃舵湡鍐呮皯鐢ㄨ埅绌虹殑鍙戝睍涓昏浣撶幇鍦ㄤ互涓嬪嚑涓柟闈細
+          </p>
+          <p>
+            绗竴锛屽浗闄呰埅绌轰笟杩呴�熷彂灞曘��1944骞村湪缇庡浗鑺濆姞鍝ワ紝54涓浗瀹剁缃蹭簡銆婂浗闄呰埅绌鸿繍杈撳叕绾︺�嬶紝鍙茬О銆婅姖鍔犲摜鍏害銆嬶紝杩欎釜鍏害鐜板湪鎴愪负涓栫晫鍥介檯鑸┖娉曠殑鍩虹銆�
+          </p>
+          <p>
+            绗簩锛屾満鍦哄拰鑸矾缃戠瓑鍩虹璁炬柦澶ч噺鍏村缓锛屼娇姘戠敤鑸┖鐢辫繃鍘荤殑鐐圭嚎缁撴瀯鍚戦潰涓婂彂灞曪紝閫愭褰㈡垚浜嗕竴涓叏鐞冭寖鍥寸殑鑸┖缃戙��
+          </p>
+          <p>
+            绗笁锛岀洿鍗囨満杩涘叆浜嗘皯鑸湇鍔★紝鎴愪负姘戣埅鐨勫張涓�绉嶄富瑕佽埅绌哄櫒锛屽紑杈熶簡姘戣埅鐨勬柊棰嗗煙銆�
+          </p>
+          <div class="img-rights w350 openImgBox">
+            <img class="img-c" src="../../assets/images/绗�7椤�-11.png" alt="" />
+            <p class="img">鍥�1-3銆�B707-220</p>
+          </div>
+          <span>
+            <p>
+              绗洓锛屽柗姘斿紡姘戠敤椋炴満鐨勭爺鍒惰繘鍏ヤ簡瀹炵敤闃舵锛屼负姘戣埅绗簩涓樁娈电殑鍙戝睍鍑嗗浜嗘潯浠躲��1956骞达紝鍠锋皵寮忔皯鐢ㄩ鏈烘姇鍏ヤ娇鐢紝寮�濮嬩簡姘戠敤鑸┖鐨勪竴涓柊闃舵銆傝嫳鍥戒綔涓哄柗姘斿紡椋炴満鐨勫厛椹卞浗鍦ㄦ垬鍚庡氨鑷村姏浜庢皯鐢ㄥ柗姘斿紡椋炴満鐨勭爺鍙戙��1950骞达紝涓栫晫涓婄涓�鏋舵丁杞灪鏃嬫〃鍠锋皵瀹㈡満鈥斺�旇嫳鍥界殑鈥滃瓙鐖靛彿鈥濃�斺�旀姇鍏ヤ娇鐢ㄣ��1952骞达紝鑻卞浗寰仿峰搱缁村叞椋炴満鍒堕�犲叕鍙哥爺鍒剁殑銆佽閰�4娑¤疆鍠锋皵鍙戝姩鏈虹殑鈥滃綏鏄熷彿鈥濆鏈哄湪鑸嚎涓婂紑濮嬩娇鐢ㄣ�傚湪闅忓悗鐨勪袱骞村唴锛屸�滃綏鏄熷彿鈥濊繛缁笁娆$┖涓В浣擄紝浣垮柗姘斿紡椋炴満鍦ㄦ皯鑸殑搴旂敤鍙楀埌浜嗘尗鎶橈紝浣嗗柗姘斿紡姘戠敤椋炴満鐨勪紭瓒婃�у凡缁忔樉绀哄嚭鏉ャ�傚湪鎺ュ彈浜嗏�滃綏鏄熷彿鈥濆け璐ョ殑鏁欒鍚庯紝浜轰滑缁堜簬鍒ゆ柇鍑哄鑷粹�滃綏鏄熷彿鈥濆け浜嬬殑鍘熷洜鏄�滅柌鍔虫柇瑁傗�濓紝骞舵壘鍑轰簡瑙e喅鐨勬柟娉曘��1956骞达紝鑻忚仈鐨勫浘-104
+              鎶曞叆鑸嚎锛�1958骞达紝缇庡浗鐨勬尝闊�707锛堝浘1-3锛夊拰DC-8
+              杩涘叆鑸嚎锛屽柗姘旇埅绌虹殑鏂版椂浠e紑濮嬩簡銆備綔涓哄柗姘斿紡椋炴満鐨勪唬琛ㄦ満绉嶏紝娉㈤煶707鐨勯�熷害杈惧埌姣忓皬鏃�900~1000鍏噷锛岃埅绋嬪彲杈�12
+              000鍏噷锛屼箻瀹�158浜恒�備粠姝ゆ皯鐢ㄨ埅绌虹敱涓�涓浗瀹舵垨涓�涓湴鍖虹殑灏戦噺浜轰娇鐢ㄧ殑杩愯緭鎵嬫锛屽彉鎴愪竴涓叏鐞冩�х殑澶т紬鍖栫殑杩愯緭琛屼笟锛屾瀬澶у湴淇冭繘浜嗗叏鐞冧氦閫氳繍杈撶殑鍙戝睍锛屼篃浣胯埅绌鸿繍杈撴垚涓哄浗闄呰繍杈撳拰鍥藉唴杩愯緭鐨勯噸瑕佹柟寮忎箣涓�銆�
+            </p>
+          </span>
+        </div>
+        <ul class="headerRight-Number">
+          <li class="">路7路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 8椤� -->
+    <div class="page-box" page="8">
+      <div v-if="showPageList.indexOf(8) > -1">
+        <ul class="header-left">
+          <img src="../../assets/images/header-left.png" alt="" />
+          <li class="headerText">姘戣埅鏃呭杩愯緭</li>
+        </ul>
+        <div class="bodystyle">
+          <p class="firstLevel-t">涓夈�佹皯鐢ㄨ埅绌虹殑鍏ㄧ悆鍖栥�佸ぇ浼楀寲鏃舵湡</p>
+          <p>
+            鍠锋皵寮忛鏈鸿繘鍏ユ皯鑸紝浣胯繙绋嬨�佸ぇ浼楀寲鍜屽粔浠风殑鑸┖杩愯緭鎴愪负鍙兘锛屽湪宸ㄥぇ鐨勯渶姹傚拰鍒╂鼎椹变娇涓嬶紝鑸┖鍏徃绉瀬鍦板紑鎷撳競鍦猴紝鍙傚姞鍥介檯绔炰簤銆傚湪鍙戣揪鍥藉鍑虹幇浜嗗ぇ閲忕殑鑸┖鍏徃锛屽苟鏈�鍚庡舰鎴愪簡鏁板崄涓ぇ鍨嬬殑鑸┖鍏徃銆傚彂灞曚腑鍥藉涔熸妸鍙備笌鍥介檯鑸┖甯傚満浣滀负鍥藉灏婁弗鍜屽湴浣嶇殑璞″緛锛屽叏鍔涙敮鎸佸浗瀹惰埅绌哄叕鍙哥殑鍙戝睍锛屼娇姘戣埅浜嬩笟涓�鐗囩箒鑽c�傜敱浜庡柗姘斿紡椋炴満鐨勫昂瀵搞�侀噸閲忋�佸櫔澹扮瓑甯︽潵鐨勯棶棰橈紝鏃х殑鏈哄満宸蹭笉閫傚悎鑸┖杩愯緭鐨勫彂灞曪紝浜庢槸鑸┖鍏徃寮�濮嬩笉鏂湴鏀归�犳棫鏈哄満锛屽叴寤烘柊鏈哄満锛屾弧瓒充笉鏂澶х殑瀹㈣揣娴併�傚浜庤埅琛岀鐞嗙郴缁熸潵璇达紝浠庤埅琛岀鍒躲�佽埅璺紑杈熴�佽埅琛屾儏鎶ョ瓑锛岄兘瑕侀�傚簲鍠锋皵鏃朵唬鐨勯�熷害鍜屽閲忕殑瑕佹眰锛屽洜鑰屾暣涓郴缁熼兘杩涜鐫�鏀归�犲拰鏇存柊銆傛�讳箣锛�1958骞村紑濮嬬殑姘戠敤鍠锋皵鏃朵唬鏄皯鑸彂灞曠殑涓�涓柊鐨勯樁娈碉紝瀹冩爣蹇楃潃姘戣埅杩涘叆浜嗗叏鐞冪殑澶т紬鍖栬繍杈撶殑鏂版椂浠c��
+          </p>
+          <p>
+            浠�20涓栫邯70骞翠唬涔嬪悗锛屾皯鑸户缁湞鐫�澶у瀷鍖栧拰楂橀�熷害鐨勬柟鍚戝彂灞曘��1970
+            骞达紝娉㈤煶747锛堝浘1-4锛夊浣撳鏈烘姇鍏ヨ埅绾挎槸澶у瀷鍖栫殑涓�涓噸瑕佹爣蹇楋紝鑰�1976
+            骞磋嫳銆佹硶鍚堝埗鐨勮秴闊抽�熷鏈衡�滃崗鍜屽彿鈥濓紙鍥�1-5锛夌殑鎶曞叆浣跨敤鍒欐槸姘戣埅鎻愰珮閫熷害鍦ㄧ粡娴庡拰鐜闂涓婁笉澶垚鍔熺殑涓�娆″皾璇曘�傜編鍥戒簬1978骞存斁鏉惧鑸┖鍏徃鐨勭鍒讹紝杩欏鑸┖杩愯緭鐨勫彂灞曡捣鍒颁簡绉瀬鐨勪綔鐢ㄣ�傜敱浜庤埅绌鸿繍杈撴秹鍙婂浗瀹跺畨鍏ㄥ拰鏃呭瀹夊叏锛屽洜鑰屽湪1978骞翠互鍓嶏紝鍚勪釜鍥藉瀵逛簬鑸┖鍏徃鐨勭粡钀ュ疄琛屼弗鏍肩殑鎺у埗锛屼富瑕佹槸瀵圭エ浠峰拰甯傚満鍑嗗叆鐨勬帶鍒讹紝寰堝鍥藉涓嶅厑璁哥浜轰紒涓氱粡钀ヨ埅绌哄叕鍙革紝鍙湁鍥借惀鐨勮埅绌哄叕鍙革紝鏈夌殑鐢氳嚦鎶婅埅绌轰紒涓氫綔涓哄浗瀹舵満鏋勬垨鍐涢槦鐨勪竴閮ㄥ垎銆�
+          </p>
+          <p>
+            闅忕潃鑸┖杩愯緭鐨勮繀閫熷彂灞曪紝浜轰滑缁堜簬璁よ瘑鍒帮紝灏界鑸┖杩愯緭涓氭湁瀹冪壒娈婄殑瀹夊叏闇�瑕侊紝骞朵笖鎶�鏈瘑闆嗭紝椋庨櫓杈冨ぇ锛屼絾浠嶇劧鍙互閫氳繃涓�绯诲垪鐨勫畨鍏ㄦ硶瑙勪娇涔嬫寜甯傚満缁忔祹鐨勬硶鍒欏睍寮�绔炰簤锛岃繖鏍峰彲浠ヤ績浣胯埅绌鸿繍杈撲紒涓氬悎鐞嗗湴閰嶇疆璧勬簮锛岄檷浣庢垚鏈紝淇冭繘浼佷笟鐨勫彂灞曘�傛斁鏉剧鍒剁殑瓒嬪娍鎵╁睍鍒颁簡瑗挎銆佹棩鏈瓑鍦板尯锛屼娇姘戣埅甯傚満杩呴�熷叏鐞冨寲銆傚湪鏀炬澗绠″埗鍒濇湡鍑虹幇鐨勪腑銆佸皬鑸┖鍏徃鐢变簬瑙勬ā鏁堢泭浣庯紝缂轰箯绔炰簤鍔涳紝鎴栧�掗棴銆佹垨琚ぇ鍏徃鍏煎苟銆傜劧鑰岋紝鍦ㄤ笘鐣岃寖鍥村唴锛屽悇澶ц埅绌哄叕鍙镐负浜嗕簤鍙栨洿澶х殑甯傚満浠介锛屾墿灞曡嚜韬殑鑸嚎缃戠粶锛屽垎鍒�氳繃浠g爜鍏变韩绛夐�斿緞缁勬垚鍚勭鎴樼暐鎬ц仈鐩熸潵澧炲己鑷韩鐨勭珵浜夊姏銆傛椂鑷充粖鏃ワ紝姘戣埅宸茬粡鍙戝睍鎴愪负涓�涓法澶х殑鍥介檯鎬ц涓氾紝瀵逛笘鐣岀粡娴庢垨涓�涓浗瀹剁殑缁忔祹鍙戝睍鏈夌潃涓捐冻杞婚噸鐨勫奖鍝嶏紝鍚勫浗鏀垮簻鍜屼紒涓氶兘瀵规皯鑸繘琛屼簡澶ч噺鐨勬姇璧勶紝鎶婂畠浣滀负涓�涓湁宸ㄥぇ娼滃姏鐨勮涓氭潵寮�鎷撳彂灞曘��
+          </p>
+        </div>
+        <ul class="header-left-box">
+          <li class="">路8路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 9椤� -->
+    <div class="page-box" page="9">
+      <div v-if="showPageList.indexOf(9) > -1">
+        <ul class="header-right">
+          <li class="headerRight-Text">椤圭洰涓�銆�姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</li>
+          <span class="headerRight-box"></span>
+        </ul>
+        <div class="bodystyle">
+          <div class="fl fd-c al-c openImgBox mt-20">
+            <img class="img-c" src="../../assets/images/绗�9椤�-13.png" alt="" />
+            <p class="img">鍥�1-4銆�B747鈥�</p>
+          </div>
+          <div class="fl fd-c al-c openImgBox mt-20">
+            <img class="img-c" src="../../assets/images/绗�9椤�-12.png" alt="" />
+            <p class="img">鍥�1-5銆�鍗忓拰椋炴満</p>
+          </div>
+        </div>
+        <ul class="headerRight-Number">
+          <li class="">路9路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 10椤� -->
+    <div class="page-box" page="10">
+      <div v-if="showPageList.indexOf(10) > -1">
+        <ul class="header-left">
+          <img src="../../assets/images/header-left.png" alt="" />
+          <li class="headerText">姘戣埅鏃呭杩愯緭</li>
+        </ul>
+        <div class="bodystyle">
+          <p class="firstLevel-t">鍥涖�佹皯鐢ㄨ埅绌哄叏鐞冩�ф垬鐣ヨ仈鐩�</p>
+          <p>
+            闅忕潃缁忔祹鍏ㄧ悆鍖栫殑鍙戝睍锛屽悇鍥借埅绌哄叕鍙镐箣闂寸殑绔炰簤鏃ョ泭婵�鐑堬紝鍗曚釜鑸┖鍏徃涓嶄粎瓒婃潵瓒婇毦浠ュ紑杈熷競鍦猴紝鐢氳嚦涔熼毦浠ヤ繚浣忓師鏉ョ殑鍦扮洏銆傚洜姝よ埅绌哄叕鍙歌仈鐩熸垚浜嗗綋浠婁笘鐣岃埅绌鸿繍杈撳彂灞曠殑涓�绉嶉噸瑕佸舰寮忋�備簨瀹炰笂锛屼笘鐣岃埅绌哄叕鍙镐箣闂寸殑涓氬姟鑱旂洘骞朵笉鏄竴绉嶆柊鐜拌薄銆傛棭鍦�1993骞达紝缇庡浗瑗垮寳鑸┖鍏徃灏变笌鑽峰叞鐨囧鑸┖鍏徃缁撴垚浜嗕笘鐣岃埅绌虹晫棣栦釜鍏ㄧ悆鎬ц仈鐩熴�傛鍚庯紝缇庡浗鑱斿悎鑸┖鍏徃鍚屽痉鍥芥眽鑾庤埅绌哄叕鍙革紝缇庡浗寰峰皵濉斿叕鍙稿悓鐟炲+銆佽タ鐝墮銆佸ゥ鍦板埄涓夊浗鑸┖鍏徃锛岀編鍥藉ぇ闄嗗叕鍙稿悓鎰忓ぇ鍒╄埅绌哄叕鍙哥瓑閮芥浘鍏堝悗缁撴垚涓氬姟鑱旂洘銆�1997骞�5鏈�14鏃ワ紝寰峰浗姹夎帋鑸┖鍏徃銆佺編鍥借仈鍚堣埅绌哄叕鍙搞�佺憺鍏告柉鍫殑绾崇淮浜氳埅绌哄叕鍙搞�佸姞鎷垮ぇ鑸┖鍏徃鍜屾嘲鍥藉浗闄呰埅绌哄叕鍙哥殑钁d簨闀夸滑鍙堝湪寰峰浗鐨勬硶鍏板厠绂忔満鍦虹缃插崗璁紝缁勬垚浜嗗綋鏃朵笘鐣屼笂鏈�澶х殑鑸┖鍏徃鑱旂洘锛屼粠鑰屼娇澶ц妯$殑璺ㄥ浗鑱旂洘鎴愪负涓栫晫鑸┖鐣屼笟鍔¤仈鐩熺殑鏂拌秼鍔裤��1998骞�3鏈�9鏃ワ紝寰峰浗姹夎帋鑸┖鍏徃鍙堜笌浜氭床鏈�澶х殑鑸┖鍏徃鍙戣〃鑱斿悎澹版槑锛屽甯冪粨鎴愬痉鏃ユ垬鐣ヨ埅绌鸿仈鐩燂紝灏嗗痉銆佹棩鑸嚎寤烘垚杩炴帴娆ф床澶ч檰涓庝笢浜氫箣闂存渶閲嶈鐨勭┖涓氦閫氱嚎銆�1998骞�5鏈�16鏃ワ紝寰峰浗姹夎帋鑸┖鍏徃瀹e竷锛屾柊瑗垮叞鑸┖鍏徃鍜屾境澶у埄浜氬畨鎹疯埅绌哄叕鍙稿皢浜�1999骞磋捣鍔犲叆浜庘�滄槑鏄熻仈鐩熲�濓紝浠庤�屼娇鈥滄槑鏄熻仈鐩熲�濈殑鎴愬憳澧炲姞鍒颁竷瀹惰埅绌哄叕鍙搞�傗�滃瀹囦竴瀹垛�濇鏄湪杩欐牱涓�绉嶅ぇ鑳屾櫙涓嬩骇鐢熺殑銆�
+          </p>
+          <p>
+            鑸┖鍏徃鑱旂洘瀵逛簬閲嶆柊纭畾鑸┖鍏徃鐨勫競鍦哄畾浣嶏紝閫氳繃缁撴垚鑸┖鍏徃闂寸殑涓氬姟鑱旂洘锛屽悇鑸┖鍏徃鑷冲皯鍙互淇冧娇鏃呭鏇村鍦伴�夋嫨缁撶洘浼欎即鑰屼笉鏄珵浜夊鎵嬬殑鑸彮锛屼粠鑰岃揪鍒板墛寮辩珵浜夊鎵嬬殑鐩殑锛涗笌姝ゅ悓鏃讹紝瀹冭繕鍙兘閫氳繃鍒╃敤缁撶洘浼欎即鐨勬湇鍔¤鏂藉拰鎶�鏈敮鎸佹潵鍓婂噺鎴愭湰锛屼互澧炲姞鍒╂鼎銆傜敱浜庡悇鍥借埅绌哄競鍦洪珮搴︿竴浣撳寲锛屽瑙備笂瑕佹眰鍚勮埅绌哄叕鍙稿湪鎶�鏈敮鎸併�佽埅鐝湇鍔°�佹梾瀹㈣浆鏈轰互鍙婃満绁ㄥ嚭鍞瓑鏂归潰鍚戞梾瀹㈡彁渚涗竴浣撳寲鐨勬爣鍑嗗寲瑙勮寖鏈嶅姟锛岃姹傚悇鑸┖鍏徃鍦ㄤ笟鍔℃爣鍑嗙瓑鏂归潰缁熶竴璧锋潵锛屼粠鑰屽舰鎴愪竴涓笘鐣岃埅绌哄競鍦轰笂缁熶竴鐨勬妧鏈爣鍑嗗拰鏈嶅姟鏍囧噯銆傚湪鑸┖甯傚満涓婂瓨鍦ㄧ潃澶氬鑸┖鍏徃骞朵笖甯傚満鏃犻檺缁嗗垎鐨勬儏鍐典笅锛岃鍋氬埌杩欎竴鐐规槸闈炲父鍥伴毦鐨勩�備粠杩欎釜鎰忎箟涓婃潵璇达紝鐩稿浜庤繀閫熸墿澶х殑鍏ㄧ悆鑸┖甯傚満鑰岃█锛岀幇鏈夌殑鑸┖鍏徃瑙勬ā鏄瘮杈冨皬鐨勶紝鍥犺�岃埅绌哄叕鍙镐箣闂寸殑涓氬姟鑱旂洘鑷冲皯鍙互鍦ㄤ竴瀹氱▼搴︿笂瑙e喅杩欎釜闂銆傝嫳鍥借埅绌哄叕鍙哥殑鎬昏鍗冲绉帮細鈥滄垜浠殑椤惧瑕佹眰鍚勮埅绌哄叕鍙镐竴璧峰姫鍔涙彁渚涗笘鐣岃寖鍥村唴鐨勬湇鍔℃爣鍑嗐�傚瀹囦竴瀹跺皢鍋氬埌杩欎竴鐐广�傗��
+          </p>
+        </div>
+        <ul class="header-left-box">
+          <li class="">路10路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 11椤� -->
+    <div class="page-box" page="11">
+      <div v-if="showPageList.indexOf(11) > -1">
+        <ul class="header-right">
+          <li class="headerRight-Text">椤圭洰涓�銆�姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</li>
+          <span class="headerRight-box"></span>
+        </ul>
+        <div class="bodystyle">
+          <p>
+            灞曟湜鏈潵锛屾皯鑸綔涓轰竴涓暣浣撶郴缁熷湪缁撴瀯涓婂拰杩愯惀涓婅缁х画閫傚簲鍏ㄧ悆涓�浣撳寲鐨勮姹傦紝涓嶆柇鍦版敼杩涘拰鍙戝睍锛岀户缁檷浣庝环鏍硷紝淇濊瘉鏃呭鐨勮垝閫傚畨鍏紝鎷撳睍鏇翠赴瀵岀殑鐗硅壊鏈嶅姟锛屽噺灏戝悇绉嶉檺鍒讹紝淇濇姢鐜锛屾皯鑸皢杩庢潵涓�涓洿绻佽崳鏄岀洓鐨勯樁娈点��
+          </p>
+          <div class="fl jc-c">
+            <h1>浠诲姟浜屻��浜嗚В涓浗姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</h1>
+          </div>
+          <p class="firstLevel-t">涓�銆佷腑鍥芥皯鑸殑鍙戝睍姒傚喌</p>
+          <p>
+            1949骞�11鏈�2鏃ワ紝涓浗姘戠敤鑸┖灞�鎴愮珛锛屾彮寮�浜嗘垜鍥芥皯鑸簨涓氬彂灞曠殑鏂扮瘒绔犮�備粠杩欎竴澶╁紑濮嬶紝鏂颁腑鍥芥皯鑸笟杩庣潃鍏卞拰鍥界殑鏈濋槼璧烽锛屼粠鏃犲埌鏈夛紝鐢卞皬鍒板ぇ锛岀敱寮卞埌寮猴紝缁忓巻浜嗕笉骞冲嚒鐨勫彂灞曞巻绋嬨�傜壒鍒槸鍗佷竴灞婁笁涓叏浼氫互鏉ワ紝鎴戝浗姘戣埅浜嬩笟鏃犺鍦ㄨ埅绌鸿繍杈撱�侀�氱敤鑸┖銆佹満缇ゆ洿鏂般�佹満鍦哄缓璁俱�佽埅绾垮竷灞�銆佽埅琛屼繚闅溿�侀琛屽畨鍏ㄣ�佷汉鎵嶅煿璁瓑鏂归潰閮芥寔缁揩閫熷彂灞曪紝鍙栧緱浜嗕妇涓栫灘鐩殑鎴愬氨銆傛皯鑸簨涓氱殑鍙戝睍涓庡浗瀹剁殑缁忔祹鍙戝睍锛屼笌鍏氫腑澶�佸浗鍔¢櫌鐨勭洿鎺ラ瀵煎拰鏀寔瀵嗕笉鍙垎锛屾槸鍑犱唬姘戣埅骞查儴鑱屽伐鍔辩簿鍥炬不銆佸洟缁撳鏂楃殑缁撴灉锛屼负绁栧浗钃濆ぉ浜嬩笟涔﹀啓浜嗗.涓界殑绡囩珷銆�
+          </p>
+          <p class="td-0 video-title mt-20">
+            <svg
+              t="1729840629103"
+              class="icon"
+              viewBox="0 0 1365 1024"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              p-id="34778"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              width="34"
+              height="40"
+            >
+              <path
+                d="M531.117831 720.79677l341.333334-170.641145a42.673047 42.673047 0 0 0 0-76.566472L531.117831 303.20323a42.673047 42.673047 0 0 0-61.814665 38.130103v341.333334a42.673047 42.673047 0 0 0 61.814665 38.130103zM1237.724282 0H127.612523A128.376452 128.376452 0 0 0 0.001736 128.580629V895.317282a128.019142 128.019142 0 0 0 127.610787 128.682718h1110.111759a128.427496 128.427496 0 0 0 127.610787-128.682718V128.580629a127.968097 127.968097 0 0 0-127.610787-128.580629zM255.988974 895.572504a42.46887 42.46887 0 0 1-43.081401 43.081402H128.429232a42.46887 42.46887 0 0 1-43.081402-43.081402V811.094163a42.417826 42.417826 0 0 1 43.081402-43.132446h84.580429a42.417826 42.417826 0 0 1 42.979313 43.132446z m0-341.333333a42.46887 42.46887 0 0 1-43.081401 42.979313H128.429232a42.46887 42.46887 0 0 1-43.081402-43.081402V469.607697a42.366781 42.366781 0 0 1 43.081402-43.081402h84.580429A42.417826 42.417826 0 0 1 255.988974 469.607697z m0-341.333334a42.46887 42.46887 0 0 1-43.081401 43.081402H128.429232a42.46887 42.46887 0 0 1-43.081402-43.081402V128.427496a42.366781 42.366781 0 0 1 43.081402-43.081402h84.580429a42.417826 42.417826 0 0 1 42.979313 43.081402z m768.012762 725.748069H341.335069V85.346094H1023.950691v853.307812z m255.987238-43.081402a42.46887 42.46887 0 0 1-43.132446 43.081402h-84.529385a42.417826 42.417826 0 0 1-43.030357-43.081402V811.094163a42.46887 42.46887 0 0 1 43.081401-43.132446h84.58043a42.46887 42.46887 0 0 1 43.030357 43.132446z m0-341.333333a42.46887 42.46887 0 0 1-43.132446 43.081401h-84.529385a42.417826 42.417826 0 0 1-43.030357-43.081401V469.607697a42.417826 42.417826 0 0 1 43.081401-43.081402h84.58043a42.417826 42.417826 0 0 1 43.030357 43.081402z m0-341.333334a42.46887 42.46887 0 0 1-43.132446 43.081402h-84.529385a42.417826 42.417826 0 0 1-43.030357-43.081402V128.427496a42.417826 42.417826 0 0 1 43.081401-43.081402h84.58043a42.417826 42.417826 0 0 1 43.030357 43.081402z"
+                fill="#1c9e3a"
+                p-id="34779"
+              ></path>
+            </svg>
+            <span>瑙嗛寰</span>
+          </p>
+          <div class="video-box">
+            <p class="center text td-0">
+              <video
+                :src="videoPathOne"
+                webkit-playsinline="true"
+                x-webkit-airplay="true"
+                playsinline="true"
+                x5-video-orientation="h5"
+                x5-video-player-fullscreen="true"
+                x5-playsinline=""
+                controls
+                controlslist="nodownload"
+                class="w100 video"
+              ></video>
+            </p>
+            <p class="center videoname">
+              <span>01 涓浗姘戠敤鑸┖杩愯緭鐨勫彂灞�</span>
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="
+                  chapterData.isCollectVideoFive ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'
+                "
+                placement="top-start"
+              >
+                <img
+                  :src="
+                    collectResourceList.findIndex(
+                      (item) => item.id == '20915be5a2980251b3294f657fec5345'
+                    ) > -1
+                      ? collectCheck
+                      : collectImg
+                  "
+                  alt=""
+                  class="collect-btn"
+                  @click="handleCollect('video-01')"
+                />
+              </el-tooltip>
+            </p>
+          </div>
+          <p class="firstLevel-t">浜屻�佷腑鍥芥皯鑸殑鍙戝睍闃舵</p>
+          <p>涓浗姘戣埅鍙戝睍鑷充粖涓昏缁忓巻浜嗗洓涓樁娈碉細</p>
+          <p class="Secondary-t">锛堜竴锛夌涓�闃舵锛�1949~1978锛�</p>
+          <p>
+            1949骞�11鏈�2鏃ワ紝涓叡涓ぎ鏀挎不灞�浼氳鍐冲畾锛屽湪浜烘皯闈╁懡鍐涗簨濮斿憳浼氫笅璁炬皯鐢ㄨ埅绌哄眬锛屽彈绌哄啗鎸囧銆�11鏈�9
+            鏃ワ紝涓浗鑸┖鍏徃銆佷腑澶埅绌哄叕鍙告�荤粡鐞嗗垬鏁疁銆侀檲鍗撴灄鐜囦袱鍏徃鍦ㄩ娓殑鍛樺伐鍏夎崳璧蜂箟锛屽苟鐜囬12鏋堕鏈哄洖鍒板寳浜�佸ぉ娲ワ紝涓烘柊涓浗姘戣埅寤鸿鎻愪緵浜嗕竴瀹氱殑鐗╄川鍜屾妧鏈姏閲忋��1950骞达紝鏂颁腑鍥芥皯鑸垵鍒涙椂锛屼粎鏈�30澶氭灦灏忓瀷椋炴満锛屽勾鏃呭杩愯緭閲忎粎1涓囦汉锛岃繍杈撴�诲懆杞噺浠�157涓囧惃鍏噷銆�
+          </p>
+        </div>
+        <ul class="headerRight-Number">
+          <li class="">路11路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 12椤� -->
+    <div class="page-box" page="12">
+      <div v-if="showPageList.indexOf(12) > -1">
+        <ul class="header-left">
+          <img src="../../assets/images/header-left.png" alt="" />
+          <li class="headerText">姘戣埅鏃呭杩愯緭</li>
+        </ul>
+        <div class="bodystyle">
+          <p>
+            1958骞�2鏈�27鏃ワ紝鍥藉姟闄㈠喅瀹氾紝涓浗姘戠敤鑸┖灞�鑷湰鏃ヨ捣鍒掑綊浜ら�氶儴棰嗗銆�1958骞�3鏈�19鏃ワ紝鍏ㄥ浗浜哄ぇ甯稿浼氱95娆′細璁壒鍑嗕腑鍥芥皯鐢ㄨ埅绌哄眬鏀逛负浜ら�氶儴鐨勯儴灞炲眬銆�
+          </p>
+          <p>
+            1960骞�11鏈�17鏃ワ紝鍥藉姟闄㈢紪鍒跺鍛樹細璁ㄨ閫氳繃锛屽喅瀹氬皢涓浗姘戠敤鑸┖灞�鏀圭О鈥滀氦閫氶儴姘戠敤鑸┖鎬诲眬鈥濓紝涓洪儴灞炰竴绾х鐞嗗叏鍥芥皯鐢ㄨ埅绌轰簨涓氱殑缁煎悎鎬ф�诲眬锛岃礋璐g粡钀ョ鐞嗚繍杈撹埅绌哄拰涓撲笟鑸┖锛岀洿鎺ラ瀵煎湴鍖烘皯鐢ㄨ埅绌虹鐞嗗眬鐨勫伐浣溿��
+          </p>
+          <p>
+            1962骞�4鏈�13鏃ワ紝绗簩灞婂叏鍥戒汉姘戜唬琛ㄥぇ浼氬父鍔″鍛樹細绗�53娆′細璁喅瀹氾紝姘戣埅灞�鏇村悕涓衡�滀腑鍥芥皯鐢ㄨ埅绌烘�诲眬鈥濄��
+          </p>
+          <p>
+            1962骞�4鏈�15鏃ワ紝涓ぎ鍐冲畾灏嗘皯鐢ㄨ埅绌烘�诲眬鐢变氦閫氶儴灞炴敼涓哄浗鍔¢櫌鐩村睘灞�锛屽叾涓氬姟宸ヤ綔銆佸厷鏀垮伐浣溿�佸共閮ㄤ汉浜嬪伐浣滅瓑鍧囩洿褰掔┖鍐涜礋璐g鐞嗐�傝繖涓�鏃舵湡锛屾皯鑸敱浜庨瀵间綋鍒跺嚑缁忔敼鍙橈紝鑸┖杩愯緭鍙戝睍鍙楁斂娌汇�佺粡娴庡奖鍝嶈緝澶с��1978
+            骞达紝鑸┖鏃呭杩愯緭閲忎粎涓�231涓囦汉娆★紝杩愯緭鎬诲懆杞噺3浜垮惃鍏噷銆�
+          </p>
+          <div class="pdf-box">
+            <div class="pdf-title">
+              <p class="pdf-title-name">
+                <img src="../../assets/images/pdfLogo.svg" alt="" />
+                <span>鎷撳睍鐭ヨ瘑</span>
+              </p>
+              <p class="pdf-title-img">
+                <span @click="toUrl(2)"> {{ chapter001.pdfMd5[2].name }}</span>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="
+                    chapterData.isCollectVideoTwo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'
+                  "
+                  placement="top-start"
+                >
+                  <img
+                    :src="
+                      collectResourceList.findIndex(
+                        (item) => item.id == 'ac8fc00ea84cb3504a5ad0c7c2025652'
+                      ) > -1
+                        ? collectCheck
+                        : collectImg
+                    "
+                    alt=""
+                    class="collect-btn"
+                    @click="handleCollect('pdf-02')"
+                  />
+                </el-tooltip>
+              </p>
+            </div>
+          </div>
+          <div class="pdf-box">
+            <div class="pdf-title">
+              <p class="pdf-title-name">
+                <img src="../../assets/images/pdfLogo.svg" alt="" />
+                <span>鎷撳睍鐭ヨ瘑</span>
+              </p>
+              <p class="pdf-title-img">
+                <span @click="toUrl(3)"> {{ chapter001.pdfMd5[3].name }}</span>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="
+                    chapterData.isCollectVideoThree ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'
+                  "
+                  placement="top-start"
+                >
+                  <img
+                    :src="
+                      collectResourceList.findIndex(
+                        (item) => item.id == 'df538ab7d44f8c73b7386a2584b84a68'
+                      ) > -1
+                        ? collectCheck
+                        : collectImg
+                    "
+                    alt=""
+                    class="collect-btn"
+                    @click="handleCollect('pdf-03')"
+                  />
+                </el-tooltip>
+              </p>
+            </div>
+          </div>
+          <p class="Secondary-t">锛堜簩锛夌浜岄樁娈碉紙1978~1987锛�</p>
+          <p>
+            1978骞�10鏈�9鏃ワ紝閭撳皬骞冲悓蹇楁寚绀烘皯鑸鐢ㄧ粡娴庤鐐圭鐞嗐��1980骞�2鏈�14鏃ワ紝閭撳皬骞冲悓蹇楁寚鍑猴細鈥滄皯鑸竴瀹氳浼佷笟鍖栥�傗�濆悓骞�3鏈�5鏃ワ紝涓浗鏀垮簻鍐冲畾姘戣埅鑴辩鍐涢槦寤哄埗锛屾妸涓浗姘戣埅灞�浠庨毝灞炰簬绌哄啗鏀逛负鍥藉姟闄㈢洿灞炴満鏋勶紝瀹炶浼佷笟鍖栫鐞嗐�傝繖鏈熼棿涓浗姘戣埅灞�鏄斂浼佸悎涓�锛屾棦鏄富绠℃皯鑸簨鍔$殑鏀垮簻閮ㄩ棬锛屽張鏄互鈥滀腑鍥芥皯鑸紙CAAC锛夆�濆悕涔夌洿鎺ョ粡钀ヨ埅绌鸿繍杈撱�侀�氱敤鑸┖涓氬姟鐨勫叏鍥芥�т紒涓氾紝涓嬭鍖椾含銆佷笂娴枫�佸箍宸炪�佹垚閮姐�佸叞宸烇紙鍚庤縼鑷宠タ瀹夛級銆佹矆闃冲叚涓湴鍖虹鐞嗗眬銆�1980骞村叏鍥芥皯鑸彧鏈�140鏋惰繍杈撻鏈猴紝涓斿鏁版槸20涓栫邯50骞翠唬鎴�40
+            骞翠唬鐢熶骇鍒堕�犵殑鑻忓紡浼婂皵14銆侀噷浜屽瀷椋炴満锛岃浇瀹㈤噺浠�20澶氫汉鎴�40浜猴紝杞藉閲�100浜轰互涓婄殑涓ぇ鍨嬮鏈哄彧鏈�
+            17鏋讹紱鏈哄満鍙湁79涓��1980骞达紝鎴戝浗姘戣埅鍏ㄥ勾鏃呭杩愯緭閲忎粎343涓囦汉娆★紱鍏ㄥ勾杩愯緭鎬诲懆杞噺4.29浜垮惃鍏噷锛屽眳鏂板姞鍧°�佸嵃搴︺�佽彶寰嬪銆佸嵃搴﹀凹瑗夸簹绛夊浗涔嬪悗锛屽垪涓栫晫姘戣埅绗�35浣嶃��
+          </p>
+        </div>
+        <ul class="header-left-box">
+          <li class="">路12路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 13椤� -->
+    <div class="page-box" page="13">
+      <div v-if="showPageList.indexOf(13) > -1">
+        <ul class="header-right">
+          <li class="headerRight-Text">椤圭洰涓�銆�姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</li>
+          <span class="headerRight-box"></span>
+        </ul>
+        <div class="bodystyle">
+          <p>
+            1985骞�1鏈�1鏃ワ紝涓浗姘戠敤鑸┖鏂扮枂缁村惥灏旇嚜娌诲尯绠$悊灞�鏇村悕涓轰腑鍥芥皯鐢ㄨ埅绌轰箤椴佹湪榻愮鐞嗗眬锛屾敼鐢辨皯鑸眬鐩存帴棰嗗锛岀粡鍥藉姟闄㈡壒鍑嗭紝鐢辨皯鑸眬鍜屾柊鐤嗙淮鍚惧皵鑷不鍖轰汉姘戞斂搴滆仈鍚堢粍寤虹殑鏂扮枂鑸┖鍏徃浜庡悓鏃ュ湪涔岄瞾鏈ㄩ綈姝e紡鎴愮珛銆備箤椴佹湪榻愮鐞嗗眬鍜屾柊鐤嗚埅绌哄叕鍙告槸涓ゅ潡鐗屽瓙涓�濂楁満鏋勶紝灞炰袱浣嶄竴浣撶殑缁勭粐褰㈠紡銆�
+          </p>
+          <p class="Secondary-t">锛堜笁锛夌涓夐樁娈碉紙1987~2002锛�</p>
+          <p>
+            1987骞达紝涓浗鏀垮簻鍐冲畾瀵规皯鑸笟杩涜浠ヨ埅绌哄叕鍙镐笌鏈哄満鍒嗚涓虹壒寰佺殑浣撳埗鏀归潻銆備富瑕佸唴瀹规槸灏嗗師姘戣埅鍖椾含銆佷笂娴枫�佸箍宸炪�佽タ瀹夈�佹垚閮姐�佹矆闃冲叚涓湴鍖虹鐞嗗眬鐨勮埅绌鸿繍杈撳拰閫氱敤鑸┖鐩稿叧涓氬姟銆佽祫浜у拰浜哄憳鍒嗙鍑烘潵锛岀粍寤轰簡鍏釜鍥藉楠ㄥ共鑸┖鍏徃锛屽疄琛岃嚜涓荤粡钀ャ�佽嚜璐熺泩浜忋�佸钩绛夌珵浜夈�傝繖鍏釜鍥藉楠ㄥ共鑸┖鍏徃鏄細涓浗鍥介檯鑸┖鍏徃銆佷腑鍥戒笢鏂硅埅绌哄叕鍙搞�佷腑鍥藉崡鏂硅埅绌哄叕鍙搞�佷腑鍥借タ鍗楄埅绌哄叕鍙搞�佷腑鍥借タ鍖楄埅绌哄叕鍙搞�佷腑鍥藉寳鏂硅埅绌哄叕鍙搞�傛澶栵紝浠ョ粡钀ラ�氱敤鑸┖涓氬姟涓轰富骞跺吋钀ヨ埅绌鸿繍杈撲笟鍔$殑涓浗閫氱敤鑸┖鍏徃涔熶簬1989骞�7鏈堟垚绔嬨��
+          </p>
+          <p>
+            鍦ㄧ粍寤洪骞茶埅绌哄叕鍙哥殑鍚屾椂锛屽湪鍘熸皯鑸寳浜鐞嗗眬銆佷笂娴风鐞嗗眬銆佸箍宸炵鐞嗗眬銆佹垚閮界鐞嗗眬銆佽タ瀹夌鐞嗗眬鍜屾矆闃崇鐞嗗眬鎵�鍦ㄥ湴鐨勬満鍦洪儴鍒嗗熀纭�涓婏紝缁勫缓浜嗘皯鑸崕鍖椼�佸崕涓溿�佷腑鍗椼�佽タ鍗椼�佽タ鍖楀拰涓滃寳鍏釜鍦板尯绠$悊灞�浠ュ強鍖椾含棣栭兘鏈哄満銆佷笂娴疯櫣妗ユ満鍦恒�佸箍宸炵櫧浜戞満鍦恒�佹垚閮藉弻娴佹満鍦恒�佽タ瀹夎タ鍏虫満鍦猴紙鐜板凡杩佽嚦鍜搁槼锛屾敼涓鸿タ瀹夊捀闃虫満鍦猴級鍜屾矆闃虫浠欐満鍦恒�傚叚涓湴鍖虹鐞嗗眬鏃㈡槸绠$悊鍦板尯姘戣埅浜嬪姟鐨勬斂搴滈儴闂紝鍙堟槸浼佷笟锛岄瀵肩鐞嗗悇姘戣埅鐪侊紙鍖恒�佸競锛夊眬鍜屾満鍦恒��
+          </p>
+          <p>
+            鑸┖杩愯緭鏈嶅姟淇濋殰绯荤粺涔熸寜涓撲笟鍖栧垎宸ョ殑瑕佹眰杩涜浜嗙浉搴旂殑鏀归潻銆�1990
+            骞达紝鍦ㄥ師姘戣埅鍚勭骇渚涙补閮ㄩ棬鐨勫熀纭�涓婄粍寤轰簡涓撻棬浠庝簨鑸┖娌规枡渚涘簲淇濋殰涓氬姟鐨勪腑鍥借埅绌烘补鏂欐�诲叕鍙革紝璇ュ叕鍙搁�氳繃璁惧湪鍚勬満鍦虹殑鍒嗘敮鏈烘瀯涓鸿埅绌哄叕鍙告彁渚涙补鏂欎緵搴斻�傚睘浜庤繖绫绘�ц川鐨勫崟浣嶈繕鏈変粠浜嬭埅绌哄櫒鏉愶紙椋炴満銆佸彂鍔ㄦ満绛夛級杩涘嚭鍙d笟鍔$殑涓浗鑸┖鍣ㄦ潗鍏徃锛屼粠浜嬪叏鍥借绠楁満璁㈢エ閿�鍞郴缁熺鐞嗕笌寮�鍙戠殑璁$畻鏈轰俊鎭腑蹇冿紝涓哄悇鑸┖鍏徃鎻愪緵鑸┖杩愯緭鍥介檯缁撶畻鏈嶅姟鐨勮埅绌虹粨绠椾腑蹇冧互鍙婇鏈虹淮淇叕鍙搞�佽埅绌洪鍝佸叕鍙哥瓑锛屽叏姘戣埅鏀夸紒鍒嗗紑鐨勬柊鐨勭鐞嗕綋鍒跺拰鏍煎眬閫愭褰㈡垚銆�
+          </p>
+          <p>
+            1993骞�4鏈�19鏃ワ紝涓浗姘戠敤鑸┖灞�鏀圭О涓浗姘戠敤鑸┖鎬诲眬锛屽睘鍥藉姟闄㈢洿灞炴満鏋勩�傚悓骞�12鏈�20鏃ワ紝涓浗姘戠敤鑸┖鎬诲眬鐨勬満鏋勮鏍肩敱鍓儴绾ц皟鏁翠负姝i儴绾с��
+          </p>
+        </div>
+        <ul class="headerRight-Number">
+          <li class="">路13路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 14椤� -->
+    <div class="page-box" page="14">
+      <div v-if="showPageList.indexOf(14) > -1">
+        <ul class="header-left">
+          <img src="../../assets/images/header-left.png" alt="" />
+          <li class="headerText">姘戣埅鏃呭杩愯緭</li>
+        </ul>
+        <div class="bodystyle">
+          <p>
+            20澶氬勾涓紝鎴戝浗姘戣埅杩愯緭鎬诲懆杞噺銆佹梾瀹㈣繍杈撻噺鍜岃揣鐗╄繍杈撻噺骞村潎澧為暱鍒嗗埆杈�18%銆�16%鍜�16%锛岄珮鍑轰笘鐣屽钩鍧囨按骞充袱鍊嶅銆�2002骞达紝姘戣埅琛屼笟瀹屾垚杩愯緭鎬诲懆杞噺165浜垮惃鍏噷銆佹梾瀹㈣繍杈撻噺8594涓囦汉娆°�佽揣閭繍杈撻噺202涓囧惃锛屽浗闄呮帓浣嶈繘涓�姝ヤ笂鍗囷紝鎴愪负浠や汉鐬╃洰鐨勬皯鑸ぇ鍥姐��
+          </p>
+          <p class="Secondary-t">锛堝洓锛夌鍥涢樁娈碉紙2002~浠婏級</p>
+          <p>
+            2002骞�3鏈堬紝涓浗鏀垮簻鍐冲畾瀵逛腑鍥芥皯鑸笟鍐嶆杩涜閲嶇粍銆備富瑕佸唴瀹规湁锛氶鍏堟槸鑸┖鍏徃涓庢湇鍔′繚闅滀紒涓氱殑鑱斿悎閲嶇粍銆傛皯鑸�诲眬鐩村睘鐨勮埅绌哄叕鍙稿強鏈嶅姟淇濋殰浼佷笟鍚堝苟鍚庯紝浜�2002骞�10鏈�11鏃ユ寮忔寕鐗屾垚绔嬶紝缁勬垚涓哄叚澶ч泦鍥㈠叕鍙革紝鍒嗗埆鏄細涓浗鑸┖闆嗗洟鍏徃銆佷笢鏂硅埅绌洪泦鍥㈠叕鍙搞�佸崡鏂硅埅绌洪泦鍥㈠叕鍙搞�佷腑鍥芥皯鑸俊鎭泦鍥㈠叕鍙搞�佷腑鍥借埅绌烘补鏂欓泦鍥㈠叕鍙搞�佷腑鍥借埅绌哄櫒鏉愯繘鍑哄彛闆嗗洟鍏徃銆傛垚绔嬪悗鐨勯泦鍥㈠叕鍙镐笌姘戣埅鎬诲眬鑴遍挬锛屼氦鐢变腑澶鐞嗐��
+          </p>
+          <p>
+            鍏舵鏄皯鑸斂搴滅洃绠℃満鏋勬敼闈┿�傛皯鑸�诲眬涓嬪睘涓冧釜鍦板尯绠$悊灞�锛堝崕鍖楀湴鍖虹鐞嗗眬銆佷笢鍖楀湴鍖虹鐞嗗眬銆佸崕涓滃湴鍖虹鐞嗗眬銆佷腑鍗楀湴鍖虹鐞嗗眬銆佽タ鍗楀湴鍖虹鐞嗗眬銆佽タ鍖楀湴鍖虹鐞嗗眬銆佹柊鐤嗙鐞嗗眬锛夊拰26涓渷绾у畨鍏ㄧ洃鐫g鐞嗗姙鍏锛堝ぉ娲ャ�佹渤鍖椼�佸北瑗裤�佸唴钂欏彜銆佸ぇ杩炪�佸悏鏋椼�侀粦榫欐睙銆佹睙鑻忋�佹禉姹熴�佸畨寰姐�佺寤恒�佹睙瑗裤�佸北涓溿�侀潚宀涖�佹渤鍗椼�佹箹鍖椼�佹箹鍗椼�佹捣鍗椼�佸箍瑗裤�佹繁鍦炽�侀噸搴嗐�佽吹宸炪�佷簯鍗椼�佺敇鑲冦�侀潚娴枫�佸畞澶忥級锛屽姘戣埅浜嬪姟瀹炴柦鐩戠銆�
+          </p>
+          <p>
+            鏈�鍚庢槸鏈哄満瀹炶灞炲湴绠$悊銆傛寜鐓ф斂浼佸垎寮�銆佸睘鍦扮鐞嗙殑鍘熷垯锛屽93涓満鍦鸿繘琛屼簡灞炲湴鍖栫鐞嗘敼闈╋紝姘戣埅鎬诲眬鐩存帴绠$悊鐨勬満鍦轰笅鏀炬墍鍦ㄧ渷锛堝尯銆佸競锛夌鐞嗭紝鐩稿叧璧勪骇銆佽礋鍊哄拰浜哄憳涓�骞跺垝杞紱姘戣埅鎬诲眬涓庡湴鏂规斂搴滆仈鍚堢鐞嗙殑姘戠敤鏈哄満鍜屽啗姘戝悎鐢ㄦ満鍦猴紝灞炴皯鑸�诲眬绠$悊鐨勮祫浜с�佽礋鍊哄強鐩稿叧浜哄憳涓�骞跺垝杞墍鍦ㄧ渷锛堝尯銆佸競锛夌鐞嗐�傞閮芥満鍦恒�佽タ钘忚嚜娌诲尯鍖哄唴鐨勬皯鐢ㄦ満鍦虹户缁敱姘戣埅鎬诲眬绠$悊銆�2004骞�7鏈�8鏃ワ紝闅忕潃鐢樿們鏈哄満绉讳氦鍦版柟锛屾満鍦哄睘鍦板寲绠$悊鏀归潻鍏ㄩ潰瀹屾垚锛屼篃鏍囧織鐫�姘戣埅浣撳埗鏀归潻鍏ㄩ潰瀹屾垚銆�
+          </p>
+          <p>
+            2004骞�10鏈�2鏃ワ紝鍦ㄥ浗闄呮皯鑸粍缁囩涓夊崄浜斿眾澶т細涓婏紝涓浗浠ラ珮绁ㄦ暟褰撻�夎缁勭粐涓�绫荤悊浜嬪浗銆�
+          </p>
+          <p>
+            2005骞达紝鎴戝浗瀹氭湡鑸彮杩愯緭鎬诲懆杞噺鍦ㄥ浗闄呮皯鑸粍缁囩紨绾﹀浗涓殑鎺掑悕锛岀敱1978骞寸殑绗笁鍗佷竷浣嶄笂鍗囪嚦绗簩浣嶃��
+          </p>
+        </div>
+        <ul class="header-left-box">
+          <li class="">路14路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 15椤� -->
+    <div class="page-box" page="15">
+      <div v-if="showPageList.indexOf(15) > -1">
+        <ul class="header-right">
+          <li class="headerRight-Text">椤圭洰涓�銆�姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</li>
+          <span class="headerRight-box"></span>
+        </ul>
+        <div class="bodystyle">
+          <p>
+            2008骞�3鏈堬紝涓浗姘戠敤鑸┖鎬诲眬鏇村悕涓轰腑鍥芥皯鐢ㄨ埅绌哄眬锛屽綊浜ら�氳繍杈撻儴绠$悊銆�
+          </p>
+          <p>
+            鎴嚦2019骞村勾搴曪紝鍏ㄨ涓氬畬鎴愯繍杈撴�诲懆杞噺1293.25浜垮惃鍏噷锛屽叾涓梾瀹㈠懆杞噺11
+            705.30浜夸汉鍏噷锛岃揣閭懆杞噺263.20浜垮惃鍏噷锛屽垎鍒瘮涓婂勾澧炲姞7.2%銆�9.3%鍜�0.3%銆傛垜鍥藉叡鏈夊畾鏈熻埅鐝埅绾�5521鏉★紝鍥藉唴閫氳埅鍩庡競234涓�(涓嶅惈棣欐腐銆佹境闂ㄣ�佸彴婀�)锛屽浗闄呭畾鏈熻埅鐝�氳埅65涓浗瀹剁殑167涓煄甯傦紝鍥藉唴鑸┖鍏徃瀹氭湡鑸彮浠�30涓唴鍦板煄甯傞�氳埅棣欐腐锛屼粠19涓唴鍦板煄甯傞�氳埅婢抽棬锛屽ぇ闄嗚埅绌哄叕鍙镐粠49涓ぇ闄嗗煄甯傞�氳埅鍙版咕鍦板尯銆傚叏姘戣埅鍦ㄥ唽椋炴満鎬绘灦鏁�3818鏋讹紝姣斾笂涓�骞村鍔�179鏋躲�傚叡鏈夐璇佽繍杈撴満鍦�238涓紝姣斾笂骞村鍔�3涓��2019骞村寳浜閮芥満鍦哄畬鎴愭梾瀹㈠悶鍚愰噺1.00浜夸汉娆★紝杩炵画10骞寸ǔ灞呬笘鐣岀浜岋紱涓婃捣娴︿笢鍥介檯鏈哄満瀹屾垚璐ч偖鍚炲悙閲�363.42涓囧惃锛岃繛缁�12骞翠綅灞呬笘鐣岀涓夈��
+          </p>
+          <p>
+            鎴戝浗宸茬粡褰㈡垚浜嗗浗鍐呭洓閫氬叓杈俱�佸浗闄呰繛鎺ヤ笘鐣屼富瑕佸浗瀹跺拰鍦板尯鐨勮埅绌鸿繍杈撶綉缁滐紝鏈嶅姟璐ㄩ噺鍜屾湇鍔℃按骞充篃鏈変簡寰堝ぇ鎻愰珮銆�2019骞村害SKYTRAX涓栫晫鍗佷匠鏈哄満鎺掑悕涓紝棣欐腐鍥介檯鏈哄満鍐嶆姒滀笂鏈夊悕銆�2019骞存捣鍗楄埅绌轰綔涓轰腑鍥藉唴鍦板敮涓�涓�瀹禨KYTRAX浜旀槦鑸┖鍏徃锛岀涔濇鑾疯瘎SKYTRAX鐨勪簲鏄熻埅绌哄叕鍙歌崳瑾夈��
+          </p>
+          <p class="mb-30">
+            鏂颁腑鍥芥皯鑸殑鍙戝睍鍘嗙▼璇佹槑锛氬彂灞曟墠鏄‖閬撶悊銆備腑鍥芥皯鑸瀹炵幇浠庢皯鑸ぇ鍥藉埌姘戣埅寮哄浗鐨勮法瓒婏紝蹇呴』浠ユ寔缁畨鍏ㄤ负鍓嶆彁锛屼互鎻愬崌鍙戝睍璐ㄩ噺涓烘牳蹇冿紝浠ユ敼闈╁垱鏂颁负鍔ㄥ姏锛屼互纭珛姘戣埅涓氬湪鍥藉鍙戝睍涓殑鎴樼暐鍦颁綅涓虹獊鐮村彛锛屽姞蹇缓璁炬皯鑸熀纭�璁炬柦缃戠粶锛屽姞寮虹粺绛瑰崗璋冿紝鐞嗛『浣撳埗鏈哄埗锛屽姫鍔涙瀯寤哄叿鏈変腑鍥界壒鑹茬殑鐜颁唬姘戠敤鑸┖浣撶郴锛屽叏闈㈡彁鍗囨垜鍥芥皯鑸笟缁煎悎鍥介檯绔炰簤鍔涳紝淇冭繘鍥藉鐜颁唬缁煎悎浜ら�氳繍杈撲綋绯荤殑杩涗竴姝ュ畬鍠勶紝涓虹粡娴庣ぞ浼氬張濂藉張蹇彂灞曟湇鍔°��
+          </p>
+          <div class="pdf-box">
+            <div class="pdf-title">
+              <p class="pdf-title-name">
+                <img src="../../assets/images/pdfLogo.svg" alt="" />
+                <span>鎷撳睍鐭ヨ瘑</span>
+              </p>
+              <p class="pdf-title-img">
+                <span @click="toUrl(4)"> {{ chapter001.pdfMd5[4].name }}</span>
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  :content="
+                    chapterData.isCollectVideoFour ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'
+                  "
+                  placement="top-start"
+                >
+                  <img
+                    :src="
+                      collectResourceList.findIndex(
+                        (item) => item.id == '9bfa634653b1c2a51aff13cedf1ccd2d'
+                      ) > -1
+                        ? collectCheck
+                        : collectImg
+                    "
+                    alt=""
+                    class="collect-btn"
+                    @click="handleCollect('pdf-04')"
+                  />
+                </el-tooltip>
+              </p>
+            </div>
+          </div>
+          <div class="Unit-title-box">
+            <p class="box-title">椤圭洰灏忕粨</p>
+            <p class="fm-kt">
+              1.涓栫晫姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍缁忚繃浜嗚悓鑺芥椂鏈熴�佸ぇ鍙戝睍鏃舵湡銆佸叏鐞冨寲鍙婂ぇ浼楀寲鏃舵湡锛岀洰鍓嶆鍦ㄨ繘琛岀殑鏄叏鐞冩垬鐣ユ�ц仈鐩燂紝骞跺舰鎴愪簡涓嶅悓鐨勮仈鐩熷疄浣撱��
+            </p>
+          </div>
+        </div>
+        <ul class="headerRight-Number">
+          <li class="">路15路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 16椤� -->
+    <div class="page-box" page="16">
+      <div v-if="showPageList.indexOf(16) > -1">
+        <ul class="header-left">
+          <img src="../../assets/images/header-left.png" alt="" />
+          <li class="headerText">姘戣埅鏃呭杩愯緭</li>
+        </ul>
+        <div class="bodystyle">
+          <div class="Unit-title-box">
+            <p class="fm-kt">
+              2.
+              涓浗姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍缁忓巻浜嗘棫涓浗鏃舵湡銆佽鍒掔粡娴庢椂鏈熴�佹敼闈╁紑鏀炬椂鏈熴�佷綋鍒舵敼闈╂椂鏈熶互鍙婅仈鍚堥噸缁勶紝鐩墠姝g敱姘戣埅澶у浗鍚戞皯鑸己鍥借繄杩涖��
+            </p>
+          </div>
+          <div class="Unit-title-box">
+            <p class="box-title">鎬濊�冧笌缁冧範</p>
+            <p class="fm-kt">1. 绠�杩颁笘鐣屾皯鐢ㄨ埅绌鸿繍杈撲笟鐨勫彂灞曘��</p>
+            <textarea
+              v-model="videoQuestionData.one"
+              placeholder="璇疯緭鍏ュ唴瀹�"
+              rows="5"
+              style="max-width: 90%; width: 90%"
+              class="fz-16 fm-son textarea-question ml-40"
+              @change="saveVideoQuestionData"
+            ></textarea>
+            <p class="fm-kt">2. 绠�杩颁腑鍥芥皯鐢ㄨ埅绌鸿繍杈撲笟鐨勫彂灞曘��</p>
+            <textarea
+              v-model="videoQuestionData.two"
+              placeholder="璇疯緭鍏ュ唴瀹�"
+              rows="5"
+              style="max-width: 90%; width: 90%"
+              class="fz-16 fm-son textarea-question ml-40"
+              @change="saveVideoQuestionData"
+            ></textarea>
+            <p class="fm-kt">
+              3. 姣旇緝涓浗姘戣埅浣撳埗鏀归潻鍓嶅悗锛屼腑鍥芥皯鐢ㄨ埅绌烘�诲眬鑱岃兘鐨勫彉鍖栥��
+            </p>
+            <textarea
+              v-model="videoQuestionData.three"
+              placeholder="璇疯緭鍏ュ唴瀹�"
+              rows="5"
+              style="max-width: 90%; width: 90%"
+              class="fz-16 fm-son textarea-question ml-40"
+              @change="saveVideoQuestionData"
+            ></textarea>
+            <p class="fm-kt">
+              4. 鏌ヨ祫鏂欑粨鍚堟渚嬶紝浜嗚В涓浗姘戣埅鍙戝睍涓殑鈥滀袱鑸捣涔夆�濈殑鍘嗗彶銆�
+            </p>
+            <textarea
+              v-model="videoQuestionData.four"
+              placeholder="璇疯緭鍏ュ唴瀹�"
+              rows="5"
+              style="max-width: 90%; width: 90%"
+              class="fz-16 fm-son textarea-question ml-40"
+              @change="saveVideoQuestionData"
+            ></textarea>
+            <p class="fm-kt">5. 姣旇緝涓浗涓庝笘鐣岃埅绌鸿繍杈撶殑鍙戝睍銆�</p>
+            <textarea
+              v-model="videoQuestionData.five"
+              placeholder="璇疯緭鍏ュ唴瀹�"
+              rows="5"
+              style="max-width: 90%; width: 90%"
+              class="fz-16 fm-son textarea-question ml-40"
+              @change="saveVideoQuestionData"
+            ></textarea>
+          </div>
+          <div class="Unit-title-box">
+            <p class="box-title">瀛︿範鏁堟灉鑷祴</p>
+            <p class="dialogQuestion" @click="openQuestion(1)">
+              <span class="td-0">銆愭湰鑺傛祴璇曘��</span>
+              <span class="td-0">
+                <svg
+                  t="1736157124915"
+                  class="icon"
+                  viewBox="0 0 1024 1024"
+                  version="1.1"
+                  xmlns="http://www.w3.org/2000/svg"
+                  p-id="2536"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="28"
+                  height="28"
+                >
+                  <path
+                    d="M798.72 76.8H947.2v145.92h51.2V25.6h-199.68zM947.2 798.72v145.92h-148.48v51.2H998.4v-197.12zM66.56 222.72V76.8h148.48V25.6H12.8v197.12zM215.04 944.64H66.56v-145.92H12.8v197.12h202.24z"
+                    fill="#fff"
+                    p-id="2537"
+                  ></path>
+                  <path
+                    d="M826.88 522.24L512 207.36c0-2.56-2.56-2.56-7.68-2.56-2.56 0-5.12 0-7.68 2.56L184.32 524.8c-2.56 2.56-5.12 7.68-2.56 10.24 2.56 5.12 5.12 7.68 10.24 7.68h58.88V793.6c0 12.8 10.24 25.6 25.6 25.6 12.8 0 25.6-10.24 25.6-25.6V504.32c0-5.12-5.12-10.24-10.24-10.24h-2.56l217.6-220.16 220.16 222.72c-5.12 0-10.24 5.12-10.24 10.24V793.6c0 12.8 10.24 25.6 25.6 25.6 12.8 0 25.6-10.24 25.6-25.6v-250.88h51.2c5.12 0 10.24-5.12 10.24-10.24 2.56-5.12 0-7.68-2.56-10.24z"
+                    fill="#fff"
+                    p-id="2538"
+                  ></path>
+                  <path
+                    d="M386.56 762.88h240.64c10.24 0 17.92 7.68 17.92 17.92 0 10.24-7.68 17.92-17.92 17.92h-240.64c-10.24 0-17.92-7.68-17.92-17.92 0-10.24 7.68-17.92 17.92-17.92z m0-69.12h240.64c10.24 0 17.92 7.68 17.92 17.92 0 10.24-7.68 17.92-17.92 17.92h-240.64c-10.24 0-17.92-7.68-17.92-17.92 0-10.24 7.68-17.92 17.92-17.92z m0-71.68h240.64c10.24 0 17.92 7.68 17.92 17.92 0 10.24-7.68 17.92-17.92 17.92h-240.64c-10.24 0-17.92-7.68-17.92-17.92 0-7.68 7.68-17.92 17.92-17.92zM514.56 535.04h-20.48c-5.12 0-7.68-2.56-7.68-7.68v-2.56c0-17.92 5.12-30.72 23.04-46.08 17.92-15.36 23.04-23.04 23.04-33.28s-7.68-20.48-20.48-20.48c-15.36 0-25.6 7.68-30.72 25.6 0 5.12-5.12 5.12-10.24 5.12l-25.6-5.12c-5.12 0-7.68-5.12-5.12-10.24 10.24-38.4 33.28-53.76 79.36-53.76 38.4 0 61.44 25.6 61.44 51.2 0 20.48-7.68 35.84-33.28 53.76-20.48 15.36-23.04 20.48-23.04 33.28-2.56 7.68-7.68 10.24-10.24 10.24zM481.28 588.8v-28.16c0-5.12 2.56-7.68 7.68-7.68h30.72c5.12 0 7.68 2.56 7.68 7.68V588.8c0 5.12-2.56 7.68-7.68 7.68h-30.72c-5.12 0-7.68-5.12-7.68-7.68z"
+                    fill="#fff"
+                    p-id="2539"
+                  ></path>
+                </svg>
+              </span>
+            </p>
+          </div>
+          <div class="Unit-title-box">
+            <p class="box-title">瀹炶涓庡垎浜�</p>
+            <p class="fm-kt">
+              浠ュ皬缁勪负鍗曚綅锛屾敹闆嗕换鎰忎笁鍒欎笌鑸┖杩愯緭鐩稿叧鐨勬柊闂伙紝浠PT鏂瑰紡涓庡叾浠栧悓瀛﹀垎浜紝鍐呭褰㈠紡涓嶉檺銆�
+            </p>
+            <el-upload
+              ref="upload"
+              class="upload-demo"
+              action="'#'"
+              :limit="1"
+              :http-request="fileUpload"
+              :show-file-list="false"
+            >
+              <div class="uploadFiles">
+                <img src="../../assets/images/uploadFiles.svg" alt="" />
+                <span>涓婁紶PPT</span>
+              </div>
+            </el-upload>
+            <div
+              class="ppt-box"
+              v-if="pptData.pptName != ''"
+              v-loading="loading"
+            >
+              <p @click="openPPT()">{{ pptData.pptName }}.PPT</p>
+              <img
+                @click="deletePPT()"
+                src="../../assets/images/delectFile.svg"
+                alt=""
+              />
+            </div>
+          </div>
+        </div>
+        <ul class="header-left-box">
+          <li class="">路16路</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 17椤� -->
+    <!-- <div class="page-box" page="5">
+      <div v-if="showPageList.indexOf(5) > -1">
+        <ul class="header-right">
+          <li class="headerRight-Text">椤圭洰涓�銆�姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍</li>
+          <span class="headerRight-box"></span>
+        </ul>
+        <div class="bodystyle"></div>
+        <ul class="headerRight-Number">
+          <li class="">路5路</li>
+        </ul>
+      </div>
+    </div> -->
+    <preView
+      :isClear="dialogVisible"
+      :md5="p_md5"
+      :pdfTitle="somePdfTitleValue"
+      ref="pdfDialogRef"
+    ></preView>
+    <dialogExaminations
+      :isClear="dialogVisibleOne"
+      :primaryColor="themeColor"
+      :cardList="interfaceQuestion[questionNum]"
+      v-if="interfaceQuestion"
+      :chapter="2"
+      :page="questionNum"
+      :questionTitle="questionTitleMain"
+      ref="dialogRef"
+    >
+    </dialogExaminations>
+  </div>
+</template>
+
+<script>
+import { getResourcePath, uploadFilePath } from "@/assets/methods/resources";
+import {
+  getCollectResource,
+  setCollectResource,
+} from "@/assets/methods/resources";
+import { Message } from "element-ui";
+import tool from "@/assets/js/toolClass.js";
+import preView from "@/components/pdfview/index.vue";
+import dialogExaminations from "@/components/dialogExaminations/index.vue";
+export default {
+  name: "chapterTwo",
+  props: {
+    showPageList: {
+      type: Array,
+    },
+    interfaceQuestion: {
+      type: Object,
+    },
+  },
+  components: {
+    preView,
+    dialogExaminations,
+  },
+  data() {
+    return {
+      collectImg: require("../../assets/images/icon/heart.png"),
+      collectCheck: require("../../assets/images/icon/heart-check.png"),
+      //pdf闃呰鍣�
+      dialogVisible: false,
+      pdfDialogRef: "",
+      somePdfTitleValue: "",
+      p_md5: "",
+      chapter001: {
+        pdfMd5: {
+          1: {
+            md5: "d26f73df690bb8de6781c40d049560e3",
+            name: "鐭ヨ瘑鎷撳睍 1-1 涓浗绗竴浣嶉鏈鸿璁″笀鍐",
+          },
+          2: {
+            md5: "ac8fc00ea84cb3504a5ad0c7c2025652",
+            name: "鐭ヨ瘑鎷撳睍 1-2 涓よ埅绠�浠�",
+          },
+          3: {
+            md5: "df538ab7d44f8c73b7386a2584b84a68",
+            name: "妗堜緥鍒嗕韩 1-1 閲嶉鈥滀袱鑸捣涔夆�濅箣璺� 涓轰簡涓嶈兘蹇樺嵈鐨勭邯蹇�",
+          },
+          4: {
+            md5: "9bfa634653b1c2a51aff13cedf1ccd2d",
+            name: "鐭ヨ瘑鎷撳睍 1-3 C919 澶ч鏈�",
+          },
+        },
+        question: {
+          1: {
+            questionTitleMain: "椤圭洰涓�銆�姘戠敤鑸┖杩愯緭涓氱殑鍙戝睍",
+            questionNum: 16,
+          },
+        },
+      },
+      collectResourceList: [],
+      chapterData: {
+        isCollectVideoOne: false,
+        isCollectVideoTwo: false,
+        isCollectVideoThree: false,
+        isCollectVideoFour: false,
+        isCollectVideoFive: false,
+      },
+      // 瑙嗛
+      videoPathOne: "",
+      // 绠�绛旈
+      videoQuestionData: {
+        one: "",
+        two: "",
+        three: "",
+        four: "",
+        five: "",
+      },
+      // 棰樼洰鐩稿叧
+      dialogVisibleOne: false,
+      themeColor: "#1c9e3a",
+      questionNum: 0,
+      questionTitleMain: "",
+      // ppt
+      pptData: {
+        pptMd5: "",
+        pptName: "",
+      },
+      loading: false,
+    };
+  },
+  async mounted() {
+    const videoQuestionData = localStorage.getItem(
+      "aviationPassengerTransport6th-book-chapter001-videoQuestionData"
+    );
+    if (videoQuestionData) {
+      this.videoQuestionData = JSON.parse(videoQuestionData);
+    }
+
+    this.collectResourceList = await getCollectResource(
+      this.config.activeBook.bookId
+    );
+    this.getVidoePath();
+
+    this.getPPtData();
+  },
+
+  methods: {
+    //涓婁紶PPT
+    fileUpload(file) {
+      console.log(this.pptData.pptMd5, "this.pptData.pptMd5");
+      if (this.pptData.pptMd5 != "") {
+        Message.error("璇峰厛鍒犻櫎褰撳墠鏂囦欢");
+        return;
+      }
+      return new Promise((resolve, reject) => {
+        const isPPT =
+          file.file.type === "application/vnd.ms-powerpoint" ||
+          file.file.type ===
+            "application/vnd.openxmlformats-officedocument.presentationml.presentation";
+        if (!isPPT) {
+          Message.error("涓婁紶鏂囦欢鍙兘鏄� ppt 鏍煎紡!");
+          return reject();
+        }
+        const FileName = file.file.name.split(".")[0];
+        const Extension = file.file.name.split(".")[1];
+        const FileType = file.file.type;
+        let size = 1024;
+        tool
+          .getFileMd5(file.file, size * 1024)
+          .then(async (e) => {
+            this.loading = true;
+            if (this.pptData.pptMd5 != e) {
+              const imgData = new FormData();
+              imgData.append("Md5", e);
+              imgData.append("FileName", FileName);
+              imgData.append("Extension", Extension);
+              imgData.append("FileType", FileType);
+              imgData.append("MetaData", null);
+              imgData.append("file", file.file);
+              let rData = await uploadFilePath(imgData);
+              if (rData) {
+                this.pptData.pptMd5 = e;
+                this.pptData.pptName = FileName;
+                this.setPPtData();
+              }
+            } else {
+              Message.error("褰撳墠鏂囦欢宸蹭笂浼狅紝璇峰嬁閲嶅鎿嶄綔锛�");
+            }
+            this.loading = false;
+          })
+          .catch((e) => {
+            console.error(e);
+          });
+      });
+    },
+    // 瀛樺叆ppt
+    setPPtData() {
+      this.MG.identity
+        .setUserKey({
+          setKeyRequests: [
+            {
+              domain: "PPtData",
+              key: this.config.activeBook.bookId,
+              value: JSON.stringify(this.pptData),
+            },
+          ],
+        })
+        .then((res) => {
+          console.log("鏀惰棌/鍙栨秷鎴愬姛");
+        });
+    },
+
+    // 鑾峰彇ppt鏁版嵁
+    getPPtData() {
+      const token = localStorage.getItem("token");
+      if (!token) return false;
+      this.MG.identity
+        .getUserKey({
+          domain: "PPTData",
+          keys: [this.config.activeBook.bookId],
+        })
+        .then((res) => {
+          try {
+            const pptData = JSON.parse(res[0].value);
+            if (pptData) {
+              this.pptData = pptData;
+            }
+          } catch (error) {
+            console.log("鏆傛棤鏁版嵁");
+          }
+        })
+        .catch((res) => {
+          console.log("ppt鏁版嵁鎶ラ敊");
+        });
+    },
+
+    async getVidoePath() {
+      this.videoPathOne = await getResourcePath(
+        "20915be5a2980251b3294f657fec5345"
+      );
+    },
+    toUrl(val) {
+      if (val) {
+        this.p_md5 = this.chapter001.pdfMd5[val].md5;
+        this.somePdfTitleValue = this.chapter001.pdfMd5[val].name;
+        this.$refs.pdfDialogRef.openDialog();
+      }
+    },
+
+    openPPT() {
+      this.p_md5 = this.pptData.pptMd5;
+      this.somePdfTitleValue = this.pptData.pptName;
+      this.$refs.pdfDialogRef.openDialog();
+    },
+
+    deletePPT() {
+      this.pptData.pptMd5 = "";
+      this.pptData.pptName = "";
+      this.setPPtData();
+    },
+
+    saveVideoQuestionData() {
+      localStorage.setItem(
+        "aviationPassengerTransport6th-book-chapter001-videoQuestionData",
+        JSON.stringify(this.videoQuestionData)
+      );
+    },
+
+    handleCollect(e) {
+      if (e == "pdf-01") {
+        this.handleCollectResource(
+          "d26f73df690bb8de6781c40d049560e3",
+          "d26f73df690bb8de6781c40d049560e3",
+          "",
+          "鍏朵粬",
+          "bits",
+          "鐭ヨ瘑鎷撳睍 1-1 涓浗绗竴浣嶉鏈鸿璁″笀鍐"
+        );
+      } else if (e == "pdf-02") {
+        this.handleCollectResource(
+          "ac8fc00ea84cb3504a5ad0c7c2025652",
+          "ac8fc00ea84cb3504a5ad0c7c2025652",
+          "",
+          "鍏朵粬",
+          "bits",
+          "鐭ヨ瘑鎷撳睍 1-2 涓よ埅绠�浠�"
+        );
+      } else if (e == "pdf-03") {
+        this.handleCollectResource(
+          "df538ab7d44f8c73b7386a2584b84a68",
+          "df538ab7d44f8c73b7386a2584b84a68",
+          "",
+          "鍏朵粬",
+          "bits",
+          "妗堜緥鍒嗕韩 1-1 閲嶉鈥滀袱鑸捣涔夆�濅箣璺� 涓轰簡涓嶈兘蹇樺嵈鐨勭邯蹇�"
+        );
+      } else if (e == "pdf-04") {
+        this.handleCollectResource(
+          "9bfa634653b1c2a51aff13cedf1ccd2d",
+          "9bfa634653b1c2a51aff13cedf1ccd2d",
+          "",
+          "鍏朵粬",
+          "bits",
+          "鐭ヨ瘑鎷撳睍 1-3 C919 澶ч鏈�"
+        );
+      } else if (e == "video-01") {
+        this.handleCollectResource(
+          "20915be5a2980251b3294f657fec5345",
+          "20915be5a2980251b3294f657fec5345",
+          "",
+          "瑙嗛",
+          "bits",
+          "01 涓浗姘戠敤鑸┖杩愯緭鐨勫彂灞�"
+        );
+      }
+    },
+    //璧勬簮鏀惰棌浜嬩欢
+    // resourcePath  鏂囦欢璺緞锛�
+    // resourceType  鏂囦欢绫诲瀷
+    // source        鏂囦欢鏉ユ簮
+    handleCollectResource(
+      id,
+      md5,
+      resourcePath,
+      resourceType,
+      source,
+      resourceName
+    ) {
+      let list = this.collectResourceList;
+      if (list.findIndex((item) => item.id == id) > -1) {
+        list = list.filter((item) => item.id != id);
+      } else {
+        list.push({
+          id,
+          md5,
+          resourcePath,
+          resourceType,
+          source,
+          resourceName,
+        });
+      }
+      this.collectResourceList = list;
+      setCollectResource(
+        this.config.activeBook.bookId,
+        this.collectResourceList
+      );
+    },
+
+    openQuestion(num) {
+      if (num) {
+        this.questionNum = this.chapter001.question[num].questionNum;
+        this.questionTitleMain =
+          this.chapter001.question[num].questionTitleMain;
+        this.$refs.dialogRef.openDialogQuestion();
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+hr {
+  margin-left: 0;
+  margin-bottom: 25px;
+  width: 25%;
+  border: none;
+  height: 1px;
+  background-color: #000;
+}
+
+.header-right-img {
+  width: 100%;
+  display: inline-block;
+  justify-content: center;
+  padding-top: 40%;
+  min-height: 600px !important;
+
+  img {
+    width: 35%;
+    height: auto;
+  }
+}
+</style>
diff --git a/src/books/aviationPassengerTransport6th/view/components/header.vue b/src/books/aviationPassengerTransport6th/view/components/header.vue
new file mode 100644
index 0000000..d6e2629
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/view/components/header.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="chapter" num="1">
+      <!-- 灏侀潰 -->
+      <div class="page-box mt-20" page="1" style="min-height: auto">
+        <div v-if="showPageList.indexOf(1) > -1">
+          <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "pageHeader",
+    props: {
+      showPageList: {
+        type: Array,
+      },
+    },
+    data() {
+      return {};
+    },
+  };
+  </script>
+  
+  <style lang="less" scoped></style>
+  
\ No newline at end of file
diff --git a/src/books/aviationPassengerTransport6th/view/components/index.vue b/src/books/aviationPassengerTransport6th/view/components/index.vue
new file mode 100644
index 0000000..c91c6aa
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/view/components/index.vue
@@ -0,0 +1,980 @@
+<template>
+  <div class="page-main" @scroll="throttledScrollHandler">
+    <div id="searchDomBox" style="display: none">
+      <div id="searchContent"></div>
+    </div>
+    <div
+      class="page-content"
+      :style="{
+        fontSize: fontSize + 'px',
+        transform: `scale(${pageZoom})`,
+        transformOrigin: 'center top',
+      }"
+    >
+      <pageHeader
+        v-if="showCatalogList.indexOf(1) > -1"
+        :showPageList="loadPageList"
+      ></pageHeader>
+      <chapterOne
+        v-if="showCatalogList.indexOf(2) > -1"
+        :showPageList="loadPageList"
+        :interfaceQuestion="questionDataMap"
+      ></chapterOne>
+      <!-- <chapterTwo
+          v-if="showCatalogList.indexOf(2) > -1"
+          :showPageList="loadPageList"
+        ></chapterTwo> -->
+      <!-- <chapterThree
+              v-if="showCatalogList.indexOf(4) > -1"
+              :showPageList="loadPageList"
+            ></chapterThree>
+            <chapterFour
+              v-if="showCatalogList.indexOf(5) > -1"
+              :showPageList="loadPageList"
+            ></chapterFour>
+        <chapterFive
+              v-if="showCatalogList.indexOf(2) > -1"
+              :showPageList="loadPageList"
+              :interfaceQuestion="questionDataMap"
+            ></chapterFive>  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import pageHeader from "./header.vue";
+import chapterOne from "./chapter001.vue";
+//   import chapterTwo from "./chapter002.vue";
+//   import chapterThree from "./chapter003.vue";
+//   import chapterFour from "./chapter004.vue";
+//   import chapterFive from "./chapter005.vue";
+import NoteIcon from "@/assets/images/biji.png";
+import getQuestionList from "@/assets/methods/examination";
+import testData from "../../assets/examinationList";
+import _ from "lodash";
+import Swiper from "swiper/bundle";
+import "swiper/swiper-bundle.css";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+export default {
+  name: "pageContent",
+  data() {
+    return {
+      catalogLength: 2, // 鎬荤珷鑺傛暟
+      showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+      loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+      throttleThreshold: 100, // 鑺傛祦闃堝��
+      previousScrollTop: 0,
+      throttledScrollHandler: null,
+      observer: null,
+      loadPageObserver: null,
+      loadPageList: [],
+      questionDataMap: {},
+      renderSignMap: {},
+      highlightData: null,
+      audioPath: "",
+      currentTime: null,
+      videoList: [],
+    };
+  },
+  computed: {
+    fontSize() {
+      this.transformDom(this.$store.state.qiankun.fontSize);
+      return this.$store.state.qiankun.fontSize
+        ? this.$store.state.qiankun.fontSize
+        : 18;
+    },
+    pageZoom() {
+      return this.$store.state.qiankun.scale
+        ? this.$store.state.qiankun.scale / 100
+        : 1;
+    },
+  },
+  watch: {
+    showCatalogList: {
+      handler(newVal, oldVal) {
+        if (
+          this.$store.state.qiankun &&
+          this.$store.state.qiankun.catalogChange
+        ) {
+          // 璋冪敤鐖跺眰鏂规硶
+          this.$store.state.qiankun.catalogChange({
+            showCatalogList: newVal,
+          });
+        }
+        // 鍚姩椤电爜瑙傚療
+        setTimeout(() => {
+          this.initObservation();
+          this.initThemeColor();
+        }, 500);
+      },
+    },
+    loadPageList: {
+      handler(newVal, oldVal) {
+        setTimeout(() => {
+          this.transformDom(this.$store.state.qiankun.fontSize);
+          this.initSwiper();
+          this.initViewer();
+          this.closeAudio();
+          this.closeVideo();
+        }, 200);
+      },
+    },
+    pageZoom: {
+      handler(newVal, oldVal) {
+        const scrollBox = (
+          this.container ? this.container : document
+        ).querySelector(".page-main");
+        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+      },
+    },
+  },
+  mounted() {
+    // 榛樿鍔犺浇绔犺妭
+    this.showCatalogList = [1];
+    // 婊氬姩鐩戝惉鑺傛祦
+    this.throttledScrollHandler = _.throttle(
+      this.scrollFun,
+      this.throttleThreshold,
+      { leading: true, trailing: false }
+    );
+    // 瀹氫箟瀛愬眰鏂规硶
+    if (this.setGlobalState) {
+      // 鎻愪緵椤甸潰璺宠浆鍔熻兘
+      this.setGlobalState({
+        gotoPage: (catalog, page) => {
+          this.gotoPage(catalog, page);
+        },
+        // 娓叉煋绗旇銆侀珮浜�佸垝绾�
+        renderSign: (type, data) => {
+          // 鍥犱负璋冩暣涓洪〉闈㈡噿鍔犺浇锛屾墍浠ユ覆鏌撴爣璁颁篃闇�瑕佹寜鐓ч〉闈㈣繘琛屽鐞嗭紝鍏堝偍瀛樻暟鎹紝椤甸潰鍔犺浇瀹屾垚鍐嶆覆鏌撳搴旂殑鏍囪锛�
+          this.handelSignData(type, data);
+          // this.renderSign(type, data);
+        },
+        // 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
+        delSign: (data) => {
+          this.delSign(data);
+        },
+        // 鍏ㄦ枃妫�绱�
+        searchBookByKeyword: (keyword) => {
+          return this.searchTextByPage(keyword);
+        },
+        // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+        jumpSearchItem: (data) => {
+          this.searchItemLocation(data);
+        },
+      });
+    }
+
+    // 鍒涘缓涓�涓柊鐨� Intersection Observer 瀹炰緥锛岀敤浜庤瀵熺洰鏍囧厓绱犲拰鎵ц鐩稿簲鐨勫洖璋冨嚱鏁般��
+    // new IntersectionObserver(callback, options)锛氫娇鐢ㄤ箣鍓嶅畾涔夌殑 callback 鍥炶皟鍑芥暟鍜� options 閰嶇疆閫夐」鏉ュ垵濮嬪寲 Intersection Observer 瀹炰緥銆�
+    this.observer = new IntersectionObserver(this.pageChangeCallback, {
+      root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+      rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+      threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+    });
+
+    this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
+      root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+      rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+      threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+    });
+
+    // 鍚姩椤电爜瑙傚療
+    setTimeout(() => {
+      this.initObservation();
+      this.initThemeColor();
+    }, 500);
+
+    // 娴嬭瘯椤甸潰璺宠浆
+    // setTimeout(() => {
+    //   this.gotoPage(2, 16);
+    //}, 500);
+
+    // 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
+    // });
+    // }, 500);
+  },
+  methods: {
+    // setZoom1() {
+    //   let scale = this.$store.state.qiankun.scale + 10;
+    //   const scrollBox = (
+    //     this.container ? this.container : document
+    //   ).querySelector(".page-main");
+    //   this.$store.commit("setZoom", scale);
+    // },
+    // setZoom2() {
+    //   let scale = this.$store.state.qiankun.scale - 10;
+    //   const scrollBox = (
+    //     this.container ? this.container : document
+    //   ).querySelector(".page-main");
+    //   this.$store.commit("setZoom", scale);
+    // },
+    // 婊氬姩鐩戝惉
+    scrollFun(event) {
+      this.handleVideoPicture();
+      // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
+      if (event.target.scrollTop > this.previousScrollTop) {
+        this.getAduio();
+        // 鍚戜笅
+        const currentScrollTop =
+          event.target.scrollTop + event.target.offsetHeight;
+        if (
+          currentScrollTop >=
+          event.target.scrollHeight - this.loadThreshold
+        ) {
+          console.log(1);
+
+          // 鍒拌揪闃堝��
+          if (
+            this.showCatalogList[this.showCatalogList.length - 1] <
+            this.catalogLength
+          ) {
+            // 鍔犺浇涓嬩竴绔�
+            this.showCatalogList.push(
+              this.showCatalogList[this.showCatalogList.length - 1] + 1
+            );
+            if (this.showCatalogList.length > 3) {
+              // 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔�
+              this.showCatalogList.shift();
+            }
+          }
+        }
+      } else if (event.target.scrollTop < this.previousScrollTop) {
+        this.handleAudio();
+        // 鍚戜笂
+        const currentScrollTop = event.target.scrollTop;
+        if (currentScrollTop <= this.loadThreshold) {
+          // 鍒拌揪闃堝��
+          if (this.showCatalogList[0] > 0) {
+            // 鍔犺浇涓婁竴绔�
+            this.showCatalogList.unshift(this.showCatalogList[0] - 1);
+            if (this.showCatalogList.length > 3) {
+              // 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔�
+              this.showCatalogList.pop();
+            }
+          }
+        }
+      }
+      // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
+      // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
+      this.previousScrollTop = event.target.scrollTop;
+    },
+    // 绔犺妭銆侀〉闈㈣烦杞�
+    gotoPage(catalog, page) {
+      if (catalog >= 0 && catalog <= this.catalogLength) {
+        // 澶勭悊娓叉煋绔犺妭
+        if (catalog == 0) {
+          this.showCatalogList = [0, 1];
+        } else if (catalog == this.catalogLength) {
+          this.showCatalogList = [
+            this.catalogLength - 2,
+            this.catalogLength - 1,
+            this.catalogLength,
+          ];
+        } else {
+          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
+        }
+        setTimeout(() => {
+          // 璺宠浆椤电爜
+          const pageDom = (
+            this.container ? this.container : document
+          ).querySelector(`[page="${page}"]`);
+          if (pageDom) {
+            pageDom.scrollIntoView();
+          } else {
+            console.log("椤电爜閿欒锛�");
+          }
+        }, 500);
+      } else {
+        console.log("绔犺妭閿欒锛�");
+      }
+    },
+
+    // 澶勭悊鏍囪鏁版嵁
+    handelSignData(type, data) {
+      if (this.loadPageList.indexOf(Number(data.page)) > -1) {
+        // 绔嬪嵆娓叉煋
+        this.renderSign(type, data);
+      }
+
+      // 鍌ㄥ瓨鏁版嵁
+      if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
+      if (!this.renderSignMap[type][data.page])
+        this.renderSignMap[type][data.page] = [];
+      this.renderSignMap[type][data.page].push(data);
+    },
+
+    // 娓叉煋鏍囪
+    renderSign(type, data) {
+      // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+      if (this.$store.state.qiankun.disableSign) {
+        return false;
+      }
+      const existence = (
+        this.container ? this.container : document
+      ).querySelector(`[dataid="${data.id}"]`);
+      // 鍘婚噸
+      if (!existence) {
+        const pageDom = (
+          this.container ? this.container : document
+        ).querySelector(`[page="${data.page}"]`);
+        // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
+        const treeWalker = document.createTreeWalker(
+          pageDom,
+          NodeFilter.SHOW_TEXT
+        );
+        const allTextNodes = [];
+        let currentNode = treeWalker.nextNode();
+        while (currentNode) {
+          allTextNodes.push(currentNode);
+          currentNode = treeWalker.nextNode();
+        }
+        for (let i = 0; i < allTextNodes.length; i++) {
+          const textDom = allTextNodes[i];
+          if (textDom.textContent.indexOf(data.txt) > -1) {
+            let reg = new RegExp(`${data.txt}`, "ig");
+            switch (type) {
+              case "Highlight":
+                // 楂樹寒
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+                  );
+                break;
+              case "Dashing":
+                // 鍒掔嚎
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+                  );
+                break;
+              case "Note":
+                // 绗旇
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
+                  );
+                break;
+            }
+          }
+        }
+      }
+    },
+    // 鍒犻櫎鏍囪娓叉煋
+    delSign({ ids, type }) {
+      if (ids && ids.length) {
+        for (let i = 0; i < ids.length; i++) {
+          const id = ids[i];
+          const dom = (
+            this.container ? this.container : document
+          ).querySelector(`[dataid="${id}"]`);
+          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+            dom.outerHTML,
+            dom.outerText
+          );
+        }
+      }
+      if (type) {
+        const doms = (
+          this.container ? this.container : document
+        ).querySelectorAll(`[datatype="${type}"]`);
+        for (let i = 0; i < doms.length; i++) {
+          const dom = doms[i];
+          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+            dom.outerHTML,
+            dom.outerText
+          );
+        }
+      }
+    },
+    initObservation() {
+      const sections = (
+        this.container ? this.container : document
+      ).querySelectorAll(".page-box");
+      sections.forEach((section) => {
+        if (this.config.activeBook && this.config.activeBook.tryPageCount) {
+          const page = section.getAttribute("page");
+          if (Number(page) > this.config.activeBook.tryPageCount) {
+            let chapterDom = this.getParentWithClass(section, "chapter");
+            const chapterNum = chapterDom.getAttribute("num");
+            this.catalogLength = Number(chapterNum) - 1;
+            section.remove();
+            return false;
+          }
+        }
+        // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
+        const isObserver = section.getAttribute("observer");
+        const isLoadObserver = section.getAttribute("loadObserver");
+        if (!isObserver) {
+          this.observer.observe(section);
+          section.setAttribute("observer", "1");
+        }
+        if (!isLoadObserver) {
+          this.loadPageObserver.observe(section);
+          section.setAttribute("loadObserver", "1");
+        }
+      });
+    },
+    initThemeColor() {
+      // 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐�
+      const colorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-color");
+      const backgroundColorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-back");
+      const borderColorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-border");
+      // 鑾峰彇閰嶇疆鐨勪富棰樿壊
+      const bookThemeColor =
+        this.config.activeBook && this.config.activeBook.bookThemeColor
+          ? this.config.activeBook.bookThemeColor
+          : null;
+      const chapterThemeColor =
+        this.config.activeBook && this.config.activeBook.chapterThemeColor
+          ? this.config.activeBook.chapterThemeColor
+          : null;
+      const pageThemeColor =
+        this.config.activeBook && this.config.activeBook.pageThemeColor
+          ? this.config.activeBook.pageThemeColor
+          : null;
+      colorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.color = themeColor;
+        }
+      });
+      backgroundColorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.backgroundColor = themeColor;
+        }
+      });
+      borderColorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.borderColor = themeColor;
+        }
+      });
+    },
+    getParentWithClass(element, className) {
+      while (element.parentElement) {
+        element = element.parentElement;
+        if (element.classList.contains(className)) {
+          return element;
+        }
+      }
+    },
+    pageChangeCallback(entries, observer) {
+      //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
+      entries.forEach((entry) => {
+        //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ��
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱�
+          const page = target.getAttribute("page");
+          const catalogDom = this.tool.getParentNodeByClassName(
+            target,
+            "chapter"
+          );
+          const catalog = catalogDom.getAttribute("num");
+          let text = null;
+          if (target.querySelector("p")) {
+            text = target.querySelector("p").textContent.substring(0, 50);
+          }
+          // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
+          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
+            this.$store.state.qiankun.pageChange({
+              page: page,
+              catalog: catalog,
+              text,
+            });
+          // const sections = Array.from(document.querySelectorAll(".section"));
+          //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
+          // let index = sections.findIndex((section) => section === target) + 1;
+          //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併��
+        }
+      });
+    },
+    loadPageCallback(entries, observer) {
+      entries.forEach(async (entry) => {
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          const page = target.getAttribute("page");
+          if (this.loadPageList.indexOf(Number(page)) == -1) {
+            const catalogDom = this.tool.getParentNodeByClassName(
+              target,
+              "chapter"
+            );
+            // 娣诲姞椤电爜
+            this.loadPageList.push(Number(page));
+            const catalog = catalogDom.getAttribute("num");
+            if (!this.questionDataMap[page]) {
+              if (testData && testData[catalog]) {
+                if (testData[catalog][page]) {
+                  if (Array.isArray(testData[catalog][page])) {
+                    this.questionDataMap[page] = await getQuestionList(
+                      page,
+                      testData[catalog][page],
+                      this.config.activeBook
+                    );
+                  } else {
+                    const obj = {};
+                    for (let key in testData[catalog][page]) {
+                      obj[key] = await getQuestionList(
+                        [],
+                        testData[catalog][page][key],
+                        this.config.activeBook
+                      );
+                    }
+                    this.questionDataMap[page] = obj;
+                  }
+                  console.log("棰樼洰", this.questionDataMap);
+                }
+              }
+            }
+            // 娓叉煋杩欎竴椤电殑鏍囪
+            for (const key in this.renderSignMap) {
+              if (this.renderSignMap[key][page]) {
+                this.renderSignMap[key][page].forEach((item) => {
+                  this.renderSign(key, item);
+                });
+              }
+            }
+            // 澶勭悊楂樹寒
+            if (this.highlightData) {
+              // 楂樹寒琛�
+              setTimeout(() => {
+                // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+                const pageTextList = document.createTreeWalker(
+                  target,
+                  NodeFilter.SHOW_TEXT
+                );
+                // 鍖归厤鍏抽敭瀛�
+                const allPageTextNodes = [];
+                let currentNode = pageTextList.nextNode();
+                while (currentNode) {
+                  allPageTextNodes.push(currentNode);
+                  currentNode = pageTextList.nextNode();
+                }
+                for (let i = 0; i < allPageTextNodes.length; i++) {
+                  const textDom = allPageTextNodes[i];
+                  let txtIndex = textDom.textContent.indexOf(
+                    this.highlightData.txt
+                  );
+                  if (txtIndex > -1) {
+                    textDom.parentNode.style.transition =
+                      "background-color 0.8s";
+                    textDom.parentNode.scrollIntoView();
+                    textDom.parentNode.style.backgroundColor = "#79bbf0";
+                    setTimeout(() => {
+                      textDom.parentNode.style.backgroundColor = "";
+                    }, 1000);
+                  }
+                }
+              }, 100);
+            }
+            if (this.loadPageList.length > 5) {
+              // 瓒呰繃5椤�
+              this.loadPageList.shift();
+            }
+          }
+        }
+      });
+    },
+    initSwiper() {
+      const doms = (
+        this.container ? this.container : document
+      ).querySelectorAll(".swiper-img");
+      for (let i = 0; i < doms.length; i++) {
+        const dom = doms[i];
+        new Swiper(dom, {
+          loop: false, // 鏃犵紳
+          autoplay: {
+            //鑷姩寮�濮�
+            delay: 3000, //鏃堕棿闂撮殧
+            disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+          },
+          paginationClickable: true,
+          slidesPerView: 1, // 涓�缁勪笁涓�
+          spaceBetween: 30, // 闂撮殧
+          // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+          navigation: {
+            nextEl: dom.querySelector(".swiper-button-next"),
+            prevEl: dom.querySelector(".swiper-button-prev"),
+          },
+          // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+          // observer: true,
+          // observeParents: true
+          // // 濡傛灉闇�瑕佸垎椤靛櫒
+          // pagination: {
+          //   el: (this.container ? this.container : document).querySelector(
+          //     ".swiper-pagination"
+          //   ),
+          //   clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
+          // }
+        });
+      }
+      const pptDoms = (
+        this.container ? this.container : document
+      ).querySelectorAll(".swiper_ppt");
+      for (let i = 0; i < pptDoms.length; i++) {
+        const dom = pptDoms[i];
+        new Swiper(dom, {
+          loop: false, // 鏃犵紳
+          autoplay: false,
+          paginationClickable: true,
+          slidesPerView: 1, // 涓�缁勪笁涓�
+          spaceBetween: 30, // 闂撮殧
+          // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+          navigation: {
+            nextEl: dom.querySelector(".swiper-button-next"),
+            prevEl: dom.querySelector(".swiper-button-prev"),
+          },
+          // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+          observer: true,
+          observeParents: true,
+          on: {
+            init: (value) => {
+              let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+              let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+              var paginationInfoEl = dom.querySelector(".pageBox");
+              if (paginationInfoEl)
+                paginationInfoEl.textContent = currentPage + "/" + totalPages;
+            },
+            slideChange: (value) => {
+              let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+              let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+              var paginationInfoEl = dom.querySelector(".pageBox");
+              if (paginationInfoEl)
+                paginationInfoEl.textContent = currentPage + "/" + totalPages;
+            },
+          },
+        });
+      }
+    },
+    initViewer() {
+      const doms = (
+        this.container ? this.container : document
+      ).querySelectorAll(".openImgBox");
+      for (let i = 0; i < doms.length; i++) {
+        const dom = doms[i];
+        new Viewer(dom, {
+          container: this.container
+            ? this.container.querySelector("#app")
+            : "body",
+          navbar: true, // 鏄剧ず瀵艰埅鏍�
+          toolbar: true, // 鏄剧ず宸ュ叿鏍�
+          title: true, // 鏄剧ず鏍囬
+        });
+      }
+    },
+    // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+    searchTextByPage(keyword) {
+      const searchResult = [];
+      let catalogIndex = 0;
+      // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+      const pageData = {
+        pageHeader,
+        chapterOne,
+        //   chapterTwo,
+        //   chapterThree,
+        //   chapterFour,
+        //   chapterFive,
+      };
+      // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+      for (const key in pageData) {
+        catalogIndex++;
+        let pageComponent, pageExample;
+        // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+        pageComponent = Vue.extend(pageData[key]);
+        pageExample = new pageComponent({
+          propsData: {
+            showPageList: [],
+            questionData: {},
+            isSearch: true,
+          },
+        });
+        pageExample.$mount(
+          (this.container ? this.container : document).querySelector(
+            "#searchContent"
+          )
+        );
+        // 鑾峰彇椤电爜
+        const pageDom = (this.container ? this.container : document)
+          .querySelector("#searchDomBox")
+          .querySelectorAll(".page-box");
+        const pages = [];
+        for (let i = 0; i < pageDom.length; i++) {
+          const pageDomItem = pageDom[i];
+          pages.push(Number(pageDomItem.getAttribute("page")));
+        }
+        // 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
+        pageExample.$destroy();
+        (this.container ? this.container : document).querySelector(
+          "#searchDomBox"
+        ).innerHTML = '<div id="searchContent"></div>';
+        // 閬嶅巻椤电爜
+        if (pages.length) {
+          for (let i = 0; i < pages.length; i++) {
+            const pageNum = pages[i];
+            // 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
+            pageComponent = Vue.extend(pageData[key]);
+            pageExample = new pageComponent({
+              propsData: {
+                showPageList: [pageNum],
+                questionData: {},
+                isSearch: true,
+              },
+            });
+            pageExample.$mount(
+              (this.container ? this.container : document).querySelector(
+                "#searchContent"
+              )
+            );
+            // 鑾峰彇瀵瑰簲椤甸潰dom
+            const thisPageDom = (this.container ? this.container : document)
+              .querySelector("#searchDomBox")
+              .querySelector(`[page="${pageNum}"]`);
+            if (thisPageDom) {
+              // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+              const pageTextList = document.createTreeWalker(
+                thisPageDom,
+                NodeFilter.SHOW_TEXT
+              );
+              // 鍖归厤鍏抽敭瀛�
+              const allPageTextNodes = [];
+              let currentNode = pageTextList.nextNode();
+              while (currentNode) {
+                allPageTextNodes.push(currentNode);
+                currentNode = pageTextList.nextNode();
+              }
+              for (let i = 0; i < allPageTextNodes.length; i++) {
+                const textDom = allPageTextNodes[i];
+                let txtIndex = textDom.textContent.indexOf(keyword);
+                if (txtIndex > -1) {
+                  // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
+                  searchResult.push({
+                    page: pageNum,
+                    catalog: catalogIndex,
+                    txt: textDom.textContent,
+                    txtIndex: txtIndex,
+                  });
+                }
+              }
+              // 缁撴潫锛屽嵏杞介攢姣�
+              pageExample.$destroy();
+              (this.container ? this.container : document).querySelector(
+                "#searchDomBox"
+              ).innerHTML = '<div id="searchContent"></div>';
+            }
+          }
+        }
+      }
+      // 杈撳嚭鎼滅储缁撴灉
+      console.log(searchResult);
+      return searchResult;
+    },
+    // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
+    searchItemLocation(data) {
+      // 璁板綍楂樹寒淇℃伅
+      this.highlightData = data;
+      // 璺宠浆
+      this.gotoPage(data.catalog, data.page, () => {});
+    },
+    // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
+    getAduio() {
+      let allVideo = (
+        this.container ? this.container : document
+      ).querySelectorAll(".audio");
+      allVideo = Array.from(allVideo);
+      this.videoList = allVideo;
+      if (allVideo.length) {
+        // 鏌ユ壘鎾斁鐘舵�佺殑鏈�鍚庝竴鏉¢煶棰�
+        const playAudio = allVideo
+          .reverse()
+          .find((item) => item.paused == false);
+        if (playAudio) {
+          const bottomGap = playAudio.getBoundingClientRect().bottom;
+          if (bottomGap < 0) {
+            playAudio.pause();
+            this.audioPath = playAudio.src;
+            this.currentTime = playAudio.currentTime;
+          }
+        }
+      }
+    },
+    // 椤甸潰鍚戜笂婊氬姩锛岄煶棰戝皬绐楀洖鏀�
+    handleAudio() {
+      if (!this.audioPath) return false;
+      let allVideo = (
+        this.container ? this.container : document
+      ).querySelectorAll(".audio");
+      allVideo = Array.from(allVideo);
+      if (allVideo.length) {
+        //鏌ユ壘涓庡皬绐楁挱鏀鹃煶棰戝悓婧愮殑椤甸潰audio DOM
+        const playAudio = allVideo.find((item) => item.src == this.audioPath);
+        if (playAudio) {
+          const bottomGap = playAudio.getBoundingClientRect().bottom;
+          if (bottomGap >= 0) {
+            if (this.$refs.audioPlayer) {
+              const playerState = this.$refs.audioPlayer.getVideoPlayer();
+              this.audioPath = "";
+              playAudio.currentTime = playerState.currentTime;
+              if (!playerState.paused) playAudio.play();
+            }
+          }
+        }
+      }
+    },
+    // 鍏抽棴mini video
+    closeMiniAudio() {
+      this.audioPath = "";
+    },
+    // 鐐瑰嚮闊抽鎾斁锛屽叧闂叾浠栭煶棰�
+    closeAudio() {
+      let allAudio = (
+        this.container ? this.container : document
+      ).querySelectorAll(".audio");
+      for (let index = 0; index < allAudio.length; index++) {
+        const item = allAudio[index];
+        item.addEventListener("play", () => {
+          const audioList = Array.from(allAudio);
+          for (let cindex = 0; cindex < audioList.length; cindex++) {
+            const citem = audioList[cindex];
+            if (citem.currentSrc != item.src) {
+              citem.pause();
+            }
+          }
+          this.closeMiniAudio();
+        });
+      }
+    },
+    // 鐐瑰嚮瑙嗛鍏抽棴鍏朵粬
+    closeVideo() {
+      let allVideo = (
+        this.container ? this.container : document
+      ).querySelectorAll(".video");
+      for (let index = 0; index < allVideo.length; index++) {
+        const item = allVideo[index];
+        item.addEventListener("playing", (item) => {
+          const path = item.srcElement.src;
+          const videoList = Array.from(allVideo);
+          for (let cindex = 0; cindex < videoList.length; cindex++) {
+            const citem = videoList[cindex];
+            if (citem.currentSrc != path && path) {
+              citem.pause();
+            }
+          }
+        });
+      }
+    },
+    // 瑙嗛灏忕獥
+    handleVideoPicture() {
+      let doms = (this.container ? this.container : document).querySelectorAll(
+        ".video"
+      );
+      doms = Array.from(doms);
+      if (!doms.length) return false;
+      const playVudio = doms.reverse().find((item) => item.paused == false);
+      if (playVudio) {
+        const bottomGap = playVudio.getBoundingClientRect().bottom;
+        const topGap = playVudio.getBoundingClientRect().top;
+        if (bottomGap < 0 || topGap > window.innerHeight) {
+          try {
+            if (playVudio.readyState) playVudio.requestPictureInPicture();
+          } catch (error) {
+            console.log(error, "灏忕獥閿欒error");
+          }
+        }
+      }
+    },
+    //鍏朵粬绫诲悕涓嬪瓧浣撳ぇ灏忓彉鍖�
+    transformDom(fs) {
+      if (!fs) return;
+      let doms = (this.container ? this.container : document).querySelectorAll(
+        ".block"
+      );
+      if (!doms.length) return;
+      for (let index = 0; index < doms.length; index++) {
+        const dom = doms[index];
+        dom.style.fontSize = fs + "px";
+      }
+    },
+  },
+  components: {
+    pageHeader,
+    chapterOne,
+    //   chapterTwo,
+    //   chapterThree,
+    //   chapterFour,
+    //   chapterFive,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.page-main {
+  width: 100% !important;
+  height: 100% !important;
+  overflow: auto;
+
+  .page-content {
+    max-width: 816px;
+    min-width: 375px;
+    margin: 0 auto;
+    padding-bottom: 100px;
+  }
+}
+</style>
diff --git a/src/books/aviationPassengerTransport6th/view/index.vue b/src/books/aviationPassengerTransport6th/view/index.vue
new file mode 100644
index 0000000..3682675
--- /dev/null
+++ b/src/books/aviationPassengerTransport6th/view/index.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="aviationPassengerTransport6th" @mouseup="handleMouseUp">
+      <pageContent></pageContent>
+    </div>
+  </template>
+  
+  <script>
+  import pageContent from "./components/index.vue";
+  export default {
+    name: "aviationPassengerTransport6th",
+    components: {
+      pageContent,
+    },
+    computed: {
+      fontSize() {
+        return this.$store.state.qiankun.fontSize;
+      },
+      pageZoom() {
+        return this.$store.state.qiankun.scale / 100;
+      },
+    },
+  
+    methods: {
+      getParentWithClass(element, className) {
+        while (element.parentElement) {
+          element = element.parentElement;
+          if (element.classList.contains(className)) {
+            return element;
+          }
+        }
+      },
+      handleMouseUp(e) {
+        const selection = (
+          this.container ? this.container : window
+        ).getSelection();
+        const txt = selection.toString();
+        if (selection.type != "none" && txt) {
+          let node = selection.anchorNode.parentNode;
+          let pageHtml = this.getParentWithClass(
+            selection.anchorNode,
+            "page-box"
+          );
+          let chapterDom = this.getParentWithClass(
+            selection.anchorNode,
+            "chapter"
+          );
+          let chapterNum;
+          if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+          if (pageHtml) {
+            const page = pageHtml.getAttribute("page");
+            // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶
+            if (this.$store.state.qiankun.windowSelection) {
+              this.$store.state.qiankun.windowSelection({
+                chapterNum,
+                txt,
+                page,
+                x: e.x,
+                y: e.y,
+              });
+            }
+          }
+        } else {
+          if (this.$store.state.qiankun.windowSelection) {
+            this.$store.state.qiankun.windowSelection({
+              chapterNum: "",
+              txt: "",
+              page: "",
+              x: e.x,
+              y: e.y,
+            });
+          }
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style lang="less">
+  @import "../assets/main.less";
+  </style>
\ No newline at end of file
diff --git a/src/books/childcareInstitutionsManagement/view/components/chapter001.vue b/src/books/childcareInstitutionsManagement/view/components/chapter001.vue
index 3dc4ca8..140c09d 100644
--- a/src/books/childcareInstitutionsManagement/view/components/chapter001.vue
+++ b/src/books/childcareInstitutionsManagement/view/components/chapter001.vue
@@ -174,7 +174,6 @@
         </div>
       </div>
     </div>
-
     <!-- P5 -->
     <div class="page-box" page="15">
       <div v-if="showPageList.indexOf(15) > -1">
@@ -276,7 +275,6 @@
         </div>
       </div>
     </div>
-
     <!-- P7 -->
     <div class="page-box" page="17">
       <div v-if="showPageList.indexOf(17) > -1">
@@ -323,7 +321,6 @@
         </div>
       </div>
     </div>
-
     <!-- P8 -->
     <div class="page-box" page="18">
       <div v-if="showPageList.indexOf(18) > -1">
@@ -379,7 +376,6 @@
         </div>
       </div>
     </div>
-
     <!-- P9 -->
     <div class="page-box" page="19">
       <div v-if="showPageList.indexOf(19) > -1">
diff --git a/src/books/cognitiveLanDevEduAges0to3/assets/main.less b/src/books/cognitiveLanDevEduAges0to3/assets/main.less
index 11e2fc8..bb960ee 100644
--- a/src/books/cognitiveLanDevEduAges0to3/assets/main.less
+++ b/src/books/cognitiveLanDevEduAges0to3/assets/main.less
@@ -1217,8 +1217,6 @@
         vertical-align: middle;
     }
 
-    .content {}
-
     .titleQuot-c {
         font-family: "鏂规鍏颁涵缁嗛粦";
         color: #00aeef;
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0002-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0002-01.jpg
new file mode 100644
index 0000000..94d9a1a
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0002-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0003-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0003-01.jpg
new file mode 100644
index 0000000..51d9ca0
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0003-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-01.jpg
new file mode 100644
index 0000000..b5196ec
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-02.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-02.jpg
new file mode 100644
index 0000000..72e4280
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-02.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0007-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0007-01.jpg
new file mode 100644
index 0000000..c74bbf6
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0007-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0008-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0008-01.jpg
new file mode 100644
index 0000000..2b7def6
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0008-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0012-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0012-01.jpg
new file mode 100644
index 0000000..726e811
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0012-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0013-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0013-01.jpg
new file mode 100644
index 0000000..a80a353
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0013-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0016-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0016-01.jpg
new file mode 100644
index 0000000..85cab64
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0016-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0017-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0017-01.jpg
new file mode 100644
index 0000000..aee7264
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0017-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0018-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0018-01.jpg
new file mode 100644
index 0000000..43b9ae9
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0018-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0020-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0020-01.jpg
new file mode 100644
index 0000000..1dd77df
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0020-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0022-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0022-01.jpg
new file mode 100644
index 0000000..83e6c1a
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0022-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-01.jpg
new file mode 100644
index 0000000..6bc386e
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-02.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-02.jpg
new file mode 100644
index 0000000..0197b96
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-02.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0025-03.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0025-03.jpg
new file mode 100644
index 0000000..03e4f76
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0025-03.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0026-01.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0026-01.jpg
new file mode 100644
index 0000000..33a122a
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/0026-01.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/Cover.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/Cover.jpg
new file mode 100644
index 0000000..06a7038
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/Cover.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/a1.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/a1.jpg
new file mode 100644
index 0000000..b3787f5
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/a1.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/a2.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/a2.jpg
new file mode 100644
index 0000000..32b2c47
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/a2.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/a3.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/a3.jpg
new file mode 100644
index 0000000..0b1c6ab
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/a3.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/device_phone_frontcover.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/device_phone_frontcover.jpg
new file mode 100644
index 0000000..5174538
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/device_phone_frontcover.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/feiye.jpg b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/feiye.jpg
new file mode 100644
index 0000000..e488707
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/feiye.jpg
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart-check.png b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart-check.png
new file mode 100644
index 0000000..74d469c
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart-check.png
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart.png b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart.png
new file mode 100644
index 0000000..7817ec4
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart.png
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/left-page.png b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/left-page.png
new file mode 100644
index 0000000..548564e
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/left-page.png
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/images/right-page.png b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/right-page.png
new file mode 100644
index 0000000..7fd44ae
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/images/right-page.png
Binary files differ
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/main.less b/src/books/hotelEnglishTrainingBrochure2nd/assets/main.less
new file mode 100644
index 0000000..0760098
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/main.less
@@ -0,0 +1,2322 @@
+.hotelEnglishTrainingBrochure2nd {
+    width: 100%;
+    height: 100%;
+
+    // 鑷畾涔夊唴瀹�
+    .page-box {
+        box-sizing: border-box;
+        min-height: 1128px;
+        margin-bottom: 20px;
+        box-shadow: 0 3px 6px 1px #00000029;
+        background-color: #fff;
+    }
+
+    .page-main {
+        width: 100% !important;
+        height: 100% !important;
+        overflow: auto;
+        position: relative;
+    }
+
+
+    .follow-box {
+        width: 500px;
+        height: 100px;
+        position: fixed;
+        background-color: #2ecc71;
+        color: white;
+        padding: 10px;
+        border-radius: 5px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+        display: none;
+        min-width: 150px;
+    }
+
+    .wh-no {
+        white-space: nowrap;
+    }
+
+    .c-g {
+        color: green;
+    }
+
+    .c-r {
+        color: red;
+    }
+
+    .t-right {
+        text-align: right;
+    }
+
+    .mr-0 {
+        margin: 0;
+    }
+
+    .mt-10 {
+        margin-top: 10px !important;
+    }
+
+    .mt-20 {
+        margin-top: 20px !important;
+    }
+
+    .table-pad {
+        padding: 1em 0.7em !important;
+    }
+
+    .mt-30 {
+        margin-top: 30px !important;
+    }
+
+    .mt-70 {
+        margin-top: 70px;
+    }
+
+    .mb-10 {
+        margin-bottom: 10px;
+    }
+
+    .mb-30 {
+        margin-bottom: 30px !important;
+    }
+
+    .ma-l {
+        margin-left: 8%;
+    }
+
+    .ma-0 {
+        margin: 0% !important;
+    }
+
+    .pd-5 {
+        padding: 0 5px;
+    }
+
+    .w100 {
+        width: 100%;
+    }
+
+    .w80 {
+        width: 80%;
+    }
+
+    .w70 {
+        width: 70%;
+    }
+
+    .w25 {
+        width: 25%;
+    }
+
+    .w20 {
+        width: 20%;
+    }
+
+    .fz-13 {
+        font-size: 13px !important;
+    }
+
+    .fz-14 {
+        font-size: 14px !important;
+    }
+
+    .fz-16 {
+        font-size: 16px !important;
+    }
+
+    .fz-18 {
+        font-size: 18px !important;
+    }
+
+    .fz-20 {
+        font-size: 20px;
+    }
+
+    .img-0 {
+        width: 100%;
+    }
+
+    .img-c {
+        width: 70%;
+    }
+
+    .pt-20 {
+        padding-top: 20px;
+    }
+
+    .td-0 {
+        text-indent: 0em !important;
+    }
+
+    .td-1 {
+        text-indent: 1em !important;
+    }
+
+    .td-2 {
+        text-indent: 2em !important;
+    }
+
+
+    td {
+        padding: 5px 10px;
+    }
+
+    .fl {
+        display: flex;
+    }
+
+    .ju-cn {
+        justify-content: center;
+    }
+
+    .ju-ev {
+        justify-content: space-evenly;
+    }
+
+    .jc-fs {
+        justify-content: flex-start;
+    }
+
+    .fw-w {
+        flex-wrap: wrap;
+    }
+
+    .fd-c {
+        flex-direction: column;
+    }
+
+    .fd-r {
+        flex-direction: row-reverse;
+    }
+
+    .al-c {
+        align-items: center;
+    }
+
+    .al-fe {
+        align-items: flex-end;
+    }
+
+    .ac-f {
+        align-content: flex-end;
+    }
+
+    .jc-fe {
+        justify-content: flex-end;
+    }
+
+    .jc-c {
+        justify-content: center;
+    }
+
+    .jc-sa {
+        justify-content: space-around
+    }
+
+    .ml-40 {
+        margin-left: 40px;
+    }
+
+    .mr-70 {
+        margin-right: 70px;
+    }
+
+    .mr-10 {
+        margin-right: 10px;
+    }
+
+    .pad-t-55 {
+        padding-top: 55px;
+    }
+
+    .ma-t-30 {
+        margin-top: 30px;
+    }
+
+    .ma-t-20 {
+        margin-top: 20px;
+    }
+
+    .pad-l-60 {
+        padding-left: 60px;
+    }
+
+    .pad-l-80 {
+        padding-left: 80px;
+    }
+
+
+    .mb-45 {
+        margin-bottom: 45px;
+    }
+
+    .mb-20 {
+        margin-bottom: 20px !important;
+    }
+
+    .mb-30 {
+        margin-bottom: 30px !important;
+    }
+
+    .page-father {
+        display: flex;
+    }
+
+    .header-left {
+        margin-left: 8%;
+        margin-top: 0;
+        font-size: 16px;
+
+        img {
+            width: 30%;
+            height: auto;
+            object-fit: contain;
+        }
+    }
+
+    .header-left-Text {
+        color: #00aeef;
+
+        span:nth-child(1) {
+            font-weight: bold;
+            font-size: 18px;
+            padding-right: 10px;
+            line-height: 20px;
+        }
+
+        span:nth-child(2) {
+            font-size: 16px;
+            padding-left: 10px;
+            border-left: 1px solid #000;
+            line-height: 20px;
+        }
+    }
+
+    .header-right {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: flex-end;
+        margin-right: 10%;
+        margin-top: 0;
+        font-size: 16px;
+
+        div {
+            width: 9%;
+            text-align: center;
+
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+
+    .header-right-Text {
+        color: #00aeef;
+
+        span:nth-child(1) {
+            font-weight: bold;
+            font-size: 18px;
+            padding-right: 10px;
+            line-height: 20px;
+        }
+
+        span:nth-child(2) {
+            font-size: 16px;
+            padding-left: 10px;
+            border-left: 1px solid #000;
+            line-height: 20px;
+        }
+    }
+
+    /*浜岀骇鏍囬绔犳爣*/
+    .secondsubHead-1 {
+        text-align: left;
+        line-height: 1.1em;
+        font-size: 1em;
+        text-indent: 0em;
+        margin: 20% auto 0.3em auto;
+        color: #888888;
+    }
+
+    .secondsubHead-2 {
+        font-family: "鏂规鏂版姤瀹�";
+        background-color: #7acab4;
+        display: inline-block;
+        align-items: center;
+        text-align: left;
+        color: #fff;
+        border-radius: 10px;
+        padding: 0px 10px;
+        text-indent: 0em;
+        font-size: 22px;
+        line-height: 28px;
+    }
+
+    .tipes {
+        background-color: #e2f2ed;
+        border: 2px solid #96d3c1;
+        padding: 10px;
+    }
+
+
+
+    table {
+        border-color: none !important;
+    }
+
+    .table-th-bc {
+        background-color: #0dbff2;
+        color: #fff;
+    }
+
+    .table-tr-bc {
+        background-color: #c6eafa;
+        color: #000;
+        font-family: "kaiti";
+    }
+
+    .table-textarea {
+        font-size: 14px;
+        font-family: "Times New Roman", "瀹嬩綋";
+        resize: none;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .textarea-box {
+        border: none;
+        text-align: center;
+        width: 84px;
+        height: 36px;
+        overflow: auto;
+        word-break: break-all;
+        resize: none;
+    }
+
+
+    .b0 {
+        border: 0;
+    }
+
+    .task {
+        width: 16%;
+        margin-bottom: 5em;
+        margin-top: 0;
+        border-top: 0.7em solid #5192C6;
+    }
+
+    .task2 {
+        width: 16%;
+        margin-bottom: 5em;
+        margin-top: 0;
+        border-top: 0.7em solid #F89C1C;
+    }
+
+    .task3 {
+        width: 16%;
+        margin-bottom: 5em;
+        margin-top: 0;
+        border-top: 0.7em solid #448D9C;
+    }
+
+    .task4 {
+        width: 16%;
+        margin-bottom: 5em;
+        margin-top: 0;
+        border-top: 0.7em solid #9EAA60;
+    }
+
+    .p-odd {
+        padding-right: 8%;
+    }
+
+    .p-even {
+        padding-left: 8%;
+    }
+
+    .p-continued {
+        text-align: right;
+        font-size: 14px;
+        margin-bottom: 10px;
+    }
+
+    .img-float {
+        width: 310px;
+        float: left;
+        height: auto;
+        margin: auto;
+        margin-right: 20px;
+
+        img {
+            width: 100%;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    .img-rights {
+        width: 310px;
+        float: right;
+        height: auto;
+        margin: auto;
+        margin-left: 20px;
+
+        img {
+            width: 100%;
+        }
+
+        p {
+            margin: 0 !important;
+        }
+    }
+
+    .w430 {
+        width: 430px;
+    }
+
+    .w395 {
+        width: 395px;
+    }
+
+    .w350 {
+        width: 350px;
+    }
+
+    .w290 {
+        width: 290px;
+    }
+
+    .w280 {
+        width: 280px;
+    }
+
+    .w275 {
+        width: 275px;
+    }
+
+    .w270 {
+        width: 270px;
+    }
+
+    .w250 {
+        width: 250px;
+    }
+
+    .w230 {
+        width: 230px;
+    }
+
+    .w220 {
+        width: 220px;
+    }
+
+    .w210 {
+        width: 210px;
+    }
+
+    .w200 {
+        width: 200px;
+    }
+
+    .w180 {
+        width: 180px;
+    }
+
+    .w150 {
+        width: 150px;
+    }
+
+    .w115 {
+        width: 115px;
+    }
+
+    .pdf .fm-zh {
+        font-family: "鏂规姝i粦" !important;
+    }
+
+    .fm-kt {
+        font-family: "kaiti" !important;
+        font-weight: 400;
+    }
+
+    .fm-fs {
+        font-family: "鏂规浠垮畫" !important;
+    }
+
+    div.bk-ztgs {
+        border: 0.15em dotted #5192c6;
+        padding: 0.5em;
+        margin-bottom: 2em;
+        margin-top: 2em;
+        border-radius: 1em;
+        position: relative;
+    }
+
+    p.bj1-ztgs {
+        background-color: #5192c6;
+        color: #ffffff;
+        display: inline-block;
+        font-size: 1em;
+        padding: 0.1em 0.7em 0.12em 0.7em;
+        font-weight: bold;
+        border-radius: 0em;
+        margin-left: 0em;
+        text-align: center;
+        text-indent: 0em;
+        position: absolute;
+        top: -2em;
+    }
+
+
+    .link-float {
+        width: 150px;
+        float: left;
+        height: auto;
+        margin: auto;
+        margin-right: 20px;
+    }
+
+    .imgBox-003 {
+        width: 100%;
+        height: 280px;
+        margin-bottom: 18px;
+    }
+
+
+    .imgBox {
+        display: flex !important;
+        flex-direction: column-reverse !important;
+        position: relative !important;
+
+        .img {
+            color: #7acab4;
+            margin: 0 !important;
+            font-size: 14px !important;
+            position: absolute !important;
+            left: 50% !important;
+            transform: translateX(-50%);
+            bottom: -2% !important;
+        }
+
+        img {
+            height: 80%;
+        }
+    }
+
+    // 棰樼洰
+
+    .textarea-question {
+        border-color: #00aeef !important;
+    }
+
+    .textarea-question:focus {
+        // outline: none;
+        /* 绉婚櫎榛樿鐨勭劍鐐硅疆寤� */
+    }
+
+    .textarea-main {
+        background-color: transparent;
+        max-width: 95%;
+        min-width: 95%;
+        outline: none;
+    }
+
+    .textarea-focused {
+        border-color: #5192c6 !important;
+        box-shadow: #5192c6 !important;
+    }
+
+    .select-border {
+        width: 60px;
+        border: 0;
+        border-bottom: 1px solid #767676;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .btn-border {
+        border-radius: 6px;
+        border-color: #5192C6;
+    }
+
+    .btn-w {
+        cursor: pointer;
+        font-size: 14px;
+        border-width: 1px;
+        width: 80px;
+        height: 30px;
+        background-color: #fff;
+
+        &:hover {
+            background-color: #5192C6;
+            color: #fff;
+        }
+    }
+
+    .parimary-btn {
+        cursor: pointer;
+        min-width: 80px;
+        height: 30px;
+        font-size: 14px;
+        margin-left: 5px;
+        background-color: #5192C6;
+        border-color: #5192C6;
+        border-width: 1px;
+        color: #fff;
+        border-radius: 6px;
+
+        &:hover {
+            background-color: #a1afc8;
+            border-color: #a1afc8;
+        }
+    }
+
+    .event-header-text-bc {
+        background-color: #bbd4ec;
+    }
+
+    .video-title {
+        display: flex;
+        align-items: center;
+
+
+        span {
+            margin-left: 10px;
+            color: #1c9e3a !important;
+            font-weight: bold;
+        }
+    }
+
+    .video-box {
+        margin: 10px 0 20px 0;
+        border: 2px solid #28c4f4;
+        padding: 3% 2% 2% 2%;
+        position: relative;
+    }
+
+
+
+    .video-img {
+        position: absolute;
+        top: -20px;
+        left: -20px;
+    }
+
+
+    .video-box-left {
+        margin: 20px 8% 20px 0;
+        border: 1px dashed #895B2E;
+        padding: 2% 2%;
+    }
+
+    .videoname {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        span {
+            margin-right: 20px;
+        }
+    }
+
+    .collect-btn {
+        cursor: pointer;
+        width: 20px;
+        height: 20px;
+    }
+
+    .collect-btn1 {
+        cursor: pointer;
+        width: 10px;
+        height: 10px;
+        margin-left: 10px;
+        margin-top: 0.8%;
+    }
+
+    .unitImg {
+        position: relative;
+        z-index: 1;
+    }
+
+    .unitBox {
+        z-index: 99;
+        position: absolute;
+        top: -5px;
+        left: 40px;
+    }
+
+    .unit2Box {
+        z-index: 99;
+        position: absolute;
+        top: -200px;
+        left: 40px;
+    }
+
+    .unitGraphic {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: #5192C6;
+        border-radius: 50%;
+        margin-right: 15px;
+    }
+
+    .unit2Graphic {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: #F89C1C;
+        border-radius: 50%;
+        margin-right: 15px;
+    }
+
+    .unit3Graphic {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: #448D9C;
+        border-radius: 50%;
+        margin-right: 15px;
+    }
+
+    .unit4Graphic {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: #9EAA60;
+        border-radius: 50%;
+        margin-right: 15px;
+    }
+
+    // pdf 鏌ョ湅鍣�
+    .pdf-box {
+        margin: 35px 0 20px 0;
+        border: 1px solid #48a65d;
+    }
+
+    .pdf-title {
+        display: flex;
+        background-color: transparent;
+        min-height: 25px;
+        position: relative;
+
+        .bg-img {
+            width: 12%;
+            position: absolute;
+            top: -29.5px;
+        }
+    }
+
+    .pdf-title-name {
+        padding: 0 2%;
+        display: flex;
+        align-items: center;
+        text-indent: 0em;
+        margin: 0 !important;
+        border-right: 1px solid #259e40;
+        color: #259e40;
+
+        img {
+            cursor: pointer;
+            margin-right: 10px;
+        }
+
+        .icon {
+            fill: #078fb9;
+        }
+    }
+
+    .pdf-title-img {
+        width: 75.4%;
+        text-indent: 1em;
+        padding-right: 2%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 0;
+        color: #000;
+
+        span {
+            text-align: center;
+            cursor: pointer;
+            overflow: hidden;
+        }
+
+        img {
+            cursor: pointer;
+        }
+
+        &:hover {
+            text-decoration: underline;
+            color: #259e40;
+        }
+    }
+
+    .unitText {
+        color: #5192C6;
+        font-size: 18px;
+    }
+
+    .unit2Text {
+        color: #F89C1C;
+        font-size: 16px;
+    }
+
+    .unit3Text {
+        color: #448D9C;
+        font-size: 16px;
+    }
+
+    .unit4Text {
+        color: #9EAA60;
+        font-size: 16px;
+    }
+
+
+
+    // 杩佺Щ
+    .bk-bwh {
+        min-height: 800px;
+        background-color: #DFEBF7;
+        font-size: 1.2em;
+        padding: 25px;
+        border: 4px dotted #197ABF;
+    }
+
+    ul {
+        list-style-type: none;
+    }
+
+    li {
+        list-style-type: none;
+    }
+
+    .custom_tag2 {
+        background-color: #F1BE49;
+        color: #FFFFFF;
+        display: inline-block;
+        padding: 0.5px;
+        border-radius: 1.5em;
+        font-size: 1.1em;
+        padding: 2px 10px 2px 10px;
+        font-weight: bold;
+        margin: 0;
+        text-indent: 0em;
+        margin-bottom: 0.5em;
+    }
+
+    .custom_tag1 {
+        background-color: #35ACD6;
+        color: #FFFFFF;
+        display: inline-block;
+        padding: 1px;
+        font-size: 1.1em;
+        padding: 3px 10px 3px 10px;
+        font-weight: bold;
+        box-shadow: 15px 0px 0px 0px #F5D83E, -15px 0px 0px 0px #F5D83E;
+        margin: 0;
+        text-indent: 0em;
+        margin-bottom: 0.5em;
+    }
+
+    .custom_tag {
+        background-color: #35509F;
+        color: #FFFFFF;
+        display: inline-block;
+        padding: 1px;
+        border-radius: 1.5em;
+        font-size: 1.1em;
+        padding: 10px 20px 10px 20px;
+        font-weight: bold;
+        box-shadow: 30px 0px 0px 0px #F5D83E;
+        margin: 0;
+        text-indent: 0em;
+        margin-bottom: 0.5em;
+    }
+
+
+    span.under1 {
+        border-bottom: 2px solid #F0BD4A;
+        border-width: 2px;
+
+    }
+
+    div.bodycontent-div-center {
+        font-family: "DK-HEITI", "鏂规鍏颁涵榛戠畝浣�", "榛戜綋";
+        margin: 1em 1em 1em 1em;
+        font-weight: normal;
+        border-width: 1.5px;
+        border-color: #dfb27d;
+        padding: 1em;
+    }
+
+    img.bodycontent-divcenter-image {
+        float: center;
+        clear: both;
+        height: 140px;
+        margin: 15px;
+    }
+
+    .module_block {
+        display: flex;
+        font-size: 1.1em;
+        position: relative;
+        padding-left: 90px;
+        justify-content: center;
+        align-items: center;
+        margin-right: 91px;
+    }
+
+    .module_block .custom1 {
+        background-color: #9ACC77;
+        padding: 10px 20px;
+        color: #FFFFFF;
+        /* position: absolute; */
+        /* left:0; */
+        /* top: 50%; */
+        border-radius: 0.5em 0em 0em 0.5em;
+        /* transform: translateY(-50%); */
+    }
+
+    .module_block .custom2 {
+        background-color: #E9F3E0;
+        padding: 10px 20px;
+        color: #75A64E;
+        font-weight: bold;
+        border-radius: 0em 0.5em 0.5em 0em;
+    }
+
+
+
+    div.bodycontent-div-left1 {
+        font-family: "DK-HEITI", "鏂规鍏颁涵榛戠畝浣�", "榛戜綋";
+        margin: 1em 1em 1em 1em;
+        font-weight: normal;
+        border-width: 1.5px;
+        border-color: #dfb27d;
+        padding: 1em;
+        background-color: #F0F8FF;
+    }
+
+    div.bodycontent-div-left {
+        font-family: "DK-HEITI", "鏂规鍏颁涵榛戠畝浣�", "榛戜綋";
+        margin: 1em 1em 1em 1em;
+        font-weight: normal;
+        border-width: 1.5px;
+        border-color: #dfb27d;
+        padding: 1em;
+    }
+
+    img.bodycontent-divright-image {
+        float: right;
+        clear: both;
+        height: 140px;
+        margin: 15px;
+    }
+
+    img.bodycontent-divleft-image {
+        float: left;
+        clear: both;
+        height: 110px;
+        margin: 15px;
+    }
+
+
+    div.bodystyle {
+        text-align: justify;
+        margin: 0% 12% 0% 12%;
+        line-height: 30px;
+        min-height: 968px;
+    }
+
+    // div.bodystyle-left {
+    //     text-align: justify;
+    //     margin: 13% 3% 10% 13%;
+    //     line-height: 30px;
+    // }
+
+    .UnitCover {
+        display: flex;
+        justify-content: space-between;
+
+        .UnitCover-left {
+            min-height: 1128px;
+            min-width: 40%;
+            margin-right: 3px;
+            background-color: #c6eafa;
+        }
+
+        .UnitCover-right {
+            min-height: 1128px;
+            min-width: 59.5%;
+            // background-color: #93d9f7;
+
+            .UnitCover-right-top {
+                padding-top: 50%;
+                background-color: #93d9f7;
+                margin-bottom: 5px;
+
+                div {
+                    padding: 10px 10px;
+                    background-color: #0dbff2;
+                }
+            }
+
+            .UnitCover-right-bottom {
+                padding-bottom: 68%;
+                background-color: #93d9f7;
+
+                div {
+                    padding: 10px 10px 80px 10px;
+                    background-color: #0dbff2;
+
+                    .content {
+                        text-indent: 1em;
+                        color: #fff;
+                        font-size: 14px;
+                        line-height: 25px;
+                    }
+                }
+            }
+        }
+
+    }
+
+    .Unit-title {
+        margin-left: 2%;
+        margin-bottom: 70px;
+        padding: 150px 30px 20px 0;
+        width: 75%;
+        color: #fff;
+        background-color: #1d9438;
+        position: relative;
+        overflow: hidden;
+
+        p {
+            font-size: 30px;
+            text-align: right;
+        }
+    }
+
+
+
+
+    .Unit-title::after {
+        content: '';
+        position: absolute;
+        right: -1px;
+        bottom: -1px;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: 0px 0 50px 40px;
+        /* 璋冩暣杩欎釜鍊兼潵鏀瑰彉缂哄け涓夎褰㈢殑澶у皬 */
+        border-color: #fff transparent #fff transparent;
+        /* 浣跨敤涓庤儗鏅浉鍚岀殑棰滆壊鏉モ�滃垏鎺夆�濊 */
+        z-index: 2;
+    }
+
+
+    .Unit-content {
+        margin: 0 12%;
+    }
+
+    .unit-title-box {
+        display: flex;
+        align-items: flex-end;
+        width: 100%;
+        min-height: 40px;
+
+        p:nth-child(1) {
+            display: inline-block;
+            width: 13%;
+            height: 45px;
+            background-color: #aae0f9;
+            margin-bottom: 25px;
+        }
+
+        div {
+            width: 18%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+            overflow: hidden;
+
+            img {
+                display: inline-block;
+                width: 50%;
+            }
+
+            p {
+                display: inline-block;
+                margin-top: 5px;
+                font-size: 30px;
+                color: #fff;
+                padding: 10px 5px;
+                background-color: #15c0f2;
+                padding-bottom: 30px;
+
+            }
+        }
+
+
+        div::after {
+            content: '';
+            position: absolute;
+            right: 0px;
+            bottom: 0px;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0px 0 25px 150px;
+            /* 璋冩暣杩欎釜鍊兼潵鏀瑰彉缂哄け涓夎褰㈢殑澶у皬 */
+            border-color: #fff transparent #fff transparent;
+            /* 浣跨敤涓庤儗鏅浉鍚岀殑棰滆壊鏉モ�滃垏鎺夆�濊 */
+            z-index: 2;
+        }
+
+        div::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0px;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0px 150px 25px 0px;
+            /* 璋冩暣杩欎釜鍊兼潵鏀瑰彉缂哄け涓夎褰㈢殑澶у皬 */
+            border-color: #fff transparent #fff transparent;
+            /* 浣跨敤涓庤儗鏅浉鍚岀殑棰滆壊鏉モ�滃垏鎺夆�濊 */
+            z-index: 2;
+        }
+
+        .unit-title-text {
+            color: #00aeef;
+            text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
+            padding: 0 5% 0 5px;
+            line-height: 45px;
+            font-size: 20px;
+            font-weight: bold;
+            margin-bottom: 25px;
+            background-image: linear-gradient(to right, #b6e4f9, transparent);
+        }
+    }
+
+    .box-title {
+        padding: 0px 15px;
+        color: #fff;
+
+        text-indent: 0em;
+        border-radius: 0 10px 0 0;
+        background-color: #1C9E3A;
+        position: absolute;
+        top: -15px;
+        left: 0;
+    }
+
+    .uploadFiles {
+        display: flex;
+        align-items: flex-end;
+        color: #000;
+
+        img {
+            cursor: pointer;
+            width: 25px;
+            margin-right: 10px;
+        }
+
+        span {
+
+            font-size: 14px;
+            line-height: 20px;
+            font-weight: 400;
+            cursor: pointer;
+        }
+
+        &:hover {
+            color: #1C9E3A !important;
+        }
+
+    }
+
+
+
+    .ppt-box {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        line-height: 25px;
+        font-family: "kaiti";
+
+        p {
+            text-indent: 0em;
+            font-size: 1em;
+            margin-right: 20px;
+            margin-bottom: 0;
+
+            &:hover {
+                text-decoration: underline;
+                color: #1C9E3A;
+            }
+        }
+
+        img {
+            cursor: pointer;
+            width: 25px;
+        }
+
+
+    }
+
+
+
+    .unit-title-parent {
+        text-align: center;
+        margin: 10% 0;
+    }
+
+    .unit-title {
+        font-family: "鏂规姝i粦";
+        display: inline-block;
+        font-size: 1.6em;
+        font-weight: 500;
+        border-bottom: 1px solid #0082D4;
+        padding: 10px 0;
+    }
+
+    .bodyPic {
+        position: relative;
+    }
+
+    .bodyPic-text {
+        position: absolute;
+        top: 15%;
+        left: 8%;
+
+        p {
+            font-family: kaiti;
+            font-size: 16px;
+            line-height: 25px;
+        }
+
+        span {
+            color: #006e92;
+        }
+    }
+
+    span.zt-0 {
+        color: #0087AF;
+    }
+
+    p.pzt-0 {
+        color: #0087AF;
+        font-size: 18px;
+    }
+
+    p.pzt-0-right {
+        font-size: 18px;
+        color: #0087AF;
+        text-align: right;
+    }
+
+    p.pzt-1 {
+        font-weight: bold;
+        color: #0087AF;
+        font-size: 18px;
+    }
+
+    div.sgc-toc-title {
+        font-size: 2em;
+        font-weight: bold;
+        margin-bottom: 1em;
+        text-align: center;
+    }
+
+
+    .block {
+        font-family: "kaiTi";
+        text-indent: 2em;
+        line-height: 30px;
+        font-size: 17px;
+        text-align: justify;
+    }
+
+    .tl-c {
+        text-align: center;
+    }
+
+    .img {
+        text-align: center;
+        font-size: 14px;
+        margin-left: 0%;
+        margin-right: 0%;
+        text-indent: 0em;
+    }
+
+    .img1 {
+        font-family: 'FZLTXIHJW';
+        text-align: right;
+        font-size: 0.85em;
+        margin-left: 0%;
+        margin-right: 2em;
+        text-indent: 0em;
+    }
+
+
+    p {
+        font-family: "鏂规瀹嬩綋";
+        margin-top: 0em;
+        margin-bottom: 0.2em;
+        text-indent: 0em;
+        line-height: 30px;
+        text-align: justify;
+    }
+
+    .cover {
+        width: 100%;
+        padding: 0px;
+    }
+
+    .center {
+        text-align: center;
+        margin-left: 0%;
+        margin-right: 0%;
+        text-indent: 0em;
+    }
+
+    .center-ss {
+        text-align: center;
+        color: #EF8472;
+        font-weight: bold;
+        margin-left: 0%;
+        margin-right: 0%;
+        text-indent: 0em;
+    }
+
+    .left {
+        text-indent: 0em;
+        margin-bottom: 0px;
+        line-height: 25px;
+    }
+
+    .left3 {
+        line-height: 25px;
+
+    }
+
+    .img-0 {
+        width: 100%;
+    }
+
+    .img-a {
+        width: 95%;
+    }
+
+    .img-b {
+        width: 70%;
+    }
+
+    .img-c {
+        width: 60%;
+    }
+
+    .img-d {
+        width: 50%;
+    }
+
+    .img-e {
+        width: 45%;
+    }
+
+    .img-f {
+        width: 40%;
+    }
+
+    .img-g {
+        width: 30%;
+    }
+
+    .img-h {
+        width: 20%;
+    }
+
+    .img-h {
+        width: 20%;
+    }
+
+    .img-15 {
+        width: 15%;
+    }
+
+
+    .img-i {
+        width: 10%;
+    }
+
+    .img-j {
+        width: 5%;
+    }
+
+    .img-k {
+        width: 2%;
+    }
+
+
+
+
+    .foreword-img-box {
+        text-align: end;
+        padding: 12% 0 10% 0;
+
+        img {
+            width: 30%;
+        }
+    }
+
+    .copyright-left {
+        padding-right: 5%;
+        border-right: 1px solid #000;
+        margin-right: 5px;
+
+        p {
+            font-size: 16px;
+            font-weight: bold;
+        }
+    }
+
+    .copyright-right {
+        padding-right: 5%;
+        border-left: 1px solid #000;
+
+        p {
+            text-indent: 1em;
+            font-size: 16px;
+        }
+    }
+
+    .copyrightPage-top {
+        width: 100%;
+        height: 80px;
+        background-image: linear-gradient(to bottom, #7dd3f6, transparent);
+        /* 璁剧疆浠庝笂鍒颁笅鐨勬笎鍙� */
+    }
+
+    .copyrightPage-bottom {
+        width: 100%;
+        height: 80px;
+        background-image: linear-gradient(to top, #7dd3f6, transparent);
+        /* 璁剧疆浠庝笂鍒颁笅鐨勬笎鍙� */
+
+        position: relative;
+
+        .copyrightPage-left-img {
+            width: 18%;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+        }
+
+        .copyrightPage-left-box {
+            background-color: #00aeef;
+            color: #fff;
+            padding: 10px 8px;
+            border-radius: 50%;
+            position: absolute;
+            left: 8%;
+            bottom: 45px;
+        }
+
+
+        .copyrightPage-right-img {
+            width: 18%;
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+
+        .copyrightPage-right-box {
+            background-color: #00aeef;
+            color: #fff;
+            padding: 10px 8px;
+            border-radius: 50%;
+            position: absolute;
+            right: 8%;
+            bottom: 45px;
+        }
+    }
+
+    // epub涓嚜甯︾殑鏍峰紡
+    .editorialBoard {
+        background-color: #fff;
+        border-radius: 50%;
+        /* 椤堕儴鍜屽簳閮ㄤ负0锛屽乏鍙充袱渚т负50% */
+        padding: 5% 10% 20% 10%;
+    }
+
+    .border {
+        margin: 10px 0;
+        padding: 5px 10px;
+        border: 1px solid #00aeef;
+    }
+
+    .border1 {
+        margin: 10px 20px;
+        padding: 5px 10px 0px 10px;
+        border: 1px solid #00aeef;
+
+        p {
+            font-family: "kaiti";
+            line-height: 20px;
+        }
+
+        table {
+            border-color: none !important;
+        }
+
+        .table-th-bc {
+            background-color: #fff;
+            color: #000;
+        }
+
+        .table-tr-bc {
+            background-color: transparent;
+            color: #000;
+            font-family: "kaiti";
+        }
+
+        .table-textarea {
+            font-size: 14px;
+            font-family: "Times New Roman", "瀹嬩綋";
+            resize: none;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    .series {
+        padding: 12% 11%;
+        background-color: #e1f1fa;
+    }
+
+    .openingScene {
+
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        min-height: 100%;
+    }
+
+    .quotation-box {
+        padding: 15% 10% 30% 32%;
+    }
+
+    .sub-Title-l {
+        font-size: 3em;
+        color: #fff;
+        font-family: "鏂规姝i粦";
+        font-weight: 800;
+        margin: 0 !important;
+    }
+
+    .firstTitle-l {
+        font-size: 1.5em;
+        color: #fff;
+        font-family: "鏂规姝i粦";
+        font-weight: 400;
+        margin: 0 !important;
+    }
+
+
+    .seriesTitle {
+        font-size: 2em;
+        color: #000;
+        font-weight: 400;
+        text-align: center;
+        padding: 15% 0 10% 0;
+    }
+
+    .g-pic {
+        height: 2.5em;
+        vertical-align: middle;
+    }
+
+    .titleQuot-c {
+        color: #00aeef;
+        text-indent: 0em;
+        font-size: 1.2em;
+        line-height: 1.3em;
+        text-align: center;
+        font-weight: 800;
+        padding: 0 5%;
+    }
+
+
+    div.bk3 {
+        background-color: #d6ece5;
+        border: 1px solid #7acab4;
+        padding: 25px 19px 20px 19px;
+        margin-top: 2em;
+        margin-bottom: 1em;
+        position: relative;
+    }
+
+    .bk3-titOne {
+        position: absolute;
+        top: -18px;
+        left: 20%;
+    }
+
+    .bk3-titTwo {
+        position: absolute;
+        top: -18px;
+        left: 38%;
+    }
+
+    .bk3-titThree {
+        position: absolute;
+        top: -18px;
+        right: 38%;
+    }
+
+    .bk3-titFour {
+        position: absolute;
+        top: -18px;
+        right: 20%;
+    }
+
+    .bk3-top {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #fff;
+        border-radius: 0 25px 0 0;
+        transform: rotate(90deg);
+        border-top: 1px solid #7acab4;
+        border-right: 1px solid #7acab4;
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        /* 鏃嬭浆褰㈡垚鎵囧舰 */
+    }
+
+    .bk3-top-right {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #fff;
+        border-radius: 0 25px 0 0;
+        transform: rotate(180deg);
+        border-top: 1px solid #7acab4;
+        border-right: 1px solid #7acab4;
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        /* 鏃嬭浆褰㈡垚鎵囧舰 */
+    }
+
+
+    .bk3-bottom {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #fff;
+        border-radius: 0 25px 0 0;
+        transform: rotate(360deg);
+        border-top: 1px solid #7acab4;
+        border-right: 1px solid #7acab4;
+        position: absolute;
+        bottom: -5.5px;
+        left: -2px;
+        /* 鏃嬭浆褰㈡垚鎵囧舰 */
+    }
+
+    .bk3-bottom-right {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #fff;
+        border-radius: 0 25px 0 0;
+        transform: rotate(270deg);
+        border-top: 1px solid #7acab4;
+        border-right: 1px solid #7acab4;
+        position: absolute;
+        bottom: -5.5px;
+        right: -2px;
+        /* 鏃嬭浆褰㈡垚鎵囧舰 */
+    }
+
+    .view-translation {
+        position: relative;
+        z-index: 0;
+
+        p {
+            color: #fff;
+            position: absolute;
+            top: 6%;
+            left: 8%;
+            cursor: pointer;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+
+
+
+    .firstLevel-t {
+        text-indent: 2em;
+        font-size: 1.1em;
+        font-weight: bold;
+        color: #1C9E3A;
+        margin-top: 50px;
+        margin-bottom: 20px;
+    }
+
+    .Secondary-t {
+        text-indent: 2em;
+        font-size: 1.1em;
+        font-weight: bold;
+        color: #1C9E3A;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+
+    h2 {
+        font-family: '鏂规瀹嬮粦';
+        font-weight: 400;
+        margin: 30px 0;
+    }
+
+    .preface {
+        font-family: "鏂规鏂颁功瀹�";
+        text-indent: 2em;
+        color: #000;
+    }
+
+
+    .right-info {
+        font-family: "kaiti";
+        text-align: right;
+        margin-bottom: 0.5em;
+    }
+
+    .imgdescript-l {
+        margin-left: -5%;
+    }
+
+
+    .titleQuot-l {
+        text-indent: 0em;
+        margin: 15px 0 10px 0;
+        font-size: 1.2em;
+        font-weight: bold;
+    }
+
+    .poemtitle-l {
+        font-family: "鏂规鍏颁涵绾ょ粏";
+        font-size: 1.1em;
+        margin: 15px 0 10px 0;
+        font-weight: bold;
+    }
+
+    .quotation {
+        font-family: "鏂规浠垮畫";
+        text-align: left;
+        text-indent: 2em;
+        margin: 0.1em auto;
+        line-height: 35px;
+    }
+
+    .titleQuot-Unit {
+        color: #fff;
+        text-indent: 0em;
+        font-weight: bold;
+        font-size: 1.2em;
+        margin: 20px 0 0 0;
+        text-decoration: underline;
+    }
+
+
+
+    .titleQuot-1 {
+        color: #0cbff1;
+        font-size: 20px;
+        font-weight: bold;
+        text-indent: 0em;
+    }
+
+    /*搴曡壊*/
+    .bgColor {
+        padding: 2px 5px;
+        color: #000;
+        background: #aae0f9;
+    }
+
+    // 鎷撳睍瀛︿範
+    .ExpandLearning {
+        padding: 40px 20px 20px 20px;
+        background: #e1f4fc;
+        border-top: 2px solid #008cb7;
+        margin: 1em auto;
+        position: relative;
+    }
+
+    .ExpandLearning-title {
+        text-indent: 0;
+        position: absolute;
+        top: -16px;
+        left: 0px;
+
+        span {
+            background-color: #e1f4fc;
+            height: 20px;
+            width: 30px;
+            padding: 5px;
+            border: 1px solid #008cb7;
+            border-radius: 50%;
+            margin-right: 1px;
+        }
+    }
+
+    .imgdescript {
+        font-size: 13px;
+        text-indent: 0em;
+        text-align: center;
+    }
+
+    .imgdescript-title {
+        color: #7acab4;
+        font-size: 15px;
+        text-indent: 0em;
+        text-align: center;
+    }
+
+    .learningDetection {
+        font-family: "姹変华姝i粦";
+        background-color: #6bcff6;
+        font-weight: bold;
+        margin: 30px 0 20px 0;
+    }
+
+    .poemtitle {
+        text-align: center;
+        font-weight: bold;
+        font-family: "鏂规鍏颁涵缁嗛粦";
+    }
+
+    .bold {
+        color: #00aeef;
+        font-weight: bold;
+        cursor: pointer;
+    }
+
+
+
+    .bold1 {
+        padding: 0px 0px 0px 58px;
+        color: #000;
+        font-weight: bold;
+    }
+
+    .bold2 {
+        font-weight: bold;
+    }
+
+    .noteContent {
+        font-size: 13.5px;
+        word-break: break-all;
+        margin: 0 !important;
+        line-height: 25px;
+
+        .noteContent-title {
+            font-size: 13.5px;
+            font-weight: bold;
+            margin: 0 !important;
+        }
+    }
+
+    sup {
+        cursor: pointer;
+    }
+}
+
+.dialogQuestion {
+    background-color: #1c9e3a;
+    height: 80px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+
+    span {
+        color: #fff;
+        font-size: 16px;
+        padding: 0 40px 0 20px;
+
+    }
+}
+
+.pdfModal {
+    width: 100%;
+    height: 90vh;
+
+
+    .pdfBox-component {
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        .preview {
+            width: 100%;
+            height: 100%;
+
+            .imageBox {
+                height: calc(100% - 30px);
+                overflow-x: hidden;
+                overflow-y: auto;
+                background: #ccc;
+                box-sizing: border-box;
+            }
+
+            .imageBox:hover {
+                cursor: zoom-in !important;
+            }
+
+            ::v-deep .el-dialog__header {
+                background-color: rgba(0, 0, 0, 0.8);
+
+                .header_title {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: #fff;
+                    font-weight: 900;
+                    font-size: 16px;
+                    font-family: 'FZLTXIHJW';
+
+                    span:nth-child(2):hover {
+                        cursor: pointer;
+                    }
+                }
+
+                ::v-deep .el-dialog__title,
+                ::v-deep .el-dialog__headerbtn .el-dialog__close {
+                    color: #fff;
+                    font-weight: 900;
+                    font-size: 16px;
+                    font-family: 'FZLTXIHJW';
+                }
+            }
+
+            .bottom_tool {
+                height: 30px;
+                background-color: rgba(0, 0, 0, 0.8);
+                display: flex;
+                justify-content: flex-end;
+                align-items: center;
+
+                svg {
+                    margin-right: 15px;
+                    fill: #d1d1d1;
+                }
+
+                svg:hover {
+                    fill: #fff;
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .notBox {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: calc(100% - 30px);
+            min-height: 300px;
+        }
+    }
+}
+
+.custom-dialog {
+    overflow: hidden !important;
+
+    .el-dialog__body {
+        padding: 0;
+    }
+
+    .el-dialog__header {
+        background-color: rgba(0, 0, 0, 0.8);
+
+        .header_title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #fff;
+            font-weight: 900;
+            font-size: 16px;
+            font-family: 'FZLTXIHJW';
+
+            span:nth-child(2):hover {
+                cursor: pointer;
+            }
+        }
+
+        .el-dialog__title,
+        .el-dialog__headerbtn .el-dialog__close {
+            color: #fff;
+            font-weight: 900;
+            font-size: 16px;
+            font-family: 'FZLTXIHJW';
+        }
+    }
+}
+
+.examination {
+    height: calc(100% - 15px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.header_title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    // color: #fff;
+    font-weight: 900;
+    font-size: 16px;
+    font-family: 'FZLTXIHJW';
+
+    span:nth-child(2):hover {
+        cursor: pointer;
+    }
+}
+
+// 琛ㄦ牸鏍峰紡
+table {
+    border-collapse: collapse; //琛ㄦ牸鐨勮竟妗嗗悎骞讹紝濡傛灉鐩搁偦锛屽垯鍏辩敤涓�涓竟妗嗐��
+    border-spacing: 0px; //璁剧疆琛屼笌鍗曞厓鏍艰竟妗嗙殑闂磋窛銆�
+}
+
+// @font-face {
+//     font-family: '鏂规浠垮畫';
+//     src: url('./Fonts/FZFSK.TTF');
+// }
+
+// @font-face {
+//     font-family: '鏂规瀹嬩綋';
+//     src: url('./Fonts/FZSSK.TTF');
+// }
+
+// @font-face {
+//     font-family: '鏂规瀹嬮粦';
+//     src: url('./Fonts/FZSHJW.TTF');
+// }
+
+// @font-face {
+//     font-family: '鏂规浠垮畫';
+//     src: url('./Fonts/FZFSK.TTF');
+// }
+
+// @font-face {
+//     font-family: '鏂规鍏颁涵缁嗛粦';
+//     src: url('./Fonts/FZLTXIHK.TTF');
+// }
+
+.input-bottom-border {
+    border: 0;
+    border-bottom: 1px solid #000000;
+    background-color: transparent;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.btn-box {
+    margin-left: 5px;
+    cursor: pointer;
+    text-indent: 0;
+    display: inline-block;
+    border: 1px solid #0cbff1;
+    height: 22px;
+    padding: 5px;
+    background-color: #0cbff1;
+    border-radius: 5px;
+
+    svg {
+        fill: #fff;
+    }
+
+    &:hover {
+        background-color: #fff;
+
+        svg {
+            fill: #0cbff1;
+        }
+    }
+}
+
+// 闅愯棌椤甸潰
+.hidePage {
+    min-height: 0 !important;
+    height: 0 !important;
+    box-shadow: none !important;
+}
+
+/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
+
+@media screen and (max-width: 1024px) {
+    .pdfModal {
+        width: 100%;
+        height: 80vh;
+    }
+
+    .custom-dialog {
+        .el-dialog {
+            width: 90vw !important;
+        }
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .pdfModal {
+        width: 100%;
+        height: 60vh;
+    }
+
+    .custom-dialog {
+        .el-dialog {
+            width: 90vw !important;
+        }
+    }
+}
+
+@media (max-width: 660px) {
+    .hotelEnglishTrainingBrochure2nd {
+
+        .pad-l-80 {
+            padding-left: 10px;
+        }
+
+        .mr-70 {
+            margin-right: 15px;
+        }
+
+        /* 鍒嗛〉padding */
+        .padding-93 {
+            padding: 0 20px;
+        }
+
+        .padding-102 {
+            padding: 0 20px;
+        }
+
+
+        .img-float {
+            width: 130px;
+        }
+
+        .img-rights {
+            width: 130px;
+        }
+
+        .btn-w {
+            width: 42px;
+        }
+
+        .unitText {
+            color: #5192C6;
+            font-size: 10px;
+        }
+
+        .unit2Text {
+            color: #F89C1C;
+            font-size: 10px;
+        }
+
+        .wh-no {
+            white-space: wrap;
+        }
+
+        td {
+            padding: 5px 10px;
+        }
+
+        .copyright-left {
+            padding-right: 5%;
+            border-right: 1px solid #000;
+            margin-right: 5px;
+
+            p {
+                text-indent: 0em;
+                font-size: 12px;
+                font-weight: bold;
+                text-wrap: nowrap;
+            }
+        }
+
+        .copyright-right {
+            padding-right: 5%;
+            border-left: 1px solid #000;
+
+            p {
+                text-indent: 1em;
+                font-size: 12px;
+                text-wrap: nowrap;
+            }
+        }
+    }
+}
+
+@media (min-width: 660px) {
+    .hotelEnglishTrainingBrochure2nd {
+        .padding-93 {
+            padding: 0 93px 0px 93px;
+        }
+
+        .padding-102 {
+            padding: 0 102px 0 102px;
+        }
+    }
+
+
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: rgba(0, 0, 0, 0.1);
+    -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+    height: 5px;
+    background-color: rgba(125, 125, 125, 0.3);
+    -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    width: 5px;
+    background-color: rgba(125, 125, 125, 0.3);
+    -webkit-border-radius: 6px;
+}
\ No newline at end of file
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue b/src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue
new file mode 100644
index 0000000..63fa220
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue
@@ -0,0 +1,2319 @@
+<template>
+  <div class="chapter" num="2">
+    <!-- 295椤� -->
+    <div class="page-box" page="4">
+      <div v-if="showPageList.indexOf(4) > -1">
+        <div class="UnitCover">
+          <div class="UnitCover-left"></div>
+          <div class="UnitCover-right">
+            <div class="UnitCover-right-top">
+              <div>
+                <h1 class="sub-Title-l">Project 12</h1>
+                <p><br /></p>
+                <h1 class="firstTitle-l">Cashier's Service<br />鏀堕摱鏈嶅姟</h1>
+              </div>
+            </div>
+            <div class="UnitCover-right-bottom">
+              <div>
+                <p class="titleQuot-Unit">Project Goals</p>
+                <p class="content">
+                  After studying this project, you should be able to:
+                </p>
+                <p class="content">
+                  鈥� tell the main duties of a cashier in a hotel;
+                </p>
+                <p class="content">鈥� check out the guests;</p>
+                <p class="content">
+                  鈥� exchange foreign currency for the guests;
+                </p>
+                <p class="content">
+                  鈥� help the guests to fi ll out a foreign currency exchange<br />
+                  memo;
+                </p>
+                <p class="content">鈥� know about online checkout;</p>
+                <p class="content">鈥� develop good professional qualities.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 296椤� -->
+    <div class="page-box" page="5">
+      <div v-if="showPageList.indexOf(5) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="unit-title-box">
+          <p></p>
+          <div>
+            <img class="" src="../../assets/images/0002-01.jpg" alt="" />
+            <p class="td-0">Activity 1</p>
+          </div>
+          <p class="td-0 unit-title-text">Get to Know the Post 宀椾綅璁ょ煡</p>
+        </div>
+        <div class="bodystyle">
+          <p class="titleQuot-1">1. Objectives锛堢洰鏍囷級</p>
+          <p class="content td-0">
+            鈥� To get to know the main responsibilities of a cashier;
+          </p>
+          <p class="content td-0">
+            鈥� To get to know the job requirements of a cashier.
+          </p>
+          <p class="titleQuot-1">2. Identify the Responsibility锛堟槑纭亴璐o級</p>
+          <p class="content td-0">Cashier:</p>
+          <div class="border">
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />Settle bills for the guests鈥� lodging
+              accommodations and any
+              other fees during their stay;
+            </p>
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />Explain items charged on the bill;
+            </p>
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />Complete check-out procedures;
+            </p>
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />Operate computer billing system;
+            </p>
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />Handle various methods of payment;
+            </p>
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />Give
+              the guests their change;
+            </p>
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />Convert foreign currency for hotel guests;
+            </p>
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />Cash
+              traveler's checks and personal checks for hotel guests;
+            </p>
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />
+              Maintain related records and fi les regarding fi nancial
+              transactions;
+            </p>
+            <p class="content td-0 fz-14">
+              <img class="img-k" src="../../assets/images/a1.jpg" alt="" />Answer guests鈥� inquiries regarding fees and
+              other related
+              services.
+            </p>
+          </div>
+          <div class="video-box">
+            <p class="center text td-0">
+              <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
+                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
+                controlslist="nodownload" class="w100 video"></video>
+            </p>
+            <p class="center videoname">
+              <span>Project 12-Activity 1-3</span>
+              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoOne ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'
+                " placement="top-start">
+                <img :src="collectResourceList.findIndex(
+                  (item) => item.id == '50ed3234d92cce02be3d277b0e1f88b2'
+                ) > -1
+                  ? collectCheck
+                  : collectImg
+                  " alt="" class="collect-btn" @click="handleCollect('video-01')" />
+              </el-tooltip>
+            </p>
+          </div>
+          <p class="titleQuot-1">
+            3. Watch the Video on the Post锛堣鐪嬪矖浣嶈棰戯級
+          </p>
+          <p class="content">
+            to watch the video, listen to the introduction to the post as the
+            convention 锛� exhibition staff , and then fi ll in the blank with a
+            proper word given below.
+          </p>
+          <div class="border">
+            <p class="contentc td-0 fz-14">
+              financial銆�check-out銆�accommodations銆�accurately銆�banking銆�exchange銆�parking
+            </p>
+          </div>
+          <p class="content td-2">
+            Cashier's service in hotels involves collecting money from guests
+            for their lodging (1)
+            <select class="select-border" :disabled="selectData.isComplete" @change="saveSelectData"
+              v-model="selectData.answerList[0].value" style="width: 20%">
+              <option v-for="(item, index) in selectData.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="selectData.answerList[0].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="selectData.answerList[0].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>
+            and any other fees during their stay, including (2)
+            <select class="select-border" :disabled="selectData.isComplete" @change="saveSelectData"
+              v-model="selectData.answerList[1].value" style="width: 20%">
+              <option v-for="(item, index) in selectData.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="selectData.answerList[1].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="selectData.answerList[1].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>, valet, room service and telephone use fees. It also needs to
+            maintain records and files regarding (3)
+            <select class="select-border" :disabled="selectData.isComplete" @change="saveSelectData"
+              v-model="selectData.answerList[2].value" style="width: 20%">
+              <option v-for="(item, index) in selectData.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="selectData.answerList[2].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="selectData.answerList[2].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>transactions at the front desk. Foreign currency (4)
+            <select class="select-border" :disabled="selectData.isComplete" @change="saveSelectData"
+              v-model="selectData.answerList[3].value" style="width: 20%">
+              <option v-for="(item, index) in selectData.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="selectData.answerList[3].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="selectData.answerList[3].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>also happens to serve foreign guests.
+          </p>
+          <p class="content td-2">
+            The basic duties of hotel cashiers involve good communication
+            skills; settling guests鈥� accounts; completing guests鈥� (5)
+            <select class="select-border" :disabled="selectData.isComplete" @change="saveSelectData"
+              v-model="selectData.answerList[4].value" style="width: 20%">
+              <option v-for="(item, index) in selectData.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="selectData.answerList[4].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="selectData.answerList[4].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>
+            procedures; clarifying customers鈥� questions about the charges;
+            checking and following up on all bills on hold; performing various
+            (6)
+            <select class="select-border" :disabled="selectData.isComplete" @change="saveSelectData"
+              v-model="selectData.answerList[5].value" style="width: 20%">
+              <option v-for="(item, index) in selectData.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="selectData.answerList[5].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="selectData.answerList[5].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>services, such as check cashing (鍏戠幇) and foreign currency
+            exchange; managing safe-deposit boxes, etc.
+          </p>
+          <p class="content td-2">
+            To perform mathematical calculations (璁$畻) (7)
+            <select class="select-border" :disabled="selectData.isComplete" @change="saveSelectData"
+              v-model="selectData.answerList[6].value" style="width: 20%">
+              <option v-for="(item, index) in selectData.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="selectData.answerList[6].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="selectData.answerList[6].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>is important for hotel cashiers.
+          </p>
+          <p class="event-header-text-bc pd-5 mb-20" style="width: 100%" v-if="showAnswerSelect">
+            绛旀锛�1.accommodations銆�2.parking銆�3.financial銆�4.exchange銆�5.check-out銆�6.banking銆�7.accurately
+          </p>
+          <div class="w100 fl ju-cn mb-20 mt-20">
+            <div class="fl ju-ev mt-40" style="width: 80%">
+              <button class="btn-border btn-w" @click="handleDropdown()">
+                鎻愪氦
+              </button>
+              <button class="btn-border btn-w" @click="clearSelectData">
+                閲嶅仛
+              </button>
+              <button @click="showAnswerSelect = !showAnswerSelect" class="parimary-btn">
+                鏌ョ湅绛旀
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">296</div>
+        </div>
+      </div>
+    </div>
+    <!-- 297椤� -->
+    <div class="page-box" page="6">
+      <div v-if="showPageList.indexOf(6) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 2</span><span>Equip Yourself with the Serving Skills</span>
+          </li>
+          <li>鎶�鑳藉涔�</li>
+        </ul>
+        <div class="unit-title-box">
+          <p></p>
+          <div>
+            <img class="" src="../../assets/images/0002-01.jpg" alt="" />
+            <p class="td-0">Activity 2</p>
+          </div>
+          <p class="td-0 unit-title-text">
+            Equip Yourself with the Serving Skills 鎶�鑳藉涔�
+          </p>
+        </div>
+        <div class="bodystyle">
+          <p class="titleQuot-1">1. Objectives锛堢洰鏍囷級</p>
+          <p class="content">
+            鈥� To grasp basic procedures to check out the guests as a cashier;
+          </p>
+          <p class="content">
+            鈥� To grasp basic serving skills to check out the guests as a
+            cashier;
+          </p>
+          <p class="content">鈥� To learn about diff erent ways of payment.</p>
+          <p class="titleQuot-1">
+            2. Go Through the General Procedures锛堜簡瑙f湇鍔℃祦绋嬶級
+          </p>
+          <p class="content">Checking out the guests:</p>
+          <p class="content">
+            Step 1 鈥� Ask about the guest's name and room number;
+          </p>
+          <p class="content">Step 2 鈥� Get back the room card;</p>
+          <p class="content">Step 3 鈥� Prepare the bill;</p>
+          <p class="content">Step 4 鈥� Ask the guest to make the payment;</p>
+          <p class="content">Step 5 鈥� Say goodbye to the guest;</p>
+          <p class="content">
+            Step 6 鈥� Update the room status and create a new record.
+          </p>
+          <p class="titleQuot-1">3. Note the Serving Skills锛堝叧娉ㄦ湇鍔¤鐐癸級</p>
+          <p class="content">
+            As a cashier, you should note the following skill points when
+            checking out the guests.
+          </p>
+          <p class="content">
+            (1) When the guest is checking out at the
+            <span class="bold" id="keyWords" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">cashier's
+              station,</span> the cashier should ask
+            about the guest's name and room number at first. Then remind the
+            guest to return the room card.
+          </p>
+          <p class="content">
+            (2) When preparing the guest's bill, the cashier mainly figures out
+            the total amount of the bill and explains the items to the guest if
+            necessary. The cashier should make clear if the guest has signed any
+            last-minute bills for the mini-bar service or any other hotel
+            services. If the answer is 鈥測es鈥�, the cashier is supposed to call
+            the department <span class="bold">concerned</span>. After all the
+            fees are charged to the master account of the guest, the cashier
+            will <span class="bold">present</span> the bill to the guest and
+            tell him/her the total amount.
+          </p>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">297</div>
+        </div>
+      </div>
+    </div>
+    <!-- 298椤� -->
+    <div class="page-box" page="7">
+      <div v-if="showPageList.indexOf(7) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle">
+          <p class="content">
+            (3) Ask the guest to check the bill again before
+            <span class="bold">drawing up</span> the final bill to avoid any
+            errors. If any questions from the guest about the bill, you may
+            check all items again, check with the guest if he/she is
+            <span class="bold">entitled</span> to any discount, check it with
+            the department concerned and <span class="bold">calculate</span> the
+            bill again. If there were errors, offer to correct the bill
+            immediately and apologize to the guest. If there were no errors,
+            explain the items to the guest.
+          </p>
+          <div class="border">
+            <p class="titleQuot-c">Special Tips</p>
+            <p class="content">Common items to be charged on a bill锛�</p>
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />room
+              rent;
+            </p>
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />telephone rate;
+            </p>
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />laundry service charges;
+            </p>
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />room
+              service charges;
+            </p>
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />dining-hall bills;
+            </p>
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />mini-bar service fees.
+            </p>
+          </div>
+          <p class="content">
+            (4) When the bill is ready, tell the guest the total amount and ask
+            the guest how he/she will make the payment. The methods of payment
+            which are commonly accepted in hotels are 鈥渃ash鈥�, 鈥渃redit card鈥�,
+            鈥�<span class="bold">debit card</span>鈥�,鈥渢raveler's check鈥�, 鈥�<span class="bold">gift certifi cate</span>鈥�,
+            etc.
+          </p>
+          <div class="border">
+            <p class="titleQuot-c">Special Tips</p>
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />
+              Here are commonly accepted international credit cards:
+              <span class="bold">American Express (AE/AX), MasterCard (MC), Visa(VS), enRoute
+                (ER), Eurocard(EC), International Great Wall, International
+                Diner's Club, Federal Card.</span>
+            </p>
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />
+              When a guest is paying by credit card, be sure to check its valid
+              date which can be found at the front bottom of the card.
+            </p>
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />
+              Check if the total amount on the bill goes beyond the
+              <span class="bold">authorized credit limit</span> set by the
+              credit card offi ce. If it is beyond the limit, you may ask the
+              guest if he/she would like to pay in cash to settle the
+              difference.
+            </p>
+          </div>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">298</div>
+        </div>
+      </div>
+    </div>
+    <!-- 299椤� -->
+    <div class="page-box" page="8">
+      <div v-if="showPageList.indexOf(8) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 2</span><span>Equip Yourself with the Serving Skills</span>
+          </li>
+          <li>鎶�鑳藉涔�</li>
+        </ul>
+        <div class="bodystyle">
+          <div class="border">
+            <p class="content">
+              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />
+              Check if the total amount on the bill goes beyond the
+              <span class="bold">authorized credit limit</span> set by the
+              credit card offi ce. If it is beyond the limit, you may ask the
+              guest if he/she would like to pay in cash to settle the
+              difference.
+            </p>
+          </div>
+          <p class="content">
+            (5) Many hotels have a check-out time, which is usually set at noon.
+            For a guest who checks out after 12:00 at noon, charge an extra half
+            of the room rate, and an extra full rate for a guest who checks out
+            after 6:00 p.m.
+          </p>
+          <p class="content">
+            (6) The common way to show money amount is usually together with the
+            <span class="bold">currency</span> type. In English, the written
+            form is 鈥渃urrency type + amount number鈥�, but its oral form reads as
+            鈥渁mount number + currency type鈥�. For example,
+          </p>
+          <div class="bodyPic center mt-10 mb-10">
+            <img src="../../assets/images/0005-01.jpg" style="width: 80%" alt="" />
+          </div>
+          <p class="content">
+            (7) When finishing the checkout, say goodbye to the guest in the way
+            like鈥淲e look forward to serving you again鈥�.As the guest is departing
+            the hotel,extend your wishes to him/her in the way like鈥淲ish you a
+            pleasant journey鈥�.
+          </p>
+          <div class="view-translation">
+            <img class="img-f" src="../../assets/images/0003-01.jpg" alt="" />
+            <p @click="isDisolayTranslation = !isDisolayTranslation">
+              鐐瑰嚮鏌ョ湅鍙傝�冭瘧鏂�
+            </p>
+          </div>
+          <div class="event-header-text-bc pd-5 mb-20" style="width: 100%" v-if="isDisolayTranslation">
+            <p>鍙傝�冭瘧鏂�:</p>
+            <p class="td-2">
+              浣滀负涓�鍚嶆敹閾跺憳锛屽湪涓哄浜哄姙鐞嗙粨璐︾搴楁墜缁椂搴旀敞鎰忓涓嬫湇鍔¤鐐�:
+            </p>
+            <p class="td-2">
+              (1)瀹汉鍦ㄦ敹閾跺彴缁撹处绂诲簵鏃讹紝鏀堕摱鍛橀鍏堣璇㈤棶瀹汉鐨勫鍚嶅拰鎴块棿鍙风劧鍚庢彁閱掑浜哄綊杩樻埧鍗°��
+            </p>
+            <p class="td-2">
+              (2)鍑嗗瀹汉璐﹀崟鏃讹紝鏀堕摱鍛樹富瑕佸伐浣滄槸璁$畻璐﹀崟鎬婚锛屽繀瑕佺殑璇濊繕瑕佽В閲婅处鍗曘�傛敹閾跺憳瑕侀棶娓呮瀹汉鍦ㄤ复杩戠粨璐﹀墠鏈�鍚庢椂娈垫槸鍚︽湁杩蜂綘鍚ф垨鑰呭叾浠栭厭搴楁湇鍔$殑娑堣垂绛惧崟銆傚鏋滃浜烘湁绛惧崟锛屾敹閾跺憳瑕佸拰鐩稿叧閮ㄩ棬鑱旂郴銆傛墍鏈夎垂鐢ㄩ兘璁板埌瀹汉鎬昏处鍚庯紝鏀堕摱鍛樻妸璐﹀崟鎷跨粰瀹汉骞跺憡鐭ヨ处鍗曟�婚銆�
+            </p>
+            <p class="td-2">
+              (3)鍦ㄥ噯澶囨渶缁堣处鍗曞墠锛屾敹閾跺憳瑕佷笌瀹汉鍐嶆鏍稿璐﹀崟锛岄伩鍏嶈处鍗曢敊璇鏋滃浜哄璐﹀崟鏈夌枒闂紝鍙互鍐嶆鏍稿鎵�鏈夋椤癸紝鏍稿疄瀹汉鏄惁浜彈浠讳綍鎶樻墸锛屽苟鑱旂郴鐩稿叧閮ㄩ棬锛岄噸鏂拌绠楄处鍗曘�傝嫢纭疄鏈夐敊璇紝涓诲姩鍙婃椂绾犳璐﹀崟骞跺悜瀹汉鑷存瓑;鑻ユ病鏈夐敊璇紝鍚戝浜鸿В閲婅处鍗曟椤广��
+            </p>
+            <div class="border1">
+              <p class="center">鐗瑰埆鎻愮ず</p>
+              <p class="td-2">璐﹀崟甯歌鐨勬敹璐规椤规湁:</p>
+              <p class="td-2">鎴块棿璐圭敤;</p>
+              <p class="td-2">鐢佃瘽璐圭敤;</p>
+              <p class="td-2">鎴块棿璐圭敤;</p>
+              <p class="td-2">娲楄。鏈嶅姟璐圭敤:</p>
+              <p class="td-2">瀹㈡埧閫侀璐圭敤:</p>
+              <p class="td-2">椁愬巺鐢ㄩ璐圭敤:</p>
+              <p class="td-2">杩蜂綘鍚ц祻鐢ㄣ��</p>
+            </div>
+            <p class="td-2">
+              (4)璐﹀崟鍑嗗濂藉悗锛岃鍛婄煡瀹汉鎬婚骞惰闂浜烘敮浠樻柟寮忋�傞厭搴楅噷缁忓父浣跨敤鐨勬敮浠樻柟寮忔湁鈥滅幇閲戔�濃�滀俊鐢ㄥ崱鈥濃�滃�熻鍗♀�濃�滄梾琛屾敮绁ㄢ�濃�滆禒鍒糕�濈瓑銆�
+            </p>
+            <div class="border1">
+              <p class="center">鐗瑰埆鎻愮ず</p>
+              <p class="td-2">鍥介檯涓婂父鐢ㄧ殑淇$敤鍗℃湁:</p>
+              <p class="td-2">
+                缇庡浗杩愰�氬崱銆佷竾浜嬭揪淇$敤鍗°�佺淮钀ㄥ崱銆佸湪閫斿崱銆佹娲插崱銆侀暱鍩庡崱銆佸浗闄呭ぇ鏉ヤ勘涔愰儴鍗°�佽仈閭﹀崱/鍙戣揪鍗°��
+              </p>
+              <p class="td-2">
+                瀹汉鐢ㄤ俊鐢ㄥ崱鏀粯鏃讹紝涓�瀹氳鏍告煡淇$敤鍗℃闈笅閮ㄦ樉绀虹殑鏈夋晥鏈熴��
+              </p>
+              <p class="td-2">
+                鏍告煡璐﹀崟鎬婚鏄惁瓒呭嚭浜嗕俊鐢ㄥ崱鐨勬巿鏉冩敮浠橀搴︺�傝嫢瓒呭嚭棰濆害锛屽彲浠ヨ闂浜烘槸鍚︽効鎰忕敤鐜伴噾鏀粯宸环銆�
+              </p>
+            </div>
+            <p class="td-2">
+              (5)寰堝閰掑簵閫氬父灏嗕腑鍗�12:00璁剧疆涓虹粨璐︽椂闂淬�傚崍鍚�12:00鍚庣搴楃殑瀹汉锛岃棰濆鏀跺彇鍗婂ぉ鐨勬埧璐�;涓嬪崍6:00鍚庣搴楃殑瀹汉锛岃棰濆鏀跺彇涓�鏁村ぉ鐨勬埧璐广��
+            </p>
+            <p class="td-2">
+              (6)琛ㄨ揪閲戦鐨勪竴鑸柟寮忔槸鈥滄暟棰�+甯佺鈥濄�傝嫳璇腑锛岃〃杈鹃噾棰濈殑涔﹂潰褰㈠紡鏄�滃竵绉�+鏁伴鈥濓紝浣嗗彛澶磋〃杈惧嵈鏄�滄暟棰�+甯佺鈥濄�備緥濡�:
+            </p>
+            <div class="fl jc-c">
+              <table border="1" cellpadding="10" cellspacing="0" style="
+                  border-color: #5192c6;
+                  border-collapse: collapse;
+                  margin: 0 20px;
+                " class="fz-16 w80">
+                <tr class="table-tr-bc">
+                  <td class="center img-g">涔﹂潰褰㈠紡</td>
+                  <td class="center img-g">鍙eご琛ㄨ揪</td>
+                </tr>
+                <tr class="table-tr-bc">
+                  <td class="center">US$ 106</td>
+                  <td class="center">涓�鐧鹃浂鍏編鍏�</td>
+                </tr>
+                <tr class="table-tr-bc">
+                  <td class="center">RMB 锟�106</td>
+                  <td class="center">涓�鐧鹃浂鍏汉姘戝竵</td>
+                </tr>
+                <tr class="table-tr-bc">
+                  <td class="center">锟� 106</td>
+                  <td class="center">涓�鐧鹃浂鍏嫳闀�</td>
+                </tr>
+              </table>
+            </div>
+            <p class="td-2 mb-20">
+              (7)缁撹处鍚庯紝瑕佽窡瀹汉鍛婂埆锛屽彲浠ヨ鈥滃笇鏈涘啀娆′负鎮ㄦ湇鍔°�傚洜涓哄浜鸿绂诲簵锛屾墍浠ヤ篃瑕佽〃杈惧瀹汉鐨勭鎰匡紝鍙互璇粹�滅鎮ㄦ梾閫旀剦蹇�
+            </p>
+          </div>
+          <p class="titleQuot-1" style="line-height: 25px">
+            4. Test Yourself锛堣嚜娴嬶級
+            <!-- <span title="鏌ョ湅绛旀" class="btn-box" @click="showAnswerText = !showAnswerText">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20.501"
+                height="20.501"
+                viewBox="0 0 20.501 20.501"
+              >
+                <path
+                  class="a"
+                  d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
+                  transform="translate(-3327.144 15329)"
+                />
+              </svg>
+            </span> -->
+          </p>
+          <p class="poemtitle-l">
+            Task 1 Retell the basic procedures to check out the guests as a
+            cashier.
+          </p>
+          <textarea v-model="questionData.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="8" style="max-width: 100%; width: 100%"
+            class="fz-16 fm-son textarea-question" @change="saveQuestionData"></textarea>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">299</div>
+        </div>
+      </div>
+    </div>
+    <!-- 300椤� -->
+    <div class="page-box" page="9">
+      <div v-if="showPageList.indexOf(9) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle">
+          <p class="poemtitle-l">
+            Task 2 Give your understanding of Diff erent Ways of Payment.
+          </p>
+          <textarea v-model="questionData.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="15" style="max-width: 100%; width: 100%"
+            class="fz-16 fm-son textarea-question" @change="saveQuestionData"></textarea>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">300</div>
+        </div>
+      </div>
+    </div>
+    <!-- 301椤� -->
+    <div class="page-box" page="10">
+      <div v-if="showPageList.indexOf(10) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 3</span><span>Build Your Language</span>
+          </li>
+          <li>璇█鍌ㄥ</li>
+        </ul>
+        <div class="unit-title-box">
+          <p></p>
+          <div>
+            <img class="" src="../../assets/images/0002-01.jpg" alt="" />
+            <p class="td-0">Activity 3</p>
+          </div>
+          <p class="td-0 unit-title-text">Build Your Language 璇█鍌ㄥ</p>
+        </div>
+        <div class="bodystyle">
+          <p class="titleQuot-1">1. Objectives锛堢洰鏍囷級</p>
+          <p class="content">鈥� To grasp the key special terms;</p>
+          <p class="content">鈥� To grasp the useful expressions;</p>
+          <p class="content">
+            鈥� To improve your speaking and listening skills;
+          </p>
+          <p class="content">
+            鈥� To be familiar with the basic steps when checking out a guest.
+          </p>
+          <p class="titleQuot-1">
+            2. Learn the New Words and Special Terms锛堝涔犵敓璇嶅強鏈锛�
+          </p>
+          <h1 class="center">
+            <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+          </h1>
+          <div class="bodyPic mt-10 mb-10">
+            <img src="../../assets/images/0007-01.jpg" style="width: 60%" alt="" />
+          </div>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">301</div>
+        </div>
+      </div>
+    </div>
+    <!-- 302椤� -->
+    <div class="page-box" page="11">
+      <div v-if="showPageList.indexOf(11) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle">
+          <div class="bodyPic mt-10 mb-10">
+            <img src="../../assets/images/0008-01.jpg" style="width: 50%" alt="" />
+          </div>
+          <p class="titleQuot-1">3. Listen to the Conversation锛堝惉瀛︿細璇濓級</p>
+          <p class="poemtitle-l">
+            Task 1 listen to the conversation between the cashier and the guest.
+            Pay special attention to what Julia, the cashier, says.
+          </p>
+          <p class="titleQuot-c">Checking Out the Guest</p>
+          <div class="border">
+            <p class="content">
+              Roles: Julia, the cashier; Richard Bush, the guest.
+            </p>
+            <p class="content">Scene: Julia is checking out the guest.</p>
+          </div>
+          <h1 class="center">
+            <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+          </h1>
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>Good morning. How can I help you?</p>
+          </div>
+          <p class="content td-0">
+            <span class="bold2 mr-10">Richard Bush:</span> Good morning. I'd
+            like to settle my hotel bill now.
+          </p>
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>
+              Certainly, sir. Have you returned your room card to the reception
+              desk?
+            </p>
+          </div>
+          <p class="content">
+            <span class="bold2 mr-10">Richard Bush:</span> Yes.
+          </p>
+
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>May I know your name and your room number, please?</p>
+          </div>
+          <p class="content">
+            <span class="bold2 mr-10">Richard Bush:</span> Richard Bush in Room
+            1206.
+          </p>
+
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>
+              Just a minute, please. Have you used any hotel service this
+              morning?
+            </p>
+          </div>
+          <div class="content fl">
+            <p class="mr-10" style="text-wrap: nowrap">
+              <span class="bold2">Richard Bush:</span>
+            </p>
+            <p>
+              Yes. I asked for room service this morning and used the mini-bar
+              service about 1 hour ago.
+            </p>
+          </div>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">302</div>
+        </div>
+      </div>
+    </div>
+    <!-- 303椤� -->
+    <div class="page-box" page="12">
+      <div v-if="showPageList.indexOf(12) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 3</span><span>Build Your Language</span>
+          </li>
+          <li>璇█鍌ㄥ</li>
+        </ul>
+        <div class="bodystyle">
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>
+              I'm afraid your fi nal bill hasn't reached here yet. I'll call the
+              departments concerned. Just a moment, please.
+            </p>
+          </div>
+          <p class="content">(After a while...)</p>
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>
+              Sorry to have kept you waiting. Here is your final bill.It totals
+              RMB 6,280 yuan,including your room rents, laundry service charges,
+              room service charges, dining-hall bills and the mini-bar service
+              fees. Please have a check.
+            </p>
+          </div>
+          <p class="content">
+            <span class="bold2 mr-10">Richard Bush:</span> That's quite right.
+          </p>
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>How would you like to make the payment, sir?</p>
+          </div>
+          <p class="content">
+            <span class="bold2 mr-10">Richard Bush:</span> By credit card. Do
+            you <span class="bold">honor</span> the American Express here?
+          </p>
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>Yes. Let me take a print of your card.</p>
+          </div>
+          <p class="content">
+            <span class="bold2 mr-10">Richard Bush:</span> Here it is.
+          </p>
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>Thank you.</p>
+          </div>
+          <p class="content">(After printing the card...)</p>
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>Would you please sign your name here?</p>
+          </div>
+          <p class="content">
+            <span class="bold2 mr-10">Richard Bush:</span> Sure.
+          </p>
+          <div class="content fl">
+            <p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
+            <p>
+              Thank you, sir. This is your card and the
+              <span class="bold">receipt</span>. We hope you have enjoyed your
+              stay in our hotel.
+            </p>
+          </div>
+          <p><br /></p>
+          <p class="poemtitle-l mt-20">
+            Task 2 Listen to the above conversation again and try to find out
+            what expressions are used by the cashier when preparing the bill.
+          </p>
+          <p class="content">
+            (1)
+            <input :disabled="testData.isComplete" v-model="testData.answerList[0].value" type="text"
+              class="input-bottom-border" style="width: 50%" @change="setTestData" />
+            <span class="icon-box">
+              <svg v-if="testData.answerList[0].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="testData.answerList[0].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>
+            any hotel service this morning?
+          </p>
+          <p class="content">
+            (2) I'm afraid
+            <input :disabled="testData.isComplete" v-model="testData.answerList[1].value" type="text"
+              class="input-bottom-border" style="width: 40%" @change="setTestData" />
+            <span class="icon-box">
+              <svg v-if="testData.answerList[1].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="testData.answerList[1].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>. I'll call the departments concerned.
+          </p>
+          <p class="content">
+            (3) Sorry to have kept you waiting.
+            <input :disabled="testData.isComplete" v-model="testData.answerList[2].value" type="text"
+              class="input-bottom-border" style="width: 50%" @change="setTestData" />
+            <span class="icon-box">
+              <svg v-if="testData.answerList[2].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="testData.answerList[2].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>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">303</div>
+        </div>
+      </div>
+    </div>
+    <!-- 304椤� -->
+    <div class="page-box" page="13">
+      <div v-if="showPageList.indexOf(13) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle">
+          <p class="content">
+            (4)<input :disabled="testData.isComplete" v-model="testData.answerList[3].value" type="text"
+              class="input-bottom-border" style="width: 30%" @change="setTestData" />
+            <span class="icon-box">
+              <svg v-if="testData.answerList[3].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="testData.answerList[3].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>RMB 6,280 yuan,including<input :disabled="testData.isComplete"
+              v-model="testData.answerList[4].value" type="text" class="input-bottom-border" style="width: 30%"
+              @change="setTestData" />
+            <span class="icon-box">
+              <svg v-if="testData.answerList[4].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="testData.answerList[4].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>, laundry service charges, room service charges, dining-hall bills,
+            and the mini-bar service fees. Please
+            <input :disabled="testData.isComplete" v-model="testData.answerList[5].value" type="text"
+              class="input-bottom-border" style="width: 60%" @change="setTestData" />
+            <span class="icon-box">
+              <svg v-if="testData.answerList[5].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="testData.answerList[5].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>
+          <p class="event-header-text-bc pd-5 mb-20" style="width: 100%" v-if="showAnswerTestData">
+            绛旀锛�1.Have you used銆�2.your final bill hasn't reached here
+            yet銆�3.Here is your final bill銆�4.It totals銆�5.your room
+            rents銆�6.have a check
+          </p>
+          <div class="w100 fl ju-cn mb-20 mt-20">
+            <div class="fl ju-ev mt-40" style="width: 80%">
+              <button class="btn-border btn-w" @click="handleTestData()">
+                鎻愪氦
+              </button>
+              <button class="btn-border btn-w" @click="clearTestData">
+                閲嶅仛
+              </button>
+              <button @click="showAnswerTestData = !showAnswerTestData" class="parimary-btn">
+                鏌ョ湅绛旀
+              </button>
+            </div>
+          </div>
+          <p class="titleQuot-1">
+            4. Refer to More Useful Expressions锛堝弬鐪嬫洿澶氳〃杈撅級
+          </p>
+          <p class="content">(1) Good afternoon, sir. May I help you?</p>
+          <p class="quotation fm-kt">鍏堢敓锛屼笅鍗堝ソ銆傝闂偍鏈変粈涔堥渶瑕佸悧锛�</p>
+          <p class="content">(2) May I have your name and room number?</p>
+          <p class="quotation fm-kt">璇烽棶鎮ㄧ殑濮撳悕鍜屾埧闂村彿锛�</p>
+          <p class="content">(3) May I have your room card, please?</p>
+          <p class="quotation fm-kt">鎮ㄥ彲浠ユ妸鎴垮崱缁欐垜鍚楋紵</p>
+          <p class="content">(4) Do you enjoy your stay with us?</p>
+          <p class="quotation fm-kt">鎮ㄤ綇寰楄繕鎰夊揩鍚楋紵</p>
+          <p class="content">
+            (5) Did you sign any bills in the last two hours?
+          </p>
+          <p class="quotation fm-kt">鎮ㄥ湪鏈�鍚庝袱涓皬鏃堕噷鏈夌鍗曞悧锛�</p>
+          <p class="content">
+            (6) Did you used any hotel services this morning?
+          </p>
+          <p class="quotation fm-kt">浠婂ぉ涓婂崍鎮ㄧ敤杩囬厭搴楁湇鍔″悧锛�</p>
+          <p class="content">
+            (7) I'm afraid your fi nal bill hasn't reached here yet.
+          </p>
+          <p class="quotation fm-kt">鎭愭�曟偍鐨勬渶鍚庤处鍗曡繕娌″埌銆�</p>
+          <p class="content">(8) I'll call and ask the department concerned.</p>
+          <p class="quotation fm-kt">鎴戣闂竴涓嬬浉鍏抽儴闂ㄣ��</p>
+          <p class="content">(9) I'll draw up the bill for you.</p>
+          <p class="quotation fm-kt">鎴戝府鎮ㄧ粨绠楄处鍗曘��</p>
+          <p class="content">(10) Here's your bill.</p>
+          <p class="quotation fm-kt">杩欐槸鎮ㄧ殑璐﹀崟銆�</p>
+          <p class="content">(11)It totals RMB 1000 yuan.</p>
+          <p class="quotation fm-kt">鎬婚鏄�1000鍏冧汉姘戝竵銆�</p>
+          <p class="content">
+            (12) Please check the bill and see if there is any mistake.
+          </p>
+          <p class="quotation fm-kt">璇锋牳瀵逛竴涓嬭处鍗曪紝鐪嬬湅鏄惁鏈夎銆�</p>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">304</div>
+        </div>
+      </div>
+    </div>
+    <!-- 305椤� -->
+    <div class="page-box" page="14">
+      <div v-if="showPageList.indexOf(14) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 3</span><span>Build Your Language</span>
+          </li>
+          <li>璇█鍌ㄥ</li>
+        </ul>
+        <div class="bodystyle">
+          <p class="content">
+            (13) This is for three dinners that you signed for.
+          </p>
+          <p class="quotation fm-kt">杩欐槸鎮ㄧ敤鐨勪笁娆℃櫄椁愮殑绛惧崟銆�</p>
+          <p class="content">(14) May I check the details for you, please?</p>
+          <p class="quotation fm-kt">鎴戞潵鏍告煡涓�涓嬭缁嗘椤癸紝濂藉悧?</p>
+          <p class="content">
+            (15) Shall I explain the items on the bill for you?
+          </p>
+          <p class="quotation fm-kt">闇�瑕佹垜瑙i噴璐﹀崟涓婄殑鏀舵娆鹃」鍚楋紵</p>
+          <p class="content">
+            (16) I'm sorry, but did you use the mini-bar this morning?
+          </p>
+          <p class="quotation fm-kt">
+            涓嶅ソ鎰忔�濓紝浣嗘槸鎮ㄤ粖鏃╀娇鐢ㄤ簡杩蜂綘鍚э紝瀵瑰悧锛�
+          </p>
+          <p class="content">(17) Here are your mini-bar expenses.</p>
+          <p class="quotation fm-kt">杩欐槸鎮ㄤ娇鐢ㄨ糠浣犲惂鐨勮垂鐢ㄣ��</p>
+          <p class="content">
+            (18) I'm afraid that for late check-out we charge an extra 50% of
+            the room rate.
+          </p>
+          <p class="quotation fm-kt">
+            瀵逛簬鎮ㄧ殑寤惰繜绂诲簵锛屾亹鎬曟垜浠棰濆鏀跺彇50%鐨勬埧璐广��
+          </p>
+          <p class="content">(19) Would you mind waiting for a minute?</p>
+          <p class="quotation fm-kt">鎮ㄤ粙鎰忕瓑涓�浼氬効鍚楋紵</p>
+          <p class="content">(20) I'm sorry, but the bill is right, sir.</p>
+          <p class="quotation fm-kt">鍏堢敓锛屽緢鎶辨瓑銆備絾鏄处鍗曟病鏈夐敊璇��</p>
+          <p class="content">(21) We'll correct your bill.</p>
+          <p class="quotation fm-kt">鎴戜滑鎶婅处鍗曠籂姝h繃鏉ャ��</p>
+          <p class="content fm-kt">(22) We do apologize for the error.</p>
+          <p class="quotation fm-kt">鎴戜滑涓烘垜浠殑澶辫娣辫〃姝夋剰銆�</p>
+          <p class="content">(23) How would you like to pay锛�</p>
+          <p class="quotation fm-kt">鎮ㄧ敤浠�涔堟柟寮忎粯娆撅紵</p>
+          <p class="content">(24) How would you like to settle your bill?</p>
+          <p class="quotation fm-kt">鎮ㄧ敤浠�涔堟柟寮忕粨璐︼紵</p>
+          <p class="content">(25) What kind of credit card have you got?</p>
+          <p class="quotation fm-kt">鎮ㄧ敤鐨勬槸鍝淇$敤鍗★紵</p>
+          <p class="content">(26) Could you sign here, please锛�</p>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">305</div>
+        </div>
+      </div>
+    </div>
+    <!-- 306椤� -->
+    <div class="page-box" page="15">
+      <div v-if="showPageList.indexOf(15) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle">
+          <p class="quotation fm-kt">鎮ㄥ彲浠ュ湪杩欓噷绛惧悕鍚楋紵</p>
+          <p class="content">(27) Your bill is paid by ... company.</p>
+          <p class="quotation fm-kt">鎮ㄧ殑璐﹀崟鐢泵椕椕楀叕鍙告敮浠樸��</p>
+          <p class="content">
+            (28) We accept American Express, MasterCard and Visa.
+          </p>
+          <p class="quotation fm-kt">鎴戜滑鎺ュ彈缇庡浗杩愰�氬崱銆佷竾浜嬭揪鍗″拰缁磋惃鍗°��</p>
+          <p class="content">
+            (29) I'm sorry but we are not allowed to accept
+            <span class="bold">personal checks.</span>
+          </p>
+          <p class="quotation fm-kt">瀵逛笉璧凤紝鎴戜滑涓嶈兘鎺ュ彈涓汉鏀エ銆�</p>
+          <p class="content">
+            (30) Your credit limit set by the Visa Card offi ce is 1,500
+            dollars.
+          </p>
+          <p class="quotation fm-kt">鎮ㄧ淮钀ㄥ崱鐨勪俊鐢ㄩ檺棰濇槸1500缇庡厓銆�</p>
+          <p class="content">
+            (31) Would you like to settle the diff erence in cash?
+          </p>
+          <p class="quotation fm-kt">鎮ㄧ敤鐜伴噾琛ュ樊棰濆彲浠ュ悧锛�</p>
+          <p class="content">
+            (32) Here is your <span class="bold">change/</span>receipt/<span class="bold">invoice</span>.
+          </p>
+          <p class="quotation fm-kt">杩欐槸鎮ㄧ殑闆堕挶/鏀舵嵁/鍙戠エ銆�</p>
+          <p class="content">(33) Wish you a pleasant journey.</p>
+          <p class="quotation fm-kt">绁濇偍鏃呰鎰夊揩銆�</p>
+          <p class="content">(34) We hope you had enjoyed your stay.</p>
+          <p class="quotation fm-kt">甯屾湜鎮ㄥ湪杩欏効浣忓緱鎰夊揩銆�</p>
+          <p class="content">(35) We look forward to serving you again.</p>
+          <p class="quotation fm-kt">鎴戜滑鏈熷緟鑳藉啀娆′负鎮ㄦ湇鍔°��</p>
+          <p class="titleQuot-1">5. Test Yourself锛堣嚜娴嬶級</p>
+          <p class="poemtitle-l">
+            Task 1 write down the words鈥� spelling forms and their equivalent
+            pronunciations according to what you hear.
+          </p>
+          <h1 class="center">
+            <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+          </h1>
+          <table cellpadding="0" cellspacing="0" style="
+              border-collapse: collapse;
+              margin: 0 20px;
+            " class="fz-16 mb-20">
+            <tr class="table-th-bc">
+              <td class="center">No.</td>
+              <td class="center">Word</td>
+              <td class="center">Pronunciation</td>
+            </tr>
+            <tr class="table-tr-bc">
+              <td class="center">(1)</td>
+              <td class="center">
+                <input v-model="tableData.one" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.two" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+            <tr class="table-tr-bc">
+              <td class="center">(2)</td>
+              <td class="center">
+                <input v-model="tableData.three" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.four" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+            <tr class="table-tr-bc">
+              <td class="center">(3)</td>
+              <td class="center">
+                <input v-model="tableData.five" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.six" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">306</div>
+        </div>
+      </div>
+    </div>
+    <!-- 307椤� -->
+    <div class="page-box" page="16">
+      <div v-if="showPageList.indexOf(16) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 3</span><span>Build Your Language</span>
+          </li>
+          <li>璇█鍌ㄥ</li>
+        </ul>
+        <div class="bodystyle">
+          <table cellpadding="0" cellspacing="0" style="
+              border-collapse: collapse;
+              margin: 0 20px;
+            " class="fz-16 ">
+            <tr class="table-tr-bc">
+              <td class="center">(4)</td>
+              <td class="center">
+                <input v-model="tableData.seven" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.eight" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+            <tr class="table-tr-bc">
+              <td class="center">(5)</td>
+              <td class="center">
+                <input v-model="tableData.nine" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.ten" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+            <tr class="table-tr-bc">
+              <td class="center">(6)</td>
+              <td class="center">
+                <input v-model="tableData.eleven" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.twelve" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+            <tr class="table-tr-bc">
+              <td class="center">(7)</td>
+              <td class="center">
+                <input v-model="tableData.thirteen" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.fourteen" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+            <tr class="table-tr-bc">
+              <td class="center">(8)</td>
+              <td class="center">
+                <input v-model="tableData.fifteen" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.sixteen" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+            <tr class="table-tr-bc">
+              <td class="center">(9)</td>
+              <td class="center">
+                <input v-model="tableData.seventeen" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.eighteen" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+            <tr class="table-tr-bc">
+              <td class="center">(10)</td>
+              <td class="center">
+                <input v-model="tableData.nineteen" type="text" class="input-bottom-border" style="width: 60%"
+                  @change="saveTableData" />
+              </td>
+              <td class="center">
+                <input v-model="tableData.twenty" type="text" class="input-bottom-border" style="width: 70%"
+                  @change="saveTableData" />
+              </td>
+            </tr>
+          </table>
+          <p class="poemtitle-l">
+            Task 2 Choose proper expressions from what are given to you in the
+            following box and complete the following short dialogues.
+          </p>
+          <p class="content">(1)A:680 yuan in all,sir.</p>
+          <p class="content">
+            B:680 yuan?
+            <select class="select-border" :disabled="activityThree.isComplete" @change="saveActiveThree"
+              v-model="activityThree.answerList[0].value" style="width: 20%">
+              <option v-for="(item, index) in activityThree.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[0].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="activityThree.answerList[0].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>
+          <p class="content">(2) A: How would you like to pay your bill?</p>
+          <p class="content">
+            B:
+            <select class="select-border" :disabled="activityThree.isComplete" @change="saveActiveThree"
+              v-model="activityThree.answerList[1].value" style="width: 20%">
+              <option v-for="(item, index) in activityThree.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[1].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="activityThree.answerList[1].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>
+          <p class="content">
+            (3) A: I'm leaving today.
+            <select class="select-border" :disabled="activityThree.isComplete" @change="saveActiveThree"
+              v-model="activityThree.answerList[2].value" style="width: 20%">
+              <option v-for="(item, index) in activityThree.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[2].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="activityThree.answerList[2].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>
+          <p class="content">B: Your name and room number, please?</p>
+          <p class="content">
+            (4) A: One more thing, I never used the mini-bar.
+          </p>
+          <p class="content">
+            B:
+            <select class="select-border" :disabled="activityThree.isComplete" @change="saveActiveThree"
+              v-model="activityThree.answerList[3].value" style="width: 20%">
+              <option v-for="(item, index) in activityThree.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[3].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="activityThree.answerList[3].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>
+          <p class="content">
+            (5) A: Have you used any hotel services, Mr. Jackson?
+          </p>
+          <p class="content">
+            B: Yes.
+            <select class="select-border" :disabled="activityThree.isComplete" @change="saveActiveThree"
+              v-model="activityThree.answerList[4].value" style="width: 20%">
+              <option v-for="(item, index) in activityThree.options" :key="index" :value="item">
+                {{ item }}
+              </option>
+            </select>
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[4].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="activityThree.answerList[4].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 class="border">
+            <p class="content">A. May I have my bill?</p>
+            <p class="content">B. There must be a mistake.</p>
+            <p class="content">C. Oh, let me check with the Housekeeping.</p>
+            <p class="content">D. My friend and I just had breakfast.</p>
+            <p class="content">E. Sign it to my room, please.</p>
+          </div>
+          <p class="event-header-text-bc pd-5 mb-20" style="width: 100%" v-if="showAnswerActivityThree">
+            绛旀锛�1.B銆�2.E銆�3.A銆�4.C銆�5.D
+          </p>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">307</div>
+        </div>
+      </div>
+    </div>
+    <!-- 308椤� -->
+    <div class="page-box" page="17">
+      <div v-if="showPageList.indexOf(17) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle">
+          <p class="poemtitle-l">
+            Task 3 interpret what you hear from Chinese into English or from
+            English into Chinese.
+          </p>
+          <h1 class="center">
+            <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+          </h1>
+          <p class="content">
+            (1)
+            <input :disabled="activityThree.isComplete" v-model="activityThree.answerList[5].value" type="text"
+              class="input-bottom-border" style="width: 80%" @change="saveActiveThree" />
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[5].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="activityThree.answerList[5].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>
+
+          <p class="content">
+            (2)
+            <input :disabled="activityThree.isComplete" v-model="activityThree.answerList[6].value" type="text"
+              class="input-bottom-border" style="width: 80%" @change="saveActiveThree" />
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[6].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="activityThree.answerList[6].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>
+
+          <p class="content">
+            (3)
+            <input :disabled="activityThree.isComplete" v-model="activityThree.answerList[7].value" type="text"
+              class="input-bottom-border" style="width: 80%" @change="saveActiveThree" />
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[7].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="activityThree.answerList[7].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>
+
+          <p class="content">
+            (4)
+            <input :disabled="activityThree.isComplete" v-model="activityThree.answerList[8].value" type="text"
+              class="input-bottom-border" style="width: 80%" @change="saveActiveThree" />
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[8].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="activityThree.answerList[8].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>
+
+          <p class="content">
+            (5)
+            <input :disabled="activityThree.isComplete" v-model="activityThree.answerList[9].value" type="text"
+              class="input-bottom-border" style="width: 80%" @change="saveActiveThree" />
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[9].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="activityThree.answerList[9].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>
+
+          <p class="content">
+            (6)
+            <input :disabled="activityThree.isComplete" v-model="activityThree.answerList[10].value" type="text"
+              class="input-bottom-border" style="width: 80%" @change="saveActiveThree" />
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[10].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="activityThree.answerList[10].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>
+
+          <p class="content">
+            (7)
+            <input :disabled="activityThree.isComplete" v-model="activityThree.answerList[11].value" type="text"
+              class="input-bottom-border" style="width: 80%" @change="saveActiveThree" />
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[11].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="activityThree.answerList[11].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>
+
+          <p class="content">
+            (8)
+            <input :disabled="activityThree.isComplete" v-model="activityThree.answerList[12].value" type="text"
+              class="input-bottom-border" style="width: 80%" @change="saveActiveThree" />
+            <span class="icon-box">
+              <svg v-if="activityThree.answerList[12].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="activityThree.answerList[12].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>
+
+          <p class="event-header-text-bc pd-5 mb-20" style="width: 100%" v-if="showAnswerActivityThree">
+            绛旀锛�<br />
+            (1)鏀堕摱鍙�<br />
+            (2)涓囦簨杈惧崱<br />
+            (3)缁撶畻璐﹀崟<br />
+            (4)杩欐槸鎮ㄧ殑闆堕挶銆�<br />
+            (5)Shall I explain the items on the billfor you?<br />
+            (6)What kind of credit card have you got?<br />
+            (7)We'll charge an extra 50%of the room rate.<br />
+            (8)How would you like to settle the difference?
+          </p>
+
+          <div class="w100 fl ju-cn mb-20 mt-20">
+            <div class="fl ju-ev mt-40" style="width: 80%">
+              <button class="btn-border btn-w" @click="handleActivityThree()">
+                鎻愪氦
+              </button>
+              <button class="btn-border btn-w" @click="clearActivityThree">
+                閲嶅仛
+              </button>
+              <button @click="showAnswerActivityThree = !showAnswerActivityThree" class="parimary-btn">
+                鏌ョ湅绛旀
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">308</div>
+        </div>
+      </div>
+    </div>
+    <!-- 309椤� -->
+    <div class="page-box" page="18">
+      <div v-if="showPageList.indexOf(18) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 4</span><span>Train Your Basic Skills </span>
+          </li>
+          <li>鎶�鑳藉疄璁�</li>
+        </ul>
+        <div class="unit-title-box">
+          <p></p>
+          <div>
+            <img class="" src="../../assets/images/0002-01.jpg" alt="" />
+            <p class="td-0">Activity 4</p>
+          </div>
+          <p class="td-0 unit-title-text">Train Your Basic Skills 鎶�鑳藉疄璁�</p>
+        </div>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">309</div>
+        </div>
+      </div>
+    </div>
+    <!-- 310椤� -->
+    <div class="page-box" page="19">
+      <div v-if="showPageList.indexOf(19) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">310</div>
+        </div>
+      </div>
+    </div>
+    <!-- 311椤� -->
+    <div class="page-box" page="20">
+      <div v-if="showPageList.indexOf(20) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 4</span><span>Train Your Basic Skills </span>
+          </li>
+          <li>鎶�鑳藉疄璁�</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">311</div>
+        </div>
+      </div>
+    </div>
+    <!-- 312椤� -->
+    <div class="page-box" page="21">
+      <div v-if="showPageList.indexOf(21) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">312</div>
+        </div>
+      </div>
+    </div>
+    <!-- 313椤� -->
+    <div class="page-box" page="22">
+      <div v-if="showPageList.indexOf(22) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 5</span><span>Further Your Skills</span>
+          </li>
+          <li>鎶�鑳芥彁鍗�</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">313</div>
+        </div>
+      </div>
+    </div>
+    <!-- 314椤� -->
+    <div class="page-box" page="23">
+      <div v-if="showPageList.indexOf(23) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">314</div>
+        </div>
+      </div>
+    </div>
+    <!-- 315椤� -->
+    <div class="page-box" page="24">
+      <div v-if="showPageList.indexOf(24) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 5</span><span>Further Your Skills</span>
+          </li>
+          <li>鎶�鑳芥彁鍗�</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">315</div>
+        </div>
+      </div>
+    </div>
+    <!-- 316椤� -->
+    <div class="page-box" page="25">
+      <div v-if="showPageList.indexOf(25) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">316</div>
+        </div>
+      </div>
+    </div>
+    <!-- 317椤� -->
+    <div class="page-box" page="26">
+      <div v-if="showPageList.indexOf(26) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 5</span><span>Further Your Skills</span>
+          </li>
+          <li>鎶�鑳芥彁鍗�</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">317</div>
+        </div>
+      </div>
+    </div>
+    <!-- 318椤� -->
+    <div class="page-box" page="27">
+      <div v-if="showPageList.indexOf(27) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">318</div>
+        </div>
+      </div>
+    </div>
+    <!-- 319椤� -->
+    <div class="page-box" page="28">
+      <div v-if="showPageList.indexOf(28) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-right">
+          <li class="header-right-Text">
+            <span>Activity 6</span><span>At the Smart Hotel</span>
+          </li>
+          <li>鏅烘収閰掑簵</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
+          <div class="copyrightPage-right-box">319</div>
+        </div>
+      </div>
+    </div>
+    <!-- 320椤� -->
+    <div class="page-box" page="29">
+      <div v-if="showPageList.indexOf(29) > -1">
+        <div class="copyrightPage-top"></div>
+        <ul class="header-left">
+          <li class="header-left-Text">
+            <span>Project 12</span><span>Cashier鈥檚 Service</span>
+          </li>
+          <li>鏀堕摱鏈嶅姟</li>
+        </ul>
+        <div class="bodystyle"></div>
+        <div class="copyrightPage-bottom">
+          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
+          <div class="copyrightPage-left-box">320</div>
+        </div>
+      </div>
+    </div>
+    <div class="follow-box" :style="{
+      display: isBoxVisible ? 'block' : 'none',
+      left: boxPosition.x + 'px',
+      top: boxPosition.y + 'px'
+    }">
+      璺熼殢榧犳爣鐨勭洅瀛�
+    </div>
+  </div>
+</template>
+<script>
+import { getResourcePath } from "@/assets/methods/resources";
+import {
+  getCollectResource,
+  setCollectResource,
+} from "@/assets/methods/resources";
+export default {
+  name: "chapterOne",
+  props: {
+    showPageList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      // 榧犳爣绉诲叆浜嬩欢
+      isBoxVisible: false,
+      boxPosition: { x: 0, y: 0 },
+
+
+      collectImg: require("../../assets/images/icon/heart.png"),
+      collectCheck: require("../../assets/images/icon/heart-check.png"),
+      // 闊抽
+      audioPathOne: "",
+      audioPathTwo: "",
+      audioPathThree: "",
+      audioPathFour: "",
+      // 瑙嗛
+      videoPathOne: "",
+      collectResourceList: [],
+      chapterData: {
+        isCollectVideoOne: false,
+      },
+      // 绠�绛旈
+      questionData: {
+        one: "",
+        two: "",
+        three: "",
+        four: "",
+        five: "",
+      },
+      // select
+      showAnswerSelect: false,
+      selectData: {
+        isComplete: false,
+        //dropdown
+        options: [
+          "financial",
+          "check-out",
+          "accommodations",
+          "accurately",
+          "banking",
+          "exchange",
+          "parking",
+        ],
+        answerList: [
+          {
+            value: "",
+            isRight: null,
+            answer: "accommodations",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "parking",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "financial",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "exchange",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "check-out",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "banking",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "accurately",
+          },
+        ],
+      },
+      // 濉┖棰�
+      showAnswerTestData: false,
+      testData: {
+        isComplete: false,
+        answerList: [
+          {
+            value: "",
+            isRight: null,
+            answer: "Have you used",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "your final bill hasn't reached here yet",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "Here is your final bill",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "It totals",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "your room rents",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "have a check",
+          },
+        ],
+      },
+      // 鍙傝�冭瘧鏂�
+      isDisolayTranslation: false,
+
+      // Activity 3  Task 2~3
+      showAnswerActivityThree: false,
+      activityThree: {
+        isComplete: false,
+        options: ["A", "B", "C", "D", "E"],
+        answerList: [
+          {
+            value: "",
+            isRight: null,
+            answer: "B",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "E",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "A",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "C",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "D",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "鏀堕摱鍙�",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "涓囦簨杈惧崱",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "缁撶畻璐﹀崟",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "杩欐槸鎮ㄧ殑闆堕挶",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "Shall I explain the items on the bill for you?",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "What kind of credit card have you got?",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "We'll charge an extra 50% of the room rate.",
+          },
+          {
+            value: "",
+            isRight: null,
+            answer: "How would you like to settle the diference?",
+          },
+        ],
+      },
+
+      // 琛ㄦ牸鏁版嵁
+      tableData: {
+        one: "",
+        two: "",
+        three: "",
+        four: "",
+        five: "",
+        six: "",
+        seven: "",
+        eight: "",
+        nine: "",
+        ten: "",
+        eleven: "",
+        twelve: "",
+        thirteen: "",
+        fourteen: "",
+        fifteen: "",
+        sixteen: "",
+        seventeen: "",
+        eighteen: "",
+        nineteen: "",
+        twenty: "",
+      }
+    };
+  },
+  async mounted() {
+    const questionData = localStorage.getItem(
+      "hotelEnglishTrainingBrochure2nd-book-chapter001-questionData"
+    );
+    if (questionData) {
+      this.questionData = JSON.parse(questionData);
+    }
+
+    const selectData = localStorage.getItem(
+      "hotelEnglishTrainingBrochure2nd-book-chapter001-selectData"
+    );
+    if (selectData) {
+      this.selectData = JSON.parse(selectData);
+    }
+
+    const testData = localStorage.getItem(
+      "hotelEnglishTrainingBrochure2nd-book-chapter001-testData"
+    );
+    if (testData) {
+      this.testData = JSON.parse(testData);
+    }
+
+    const activityThree = localStorage.getItem(
+      "hotelEnglishTrainingBrochure2nd-book-chapter001-activityThree"
+    );
+    if (activityThree) {
+      this.activityThree = JSON.parse(activityThree);
+    }
+
+    this.collectResourceList = await getCollectResource(
+      this.config.activeBook.bookId
+    );
+    this.getVidoePath();
+  },
+  methods: {
+    async getVidoePath() {
+      this.videoPathOne = await getResourcePath(
+        "50ed3234d92cce02be3d277b0e1f88b2"
+      );
+      this.audioPathOne = await getResourcePath(
+        "bd2987485c662cb6f36c92083e4094e2"
+      );
+      this.audioPathTwo = await getResourcePath(
+        "1b5a381254352f9a03c6510bc9916768"
+      );
+      this.audioPathThree = await getResourcePath(
+        "d91efc7a386e8a7b901742cf4ec4f0e1"
+      );
+      this.audioPathFour = await getResourcePath(
+        "1f896412e668111c6793d1c60fe70ca8"
+      );
+    },
+    saveQuestionData() {
+      localStorage.setItem(
+        "hotelEnglishTrainingBrochure2nd-book-chapter001-questionData",
+        JSON.stringify(this.questionData)
+      );
+    },
+    //鎻愪氦
+    handleDropdown() {
+      this.selectData.isComplete = true;
+      this.selectData.answerList.forEach((item) => {
+        if (item.value == item.answer) {
+          item.isRight = true;
+        } else {
+          item.isRight = false;
+        }
+      });
+      this.saveSelectData();
+    },
+
+    // 閲嶅仛
+    clearSelectData() {
+      localStorage.removeItem(
+        "hotelEnglishTrainingBrochure2nd-book-chapter001-selectData"
+      );
+      this.selectData.isComplete = false;
+      this.selectData.answerList.forEach((item) => {
+        item.value = "";
+        item.isRight = null;
+      });
+    },
+    saveSelectData() {
+      localStorage.setItem(
+        "hotelEnglishTrainingBrochure2nd-book-chapter001-selectData",
+        JSON.stringify(this.selectData)
+      );
+    },
+
+    //鎻愪氦
+    handleTestData() {
+      this.testData.isComplete = true;
+      this.testData.answerList.forEach((item) => {
+        if (item.value == item.answer) {
+          item.isRight = true;
+        } else {
+          item.isRight = false;
+        }
+      });
+      this.setTestData();
+    },
+
+    // 閲嶅仛
+    clearTestData() {
+      localStorage.removeItem(
+        "hotelEnglishTrainingBrochure2nd-book-chapter001-testData"
+      );
+      this.testData.isComplete = false;
+      this.testData.answerList.forEach((item) => {
+        item.value = "";
+        item.isRight = null;
+      });
+    },
+
+    setTestData() {
+      localStorage.setItem(
+        "hotelEnglishTrainingBrochure2nd-book-chapter001-testData",
+        JSON.stringify(this.testData)
+      );
+    },
+
+    //鎻愪氦
+    handleActivityThree() {
+      this.activityThree.isComplete = true;
+      this.activityThree.answerList.forEach((item) => {
+        if (item.value == item.answer) {
+          item.isRight = true;
+        } else {
+          item.isRight = false;
+        }
+      });
+      this.saveActiveThree();
+    },
+
+    clearActivityThree() {
+      localStorage.removeItem(
+        "hotelEnglishTrainingBrochure2nd-book-chapter001-activityThree"
+      );
+      this.activityThree.isComplete = false;
+      this.activityThree.answerList.forEach((item) => {
+        item.value = "";
+        item.isRight = null;
+      });
+    },
+
+    saveActiveThree() {
+      localStorage.setItem(
+        "hotelEnglishTrainingBrochure2nd-book-chapter001-activityThree",
+        JSON.stringify(this.activityThree)
+      );
+    },
+
+    // 淇濆瓨
+    saveTableData() {
+      localStorage.setItem(
+        "hotelEnglishTrainingBrochure2nd-book-chapter001-tableData",
+        JSON.stringify(this.tableData)
+      );
+    },
+    // 榧犳爣绉诲叆浜嬩欢
+    handleMouseEnter(event) {
+      this.boxPosition.x = event.clientX;
+      this.boxPosition.y = event.clientY;
+      console.log(this.boxPosition, "this.boxPosition");
+      // 璁剧疆鐩掑瓙浣嶇疆涓洪紶鏍囦綅缃笅鏂�
+      this.boxPosition.y += 50; // 璋冩暣鐩掑瓙涓庨紶鏍囩殑闂磋窛
+      // 鏄剧ず鐩掑瓙
+      this.isBoxVisible = true;
+
+
+
+
+
+    },
+    // 榧犳爣绉诲嚭浜嬩欢
+    handleMouseLeave() {
+
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/view/components/header.vue b/src/books/hotelEnglishTrainingBrochure2nd/view/components/header.vue
new file mode 100644
index 0000000..1f79d7a
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/view/components/header.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="chapter" num="1">
+    <!-- 灏侀潰 -->
+    <div class="page-box mt-20" page="1" style="min-height: auto">
+      <div v-if="showPageList.indexOf(1) > -1">
+        <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
+      </div>
+    </div>
+    <!-- 鎵夐〉 -->
+    <div class="page-box mt-20" page="2" style="min-height: auto">
+      <div v-if="showPageList.indexOf(2) > -1">
+        <img class="img-0" alt="" src="../../assets/images/feiye.jpg" />
+      </div>
+    </div>
+    <!-- 鎵夐〉 -->
+    <div class="page-box mt-20" page="3">
+      <div v-if="showPageList.indexOf(3) > -1">
+        <div class="copyrightPage-top"></div>
+        <div style="max-width: 600px; margin: 0 auto; padding: 1% 10%">
+          <p class="fm-hyzh fz-16 bold">鍥句功鍦ㄧ増缂栫洰锛圕IP锛夋暟鎹�</p>
+          <p class="left3 mr-0 fm-hyss fz-16">
+            閰掑簵鑻辫瀹炶娲婚〉鏁欑▼ / 闆蜂咕涔�, 鍒樼櫥涓轰富缂�. --<br />
+            2鐗�. -- 鍖椾含 : 鏃呮父鏁欒偛鍑虹増绀�, 2025.3
+          </p>
+          <p class="left3 fm-hyss fz-16">瀹炶瀵煎悜鍨嬫梾娓稿璇暀鏉�</p>
+          <p class="left3 fm-hyss fz-16">ISBN 978-7-5637-4705-4</p>
+          <p class="left3 fm-hyss fz-16 mt-20 mb-20">
+            鈪�. 鈶犻厭鈥� 鈪�. 鈶犻浄鈥� 鈶″垬鈥� 鈪�. 鈶犻キ搴楋紞鑻辫锛� <br />鏁欐潗 鈪�. 鈶燜719.2
+          </p>
+          <p class="left3 fm-hyss fz-14">
+            涓浗鍥藉鐗堟湰棣咰IP鏁版嵁鏍稿瓧(2024)绗�031789鍙�
+          </p>
+          <p><br /></p>
+          <p class="left fz-16 fm-hyss center">瀹炶瀵煎悜鍨嬫梾娓稿璇暀鏉�</p>
+          <p class="left fz-16 fm-hyss center">閰掑簵鑻辫瀹炶娲婚〉鏁欑▼</p>
+          <p class="left fz-16 fm-hyss center">锛堢2鐗堬級</p>
+          <p class="left fz-18 fm-kt center">涓� 缂栥��闆蜂咕涔俱��鍒樼櫥涓�</p>
+          <p class="left fz-18 fm-kt center">鍓富缂栥��鍗庡浗姊呫��澶忋��瀛c��瀹夈��瀹�</p>
+          <p class="left fz-18 fm-kt center">鍙傘��缂栥��钄°��瀵汇��灞堟灄鑹炽��鍒樸��娓�</p>
+          <hr />
+          <div class="fl">
+            <div class="copyright-left">
+              <p class="">绛栥��銆�鍒�</p>
+              <p class="">璐d换缂栬緫</p>
+              <p class="">鍑虹増鍗曚綅</p>
+              <p class="">鍦般��銆�鍧�</p>
+              <p class="">閭��銆�缂�</p>
+              <p class="">鍙戣鐢佃瘽</p>
+              <p class="">鏈ぞ缃戝潃</p>
+              <p class="">E - mail</p>
+              <p class="">鎺掔増鍗曚綅</p>
+              <p class="">鍗板埛鍗曚綅</p>
+              <p class="">缁忛攢鍗曚綅</p>
+              <p class="">寮�銆�銆�鏈�</p>
+              <p class="">鍗般��銆�寮�</p>
+              <p class="">瀛椼��銆�鏁�</p>
+              <p class="">鐗堛��銆�娆�</p>
+              <p class="">鍗般��銆�娆�</p>
+              <p class="">瀹氥��銆�浠�</p>
+            </div>
+            <div class="copyright-right">
+              <p>鏉庣孩涓�</p>
+              <p>鏉庣孩涓�</p>
+              <p>鏃呮父鏁欒偛鍑虹増绀�</p>
+              <p>鍖椾含甯傛湞闃冲尯瀹氱搴勫崡閲� 1 鍙�</p>
+              <p>100024</p>
+              <p>锛�010锛�65778403銆�65728372銆�65767462锛堜紶鐪燂級</p>
+              <p>www.tepcb.com</p>
+              <p>tepfx@163.com</p>
+              <p>鍖椾含鏃呮暀鏂囧寲浼犳挱鏈夐檺鍏徃</p>
+              <p>鍖椾含鍗庤仈鍗板埛鏈夐檺鍏徃</p>
+              <p>鏂板崕涔﹀簵</p>
+              <p>710姣背脳1000姣背銆�1/16</p>
+              <p>21.25</p>
+              <p>240 鍗冨瓧</p>
+              <p>2025 骞� 3 鏈堢 2 鐗�</p>
+              <p>2025 骞� 3 鏈堢 1 娆″嵃鍒�</p>
+              <p>88.00 鍏�</p>
+            </div>
+          </div>
+          <p class="left center fz-16 mt-10">
+            锛堝浘涔﹀鏈夎璁㈠樊閿欒涓庡彂琛岄儴鑱旂郴锛�
+          </p>
+        </div>
+        <div class="copyrightPage-bottom"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "pageHeader",
+  props: {
+    showPageList: {
+      type: Array,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="less" scoped>
+hr {
+  color: #000;
+  border: 0;
+  height: 2px;
+  background-color: #000;
+  font-weight: bold;
+  margin-bottom: 0;
+}
+.bold {
+  font-weight: bold;
+}
+</style>
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue b/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue
new file mode 100644
index 0000000..133db70
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue
@@ -0,0 +1,978 @@
+<template>
+  <div class="page-main" @scroll="throttledScrollHandler">
+    <div id="searchDomBox" style="display: none">
+      <div id="searchContent"></div>
+    </div>
+    <div
+      class="page-content"
+      :style="{
+        fontSize: fontSize + 'px',
+        transform: `scale(${pageZoom})`,
+        transformOrigin: 'center top',
+      }"
+    >
+      <pageHeader
+        v-if="showCatalogList.indexOf(1) > -1"
+        :showPageList="loadPageList"
+      ></pageHeader>
+      <chapterOne
+        v-if="showCatalogList.indexOf(2) > -1"
+        :showPageList="loadPageList"
+        :interfaceQuestion="questionDataMap"
+      ></chapterOne>
+      <!-- <chapterTwo
+          v-if="showCatalogList.indexOf(2) > -1"
+          :showPageList="loadPageList"
+        ></chapterTwo> -->
+      <!-- <chapterThree
+              v-if="showCatalogList.indexOf(4) > -1"
+              :showPageList="loadPageList"
+            ></chapterThree>
+            <chapterFour
+              v-if="showCatalogList.indexOf(5) > -1"
+              :showPageList="loadPageList"
+            ></chapterFour>
+        <chapterFive
+              v-if="showCatalogList.indexOf(2) > -1"
+              :showPageList="loadPageList"
+              :interfaceQuestion="questionDataMap"
+            ></chapterFive>  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import pageHeader from "./header.vue";
+import chapterOne from "./chapter001.vue";
+//   import chapterTwo from "./chapter002.vue";
+//   import chapterThree from "./chapter003.vue";
+//   import chapterFour from "./chapter004.vue";
+//   import chapterFive from "./chapter005.vue";
+import NoteIcon from "@/assets/images/biji.png";
+// import getQuestionList from "@/assets/methods/examination";
+// import testData from "../../assets/examinationList";
+import _ from "lodash";
+import Swiper from "swiper/bundle";
+import "swiper/swiper-bundle.css";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+export default {
+  name: "pageContent",
+  data() {
+    return {
+      catalogLength: 2, // 鎬荤珷鑺傛暟
+      showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+      loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+      throttleThreshold: 100, // 鑺傛祦闃堝��
+      previousScrollTop: 0,
+      throttledScrollHandler: null,
+      observer: null,
+      loadPageObserver: null,
+      loadPageList: [],
+      questionDataMap: {},
+      renderSignMap: {},
+      highlightData: null,
+      audioPath: "",
+      currentTime: null,
+      videoList: [],
+    };
+  },
+  computed: {
+    fontSize() {
+      this.transformDom(this.$store.state.qiankun.fontSize);
+      return this.$store.state.qiankun.fontSize
+        ? this.$store.state.qiankun.fontSize
+        : 16;
+    },
+    pageZoom() {
+      return this.$store.state.qiankun.scale
+        ? this.$store.state.qiankun.scale / 100
+        : 1;
+    },
+  },
+  watch: {
+    showCatalogList: {
+      handler(newVal, oldVal) {
+        if (
+          this.$store.state.qiankun &&
+          this.$store.state.qiankun.catalogChange
+        ) {
+          // 璋冪敤鐖跺眰鏂规硶
+          this.$store.state.qiankun.catalogChange({
+            showCatalogList: newVal,
+          });
+        }
+        // 鍚姩椤电爜瑙傚療
+        setTimeout(() => {
+          this.initObservation();
+          this.initThemeColor();
+        }, 500);
+      },
+    },
+    loadPageList: {
+      handler(newVal, oldVal) {
+        setTimeout(() => {
+          this.transformDom(this.$store.state.qiankun.fontSize);
+          this.initSwiper();
+          this.initViewer();
+          this.closeAudio();
+          this.closeVideo();
+        }, 200);
+      },
+    },
+    pageZoom: {
+      handler(newVal, oldVal) {
+        const scrollBox = (
+          this.container ? this.container : document
+        ).querySelector(".page-main");
+        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+      },
+    },
+  },
+  mounted() {
+    // 榛樿鍔犺浇绔犺妭
+    this.showCatalogList = [1];
+    // 婊氬姩鐩戝惉鑺傛祦
+    this.throttledScrollHandler = _.throttle(
+      this.scrollFun,
+      this.throttleThreshold,
+      { leading: true, trailing: false }
+    );
+    // 瀹氫箟瀛愬眰鏂规硶
+    if (this.setGlobalState) {
+      // 鎻愪緵椤甸潰璺宠浆鍔熻兘
+      this.setGlobalState({
+        gotoPage: (catalog, page) => {
+          this.gotoPage(catalog, page);
+        },
+        // 娓叉煋绗旇銆侀珮浜�佸垝绾�
+        renderSign: (type, data) => {
+          // 鍥犱负璋冩暣涓洪〉闈㈡噿鍔犺浇锛屾墍浠ユ覆鏌撴爣璁颁篃闇�瑕佹寜鐓ч〉闈㈣繘琛屽鐞嗭紝鍏堝偍瀛樻暟鎹紝椤甸潰鍔犺浇瀹屾垚鍐嶆覆鏌撳搴旂殑鏍囪锛�
+          this.handelSignData(type, data);
+          // this.renderSign(type, data);
+        },
+        // 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
+        delSign: (data) => {
+          this.delSign(data);
+        },
+        // 鍏ㄦ枃妫�绱�
+        searchBookByKeyword: (keyword) => {
+          return this.searchTextByPage(keyword);
+        },
+        // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+        jumpSearchItem: (data) => {
+          this.searchItemLocation(data);
+        },
+      });
+    }
+
+    // 鍒涘缓涓�涓柊鐨� Intersection Observer 瀹炰緥锛岀敤浜庤瀵熺洰鏍囧厓绱犲拰鎵ц鐩稿簲鐨勫洖璋冨嚱鏁般��
+    // new IntersectionObserver(callback, options)锛氫娇鐢ㄤ箣鍓嶅畾涔夌殑 callback 鍥炶皟鍑芥暟鍜� options 閰嶇疆閫夐」鏉ュ垵濮嬪寲 Intersection Observer 瀹炰緥銆�
+    this.observer = new IntersectionObserver(this.pageChangeCallback, {
+      root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+      rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+      threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+    });
+
+    this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
+      root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+      rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+      threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+    });
+
+    // 鍚姩椤电爜瑙傚療
+    setTimeout(() => {
+      this.initObservation();
+      this.initThemeColor();
+    }, 500);
+
+    // 娴嬭瘯椤甸潰璺宠浆
+    setTimeout(() => {
+      this.gotoPage(2, 6);
+    }, 500);
+
+    // 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
+    // });
+    // }, 500);
+  },
+  methods: {
+    // setZoom1() {
+    //   let scale = this.$store.state.qiankun.scale + 10;
+    //   const scrollBox = (
+    //     this.container ? this.container : document
+    //   ).querySelector(".page-main");
+    //   this.$store.commit("setZoom", scale);
+    // },
+    // setZoom2() {
+    //   let scale = this.$store.state.qiankun.scale - 10;
+    //   const scrollBox = (
+    //     this.container ? this.container : document
+    //   ).querySelector(".page-main");
+    //   this.$store.commit("setZoom", scale);
+    // },
+    // 婊氬姩鐩戝惉
+    scrollFun(event) {
+      this.handleVideoPicture();
+      // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
+      if (event.target.scrollTop > this.previousScrollTop) {
+        this.getAduio();
+        // 鍚戜笅
+        const currentScrollTop =
+          event.target.scrollTop + event.target.offsetHeight;
+        if (
+          currentScrollTop >=
+          event.target.scrollHeight - this.loadThreshold
+        ) {
+          console.log(1);
+
+          // 鍒拌揪闃堝��
+          if (
+            this.showCatalogList[this.showCatalogList.length - 1] <
+            this.catalogLength
+          ) {
+            // 鍔犺浇涓嬩竴绔�
+            this.showCatalogList.push(
+              this.showCatalogList[this.showCatalogList.length - 1] + 1
+            );
+            if (this.showCatalogList.length > 3) {
+              // 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔�
+              this.showCatalogList.shift();
+            }
+          }
+        }
+      } else if (event.target.scrollTop < this.previousScrollTop) {
+        this.handleAudio();
+        // 鍚戜笂
+        const currentScrollTop = event.target.scrollTop;
+        if (currentScrollTop <= this.loadThreshold) {
+          // 鍒拌揪闃堝��
+          if (this.showCatalogList[0] > 0) {
+            // 鍔犺浇涓婁竴绔�
+            this.showCatalogList.unshift(this.showCatalogList[0] - 1);
+            if (this.showCatalogList.length > 3) {
+              // 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔�
+              this.showCatalogList.pop();
+            }
+          }
+        }
+      }
+      // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
+      // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
+      this.previousScrollTop = event.target.scrollTop;
+    },
+    // 绔犺妭銆侀〉闈㈣烦杞�
+    gotoPage(catalog, page) {
+      if (catalog >= 0 && catalog <= this.catalogLength) {
+        // 澶勭悊娓叉煋绔犺妭
+        if (catalog == 0) {
+          this.showCatalogList = [0, 1];
+        } else if (catalog == this.catalogLength) {
+          this.showCatalogList = [
+            this.catalogLength - 2,
+            this.catalogLength - 1,
+            this.catalogLength,
+          ];
+        } else {
+          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
+        }
+        setTimeout(() => {
+          // 璺宠浆椤电爜
+          const pageDom = (
+            this.container ? this.container : document
+          ).querySelector(`[page="${page}"]`);
+          if (pageDom) {
+            pageDom.scrollIntoView();
+          } else {
+            console.log("椤电爜閿欒锛�");
+          }
+        }, 500);
+      } else {
+        console.log("绔犺妭閿欒锛�");
+      }
+    },
+
+    // 澶勭悊鏍囪鏁版嵁
+    handelSignData(type, data) {
+      if (this.loadPageList.indexOf(Number(data.page)) > -1) {
+        // 绔嬪嵆娓叉煋
+        this.renderSign(type, data);
+      }
+
+      // 鍌ㄥ瓨鏁版嵁
+      if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
+      if (!this.renderSignMap[type][data.page])
+        this.renderSignMap[type][data.page] = [];
+      this.renderSignMap[type][data.page].push(data);
+    },
+
+    // 娓叉煋鏍囪
+    renderSign(type, data) {
+      // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+      if (this.$store.state.qiankun.disableSign) {
+        return false;
+      }
+      const existence = (
+        this.container ? this.container : document
+      ).querySelector(`[dataid="${data.id}"]`);
+      // 鍘婚噸
+      if (!existence) {
+        const pageDom = (
+          this.container ? this.container : document
+        ).querySelector(`[page="${data.page}"]`);
+        // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
+        const treeWalker = document.createTreeWalker(
+          pageDom,
+          NodeFilter.SHOW_TEXT
+        );
+        const allTextNodes = [];
+        let currentNode = treeWalker.nextNode();
+        while (currentNode) {
+          allTextNodes.push(currentNode);
+          currentNode = treeWalker.nextNode();
+        }
+        for (let i = 0; i < allTextNodes.length; i++) {
+          const textDom = allTextNodes[i];
+          if (textDom.textContent.indexOf(data.txt) > -1) {
+            let reg = new RegExp(`${data.txt}`, "ig");
+            switch (type) {
+              case "Highlight":
+                // 楂樹寒
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+                  );
+                break;
+              case "Dashing":
+                // 鍒掔嚎
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+                  );
+                break;
+              case "Note":
+                // 绗旇
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
+                  );
+                break;
+            }
+          }
+        }
+      }
+    },
+    // 鍒犻櫎鏍囪娓叉煋
+    delSign({ ids, type }) {
+      if (ids && ids.length) {
+        for (let i = 0; i < ids.length; i++) {
+          const id = ids[i];
+          const dom = (
+            this.container ? this.container : document
+          ).querySelector(`[dataid="${id}"]`);
+          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+            dom.outerHTML,
+            dom.outerText
+          );
+        }
+      }
+      if (type) {
+        const doms = (
+          this.container ? this.container : document
+        ).querySelectorAll(`[datatype="${type}"]`);
+        for (let i = 0; i < doms.length; i++) {
+          const dom = doms[i];
+          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+            dom.outerHTML,
+            dom.outerText
+          );
+        }
+      }
+    },
+    initObservation() {
+      const sections = (
+        this.container ? this.container : document
+      ).querySelectorAll(".page-box");
+      sections.forEach((section) => {
+        if (this.config.activeBook && this.config.activeBook.tryPageCount) {
+          const page = section.getAttribute("page");
+          if (Number(page) > this.config.activeBook.tryPageCount) {
+            let chapterDom = this.getParentWithClass(section, "chapter");
+            const chapterNum = chapterDom.getAttribute("num");
+            this.catalogLength = Number(chapterNum) - 1;
+            section.remove();
+            return false;
+          }
+        }
+        // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
+        const isObserver = section.getAttribute("observer");
+        const isLoadObserver = section.getAttribute("loadObserver");
+        if (!isObserver) {
+          this.observer.observe(section);
+          section.setAttribute("observer", "1");
+        }
+        if (!isLoadObserver) {
+          this.loadPageObserver.observe(section);
+          section.setAttribute("loadObserver", "1");
+        }
+      });
+    },
+    initThemeColor() {
+      // 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐�
+      const colorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-color");
+      const backgroundColorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-back");
+      const borderColorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-border");
+      // 鑾峰彇閰嶇疆鐨勪富棰樿壊
+      const bookThemeColor =
+        this.config.activeBook && this.config.activeBook.bookThemeColor
+          ? this.config.activeBook.bookThemeColor
+          : null;
+      const chapterThemeColor =
+        this.config.activeBook && this.config.activeBook.chapterThemeColor
+          ? this.config.activeBook.chapterThemeColor
+          : null;
+      const pageThemeColor =
+        this.config.activeBook && this.config.activeBook.pageThemeColor
+          ? this.config.activeBook.pageThemeColor
+          : null;
+      colorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.color = themeColor;
+        }
+      });
+      backgroundColorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.backgroundColor = themeColor;
+        }
+      });
+      borderColorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.borderColor = themeColor;
+        }
+      });
+    },
+    getParentWithClass(element, className) {
+      while (element.parentElement) {
+        element = element.parentElement;
+        if (element.classList.contains(className)) {
+          return element;
+        }
+      }
+    },
+    pageChangeCallback(entries, observer) {
+      //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
+      entries.forEach((entry) => {
+        //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ��
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱�
+          const page = target.getAttribute("page");
+          const catalogDom = this.tool.getParentNodeByClassName(
+            target,
+            "chapter"
+          );
+          const catalog = catalogDom.getAttribute("num");
+          let text = null;
+          if (target.querySelector("p")) {
+            text = target.querySelector("p").textContent.substring(0, 50);
+          }
+          // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
+          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
+            this.$store.state.qiankun.pageChange({
+              page: page,
+              catalog: catalog,
+              text,
+            });
+          // const sections = Array.from(document.querySelectorAll(".section"));
+          //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
+          // let index = sections.findIndex((section) => section === target) + 1;
+          //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併��
+        }
+      });
+    },
+    loadPageCallback(entries, observer) {
+      entries.forEach(async (entry) => {
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          const page = target.getAttribute("page");
+          if (this.loadPageList.indexOf(Number(page)) == -1) {
+            const catalogDom = this.tool.getParentNodeByClassName(
+              target,
+              "chapter"
+            );
+            // 娣诲姞椤电爜
+            this.loadPageList.push(Number(page));
+            const catalog = catalogDom.getAttribute("num");
+            // if (!this.questionDataMap[page]) {
+            //   if (testData && testData[catalog]) {
+            //     if (testData[catalog][page]) {
+            //       if (Array.isArray(testData[catalog][page])) {
+            //         this.questionDataMap[page] = await getQuestionList(
+            //           page,
+            //           testData[catalog][page],
+            //           this.config.activeBook
+            //         );
+            //       } else {
+            //         const obj = {};
+            //         for (let key in testData[catalog][page]) {
+            //           obj[key] = await getQuestionList(
+            //             [],
+            //             testData[catalog][page][key],
+            //             this.config.activeBook
+            //           );
+            //         }
+            //         this.questionDataMap[page] = obj;
+            //       }
+            //       console.log("棰樼洰", this.questionDataMap);
+            //     }
+            //   }
+            // }
+            // 娓叉煋杩欎竴椤电殑鏍囪
+            for (const key in this.renderSignMap) {
+              if (this.renderSignMap[key][page]) {
+                this.renderSignMap[key][page].forEach((item) => {
+                  this.renderSign(key, item);
+                });
+              }
+            }
+            // 澶勭悊楂樹寒
+            if (this.highlightData) {
+              // 楂樹寒琛�
+              setTimeout(() => {
+                // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+                const pageTextList = document.createTreeWalker(
+                  target,
+                  NodeFilter.SHOW_TEXT
+                );
+                // 鍖归厤鍏抽敭瀛�
+                const allPageTextNodes = [];
+                let currentNode = pageTextList.nextNode();
+                while (currentNode) {
+                  allPageTextNodes.push(currentNode);
+                  currentNode = pageTextList.nextNode();
+                }
+                for (let i = 0; i < allPageTextNodes.length; i++) {
+                  const textDom = allPageTextNodes[i];
+                  let txtIndex = textDom.textContent.indexOf(
+                    this.highlightData.txt
+                  );
+                  if (txtIndex > -1) {
+                    textDom.parentNode.style.transition =
+                      "background-color 0.8s";
+                    textDom.parentNode.scrollIntoView();
+                    textDom.parentNode.style.backgroundColor = "#79bbf0";
+                    setTimeout(() => {
+                      textDom.parentNode.style.backgroundColor = "";
+                    }, 1000);
+                  }
+                }
+              }, 100);
+            }
+            if (this.loadPageList.length > 5) {
+              // 瓒呰繃5椤�
+              this.loadPageList.shift();
+            }
+          }
+        }
+      });
+    },
+    initSwiper() {
+      const doms = (
+        this.container ? this.container : document
+      ).querySelectorAll(".swiper-img");
+      for (let i = 0; i < doms.length; i++) {
+        const dom = doms[i];
+        new Swiper(dom, {
+          loop: false, // 鏃犵紳
+          autoplay: {
+            //鑷姩寮�濮�
+            delay: 3000, //鏃堕棿闂撮殧
+            disableOnInteraction: false, //*鎵嬪姩鎿嶄綔杞挱鍥惧悗涓嶄細鏆傚仠*
+          },
+          paginationClickable: true,
+          slidesPerView: 1, // 涓�缁勪笁涓�
+          spaceBetween: 30, // 闂撮殧
+          // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+          navigation: {
+            nextEl: dom.querySelector(".swiper-button-next"),
+            prevEl: dom.querySelector(".swiper-button-prev"),
+          },
+          // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+          // observer: true,
+          // observeParents: true
+          // // 濡傛灉闇�瑕佸垎椤靛櫒
+          // pagination: {
+          //   el: (this.container ? this.container : document).querySelector(
+          //     ".swiper-pagination"
+          //   ),
+          //   clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑�
+          // }
+        });
+      }
+      const pptDoms = (
+        this.container ? this.container : document
+      ).querySelectorAll(".swiper_ppt");
+      for (let i = 0; i < pptDoms.length; i++) {
+        const dom = pptDoms[i];
+        new Swiper(dom, {
+          loop: false, // 鏃犵紳
+          autoplay: false,
+          paginationClickable: true,
+          slidesPerView: 1, // 涓�缁勪笁涓�
+          spaceBetween: 30, // 闂撮殧
+          // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+          navigation: {
+            nextEl: dom.querySelector(".swiper-button-next"),
+            prevEl: dom.querySelector(".swiper-button-prev"),
+          },
+          // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+          observer: true,
+          observeParents: true,
+          on: {
+            init: (value) => {
+              let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+              let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+              var paginationInfoEl = dom.querySelector(".pageBox");
+              if (paginationInfoEl)
+                paginationInfoEl.textContent = currentPage + "/" + totalPages;
+            },
+            slideChange: (value) => {
+              let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+              let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+              var paginationInfoEl = dom.querySelector(".pageBox");
+              if (paginationInfoEl)
+                paginationInfoEl.textContent = currentPage + "/" + totalPages;
+            },
+          },
+        });
+      }
+    },
+    initViewer() {
+      const doms = (
+        this.container ? this.container : document
+      ).querySelectorAll(".openImgBox");
+      for (let i = 0; i < doms.length; i++) {
+        const dom = doms[i];
+        new Viewer(dom, {
+          container: this.container
+            ? this.container.querySelector("#app")
+            : "body",
+          navbar: true, // 鏄剧ず瀵艰埅鏍�
+          toolbar: true, // 鏄剧ず宸ュ叿鏍�
+          title: true, // 鏄剧ず鏍囬
+        });
+      }
+    },
+    // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+    searchTextByPage(keyword) {
+      const searchResult = [];
+      let catalogIndex = 0;
+      // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+      const pageData = {
+        pageHeader,
+        chapterOne,
+        //   chapterTwo,
+        //   chapterThree,
+        //   chapterFour,
+        //   chapterFive,
+      };
+      // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+      for (const key in pageData) {
+        catalogIndex++;
+        let pageComponent, pageExample;
+        // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+        pageComponent = Vue.extend(pageData[key]);
+        pageExample = new pageComponent({
+          propsData: {
+            showPageList: [],
+            questionData: {},
+            isSearch: true,
+          },
+        });
+        pageExample.$mount(
+          (this.container ? this.container : document).querySelector(
+            "#searchContent"
+          )
+        );
+        // 鑾峰彇椤电爜
+        const pageDom = (this.container ? this.container : document)
+          .querySelector("#searchDomBox")
+          .querySelectorAll(".page-box");
+        const pages = [];
+        for (let i = 0; i < pageDom.length; i++) {
+          const pageDomItem = pageDom[i];
+          pages.push(Number(pageDomItem.getAttribute("page")));
+        }
+        // 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
+        pageExample.$destroy();
+        (this.container ? this.container : document).querySelector(
+          "#searchDomBox"
+        ).innerHTML = '<div id="searchContent"></div>';
+        // 閬嶅巻椤电爜
+        if (pages.length) {
+          for (let i = 0; i < pages.length; i++) {
+            const pageNum = pages[i];
+            // 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
+            pageComponent = Vue.extend(pageData[key]);
+            pageExample = new pageComponent({
+              propsData: {
+                showPageList: [pageNum],
+                questionData: {},
+                isSearch: true,
+              },
+            });
+            pageExample.$mount(
+              (this.container ? this.container : document).querySelector(
+                "#searchContent"
+              )
+            );
+            // 鑾峰彇瀵瑰簲椤甸潰dom
+            const thisPageDom = (this.container ? this.container : document)
+              .querySelector("#searchDomBox")
+              .querySelector(`[page="${pageNum}"]`);
+            if (thisPageDom) {
+              // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+              const pageTextList = document.createTreeWalker(
+                thisPageDom,
+                NodeFilter.SHOW_TEXT
+              );
+              // 鍖归厤鍏抽敭瀛�
+              const allPageTextNodes = [];
+              let currentNode = pageTextList.nextNode();
+              while (currentNode) {
+                allPageTextNodes.push(currentNode);
+                currentNode = pageTextList.nextNode();
+              }
+              for (let i = 0; i < allPageTextNodes.length; i++) {
+                const textDom = allPageTextNodes[i];
+                let txtIndex = textDom.textContent.indexOf(keyword);
+                if (txtIndex > -1) {
+                  // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
+                  searchResult.push({
+                    page: pageNum,
+                    catalog: catalogIndex,
+                    txt: textDom.textContent,
+                    txtIndex: txtIndex,
+                  });
+                }
+              }
+              // 缁撴潫锛屽嵏杞介攢姣�
+              pageExample.$destroy();
+              (this.container ? this.container : document).querySelector(
+                "#searchDomBox"
+              ).innerHTML = '<div id="searchContent"></div>';
+            }
+          }
+        }
+      }
+      // 杈撳嚭鎼滅储缁撴灉
+      console.log(searchResult);
+      return searchResult;
+    },
+    // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
+    searchItemLocation(data) {
+      // 璁板綍楂樹寒淇℃伅
+      this.highlightData = data;
+      // 璺宠浆
+      this.gotoPage(data.catalog, data.page, () => {});
+    },
+    // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
+    getAduio() {
+      let allVideo = (
+        this.container ? this.container : document
+      ).querySelectorAll(".audio");
+      allVideo = Array.from(allVideo);
+      this.videoList = allVideo;
+      if (allVideo.length) {
+        // 鏌ユ壘鎾斁鐘舵�佺殑鏈�鍚庝竴鏉¢煶棰�
+        const playAudio = allVideo
+          .reverse()
+          .find((item) => item.paused == false);
+        if (playAudio) {
+          const bottomGap = playAudio.getBoundingClientRect().bottom;
+          if (bottomGap < 0) {
+            playAudio.pause();
+            this.audioPath = playAudio.src;
+            this.currentTime = playAudio.currentTime;
+          }
+        }
+      }
+    },
+    // 椤甸潰鍚戜笂婊氬姩锛岄煶棰戝皬绐楀洖鏀�
+    handleAudio() {
+      if (!this.audioPath) return false;
+      let allVideo = (
+        this.container ? this.container : document
+      ).querySelectorAll(".audio");
+      allVideo = Array.from(allVideo);
+      if (allVideo.length) {
+        //鏌ユ壘涓庡皬绐楁挱鏀鹃煶棰戝悓婧愮殑椤甸潰audio DOM
+        const playAudio = allVideo.find((item) => item.src == this.audioPath);
+        if (playAudio) {
+          const bottomGap = playAudio.getBoundingClientRect().bottom;
+          if (bottomGap >= 0) {
+            if (this.$refs.audioPlayer) {
+              const playerState = this.$refs.audioPlayer.getVideoPlayer();
+              this.audioPath = "";
+              playAudio.currentTime = playerState.currentTime;
+              if (!playerState.paused) playAudio.play();
+            }
+          }
+        }
+      }
+    },
+    // 鍏抽棴mini video
+    closeMiniAudio() {
+      this.audioPath = "";
+    },
+    // 鐐瑰嚮闊抽鎾斁锛屽叧闂叾浠栭煶棰�
+    closeAudio() {
+      let allAudio = (
+        this.container ? this.container : document
+      ).querySelectorAll(".audio");
+      for (let index = 0; index < allAudio.length; index++) {
+        const item = allAudio[index];
+        item.addEventListener("play", () => {
+          const audioList = Array.from(allAudio);
+          for (let cindex = 0; cindex < audioList.length; cindex++) {
+            const citem = audioList[cindex];
+            if (citem.currentSrc != item.src) {
+              citem.pause();
+            }
+          }
+          this.closeMiniAudio();
+        });
+      }
+    },
+    // 鐐瑰嚮瑙嗛鍏抽棴鍏朵粬
+    closeVideo() {
+      let allVideo = (
+        this.container ? this.container : document
+      ).querySelectorAll(".video");
+      for (let index = 0; index < allVideo.length; index++) {
+        const item = allVideo[index];
+        item.addEventListener("playing", (item) => {
+          const path = item.srcElement.src;
+          const videoList = Array.from(allVideo);
+          for (let cindex = 0; cindex < videoList.length; cindex++) {
+            const citem = videoList[cindex];
+            if (citem.currentSrc != path && path) {
+              citem.pause();
+            }
+          }
+        });
+      }
+    },
+    // 瑙嗛灏忕獥
+    handleVideoPicture() {
+      let doms = (this.container ? this.container : document).querySelectorAll(
+        ".video"
+      );
+      doms = Array.from(doms);
+      if (!doms.length) return false;
+      const playVudio = doms.reverse().find((item) => item.paused == false);
+      if (playVudio) {
+        const bottomGap = playVudio.getBoundingClientRect().bottom;
+        const topGap = playVudio.getBoundingClientRect().top;
+        if (bottomGap < 0 || topGap > window.innerHeight) {
+          try {
+            if (playVudio.readyState) playVudio.requestPictureInPicture();
+          } catch (error) {
+            console.log(error, "灏忕獥閿欒error");
+          }
+        }
+      }
+    },
+    //鍏朵粬绫诲悕涓嬪瓧浣撳ぇ灏忓彉鍖�
+    transformDom(fs) {
+      if (!fs) return;
+      let doms = (this.container ? this.container : document).querySelectorAll(
+        ".block"
+      );
+      if (!doms.length) return;
+      for (let index = 0; index < doms.length; index++) {
+        const dom = doms[index];
+        dom.style.fontSize = fs + "px";
+      }
+    },
+  },
+  components: {
+    pageHeader,
+    chapterOne,
+    //   chapterTwo,
+    //   chapterThree,
+    //   chapterFour,
+    //   chapterFive,
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.page-main {
+
+
+  .page-content {
+    max-width: 816px;
+    min-width: 375px;
+    margin: 0 auto;
+    padding-bottom: 100px;
+  }
+}
+</style>
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/view/index.vue b/src/books/hotelEnglishTrainingBrochure2nd/view/index.vue
new file mode 100644
index 0000000..d79accf
--- /dev/null
+++ b/src/books/hotelEnglishTrainingBrochure2nd/view/index.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="hotelEnglishTrainingBrochure2nd" @mouseup="handleMouseUp">
+      <pageContent></pageContent>
+    </div>
+  </template>
+  
+  <script>
+  import pageContent from "./components/index.vue";
+  export default {
+    name: "hotelEnglishTrainingBrochure2nd",
+    components: {
+      pageContent,
+    },
+    computed: {
+      fontSize() {
+        return this.$store.state.qiankun.fontSize;
+      },
+      pageZoom() {
+        return this.$store.state.qiankun.scale / 100;
+      },
+    },
+  
+    methods: {
+      getParentWithClass(element, className) {
+        while (element.parentElement) {
+          element = element.parentElement;
+          if (element.classList.contains(className)) {
+            return element;
+          }
+        }
+      },
+      handleMouseUp(e) {
+        const selection = (
+          this.container ? this.container : window
+        ).getSelection();
+        const txt = selection.toString();
+        if (selection.type != "none" && txt) {
+          let node = selection.anchorNode.parentNode;
+          let pageHtml = this.getParentWithClass(
+            selection.anchorNode,
+            "page-box"
+          );
+          let chapterDom = this.getParentWithClass(
+            selection.anchorNode,
+            "chapter"
+          );
+          let chapterNum;
+          if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+          if (pageHtml) {
+            const page = pageHtml.getAttribute("page");
+            // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶
+            if (this.$store.state.qiankun.windowSelection) {
+              this.$store.state.qiankun.windowSelection({
+                chapterNum,
+                txt,
+                page,
+                x: e.x,
+                y: e.y,
+              });
+            }
+          }
+        } else {
+          if (this.$store.state.qiankun.windowSelection) {
+            this.$store.state.qiankun.windowSelection({
+              chapterNum: "",
+              txt: "",
+              page: "",
+              x: e.x,
+              y: e.y,
+            });
+          }
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style lang="less">
+  @import "../assets/main.less";
+  </style>
\ No newline at end of file
diff --git a/src/books/preschoolEvaluation/assets/main.less b/src/books/preschoolEvaluation/assets/main.less
index 0828a95..ec18872 100644
--- a/src/books/preschoolEvaluation/assets/main.less
+++ b/src/books/preschoolEvaluation/assets/main.less
@@ -681,7 +681,7 @@
 
     .video-box {
         margin: 30px 0 20px 0;
-        border: 2px dashed #40C7F4;
+        border: 2px dashed #1c9e3a;
         padding: 3% 2% 2% 2%;
         position: relative;
     }
@@ -702,6 +702,11 @@
     .videoname {
         display: flex;
         justify-content: center;
+        align-items: center;
+
+        span{
+            margin-right: 20px;
+        }
     }
 
     .sInput {
diff --git a/src/components/pdfview/index.vue b/src/components/pdfview/index.vue
index 6a0d2f7..a712e0f 100644
--- a/src/components/pdfview/index.vue
+++ b/src/components/pdfview/index.vue
@@ -1,7 +1,15 @@
 <!-- @format -->
 <template>
-  <el-dialog :visible.sync="localDialogVisible" @open="hadleOpenDialog" width="60vw" top="2vh" append-to-body
-    lock-scroll :show-close="false" class="custom-dialog">
+  <el-dialog
+    :visible.sync="localDialogVisible"
+    @open="hadleOpenDialog"
+    width="60vw"
+    top="2vh"
+    append-to-body
+    lock-scroll
+    :show-close="false"
+    class="custom-dialog"
+  >
     <div slot="title" class="header_title">
       <span>{{ pdfTitle }}</span>
       <span @click="closeDialog"> x </span>
@@ -11,8 +19,7 @@
       <div class="pdfBox-component">
         <div class="preview" v-if="this.preViewMd5">
           <div id="imageParent" class="imageBox"></div>
-          <div class="bottom_tool">
-          </div>
+          <div class="bottom_tool"></div>
         </div>
         <div class="notBox" v-if="totalPage == 0 && !loading">
           <el-empty description="鏆傛棤鏁版嵁"></el-empty>
@@ -21,14 +28,13 @@
       </div>
     </div>
   </el-dialog>
-
 </template>
 <script>
-import Viewer from 'viewerjs'
-import 'viewerjs/dist/viewer.css'
-import { getResourcePath } from '@/assets/methods/resources'
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+import { getResourcePath } from "@/assets/methods/resources";
 export default {
-  name: 'pdf_view',
+  name: "pdf_view",
   props: {
     md5: {
       type: String,
@@ -42,18 +48,18 @@
     },
     pdfTitle: {
       type: String,
-    }
+    },
   },
   data() {
     return {
       localDialogVisible: false,
-      currentPageSrc: '',
+      currentPageSrc: "",
       currentPage: 1,
       totalPage: 1,
       viewerCon: null,
-      preViewMd5: '',
+      preViewMd5: "",
       loading: false,
-    }
+    };
   },
   watch: {
     // md5: {
@@ -85,126 +91,138 @@
   },
   methods: {
     hadleOpenDialog() {
-      this.preViewMd5 = this.md5
-      this.currentPage = 1
-      this.currentPageSrc = ''
-      this.totalPage = 1
-      this.viewerCon?.destroy()
+      this.preViewMd5 = this.md5;
+      this.currentPage = 1;
+      this.currentPageSrc = "";
+      this.totalPage = 1;
+      this.viewerCon?.destroy();
       this.loading = true;
       this.clearDom();
       this.getFileInfo();
       this.$nextTick(() => {
-        this.scrollBottom()
+        this.scrollBottom();
       });
     },
     closeDialog() {
-      this.localDialogVisible = false
+      this.localDialogVisible = false;
     },
     openDialog() {
-      this.localDialogVisible = true
+      this.localDialogVisible = true;
     },
     async downloadPdf() {
-      console.log(this.preViewMd5)
-      console.log(await getResourcePath(this.preViewMd5),"12345");
-      
-      window.open(await getResourcePath(this.preViewMd5))
+      console.log(await getResourcePath(this.preViewMd5), "12345");
+
+      window.open(await getResourcePath(this.preViewMd5));
     },
     domViewer() {
       // let ele = (this.container ? this.container : document).getElementById(
       //   'imageParent'
       // )
-      let ele = document.getElementById('imageParent')
+      let ele = document.getElementById("imageParent");
       if (ele) {
         this.viewerCon = new Viewer(ele, {
           inline: false,
           container: this.container
-            ? this.container.querySelector('#app')
-            : 'body',
+            ? this.container.querySelector("#app")
+            : "body",
           navbar: true, // 鏄剧ず瀵艰埅鏍�
           toolbar: true, // 鏄剧ず宸ュ叿鏍�
           title: true, // 鏄剧ず鏍囬
-        })
-      }
-    },
-    clearDom() {
-      let ele = document.getElementById('imageParent')
-      if (ele) {
-        ele.innerHTML = ''
-      }
-    },
-    createDom(page) {
-      var that = this
-      let ele = document.getElementById('imageParent')
-      const img = document.createElement('img')
-      img.src = this.getPageImage(page)
-      img.alt = ''
-      img.style.maxWidth = '90%'
-      img.style.padding = '30px 5%'
-      img.className = 'imgHover'
-      img.onclick = () => {
-        that.viewerCon?.destroy()
-        that.domViewer()
-      }
-      if (ele) {
-        ele.appendChild(img)
-      }
-    },
-    scrollBottom() {
-      var that = this
-      var ele = document.getElementById('imageParent')
-      if (ele) {
-        ele.addEventListener('scroll', function () {
-          // 璁$畻婊氬姩鏉¤窛绂诲簳閮ㄧ殑浣嶇疆
-          const scrollBottom = ele.scrollHeight - ele.scrollTop - ele.clientHeight
-          if (scrollBottom <= 10) {
-            that.currentPage++
-            if (that.currentPage <= that.totalPage) {
-              that.createDom(that.currentPage, ele)
-            }
-          }
         });
       }
     },
+    clearDom() {
+      let ele = document.getElementById("imageParent");
+      if (ele) {
+        ele.innerHTML = "";
+      }
+    },
+    createDom(page) {
+      var that = this;
+      let ele = document.getElementById("imageParent");
+      const img = document.createElement("img");
+      img.src = this.getPageImage(page);
+      // 鎵嬪姩瑙﹀彂婊氬姩浜嬩欢
+      // ele.dispatchEvent(new Event("scroll"));
+      img.alt = "";
+      img.style.maxWidth = "90%";
+      img.style.padding = "30px 5%";
+      img.className = "imgHover";
+      img.onclick = () => {
+        that.viewerCon?.destroy();
+        that.domViewer();
+      };
+      if (ele) {
+        ele.appendChild(img);
+      }
+    },
+
+    scrollBottom() {
+      const ele = document.getElementById("imageParent");
+      if (ele) {
+        let lastScrollTop = 0;
+        ele.addEventListener("scroll", () => {
+          const scrollTop = ele.scrollTop;
+          const scrollBottom = ele.scrollHeight - scrollTop - ele.clientHeight;
+          if (scrollBottom < 10 && scrollTop > lastScrollTop) {
+            console.log(
+              "婊氬姩鍒板簳閮紝褰撳墠椤碉細",
+              this.currentPage,
+              "鎬婚〉鏁帮細",
+              this.totalPage
+            );
+            if (this.currentPage < this.totalPage) {
+              this.currentPage++;
+              if (this.currentPage <= this.totalPage) {
+                this.createDom(this.currentPage, ele);
+              }
+            }
+          }
+          lastScrollTop = scrollTop;
+        });
+      }
+    },
+
     getFileInfo() {
       // 鑾峰彇鐩綍
-      this.loading = true
+      this.loading = true;
       this.MG.file
         .getPdfInfo({ md5: this.preViewMd5 })
         .then((res) => {
           try {
-            if (typeof res === 'string' && res !== null) {
-              console.log(134)
-              this.totalPage = JSON.parse(res).totalPages
-            } else if (typeof res === 'object' && res !== null) {
-              console.log(res.totalPages)
-              this.totalPage = res.totalPages
+            if (typeof res === "string" && res !== null) {
+              this.totalPage = JSON.parse(res).totalPages;
+            } else if (typeof res === "object" && res !== null) {
+              this.totalPage = res.totalPages;
             }
           } catch (error) {
-            console.log(error, 'pdf杩斿洖鍊肩被鍨嬮敊璇�');
+            console.log(error, "pdf杩斿洖鍊肩被鍨嬮敊璇�");
           }
-          console.log(this.currentPage,"111")
-          this.createDom(this.currentPage)
-          this.loading = false
+          Math.min(3, res.totalPages);
+          for (let i = 0; i <= Math.min(3, res.totalPages); i++) {
+            this.createDom(i + 1);
+          }
+          this.loading = false;
         })
         .catch((err) => {
-          this.totalPage = 0
-          this.createDom(this.currentPage)
-          console.error(err)
-          this.loading = false
-        })
+          this.totalPage = 0;
+          this.createDom(this.currentPage);
+          console.error(err);
+          this.loading = false;
+        });
     },
     getPageImage(page) {
-      const ctx = process.env.VUE_APP_API_URL
+      const ctx = process.env.VUE_APP_API_URL;
       return (
         ctx +
-        '/file/GetPdfPageImage' +
-        '?md5=' +
+        "/file/GetPdfPageImage" +
+        "?md5=" +
         this.preViewMd5 +
-        '&index=' +
+        "&index=" +
         page +
-        '&dpi=200'
-      )
+        "&dpi=200"
+      );
     },
   },
-}
+};
 </script>

--
Gitblit v1.9.1