婴幼儿照护实务

zhongshujie

2025-03-26 aaa13b34449445bdf7aa03d4a8fb3944b5250d6b

婴幼儿照护实务

 .env

@@ -1,6 +1,6 @@
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 = 'https://www.tepcb.com/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 = 'https://www.tepcb.com/books/resource/'
VUE_APP_PUBLIC_PATH = '/books/book'

 .env.product

@@ -1,8 +1,8 @@
VUE_APP_ENV = 'product'
VUE_APP_API_URL = "https://jsek.bnuic.com"
VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/civilAviation'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/aviationEtiquette'
# VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/'
# VUE_APP_PUBLIC_PATH = 'http://182.92.203.7:3007/books/book/preschoolBasicKnowledge'
# VUE_APP_PUBLIC_PATH = 'http://182.92.203.7:3007/books/book/aviationEtiquette'
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"
VUE_APP_BOOK_ID = 'civilAviation'
VUE_APP_BOOK_ID = 'aviationEtiquette'

 src/App.vue

@@ -27,6 +27,7 @@
    </preschoolEvaluation>
    <preschoolBasicKnowledge v-if="activeBook.name == 'preschoolBasicKnowledge'"></preschoolBasicKnowledge> 
    <policiesAndRegulations v-if="activeBook.name == 'policiesAndRegulations'"></policiesAndRegulations> 
    <practicalCareChildrenManual v-if="activeBook.name == 'practicalCareChildrenManual'"></practicalCareChildrenManual>
  </div>
</template>
<script>
@@ -77,6 +78,7 @@
    preschoolEvaluation: () => import("./books/preschoolEvaluation/view/index.vue"),
    preschoolBasicKnowledge: ()=> import("./books/preschoolBasicKnowledge/view/index.vue"),
    policiesAndRegulations: ()=> import("./books/policiesAndRegulations/view/index.vue"),
    practicalCareChildrenManual: ()=> import("./books/practicalCareChildrenManual/view/index.vue")
  },
  data() {
    return {
@@ -127,12 +129,12 @@
      // preschoolEvaluation  // 学前教育评价
      // preschoolBasicKnowledge //学前教育基础知识
      // policiesAndRegulations  //政策法律与法规|旅游社
      
      // practicalCareChildrenManual // 婴幼儿照护实录
      this.activeBook = await this.config.getBookConfig(
        process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "aviationEtiquette")
          : "practicalCareChildrenManual")
      );

      // this.activeBook = await this.config.getBookConfig(

 src/assets/images/heart copy.png

 src/assets/images/heart-check copy.png

 src/assets/images/videoLogo.png

 src/assets/js/config.js

@@ -1,17 +1,10 @@
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 let activeBook = {
  'name':'policiesAndRegulations',
  "rootCmsItemId":"162903",
  "storeRefcode":"tourism_digitalTextbooks",
  "bookId": "5271",
  "bookName":"政策法律与法规（第7版）",

}; // 资源请求地址
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 goodsStore = "";
// 请求教材配置信息
const getBookConfig = async (ctx) => {
@@ -22,8 +15,8 @@
};
export const appId = 2;
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,

 src/books/aviationEtiquette/assets/images/feiye.png

 src/books/aviationEtiquette/assets/images/unitFive-01.png

 src/books/aviationEtiquette/assets/images/unitFive-02.png

 src/books/aviationEtiquette/assets/images/unitFour-01.png

 src/books/aviationEtiquette/assets/images/unitFour-02.png

 src/books/aviationEtiquette/assets/images/unitFour-03.png

 src/books/aviationEtiquette/assets/images/unitOne-01.png

 src/books/aviationEtiquette/assets/images/unitOne-02.png

 src/books/aviationEtiquette/assets/images/unitOne-03.png

 src/books/aviationEtiquette/assets/images/unitThree-01.png

 src/books/aviationEtiquette/assets/images/unitThree-02.png

 src/books/aviationEtiquette/assets/images/unitTwo-01.png

 src/books/aviationEtiquette/assets/images/unitTwo-02.png

 src/books/aviationEtiquette/assets/main.less

@@ -166,6 +166,9 @@
    td {
        padding: 5px 10px;
    }
    .c-p{
        cursor: pointer;
    }

    .fl {
        display: flex;
@@ -738,7 +741,7 @@
    }

    .event-header-text-bc {
        background-color: #bbd4ec;
        background-color: #DED5E8;
    }

    //视频  

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

@@ -17,6 +17,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitOne-01.png" alt=""></p>
          <div class="bk">
            <p class="bj1-qjms fl al-c">
              <span class="span-box"></span><span class="span-text">项目描述</span><span class="span-box"></span>
@@ -84,7 +86,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：1.1.1</span>
              <span>视频：礼仪认知</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoOne ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -154,7 +156,7 @@
            周公的“制礼作乐”，实际上就是建立周代的一系列制度，它涉及政治、经济、法律、礼仪、祭祀、教育等制度及乐舞活动，是对周代的社会政治文化各个方面的较全面的规范。在制定周代礼制过程中，周公不是简单地重复前代礼仪，而是把礼仪贯穿于所有活动中，从而建立了一套完整、周密甚至烦琐的礼仪系统，使礼仪在周代具有全新的意义。
          </p>
          <p>
            春秋时期，社会生产力的发展，新兴地主阶级的出现导致“礼崩乐坏”，社会十分混乱，新旧势力的斗争尖锐。孔子在这一时期提出“仁”的思想，并把它同“礼”有机结合在一起，形成了儒家思想体系的核心，构成了儒家思想的社会道德规范。在中国早期文明史上，周王朝礼乐文明持续数百载，对中华民族文化心理的塑造产生了重要影
            春秋时期，社会生产力的发展，新兴地主阶级的出现导致“礼崩乐坏”，社会十分混乱，新旧势力的斗争尖锐。孔子在这一时期提出“仁”的思想，并把它同“礼”有机结合在一起，形成了儒家思想体系的核心，构成了儒家思想的社会道德规范。在中国早期文明史上，周王朝礼乐文明持续数百载，对中华民族文化心理的塑造产生了重要影响，最终确立了中国“礼仪之邦”的历史地位。
          </p>
        </div>
      </div>
@@ -172,7 +174,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">响，最终确立了中国“礼仪之邦”的历史地位。</p>
          <div class="bk2">
            <div class="zysx">
              <p>
@@ -261,7 +262,7 @@
          <h4 id="d004">二、“仪”的含义</h4>
          <h5 id="e005">（一）指典范、表率</h5>
          <p>
            “上者，下之仪也。彼将听唱而应，视仪而动。唱默则民无应也，仪隐则下无动也。不应不动，则上下无以相有也。”（《荀子·正论》）君主，是臣下的准则。百姓听到倡导就响应，看到准则就行动。君主沉默，百姓就无法响应；准则隐匿，百姓就无
            “上者，下之仪也。彼将听唱而应，视仪而动。唱默则民无应也，仪隐则下无动也。不应不动，则上下无以相有也。”（《荀子·正论》）君主，是臣下的准则。百姓听到倡导就响应，看到准则就行动。君主沉默，百姓就无法响应；准则隐匿，百姓就无法行动。不响应、不行动，那么上下就无法相互依靠。这体现出“仪”的表率、榜样和带头作用。
          </p>
        </div>
      </div>
@@ -279,9 +280,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            法行动。不响应、不行动，那么上下就无法相互依靠。这体现出“仪”的表率、榜样和带头作用。
          </p>
          <h5 id="e006">（二）指容貌、风度</h5>
          <p>
            “君子正其衣冠，尊其瞻视，俨然人望而畏之，斯不亦威而不猛乎？”（《论语·尧曰》）意思说，君子衣冠整齐，目不斜视，使人见了就生敬畏之心，这不也是威严而不凶猛的体现吗？故良好的仪容仪表也可展示出个人的形象气质。
@@ -461,7 +459,7 @@
          </div>
          <h4 id="d011">一、礼敬他人的原则</h4>
          <p>
            礼敬他人是指在社交活动中，交往对象之间相互尊敬、谦让，友好相待，和睦共处；尊重交往对象的人格，尊重交往对象的感情、喜好、习俗，尊重交往对象的劳动，
            礼敬他人是指在社交活动中，交往对象之间相互尊敬、谦让，友好相待，和睦共处；尊重交往对象的人格，尊重交往对象的感情、喜好、习俗，尊重交往对象的劳动，将对交往对象的重视、恭敬、友好放在首位。礼敬他人，是与他人建立和谐的人际关系的基石。
          </p>
        </div>
      </div>
@@ -479,9 +477,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            将对交往对象的重视、恭敬、友好放在首位。礼敬他人，是与他人建立和谐的人际关系的基石。
          </p>
          <h4 id="d012">二、真诚尊重的原则</h4>
          <p>
            苏格拉底说：“不要靠馈赠来获得一个朋友，你必须贡献你诚挚的爱，学习怎样用正当的方法来赢得一个人的心。”由此可见在与人交往过程中，真诚尊重是礼仪的重要原则。真诚是以实事求是的态度待人处世，是友善、诚意的体现。具体表现在，首先，以真诚示人，对待社交对象不虚伪、不欺骗；其次，正确认识他人、相信他人、尊重他人。只有真诚待人、尊重他人，才能创造和谐愉快的人际关系。
@@ -500,7 +495,7 @@
          </p>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·触礼旁通·</span></p>
          <p class="block">
            有一天早晨，鲁迅上学迟到了。教书认真的寿镜吾老先生严厉地对他说：“以后要
            有一天早晨，鲁迅上学迟到了。教书认真的寿镜吾老先生严厉地对他说：“以后要早到！”鲁迅默默地回到座位上，在那张旧书桌上刻了个“早”字，也把一个坚定的信念深深地刻在心里。从那以后，鲁迅上学再没有迟到过，而且时时早、事事早，奋斗了一生。
          </p>
        </div>
      </div>
@@ -519,9 +514,6 @@
          <li class="header-right-end"><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0 block">
            早到！”鲁迅默默地回到座位上，在那张旧书桌上刻了个“早”字，也把一个坚定的信念深深地刻在心里。从那以后，鲁迅上学再没有迟到过，而且时时早、事事早，奋斗了一生。
          </p>
          <h4 id="d015">五、信用宽容的原则</h4>
          <p>
            信用的原则即讲究信誉。诚实守信是中华民族的优秀传统美德。在社交活动中，一是守时，与人约好的会见、会谈、会议等，决不应拖延迟到；二是守约，与人约定的事一定要说到做到，所谓言必信，行必果。
@@ -723,6 +715,8 @@
              <img class="img-b" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitOne-02.png" alt=""></p>
          <div class="bk">
            <p class="bj1-qjms fl al-c">
              <span class="span-box"></span><span class="span-text">项目描述</span><span class="span-box"></span>
@@ -735,11 +729,6 @@
            <p class="bj1-qjms fl al-c">
              <span class="span-box"></span><span class="span-text">礼在身边</span><span class="span-box"></span>
            </p>
            <p class="center"><span class="cs1">曾子避席</span></p>
            <p class="fz-15">
              仲尼居，曾子侍。子曰：“先王有至德要道，以顺天下，民用和睦，上下无怨。汝知之乎？”曾子避席曰：“参不敏，何足以知之？”
            </p>
            <p class="fz-15">译文：</p>
            <p class="fz-15">
              某日，在A到B的航班上，头等舱的一名旅客向乘务员询问是否有黑巧克力，乘务员知道这次航班没有配备，但她并没有采取简单否认的方式处理，而是先询问机组成员，后来终于在副驾驶那里找到了黑巧克力并送给了旅客。后来，当乘务员了解到这名旅客一周后要乘坐该公司航班从B返回A后，主动与当天执行航班任务的头等舱乘务员联系，特意为这名旅客准备了黑巧克力。从此，这名旅客成了这家航空公司的忠实顾客。
            </p>
@@ -777,7 +766,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：1.2.1</span>
              <span>视频：民航服务意识认知</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoTwo ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1129,7 +1118,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：1.2.2</span>
              <span>视频：理解主动服务的重要性</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoThree ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1201,7 +1190,7 @@
            所以，对民航服务意识的基本要求是：在保证飞行安全的情况下，以解决旅客的实际问题、满足旅客的需求为做好服务工作的基本前提。
          </p>
          <p>
            在不违反相关飞行安全条例的基础上，我们应该将飞行中发生的服务事件或服务矛盾，以及由此产生的争议、提出的赔偿、划分的责任等问题，都放到安抚旅客情绪、提
            在不违反相关飞行安全条例的基础上，我们应该将飞行中发生的服务事件或服务矛盾，以及由此产生的争议、提出的赔偿、划分的责任等问题，都放到安抚旅客情绪、提供服务之后来解决。当然，若违反相应的安全条例和法律，应当立即请专业人士处理并解决。
          </p>
        </div>
      </div>
@@ -1220,9 +1209,6 @@
          <li class="header-right-end"><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            供服务之后来解决。当然，若违反相应的安全条例和法律，应当立即请专业人士处理并解决。
          </p>
          <p>
            民航服务人员应全心全意为旅客服务，以让旅客满意作为服务目标，实现企业的最终追求及目标，实现企业的发展。民航服务意识要求我们要信守服务承诺，用心用爱用温度服务，并乐于为旅客服务，妥善解决旅客在旅途中的问题。
          </p>
@@ -1556,6 +1542,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitOne-03.png" alt=""></p>
          <div class="bk">
            <p class="bj1-qjms fl al-c">
              <span class="span-box"></span><span class="span-text">项目描述</span><span class="span-box"></span>
@@ -1633,7 +1621,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：1.3.1</span>
              <span>视频：民航员工应具备的能力</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoFour ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1711,9 +1699,6 @@
          <p>
            工作职责：对飞机进行检查、维护和修理，排除飞机存在的安全隐患（见图1-3-4）。
          </p>
          <p>
            民用航空维修人员负责飞机的维修工作，按照维修单及时做好诊断与维修；按飞机设备保养手册和设备说明书制订保养计划建议，并按计划实施保养工作；根据库存情况提交备件采购申购表，负责备件的验收与急购备件的提交；做好日常设备的巡视检查工
          </p>
        </div>
      </div>
    </div>
@@ -1731,7 +1716,8 @@
          <li class="header-right-end"><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
          <p>
            民用航空维修人员负责飞机的维修工作，按照维修单及时做好诊断与维修；按飞机设备保养手册和设备说明书制订保养计划建议，并按计划实施保养工作；根据库存情况提交备件采购申购表，负责备件的验收与急购备件的提交；做好日常设备的巡视检查工
            作，及时发现问题，处理隐患；做好预防性保养、维护工作，减少本区域因停机工时及设备原因造成的材料报废量。
          </p>
          <p class="center openImgBox">
@@ -1894,7 +1880,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：1.3.2</span>
              <span>视频：民航员工基本能力认知</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoFive ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -2074,7 +2060,7 @@
          <p class="td-0 mt-10 mb-10"><span class="bj2">·触礼旁通·</span></p>
          <p class="center"><span class="cs1">做一名真正的倾听者</span></p>
          <p class="block">
            一架国际航班抵达成都后，有位旅客的行李出现破损。按照行规，对于此类国际航班行李事故一般是不予赔偿的，值机员小吴便向旅客细致地解释并致以歉意。但这位旅客的情绪却异常激动，阐述了此次行程中发生的所有让人不愉快的事件，并将负面情绪一并发泄出来。面对旅客劈头盖脸的发泄和数落，小吴只做了一件事，那就是认真地“倾听”——直到旅客从他的眼神中读到了真诚和共情。当旅客的情绪逐渐平息下来
            一架国际航班抵达成都后，有位旅客的行李出现破损。按照行规，对于此类国际航班行李事故一般是不予赔偿的，值机员小吴便向旅客细致地解释并致以歉意。但这位旅客的情绪却异常激动，阐述了此次行程中发生的所有让人不愉快的事件，并将负面情绪一并发泄出来。面对旅客劈头盖脸的发泄和数落，小吴只做了一件事，那就是认真地“倾听”——直到旅客从他的眼神中读到了真诚和共情。当旅客的情绪逐渐平息下来后，小吴把握时机再次委婉地向对方说明了机场事故处理的流程，并承诺会立即与航空公司代表联系。
          </p>
        </div>
      </div>
@@ -2092,9 +2078,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="block td-0">
            后，小吴把握时机再次委婉地向对方说明了机场事故处理的流程，并承诺会立即与航空公司代表联系。
          </p>
          <p class="block">
            当航空公司按照常规给出不予赔偿意见后，小吴一边委婉地向乘客转达，一边不懈地向航空公司争取。终于，小吴急旅客之所急、想旅客之所想的服务感动了航空公司，航空公司最终决定给予补偿。
          </p>
@@ -2183,7 +2166,7 @@
            <span class="cs1">川航惊魂始末 机长刘传健还原细节</span>
          </p>
          <p class="block">
            9800米，9400米，7200米，飞机下降得很快。3U8633航班的9名机组人员和119名乘客，经历了生死一刻。2018年5月14日上午，由四川航空股份有限公司承运的3U8633航班由重庆飞往拉萨。途中，飞机驾驶舱右座风挡玻璃破碎脱落。在两分钟内飞机急降2200米，且在缺氧、低温、强气流的条件下，机长刘传健驾驶飞机于7时42分成功备降
            9800米，9400米，7200米，飞机下降得很快。3U8633航班的9名机组人员和119名乘客，经历了生死一刻。2018年5月14日上午，由四川航空股份有限公司承运的3U8633航班由重庆飞往拉萨。途中，飞机驾驶舱右座风挡玻璃破碎脱落。在两分钟内飞机急降2200米，且在缺氧、低温、强气流的条件下，机长刘传健驾驶飞机于7时42分成功备降成都双流机场。刘传健救了自己，也救了机组同事和上百名乘客。尽管他一再解释这是他的本职工作，但仍有不少人将其称为“英雄”。
          </p>
        </div>
      </div>
@@ -2201,9 +2184,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="block td-0">
            成都双流机场。刘传健救了自己，也救了机组同事和上百名乘客。尽管他一再解释这是他的本职工作，但仍有不少人将其称为“英雄”。
          </p>
          <p class="block">
            那天航班乘务长毕楠，乘务员张秋奕、周彦雯、黄婷、杨婷一如往常引导乘客就座、放行李，给乘客拿毛毯，并做起飞前的安全检查。驾驶舱内，46岁的机长刘传健和副驾驶徐瑞辰也在做着起飞前的最后准备。刘传健毕业于空军第二飞行学院，在成为川航飞行员之前，他在母校担任教员。重庆至拉萨这条线，他飞了不下百次。飞机在晚点21分钟后顺利起飞。
          </p>
@@ -2290,7 +2270,7 @@
          <p class="td-0 mb-10 mt-10"><span class="bj2">·触礼旁通·</span></p>
          <p class="center"><span class="cs1">法航紧急撤离事件</span></p>
          <p class="block">
            2005年8月，法航某空客飞机的309名旅客与机组成员上演了“教科书式撤离”，两分钟内机上全部人员成功逃离当时已燃起熊熊大火的飞机，这次逃生经历成了紧急逃生的典范。当时，飞机左侧被雷电击中，飞机内外马上被黑烟笼罩，所有的电灯都熄灭了。据当时的旅客说，周围一片黑暗，紧急氧气面罩降下来。该飞机在暴风雨中滑出跑道183米后，终于停住。机上的12位机组人员非常镇静，反应也相当快捷。机长在驾驶舱中，不断地告诉所有乘客保持平静，听从指挥。其他机组人员快速地从座椅上起身，
            2005年8月，法航某空客飞机的309名旅客与机组成员上演了“教科书式撤离”，两分钟内机上全部人员成功逃离当时已燃起熊熊大火的飞机，这次逃生经历成了紧急逃生的典范。当时，飞机左侧被雷电击中，飞机内外马上被黑烟笼罩，所有的电灯都熄灭了。据当时的旅客说，周围一片黑暗，紧急氧气面罩降下来。该飞机在暴风雨中滑出跑道183米后，终于停住。机上的12位机组人员非常镇静，反应也相当快捷。机长在驾驶舱中，不断地告诉所有乘客保持平静，听从指挥。其他机组人员快速地从座椅上起身，迅速打开飞机侧面的救生门，放下滑梯，一边逐个帮助旅客撤离，一边不断地安慰每个人，使整个疏散工作平稳进行。
          </p>
        </div>
      </div>
@@ -2308,9 +2288,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="block td-0">
            迅速打开飞机侧面的救生门，放下滑梯，一边逐个帮助旅客撤离，一边不断地安慰每个人，使整个疏散工作平稳进行。
          </p>
          <p class="block">
            旅客们在他们的指挥下，没有慌乱，依次先离开座椅，再滑下滑梯。最后，乘务员和驾驶员做了完全的检查，证明所有旅客都安全撤离，没有任何遗漏，方才离开飞机。地面急救人员配合得也非常及时。飞机起火后不到一分钟，机场救护车就赶到了飞机附近。他们将受伤者送往医院，并向大雨中的旅客们提供了保暖的毯子。值勤的警察们还将跑散的旅客集中到安全地点。整项工作有条不紊地进行着。
          </p>
@@ -2326,7 +2303,7 @@
          </p>
          <h5 id="e026">（四）应急处理能力的培养需要团队协作做保障</h5>
          <p>
            当紧急情况发生时，乘务员之间形成默契，团结起来，保持思想与行动的一致性是
            当紧急情况发生时，乘务员之间形成默契，团结起来，保持思想与行动的一致性是至关重要的。这集中表现在，在航班飞行过程中乘务员应明确各自负责的岗位和职责，在日常飞行中相互协作、相互配合，形成良好的默契，从而保证紧急情况出现时，乘务员组织撤离时不出现拥挤踩踏或者影响紧急情况处置的情况，从而提高撤离效率，保障旅客的安全。
          </p>
        </div>
      </div>
@@ -2345,9 +2322,6 @@
          <li class="header-right-end"><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            至关重要的。这集中表现在，在航班飞行过程中乘务员应明确各自负责的岗位和职责，在日常飞行中相互协作、相互配合，形成良好的默契，从而保证紧急情况出现时，乘务员组织撤离时不出现拥挤踩踏或者影响紧急情况处置的情况，从而提高撤离效率，保障旅客的安全。
          </p>
          <p class="td-0"><span class="bj2">·触礼旁通·</span></p>
          <p class="center"><span class="cs1">团队精神</span></p>
          <p class="block">
@@ -2367,7 +2341,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：1.3.3</span>
              <span>视频：民航员工服务能力情景展现</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoSix ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -2386,7 +2360,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：1.3.4</span>
              <span>视频：民航员工服务意识情景展现</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoSeven ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -2925,7 +2899,7 @@
          </p>
          <p class="block">3.完成动作后睁开眼，摊开纸看看是否相同。</p>
          <p class="block">
            4.过程中学员如有发问需给予响应，但学员如保持沉默，则在学员完成每一个动作
            4.过程中学员如有发问需给予响应，但学员如保持沉默，则在学员完成每一个动作后继续下指令。
          </p>
        </div>
      </div>
@@ -2944,7 +2918,6 @@
          <li class="header-right-end"><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="block td-0">后继续下指令。</p>
          <p class="block">
            5.也可采取不允许发问的方式进行第一次游戏活动，活动后进行讨论，然后再以同样方式再做一次，完成后睁开眼，摊开纸看看是否相同。
          </p>
@@ -3425,7 +3398,7 @@
          "",
          "视频",
          "bits",
          "视频：1.1.1"
          "视频：礼仪认知"
        );
        this.chapterData.isCollectVideoOne = !this.chapterData.isCollectVideoOne;
      } else if (e == "video-03") {
@@ -3435,7 +3408,7 @@
          "",
          "视频",
          "bits",
          "视频：1.2.1"
          "视频：民航服务意识认知"
        );
        this.chapterData.isCollectVideoTwo = !this.chapterData.isCollectVideoTwo;
      } else if (e == "video-04") {
@@ -3445,7 +3418,7 @@
          "",
          "视频",
          "bits",
          "视频：1.2.2"
          "视频：理解主动服务的重要性"
        );
        this.chapterData.isCollectVideoThree = !this.chapterData.isCollectVideoThree;
      } else if (e == "video-05") {
@@ -3455,7 +3428,7 @@
          "",
          "视频",
          "bits",
          "视频：1.3.1"
          "视频：民航员工应具备的能力"
        );
        this.chapterData.isCollectVideoFour = !this.chapterData.isCollectVideoFour;
      } else if (e == "video-06") {
@@ -3465,7 +3438,7 @@
          "",
          "视频",
          "bits",
          "视频：1.3.2"
          "视频：民航员工基本能力认知"
        );
        this.chapterData.isCollectVideoFive = !this.chapterData.isCollectVideoFive;
      } else if (e == "video-07") {
@@ -3475,7 +3448,7 @@
          "",
          "视频",
          "bits",
          "视频：1.3.3"
          "视频：民航员工服务能力情景展现"
        );
        this.chapterData.isCollectVideoSix = !this.chapterData.isCollectVideoSix;
      } else if (e == "video-08") {
@@ -3485,7 +3458,7 @@
          "",
          "视频",
          "bits",
          "视频：1.3.4"
          "视频：民航员工服务意识情景展现"
        );
        this.chapterData.isCollectVideoSeven = !this.chapterData.isCollectVideoSeven;
      }

 src/books/aviationEtiquette/view/components/chapter003.vue

