From 0673f7fe45966e537c4b6263dd7dfc8cbd1f5ad5 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期三, 21 五月 2025 17:37:55 +0800
Subject: [PATCH] 中药手册

---
 src/books/MMVRTCMP/images/004-2.png               |    0 
 src/books/MMVRTCMP/images/002-3.png               |    0 
 src/books/MMVRTCMP/images/006-1.png               |    0 
 src/books/MMVRTCMP/images/tips-2.png              |    0 
 src/books/MMVRTCMP/images/008-1.png               |    0 
 src/books/MMVRTCMP/images/010-3.png               |    0 
 src/books/MMVRTCMP/images/page.png                |    0 
 src/books/MMVRTCMP/images/tips.png                |    0 
 src/books/MMVRTCMP/view/components/index.vue      |  915 ++++++++++++++++++++
 src/books/MMVRTCMP/view/components/pageHeader.vue |   48 +
 src/books/MMVRTCMP/images/002-2.png               |    0 
 src/books/MMVRTCMP/js/examinationList.js          |   28 
 src/books/MMVRTCMP/images/009-3.png               |    0 
 src/books/MMVRTCMP/images/005-3.png               |    0 
 src/books/MMVRTCMP/images/003-1.png               |    0 
 src/books/MMVRTCMP/images/004-3.png               |    0 
 src/books/MMVRTCMP/images/006-22.png              |    0 
 src/books/MMVRTCMP/js/tool.js                     |   57 +
 src/books/MMVRTCMP/images/007-3.png               |    0 
 src/books/MMVRTCMP/images/009-2.png               |    0 
 src/books/MMVRTCMP/images/008-3.png               |    0 
 src/books/MMVRTCMP/images/007-1.png               |    0 
 src/books/MMVRTCMP/images/003-2.png               |    0 
 src/books/MMVRTCMP/images/005-1.png               |    0 
 src/books/MMVRTCMP/images/007-2.png               |    0 
 src/books/MMVRTCMP/images/009-1.png               |    0 
 src/books/MMVRTCMP/images/010-1.png               |    0 
 src/books/MMVRTCMP/view/index.vue                 |   76 +
 src/books/MMVRTCMP/images/004-1.png               |    0 
 src/books/MMVRTCMP/images/006-3.png               |    0 
 src/books/MMVRTCMP/images/008-2.png               |    0 
 src/books/MMVRTCMP/css/default.less               | 1047 +++++++++++++++++++++++
 src/books/MMVRTCMP/images/002-1.png               |    0 
 src/books/MMVRTCMP/view/components/chapter001.vue |  345 +++++++
 src/books/MMVRTCMP/images/003-3.png               |    0 
 src/books/MMVRTCMP/images/005-2.png               |    0 
 src/books/MMVRTCMP/images/010-2.png               |    0 
 src/App.vue                                       |   93 +
 38 files changed, 2,585 insertions(+), 24 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6cd126b..9d79da2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,43 +4,86 @@
     <lifeCare v-if="activeBook.name == 'lifeCare'"></lifeCare>
     <embedded v-if="activeBook.name == 'embedded'"></embedded>
     <english v-if="activeBook.name == 'english'"></english>
-    <sportsAndHealth v-if="activeBook.name == 'sportsAndHealth'"></sportsAndHealth>
+    <sportsAndHealth
+      v-if="activeBook.name == 'sportsAndHealth'"
+    ></sportsAndHealth>
     <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance>
     <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama>
     <mathBook v-if="activeBook.name == 'mathBook'"></mathBook>
     <botany v-if="activeBook.name == 'botany'"></botany>
     <civilAviation v-if="activeBook.name == 'civilAviation'"></civilAviation>
     <civilServices v-if="activeBook.name == 'civilServices'"></civilServices>
-    <meetingPlanners v-if="activeBook.name == 'meetingPlanners'"></meetingPlanners>
-    <aviationBasicSkills v-if="activeBook.name == 'aviationBasicSkills'"></aviationBasicSkills>
+    <meetingPlanners
+      v-if="activeBook.name == 'meetingPlanners'"
+    ></meetingPlanners>
+    <aviationBasicSkills
+      v-if="activeBook.name == 'aviationBasicSkills'"
+    ></aviationBasicSkills>
     <aviationSafety v-if="activeBook.name == 'aviationSafety'"></aviationSafety>
-    <aviationEtiquette v-if="activeBook.name == 'aviationEtiquette'"></aviationEtiquette>
-    <preschoolGameGuidance v-if="activeBook.name == 'preschoolGameGuidance'"></preschoolGameGuidance>
-    <kindergartenLanguageActivity v-if="activeBook.name == 'kindergartenLanguageActivity'">
+    <aviationEtiquette
+      v-if="activeBook.name == 'aviationEtiquette'"
+    ></aviationEtiquette>
+    <preschoolGameGuidance
+      v-if="activeBook.name == 'preschoolGameGuidance'"
+    ></preschoolGameGuidance>
+    <kindergartenLanguageActivity
+      v-if="activeBook.name == 'kindergartenLanguageActivity'"
+    >
     </kindergartenLanguageActivity>
-    <kindergartenActivitiesDesignGuidance v-if="activeBook.name == 'kindergartenActivitiesDesignGuidance'">
+    <kindergartenActivitiesDesignGuidance
+      v-if="activeBook.name == 'kindergartenActivitiesDesignGuidance'"
+    >
     </kindergartenActivitiesDesignGuidance>
-    <childcareInstitutionsManagement v-if="activeBook.name == 'childcareInstitutionsManagement'">
+    <childcareInstitutionsManagement
+      v-if="activeBook.name == 'childcareInstitutionsManagement'"
+    >
     </childcareInstitutionsManagement>
-    <toddlerGameImplementation v-if="activeBook.name == 'toddlerGameImplementation'"></toddlerGameImplementation>
-    <aurturingAndEducationAged0to3 v-if="activeBook.name == 'aurturingAndEducationAged0to3'">
+    <toddlerGameImplementation
+      v-if="activeBook.name == 'toddlerGameImplementation'"
+    ></toddlerGameImplementation>
+    <aurturingAndEducationAged0to3
+      v-if="activeBook.name == 'aurturingAndEducationAged0to3'"
+    >
     </aurturingAndEducationAged0to3>
     <preschoolEvaluation v-if="activeBook.name == 'preschoolEvaluation'">
     </preschoolEvaluation>
-    <preschoolBasicKnowledge v-if="activeBook.name == 'preschoolBasicKnowledge'"></preschoolBasicKnowledge>
-    <behaviorObserveAndGuid v-if="activeBook.name == 'behaviorObserveAndGuid'"></behaviorObserveAndGuid>
-    <policiesAndRegulations v-if="activeBook.name == 'policiesAndRegulations'"></policiesAndRegulations>
-    <OralAndBroadcasting v-if="activeBook.name == 'OralAndBroadcasting'"></OralAndBroadcasting>
-    <practicalCareChildrenManual v-if="activeBook.name == 'practicalCareChildrenManual'"></practicalCareChildrenManual>
-    <childIllnessPreventionCare v-if="activeBook.name == 'childIllnessPreventionCare'"></childIllnessPreventionCare>
-    <artInitiationForAges0to3 v-if="activeBook.name == 'artInitiationForAges0to3'"></artInitiationForAges0to3>
-    <toddlerSportsSafetyProtection v-if="activeBook.name == 'toddlerSportsSafetyProtection'">
+    <preschoolBasicKnowledge
+      v-if="activeBook.name == 'preschoolBasicKnowledge'"
+    ></preschoolBasicKnowledge>
+    <behaviorObserveAndGuid
+      v-if="activeBook.name == 'behaviorObserveAndGuid'"
+    ></behaviorObserveAndGuid>
+    <policiesAndRegulations
+      v-if="activeBook.name == 'policiesAndRegulations'"
+    ></policiesAndRegulations>
+    <OralAndBroadcasting
+      v-if="activeBook.name == 'OralAndBroadcasting'"
+    ></OralAndBroadcasting>
+    <practicalCareChildrenManual
+      v-if="activeBook.name == 'practicalCareChildrenManual'"
+    ></practicalCareChildrenManual>
+    <childIllnessPreventionCare
+      v-if="activeBook.name == 'childIllnessPreventionCare'"
+    ></childIllnessPreventionCare>
+    <artInitiationForAges0to3
+      v-if="activeBook.name == 'artInitiationForAges0to3'"
+    ></artInitiationForAges0to3>
+    <toddlerSportsSafetyProtection
+      v-if="activeBook.name == 'toddlerSportsSafetyProtection'"
+    >
     </toddlerSportsSafetyProtection>
-    <cognitiveLanDevEduAges0to3 v-if="activeBook.name == 'cognitiveLanDevEduAges0to3'"></cognitiveLanDevEduAges0to3>
-    <aviationPassengerTransport6th v-if="activeBook.name == 'aviationPassengerTransport6th'">
+    <cognitiveLanDevEduAges0to3
+      v-if="activeBook.name == 'cognitiveLanDevEduAges0to3'"
+    ></cognitiveLanDevEduAges0to3>
+    <aviationPassengerTransport6th
+      v-if="activeBook.name == 'aviationPassengerTransport6th'"
+    >
     </aviationPassengerTransport6th>
-    <hotelEnglishTrainingBrochure2nd v-if="activeBook.name == 'hotelEnglishTrainingBrochure2nd'">
+    <hotelEnglishTrainingBrochure2nd
+      v-if="activeBook.name == 'hotelEnglishTrainingBrochure2nd'"
+    >
     </hotelEnglishTrainingBrochure2nd>
+    <MMVRTCMP v-if="activeBook.name == 'MMVRTCMP'"></MMVRTCMP>
   </div>
 </template>
 <script>
@@ -119,6 +162,7 @@
       import("./books/aviationPassengerTransport6th/view/index.vue"),
     hotelEnglishTrainingBrochure2nd: () =>
       import("./books/hotelEnglishTrainingBrochure2nd/view/index.vue"),
+    MMVRTCMP: () => import("./books/MMVRTCMP/view/index.vue"),
   },
   data() {
     return {
@@ -179,12 +223,13 @@
       // cognitiveLanDevEduAges0to3  // 0锝�3宀佸┐骞煎効璁ょ煡涓庤瑷�鍙戝睍鍙婃暀鑲�
       // aviationPassengerTransport6th  // 姘戣埅鏃呭杩愯緭绗�6鐗�(鏃呮父绀�)
       // hotelEnglishTrainingBrochure2nd // 閰掑簵鑻辫瀹炶娲婚〉鏁欑▼锛堢2鐗堬級锛堟梾娓哥ぞ锛�
+      // MMVRTCMP // 瑙嗚鎵嬪唽
       // 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
-          : "hotelEnglishTrainingBrochure2nd")
+          (process.env.VUE_APP_ENV == "product"
+            ? process.env.VUE_APP_BOOK_ID
+            : "MMVRTCMP")
       );
 
       // 娴嬭瘯璇曡30椤�
