酒店英语实训活页教程（第2版）（旅游社）

zhongshujie

6 小时以前 abc4b29e99f9c6cb74767dd6e3d5184834545459

酒店英语实训活页教程（第2版）（旅游社）

 .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'

 .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'

 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         // èˆªç©ºæœåŠ¡å£è¯­äº¤é™…与播音技巧
      // 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;
    }
  },

 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;

 src/books/aviationPassengerTransport6th/assets/Fonts/FZFSK.TTF

Binary files differ

 src/books/aviationPassengerTransport6th/assets/Fonts/FZSSK.TTF

Binary files differ

 src/books/aviationPassengerTransport6th/assets/examinationList.js

New file
@@ -0,0 +1,9 @@
const testData = {
  2: {
    16: [
      144319, 144320, 144321, 144322, 144323, 144324, 144325, 144326, 144327, 144328
    ],
  },
};

export default testData;

 src/books/aviationPassengerTransport6th/assets/images/0002-01.jpg

 src/books/aviationPassengerTransport6th/assets/images/Cover.jpg

 src/books/aviationPassengerTransport6th/assets/images/delectFile.svg

New file
@@ -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>

 src/books/aviationPassengerTransport6th/assets/images/header-left.png

 src/books/aviationPassengerTransport6th/assets/images/icon/heart-check.png

 src/books/aviationPassengerTransport6th/assets/images/icon/heart.png

 src/books/aviationPassengerTransport6th/assets/images/pdfLogo.svg

New file
@@ -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>

 src/books/aviationPassengerTransport6th/assets/images/uploadFiles.svg

New file
@@ -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>

 src/books/aviationPassengerTransport6th/assets/images/µÚ5Ò³-9.png

 src/books/aviationPassengerTransport6th/assets/images/µÚ6Ò³-10.png

 src/books/aviationPassengerTransport6th/assets/images/µÚ7Ò³-11.png

 src/books/aviationPassengerTransport6th/assets/images/µÚ9Ò³-12.png

 src/books/aviationPassengerTransport6th/assets/images/µÚ9Ò³-13.png

 src/books/aviationPassengerTransport6th/assets/main.less

New file
@@ -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: "方正正黑" !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: "方正正黑";
        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: "方正正黑";
        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: "方正正黑";
    }

    .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: "方正正黑";
        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: "汉仪正黑";
        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;
}

 src/books/aviationPassengerTransport6th/view/components/chapter001.vue