@@ -17,6 +17,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitThree-01.png" alt=""></p>
          <div class="bk">
            <p class="bj1-qjms fl al-c">
              <span class="span-box"></span><span class="span-text">项目描述</span><span class="span-box"></span>
@@ -47,7 +49,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.1.1</span>
              <span>视频：民航五种沟通风格</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -66,7 +68,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.1.2</span>
              <span>视频：客舱服务沟通--有效沟通</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoOne ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -85,7 +87,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.1.2</span>
              <span>视频：客舱服务沟通--无效沟通</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoTwo ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -131,7 +133,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.1.4</span>
              <span>视频：初次乘机旅客登机服务流程话术</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoThree ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -163,7 +165,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.1.5</span>
              <span>视频：老年旅客服务沟通话术</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoFour ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -205,11 +207,11 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.1.6</span>
              <span>视频：旅客挑剔时的服务沟通话术</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoFive ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == 'ff80be5c2badeef45574d9d5fb884b92'
                  (item) => item.id == '9c6c01fac88c9dda705bdfd05df3b0ec'
                ) > -1
                  ? collectCheck
                  : collectImg
@@ -231,7 +233,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.1.7</span>
              <span>视频：旅客错过送餐诉求处理话术演示</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoSix ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -255,10 +257,6 @@
          <p>
            一个好的民航服务人员一定是一个可以包容旅客“过失”的人。旅客作为相对的“自由人”，可以在法律法规允许的范围内提出自己的需求，宣泄个人的情绪。有时，这些需求和情绪可能超出普通人的心理承受范围，给别人带来伤害。而民航服务人员必须能够包容这些言行，要具有超过普通人的对伤害的接受度——这就考验着民航服务人员的包容心。
          </p>
          <h5 id="e078">（四）同情心</h5>
          <p>
            同情心就是当他人有困难或遭到不幸时，自己的内心世界产生的一种不好受、怜悯，进而想在道义上、方法上或物质上帮助他人解决困难的内心感受，是感人之所感，甚至是人与人之间的一种互相的“心灵感应”。如果把爱心比喻成宽广的大海，同情心就是那海面上一朵朵美丽的浪花，蔚蓝的海面令人平静，而洁白的浪花使人激动。服务
          </p>
        </div>
      </div>
    </div>
@@ -275,8 +273,9 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            工作面对的旅客来自天南海北，他们有着不同的背景和经历，当他们聚集在客舱这个特殊的空间里，会有各种不同的心理感受。一般来说，初次乘机的旅客希望得到民航服务人员不动声色、及时的指点来化解紧张的情绪和茫然的感觉；生病的旅客需要特意的关照和问候来克服不安、缓解病痛；老年旅客需要及时的帮助以避免因行动不便造成的困难和尴尬……富有同情心的民航服务人员应从旅客的举止言谈中敏锐地察觉到不同旅客的困难和需求，从而及时提供细心的、周到的、有针对性的服务。在服务实践中，有很多例子证明：富有同情心的民航服务人员能够很好地展示服务的魅力，从而使服务工作达到令人“动心”的效果。
          <h5 id="e078">（四）同情心</h5>
          <p>
            同情心就是当他人有困难或遭到不幸时，自己的内心世界产生的一种不好受、怜悯，进而想在道义上、方法上或物质上帮助他人解决困难的内心感受，是感人之所感，甚至是人与人之间的一种互相的“心灵感应”。如果把爱心比喻成宽广的大海，同情心就是那海面上一朵朵美丽的浪花，蔚蓝的海面令人平静，而洁白的浪花使人激动。服务工作面对的旅客来自天南海北，他们有着不同的背景和经历，当他们聚集在客舱这个特殊的空间里，会有各种不同的心理感受。一般来说，初次乘机的旅客希望得到民航服务人员不动声色、及时的指点来化解紧张的情绪和茫然的感觉；生病的旅客需要特意的关照和问候来克服不安、缓解病痛；老年旅客需要及时的帮助以避免因行动不便造成的困难和尴尬……富有同情心的民航服务人员应从旅客的举止言谈中敏锐地察觉到不同旅客的困难和需求，从而及时提供细心的、周到的、有针对性的服务。在服务实践中，有很多例子证明：富有同情心的民航服务人员能够很好地展示服务的魅力，从而使服务工作达到令人“动心”的效果。
          </p>
          <h5 id="e079">（五）耐心</h5>
          <p>
@@ -301,7 +300,7 @@
          </p>
          <h6 id="f027">4.征询语</h6>
          <p>
            征询语是在服务过程中就某件事情的发展走向或者对某事物的选择向旅客进行征询
            征询语是在服务过程中就某件事情的发展走向或者对某事物的选择向旅客进行征询而采用的礼貌用语。例如，在向旅客提供帮助与服务时常常使用“请问您需要帮助吗”“您好，能为您做点什么吗”“您好，请问您需要哪种饮料”“请问您需要小毛毯吗”。
          </p>
        </div>
      </div>
@@ -318,9 +317,6 @@
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            而采用的礼貌用语。例如，在向旅客提供帮助与服务时常常使用“请问您需要帮助吗”“您好，能为您做点什么吗”“您好，请问您需要哪种饮料”“请问您需要小毛毯吗”。
          </p>
          <h6 id="f028">5.请托语</h6>
          <p>
            请托语通常指的是在请求他人帮忙或是托付他人代劳时使用的礼貌用语。在服务过程中如需请求旅客帮忙，应使用礼貌用语，说话前都要加上一个“请”字，或者礼貌地说“麻烦您”“拜托您”。例如，“先生您好，飞机马上就要起飞了，麻烦您将座椅靠背调直”“您好，飞机马上起飞了，请将手机关机或调整为飞行模式”“您好女士，请将小桌板收起”。使用此类用语时需要注意语气应柔和不能生硬，更不能用命令式的口吻来说。
@@ -455,7 +451,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.1.8</span>
              <span>视频：民航职场沟通认知</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoSeven ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -493,9 +489,6 @@
                @change="setBookQuestion"></textarea>
            </div>
          </div>
          <p>
            精通“人际沟通技巧”不是为了把别人踩在脚下，而是为了减少工作中的阻力。职场是一个大舞台，纷繁复杂。一个人在社会上难免会与人产生矛盾，难免会出现这样或
          </p>
        </div>
      </div>
    </div>
@@ -512,8 +505,8 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            那样的不愉快。有了矛盾怎么办？出现了问题怎么处理？这就需要我们多沟通，多交流。沟通是一盏指明灯，可以随时校正我们航行的方向。正是因为有了沟通，语言才显得那么美丽飞扬。
          <p>
            精通“人际沟通技巧”不是为了把别人踩在脚下，而是为了减少工作中的阻力。职场是一个大舞台，纷繁复杂。一个人在社会上难免会与人产生矛盾，难免会出现这样或那样的不愉快。有了矛盾怎么办？出现了问题怎么处理？这就需要我们多沟通，多交流。沟通是一盏指明灯，可以随时校正我们航行的方向。正是因为有了沟通，语言才显得那么美丽飞扬。
          </p>
          <h4 id="d076">二、实训案例二 公司奖励事件</h4>
          <p>
@@ -1085,7 +1078,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>

          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitThree-02.png" alt=""></p>
          <div class="bk">
            <p class="bj1-qjms fl al-c">
              <span class="span-box"></span><span class="span-text">项目描述</span><span class="span-box"></span>
@@ -1157,7 +1151,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.2.1</span>
              <span>视频：民航旅客投诉应对技巧</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoEight ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1187,7 +1181,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.2.2</span>
              <span>视频：飞机故障导致投诉的处理话术</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoNine ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1211,9 +1205,6 @@
          <p class="block">
            2018年6月，某航空公司从内蒙古飞往北京的航班因控制管制原因延误了8小时，航班落地后机上19名旅客因不满而拒绝下飞机。
          </p>
          <p class="block">
            通过了解后得知，在8小时的等待过程中，旅客产生了负面情绪，但地面工作人员
          </p>
        </div>
      </div>
    </div>
@@ -1229,8 +1220,8 @@
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="block td-0">
            没有给予旅客应有的照顾和安慰，导致在通知登机时一些旅客提出先赔偿再登机。然而，地面工作人员却说：“你们爱上不上，不上拉倒！行李随机带走，带到哪里是哪里。”
          <p class="block">
            通过了解后得知，在8小时的等待过程中，旅客产生了负面情绪，但地面工作人员没有给予旅客应有的照顾和安慰，导致在通知登机时一些旅客提出先赔偿再登机。然而，地面工作人员却说：“你们爱上不上，不上拉倒！行李随机带走，带到哪里是哪里。”
          </p>
          <p class="block">
            这一系列的做法导致19名旅客集体拒绝下机并向该航空公司提出投诉和经济赔偿。
@@ -1569,7 +1560,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：3.2.3</span>
              <span>视频：旅客投诉原因的认知</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoTen ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1918,7 +1909,7 @@
        "ada8ecd6349bf5d0c6ee2b6642e9effc"
      );
      this.videoPathSix = await getResourcePath(
        "ff80be5c2badeef45574d9d5fb884b92"
        "9c6c01fac88c9dda705bdfd05df3b0ec"
      );
      this.videoPathSeven = await getResourcePath(
        "81574f24a780ca2ed16b023eb795ce04"
@@ -2062,22 +2053,22 @@
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
      } else if (e == "video-02") {
        this.handleCollectResource(
          "dfa7f3d64168acde32e4ca07a9001e79",
          "dfa7f3d64168acde32e4ca07a9001e79",
          "6f3a3b8b1b5eb8b942f57b7c6ef20ff7",
          "6f3a3b8b1b5eb8b942f57b7c6ef20ff7",
          "",
          "视频",
          "bits",
          "视频：1.1.1"
          "视频：民航五种沟通风格"
        );
        this.chapterData.isCollectVideoOne = !this.chapterData.isCollectVideoOne;
      } else if (e == "video-03") {
        this.handleCollectResource(
          "602e257498cd61657b759edd5be0221d",
          "602e257498cd61657b759edd5be0221d",
          "45d4dc432a32a81d20421fa6b8ebe50b",
          "45d4dc432a32a81d20421fa6b8ebe50b",
          "",
          "视频",
          "bits",
          "视频：1.2.1"
          "视频：客舱服务沟通--有效沟通"
        );
        this.chapterData.isCollectVideoTwo = !this.chapterData.isCollectVideoTwo;
      } else if (e == "video-04") {
@@ -2087,47 +2078,77 @@
          "",
          "视频",
          "bits",
          "视频：1.2.2"
          "视频：客舱服务沟通--无效沟通"
        );
        this.chapterData.isCollectVideoThree = !this.chapterData.isCollectVideoThree;
      } else if (e == "video-05") {
        this.handleCollectResource(
          "3b4d6a336fad79e9c4f137e142c26f0b",
          "3b4d6a336fad79e9c4f137e142c26f0b",
          "05d9e675723ecfe512ae2aba64ba08fa",
          "05d9e675723ecfe512ae2aba64ba08fa",
          "",
          "视频",
          "bits",
          "视频：1.3.1"
          "视频：老年旅客服务沟通话术"
        );
        this.chapterData.isCollectVideoFour = !this.chapterData.isCollectVideoFour;
      } else if (e == "video-06") {
        this.handleCollectResource(
          "2b112927d0029591bee2ad5de73e3e2a",
          "2b112927d0029591bee2ad5de73e3e2a",
          "9c6c01fac88c9dda705bdfd05df3b0ec",
          "9c6c01fac88c9dda705bdfd05df3b0ec",
          "",
          "视频",
          "bits",
          "视频：1.3.2"
          "视频：旅客挑剔时的服务沟通话术"
        );
        this.chapterData.isCollectVideoFive = !this.chapterData.isCollectVideoFive;
      } else if (e == "video-07") {
        this.handleCollectResource(
          "c4d252f413d11539fd11db913c073e5b",
          "c4d252f413d11539fd11db913c073e5b",
          "81574f24a780ca2ed16b023eb795ce04",
          "81574f24a780ca2ed16b023eb795ce04",
          "",
          "视频",
          "bits",
          "视频：1.3.3"
          "视频：旅客错过送餐诉求处理话术演示"
        );
        this.chapterData.isCollectVideoSix = !this.chapterData.isCollectVideoSix;
      } else if (e == "video-08") {
        this.handleCollectResource(
          "2b112927d0029591bee2ad5de73e3e2a",
          "2b112927d0029591bee2ad5de73e3e2a",
          "65f1f06c69581442b53aefac9da33353",
          "65f1f06c69581442b53aefac9da33353",
          "",
          "视频",
          "bits",
          "视频：1.3.4"
          "视频：民航职场沟通认知"
        );
        this.chapterData.isCollectVideoSeven = !this.chapterData.isCollectVideoSeven;
      }else if (e == "video-09") {
        this.handleCollectResource(
          "1f04f081f61aa13373daa7b8b92cc750",
          "1f04f081f61aa13373daa7b8b92cc750",
          "",
          "视频",
          "bits",
          "视频：民航旅客投诉应对技巧"
        );
        this.chapterData.isCollectVideoSeven = !this.chapterData.isCollectVideoSeven;
      }else if (e == "video-10") {
        this.handleCollectResource(
          "222a20d4bcb6805836684e0d96752ae3",
          "222a20d4bcb6805836684e0d96752ae3",
          "",
          "视频",
          "bits",
          "视频：飞机故障导致投诉的处理话术"
        );
        this.chapterData.isCollectVideoSeven = !this.chapterData.isCollectVideoSeven;
      }else if (e == "video-11") {
        this.handleCollectResource(
          "b0ff55db0549ccb2f6c1b332798aa8d3",
          "b0ff55db0549ccb2f6c1b332798aa8d3",
          "",
          "视频",
          "bits",
          "视频：旅客投诉原因的认知"
        );
        this.chapterData.isCollectVideoSeven = !this.chapterData.isCollectVideoSeven;
      }

 src/books/aviationEtiquette/view/components/chapter004.vue

@@ -17,6 +17,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitFour-01.png" alt=""></p>
          <div class="bk">
            <p class="bj1-qjms fl al-c">
              <span class="span-box"></span><span class="span-text">项目描述</span><span class="span-box"></span>
@@ -84,7 +86,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.1.1</span>
              <span>视频：贵宾厅服务概述</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -103,7 +105,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.1.2</span>
              <span>视频：候机楼值机服务概述</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo01 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -189,7 +191,7 @@
            （3）应答旅客的提问或征询时，语言应简洁、准确，语气婉转，音量适中，不能词不达意，应从容不迫，按先来后到的次序，分轻重缓急，一一回答，不能只顾一位旅客，而忽略了其他旅客的存在。
          </p>
          <p>
            （4）对于旅客提出的无理要求，需要沉住气，婉言拒绝，或巧妙回答，做到有修养、有风度、不失礼；对于旅客的批评指责要包容和谦虚。如果问题确实是我们的不当或失职导致的，应立刻向乘客赔礼道歉，对乘客的关注表示感谢，立即报告或妥善处理。如果旅客提出的批评指责是因为误会和误解，我们也要第一时间向旅客表达歉意，
            （4）对于旅客提出的无理要求，需要沉住气，婉言拒绝，或巧妙回答，做到有修养、有风度、不失礼；对于旅客的批评指责要包容和谦虚。如果问题确实是我们的不当或失职导致的，应立刻向乘客赔礼道歉，对乘客的关注表示感谢，立即报告或妥善处理。如果旅客提出的批评指责是因为误会和误解，我们也要第一时间向旅客表达歉意，安抚旅客情绪。
          </p>
        </div>
      </div>
@@ -208,7 +210,6 @@
          <li class="header-right-end" style=""><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">安抚旅客情绪。</p>
          <p>
            （5）遇到解决不了的问题时，应先向旅客表达歉意，并引导旅客到能提供有效服务的部门或岗位，禁止说一些否定句。
          </p>
@@ -319,7 +320,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.1.3</span>
              <span>视频：机场广播通知延误</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo02 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -402,7 +403,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.1.4</span>
              <span>视频：旅客丢失物品的服务</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo03 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -421,7 +422,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.1.5</span>
              <span>视频：候机楼员工与旅客冲突事件解决</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo04 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -564,7 +565,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.1.6</span>
              <span>视频：候机楼服务礼仪实训</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo05 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -576,10 +577,6 @@
              </el-tooltip>
            </p>
          </div>
          <h4 id="d090">一、候机楼值机服务概述</h4>
          <p>
            值机服务是指航空公司为旅客办理乘机手续的全流程服务，基本流程包括：迎接旅
          </p>
        </div>
      </div>
    </div>
@@ -597,8 +594,9 @@
          <li class="header-right-end" style=""><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            客、查验旅客客票及证件、为旅客安排座位、收运托运旅客行李、和旅客告别。每一个流程，值机人员都应遵守相应的礼仪规范，为旅客提供满意的服务，以提高民航企业的形象，进而促进民航企业的发展。
          <h4 id="d090">一、候机楼值机服务概述</h4>
          <p>
            值机服务是指航空公司为旅客办理乘机手续的全流程服务，基本流程包括：迎接旅客、查验旅客客票及证件、为旅客安排座位、收运托运旅客行李、和旅客告别。每一个流程，值机人员都应遵守相应的礼仪规范，为旅客提供满意的服务，以提高民航企业的形象，进而促进民航企业的发展。
          </p>
          <p class="td-0 mb-10 mt-10"><span class="bj2">·触礼旁通·</span></p>
          <p class="block">
@@ -690,7 +688,7 @@
            </div>
          </div>
          <p>
            在通常情况下，值机员为旅客安排座位遵循以下几个原则：如果是同行旅客，应尽量安排在邻近的座位上；如果遇到孕妇等需要特殊照顾的旅客，一般安排在靠近客舱服务员或者方便出入的相对宽敞的座位上，但是不能安排在紧急出口；如果是航司的重要旅客，一般会安排在靠前的座位上，或者在公司允许条件下为其进行升舱服务；如果机
            在通常情况下，值机员为旅客安排座位遵循以下几个原则：如果是同行旅客，应尽量安排在邻近的座位上；如果遇到孕妇等需要特殊照顾的旅客，一般安排在靠近客舱服务员或者方便出入的相对宽敞的座位上，但是不能安排在紧急出口；如果是航司的重要旅客，一般会安排在靠前的座位上，或者在公司允许条件下为其进行升舱服务；如果机上有更加特殊的旅客，如公安机关需要押送的犯人旅客，不能安排在靠近紧急出口的座位上，也不能安排在靠窗的座位上，要保证公安人员的座位在犯人旅客座位的旁边。
          </p>
        </div>
      </div>
@@ -709,9 +707,6 @@
          <li class="header-right-end" style=""><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            上有更加特殊的旅客，如公安机关需要押送的犯人旅客，不能安排在靠近紧急出口的座位上，也不能安排在靠窗的座位上，要保证公安人员的座位在犯人旅客座位的旁边。
          </p>
          <h5 id="e104">（四）收运托运旅客行李礼仪</h5>
          <p>
            值机人员在给旅客办理收运、托运行李时，如果旅客没有主动说有行李需要托运，值机人员在为旅客打印好登机牌后，应主动询问旅客是否有托运的行李。如果旅客有行李要托运，收运旅客行李时，值机人员需要注意以下事项。
@@ -825,9 +820,49 @@
              </p>
            </div>
            <div class="bj3 fz-15">
              <p>那么在引导旅客进行自助值机时，我们应当使用什么样的服务手势呢？</p>
              <textarea v-model="questionData.askAbout.twentyEight" placeholder="请输入内容" rows="4" class="fz-15 textarea-box"
                @change="setBookQuestion"></textarea>
              <p class="fl al-c">那么在引导旅客进行自助值机时，我们应当使用什么样的服务手势呢？
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="30" viewBox="0 0 20.501 20.501" class="c-p"
                  title="查看解析" @click="showAnswerOne = !showAnswerOne">
                  <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>
              </p>
              <textarea v-model="questionData.askAbout.twentyEight" placeholder="请输入内容" rows="4"
                class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
              <div class="event-header-text-bc" style="width: 90%;margin-left: 2em; padding: 0 10px;"
                v-if="showAnswerOne">
                <p>
                  解析：自助值机引导时，服务手势是非常重要的肢体语言。服务员应当五指并拢，向旅客需要点击的地方示意，避免用手指指指点点，使旅客产生“被命令”的不被尊重的感觉。
                </p>
                <p>
                  掌握自助值机服务常用的服务用语也是优质服务的小技巧哦
                </p>
                <p>
                  1.您好，请到这边的*号机器值机。
                </p>
                <p>
                  2.请放心，我会协助您的值机工作。
                </p>
                <p>
                  3.请将身份证正面朝上放到这里的区域。
                </p>
                <p>
                  4.请问您对座位有什么要求？这里是目前您可以选择的座位图，您看看有您喜欢的吗？
                </p>
                <p>
                  5.这个座位区域是指……您看是否愿意选择这个座位。
                </p>
                <p>
                  6.非常抱歉目前没有您最喜欢的座位，如果要选择紧急通道座位，您可以去人工值机柜台，请从这里往前直行，到20号柜台。
                </p>
                <p>
                  7.不用着急，我们再试一次。
                </p>
                <p>
                  8.请拿好您的登机牌，祝您旅途愉快。
                </p>
              </div>
            </div>
          </div>
          <p class="td-0 mb-10 mt-10"><span class="bj2">·礼之实践·</span></p>
@@ -865,7 +900,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.1.7</span>
              <span>视频：贵宾厅服务全流程</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo06 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -891,7 +926,7 @@
            机场贵宾候机厅是贵宾离港时相对停留较长的区域，也是服务人员与贵宾接触时间较长、对服务个性化要求相对更高的区域。因此，服务人员需掌握独特的礼仪规范要求。贵宾厅服务人员的基本规范包括以下几方面。
          </p>
          <p>
            （1）“三轻”服务——说话轻、动作轻、走路轻。巡视时需脚步轻缓，使用无声
            （1）“三轻”服务——说话轻、动作轻、走路轻。巡视时需脚步轻缓，使用无声设备。对休息室内音量过大或行为不雅的旅客进行必要的提醒或有效干预。
          </p>
        </div>
      </div>
@@ -910,9 +945,6 @@
          <li class="header-right-end" style=""><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            设备。对休息室内音量过大或行为不雅的旅客进行必要的提醒或有效干预。
          </p>
          <p>
            （2）“循环式不间断服务”——在不打扰旅客的基础上，每15分钟巡视一次旅客休息区域。
          </p>
@@ -954,7 +986,7 @@
          </p>
          <h5 id="e107">（二）电梯引导礼仪</h5>
          <p>
            （1）遵循先进后出原则。在引导旅客乘坐无人驾驶的电梯时，服务人员应先在电
            （1）遵循先进后出原则。在引导旅客乘坐无人驾驶的电梯时，服务人员应先在电梯门前按呼梯按钮，当电梯门打开后，服务人员先进入电梯，站在按操作键的地方，以便服务旅客。进入电梯后一手扶住电梯门一侧或者一手按开电梯门按钮（防止夹到或夹伤旅客），请旅客进入电梯。
          </p>
        </div>
      </div>
@@ -972,9 +1004,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            梯门前按呼梯按钮，当电梯门打开后，服务人员先进入电梯，站在按操作键的地方，以便服务旅客。进入电梯后一手扶住电梯门一侧或者一手按开电梯门按钮（防止夹到或夹伤旅客），请旅客进入电梯。
          </p>
          <p>
            出电梯时，应让旅客先出电梯，服务人员应一手做出请的动作，并按住开门按钮。等旅客走出电梯后，服务人员应立刻走出电梯，并引导旅客行进的方向。
          </p>
@@ -1000,7 +1029,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.1.8</span>
              <span>视频：贵宾厅茶水服务全流程</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo07 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1219,6 +1248,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitFour-02.png" alt=""></p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathNine" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
@@ -1226,7 +1257,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.2.1</span>
              <span>视频：安检服务礼仪概述</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo08 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1302,7 +1333,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.2.2</span>
              <span>视频：人身安全检查礼仪操作规范</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo09 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1382,7 +1413,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.2.3</span>
              <span>视频：人身安全检查服务用语规范</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo10 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1446,7 +1477,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.2.4</span>
              <span>视频：安检工作人员服务态度情景展示</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo11 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1654,6 +1685,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitFour-03.png" alt=""></p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathThirteen" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
