字体更改

zhongshujie

2024-10-23 97eb19017a3f43d3fa1210b8be54807d1ec9de81

字体更改

 src/App.vue

@@ -10,6 +10,7 @@
    <mathBook v-if="activeBook.name == 'mathBook'"></mathBook>
    <botany v-if="activeBook.name == 'botany'"></botany>
    <civilAviation v-if="activeBook.name == 'civilAviation'"></civilAviation>
    <civilAviationServices v-if="activeBook.name == 'civilAviationServices'"></civilAviationServices>
  </div>
</template>

@@ -26,7 +27,8 @@
    mathBook: () => import("./books/mathBook/view/index.vue"),
    artAndDrama: () => import("./books/artAndDrama/view/index.vue"),
    botany: () => import("./books/botany/view/index.vue"),
    civilAviation: () => import("./books/civilAviation/view/index.vue")
    civilAviation: () => import("./books/civilAviation/view/index.vue"),
    civilAviationServices: () =>import("./books/civilAviationServices/view/index.vue"),
  },
  data() {
    return {
@@ -64,6 +66,7 @@
      // artAndDrama
      // mathBook
      // civilAviation
      // civilAviationServices
      this.activeBook = await this.config.getBookConfig(
      process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"

 src/books/civilAviation/assets/main.less

@@ -28,7 +28,11 @@
    }

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

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

    .mb-10 {
@@ -695,6 +699,19 @@
        text-indent: 0em;
    }



    .left{
        text-indent: 0em;
        margin: 0 !important;
        line-height: 20px;
    }

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

    .left2 {
        font-size: 1.3em;
        text-indent: 0em;

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

@@ -1,7 +1,7 @@
<template>
    <div class="chapter" num="1">
        <!-- 封面 -->
        <div class="page-box mt-20" page="1" style="min-height: auto">
        <div class="page-box mt-30" page="1" style="min-height: auto">
            <div v-if="showPageList.indexOf(1) > -1">
                <img class="img-0" alt="" src="../../assets/images/fengmian.png" />
            </div>
@@ -17,38 +17,40 @@
            <div v-if="showPageList.indexOf(3) > -1">
                <div style="max-width: 400px; margin: 0 auto; padding: 10% 0;">
                    <hr />
                    <p><b>图书在版编目（CIP）数据</b></p>
                    <p>民航概论/魏全斌主编.—2版.—北京：北京师范大学出版社，2024.8</p>
                    <p>ISBN 978-7-303-29412-1</p>
                    <p>Ⅰ.①民… Ⅱ.①魏… Ⅲ.①民用航空-教材 Ⅳ.①V2②F56</p>
                    <p>中国国家版本馆CIP数据核字（2023）第195092号</p>
                    <p class=""><b>图书在版编目（CIP）数据</b></p>
                    <p class="left3 block mr-0">民航概论/魏全斌主编.—2版.—北京：北京师范大学出版社，2024.8</p>
                    <p class="left3 block">ISBN 978-7-303-29412-1</p>
                    <p class="left3 block mt-20">Ⅰ.①民… Ⅱ.①魏… Ⅲ.①民用航空-教材 Ⅳ.①V2②F56</p>
                    <p class="left3 block">中国国家版本馆CIP数据核字（2023）第195092号</p>
                    <hr />
                    <p><br /></p>
                    <p class="left">教材意见反馈　zhijiao@bnupg.com</p>
                    <p class="left">营销中心电话　010-58802755 58800035</p>
                    <p class="left">编辑部电话　　010-58802751</p>
                    <p><br /></p>
                    <p><br /></p>
                    <p class="left block mt-20">教材意见反馈　zhijiao@bnupg.com</p>
                    <p class="left block">营销中心电话　010-58802755 58800035</p>
                    <p class="left block">编辑部电话　　010-58802751</p>
                    <hr />
                    <p class="left">出版发行：北京师范大学出版社 www.bnupg.com</p>
                    <p class="left">　　　　　北京市西城区新街口外大街12-3号</p>
                    <p class="left">　　　　　邮政编码：100088</p>
                    <p class="left">印　　刷：优奇仕印刷河北有限公司</p>
                    <p class="left">经　　销：全国新华书店</p>
                    <p class="left">开　　本：889mm×1194mm　1/16</p>
                    <p class="left">印　　张：14.5</p>
                    <p class="left">字　　数：245千字</p>
                    <p class="left">版　　次：2024年8月第2版</p>
                    <p class="left">印　　次：2024年8月第1次印刷</p>
                    <p class="left">定　　价：45.00元</p>
                    <p class="left block">出版发行：北京师范大学出版社 www.bnupg.com</p>
                    <p class="left block">　　　　　北京市西城区新街口外大街12-3号</p>
                    <p class="left block">　　　　　邮政编码：100088</p>
                    <p class="left block">印　　刷：优奇仕印刷河北有限公司</p>
                    <p class="left block">经　　销：全国新华书店</p>
                    <p class="left block">开　　本：889mm×1194mm　1/16</p>
                    <p class="left block">印　　张：14.5</p>
                    <p class="left block">字　　数：245千字</p>
                    <p class="left block">版　　次：2024年8月第2版</p>
                    <p class="left block">印　　次：2024年8月第1次印刷</p>
                    <p class="left block">定　　价：45.00元</p>
                    <hr />
                    <p class="left">策划编辑：王云英　责任编辑：安　健</p>
                    <p class="left">美术编辑：焦　丽　装帧设计：焦　丽</p>
                    <p class="left">责任校对：陈　民　责任印制：马　洁　赵　龙</p>
                    <p class="center"><b>版权所有　侵权必究</b></p>
                    <p class="center"><b>反盗版、侵权举报电话：010-58800697</b></p>
                    <p class="center">北京读者服务部电话：010-58808104</p>
                    <p class="center">外埠邮购电话：010-58808083</p>
                    <p class="center">本书如有印装质量问题，请与印制管理部联系调换。</p>
                    <p class="center">印制管理部电话：010-58808284</p>
                    <p class="left block">策划编辑：王云英　　　责任编辑：安　健</p>
                    <p class="left block">美术编辑：焦　丽　　　装帧设计：焦　丽</p>
                    <p class="left block">责任校对：陈　民　　　责任印制：马　洁　赵　龙</p>
                    <p class=" center mt-20"><b>版权所有　侵权必究</b></p>
                    <p class="left center"> <b>反盗版、侵权举报电话：</b><span class="block">010-58808104</span></p>
                    <p class="left center block">北京读者服务部电话：010-58808104</p>
                    <p class="left center block">外埠邮购电话：010-58808083</p>
                    <p class="left center block">本书如有印装质量问题，请与印制管理部联系调换。</p>
                    <p class="left center block">印制管理部电话：010-58808284</p>
                </div>

            </div>
@@ -63,11 +65,11 @@
                        <p class="center"><span class="zt-ls1">主　任</span></p>
                        <p class="block fz-14">魏全斌　四川西南航空职业学院 荣誉院长、研究员</p>
                        <p class="block fz-14">　　　　四川泛美教育投资集团有限责任公司 董事长</p>
                        <p class="center mt-20"><span class="zt-ls1">副主任</span></p>
                        <p class="center mt-30"><span class="zt-ls1">副主任</span></p>
                        <p class="block fz-14">杨新湦　中国民航大学 副校长、教授</p>
                        <p class="block fz-14">叶　耒　中国商用飞机有限责任公司四川分公司 总经理助理、人力资源部部长</p>
                        <p class="block fz-14">王海涛　成都航空有限公司 人力资源部总经理</p>
                        <p class="center mt-20"><span class="zt-ls1">委　员</span></p>
                        <p class="center mt-30"><span class="zt-ls1">委　员</span></p>
                        <p class="block fz-14">郭润夏　中国民航大学 教授</p>
                        <p class="block fz-14">陈玉华　成都航空职业技术学院 教授</p>
                        <p class="block fz-14">裴明学　四川西南航空职业学院 院长、研究员</p>

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

Binary files differ

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

Binary files differ

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

Binary files differ

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

 src/books/civilAviationServices/assets/images/fengdi.png

 src/books/civilAviationServices/assets/images/fengmian.png

 src/books/civilAviationServices/assets/main.less

@@ -0,0 +1,1358 @@
.civilAviationServices-book {
    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;
    }

    .c-g{
        color: green;
    }

    .c-r{
        color: red;
    }

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

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

    .mt-20 {
        margin-top: 30px;
    }

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

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

    .w100 {
        width: 100%;
    }

    .w80 {
        width: 80%;
    }

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

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

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

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


    .img-0 {
        width: 100%;
    }

    .img-c {
        width: 70%;
    }

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

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

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

    .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-10 {
        margin-right: 10px;
    }

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

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

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

    .headerImg {
        width: 30px;
    }

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

    .headerNumber {
        color: #231F20;
        font-size: 12px;
        padding: 0 8px;
        border-left: 1px solid #231F20;
    }

    .header-left-Number {
        color: #231F20;
        font-size: 12px;
        padding-right: 8px;
        border-right: 1px solid #000;
    }

    .header-left-text {
        margin-left: 8px;
        font-size: 12px;
        color: #fff;
        background-color: #0082D4;
    }

    .table-tr-bc {
        color: #fff;
    }

    .task {
        width: 12%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #5192C6;
    }

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

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

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

        img {
            width: 100%;
        }

        p {
            margin: 0;
        }
    }

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

        img {
            width: 100%;
        }

        p {
            margin: 0 !important;
        }
    }

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

        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 #895B2E;
                margin-right: 15px;
                padding: 0 15px;
                border-radius: 5px;
                margin-top: 15px;

                span {
                    font-size: 14px;
                    text-align: center;
                    font-family: 'FZLTXIHJW';
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    svg {
                        fill: #895B2E;
                    }
                }

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

                span:hover {
                    color: #895B2E;
                    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: 0.5em;
        margin-bottom: 2em;
        margin-top: 2em;
        border-radius: 1em;
        position: relative;
    }

    p.bj1-ztgs {
        background-color: #5192c6;
        color: #ffffff;
        display: inline-block;
        font-size: 1em;
        padding: 0.1em 0.7em 0.12em 0.7em;
        font-weight: bold;
        border-radius: 0em;
        margin-left: 0em;
        text-align: center;
        text-indent: 0em;
        position: absolute;
        top: -2em;
    }


    .link-float {
        width: 120px;
        float: left;
        height: auto;
        margin: auto;
        margin-top: 12px;
        margin-right: 20px;
    }

    .imgBox-003 {
        width: 100%;
        height: 280px;
        margin-bottom: 18px;
    }

    // 题目
    .textarea-box {
        background-color: transparent;
        margin-left: 80px;
        max-width: 85%;
        min-width: 85%;
        outline: none;
    }

    .textarea-focused {
        border-color: #5192c6 !important;
        box-shadow: #5192c6 !important;
    }

    .select-border {
        width: 60px;
        border: 0;
        border-bottom: 1px solid #767676;

        &:focus {
            outline: none;
        }
    }

    .btn-border {
        border-radius: 6px;
        border-color: #5192C6;
    }

    .btn-w {
        cursor: pointer;
        font-size: 14px;
        border-width: 1px;
        width: 80px;
        height: 30px;
        background-color: #fff;

        &:hover {
            background-color: #5192C6;
            color: #fff;
        }
    }

    .parimary-btn {
        cursor: pointer;
        min-width: 80px;
        height: 30px;
        font-size: 14px;
        margin-left: 5px;
        background-color: #5192C6;
        border-color: #5192C6;
        border-width: 1px;
        color: #fff;
        border-radius: 6px;

        &:hover {
            background-color: #a1afc8;
            border-color: #a1afc8;
        }
    }

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

    // 迁移
    .bk-bwh {
        min-height: 800px;
        background-color: #DFEBF7;
        font-size: 1.2em;
        padding: 25px;
        border: 4px dotted #197ABF;
    }

    ul {
        list-style-type: none;
    }

    li {
        list-style-type: none;
    }

    .custom_tag2 {
        background-color: #F1BE49;
        color: #FFFFFF;
        display: inline-block;
        padding: 0.5px;
        border-radius: 1.5em;
        font-size: 1.1em;
        padding: 2px 10px 2px 10px;
        font-weight: bold;
        margin: 0;
        text-indent: 0em;
        margin-bottom: 0.5em;
    }

    .custom_tag1 {
        background-color: #35ACD6;
        color: #FFFFFF;
        display: inline-block;
        padding: 1px;
        font-size: 1.1em;
        padding: 3px 10px 3px 10px;
        font-weight: bold;
        box-shadow: 15px 0px 0px 0px #F5D83E, -15px 0px 0px 0px #F5D83E;
        margin: 0;
        text-indent: 0em;
        margin-bottom: 0.5em;
    }

    .custom_tag {
        background-color: #35509F;
        color: #FFFFFF;
        display: inline-block;
        padding: 1px;
        border-radius: 1.5em;
        font-size: 1.1em;
        padding: 10px 20px 10px 20px;
        font-weight: bold;
        box-shadow: 30px 0px 0px 0px #F5D83E;
        margin: 0;
        text-indent: 0em;
        margin-bottom: 0.5em;
    }


    span.under1 {
        border-bottom: 2px solid #F0BD4A;
        border-width: 2px;

    }

    div.bodycontent-div-center {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        margin: 1em 1em 1em 1em;
        font-weight: normal;
        border-width: 1.5px;
        border-color: #dfb27d;
        padding: 1em;
    }

    img.bodycontent-divcenter-image {
        float: center;
        clear: both;
        height: 140px;
        margin: 15px;
    }

    .module_block {
        display: flex;
        font-size: 1.1em;
        position: relative;
        padding-left: 90px;
        justify-content: center;
        align-items: center;
        margin-right: 91px;
    }

    .module_block .custom1 {
        background-color: #9ACC77;
        padding: 10px 20px;
        color: #FFFFFF;
        /* position: absolute; */
        /* left:0; */
        /* top: 50%; */
        border-radius: 0.5em 0em 0em 0.5em;
        /* transform: translateY(-50%); */
    }

    .module_block .custom2 {
        background-color: #E9F3E0;
        padding: 10px 20px;
        color: #75A64E;
        font-weight: bold;
        border-radius: 0em 0.5em 0.5em 0em;
    }



    div.bodycontent-div-left1 {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        margin: 1em 1em 1em 1em;
        font-weight: normal;
        border-width: 1.5px;
        border-color: #dfb27d;
        padding: 1em;
        background-color: #F0F8FF;
    }

    div.bodycontent-div-left {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        margin: 1em 1em 1em 1em;
        font-weight: normal;
        border-width: 1.5px;
        border-color: #dfb27d;
        padding: 1em;
    }

    img.bodycontent-divright-image {
        float: right;
        clear: both;
        height: 140px;
        margin: 15px;
    }

    img.bodycontent-divleft-image {
        float: left;
        clear: both;
        height: 110px;
        margin: 15px;
    }


    div.bodystyle {
        font-family: 'FZLTXIHJW';
        text-align: justify;
        margin: 0 82px;
        padding-bottom: 80px;
        line-height: 30px;
    }

    // .bodystyle-left{
    //     margin: 0 120px 0 82px;
    //     padding-bottom: 80px;
    // }

    // .bodystyle-right{
    //     font-family: 'FZLTXIHJW';
    //     font-size: 18px;
    //     text-align: justify;
    //     margin: 0 82px 0 120px;
    //     padding-bottom: 80px;
    //     line-height: 30px;
    // }

    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 {
        font-size: 0.85em;
    }


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

    .block1 {
        text-align: center;
    }

    .img {
        font-family: 'FZLTXIHJW';
        text-align: center;
        font-size: 0.85em;
        margin-left: 0%;
        margin-right: 0%;
        text-indent: 0em;
    }

    .img1 {
        font-family: 'FZLTXIHJW';
        text-align: right;
        font-size: 0.85em;
        margin-left: 0%;
        margin-right: 2em;
        text-indent: 0em;
    }


    p {
        font-family: "宋体";
        margin-top: 0.2em;
        margin-bottom: 0.2em !important;
        text-indent: 2em;
        line-height: 30px;
        // font-size: 18px;
        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;
    }

    .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: 0%;
    }

    .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: 'FZLTZHJW';
        font-weight: 100;
        font-size: 2em;
        color: #F0855B;
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        text-indent: 0em;
    }

    .front {
        font-family: 'FZLTZHJW';
        font-weight: 400;
        font-size: 1.1em;
        color: #000;
        margin-top: 1.5em;
        margin-bottom: 3em;
        text-indent: 0em;
        text-align: center;
    }


    h2 {
        font-family: 'FZLTZHJW';
        line-height: 2em;
        font-weight: bold;
        color: #5192C6;
        font-size: 1.3em;
        margin-bottom: 0.5cm;
        margin-top: 0.5cm;
    }

    h3 {
        font-family: 'FZHTJW';
        color: #5192C6;
        font-weight: 300;
        font-size: 1.2em;
        margin-top: 1.5em;
        margin-bottom: 5px;
        text-indent: 0em;
    }

    h4 {
        font-family: 'FZHTJW';
        color: #5192C6;
        font-weight: 400;
        font-size: 1.1em;
        margin-bottom: 1.2em;
        margin-top: 1.2em;
        margin-left: 0em;
        text-indent: 0em;
    }

    h5 {
        font-family: 'FZHTJW';
        color: #5192C6;
        text-align: left;
        font-weight: 400;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        font-size: 0.9em;
        text-indent: 0em;
    }

    h6 {

        font-family: 'FZHTJW';
        font-weight: bold;
        margin-bottom: 0.5em;
        margin-top: 2em;
        font-size: 1em;
        text-indent: 2em;
    }

    .zt-h6 {

        font-family: 'FZHTJW';
        color: #65C097;
        margin-bottom: 0.5em;
        margin-top: 1em;
        font-size: 1.15em;
        text-indent: 2em;
    }

    .bb {

        font-family: "cnepub", serif;
        font-family: 'FZHTJW';
        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;
    }

    .img-0 {
        width: 100%;
    }

    .img-a {
        width: 95%;
    }

    .img-b {
        width: 70%;
    }

    .img-c {
        width: 60%;
    }

    .img-d {
        width: 50%;
    }

    .img-e {
        width: 45%;
    }

    .img-f {
        width: 40%;
    }

    .img-g {
        width: 30%;
    }

    .img-h {
        width: 20%;
    }

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

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

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

    span.lsyq-1 {
        background-color: #0082D4;
        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;
    }

    .bk {
        border: 0.15em dotted #5593C6;
        padding: 0.5em;
        margin-bottom: 2em;
        margin-top: 0.5em;
        border-radius: 1em;
        position: relative;
    }


    p.bj1-qjms {
        background-color: #5392C7;
        color: #FFFFFF;
        display: inline-block;
        font-size: 1em;
        padding: 0.1em 0.7em 0.12em 0.7em;
        font-weight: bold;
        border-radius: 1.5em;
        margin-left: 0em;
        text-align: center;
        text-indent: 0em;
        position: absolute;
        top: -2em;
    }

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

    .bj2 {
        background-color: #3D8B9F;
        padding: 0.2em 0.8em 0.2em 0.8em;
        font-size: 1.3em;
        font-weight: bold;
        border-radius: 0.5em;
        color: #FFFFFF;
    }

    .bj3 {
        background-color: #FDE6BC;
        padding: 20px;
        border-radius: 1.5em;
        margin-bottom: 2em;
        margin-top: 2.5em;
    }

    span.bj3-xyx {
        background-color: #F5A101;
        color: #FFFFFF;
        box-shadow: 0.3em 0.3em 0px 0px #FDF0D8;
        border-radius: 1.5em;
        padding: 5px 20px 5px 20px;
        font-size: 1em;
        font-weight: bold;

    }

    div.bj3-xyx {
        margin-top: -3em;
        margin-bottom: 1.5em;
        margin-left: -3em;
    }

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

    .zt-h4 {
        background-color: #F0BD40;
        padding: 10px;
        color: #FFFFFF;
        margin-left: -2em;
        border-radius: 1.5em;
    }

    .qyls-h4 {
        font-family: "HiFont Hei GB";
        color: #6CB26C;
        font-weight: bold;
        padding: 0.2em;
        text-indent: 0em;
        margin-left: 0%;
    }

    .bj4 {
        background-color: #D7E2F0;
        padding: 10px 20px;
        border-radius: 0.1em;
        margin-bottom: 2em;
        margin-top: 1em;
    }

    div.bj4-xyx {
        font-size: 18px;
        color: #fff;
        line-height: 20px;
        padding: 12.5px 15px 12.5px 15px;
        margin-right: 10px;
        background-color: #5192C6;
        border-radius: 5px;
    }

    .bj4-xyx-icon {
        color: #5192C6;
    }

    .bj5 {
        background-color: #F0F3E2;
        padding: 20px;
        border-radius: 0.1em;
        margin-bottom: 2em;
        margin-top: 2.5em;
    }

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

    }

    div.bj5-xyx {
        margin-top: -3em;
        margin-bottom: 1.5em;
        margin-left: -2.5em;
    }

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

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

    .bj-1-zt {
        color: #fff;
        font-weight: 400;
        font-size: 1.2em;
        line-height: 1.8em;
    }

}