New file
@@ -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
                >了解世界以及中国民用航空运输的发展历史以及不同阶段的特点；理解民用航空运输发展的趋势。
              </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日，国际民航组织（ICAO）正式成立。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年等），国际民航组织理事会为国际民航日议定一个特定的周年主题，理事会代表们还为这些周年纪念日之间的整个四年期选择一个国际民航日主题。为纪念国际民航组织成立75周年，理事会为2019年庆祝活动选择的主题为“连通世界七十五载（75
            Years of Connecting the
            World）”，2020年至2023年的国际民航日主题是“为全球航空发展推进创新（Advancing
            Innovation for Aviation Development）”。
          </p>
          <p class="fm-fs">
            åˆ›æ–°å°†æˆä¸ºæ­£åœ¨æ¥ä¸´çš„航空新时代的核心，自主航空器、可再生能源和推进能源、亚轨道飞行、人工智能、增材制造、大数据、区块链和许多其他令人兴奋的发展都将改变我们所知的飞行面貌。国际民航组织采用积极主动的监管评估方法，鼓励新趋势并推动协调，从而在支持航空创新中发挥主要作用，促使航空业能够利用这些趋势创造新成绩及获得新能力。
          </p>
          <p class="right-info">（资料来源：国际民航组织、联合国网站）</p>
          <div class="fl jc-c">
            <h1>任务一　了解世界民用航空运输业的发展</h1>
          </div>
          <p>
            åœ¨å¹¿é˜”无垠的蓝天上自由地飞翔，是人类自古以来的梦想。人类的飞天梦想集中反映在中外古代飞行神话中。在中国，有广为流传的美丽神话，如嫦娥奔月、仙女下凡、牛郎织女；有乘龙跨凤的萧史、弄玉；有天宫中的玉皇大帝、脚蹬风火轮的哪吒三太子及飞来飞去的众神仙；有一个筋斗十万八千里的齐天大圣孙悟空；还有闻名世界的敦煌飞天等，都是中国古代人类升空飞翔愿望的生动体现。在外国，古代飞行神话主要集中在古希腊、埃及、印度及阿拉伯地区。在古希腊神话中，会飞的神有很多，如太阳神阿波罗、爱神丘比特等，都长着一双翅膀；阿拉伯飞毯的神话更是家喻户晓。
          </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年法国的蒙特哥菲尔（Montgolfier）兄弟制造的热气球载人升空，随后德国人又用气球运送邮件和乘客，这可以说是民用航空的开始。1852年，在法国出现了飞艇，出现了可以由人操纵的有动力的飞行器。整个19世纪是气球、飞艇这些轻于空气的航空器主宰航空的时代，它们首先用于民用，但很快就被用于战争，而军事用途又促进了航空技术的发展。轻于空气的飞行器体积大、速度慢，操纵也不方便，在军事上易受攻击，因而它们的出现不论在民用和军用领域中都不代表真正的航空时代的到来。
          </p>
          <p>
            èˆªç©ºäº‹ä¸šçš„真正开拓是在飞机这种重于空气的航空器出现以后，重于空气的飞行器的设想出现得比轻于空气的飞行器还要早，但直到19世纪，法兰西科学院还在争论是否可能制造出重于空气的飞行器的问题。与此同时，英国科学家凯利（G.
            Cayley）和德国科学家里李林达尔（O.
            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日），英国皇家海军中校温德姆（Walter G.
            Windham）请法国飞行员亨利·佩凯（Henry
            Pequet）驾机，把一批信件从印度的阿拉哈巴德市（Allahabad）带往奈尼章克申（Naini
            Junction）。每封信附加航空邮费约合2.5便士，这便是首次邮政飞行。
          </p>
          <p>
            1914å¹´1月1日，美国著名长途飞行员托尼·贾纳斯（Tony
            Jannus）驾驶“伯努瓦”（Benoist）号水上飞机，载一名乘客，完成了从圣彼得斯堡（St.
            Petersburg）到坦帕（Tampa）的第一次航班飞行。航线全长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年，是民用航空初创并发展的年代，民用航空迅速从欧洲发展到北美，然后普及到亚、非、拉美各洲，迅速扩展到全球各地，中国也在1920年开始建立了第一条航线。1933年，美国人林白（C.
              A.Lindberg）横越大西洋飞行的成功，把航空运输由洲内飞行扩展到了洲际飞行。这个年代最具代表性的民航客机是美国的DC-3，如图1-2所示。
            </p>
            <p>
              1939年，第二次世界大战的开始，中断了民航发展的正常进程。战争对航空的推动力远比民航获取商业利润的推动力大得多，在六年的战争中航空技术取得了飞跃式的发展。
            </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涡轮喷气发动机的“彗星号”客机在航线上开始使用。在随后的两年内，“彗星号”连续三次空中解体，使喷气式飞机在民航的应用受到了挫折，但喷气式民用飞机的优越性已经显示出来。在接受了“彗星号”失败的教训后，人们终于判断出导致“彗星号”失事的原因是“疲劳断裂”，并找出了解决的方法。1956年，苏联的图-104
              æŠ•å…¥èˆªçº¿ï¼›1958年，美国的波音707（图1-3）和DC-8
              è¿›å…¥èˆªçº¿ï¼Œå–·æ°”航空的新时代开始了。作为喷气式飞机的代表机种，波音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>
            å–·æ°”式飞机进入民航，使远程、大众化和廉价的航空运输成为可能，在巨大的需求和利润驱使下，航空公司积极地开拓市场，参加国际竞争。在发达国家出现了大量的航空公司，并最后形成了数十个大型的航空公司。发展中国家也把参与国际航空市场作为国家尊严和地位的象征，全力支持国家航空公司的发展，使民航事业一片繁荣。由于喷气式飞机的尺寸、重量、噪声等带来的问题，旧的机场已不适合航空运输的发展，于是航空公司开始不断地改造旧机场，兴建新机场，满足不断增大的客货流。对于航行管理系统来说，从航行管制、航路开辟、航行情报等，都要适应喷气时代的速度和容量的要求，因而整个系统都进行着改造和更新。总之，1958年开始的民用喷气时代是民航发展的一个新的阶段，它标志着民航进入了全球的大众化运输的新时代。
          </p>
          <p>
            ä»Ž20世纪70年代之后，民航继续朝着大型化和高速度的方向发展。1970
            å¹´ï¼Œæ³¢éŸ³747（图1-4）宽体客机投入航线是大型化的一个重要标志，而1976
            å¹´è‹±ã€æ³•åˆåˆ¶çš„超音速客机“协和号”（图1-5）的投入使用则是民航提高速度在经济和环境问题上不太成功的一次尝试。美国于1978年放松对航空公司的管制，这对航空运输的发展起到了积极的作用。由于航空运输涉及国家安全和旅客安全，因而在1978年以前，各个国家对于航空公司的经营实行严格的控制，主要是对票价和市场准入的控制，很多国家不允许私人企业经营航空公司，只有国营的航空公司，有的甚至把航空企业作为国家机构或军队的一部分。
          </p>
          <p>
            éšç€èˆªç©ºè¿è¾“的迅速发展，人们终于认识到，尽管航空运输业有它特殊的安全需要，并且技术密集，风险较大，但仍然可以通过一系列的安全法规使之按市场经济的法则展开竞争，这样可以促使航空运输企业合理地配置资源，降低成本，促进企业的发展。放松管制的趋势扩展到了西欧、日本等地区，使民航市场迅速全球化。在放松管制初期出现的中、小航空公司由于规模效益低，缺乏竞争力，或倒闭、或被大公司兼并。然而，在世界范围内，各大航空公司为了争取更大的市场份额，扩展自身的航线网络，分别通过代码共享等途径组成各种战略性联盟来增强自身的竞争力。时至今日，民航已经发展成为一个巨大的国际性行业，对世界经济或一个国家的经济发展有着举足轻重的影响，各国政府和企业都对民航进行了大量的投资，把它作为一个有巨大潜力的行业来开拓发展。
          </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日，德国汉莎航空公司、美国联合航空公司、瑞典斯堪的纳维亚航空公司、加拿大航空公司和泰国国际航空公司的董事长们又在德国的法兰克福机场签署协议，组成了当时世界上最大的航空公司联盟，从而使大规模的跨国联盟成为世界航空界业务联盟的新趋势。1998å¹´3月9日，德国汉莎航空公司又与亚洲最大的航空公司发表联合声明，宣布结成德日战略航空联盟，将德、日航线建成连接欧洲大陆与东亚之间最重要的空中交通线。1998å¹´5月16日，德国汉莎航空公司宣布，新西兰航空公司和澳大利亚安捷航空公司将于1999年起加入于“明星联盟”，从而使“明星联盟”的成员增加到七家航空公司。“寰宇一家”正是在这样一种大背景下产生的。
          </p>
          <p>
            èˆªç©ºå…¬å¸è”盟对于重新确定航空公司的市场定位，通过结成航空公司间的业务联盟，各航空公司至少可以促使旅客更多地选择结盟伙伴而不是竞争对手的航班，从而达到削弱竞争对手的目的；与此同时，它还可能通过利用结盟伙伴的服务设施和技术支持来削减成本，以增加利润。由于各国航空市场高度一体化，客观上要求各航空公司在技术支持、航班服务、旅客转机以及机票出售等方面向旅客提供一体化的标准化规范服务，要求各航空公司在业务标准等方面统一起来，从而形成一个世界航空市场上统一的技术标准和服务标准。在航空市场上存在着多家航空公司并且市场无限细分的情况下，要做到这一点是非常困难的。从这个意义上来说，相对于迅速扩大的全球航空市场而言，现有的航空公司规模是比较小的，因而航空公司之间的业务联盟至少可以在一定程度上解决这个问题。英国航空公司的总裁即宣称：“我们的顾客要求各航空公司一起努力提供世界范围内的服务标准。寰宇一家将做到这一点。”
          </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日，国务院编制委员会讨论通过，决定将中国民用航空局改称“交通部民用航空总局”，为部属一级管理全国民用航空事业的综合性总局，负责经营管理运输航空和专业航空，直接领导地区民用航空管理局的工作。
          </p>
          <p>
            1962å¹´4月13日，第二届全国人民代表大会常务委员会第53次会议决定，民航局更名为“中国民用航空总局”。
          </p>
          <p>
            1962å¹´4月15日，中央决定将民用航空总局由交通部属改为国务院直属局，其业务工作、党政工作、干部人事工作等均直归空军负责管理。这一时期，民航由于领导体制几经改变，航空运输发展受政治、经济影响较大。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日，中国民用航空新疆维吾尔自治区管理局更名为中国民用航空乌鲁木齐管理局，改由民航局直接领导，经国务院批准，由民航局和新疆维吾尔自治区人民政府联合组建的新疆航空公司于同日在乌鲁木齐正式成立。乌鲁木齐管理局和新疆航空公司是两块牌子一套机构，属两位一体的组织形式。
          </p>
          <p class="Secondary-t">（三）第三阶段（1987~2002）</p>
          <p>
            1987年，中国政府决定对民航业进行以航空公司与机场分设为特征的体制改革。主要内容是将原民航北京、上海、广州、西安、成都、沈阳六个地区管理局的航空运输和通用航空相关业务、资产和人员分离出来，组建了六个国家骨干航空公司，实行自主经营、自负盈亏、平等竞争。这六个国家骨干航空公司是：中国国际航空公司、中国东方航空公司、中国南方航空公司、中国西南航空公司、中国西北航空公司、中国北方航空公司。此外，以经营通用航空业务为主并兼营航空运输业务的中国通用航空公司也于1989å¹´7月成立。
          </p>
          <p>
            åœ¨ç»„建骨干航空公司的同时，在原民航北京管理局、上海管理局、广州管理局、成都管理局、西安管理局和沈阳管理局所在地的机场部分基础上，组建了民航华北、华东、中南、西南、西北和东北六个地区管理局以及北京首都机场、上海虹桥机场、广州白云机场、成都双流机场、西安西关机场（现已迁至咸阳，改为西安咸阳机场）和沈阳桃仙机场。六个地区管理局既是管理地区民航事务的政府部门，又是企业，领导管理各民航省（区、市）局和机场。
          </p>
          <p>
            èˆªç©ºè¿è¾“服务保障系统也按专业化分工的要求进行了相应的改革。1990
            å¹´ï¼Œåœ¨åŽŸæ°‘航各级供油部门的基础上组建了专门从事航空油料供应保障业务的中国航空油料总公司，该公司通过设在各机场的分支机构为航空公司提供油料供应。属于这类性质的单位还有从事航空器材（飞机、发动机等）进出口业务的中国航空器材公司，从事全国计算机订票销售系统管理与开发的计算机信息中心，为各航空公司提供航空运输国际结算服务的航空结算中心以及飞机维修公司、航空食品公司等，全民航政企分开的新的管理体制和格局逐步形成。
          </p>
          <p>
            1993å¹´4月19日，中国民用航空局改称中国民用航空总局，属国务院直属机构。同年12月20日，中国民用航空总局的机构规格由副部级调整为正部级。
          </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个省级安全监督管理办公室（天津、河北、山西、内蒙古、大连、吉林、黑龙江、江苏、浙江、安徽、福建、江西、山东、青岛、河南、湖北、湖南、海南、广西、深圳、重庆、贵州、云南、甘肃、青海、宁夏），对民航事务实施监管。
          </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年海南航空作为中国内地唯一一家SKYTRAX五星航空公司，第九次获评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.
              ä¸­å›½æ°‘用航空运输业的发展经历了旧中国时期、计划经济时期、改革开放时期、体制改革时期以及联合重组，目前正由民航大国向民航强国迈进。
            </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">
              ä»¥å°ç»„为单位，收集任意三则与航空运输相关的新闻，以PPT方式与其他同学分享，内容形式不限。
            </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>

 src/books/aviationPassengerTransport6th/view/components/header.vue