@@ -1661,7 +1694,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.3.1</span>
              <span>视频：空勤人员着装情景展示</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo12 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1721,7 +1754,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.3.2</span>
              <span>视频：航前准备会阶段礼仪实训</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo13 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1757,7 +1790,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.3.3</span>
              <span>视频：空勤人员着装礼仪规范</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo14 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1776,7 +1809,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.3.4</span>
              <span>视频：空勤女士着装教学视频</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo15 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1795,7 +1828,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.3.5</span>
              <span>视频：空勤男士着装教学视频</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo16 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1835,10 +1868,6 @@
          <p>
            保持制服的干净、整洁、挺括，是制服保养的基本要求。每个航班结束后，应干洗制服；每次执行航班任务前，应熨烫制服。要养成检查制服有无损坏、污渍、掉扣、开线等情况的习惯，若发现拉链损坏、扣子掉落等问题，应立即修理补救。
          </p>
          <h5 id="e122">（五）管理和使用的规范</h5>
          <p>
            制服只允许在执行航班任务时穿，如果因出席重大活动或者在特殊场合需要穿着制
          </p>
        </div>
      </div>
    </div>
@@ -1856,8 +1885,9 @@
          <li class="header-right-end" style=""><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            服时，也应按要求穿着制服，除此之外的其他时间、场合不能穿着制服，更不允许将制服借给他人使用。
          <h5 id="e122">（五）管理和使用的规范</h5>
          <p>
            制服只允许在执行航班任务时穿，如果因出席重大活动或者在特殊场合需要穿着制服时，也应按要求穿着制服，除此之外的其他时间、场合不能穿着制服，更不允许将制服借给他人使用。
          </p>
          <h4 id="d102">二、准备会礼仪规范</h4>
          <div class="video-box">
@@ -1867,7 +1897,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.3.6</span>
              <span>视频：航前准备会全流程</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo17 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1908,7 +1938,7 @@
          </p>
          <p class="td-0 mb-10 mt-10"><span class="bj2">·触礼旁通·</span></p>
          <p class="block">
            号位级别：在执行航班任务时，每个乘务员都有不同的号位，不同的号位代表不同的岗位职责区域，所以是不存在重复的号位的。分号位是为了让大家分工更加明确，从而能够更好地完成空中服务和安全保障工作。不同的机型，不同的号位职责也是不尽相
            号位级别：在执行航班任务时，每个乘务员都有不同的号位，不同的号位代表不同的岗位职责区域，所以是不存在重复的号位的。分号位是为了让大家分工更加明确，从而能够更好地完成空中服务和安全保障工作。不同的机型，不同的号位职责也是不尽相同的，规定相当细致复杂。不同号位的基本职责：负责几排到几排的服务，分发报纸，紧急脱离门、窗的操作，火情处置等。
          </p>
        </div>
      </div>
@@ -1926,9 +1956,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0 block">
            同的，规定相当细致复杂。不同号位的基本职责：负责几排到几排的服务，分发报纸，紧急脱离门、窗的操作，火情处置等。
          </p>
          <h5 id="e126">（四）会议的礼仪规范</h5>
          <p>
            航前准备会通常包括“客舱服务说明”“客舱安全相关重点工作信息说明”“空防安全工作内容”等。“客舱服务说明”和“客舱安全相关重点工作信息说明”一般由会议主持人负责讲解，“空防安全工作内容”一般由安全员负责讲解。
@@ -2018,7 +2045,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.3.7</span>
              <span>视频：空勤人员迎客礼仪规范</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo18 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -2037,7 +2064,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.3.8</span>
              <span>视频：空勤人员客舱迎客流程</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo19 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -2056,7 +2083,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：4.3.9</span>
              <span>视频：空勤人员服务用语规范</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo20 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -2103,10 +2130,6 @@
          <p>
            （3）迎客时女乘务员采取“前腹式，丁字步站姿”，男乘务员采取“前腹式，平行步站姿”。
          </p>
          <h5 id="e129">（三）迎客的手势规范</h5>
          <p>
            迎客时要一直保持微笑，并耐心为旅客引导座位或协助安放行李。乘务员应双手接
          </p>
        </div>
      </div>
    </div>
@@ -2123,8 +2146,9 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            过旅客登机牌，并且手指并拢，手心朝上与水平面呈45°；拇指与食指轻拿登机牌边缘，迅速查看信息后交还旅客，同时根据旅客座位距离的远近，采用高、中、低位手势指引。
          <h5 id="e129">（三）迎客的手势规范</h5>
          <p>
            迎客时要一直保持微笑，并耐心为旅客引导座位或协助安放行李。乘务员应双手接过旅客登机牌，并且手指并拢，手心朝上与水平面呈45°；拇指与食指轻拿登机牌边缘，迅速查看信息后交还旅客，同时根据旅客座位距离的远近，采用高、中、低位手势指引。
          </p>
          <h5 id="e130">（四）行礼的规范</h5>
          <p>
@@ -2211,10 +2235,6 @@
          <p>
            收物品的时候应该先收过道旅客的物品，后收靠窗旅客的物品，做到先外后里。收旅客的饮料杯时要用托盘，收餐盘则必须使用餐车收取。收取时都要在托盘或者餐车上由里向外摆放，餐盒垒在一起时，最多不超过5个。
          </p>
          <h6 id="f051">7.推拉的礼仪规范</h6>
          <p>
            推餐车时，双手应扶在餐车上方左右两侧，双手略用力推动餐车，但不可用力过
          </p>
        </div>
      </div>
    </div>
@@ -2231,8 +2251,9 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            大、过快，以保持餐车上的物品平稳，注意不要撞到旅客的手脚和座椅扶手。
          <h6 id="f051">7.推拉的礼仪规范</h6>
          <p>
            推餐车时，双手应扶在餐车上方左右两侧，双手略用力推动餐车，但不可用力过大、过快，以保持餐车上的物品平稳，注意不要撞到旅客的手脚和座椅扶手。
          </p>
          <h5 id="e134">（二）餐饮服务语言的礼仪规范</h5>
          <p>
@@ -2265,10 +2286,6 @@
          <p>
            在客舱服务中，民航客舱乘务员会与不同旅客打交道。采用合适的语言技巧，掌握规范的服务话术，可以提升沟通效率，提升服务品质。
          </p>
          <h5 id="e135">（一）对特殊旅客的称呼规范</h5>
          <p>
            对男性旅客我们称呼为“先生”，对女性旅客我们称呼为“女士”。在航班上乘务
          </p>
        </div>
      </div>
    </div>
@@ -2286,8 +2303,9 @@
          <li class="header-right-end" style=""><br /></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            员会提前获得一些重要旅客乘机的信息，对这类旅客的称呼要采用其最大的职务，如“首长您好”“处长您好”。服务商务舱的旅客时则要采用姓氏与职位相结合的尊称，如“李总您好”“王董您好”，在不确认旅客职位的情况下，可采用姓氏与性别相结合的方法，如“张先生您好”“王女士您好”。
          <h5 id="e135">（一）对特殊旅客的称呼规范</h5>
          <p>
            对男性旅客我们称呼为“先生”，对女性旅客我们称呼为“女士”。在航班上乘务员会提前获得一些重要旅客乘机的信息，对这类旅客的称呼要采用其最大的职务，如“首长您好”“处长您好”。服务商务舱的旅客时则要采用姓氏与职位相结合的尊称，如“李总您好”“王董您好”，在不确认旅客职位的情况下，可采用姓氏与性别相结合的方法，如“张先生您好”“王女士您好”。
          </p>
          <h5 id="e136">（二）向要客介绍时的规范</h5>
          <p>
@@ -2329,7 +2347,7 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="block td-0">
          <p class="block">
            表达技巧：不恰当地运用沟通技巧，会影响有效沟通，如改变话题，给旅客一种不愿与之沟通的感觉；主观判断或匆忙下结论常常会使沟通中断；虚假、不恰当的安慰，针对性不强的解释会给旅客一种敷衍了事、不负责的感觉。
          </p>
          <p class="block">个人因素：个人表达能力不足时会产生沟通障碍。</p>
@@ -2572,6 +2590,7 @@
      videoPathNineteen: "",
      videoPathTwenty: "",
      collectResourceList: [],
      showAnswerOne: false,
      questionData: {
        isComplete: false,
        askAbout: {
@@ -2849,7 +2868,7 @@
          "",
          "视频",
          "bits",
          "视频：4.1.1"
          "视频：贵宾厅服务概述"
        );
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
      } else if (e == "video-02") {
@@ -2859,7 +2878,7 @@
          "",
          "视频",
          "bits",
          "视频：4.1.2"
          "视频：候机楼值机服务概述"
        );
        this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01;
      } else if (e == "video-03") {
@@ -2869,7 +2888,7 @@
          "",
          "视频",
          "bits",
          "视频：4.1.3"
          "视频：机场广播通知延误"
        );
        this.chapterData.isCollectVideo02 = !this.chapterData.isCollectVideo02;
      }
@@ -2880,7 +2899,7 @@
          "",
          "视频",
          "bits",
          "视频：4.1.4"
          "视频：旅客丢失物品的服务"
        );
        this.chapterData.isCollectVideo03 = !this.chapterData.isCollectVideo03;
      }
@@ -2891,7 +2910,7 @@
          "",
          "视频",
          "bits",
          "视频：4.1.5"
          "视频：候机楼员工与旅客冲突事件解决"
        );
        this.chapterData.isCollectVideo04 = !this.chapterData.isCollectVideo04;
      } else if (e == "video-06") {
@@ -2901,7 +2920,7 @@
          "",
          "视频",
          "bits",
          "视频：4.1.6"
          "视频：候机楼服务礼仪实训"
        );
        this.chapterData.isCollectVideo05 = !this.chapterData.isCollectVideo05;
      } else if (e == "video-07") {
@@ -2911,7 +2930,7 @@
          "",
          "视频",
          "bits",
          "视频：4.1.7"
          "视频：贵宾厅服务全流程"
        );
        this.chapterData.isCollectVideo06 = !this.chapterData.isCollectVideo06;
      } else if (e == "video-08") {
@@ -2921,7 +2940,7 @@
          "",
          "视频",
          "bits",
          "视频：4.1.8"
          "视频：贵宾厅茶水服务全流程"
        );
        this.chapterData.isCollectVideo07 = !this.chapterData.isCollectVideo07;
      } else if (e == "video-09") {
@@ -2931,7 +2950,7 @@
          "",
          "视频",
          "bits",
          "视频：4.2.1"
          "视频：安检服务礼仪概述"
        );
        this.chapterData.isCollectVideo08 = !this.chapterData.isCollectVideo08;
      } else if (e == "video-10") {
@@ -2941,7 +2960,7 @@
          "",
          "视频",
          "bits",
          "视频：4.2.2"
          "视频：人身安全检查礼仪操作规范"
        );
        this.chapterData.isCollectVideo09 = !this.chapterData.isCollectVideo09;
      } else if (e == "video-11") {
@@ -2951,7 +2970,7 @@
          "",
          "视频",
          "bits",
          "视频：4.2.3"
          "视频：人身安全检查服务用语规范"
        );
        this.chapterData.isCollectVideo10 = !this.chapterData.isCollectVideo10;
      } else if (e == "video-12") {
@@ -2961,7 +2980,7 @@
          "",
          "视频",
          "bits",
          "视频：4.2.4"
          "视频：安检工作人员服务态度情景展示"
        );
        this.chapterData.isCollectVideo11 = !this.chapterData.isCollectVideo11;
      } else if (e == "video-13") {
@@ -2971,7 +2990,7 @@
          "",
          "视频",
          "bits",
          "视频：4.3.1"
          "视频：空勤人员着装情景展示"
        );
        this.chapterData.isCollectVideo12 = !this.chapterData.isCollectVideo12;
      } else if (e == "video-14") {
@@ -2981,7 +3000,7 @@
          "",
          "视频",
          "bits",
          "视频：4.3.2"
          "视频：航前准备会阶段礼仪实训"
        );
        this.chapterData.isCollectVideo13 = !this.chapterData.isCollectVideo13;
      } else if (e == "video-15") {
@@ -2991,7 +3010,7 @@
          "",
          "视频",
          "bits",
          "视频：4.3.3"
          "视频：空勤人员着装礼仪规范"
        );
        this.chapterData.isCollectVideo14 = !this.chapterData.isCollectVideo14;
      } else if (e == "video-16") {
@@ -3001,7 +3020,7 @@
          "",
          "视频",
          "bits",
          "视频：4.3.4"
          "视频：空勤女士着装教学视频"
        );
        this.chapterData.isCollectVideo15 = !this.chapterData.isCollectVideo15;
      } else if (e == "video-17") {
@@ -3011,7 +3030,7 @@
          "",
          "视频",
          "bits",
          "视频：4.3.5"
          "视频：空勤男士着装教学视频"
        );
        this.chapterData.isCollectVideo16 = !this.chapterData.isCollectVideo16;
      } else if (e == "video-18") {
@@ -3021,7 +3040,7 @@
          "",
          "视频",
          "bits",
          "视频：4.3.6"
          "视频：航前准备会全流程"
        );
        this.chapterData.isCollectVideo17 = !this.chapterData.isCollectVideo17;
      } else if (e == "video-19") {
@@ -3031,7 +3050,7 @@
          "",
          "视频",
          "bits",
          "视频：4.3.7"
          "视频：空勤人员迎客礼仪规范"
        );
        this.chapterData.isCollectVideo18 = !this.chapterData.isCollectVideo18;
      } else if (e == "video-20") {
@@ -3041,7 +3060,7 @@
          "",
          "视频",
          "bits",
          "视频：4.3.8"
          "视频：空勤人员客舱迎客流程"
        );
        this.chapterData.isCollectVideo19 = !this.chapterData.isCollectVideo19;
      } else if (e == "video-21") {
@@ -3051,7 +3070,7 @@
          "",
          "视频",
          "bits",
          "视频：4.3.9"
          "视频：空勤人员服务用语规范"
        );
        this.chapterData.isCollectVideo20 = !this.chapterData.isCollectVideo20;
      }

 src/books/aviationEtiquette/view/components/chapter005.vue

@@ -17,6 +17,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitFive-01.png" alt=""></p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathTwo" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
@@ -24,7 +26,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：5.1.1</span>
              <span>视频：学习礼仪情景剧的策划</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo01 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -43,7 +45,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：5.1.2</span>
              <span>视频：礼仪情景剧的认知</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo02 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -102,7 +104,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：5.1.3</span>
              <span>视频：礼仪情景剧的舞台“入画”</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo03 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -152,7 +154,7 @@
          </p>
          <h6 id="f054">3.情景剧促进学生想象力、创造力以及语言的发展</h6>
          <p>
            情景剧表演能够促进学生想象力的发展。学生能够在内容丰富的故事表演活动中，
            情景剧表演能够促进学生想象力的发展。学生能够在内容丰富的故事表演活动中，运用想象进行再创造，从而提高创新能力，培养语言能力。
          </p>
        </div>
      </div>
@@ -169,7 +171,6 @@
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">运用想象进行再创造，从而提高创新能力，培养语言能力。</p>
          <h4 id="d108">二、礼仪情景剧的特点和创作思路</h4>
          <h5 id="e145">（一）礼仪情景剧的特点</h5>
          <p>情景剧具备以下两个特点。</p>
@@ -205,7 +206,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：5.1.4</span>
              <span>视频：高职院校礼仪情景示范展示</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo04 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -217,10 +218,6 @@
              </el-tooltip>
            </p>
          </div>
          <h4 id="d109">一、礼仪情景剧的“入画”</h4>
          <p>
            礼仪情景剧舞台区域的划分是导演处理舞台调度的基本依据。舞台区一般分为六个区，即1—中前区、2—中后区、3—右前区、4—左前区、5—右后区、6—左后区，其中
          </p>
        </div>
      </div>
    </div>
@@ -237,7 +234,10 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">1为焦点区，2、3、4为次焦点区，5、6为末焦点区（见图5-1-1）。</p>
          <h4 id="d109">一、礼仪情景剧的“入画”</h4>
          <p>
            礼仪情景剧舞台区域的划分是导演处理舞台调度的基本依据。舞台区一般分为六个区，即1—中前区、2—中后区、3—右前区、4—左前区、5—右后区、6—左后区，其中1为焦点区，2、3、4为次焦点区，5、6为末焦点区（见图5-1-1）。
          </p>
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/0156-1.jpg" />
          </p>
@@ -263,9 +263,6 @@
          <p>
            礼仪情景剧是礼仪教学中非常重要的教学形式和方法。它通过情境模拟和角色扮演，让学生主动参与、自主编排，身临其境地进行演绎，通过具体的舞台形象再现日常生活、社会交往和相关工作岗位中综合运用礼仪知识、技能进行沟通和服务的情景，达到教育启发的目的。
          </p>
          <p>
            礼仪情景剧是礼仪课堂教学的延伸，结合相关知识点和技能点，创设一个具体的场景，针对一个主题进行相关事件的演绎，是推动人们文明礼貌行为进程的艺术表现形
          </p>
        </div>
      </div>
    </div>
@@ -281,8 +278,8 @@
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            式。礼仪情景剧的创作要先选择主题，然后进行人物设计，撰写剧本，最后再斟字酌句地修改，一是要体现情景剧层面的原创性、完整性、戏剧性，二是要体现价值观层面的教育性、创新性和吸引性。
          <p>
            礼仪情景剧是礼仪课堂教学的延伸，结合相关知识点和技能点，创设一个具体的场景，针对一个主题进行相关事件的演绎，是推动人们文明礼貌行为进程的艺术表现形式。礼仪情景剧的创作要先选择主题，然后进行人物设计，撰写剧本，最后再斟字酌句地修改，一是要体现情景剧层面的原创性、完整性、戏剧性，二是要体现价值观层面的教育性、创新性和吸引性。
          </p>
          <p>
            在设计礼仪情景剧的编排思路时，不仅要注重对礼仪知识点和技能点进行内化，弘扬社会主义核心价值观，更应注重观赏性和舞台效果。舞台效果的呈现，一方面在于演员的服装、语言表达、神情动作、情感集聚和爆发；另一方面在于道具的使用，技术手段的应用和背景音乐、视频画面的渲染。
@@ -306,7 +303,7 @@
            例如，在表演《无陪伴儿童》乘机故事时，背景音乐是温馨、和谐的无人声伴奏。
          </p>
          <p>
            综上所述，礼仪情景剧的创作和编排不仅要加强专业礼仪教育的知识渗透，更要实现与文化素质教育的有机贯通。教师可通过礼仪情景剧的教学方法，创新礼仪课堂教学形式，提高课堂吸引力，实现教书与育人的完美结合，增强学生“律己敬人”的体验和感悟，提升其道德情操和精神境界。同时，也让广大青年学生从中华优秀礼仪文化中得
            综上所述，礼仪情景剧的创作和编排不仅要加强专业礼仪教育的知识渗透，更要实现与文化素质教育的有机贯通。教师可通过礼仪情景剧的教学方法，创新礼仪课堂教学形式，提高课堂吸引力，实现教书与育人的完美结合，增强学生“律己敬人”的体验和感悟，提升其道德情操和精神境界。同时，也让广大青年学生从中华优秀礼仪文化中得到滋养，增强底气，更加坚定文化自觉与文化自信，努力成为社会主义事业的合格建设者与可靠接班人。
          </p>
        </div>
      </div>
@@ -324,9 +321,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            到滋养，增强底气，更加坚定文化自觉与文化自信，努力成为社会主义事业的合格建设者与可靠接班人。
          </p>
          <div class="bk2">
            <div class="zysx">
              <p>
@@ -467,6 +461,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitFive-02.png" alt=""></p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathSix" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
@@ -474,7 +470,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：5.2.1</span>
              <span>视频：民航服务礼仪表演综合能力训练</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo05 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -493,7 +489,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：5.2.2</span>
              <span>视频：高职院校礼仪秀示范展示</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo06 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -568,7 +564,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：5.2.3</span>
              <span>视频：认识礼仪表演</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo07 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -580,10 +576,6 @@
              </el-tooltip>
            </p>
          </div>
          <h4 id="d111">一、何为礼仪表演</h4>
          <p>
            有“盛世鸿儒”之称的唐代文化名人孔颖达曾说：“中国礼仪之大，故称夏；有服
          </p>
        </div>
      </div>
    </div>
@@ -599,8 +591,9 @@
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            章之美，谓之华。华，夏一也。”中国是传承千年的礼仪之邦，声教播于海外。相传在3000多年前的殷周之际，周公制礼作乐，就提出了礼治的纲领。其后经过孔子和七十子后学，以及孟子、荀子等人的提倡和完善，礼乐文明成为儒家文化的核心。西汉以后，作为礼乐文化的理论形态和上古礼制的渊薮，《仪礼》《周礼》《礼记》先后被列入学官，不仅成为古代文人必读的经典，而且成为历代王朝制礼的基础，对于中国文化和历史的影响之深远，自不待言。
          <h4 id="d111">一、何为礼仪表演</h4>
          <p>
            有“盛世鸿儒”之称的唐代文化名人孔颖达曾说：“中国礼仪之大，故称夏；有服章之美，谓之华。华，夏一也。”中国是传承千年的礼仪之邦，声教播于海外。相传在3000多年前的殷周之际，周公制礼作乐，就提出了礼治的纲领。其后经过孔子和七十子后学，以及孟子、荀子等人的提倡和完善，礼乐文明成为儒家文化的核心。西汉以后，作为礼乐文化的理论形态和上古礼制的渊薮，《仪礼》《周礼》《礼记》先后被列入学官，不仅成为古代文人必读的经典，而且成为历代王朝制礼的基础，对于中国文化和历史的影响之深远，自不待言。
          </p>
          <p>
            礼仪表演，即把约定俗成的礼仪规范或要求通过公众表演的方式，将风貌、风尚、素养、特色展示出来。
@@ -629,10 +622,6 @@
          <p class="block">
            当人们从情感上把自然界同人类加以联系，并进行对比和评价，自然现象就被赋予了意识形态的意义。例如，我们古代神话中的盘古、后羿、嫦娥以及河神、山神等。当自然与人类社会实践（生产生活）产生了联系，自然物就成了人化的自然物。自然物就不仅有单纯的自然属性，也具有了社会属性。人生活在大自然中，必然受到大自然的感染和熏陶，感受到一种情趣和活力，无疑就会将自然人格化。例如，用高山比喻人品德的厚重，用大海比喻人心灵的宽广，用花朵比喻美女。大自然的美化为精神美、心灵美，从而激发人类更高的追求——生活美。从自然美到心灵美，再到生活美，大自然中的一切都有了社会意义。
          </p>
          <p><b>2.美源于劳动</b></p>
          <p class="block">
            自古至今，美都来自劳动。当人类直立行走，在劳动中解放出自己的双手以后，也
          </p>
        </div>
      </div>
    </div>
@@ -649,8 +638,9 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0 block">
            就解放了自己的身体。他们筑巢、耕作、取火、狩猎，不仅可以更好地生存，也提升了身体的匀称性和动作的精确性、优美性。有节奏的劳动中显现了男性的力度和女性的柔美，锻炼了面部表情的灵活性。通过劳动、征战、祈祷的各种动作、姿态及节奏，人们看到了人体自身的美，由此开始注重精神内容的表达。如收获时的喜悦、征战时的勇敢、祈祷时的虔诚等，所以祈祷、求福、插秧、伐木均有不同节奏的歌曲，不仅表达了劳动美，也创造了艺术美。因此，美来源于劳动，它存在于劳动之中。
          <p><b>2.美源于劳动</b></p>
          <p class="block">
            自古至今，美都来自劳动。当人类直立行走，在劳动中解放出自己的双手以后，也就解放了自己的身体。他们筑巢、耕作、取火、狩猎，不仅可以更好地生存，也提升了身体的匀称性和动作的精确性、优美性。有节奏的劳动中显现了男性的力度和女性的柔美，锻炼了面部表情的灵活性。通过劳动、征战、祈祷的各种动作、姿态及节奏，人们看到了人体自身的美，由此开始注重精神内容的表达。如收获时的喜悦、征战时的勇敢、祈祷时的虔诚等，所以祈祷、求福、插秧、伐木均有不同节奏的歌曲，不仅表达了劳动美，也创造了艺术美。因此，美来源于劳动，它存在于劳动之中。
          </p>
          <p><b>3.美源于社会</b></p>
          <p class="block">
@@ -819,7 +809,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：5.2.4</span>
              <span>视频：民航礼仪技能展示情景剧的创作方法</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo08 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -838,7 +828,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：5.2.5</span>
              <span>视频：民航服务礼仪表演素材及内容设计</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo09 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -857,7 +847,7 @@
          </p>
          <h5 id="e157">（二）了解民航情景剧专业背景</h5>
          <p>
            对情景的专业背景、人物背景进行分析和研究。例如，客舱乘务员礼仪情景展示，应首先掌握客舱乘务员的专业技能，如客舱迎送、餐食供应等机舱服务技能，并结合礼仪规范，多查阅相关资料，包括文字、图片、视频等，尽可能多地了解和熟悉作品中的
            对情景的专业背景、人物背景进行分析和研究。例如，客舱乘务员礼仪情景展示，应首先掌握客舱乘务员的专业技能，如客舱迎送、餐食供应等机舱服务技能，并结合礼仪规范，多查阅相关资料，包括文字、图片、视频等，尽可能多地了解和熟悉作品中的时间、地点、专业要求以及所包含的人文思想和社会问题等。
          </p>
        </div>
      </div>