.pdfModal {
    width: 100%;
    height: 90vh;

    .pdfBox-component {
        width: 100%;
        height: 100%;
        position: relative;

        .preview {
            width: 100%;
            height: 100%;

            .imageBox {
                height: calc(100% - 30px);
                overflow-x: hidden;
                overflow-y: auto;
                background: #ccc;
                box-sizing: border-box;
            }

            .imageBox:hover {
                cursor: zoom-in !important;
            }

            ::v-deep .el-dialog__header {
                background-color: rgba(0, 0, 0, 0.8);

                .header_title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #fff;
                    font-weight: 900;
                    font-size: 16px;
                    font-family: 'FZLTXIHJW';

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

                ::v-deep .el-dialog__title,
                ::v-deep .el-dialog__headerbtn .el-dialog__close {
                    color: #fff;
                    font-weight: 900;
                    font-size: 16px;
                    font-family: 'FZLTXIHJW';
                }
            }

            .bottom_tool {
                height: 30px;
                background-color: rgba(0, 0, 0, 0.8);
                display: flex;
                justify-content: flex-end;
                align-items: center;

                svg {
                    margin-right: 15px;
                    fill: #d1d1d1;
                }

                svg:hover {
                    fill: #fff;
                    cursor: pointer;
                }
            }
        }

        .notBox {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(100% - 30px);
            min-height: 300px;
        }
    }
}