New file
@@ -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>
  

 src/books/aviationPassengerTransport6th/view/components/index.vue

New file
@@ -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(() => {
                // èŽ·å–页面所有text节点
                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) {
              // èŽ·å–页面所有text节点
              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>

 src/books/aviationPassengerTransport6th/view/index.vue

New file
@@ -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>

 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">

 src/books/cognitiveLanDevEduAges0to3/assets/main.less

@@ -1217,8 +1217,6 @@
        vertical-align: middle;
    }

    .content {}

    .titleQuot-c {
        font-family: "方正兰亭细黑";
        color: #00aeef;

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0002-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0003-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0005-02.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0007-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0008-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0012-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0013-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0016-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0017-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0018-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0020-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0022-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0023-02.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0025-03.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/0026-01.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/Cover.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/a1.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/a2.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/a3.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/device_phone_frontcover.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/feiye.jpg

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart-check.png

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/icon/heart.png

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/left-page.png

 src/books/hotelEnglishTrainingBrochure2nd/assets/images/right-page.png

 src/books/hotelEnglishTrainingBrochure2nd/assets/main.less

New file
@@ -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: "方正正黑" !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: "方正正黑";
        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: "方正正黑";
        font-weight: 800;
        margin: 0 !important;
    }

    .firstTitle-l {
        font-size: 1.5em;
        color: #fff;
        font-family: "方正正黑";
        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: "汉仪正黑";
        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;
}

 src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue

New file
@@ -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’s 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（明确职责）</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（了解服务流程）
          </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 â€œyes”, 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’s 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 â€œcash”, â€œcredit card”,
            â€œ<span class="bold">debit card</span>”,“traveler'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 â€œcurrency type + amount number”, but its oral form reads as
            â€œamount 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“We look forward to serving you again”.As the guest is departing
            the hotel,extend your wishes to him/her in the way like“Wish 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">口头表达</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’s 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’s 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’s 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">需要我解释账单上的收款款项吗？</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">我们把账单纠正过来。</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’s 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’s 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’s 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’s 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’s 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’s 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’s 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’s 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>

 src/books/hotelEnglishTrainingBrochure2nd/view/components/header.vue

New file
@@ -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">图书在版编目（CIP）数据</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 />教材 â…£. â‘ F719.2
          </p>
          <p class="left3 fm-hyss fz-14">
            ä¸­å›½å›½å®¶ç‰ˆæœ¬é¦†CIP数据核字(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">副主编　华国梅　夏　季　安　宁</p>
          <p class="left fz-18 fm-kt center">参　编　蔡　寻　屈林艳　刘　清</p>
          <hr />
          <div class="fl">
            <div class="copyright-left">
              <p class="">策　　划</p>
              <p class="">责任编辑</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>

 src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue

New file
@@ -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(() => {
                // èŽ·å–页面所有text节点
                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) {
              // èŽ·å–页面所有text节点
              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>

 src/books/hotelEnglishTrainingBrochure2nd/view/index.vue

New file
@@ -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>

 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 {

 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>