@@ -875,7 +865,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">时间、地点、专业要求以及所包含的人文思想和社会问题等。</p>
          <h5 id="e158">（三）明确情景剧主题思想</h5>
          <p>
            主题是指作者通过剧本冲突提出的基本问题。主题思想是对剧本提出的基本问题的回答，包括这个作品总的思想含义。
@@ -1369,7 +1358,7 @@
          "",
          "视频",
          "bits",
          "视频：5.1.1"
          "视频：学习礼仪情景剧的策划"
        );
        this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01;
      } else if (e == "video-03") {
@@ -1379,7 +1368,7 @@
          "",
          "视频",
          "bits",
          "视频：5.1.2"
          "视频：礼仪情景剧的认知"
        );
        this.chapterData.isCollectVideo02 = !this.chapterData.isCollectVideo02;
      } else if (e == "video-04") {
@@ -1389,7 +1378,7 @@
          "",
          "视频",
          "bits",
          "视频：5.1.3"
          "视频：礼仪情景剧的舞台“入画”"
        );
        this.chapterData.isCollectVideo03 = !this.chapterData.isCollectVideo03;
      } else if (e == "video-05") {
@@ -1399,7 +1388,7 @@
          "",
          "视频",
          "bits",
          "视频：5.1.4"
          "视频：高职院校礼仪情景示范展示"
        );
        this.chapterData.isCollectVideo04 = !this.chapterData.isCollectVideo04;
      } else if (e == "video-06") {
@@ -1409,7 +1398,7 @@
          "",
          "视频",
          "bits",
          "视频：5.2.1"
          "视频：民航服务礼仪表演综合能力训练"
        );
        this.chapterData.isCollectVideo05 = !this.chapterData.isCollectVideo05;
      } else if (e == "video-07") {
@@ -1419,7 +1408,7 @@
          "",
          "视频",
          "bits",
          "视频：5.2.2"
          "视频：高职院校礼仪秀示范展示"
        );
        this.chapterData.isCollectVideo06 = !this.chapterData.isCollectVideo06;
      } else if (e == "video-08") {
@@ -1429,7 +1418,7 @@
          "",
          "视频",
          "bits",
          "视频：5.2.3"
          "视频：认识礼仪表演"
        );
        this.chapterData.isCollectVideo07 = !this.chapterData.isCollectVideo07;
      } else if (e == "video-09") {
@@ -1439,7 +1428,7 @@
          "",
          "视频",
          "bits",
          "视频：5.2.4"
          "视频：民航礼仪技能展示情景剧的创作方法"
        );
        this.chapterData.isCollectVideo09 = !this.chapterData.isCollectVideo09;
      } else if (e == "video-10") {
@@ -1449,7 +1438,7 @@
          "",
          "视频",
          "bits",
          "视频：5.2.5"
          "视频：民航服务礼仪表演素材及内容设计"
        );
        this.chapterData.isCollectVideo10 = !this.chapterData.isCollectVideo10;
      }

 src/books/aviationEtiquette/view/components/chpater002.vue

@@ -17,6 +17,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitTwo-01.png" alt=""></p>
          <div class="bk">
            <p class="bj1-qjms fl al-c">
              <span class="span-box"></span><span class="span-text">项目描述</span><span class="span-box"></span>
@@ -58,7 +60,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">47</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -77,7 +79,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：2.1.1</span>
              <span>视频：了解民航制服</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo04 ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -99,9 +101,6 @@
            System，CIS），它能将企业形象向公众进行展示与传播，使公众在标准化、差异化中形成对企业深刻的印象。
          </p>
          <h5 id="e030">（一）中国民航安检制服的变化</h5>
          <p>
            改革开放40多年来，中国民航制服也随着时代的变迁而改变。从20世纪80年代到民航体制改革前，机场安检工作都是由武警边防部队承担的。那时的安检员是武警战士，他们身着浅绿色的上衣，穿带黄色裤边的军绿色裤子，肩头有醒目的深红色肩章。20世纪90年代初，安检工作由部队移交民航。1992年，民航体制改革，机场独立实行企业化运作。此时的安检服装的肩章、臂章脱胎于武警制服，款式与民航其他岗位的工作制服
          </p>
          <div class="img-rights openImgBox ">
            <p class="center">
              <img class="img-c" alt="" src="../../assets/images/0053-1.jpg" />
@@ -109,8 +108,8 @@
            <p class="img">图2-1-1 安检制服</p>
          </div>
          <span>
            <p class="td-0">
              区别不大，大有民航“一家亲”的味道。随着民航安检的发展，各地根据气候特点和岗位需要，对制服的款式、材质及用料等进行了多次调整。新一代的制服（如图2-1-1）以严谨专业的黑色为主调，融入持续安全理念，搭配裤装和皮靴，外观更加简洁利落，彰显出安全保障工作严谨、规范、踏实的特质。
            <p>
              改革开放40多年来，中国民航制服也随着时代的变迁而改变。从20世纪80年代到民航体制改革前，机场安检工作都是由武警边防部队承担的。那时的安检员是武警战士，他们身着浅绿色的上衣，穿带黄色裤边的军绿色裤子，肩头有醒目的深红色肩章。20世纪90年代初，安检工作由部队移交民航。1992年，民航体制改革，机场独立实行企业化运作。此时的安检服装的肩章、臂章脱胎于武警制服，款式与民航其他岗位的工作制服区别不大，大有民航“一家亲”的味道。随着民航安检的发展，各地根据气候特点和岗位需要，对制服的款式、材质及用料等进行了多次调整。新一代的制服（如图2-1-1）以严谨专业的黑色为主调，融入持续安全理念，搭配裤装和皮靴，外观更加简洁利落，彰显出安全保障工作严谨、规范、踏实的特质。
            </p>
          </span>
        </div>
@@ -148,8 +147,8 @@
            2008年，白云机场成立了航空物流分公司，安检的货检业务板块被划归物流。为区分货检与旅检，白云机场安检站又对制服做了一次微调，设计出“白云安检”字样的胸徽，并缝制在制服的右前胸。至此，“白云安检”这个享誉全国民航的安全品牌已经清晰浮出“水面”。
          </p>
          <h5 id="e031">（二）中国民航贵宾厅制服发展</h5>
          <p class="t-al">
            伴随着民航业的高速发展，旅客吞吐量的大幅增加，越来越多的民航旅客开始接触和体验到机场的贵宾服务。机场贵宾服务指机场或其他服务机构为乘客提供的机场特殊服务，包括贵宾休息厅、离港陪同、贵宾中心停车场泊车等。贵宾服务已经成为机场面向旅客服务的重要窗口。为提升服务质量，必须把服务内容做到精细，将服务品质做到精细；提升管理水平，对工作流程抓到精细，把岗位职责划分精细，并且对员工的形象进行严格把控，从而提高民航机场的整体竞争力，为旅客出行提供更加完善满意的服&shy;
          <p>
            伴随着民航业的高速发展，旅客吞吐量的大幅增加，越来越多的民航旅客开始接触和体验到机场的贵宾服务。机场贵宾服务指机场或其他服务机构为乘客提供的机场特殊服务，包括贵宾休息厅、离港陪同、贵宾中心停车场泊车等。贵宾服务已经成为机场面向旅客服务的重要窗口。为提升服务质量，必须把服务内容做到精细，将服务品质做到精细；提升管理水平，对工作流程抓到精细，把岗位职责划分精细，并且对员工的形象进行严格把控，从而提高民航机场的整体竞争力，为旅客出行提供更加完善满意的服务。贵宾厅制服结合所属航空公司进行定制，单位统一标准。在服装设计上，除了体现职业性和功能性特点外，还应体现当地民俗文化的特点，具有创新性和实用性（见图2-1-2）。
          </p>
        </div>
      </div>
@@ -161,7 +160,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">49</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -173,13 +172,13 @@
            <p class="img">图2-1-2 贵宾厅制服</p>
          </div>
          <span>
            <p class="td-0">
              务。贵宾厅制服结合所属航空公司进行定制，单位统一标准。在服装设计上，除了体现职业性和功能性特点外，还应体现当地民俗文化的特点，具有创新性和实用性（见图2-1-2）。
            </p>
            <h5 id="e032">（三）中国民航空乘制服的发展</h5>
            <p>
              1950年的“八一”开航对于新中国民航具有里程碑的意义。1955年，空乘开始全面招新，这次招新开启了中国航空公司制服的演变与发展的序幕。1974年，中国参加国际民航组织活动。1988年，中国民航的空乘服务开始走向职业化、时尚化。随着民航交通的发展，中国空乘的形象开始转变，这种变化是全方位、多角度、深层次的。航空公司的企业文化，不仅是管理水平的灵魂，也是中国民航提高服务水平的标志和缩影。
            </p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
          </span>
          <p class="td-0"><span class="bj2">·触礼旁通·</span></p>
          <p class="center"><span class="cs1">中国航空公司制服的演变</span></p>
@@ -202,10 +201,6 @@
          <p class="block">
            2008年，中国国际航空公司因其空姐制服而走在了世界先进航空公司的前列。
          </p>
          <h5 id="e033">（四）中国民航空乘制服的特点</h5>
          <p>
            民航乘务员制服是航空公司的形象符号，是一个国家的国际代言，制服使乘务员心中产生职业的特殊感、责任感和荣誉感。制服是一种识别职业的专用服装，初期空勤制
          </p>
        </div>
      </div>
    </div>
@@ -222,6 +217,10 @@
          </li>
        </ul>
        <div class="bodystyle">
          <h5 id="e033">（四）中国民航空乘制服的特点</h5>
          <p>
            民航乘务员制服是航空公司的形象符号，是一个国家的国际代言，制服使乘务员心中产生职业的特殊感、责任感和荣誉感。制服是一种识别职业的专用服装，初期空勤制
          </p>
          <p class="td-0">
            服是根据耐用度、实用性及以激发旅客向心力为目的而设计的，由于早期民航多带有空军背景，空乘制服都具有浓厚空军军装的特征；随着空姐角色的演进发展，制服开始加入了更多女性化的线条剪裁以及颜色的选择，往后更常委托知名品牌设计师制作，赋予乘务员一种荣誉、美感与秩序统一的专业形象。随着时代的进步，航空公司建立了企业文化识别系统，每个航空公司根据各自企业文化中的视觉识别系统开始设计自己公司的制服，每一种制服都有其独特的寓意。
          </p>
@@ -254,10 +253,6 @@
              <div class="swiper-button-prev"></div>
            </div>
          </div>
          <p>（2）中国东方航空集团有限公司（以下简称东航）制服。</p>
          <p>
            20世纪90年代，东航制服设计向多元化与国际化发展。1988年，中国东方航空公司
          </p>
        </div>
      </div>
    </div>
@@ -268,14 +263,12 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">51</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0 t-al">
            正式成立。东航经历了五代制服的变迁，随着国际航班的不断开辟，制服的变化深受“东亚风”元素的影响。21世纪，东航开始了对个性化与品位的追求，东航的企业核心价值观即客户至尊，精细致远。改革开放40多年来，一套套制服记录着一个个历史画面。制服的变化见证了东航40多年的变迁过程，让我们看到了国际化东航的多元发展。
          </p>
          <p>（2）中国东方航空集团有限公司（以下简称东航）制服。</p>
          <div class="img-rights w220 openImgBox ">
            <p class="center ">
              <img class="img-d" alt="" src="../../assets/images/0057-1.jpg" />
@@ -283,14 +276,11 @@
            <p class="img">图2-1-4 东航制服</p>
          </div>
          <span>
            <p class="td-0">
              新时代的东航乘务员也正以实际行动践行和诠释东航的服务理念和服务品质。2013年，配合国际化发展战略，东航推出第五代制服。东航第五套制服遵循“简洁、美观、得体”的原则，在满足职业制服功能性需求的同时，力求展现优雅的东方气质与时尚的海派风格。海军蓝的主色调营造出稳重、专业的职业氛围，中国结、正红色腰带及配饰，突出了青花瓷主题设计元素，经典中透出热情。女款衬衫与丝巾设计中运用的蓝色花朵元素，脱胎于康乃馨和莲花，体现出东方女性优雅、柔美、含蓄的特质，同时向旅客传递出温馨、舒适、细腻、高效的高品位服务理念（见图2-1-4）。
            <p>
              20世纪90年代，东航制服设计向多元化与国际化发展。1988年，中国东方航空公司正式成立。东航经历了五代制服的变迁，随着国际航班的不断开辟，制服的变化深受“东亚风”元素的影响。21世纪，东航开始了对个性化与品位的追求，东航的企业核心价值观即客户至尊，精细致远。改革开放40多年来，一套套制服记录着一个个历史画面。制服的变化见证了东航40多年的变迁过程，让我们看到了国际化东航的多元发展。新时代的东航乘务员也正以实际行动践行和诠释东航的服务理念和服务品质。2013年，配合国际化发展战略，东航推出第五代制服。东航第五套制服遵循“简洁、美观、得体”的原则，在满足职业制服功能性需求的同时，力求展现优雅的东方气质与时尚的海派风格。海军蓝的主色调营造出稳重、专业的职业氛围，中国结、正红色腰带及配饰，突出了青花瓷主题设计元素，经典中透出热情。女款衬衫与丝巾设计中运用的蓝色花朵元素，脱胎于康乃馨和莲花，体现出东方女性优雅、柔美、含蓄的特质，同时向旅客传递出温馨、舒适、细腻、高效的高品位服务理念（见图2-1-4）。
            </p>
          </span>
          <p>（3）中国南方航空股份有限公司（以下简称南航）制服。</p>
          <p class="t-al">
            秉承“客户至上”的承诺，南航通过提供“可靠、准点、便捷”的优质服务，致力于满足并超越客户的期望。改革开放40多年来，空乘制服一直在变，而南航人的初心从未改变。从仅仅提供报纸、茶水的单一服务到如今空中服务的品牌化、标准化、体系化；从敢为天下先，主动参与国际竞争到向着规范化、一体化、智能化、国际化不断发
          </p>
          <div class="img-rights w220 openImgBox ">
            <p class="center ">
              <img class="img-c" alt="" src="../../assets/images/0057-2.jpg" />
@@ -298,7 +288,8 @@
            <p class="img">图2-1-5 南航制服</p>
          </div>
          <span>
            <p class="td-0">
            <p>
              秉承“客户至上”的承诺，南航通过提供“可靠、准点、便捷”的优质服务，致力于满足并超越客户的期望。改革开放40多年来，空乘制服一直在变，而南航人的初心从未改变。从仅仅提供报纸、茶水的单一服务到如今空中服务的品牌化、标准化、体系化；从敢为天下先，主动参与国际竞争到向着规范化、一体化、智能化、国际化不断发
              展；为建设世界一流航空运输企业，推出一系列“木棉系”服务产品，着力打造国际化精品标杆航线，深入开展国际合作，稳步有序开拓国际市场。第四套制服整体色系为天青蓝色和玫粉红色，整套制服包括夏装、春秋装、冬季大衣和围裙多个款式，品种包括西装、衬衣、马甲、裤子、大衣、风衣等。款型高雅亲切，修身适体。乘务长身着有宝石般的光泽、纯净和透明感的天青蓝色制服，而乘务员穿着具有女性魅力的玫粉红色制服。上装是V字领的，用浅金色线条对领边和袖口进行了勾勒，而下装则是红、蓝斜纹面料的西服裙，既活泼别致，又显得亲切干练和时尚高雅（见图2-1-5）。
            </p>
          </span>
@@ -343,10 +334,6 @@
              厦航乘务队形成了“六勤”（眼勤、手勤、腿勤、嘴勤、耳勤、脑勤）、“五心”（热心、诚心、细心、耐心、恒心）、“四美”（心灵美、语言美、行为美、形象美）、“三不怕”（不怕脏、不怕累、不怕烦）的服务作风。空乘制服经历了泡泡袖、白蝴蝶结、中式旗袍等阶段。2018年8月，厦航新一代空乘制服惊艳亮相，融合了复古元素与现代简约时尚，勾勒出更加高雅、自信、干练的空乘形象。俏皮的小帽上带有“一鹭高飞”航徽，衣袖为七分袖，并配有深蓝色的宽腰带（见图2-1-7）。不同明度“天空蓝”制服，区分乘务员不同的岗位，由浅到深的蓝色新制服分属于普通乘务员、客舱乘务长和客舱经理。
            </p>
          </span>
          <p>（3）海南航空公司（以下简称海航）制服。</p>
          <p class="t-al">
            海航成立于1993年1月，1993年5月开始运营。海航以优质的产品及服务连续数年获得“SKYTRAX五星航空公司”荣誉。海航乘务员制服经历了五次更新换代，第五代制服
          </p>
        </div>
      </div>
    </div>
@@ -357,7 +344,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">53</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -369,8 +356,9 @@
            <p class="img">图2-1-8 海航制服</p>
          </div>
          <span>
            <p class="td-0">
              名为“海天祥云”，于2018年6月6日启用。其制服的最大亮点在于中国传统元素与国际时尚的结合。制服用中式旗袍形状做底，领口为祥云漫天，下摆为江涯海水，以“彩云满天”为基，呈现了海航大鹏金翅鸟翱翔于云海之间的辉煌意境，诠释了海航的无限发展空间及生生不息的企业内涵（见图2-1-8）。
            <p>（3）海南航空公司（以下简称海航）制服。</p>
            <p>
              海航成立于1993年1月，1993年5月开始运营。海航以优质的产品及服务连续数年获得“SKYTRAX五星航空公司”荣誉。海航乘务员制服经历了五次更新换代，第五代制服名为“海天祥云”，于2018年6月6日启用。其制服的最大亮点在于中国传统元素与国际时尚的结合。制服用中式旗袍形状做底，领口为祥云漫天，下摆为江涯海水，以“彩云满天”为基，呈现了海航大鹏金翅鸟翱翔于云海之间的辉煌意境，诠释了海航的无限发展空间及生生不息的企业内涵（见图2-1-8）。
            </p>
          </span>
          <h4 id="d037">二、民航制服的作用</h4>
@@ -392,8 +380,8 @@
          </p>
          <h4 id="d038">三、民航乘务员的着装要求</h4>
          <h5 id="e038">（一）合身得体</h5>
          <p class="t-al">
            制服的尺寸必须符合民航人员的身材特点。制服穿着忌乱，必须合体。讲究“四长”，即袖至手腕，衣至虎口，裤至脚面，裙至膝盖。讲究“四围”，即领围以插入一
          <p>
            制服的尺寸必须符合民航人员的身材特点。制服穿着忌乱，必须合体。讲究“四长”，即袖至手腕，衣至虎口，裤至脚面，裙至膝盖。讲究“四围”，即领围以插入一指大小为宜，上衣的胸围、腰围及裤裙的臀围以插入一指的松紧为宜。
          </p>
        </div>
      </div>
@@ -411,7 +399,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">指大小为宜，上衣的胸围、腰围及裤裙的臀围以插入一指的松紧为宜。</p>
          <h5 id="e039">（二）干净整洁</h5>
          <p>
            民航人员的制服应保持干净整洁，并定期换洗。制服干净整洁体现的是对工作岗位的尊重与热爱，是服务行业人员的基本要求。空乘人员的制服要求无异色、无异味、无异物，尤其是衣领口与袖口等外露部分更要注意保持干净整洁。
@@ -462,7 +449,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">55</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -475,7 +462,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：2.1.2</span>
              <span>视频：中国民航制服规范</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo05 ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -587,7 +574,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">57</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -723,7 +710,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">59</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -779,7 +766,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：2.1.3</span>
              <span>视频：民航人员妆容规范</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo06 ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -859,7 +846,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">61</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -898,7 +885,7 @@
          <h4 id="d045">四、民航服务人员的化妆标准</h4>
          <h5 id="e054">（一）日常妆</h5>
          <p>
            日常妆主要体现在日常生活中，个人可以按照自身意愿和审美进行美化，根据整体
            日常妆主要体现在日常生活中，个人可以按照自身意愿和审美进行美化，根据整体形象风格塑造自己，可追求时尚、端庄、优雅、清新，随意性较强，选择范围较大，但需注意适合的年龄、环境。可根据所在场合、目的进行塑造，也可根据季节变化来设计妆容（见图2-1-13）。
          </p>
        </div>
      </div>
@@ -927,10 +914,6 @@
            <p class="img">图2-1-14 地面服务妆</p>
          </div>
          <span>
            <p class="td-0">
              形象风格塑造自己，可追求时尚、端庄、优雅、清新，随意性较强，选择范围较大，但需注意适合的年龄、环境。可根据所在场合、目的进行塑造，也可根据季节变化来设计妆容（见图2-1-13）。
            </p>
          </span>
          <h5 id="e055">（二）职业妆</h5>
          <h6 id="f010">1.地面服务妆</h6>
          <p>
@@ -941,8 +924,10 @@
          </p>
          <h6 id="f011">2.客舱乘务妆</h6>
          <p>
            （1）特点：相对于地面服务而言，客舱服务工作的空间较狭窄、空气不流通、光线较暗。客舱乘务员的职业形象既要美观，也要淡雅，给人以赏心悦目、舒适之感。在机舱中乘务员常常需要为旅客提供服务，常与旅客近距离接触，并且旅客大部分都是通
              （1）特点：相对于地面服务而言，客舱服务工作的空间较狭窄、空气不流通、光线较暗。客舱乘务员的职业形象既要美观，也要淡雅，给人以赏心悦目、舒适之感。在机舱中乘务员常常需要为旅客提供服务，常与旅客近距离接触，并且旅客大部分都是通过乘务员的服务专业性而对航空公司服务进行评价的。
              所以，客舱乘务员的妆容不仅要达到规范，还要体现精致，注重细节往往会让对方觉得受到重视和尊重。
          </p>
          </span>
          <div class="img-rights w250 openImgBox ">
            <p class="center openImgBox">
              <img class="img-c" alt="" src="../../assets/images/0068-3.jpg" />
@@ -950,18 +935,15 @@
            <p class="img">图2-1-15 客舱乘务妆</p>
          </div>
          <span>
            <p class="td-0">
              过乘务员的服务专业性而对航空公司服务进行评价的。 所以，客舱乘务员的妆容不仅要达到规范，还要体现精致，注重细节往往会让对方觉得受到重视和尊重。
            </p>
          </span>
          <p>
            （2）化妆要点：妆色淡雅、清新、干净、给人亲和力较强的感觉，但要注意乘务组之间的协调、统一效果（见图2-1-15）。
          </p>
          <h4 id="d046">五、女士面部化妆程序</h4>
          <h5 id="e056">（一）日常妆</h5>
          <p>
            日常妆主要体现在日常生活中，可以按照个人的意愿和审美进行美化，根据整体形
              日常妆主要体现在日常生活中，可以按照个人的意愿和审美进行美化，根据整体形象风格塑造自己，可追求时尚、端庄、优雅、清新，随意性较强，范围较大，但需注意适合的年龄、环境。可根据所在不同的场合、目的进行塑造，也可根据季节变化来设计妆容。
          </p>
          </span>
        </div>
      </div>
    </div>
@@ -972,14 +954,11 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">63</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            象风格塑造自己，可追求时尚、端庄、优雅、清新，随意性较强，范围较大，但需注意适合的年龄、环境。可根据所在不同的场合、目的进行塑造，也可根据季节变化来设计妆容。
          </p>
          <h5 id="e057">（二）日常妆程序</h5>
          <div class="img-rights w220 openImgBox ">
            <p class="center">
@@ -1012,7 +991,7 @@
            （7）涂眼影：运用色彩来修饰和美化眼部，增加眼睛的神韵。眼影画法多种多样，一般采用平涂法、晕染法、眼尾加重法。
          </p>
          <p>
            ①平涂法：先用浅色打底，再用一种颜色由睫毛根部开始平涂，下眼睑画半包，用
            ①平涂法：先用浅色打底，再用一种颜色由睫毛根部开始平涂，下眼睑画半包，用色单一。此种方法适合裸妆、肿泡眼。
          </p>
        </div>
      </div>
@@ -1030,7 +1009,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">色单一。此种方法适合裸妆、肿泡眼。</p>
          <p>
            ②晕染法：将上眼睑分区域进行晕染，一般选用两种或两种以上的颜色。此种方法可运用色彩的变化选择同色系或邻近色，适用于各种眼形和妆型。晕染时注意内浅外深，先用浅色系在整个上眼睑处打底，第二层颜色涂满整个上眼睑的2/3，第三层最深的颜色叠加在高于双眼皮基准线上3mm左右即可。下眼睑画半包，不超过瞳孔中线，颜色叠加层次与上眼睑相同。各区颜色衔接过渡自然，不能有分界线，接近眉骨处眼影边缘应虚化自然。
          </p>