.custom-dialog {
    overflow: hidden !important;

    .el-dialog__body {
        padding: 0;
    }

    .el-dialog__header {
        background-color: rgba(0, 0, 0, 0.8);

        .header_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-weight: 900;
            font-size: 16px;
            font-family: 'FZLTXIHJW';

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

        .el-dialog__title,
        .el-dialog__headerbtn .el-dialog__close {
            color: #fff;
            font-weight: 900;
            font-size: 16px;
            font-family: 'FZLTXIHJW';
        }
    }
}

.header_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // color: #fff;
    font-weight: 900;
    font-size: 16px;
    font-family: 'FZLTXIHJW';

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


@font-face {
    font-family: 'FZLTZHJW';
    src: url('./Fonts/FZLTZHJW.ttf');
}

@font-face {
    font-family: 'FZLTXIHJW';
    src: url('./Fonts/FZLTXIHJW.ttf');
}

@font-face {
    font-family: 'FZHTJW';
    src: url('./Fonts/FZHTJW.ttf');
}

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

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

    .custom-dialog {
        .el-dialog {
            width: 90vw !important;
        }
    }
}

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

    .custom-dialog {
        .el-dialog {
            width: 90vw !important;
        }
    }
}

@media (max-width: 660px) {
    .civilAviationServices-book {

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

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


        .img-float {
            width: 130px;
        }
        .img-rights {
            width: 130px;
        }
        .btn-w{
            width: 42px;
        }
    }
}