diff --git a/src/books/MMVRTCMP/css/default.less b/src/books/MMVRTCMP/css/default.less
new file mode 100644
index 0000000..f423145
--- /dev/null
+++ b/src/books/MMVRTCMP/css/default.less
@@ -0,0 +1,1047 @@
+.temp-bookInnerContentSports {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  .page-main {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+
+    .public-MMVRTCMP {
+      font-family: '瀹嬩綋';
+      max-width: 816px;
+      min-width: 375px;
+      margin: 0 auto;
+      border-color: #f49a4c;
+      height: 100%;
+      font-size: 18px;
+
+      .page-box {
+        box-sizing: border-box;
+        min-height: 1150px;
+        margin-bottom: 20px;
+        box-shadow: 0 3px 6px 1px #00000029;
+        background-color: #fff;
+        position: relative;
+        z-index: 1;
+      }
+
+      .notIndent {
+        text-indent: 0 !important;
+      }
+
+      .imgWidth {
+        width: 430px;
+        height: 360px;
+        border: 3px solid rgb(114, 174, 84);
+        margin-bottom: 50px;
+        padding: 30px;
+        box-sizing: border-box;
+        border-radius: 20px;
+        position: relative;
+        z-index: 999;
+
+        .itemImage {
+          height: 186px;
+          position: absolute;
+          left: 204px;
+          top: 122px;
+          z-index: -1;
+        }
+
+        .itemImage2 {
+          height: 112px;
+          position: absolute;
+          left: 225px;
+          top: 147px;
+          z-index: -1;
+        }
+
+        .itemImage3 {
+          height: 149px;
+          position: absolute;
+          left: 276px;
+          top: 112px;
+          z-index: -1;
+        }
+
+        .itemImage4 {
+          height: 111px;
+          position: absolute;
+          left: 221px;
+          top: 153px;
+          z-index: -1;
+        }
+
+        .itemImage5 {
+          height: 115px;
+          position: absolute;
+          left: 304px;
+          top: 71px;
+          z-index: -1;
+        }
+
+        .itemImage6 {
+          height: 212px;
+          position: absolute;
+          left: 206px;
+          top: 76px;
+          z-index: -1;
+        }
+
+        .itemImage7 {
+          height: 180px;
+          position: absolute;
+          left: 219px;
+          top: 81px;
+          z-index: -1;
+        }
+
+        .itemImage8 {
+          height: 175px;
+          position: absolute;
+          left: 284px;
+          top: 52px;
+          z-index: -1;
+        }
+      }
+
+      .titleImage {
+        width: 110px;
+        height: 40px;
+        margin: 20px 0;
+        background-image: url(../images/tips.png);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+
+      .titleBack-2 {
+        background-image: url(../images/tips-2.png);
+      }
+
+      .chapter {
+        position: relative;
+
+        .page-header-box {
+          width: 70px;
+          position: absolute;
+
+          .evenBox {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+
+            .vertical {
+              width: 30px;
+              background: #7acab4;
+              text-align: center;
+            }
+          }
+        }
+
+
+        .videoBox {
+          width: 100%;
+          border: 1px solid #7acab4;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .videoTitle {
+            width: 100%;
+            height: 50px;
+            border-bottom: 1px solid #7acab4;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            color: #7acab4;
+
+            .iconBox {
+              width: 100px;
+              height: 50px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              border-right: 1px solid #7acab4;
+              cursor: pointer;
+
+              svg {
+                margin-right: 5px;
+              }
+            }
+
+            .title {
+              padding-left: 20px;
+            }
+          }
+
+          .videoItem {
+            width: 100%;
+            padding: 2px;
+            box-sizing: border-box;
+
+            video {
+              width: 100%;
+            }
+          }
+        }
+
+        .pdfBox {
+          width: 100%;
+          height: 50px;
+          border: 1px solid #7acab4;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          margin: 10px 0;
+          color: #7acab4;
+
+          .iconBox {
+            width: 100px;
+            height: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-right: 1px solid #7acab4;
+          }
+
+          .title {
+            padding-left: 20px;
+            cursor: pointer;
+
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
+
+        .bk-xyx {
+          textarea {
+            width: 100%;
+            max-width: 630px;
+            border: 1px solid #7acab4;
+            border-radius: 5px;
+            font-size: 16px;
+            font-family: '瀹嬩綋';
+            line-height: 30px;
+            padding: 10px;
+            box-sizing: border-box;
+          }
+
+          textarea:focus {
+            outline: none;
+            border-color: #000;
+          }
+        }
+
+        img {
+          max-width: 100%;
+        }
+
+        .customImg {
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+        }
+
+        /* 椤甸潰鑳屾櫙鑹�*/
+        body.bodybg-color {
+          background-color: #77582c;
+        }
+
+        /* 鍨傜洿灞呬腑*/
+        div.bodystyle {
+          font-family: '瀹嬩綋';
+          font-size: 18px;
+          text-align: justify;
+          padding: 10% 12%;
+          box-sizing: border-box;
+          line-height: 30px;
+        }
+
+        div.bodystyle p {
+          padding-left: 2em;
+        }
+
+
+        /*绔犳爣灞呭乏*/
+        .sub-Title-l {
+          text-align: left;
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          margin: auto auto 1em auto;
+          font-size: 1.1em;
+          text-indent: 0em;
+          color: #888888;
+        }
+
+        /*绔犳爣灞呭彸*/
+        .sub-Title-r {
+          text-align: left;
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          margin: auto auto -0.5em auto;
+          font-size: 1.1em;
+          text-indent: 0em;
+          color: #888888;
+        }
+
+        /*<h1>绡囩珷椤靛眳宸︿竴绾ф爣棰�*/
+        h1.firstTitle-l {
+          font-size: 1.6em;
+          line-height: 1.2em;
+          text-indent: 0em;
+          text-align: left;
+          color: #77582c;
+          margin: 0.3em auto 5em auto;
+        }
+
+        /*绡囩珷椤靛壇鏍囬灞呭乏*/
+        .subHead-l {
+          text-align: left;
+          line-height: 1.2em;
+          font-size: 1.1em;
+          text-align: left;
+          color: #6b6441;
+          margin: -2.5em auto 2.5em auto;
+
+
+        }
+
+        /*<h1>绡囩珷椤靛眳鍙充竴绾ф爣棰�*/
+        h1.firstTitle-r {
+          font-size: 1.6em;
+          line-height: 1.2em;
+          text-indent: 0em;
+          text-align: left;
+          color: #77582c;
+          margin: 0.3em auto 1.8em auto;
+        }
+
+        /*绡囩珷椤靛壇鏍囬灞呭彸*/
+        .subHead-r {
+          font-size: 1.1em;
+          line-height: 1.2em;
+          text-align: left;
+          color: #6b6441;
+          margin: -2.5em auto 2.5em auto;
+
+
+        }
+
+        /*绔犳枃鍐呭*/
+        .quotation-1 {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 1em;
+          line-height: 1.1em;
+          margin: 1em auto;
+          text-indent: 2em;
+          color: #5A5A5A;
+        }
+
+
+
+        /*<h1>涓�绾ф爣棰�*/
+        h1.firstTitle {
+          font-size: 1.5em;
+          line-height: 1.2em;
+          text-indent: 0em;
+          text-align: left;
+          margin: 25% auto 2em auto;
+          color: #77582c;
+        }
+
+        /*<h1>甯﹀壇鏍囦竴绾ф爣棰�*/
+        h1.firstTitle-3 {
+          font-size: 1.5em;
+          line-height: 1.2em;
+          text-indent: 0em;
+          text-align: left;
+          margin: 25% auto 0em auto;
+          color: #77582c;
+        }
+
+        /*<h1>甯︾珷鏍囦竴绾ф爣棰�*/
+        h1.firstTitle-2 {
+          font-size: 1.5em;
+          line-height: 1.2em;
+          text-indent: 0em;
+          text-align: left;
+          margin: 0em auto 2em auto;
+          color: #77582c;
+        }
+
+        /*<h1>甯︾珷鏍囧強鍓爣涓�绾ф爣棰�*/
+        h1.firstTitle-1 {
+          font-size: 1.5em;
+          line-height: 1.2em;
+          text-indent: 0em;
+          text-align: left;
+          margin: 0em auto 0em auto;
+          color: #77582c;
+        }
+
+
+
+
+        /*<h2>浜岀骇鏍囬*/
+        h2.secondTitle {
+          font-size: 1.35em;
+          line-height: 1.3em;
+          text-indent: 0em;
+          color: #77582c;
+          margin: 25% auto 2em auto;
+
+        }
+
+        /*<h2>甯︾珷鏍囦簩绾ф爣棰�*/
+        h2.secondTitle-2 {
+          width: 500px;
+          font-size: 1.35em;
+          line-height: 1.3em;
+          padding: 5px;
+          border-radius: 20px;
+          text-indent: 0em;
+          color: #77582c;
+          margin: 3em 0 2em 0;
+          background-color: #7acab4;
+          color: #fff;
+          text-align: center;
+        }
+
+        /*<h2>甯﹀壇鏍囦簩绾ф爣棰�*/
+        h2.secondTitle-3 {
+          font-size: 1.35em;
+          line-height: 1.3em;
+          text-indent: 0em;
+          color: #77582c;
+          margin: 25% auto 0em auto;
+
+        }
+
+        /*<h2>甯︾珷鏍囧強鍓爣浜岀骇鏍囬*/
+        h2.secondTitle-1 {
+          font-size: 1.35em;
+          line-height: 1.3em;
+          text-indent: 0em;
+          color: #77582c;
+          margin: 0em auto 0em auto;
+
+        }
+
+        /*<h3>涓夌骇鏍囬*/
+        h3.thirdTitle {
+          font-size: 1.2em;
+          line-height: 1.3em;
+          text-indent: 0em;
+          margin-top: 1em;
+          color: #77582c;
+        }
+
+        /*<h4>鍥涚骇鏍囬*/
+        h4.fourthTitle {
+          font-size: 1.1em;
+          line-height: 1.3em;
+          text-indent: 0em;
+          margin-top: 1em;
+          color: #77582c;
+        }
+
+        /*<h5>浜旂骇鏍囬*/
+        h5.fifthTitle {
+          font-size: 1em;
+          line-height: 1.3em;
+          text-indent: 0em;
+          margin-top: 1em;
+          color: #77582c;
+        }
+
+        /*<h6>鍏骇鏍囬*/
+        h6.sixthTitle {
+          font-size: 1em;
+          line-height: 1.3em;
+          text-indent: 0em;
+          margin-top: 1em;
+          color: #77582c;
+        }
+
+        /*鏍囬浣滆�呭眳涓�*/
+        .author {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-align: center;
+          text-indent: 0em;
+          font-weight: bold;
+          color: #5A5A5A;
+          margin: -2em auto 3em auto;
+
+        }
+
+        /*鏍囬浣滆�呭眳宸�*/
+        .author-l {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-align: left;
+          text-indent: 0em;
+          font-weight: bold;
+          color: #5A5A5A;
+          margin: 0em auto 3em auto;
+        }
+
+        /*鍓爣棰�*/
+        .subHead {
+          text-align: left;
+          line-height: 1.2em;
+          text-indent: 0em;
+          font-size: 1.1em;
+          margin: 0em auto 2.5em auto;
+        }
+
+        /*涓�绾ф爣棰樼珷鏍�*/
+        .subHead-1 {
+          text-align: left;
+          line-height: 1.2em;
+          font-size: 1.1em;
+          text-indent: 0em;
+          margin: 20% auto 0.3em auto;
+          color: #888888;
+        }
+
+        /*涓�绾ф爣棰樼珷鏍�*/
+        .subHead-2 {
+          text-align: left;
+          line-height: 1.2em;
+          font-size: 1.1em;
+          text-indent: 0em;
+          margin: 20% auto 0.3em auto;
+          color: #888888;
+        }
+
+        /*浜岀骇鏍囬绔犳爣*/
+        .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 {
+          text-align: left;
+          line-height: 1.1em;
+          font-size: 1em;
+          text-indent: 0em;
+          margin: 20% auto 0.3em auto;
+          color: #fff;
+          background-color: #7acab4;
+        }
+
+        /*鐗堟潈鏍囬*/
+        .copyright-title {
+          font-size: 1.5em;
+          line-height: 1.2em;
+          text-align: center;
+          text-indent: 0em;
+          margin: 0.5em auto 2em auto;
+          color: #c1a173;
+        }
+
+        /*鐗堟潈鍐呭*/
+        .copyright-text {
+          font-size: 1em;
+          text-indent: 0em;
+          line-height: 1.8em;
+
+        }
+
+        /*鏂囧墠*/
+        .preface {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          margin: 0.3em auto;
+          text-indent: 2em;
+          color: #5A5A5A;
+        }
+
+        /*鏂囧墠-top*/
+        .preface-top {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-indent: 2em;
+          color: #5A5A5A;
+          margin: 25% auto 0.3em auto;
+
+        }
+
+        /*姝f枃鍐呭*/
+        .content {
+          font-size: 1em;
+          text-indent: 2em;
+        }
+
+        /*姝f枃鍐呭灞呭乏*/
+        .left {
+          font-size: 1em;
+          text-indent: 0em;
+          text-align: left;
+
+        }
+
+        /*姝f枃鍐呭灞呬腑*/
+        .center {
+          font-size: 1em;
+          text-indent: 0em;
+          text-align: center;
+
+        }
+
+        /*姝f枃鍐呭灞呭彸*/
+        .right {
+          font-size: 1em;
+          text-indent: 0em;
+          text-align: right;
+
+        }
+
+        /*姝f枃鍐呭-TOP*/
+        .content-top {
+          font-size: 1em;
+          text-indent: 2em;
+          // margin-top: 25%;
+        }
+
+
+
+        /*妗堜緥鏍囬灞呬腑锛堝紩鏂囥�佽瘲姝岀瓑锛�*/
+        .titleQuot-c {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 1.05em;
+          line-height: 1.3em;
+          margin: 1em auto;
+          text-align: center;
+          color: #7acab4;
+          font-weight: bold;
+        }
+
+
+        /*妗堜緥鏍囬灞呭乏锛堝紩鏂囥�佽瘲姝岀瓑锛�*/
+        .titleQuot-l {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 1.05em;
+          line-height: 1.3em;
+          margin: 1em auto;
+          text-align: left;
+          text-indent: 0em;
+          color: #7acab4;
+          font-weight: bold;
+        }
+
+
+        /*妗堜緥鏍囬*/
+        .titleQuot-1 {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 1.05em;
+          line-height: 1.3em;
+          margin: 1em auto;
+          color: #7acab4;
+          // text-indent: 2em;
+          font-weight: bold;
+        }
+
+        /*寮曟枃鍐呭灞呭乏(寮曟枃銆佽瘲姝屻�佽瘲璇嶃�佷功淇°�佷功淇$О璋撱�佸眳鍙崇讲鍚�)*/
+        .quotation {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-align: left;
+          text-indent: 2em;
+          margin: 0.3em auto;
+          color: #5A5A5A;
+        }
+
+        /*寮曟枃鍐呭-top*/
+        .quotation-top {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-align: left;
+          text-indent: 2em;
+          color: #5A5A5A;
+          margin: 25% auto 0.3em auto;
+        }
+
+        /*寮曟枃鍐呭span*/
+        .quotation-s {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          color: #5A5A5A;
+        }
+
+
+        /*璇楄瘝鏍囬*/
+        .poemtitle {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 1em;
+          line-height: 1.3em;
+          text-align: center;
+          text-indent: 0em;
+          font-weight: bold;
+          color: #5A5A5A;
+          margin: 1em auto;
+
+        }
+
+
+        /*璇楄瘝鏍囬*/
+        .poemtitle-l {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 1em;
+          line-height: 1.3em;
+          text-align: left;
+          text-indent: 2em;
+          font-weight: bold;
+          color: #333;
+          margin: 1em auto;
+
+        }
+
+        /*璇楄瘝浣滆��*/
+        .poemtitle-author-c {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          margin-bottom: 1em;
+          text-align: center;
+          text-indent: 0em;
+          color: #5A5A5A;
+        }
+
+        /*璇楄瘝浣滆�呭眳宸︼紙寮曟枃銆佽瘲姝岀瓑锛�*/
+        .poemtitle-author-l {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          margin-bottom: 1em;
+          text-indent: 2em;
+          color: #5A5A5A;
+        }
+
+        /*璇楄瘝鐨勫唴瀹�*/
+        .poem {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-align: center;
+          text-indent: 0em;
+          margin: 0.3em auto;
+          color: #5A5A5A;
+        }
+
+        /*璇楄瘝鐨勫唴瀹�*/
+        .poem-l {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-align: left;
+          text-indent: 2em;
+          margin: 0.3em auto;
+          color: #5A5A5A;
+        }
+
+
+        /*鍙充笅瑙掕鏄�*/
+        .right-info {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-align: right;
+          margin-bottom: 0.5em;
+          color: #5A5A5A;
+        }
+
+        /*涔︿俊绉拌皳*/
+        .letters {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-align: left;
+          text-indent: 0em;
+          margin: 0.3em auto;
+          color: #5A5A5A;
+        }
+
+        /*涔︿俊鍐呭*/
+        .text-letters {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          text-align: left;
+          text-indent: 2em;
+          margin: 0.3em auto;
+          color: #5A5A5A;
+        }
+
+
+
+        /*绮椾綋*/
+        span.bold {
+          font-weight: bold;
+        }
+
+        /*鏂滀綋*/
+        .italic {
+          font-style: italic;
+        }
+
+        /*绾㈣壊*/
+        .color-red {
+          color: #FB0830;
+        }
+
+        /*姗欒壊*/
+        .color-orange {
+          color: #F78413;
+        }
+
+        /*榛勮壊*/
+        .color-yellow {
+          color: #E8D60B;
+        }
+
+
+        /*缁胯壊*/
+        .color-green {
+          color: #07D007;
+        }
+
+        /*闈掕壊*/
+        .color-cyan {
+          color: #599CA9;
+        }
+
+        /*钃濊壊*/
+        .color-blue {
+          color: #4756E5;
+        }
+
+        /*绱壊*/
+        .color-purple {
+          color: #B046DC;
+        }
+
+        /*涓嬪垝绾�*/
+        span.underline {
+          text-decoration: underline;
+        }
+
+
+        /*鐫�閲嶅己璋�*/
+        span.emphasis {
+          text-decoration: underline;
+        }
+
+        /*鍒犻櫎绾�*/
+        span.linethrough {
+          text-decoration: line-through;
+        }
+
+        /*鏁板瓧涓婃爣*/
+        span.super {
+          font-size: 0.7em;
+          vertical-align: super;
+        }
+
+        /*鏁板瓧涓嬫爣*/
+        span.sub {
+          font-size: 0.7em;
+          vertical-align: sub;
+        }
+
+        /*棣栧瓧涓嬫矇锛岄渶閰嶅悎.ftext 涓�骞朵娇鐢�*/
+        span.fDropContent {
+          font-family: "姹変华鏃楅粦50S", "HYQiHei-50s";
+          font-size: 1em;
+          text-indent: 0em;
+        }
+
+        /*琚涓哄ぇ鍐欏瓧鐨� Class 棣栧瓧澶у啓锛岄渶琚寘瑁瑰湪.fDropContent 鍐�*/
+        .ftext {
+          float: left;
+          font-size: 1.6em;
+          color: #5A5A5A;
+        }
+
+
+        /*杈规*/
+        .border {
+          border: 1px solid #77582c;
+          border-radius: 0.25em;
+          padding: 0.25em;
+          margin: 1em auto;
+        }
+
+
+        /*杈规搴曡壊*/
+        .border bgColor {
+          border: 1px solid #77582c;
+          background: #D2D2D2;
+          border-radius: 0.25em;
+          padding: 0.25em;
+          margin: 1em auto;
+        }
+
+
+        /*搴曡壊*/
+        .bgColor {
+          background: #c9ebe0;
+          padding: 1em;
+          border-radius: 0.25em;
+          margin: 1em auto;
+          border: 1px solid #7acab4;
+          box-sizing: border-box;
+          border-radius: 20px;
+        }
+
+
+        /*鎻掑浘銆佽〃鏍兼埅鍥撅紙涓嶅惈鍥剧墖鏍囬鎴栧浘鐗囪鏄庯級*/
+        .bodyPic {
+          text-align: center;
+          margin: 1em auto;
+        }
+
+        /*鎻掑浘銆佽〃鏍兼埅鍥撅紙鍚浘鐗囨爣棰樻垨鍥剧墖璇存槑锛�*/
+        .qrbodyPic {
+          font-size: 0.95em;
+          text-align: center;
+          margin: 0 1em;
+        }
+
+        .bodyPic-l {
+          float: left;
+          margin-left: 4em;
+        }
+
+        /*琛ㄦ牸琛ㄥご*/
+        .imgtitle {
+          font-family: "姹変华鏃楅粦55S", "HYQiHei-55s";
+          font-size: 0.95em;
+          margin: 1em auto -0.8em auto;
+          text-align: center;
+          text-indent: 0;
+          color: #7acab4;
+        }
+
+        /*鍥剧墖璇存槑灞呬腑*/
+        .imgdescript {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          margin: 0.3em auto;
+          text-align: center;
+          text-indent: 0em;
+          color: #7acab4;
+        }
+
+        /*鍥剧墖璇存槑灞呭乏*/
+        .imgdescript-l {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          margin: 0.3em auto;
+          text-align: left;
+          text-indent: 2em;
+          color: #7acab4;
+        }
+
+        /*鍥剧墖璇存槑灞呬腑鍔犵矖*/
+        .imgdescript-b {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          margin: 0.3em auto;
+          text-align: center;
+          text-indent: 0em;
+          color: #5A5A5A;
+          font-weight: bold;
+        }
+
+
+        /*鍥剧墖璇存槑灞呭乏鍔犵矖*/
+        .imgdescript-l-b {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          margin: 0.3em auto;
+          text-align: left;
+          text-indent: 2em;
+          color: #5A5A5A;
+          font-weight: bold;
+        }
+
+        /*鐜粫鍥剧墖*/
+        .floatPic-1 {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          float: right;
+          text-align: center;
+          width: 45%;
+          margin-left: 1em;
+          margin-bottom: 0.5em;
+          margin-top: 0.5em;
+        }
+
+        /*鐜粫鍥剧墖*/
+        .floatPic {
+          font-family: "姹変华妤蜂綋", "ETrump KaiTi", "鏂规浠垮畫", "FZFSJW--GB1-0";
+          font-size: 0.95em;
+          float: left;
+          text-align: center;
+          width: 45%;
+          margin-right: 1em;
+          margin-bottom: 0.5em;
+          margin-top: 0.5em;
+        }
+
+        /*鍏紡鍥�*/
+        .g-pic {
+          height: 2em;
+          vertical-align: middle;
+        }
+
+        /*琛屽唴鍥�*/
+        .h-pic {
+          height: 1.5em;
+          vertical-align: middle;
+        }
+
+        /*鐢熷兓瀛楁埅鍥�*/
+        .s-pic {
+          height: 1em;
+          vertical-align: middle;
+        }
+
+        /*绛惧悕鍥剧墖*/
+        .signImg {
+          text-align: right;
+          width: 30%;
+          margin: 1em 0em 1em 70%;
+        }
+
+        /*鍏ㄥ睆鍥�*/
+        .qqreader-fullimg {
+          qrfullpage: 1;
+        }
+
+
+        /*娉ㄦ爣鍥�*/
+        .qqreader-footnote {
+          width: 1em;
+          margin-left: 0.1em;
+          margin-right: 0.1em;
+        }
+
+        /*鍒嗛〉*/
+        .pagebreak {
+          page-break-after: always;
+        }
+
+        /*缁撴潫*/
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/books/MMVRTCMP/images/002-1.png b/src/books/MMVRTCMP/images/002-1.png
new file mode 100644
index 0000000..1125b3c
--- /dev/null
+++ b/src/books/MMVRTCMP/images/002-1.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/002-2.png b/src/books/MMVRTCMP/images/002-2.png
new file mode 100644
index 0000000..00040fb
--- /dev/null
+++ b/src/books/MMVRTCMP/images/002-2.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/002-3.png b/src/books/MMVRTCMP/images/002-3.png
new file mode 100644
index 0000000..07e5bf2
--- /dev/null
+++ b/src/books/MMVRTCMP/images/002-3.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/003-1.png b/src/books/MMVRTCMP/images/003-1.png
new file mode 100644
index 0000000..b90c296
--- /dev/null
+++ b/src/books/MMVRTCMP/images/003-1.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/003-2.png b/src/books/MMVRTCMP/images/003-2.png
new file mode 100644
index 0000000..fa1d964
--- /dev/null
+++ b/src/books/MMVRTCMP/images/003-2.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/003-3.png b/src/books/MMVRTCMP/images/003-3.png
new file mode 100644
index 0000000..37ebce2
--- /dev/null
+++ b/src/books/MMVRTCMP/images/003-3.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/004-1.png b/src/books/MMVRTCMP/images/004-1.png
new file mode 100644
index 0000000..dbd0fcc
--- /dev/null
+++ b/src/books/MMVRTCMP/images/004-1.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/004-2.png b/src/books/MMVRTCMP/images/004-2.png
new file mode 100644
index 0000000..ca2d3d1
--- /dev/null
+++ b/src/books/MMVRTCMP/images/004-2.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/004-3.png b/src/books/MMVRTCMP/images/004-3.png
new file mode 100644
index 0000000..0149646
--- /dev/null
+++ b/src/books/MMVRTCMP/images/004-3.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/005-1.png b/src/books/MMVRTCMP/images/005-1.png
new file mode 100644
index 0000000..ac20eb7
--- /dev/null
+++ b/src/books/MMVRTCMP/images/005-1.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/005-2.png b/src/books/MMVRTCMP/images/005-2.png
new file mode 100644
index 0000000..9fdaf13
--- /dev/null
+++ b/src/books/MMVRTCMP/images/005-2.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/005-3.png b/src/books/MMVRTCMP/images/005-3.png
new file mode 100644
index 0000000..1925207
--- /dev/null
+++ b/src/books/MMVRTCMP/images/005-3.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/006-1.png b/src/books/MMVRTCMP/images/006-1.png
new file mode 100644
index 0000000..0bf495c
--- /dev/null
+++ b/src/books/MMVRTCMP/images/006-1.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/006-22.png b/src/books/MMVRTCMP/images/006-22.png
new file mode 100644
index 0000000..8dc056d
--- /dev/null
+++ b/src/books/MMVRTCMP/images/006-22.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/006-3.png b/src/books/MMVRTCMP/images/006-3.png
new file mode 100644
index 0000000..1edfff5
--- /dev/null
+++ b/src/books/MMVRTCMP/images/006-3.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/007-1.png b/src/books/MMVRTCMP/images/007-1.png
new file mode 100644
index 0000000..a6c6b42
--- /dev/null
+++ b/src/books/MMVRTCMP/images/007-1.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/007-2.png b/src/books/MMVRTCMP/images/007-2.png
new file mode 100644
index 0000000..3e71298
--- /dev/null
+++ b/src/books/MMVRTCMP/images/007-2.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/007-3.png b/src/books/MMVRTCMP/images/007-3.png
new file mode 100644
index 0000000..07f4dc0
--- /dev/null
+++ b/src/books/MMVRTCMP/images/007-3.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/008-1.png b/src/books/MMVRTCMP/images/008-1.png
new file mode 100644
index 0000000..bc9436c
--- /dev/null
+++ b/src/books/MMVRTCMP/images/008-1.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/008-2.png b/src/books/MMVRTCMP/images/008-2.png
new file mode 100644
index 0000000..2a29e17
--- /dev/null
+++ b/src/books/MMVRTCMP/images/008-2.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/008-3.png b/src/books/MMVRTCMP/images/008-3.png
new file mode 100644
index 0000000..1fd7561
--- /dev/null
+++ b/src/books/MMVRTCMP/images/008-3.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/009-1.png b/src/books/MMVRTCMP/images/009-1.png
new file mode 100644
index 0000000..7907e26
--- /dev/null
+++ b/src/books/MMVRTCMP/images/009-1.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/009-2.png b/src/books/MMVRTCMP/images/009-2.png
new file mode 100644
index 0000000..39b4ea1
--- /dev/null
+++ b/src/books/MMVRTCMP/images/009-2.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/009-3.png b/src/books/MMVRTCMP/images/009-3.png
new file mode 100644
index 0000000..14927db
--- /dev/null
+++ b/src/books/MMVRTCMP/images/009-3.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/010-1.png b/src/books/MMVRTCMP/images/010-1.png
new file mode 100644
index 0000000..cc56097
--- /dev/null
+++ b/src/books/MMVRTCMP/images/010-1.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/010-2.png b/src/books/MMVRTCMP/images/010-2.png
new file mode 100644
index 0000000..b9a9914
--- /dev/null
+++ b/src/books/MMVRTCMP/images/010-2.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/010-3.png b/src/books/MMVRTCMP/images/010-3.png
new file mode 100644
index 0000000..8aad08b
--- /dev/null
+++ b/src/books/MMVRTCMP/images/010-3.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/page.png b/src/books/MMVRTCMP/images/page.png
new file mode 100644
index 0000000..a1c461a
--- /dev/null
+++ b/src/books/MMVRTCMP/images/page.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/tips-2.png b/src/books/MMVRTCMP/images/tips-2.png
new file mode 100644
index 0000000..90e4a07
--- /dev/null
+++ b/src/books/MMVRTCMP/images/tips-2.png
Binary files differ
diff --git a/src/books/MMVRTCMP/images/tips.png b/src/books/MMVRTCMP/images/tips.png
new file mode 100644
index 0000000..c2fb3ff
--- /dev/null
+++ b/src/books/MMVRTCMP/images/tips.png
Binary files differ
diff --git a/src/books/MMVRTCMP/js/examinationList.js b/src/books/MMVRTCMP/js/examinationList.js
new file mode 100644
index 0000000..6ebc625
--- /dev/null
+++ b/src/books/MMVRTCMP/js/examinationList.js
@@ -0,0 +1,28 @@
+const testData = {
+  2: {
+    15: [66984, 66985, 66986],
+  },
+  3: {
+    29: [67015, 67016, 67017, 67018, 67019, 67020, 67021],
+  },
+  4: {
+    54: [67022, 67023, 67024, 67025, 67026, 67027, 67028, 67029, 67030],
+  },
+  5: {
+    70: [67031, 67032, 67033, 67034, 67035, 67036, 67037, 67038, 67039],
+  },
+  6: {
+    99: [67040, 67041, 67042, 67043, 67044, 67045, 67046, 67047],
+  },
+  7: {
+    113: [67048, 67049, 67050, 67051, 67052, 67053, 67054, 67055],
+  },
+  8: {
+    136: [67056, 67057, 67058, 67059, 67060, 67061],
+  },
+  9: {
+    146: [67062, 67063, 67064, 67065, 67066, 67067],
+  },
+};
+
+export default testData;
diff --git a/src/books/MMVRTCMP/js/tool.js b/src/books/MMVRTCMP/js/tool.js
new file mode 100644
index 0000000..4cf6f99
--- /dev/null
+++ b/src/books/MMVRTCMP/js/tool.js
@@ -0,0 +1,57 @@
+import SparkMD5 from "spark-md5";
+
+export function getFileMd5(file, chunkSize) {
+  return new Promise((resolve, reject) => {
+    let blobSlice =
+      File.prototype.slice ||
+      File.prototype.mozSlice ||
+      File.prototype.webkitSlice;
+    let chunks = Math.ceil(file.size / chunkSize);
+    let currentChunk = 0;
+    let spark = new SparkMD5.ArrayBuffer();
+    let fileReader = new FileReader();
+    fileReader.onload = function (e) {
+      spark.append(e.target.result);
+      currentChunk++;
+      if (currentChunk < chunks) {
+        loadNext();
+      } else {
+        const md5 = spark.end();
+        resolve(md5);
+      }
+    };
+    fileReader.onerror = function (e) {
+      reject(e);
+    };
+    function loadNext() {
+      let start = currentChunk * chunkSize;
+      let end = start + chunkSize;
+      if (end > file.size) {
+        end = file.size;
+      }
+      fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+    }
+    loadNext();
+  });
+}
+
+// 鑾峰彇涓嶅彈淇濇姢鐨勫浘鐗�
+export function getPublicImage(md5, width, height) {
+  let src = null;
+  if (md5) {
+    src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`;
+  } else {
+    return "";
+  }
+  if (width) src += `&width=${width}`;
+  if (height) src += `&height=${height}`;
+  return src;
+}
+
+// export function ForTable() {
+//   const head = ["鍋ュ悍鐘跺喌", "鏍囧織", "蹇冪悊鏂归潰", "鑲変綋鏂归潰", "绀句細鏂归潰"];
+//   return head?.map((item) => {
+//     return `<tr>${"<th>" + item + "</th>"}</tr>`;
+//   });
+// }
+
diff --git a/src/books/MMVRTCMP/view/components/chapter001.vue b/src/books/MMVRTCMP/view/components/chapter001.vue
new file mode 100644
index 0000000..a3691aa
--- /dev/null
+++ b/src/books/MMVRTCMP/view/components/chapter001.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="chapter" num="1">
+    <div class="page-box" page="1">
+      <div v-if="showPageList.indexOf(1) > -1">
+        <pageHeader page="002" />
+        <div class="bodystyle">
+          <div class="openImgBox imgWidth">
+            <img src="../../images/002-1.png" alt="" />
+          </div>
+          <div class="openImgBox imgWidth">
+            <img src="../../images/002-2.png" alt="" />
+            <img class="itemImage" src="../../images/002-3.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="2">
+      <div v-if="showPageList.indexOf(2) > -1">
+        <pageHeader page="002" name="鐧借寘鏍�" />
+        <div class="bodystyle">
+          <div class="titleImage">鏉ユ簮</div>
+          <p>
+            绂炬湰绉戞鐗╃櫧鑼匢mperata cylindrica Beauv. var. major (Nees) C. E.
+            Hubb.鐨勫共鐕ユ牴鑼庛��
+          </p>
+          <div class="titleImage">浜у湴</div>
+          <p>鎴戝浗澶ч儴鍒嗗湴鍖哄潎鏈夊嚭浜э紝浠ュ崕鍖楀湴鍖轰负涓汇��</p>
+          <div class="titleImage">鎬х姸</div>
+          <p>
+            鍦嗘煴褰㈢殑娈点�傚琛ㄧ毊榛勭櫧鑹叉垨娣¢粍鑹诧紝寰湁鍏夋辰锛屽叿绾电毐绾癸紝鏈夌殑鍙绋嶉殕璧风殑鑺傘�傚垏闈㈢毊閮ㄧ櫧鑹诧紝澶氭湁瑁傞殭锛屾斁灏勭姸鎺掑垪锛屼腑鏌辨贰榛勮壊鎴栦腑绌恒�傝川纭�岄煣銆傛皵寰�傚懗寰敎銆�
+          </p>
+          <div class="titleImage">鍝佽川</div>
+          <p>浠ョ洿寰勭矖銆佽壊鐧姐�佸懗鐢滆�呬负浣炽��</p>
+          <div class="titleImage titleBack-2" style="width: 290px">
+            <span>鎬у懗褰掔粡涓庡姛鑳戒富娌�</span>
+          </div>
+          <p>
+            鐢橈紝瀵掋�傚綊鑲恒�佽儍銆佽唨鑳辩粡銆傚噳琛�姝㈣锛屾竻鐑埄灏裤�傜敤浜庤鐑悙琛�锛岃琛�锛屽翱琛�锛岀儹鐥呯儲娓达紝婀跨儹榛勭柛锛屾按鑲垮翱灏戯紝鐑穻娑╃棝銆�
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="3">
+      <div v-if="showPageList.indexOf(3) > -1">
+        <pageHeader page="003" />
+        <div class="bodystyle">
+          <div class="openImgBox imgWidth">
+            <img src="../../images/003-1.png" alt="" />
+          </div>
+          <div class="openImgBox imgWidth">
+            <img src="../../images/003-2.png" alt="" />
+            <img class="itemImage2" src="../../images/003-3.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="4">
+      <div v-if="showPageList.indexOf(4) > -1">
+        <pageHeader page="003" name="鐧藉墠" />
+        <div class="bodystyle">
+          <div class="titleImage">鏉ユ簮</div>
+          <p>
+            钀濊棪绉戞鐗╂煶鍙剁櫧鍓岰ynanchum stauntonii (Decne.) Schltr. ex
+            Levl.鎴栬姭鑺卞彾鐧藉墠Cynanchum glaucescens (Decne.)
+            Hand.-Mazz.鐨勫共鐕ユ牴鑼庡拰鏍广��
+          </p>
+          <div class="titleImage">浜у湴</div>
+          <p>涓讳骇浜庢禉姹熴�佸畨寰姐�佺寤恒�佹睙瑗裤�佹箹鍗椼�佹箹鍖椼�佸箍涓滅瓑鍦般��</p>
+          <div class="titleImage">鎬х姸</div>
+          <p>
+            鏍硅寧鍛堢粏鍦嗘煴褰㈢殑娈碉紝鑺傚绨囩敓绾ょ粏鏍广�傝〃闈㈤粍鐧借壊鎴栭粍妫曡壊锛岃妭鏄庢樉銆傝川鑴嗐�傛皵寰�傚懗寰敎銆�
+          </p>
+          <div class="titleImage">鍝佽川</div>
+          <p>浠ユ牴鑼庣矖鑰呬负浣炽��</p>
+          <div class="titleImage titleBack-2" style="width: 290px">
+            <span>鎬у懗褰掔粡涓庡姛鑳戒富娌�</span>
+          </div>
+          <p>
+            杈涖�佽嫤锛屽井娓┿�傚綊鑲虹粡銆傞檷姘旓紝娑堢棸锛屾鍜炽�傜敤浜庤偤姘斿瀹烇紝鍜冲椊鐥板锛岃兏婊″枠鎬ャ��
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="5">
+      <div v-if="showPageList.indexOf(5) > -1">
+        <pageHeader page="004" />
+        <div class="bodystyle">
+          <div class="openImgBox imgWidth">
+            <img src="../../images/004-1.png" alt="" />
+          </div>
+          <div class="openImgBox imgWidth">
+            <img src="../../images/004-2.png" alt="" />
+            <img class="itemImage3" src="../../images/004-3.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="6">
+      <div v-if="showPageList.indexOf(6) > -1">
+        <pageHeader page="004" name="鐧借妽" />
+        <div class="bodystyle">
+          <div class="titleImage">鏉ユ簮</div>
+          <p>姣涜寷绉戞鐗╄妽鑽疨aeonia lactiflora Pall.鐨勫共鐕ユ牴銆�</p>
+          <div class="titleImage">浜у湴</div>
+          <p>涓讳骇浜庡畨寰姐�佹禉姹熴�佹渤鍗椼�佸洓宸濄�佸北涓溿�佽吹宸炵瓑鍦般��</p>
+          <div class="titleImage">鎬х姸</div>
+          <p>
+            绫诲渾褰㈢殑钖勭墖銆傝〃闈㈡贰妫曠孩鑹叉垨绫荤櫧鑹层�傚垏闈㈢被鐧借壊鎴栧井甯︽绾㈣壊锛屽舰鎴愬眰鐜槑鏄撅紝鍙绋嶉殕璧风殑绛嬭剦绾瑰憟鏀惧皠鐘舵帓鍒椼�傝川纭剢銆傛皵寰�傚懗寰嫤銆侀吀銆�
+          </p>
+          <div class="titleImage">鍝佽川</div>
+          <p>浠ョ洿寰勭矖銆佸潥瀹炪�佺矇鎬ц冻銆佹棤鐧藉績鎴栬闅欒�呬负浣炽��</p>
+          <div class="titleImage titleBack-2" style="width: 290px">
+            <span>鎬у懗褰掔粡涓庡姛鑳戒富娌�</span>
+          </div>
+          <p>
+            鑻︺�侀吀锛屽井瀵掋�傚綊鑲濄�佽劸缁忋�傚吇琛�璋冪粡锛屾暃闃存姹楋紝鏌旇倽姝㈢棝锛屽钩鎶戣倽闃炽�傜敤浜庤铏氳悗榛勶紝鏈堢粡涓嶈皟锛岃嚜姹楋紝鐩楁睏锛岃儊鐥涳紝鑵圭棝锛屽洓鑲㈡寷鐥涳紝澶寸棝鐪╂檿銆�
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="7">
+      <div v-if="showPageList.indexOf(7) > -1">
+        <pageHeader page="005" />
+        <div class="bodystyle">
+          <div class="openImgBox imgWidth">
+            <img src="../../images/005-1.png" alt="" />
+          </div>
+          <div class="openImgBox imgWidth">
+            <img src="../../images/005-2.png" alt="" />
+            <img class="itemImage4" src="../../images/005-3.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="8">
+      <div v-if="showPageList.indexOf(8) > -1">
+        <pageHeader page="005" name="鐧藉ご缈�" />
+        <div class="bodystyle">
+          <div class="titleImage">鏉ユ簮</div>
+          <p>姣涜寷绉戞鐗╃櫧澶寸縼Pulsatilla chinensis (Bge.) Regel鐨勫共鐕ユ牴銆�</p>
+          <div class="titleImage">浜у湴</div>
+          <p>
+            涓讳骇浜庢渤鍖椼�佸北瑗裤�佸唴钂欏彜銆佽窘瀹併�佸悏鏋椼�侀粦榫欐睙锛屼互鍙婂北涓溿�佸北瑗裤�佸畞澶忕瓑鍦般��
+          </p>
+          <div class="titleImage">鎬х姸</div>
+          <p>
+            绫诲渾褰㈢墖銆傚琛ㄧ毊榛勬鑹叉垨妫曡鑹诧紝鍏蜂笉瑙勫垯绾电毐绾规垨绾垫矡锛岃繎鏍瑰ご閮ㄦ湁鐧借壊缁掓瘺銆傚垏闈㈢毊閮ㄩ粍鐧借壊鎴栨贰榛勬鑹诧紝鏈ㄩ儴娣¢粍鑹层�傝川纭剢銆傛皵寰�傚懗寰嫤娑┿��
+          </p>
+          <div class="titleImage">鍝佽川</div>
+          <p>浠ョ墖澶ф暣榻愩�佽川鍧氬疄銆佹牴澶存湁鐧借壊姣涜尭鑰呬负浣炽��</p>
+          <div class="titleImage titleBack-2" style="width: 290px">
+            <span>鎬у懗褰掔粡涓庡姛鑳戒富娌�</span>
+          </div>
+          <p>
+            鑻︼紝瀵掋�傚綊鑳冦�佸ぇ鑲犵粡銆傛竻鐑В姣掞紝鍑夎姝㈢棦銆傜敤浜庣儹姣掕鐥紝闃寸棐甯︿笅銆�
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="9">
+      <div v-if="showPageList.indexOf(9) > -1">
+        <pageHeader page="006" />
+        <div class="bodystyle">
+          <div class="openImgBox imgWidth">
+            <img src="../../images/006-1.png" alt="" />
+          </div>
+          <div class="openImgBox imgWidth">
+            <img src="../../images/006-2.png" alt="" />
+            <img class="itemImage5" src="../../images/006-3.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="10">
+      <div v-if="showPageList.indexOf(10) > -1">
+        <pageHeader page="006" name="鐧介矞鐨�" />
+        <div class="bodystyle">
+          <div class="titleImage">鏉ユ簮</div>
+          <p>鑺搁绉戞鐗╃櫧椴� Dictamnus dasycarpus Turcz. 鐨勫共鐕ユ牴鐨��</p>
+          <div class="titleImage">浜у湴</div>
+          <p>涓讳骇浜庝笢鍖楃瓑鍦般��</p>
+          <div class="titleImage">鎬х姸</div>
+          <p>
+            涓嶈鍒欏帤鐗囥�傚琛ㄩ潰鐏扮櫧鑹叉垨娣$伆榛勮壊锛屽叿缁嗙旱鐨辩汗鍙婄粏鏍圭棔锛�
+            甯告湁绐佽捣鐨勯绮掔姸灏忕偣锛涘唴琛ㄩ潰绫荤櫧鑹诧紝鏈夌粏绾电汗銆傚垏闈㈢被鐧�
+            鑹诧紝鐣ュ憟灞傜墖鐘躲�傝川鑴嗐�傛湁缇婅喕姘斻�傚懗寰嫤銆�
+          </p>
+          <div class="titleImage">鍝佽川</div>
+          <p>浠ヨ倝鍘氥�佽壊鐏扮櫧鑰呬负浣炽��</p>
+          <div class="titleImage titleBack-2" style="width: 290px">
+            <span>鎬у懗褰掔粡涓庡姛鑳戒富娌�</span>
+          </div>
+          <p>
+            鑻︼紝瀵掋�傚綊鑴俱�佽儍銆佽唨鑳辩粡銆傛竻鐑嚗婀匡紝绁涢瑙f瘨銆傜敤浜庢箍鐑柈
+            姣掞紝榛勬按娣嬫紦锛屾箍鐤癸紝椋庣柟锛岀枼鐧g柈鐧烇紝椋庢箍鐑椆锛岄粍鐤稿翱璧ゃ��
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="11">
+      <div v-if="showPageList.indexOf(11) > -1">
+        <pageHeader page="007" />
+        <div class="bodystyle">
+          <div class="openImgBox imgWidth">
+            <img src="../../images/007-1.png" alt="" />
+          </div>
+          <div class="openImgBox imgWidth">
+            <img src="../../images/007-2.png" alt="" />
+            <img class="itemImage6" src="../../images/007-3.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="12">
+      <div v-if="showPageList.indexOf(12) > -1">
+        <pageHeader page="007" name="鐧鹃儴" />
+        <div class="bodystyle">
+          <div class="titleImage">鏉ユ簮</div>
+          <p>
+            鐧鹃儴绉戞鐗╃洿绔嬬櫨閮� Stemona sessilifolia (Miq.) Miq.銆佽敁鐢熺櫨閮�
+            Stemona japonica (Bl.) Miq. 鎴栧鍙剁櫨閮� Stemona tuberosa Lour. 鐨�
+            骞茬嚗鍧楁牴銆�
+          </p>
+          <div class="titleImage">浜у湴</div>
+          <p>涓讳骇浜庢禉姹熴�佹睙鑻忋�佸畨寰姐�佸洓宸濄�侀噸搴嗐�佽吹宸炪�佸箍瑗跨瓑鍦般��</p>
+          <div class="titleImage">鎬х姸</div>
+          <p>
+            涓嶈鍒欏帤鐗囨垨涓嶈鍒欐潯褰㈡枩鐗囥�傝〃闈㈢伆鐧借壊鎴栨榛勮壊锛屾湁娣辩旱鐨�
+            绾癸紱鍒囬潰鐏扮櫧鑹层�佹贰榛勬鑹叉垨榛勭櫧鑹诧紝瑙掕川鏍凤紱鐨儴杈冨帤锛屼腑鏌�
+            鎵佺缉銆傝璐ㄦ牱锛岃川闊ц蒋銆傛皵寰�傚懗鐢樸�佽嫤銆�
+          </p>
+          <div class="titleImage">鍝佽川</div>
+          <p>浠ョ墖澶с�佽川鍧氬疄銆佹柇闈㈣璐ㄦ牱鑰呬负浣炽��</p>
+          <div class="titleImage titleBack-2" style="width: 290px">
+            <span>鎬у懗褰掔粡涓庡姛鑳戒富娌�</span>
+          </div>
+          <p>
+            鐢樸�佽嫤锛屽井娓┿�傚綊鑲虹粡銆傛鼎鑲轰笅姘旀鍜筹紝鏉�铏伃铏便�傜敤浜庢柊涔呭挸
+            鍡斤紝鑲虹棬鍜冲椊锛岄】鍜筹紱澶栫敤浜庡ご铏憋紝浣撹櫛锛岃洸铏梾锛岄槾鐥掋��
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="13">
+      <div v-if="showPageList.indexOf(13) > -1">
+        <pageHeader page="008" />
+        <div class="bodystyle">
+          <div class="openImgBox imgWidth">
+            <img src="../../images/008-1.png" alt="" />
+          </div>
+          <div class="openImgBox imgWidth">
+            <img src="../../images/008-2.png" alt="" />
+            <img class="itemImage7" src="../../images/008-3.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="14">
+      <div v-if="showPageList.indexOf(14) > -1">
+        <pageHeader page="008" name="鐧惧悎" />
+        <div class="bodystyle">
+          <div class="titleImage">鏉ユ簮</div>
+          <p>
+            涓虹櫨鍚堢妞嶇墿鍗蜂腹 Lilium landfolium Thunb.銆佺櫨鍚� Lilium brownii F. E.
+            Brown var. viridulum Baker 鎴栫粏鍙剁櫨鍚� Lilium pumilum DC. 鐨�
+            骞茬嚗鑲夎川槌炲彾銆�
+          </p>
+          <div class="titleImage">浜у湴</div>
+          <p>涓讳骇浜庢箹鍗椼�佺敇鑲冦�佹睙鑻忋�佹禉姹熺瓑鍦般��</p>
+          <div class="titleImage">鎬х姸</div>
+          <p>
+            槌炲彾鍛堥暱妞渾褰紝椤剁杈冨皷锛屽熀閮ㄨ緝瀹斤紝杈圭紭钖勫井鍛堟尝鐘讹紝甯稿悜
+            鍐呭嵎鏇层�傝〃闈㈤粍鐧借壊鎴栨贰妫曢粍鑹诧紝鏈夋暟鏉$旱鐩村钩琛岀殑鐧借壊缁寸
+            鏉熴�傝川纭�岃剢锛屾柇闈㈣緝骞冲潶锛岃璐ㄦ牱銆傛皵寰紝鍛冲井鑻︺��
+          </p>
+          <div class="titleImage">鍝佽川</div>
+          <p>浠ヨ倝鍘氥�佽壊鐧姐�佽川鍧氥�佸懗鑻﹁�呬负浣炽��</p>
+          <div class="titleImage titleBack-2" style="width: 290px">
+            <span>鎬у懗褰掔粡涓庡姛鑳戒富娌�</span>
+          </div>
+          <p>
+            鐢橈紝瀵掋�傚綊蹇冦�佽偤缁忋�傚吇闃存鼎鑲猴紝娓呭績瀹夌銆傜敤浜庨槾铏氱嚗鍜筹紝鍔�
+            鍡藉挸琛�锛岃櫄鐑︽儕鎮革紝澶辩湢澶氭ⅵ锛岀簿绁炴亶鎯氥��
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="15">
+      <div v-if="showPageList.indexOf(15) > -1">
+        <pageHeader page="010" />
+        <div class="bodystyle">
+          <div class="openImgBox imgWidth">
+            <img src="../../images/010-1.png" alt="" />
+          </div>
+          <div class="openImgBox imgWidth">
+            <img src="../../images/010-2.png" alt="" />
+            <img class="itemImage8" src="../../images/010-3.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="16">
+      <div v-if="showPageList.indexOf(16) > -1">
+        <pageHeader page="010" name="璐ラ叡鑽�" />
+        <div class="bodystyle">
+          <div class="titleImage">鏉ユ簮</div>
+          <p>鑿婄妞嶇墿鑻h崿鑿� Sonchus brachyotus DC. 鐨勫共鐕ュ叏鑽夈��</p>
+          <div class="titleImage">浜у湴</div>
+          <p>涓讳骇浜庢渤鍖椼�佷笢鍖楃瓑鍦般��</p>
+          <div class="titleImage">鎬х姸</div>
+          <p>
+            涓嶈鍒欎腑娈点�傝寧鍦嗘煴褰紝鍙剁毐缂┿�傝寧琛ㄩ潰娣¢粍妫曡壊锛屾湁绾垫1銆傚彾
+            鐏扮豢鑹诧紝杈圭紭鏈夌█鐤忕己鍒汇�傝川鑴嗐�傛皵寰�傚懗寰嫤銆�
+          </p>
+          <div class="titleImage">鍝佽川</div>
+          <p>浠ュ彾澶氥�佽壊缁胯�呬负浣炽��</p>
+          <div class="titleImage titleBack-2" style="width: 290px">
+            <span>鎬у懗褰掔粡涓庡姛鑳戒富娌�</span>
+          </div>
+          <p>
+            杈涖�佽嫤锛屽井瀵掋�傚綊鑳冦�佸ぇ鑲犮�佽倽缁忋�傛竻鐑В姣掞紝娑堢棃鎺掕創锛岀牬琛�
+            琛岀榾銆傜敤浜庤偁鐥堣吂鐥涳紝鑲虹棃鍚愯創锛岀棃鑲跨柈姣掞紝浜у悗鐦�琛�鑵圭棝銆�
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "chapter001",
+  props: {
+    showPageList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  components: {
+    pageHeader: () => import("../components/pageHeader.vue"),
+  },
+  data() {
+    return {};
+  },
+};
+</script>
diff --git a/src/books/MMVRTCMP/view/components/index.vue b/src/books/MMVRTCMP/view/components/index.vue
new file mode 100644
index 0000000..118aec9
--- /dev/null
+++ b/src/books/MMVRTCMP/view/components/index.vue
@@ -0,0 +1,915 @@
+<!-- @format -->
+
+<template>
+  <div class="page-main" @scroll="throttledScrollHandler">
+    <div id="searchDomBox" style="display: none">
+      <div id="searchContent"></div>
+    </div>
+    <div
+      class="public-MMVRTCMP"
+      :style="{
+        fontSize: fontSize ? fontSize + 'px' : '16px',
+        transform: `scale(${pageZoom ? pageZoom : 1})`,
+        transformOrigin: 'center top',
+      }"
+    >
+      <!-- <pageHeader
+        v-if="showCatalogList.indexOf(1) > -1"
+        :showPageList="loadPageList"
+      ></pageHeader> -->
+      <chapterOne
+        v-if="showCatalogList.indexOf(1) > -1"
+        :showPageList="loadPageList"
+      ></chapterOne>
+      <!-- <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo> -->
+      <!-- <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree> -->
+      <!-- <chapterFour
+        v-if="showCatalogList.indexOf(5) > -1"
+        :showPageList="loadPageList"
+      ></chapterFour> -->
+      <!-- <chapterfive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterfive> -->
+      <!-- <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSix> -->
+      <!-- <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList"></chapterSeven> -->
+      <!-- <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight> -->
+      <!-- <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList"></chapterNine> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+// import pageHeader from "./front001";
+import chapterOne from "./chapter001.vue";
+// import chapterTwo from './chapter002.vue'
+// import chapterThree from './chapter003.vue'
+// import chapterFour from "./chapter004.vue";
+// import chapterfive from './chapter005.vue'
+
+// import chapterSix from './chapter006.vue'
+// import chapterSeven from './chapter007.vue'
+// import chapterEight from './chapter008.vue'
+// import chapterNine from './chapter009.vue'
+
+import NoteIcon from "@/assets/images/biji.png";
+import _ from "lodash";
+import getQuestionList from "@/assets/methods/examination";
+import testData from "../../js/examinationList";
+import Swiper from "swiper/bundle";
+import "swiper/swiper-bundle.css";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+export default {
+  data() {
+    return {
+      catalogLength: 1, // 鎬荤珷鑺傛暟
+      showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+      loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+      throttleThreshold: 100, // 鑺傛祦闃堝��
+      previousScrollTop: 0,
+      throttledScrollHandler: null,
+      observer: null,
+      loadPageObserver: null,
+      loadPageList: [],
+      questionDataMap: {},
+      renderSignMap: {},
+      highlightData: null,
+    };
+  },
+  computed: {
+    fontSize() {
+      return this.$store.state.qiankun.fontSize;
+    },
+    pageZoom() {
+      return this.$store.state.qiankun.scale / 100;
+    },
+  },
+  watch: {
+    showCatalogList: {
+      handler(newVal, oldVal) {
+        if (
+          this.$store.state.qiankun &&
+          this.$store.state.qiankun.catalogChange
+        ) {
+          // 璋冪敤鐖跺眰鏂规硶
+          this.$store.state.qiankun.catalogChange({
+            showCatalogList: newVal,
+          });
+        }
+        // 鍚姩椤电爜瑙傚療
+        setTimeout(() => {
+          this.initObservation();
+          this.initThemeColor();
+        }, 500);
+      },
+    },
+    loadPageList: {
+      handler(newVal, oldVal) {
+        setTimeout(() => {
+          this.initSwiper();
+          this.initViewer();
+          // this.readText()
+        }, 200);
+      },
+    },
+    pageZoom: {
+      handler(newVal, oldVal) {
+        const scrollBox = (
+          this.container ? this.container : document
+        ).querySelector(".page-main");
+        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+      },
+    },
+  },
+  mounted() {
+    // 榛樿鍔犺浇绔犺妭
+    this.showCatalogList = [1];
+    // 婊氬姩鐩戝惉鑺傛祦
+    this.throttledScrollHandler = _.throttle(
+      this.scrollFun,
+      this.throttleThreshold,
+      { leading: true, trailing: false }
+    );
+    // 瀹氫箟瀛愬眰鏂规硶
+    if (this.setGlobalState) {
+      // 鎻愪緵椤甸潰璺宠浆鍔熻兘
+      this.setGlobalState({
+        gotoPage: (catalog, page) => {
+          this.gotoPage(catalog, page);
+        },
+        // 娓叉煋绗旇銆侀珮浜�佸垝绾�
+        renderSign: (type, data) => {
+          // 鍥犱负璋冩暣涓洪〉闈㈡噿鍔犺浇锛屾墍浠ユ覆鏌撴爣璁颁篃闇�瑕佹寜鐓ч〉闈㈣繘琛屽鐞嗭紝鍏堝偍瀛樻暟鎹紝椤甸潰鍔犺浇瀹屾垚鍐嶆覆鏌撳搴旂殑鏍囪锛�
+          this.handelSignData(type, data);
+          // this.renderSign(type, data);
+        },
+        // 鍒犻櫎绗旇銆侀珮浜�佸垝绾�
+        delSign: (data) => {
+          this.delSign(data);
+        },
+        // 鍏ㄦ枃妫�绱�
+        searchBookByKeyword: (keyword) => {
+          return this.searchTextByPage(keyword);
+        },
+        // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+        jumpSearchItem: (data) => {
+          this.searchItemLocation(data);
+        },
+      });
+    }
+
+    // 鍒涘缓涓�涓柊鐨� Intersection Observer 瀹炰緥锛岀敤浜庤瀵熺洰鏍囧厓绱犲拰鎵ц鐩稿簲鐨勫洖璋冨嚱鏁般��
+    // new IntersectionObserver(callback, options)锛氫娇鐢ㄤ箣鍓嶅畾涔夌殑 callback 鍥炶皟鍑芥暟鍜� options 閰嶇疆閫夐」鏉ュ垵濮嬪寲 Intersection Observer 瀹炰緥銆�
+    this.observer = new IntersectionObserver(this.pageChangeCallback, {
+      root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+      rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+      threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+    });
+
+    this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
+      root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮��
+      rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚�
+      threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+    });
+
+    // 鍚姩椤电爜瑙傚療
+    setTimeout(() => {
+      this.initObservation();
+      this.initThemeColor();
+    }, 500);
+
+    // 娴嬭瘯椤甸潰璺宠浆
+    setTimeout(() => {
+      this.gotoPage(1, 1);
+      //   setTimeout(() => {
+      //     this.renderSign("Highlight", {
+      //       id: "2ACA9359",
+      //       txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩",
+      //       page: "10",
+      //       type: "Highlight",
+      //       color: "#F5E12A"
+      //     });
+      // setTimeout(() => {
+      //   this.delSign({
+      //     ids: ["2ACA9359"]
+      //   });
+      // }, 2000);
+    }, 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: {
+    swdtChange(data) {
+      console.log("瀛愬簲鐢╬df", data);
+      if (this.$store.state.qiankun && this.$store.state.qiankun.openPDF) {
+        if (data.type == "pdf") {
+          this.$store.state.qiankun.openPDF({
+            data: data.data,
+          });
+        } else {
+          this.$store.state.qiankun.chooseWords({
+            type: data.type,
+            data: data.data,
+          });
+        }
+      }
+    },
+    changeDomViewer() {
+      this.initViewer();
+    },
+    // setZoom1() {
+    //   let scale = this.$store.state.qiankun.scale + 10;
+    //   const scrollBox = (
+    //     this.container ? this.container : document
+    //   ).querySelector(".page-main");
+    //   this.$store.commit("setZoom", scale);
+    // },
+    // setZoom2() {
+    //   let scale = this.$store.state.qiankun.scale - 10;
+    //   const scrollBox = (
+    //     this.container ? this.container : document
+    //   ).querySelector(".page-main");
+    //   this.$store.commit("setZoom", scale);
+    // },
+    // 婊氬姩鐩戝惉
+    scrollFun(event) {
+      // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩
+      if (event.target.scrollTop > this.previousScrollTop) {
+        // 鍚戜笅
+        const currentScrollTop =
+          event.target.scrollTop + event.target.offsetHeight;
+        if (
+          currentScrollTop >=
+          event.target.scrollHeight - this.loadThreshold
+        ) {
+          // 鍒拌揪闃堝��
+          if (
+            this.showCatalogList[this.showCatalogList.length - 1] <
+            this.catalogLength
+          ) {
+            // 鍔犺浇涓嬩竴绔�
+            this.showCatalogList.push(
+              this.showCatalogList[this.showCatalogList.length - 1] + 1
+            );
+            if (this.showCatalogList.length > 3) {
+              // 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔�
+              this.showCatalogList.shift();
+            }
+          }
+        }
+      } else if (event.target.scrollTop < this.previousScrollTop) {
+        // 鍚戜笂
+        const currentScrollTop = event.target.scrollTop;
+        if (currentScrollTop <= this.loadThreshold) {
+          // 鍒拌揪闃堝��
+          if (this.showCatalogList[0] > 0) {
+            // 鍔犺浇涓婁竴绔�
+            this.showCatalogList.unshift(this.showCatalogList[0] - 1);
+            if (this.showCatalogList.length > 3) {
+              // 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔�
+              this.showCatalogList.pop();
+            }
+          }
+        }
+      }
+      // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢�
+      // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆
+      this.previousScrollTop = event.target.scrollTop;
+    },
+    // 绔犺妭銆侀〉闈㈣烦杞�
+    gotoPage(catalog, page) {
+      if (catalog >= 0 && catalog <= this.catalogLength) {
+        // 澶勭悊娓叉煋绔犺妭
+        if (catalog == 0) {
+          this.showCatalogList = [0, 1];
+        } else if (catalog == this.catalogLength) {
+          this.showCatalogList = [
+            this.catalogLength - 2,
+            this.catalogLength - 1,
+            this.catalogLength,
+          ];
+        } else {
+          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
+        }
+        setTimeout(() => {
+          // 璺宠浆椤电爜
+          const pageDom = (
+            this.container ? this.container : document
+          ).querySelector(`[page="${page}"]`);
+
+          if (pageDom) {
+            pageDom.scrollIntoView();
+          } else {
+            console.log("椤电爜閿欒锛�");
+          }
+        }, 500);
+      } else {
+        console.log("绔犺妭閿欒锛�");
+      }
+    },
+
+    // 澶勭悊鏍囪鏁版嵁
+    handelSignData(type, data) {
+      if (this.loadPageList.indexOf(Number(data.page)) > -1) {
+        // 绔嬪嵆娓叉煋
+        this.renderSign(type, data);
+      }
+
+      // 鍌ㄥ瓨鏁版嵁
+      if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
+      if (!this.renderSignMap[type][data.page])
+        this.renderSignMap[type][data.page] = [];
+      this.renderSignMap[type][data.page].push(data);
+    },
+
+    // 娓叉煋鏍囪
+    renderSign(type, data) {
+      // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+      if (this.$store.state.qiankun.disableSign) {
+        return false;
+      }
+      const existence = (
+        this.container ? this.container : document
+      ).querySelector(`[dataid="${data.id}"]`);
+      // 鍘婚噸
+      if (!existence) {
+        const pageDom = (
+          this.container ? this.container : document
+        ).querySelector(`[page="${data.page}"]`);
+        // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
+        const treeWalker = document.createTreeWalker(
+          pageDom,
+          NodeFilter.SHOW_TEXT
+        );
+        const allTextNodes = [];
+        let currentNode = treeWalker.nextNode();
+        while (currentNode) {
+          allTextNodes.push(currentNode);
+          currentNode = treeWalker.nextNode();
+        }
+        for (let i = 0; i < allTextNodes.length; i++) {
+          const textDom = allTextNodes[i];
+          if (textDom.textContent.indexOf(data.txt) > -1) {
+            let reg = new RegExp(`${data.txt}`, "ig");
+            switch (type) {
+              case "Highlight":
+                // 楂樹寒
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+                  );
+                break;
+              case "Dashing":
+                // 鍒掔嚎
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
+                  );
+                break;
+              case "Note":
+                // 绗旇
+                textDom.parentNode.innerHTML =
+                  textDom.parentNode.innerHTML.replace(
+                    reg,
+                    `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
+                  );
+                break;
+            }
+          }
+        }
+      }
+    },
+    // 鍒犻櫎鏍囪娓叉煋
+    delSign({ ids, type }) {
+      if (ids && ids.length) {
+        for (let i = 0; i < ids.length; i++) {
+          const id = ids[i];
+          const dom = (
+            this.container ? this.container : document
+          ).querySelector(`[dataid="${id}"]`);
+          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+            dom.outerHTML,
+            dom.outerText
+          );
+        }
+      }
+      if (type) {
+        const doms = (
+          this.container ? this.container : document
+        ).querySelectorAll(`[datatype="${type}"]`);
+        for (let i = 0; i < doms.length; i++) {
+          const dom = doms[i];
+          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
+            dom.outerHTML,
+            dom.outerText
+          );
+        }
+      }
+    },
+    initObservation() {
+      const sections = (
+        this.container ? this.container : document
+      ).querySelectorAll(".page-box");
+      sections.forEach((section) => {
+        if (this.config.activeBook && this.config.activeBook.tryPageCount) {
+          const page = section.getAttribute("page");
+          if (Number(page) > this.config.activeBook.tryPageCount) {
+            let chapterDom = this.getParentWithClass(section, "chapter");
+            const chapterNum = chapterDom.getAttribute("num");
+            this.catalogLength = Number(chapterNum) - 1;
+            section.remove();
+            return false;
+          }
+        }
+        // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
+        const isObserver = section.getAttribute("observer");
+        const isLoadObserver = section.getAttribute("loadObserver");
+        if (!isObserver) {
+          this.observer.observe(section);
+          section.setAttribute("observer", "1");
+        }
+        if (!isLoadObserver) {
+          this.loadPageObserver.observe(section);
+          section.setAttribute("loadObserver", "1");
+        }
+      });
+    },
+    initThemeColor() {
+      // 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐�
+      const colorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-color");
+      const backgroundColorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-back");
+      const borderColorDom = (
+        this.container ? this.container : document
+      ).querySelectorAll(".theme-border");
+      // 鑾峰彇閰嶇疆鐨勪富棰樿壊
+      const bookThemeColor =
+        this.config.activeBook && this.config.activeBook.bookThemeColor
+          ? this.config.activeBook.bookThemeColor
+          : null;
+      const chapterThemeColor =
+        this.config.activeBook && this.config.activeBook.chapterThemeColor
+          ? this.config.activeBook.chapterThemeColor
+          : null;
+      const pageThemeColor =
+        this.config.activeBook && this.config.activeBook.pageThemeColor
+          ? this.config.activeBook.pageThemeColor
+          : null;
+      colorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.color = themeColor;
+        }
+      });
+      backgroundColorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.backgroundColor = themeColor;
+        }
+      });
+      borderColorDom.forEach((domItem) => {
+        // 鑾峰彇绔犺妭銆侀〉鐮�
+        let pageDom = this.getParentWithClass(domItem, "page-box");
+        let chapterDom = this.getParentWithClass(domItem, "chapter");
+        let page, chapterNum;
+        if (pageDom) page = pageDom.getAttribute("page");
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        // 鍚戜笂鍖归厤涓婚鑹�
+        const themeColor =
+          page && pageThemeColor && pageThemeColor[page]
+            ? pageThemeColor[page]
+            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
+            ? chapterThemeColor[chapterNum]
+            : bookThemeColor;
+        if (themeColor) {
+          domItem.style.borderColor = themeColor;
+        }
+      });
+    },
+    getParentWithClass(element, className) {
+      console.log(element, className, "element, className");
+      while (element.parentElement) {
+        element = element.parentElement;
+        if (element.classList.contains(className)) {
+          return element;
+        }
+      }
+    },
+    pageChangeCallback(entries, observer) {
+      //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°��
+      entries.forEach((entry) => {
+        //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ��
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱�
+          const page = target.getAttribute("page");
+          const catalogDom = this.tool.getParentNodeByClassName(
+            target,
+            "chapter"
+          );
+          const catalog = catalogDom.getAttribute("num");
+          let text = null;
+          if (target.querySelector("p")) {
+            text = target.querySelector("p").textContent.substring(0, 50);
+          }
+          // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
+          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
+            this.$store.state.qiankun.pageChange({
+              page: page,
+              catalog: catalog,
+              text,
+            });
+          // const sections = Array.from(document.querySelectorAll(".section"));
+          //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
+          // let index = sections.findIndex((section) => section === target) + 1;
+          //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併��
+        }
+      });
+    },
+    loadPageCallback(entries, observer) {
+      entries.forEach(async (entry) => {
+        if (entry.isIntersecting) {
+          const target = entry.target;
+          const page = target.getAttribute("page");
+          if (this.loadPageList.indexOf(Number(page)) == -1) {
+            const catalogDom = this.tool.getParentNodeByClassName(
+              target,
+              "chapter"
+            );
+            // 娣诲姞椤电爜
+            this.loadPageList.push(Number(page));
+            const catalog = catalogDom.getAttribute("num");
+            if (!this.questionDataMap[page]) {
+              if (testData && testData[catalog]) {
+                if (testData[catalog][page]) {
+                  if (Array.isArray(testData[catalog][page])) {
+                    this.questionDataMap[page] = await getQuestionList(
+                      page,
+                      testData[catalog][page],
+                      this.config.activeBook
+                    );
+                  } else {
+                    const obj = {};
+                    for (let key in testData[catalog][page]) {
+                      obj[key] = await getQuestionList(
+                        [],
+                        testData[catalog][page][key],
+                        this.config.activeBook
+                      );
+                    }
+                    this.questionDataMap[page] = obj;
+                  }
+                }
+              }
+            }
+            // 娓叉煋杩欎竴椤电殑鏍囪
+            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,
+        // chapterSix,
+        // chapterSeven,
+        // chapterEight,
+        // chapterNine
+        // assemblyOne,
+        // assemblyTwo,
+      };
+      // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+      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, () => {});
+    },
+    // readText() {
+    //   const doms = (
+    //     this.container ? this.container : document
+    //   ).querySelectorAll('.read-aloud')
+    //   for (let index = 0; index < doms.length; index++) {
+    //     const dom = doms[index]
+    //     let id = null
+    //     dom.addEventListener('click', (e) => {
+    //       if (e.srcElement.nodeName == 'svg') {
+    //         id = dom.getAttribute('readId')
+    //       } else if (e.srcElement.nodeName == 'g') {
+    //         const svgDom = e.srcElement.parentNode
+    //         id = svgDom.getAttribute('readId')
+    //       } else {
+    //         const svgDom = e.srcElement.parentNode.parentNode
+    //         id = svgDom.getAttribute('readId')
+    //       }
+    //       const item = (
+    //         this.container ? this.container : document
+    //       ).querySelector('#' + id).innerText
+    //       console.log(item, 233)
+    //     })
+    //   }
+    // },
+  },
+  components: {
+    // pageHeader,
+    chapterOne,
+    // chapterTwo,
+    // chapterThree,
+    // chapterFour, 
+    // chapterfive,
+    // chapterSix,
+    // chapterSeven,
+    // chapterEight,
+    // chapterNine
+    // assemblyOne,
+    // assemblyTwo,
+    // ChapterFour,
+    // ChapterFive,
+    // chapterSix,
+    // chapterSeven,
+    // chapterEight,
+    // chapterNine,
+    // chapter010,
+    // chapter011,
+    // chapter012,
+    // chapter013,
+    // chapter014,
+    // chapter015,
+    // chapter016,
+    // chapter017,
+    // chapter018,
+  },
+};
+</script>
diff --git a/src/books/MMVRTCMP/view/components/pageHeader.vue b/src/books/MMVRTCMP/view/components/pageHeader.vue
new file mode 100644
index 0000000..0ec4c18
--- /dev/null
+++ b/src/books/MMVRTCMP/view/components/pageHeader.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="pageHeader-box">
+    <div class="page-num">
+      <span>{{ page }}</span>
+      <span>{{ name }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "pageHeader",
+  props: {
+    page: {
+      type: Number,
+      default: 0,
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.pageHeader-box {
+  width: 100%;
+  padding-top: 100px;
+
+  .page-num {
+    width: 48%;
+    height: 52px;
+    background-image: url(../../images/page.png);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    span {
+      color: #333;
+      font-size: 28px;
+      font-weight: 700;
+      margin: 0 20px;
+    }
+  }
+}
+</style>
diff --git a/src/books/MMVRTCMP/view/index.vue b/src/books/MMVRTCMP/view/index.vue
new file mode 100644
index 0000000..a22a09d
--- /dev/null
+++ b/src/books/MMVRTCMP/view/index.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="temp-bookInnerContentSports" @mouseup="handleMouseUp">
+    <pageContent></pageContent>
+  </div>
+</template>
+
+<script>
+import pageContent from "./components/index.vue";
+export default {
+  components: {
+    pageContent,
+  },
+  data() {
+    return {};
+  },
+
+  mounted() { },
+  methods: {
+    getParentWithClass(element, className) {
+      while (element.parentElement) {
+        element = element.parentElement;
+        if (element.classList.contains(className)) {
+          return element;
+        }
+      }
+    },
+
+    handleMouseUp(e) {
+      const selection = (
+        this.container ? this.container : window
+      ).getSelection();
+      const txt = selection.toString();
+      if (selection.type != "none" && txt) {
+        let node = selection.anchorNode.parentNode;
+        let pageHtml = this.getParentWithClass(
+          selection.anchorNode,
+          "page-box"
+        );
+        let chapterDom = this.getParentWithClass(
+          selection.anchorNode,
+          "chapter"
+        );
+        let chapterNum;
+        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
+        if (pageHtml) {
+          const page = pageHtml.getAttribute("page");
+          // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶
+          if (this.$store.state.qiankun.windowSelection) {
+            this.$store.state.qiankun.windowSelection({
+              chapterNum,
+              txt,
+              page,
+              x: e.x,
+              y: e.y,
+            });
+          }
+        }
+      } else {
+        if (this.$store.state.qiankun.windowSelection) {
+          this.$store.state.qiankun.windowSelection({
+            chapterNum: "",
+            txt: "",
+            page: "",
+            x: e.x,
+            y: e.y,
+          });
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import "../css/default.less";
+</style>

--
Gitblit v1.9.1