@@ -1050,7 +1028,7 @@
            ①标准眉：从眉腰下缘线开始，顺着眉毛的生长方向，描画至眉峰处，形成上扬的弧线，再顺着眉毛的生长方向，斜向下画至眉梢，呈下降弧线，加深眉腰至眉峰的颜色，淡化眉头的颜色。确定眉尾长度的点位，可利用眉笔快速测评，鼻翼到外眼角连线的延长线上的点，就是眉尾最长可至的点。确定眉峰的点位，将确定后的眉尾的延长线平移到鼻尖，但眉尾不能低于眉头。此种眉形适合所有脸型。
          </p>
          <p>
            ②一字眉：从眉腰下缘线开始，顺着眉毛的生长方向，描画至眉峰处，形成一条直线，再顺着眉毛的生长方向，斜向下画至眉梢，呈下降弧线，加深眉腰至眉峰的颜色，
            ②一字眉：从眉腰下缘线开始，顺着眉毛的生长方向，描画至眉峰处，形成一条直线，再顺着眉毛的生长方向，斜向下画至眉梢，呈下降弧线，加深眉腰至眉峰的颜色，淡化眉头的颜色，眉尾不能低于眉头。此种眉形适合长脸型。
          </p>
        </div>
      </div>
@@ -1062,12 +1040,11 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">65</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">淡化眉头的颜色，眉尾不能低于眉头。此种眉形适合长脸型。</p>
          <p>
            （11）涂腮红：可以改善肤色，矫正脸型，使妆面色调谐调等。从鬓角处往前扫，向前不超过眼睛1/3垂直线，向上不超过外眼角的水平线，向下不得低于鼻翼的水平线。同时根据脸型适当调整，长脸型者一般横扫腮红，其他脸型者可以斜向扫腮红。
          </p>
@@ -1191,7 +1168,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">67</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -1212,8 +1189,8 @@
          </p>
          <h4 id="d049">一、民航职业发型的设计原则</h4>
          <h5 id="e061">（一）干净的原则</h5>
          <p class="t-al">
            头部的洁净程度完全可以体现一个人的精神状态和生活习惯，“蓬头垢面”的形象不符合职业要求和仪容仪表要求。民航服务人员应经常洗头发，注意头发的干净度，最
          <p>
            头部的洁净程度完全可以体现一个人的精神状态和生活习惯，“蓬头垢面”的形象不符合职业要求和仪容仪表要求。民航服务人员应经常洗头发，注意头发的干净度，最好是保持无头皮屑，无分叉、枯燥的发质，发面不油腻。
          </p>
        </div>
      </div>
@@ -1231,7 +1208,6 @@
          </li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">好是保持无头皮屑，无分叉、枯燥的发质，发面不油腻。</p>
          <h5 id="e062">（二）长度适宜的原则</h5>
          <h6 id="f012">1.男士</h6>
          <p>前发：男士应为短发，前发要求不遮盖额头一半（见图2-1-18）。</p>
@@ -1293,7 +1269,7 @@
          </p>
          <h4 id="d050">二、发型工具介绍</h4>
          <p>
            民航职业要求发型干净利落，这需要发型工具及产品的辅助和定型，才能保持一天
            民航职业要求发型干净利落，这需要发型工具及产品的辅助和定型，才能保持一天的造型不杂乱。发型工具多种多样，其作用也是根据发质而定的。
          </p>
        </div>
      </div>
@@ -1305,12 +1281,11 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">69</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">的造型不杂乱。发型工具多种多样，其作用也是根据发质而定的。</p>
          <h5 id="e065">（一）发型工具</h5>
          <p>
            尖尾梳：别名挑梳、分针梳，主要用于盘发。一边梳，一边用尖尾顺次把头发挑起（见图2-1-24）。
@@ -1445,7 +1420,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">71</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -1601,7 +1576,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">73</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -1612,6 +1587,8 @@
              <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
            </p>
          </div>
          <p class="td-0 mt-10 mb-10"><span class="bj2">·思维导图·</span></p>
          <p class="td-0 openImgBox"><img class="img-0" src="../../assets//images/unitTwo-02.png" alt=""></p>
          <div class="bk">
            <p class="bj1-qjms fl al-c">
              <span class="span-box"></span><span class="span-text">项目描述</span><span class="span-box"></span>
@@ -1688,7 +1665,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：2.2.1</span>
              <span>视频：民航岗位的微笑</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo07 ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1703,9 +1680,6 @@
          <p>
            微笑，是世界上最美丽的语言，是含义甚广的交际手段，是自信的象征，是礼貌的表示，能充分体现一个人的热情、修养和魅力。微笑也能带给自己良好的心理暗示，营造快乐的氛围。微笑在一刹那间产生，却能给人留下永恒的记忆。真正甜美而非假性的微笑是发自内心、自然大方、真实亲切的微笑。
          </p>
          <p>
            生活中需要微笑的理由：微笑比紧锁眉头要好看，微笑可令人心情愉悦，微笑可令
          </p>
        </div>
      </div>
    </div>
@@ -1716,13 +1690,13 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">75</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            生活过得有滋有味，微笑有助于结交新朋友，微笑可表达友善，微笑可给人留下良好的印象，微笑可增加自信和魅力，微笑可减少忧虑。
          <p>
            生活中需要微笑的理由：微笑比紧锁眉头要好看，微笑可令人心情愉悦，微笑可令生活过得有滋有味，微笑有助于结交新朋友，微笑可表达友善，微笑可给人留下良好的印象，微笑可增加自信和魅力，微笑可减少忧虑。
          </p>
          <p>
            民航人员在工作中要学会微笑，不会微笑的乘务员是不合格的乘务员。与旅客交流时，配合微笑的面容，会让人觉得亲切可信、饱含诚意。
@@ -1822,7 +1796,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：2.2.2</span>
              <span>视频：民航人员仪态礼仪实训</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo08 ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1841,7 +1815,7 @@
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：2.2.3</span>
              <span>视频：民航岗位仪态礼仪认知</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo09 ? '点击取消' : '点击收藏'
                " placement="top-start">
                <img :src="collectResourceList.findIndex(
@@ -1866,7 +1840,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">77</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -1957,7 +1931,7 @@
          <p>（6）不可交腿斜靠在马路旁的树干、招牌、墙壁、栏杆上等。</p>
          <h4 id="d056">三、站姿的基础训练</h4>
          <p>
            对站姿的基础训练是一个循序渐进、坚持不懈的过程，我们可以从以下三种方法中
            对站姿的基础训练是一个循序渐进、坚持不懈的过程，我们可以从以下三种方法中选择一种，每天坚持训练30分钟。通过积累，养成一个良好的站立习惯和达到正确的身体姿态规范要求。
          </p>
        </div>
      </div>
@@ -1969,14 +1943,11 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">79</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
            选择一种，每天坚持训练30分钟。通过积累，养成一个良好的站立习惯和达到正确的身体姿态规范要求。
          </p>
          <h6 id="f019">1.贴壁法</h6>
          <p>
            贴壁法又叫五点贴壁法。顾名思义就是让身体的五个部位紧贴墙壁，此种方法可以改善驼背。具体做法是：
@@ -2087,7 +2058,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">81</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -2178,7 +2149,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">83</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -2274,7 +2245,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">85</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -2386,7 +2357,7 @@
          <li class="header-right-Number header-right-title">模块二</li>
          <li class="header-right-Number">民航人员职业形象塑造</li>
          <li class="p-Num">87</li>
          <li class="header-right-Number cloud"><img class="" src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-Number cloud"><img src="../../assets/images/yemei02.png" alt="" /></li>
          <li class="header-right-last" style=""><br></li>
          <li class="header-right-end" style=""><br></li>
        </ul>
@@ -2811,7 +2782,7 @@
          "",
          "视频",
          "bits",
          "视频：2.1.1"
          "视频：了解民航制服"
        );
        this.chapterData.isCollectVideo04 = !this.chapterData.isCollectVideo04;
      } else if (e == "video-06") {
@@ -2821,7 +2792,7 @@
          "",
          "视频",
          "bits",
          "视频：2.1.2"
          "视频：中国民航制服规范"
        );
        this.chapterData.isCollectVideo05 = !this.chapterData.isCollectVideo05;
      } else if (e == "video-07") {
@@ -2831,7 +2802,7 @@
          "",
          "视频",
          "bits",
          "视频：2.1.3"
          "视频：民航人员妆容规范"
        );
        this.chapterData.isCollectVideo06 = !this.chapterData.isCollectVideo06;
      } else if (e == "video-08") {
@@ -2841,7 +2812,7 @@
          "",
          "视频",
          "bits",
          "视频：2.2.1"
          "视频：民航岗位的微笑"
        );
        this.chapterData.isCollectVideo07 = !this.chapterData.isCollectVideo07;
      } else if (e == "video-09") {
@@ -2851,7 +2822,7 @@
          "",
          "视频",
          "bits",
          "视频：2.2.2"
          "视频：民航人员仪态礼仪实训"
        );
        this.chapterData.isCollectVideo08 = !this.chapterData.isCollectVideo08;
      } else if (e == "video-10") {
@@ -2861,7 +2832,7 @@
          "",
          "视频",
          "bits",
          "视频：2.2.3"
          "视频：民航岗位仪态礼仪认知"
        );
        this.chapterData.isCollectVideo09 = !this.chapterData.isCollectVideo09;
      }

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

@@ -99,7 +99,7 @@
        </ul>
        <div class="bodystyle">
          <p>
            《民航服务礼仪》由李灵、魏全斌担任主编，陈秋雨、黄清豪、李林、丁洁琪担任副主编。此外，李灵参加了模块一、模块二、模块三和拓展模块的编写，陈秋雨参加了模块一、模块二、模块三的编写，李静、丁洁琪参加了模块二的编写，刘家利参加了模块三的编写，王莉莉、李鑫、李静、丁洁琪参加了模块四的编写，黄清豪参加了拓展模块的编写。全书由李灵、顾妍雯统稿。
            《民航服务礼仪》由李灵、魏全斌担任主编，陈秋雨、黄清豪、李林、丁洁琪担任副主编。此外，李灵、雷浚栏参加了模块一、模块二、模块三和拓展模块的编写，陈秋雨参加了模块一、模块二、模块三的编写，李静、丁洁琪参加了模块二的编写，刘家利参加了模块三的编写，王莉莉、李鑫、李静、丁洁琪参加了模块四的编写，黄清豪参加了拓展模块的编写。全书由李灵、顾妍雯统稿。
          </p>
          <p>
            由于编者水平限制，教材中难免有不足之处，敬请广大读者提出宝贵的意见，以便我们修订时加以完善。

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

@@ -160,8 +160,8 @@
    }, 500);

    //测试页面跳转
    setTimeout(() => {
      this.gotoPage(6, 169);
    // setTimeout(() => {
    //   this.gotoPage(5, 130);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",
@@ -175,7 +175,7 @@
      //     ids: ["2ACA9359"]
      //   });
      // }, 2000);
    }, 500);
    // }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -920,7 +920,11 @@
        const topGap = playVudio.getBoundingClientRect().top;
        if (bottomGap < 0 || topGap > window.innerHeight) {
          try {
            if (playVudio.readyState) playVudio.requestPictureInPicture();
            if (playVudio.readyState){
              setTimeout(()=>{
                playVudio.requestPictureInPicture();
              },0)
            } 
          } catch (error) {
            console.log(error, "小窗错误error");
          }

 src/books/civilServices/view/components/chapter003.vue

@@ -423,7 +423,7 @@
                            <span>视频：人际吸引 </span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '6e398727142a495b3d893adf3c8a240f') > -1 ? collectCheck : collectImg"
                                <img :src="collectResourceList.findIndex(item => item.id == '30b4c510514d03ed2902817e6e9f4fb2') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-01')" />
                            </el-tooltip>
                        </p>
@@ -731,7 +731,7 @@
                            <span>视频：客我交往技巧 </span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo01 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == 'dec981e507dbcd88c632789c75b2fe3b') > -1 ? collectCheck : collectImg"
                                <img :src="collectResourceList.findIndex(item => item.id == '114bfb6ee69164a3d24991fe2061fab2') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-02')" />
                            </el-tooltip>
                        </p>
@@ -1734,7 +1734,7 @@
                            <span>视频：民航服务中常见的沟通障碍类型 </span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo02 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '7637f57a3dc18cc8487ccc2a39e62a5c') > -1 ? collectCheck : collectImg"
                                <img :src="collectResourceList.findIndex(item => item.id == ' 4ee774f6507c878e0e2ba42a12cc3362') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-03')" />
                            </el-tooltip>
                        </p>
@@ -2048,7 +2048,7 @@
                            <span>视频：民航服务的沟通策略</span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo03 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == 'c69daf5242160645652a8d159213d1d9') > -1 ? collectCheck : collectImg"
                                <img :src="collectResourceList.findIndex(item => item.id == ' 8f57603126cedddbcd4be17c34099107') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-04')" />
                            </el-tooltip>
                        </p>