@media (min-width: 660px) {
    .civilAviationServices-book {
        .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/civilAviationServices/view/components/header.vue

@@ -0,0 +1,195 @@
<template>
    <div class="chapter" num="1">
        <!-- 封面 -->
        <div class="page-box mt-20" page="1" style="min-height: auto">
            <div v-if="showPageList.indexOf(1) > -1">
                <img class="img-0" alt="" src="../../assets/images/fengmian.png" />
            </div>
        </div>
        <!-- 扉页 -->
        <div class="page-box" page="2" style="min-height: auto">
            <div v-if="showPageList.indexOf(2) > -1">
                <img class="img-0" alt="" src="../../assets/images/feiye.png" />
            </div>
        </div>
        <!-- 介绍页面 -->
        <div class="page-box" page="3">
            <div v-if="showPageList.indexOf(3) > -1">
                <div style="max-width: 400px; margin: 0 auto; padding: 10% 0; font-size: 16px;">
                    <hr />
                    <p><b>图书在版编目（CIP）数据</b></p>
                    <p>民航服务心理与实务/贺继明，何梅主编.—2版.—北京：北京师范大学出版社，2024.8</p>
                    <p>ISBN 978-7-303-29413-8</p>
                    <p>Ⅰ.①民… Ⅱ.①贺…②何… Ⅲ.①民用航空-旅客运输-商业心理学-高等职业教育-教材 Ⅳ.①F560.9</p>
                    <p>中国国家版本馆CIP数据核字（2023）第203791号</p>
                    <hr />
                    <p><br /></p>
                    <p class="left mr-0">教材意见反馈　zhijiao@bnupg.com</p>
                    <p class="left mr-0">营销中心电话　010-58802755 58800035</p>
                    <p class="left mr-0">编 辑 部 电 话　010-58802751</p>
                    <hr />
                    <p class="left">MINHANG FUWU XINLI YU SHIWU</p>
                    <p class="left">出版发行：北京师范大学出版社 www.bnupg.com</p>
                    <p class="left">　　　　　北京市西城区新街口外大街12-3号</p>
                    <p class="left">　　　　　邮政编码：100088</p>
                    <p class="left">印　　刷：唐山市玺诚印务有限公司</p>
                    <p class="left">经　　销：全国新华书店</p>
                    <p class="left">开　　本：889mm×1194mm　1/16</p>
                    <p class="left">印　　张：13</p>
                    <p class="left">字　　数：199千字</p>
                    <p class="left">版　　次：2024年8月第2版</p>
                    <p class="left">印　　次：2024年8月第1次印刷</p>
                    <p class="left">定　　价：45.00元</p>
                    <hr />
                    <p class="left">策划编辑：王云英　　责任编辑：朱冉冉</p>
                    <p class="left">美术编辑：焦　丽　　装帧设计：焦　丽</p>
                    <p class="left">责任校对：陈　荟　　责任印制：马　洁　赵　龙</p>
                    <p class="center"><b>版权所有 侵权必究</b></p>
                    <p class="center"><b>反盗版、侵权举报电话：010-58800697</b></p>
                    <p class="center">北京读者服务部电话：010-58808104</p>
                    <p class="center">外埠邮购电话：010-58808083</p>
                    <p class="center">本书如有印装质量问题，请与印制管理部联系调换。</p>
                    <p class="center">印制管理部电话：010-58808284</p>
                </div>

            </div>
        </div>
        <!-- 介绍页面 -->
        <div class="page-box" page="4">
            <div v-if="showPageList.indexOf(4) > -1">
                <div style="max-width: 600px; margin: 0 auto;padding: 10% 0;">
                    <div class="bk-bwh">
                        <h1 id="a003" class="front">职业教育航空运输类专业“产教融合”新形态教材专家指导委员会</h1>
                        <p class="center"></p>
                        <p class="center"><span class="zt-ls1">主　任</span></p>
                        <p class="block fz-14">魏全斌　四川西南航空职业学院 荣誉院长、研究员</p>
                        <p class="block fz-14">　　　　四川泛美教育投资集团有限责任公司 董事长</p>
                        <p class="center mt-20"><span class="zt-ls1">副主任</span></p>
                        <p class="block fz-14">杨新湦　中国民航大学 副校长、教授</p>
                        <p class="block fz-14">叶　耒　中国商用飞机有限责任公司四川分公司 总经理助理、人力资源部部长</p>
                        <p class="block fz-14">王海涛　成都航空有限公司 人力资源部总经理</p>
                        <p class="center mt-20"><span class="zt-ls1">委　员</span></p>
                        <p class="block fz-14">郭润夏　中国民航大学 教授</p>
                        <p class="block fz-14">陈玉华　成都航空职业技术学院 教授</p>
                        <p class="block fz-14">裴明学　四川西南航空职业学院 院长、研究员</p>
                        <p class="block fz-14">龙　强　四川泛美教育投资集团有限责任公司 特聘专家</p>
                        <p class="block fz-14">刘　桦　四川泛美教育投资集团有限责任公司 副总裁、特级教师</p>
                        <p class="block fz-14">曾远志　四川泛美教育投资集团有限责任公司 副总裁</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="page-box" page="5">
            <div v-if="showPageList.indexOf(5) > -1">
                <div style="padding: 136px 95px">
                    <div class="fl fd-r">
                        <div class="fl fd-c al-c" style="margin: 100px 0;">
                            <h1 id="a004">前言</h1>
                            <p class="td-0">PREFACE</p>
                            <p class="zt-hs1 td-0">（第 2 版）</p>
                        </div>
                    </div>
                    <p>《民航概论（第2版）》是在第1版的基础上，以习近平新时代中国特色社会主义思想和党的二十大精神为指导进行编写的，新版教材落实“立德树人”根本任务，遵循教材建设规律、职业教育教学规律，符合职业院校学生的认知特点。教材共分为五个项目，分别是走进航空业、认识民用航空器、领航与气象、空中交通管理、空港管理。新版教材有以下特点。
                    </p>
                    <p>第一，产教融合，双元开发。教材由四川西南航空职业学院组织编写，由泛美航空职教集团和商用飞机行业产教融合共同体合作完成，汇聚了中国民航大学、四川西南航空职业学院、成都航空职业技术学院的一线教师与中国商用飞机有限责任公司四川分公司、成都航空有限公司等企业专家，团队成员的丰富教学经验、学术造诣以及行业经验确保了教材的科学性、实用性与适用性。
                    </p>
                    <p>第二，思政融入，价值导向。教材全面落实课程思政的要求，通过学习民航发展历程和航空专业知识，培养学生崇尚宪法、遵纪守法、崇德向善、诚实守信、尊重生命、热爱劳动的品质，培养学生的社会责任感和社会参与意识；践行“忠诚担当的政治品格，严谨科学的专业精神，团结协作的工作作风，敬业奉献的职业操守”的当代民航精神；具有安全意识和良好的服务意识；引导学生树立正确的世界观、人生观和价值观。
                    </p>
                    <p>第三，内容科学，体例创新。新版教材依据职业教育国家教学标准体系，对接职业标准和岗位能力要求，体现产业发展的新技术、新工艺、新规范、新标准，深入挖掘民航企业的实际工作需求和岗位要求，确保教材内容与实际岗位需要的无缝衔接。教材以项目任务为载体，体现了职业教育的类型特点；提供了大量的案例分析和实际情境，让学生能将所学理论更好地迁移到实际工作需求中。结合学生特点，编写力求文字简洁、通俗易懂。教材体现“贴近社会
                    </p>
                </div>
            </div>
        </div>
        <div class="page-box" page="6">
            <div v-if="showPageList.indexOf(6) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">020</li>
                    <li class="header-left-text">民航概论（第 2 版）</li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        生活、贴近工作实际、贴近学生特点”“与职业岗位群对接、与职业资格标准对接、与实际工作过程对接”的“三贴近”“三对接”原则，注重学生职业核心能力的培养，体现“岗课赛证”融通的理念。</p>
                    <p>第四，资源丰富，新形态教材。在修订过程中，联合行业、企业专家，收集真实工作案例，配套丰富的教学资源。教材的设计和呈现充分体现职业教育新形态教材的理念，结合融媒体和数字化技术，适应学习者的需求。
                    </p>
                    <p>第2版教材由魏全斌担任主编，负责整体思路的筹划，拟定具体的编写方案。裴明学、张义光、周伟、姚文琳担任副主编，王世群、徐丹参与编写。黄婉婷也对本教材的出版作出了贡献。中国民航大学张晓瑜对本教材进行了审读，成都航空有限公司高级技师、高级经济师彭强在本教材体现新技术、新工艺、新规范、新标准方面提供了优秀的建议，有效地保证了本教材的科学性、专业性、实用性、适用性，在此表示衷心的感谢。
                    </p>
                    <p>本教材不仅适用于航空运输类相关专业教学，也可以作为航空公司的培训教材。受编者水平所限，教材难免存在一定不当之处，恳请广大读者提出宝贵意见，以便我们作进一步的修订完善。</p>
                </div>
            </div>
        </div>
        <div class="page-box" page="7">
            <div v-if="showPageList.indexOf(7) > -1">
                <div style="padding: 136px 95px">
                    <div class="fl fd-r">
                        <div class="fl fd-c al-c" style="margin: 100px 0;">
                            <h1 id="a004">前言</h1>
                            <p class="td-0">PREFACE</p>
                            <p class="zt-hs1 td-0">（第 1 版）</p>
                        </div>
                    </div>
                    <p>《国家中长期教育改革和发展规划纲要（2010—2020年）》明确提出：中等职业教育与高等职业教育协调发展，构建现代职业教育体系。职业教育为社会、经济和人的发展服务成为职业教育理论工作者与实践工作者的共识。
                    </p>
                    <p>近年来，随着社会、经济的进步，民航业得到空前的发展。民航业的大发展需要大量道德高尚、素质优良、技能娴熟的一专多能的人才。正因为如此，一批办学理念先进、教学与实习实训设备精良、师资力量雄厚的学校或专业应运而生，为促进民航业的发展作出了重要贡献。
                    </p>
                    <p>要培养高素质的人才，离不开高质量的学校，离不开高水平的教师，更离不开理念先进、内容丰富、形式新颖的精品教材。为此，我们组织全国行业职业教育教学指导委员会、全国中等职业教育教学改革创新指导委员会、职业教育教学研究机构的专家，全国近20家企业的行家以及具有丰富的教学与教材编写经验的优秀教师群策群力编写了本套教材。
                    </p>
                    <p>本套教材立足国内近20家企业相关工作岗位对人才素质与能力的要求，针对学生职业生涯发展的需求编写。在体系结构上，本套教材中的各册教材有机衔接，体系完整。在内容上，本套教材涵盖了典型工作任务，体现了“贴近社会生活、贴近工作实际、贴近学生特点”“与职业岗位群对接、与职业资格标准对接、与实际工作过程对接”的“三贴近”“三对接”的特点，注重学生职业核心能力的培养。在形式上，本套教材按照“具体—抽象—实践”的逻辑顺序，设计了“相关链接”“想一想”“练一练”“思考与练习”等栏目，行文中图文并茂，突出了教材的可读性与互动性，既方便教师的教，也方便学生的学。本套教材既可供职业院校航空运输类专业学生使用，也可作为民航企业员
                    </p>
                </div>

            </div>
        </div>
        <div class="page-box" page="8">
            <div v-if="showPageList.indexOf(8) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">020</li>
                    <li class="header-left-text">民航概论（第 2 版）</li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">工培训教材或参考资料。</p>
                    <p>本教材由职业教育专家魏全斌担任主编，由陆建华、杨省贵、段剑锋、曾远志、张义光担任副主编。参加本教材编写的人员有：中国民航飞行学院陈新，四川西南航空专修学院刘桦、张菲菲、杨洪光、王建宽，成都航空旅游职业学校程冲、余磊等。全书由中国民航飞行学院杨省贵统稿。
                    </p>
                    <p>在编写本教材过程中，得到了上海机场贵宾服务公司总经理王培立、深圳宝安国际机场安检站站长赵萍、成都双流国际机场安检站副站长夏静、深圳航空公司维修工程部总经理助理王继营、四川新力航空技术有限公司（机务）总经理李元、一汽大众人力资源部部长卢荃等航空企业的专业的指导；吸纳了四川西南航空专修学院、成都航空旅游职业学校、成都礼仪职业中学、成都财贸职业中专学校、成都现代职业技术学校等职业院校骨干教师的宝贵建议；尤其是，由全国各大航空公司、机场服务企业知名的专家和领导组成的“职业院校航空服务专业教材建设企业专家指导委员会”的专家对教材的内容、编写体例等提供了大量的建议，有效地保证了本教材与民航服务企业的实际工作要求相吻合，在此一并表示衷心的感谢。在编写本教材的过程中，我们参阅了相关论著和资料，引用了一些最新的研究成果，但由于联系方式不准确等原因，未能一一征得原成果作者的同意，敬请原成果作者谅解并与我们联系，我们将奉寄稿酬和样书，并在重印或再版时根据原成果作者的要求进行相应的调整。
                    </p>
                    <p>教材中难免有不尽如人意之处，恳请广大读者提出宝贵的意见，以便我们修订时加以完善。</p>
                </div>
            </div>
        </div>
    </div>
</template>

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

<style lang="less" scoped>
.box {
    max-width: 400px;
    margin: 0 auto;
}

.preface {
    height: 224px;
    background: linear-gradient(to right, #8fc58c, #fff);
}

.preface-text {
    font-size: 26px !important;
    color: #000 !important;
}

.mt-100 {
    margin-top: 100px !important;
}
</style>

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

@@ -0,0 +1,950 @@
<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"></chapterOne> -->
      </div>
    </div>
  </template>
  
  <script>
  import pageHeader from "./header.vue";
//   import chapterOne from "./chapter001.vue";
  import NoteIcon from "@/assets/images/biji.png";
  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: 1, // 总章节数
        showCatalogList: [], // 显示的章节
        loadThreshold: 300, // 触发加载阈值
        throttleThreshold: 100, // 节流阈值
        previousScrollTop: 0,
        throttledScrollHandler: null,
        observer: null,
        loadPageObserver: null,
        loadPageList: [],
        questionDataMap: {},
        renderSignMap: {},
        highlightData: null,
        audioPath: "",
        currentTime: null,
        videoList: [],
      };
    },
    computed: {
      fontSize() {
        this.transformDom(this.$store.state.qiankun.fontSize)
        return this.$store.state.qiankun.fontSize ? this.$store.state.qiankun.fontSize : 18;
      },
      pageZoom() {
        return this.$store.state.qiankun.scale ? this.$store.state.qiankun.scale / 100 : 1;
      },
    },
    watch: {
      showCatalogList: {
        handler(newVal, oldVal) {
          if (
            this.$store.state.qiankun &&
            this.$store.state.qiankun.catalogChange
          ) {
            // 调用父层方法
            this.$store.state.qiankun.catalogChange({
              showCatalogList: newVal,
            });
          }
          // 启动页码观察
          setTimeout(() => {
            this.initObservation();
            this.initThemeColor();
          }, 500);
        },
      },
      loadPageList: {
        handler(newVal, oldVal) {
          setTimeout(() => {
            this.transformDom(this.$store.state.qiankun.fontSize)
            this.initSwiper();
            this.initViewer();
            this.closeAudio();
            this.closeVideo();
          }, 200);
        },
      },
      pageZoom: {
        handler(newVal, oldVal) {
          const scrollBox = (
            this.container ? this.container : document
          ).querySelector(".page-main");
          scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
        },
      },
    },
    mounted() {
      // 默认加载章节
      this.showCatalogList = [1];
      // 滚动监听节流
      debugger
      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(6, 30);
      //   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);
  
            debugger
            // 到达阈值
            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,
        };
        // 遍历所有章节文件
        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) {
            playVudio.requestPictureInPicture();
          }
        }
      },
      //其他类名下字体大小变化
      transformDom(fs) {
        console.log('字体大小',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,
    },
  };
  </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>