@@ -2610,16 +2610,16 @@
    methods: {
        async getVidoePath() {
            this.videoPathOne = await getResourcePath(
                "6e398727142a495b3d893adf3c8a240f"
                "30b4c510514d03ed2902817e6e9f4fb2"
            );
            this.videoPathTwo = await getResourcePath(
                "dec981e507dbcd88c632789c75b2fe3b"
                "114bfb6ee69164a3d24991fe2061fab2"
            );
            this.videoPathThree = await getResourcePath(
                "7637f57a3dc18cc8487ccc2a39e62a5c"
                " 4ee774f6507c878e0e2ba42a12cc3362"
            );
            this.videoPathFour = await getResourcePath(
                "c69daf5242160645652a8d159213d1d9"
                " 8f57603126cedddbcd4be17c34099107"
            );
            for (let index = 0; index < this.chapter003.videoMd5.length; index++) {
                const item = this.chapter003.videoMd5[index];
@@ -2662,16 +2662,16 @@
                this.handleCollectResource(e.md5, e.md5, '', "视频", "bits", '微课小课堂：' + e.name)
                e.isCollectVideo = !e.isCollectVideo
            } else if (e == 'video-01') {
                this.handleCollectResource("6e398727142a495b3d893adf3c8a240f", "6e398727142a495b3d893adf3c8a240f", '', "视频", "bits", '视频：人际吸引')
                this.handleCollectResource("30b4c510514d03ed2902817e6e9f4fb2", "30b4c510514d03ed2902817e6e9f4fb2", '', "视频", "bits", '视频：人际吸引')
                this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo
            } else if (e == 'video-02') {
                this.handleCollectResource("dec981e507dbcd88c632789c75b2fe3b", "dec981e507dbcd88c632789c75b2fe3b", '', "视频", "bits", '视频：客我交往技巧')
                this.handleCollectResource("114bfb6ee69164a3d24991fe2061fab2", "114bfb6ee69164a3d24991fe2061fab2", '', "视频", "bits", '视频：客我交往技巧')
                this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01
            }else if (e == 'video-03') {
                this.handleCollectResource("7637f57a3dc18cc8487ccc2a39e62a5c", "7637f57a3dc18cc8487ccc2a39e62a5c", '', "视频", "bits", '视频：民航服务中常见的沟通障碍类型')
                this.handleCollectResource(" 4ee774f6507c878e0e2ba42a12cc3362", " 4ee774f6507c878e0e2ba42a12cc3362", '', "视频", "bits", '视频：民航服务中常见的沟通障碍类型')
                this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01
            }else if (e == 'video-04') {
                this.handleCollectResource("c69daf5242160645652a8d159213d1d9", "c69daf5242160645652a8d159213d1d9", '', "视频", "bits", '视频：民航服务的沟通策略')
                this.handleCollectResource(" 8f57603126cedddbcd4be17c34099107", " 8f57603126cedddbcd4be17c34099107", '', "视频", "bits", '视频：民航服务的沟通策略')
                this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01
            }
            this.handlechapter003();

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

@@ -47,6 +47,7 @@
import "swiper/swiper-bundle.css";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";

export default {
  name: "pageContent",
  data() {
@@ -178,8 +179,8 @@
    }, 500);

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(3,79);
    setTimeout(() => {
      this.gotoPage(4,140);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -193,7 +194,7 @@
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    // }, 500);
    }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -936,7 +937,12 @@
        const topGap = playVudio.getBoundingClientRect().top;
        if (bottomGap < 0 || topGap > window.innerHeight) {
          try {
            if (playVudio.readyState) playVudio.requestPictureInPicture();
            if (playVudio.readyState) {
              // playVudio.requestPictureInPicture();
              setTimeout(()=>{
                playVudio.requestPictureInPicture();
              },0)
            }
          } catch (error) {
            console.log(error, "小窗错误error");
          }

 src/books/practicalCareChildrenManual/assets/Fonts/FZHTJW.ttf

Binary files differ

 src/books/practicalCareChildrenManual/assets/Fonts/FZLTXIHJW.ttf

Binary files differ

 src/books/practicalCareChildrenManual/assets/Fonts/FZLTZHJW.ttf

Binary files differ

 src/books/practicalCareChildrenManual/assets/Fonts/FZNBSJW.TTF

Binary files differ

 src/books/practicalCareChildrenManual/assets/Fonts/FZZDXK.TTF

Binary files differ

 src/books/practicalCareChildrenManual/assets/Fonts/FZZYSJW.TTF

Binary files differ

 src/books/practicalCareChildrenManual/assets/Fonts/hya4gjm.ttf

Binary files differ

 src/books/practicalCareChildrenManual/assets/images/0001-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0001-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0002-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0021-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0022-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0026-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0026-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0027-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0028-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0029-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0029-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0029-3.jpg

 src/books/practicalCareChildrenManual/assets/images/0030-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0030-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0030-3.jpg

 src/books/practicalCareChildrenManual/assets/images/0031-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0031-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0034-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0034-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0034-3.jpg

 src/books/practicalCareChildrenManual/assets/images/0034-4.jpg

 src/books/practicalCareChildrenManual/assets/images/0035-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0035-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0035-3.jpg

 src/books/practicalCareChildrenManual/assets/images/0035-4.jpg

 src/books/practicalCareChildrenManual/assets/images/0036-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0036-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0037-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0037-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0037-3.jpg

 src/books/practicalCareChildrenManual/assets/images/0037-4.jpg

 src/books/practicalCareChildrenManual/assets/images/0039-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0040-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0040-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0043-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0046-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0048-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0051-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0053-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0063-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0065-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0066-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0067-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0067-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0068-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0070-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0070-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0072-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0072-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0076-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0076-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0078-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0080-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0083-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0084-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0086-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0088-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0088-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0090-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0093-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0097-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0098-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0101-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0104-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0105-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0106-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0107-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0111-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0116-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0117-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0118-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0121-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0122-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0125-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0132-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0135-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0136-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0137-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0140-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0141-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0142-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0147-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0150-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0151-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0159-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0160-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0163-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0164-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0168-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0169-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0170-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0172-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0172-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0173-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0173-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0173-3.jpg

 src/books/practicalCareChildrenManual/assets/images/0173-4.jpg

 src/books/practicalCareChildrenManual/assets/images/0174-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0174-2.jpg

 src/books/practicalCareChildrenManual/assets/images/0176-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0184-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0187-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0190-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0192-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0193-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0195-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0196-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0203-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0209-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0215-1.jpg

 src/books/practicalCareChildrenManual/assets/images/0220-1.jpg

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

 src/books/practicalCareChildrenManual/assets/images/FD.jpg

 src/books/practicalCareChildrenManual/assets/images/SMY.jpg

 src/books/practicalCareChildrenManual/assets/images/csx.jpg

 src/books/practicalCareChildrenManual/assets/images/dxal.png

 src/books/practicalCareChildrenManual/assets/images/headerBj.png

 src/books/practicalCareChildrenManual/assets/images/headerRight.png

 src/books/practicalCareChildrenManual/assets/images/i0006-01.png

 src/books/practicalCareChildrenManual/assets/images/i0006-02.png

 src/books/practicalCareChildrenManual/assets/images/i0007-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0008-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0008-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0009-01.png

 src/books/practicalCareChildrenManual/assets/images/i0009-02.png

 src/books/practicalCareChildrenManual/assets/images/i0010-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0011-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0012-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0012-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0013-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0014-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0015-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0016-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0017-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0018-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0019-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0020-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0021-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0022-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0023-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0023-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0024-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0025-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0026-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0027-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0028-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0029-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0030-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0031-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0031-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0032-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0033-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0034-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0035-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0036-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0037-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0038-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0039-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0040-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0040-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0041-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0042-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0043-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0044-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0045-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0046-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0047-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0048-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0049-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0049-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0050-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0051-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0051-3.jpg

 src/books/practicalCareChildrenManual/assets/images/i0052-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0054-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0054-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0055-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0056-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0057-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0058-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0059-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0059-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0060-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0060-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0061-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0062-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0063-1.jpg

 src/books/practicalCareChildrenManual/assets/images/i0063-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0064-2.jpg

 src/books/practicalCareChildrenManual/assets/images/i0065-2.jpg

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

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

 src/books/practicalCareChildrenManual/assets/images/icon/lianxi.png

 src/books/practicalCareChildrenManual/assets/images/icon/videoLogo.png

 src/books/practicalCareChildrenManual/assets/images/lyl.png

 src/books/practicalCareChildrenManual/assets/images/ml.jpg

 src/books/practicalCareChildrenManual/assets/images/qjdr.png

 src/books/practicalCareChildrenManual/assets/images/qy.jpg

 src/books/practicalCareChildrenManual/assets/images/sys.png

 src/books/practicalCareChildrenManual/assets/images/sysm.jpg

 src/books/practicalCareChildrenManual/assets/images/tzyd.png

 src/books/practicalCareChildrenManual/assets/images/xdc.png

 src/books/practicalCareChildrenManual/assets/images/xxcty.png

 src/books/practicalCareChildrenManual/assets/images/xxdt.png

 src/books/practicalCareChildrenManual/assets/images/xxrwd.png

 src/books/practicalCareChildrenManual/assets/images/xxxgjc.png

 src/books/practicalCareChildrenManual/assets/images/xyx.png

 src/books/practicalCareChildrenManual/assets/main.less

New file
@@ -0,0 +1,2373 @@
.practicalCareChildrenManual {
    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;
    }

    .foreword {
        line-height: 10px !important;
        margin-top: 0;
    }

    .c-g {
        color: green;
    }

    .c-r {
        color: red;
    }

    .t-right {
        text-align: right;
    }

    .mr-0 {
        margin: 0 !important;
    }

    .mr-9 {
        margin-right: 9%;
    }

    .ml-9 {
        margin-left: 9%;
    }

    .ml-8 {
        margin-left: 8%;
    }

    .ml-20 {
        margin-left: 20px;
    }

    .ml-2e {
        margin-left: 2em;
    }

    .mt--25 {
        margin-top: -25px !important;
    }

    .mt-10 {
        margin-top: 10px !important;
    }

    .mt-20 {
        margin-top: 20px !important;
    }

    .mt-30 {
        margin-top: 30px !important;
        ;
    }

    .mt-50 {
        margin-top: 50px !important;
    }

    .mb-40 {
        margin-bottom: 40px !important;
    }

    .mb-20 {
        margin-bottom: 20px !important;
    }

    .mb-10 {
        margin-bottom: 10px;
    }

    .pd-5 {
        padding: 0 5px;
    }

    .w100 {
        width: 100%;
    }

    .mk-img {
        height: 100%;
    }

    .w90 {
        width: 90%;
    }


    .w80 {
        width: 80%;
    }


    .b0 {
        border: 0;
    }

    .tal-j {
        display: inline-block;
        width: 120px;
        text-align-last: justify;
    }


    sup {
        vertical-align: super;
        /* 保持上标对齐方式 */
        font-size: smaller;
        // position: relative; /* 相对于正常位置调整 */  
        // top: -0.2em; /* 根据需要调整这个值 */ 
    }

    .fz-13 {
        font-size: 13px !important;
    }

    .fz-14 {
        font-size: 14px !important;
    }

    .fz-15 {
        font-size: 15px !important;
    }

    .fz-16 {
        font-size: 16px !important;
    }

    .fz-18 {
        font-size: 18px !important;
    }

    .fm-kt {
        font-family: "kaiti" !important;
    }

    .fm-KH {
        font-family: "方正兰亭刊黑";
    }

    .fm-方正书宋 {
        font-family: "方正书宋";
    }

    .img-0 {
        width: 100%;
    }

    .pt-10 {
        padding-top: 10px;
    }

    .pt-20 {
        padding-top: 20px;
    }

    .td-0 {
        text-indent: 0em !important;
    }

    // .td-{

    // }

    .td-1 {
        text-indent: 1em !important;
    }

    .td-2 {
        text-indent: 2em !important;
    }

    .fl {
        display: flex;
    }

    .ju-cn {
        justify-content: center;
    }

    .ju-ev {
        justify-content: space-evenly;
    }

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

    .mr-70 {
        margin-right: 70px;
    }

    .mr-45 {
        margin-right: 45px;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .mr-5 {
        margin-right: 5px;
    }

    .ma-l {
        margin-left: 10%;
    }

    .ta-l {
        text-align: left !important;
    }

    .wh-no {
        white-space: nowrap;
    }

    .pad-t-55 {
        padding-top: 55px;
    }

    .pad-l-60 {
        padding-left: 60px;
    }

    .mb-25 {
        margin-bottom: 25px;
    }

    .mb-45 {
        margin-bottom: 45px;
    }

    .headerImg {
        width: 30px;
    }




    .headerText-bc {
        width: 70px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        background-color: #9CDCF8;
        border-radius: 15px;
    }

    .headerText {
        font-size: 12px;
        padding: 0 8px;
        color: #00AFEF;
    }

    .headerNumber {
        width: 110px;
        color: #fff;
        font-size: 12px;
        text-align: left;
        position: relative;
        padding-bottom: 5px;

        span {
            position: absolute;
            top: 33%;
            left: 25%;
        }
    }

    .header-left-Number {
        width: 50px;
        color: #fff;
        font-size: 12px;
        text-align: center;
        border-radius: 15px;
        position: relative;

        span {
            position: absolute;
            left: 56%;
            top: 35%;
            transform: translateX(-50%);
        }
    }

    .header-left-text {
        color: #00AFEF;
        margin-left: 8px;
        margin-top: 7px;
        font-size: 12px;
    }

    .radioClass {
        margin: 0 0 0 4px !important;

    }


    .task-u2-c {
        width: 16%;
        margin-bottom: 6em;
        margin-top: 0;
        border-top: 0.7em solid #F89C1C;
    }

    .task-u3-c {
        width: 16%;
        margin-bottom: 6em;
        margin-top: 0;
        border-top: 0.7em solid #0A9CAC;
    }

    .task-u4-c {
        width: 16%;
        margin-bottom: 6em;
        margin-top: 0;
        border-top: 0.7em solid #92B03D;
    }

    .task-u5-c {
        width: 16%;
        margin-bottom: 6em;
        margin-top: 0;
        border-top: 0.7em solid #0180CD;
    }

    .p-odd {
        padding-right: 2%;
    }

    .p-even {
        padding-left: 2%;
    }

    .img-float-smaller {
        width: 200px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;
    }

    .img-float-medium {
        width: 250px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;
    }



    .img-float {
        width: 310px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;

        p {
            margin: 0;
        }
    }


    .img-float-formula {
        width: 310px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;

        p {
            margin: 0;
        }
    }

    .img-rights {
        width: 47%;
        float: right;
        height: auto;
        margin: auto;
        margin-left: 20px;

        p {
            margin: 0;
        }
    }

    .references {
        margin-top: 140px;

        hr {
            font-weight: bold;
            margin-left: 0;
            width: 15%;
        }
    }

    .w430 {
        width: 430px;
    }

    .w395 {
        width: 395px;
    }

    .w365 {
        width: 365px;
    }


    .w300 {
        width: 300px;
    }

    .w290 {
        width: 290px;
    }

    .w280 {
        width: 280px;
    }

    .w270 {
        width: 270px;
    }

    .w260 {
        width: 260px;
    }

    .w250 {
        width: 250px;
    }

    .w230 {
        width: 230px;
    }

    .w220 {
        width: 220px;
    }

    .w210 {
        width: 210px;
    }

    .w200 {
        width: 200px;
    }

    .w190 {
        width: 190px;
    }

    .w180 {
        width: 180px;
    }

    .w170 {
        width: 170px;
    }

    .w160 {
        width: 160px;
    }

    .w150 {
        width: 150px;
    }

    .w140 {
        width: 140px;
    }

    .w135 {
        width: 135px;
    }

    .w130 {
        width: 130px;
    }

    .w120 {
        width: 120px;
    }

    .w115 {
        width: 115px;
    }

    .w55 {
        width: 55%;
    }

    .w40 {
        width: 40% !important;
    }

    .w25 {
        width: 25%;
    }

    .w20 {
        width: 20%;
    }

    .w15 {
        width: 15%;
    }

    .w10 {
        width: 10%;
    }


    .table-th-bc {
        color: #000;
        background-color: #C6EAFA;
        line-height: 25px;
        font-family: "方正中等线";
        font-weight: bold;

        p {
            font-family: "方正中等线";
        }
    }

    .table-tr-bc {
        font-family: "方正中等线";
        background-color: #E1F4FC;
        line-height: 25px;
        font-weight: 400;

        p {
            font-weight: 400;
            font-family: '方正中等线';
            font-size: 13.5px;
        }
    }

    .jc-img {
        margin-bottom: -5px;
        cursor: pointer;
    }

    sup {
        cursor: pointer;
    }

    .textarea-box {
        width: 100%;
        overflow: auto;
        word-break: break-all;
        resize: none;
        border: 1px solid #01AFEE;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0);
    }

    .table-title-bc {
        background-color: #8091BC;
        color: #fff;
        line-height: 25px;
    }

    .table-textarea {
        font-size: 14px;
        font-family: "Times New Roman", "宋体";
        resize: none;
        width: 95%;
        background-color: transparent;
        border: none;

        &:focus {
            outline: none;
        }
    }

    .table-input-border {
        width: 80%;
        background-color: transparent;
        border: 0;

        &:focus {
            outline: none;
        }
    }

    .table-input-border-w20 {
        width: 20%;
        background-color: transparent;
        border: 0;

        &:focus {
            outline: none;
        }
    }

    .table-input-border-w15 {
        width: 15%;
        background-color: transparent;
        border: 0;

        &:focus {
            outline: none;
        }
    }

    .table-input-border-w10 {
        width: 10%;
        background-color: transparent;
        border: 0;

        &:focus {
            outline: none;
        }
    }

    .table-input-border-w5 {
        width: 5%;
        background-color: transparent;
        border: 0;

        &:focus {
            outline: none;
        }
    }

    .input-bottom-border {
        width: 11%;
        background-color: transparent;
        border: 0;
        border-bottom: 1px solid #000;

        &:focus {
            outline: none;
        }
    }

    .input-bottom-border1 {
        width: 33%;
        background-color: transparent;
        border: 0;
        border-bottom: 1px solid #000;

        &:focus {
            outline: none;
        }
    }


    .input-bottom-border2 {
        width: 21.5%;
        background-color: transparent;
        border: 0;
        border-bottom: 1px solid #000;

        &:focus {
            outline: none;
        }
    }

    // 视频  
    .video-box-cover {
        border: 1px dashed #40C7F4;
        padding: 2% 2%;
    }

    .question-box {
        margin: 20px 0 20px 0;
        border: 1px solid #40C7F4;

    }

    .question-title {
        display: flex;
        align-content: center;
        justify-content: space-between;
        background-color: #c7eaf9;
    }

    .question-title-name {
        padding: 0 2%;
        display: flex;
        align-items: center;
        text-indent: 0em;
        margin: 0 !important;
        border-right: 1px solid #40C7F4;
        font-size: 16px !important;
        font-weight: bold;
    }

    .question-title-img {
        padding-right: 2%;
        text-indent: 0em;
        display: flex;
        align-items: center;
        font-size: 11px !important;
        cursor: pointer;
        span{
            color: #0071BD;
            height: 20px;
            word-wrap: normal;
        }
    }


    // .video-main{
    //     margin: 5% 5%;
    //     border: 1px dashed #40C7F4;
    // }

    .video-box-left {
        margin: 20px 8% 20px 0;
        border: 1px dashed #895B2E;
        padding: 2% 2%;
    }

    .videoname {
        display: flex;
        justify-content: center;
    }

    .sInput {
        width: 60px;
        border: 0;
        outline: none;
        text-align: center;
    }

    .collect-btn {
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin-left: 10px;
        margin-top: 0.3%;
    }

    .collect-btn1 {
        cursor: pointer;
        width: 10px;
        height: 10px;
        margin-left: 10px;
        margin-top: 0.8%;
    }

    // 续表
    .continued {
        text-align: right;
        margin: 0%;
        margin-right: 30px;
    }


    .text-rights {
        width: 230px;
        float: right;
        height: auto;
        margin: auto;
        margin-left: 20px;

        img {
            width: 100%;
        }

        p {
            margin: 0 !important;
        }
    }

    .dialogQuestion {
        background-color: #6E85AF;
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
            color: #fff;
            font-size: 20px;
            padding: 0 40px 0 20px;
            cursor: pointer;
        }
    }

    .pdf-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        p {
            margin: 0;
            margin-right: 10px;
        }

        .pdf-con {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 10px 0;
            box-sizing: border-box;
            border-radius: 10px;

            .pdf-view {
                min-width: 160px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 0.15em dashed #FAAD70;
                margin-right: 15px;
                padding: 0 15px;
                border-radius: 5px;

                span {
                    font-size: 14px;
                    text-align: center;
                    font-family: '方正兰亭细黑简体';
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    svg {
                        fill: #FAAD70;
                    }
                }

                span:nth-child(2) {
                    padding-top: 5px;
                    box-sizing: border-box;
                }

                span:hover {
                    color: #FAAD70;
                    cursor: pointer;
                    text-decoration: underline;
                    -webkit-user-select: none;
                    /* Safari 3.1+ */
                    -moz-user-select: none;
                    /* Firefox 2+ */
                    -ms-user-select: none;
                    /* IE 10+ */
                    user-select: none;
                    /* 标准语法 */
                }
            }
        }

        .pdf-con-15 {
            margin-top: -20px;
        }
    }

    div.bk-ztgs {
        border: 0.15em dotted #5192c6;
        padding: 1.5em 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: -1.2em;
    }


    .link-float {
        width: 120px;
        float: left;
        height: auto;
        margin: auto;
        margin-top: 12px;
        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 {
            margin: 0 !important;
            font-size: 14px !important;
            position: absolute !important;
            left: 50% !important;
            transform: translateX(-50%);
            bottom: -2% !important;
        }

        img {
            height: 80%;
        }
    }

    // 题目
    .textarea-box {
        background-color: transparent;
        max-width: 100%;
        min-width: 100%;
        outline: none;
    }

    .textarea-box-left {
        background-color: transparent;
        margin-left: 15%;
        max-width: 84%;
        min-width: 84%;
        outline: none;
    }

    .textarea-box-right {
        background-color: transparent;
        margin-left: 2em;
        margin-right: 9%;
        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;
        }
    }

    .inputChoice {
        display: flex;
        align-items: center;

        input {
            margin: 0 5px;
            cursor: pointer;
        }

        span {
            cursor: pointer;
        }
    }

    .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: #D4F0FE;
    }

    // 迁移
    .bk-bwh {
        min-height: 800px;
        font-size: 1.2em;
        padding: 25px;
    }

    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;
    }


    .page-box:nth-child(even) .bodystyle {
        font-family: '方正兰亭细黑简体';
        text-align: justify;
        margin: 0 10% 0 8%;
        padding-bottom: 80px;
        line-height: 30px;

        hr {
            font-weight: 800;
            margin-left: 0;
            margin-top: 10px;
            margin-bottom: 10px;
            width: 25%;
        }
    }

    .page-box:nth-child(odd) .bodystyle {
        font-family: '方正兰亭细黑简体';
        text-align: justify;
        margin: 0 8% 0 10%;
        padding-bottom: 80px;
        line-height: 30px;

        hr {
            font-weight: 800;
            margin-left: 0;
            margin-top: 10px;
            margin-bottom: 10px;
            width: 25%;
        }
    }


    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;
    }

    div.sgc-toc-level-1 {
        margin-left: 0em;
    }

    div.sgc-toc-level-2 {
        margin-left: 2em;
    }

    div.sgc-toc-level-3 {
        margin-left: 2em;
    }

    div.sgc-toc-level-4 {
        margin-left: 2em;
    }

    div.sgc-toc-level-5 {
        margin-left: 2em;
    }

    div.sgc-toc-level-6 {
        margin-left: 2em;
    }

    .imz {
        height: 96%;
        text-align: center;


    }

    .note {
        margin: 0;
        font-size: 12px;
        line-height: 22px;
        font-family: "方正书宋";
    }

    .block {
        font-family: "kaiti";
        margin-top: 0.2em;
        margin-bottom: 0.2em !important;
        text-indent: 2em;
        line-height: 30px;
        font-size: 14px;
        text-align: justify;
    }

    .block1 {
        text-align: center;
    }

    .block2 {
        line-height: 25px;
    }

    .block3 {
        line-height: 20px;
    }

    .img {
        font-family: '方正兰亭细黑简体';
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        margin: 5px 0 0 0 !important;
        text-indent: 0em;
        color: #000;
    }

    .img1 {
        font-family: '方正兰亭细黑简体';
        text-align: center;
        font-size: 11px;
        margin: 5px 0 0 0 !important;
        text-indent: 0em;
        color: #00ADEF;
    }


    p {
        font-family: '方正新报宋简体';
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        text-indent: 2em;
        line-height: 23px;
        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;
        line-height: 20px;
        margin-top: 20px;
    }

    .left3 {
        margin: 20 0 0 0 !important;
        line-height: 20px;
    }

    .left2 {
        font-size: 1.3em;
        text-indent: 0em;
        font-weight: bold;
        margin-left: 0%;
        margin-right: 0%;
    }

    .right {
        text-align: right;
        margin-left: 0%;
        margin-right: 4%;
    }

    .left1 {
        text-indent: 0em;
        margin-left: 0%;
        margin-right: 0%;
    }

    .center1 {
        text-align: center;
        margin-left: 0%;
        margin-right: 0%;
        font-size: 1.2em;
        text-indent: 0em;
        font-weight: bold;
    }

    .right1 {
        text-align: right;
        margin-left: 0%;
        margin-right: 0%;
    }

    .quote {
        margin-top: 0%;
        margin-bottom: 0%;
        margin-left: 1em;
        margin-right: 1em;
        text-align: justify;
        font-family: "cnepub", serif;
    }


    h1 {
        font-family: '方正粗圆';
        color: #01AFEE;
        font-weight: 400;
        font-size: 2em;
        text-align: center;
        text-indent: 0em;
    }

    .h1-zt {
        font-family: '方正粗圆';
        line-height: 45px;
        color: #01AFEE;
        font-weight: 400;
        font-size: 2.42em;
        margin-bottom: 20px;
        margin-top: -0.5em;
        text-indent: 0em;

    }

    h1.jz {
        text-align: center;
        text-indent: 0em;
    }

    .front {
        font-family: '方正兰亭中黑简体';
        font-weight: bold;
        font-size: 1.1em;
        color: #00ADEF;
        margin-top: 0.2em;
        margin-bottom: 0.5em;
        padding: 10% 0 0 0;
        text-indent: 0em;
        text-align: left;
    }


    h2 {
        font-family: '方正中粗雅宋';
        color: #00ADEF;
        font-weight: 800;
        font-size: 1.8em;
        margin-bottom: 0em;
        margin-top: 0.1em;
        text-indent: 3em;
        line-height: 1.3em;
    }

    .h2-zt {
        font-family: '方正中粗雅宋';
        color: #00ADEF;
        font-weight: 400;
        font-size: 1.4em;
        margin-top: 0em;
        text-indent: 3.3em;
        padding: 5px 0px 5px 0;
    }

    h3 {
        font-family: '方正中粗雅宋';
        color: #03AFED;
        font-weight: 800;
        font-size: 1.4em;
        margin-bottom: 2em;
        margin-top: 2em;
        text-indent: 0em;
    }

    h4 {
        font-family: '汉仪大宋';
        font-weight: 400;
        color: #03AFED;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        font-size: 1.2em;
        text-indent: 2em;
    }

    h5 {
        font-family: '方正准雅宋';
        font-weight: 100;
        color: #03AFED;
        margin-bottom: 0.2em;
        margin-top: 0.2em;
        font-size: 1.2em;
        text-indent: 0em;
    }

    .unit2-c {
        color: #F89C1C !important;
    }

    .unit3-c {
        color: #0A9CAC !important;
    }

    .unit4-c {
        color: #92B03D !important;
    }

    .unit5-c {
        color: #0180CD !important;
    }

    .zt-h6 {
        font-family: '方正黑体简体';
        color: #65C097;
        margin-bottom: 0.5em;
        margin-top: 1em;
        font-size: 1.15em;
        text-indent: 2em;
    }

    .bb {
        font-family: "cnepub", serif;
        font-family: '方正黑体简体';
        color: #66CCCC;
        font-size: 1.1em;
        margin-top: 10px;
        text-indent: 2em;
        margin-bottom: 10px;
        border-bottom: 5px dotted #F4C388;
        margin-left: 2em;
        margin-bottom: 0.5em;
        text-indent: 0em;
    }

    .u {
        text-decoration: underline;
    }

    .u {

        text-decoration: underline;
    }

    .img-0 {
        width: 100%;
    }

    .img-a {
        width: 96%;
    }

    .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-i {
        width: 10%;
    }

    .img-j {
        width: 5%;
    }

    .img-zt {
        height: 6em;
        margin-top: -1.5em;
        margin-bottom: -0.4em;
        margin-left: 15%;
    }

    .inline {
        height: 1em;
        margin-bottom: -0.3em;
    }

    .inline1 {
        height: 2.5em;
        margin-top: 0.5em;
        margin-bottom: -0.5em;
    }

    .inline2 {
        height: 1.5em;
        margin-top: 0.5em;
        margin-bottom: -0.5em;
    }

    .inline4 {
        height: 2em;
        margin-left: -2em;
        margin-right: 0.5em;
        margin-bottom: -0.6em;
    }

    .img-qj {
        height: 7.5em;
        margin-bottom: -3.4em;
        margin-right: 0.5em;
    }

    .ls1 {
        color: #00B1F5;
    }

    .zt-ls1 {
        color: #000;
        font-size: 16px;
        font-weight: bold;
    }


    .ls2 {
        color: #00B1F5;
        font-weight: bold;
        font-size: 1em;
        line-height: 30px;
    }

    span.lsyq-1 {
        background-color: #6D84AE;
        padding: 0.2em 0.4em 0.2em 0.4em;
        border-radius: 1.5em;
        margin-right: 0.5em;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.5em;
    }

    span.hsyq-1 {
        background-color: #FFB7D4;
        padding: 0.2em 0.4em 0.2em 0.4em;
        border-radius: 1.5em;
        margin-right: 0.5em;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.5em;

    }

    .zt-hs1 {
        font-weight: 500;
        color: #000;
        font-size: 1em;
    }

    .h2-zt1 {
        padding: 5px 25px 5px 25px;
        border-radius: 10px 0px 0px 10px;
        background-color: #5392C7;
        font-size: 1.2em;
        color: #FFFFFF;
    }

    .h2-zt2 {
        padding: 10px;
        background-color: #B1DDE0;
        margin-right: 2em;
        color: #FFFFFF;
        padding: 5px 50px 5px 25px;
        border-radius: 0px 5px 80px 0px;
        font-size: 1.2em;
    }



    div.bk {
        border: 2px solid #3FC6F6;
        box-shadow: 8px 8px 0px 0px #B0E2F9;
        padding: 20px 10px 10px 10px;
        margin-top: 2em;
        border-radius: 1.03em;
        margin-bottom: 1em;
        position: relative;

        p {
            font-size: 13px;
            line-height: 20px;
        }
    }

    div.bk1 {
        margin-top: -2em;
        margin-bottom: 1.5em;
        margin-left: -1.6em;
    }

    p.bj1-qjms {
        background-color: #fff;
        color: #FAAD70;
        font-weight: bold;
        border-radius: 1.5em;
        margin-left: 0em;
        text-align: center;
        text-indent: 0em;
        position: absolute;
        top: -19px;
    }

    .span-box {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #FAAD70;
    }

    .span-text {
        font-size: 16px;
        font-weight: 100;
        padding: 0em 0.15em 0em 0.3em;
    }


    .bj {
        background-color: #E1E7F3;
        padding: 0.2em 0.8em 0.2em 0.8em;
    }

    span.bj2 {
        background-color: #6E85AF;
        padding: 0.2em 1em 0.2em 1em;
        font-size: 1.1em;
        font-weight: bold;
        border-radius: 0.5em;
        color: #FFFFFF;
        box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
    }

    div.bk2 {
        background: #E2F4FE;
        border: 2px solid #3EC9F4;
        padding: 10px 10px 20px 10px;
        margin-top: 1em;
        margin-bottom: 1em;
        position: relative;

        p {
            font-family: "方正兰亭刊黑";
            font-size: 13.5px;
        }
    }

    .bk2::after {
        content: '';
        position: absolute;
        right: -2px;
        bottom: -2px;
        width: 0;
        height: 0;
        border-bottom: 20px solid #fff;
        /* 三角形的右边框 */
        border-left: 20px solid #3EC9F4;
        /* 三角形的底边框 */
        border-right: 0px solid #fff;
        /* 三角形的左边框 */
        display: block;
    }

    .bk2.show-after::after {
        display: none;
    }

    .zysx {
        margin-top: -1.7em;
        margin-left: -2em;
    }


    .zt-zysx {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        background-color: #24b8bc;
        border-radius: 1.5em;
        color: #FFFFFF;
        font-weight: bold;
        padding: 4px;
        font-size: 1.2em;
        box-shadow: 0.2em 0.2em 0px 0px #c1e3e4;
    }

    .zt-zysx1 {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        background-color: #96A7D5;
        border-radius: 1.5em;
        color: #FFFFFF;
        font-weight: 100;
        padding: 4px;
        font-size: 1.2em;
    }

    .zt-zysx2 {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        background-color: #0071BD;
        font-size: 1.2em;
    }

    .zt-1 {
        color: #6F84AF;
        font-weight: bold;
        font-size: 1.1em;
    }

    .bj1 {
        background-color: rgb(204, 236, 251);
        padding: 0.2em 0.5em 0.2em 0.5em;
        border-radius: 1em;
        margin-bottom: 2em;
        margin-left: 0.6em;
        box-shadow: 0 0 30px rgba(135 209 243);

        p {
            font-family: "方正兰亭刊黑";
        }
    }

    .title {
        width: 260px;
        height: 50px;
        text-align: center;
        margin: 0 auto;
        padding-top: 5%;
        position: relative;
    }

    div.bj2 {
        position: absolute;
        width: 260px;
        height: 45px;
        background-color: #9adbf9;
        border-radius: 1.5em;
        top: 8px;
        mix-blend-mode: multiply;
    }

    div.bj3 {
        position: absolute;
        width: 265px;
        height: 45px;
        background-color: #9ADBF9;
        border-radius: 1.5em;
    }

    .frontOne {
        font-family: "宋体";
        color: #fff;
        margin: 0 !important;
        font-size: 24px;
        position: absolute;
        width: 260px;
        height: 50px;
        line-height: 50px;
    }

    .rw-bg {
        width: 90%;
        height: 90px;
        position: relative;
        color: #7ed4f6;
        margin-bottom: 1em;
    }

    .bj4 {
        position: absolute;
        width: 55%;
        height: 85px;
        background-color: #C7EAFD;
        border-radius: 0 1em 1em 0;
    }

    .bj5 {
        position: absolute;
        width: 97%;
        height: 85px;
        background-color: #C7EAFD;
        border-radius: 0 1em 1em 0;
        top: 10px;
        mix-blend-mode: multiply;
    }

    span.bj3-xyx {
        background-color: #92B03E;
        color: #FFFFFF;
        border-radius: 1.5em;
        padding: 5px 20px 5px 20px;
        font-size: 1em;
        font-weight: bold;

    }

    div.bj3-xyx {
        position: absolute;
        top: -15px;
        left: -25px;

    }

    .f-kai {
        font-family: "kaiti";
    }


    .ts-1 {
        font-weight: bold;
    }

    .zt-h4 {
        padding: 10px 0;
        border-radius: 1.5em;
    }

    .qyls-h4 {
        font-family: "HiFont Hei GB";
        padding: 0.2em 0;
        text-indent: 0em;
        margin-left: 0%;
    }

    .bj6 {
        background-color: #FEDDB4;
        padding: 20px;
        border-radius: 0.5em;
        margin-bottom: 1.5em;
        margin-top: 1.5em;
        position: relative;

        .zt-cs {
            color: #F89C1C;
        }

    }

    span.bj6-xyx {
        background-color: #F89C1C;
        color: #FFFFFF;
        border-radius: 0.3em;
        padding: 5px 5px 5px 5px;
        font-size: 1em;
        font-weight: bold;

    }

    div.bj6-xyx {
        position: absolute;
        top: -20px;
    }

    .zt-lvs1 {
        color: #95B321;
    }

    div.bj-1 {
        color: #fff;
        border-radius: 2em;
        margin-bottom: 1.5em;
        margin-top: 1.5em;
    }

    .bj-2-zt {
        color: #fff;
        font-weight: 400;
        font-size: 24px;
        line-height: 1.8em;
    }

    .bj-1-zt {
        font-family: kaiti;
        font-weight: 100;
        text-indent: 2em;
        color: #fff;
        font-size: 15px;
        line-height: 1.8em;
    }

    .bj-3-zt {
        font-size: 16px;
        color: #fff;
        font-weight: 400;
        line-height: 1.8em;
    }

    .rwmb-1 {
        margin-left: -2.6em;
        margin-bottom: 0.5em;
        margin-top: 1em;
        height: 4em;
    }

    .rwmb-2 {
        margin-left: -2.3em;
        margin-bottom: -0.5em;
        margin-top: 0.2em;
        height: 2.3em;
    }

    .rwmb-3 {
        position: absolute;
        top: -11px;
        left: 5px;
        margin-bottom: 15px;
    }

    .rwmb-4 {
        position: absolute;
        top: -7px;
        left: 20px;
        margin-bottom: 15px;
    }

    .rwmb-5 {
        width: 15%;
        position: absolute;
        top: -10px;
        left: -2px;
    }

}

.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: '方正兰亭细黑简体';

                    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: '方正兰亭细黑简体';
                }
            }

            .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: '方正兰亭细黑简体';

            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: '方正兰亭细黑简体';
        }
    }
}

.examination {
    height: calc(100% - 50px);
    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: '方正兰亭细黑简体';

    span:nth-child(2):hover {
        cursor: pointer;
    }
}




//   @font-face {
//     font-family: '方正仿宋';
//     src: url('./Fonts/FZFSK.TTF');
//   }

//   @font-face {
//     font-family: '方正兰亭刊黑';
//     src: url('./Fonts/FZLTKHK.TTF');
//   }


//   @font-face {
//     font-family: '方正书宋';
//     src: url('./Fonts/FZSSK.TTF');
//   }

//   @font-face {
//     font-family: '方正细等线';
//     src: url('./Fonts/FZXDXK.TTF');
//   }


@font-face {
    font-family: '方正中等线';
    src: url('./Fonts/FZZDXK.TTF');
}

@font-face {
    font-family: '方正准雅宋';
    src: url('./Fonts/FZZYSJW.TTF');
}

@font-face {
    font-family: '汉仪大宋';
    src: url('./Fonts/hya4gjm.ttf');
}

@font-face {
    font-family: '方正新报宋简体';
    src: url('./Fonts/FZNBSJW.TTF');
}

@font-face {
    font-family: '方正兰亭中黑简体';
    src: url('./Fonts/FZLTZHJW.ttf');
}

@font-face {
    font-family: '方正兰亭细黑简体';
    src: url('./Fonts/FZLTXIHJW.ttf');
}

@font-face {
    font-family: '方正黑体简体';
    src: url('./Fonts/FZHTJW.ttf');
}



// 隐藏页面
.hidePage {
    min-height: 0 !important;
    height: 0 !important;
    box-shadow: none !important;
}

/* 媒体查询做基础响应式布局 */

@media screen and (max-width: 1024px) {
    .pdfModal {
        width: 100%;
        height: 80vh;
    }

    h1 {
        font-size: 1.1em;
    }

    .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) {
    .practicalCareChildrenManual {

        /* 分页padding */
        .padding-93 {
            padding: 0 20px;
        }

        .padding-102 {
            padding: 0 20px;
        }

        .page-box {
            min-height: 500px;
        }

        .img-float {
            width: 130px;
        }

        .img-rights {
            width: 130px;
        }

        .btn-w {
            width: 42px;
        }

        .pad-l-60 {
            padding-left: 10px;
        }

        .mr-70 {
            margin-right: 15px;
        }

        h1 {
            font-size: 1.1em;
        }
    }
}

@media (min-width: 660px) {
    .practicalCareChildrenManual {
        .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/practicalCareChildrenManual/assets/question.js

New file
@@ -0,0 +1,14 @@
const testData = {
  2: {
    15: [
      144366, 144368, 144369, 144371, 144373, 144375, 144377, 144378, 144379,
      144381, 144383, 144385, 144387, 144388, 144469, 144471, 144473, 144476,
      144477, 144481, 144488, 144491, 144493, 144496, 144508, 144509, 144510,
      144511, 144512, 144513, 144514, 144516, 144518, 144520, 144521, 144524,
      144526, 144527, 144529, 144530, 144531, 144534, 144537, 144538, 144540,
      144542,
    ],
  },
};

export default testData;

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

New file
@@ -0,0 +1,1255 @@
<template>
    <div class="chapter" num="2">
        <!-- 1页 -->
        <div class="page-box" page="4">
            <div v-if="showPageList.indexOf(4) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-25">
                    <li class="headerText-bc">模块一</li>
                    <li class="headerText">盥洗照护</li>
                    <li class="headerNumber">
                        <img class="img-0" src="../../assets/images/headerRight.png" alt="">
                        <span>1</span>
                    </li>
                </ul>
                <div class="rw-bg">
                    <div class="bj4">
                        <div class="bj5">
                            <h2 id="b001" class="">模块一</h2>
                            <h2 id="b001" class="">盥洗照护</h2>
                        </div>
                    </div>
                </div>
                <div class="bodystyle">
                    <h3 id="c001" class="center">实训项目一　洗手照护</h3>
                    <h4 id="d053">一、实训目的</h4>
                    <p>1.掌握七步洗手法的标准流程。</p>
                    <p>2.能进行婴幼儿洗手的指导。</p>
                    <p>3.体现婴幼儿洗手的回应性照护。</p>
                    <h4 id="d054">二、技能点</h4>
                    <p>1.七步洗手法。</p>
                    <p>2.婴幼儿洗手照护的指导流程。</p>
                    <p>3.回应性洗手的指导理念。</p>
                    <h4 id="d055">三、建议学时</h4>
                    <p>1学时。</p>
                    <h4 id="d056">四、实训设备及材料</h4>
                    <p>婴幼儿模型、洗手液、毛巾等。</p>
                    <h4 id="d057">五、操作流程及要求</h4>
                    <h5 id="e185">（一）七步洗手法的操作流程及要求</h5>
                    <p>七步洗手法的操作流程及要求见表1-1-1。</p>
                    <p class="img">表1-1-1　七步洗手法的操作流程及要求</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/i0006-01.png" /></p>
                </div>
            </div>
        </div>
        <!-- 2页 -->
        <div class="page-box" page="5">
            <div v-if="showPageList.indexOf(5) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-25">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>2</span>
                    </li>
                    <li class="header-left-text">婴幼儿照护实务实训指导手册</li>
                </ul>
                <div class="bodystyle">
                    <p class="continued fz-14">续表</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/i0006-02.png" /></p>
                    <checkVideo :videoPath="videoData[0].videoSrc" :videoName="videoData[0].videoNameSrc"
                        :BookId="bookIdSrc" :isCollectVideo="chapterData.isCollectVideo"
                        @saveVideoStatus="saveVideoStatus">
                    </checkVideo>
                    <h5 id="e186">（二）指导幼儿自主洗手的操作流程及要求</h5>
                    <p>指导幼儿自主洗手的操作流程及要求见表1-1-2。</p>
                    <p class="img">表1-1-2　指导幼儿自主洗手的操作流程及要求</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/i0007-2.jpg" /></p>
                    <h4 id="d058">六、注意事项</h4>
                    <p>1.保证洗手环境卫生、整洁、安全、舒适。</p>
                    <p>2.按照七步洗手法洗手需要保证每个环节都在15秒以上。</p>
                    <p>3.洗手后应尽量避免手部的二次污染。</p>
                    <p>4.指导幼儿洗手过程中注重与幼儿语言、动作和表情的交流，体现回应性照护。</p>
                </div>
            </div>
        </div>
        <!-- 3页 -->
        <div class="page-box" page="6">
            <div v-if="showPageList.indexOf(6) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-25">
                    <li class="headerText-bc">模块一</li>
                    <li class="headerText">盥洗照护</li>
                    <li class="headerNumber">
                        <img class="img-0" src="../../assets/images/headerRight.png" alt="">
                        <span>3</span>
                    </li>
                </ul>
                <div class="bodystyle">
                    <h4 id="d059">七、实训自评</h4>
                    <p>七步洗手法的实训自评表和指导幼儿自主洗手的实训自评表见表1-1-3和表1-1-4。</p>
                    <p class="img">表1-1-3　七步洗手法的实训自评表</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 img-0 mb-20 mt-10">
                        <tr class="table-th-bc">
                            <td class="center">评分项目</td>
                            <td class="center">评分标准</td>
                            <td class="center">分值</td>
                            <td class="center">得分</td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc w15">
                                准备工作
                            </td>
                            <td class="ta-l table-tr-bc w55">
                                <p class="td-0"> 1.将洗手液放在工作区域。</p>
                                <p class="td-0"> 2.打开水龙头，不要开得过大，水流适中。</p>
                                <p class="td-0"> 3.身体前倾，双手向下，挽好衣袖。</p>
                            </td>
                            <td class="ta-l center table-tr-bc w15">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableOne.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">操作流程</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">操作正确，流程完整。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">60</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableOne.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">结束工作</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">结束后及时将所有的操作物品归位。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableOne.three"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">注意事项</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">能完整叙述本实训项目的注意事项。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableOne.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">总体评价</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">1.动作流畅、完整。</p>
                                <p class="td-0">2.现场处理问题沉着冷静。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableOne.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc" colspan="2">总分</td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">100</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableOne.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">反思与收获</td>
                            <td class="ta-l table-tr-bc" colspan="3">
                                <textarea v-model="tableData.tableOne.seven" placeholder="请输入内容" rows="5"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                    </table>
                    <p class="img">表1-1-4　指导幼儿自主洗手的实训自评表</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 img-0 mt-10">
                        <tr class="table-th-bc">
                            <td class="center">评分项目</td>
                            <td class="center">评分标准</td>
                            <td class="center">分值</td>
                            <td class="center">得分</td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc w15">
                                准备工作
                            </td>
                            <td class="ta-l table-tr-bc w55">
                                <p class="td-0"> 1.将洗手液放在幼儿方便操作的位置。</p>
                                <p class="td-0"> 2.将毛巾和抹布挂好，并将毛巾放在幼儿能自主拿取的高度。</p>
                            </td>
                            <td class="ta-l center table-tr-bc w15">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableTwo.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">操作流程</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">操作正确，流程完整。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">60</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableTwo.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">结束工作</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">结束后及时将所有的操作物品归位。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableTwo.three"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">注意事项</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">能完整叙述本实训项目的注意事项。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableTwo.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">总体评价</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">1.指导流畅，体现回应性照护。</p>
                                <p class="td-0">2.现场处理问题沉着冷静。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableTwo.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc" colspan="2">总分</td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">100</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableTwo.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">反思与收获</td>
                            <td class="ta-l table-tr-bc" colspan="3">
                                <textarea v-model="tableData.tableTwo.seven" placeholder="请输入内容" rows="5"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 4页 -->
        <div class="page-box" page="7">
            <div v-if="showPageList.indexOf(7) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-25">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>4</span>
                    </li>
                    <li class="header-left-text">婴幼儿照护实务实训指导手册</li>
                </ul>
                <div class="bodystyle">
                    <h3 id="c001" class="center">实训项目二　面部清洁照护</h3>
                    <h4 id="d060">一、实训目的</h4>
                    <p>1.掌握婴幼儿面部清洁的安全要求。</p>
                    <p>2.掌握婴幼儿面部清洁的标准流程。</p>
                    <p>3.体现婴幼儿面部清洁回应性理念。</p>
                    <h4 id="d061">二、技能点</h4>
                    <p>1.面部清洁的安全要求。</p>
                    <p>2.面部清洁的顺序。</p>
                    <p>3.面部清洁的回应性照护。</p>
                    <h4 id="d062">三、建议学时</h4>
                    <p>1学时。</p>
                    <h4 id="d063">四、实训设备及材料</h4>
                    <p>婴幼儿模型、医用棉签、小毛巾等。</p>
                    <h4 id="d064">五、操作流程及要求</h4>
                    <p>面部清洁照护的操作流程及要求见表1-2-1。</p>
                    <p class="img">表1-2-1　面部清洁照护的操作流程及要求</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/i0009-01.png" /></p>
                </div>
            </div>
        </div>
        <!-- 5页 -->
        <div class="page-box" page="8">
            <div v-if="showPageList.indexOf(8) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-25">
                    <li class="headerText-bc">模块一</li>
                    <li class="headerText">盥洗照护</li>
                    <li class="headerNumber">
                        <img class="img-0" src="../../assets/images/headerRight.png" alt="">
                        <span>5</span>
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="continued fz-14">续表</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/i0009-02.png" /></p>
                    <checkVideo :videoPath="videoData[1].videoSrc" :videoName="videoData[1].videoNameSrc"
                        :BookId="bookIdSrc" :isCollectVideo="chapterData.isCollectVideoOne"
                        @saveVideoStatus="saveVideoStatus">
                    </checkVideo>
                    <h4 id="d065">六、注意事项</h4>
                    <p>1.操作时把小毛巾蘸湿，不要太湿，以不滴水为宜。</p>
                    <p>2.面部清洁手法要轻柔，不能强行擦拭。</p>
                    <p>3.婴幼儿不配合时，先暂停，安抚后再进行。</p>
                    <p>4.面部清洁过程中注重与婴幼儿语言、动作和表情的交流，体现回应性照护。</p>
                    <h4 id="d066">七、实训自评</h4>
                    <p>面部清洁照护的实训自评表见表1-2-2。</p>
                    <p class="img">表1-2-2　面部清洁照护的实训自评表</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 img-0 mt-10">
                        <tr class="table-th-bc">
                            <td class="center">评分项目</td>
                            <td class="center">评分标准</td>
                            <td class="center">分值</td>
                            <td class="center">得分</td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc w15">
                                准备工作
                            </td>
                            <td class="ta-l table-tr-bc w55">
                                <p class="td-0"> 1.物品准备齐全。</p>
                                <p class="td-0"> 2.将手部清洗干净。</p>
                                <p class="td-0"> 3.室内温度适宜。</p>
                            </td>
                            <td class="ta-l center table-tr-bc w15">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableThree.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">操作流程</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">操作正确，流程完整。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">60</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableThree.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">结束工作</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">结束后及时将所有的操作物品归位。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                        v-model="tableData.tableThree.three" @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">注意事项</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">能完整叙述本实训项目的注意事项。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                        v-model="tableData.tableThree.four" @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">总体评价</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">1.动作流畅、完整。</p>
                                <p class="td-0">2.现场处理问题沉着冷静。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                        v-model="tableData.tableThree.five" @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc" colspan="2">总分</td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">100</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableThree.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">反思与收获</td>
                            <td class="ta-l table-tr-bc" colspan="3">
                                <textarea v-model="tableData.tableThree.seven" placeholder="请输入内容" rows="5"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 6页 -->
        <div class="page-box" page="9">
            <div v-if="showPageList.indexOf(9) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-25">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>6</span>
                    </li>
                    <li class="header-left-text">婴幼儿照护实务实训指导手册</li>
                </ul>
                <div class="bodystyle">
                    <h3 id="c003" class="center">实训项目三　口腔清洁照护</h3>
                    <h4 id="d067">一、实训目的</h4>
                    <p>1.掌握婴幼儿口腔清洁前的准备工作。</p>
                    <p>2.掌握婴幼儿口腔清洁的操作流程。</p>
                    <p>3.体现婴幼儿口腔清洁的回应性照护。</p>
                    <h4 id="d068">二、技能点</h4>
                    <p>1.口腔清洁前的准备工作。</p>
                    <p>2.口腔清洁的操作流程。</p>
                    <p>3.口腔清洁的回应性照护。</p>
                    <h4 id="d069">三、建议学时</h4>
                    <p>1学时。</p>
                    <h4 id="d070">四、实训设备及材料</h4>
                    <p>婴幼儿模型、纱布、指套牙刷等。</p>
                    <h4 id="d071">五、操作流程及要求</h4>
                    <h5 id="e187">（一）1岁以下婴儿口腔清洁照护的操作流程及要求</h5>
                    <p>1岁以下婴儿口腔清洁照护的操作流程及要求见表1-3-1。</p>
                    <p class="img">表1-3-1　1岁以下婴儿口腔清洁照护的操作流程及要求</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/i0011-1.jpg" /></p>
                    <checkVideo :videoPath="videoData[2].videoSrc" :videoName="videoData[2].videoNameSrc"
                        :BookId="bookIdSrc" :isCollectVideo="chapterData.isCollectVideoTwo"
                        @saveVideoStatus="saveVideoStatus">
                    </checkVideo>
                </div>
            </div>
        </div>
        <!-- 7页 -->
        <div class="page-box" page="10">
            <div v-if="showPageList.indexOf(10) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-25">
                    <li class="headerText-bc">模块一</li>
                    <li class="headerText">盥洗照护</li>
                    <li class="headerNumber">
                        <img class="img-0" src="../../assets/images/headerRight.png" alt="">
                        <span>7</span>
                    </li>
                </ul>
                <div class="bodystyle">
                    <h5 id="e188">（二）1～3岁幼儿口腔清洁照护的操作流程及要求</h5>
                    <p>1～3岁幼儿口腔清洁照护的操作流程及要求见表1-3-2。</p>
                    <p class="img">表1-3-2　1～3岁幼儿口腔清洁照护的操作流程及要求</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/i0012-1.jpg" /></p>
                    <h4 id="d072">六、注意事项</h4>
                    <p>1.刷牙时长要控制在2～3分钟，每日早晚各一次。</p>
                    <p>2.刷牙的时间要固定，建议进食后半小时。</p>
                    <p>3.口腔清洁过程中注重与婴幼儿语言和表情的交流，体现回应性照护。</p>
                    <h4 id="d073">七、实训自评</h4>
                    <p>1岁以下婴儿口腔清洁照护的实训自评表和1～3岁幼儿口腔清洁照护的实训自评表见表1-3-3和表1-3-4。</p>
                    <p class="img">表1-3-3　1岁以下婴儿口腔清洁照护的实训自评表</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 img-0 mt-10">
                        <tr class="table-th-bc">
                            <td class="center">评分项目</td>
                            <td class="center">评分标准</td>
                            <td class="center">分值</td>
                            <td class="center">得分</td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc w15">
                                准备工作
                            </td>
                            <td class="ta-l table-tr-bc w55">
                                <p class="td-0">将婴儿抱到护理台上，并将纱布、指套牙刷等放在工作区域。</p>
                            </td>
                            <td class="ta-l center table-tr-bc w15">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFour.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">操作流程</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">操作正确，流程完整。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">60</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFour.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">结束工作</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">结束后及时将所有的操作物品归位。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                        v-model="tableData.tableFour.three" @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">注意事项</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">能完整叙述本实训项目的注意事项。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFour.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">总体评价</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">1.动作流畅、完整。</p>
                                <p class="td-0">2.现场处理问题沉着冷静。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFour.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc" colspan="2">总分</td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">100</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFour.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">反思与收获</td>
                            <td class="ta-l table-tr-bc" colspan="3">
                                <textarea v-model="tableData.tableFour.seven" placeholder="请输入内容" rows="5"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 8页 -->
        <div class="page-box" page="11">
            <div v-if="showPageList.indexOf(11) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-25">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>8</span>
                    </li>
                    <li class="header-left-text">婴幼儿照护实务实训指导手册</li>
                </ul>
                <div class="bodystyle">
                    <p class="img">表1-3-4 1～3岁幼儿口腔清洁照护的实训自评表</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 img-0 mt-10">
                        <tr class="table-th-bc">
                            <td class="center">评分项目</td>
                            <td class="center">评分标准</td>
                            <td class="center">分值</td>
                            <td class="center">得分</td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc w15">
                                准备工作
                            </td>
                            <td class="ta-l table-tr-bc w55">
                                <p class="td-0">手部清洁，将牙齿模型、牙刷杯、牙刷和含氟牙膏等放在工作区域。</p>
                            </td>
                            <td class="ta-l center table-tr-bc w15">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFive.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">操作流程</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">操作正确，流程完整。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">60</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFive.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">结束工作</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">结束后及时将所有的操作物品归位。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                        v-model="tableData.tableFive.three" @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">注意事项</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">能完整叙述本实训项目的注意事项。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFive.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">总体评价</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">1.动作流畅、完整。</p>
                                <p class="td-0">2.现场处理问题沉着冷静。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFive.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc" colspan="2">总分</td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">100</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFive.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">反思与收获</td>
                            <td class="ta-l table-tr-bc" colspan="3">
                                <textarea v-model="tableData.tableFive.seven" placeholder="请输入内容" rows="5"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                    </table>
                    <h3 id="c004" class="center">实训项目四　臀部清洁照护</h3>
                    <h4 id="d074">一、实训目的</h4>
                    <p>1.掌握婴幼儿臀部清洁前的准备工作。</p>
                    <p>2.掌握不同性别婴幼儿臀部清洁的操作流程。</p>
                    <p>3.体现婴幼儿臀部清洁的回应性照护。</p>
                    <h4 id="d075">二、技能点</h4>
                    <p>1.臀部清洁的准备工作。</p>
                    <p>2.臀部清洁的操作流程。</p>
                    <p>3.臀部清洁的回应性照护。</p>
                    <h4 id="d076">三、建议学时</h4>
                    <p>1学时。</p>
                    <h4 id="d077">四、实训设备及材料</h4>
                    <p>婴幼儿模型、洗手液、纱布等。</p>
                    <h4 id="d078">五、操作流程及要求</h4>
                    <p>臀部清洁照护的操作流程及要求见表1-4-1。</p>
                </div>
            </div>
        </div>
        <!-- 9页 -->
        <div class="page-box" page="12">
            <div v-if="showPageList.indexOf(12) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-25">
                    <li class="headerText-bc">模块一</li>
                    <li class="headerText">盥洗照护</li>
                    <li class="headerNumber">
                        <img class="img-0" src="../../assets/images/headerRight.png" alt="">
                        <span>9</span>
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="img">表1-4-1 臀部清洁照护的操作流程及要求</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/i0014-1.jpg" /></p>
                    <checkVideo :videoPath="videoData[3].videoSrc" :videoName="videoData[3].videoNameSrc"
                        :BookId="bookIdSrc" :isCollectVideo="chapterData.isCollectVideoThree"
                        @saveVideoStatus="saveVideoStatus">
                    </checkVideo>
                    <checkVideo :videoPath="videoData[4].videoSrc" :videoName="videoData[4].videoNameSrc"
                        :BookId="bookIdSrc" :isCollectVideo="chapterData.isCollectVideoFour"
                        @saveVideoStatus="saveVideoStatus">
                    </checkVideo>
                    <h4 id="d079">六、注意事项</h4>
                    <p>1.打开纸尿裤后，先用纸尿裤前端的干净部分擦拭臀部的粪便，预处理后再用湿纸巾擦拭。</p>
                    <p>2.由相对干净的地方朝向脏的地方擦拭，不来回擦。</p>
                    <p>3.男婴幼儿从出生到3岁前，包皮与龟头一直都是粘连的，不能上翻，表现为包皮过长或包茎，这是一种正常现象。</p>
                    <p>4.清洁女婴幼儿的外阴部，注意由前往后擦洗。</p>
                    <h4 id="d080">七、实训自评</h4>
                    <p>臀部清洁照护的实训自评表见表1-4-2。</p>
                </div>
            </div>
        </div>
        <!-- 10页 -->
        <div class="page-box" page="13">
            <div v-if="showPageList.indexOf(13) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-25">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>10</span>
                    </li>
                    <li class="header-left-text">婴幼儿照护实务实训指导手册</li>
                </ul>
                <div class="bodystyle">
                    <p class="img">表1-4-2 臀部清洁照护的实训自评表</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 img-0 mt-10">
                        <tr class="table-th-bc">
                            <td class="center">评分项目</td>
                            <td class="center">评分标准</td>
                            <td class="center">分值</td>
                            <td class="center">得分</td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc w15">
                                准备工作
                            </td>
                            <td class="ta-l table-tr-bc w55">
                                <p class="td-0">1.环境准备适宜。</p>
                                <p class="td-0">2.物品准备齐全。</p>
                                <p class="td-0">3.手部清洁消毒。</p>
                                <p class="td-0">4.提前测试水温。</p>
                            </td>
                            <td class="ta-l center table-tr-bc w15">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableSix.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">操作流程</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">操作正确，流程完整。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">60</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableSix.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">注意事项</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">能完整叙述本实训项目的注意事项。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">20</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableSix.three"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">总体评价</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">1.动作流畅、完整。</p>
                                <p class="td-0">2.现场处理问题沉着冷静。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableSix.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc" colspan="2">总分</td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">100</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableSix.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">反思与收获</td>
                            <td class="ta-l table-tr-bc" colspan="3">
                                <textarea v-model="tableData.tableSix.six" placeholder="请输入内容" rows="5"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                    </table>
                    <h3 id="c005" class="center">实训项目五　身体清洁照护</h3>
                    <h4 id="d081">一、实训目的</h4>
                    <p>1.掌握婴幼儿身体清洁前的准备工作。</p>
                    <p>2.掌握婴幼儿身体清洁的操作流程。</p>
                    <p>3.体现婴幼儿身体清洁的回应性照护。</p>
                    <h4 id="d082">二、技能点</h4>
                    <p>1.身体清洁的准备工作。</p>
                    <p>2.身体清洁的操作流程。</p>
                    <p>3.身体清洁的回应性照护。</p>
                    <h4 id="d083">三、建议学时</h4>
                    <p>1学时。</p>
                    <h4 id="d084">四、实训设备及材料</h4>
                    <p>婴幼儿模型、浴巾、棉签等。</p>
                    <h4 id="d085">五、操作流程及要求</h4>
                    <p>身体清洁照护的操作流程及要求见表1-5-1。</p>
                </div>
            </div>
        </div>
        <!-- 11页 -->
        <div class="page-box" page="14">
            <div v-if="showPageList.indexOf(14) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-25">
                    <li class="headerText-bc">模块一</li>
                    <li class="headerText">盥洗照护</li>
                    <li class="headerNumber">
                        <img class="img-0" src="../../assets/images/headerRight.png" alt="">
                        <span>11</span>
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="img">表1-5-1 身体清洁照护的操作流程及要求</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/i0016-1.jpg" /></p>
                    <checkVideo :videoPath="videoData[5].videoSrc" :videoName="videoData[5].videoNameSrc"
                        :BookId="bookIdSrc" :isCollectVideo="chapterData.isCollectVideoFive"
                        @saveVideoStatus="saveVideoStatus">
                    </checkVideo>
                    <h4 id="d086">六、注意事项</h4>
                    <p>1.婴幼儿沐浴于喂奶后1小时进行，以免呕吐和溢乳。</p>
                    <p>2.如果婴幼儿的臀部有大便，则洗净臀部后再放入浴盆沐浴。</p>
                    <p>3.为婴幼儿洗头时，不能用指甲抓洗头部，也不能强行剥去婴幼儿头部的皮脂。</p>
                </div>
            </div>
        </div>
        <!-- 12页 -->
        <div class="page-box" page="15">
            <div v-if="showPageList.indexOf(15) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-25">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>12</span>
                    </li>
                    <li class="header-left-text">婴幼儿照护实务实训指导手册</li>
                </ul>
                <div class="bodystyle">
                    <h4 id="d087">七、实训自评</h4>
                    <p>身体清洁照护的实训自评表见表1-5-2。</p>
                    <p class="img">表1-5-2 身体清洁照护的实训自评表</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 img-0 mt-10">
                        <tr class="table-th-bc">
                            <td class="center">评分项目</td>
                            <td class="center">评分标准</td>
                            <td class="center">分值</td>
                            <td class="center">得分</td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc w15">
                                准备工作
                            </td>
                            <td class="ta-l table-tr-bc w55">
                                <p class="td-0">环境准备、自身准备、物品准备、水温合适。</p>
                            </td>
                            <td class="ta-l center table-tr-bc w15">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableSeven.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">操作流程</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">操作正确，流程完整。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">60</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableSeven.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">注意事项</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">能完整叙述本实训项目的注意事项。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">20</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                        v-model="tableData.tableSeven.three" @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">总体评价</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">1.动作流畅、完整。</p>
                                <p class="td-0">2.现场处理问题沉着冷静。</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">10</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                        v-model="tableData.tableSeven.four" @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc" colspan="2">总分</td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">100</p>
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                        v-model="tableData.tableSeven.five" @change="setBookQuestion" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-tr-bc">反思与收获</td>
                            <td class="ta-l table-tr-bc" colspan="3">
                                <textarea v-model="tableData.tableSeven.six" placeholder="请输入内容" rows="5"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                    </table>
                    <div class="question-box">
                        <div class="question-title">
                            <p class="question-title-name">
                                题库: {{ chapter001.question[1].questionTitleMain }}
                            </p>
                            <p class="question-title-img" @click="openQuestion(1)">
                                <img :src=questionIcon alt="">
                                <span>练习</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <dialogExaminations :isClear="dialogVisibleOne" :primaryColor="themeColor"
            :cardList="interfaceQuestion[questionNum]" v-if="interfaceQuestion" :chapter="2" :page="questionNum"
            :questionTitle="questionTitleMain" ref="dialogRef">
        </dialogExaminations>
    </div>
</template>

<script>
import checkVideo from "@/components/checkVideo/index.vue";
import dialogExaminations from "@/components/dialogExaminations/index.vue";
export default {
    name: "chapterOne",
    props: {
        showPageList: {
            type: Array,
        },
        interfaceQuestion: {
            type: Object,
        },
    },
    components: {
        checkVideo,
        dialogExaminations
    },
    data() {
        return {
            questionIcon: require("../../assets/images/icon/lianxi.png"),
            bookIdSrc: this.config.activeBook.bookId,
            videoData: [
                {
                    videoSrc: "EABEB668DFE955B0DC3ABB3122A3B6EC",
                    videoNameSrc: "七步洗手法",
                },
                {
                    videoSrc: "11B38C9694A54E9296D052DBBF7BD99C",
                    videoNameSrc: "面部清洁的流程",
                },
                {
                    videoSrc: "F60948EAB7B9A40A9A5CBD7042D8C509",
                    videoNameSrc: "刷牙指导",
                },
                {
                    videoSrc: "5EFDFD4AA4CD1C4BBC8F508A1D02CB9E",
                    videoNameSrc: "男童臀部清洁的流程",
                },
                {
                    videoSrc: "4E5831A929878FB5A62FDB84840095E3",
                    videoNameSrc: "女童臀部清洁的流程",
                },
                {
                    videoSrc: "B4EDCD6EEAD4195DBA09E10AD721D7DF",
                    videoNameSrc: "身体清洁的流程",
                },
            ],
            chapterData: {
                isCollectVideo: false,
                isCollectVideoOne: false,
                isCollectVideoTwo: false,
                isCollectVideoThree: false,
                isCollectVideoFour: false,
                isCollectVideoFive: false,
            },
            tableData: {
                tableOne: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                },
                tableTwo: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                },
                tableThree: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                },
                tableFour: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                },
                tableFive: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                },
                tableSix: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                },
                tableSeven: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                },
            },
            // 题目相关
            dialogVisibleOne: false,
            themeColor: "#03AFED",
            questionNum: 0,
            questionTitleMain: "",
            chapter001: {
                question: {
                    1: {
                        questionTitleMain: "盥洗照护",
                        questionNum: 15,
                    },
                },
            },
        };
    },
    mounted() {
        const bookQuestion = localStorage.getItem("practicalCareChildrenManual-book-chapter01-tableData");
        if (bookQuestion) {
            this.tableData = JSON.parse(bookQuestion);
        }

        const choiceQuestion = localStorage.getItem("practicalCareChildrenManual-book-chapter001-video");
        if (choiceQuestion) {
            this.chapterData = JSON.parse(choiceQuestion);
        }
    },
    methods: {
        saveVideoStatus() {
            this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
            localStorage.setItem(
                "practicalCareChildrenManual-book-chapter001-video",
                JSON.stringify(this.chapterData)
            );
        },
        setBookQuestion() {
            localStorage.setItem(
                "practicalCareChildrenManual-book-chapter01-tableData",
                JSON.stringify(this.tableData)
            );
        },
        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></style>

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

New file
@@ -0,0 +1,61 @@
<template>
    <div class="chapter" num="1">
        <div class="page-box mt-20" page="1" style="padding-bottom: 0px">
            <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="padding-bottom: 0px">
            <div v-if="showPageList.indexOf(2) > -1">
                <img class="img-0" alt="" src="../../assets/images/0002-1.jpg" />
            </div>
        </div>
        <!-- 介绍页面 -->
        <div class="page-box" page="3">
            <div v-if="showPageList.indexOf(3) > -1">
                <div style="max-width: 400px; margin: 0 10%; padding: 50% 0 10% 0">
                    <p><b>图书在版编目（CIP）数据</b></p>
                    <p>婴幼儿照护实务/赵青主编.—北京：北京师范大学出版社，2023.8（2025.1重印）</p>
                    <p>ISBN 978-7-303-28456-6</p>
                    <p>Ⅰ.①婴… Ⅱ.①赵… Ⅲ.①婴幼儿-哺育-高等职业教育-教材 Ⅳ.①TS976.31</p>
                    <p>中国版本图书馆CIP数据核字（2022）第242759号</p>
                    <hr class="img-0" />
                    <p class="td-0">出版发行：北京师范大学出版社：https//www.bnupg.com</p>
                    <p class="td-0 fz-14 block3">　　　　　北京市西城区新街口外大街12-3号</p>
                    <p class="td-0 fz-14 block3">　　　　　邮政编码：100088</p>
                    <p class="td-0 fz-14 block3">印　　刷：优奇仕印刷河北有限公司</p>
                    <p class="td-0 fz-14 block3">经　　销：全国新华书店</p>
                    <p class="td-0 fz-14 block3">开　　本：889mm×1194mm 1/16</p>
                    <p class="td-0 fz-14 block3">印　　张：4</p>
                    <p class="td-0 fz-14 block3">字　　数：84千字</p>
                    <p class="td-0 fz-14 block3">版　　次：2023年8月第1版</p>
                    <p class="td-0 fz-14 block3">印　　次：2025年1月第3次印刷</p>
                    <p class="td-0 fz-14 block3">定　　价：59.80元（含实训指导手册）</p>
                    <hr class="img-0" />
                    <p class="td-0">策划编辑：罗佩珍　　　　　　　责任编辑：宋星</p>
                    <p class="td-0">美术编辑：焦丽　　　　　　　　装帧设计：焦丽</p>
                    <p class="td-0">责任校对：陈荟　申立莹　　　　责任印制：赵龙</p>
                    <p class="td-0"><b>版权所有　侵权必究</b></p>
                    <p class="td-0 fz-10">读者服务电话：010-58806806</p>
                    <p class="td-0 fz-10">如发现印装质量问题，影响阅读，请联系印制管理部：010-58800608</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "pageHeader",
    props: {
        showPageList: {
            type: Array,
        },
    },
    data() {
        return {};
    },
};
</script>

<style lang="less" scoped></style>

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

New file
@@ -0,0 +1,1008 @@
<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(3) > -1"
        :showPageList="loadPageList"
      ></chapterTwo>
      <chapterThree
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
      <chapterFive
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
      <chapterSix v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList" >
      </chapterSix>
      <chapterSeven  v-if="showCatalogList.indexOf(8) > -1"
        :showPageList="loadPageList" >
      </chapterSeven> -->
    </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 chapterSix from "./chapter006.vue";
// import chapterSeven from "./chapter007.vue";
import NoteIcon from "@/assets/images/biji.png";
import getQuestionList from "@/assets/methods/examination";
import testData from "../../assets/question";
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
        : 14;
    },
    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, 15);
    //   //   setTimeout(() => {
    //   //     this.renderSign("Highlight", {
    //   //       id: "2ACA9359",
    //   //       txt: "题一学习主题一 运动",
    //   //       page: "10",
    //   //       type: "Highlight",
    //   //       color: "#F5E12A"
    //   //     });
    //   // setTimeout(() => {
    //   //   this.delSign({
    //   //     ids: ["2ACA9359"]
    //   //   });
    //   // }, 2000);
    // }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
    //   .querySelectorAll(".page-box");
    // 检索
    // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
    // 检索跳转
    // this.searchItemLocation({
    //   catalog: 2,
    //   page: 10,
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    // }, 500);
  },
  methods: {
    // 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,
        // chapterSix,
        // chapterSeven
      };
      // 遍历所有章节文件
      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) {
              setTimeout(()=>{
                playVudio.requestPictureInPicture();
              },0)
            }
          } 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,
    // chapterSix,
    // chapterSeven
  },
};
</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/practicalCareChildrenManual/view/index.vue

New file
@@ -0,0 +1,80 @@
<template>
    <div class="practicalCareChildrenManual" @mouseup="handleMouseUp">
      <pageContent></pageContent>
    </div>
  </template>
  
  <script>
  import pageContent from "./components/index.vue";
  export default {
    name: "practicalCareChildrenManual",
    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/view/components/header.vue

@@ -81,7 +81,7 @@
                            根据教育评价改革的新形势和现实需要，本次对如下方面的内容做了修订。</p>
                        <p class="fm-fzfs">1. 将党的二十大报告中有关学前教育评价的内容渗透到教材中。二十大报告提出加快建设高质量教育体系，发展素质教育，促进教育公平;还提出加强师德师风建设，培养高素质教师队伍。高质量教育体系离不开高素质教师队伍，本次修订特别关注了第八章幼儿教师发展评价，对第一节幼儿教师评价的指导思想、第三节幼儿教师专业知识评价均做了理念和知识上的修改;在第二节幼儿教师专业理念与师德评价中增加“陕甘宁边区保育院时期教师对幼儿态度与行为的评价”和“陕甘宁边区保育院时期对教师态度和修养的评价”两个案例;在第四节幼儿教师专业能力评价中增加“陕甘宁边区保育院时期对教师激励与评价能力的评价”和“陕甘宁边区保育院时期对教师反思与发展能力的评价”两个案例。同时，在第五章第三节观察与评价资料的收集中增加如何观察与评价大班幼儿积木建构游戏的案例，在第七章学前儿童发展评价中增加全面评价3~6岁幼儿发展检核表等。这些修订内容旨在引起大家对提升幼儿教师素质，强化师德师风建设，提高准幼儿教师分析问题、解决问题从而形成系统方法论能力的重视，以落实党的二十大有关教育精神。
                        </p>
                        <p class="fm-fzfs">2. 将《总体方案》和《评估指南》中的有关要求融入教材的相应章节。《总体方案》提出幼儿园教师评价突出保教实践，把以游戏为基本活动促进儿童主动学习和全面发展的能力作为关键指标。这一要求在第七章学前儿童发展评价和第八章幼儿教师发展评价中均有体现;《评估指南》的指导思想、基本原则、评估方式等在第一章学前教育评价概述、第五章学前教育评价资料收集、第六章学前教育评价资料统计与分析中体现突出，《评估指南》中五个方面的
                        <p class="fm-fzfs">2. 将《总体方案》和《评估指南》中的有关要求融入教材的相应章节。《总体方案》提出幼儿园教师评价突出保教实践，把以游戏为基本活动促进儿童主动学习和全面发展的能力作为关键指标。这一要求在第七章学前儿童发展评价和第八章幼儿教师发展评价中均有体现;《评估指南》的指导思想、基本原则、评估方式等在第一章学前教育评价概述、第五章学前教育评价资料收集、第六章学前教育评价资料统计与分析中体现突出，《评估指南》中五个方面的评估内容在教材的第三篇评价实践篇中重点贯彻。
                        </p>
                    </div>
                </div>
@@ -97,9 +97,6 @@
                    <img class="header-left-img" src="../../assets/images/yemei-left.png" alt="">
                </ul>
                <div style="padding: 0 0 10% 0; margin: 0 16%;">
                    <p class="td-0 fm-fzfs">
                        评估内容在教材的第三篇评价实践篇中重点贯彻。
                    </p>
                    <p class="fm-fzfs">3. 将原来的纸质版教材改为融媒体教材。本次修订增加二维码资源，涉及重要知识点微视频讲授、拓展知识等。这样的修改便于授课教师把握重要知识点，方便教师进行课程教学设计，也有利于同学们借助二维码资源进行拓展学习
                    </p>
                    <p class="fm-fzfs">4. 增加全国统考幼儿园教师资格考试真题以及全国幼儿教师技能大赛真题。本次修订在各个章节中增加了考试真题或大赛真题，并结合知识点对真题进行了分析，便于同学们学习时领会，灵活掌握课程教学知识。</p>
@@ -126,8 +123,6 @@
                        </p>
                        <p class="fm-fzfs">本书由评价理论篇、评价技术篇和评价实践篇构成。评价理论篇由第一章、第二章和第三章组成，评价技术篇由第四章、第五章和第六章组成，评价实践篇由第七章、第八章和第九章组成。评价理论篇着重对学前教育评价的产生与发展、意义与作用、原则、类型，主要理论基础和理论模式进行概述；评价技术篇着重围绕学前教育评价方案编制、评价资料收集与统计分析进行阐述，目的在于帮助学生初步掌握开展学前教育评价的方法；评价实践篇着重对学前教育发展中的核心要素——学前儿童发展、幼儿教师发展和幼儿园管理工作进行评价，试图将国家新颁布的有关学前教育的政策内容融入其中。总体来看，本书凸显出如下几个方面的特点。
                        </p>
                        <p class="fm-fzfs">第一，全面反映国家发展学前教育的新政策、新要求。全书在编写过程中
                        </p>
                    </div>
                </div>
            </div>
@@ -142,8 +137,8 @@
                    <img class="header-left-img" src="../../assets/images/yemei-left.png" alt="">
                </ul>
                <div style="padding: 0 0 10% 0; margin: 0 16%;">
                    <p class="td-0 fm-fzfs">
                        始终坚持以国家近几年新颁布的有关学前教育的政策文件为指导，各种评价方案的编制尽可能反映国家的相关要求，如对学前儿童身心发展诸方面的评价紧紧围绕《3—6岁儿童学习与发展指南》（以下简称《指南》）进行，《指南》的思想精神是指导我们开展学前儿童评价的依据；对幼儿教师专业发展的评价依托《幼儿园教师专业标准（试行）》中对幼儿教师提出的专业理念与师德、专业知识和专业能力三个方面的内容展开；对幼儿园管理工作的评价结合《学前教育督导评估暂行办法》《幼儿园教职工配备标准（暂行）》《托儿所幼儿园卫生保健管理办法》《幼儿园收费管理暂行办法》《幼儿园工作规程》等一系列有关幼儿园管理工作的政策文件；相关板块还融合了最新的教师资格考试大纲的要求，力图最大限度地反映国家发展学前教育的新精神。
                    <p class="fm-fzfs">
                        第一，全面反映国家发展学前教育的新政策、新要求。全书在编写过程中始终坚持以国家近几年新颁布的有关学前教育的政策文件为指导，各种评价方案的编制尽可能反映国家的相关要求，如对学前儿童身心发展诸方面的评价紧紧围绕《3—6岁儿童学习与发展指南》（以下简称《指南》）进行，《指南》的思想精神是指导我们开展学前儿童评价的依据；对幼儿教师专业发展的评价依托《幼儿园教师专业标准（试行）》中对幼儿教师提出的专业理念与师德、专业知识和专业能力三个方面的内容展开；对幼儿园管理工作的评价结合《学前教育督导评估暂行办法》《幼儿园教职工配备标准（暂行）》《托儿所幼儿园卫生保健管理办法》《幼儿园收费管理暂行办法》《幼儿园工作规程》等一系列有关幼儿园管理工作的政策文件；相关板块还融合了最新的教师资格考试大纲的要求，力图最大限度地反映国家发展学前教育的新精神。
                    </p>
                    <p class="fm-fzfs">第二，理论与实践密切结合。评价理论是指导评价实践的依据和先导，缺乏理论指导的实践可能沦为盲目的实践；反之，没有实践根基的理论也只能被视为空洞的理论。本教材在编写过程中时刻注意将理论指导与实践应用结合起来。比如，本教材论述了系统理论对学前教育评价的指导、量表理论和检验理论在学前教育评价中的具体应用、各种评价模式在学前教育实践中的具体运用，对学前教育评价类型的分析也基于大量的实践案例，学前教育评价方案的编制、评价资料的收集与处理也都凸显了理论与实践的结合。
                    </p>

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

@@ -172,7 +172,7 @@

    // 测试页面跳转
    setTimeout(() => {
      this.gotoPage(11, 290);
      this.gotoPage(2, 18);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",
@@ -935,7 +935,11 @@
        const topGap = playVudio.getBoundingClientRect().top;
        if (bottomGap < 0 || topGap > window.innerHeight) {
          try {
            if (playVudio.readyState) playVudio.requestPictureInPicture();
            if (playVudio.readyState) {
              setTimeout(()=>{
                playVudio.requestPictureInPicture();
              },0)
            }
          } catch (error) {
            console.log(error, "小窗错误error");
          }

 src/books/toddlerGameImplementation/assets/main.less

@@ -278,9 +278,6 @@
    width: 30px;
  }




  .headerText-bc {
    width: 70px;
    color: #fff;

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

@@ -191,22 +191,22 @@
    }, 500);

    // 测试页面跳转
    setTimeout(() => {
      this.gotoPage(8, 183);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",
      //       txt: "题一学习主题一 运动",
      //       page: "10",
      //       type: "Highlight",
      //       color: "#F5E12A"
      //     });
      // setTimeout(() => {
      //   this.delSign({
      //     ids: ["2ACA9359"]
      //   });
      // }, 2000);
    }, 500);
    //   this.gotoPage(1, 5);
    //   //   setTimeout(() => {
    //   //     this.renderSign("Highlight", {
    //   //       id: "2ACA9359",
    //   //       txt: "题一学习主题一 运动",
    //   //       page: "10",
    //   //       type: "Highlight",
    //   //       color: "#F5E12A"
    //   //     });
    //   // setTimeout(() => {
    //   //   this.delSign({
    //   //     ids: ["2ACA9359"]
    //   //   });
    //   // }, 2000);
    // }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")

 src/components/checkVideo/index.vue

New file
@@ -0,0 +1,191 @@
<template>
    <div class="video-box">
        <div class="video-title">
            <p class="video-title-name">
                配套视频: {{ videoName }}
            </p>
            <p class="video-title-img">
                <img @click="isDisplay = !isDisplay" :src=videoIcon alt="">
                <el-tooltip class="item" effect="dark" :content="localIsCollectVideo ? '点击取消' : '点击收藏'"
                    placement="top-start">
                    <img :src="collectResourceList.findIndex(
                        (item) => item.id == videoPath
                    ) > -1
                        ? collectCheck
                        : collectImg
                        " alt="" class="collect-btn" @click="handleCollect()" />
                </el-tooltip>
            </p>
        </div>
        <div class="video-main" v-if="isDisplay">
            <video :src="videoPathSrc" 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>

        </div>
    </div>
</template>

<script>
import { getResourcePath } from "@/assets/methods/resources";
import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
export default {
    data() {
        return {
            videoIcon: require("../../assets/images/videoLogo.png"),
            collectCheck: require("../../assets/images/heart-check.png"),
            collectImg: require("../../assets/images/heart.png"),
            videoPathSrc: "",
            collectResourceList: [],
            localIsCollectVideo: this.isCollectVideo,
            isDisplay: true,
        };
    },
    props: {
        videoPath: {
            type: String,
            required: "",
        },
        videoName: {
            type: String,
            required: "",// 默认值
        },
        BookId: {
            type: String,
            required: "",// 默认值
        },
        isCollectVideo: {
            type: Boolean,
            required: false,// 默认值
        }
    },
    computed: {
        // currentQuestion() {
        //     return this.questions[this.currentIndex];
        // },
        // setHoverStyles() {
        //     return {
        //         "--hover-bg-color": this.hoverBackgroundColor,
        //         "--hover-color": this.hoverColor,
        //     };
        // },
        // mergedStyles() {
        //     // 合并直接样式和计算属性样式
        //     return {
        //         borderColor: this.primaryColor,
        //         ...this.setHoverStyles,
        //     };
        // },
    },
    async mounted() {
        this.getVidoePath();
        this.collectResourceList = await getCollectResource(
            this.BookId
        );
    },
    methods: {
        async getVidoePath() {
            this.videoPathSrc = await getResourcePath(
                this.videoPath
            );
            debugger
        },

        handleCollect() {
            this.handleCollectResource(
                this.videoPath,
                this.videoPath,
                "",
                "视频",
                "bits",
                "视频：" + this.videoName
            );
            this.localIsCollectVideo = !this.localIsCollectVideo;
            this.$emit('saveVideoStatus')
        },
        //资源收藏事件
        // 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.BookId,
                this.collectResourceList
            );
        },
    },
};
</script>

<style lang="less" scoped>
.video-box {
    margin: 20px 0 20px 0;
    border: 1px solid #40C7F4;

}

.video-title {
    display: flex;
    justify-content: space-between;
    background-color: #c7eaf9;
    border-bottom: 1px solid #40C7F4;
    min-height: 25px;
}

.video-title-name {
    padding: 0 2%;
    display: flex;
    text-indent: 0em;
    margin: 0 !important;
    border-right: 1px solid #40C7F4;
}

.video-title-img {
    padding-right: 2%;
    text-indent: 0em;
    display: flex;

    img {
        cursor: pointer;
    }
}

.video-main {
    margin: 5% 5%;
    border: 1px dashed #40C7F4;
}

.collect-btn {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-top: 0.3%;
}

.w100 {
    width: 100%;
}

</style>