Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

litian

3 天以前 4d2bc740be7ad015243180fd86c50657bd7b4648

Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

 .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/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/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 = 'aviationEtiquette'
# VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
# VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/meetingPlanners'
VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/'
VUE_APP_PUBLIC_PATH = 'http://182.92.203.7:3007/books/book/meetingPlanners'
VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/childcareInstitutionsManagement/preschoolGameGuidance/kindergartenLanguageActivity/preschoolEvaluation/preschoolBasicKnowledge/practicalCareChildrenManual"
VUE_APP_BOOK_ID = 'meetingPlanners'

 src/App.vue

@@ -29,7 +29,12 @@
    <policiesAndRegulations v-if="activeBook.name == 'policiesAndRegulations'"></policiesAndRegulations> 
    <OralAndBroadcasting v-if="activeBook.name == 'OralAndBroadcasting'" ></OralAndBroadcasting>
    <practicalCareChildrenManual v-if="activeBook.name == 'practicalCareChildrenManual'"></practicalCareChildrenManual>
<<<<<<< HEAD
    <childIllnessPreventionCare v-if="activeBook.name == 'childIllnessPreventionCare'"></childIllnessPreventionCare>
=======
    <artInitiationForAges0to3 v-if="activeBook.name == 'artInitiationForAges0to3'"></artInitiationForAges0to3>
    <toddlerSportsSafetyProtection v-if="activeBook.name == 'toddlerSportsSafetyProtection'"></toddlerSportsSafetyProtection>
>>>>>>> 92b4aea88467686de1009e822ba9310fb8553634
  </div>
</template>
<script>
@@ -82,7 +87,12 @@
    policiesAndRegulations: ()=> import("./books/policiesAndRegulations/view/index.vue"),
    OralAndBroadcasting:()=> import("./books/OralAndBroadcasting/view/index.vue"),
    practicalCareChildrenManual: ()=> import("./books/practicalCareChildrenManual/view/index.vue"),
<<<<<<< HEAD
    childIllnessPreventionCare: ()=> import("./books/childIllnessPreventionCare/view/index.vue")
=======
    artInitiationForAges0to3: ()=> import("./books/artInitiationForAges0to3/view/index.vue"),
    toddlerSportsSafetyProtection : ()=> import("./books/toddlerSportsSafetyProtection/view/index.vue"),
>>>>>>> 92b4aea88467686de1009e822ba9310fb8553634
  },
  data() {
    return {
@@ -125,7 +135,7 @@
      // aviationBasicSkills // 基本技能
      // aviationSafety      // 安全检查实务
      // aviationEtiquette   // 礼仪服务
      // childcareInstitutionsManagement  // 托育机构管理与实务
      // childcareInstitutionsManagement  // 托育机构管理与实务 
      // toddlerGameImplementation  // 婴幼儿游戏活动实施
      // preschoolGameGuidance // 学前游戏指导 
      // kindergartenLanguageActivity // 幼儿园语言教育与活动指导
@@ -135,11 +145,13 @@
      // policiesAndRegulations  //政策法律与法规|旅游社
      // practicalCareChildrenManual // 婴幼儿照护实录
      //childIllnessPreventionCare //婴幼儿常见疾病预防与护理
      // artInitiationForAges0to3  // 0-3岁婴幼儿艺术启蒙
      // toddlerSportsSafetyProtection // 婴幼儿运动安全与保护
      this.activeBook = await this.config.getBookConfig(
        'https://jsek.bnuic.com/books/resource/' +
        process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "childIllnessPreventionCare")
          : "toddlerSportsSafetyProtection")
      );
      // this.activeBook = await this.config.getBookConfig(
      //   'http://182.92.203.7:3007/books/resource/'+

 src/books/artInitiationForAges0to3/assets/Fonts/FZLTXHK.TTF

Binary files differ

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

Binary files differ

 src/books/artInitiationForAges0to3/assets/Fonts/FZY1JW.TTF

Binary files differ

 src/books/artInitiationForAges0to3/assets/Fonts/FZZHJW.TTF

Binary files differ

 src/books/artInitiationForAges0to3/assets/Fonts/hya1gjm.ttf

Binary files differ

 src/books/artInitiationForAges0to3/assets/Fonts/hyb1gjm.ttf

Binary files differ

 src/books/artInitiationForAges0to3/assets/Fonts/hyc1gjm.ttf

Binary files differ

 src/books/artInitiationForAges0to3/assets/images/0007-01.png

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

 src/books/artInitiationForAges0to3/assets/images/Figure-0006-04.jpg

 src/books/artInitiationForAges0to3/assets/images/Figure-0007-01.jpg

 src/books/artInitiationForAges0to3/assets/images/Figure-0007-02.jpg

 src/books/artInitiationForAges0to3/assets/images/Figure-0013-01.jpg

 src/books/artInitiationForAges0to3/assets/images/Figure-0013-02.jpg

 src/books/artInitiationForAges0to3/assets/images/Figure-0021-01.jpg

 src/books/artInitiationForAges0to3/assets/images/Figure-0028-01.jpg

 src/books/artInitiationForAges0to3/assets/images/feiYe.jpg

 src/books/artInitiationForAges0to3/assets/images/fengDi.jpg

 src/books/artInitiationForAges0to3/assets/images/header-left.jpg

 src/books/artInitiationForAges0to3/assets/images/header-right.png

 src/books/artInitiationForAges0to3/assets/main.less

New file
@@ -0,0 +1,1504 @@
.artInitiationForAges0to3 {
    width: 100%;
    height: 100%;

    // 自定义内容
    .page-box {
        box-sizing: border-box;
        min-height: 1128px;
        margin-bottom: 20px;
        box-shadow: 0 3px 6px 1px #00000029;
        background-color: #fff;
    }

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

    .c-g {
        color: green;
    }

    .c-r {
        color: red;
    }

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

    .mr-0 {
        margin: 0;
    }

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

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

    .table-pad {
        padding: 1em 0.7em !important;
    }

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

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

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

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

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

    .ma-0 {
        margin: 0% !important;
    }

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

    .w100 {
        width: 100%;
    }

    .w80 {
        width: 80%;
    }

    .w70 {
        width: 70%;
    }

    .w25 {
        width: 25%;
    }

    .w20 {
        width: 20%;
    }

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

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

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

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

    .fz-20 {
        font-size: 20px;
    }

    .img-0 {
        width: 100%;
    }

    .img-c {
        width: 70%;
    }

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

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

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


    td {
        padding: 5px 10px;
    }

    .fl {
        display: flex;
    }

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

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

    .jc-fs {
        justify-content: flex-start;
    }

    .fw-w {
        flex-wrap: wrap;
    }

    .fd-c {
        flex-direction: column;
    }

    .fd-r {
        flex-direction: row-reverse;
    }

    .al-c {
        align-items: center;
    }

    .al-fe {
        align-items: flex-end;
    }

    .ac-f {
        align-content: flex-end;
    }

    .jc-fe {
        justify-content: flex-end;
    }

    .jc-c {
        justify-content: center;
    }

    .jc-sa {
        justify-content: space-around
    }

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

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

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

    .ma-t-30 {
        margin-top: 30px;
    }

    .ma-t-20 {
        margin-top: 20px;
    }

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

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


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

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

    .header-left {
        background-color: transparent;
        padding: 65px 0 50px 0;
        margin: 0 !important;
        background-image: url("../assets/images/header-left.jpg");
        background-size: 35% auto;
        background-repeat: no-repeat;
        display: flex;
        align-items: flex-end
    }


    .headerText {
        font-size: 14px;
        font-family: "方正正黑";
        font-weight: bold;
        padding: 0 8px;
    }

    .headerNumber {
        font-family: "方正正黑";
        font-weight: bold;
        font-size: 12px;
        padding: 0 8px;
        margin: 0 1% 0 9%;
    }

    .header-right {
        padding: 4% 0;
        margin: 0 !important;
    }

    .header-right-Text {
        font-family: "方正细圆";
        font-size: 14px;
        padding-top: 20px;
    }

    .header-right-Number {
        position: relative;
        width: 15%;

        span {
            font-family: "方正细圆";
            font-size: 14px;
            position: absolute;
            left: 25%;
            bottom: 20%;
        }
    }



    table {
        border-color: none !important;
    }

    .table-th-bc {
        background-color: #FEDDB4;
        color: #000;
    }

    .table-tr-bc {
        background-color: #FEF4E4;
        color: #000;
    }

    .table-textarea {
        font-size: 14px;
        font-family: "Times New Roman", "宋体";
        resize: none;

        &:focus {
            outline: none;
        }
    }

    .textarea-box {
        border: none;
        text-align: center;
        width: 84px;
        height: 36px;
        overflow: auto;
        word-break: break-all;
        resize: none;
    }


    .b0 {
        border: 0;
    }

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

    .task2 {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #F89C1C;
    }

    .task3 {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #448D9C;
    }

    .task4 {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #9EAA60;
    }

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

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

    .p-continued {
        text-align: right;
        font-size: 14px;
        margin-bottom: 10px;
    }

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

        img {
            width: 100%;
        }

        p {
            margin: 0;
        }
    }

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

        img {
            width: 100%;
        }

        p {
            margin: 0 !important;
        }
    }

    .w430 {
        width: 430px;
    }

    .w395 {
        width: 395px;
    }

    .w350 {
        width: 350px;
    }

    .w290 {
        width: 290px;
    }

    .w280 {
        width: 280px;
    }

    .w275 {
        width: 275px;
    }

    .w270 {
        width: 270px;
    }

    .w250 {
        width: 250px;
    }

    .w230 {
        width: 230px;
    }

    .w220 {
        width: 220px;
    }

    .w200 {
        width: 200px;
    }

    .w180 {
        width: 180px;
    }

    .w150 {
        width: 150px;
    }

    .w115 {
        width: 115px;
    }

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

    .fm-hyzh {
        font-family: "汉仪中黑";
        font-weight: 500;
    }

    .fm-hyss {
        font-family: "汉仪书宋";
    }

    div.bk-ztgs {
        border: 0.15em dotted #5192c6;
        padding: 0.5em;
        margin-bottom: 2em;
        margin-top: 2em;
        border-radius: 1em;
        position: relative;
    }

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


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

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

    // 题目}

    .textarea-main {
        background-color: transparent;
        max-width: 95%;
        min-width: 95%;
        outline: none;
    }

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

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

        &:focus {
            outline: none;
        }
    }

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

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

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

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

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

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

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

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

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

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

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

    .unitImg {
        position: relative;
        z-index: 1;
    }

    .unitBox {
        z-index: 99;
        position: absolute;
        top: -5px;
        left: 40px;
    }

    .unit2Box {
        z-index: 99;
        position: absolute;
        top: -200px;
        left: 40px;
    }

    .unitGraphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #5192C6;
        border-radius: 50%;
        margin-right: 15px;
    }

    .unit2Graphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #F89C1C;
        border-radius: 50%;
        margin-right: 15px;
    }

    .unit3Graphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #448D9C;
        border-radius: 50%;
        margin-right: 15px;
    }

    .unit4Graphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #9EAA60;
        border-radius: 50%;
        margin-right: 15px;
    }


    .unitText {
        color: #5192C6;
        font-size: 18px;
    }

    .unit2Text {
        color: #F89C1C;
        font-size: 16px;
    }

    .unit3Text {
        color: #448D9C;
        font-size: 16px;
    }

    .unit4Text {
        color: #9EAA60;
        font-size: 16px;
    }



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

    ul {
        list-style-type: none;
    }

    li {
        list-style-type: none;
    }

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

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

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


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

    }

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

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

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

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

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



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

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

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

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


    div.bodystyle {
        text-align: justify;
        margin: 0 11%;
        padding-bottom: 80px;
        line-height: 30px;
    }

    .UnitCover {
        margin: 0 13%;
        padding-top: 10%;
        padding-bottom: 80px;
    }

    .unit-title-parent {
        text-align: center;
        margin: 10% 0;
    }

    .unit-title {
        font-family: "方正正黑";
        display: inline-block;
        font-size: 1.6em;
        font-weight: 500;
        border-bottom: 1px solid #0082D4;
        padding: 10px 0;
    }


    span.zt-0 {
        color: #0087AF;
    }

    p.pzt-0 {
        color: #0087AF;
        font-size: 18px;
    }

    p.pzt-0-right {
        font-size: 18px;
        color: #0087AF;
        text-align: right;
    }

    p.pzt-1 {
        font-weight: bold;
        color: #0087AF;
        font-size: 18px;
    }

    div.sgc-toc-title {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: 1em;
        text-align: center;
    }


    .block {
        font-family: "kaiTi";
        text-indent: 2em;
        line-height: 30px;
        font-size: 17px;
        text-align: justify;
    }

    .block1 {
        text-align: center;
    }

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

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


    p {
        font-family: "方正书宋";
        margin-top: 0em;
        margin-bottom: 0.2em;
        text-indent: 2em;
        line-height: 30px;
        text-align: justify;
    }

    .cover {
        width: 100%;
        padding: 0px;
    }

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

    .center-ss {
        text-align: center;
        color: #EF8472;
        font-weight: bold;
        margin-left: 0%;
        margin-right: 0%;
        text-indent: 0em;
    }

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


    .img-0 {
        width: 100%;
    }

    .img-a {
        width: 95%;
    }

    .img-b {
        width: 70%;
    }

    .img-c {
        width: 60%;
    }

    .img-d {
        width: 50%;
    }

    .img-e {
        width: 45%;
    }

    .img-f {
        width: 40%;
    }

    .img-g {
        width: 30%;
    }

    .img-h {
        width: 20%;
    }

    .img-i {
        width: 10%;
    }

    .img-j {
        width: 5%;
    }

    // epub中自带的样式
    .foreword {
        padding: 8% 12%;
        background: radial-gradient(ellipse at center, #def1fb, #FFFFFF)
    }

    h1.firstTitle {
        background: transparent;
        padding: 20% 0 15% 0;
        text-align: center;
        font-size: 2em;
        line-height: 1.2em;
        text-indent: 0em;
        color: #231f20;
        font-family: "方正正黑";
        text-shadow: 4px 1px 4px rgba(0, 0, 0, 0.3);
    }

    .preface {
        font-family: "方正书宋";
        text-indent: 2em;
        color: #000;
    }


    .right-info {
        font-family: "kaiti";
        text-align: right;
        margin-bottom: 0.5em;
    }

    .imgdescript-l {
        margin-left: -5%;
    }

    h2 {
        text-align: center;
        color: #00aeef;
        font-family: "方正兰亭纤细";
        font-size: 1.5em;
    }

    .titleQuot-l {
        text-indent: 0em;
        margin: 15px 0 10px 0;
        font-size: 1.2em;
        font-weight: bold;
    }

    .poemtitle-l {
        font-family: "方正兰亭纤细";
        font-size: 1.1em;
        margin: 15px 0 10px 0;
    }

    .quotation {
        font-family: "kaiti";
    }

    /*底色*/
    .bgColor {
        padding: 10px 20px;
        background: #e1f4fc;
        border: 2px solid #008cb7;
        border-radius: 10px;
        margin: 1em auto;

        .bgColor-title {
            font-family: "方正细圆";
            font-weight: bold;
        }
    }

    // 拓展学习
    .ExpandLearning {
        padding: 40px 20px 20px 20px;
        background: #e1f4fc;
        border-top: 2px solid #008cb7;
        margin: 1em auto;
        position: relative;
    }

    .ExpandLearning-title {
        text-indent: 0;
        position: absolute;
        top: -16px;
        left: 0px;

        span {
            background-color: #e1f4fc;
            height: 20px;
            width: 30px;
            padding: 5px;
            border: 1px solid #008cb7;
            border-radius: 50%;
            margin-right: 1px;
        }
    }

    .imgdescript{
        font-size: 13px;
        text-indent: 0em;
        text-align: center;
    }

    .learningDetection{
        font-family: "汉仪正黑";
        background-color: #6bcff6;
        font-weight: bold;
        margin: 30px 0 20px 0;
    }

    .poemtitle{
        text-align: center;
        font-weight: bold;
        font-family: "方正兰亭细黑";
    }

    .bold{
        color: #00aeef;
        font-weight: bold;
    }

    .noteContent{
        font-size: 13.5px;
        word-break:break-all;
        margin: 0 !important;
        line-height: 25px;

        .noteContent-title{
            font-size: 13.5px;
            font-weight: bold;
            margin: 0 !important;
        }
    }

    sup{
        cursor: pointer;
    }
}

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

// 表格样式
table {
    border-collapse: collapse; //表格的边框合并，如果相邻，则共用一个边框。
    border-spacing: 0px; //设置行与单元格边框的间距。
}

@font-face {
    font-family: '汉仪中黑';
    src: url('./Fonts/hyb1gjm.ttf');
}

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

@font-face {
    font-family: '汉仪楷体';
    src: url('./Fonts/hyc1gjm.ttf');
}

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

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

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

@font-face {
    font-family: '方正兰亭纤细';
    src: url('./Fonts/FZLTXHK.TTF');
}


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

// @font-face {
//     font-family: 'FZHTJW';
//     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;
    }

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

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

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

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

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


        .img-float {
            width: 130px;
        }

        .img-rights {
            width: 130px;
        }

        .btn-w {
            width: 42px;
        }

        .unitText {
            color: #5192C6;
            font-size: 10px;
        }

        .unit2Text {
            color: #F89C1C;
            font-size: 10px;
        }

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

        td {
            padding: 5px 10px;
        }
    }
}

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

New file
@@ -0,0 +1,1026 @@
<template>
  <div class="chapter" num="2">
    <!-- 1页 -->
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <div class="UnitCover">
          <div class="unit-title-parent">
            <h1 class="unit-title">单元一　走近0～3岁婴幼儿艺术启蒙</h1>
          </div>
          <p class="titleQuot-1">导言</p>
          <div class="bgColor">
            <p class="">
              0～3岁婴幼儿时期是人生的最初阶段，这一时期的婴幼儿倾向于用艺术的方式认识与把握世界，表达情感与想法等。通过学习本单元，你能够走近0～3岁婴幼儿，走近0～3岁婴幼儿艺术启蒙。那么，到底什么是0～3岁婴幼儿艺术启蒙？怎样定位0～3岁婴幼儿艺术启蒙较为适宜？0～3岁婴幼儿艺术启蒙具有什么价值？0～3岁婴幼儿艺术启蒙应该遵循哪些原则？学习完本单元，你不仅可以找到上述问题的答案，而且可以感受到0～3岁婴幼儿艺术启蒙的魅力。
            </p>
          </div>
          <p class="titleQuot-1">学习目标</p>
          <p class="">
            1．理解0～3岁婴幼儿艺术启蒙的内涵，尝试比较0～3岁婴幼儿的艺术启蒙与3～6岁幼儿的艺术教育。
          </p>
          <p class="">
            2．领会0～3岁婴幼儿艺术启蒙是一种艺术素养教育、通过艺术的教育、生活方式的教育。
          </p>
          <p class="">
            3．了解0～3岁婴幼儿艺术启蒙的价值，并善于在实践中发现0～3岁婴幼儿艺术启蒙的价值。
          </p>
          <p class="">
            4．掌握0～3岁婴幼儿艺术启蒙的原则，且能够运用于0～3岁婴幼儿艺术活动的计划与实施。
          </p>
        </div>
      </div>
    </div>
    <!-- 2页 -->
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
        <ul class="header-left">
          <li class="headerNumber">002</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="titleQuot-1">内容导览</p>
          <div class="qrbodyPic">
            <p class="openImgBox">
              <img class="img-0" src="../../assets/images/Figure-0013-01.jpg" />
            </p>
            <p class="imgdescript-l fl al-c">
              <img class="img-h" src="../../assets/images/0007-01.png" alt="" />
              <span class="td-0 mt-70">
                注：标注<img
                  class="img-i"
                  src="../../assets/images/Figure-0013-02.jpg"
                  alt=""
                />的对应内容有配套在线资源，可供延伸学习。
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 3页 -->
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>003</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <h2 class="secondsubHead-2">
            任务一　0～3岁婴幼儿艺术启蒙的内涵与定位
          </h2>
          <p class="content">
            脑科学的研究表明，0～3岁婴幼儿教育对人一生的发展具有非常重要的作用，其中也涉及艺术启蒙。为什么我们要将对0～3婴幼儿进行的艺术影响称为“艺术启蒙”，而非“艺术教育”？什么是0～3岁婴幼儿艺术启蒙？0～3岁婴幼儿艺术启蒙该如何定位？
          </p>
          <p class="titleQuot-l">一、0～3岁婴幼儿艺术启蒙的内涵</p>
          <p class="content">
            艺术是人类感受美、表现美和创造美的重要形式，也是表达自己对周围世界的认识和情绪态度的独特方式。<sup
              title="《3-6岁儿童学习与发展指南》，http://www.edu.cn/xue_qian_news_197/20121019/t20121019_858538.shtml，2012-10-19。"
              >①</sup
            >0～3岁婴幼儿时期是人生的最初阶段，他们倾向于用艺术的方式认识和把握世界，表达情感和想法。
          </p>
          <p class="poemtitle-l">（一）何谓“艺术启蒙”</p>
          <p class="content">
            《幼儿园教育指导纲要（试行）》将幼儿园教育内容相对划分为健康、语言、社会、科学、艺术五个领域。《3-6岁儿童学习与发展指南》指出：“幼儿艺术领域学习的关键在于充分创造条件和机会，在大自然和社会文化生活中萌发幼儿对美的感受和体验，丰富其想象力和创造力，引导幼儿学会用心灵去感受和发现美，用自己的方式去表现和创造美。”针对3～6岁幼儿施加的艺术影响，我们通常称为艺术教育，更加凸显其目的性、计划性等。
          </p>
          <p class="content">
            基于0～3岁儿童的身心发展特点与艺术能力发展特征，我们将针对0～3岁婴幼儿实施的艺术教育称为艺术启蒙，凸显其基础性、启蒙性。教师或者家长能够和婴幼儿一起发现、感受和欣赏自然环境和生活中美的事物，在一日生活中融入各种各样的艺术形式，让婴幼儿接受艺术的熏陶，参与自己喜爱的艺术活动，从而使得婴幼儿的生活中充满艺术，为今后婴幼儿喜欢艺术、参与艺术、学习艺术等奠定良好的基础。对于婴幼儿来说，喜欢亲近艺术、喜欢参加艺术活动是十分重要的。换言之，相比于艺术知识技能、感知与欣赏、创作与表现，婴幼儿对艺术的兴趣与态度是首要的。
          </p>
          <p><br /></p>
          <hr />
          <p class="noteContent">
            <a id="m1">①</a
            >&emsp;《3-6岁儿童学习与发展指南》，http://www.edu.cn/xue_qian_news_197/20121019/t20121019_858538.shtml，2012-10-19。
          </p>
        </div>
      </div>
    </div>
    <!-- 4页 -->
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
        <ul class="header-left">
          <li class="headerNumber">004</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="poemtitle-l">（二）什么是0～3岁婴幼儿艺术启蒙</p>
          <p class="content">
            启蒙，即开蒙，指教育童蒙，使儿童得到基本的、入门的知识；亦指通过宣传教育，使后进的人们接受新事物而得到进步。<sup
              title="辞海编辑委员会：《辞海》，4250页，上海，上海辞书出版社，1999。"
              >①</sup
            >0～3岁婴幼儿艺术启蒙中的启蒙指的是前者，即家长或托育机构的教师引导婴幼儿发现并关注、感受与欣赏自然环境和生活中的美，在其生活中自然融入婴幼儿可以接受的美术、音乐等艺术形式，充分发挥艺术的教育功能，从而提升婴幼儿的艺术素养，促进婴幼儿身体、认知、情感、社会性等方面的整体和谐发展。0～3岁婴幼儿艺术启蒙，旨在让婴幼儿喜欢接触艺术，通过多感官参与，增强艺术敏感性，获得美的熏陶。譬如，在下述案例中，雷吉的父母为其创造了在艺术馆接触艺术、欣赏大师作品的机会。雷吉的一系列动作，如对作品的注视、笑、挥手、踢腿，表明了他能够主动感知艺术作品，并获得内心的满足。
          </p>
          <p class="quotation">
            雷吉（Reggie）在和他的父母、姐姐一同参观艺术馆，虽然他才九个月大，还不会说话，妈妈用婴儿车推着他从一幅画到另一幅画。有时雷吉会看画，更多的时候他在看其他参观者，或者摆弄运动衫上的拉链。他们一家停在了一幅巨大的马蒂斯剪纸画前，那幅剪纸画用明亮的原色调呈现出了抽象的舞者的轮廓。看着这幅作品，雷吉咧嘴笑了，开心地笑着，挥舞手臂，用力踢腿。当他们起身要移动到下一幅作品跟前去时，他不满地呜咽了一声，他不想离开马蒂斯的作品。<sup
              title="[美]安. S. 爱泼斯坦、伊莱·特里米斯：《我是儿童艺术家：学前儿童视觉艺术的发展》，冯婉桢等译，33页，北京，教育科学出版社，2017。"
              >②</sup
            >
          </p>
          <p class="titleQuot-l">二、0～3岁婴幼儿艺术启蒙的定位</p>
          <p class="content">
            鉴于0～3岁婴幼儿身心发展特点、艺术能力发展特征等，0～3岁婴幼儿艺术启蒙不同于其他年龄阶段的教育，它是一种艺术素养教育、通过艺术的教育、生活方式的教育。
          </p>
          <p class="poemtitle-l">
            （一）0～3岁婴幼儿艺术启蒙是一种艺术素养教育
          </p>
          <p class="content">
            “艺术技能”是人们掌握和运用艺术的专门知识与经验的能力。具体说来，“艺术技能”就是人们掌握和运用塑造艺术形象、表达情感和观念等方面的专门知识与经验的能力。<sup
              title="陈迁：《试析艺术技能与创造力协同发展的内涵及其研究意义》，载《教育科学》，2009年第1期。"
              >③</sup
            >
            艺术素养是婴幼儿未来作为一个完整的人的整体素养的重要组成部分。艺术素养超越了艺术技能的概念，是儿童在艺术的兴趣与态度、感知与欣赏、创作与表现等方面的素质与修养。<sup
              title="边霞：《儿童艺术与教育》，225页，南京，江苏凤凰教育出版社，2015。"
              >④</sup
            >
          </p>
          <p><br /></p>
          <hr />
          <p class="noteContent">
            <a id="m1">①</a
            >&emsp;辞海编辑委员会：《辞海》，4250页，上海，上海辞书出版社，1999。
          </p>
          <p class="noteContent">
            <a id="m1">②</a>&emsp;[美]安. S.
            爱泼斯坦、伊莱·特里米斯：《我是儿童艺术家：学前儿童视觉艺术的发展》，冯婉桢等译，33页，北京，教育科学出版社，2017。
          </p>
          <p class="noteContent">
            <a id="m1">③</a
            >&emsp;陈迁：《试析艺术技能与创造力协同发展的内涵及其研究意义》，载《教育科学》，2009年第1期。
          </p>
          <p class="noteContent">
            <a id="m1">④</a
            >&emsp;边霞：《儿童艺术与教育》，225页，南京，江苏凤凰教育出版社，2015。
          </p>
        </div>
      </div>
    </div>
    <!-- 5页 -->
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>005</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            对于婴幼儿来说，艺术素养具体涉及艺术兴趣、艺术感受与艺术表现等方面。艺术兴趣是儿童积极主动参与艺术活动的一种心理倾向，表现为儿童对艺术发自内心的喜爱，及其在艺术实践活动中产生的愉悦感。艺术兴趣是儿童艺术学习与发展的内在动力，是艺术感受与艺术表现的前提。艺术感受是儿童被自然界与生活中美的事物或者艺术作品所吸引，并调动感知、想象、情感等共同参与的一种艺术能力。艺术感受与欣赏是儿童艺术表现与创作的基础。艺术表现是儿童运用各种艺术形式、工具与材料将自身内在的审美体验、情感、思想等表达出来的过程与能力。儿童艺术表现与创作是艺术感受与欣赏的自然表达。
          </p>
          <p class="content">
            儿童与生俱来拥有艺术感受与欣赏、艺术表现与创作的潜能，但是他们并不需要也不具有接受系统艺术知识与专业艺术技能的能力。因此，0～3岁婴幼儿艺术启蒙主要在于启发婴幼儿喜欢亲近艺术，喜欢参与艺术活动，更多关注的是婴幼儿艺术兴趣的激发，继而才是艺术感受与欣赏、艺术表现与创作等能力的初步培养，随后才是艺术活动所需的良好行为习惯，对艺术的习惯性需要和应用等习惯的逐渐养成。对于婴幼儿来说，激发他们对艺术的喜爱应该是首要的。婴幼儿对接触到的概念和技巧的认识与理解应该在自然地接触艺术作品和活动的过程中不断增长。
          </p>
          <p class="content">
            传统艺术教育的主要弊端在于，它是一种以培养某种技能为主的教育，是技艺在先的教育，甚至在对学前儿童进行的艺术教育中也是一样。<sup
              title="边霞：《儿童艺术与教育》，225页，南京，江苏凤凰教育出版社，2015。"
              >①</sup
            >
            基于婴幼儿的身心发展特点以及艺术能力发展特征，0～3岁婴幼儿艺术启蒙不能也不应是一种艺术技能教育，而应是一种艺术素养教育。作为一种艺术素养教育，0～3岁婴幼儿艺术启蒙的目的，不仅仅在于对婴幼儿艺术兴趣的激发、初步艺术能力的培养、积极态度和良好习惯的形成，艺术启蒙最终目的是使婴幼儿获得美的情感、美的心灵的陶冶，促进每一个儿童的人格健全发展，影响他们的当下和未来生活，使他们学会用美好的心态面对生活、面对社会、面对未来，为他们能够拥有一颗爱美、懂美之心打下最初的基础。儿童艺术素养养成教育的过程就是一个美润童心的过程，即以艺术和美滋养儿童的心灵，影响儿童的生活，养成儿童的艺术素养，使儿童对美的事物有一颗敏锐感受的心，喜爱艺术，乐于参加艺术活动，并能用自己喜欢的方式，在艺术活动和生活中大胆进行艺术表现。<sup
              title="边霞：《儿童艺术与教育》，225页，南京，江苏凤凰教育出版社，2015。"
              >②</sup
            >
          </p>
          <p><br /></p>
          <hr />
          <p class="noteContent">
            <a id="m1">①</a
            >&emsp;边霞：《儿童艺术与教育》，225页，南京，江苏凤凰教育出版社，2015。
          </p>
          <p class="noteContent">
            <a id="m1">②</a>&emsp;边霞：《儿童艺术与教育》，225页，南京，江苏凤凰教育出版社，2015。
          </p>
        </div>
      </div>
    </div>
    <!-- 6页 -->
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
        <ul class="header-left">
          <li class="headerNumber">006</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            丰子恺在《丰子恺美术夜谭》一书的扉页中提到：“艺术不是职业，画家不是职业。艺术不是技巧的事业，而是心灵的事业；故画不是商品，不是实用品。故练画不是练手腕的，是练心灵的；看画不是用眼看的，是用心灵看的。”<span
              class="super"
              ><a id="noteBack_8" href="#note_8">[8]</a></span
            >我们不可能要求儿童画出精美绝伦的艺术作品，我们应多关注儿童在美术活动中倾注的热情和积极表现的欲望，<span
              class="super"
              ><a id="noteBack_9" href="#note_9">[9]</a></span
            >因为“儿童画是重兴趣而轻理法的，是近于漫画的一种绘画”。在0～3岁婴幼儿艺术启蒙中，成人应保护儿童的艺术潜能，激发儿童的艺术兴趣，鼓励儿童按照自己的意愿大胆地表达与创造，促进儿童动手操作能力、想象力与创造力、社会性与个性等方面的发展，培养儿童健全的人格。
          </p>
          <div class="bgColor">
            <p class="bgColor-title">专家点拨</p>
            <p class="quotation">
              收听专家对“0～3岁婴幼儿艺术启蒙是一种艺术素养教育”的讲解。
            </p>
          </div>
          <p class="poemtitle-l">
            （二）0～3岁婴幼儿艺术启蒙是一种通过艺术的教育
          </p>
          <p class="content">
            儿童发展本位与艺术学科本位之争是关于儿童艺术教育价值的争论焦点之一。提到儿童发展本位与艺术学科本位则需提及对艺术教育影响较深的两种儿童艺术教育观：工具论与本质论。<sup title="王任梅：《改革开放以来中国学前儿童艺术教育历史演变研究》，148～149页，南京师范大学博士学位论文，2012。">④</sup> 工具论与本质论艺术教育思想首先发自美术教育领域，然后逐渐波及整个艺术教育领域，对整个艺术教育实践产生了较为深刻的影响。工具论艺术教育思想在20世纪四五十年代风靡欧美，其理论基础可以追溯到卢梭的自然主义教育思想和杜威的进步主义教育思想，代表人物是里德（H.Read）与罗恩菲尔德（V.Lowenfeld）。工具论艺术教育思想倡导以儿童为本位，主张通过艺术教育促进儿童发展，肯定并尊重儿童的艺术潜能，强调儿童的自由表现与创造性表达，关注儿童在艺术活动过程中的表现和成长。罗恩菲尔德指出：“在艺术教育中，艺术只是一种达到目标的方法，而不是一个目标，艺术教育的目标是使人在创造的过程中变得更富于创造力，而不管这种创造力将施用于何处。”<sup title="[美]罗恩菲尔德：《创造与心智的成长》，4页，长沙，湖南美术出版社，1993。">⑤</sup> 工具论注重艺术的教育功能，主张艺术能力是儿童自然发展的结果，强调通过艺术促进儿童的发展。因此艺术教育应尊重儿童的艺术天性，遵循儿童自然发展的规律，关注儿童的自由表现和创造性表达，重视儿童在艺术活动过程中的各种表现。正如罗恩菲尔德所说：“艺术教育对我们的教育系统和社会的主要贡献，在于强调个人和自我创造的潜能，尤其在于艺术能和谐地统整成长过程中的一切，造就出身心健全的人。”<sup title="[美]罗恩菲尔德：《创造与心智的成长》，4页，长沙，湖南美术出版社，1993。">⑥</sup>
          </p>
          <p><br/></p>
          <hr />
          <p class="noteContent">
            <a id="m1">①</a>&emsp;丰子恺：《丰子恺美术夜谭》，扉页，上海，上海人民美术出版社，2004。
          </p>
          <p class="noteContent">
            <a id="m1">②</a>&emsp;边霞：《幼儿园美术教育与活动设计》，62页，北京，高等教育出版社，2009。
          </p>
          <p class="noteContent">
            <a id="m1">③</a>&emsp;丰子恺：《丰子恺美术夜谭》，33页，上海，上海人民美术出版社，2004。
          </p>
          <p class="noteContent">
            <a id="m1">④</a>&emsp;王任梅：《改革开放以来中国学前儿童艺术教育历史演变研究》，148～149页，南京师范大学博士学位论文，2012。
          </p>
          <p class="noteContent">
            <a id="m1">⑤</a>&emsp;[美]罗恩菲尔德：《创造与心智的成长》，4页，长沙，湖南美术出版社，1993。
          </p>
          <p class="noteContent">
            <a id="m1">⑥</a>&emsp;[美]罗恩菲尔德：《创造与心智的成长》，4页，长沙，湖南美术出版社，1993。
          </p>
        </div>
      </div>
    </div>
    <!-- 7页 -->
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>007</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            本质论艺术教育思想形成于20世纪60年代以后，其思想基础是布鲁纳的结构主义教育思想，代表人物是艾斯纳（E.W.Eisner）和格内尔（W.D.Greer）。在美术教育领域，本质论者于1984年提出“以学科为基础的美术教育”（Discipline-Based
            Art
            Education，DBAE），包括美术、美术批评、美术史与美术创作等美术学科的基本内容。<span
              class="super"
              ><a id="noteBack_14" href="#note_14">[14]</a></span
            >本质论艺术教育思想强调以艺术学科为本位，注重艺术知识技能的传授以发展和传承艺术文化，主张艺术能力是教育推动的结果，注重儿童艺术学习的结果。艾斯纳指出：“……任何一项将艺术首先作为为其他目的服务工具的教育计划会冲淡美术的意义。美术不应屈尊服务于其他目的。”<span
              class="super"
              ><a id="noteBack_15" href="#note_15">[15]</a></span
            >本质论更注重艺术的本质价值，认为艺术能力是教育的结果，艺术教育应以艺术学科为本位，以教育为手段，强调艺术学科的完整性和系统性，关注儿童艺术学习的结果，旨在通过艺术知识技能的传授延续和发展艺术文化。在艾斯纳看来，“美术教育的最高价值在于它为每个人经历并且认识世界所作的独特贡献。视觉艺术涉及了人类意识中其他任何学科都无从涉及的一个方面，即对于视觉形象的美学思考”<span
              class="super"
              ><a id="noteBack_16" href="#note_16">[16]</a></span
            >。
          </p>
          <p class="content">
            对应工具论与本质论的儿童艺术教育观，儿童艺术教育主要有两种不同的价值取向，一种是儿童发展取向，一种是艺术学科取向。儿童发展取向的儿童艺术教育将艺术作为教育的手段，通过艺术教育培养儿童的道德品质、认知能力、审美情趣，促进儿童个性、创造性的发展及人格的健全发展，是一种“通过艺术的教育”。艺术学科取向的儿童艺术教育以艺术学科为本位，强调艺术的本体功能，以教育为手段，重视艺术知识传授及艺术技能训练，注重艺术文化的传承和发展，是一种“为了艺术的教育”<span
              class="super"
              ><a id="noteBack_17" href="#note_17">[17]</a></span
            >。
          </p>
        </div>
      </div>
    </div>
    <!-- 8页 -->
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
        <ul class="header-left">
          <li class="headerNumber">008</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="content mb-20">
            对于0～3岁婴幼儿来说，艺术启蒙主要在于通过艺术促进婴幼儿的发展。具体说来，0～3岁婴幼儿艺术启蒙的总体目标如下：喜欢自然环境和生活中美的事物，发现并感受自然环境和生活中的美；喜欢欣赏多种多样的艺术作品，初步感受艺术的基本特征；喜欢参加艺术活动，积极投入艺术感受与欣赏、表现与创作等活动，并能大胆地表达自己的情感与体验；喜欢探索各种不同的艺术工具与材料，并能用自己喜欢的方式自由自在地进行艺术活动。因此，0～3岁婴幼儿艺术启蒙不是一种为了艺术的教育，而是一种通过艺术的教育。
          </p>
          <div class="ExpandLearning">
            <p class="ExpandLearning-title">
              <span>拓</span>
              <span>展</span>
              <span>学</span>
              <span>习</span>
            </p>
            <p class="content">
              罗恩菲尔德是美国著名的美术教育家，主张“通过艺术的教育”，是“工具论”的代表人物之一，被誉为“美术教育之父”。其艺术教育思想的基础是卢梭的自然主义教育思想与杜威的进步主义教育思想。他的代表作主要有《创造与心智的成长》《创造活动的本质》等，对20世纪五六十年代的西方儿童美术教育有着非常重要的影响。罗恩菲尔德认为，在艺术教育中，艺术只是一种达到目标的方法，儿童的感情、智能、身体动作、知觉、社会性、美感、创造性的成长才是艺术教育的目标。他将儿童的美术能力发展划分为六个阶段：涂鸦期（2～4岁）、前图式期（4～7岁）、图式期（7～9岁）、写实萌芽期（9～11岁）、拟写实期（11～13岁）与青春危机期（13～17岁）。美术教育应该遵循儿童美术能力发展阶段特征，为他们创设宽松的氛围，提供适当的材料，从而激发儿童的创作欲望，鼓励他们自由自在地表达与创造。
            </p>
            <p class="content">了解更多罗恩菲尔德的艺术教育思想。</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 9页 -->
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>009</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <p class="poemtitle-l">
            （三）0～3岁婴幼儿艺术启蒙是一种生活方式的教育
          </p>
          <p class="content">
            《中国大百科全书·社会学卷》对生活方式作了如下定义：“不同的个人、群体或社会全体成员在一定的社会条件制约和价值观指导下，所形成的满足自身生活需要的全部活动形式与行为特征的体系。”<span
              class="super"
              ><a id="noteBack_18" href="#note_18">[18]</a></span
            >王雅林在《人类生活方式的前景》中把生活方式定义为：“不同的社会和时代中生活的人们，在一定的社会条件制约下和在一定的价值观指导下，所形成的满足自身需要的生活活动形式和行为特征的总和。”<span
              class="super"
              ><a id="noteBack_19" href="#note_19">[19]</a></span
            >儿童天生就喜欢艺术，儿童身上具有从事艺术活动的天生倾向和能力，这是他们生命需求的直接显现。<span
              class="super"
              ><a id="noteBack_20" href="#note_20">[20]</a></span
            >0～3岁婴幼儿的世界是一个充满诗意的世界，在某种程度上可以说，艺术是婴幼儿的一种生活方式。
          </p>
          <p class="content">
            儿童在生命的最初阶段对某些色彩、图形和声音就特别敏感，甚至在早期就能表现出感知和选择节奏、韵律、色彩和形状的倾向，并能对其作出反应。<span
              class="super"
              ><a id="noteBack_21" href="#note_21">[21]</a></span
            >声音和乐曲充满了儿童的整个世界，它们是无处不在的。全世界的儿童都能够对音乐产生共鸣，他们喜欢去探索其无限的可能性，喜欢亲自去创作音乐，同时也被音乐美妙的声音和旋律所感染……从婴儿出生那一刻甚至更早的时候开始，他们就已经适应了所在环境中的声音，并且根据他们自身的能力去创造和探索声音的韵律和声调模式。<span
              class="super"
              ><a id="noteBack_22" href="#note_22">[22]</a></span
            >幼儿拥有对音乐的自然意识和敏感力。与其他年龄阶段的人相比，他们对音乐的探索更多是自发性的，他们敢于将他们的声音、他们的身体以及他们的情绪投入到音乐和律动活动中去。幼儿会将整个身心都投入其中。幼儿在音乐情景中所表现出来的情感、认知和精神动力是创造力的标志。<span
              class="super"
              ><a id="noteBack_23" href="#note_23">[23]</a></span
            >布约克沃尔德认为，每个儿童与生俱来都有一种“以韵律、节奏和运动为表征的生存性力量和创造性力量”<span
              class="super"
              ><a id="noteBack_24" href="#note_24">[24]</a></span
            >。同时，婴儿在较早的时期就已经对美术的两个基本要素——形与色有一定的审美感知能力了。尽管这些最初的反映只是一些本能的直觉行为，但这些本能的直觉行为已为日后更高层次的美术欣赏活动做好了心理上的准备。<span
              class="super"
              ><a id="noteBack_25" href="#note_25">[25]</a></span
            >威廉·斯特恩认为，儿童最初对那些产生快乐的艺术对象的特质是极其敏感的，比如，色彩、亮度与明显的节奏。<span
              class="super"
              ><a id="noteBack_26" href="#note_26">[26]</a></span
            >1岁半左右的儿童，已经能够独立行走，他们对外部世界的探索变得更为自由，开始喜欢到处涂涂画画，有时甚至乐此不疲。
          </p>
        </div>
      </div>
    </div>
    <!-- 10页 -->
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
        <ul class="header-left">
          <li class="headerNumber">010</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <div class="img-float w200 openImgBox">
            <img src="../../assets/images/Figure-0021-01.jpg" alt="" />
            <p class="imgdescript">图1-1　一只小鸟站在树枝上</p>
          </div>
          <span>
            <p class="content">
              可见，儿童天生就喜欢艺术，喜欢涂涂画画，喜欢唱唱跳跳，艺术是儿童日常生活的重要组成部分。儿童与生俱来都拥有艺术欣赏、艺术创作的潜能，都有接触艺术、参与艺术、欣赏艺术等方面的需要和权利。在感受与欣赏艺术时，儿童具有良好的直觉、丰富的想象、强烈的表达意愿和直接的表达方式；儿童在艺术创作过程中追求变化和新意，拥有轻松自由的创作心态，能够有所表现、突破和创造，其作品体现出一种简约、率真、灵动、稚拙之美（图1-1）。
            </p>
          </span>
          <p class="content">
            离开人生便无所谓艺术，因为艺术是情趣的表现，而情趣的根源就在于人生；反之，离开艺术也便无所谓人生。<span
              class="super"
              ><a id="noteBack_27" href="#note_27">[27]</a></span
            >艺术化生存的内涵具体包括：第一，超脱的态度。审美的最主要特点是超功利性，即在审美主体与客体之间，保持一定的心理距离，主体对客体没有功利性的欲求，从而使主体达到一种自由洒脱的境界。第二，丰富的情趣。审美的人生应该有高雅、丰富、纯正的情趣，人的生命就有了生机，人生便有了意义、有了价值。第三，本色的生活。这种生活是一种不虚伪、不做作、自然和谐的生活。第四，完整的人格。<span
              class="super"
              ><a id="noteBack_28" href="#note_28">[28]</a></span
            >婴幼儿满足其生活需要的全部活动形式与行为特征往往带有艺术的色彩，他们常常以艺术的方式认识世界、以艺术的态度对待生活、以艺术的精神体味人生等。因此，从某种程度上来说儿童是艺术化生存的典范。与之相应的，0～3岁婴幼儿艺术启蒙应是一种生活方式的教育。在0～3岁婴幼儿艺术活动中，成人应保护并激发儿童的艺术潜能，促进儿童艺术能力与人文素养的整合发展。0～3岁婴幼儿艺术启蒙应该贴近儿童的生活，影响儿童的生活，让儿童能够持续地以艺术的方式认识世界、以艺术的态度对待生活、以艺术的精神体味人生，善于在生活中发现美、感受美，表现美、创造美。
          </p>
        </div>
      </div>
    </div>
    <!-- 11页 -->
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>011</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <h2 class="secondsubHead-2">任务二　0～3岁婴幼儿艺术启蒙的价值</h2>
          <p class="content">
            0～3岁婴幼儿的身心发展有其独特之处：感知觉具有整体性、直觉性，容易产生通感；想象天马行空，不受常理约束；思维在直接感知的过程中进行，离不开动作和活动；情绪情感易冲动、易变换、易传染、易外露等。鉴于0～3岁婴幼儿身心发展的特点与艺术是相通的，因此艺术教育在0～3岁婴幼儿阶段的作用特别突出。
          </p>
          <p class="titleQuot-l">一、促进婴幼儿审美能力的发展</p>
          <p class="content">
            0～3岁婴幼儿艺术启蒙是一种艺术素养教育，可以促进婴幼儿审美能力的发展。审美能力是审美主体所具有的一种高度综合的心理能力，是在审美活动过程中认识和体验、感受或创作审美对象或审美意象的一种能力，它是感性与理性、认识与体验、再现与表现、接受与创造、意识与无意识综合统一融会贯通的复杂的心理过程。<span
              class="super"
              ><a id="noteBack_1" href="#note_1">[1]</a></span
            >0～3岁婴幼儿艺术启蒙可以通过一系列艺术活动，发展婴幼儿的审美能力，提升其艺术素养。
          </p>
          <p class="content">
            其一，艺术启蒙可以发展婴幼儿的审美感受力，为0～3岁婴幼儿走进迷人的艺术世界打开一扇门。在0～3岁婴幼儿的周围环境和生活中有着各种各样的美，如花草树木、日月星空等美好的事物，鸟语虫鸣、风声雨声等好听的声音。在艺术启蒙的过程中，托育机构的教师或家长和婴幼儿一起发现、感受和欣赏自然环境与人文景观中美的事物。譬如，微风吹过，树叶在空中飞舞，飘落在地面上。圆圆脸上露出了笑容，“妈妈，你看，好美啊！”“哦，哪里美？为什么你觉得很美呢？”圆圆蹲下来仔细地观察，“有红的，有黄的，有绿的，五彩缤纷”。然后，他开始捡树叶，手拿叶柄，将树叶一片一片地拿在手中。对孩子来说，树叶就是他的“宝贝”。成人可以和婴幼儿一起发现美的事物的特征，如颜色、形状，节奏、旋律等，全身心地感受和欣赏美。与此同时，成人创造机会和条件让婴幼儿接触适宜的、各种形式的艺术作品，尊重和理解婴幼儿在欣赏艺术作品时的行为，如手舞足蹈、即兴模仿等，从而丰富他们对艺术的感受与体验，提升其审美感受力。
          </p>
        </div>
      </div>
    </div>
    <!-- 12页 -->
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -1">
        <ul class="header-left">
          <li class="headerNumber">012</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            其二，艺术启蒙可以发展婴幼儿的审美表现力，为其以后进行艺术表现与创作奠定良好的基础。在0～3岁婴幼儿艺术启蒙中，成人为幼儿提供丰富的便于婴幼儿取放的工具、材料等，支持他们涂涂画画、粘粘贴贴、自哼自唱、模仿表演等，和他们一起绘画、制作、唱歌、表演等，共同分享艺术的乐趣。在婴幼儿表达创作过程中，成人尊重和欣赏他们独特的表现方式，在其需要时给予适宜的帮助和指导。譬如，在艺术教育活动“美丽的花草地”中，教师可以先和婴幼儿感知、欣赏草地上各种各样美丽的花儿，然后再欣赏吴冠中的作品《花草地》，感受作品中点线面的变化，这样儿童的作品才能富有个性和表现力。在教师的引导下，通过积累生活经验，丰富审美经验，儿童的审美表现力和创造力自然而然地得到了提升。
          </p>
          <p class="titleQuot-l">二、促进婴幼儿手、眼、脑的协调</p>
          <p class="content">
            0～3岁婴幼儿艺术启蒙从婴幼儿的生活经验与审美经验出发，引导幼儿发现、感受、欣赏大自然、社会生活、艺术作品中各种不同的美，丰富他们的审美体验，从而培养他们的审美能力。0～3岁婴幼儿擅长运用视觉、听觉、触觉、嗅觉、味觉等多种感官通道来欣赏和表现艺术。同时，0～3岁婴幼儿的语言表达能力较弱，他们常常借助动作、表情等非语言的方式表达自己的感受与体验。可见，艺术活动需要婴幼儿的手、眼、脑并用，能够促进婴幼儿手、眼、脑的协调发展。
          </p>
          <p class="content">
            婴幼儿借助多种感官欣赏各种各样美的事物，通过大脑整合各类信息，动手操作各种工具材料等表达自己的思想和情感。不论是艺术欣赏还是艺术表现，都可以让儿童将心理操作与实际操作结合起来。在艺术活动中，教师通过各种方式激发婴幼儿头脑中的已有图式，鼓励他们大胆地表达和创造。在此过程中，儿童用脑对已有图式进行组合、删减、拼接等，并转换为适合自己的各种艺术表现形式。然后，根据艺术活动内容，选择动手操作的方式，运用工具材料大胆地进行艺术表现与创作。在艺术活动中，婴幼儿的感知力、观察力、想象力、创造力、动手操作能力等在不断地发展着。例如，在艺术活动“大手小手变变变”中，宝宝和家长共同商量、构思创作的主题，并根据主题进行印画，之后，他们根据自己造型的需要一起用油画棒、各种大小毛笔、刷子等对手印画进行添画、装饰。整个活动都是宝宝和家长一起对话、交流、互助的过程，<span
              class="super"
              ><a id="noteBack_2" href="#note_2">[2]</a></span
            >从而促进宝宝手、眼、脑的协调发展。
          </p>
        </div>
      </div>
    </div>
    <!-- 13页 -->
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>013</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <p class="titleQuot-l">三、激发婴幼儿的想象力、创造力</p>
          <p class="content">
            想象是人脑对记忆表象进行加工改造形成新形象的过程，是心理活动中具有创造性特点的高级心理机能。表象是存在于人的头脑中的形象，一般认为，明确表明儿童表象出现的时间是1岁左右。<span
              class="super"
              ><a id="noteBack_3" href="#note_3">[3]</a></span
            >表象产生以后，儿童也就开始了想象。
          </p>
          <p class="content">
            艺术是自由的，可以不受外界的制约，超越时间与空间、现实与幻想、生命与无生命等的限制，为想象与创造提供了可以自由驰骋的天地。在艺术活动中，婴幼儿可以自由选择、自由表现，经过加工创造出新的形象。儿童在根据自己的经验、感受将自己的艺术体验以线条、色彩、造型等形式表现出来的过程中，就蕴含着独特的想象力与创造性。<span
              class="super"
              ><a id="noteBack_4" href="#note_4">[4]</a></span
            >“由于儿童幼稚、单纯，心灵纯洁无瑕，所以他们的画不受任何限制，也不受真实的约束，没有任何清规戒律，形成儿童画所特有的稚拙、梦幻甚至荒诞的特点。”<span
              class="super"
              ><a id="noteBack_5" href="#note_5">[5]</a></span
            >儿童的自发歌唱、即兴表演等都是“本能缪斯”的体现，与儿童美术一样，充分体现了稚拙、清新、率真、自由等品质。由于婴幼儿独特的思维发展特点，他们易于融入情境，达到物我不分、主客融合的状态。在艺术教育活动中，如果成人给予适当的引导，他们更加容易融入情境，基于自身的经验，自由发挥想象，大胆进行艺术表现与创造，从而促进儿童想象力与创造力的发展。
          </p>
          <p class="content">
            艺术强调多元、个性、创造，没有标准化的要求与答案。在艺术中，每一种事物都不是从现实生活中照搬过来的，而是创造出来的，因此艺术具有多元性、独特性、创造性。每个儿童与生俱来都拥有艺术创造的潜能，无论是涂涂画画、粘粘贴贴还是哼哼唱唱、即兴表演，都体现了儿童独一无二的创造力。“成人的创造力更多的是指在社会文化等方面带来的变革能力，而儿童的创造力是指创造出对其个人来说是全新的、前所未有的事物的能力。具体来说，学前儿童美术活动中的创造力是指他们利用物质材料及过去的经验并加以重新组合，制作出对其个人来说新颖的、有价值的美术作品的能力。这种能力不仅可以在作品中反映出来，还可以从其制作的过程中显示出来。”<span
              class="super"
              ><a id="noteBack_6" href="#note_6">[6]</a></span
            >
          </p>
        </div>
      </div>
    </div>
    <!-- 14页 -->
    <div class="page-box" page="19">
      <div v-if="showPageList.indexOf(19) > -1">
        <ul class="header-left">
          <li class="headerNumber">014</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            在艺术活动中，成人引导婴幼儿感受与欣赏美丽的景色、好听的声音，接触适宜的、各种形式的艺术作品，鼓励他们大胆想象，对表象进行加工创造，从而以艺术的形式表现出来。《3-6岁儿童学习与发展指南》指出：“幼儿对事物的感受和理解不同于成人，他们表达自己认识和情感的方式也有别于成人。幼儿独特的笔触、动作和语言往往蕴含着丰富的想象和情感，成人应对幼儿的艺术表现给予充分的理解和尊重，不能用自己的审美标准去评判幼儿，更不能为追求结果的‘完美’而对幼儿进行千篇一律的训练，以免扼杀其想象与创造的萌芽。”同样，成人应欣赏、理解并尊重0～3岁婴幼儿的艺术表现与创造，保护、激发并促进其想象力与创造力的发展。
          </p>
          <p class="titleQuot-l">四、有利于培养婴幼儿的健全人格</p>
          <p class="content">
            儿童对艺术有一种自然的需要。塞茨认为，人类的“原始冲动”的表达方式分为两种：一种方式是文字表达；另一种方式是通过绘画表达出来，即将内心经历可视化。贝蒂娜·埃格尔将绘画发展过程中涂鸦的意义比作语言发展过程中口齿不清的说话阶段，并认为涂鸦的阶段是绝对必需的。<span
              class="super"
              ><a id="noteBack_7" href="#note_7">[7]</a></span
            >一种游戏的“恩戈麦”（表示儿童文化中缪斯式的游戏特征）是普遍的生活需要……在儿童每天所进行的不计其数的活动中，从上厕所、系鞋带到孩子间的嘲弄或沙箱内的天真玩耍，自发的歌唱作为一种基本因素进入这一切之中。它处于儿童文化中运动、语词、歌唱这种缪斯性的“恩戈麦”的中心，它为他们的游戏带来了节奏，为他们的运动带来了形式，为他们的词语带来了暖意。对儿童来说，掌握自发的歌唱是至关重要的，因为这是儿童文化中的普遍性语码，给儿童的表达和成长一把特殊的钥匙。<span
              class="super"
              ><a id="noteBack_8" href="#note_8">[8]</a></span
            >
          </p>
          <p class="content">
            由于身心发展水平受限，0～3岁婴幼儿并不擅长用语言来表达自己的思想与情感。对他们来说，艺术是一种比语言更强有力的表达与交流方式，是表达自我、抒发情感的一个重要途径，也是外化情感的有效方式之一。当情绪激动、思想纷乱时，儿童常发现创造一幅情绪强烈的主题画往往比用语言描述它更容易，更令人满足。<span
              class="super"
              ><a id="noteBack_9" href="#note_9">[9]</a></span
            >正所谓：“情动于中而行于言，言之不足，故嗟叹之，嗟叹之不足，故咏歌之，咏歌之不足，不知手之舞之，足之蹈之也。”在艺术活动中，儿童可以借助线条、色彩、造型，节奏、旋律、运动等艺术语言，直接表达自己的情感、想法等。
          </p>
          <hr />
        </div>
      </div>
    </div>
    <!-- 15页 -->
    <div class="page-box" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>015</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            0～3岁婴幼儿在欣赏各种各样美的事物和艺术作品的过程中，能够获得愉悦的体验，并沉浸其中。与此同时，在艺术表现与创作中，儿童独立、自主、自信等个性与人格悄然成长。譬如，宝宝能够在所涂出的点、线、圈的组合中获得视觉以及身心的愉悦与满足，在手臂有节奏的动作中获得主动的身体运动的快感。这不仅仅是一项愉快的游戏，实际上也是宝宝的一种主动的学习活动，是他们早期探索、认识世界的一种方法。<span
              class="super"
              ><a id="noteBack_10" href="#note_10">[10]</a></span
            >0～3岁婴幼儿在艺术欣赏与创作中可以获得想象的自由和创作的快乐，从而感受到自己的力量与能力，获得满足感与成就感。儿童艺术反映了儿童当前的状况、特别的愿望与眼前的矛盾冲突，因此，通过儿童艺术，成人可以了解儿童的生活经历、表达能力、情绪情感等，从而洞悉每个儿童的个性特点，并通过艺术活动促进儿童健全人格的养成。
          </p>
        </div>
      </div>
    </div>
    <!-- 16页 -->
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -1">
        <ul class="header-left">
          <li class="headerNumber">016</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <h2 class="secondsubHead-2">任务三　0～3岁婴幼儿艺术启蒙的原则</h2>
          <p class="content">
            0～3岁婴幼儿艺术启蒙的原则是在0～3岁婴幼儿艺术活动中必须遵循的基本要求。基于婴幼儿艺术教育的规律、0～3岁婴幼儿身心发展特点及艺术能力发展特征，0～3岁婴幼儿艺术启蒙应遵循启蒙性、生活性、游戏性、整合性、审美性等原则。
          </p>
          <p class="titleQuot-l">一、启蒙性原则</p>
          <p class="content">
            启蒙性原则是0～3岁婴幼儿艺术启蒙应遵循的首要原则，它是指应在婴幼儿艺术活动中引导婴幼儿感受与欣赏自然环境与生活中的美，在其生活中自然融入婴幼儿可以接受的艺术形式，从而使得婴幼儿获得最基础的艺术素养。0～3岁婴幼儿艺术启蒙的启蒙性原则主要体现在成人应该为婴幼儿选择最基础的艺术活动内容。
          </p>
          <p class="content">
            0～3岁婴幼儿的绘画能力处于涂鸦阶段，手工发展处于无目的活动期，美术欣赏能力则跨越两个阶段本能直觉期（0～2岁），主观的审美感知期（2～7岁）。儿童音乐能力的发展与美术能力相比，阶段性不是那么明显。以儿童的歌唱能力为例，儿童处于婴儿期“咿呀”学话时就开始了“咿呀”学唱，1岁左右的儿童唱的歌被称为“呀呀之歌”，两岁左右的儿童会努力模仿成人音高，会唱简单的歌曲，并不断重复等。
          </p>
          <p class="content">
            根据0～3岁婴幼儿的艺术能力发展特征，教师或家长为他们选择的艺术活动内容应该是最基础的，适合其身心发展水平的。譬如，1岁半左右的儿童开始喜欢涂涂画画，用能接触到的工具（如笔、手指、树枝等）在纸上、墙上、地上等涂画点、线。儿童的涂鸦不讲究造型、色彩和构图，这是他们在感知觉、动作有了一定的发展之后做出的探索，是一种新的动作练习，属于一种手臂的动作。儿童的涂鸦没有明确的表现意图，他们把涂鸦当作游戏，并享受由涂鸦动作带来的那种有节奏的“动”的运动快感，以及对纸上、墙上出现各种各样的线条的视觉满足。<span
              class="super"
              ><a id="noteBack_1" href="#note_1">[1]</a></span
            >2岁以后，成人可以为他们提供操作简单、便于表现的工具材料（如蜡笔画、印章画、手指点画等），鼓励他们用简单的线条与形状去表现日常生活中常见的、熟悉的、感兴趣的事物，如许多小鱼水中游、高兴的向日葵等（图1-2）。
          </p>
        </div>
      </div>
    </div>
    <!-- 17页 -->
    <div class="page-box" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>017</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <div class="img-rights w150 openImgBox">
            <img src="../../assets/images/Figure-0028-01.jpg" alt="" />
            <p class="imgdescript">图1-2　高兴的向日葵</p>
          </div>
          <span>
            <p class="content">
              再如，鉴于0～3岁婴幼儿歌唱能力的发展，成人为婴幼儿选择的歌曲应具有如下特点：歌词反映的主题是婴幼儿熟悉、理解、感兴趣的，内容富有童趣、易于记忆，形象鲜明，适合用动作表现；音域适宜、节奏简单、旋律平稳、短小工整等，如《闪烁的小星星》《小燕子》等。
            </p>
            <p class="content">
              需要指出的是，通过0～3岁婴幼儿艺术启蒙，婴幼儿获得的是最基础的艺术素养。在人生的最初阶段，儿童能够喜欢接触艺术、喜欢参加艺术活动是首要的。这种对艺术的兴趣与态度为其今后喜欢艺术、参与艺术、学习艺术等奠定良好的基础。
            </p>
          </span>
          <p class="titleQuot-l">二、生活性原则</p>
          <p class="content">
            生活性原则指0～3岁婴幼儿艺术活动应基于儿童的生活经验，贴近儿童的生活，富有生活情趣，并服务于儿童的生活。艺术活动只有贴近儿童的生活，欣赏或表现对于儿童而言有意义的人、事、物，儿童才能在艺术欣赏与创作中生成意义、创造意义。
          </p>
          <p class="content">
            “天地有大美而不言”，自然界与生活中充满着各种各样美的事物。大自然中有着各种美妙的声音：淅淅沥沥的雨声、淙淙的流水声、清脆的鸟叫声、小朋友的欢笑声等。所有这些，都会让宝宝心旷神怡，激发了他聆听的欲望与兴趣。成人可以引导婴幼儿注意倾听大自然里的各种声音，如风声、雨声；倾听各种动物的叫声，如鸟叫声；倾听各种交通工具发出的声音，如自行车清脆的铃声、汽车的喇叭声……继而引导宝宝模仿、表达，从而促进宝宝想象力和创造力的发展。一片树林、一道河湾、一片星空、一轮明月……这些都可以给宝宝美的享受。儿童的视角是独特的，一片树叶、一颗石子、一段树枝、一丛小草都可以成为宝宝爱不释手的宝贝。成人不妨和宝宝一起欣赏大自然的美丽与神奇，深呼吸，展开双臂，感受大自然，拥抱大自然。同时，引导宝宝发现美的事物，爱护美的事物，表达对大自然的喜爱。
          </p>

          <div class="fl jc-c openImgBox mt-20">
            <img
              class="img-f"
              src="../../assets/images/Figure-0006-04.jpg"
              alt=""
            />
          </div>
          <p class="imgdescript mb-20">图1-3　绿垫圣母子　索拉里</p>

          <p class="content">
            除了自然界与生活中美的事物，贴近儿童生活的艺术作品也是婴幼儿非常喜爱的。譬如，勃拉姆斯的《摇篮曲》，索拉里的《绿垫圣母子》（图1-3）等表现母爱的艺术作品比较适合婴幼儿欣赏。在欣赏这些作品时，可以联系儿童的生活经验，加深他们对妈妈的爱的体验。
          </p>
        </div>
      </div>
    </div>
    <!-- 18页 -->
    <div class="page-box" page="23">
      <div v-if="showPageList.indexOf(23) > -1">
        <ul class="header-left">
          <li class="headerNumber">018</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            另外，成人在设计与实施0～3岁婴幼儿艺术活动的过程中，应注意预设和生成的结合。一方面，成人可以根据儿童的需要、兴趣等选择贴近儿童生活、情感的内容；另一方面，也可以在活动过程中敏锐地觉察儿童需要、兴趣的变化，捕捉儿童生活中突发的、有意义的事件，根据互动的实际情况等来调整活动，生成新的更适宜的活动。
          </p>
          <p class="content">
            最后，0～3岁婴幼儿艺术活动最终应该回归儿童的生活，服务于儿童的生活，使他们学会用艺术的态度对待生活，为他们拥有一颗爱美、懂美之心奠定基础。因此，成人应该重视并珍惜儿童的艺术作品，让他们感受到成人的认可和关注。成人不妨将儿童的艺术作品进行装裱，和他们一起装饰和美化环境。对于婴幼儿的自发歌唱、即兴表演等，如果有条件的话，可以进行录音或者录像，在适当的时候加以展示。
          </p>
          <div class="bgColor">
            <p class="titleQuot-1">活动视频</p>
            <p class="quotation">
              两岁多的宝宝手里拿着狗尾巴草，肩上扛着树枝，在草地上“寻宝”。不一会儿，他给妈妈捡来了一片美丽的树叶。之后，寒风中的他又继续其发现之旅，反反复复，乐此不疲。扫码观看“宝宝发现美”视频，请注意宝宝的动作、表情以及与妈妈的对话。你觉得视频中的宝宝善于发现自然界与生活中的美吗？你接触过的婴幼儿在这方面又有哪些表现？
            </p>
          </div>
          <p class="titleQuot-l">三、游戏性原则</p>
          <p class="content">
            游戏性原则是在0～3岁婴幼儿艺术活动中必须尊重儿童游戏的天性，创设轻松愉快的氛围，通过有趣的游戏吸引婴幼儿自主自愿地参与活动。换句话说，游戏性原则即0～3岁婴幼儿艺术活动应体现游戏性，对于婴幼儿来说具有足够的魅力。譬如，在亲子园美术教育活动“连连看”中，教师对儿童创作的引导注重游戏化、情境化，把小动物们连一连，让他们能走到一起做游戏，给他们建立一些漂亮的广场（“小动物们住在街对面，他们很想一起做游戏，怎么办呢？”“小动物们玩累了怎么办？小动物们没有玩耍的地方怎么办？”），无形中让儿童对蒙德里安的艺术风格有了一定的理解与体验，并能够在创作中体现大师作品（图1-4）所蕴含的艺术元素。
          </p>
        </div>
      </div>
    </div>
    <!-- 19页 -->
    <div class="page-box" page="24">
      <div v-if="showPageList.indexOf(24) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>019</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <div class="img-rights w180 openImgBox">
            <img src="../../assets/images/Figure-0007-01.jpg" alt="" />
            <p class="imgdescript">图1-4　红黄蓝的构成蒙德里安</p>
          </div>
          <span>
            <p class="content">
              游戏是儿童的天性，可以说，游戏统整了儿童的各种活动。儿童普遍喜欢艺术，在艺术创作过程中儿童往往是一种轻松自由的状态，表现得愉快而忘我。对于儿童而言，他们的艺术往往是游戏，游戏往往是艺术。<span
                class="super"
                ><a id="noteBack_2" href="#note_2">[2]</a></span
              >如果儿童的艺术活动没有了游戏性，那可以说这是被异化了的儿童艺术，并不是真正的儿童艺术。对于儿童来讲，艺术就是一种游戏，只有儿童从中获得欢乐和愉快的体验时，艺术才能真正成为儿童的需要，并且被儿童所接纳。游戏不仅仅是艺术教育的手段，必须构成艺术的必要成分，如同艺术是游戏的必要成分一样。<span
                class="super"
                ><a id="noteBack_3" href="#note_3">[3]</a></span
              >因此，0～3岁婴幼儿艺术活动必须遵循游戏性原则，这样不仅符合婴幼儿的身心发展特征，而且有利于促进他们的发展。
            </p>
            <p class="titleQuot-l">四、整合性原则</p>
            <p class="content">
              整合性原则指在0～3岁婴幼儿艺术活动中应加强艺术领域内部各艺术门类的融合，艺术领域与其他领域的融合，将各种不同的学习形式与方法加以融合，将其作为一个互相联系的整体来对待。“面对21世纪的挑战，教育由过去偏重智育向追求人格发展的教育转变，对人的生理、心智、情感、精神、想象层面都有不同程度的要求。单一的学科教育难以适应社会快速变迁的需要。”<span
                class="super"
                ><a id="noteBack_4" href="#note_4">[4]</a></span
              >更重要的是，儿童的发展、儿童的生活是一个有机整体。正如布约克沃尔德所说，“对缪斯本能的思考要求我们从生态学和有机整体观的角度来思考，如果我们不能尝试着从一个大的背景来思考，一个超越了学科和类型的既定界限、不同文化和不同年龄的既定界限、甚至是科学与诗学的既定界限的背景来思考，我们将无法看到本能的缪斯。”<span
                class="super"
                ><a id="noteBack_5" href="#note_5">[5]</a></span
              >因此，在0～3岁婴幼儿艺术活动中遵循整合性原则，既顺应社会快速变化的需要，也符合儿童发展的需要。
            </p>
          </span>
        </div>
      </div>
    </div>
    <!-- 20页 -->
    <div class="page-box" page="25">
      <div v-if="showPageList.indexOf(25) > -1">
        <ul class="header-left">
          <li class="headerNumber">020</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            如同语言活动能把听、说、读、写综合起来一样，艺术活动也可以把视觉的、听觉的、触觉的不同艺术门类融为一体。美术、音乐、文学等艺术门类存在某些共同审美要素，艺术领域内部不同学科的经验可以相互支持、相互迁移，艺术、科学、社会等领域的经验也可以相互联系、相互渗透。在0～3岁婴幼儿艺术活动中，应该有机融合各种艺术门类、艺术领域与其他领域，促进儿童艺术能力与人文素养的整合发展。
          </p>
          <p class="content">罗尔·布约克沃尔德提到这样一个案例：</p>
          <p class="quotation">
            一个小女孩全神贯注地趴在一张纸上，正在画一张“画”。她手中铅笔不规则地转来转去，但是却有着一定的节奏。手在纸上画的同时，她也唱着手的运动。这种歌声与动作的相伴，就是游戏与歌唱结合为一的“恩戈麦”的一个典型例证。……旋律、语词、动作组成了一体化的整体，在这个整体中，歌声是手臂运动的声音反映，也是纸上所画的标记……她不是为她画画这件事而唱，而是唱着画的动作；如果她已经沉浸到她的体验之中，我们甚至还可以说她本身也就是这画的动作的一部分。这一刻，她已经放弃了作为一个个体的主观性，成为一个整体的一部分，在这个整体中主、客观已经合而为一。正是凭借着这样的过程，游戏可以说既在此时此地发生，又超越了时空。内在真实和外在真实都已结合在一起，成为这个儿童在她或他的“恩戈麦”中安全停泊的一个结果。正是通过这样的整体感觉，儿童聚集着力量，稳步地达到更高水平的理解，越来越实现着他们自己。<span
              class="super"
              ><a id="noteBack_6" href="#note_6">[6]</a></span
            >
          </p>
          <p class="content">
            可见，学前儿童是一个整体性的存在，他们对世界的认识是通过一种“一体化的感受”，既看又听，又有身体动作等。不管是在艺术欣赏还是在艺术创作过程中，他们都是通过多感官（如视觉、听觉、动觉等）共同参与来体验和表现艺术的。<span
              class="super"
              ><a id="noteBack_7" href="#note_7">[7]</a></span
            >而且，儿童的生活本身就是一个整体，不可能按照学科分为“美术”“音乐”“文学”等，也不可能按照领域分为“艺术”“科学”“社会”等。所以，在0～3岁婴幼儿艺术活动中，成人应尊重儿童的身心发展特征，鼓励他们运用多种感官与方式来欣赏和表现艺术。
          </p>
        </div>
      </div>
    </div>
    <!-- 21页 -->
    <div class="page-box" page="26">
      <div v-if="showPageList.indexOf(26) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>021</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <div class="ExpandLearning">
            <p class="ExpandLearning-title">
              <span>拓</span>
              <span>展</span>
              <span>学</span>
              <span>习</span>
            </p>
            <p class="quotation">
              0～3岁是宝宝语言发展的关键期，也是他们语言能力发展最快的时期。此时，他们对语言具有一种特殊的感受力，对环境中的各种语言刺激格外敏感。童谣可以说是宝宝最早接触的语言类作品，它具有篇幅短小、富于情趣、语言浅显、音韵和谐等特点，非常适合正处于语言敏感期的宝宝练习说话。<span
                class="super"
                ><a id="noteBack_8" href="#note_8">[8]</a></span
              >快乐童谣，既可以帮助宝宝轻松学说话，又可以让宝宝感受和体验到文学作品的美。在学习童谣时，成人不妨引导宝宝边念童谣边做动作等，适时对宝宝进行艺术启蒙。
            </p>
            <p class="quotation">
              了解《快乐童谣，帮助宝宝轻松学说话》具体内容
            </p>
          </div>
          <p><br /></p>
          <p class="titleQuot-l">五、审美性原则</p>
          <p class="content">
            审美性原则是指0～3岁婴幼儿艺术活动的开展要以婴幼儿的审美心理特征为依据，引导他们发现美、感受美、表现美和创造美。对婴幼儿来说，艺术领域与其他领域的学习有所不同。在艺术活动中，婴幼儿进入一个美的天地，他们的情感世界变得丰富，欣赏美与创造美的能力得以发展，这是艺术教育的独特与优势。在艺术教育中，成人应以美的事物、美的方式启发婴幼儿感受和欣赏、表现和创造，从而培养他们对于美的事物、美的形式的敏感性与感受力。
          </p>
          <p class="content">
            在艺术活动中，创设适宜的审美情境，引发婴幼儿对作品的审美准备，是婴幼儿感受美、表现美的前提。图片、音乐、活动室的环境创设、教师的言行举止等共同构成了审美情境。譬如，教师在组织婴幼儿欣赏《摇篮曲》之前，不妨将活动室的窗帘拉上，使活动室内的光线变得柔和，同时可以用投影仪展示表现美好夜色的画面（如星星、月亮等）。孩子们进入活动室，马上就有身临其境的感觉。此外，为了创设整体审美情境，教师的情绪、语言、动作等应非常轻柔、有爱，和《摇篮曲》所表达的情感非常合拍。
          </p>
        </div>
      </div>
    </div>
    <!-- 22页 -->
    <div class="page-box" page="27">
      <div v-if="showPageList.indexOf(27) > -1">
        <ul class="header-left">
          <li class="headerNumber">022</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <div class="img-float w200 openImgBox">
            <img src="../../assets/images/Figure-0007-02.jpg" alt="" />
            <p class="imgdescript">图1-5　百老汇爵士乐　蒙德里安</p>
          </div>
          <span>
            <p class="content">
              儿童进入情境之后，教师注意引导他们与艺术进行对话，鼓励他们用自己喜欢的方式进行艺术表现。儿童与生俱来拥有艺术欣赏的潜能，在没有成人引导的情形下，他们也会主动大胆地探索与表达。譬如，圆圆在看到蒙德里安的《百老汇爵士乐》（图1-5）时，就兴奋地说“音符”“音乐”。倘若成人能够引导儿童与艺术进行对话，则更利于唤起儿童的情感体验，从而使他们获得审美感动。在理解艺术的基础上，婴幼儿会情不自禁地表达自己的情感与体验。成人应该尊重幼儿富有个性和创造性的表达，并给予适时、适当的支持。需要指出的是，基于婴幼儿的艺术学习心理特征，在艺术活动中，成人不妨让孩子“动起来”（既可以运用视觉、听觉、触觉等各种感官，又可以采用语言、动作、表情等多种方式）。
            </p>
          </span>
          <p class="learningDetection">学习检测</p>
          <p class="content">
            1．你认为什么是0～3岁婴幼儿艺术启蒙？0～3岁婴幼儿艺术启蒙具有哪些特点？
          </p>
          <p class="content">
            2．试述0～3岁婴幼儿艺术启蒙是一种通过艺术的教育还是一种为了艺术的教育并说明为什么。
          </p>
          <p class="content">3．请结合实践谈谈0～3岁婴幼儿艺术启蒙的价值。</p>
          <p class="content">
            4．下面是亲子园艺术教育活动“秋天的画报”，请你谈谈该活动遵循了哪些婴幼儿艺术启蒙原则？
          </p>
          <p class="poemtitle mt-20">
            活动名称：秋天的画报（2～3岁）<span class="super"
              ><a id="noteBack_9" href="#note_9">[9]</a></span
            >
          </p>
          <p class="content"><span class="bold">活动背景</span></p>
          <p class="quotation">
            “秋风吹，树枝摇，红叶黄叶往下掉……”伴随着秋天的童谣，秋日的细雨，秋天已慢慢进入宝宝的视野里。宝宝在秋天里有着很多新的发现：五颜六色的秋叶、形状各异的果实……他们已不知不觉地感受到秋天到来后万事万物所发生的变化。在之前的秋游活动中，在爸爸妈妈的陪同下宝宝已经寻找过秋天的踪迹，还捡了秋叶做成树叶贴画，因此，他们已具备了一些关于秋天的经验。
          </p>
        </div>
      </div>
    </div>
    <!-- 23页 -->
    <div class="page-box" page="28">
      <div v-if="showPageList.indexOf(28) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>023</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <p class="quotation">
            根据2～3岁幼儿的年龄特点，在艺术教育活动中，玩色游戏能够满足他们在游戏中学习的需要。在玩色过程中，幼儿在游戏中尝试运用多种材料进行艺术活动，体验玩色的乐趣；运用多种感官去感受色彩、认识色彩等。此外，教师还应发挥亲子活动的优势，充分挖掘、有效利用家长自身的教育资源，优化亲子艺术活动，促进幼儿审美能力的提高与家长育儿理念的提升。在这个美丽的季节，一幅“秋天的画报”的序幕就从这里拉开了……
          </p>
          <p class="content"><span class="bold">活动目标</span></p>
          <p class="quotation">活动目标（幼儿）</p>
          <p class="quotation">1．通过看、听、闻、摸等多通道感知秋天的特征；</p>
          <p class="quotation">
            2．尝试用捡到的树叶、树枝、果实等自然物蘸色印画，体验玩色的快乐；
          </p>
          <p class="quotation">
            3．利用自然物大胆尝试新的玩法，愿意和同伴一起游戏。
          </p>
          <p class="quotation">活动目标（家长）</p>
          <p class="quotation">
            1．引导宝宝观察秋天里大自然的变化，并用完整的语言表述；
          </p>
          <p class="quotation">
            2．根据宝宝的能力，适时、适当地给予技能技巧上的支持；
          </p>
          <p class="quotation">
            3．愿意和宝宝一起参与活动，鼓励宝宝探索新的玩色方法。
          </p>
          <p class="content"><span class="bold">活动准备</span></p>
          <p class="quotation">1．经验准备</p>
          <p class="quotation">
            已参加过亲子秋游活动，并和父母进行过树叶贴画。
          </p>
          <p class="quotation">2．物质准备</p>
          <p class="quotation">（1）事先在公园里布置好场地，一块白布长卷；</p>
          <p class="quotation">（2）宝宝穿合适的衣服，人手一个小桶；</p>
          <p class="quotation">
            （3）托盘中已调好的颜料（黄、橘、红、绿、灰、天空蓝等秋天的颜色）、晒干的玉米棒、戳洞的塑料瓶等；
          </p>
          <p class="quotation">
            （4）地垫若干张、湿纸巾、字卡“秋”、铃鼓、树叶头饰；
          </p>
          <p class="quotation">（5）背景音乐。</p>
          <p class="content"><span class="bold">活动过程</span></p>
          <p class="quotation">1．多感官感知秋天的特征，发现、寻找秋天</p>
          <p class="quotation">
            （1）引导宝宝在逛公园的过程中发现、寻找秋天，从听觉、视觉、触觉、嗅觉等多通道进行感知。
          </p>
          <p class="quotation">
            （2）沿途拾捡“秋姑娘”送给我们的礼物：秋叶、秋草、树枝、果实等，为艺术创作收集必要的材料。
          </p>
        </div>
      </div>
    </div>
    <!-- 24页 -->
    <div class="page-box" page="29">
      <div v-if="showPageList.indexOf(29) > -1">
        <ul class="header-left">
          <li class="headerNumber">024</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="quotation">
            （3）复习儿歌《秋天》（秋风吹、树枝摇、红叶黄叶往下掉，红树叶、黄树叶，片片飞来像蝴蝶），把它当作礼物送给“秋姑娘”。
          </p>
          <p class="quotation">2．欣赏秋叶、秋果，共同探索用其印画的方法</p>
          <p class="quotation">
            （1）同伴、师幼间相互欣赏捡来的自然物（如树叶、树枝），并匹配颜色。
          </p>
          <p class="quotation">
            （2）创设游戏情境，探索用自然物印画的方法（如盖印、滚印、甩印等），引导宝宝注意观察。
          </p>
          <p class="quotation">
            （3）介绍其他创作材料（如玉米棒、塑料瓶），启发宝宝表现表达。
          </p>
          <p class="quotation">3．宝宝自由创作，体验玩色的快乐</p>
          <p class="quotation">音乐起时，宝宝、家长、老师共同游戏。</p>
          <p class="quotation">
            在亲子创作时，引导家长鼓励宝宝利用自然物大胆尝试新的玩色方法。
          </p>
          <p class="quotation">4．展示与评价作品，体验成功与满足感</p>
          <p class="quotation">
            （1）将“秋天的画报”悬挂在公园的大树上，感受作品与自然的和谐之美。
          </p>
          <p class="quotation">
            （2）用游戏“击鼓传‘秋’”的方式引导宝宝共同欣赏作品，并鼓励宝宝谈谈创作“秋天的画报”的感受。
          </p>
          <p class="quotation">
            （3）在欢快的音乐中，宝宝佩戴树叶头饰，随风舞蹈，表达快乐的心情。
          </p>
          <p class="content"><span class="bold">活动延伸</span></p>
          <p class="quotation">
            宝宝可以和爸爸妈妈拾捡“秋姑娘”送给我们的礼物，并用这些自然物在家里进行艺术表现与创作。
          </p>
          <p class="titleQuot-1">实践体验</p>
          <p class="content">
            1．观察、记录0～3岁婴幼儿在艺术欣赏或创作过程中的表现，并针对观察记录加以分析。具体要求如下：
          </p>
          <p class="content">
            （1）包括观察时间、观察地点、观察对象（如年龄、性别等）、观察记录、评价、建议等内容；
          </p>
          <p class="content">
            （2）注意客观描述（记录）与主观评价（分析）须分开。
          </p>
          <p class="content">
            2．尝试运用0～3岁婴幼儿艺术启蒙的原则，设计一个婴幼儿艺术教育活动。具体要求如下：
          </p>
          <p class="content">
            （1）包括活动名称、活动背景、活动目标、活动准备、活动过程、活动延伸等组成部分；
          </p>
          <p class="content">
            （2）在活动名称部分写明适用年龄（如2～3岁），并针对此年龄段婴幼儿的身心发展水平进行活动设计。
          </p>
        </div>
      </div>
    </div>
    <!-- 25页 -->
    <div class="page-box" page="30">
      <div v-if="showPageList.indexOf(30) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>025</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle">
          <p class="titleQuot-1">推荐阅读书目</p>
          <p class="content">
            1．边霞.儿童艺术与教育[M].南京：江苏凤凰教育出版社，2015.
          </p>
          <p class="content">
            2．丰子恺.丰子恺美术夜谭[M].上海：上海人民美术出版社，2004.
          </p>
          <p class="content">
            3．楼必生，屠美如.学前儿童艺术综合教育研究[M].北京：北京师范大学出版社，1997.
          </p>
          <p class="content">
            4．王任梅.学前儿童美术教育（第2版）[M].北京：北京师范大学出版社，2020.
          </p>
          <p class="content">
            5．[美]琳达·卡罗尔·爱德华兹.音乐与律动：创造儿童的另一种生活方式[M].冯婉桢等译.北京：机械工业出版社，2015.
          </p>
          <p class="content">
            6．[美]伊莱恩·皮尔·科汉，鲁斯·斯特劳斯·盖纳.美术，另一种学习的语言[M].尹少淳译.长沙：湖南美术出版社，1992.
          </p>
        </div>
      </div>
    </div>
    <!-- 26页 -->
    <!-- <div class="page-box" page="31">
      <div v-if="showPageList.indexOf(31) > -1">
        <ul class="header-left">
          <li class="headerNumber">026</li>
          <li class="headerText">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle"></div>
      </div>
    </div> -->
    <!-- 27页 -->
    <!-- <div class="page-box" page="32">
      <div v-if="showPageList.indexOf(32) > -1">
        <ul class="header-right fl al-c jc-fe">
          <li class="header-right-Text">单元一　走近0~3岁婴幼儿艺术启蒙</li>
          <li class="header-right-Number">
            <span>027</span>
            <img
              class="img-b"
              src="../../assets/images/header-right.png"
              alt=""
            />
          </li>
        </ul>
        <div class="bodystyle"></div>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  name: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
hr {
  margin-left: 0;
  margin-bottom: 25px;
  width: 25%;
  border: none;
  height: 1.5px;
  background-color: #000;
}
</style>

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

New file
@@ -0,0 +1,147 @@
<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/feiYe.jpg" />
      </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">
          <hr />
          <p class="td-1 fm-hyzh fz-16">图书在版编目（CIP）数据</p>
          <p class="left3 mr-0 td-1 fm-hyss fz-14">
            0 ~ 3岁婴幼儿艺术启蒙/王任梅主编，-北京:北京<br />师范大学出版社，2020.10(2024.6重印)
          </p>
          <p class="left3 td-1 fm-hyss fz-14">(早期教育专业系列教材)</p>
          <p class="left3 td-1 fm-hyss fz-14">ISBN 978-7-303-26121-5</p>
          <p class="left3 fm-hyss fz-14 mt-20 mb-20">
            Ⅰ.①0… Ⅱ.①王… Ⅲ，①学前教育-艺术教育-<br />高等职业教育-教材I，①G613.5
          </p>
          <p class="left3 fm-hyss fz-14">
            中国版本图书馆CIP数据核字(2020)第136159号
          </p>
          <hr />
          <p><br /></p>
          <p><br /></p>
          <p><br /></p>
          <p class="left fz-13 fm-hyss">
            <span class="fm-hyzh fz-14">教材意见反馈:</span> gaozhifk@bnupgcom
            010-58805079
          </p>
          <p class="left fz-13 fm-hyss">
            <span class="fm-hyzh fz-14">营销中心电话:</span> 010-58802755
            58801876
          </p>
          <p class="left fz-13 fm-hyss">
            <span class="fm-hyzh fz-14"
              >编&thinsp;&thinsp;辑&thinsp;部&thinsp;电&thinsp;话:</span
            >
            010-58807468
          </p>
          <hr />
          <p class="left fm-hyss fz-14">
            出版发行：北京师范大学出版社 www.bnupg.com
          </p>
          <p class="left fm-hyss fz-14">
            　　　　　北京市西城区新街口外大街12-3号
          </p>
          <p class="left fm-hyss fz-14">　　　　　邮政编码：100088</p>
          <p class="left fm-hyss fz-14">
            印　　刷：鸿博容特(天津)印刷科技有限公司
          </p>
          <p class="left fm-hyss fz-14">经　　销：全国新华书店</p>
          <p class="left fm-hyss fz-14">开　　本：787mmx1092mm　1/16</p>
          <p class="left fm-hyss fz-14">印　　张：11.25</p>
          <p class="left fm-hyss fz-14">字　　数：220千字</p>
          <p class="left fm-hyss fz-14">版　　次：2020年10月第1版</p>
          <p class="left fm-hyss fz-14">印　　次：2024年6月第4次印刷</p>
          <p class="left fm-hyss fz-14">定　　价：36.80元</p>
          <hr />
          <p class="left fm-hyss fz-14">
            策划编辑：于晓晴　王　超　　　　责任编辑：肖　寒
          </p>
          <p class="left fm-hyss fz-14">
            美术编辑：焦　丽　　　　　　　　装帧设计：焦　丽
          </p>
          <p class="left fm-hyss fz-14">
            责任校对：段立超　　　　　　　　责任印制：陈　涛　赵　龙
          </p>
          <p class="left fm-hyss fz-14">封面插图：刘　菲</p>
          <p class="center mt-20"><b>版权所有 侵权必究</b></p>
          <p class="left center block">反盗版、侵权举报电话：010-58808104</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>
    </div>
    <!-- 前言 -->
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <div class="foreword">
          <h1 class="firstTitle">前　言</h1>
          <p class="preface">
            2022年10月16日，习近平总书记在作党的二十大报告时，讲到“实施科教兴国战略，强化现代化建设人才支撑”方面，特别强调“教育是国之大计、党之大计。培养什么人、怎样培养人、为谁培养人是教育的根本问题。育人的根本在于立德。全面贯彻党的教育方针，落实立德树人根本任务，培养德智体美劳全面发展的社会主义建设者和接班人。”要培养全面发展的社会主义建设者和接班人，就要落实好五育并举，美育是必不可少的。2020年10月，中共中央办公厅、国务院办公厅印发的《关于全面加强和改进新时代学校美育工作的意见》提出“美育是审美教育、情操教育、心灵教育，也是丰富想象力和培养创新意识的教育，能提升审美素养、陶冶情操、温润心灵、激发创新创造活力”。婴幼儿艺术启蒙作为美育的一个重要组成部分，可以促进婴幼儿审美能力的发展、手眼脑的协调，激发婴幼儿的想象力、创造力，培养婴幼儿的健全人格。立德树人是教育的根本任务。本书在编写过程中深入贯彻“师德为先”的理念，注重学生科学教育观、艺术观的树立及专业能力的提升，同时，引导学生形成良好的思想政治素养和深厚的教育情怀。
          </p>
          <p class="preface">
            《国务院办公厅关于促进3岁以下婴幼儿照护服务发展的指导意见》指出：3岁以下婴幼儿（以下简称婴幼儿）照护服务是生命全周期服务管理的重要内容，事关婴幼儿健康成长，事关千家万户。我们秉承“儿童都是艺术家”“儿童都是艺术评论家”的理念，充分相信儿童的艺术潜能。基于0～3岁婴幼儿艺术能力的发展，本书阐述了0～3岁婴幼儿艺术启蒙的内涵与定位、价值、原则，0～3岁婴幼儿艺术表现与创作能力、艺术感受与欣赏能力的发展等基本问题；结合具体翔实的案例，分析了0～3岁婴幼儿艺术表现与创作活动、艺术感受与欣赏活动目标的制订、内容的选择以及组织实施；且论述了0～3岁婴幼儿家庭艺术启蒙的内涵、特点、目的及指导等。
          </p>
        </div>
      </div>
    </div>
    <!-- 前言 -->
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <ul class="header-left">
          <li class="headerNumber">002</li>
          <li class="headerText ">0~3岁婴幼儿艺术启蒙</li>
        </ul>
        <div class="bodystyle">
          <p class="preface">
            本书是华中师范大学中央高校基本科研业务费资助项目“‘智慧学习与认知’青年学术创新团队”（CCNU19TD019）的研究成果之一。本书具有探索性、理论性、实践性、整合性等特点，既适合高等院校早期教育、学前教育（早教方向）等专业学生使用，又适合学前教育研究者、托育机构教师及家长等群体参考阅读。首先，本书所体现的艺术启蒙理念符合儿童及儿童艺术的特点，能够反映0～3岁婴幼儿艺术启蒙的最新研究与实践，而且鉴于当前0～3岁婴幼儿艺术启蒙的相关教材较少，本书具有一定的探索性。其次，本书理论联系实践的特点突出，在介绍基本理念的同时，呈现了很多优秀的案例、视频、图片等，注重启发学生进行艺术启蒙活动的设计与实施，重视学生实践能力和创新精神的培养。最后，本书不是从学科的角度来架构，而是从艺术作品的表现与创作、感受与欣赏角度来探索0～3岁婴幼儿艺术启蒙，适应婴幼儿以及婴幼儿学习的整体特征。
          </p>
          <p class="preface">
            本书由主编王任梅拟定编写提纲，负责全书的组织协调，后期的内容修改、文字润色、图片整理、数字资源审核等统稿工作，其他编写成员包括：孔国欢、汪钰洁、孙悦含等。具体编写分工为：单元一、单元五由王任梅编写；单元二由孔国欢编写；单元三由汪钰洁编写；单元四由孙悦含编写。
          </p>
          <p class="preface">
            此外，在构思阶段，韦国芬、方美红、姚静宜、王雅婧、宋雪、罗颖、秦国梅、魏银娣、蒋宜宏、周夕佳等同学为本书贡献了智慧，秦国梅还提供了部分精彩的视频资料，小红帽幼儿园的刘薇、刘佳、黄瑰、朱茜倩等老师组织实施的艺术活动给本书部分活动的设计带来了启发，在此一并致谢。
          </p>
          <p class="preface">
            感谢北京师范大学出版社于晓晴编辑对编者的信任与支持，感谢编写组全体成员的精诚协作与全力付出，感谢刘菲小朋友为本书提供了封面插图。
          </p>
          <p class="preface">
            由于目前关于0～3岁婴幼儿艺术启蒙的资料较少，加上编者时间、精力及能力的局限，书中尚存在许多不足之处，烦请各位专家同行雅正。
          </p>
          <p class="right-info mt-20">王任梅</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/artInitiationForAges0to3/view/components/index.vue

New file
@@ -0,0 +1,989 @@
<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>
        <!-- <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> -->
    </div>
  </div>
</template>

<script>
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
//   import chapterTwo from "./chapter002.vue";
//   import chapterThree from "./chapter003.vue";
//   import chapterFour from "./chapter004.vue";
//   import chapterFive from "./chapter005.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  name: "pageContent",
  data() {
    return {
      catalogLength: 2, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null,
      observer: null,
      loadPageObserver: null,
      loadPageList: [],
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
      audioPath: "",
      currentTime: null,
      videoList: [],
    };
  },
  computed: {
    fontSize() {
      this.transformDom(this.$store.state.qiankun.fontSize);
      return this.$store.state.qiankun.fontSize
        ? this.$store.state.qiankun.fontSize
        : 18;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale
        ? this.$store.state.qiankun.scale / 100
        : 1;
    },
  },
  watch: {
    showCatalogList: {
      handler(newVal, oldVal) {
        if (
          this.$store.state.qiankun &&
          this.$store.state.qiankun.catalogChange
        ) {
          // 调用父层方法
          this.$store.state.qiankun.catalogChange({
            showCatalogList: newVal,
          });
        }
        // 启动页码观察
        setTimeout(() => {
          this.initObservation();
          this.initThemeColor();
        }, 500);
      },
    },
    loadPageList: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          this.transformDom(this.$store.state.qiankun.fontSize);
          this.initSwiper();
          this.initViewer();
          this.closeAudio();
          this.closeVideo();
        }, 200);
      },
    },
    pageZoom: {
      handler(newVal, oldVal) {
        const scrollBox = (
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      },
    },
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [1];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
      this.throttleThreshold,
      { leading: true, trailing: false }
    );
    // 定义子层方法
    if (this.setGlobalState) {
      // 提供页面跳转功能
      this.setGlobalState({
        gotoPage: (catalog, page) => {
          this.gotoPage(catalog, page);
        },
        // 渲染笔记、高亮、划线
        renderSign: (type, data) => {
          // 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记；
          this.handelSignData(type, data);
          // this.renderSign(type, data);
        },
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        },
        // 全文检索
        searchBookByKeyword: (keyword) => {
          return this.searchTextByPage(keyword);
        },
        // 跳转检索结果位置
        jumpSearchItem: (data) => {
          this.searchItemLocation(data);
        },
      });
    }

    // 创建一个新的 Intersection Observer 实例，用于观察目标元素和执行相应的回调函数。
    // new IntersectionObserver(callback, options)：使用之前定义的 callback 回调函数和 options 配置选项来初始化 Intersection Observer 实例。
    this.observer = new IntersectionObserver(this.pageChangeCallback, {
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0.5, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    // 启动页码观察
    setTimeout(() => {
      this.initObservation();
      this.initThemeColor();
    }, 500);

    // 测试页面跳转
    setTimeout(() => {
      this.gotoPage(2, 9);
    //   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,
      };
      // 遍历所有章节文件
      for (const key in pageData) {
        catalogIndex++;
        let pageComponent, pageExample;
        // 先渲染一次当前章节文件（这时页面的内容为空），获取页码信息
        pageComponent = Vue.extend(pageData[key]);
        pageExample = new pageComponent({
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true,
          },
        });
        pageExample.$mount(
          (this.container ? this.container : document).querySelector(
            "#searchContent"
          )
        );
        // 获取页码
        const pageDom = (this.container ? this.container : document)
          .querySelector("#searchDomBox")
          .querySelectorAll(".page-box");
        const pages = [];
        for (let i = 0; i < pageDom.length; i++) {
          const pageDomItem = pageDom[i];
          pages.push(Number(pageDomItem.getAttribute("page")));
        }
        // 获取页面结束，卸载销毁
        pageExample.$destroy();
        (this.container ? this.container : document).querySelector(
          "#searchDomBox"
        ).innerHTML = '<div id="searchContent"></div>';
        // 遍历页码
        if (pages.length) {
          for (let i = 0; i < pages.length; i++) {
            const pageNum = pages[i];
            // 动态渲染对应章节的页码
            pageComponent = Vue.extend(pageData[key]);
            pageExample = new pageComponent({
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true,
              },
            });
            pageExample.$mount(
              (this.container ? this.container : document).querySelector(
                "#searchContent"
              )
            );
            // 获取对应页面dom
            const thisPageDom = (this.container ? this.container : document)
              .querySelector("#searchDomBox")
              .querySelector(`[page="${pageNum}"]`);
            if (thisPageDom) {
              // 获取页面所有text节点
              const pageTextList = document.createTreeWalker(
                thisPageDom,
                NodeFilter.SHOW_TEXT
              );
              // 匹配关键字
              const allPageTextNodes = [];
              let currentNode = pageTextList.nextNode();
              while (currentNode) {
                allPageTextNodes.push(currentNode);
                currentNode = pageTextList.nextNode();
              }
              for (let i = 0; i < allPageTextNodes.length; i++) {
                const textDom = allPageTextNodes[i];
                let txtIndex = textDom.textContent.indexOf(keyword);
                if (txtIndex > -1) {
                  // 记录关键字所在页码、章节以及匹配到的段落
                  searchResult.push({
                    page: pageNum,
                    catalog: catalogIndex,
                    txt: textDom.textContent,
                    txtIndex: txtIndex,
                  });
                }
              }
              // 结束，卸载销毁
              pageExample.$destroy();
              (this.container ? this.container : document).querySelector(
                "#searchDomBox"
              ).innerHTML = '<div id="searchContent"></div>';
            }
          }
        }
      }
      // 输出搜索结果
      console.log(searchResult);
      return searchResult;
    },
    // 根据检索结果跳转对应位置并高亮
    searchItemLocation(data) {
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      this.videoList = allVideo;
      if (allVideo.length) {
        // 查找播放状态的最后一条音频
        const playAudio = allVideo
          .reverse()
          .find((item) => item.paused == false);
        if (playAudio) {
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap < 0) {
            playAudio.pause();
            this.audioPath = playAudio.src;
            this.currentTime = playAudio.currentTime;
          }
        }
      }
    },
    // 页面向上滚动，音频小窗回收
    handleAudio() {
      if (!this.audioPath) return false;
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if (allVideo.length) {
        //查找与小窗播放音频同源的页面audio DOM
        const playAudio = allVideo.find((item) => item.src == this.audioPath);
        if (playAudio) {
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap >= 0) {
            if (this.$refs.audioPlayer) {
              const playerState = this.$refs.audioPlayer.getVideoPlayer();
              this.audioPath = "";
              playAudio.currentTime = playerState.currentTime;
              if (!playerState.paused) playAudio.play();
            }
          }
        }
      }
    },
    // 关闭mini video
    closeMiniAudio() {
      this.audioPath = "";
    },
    // 点击音频播放，关闭其他音频
    closeAudio() {
      let allAudio = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      for (let index = 0; index < allAudio.length; index++) {
        const item = allAudio[index];
        item.addEventListener("play", () => {
          const audioList = Array.from(allAudio);
          for (let cindex = 0; cindex < audioList.length; cindex++) {
            const citem = audioList[cindex];
            if (citem.currentSrc != item.src) {
              citem.pause();
            }
          }
          this.closeMiniAudio();
        });
      }
    },
    // 点击视频关闭其他
    closeVideo() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      for (let index = 0; index < allVideo.length; index++) {
        const item = allVideo[index];
        item.addEventListener("playing", (item) => {
          const path = item.srcElement.src;
          const videoList = Array.from(allVideo);
          for (let cindex = 0; cindex < videoList.length; cindex++) {
            const citem = videoList[cindex];
            if (citem.currentSrc != path && path) {
              citem.pause();
            }
          }
        });
      }
    },
    // 视频小窗
    handleVideoPicture() {
      let doms = (this.container ? this.container : document).querySelectorAll(
        ".video"
      );
      doms = Array.from(doms);
      if (!doms.length) return false;
      const playVudio = doms.reverse().find((item) => item.paused == false);
      if (playVudio) {
        const bottomGap = playVudio.getBoundingClientRect().bottom;
        const topGap = playVudio.getBoundingClientRect().top;
        if (bottomGap < 0 || topGap > window.innerHeight) {
          try {
            if (playVudio.readyState) playVudio.requestPictureInPicture();
          } catch (error) {
            console.log(error, "小窗错误error");
          }
        }
      }
    },
    //其他类名下字体大小变化
    transformDom(fs) {
      if (!fs) return;
      let doms = (this.container ? this.container : document).querySelectorAll(
        ".block"
      );
      if (!doms.length) return;
      for (let index = 0; index < doms.length; index++) {
        const dom = doms[index];
        dom.style.fontSize = fs + "px";
      }
    },
  },
  components: {
    pageHeader,
    chapterOne,
    //   chapterTwo,
    //   chapterThree,
    //   chapterFour,
    //   chapterFive,
  },
};
</script>

<style lang="less" scoped>
.page-main {
  width: 100% !important;
  height: 100% !important;
  overflow: auto;

  .page-content {
    max-width: 816px;
    min-width: 375px;
    margin: 0 auto;
    padding-bottom: 100px;
  }
}
</style>

 src/books/artInitiationForAges0to3/view/index.vue

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

@@ -3183,8 +3183,6 @@
                    <p class="td-0">
                        早期教育机构，其教育内容强调精细动作、专注力等方面能力的发展，也有粗大运动方面的培养，其教育形式相对固定化，课堂气氛没有前类早教机构活跃，教育内容，即课程的来源由教师根据教育经验及相关书籍自主制定或有经验的专家学者与教师共同编写；第三类为幼儿园内设立的亲子班，其教育内容和我国本土的早期教育机构相似，课程基本是3个月一期，根据孩子的年龄变化来改变课程内容，组织形式为家长和孩子共同参与。在增强孩子各方面能力发展的同时，增进亲子感情，并教给父母一些育儿知识。
                    </p>
                    <p>近些年来，不少国内学者对0～3岁婴幼儿的早期教育课程做了一定的开发研究工作。例如，陈帼眉、梁雅珠主编的《快乐亲子园实用教材（0～3岁）》，该书主要内容包括0～3岁儿童教养大纲、0～3岁儿童发展指标与教养策略、亲子园活动设计及组织指导、0～3岁亲子园活动设计、亲子园选附教材、亲子教育问题与策略，是比较全面的亲子园教育指导手册。由李俐编著、南京师范大学出版社出版的《零点起步——亲子园活动方案》一书，该书内容从7个月起，以6个月为一个教学阶段，提出不同的亲子活动方案，同时提出0～36个月婴幼儿的发育指标。书中详细介绍了各年龄阶段孩子每次课的活动目的、材料准备、活动内容，是一套详细的亲子园活动教材，活动过程具有很强的操作性。此外，还有鲍秀兰主编的《0～3岁：儿童最佳的人生开端》等书通过介绍婴幼儿身心发展的相关知识、早期教育关注的相关问题及教育策略指导等方面，给家长及广大早期教育工作者以借鉴。
                    </p>
                    <p>托育课程在我国正处于起步阶段，强调生活照料在婴幼儿成长中的重要意义，照料即课程，其课程内容以运动、探索、社交、艺术几个方面为主，结合生活活动、游戏活动，贯穿于一日生活各环节中。党的二十大报告指出，“我们深入贯彻以人民为中心的发展思想，在幼有所育、学有所教、劳有所得、病有所医、老有所养、住有所居、弱有所扶上持续用力”。托育作为一个新的发展领域，为0～3岁婴幼儿提供科学教养指导，可进一步满足人民的教育需求，助力于社会的进步。
                    </p>
                </div>

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

@@ -185,7 +185,7 @@
  
      // 测试页面跳转
      // setTimeout(() => {
      //   this.gotoPage(6, 253);
      //   this.gotoPage(1, 1);
        //   setTimeout(() => {
        //     this.renderSign("Highlight", {
        //       id: "2ACA9359",

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

@@ -1146,20 +1146,20 @@
          <p>3.理解正确处理旅客投诉的意义。</p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathNine" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              <video :src="videoPathEleven" 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" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：民航旅客投诉应对技巧</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoEight ? '点击取消' : '点击收藏'"
              <span>视频：旅客投诉原因的认知</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoTen ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '1f04f081f61aa13373daa7b8b92cc750'
                  (item) => item.id == 'b0ff55db0549ccb2f6c1b332798aa8d3'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-09')" />
                  " alt="" class="collect-btn" @click="handleCollect('video-11')" />
              </el-tooltip>
            </p>
          </div>
@@ -1555,20 +1555,20 @@
          <p>2.能够完成处理旅客投诉的实训任务。</p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathEleven" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              <video :src="videoPathNine" 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" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：旅客投诉原因的认知</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoTen ? '点击取消' : '点击收藏'"
              <span>视频：民航旅客投诉应对技巧</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoEight ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == 'b0ff55db0549ccb2f6c1b332798aa8d3'
                  (item) => item.id == '1f04f081f61aa13373daa7b8b92cc750'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-11')" />
                  " alt="" class="collect-btn" @click="handleCollect('video-09')" />
              </el-tooltip>
            </p>
          </div>

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

@@ -162,7 +162,7 @@

    //测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(5, 130);
    //   this.gotoPage(4, 116);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",

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

 src/books/cognitiveLanDevEduAges0to3/view/index.vue

 src/books/meetingPlanners/assets/examinationList.js

@@ -154,22 +154,22 @@
      136209, 136210, 136211, 136212, 136213, 136214, 136215, 136216, 136217, 
      136218, 136219, 136220
    ],
    
    241:[
      136221, 136222, 136223, 136224, 136225, 136226, 136227,136228, 136229, 
    ],
    245:[
      136230, 136231, 136232, 136233, 136234, 136235, 136236, 136237, 136238, 
      136239, 136240, 136241
    ],
    247:[

    243:[
      136242, 136243, 136244, 136245, 136246, 136247, 136248, 136249, 136250, 
      136251, 136252, 136253
    ],
    249:[
    245:[
      136254, 136255, 136256, 136257, 136258, 136259, 136260, 136261, 136262, 
      136263, 136264, 136265
    ],
    249:[
      136230, 136231, 136232, 136233, 136234, 136235, 136236, 136237, 136238, 
      136239, 136240, 136241
    ],
    253:[
      136266, 136267, 136268, 136269, 136270, 136271, 136272, 136273, 136274, 
      136275, 136276, 136277

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

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

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

 src/books/meetingPlanners/assets/images/0037-01.jpg

 src/books/meetingPlanners/assets/images/0040-01.jpg

 src/books/meetingPlanners/assets/images/0042-01.jpg

 src/books/meetingPlanners/assets/images/0042-02.jpg

 src/books/meetingPlanners/assets/images/0043-01.jpg

 src/books/meetingPlanners/assets/images/0050-01.jpg

 src/books/meetingPlanners/assets/images/0051-01.jpg

 src/books/meetingPlanners/assets/images/0054-01.jpg

 src/books/meetingPlanners/assets/images/0060-01.jpg

 src/books/meetingPlanners/assets/images/0063-01.jpg

 src/books/meetingPlanners/assets/images/0064-01.jpg

 src/books/meetingPlanners/assets/images/0070-01.jpg

 src/books/meetingPlanners/assets/images/0079-01.jpg

 src/books/meetingPlanners/assets/images/0082-01.jpg

 src/books/meetingPlanners/assets/images/0089-01.jpg

 src/books/meetingPlanners/assets/images/0091-01.jpg

 src/books/meetingPlanners/assets/images/0096-01.jpg

 src/books/meetingPlanners/assets/images/0098-01.jpg

 src/books/meetingPlanners/assets/images/0101-01.jpg

 src/books/meetingPlanners/assets/images/0103-01.jpg

 src/books/meetingPlanners/assets/images/0104-01.jpg

 src/books/meetingPlanners/assets/images/0104-02.jpg

 src/books/meetingPlanners/assets/images/0106-01.jpg

 src/books/meetingPlanners/assets/images/0109-01.jpg

 src/books/meetingPlanners/assets/images/0109-02.jpg

 src/books/meetingPlanners/assets/images/0111-01.jpg

 src/books/meetingPlanners/assets/images/0111-02.jpg

 src/books/meetingPlanners/assets/images/0125-01.jpg

 src/books/meetingPlanners/assets/images/0129-01.jpg

 src/books/meetingPlanners/assets/images/0135-01.jpg

 src/books/meetingPlanners/assets/images/0137-01.jpg

 src/books/meetingPlanners/assets/images/0143-01.jpg

 src/books/meetingPlanners/assets/images/0143-02.jpg

 src/books/meetingPlanners/assets/images/0143-03.jpg

 src/books/meetingPlanners/assets/images/0143-04.jpg

 src/books/meetingPlanners/assets/images/0143-05.jpg

 src/books/meetingPlanners/assets/images/0143-06.jpg

 src/books/meetingPlanners/assets/images/0144-01.jpg

 src/books/meetingPlanners/assets/images/0168-01.jpg

 src/books/meetingPlanners/assets/images/0170-01.jpg

 src/books/meetingPlanners/assets/images/0170-02.jpg

 src/books/meetingPlanners/assets/images/0173-01.jpg

 src/books/meetingPlanners/assets/images/0175-01.jpg

 src/books/meetingPlanners/assets/images/0177-01.jpg

 src/books/meetingPlanners/assets/images/0177-02.jpg

 src/books/meetingPlanners/assets/images/0177-03.jpg

 src/books/meetingPlanners/assets/images/0178-01.jpg

 src/books/meetingPlanners/assets/images/0181-01.jpg

 src/books/meetingPlanners/assets/images/0182-01.jpg

 src/books/meetingPlanners/assets/images/0182-02.jpg

 src/books/meetingPlanners/assets/images/0182-03.jpg

 src/books/meetingPlanners/assets/images/0183-01.jpg

 src/books/meetingPlanners/assets/images/0184-01.jpg

 src/books/meetingPlanners/assets/images/0186-01.jpg

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

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

 src/books/meetingPlanners/assets/images/0193-2.jpg

 src/books/meetingPlanners/assets/images/0194-01.jpg

 src/books/meetingPlanners/assets/images/0197-01.jpg

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

 src/books/meetingPlanners/assets/images/0209-2.jpg

 src/books/meetingPlanners/assets/images/0210-1.jpg

 src/books/meetingPlanners/assets/images/0210-2.jpg

 src/books/meetingPlanners/assets/images/0211-01.jpg

 src/books/meetingPlanners/assets/images/0211-1.jpg

 src/books/meetingPlanners/assets/images/0211-2.jpg

 src/books/meetingPlanners/assets/images/0211-3.jpg

 src/books/meetingPlanners/assets/images/0212-01.jpg

 src/books/meetingPlanners/assets/images/0212-1.jpg

 src/books/meetingPlanners/assets/images/0212-2.jpg

 src/books/meetingPlanners/assets/images/0213-01.jpg

 src/books/meetingPlanners/assets/images/0213-1.jpg

 src/books/meetingPlanners/assets/images/0213-2.jpg

 src/books/meetingPlanners/assets/images/0213-3.jpg

 src/books/meetingPlanners/assets/images/0214-01.jpg

 src/books/meetingPlanners/assets/images/0219-1.jpg

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

 src/books/meetingPlanners/assets/images/0222-01.jpg

 src/books/meetingPlanners/assets/images/0223-01.jpg

 src/books/meetingPlanners/assets/images/0227-01.jpg

 src/books/meetingPlanners/assets/images/0228-01.jpg

 src/books/meetingPlanners/assets/images/0228-02.jpg

 src/books/meetingPlanners/assets/images/0228-03.jpg

 src/books/meetingPlanners/assets/images/0228-04.jpg

 src/books/meetingPlanners/assets/images/0230-01.jpg

 src/books/meetingPlanners/assets/images/0233-01.jpg

 src/books/meetingPlanners/assets/images/0234-2.jpg

 src/books/meetingPlanners/assets/images/0235-01.jpg

 src/books/meetingPlanners/assets/images/0235-2.jpg

 src/books/meetingPlanners/assets/images/0236-2.jpg

 src/books/meetingPlanners/assets/images/0237-01.jpg

 src/books/meetingPlanners/assets/images/0237-1.jpg

 src/books/meetingPlanners/assets/images/0237-2.jpg

 src/books/meetingPlanners/assets/images/0240-1.jpg

 src/books/meetingPlanners/assets/images/0240-2.jpg

 src/books/meetingPlanners/assets/images/0241-01.jpg

 src/books/meetingPlanners/assets/images/025-3.jpg

 src/books/meetingPlanners/assets/images/0250-01.jpg

 src/books/meetingPlanners/assets/images/0250-02.jpg

 src/books/meetingPlanners/assets/images/0251-01.jpg

 src/books/meetingPlanners/assets/images/0254-01.jpg

 src/books/meetingPlanners/assets/images/0257-1.jpg

 src/books/meetingPlanners/assets/images/0257-2.jpg

 src/books/meetingPlanners/assets/images/0257-3.jpg

 src/books/meetingPlanners/assets/images/0265-01.jpg

 src/books/meetingPlanners/assets/images/0267-01.jpg

 src/books/meetingPlanners/assets/images/0268-01.jpg

 src/books/meetingPlanners/assets/images/0268-02.jpg

 src/books/meetingPlanners/assets/images/0269-01.jpg

 src/books/meetingPlanners/assets/images/0270-01.jpg

 src/books/meetingPlanners/assets/images/0270-02.jpg

 src/books/meetingPlanners/assets/images/0272-01.jpg

 src/books/meetingPlanners/assets/images/0274-01.jpg

 src/books/meetingPlanners/assets/images/0275-01.jpg

 src/books/meetingPlanners/assets/images/0282-01.jpg

 src/books/meetingPlanners/assets/images/0282-1.jpg

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

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

 src/books/meetingPlanners/assets/mian.less

@@ -598,6 +598,9 @@
        margin-top: 0% !important;
        margin-bottom: 0% !important;
    }
    .left-call{
        text-indent: 0em;
    }

    .left1 {
        font-size: 18px;
@@ -1091,6 +1094,78 @@
        margin-top: -2.5em;
        margin-bottom: -0.2em;
    }

    // 新增h5的样式
    .h5-title-o{
        background-color: #1ed1b4;
        border-radius: 20px;
        font-family: 'FZHTJW';
        color: #fff;
        text-align: left;
        padding: 3px 20px;
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 1.0em;
        text-indent: 0em;
        display: inline-block;
    }
    .h5-title-b{
        background-color:#63c7e9;
        border-radius: 20px;
        font-family: 'FZHTJW';
        color: #fff;
        text-align: left;
        padding: 3px 20px;
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 1.0em;
        text-indent: 0em;
        display: inline-block;
    }

    .h5-title-g{
        background-color: #00af50;
        border-radius: 20px;
        font-family: 'FZHTJW';
        color: #fff;
        text-align: left;
        padding: 3px 20px;
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 1.0em;
        text-indent: 0em;
        display: inline-block;
    }

    .video-box-cover {
        border: 1px dashed #588e32;
        padding: 2% 2%;
    }

    .video-box {
        margin: 20px 0 20px 0;
        border: 1px dashed #588e32;
        padding: 2% 2%;
    }

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

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

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



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

@@ -133,17 +133,9 @@
                    <h4 id="d002">
                        <span class="zt-h4">二</span><span class="qyls-h4">会议在会展业中的作用</span>
                    </h4>
                    <p>
                        会议在会展业中扮演着至关重要的角色。通过举办高质量的会议，会展活动能够获得更大的影响力和成功。因此，会议在会展中具有不可替代的地位，对于行业的繁荣和参会者的个人发展都具有重要意义。
                    </p>
                    <h5 id="e004">（一）会议是会展的核心活动之一</h5>
                    <p>
                        举办会议可以吸引来自全球各地的专业人士和企业代表参加。参会者们汇聚在一起，共同分享来自不同地区和行业的最新行业趋势、技术和研究成果。这种跨地域和跨行业的参与模式使得会议成为提供丰富资源和专业知识的交流平台。同时，在会议中聆听行业专家和权威代表的演讲和互动，对于参会者具有重要意义。通过与专家的深入交流，参会者能够获得权威的见解和反馈，拓宽自己的视野和思路。这种互动不仅丰富了参会者对行业的理解，还能够激发创新思维，引领他们探索新的业务机会。
                    </p>
                    <h5 id="e005">（二）会议是会展的重要营销工具</h5>
                    <p>
                        通过举办高质量的会议，会议主办方（发起者）可以进一步提高自己的品牌形象和知名度，并吸引各界专业人士的关注，这在会议相关的媒体报道和口碑传播中体现得尤为明显。媒体对于高质量会议的关注常常以新闻报道、专题采访和社交媒体推广等方式呈现。这些媒体的报道和传播可以为会议提供更广泛的曝光度和知名度，吸引更多专业人士的目光。同时，会议也是推广企业和展品的良机。在会议中，企业可以利用演讲、展示区等形式向潜在客户介绍他们的产品和服务。
                    </p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-d" src="../../assets/images/0018-01.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
@@ -158,13 +150,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <h5 id="e006">（三）会议为会展提供了重要的收益来源</h5>
                    <p>
                        除了传统的参会注册收入和赞助收入，会议主办方还可以通过出售会议纪念品、会议报告、会议论文集和专业咨询等附加服务来获得更多的收益。出售会议纪念品是一种常见的附加服务。会议主办方可以设计和制作独特的印有会议的标志和口号的纪念品，这些纪念品的售卖不仅给参会者带来了参与感，还可以在会后继续推广会议品牌，从而为会议主办方带来额外的收益。会议报告和会议论文集的销售也是一项重要的附加服务。会议主办方可以将会议的主题演讲和研究报告整理成精美的报告或论文集，并提供给参会者购买。
                    </p>
                    <p>
                        综上所述，会议在会展业中具有非常重要的作用，它不仅是会展的核心活动之一，也是会展的重要营销工具和收益来源。
                    </p>
                    <div class="bk-21">
                        <p>
                            <svg t="1732588062611" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -198,7 +183,7 @@
                            而在第二届中国国际消费品博览会上举办的“全球消费论坛”，以“可持续消费，驱动低碳未来”为主题，旨在呼应国家“双碳”目标，深入探讨和分享领先企业的可持续消费与生产实践。
                        </p>
                        <p>
                            综上所述，在我国各大展会上举办论坛活动的这一形势，不仅成功稳住了中国外贸基本盘，为会议业提振了士气，还促进了产业经济的发展。首先，中国政府高
                            综上所述，在我国各大展会上举办论坛活动的这一形势，不仅成功稳住了中国外贸基本盘，为会议业提振了士气，还促进了产业经济的发展。首先，中国政府高度重视会展活动中的会议板块，以及其在推动国际交流、落实国家战略、提升国家形象等方面的功能，这决定了由政府主导的赛事、展览、会议等活动将拥有持续增长的空间。其次，随着中国向更加注重经济增长质量和人民生活品质的新时代迈进，会议、展览业将从以促进经贸为主转型升级为以促进经济、文化、艺术、体育等多轮联动为主要目标，会议、展览活动的功能将更加多元，类型将更加丰富，对社会经济生活的影响会更加深远。
                        </p>
                    </div>
                </div>
@@ -216,9 +201,6 @@
                </ul>
                <div class="bodystyle">
                    <div class="bk-2">
                        <p class="td-0">
                            度重视会展活动中的会议板块，以及其在推动国际交流、落实国家战略、提升国家形象等方面的功能，这决定了由政府主导的赛事、展览、会议等活动将拥有持续增长的空间。其次，随着中国向更加注重经济增长质量和人民生活品质的新时代迈进，会议、展览业将从以促进经贸为主转型升级为以促进经济、文化、艺术、体育等多轮联动为主要目标，会议、展览活动的功能将更加多元，类型将更加丰富，对社会经济生活的影响会更加深远。
                        </p>
                        <p>
                            资料来源：裴超：《“会”聚新动能
                            会议业对新时期经济发展所起到的赋能与创新作用》，载《中国会展（中国会议）》，2023（4）：24-29+8。
@@ -237,7 +219,10 @@
                        在表现形式上，展览与会议也有较大差异：单个展览活动的规模更大，场面也更热烈，感染力、传播力都更强；会议虽然总量比展览多得多，但单个会议的平均规模相对较小，这可能也是一些地方政府“重展轻会”的主要原因。
                    </p>
                    <h5 id="e007">（一）会议与展览的区别</h5>
                    <p class="zt-h6">1.功能途径不同</p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-0" src="../../assets/images/0020-01.jpg" alt="">
                    </div>
                    <!-- <p class="zt-h6">1.功能途径不同</p>
                    <p>
                        展览主要通过展示商品、展品、产品、样品、艺术品、成果等，搭建贸易、交流及信息的平台，专业展览的主办方必须撮合参展商和买家、专业观众相聚一堂。而会议主要是交流信息和知识，分享方案和应用，促进决策，凝聚团队精神的集体活动，一般不展示展品。
                    </p>
@@ -251,8 +236,8 @@
                    </p>
                    <p class="zt-h6">4.市场化程度不同</p>
                    <p>
                        展览的市场化程度要大大高于会议。展览的主办方多为商业公司，为争夺有限的展
                    </p>
                        展览的市场化程度要大大高于会议。展览的主办方多为商业公司，为争夺有限的展览资源和展览市场，竞争十分激烈。而会议的主办方多以官方或半官方的协会、非政府组织、媒体机构为主。例如，公司会议预算主要来自企业内部，协会社团会议不以营利为目的，而作为政府会议的政府主办方一般也不能直接对会议进行收费。近年来，尽管市场上出现了由商业公司独自进行市场运作的专业会议公司，但是总量仍然很少。
                    </p> -->
                </div>
            </div>
        </div>
@@ -267,10 +252,7 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        览资源和展览市场，竞争十分激烈。而会议的主办方多以官方或半官方的协会、非政府组织、媒体机构为主。例如，公司会议预算主要来自企业内部，协会社团会议不以营利为目的，而作为政府会议的政府主办方一般也不能直接对会议进行收费。近年来，尽管市场上出现了由商业公司独自进行市场运作的专业会议公司，但是总量仍然很少。
                    </p>
                    <p class="zt-h6">5.流动性不同</p>
                    <!-- <p class="zt-h6">5.流动性不同</p>
                    <p>
                        展览较“笨重”，以固定的时间、周期在固定的城市举办为主，流动性较弱，轮流举办的商业展览较少。而会议较“轻巧”，流动性较强。轮流在各地举办的会议以协会/社团会议为主。目的地城市为了争夺会议举办权会全年开展竞争，而展览目的地需要竞标的情况较为少见。
                    </p>
@@ -297,7 +279,7 @@
                    <p class="zt-h6">11.开放性程度不同</p>
                    <p>
                        展览的开放性更高，更具外部性，展览就怕人少，人气越多则展会越旺。相较于展览，会议的封闭性更强，参会时要么需要付费，要么需要审核身份，对议题和内容的审核要求更高。例如，每年各大高等院校主办的会议不计其数，但因其非公开性，或仅针对特定的专业人群，大多无法为外界所知晓。
                    </p>
                    </p> -->
                </div>
            </div>
        </div>
@@ -312,12 +294,15 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="zt-h6">12.人们的看法不一样</p>
                    <!-- <p class="zt-h6">12.人们的看法不一样</p>
                    <p>
                        当前，普通大众对展览的认知度要高于会议。一听到展览，如进博会、广交会、上海车展，人们大都知道是做什么的，与自己有什么关系。而会议的议题通常离普通大众的生活较远或专业性、知识性较强，比如博鳌论坛，一般只有专业人士才会关注。
                    </p>
                    </p> -->
                    <h5 id="e008">（二）会议与展览的联系</h5>
                    <p class="zt-h6">1.信息传递</p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-0" src="../../assets/images/0022-01.jpg" alt="">
                    </div>
                    <!-- <p class="zt-h6">1.信息传递</p>
                    <p>
                        会议和展览都致力于提供信息和知识，满足参与者对行业最新动态和知识的需求。通过演讲、研讨会、展览展示等形式，参与者可以得到灵感和启发，获得新的见解和经验，提高自己的业务能力，拓宽自己的思路和知识储备。
                    </p>
@@ -332,7 +317,7 @@
                    <p class="zt-h6">4.推广和展示</p>
                    <p>
                        会议和展览对于推广和展示产品、服务、研究成果等都具有重要意义。在演讲、发布、展览展示以及展台宣传等方面，会议和展览都提供了机会，使参与者能够将自己的产品、服务、研究成果等推广给潜在客户或合作伙伴。参与者可以通过展示自身的专业知识和创新思维，吸引潜在客户关注并建立业务合作关系。会议和展览的活动和环境为参与者提供了一个广阔的舞台，能够有效地展示他们的实力和价值，加强其品牌形象和市场认知度。
                    </p>
                    </p> -->
                    <div class="bk-1">
                        <div class="bk-11">
                            <p><span class="bk-11">本节金句</span></p>
@@ -367,7 +352,7 @@
                    </h4>
                    <h5 id="e009">（一）萌芽初现阶段（1949—1978年）</h5>
                    <p>
                        在新中国成立初期，国家经济基础非常薄弱，各行各业百废待兴，会议产业也处于萌芽状态。在这个时期，会议活动主要由政府组织承办，会议规模相对较小，多以政治会议和党政机关会议为主，用于实现国家建设和政策制定等目标。这一时期会议产业发展缓慢，但政府对于会议的重视程度逐渐加深。1949年11月16日至12月1日，亚洲澳洲
                        在新中国成立初期，国家经济基础非常薄弱，各行各业百废待兴，会议产业也处于萌芽状态。在这个时期，会议活动主要由政府组织承办，会议规模相对较小，多以政治会议和党政机关会议为主，用于实现国家建设和政策制定等目标。这一时期会议产业发展缓慢，但政府对于会议的重视程度逐渐加深。1949年11月16日至12月1日，亚洲澳洲工会代表会议在北京召开，这次会议是新中国诞生后举行的第一次国际会议，这次会议预示着以中国为代表的第三世界国家开始登上世界政治舞台。本阶段会议业发展的特点如下。
                    </p>
                </div>
            </div>
@@ -383,9 +368,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        工会代表会议在北京召开，这次会议是新中国诞生后举行的第一次国际会议，这次会议预示着以中国为代表的第三世界国家开始登上世界政治舞台。本阶段会议业发展的特点如下。
                    </p>
                    <p>
                        一是会议活动的规模较小。由于历经战乱和经济困难，会议活动规模相对较小，大多集中在政府机构和行业协会内部，一般以政治宣传和政策布置为主。
                    </p>
@@ -426,7 +408,7 @@
                    </p>
                    <h5 id="e012">（四）高速发展阶段（2000—2012年）</h5>
                    <p>
                        随着中国加入世界贸易组织（WTO），2001亚太经合组织（APEC）领导人非正式会议、北京奥运会以及上海世博会的成功举办，推动了中国会议产业的快速发展。在本阶
                        随着中国加入世界贸易组织（WTO），2001亚太经合组织（APEC）领导人非正式会议、北京奥运会以及上海世博会的成功举办，推动了中国会议产业的快速发展。在本阶段，中国会议产业进入了一个高速发展的时期，会议规模和质量得到提升，会议产业开始向多元化和国际化方向发展。本阶段会议业发展的特点如下。
                    </p>
                </div>
            </div>
@@ -442,9 +424,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        段，中国会议产业进入了一个高速发展的时期，会议规模和质量得到提升，会议产业开始向多元化和国际化方向发展。本阶段会议业发展的特点如下。
                    </p>
                    <p>
                        一是国际化发展。中国会议产业开始加强与国际接轨，积极参与国际会议组织和机构，吸引更多国际会议在中国举办，以提高中国会议产业的国际影响力。中国加入WTO后，各类国际会议纷纷涌入中国，吸引了大量国内外参会者，进一步推动了会议产业的国际化发展。如2008年夏季达沃斯论坛在中国的成功举办，对中国的会议产业向国际化方向发展起到了推波助澜的作用。
                    </p>
@@ -513,9 +492,6 @@
                    <p>
                        党的二十大报告提出要加快发展数字经济，促进数字经济和实体经济深度融合，打造具有国际竞争力的数字产业集群。《中华人民共和国国民经济和社会发展第十四个五年规划和2035年远景目标纲要》提出，加快数字化发展，建设数字中国。在数字化浪潮下，数字会展科技将承担新的使命，会议业将加速线上线下融合发展趋势。随着新时代数字经济的发展，会展业已初步构建数字会展新格局。
                    </p>
                    <p>
                        随着信息技术、人工智能和大数据等前沿技术的广泛应用，线上线下融合成为行业发展新模式，为会议行业创造了更多机遇，为会议产业带来了巨大的变革和创新。会议
                    </p>
                </div>
            </div>
        </div>
@@ -530,8 +506,8 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        不再受制于空间和距离的限制，极大地扩大了会议的受众范围。在线会议、虚拟会议已经成为常见的数字化会议形式。智慧会议的应用范围非常广泛，包括政府会议、企业内部会议、行业协会会议、学术交流会议等。在政府会议方面，智慧会议可以实现远程视频连线，提高会议效率和决策质量；在企业内部会议方面，智慧会议可以实现远程培训、远程评估等功能，提高企业内部沟通和协作效率；在行业协会会议和学术交流会议方面，智慧会议可以实现远程学术报告、在线交流等功能，促进行业和学术研究的交流。
                    <p>
                        随着信息技术、人工智能和大数据等前沿技术的广泛应用，线上线下融合成为行业发展新模式，为会议行业创造了更多机遇，为会议产业带来了巨大的变革和创新。会议不再受制于空间和距离的限制，极大地扩大了会议的受众范围。在线会议、虚拟会议已经成为常见的数字化会议形式。智慧会议的应用范围非常广泛，包括政府会议、企业内部会议、行业协会会议、学术交流会议等。在政府会议方面，智慧会议可以实现远程视频连线，提高会议效率和决策质量；在企业内部会议方面，智慧会议可以实现远程培训、远程评估等功能，提高企业内部沟通和协作效率；在行业协会会议和学术交流会议方面，智慧会议可以实现远程学术报告、在线交流等功能，促进行业和学术研究的交流。
                    </p>
                    <p class="zt-h6">1.智慧会议的兴起使会议形式和内容得以全面升级</p>
                    <p>
@@ -597,7 +573,7 @@
                    </p>
                    <p class="zt-h6">3.共享经济理念推动了会议经验的共享与协同创新</p>
                    <p>
                        会议产业经验的共享有助于优化会议组织和执行过程，提高会议品质和会议效果。
                        会议产业经验的共享有助于优化会议组织和执行过程，提高会议品质和会议效果。共享新时代倡导会议主办方之间的协作与交流，通过分享成功案例、经验教训和最佳实践，形成良好的行业共同体和合作网络，共同提升会议组织和执行的能力。共享经济平台和社交网络为会议主办方提供了交流和合作的机会，形成了开放的创新生态系统。这种协同创新的模式不仅促进了会议产业的专业化和标准化，还激发了创新思维、独特体验和个性化服务的发展。
                    </p>
                </div>
            </div>
@@ -613,9 +589,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        共享新时代倡导会议主办方之间的协作与交流，通过分享成功案例、经验教训和最佳实践，形成良好的行业共同体和合作网络，共同提升会议组织和执行的能力。共享经济平台和社交网络为会议主办方提供了交流和合作的机会，形成了开放的创新生态系统。这种协同创新的模式不仅促进了会议产业的专业化和标准化，还激发了创新思维、独特体验和个性化服务的发展。
                    </p>
                    <p>
                        会议产业作为一个具有广泛影响力的领域，在促进经济发展、推动创新和提升国际影响力等方面都具有重要作用。会议产业已经进入了共享发展的新时代，共享知识和经验将成为会议产业新时代的重要特征，加强行业间创新和合作，推动行业可持续发展。
                    </p>
@@ -758,10 +731,6 @@
                    <p>
                        再好的活动创意也需要严厉的执行方案和实际落实，才能够取得预期效果。会议策划人员需要具备会议执行的专业知识和技能，包括现场布置、设备调试、嘉宾接待、会务服务等方面。执行能力具体细分，又包括现场环境和设施管理能力、设备操作和维护能力、嘉宾接待和服务水平控制能力等。
                    </p>
                    <p class="zt-h6">3.项目管理能力</p>
                    <p>
                        最能体现会议策划人员项目管理能力的关键步骤是任务拆解，它可以帮助项目管理者更好地理解和规划项目，并将项目分解为可管理的任务单元。由于会议策划涉及许多
                    </p>
                </div>
            </div>
        </div>
@@ -776,8 +745,9 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        具体的任务和细节，故拆解任务至关重要。策划者需要将整个策划过程分解成可管理的任务，并针对每个任务明确相关责任人和任务截止日期，这有助于确保每个任务按时完成，并协调整个策划团队的工作。因此，会议策划人员需要具备项目管理的专业知识和技能，包括预算、供应商协调、活动流程和人员安排、项目计划制订、项目进度控制、项目风险管理等，以保证项目顺利推进。
                    <p class="zt-h6">3.项目管理能力</p>
                    <p>
                        最能体现会议策划人员项目管理能力的关键步骤是任务拆解，它可以帮助项目管理者更好地理解和规划项目，并将项目分解为可管理的任务单元。由于会议策划涉及许多具体的任务和细节，故拆解任务至关重要。策划者需要将整个策划过程分解成可管理的任务，并针对每个任务明确相关责任人和任务截止日期，这有助于确保每个任务按时完成，并协调整个策划团队的工作。因此，会议策划人员需要具备项目管理的专业知识和技能，包括预算、供应商协调、活动流程和人员安排、项目计划制订、项目进度控制、项目风险管理等，以保证项目顺利推进。
                    </p>
                    <p class="zt-h6">4.创新创意能力</p>
                    <p>
@@ -913,7 +883,7 @@
                    </p>
                    <p>·会展涵盖展览、会议、节庆、赛事、演艺五大业态。</p>
                    <p>
                        ·会议在会展中扮演着至关重要的角色。会议是会展的核心活动之一，是会展的重
                        ·会议在会展中扮演着至关重要的角色。会议是会展的核心活动之一，是会展的重要营销工具，为会展提供了重要的收益来源。
                    </p>
                </div>
            </div>
@@ -929,7 +899,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">要营销工具，为会展提供了重要的收益来源。</p>
                    <p>
                        ·我国会议业发展历程分为五个阶段，分别为：萌芽初现阶段（1949—1978年）、初步发展阶段（1979—1992年）、迅速发展阶段（1993—1999年）、高速发展阶段（2000—2012年）、创新发展阶段（2013年至今）。
                    </p>
@@ -1013,10 +982,6 @@
                        <p>
                            2022年，世界布商大会在浙江省绍兴市柯桥区举办，世界电池产业大会在四川省宜宾市举办，世界川菜大会在四川省雅安市举办，世界工业设计大会在山东省烟台市举办，世界入海口城市合作发展大会在山东省东营市举办。我国更多中小城市开始承接国际会议。出现这一趋势说明我国经济社会日益发达，中小城市会议设施日益完善。世界发达国家的情况也是如此。例如，瑞士的达沃斯、德国的美因茨、日本的轻井泽，以及举办过G7峰会的英国海滨度假胜地卡比斯贝、法国滨海小城比亚里茨、意大利的西西里岛陶尔米纳小镇等。而在我国，除了上述中小城市以外，还有海南的博鳌、内蒙古的库布齐、黑龙江的亚布力、福建的武夷山、四川的都江堰等地，也都是著名论坛的永久会址或曾举办过知名的国际会议的城市。可以看出，新形势下国际会议的目的地不仅青睐传统的北上广深等大城市，对中小城市的需求也在逐渐增加，这必然会对会议人才产生新的需求。
                        </p>
                        <p><b>材料2：</b></p>
                        <p>
                            诸多行业人士认为，会议行业需要理论基础扎实、综合能力强、人文素质好、创新思维敏捷的创新型人才，即具备“一专多能”特质的人才。一专，即具备一项专业核心竞争力。多能，指的是多种能力，包括运营能力、创意策划能力、数字营
                        </p>
                    </div>
                </div>
            </div>
@@ -1033,8 +998,9 @@
                </ul>
                <div class="bodystyle">
                    <div class="bk-2">
                        <p class="td-0">
                            销能力、资源整合能力、沟通协调能力、社会交往能力、语言文字能力等。对于会议人才而言，既要有让会议项目“生出来”的项目创意策划能力、让会议项目“长起来”的项目运营能力、让会议项目“强起来”的项目数字营销与品牌建设能力，还要敢于创新，突破常规；掌握说话的艺术，学会随机应变；锻炼写作能力，发挥写作技巧；在学习专业和行业知识的同时，需要脚踏实地地干，不断提升自身的综合能力。对于刚毕业的大学生而言，总体来讲是可以适应的，他们可塑性强，可以将企业需要和个人学习力及驱动力多方面结合，确定未来的职业发展路线。
                        <p><b>材料2：</b></p>
                        <p>
                            诸多行业人士认为，会议行业需要理论基础扎实、综合能力强、人文素质好、创新思维敏捷的创新型人才，即具备“一专多能”特质的人才。一专，即具备一项专业核心竞争力。多能，指的是多种能力，包括运营能力、创意策划能力、数字营销能力、资源整合能力、沟通协调能力、社会交往能力、语言文字能力等。对于会议人才而言，既要有让会议项目“生出来”的项目创意策划能力、让会议项目“长起来”的项目运营能力、让会议项目“强起来”的项目数字营销与品牌建设能力，还要敢于创新，突破常规；掌握说话的艺术，学会随机应变；锻炼写作能力，发挥写作技巧；在学习专业和行业知识的同时，需要脚踏实地地干，不断提升自身的综合能力。对于刚毕业的大学生而言，总体来讲是可以适应的，他们可塑性强，可以将企业需要和个人学习力及驱动力多方面结合，确定未来的职业发展路线。
                        </p>
                        <p><b>材料3：</b></p>
                        <p>
@@ -1165,7 +1131,10 @@
                    <h4 id="d009">
                        <span class="zt-h4">一</span><span class="qyls-h4">会议的起源</span>
                    </h4>
                    <p>
                    <div class="fl jc-c">
                        <img class="img-a" src="../../assets/images/0037-01.jpg" alt="">
                    </div>
                    <!-- <p>
                        人类在文明产生前的存在形式，一是劳动，二是思想。最初的劳动可以独立进行，甚至独立完成。但是，思想从一开始就注定不可能独立进行和独立完成，因为思想依赖于语言，而语言产生于交流，交流一定发生在两个人或两个人以上。所以，一旦发生两个人以上的语言交流，起源于思想交流的“会议”就产生了。
                    </p>
                    <p>
@@ -1173,7 +1142,7 @@
                    </p>
                    <p>
                        伴随着人类文明的发展，会议形式日益多样化。其中，对话是最早的会议形式之一。古希腊思想家通常是在广场上演讲，古希腊的广场就如同自由的思想市场。柏拉图的“对话”、苏格拉底倡导的“问答法”至今仍然是一种重要的教学方法。在我国古代，《诗经》通过朗读和唱诵得以传播，《论语》是孔子与学生对话的记录，或者说，属于会议记录。通过教学对话实现知识传播也是一种特殊的会议。
                    </p>
                    </p> -->
                    <h4 id="d010">
                        <span class="zt-h4">二</span><span class="qyls-h4">会议的产生</span>
                    </h4>
@@ -1184,7 +1153,7 @@
                        古代国家与国家间的会议主要体现为外交活动，最初是两个国家的代表会晤并探讨有关两国利益的问题，后来发展到数个国家以集会的方式解决涉及各自利益的问题。在古代，无论是东方，还是西方，从诸侯国战争或城邦间战争中都可以初步窥见国际会议的雏形。
                    </p>
                    <p>
                        进入中世纪之后，随着封建君主制的巩固和民族国家的成长，会议内容在西方获得了新的发展，其突出表现是由罗马教皇多次召开的“万国宗教会议”。这些会议的参加者既有欧洲各国的僧侣代表，也有世俗国家的使节。会议不仅讨论宗教问题，还涉及世
                        进入中世纪之后，随着封建君主制的巩固和民族国家的成长，会议内容在西方获得了新的发展，其突出表现是由罗马教皇多次召开的“万国宗教会议”。这些会议的参加者既有欧洲各国的僧侣代表，也有世俗国家的使节。会议不仅讨论宗教问题，还涉及世俗问题。到了15世纪，宗教会议除讨论那些重大的宗教问题之外，还探讨一些政治性问题，如国际冲突等，对当时的国际关系产生了不小的影响。在这些会议上，国君及其使节开始发挥重要作用，参会的代表团初步具有了“民族”的性质。可以说，万国宗教会议是现代国际会议的前身。
                    </p>
                </div>
            </div>
@@ -1200,9 +1169,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        俗问题。到了15世纪，宗教会议除讨论那些重大的宗教问题之外，还探讨一些政治性问题，如国际冲突等，对当时的国际关系产生了不小的影响。在这些会议上，国君及其使节开始发挥重要作用，参会的代表团初步具有了“民族”的性质。可以说，万国宗教会议是现代国际会议的前身。
                    </p>
                    <div class="mindMap">
                        <div class="fl al-c">
                            <span class="fl">
@@ -1232,7 +1198,10 @@
                    </p>
                    <h5 id="e030">（三）完善阶段</h5>
                    <p>
                        这一阶段，文字开始被实际运用于会议活动；会议成为国家管理活动必不可少的手段；会议的形式和内容越来越多；各种会议活动的功能、职能、方式、程序和效力都有了较严格的规定。人们利用文字将会议的过程和决策记录下来，使其得以在更大范围和更长的时间内发挥作用，从而使会议结果获得了超越时空的传播。这个阶段的会议形
                        这一阶段，文字开始被实际运用于会议活动；会议成为国家管理活动必不可少的手段；会议的形式和内容越来越多；各种会议活动的功能、职能、方式、程序和效力都有了较严格的规定。人们利用文字将会议的过程和决策记录下来，使其得以在更大范围和更长的时间内发挥作用，从而使会议结果获得了超越时空的传播。这个阶段的会议形式，才是今天人们所认识到的真正体现会议本质和功能的形式。
                    </p>
                    <p>
                        真正具有现代意义的国际会议，首推17世纪中叶召开的威斯特伐利亚会议。威斯特伐利亚会议更是开创了近代国家之间通过举行大规模国际会议来解决重大国际问题的先例。这次会议虽然在组织和程序上还不完善，但在接待礼仪、嘉宾排位、代表权限等会议细节方面为以后的国际会议提供了宝贵经验。
                    </p>
                </div>
            </div>
@@ -1248,12 +1217,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        式，才是今天人们所认识到的真正体现会议本质和功能的形式。
                    </p>
                    <p>
                        真正具有现代意义的国际会议，首推17世纪中叶召开的威斯特伐利亚会议。威斯特伐利亚会议更是开创了近代国家之间通过举行大规模国际会议来解决重大国际问题的先例。这次会议虽然在组织和程序上还不完善，但在接待礼仪、嘉宾排位、代表权限等会议细节方面为以后的国际会议提供了宝贵经验。
                    </p>
                    <p>
                        现代会议的组织机构主要有三大类：政府、协会和企业。第二次世界大战以后，原来的殖民地、半殖民地国家纷纷独立，国家政府间的国际组织也迅速增多，包括联合国、阿拉伯国家联盟、东南亚国家联盟、北约、华约等；各个国家内部及全球性的协会组织，包括学术类、行业类、联谊类等纷纷成立，以协会及协会会议为工作对象的专业机构也开始成长起来，如国际协会联盟（UIA）、国际大会及会议协会（ICCA）、美国社团管理协会（ASAE）等；1963年，国际大会及会议协会（简称ICCA）成立，此协会是全球国际会议最主要的机构组织之一。
                    </p>
@@ -1314,6 +1277,9 @@
                    <p>
                        对于会议的定义，孙中山先生曾在其著作《民权初步》中提出：“凡研究事理而为之解决，一人谓之独思，二人谓之对话，三人以上而循一定规则者，则谓之会议。”
                    </p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0040-01.jpg" alt="">
                    </div>
                    <p class="zt-h6">2.会议在汉语中的解释</p>
                    <p>
                        在《现代汉语词典》中，会议有以下两个解释：一是指一种经常商讨并处理重要事务的常设机构或组织，如政协会议；二是指有组织有领导地商议事情的集会，如工作会议。
@@ -1348,7 +1314,7 @@
                    </p>
                    <p class="zt-h6">6.行业人士的解释</p>
                    <p>
                        中国会展经济研究会统计委员会副主任、中国会展集训营创始人张凡先生对会议的
                        中国会展经济研究会统计委员会副主任、中国会展集训营创始人张凡先生对会议的定义也有自己的观点，他认为，凡是在租赁场地召开会议，能够产生GDP（国内生产总值）的活动（社会消费）都应称之为会议，即属于会议产业统计的会议。
                    </p>
                </div>
            </div>
@@ -1364,9 +1330,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        定义也有自己的观点，他认为，凡是在租赁场地召开会议，能够产生GDP（国内生产总值）的活动（社会消费）都应称之为会议，即属于会议产业统计的会议。
                    </p>
                    <h5 id="e032">（二）本书的定义</h5>
                    <p>
                        综上所述，本书将会议定义为：三个或三个以上的人按一定的组织原则聚合在一起，围绕某些共同关心的内容而进行临时性的多向沟通。
@@ -1391,14 +1354,6 @@
                    <p>
                        凡是活动名称上带“会”的，不一定是会议，例如全国糖酒商品交易会（简称“糖酒会”）、中国进出口商品交易会（简称“广交会”）、中国西部国际投资贸易洽谈会（简称“西洽会”）等。糖酒会、广交会、西洽会等著名的会展活动，虽然里面有附带会议，但其主体形式是展览，会议仅是其辅助或次要形式。判断是否属于会议，一定要把握该活动的主体形式。例如由中国会展杂志社举办的历届中国国际会展文化节活动，名称上虽有“节”字，但其活动主体是会议，并辅以展览、项目签约、推介活动等多项子活动，因此，中国国际会展文化节仍属于会议范畴。
                    </p>
                    <p class="zt-h6">5.固定培训和考试不属于会议</p>
                    <p>
                        最为常见的考研培训班，公务员培训班，托福、雅思培训班，高校开设的总裁培训班、研究生课程培训班，政府部门下属的交流中心、社团和企业开设的名目繁多的培训班，以及出国外语考试、考研考试等，这些均不属于会议，而是属于商品买卖的范畴。这类商品的购买者往往是以获得某种资质、证书或提高某方面能力为目的的个人。
                    </p>
                    <p class="zt-h6">6.人才招聘会、高校毕业生双选会不属于会议</p>
                    <p>
                        企业或者机关、事业单位到校园里举行的招聘会、双选会，均不属于会议，其本质是展览，是B2C形式，即用人单位对个人的展览。
                    </p>
                </div>
            </div>
        </div>
@@ -1413,10 +1368,21 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="zt-h6">5.固定培训和考试不属于会议</p>
                    <p>
                        最为常见的考研培训班，公务员培训班，托福、雅思培训班，高校开设的总裁培训班、研究生课程培训班，政府部门下属的交流中心、社团和企业开设的名目繁多的培训班，以及出国外语考试、考研考试等，这些均不属于会议，而是属于商品买卖的范畴。这类商品的购买者往往是以获得某种资质、证书或提高某方面能力为目的的个人。
                    </p>
                    <p class="zt-h6">6.人才招聘会、高校毕业生双选会不属于会议</p>
                    <p>
                        企业或者机关、事业单位到校园里举行的招聘会、双选会，均不属于会议，其本质是展览，是B2C形式，即用人单位对个人的展览。
                    </p>
                    <h4 id="d013">
                        <span class="zt-h4">二</span><span class="qyls-h4">会议的特征</span>
                    </h4>
                    <h5 id="e034">（一）目的性</h5>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0042-01.jpg" alt="">
                    </div>
                    <!-- <h5 id="e034">（一）目的性</h5>
                    <p>
                        会议具有目的性，这是因为会议是一种围绕特定目标进行的、以口头发言或书面交流为主要方式的、有组织有计划的商务活动。会议的目的包括：促进业务推广与扩大品牌影响，促进教育培训和激励士气，促进信息共享和交流沟通，促进问题解决和决策制定。
                    </p>
@@ -1435,17 +1401,20 @@
                    <h5 id="e038">（五）交流方式多样性</h5>
                    <p>
                        传统的会议是以口头交流为主、书面交流为辅的活动方式，但是从现代会议所采用的交流方式来看，在会场上还可以运用图片、图表、幻灯片、语音或视频等方式进行交流。会议是一个集合的载体，大家聚集在一起共同讨论、交流，从而产生新想法。许多高水准的创意就是开会期间不同观念相互碰撞的产物。
                    </p>
                    </p> -->
                    <h4 id="d014">
                        <span class="zt-h4">三</span><span class="qyls-h4">开会的原因</span>
                    </h4>
                    <p>
                        开会的原因通常是想要解决某个问题或者讨论某个议题，而开会的目的则是希望通过讨论找到解决问题的方法。例如，公司要召开一个会议来讨论新项目的进展情况，这就是开会原因。在这个例子中，公司召开会议的目的可能是确保新项目按计划进行，并就如何改进该项目的进展达成共识。因此，召开会议的目的是确保项目的成功实施。简言之，开会的原因是解释为什么要开会，而开会的目的则是明确希望达到或实现的结果。
                    </p>
                    <h5 id="e039">（一）大多数企业在会议中决定其基本走向</h5>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0042-02.jpg" alt="">
                    </div>
                    <!-- <h5 id="e039">（一）大多数企业在会议中决定其基本走向</h5>
                    <p>
                        一方面，企业90%以上的重大决策是通过会议制定的。如果不定期召开会议，大部
                    </p>
                        一方面，企业90%以上的重大决策是通过会议制定的。如果不定期召开会议，大部分团体和组织就无法正常运作。例如，国企的决策机制是民主集中制，凡企业“三重一大”事项，须先提交党委会，留好会议记录，做好领导班子成员签字工作，随后才能转交经营管理层人员进行讨论决策。部分重要的事项还需要经过董事会讨论通过才可执行，如涉及公司组织架构重大调整、重大业务投资等事宜。若不通过会议讨论来解决，很难形成统一的意见。因此，每当遇到上述重要事项，管理者便会组织各种大会小会，确保企业的各条战线不出现重大决策失误。
                    </p> -->
                </div>
            </div>
        </div>
@@ -1460,10 +1429,7 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        分团体和组织就无法正常运作。例如，国企的决策机制是民主集中制，凡企业“三重一大”事项，须先提交党委会，留好会议记录，做好领导班子成员签字工作，随后才能转交经营管理层人员进行讨论决策。部分重要的事项还需要经过董事会讨论通过才可执行，如涉及公司组织架构重大调整、重大业务投资等事宜。若不通过会议讨论来解决，很难形成统一的意见。因此，每当遇到上述重要事项，管理者便会组织各种大会小会，确保企业的各条战线不出现重大决策失误。
                    </p>
                    <p>
                    <!-- <p>
                        另一方面，“一夫当关”的英雄时代已经过去，加强团队合作才能顺利成就事业。由全体成员共同参加的会议的效果远远超过集体中每个个体力量的简单加总，而且企业内部存在的问题可能错综复杂，甚至超出了领导者个人能力范畴，因此，将具有不同背景和观点的人聚集在一起，共同探讨并作出决策变得越来越重要。
                    </p>
                    <h5 id="e040">（二）由主要领导者的管理思路决定</h5>
@@ -1473,7 +1439,7 @@
                    <h5 id="e041">（三）开会是企业常见的管理方式</h5>
                    <p>
                        开会是企业管理中不可或缺的一环，是企业常见的一种管理方式。首先，企业通过会议可以传达上级通知和重要会议精神，从而实现信息的快速传递和认知的统一。其次，会议能够督促工作进度和开展工作部署，管理层可以通过会议了解每个部门的工作情况和工作进度，及时解决问题和制订计划。再次，开会还能促进成员之间的沟通和交流，加强团队合作，让每个岗位的员工更加了解彼此的工作。最后，适当地开会有利于提高工作效率和决策效果，通过讨论和协商可以快速作出决策，提升工作质量和效果。
                    </p>
                    </p> -->
                    <div class="bk-21">
                        <p>
                            <svg t="1732588062611" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -1503,10 +1469,33 @@
                    <h4 id="d015">
                        <span class="zt-h4">四</span><span class="qyls-h4">会议的目的</span>
                    </h4>
                    <h5 id="e042">（一）促进业务推广与扩大品牌影响</h5>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0043-01.jpg" alt="">
                    </div>
                    <div class="video-box">
                        <p class="center text td-0">
                            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true"
                                playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true"
                                x5-playsinline="" controls controlslist="nodownload" class="w100 video"
                                style="border-radius: 10px"></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：如何正确开例会</span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(
                                    (item) => item.id == '9ad72c6080ecd35a1fe3d4f6f6cc7d7e'
                                ) > -1
                                    ? collectCheck
                                    : collectImg
                                    " alt="" class="collect-btn" @click="handleCollect('video-01')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <!-- <h5 id="e042">（一）促进业务推广与扩大品牌影响</h5>
                    <p>
                        会议可以作为一种有效的推广工具，帮助主办方宣传和推广其产品、服务和品牌形象。这类会议既包括企业组织的销售会议、新产品发布会、新产品说明会、招商会，也包括政府机关组织的经验推广会、新闻发布会，还包括各类单位组织的招聘会、各类社团组织的会员招募会等。推广、销售从本质而言是为了“做生意”，政府的招商说明会，非营利组织/社团为了吸引赞助商或合作伙伴、招募发展更多会员、留住老会员而举办的新闻发布会、介绍说明会、年会等同样出于该目的。
                    </p>
                    </p> -->
                </div>
            </div>
        </div>
@@ -1521,7 +1510,7 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p>
                    <!-- <p>
                        在此目的下，企业办会的目的还可以细分为拓展客户、品牌曝光、销售转化、促活留存四种类型。（详见本书第四章第一节小资料4-2）
                    </p>
                    <h5 id="e043">（二）促进教育培训和激励士气</h5>
@@ -1541,7 +1530,7 @@
                    <h5 id="e045">（四）促进问题解决和决策制定</h5>
                    <p>
                        会议是人们为了解决某个共同的问题，或出于不同的目的聚集在一起进行讨论、交流的活动。一般在下面三种情形下，可以通过会议来促进问题的解决：一是能力范围内解决不了的问题，需要寻求帮助；二是权限范围内解决不了的问题，需要领导协调；三是不可控或意料之外的问题，需要领导商量。通过举办讨论会、研讨会或决策会议，企业能够集思广益，吸收各方意见，共同研究和解决问题。
                    </p>
                    </p> -->
                    <div class="mindMap">
                        <div class="fl al-c">
                            <span class="fl">
@@ -1888,13 +1877,16 @@
                    <p>
                        不定期会议即不按固定周期召开的会议，有时会因临时或突发性事件而召开，或因主办机构对于下次会议何时召开未能达成共识，不能下定决心而临时决定开会。由于主办方缺少承诺和投入且在主题和议题设置上投入不够，难以招募到足够多的参会者，也难以邀请到高质量的演讲嘉宾，企业没有足够的预算安排员工参会或出资赞助、参展等，因此不定期会议的质量很难保证。
                    </p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-b" src="../../assets/images/0050-01.jpg" alt="">
                    </div>
                    <h4 id="d020">
                        <span class="zt-h4">五</span><span class="qyls-h4">按会议性质划分</span>
                    </h4>
                    <h5 id="e054">（一）常见的统计口径</h5>
                    <p class="zt-h6">1.法定性会议</p>
                    <p>
                        法定性会议即根据有关法律与法规规定必须举行的会议，以及特定组织为履行法定职责而举行的会议。前者如各级人民代表大会、企业的董事会议和股东大会等，后者如
                        法定性会议即根据有关法律与法规规定必须举行的会议，以及特定组织为履行法定职责而举行的会议。前者如各级人民代表大会、企业的董事会议和股东大会等，后者如各种法定组织的领导人办公会议等。
                    </p>
                </div>
            </div>
@@ -1910,11 +1902,13 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">各种法定组织的领导人办公会议等。</p>
                    <p class="zt-h6">2.非法定性会议</p>
                    <p>
                        非法定性会议即在法律和法规允许的、法定性会议以外的会议，如决策性会议、各类研讨会、新闻发布会、交流恳谈会、经贸洽谈会等。
                    </p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="w80" src="../../assets/images/0051-01.jpg" alt="">
                    </div>
                    <h5 id="e055">（二）《中国会议统计分析报告》统计口径</h5>
                    <p>
                        会议的目的决定了会议的性质。《中国会议统计分析报告》归纳了六种最常见的会议性质，如表2-4所示。
@@ -2100,6 +2094,26 @@
                    <p>
                        由此形成的“会议产业链”主要包括会议组织者、会议接待场所、会议城市、会议策划与服务公司、会议技术与设备企业等有关方面。
                    </p>
                    <div class="video-box">
                        <p class="center text td-0">
                            <video :src="videoPathTwo" 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"
                                style="border-radius: 10px"></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：2024第16届中国生物产业大会开幕</span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideoOne ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(
                                    (item) => item.id == '8992f041711af3def770baa6e7baa334'
                                ) > -1
                                    ? collectCheck
                                    : collectImg
                                    " alt="" class="collect-btn" @click="handleCollect('video-02')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <h4 id="d024">
                        <span class="zt-h4">二</span><span class="qyls-h4">会议产业的归属</span>
                    </h4>
@@ -2194,10 +2208,13 @@
                    <h4 id="d025">
                        <span class="zt-h4">三</span><span class="qyls-h4">会议产业的特征</span>
                    </h4>
                    <h5 id="e068">（一）会议产业属于朝阳产业</h5>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-b" src="../../assets/images/0054-01.jpg" alt="">
                    </div>
                    <!-- <h5 id="e068">（一）会议产业属于朝阳产业</h5>
                    <p>
                        市场经济的发展，使更多的个人和组织成为经营主体，而如何推销自己及其产品和思想，并建立起广泛的商业关系也就成为十分紧迫的任务。营销的有效手段是高效沟
                    </p>
                    </p> -->
                </div>
            </div>
        </div>
@@ -2212,7 +2229,7 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                    <!-- <p class="td-0">
                        通，虽然现代通信技术与传播手段使人们之间的信息沟通变得十分便利，但是仅靠通信工具与传播手段并不能达到高效沟通的效果。会议作为面对面的双向沟通方式，可以通过某一主题吸引与之有关的各方参与其中，并围绕主题共同探讨发展思路，交流经验和文化，传播信息、知识、观念，寻找投资项目或投资者，最终获得一般场合难以获取的收获。因此，会议产业会随着市场经济的发展而不断发展壮大。
                    </p>
                    <h5 id="e069">（二）会议产业以文化为其基本内涵</h5>
@@ -2235,7 +2252,7 @@
                    </p>
                    <p>
                        会议业的间接收益主要来自服务业、饭店业、餐饮业、旅游业、零售业和手工业、通信业等。
                    </p>
                    </p> -->
                    <div class="bk-21">
                        <p>
                            <svg t="1732588062611" class="icon" viewBox="0 0 1024 1024" version="1.1"
@@ -2576,7 +2593,10 @@
                        总的来说，会议策划是指为了使会议取得预期目的，而进行构思、设计，并选择合理可行方案的过程。
                    </p>
                    <h5 id="e078">（二）会议策划的特点</h5>
                    <p class="zt-h6">
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-a" src="../../assets/images/0060-01.jpg" alt="">
                    </div>
                    <!-- <p class="zt-h6">
                        1.会议策划的实质：对未来会议活动的组织、管理和执行的安排
                    </p>
                    <p>
@@ -2590,7 +2610,7 @@
                    </p>
                    <p>
                        （3）内容指向是会议产品生产、营销与交换活动。内容指向既包括会议吸引力、服务、活动，又包括会议形象、营销、融资，还包括会议附设展览、文化体验活动、餐饮住宿等后期服务，其外延是十分宽泛的。同时，内容指向还指会议策划要关注会议的可持续发展，通过绿色会议、公益会议等方式，提升会议的社会价值和品牌影响力。
                    </p>
                    </p> -->
                </div>
            </div>
        </div>
@@ -2605,7 +2625,7 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="zt-h6">2.会议策划的任务：以最优的方式实现策划目标</p>
                    <!-- <p class="zt-h6">2.会议策划的任务：以最优的方式实现策划目标</p>
                    <p>
                        会议策划的最终任务是实现策划目标，一般表现为产生最大的经济效益、社会效益和环境效益，可以细化为两种类型：一种是为解决影响委托方发展的实际问题的会议策划，另一种是为实现委托方的发展愿景的会议策划。在政府会议中，社会效益往往大于经济效益，所以成本并不是首先考虑的因素；而在企业会议中，成本却是企业优先考虑的因素。因此，在策划会议时需要根据委托方的不同需求和预算，选择最合适的方式和手段，以达到最优的效果。
                    </p>
@@ -2628,7 +2648,7 @@
                    <p class="zt-h6">4.会议策划的核心：运用智慧对未来进行运筹和谋划</p>
                    <p>
                        会议策划的核心是策划主体对未来会议产品及会议活动的组织、管理和执行的运
                    </p>
                    </p> -->
                </div>
            </div>
        </div>
@@ -2643,7 +2663,7 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                    <!-- <p class="td-0">
                        筹、谋划、构思和设计，运筹和谋划是其根本特征。策划者需要考虑到会议的整体目标，预测未来可能遇到的问题，并制定相应的解决方案。
                    </p>
                    <p class="zt-h6">4.会议策划的核心：运用智慧对未来进行运筹和谋划</p>
@@ -2672,7 +2692,7 @@
                    <p class="zt-h6">6.会议策划的成果：会议策划方案</p>
                    <p>
                        会议策划的成果是形成一套切实可行的会议策划方案。会议策划经过一系列的规划
                    </p>
                    </p> -->
                </div>
            </div>
        </div>
@@ -2687,7 +2707,7 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                    <!-- <p class="td-0">
                        活动，最终要形成一套切实可行的执行方案，并以书面的形式反映在会议策划书中，简称会议策划文案，供客户（或决策者）评价与分析，以决定是否执行。
                    </p>
                    <p>
@@ -2695,14 +2715,17 @@
                    </p>
                    <p>
                        因此，一个好的会议策划方案应该在不断调整和优化完善的基础上，确保方案具备清晰明了的目标、合理的安排和周全的服务支持。只有这样才能确保会议顺利进行并达到预期效果。
                    </p>
                    </p> -->
                    <h4 id="d029">
                        <span class="zt-h4">三</span><span class="qyls-h4">会议策划的要素</span>
                    </h4>
                    <p>
                        一份完整的会议策划包括策划目标、策划主体、策划对象、策划依据、策划方案、策划效果评估等核心要素。
                    </p>
                    <h5 id="e079">（一）策划目标</h5>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="w80" src="../../assets/images/0063-01.jpg" alt="">
                    </div>
                    <!-- <h5 id="e079">（一）策划目标</h5>
                    <p>
                        会议策划的核心要素之一是会议策划的目标。策划目标可以是单一目标，也可以是复合目标。单一目标是指会议策划中的具体策略问题，如会议主题、会议名称、会议宣传推广、参会者邀请等；复合目标是指策划方案涉及的两个或两个以上的活动目标，如市场占有率、销售利润率，或同时对价格、渠道、促销等各项活动的预定目标进行策划。
                    </p>
@@ -2724,7 +2747,7 @@
                    </p>
                    <p>
                        从方案形式来看，策划方案不必拘泥于书面文本、文字的多少，可以口头表达、实
                    </p>
                    </p> -->
                </div>
            </div>
        </div>
@@ -2739,7 +2762,7 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                    <!-- <p class="td-0">
                        践指导、交流培训等。从方案内容来看，一个完整的方案应包括“5W2H”要素，即明确“why”（为什么）——策划的假设、原因、必要性和可行性分析等；“what”（什么）——策划目标、主题等；“who”（谁）——策划主体、客体、利益相关者等；“where”（何处）——策划涉及的地域、场所、空间等；“when”（何时）——策划涉及的周期、时间节点等；“how”（怎样）——解决问题和达到目标的具体策略、方式等；“how
                        much”（如何）——策划方案的实施预算、经济效益和社会效益回报等。从质量要求来看，策划方案应观点鲜明、论证充分、策略得当，具有较强的创新性和实操性。从格式来看，策划方案一般包括策划封面、内容提要、正文目录、主体内容、效益评估和风险规避等。
                    </p>
@@ -2749,10 +2772,13 @@
                    </p>
                    <p>
                        以上所述会议策划诸要素之间是一个相互影响、相互制约的体系。要想构建好一个完整的系统工程，还需要会议组织机构及其他利益主体的默契配合和高效运作。
                    </p>
                    </p> -->
                    <h4 id="d030">
                        <span class="zt-h4">四</span><span class="qyls-h4">会议策划的流程</span>
                    </h4>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="w80" src="../../assets/images/0064-01.jpg" alt="">
                    </div>
                    <h5 id="e085">（一）会前调研</h5>
                    <p>
                        会前调研能够帮助策划人员提升预测会议市场趋势的能力，发现更多的市场机会，提高分辨市场机会的能力和成功举办会议的可行性，从而为会议主办方进行科学决策提供重要依据和坚实基础。
@@ -3051,7 +3077,10 @@
                        （4）借题发挥原则。该原则旨在鼓励对他人的设想加以改善或将他人的设想加以结合，巧妙地利用他人的设想，从而提出更加新奇的设想，以促成思维的连锁裂变反应。
                    </p>
                    <p class="zt-h6">3.实施程序</p>
                    <p>头脑风暴法的具体实施程序大体有如下几个步骤。</p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="w80" src="../../assets/images/0070-01.jpg" alt="">
                    </div>
                    <!-- <p>头脑风暴法的具体实施程序大体有如下几个步骤。</p>
                    <p>（1）会前准备。会前准备有以下四个环节。</p>
                    <p>第一，确定会议主题。即确定策划所要集中解决的问题。</p>
                    <p>
@@ -3082,7 +3111,7 @@
                    </p>
                    <p>
                        （4）评价筛选。头脑风暴会议上提出的设想虽然很多，但并不都是正确的，有的可能是荒诞古怪而无法实现的，甚至是反科学的，这就需要评价筛选。评价可由专家或内行完成，具体评价标准也可由专家们自行决定。如果方案的思路可行，但不太完备，可召集第二次头脑风暴会议，也可由专家们进行补充，直到具体实施方案没有困难为止。对于那些确有突破性而又有悖于已知科学真理的方案，或价值重大、但一时难以实现的创意方案，要加以重视，不可弃之不顾。
                    </p>
                    </p> -->
                    <div class="mindMap">
                        <div class="fl al-c">
                            <span class="fl">
@@ -3616,7 +3645,10 @@
                        <img class="img-a" alt="" src="../../assets/images/0089-1.jpg" />
                    </p>
                    <h5 id="e107">（二）会议产品的特点</h5>
                    <p class="zt-h6">1.个性化定制</p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="w80" src="../../assets/images/0079-01.jpg" alt="">
                    </div>
                    <!-- <p class="zt-h6">1.个性化定制</p>
                    <p>
                        会议产品的策划需要根据不同客户的需求和主题进行个性化定制，以满足客户的特定需求。这需要策划人员具备较强的沟通能力和创意能力，能够深入了解客户需求并提供专业的解决方案。
                    </p>
@@ -3635,7 +3667,7 @@
                    <p class="zt-h6">5.情感体验性</p>
                    <p>
                        会议产品的策划需要注重参会者的情感体验。通过精心设计的会议主题、氛围、活动和精细化的现场服务，会议能给参会者带来沉浸式的体验和情感连接。参会者在会议中可以感受到鼓舞、启发和激励，这是会议为参会者提供的一种情感上的满足和独特的感受。
                    </p>
                    </p> -->
                    <h5 id="e108">（三）会议产品的范围</h5>
                    <p class="zt-h6">1.针对参会者的产品</p>
                    <p>
@@ -3765,6 +3797,26 @@
                            在合作洽谈方面，大会设置了不同的洽谈专场，安排了不同类型的供应商企业与买家进行洽谈商讨。例如，以社团协会、会奖公司、公关公司、企业四类会奖活动采购代表为主，携带各类服务及资源采购意向与供应商代表见面。洽谈专场不仅节省了沟通时间，而且提高了对接效率，有利于买卖双方合作的达成。
                        </p>
                    </div>
                    <div class="video-box">
                        <p class="center text td-0">
                            <video :src="videoPathThree" 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"
                                style="border-radius: 10px"></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：2024中国会议产业大会回顾</span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideoTwo ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(
                                    (item) => item.id == 'a93c97e6d11d326336ec1fd8de3761b8'
                                ) > -1
                                    ? collectCheck
                                    : collectImg
                                    " alt="" class="collect-btn" @click="handleCollect('video-03')" />
                            </el-tooltip>
                        </p>
                    </div>
                </div>
            </div>
        </div>
@@ -3794,6 +3846,9 @@
                    <p>
                        此类展览往往是专业性会议的有机组成部分，而且是一个多赢的举措，既能够让会议主办方增加收入，也能够让参会者享受到丰富多彩的会议内容。例如，参会者看到很多新产品，能够货比三家为今后购买同类产品做参考。对参展商的好处，主要体现在参展商可以直接接触目标市场，潜在地增加客户，为参展企业的发展与调整提供决策的依据。
                    </p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="w80" src="../../assets/images/0082-01.jpg" alt="">
                    </div>
                    <p>
                        附设展览的主题务必与会议的主题相一致，不可喧宾夺主。规模可大可小，不可一味贪大。事实上，很多会议附设展览虽然规模不大但是影响力大，这与会议本身的规格、会议主办方在该领域的地位与身份是分不开的。
                    </p>
@@ -4003,6 +4058,10 @@
import preView from "@/components/pdfview/index.vue";
import dialogExaminations from "@/components/dialogExaminations/index.vue";
import { getResourcePath } from "@/assets/methods/resources";
import {
    getCollectResource,
    setCollectResource,
} from "@/assets/methods/resources";
export default {
    name: "chapterOne",
    props: {
@@ -4019,6 +4078,19 @@
    },
    data() {
        return {
            // 视频
            collectImg: require("../../assets/images/icon/heart.png"),
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            videoPathOne: "",
            videoPathTwo: "",
            videoPathThree: "",
            collectResourceList: [],
            chapterData: {
                isCollectVideo: false,
                isCollectVideoOne: false,
                isCollectVideoTwo: false,
            },
            // 视频
            themeColor: "#6CB26C",
            questionNum: 0,
            questionTitleMain: "",
@@ -4164,14 +4236,24 @@
            },
        };
    },
    mounted() {
    async mounted() {
        const bookQuestion = localStorage.getItem(
            "meetingPlanners-book-chapter01-question-one"
        );
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }

        const videoData = localStorage.getItem("meetingPlanners-book-chapter001-video");
        if (videoData) {
            this.chapterData = JSON.parse(videoData);
        }

        this.getImgPath();
        this.getVidoePath();
        this.collectResourceList = await getCollectResource(
            this.config.activeBook.bookId
        );
    },
    methods: {
        async getImgPath() {
@@ -4185,6 +4267,91 @@
                "54247bc55af8fd7cacec3e58c3678ca6"
            );
        },

        async getVidoePath() {
            this.videoPathOne = await getResourcePath(
                "9ad72c6080ecd35a1fe3d4f6f6cc7d7e"
            );
            this.videoPathTwo = await getResourcePath(
                "8992f041711af3def770baa6e7baa334"
            );
            this.videoPathThree = await getResourcePath(
                "a93c97e6d11d326336ec1fd8de3761b8"
            );
        },
        handleCollect(e) {
            if (e == "video-01") {
                this.handleCollectResource(
                    "9ad72c6080ecd35a1fe3d4f6f6cc7d7e",
                    "9ad72c6080ecd35a1fe3d4f6f6cc7d7e",
                    "",
                    "视频",
                    "bits",
                    "视频：如何正确开例会"
                );
                this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
            } else if (e == "video-02") {
                this.handleCollectResource(
                    "8992f041711af3def770baa6e7baa334",
                    "8992f041711af3def770baa6e7baa334",
                    "",
                    "视频",
                    "bits",
                    "视频：2024第16届中国生物产业大会开幕"
                );
                this.chapterData.isCollectVideoOne = !this.chapterData.isCollectVideoOne;
            } else if (e == "video-03") {
                this.handleCollectResource(
                    "a93c97e6d11d326336ec1fd8de3761b8",
                    "a93c97e6d11d326336ec1fd8de3761b8",
                    "",
                    "视频",
                    "bits",
                    "视频：2024中国会议产业大会回顾"
                );
                this.chapterData.isCollectVideoTwo = !this.chapterData.isCollectVideoTwo;
            }
            this.saveVideoStatus()
        },

        saveVideoStatus() {
            localStorage.setItem(
                "meetingPlanners-book-chapter001-video",
                JSON.stringify(this.chapterData)
            );
        },
        //资源收藏事件
        // resourcePath  文件路径，
        // resourceType  文件类型
        // source        文件来源
        handleCollectResource(
            id,
            md5,
            resourcePath,
            resourceType,
            source,
            resourceName
        ) {
            let list = this.collectResourceList;
            if (list.findIndex((item) => item.id == id) > -1) {
                list = list.filter((item) => item.id != id);
            } else {
                list.push({
                    id,
                    md5,
                    resourcePath,
                    resourceType,
                    source,
                    resourceName,
                });
            }
            this.collectResourceList = list;
            setCollectResource(
                this.config.activeBook.bookId,
                this.collectResourceList
            );
        },

        toUrl(val) {
            if (val) {
                this.p_md5 = this.chapter001.pdfMd5[val].md5;
@@ -4200,7 +4367,7 @@
        },
        openQuestion(num) {
            if (num) {
                this.questionNum = this.chapter001.question[num].questionNum;                
                this.questionNum = this.chapter001.question[num].questionNum;
                this.questionTitleMain = this.chapter001.question[num].questionTitleMain;
                this.$refs.dialogRef.openDialogQuestion();
            }

 src/books/meetingPlanners/view/components/chapter002.vue

Diff too large

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

@@ -18,7 +18,6 @@
        </div>
        <!-- 第248页 -->
        <div class="page-box" page="262">

            <div v-if="showPageList.indexOf(262) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -78,7 +77,6 @@
        </div>
        <!-- 第249页 -->
        <div class="page-box" page="263">

            <div v-if="showPageList.indexOf(263) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -115,7 +113,6 @@
        </div>
        <!-- 第250页 -->
        <div class="page-box" page="264">

            <div v-if="showPageList.indexOf(264) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -153,7 +150,6 @@
        </div>
        <!-- 第251页 -->
        <div class="page-box" page="265">

            <div v-if="showPageList.indexOf(265) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -199,20 +195,14 @@
                    <p>会议主办方应依据会议财务活动的客观发展规律，利用已经掌握的财务知识和手段，对会议未来的财务状况作出预测和判断，保证顺利实现会议财务管理的最终目标。根据预测得到的数据编制会议财务预算。会议财务预测是编制会议预算的基础，会议预算又是会议财务预测的综合体现。
                    </p>
                    <h4 id="d158"><span class="zt-h4">一</span><span class="qyls-h4">会议财务预测的基本程序</span></h4>
                    <h5 id="e508">（一）确定预测目标和制定工作方案</h5>
                    <p>确定预测目标是预测工作的开始，也是关键性的工作。有了明确的目标才能收集资料，制定预测方案，配备预测人员，编制财务预算，安排预测工作的日程，使预测工作有条不紊地进行。</p>
                    <h5 id="e509">（二）收集和整理资料</h5>
                    <p>当预测目标确定后，应按预测的要求收集必要的预测资料，包括会议历史资料和预测需要的其他资料。会议预测最主要的内容是预测参会人员的多少，即会议规模。如果是连续多届举办的会议，前几届参会人数是最主要的预测资料。除收集数字资料外，还应注意收集具体情况和典型案例。
                    </p>
                    <h5 id="e510">（三）选择预测方法</h5>
                    <p>会议财务预测通常采用定性预测法，而不采用定量预测法，其原因是不同的会议情况差别很大，会议之间很难寻找可以相互借鉴的数据和资料。定性预测法又称为经验判断法，该方法主要依靠知识、经验和综合分析能力来判断未来会议可能出现的财务状
                    </p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-e" src="../../assets/images/0265-01.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 第252页 -->
        <div class="page-box" page="266">

            <div v-if="showPageList.indexOf(266) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -222,15 +212,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        况，把定性信息转化为定量信息，作为判断的手段。经常采用的具体手段有专家调查法、报表调查法、历史类比法和集合意见法等。
                    </p>
                    <h5 id="e511">（四）进行预测</h5>
                    <p>为取得经验，首先要选择一些情况熟悉的数据（如会议规模）进行预测。其次要根据所预测的数据，确定所选择的预测方案和方法是否可行，分析预测数据的可信程度，总结预测的经验与问题并加以改进。最后预测会议所需的全部数据。
                    </p>
                    <h5 id="e512">（五）提出预测报告</h5>
                    <p>任何一个好的预测都不可能完全与实际相符。把分析预测出来的结果与实际情况相比较，分析预测误差大小，找出产生误差的原因，不仅为评价此次预测提供资料，而且为今后预测工作积累经验和资料。将预测结果和分析情况撰写成书面报告提交给会议组织者，即完成最后一步预测工作。
                    </p>
                    <h4 id="d159"><span class="zt-h4">二</span><span class="qyls-h4">会议财务预测的主要内容</span></h4>
                    <p>会议财务预测最重要和最基本的内容如下。</p>
                    <h5 id="e513">（一）会议规模预测</h5>
@@ -251,7 +232,6 @@
        </div>
        <!-- 第253页 -->
        <div class="page-box" page="267">

            <div v-if="showPageList.indexOf(267) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -263,12 +243,9 @@
                <div class="bodystyle">
                    <p class="center openImgBox"><img class="img-d" alt="" src="../../assets/images/0277-1.jpg" /></p>
                    <p class="img">图10-1 会议注册收入和参会人数关系图</p>

                    <p>会议盈亏平衡点的基本关系表达式为：</p>
                    <p>　　　　　　利润=销售收入-总成本</p>
                    <p>　　　　　　　　=销售收入-（变动成本+固定成本）</p>
                    <p>　　　　　　　　=单价×销售量-单位变动成本×销售量-固定成本</p>
                    <p>　　　　　　　　=（单价-单位变动成本）×销售量-固定成本</p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0267-01.jpg" alt="">
                    </div>
                    <p>通常可以用下列简单公式来进行计算：</p>
                    <p>盈亏平衡点人数：</p>
                    <p class="center"><img class="img-0" alt="" src="../../assets/images/0277-2.jpg" /></p>
@@ -295,7 +272,6 @@
        </div>
        <!-- 第254页 -->
        <div class="page-box" page="268">

            <div v-if="showPageList.indexOf(268) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -309,20 +285,14 @@
                    <p>编制会议预算，一方面可以预知会议固定支出、可变支出、会议收入及会议的盈亏，以保证会议最终不出现财务亏损；另一方面有助于了解会议启动资金需要的金额，避免出现由于启动资金不足而影响会议正常筹备的情况。
                    </p>
                    <h4 id="d160"><span class="zt-h4">一</span><span class="qyls-h4">会议预算编制的程序</span></h4>
                    <h5 id="e517">（一）确定预算组成</h5>
                    <p>会议预算主要包括会议收入、会议支出两大部分，其中会议支出又分为固定支出和可变支出。固定支出和可变支出两者之间没有一个统一的划分标准，只要便于在今后的会议筹备中能够随时掌握和调整会议预算即可。
                    </p>
                    <h5 id="e518">（二）项目逐项分解</h5>
                    <p>当总的预算金额确定后，可以在工作分解的基础上，逐项分解各项目。可以将总预算分解到会议各阶段中，也可以分解到会议项目各个组成部分中。</p>
                    <h5 id="e519">（三）编制初步预算</h5>
                    <p>预算编制部门要根据对会议项目经营情况的预测分析及各部门提供的计划资料，同时考虑拟举办的会议在进行过程中可能出现的状况，在此基础上编制会议的全部预算。初步预算的编制主要以工作任务一览表、项目进度计划等为依据。
                    </p>
                    <h5 id="e520">（四）预算调整</h5>
                    <p>由于预算中的金额是根据预测和估算的数据编制的，与实际发生的金额总会有些差距，因此需要不断调整，例如增加或减少某些项目的金额。</p>
                    <h5 id="e521">（五）预算提交</h5>
                    <p>修正后的会议预算必须提交给上级部门进行审议。为保证会议预算执行的严肃性和权威性，最终的会议预算应取得上级部门的同意和批复，经过相关人员验证之后方能执行。</p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0268-02.jpg" alt="">
                    </div>
                    <h4 id="d161"><span class="zt-h4">二</span><span class="qyls-h4">会议预算的构成</span></h4>
                    <h5 id="e522">（一）会议固定支出</h5>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0268-01.jpg" alt="">
                    </div>
                    <p class="zt-h6">1.申办费用</p>
                    <p>申办费用主要是指在申办和“竞标”会议时所支出的费用，一般在申办国际会议或国内行业大规模会议时可能发生该笔支出。</p>
                    <p class="zt-h6">2.公关宣传费用</p>
@@ -335,7 +305,6 @@
        </div>
        <!-- 第255页 -->
        <div class="page-box" page="269">

            <div v-if="showPageList.indexOf(269) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -364,6 +333,9 @@
                    <p class="zt-h6">11.会场设备租金</p>
                    <p>根据会议内容、需求以及期望达到的会议效果来决定是否需要租赁会场设备。会场设备一般可由酒店提供，如果酒店提供的设备不能满足需求，应寻求专业的第三方供应商。</p>
                    <h5 id="e523">（二）会议可变支出</h5>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0269-01.jpg" alt="">
                    </div>
                    <p class="zt-h6">1.餐饮费</p>
                    <p>餐饮费在会议可变支出中是比例较大的一笔费用。餐饮费一般包括宴会费用、招待会费用、茶歇费用、会议午餐或晚餐费用。应注意，参会者的早餐费用是不由会议组织者承担的，应由参会者所入住的宾馆或酒店提供。
                    </p>
@@ -378,7 +350,6 @@
        </div>
        <!-- 第256页 -->
        <div class="page-box" page="270">

            <div v-if="showPageList.indexOf(270) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -391,9 +362,12 @@
                    <p class="zt-h6">5.相关税费</p>
                    <p>应按照国家财政税费标准支付相应的税费。</p>
                    <h5 id="e524">（三）预算外支出</h5>
                    <p>预算外支出，又称为应急费用，是为了应对未能预见的事件或变化而准备的费用。应急费用的数额是根据风险分析、类似会议的经验以及会议组织者的评估来确定的，一般占总支出的10%。预算外支出是为未能预见的一切可能变动而准备的，这些变动没有超过既定的活动范围。如果策划和进度有重大变动导致成本增加，则无法使用应急费用。
                    <p>预算外支出，又称为不可预计支出或应急支出，是指未列入会议预算，因特殊情况或紧急需求而实际产生的支出。这类支出往往具有突发性和不可预测性，如紧急维修费、临时餐费、意外支出等。预算外支出的数额是根据风险风险、类似办会经验以及会议组织者的评估来确定的，一般不超过总支出的10%。应当加强对预算外支出的审批和监督力度，确保每一笔预算外支出都经过严格的审批程序并符合相关法规制度的要求。
                    </p>
                    <h5 id="e525">（四）会议收入</h5>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0270-01.jpg" alt="">
                    </div>
                    <p class="zt-h6">1.会议注册收入</p>
                    <p>会议注册收入是会议最主要的收入，是决定会议能否做到盈亏平衡的非常重要的因素。因此，会议注册费的定价尤为重要。如果定价较低，可能使会议出现亏损；若定价较高，可能会使参会者的数量减少。</p>
                    <p>会议注册费可根据参会者不同类型分别定价。如会员注册可比普通参会者注册费用要低；学生参会的注册费用应定半价或较大折扣；对嘉宾免收会议注册费。此外，也可根据交费时间早晚定价。例如在规定时间之前交费，可以享受会议注册费的折扣；超过规定时间或在会议现场交费，不能享受会议注册费的折扣，仅能实行全额交费。
@@ -409,13 +383,15 @@
                    <p>如今，越来越多的会议流行在会中设置一个小型的附设展览会。展览会可以由会议组织者自己筹备，也可以承包给专门的展览公司。展览的方式可以是传统的搭建展位，也可以用海报、展板、易拉宝等方式。不管是哪种方式，附设展览会都能给会议增加一些收入。
                    </p>
                    <h5 id="e526">（五）预算总结</h5>
                    <p>如果预算总结中收入大于支出，预算可以通过；如果收入小于支出，就要进行调整。会议的预算编制完成后，由会议秘书处和会议组委会审核批准，如果是国际组织的会议，有时还需要经国际组织批准。</p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0270-02.jpg" alt="">
                    </div>
                    <p>会议的预算编制完成后，由会议秘书处和会议组委会审核批准，如果是国际组织的会议，有时还需要经国际组织批准。</p>
                </div>
            </div>
        </div>
        <!-- 第257页 -->
        <div class="page-box" page="271">

            <div v-if="showPageList.indexOf(271) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -456,7 +432,6 @@
        </div>
        <!-- 第258页 -->
        <div class="page-box" page="272">

            <div v-if="showPageList.indexOf(272) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -485,16 +460,14 @@
                    <p class="img">图10-2 会议成本控制原理图</p>
                    <h5 id="e536">（二）会议成本控制的重点</h5>
                    <p>会议成本控制可从开源、节流途径考虑。前者主要指扩大会议筹资渠道、增加会议收入；后者主要指降低融资成本、控制会议经营成本等。会议成本控制的重点有直接成本和间接成本。</p>
                    <p class="zt-h6">1.直接成本</p>
                    <p>直接成本主要由直接与会议有关的活动支出构成，它可以分为筹备期间活动费用、会议期间活动费用，占整个会议成本的70%以上。其中，餐饮占50%以上。</p>
                    <p class="zt-h6">2.间接成本</p>
                    <p>间接成本由不直接用于会议各项活动的支出构成，主要包括折旧费用、人工费用和办公费用等。</p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0272-01.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 第259页 -->
        <div class="page-box" page="273">

            <div v-if="showPageList.indexOf(273) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -526,7 +499,6 @@
        </div>
        <!-- 第260页 -->
        <div class="page-box" page="274">

            <div v-if="showPageList.indexOf(274) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -539,10 +511,9 @@
                    <p class="td-0">
                        下几项。
                    </p>
                    <p>（1）活动费用。其中，印刷和邮递费用占启动费用的70%。</p>
                    <p>（2）折旧费用。指企业所拥有的或控制的固定资产按照使用情况计提的折旧费用。</p>
                    <p>（3）人工费用。主要包括员工工资总额、社会保险费用、员工福利费用、劳动保护费用和其他人工费用支出。</p>
                    <p>（4）管理费用。管理费用属于期间费用，在发生的当期就计入当期的损益。会议常见的管理费用包括申办费、办公费、业务招待费、税金、技术转让费、咨询费、诉讼费、上缴管理费以及其他费用。</p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0274-01.jpg" alt="">
                    </div>
                    <p class="zt-h6">2.会议执行阶段</p>
                    <p>在会议执行阶段，资金支出占比最大，一般占到会议总资金支出的70%左右。由于各种原因，会议人数变化的规律主要表现为：实际参加会议的人数总会比预订人数少一些。因此，可对以下项目进行调整。</p>
                    <p>（1）餐饮费。餐饮费是会议举办期间最大的一项支出，通常占会议总支出的50%。餐饮费也是会议可变支出的主要部分，会议执行阶段餐饮费的成本控制是最重要的环节。例如，由于会议人员数量遵循递减的规律，即参会的人数会随着会议的进行越来越少，通常参加下午会议的人数会比参加上午会议的人数少一些，参加分组会的人数比参加主会场会议的人数又要少一些。根据这种规律，可适当递减每次茶歇和午餐的预订人数。
@@ -579,7 +550,6 @@
        </div>
        <!-- 第261页 -->
        <div class="page-box" page="275">

            <div v-if="showPageList.indexOf(275) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -600,18 +570,9 @@
                    <p>会议收入主要来源于参会者的注册费。当注册费不能全部承担会议支出时，会议组织者只能采取两个措施：其一，降低会议中一些活动的档次；其二，寻求赞助以确保会议财务的收支平衡。在会议的各种赞助中，企业赞助是最主要的赞助方式。
                    </p>
                    <h4 id="d166"><span class="zt-h4">一</span><span class="qyls-h4">会议赞助的基本步骤</span></h4>
                    <h5 id="e543">（一）明确赞助目的</h5>
                    <p>每次赞助活动都有它的目的。会议赞助活动的目的一般有以下几种：一是追求新闻效应，扩大社会影响；二是增强宣传效果，提高经济效益；三是联络公众感情，改善社会关系；四是提高社会效益，树立良好形象。明确赞助目的能够帮助主办方更好地定位赞助商需求，并为后续的工作打下基础。
                    </p>
                    <h5 id="e544">（二）选择赞助对象</h5>
                    <p>选择适合的赞助对象可以提高合作的成功率和效果。赞助对象包括企业、组织、个人等不同的赞助商。主办方需要根据会议的性质和目标受众，以及赞助商的行业背景、知名度、品牌价值观的契合度、可提供的资源和赞助经验等因素进行选择。同时，主办方还需要与潜在赞助商进行沟通和洽谈，确保赞助商与会议的价值观和利益相契合。
                    </p>
                    <h5 id="e545">（三）制订计划与具体实施</h5>
                    <p>一旦选择了赞助对象，主办方需要制订赞助计划并具体实施。这包括确定赞助方案、赞助等级和赞助形式，明确赞助商获得的权益和回报，以及达成赞助合作的具体条款和约定。主办方需要制定详细的赞助文件和宣传材料，向潜在赞助商介绍会议的价值和机会，并就赞助合作进行谈判和协商。计划制订好以后，要派专门的工作人员负责各项赞助方案的具体实施，运用公共关系技巧去扩大组织的社会影响。如果遇到不正当赞助要求和摊派，应坚决拒绝，必要时可诉诸社会舆论和法律。
                    </p>
                    <h5 id="e546">（四）检测赞助效果</h5>
                    <p>在合作期间和赞助结束后，主办方需要进行赞助效果的检测和评估。主办方可以通过会后问卷调查、赞助商反馈和会议评估等方式，了解赞助对会议的实际贡献和影响。这有助于主办方了解赞助合作的效果，为未来的赞助活动提供参考经验和改进建议。
                    </p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-b" src="../../assets/images/0275-01.jpg" alt="">
                    </div>
                    <h4 id="d167"><span class="zt-h4">二</span><span class="qyls-h4">赞助商提案洽谈</span></h4>
                    <h5 id="e547">（一）评估活动方案</h5>
                    <p>在开始寻找赞助商之前，需要花一定的时间来评估活动方案，评估内容包括：该活动是高品位的吗？计划是否周详？是否新颖、有创意、有趣？有无明星参与？谁将要参加和出席该活动？能否吸引媒体报道该活动，换句话说，是否值得赞助？是否能够吸引赞助商？赞助商如何支持活动？活动所需要的支持是什么，资金、设施、服务还是志愿
@@ -621,7 +582,6 @@
        </div>
        <!-- 第262页 -->
        <div class="page-box" page="276">

            <div v-if="showPageList.indexOf(276) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -656,17 +616,16 @@
                    <p>（11）赞助的决策者——应该找谁去谈。</p>
                    <p>对此，会议组织者可以从该公司的年报、报纸杂志、合作伙伴等方面了解潜在赞助商的以上信息。</p>
                    <h5 id="e551">（五）撰写赞助建议书</h5>
                    <p>赞助商的类型一般可以分为独家赞助商、联合赞助商、实物赞助商、媒体赞助商。根据对赞助商的需要，撰写一份正式的赞助建议书。赞助建议书的内容必须简洁，不要超过6页。建议书的目的有两个：避免对方说“不”和确保下一步的会谈。
                    <p>赞助商的类型一般可以分为独家赞助商、联合赞助商、实物赞助商、媒体赞助商。根据对赞助商的需要，撰写一份正式的赞助建议书。赞助建议书主要是向潜在赞助商提出赞助请求，目的是争取对方的支持。它通常包括会议背景、赞助机会、赞助商可获得的权益以及具体的赞助方式，重点在于说服企业参与会议的赞助。赞助建议书的内容应当简明扼要，通常控制在5～6页内，突出会议的关键信息和赞助机会，以便潜在赞助商快速了解并做出决策。
                    </p>
                    <h4 id="d168"><span class="zt-h4">三</span><span class="qyls-h4">编制赞助说明书</span></h4>
                    <p>赞助说明书是会议提供给企业的主要赞助文件。赞助说明书的内容主要包括对会议
                    <p>赞助说明书是在赞助商决定赞助后提供的详细合作说明，主要包括赞助的类型、金额、具体权益、如何获得赞助商的回报（如广告位置、产品展示机会等）。它与赞助建议书的区别是，前着是争取赞助的工具，后者是对已达成合作的详细解释。赞助说明书主要包括下列内容。
                    </p>
                </div>
            </div>
        </div>
        <!-- 第263页 -->
        <div class="page-box" page="277">

            <div v-if="showPageList.indexOf(277) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -676,9 +635,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        基本情况的介绍、赞助项目、金额以及付款方式等基本内容，以便使企业对会议有初步了解，进而确定是否对会议提供赞助。赞助说明书主要包括下列内容。
                    </p>
                    <h5 id="e552">（一）综述</h5>
                    <p>简单扼要地介绍会议方案，赞助商的宣传点或获益点、投资额度、决策期限等。</p>
                    <h5 id="e553">（二）会议简介</h5>
@@ -704,7 +660,6 @@
        </div>
        <!-- 第264页 -->
        <div class="page-box" page="278">

            <div v-if="showPageList.indexOf(278) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -741,7 +696,6 @@
        </div>
        <!-- 第265页 -->
        <div class="page-box" page="279">

            <div v-if="showPageList.indexOf(279) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -771,7 +725,6 @@
        </div>
        <!-- 第266页 -->
        <div class="page-box" page="280">

            <div v-if="showPageList.indexOf(280) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -810,7 +763,6 @@
        </div>
        <!-- 第267页 -->
        <div class="page-box" page="281">

            <div v-if="showPageList.indexOf(281) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -855,7 +807,6 @@
        </div>
        <!-- 第268页 -->
        <div class="page-box" page="282">

            <div v-if="showPageList.indexOf(282) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -878,20 +829,14 @@
                    <p>汇率风险是指在一定时期内由于汇率变动引起的会议组织者外汇业务成果的不确定性。外汇市场上各国货币的供求状况会受到国际收支、通货膨胀率、利率、国家货币政策等诸多因素的影响而发生变动，汇率也会随之变化，从而给会议组织者从事的国外筹资、国外投资和国际贸易等各项活动带来风险。
                    </p>
                    <h4 id="d174"><span class="zt-h4">三</span><span class="qyls-h4">会议财务风险的成因</span></h4>
                    <p>会议财务风险是会议财务活动本身及其环境复杂多变性和会议财务主体主观认识的局限性共同作用的结果。具体表现如下。</p>
                    <h5 id="e576">（一）会议项目外部财务环境复杂多变</h5>
                    <p class="zt-h6">1.自然环境的不确定性</p>
                    <p>自然界的运动发展过程呈现出不规则的变化趋势，通常是人类无法预知和控制的。会议组织者的流动资产、固定资产等会因为地震、海啸、洪水等不可抗力的自然灾害的发生而产生损耗或毁损；会议组织者的应收账款等会因为债务人的死亡而无法收回。
                    </p>
                    <p class="zt-h6">2.政治环境的不确定性</p>
                    <p>政治环境的不确定性主要是指种族、宗教、国家的冲突、叛乱、战争等因素所引起的风险。例如，战争引起世界原油价格上涨，进而导致成品油价格上涨，使运输企业增加了营运成本而提高运输价格，则参会者考虑交通成本会减少参会，给会议造成风险。
                    </p>
                    <div class="fl jc-c mt-20 mb-20">
                        <img class="img-c" src="../../assets/images/0282-01.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 第269页 -->
        <div class="page-box" page="283">

            <div v-if="showPageList.indexOf(283) > -1">
                <ul class="fl al-c jc-fe  pad-t-55 mb-45">
                    <li class="header-text">第十章　会议经济效益</li>
@@ -901,14 +846,6 @@
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        筹备大型国际会议的财务风险往往由此因素引起。
                    </p>
                    <p class="zt-h6">3.经济环境的不确定性</p>
                    <p>国家经济环境的变化主要包括产业结构、GDP增长状况、经济周期的波动、国际收支与汇率、利率、通货膨胀与就业、工资水平等诸多方面，任何一个环节的变化都可能给会议组织者带来财务风险。</p>
                    <h5 id="e577">（二）会议组织者财务决策失误</h5>
                    <p>会议组织者在进行财务决策时，面对自然和经济运动规律的不规则性、财务活动的复杂性，财务主体由于受到自身经验和能力的局限，不可能完全准确地预见客观经济活动的变化，信息稍有偏差，并由此导致各项决策的失误，从而造成风险。
                    </p>
                    <h4 id="d175"><span class="zt-h4">四</span><span class="qyls-h4">会议财务风险的应对方法</span></h4>
                    <h5 id="e578">（一）风险自留</h5>
                    <p>风险自留是指会议组织者或经济单位、个人自己承担部分或全部后果的风险财务应对方法。风险自留就是将风险留给自己承担，是从内部财务的角度应对风险。它包括两个方面的内容：自保风险和承担风险。</p>

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

@@ -138,56 +138,8 @@
                </div>
            </div>
        </div>
        <!-- 编写委员会 -->
        <div class="page-box" page="6">
            <div v-if="showPageList.indexOf(6) > -1">
                <div class="bodystyle" style="padding-top: 20%; margin: 0 13.5%">
                    <h1 id="a005" class="front center">新世纪高等学校教材·旅游管理核心课系列<br />编写指导委员会</h1>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>主　任</b></p>
                        <p class="ma-0 left2">　申葆嘉　</p>
                        <p class="left3 ma-0">南开大学商学院旅游学系教授、“中国旅游教育与研究终身成就奖”唯一获奖者</p>
                    </div>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>副主任</b></p>
                        <p class="ma-0 left2 ">　魏小安　</p>
                        <p class="left3 ma-0">中国旅游研究院第一届学术委员会主任委员、中国社会科学院旅游研究中心研究员、中央民族大学博士生导师</p>
                    </div>
                    <p class="left td-0"><b>委员</b><span class="left3">（以姓氏笔画为序）</span></p>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>Larry Yu　　</b></p>
                        <p class="left3 ma-0">美国乔治·华盛顿大学旅游与酒店管理系主任、教授</p>
                    </div>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>Liping Cai　</b></p>
                        <p class="left3 ma-0">美国普渡大学旅游与酒店系主任、教授</p>
                    </div>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>李天元　　　</b></p>
                        <p class="left3 ma-0">南开大学旅游与服务学院教授、博士生导师</p>
                    </div>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>吴殿廷　　　</b></p>
                        <p class="left3 ma-0">北京师范大学地理科学学部教授、博士生导师</p>
                    </div>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>邹统钎　　　</b></p>
                        <p class="left3 ma-0">北京第二外国语学院旅游科学学院教授、博士生导师</p>
                    </div>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>宋海岩　　　</b></p>
                        <p class="left3 ma-0">香港理工大学酒店及旅游业管理学院副院长、教授、博士生导师</p>
                    </div>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>罗明义　　　</b></p>
                        <p class="left3 ma-0">云南财经大学教授、博士生导师，原云南省旅游局局长</p>
                    </div>
                    <div class="fl">
                        <p class="left1 ma-0 "><b>谢彦君　　　</b></p>
                        <p class="left3 ma-0">海南大学旅游学院教授、博士生导师</p>
                    </div>
                </div>
            </div>
        <!-- 编写委员会  隐藏页面-->
        <div class="page-box hidePage" page="6">
        </div>
        <!-- 序 -->
        <div class="page-box" page="7">

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

@@ -161,7 +161,7 @@

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

    // const pageDom = (this.container ? this.container : document)

 src/books/practicalCareChildrenManual/assets/main.less

@@ -626,7 +626,7 @@
        width: 80%;
        background-color: transparent;
        border: 0;

        text-align: center;
        &:focus {
            outline: none;
        }

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

@@ -107,7 +107,7 @@
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableOne.one"
                                    <input type="text" class="table-input-border" v-model="tableData.tableOne.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -122,7 +122,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableOne.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -137,7 +137,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableOne.three"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -152,7 +152,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableOne.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -168,7 +168,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableOne.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -180,7 +180,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableOne.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -215,7 +215,7 @@
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableTwo.one"
                                    <input type="text" class="table-input-border" v-model="tableData.tableTwo.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -230,7 +230,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableTwo.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -245,7 +245,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableTwo.three"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -260,7 +260,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableTwo.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -276,7 +276,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableTwo.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -288,7 +288,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableTwo.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -383,7 +383,7 @@
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableThree.one"
                                    <input type="text" class="table-input-border" v-model="tableData.tableThree.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -398,7 +398,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableThree.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -413,7 +413,7 @@
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                    <input type="text" class="table-input-border"
                                        v-model="tableData.tableThree.three" @change="setBookQuestion" />
                                </p>
                            </td>
@@ -428,7 +428,7 @@
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                    <input type="text" class="table-input-border"
                                        v-model="tableData.tableThree.four" @change="setBookQuestion" />
                                </p>
                            </td>
@@ -444,7 +444,7 @@
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                    <input type="text" class="table-input-border"
                                        v-model="tableData.tableThree.five" @change="setBookQuestion" />
                                </p>
                            </td>
@@ -456,7 +456,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableThree.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -551,7 +551,7 @@
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFour.one"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFour.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -566,7 +566,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFour.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -581,7 +581,7 @@
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                    <input type="text" class="table-input-border"
                                        v-model="tableData.tableFour.three" @change="setBookQuestion" />
                                </p>
                            </td>
@@ -596,7 +596,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFour.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -612,7 +612,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFour.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -624,7 +624,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFour.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -672,7 +672,7 @@
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableFive.one"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFive.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -687,7 +687,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFive.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -702,7 +702,7 @@
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                    <input type="text" class="table-input-border"
                                        v-model="tableData.tableFive.three" @change="setBookQuestion" />
                                </p>
                            </td>
@@ -717,7 +717,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFive.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -733,7 +733,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFive.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -745,7 +745,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableFive.six"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -843,7 +843,7 @@
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableSix.one"
                                    <input type="text" class="table-input-border" v-model="tableData.tableSix.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -858,7 +858,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableSix.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -873,7 +873,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableSix.three"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -889,7 +889,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableSix.four"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -901,7 +901,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableSix.five"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -991,7 +991,7 @@
                            </td>
                            <td class="ta-l table-tr-bc">
                                <p class="center">
                                    <input type="text" class="table-input-border-w20" v-model="tableData.tableSeven.one"
                                    <input type="text" class="table-input-border" v-model="tableData.tableSeven.one"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -1006,7 +1006,7 @@
                            </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"
                                    <input type="text" class="table-input-border" v-model="tableData.tableSeven.two"
                                        @change="setBookQuestion" />
                                </p>
                            </td>
@@ -1021,7 +1021,7 @@
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                    <input type="text" class="table-input-border"
                                        v-model="tableData.tableSeven.three" @change="setBookQuestion" />
                                </p>
                            </td>
@@ -1037,7 +1037,7 @@
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                    <input type="text" class="table-input-border"
                                        v-model="tableData.tableSeven.four" @change="setBookQuestion" />
                                </p>
                            </td>
@@ -1049,7 +1049,7 @@
                            </td>
                            <td class="ta-l center table-tr-bc">
                                <p class="center td-0">
                                    <input type="text" class="table-input-border-w20"
                                    <input type="text" class="table-input-border"
                                        v-model="tableData.tableSeven.five" @change="setBookQuestion" />
                                </p>
                            </td>
@@ -1222,9 +1222,9 @@
            this.tableData = JSON.parse(bookQuestion);
        }

        const choiceQuestion = localStorage.getItem("practicalCareChildrenManual-book-chapter001-video");
        if (choiceQuestion) {
            this.chapterData = JSON.parse(choiceQuestion);
        const videoData = localStorage.getItem("practicalCareChildrenManual-book-chapter001-video");
        if (videoData) {
            this.chapterData = JSON.parse(videoData);
        }
    },
    methods: {

 src/books/toddlerSportsSafetyProtection/assets/Fonts/hyg6gjm.ttf

Binary files differ

 src/books/toddlerSportsSafetyProtection/assets/images/0013-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0013_01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0013_02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0013_04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0015_01.jpg

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

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

 src/books/toddlerSportsSafetyProtection/assets/images/0022_01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0027-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0027_02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0028_01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0028_02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0029-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0032-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0033-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0043-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0044-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0045-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0046-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0047-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0048-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0049-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0057-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0063-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0074-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0083-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0085-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0085-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0085-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0085-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0086-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0086-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0087-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0087-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0087-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0087-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0088-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0088-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0088-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0089-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0089-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0090-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0090-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0090-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0090-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0090-05.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0093-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0093-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0093-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0094-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0094-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0095-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0095-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0095-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0096-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0096-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0096-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0097-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0098-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0098-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0099-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0099-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0099-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0100-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0100-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0102-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0102-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0103-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0103-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0104-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0104-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0105-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0105-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0105-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0105-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0106-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0107-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0109-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0109-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0109-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0110-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0110-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0111-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0112-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0112-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0113-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0113-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0113-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0113-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0114-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0114-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0114-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0115-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0115-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0115-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0116-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0116-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0116-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0117-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0117-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0118-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0118-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0118-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0118-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0119-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0119-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0119-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0120-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0120-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0120-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0120-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0121-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0121-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0121-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0123-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0123-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0123-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0123-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0123_05.png

 src/books/toddlerSportsSafetyProtection/assets/images/0124-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0124-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0125-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0125-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0125-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0126-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0127-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0127-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0127-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0128-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0128-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0130-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0131-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0131-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0131-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0132-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0133-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0133-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0133-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0133-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0134-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0134-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0134-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0135-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0135-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0136-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0136-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0138-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0138-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0139-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0140-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0140-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0140-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0141-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0141-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0142-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0142-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0144-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0144-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0145-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0145-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0146-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0146-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0147-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0147-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0148-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0148-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0148-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0149-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0149-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0151-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0166-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0169-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0169-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0169-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0170-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0171-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0172-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0172-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0172-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0173-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0173-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0173-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0173-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0173-05.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0173-06.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0174-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0175-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0175-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0176-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0177-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0177-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0177-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0178-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0178-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0178-03.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0178-04.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0179-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0180-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0181-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0181-02.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0182-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0184-01.jpg

 src/books/toddlerSportsSafetyProtection/assets/images/0186-02.jpg

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

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

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

 src/books/toddlerSportsSafetyProtection/assets/main.less

New file
@@ -0,0 +1,1559 @@
.toddlerSportsSafetyProtection {
    width: 100%;
    height: 100%;

    // 自定义内容
    .page-box {
        box-sizing: border-box;
        min-height: 1128px;
        margin-bottom: 20px;
        box-shadow: 0 3px 6px 1px #00000029;
        background-color: #fff;
    }

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

    .c-g {
        color: green;
    }

    .c-r {
        color: red;
    }

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

    .mr-0 {
        margin: 0;
    }

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

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

    .table-pad {
        padding: 1em 0.7em !important;
    }

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

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

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

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

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

    .ma-0 {
        margin: 0% !important;
    }

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

    .w100 {
        width: 100%;
    }

    .w80 {
        width: 80%;
    }

    .w70 {
        width: 70%;
    }

    .w25 {
        width: 25%;
    }

    .w20 {
        width: 20%;
    }

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

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

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

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

    .fz-20 {
        font-size: 20px;
    }

    .img-0 {
        width: 100%;
    }

    .img-c {
        width: 70%;
    }

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

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

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


    td {
        padding: 5px 10px;
    }

    .fl {
        display: flex;
    }

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

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

    .jc-fs {
        justify-content: flex-start;
    }

    .fw-w {
        flex-wrap: wrap;
    }

    .fd-c {
        flex-direction: column;
    }

    .fd-r {
        flex-direction: row-reverse;
    }

    .al-c {
        align-items: center;
    }

    .al-fe {
        align-items: flex-end;
    }

    .ac-f {
        align-content: flex-end;
    }

    .jc-fe {
        justify-content: flex-end;
    }

    .jc-c {
        justify-content: center;
    }

    .jc-sa {
        justify-content: space-around
    }

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

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

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

    .ma-t-30 {
        margin-top: 30px;
    }

    .ma-t-20 {
        margin-top: 20px;
    }

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

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


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

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

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

    .page-father{
        display: flex;
    }

    .header-left {
        min-width: 12%;
        padding: 0 !important;
        margin: 0 !important;

        img{
            margin-left: 70%;
            width: 30%;
            height: auto;
        }
    }


    .headerText {
        width: 25%;
        margin-left: 75%;
        padding: 80px 0px 5px 0px;
        background-color: #7acab4;
        color: #fff;
        font-size: 12px;
        text-align: center;
        border-radius:  0 0 10px 10px;
        margin-bottom: 10px;
    }

    .headerNumber {
        font-size: 12px;
        border: 1px solid #7acab4;
        border-radius:  0 5px 5px 0;
        border-left: none;
        padding: 5px 10px;
        text-align: right;
        color: #7acab4;
    }

    .header-right {
        padding: 4% 0;
        margin: 0 !important;
    }

    .header-right-Text {
        font-family: "方正细圆";
        font-size: 14px;
        padding-top: 20px;
    }

    .header-right-Number {
        position: relative;
        width: 15%;

        span {
            font-family: "方正细圆";
            font-size: 14px;
            position: absolute;
            left: 25%;
            bottom: 20%;
        }
    }



    table {
        border-color: none !important;
    }

    .table-th-bc {
        background-color: #FEDDB4;
        color: #000;
    }

    .table-tr-bc {
        background-color: #FEF4E4;
        color: #000;
    }

    .table-textarea {
        font-size: 14px;
        font-family: "Times New Roman", "宋体";
        resize: none;

        &:focus {
            outline: none;
        }
    }

    .textarea-box {
        border: none;
        text-align: center;
        width: 84px;
        height: 36px;
        overflow: auto;
        word-break: break-all;
        resize: none;
    }


    .b0 {
        border: 0;
    }

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

    .task2 {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #F89C1C;
    }

    .task3 {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #448D9C;
    }

    .task4 {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #9EAA60;
    }

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

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

    .p-continued {
        text-align: right;
        font-size: 14px;
        margin-bottom: 10px;
    }

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

        img {
            width: 100%;
        }

        p {
            margin: 0;
        }
    }

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

        img {
            width: 100%;
        }

        p {
            margin: 0 !important;
        }
    }

    .w430 {
        width: 430px;
    }

    .w395 {
        width: 395px;
    }

    .w350 {
        width: 350px;
    }

    .w290 {
        width: 290px;
    }

    .w280 {
        width: 280px;
    }

    .w275 {
        width: 275px;
    }

    .w270 {
        width: 270px;
    }

    .w250 {
        width: 250px;
    }

    .w230 {
        width: 230px;
    }

    .w220 {
        width: 220px;
    }

    .w200 {
        width: 200px;
    }

    .w180 {
        width: 180px;
    }

    .w150 {
        width: 150px;
    }

    .w115 {
        width: 115px;
    }

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

    .fm-hyzh {
        font-family: "汉仪中黑";
        font-weight: 500;
    }

    .fm-hyss {
        font-family: "汉仪书宋";
    }

    div.bk-ztgs {
        border: 0.15em dotted #5192c6;
        padding: 0.5em;
        margin-bottom: 2em;
        margin-top: 2em;
        border-radius: 1em;
        position: relative;
    }

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


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

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

    // 题目

    .textarea-main {
        background-color: transparent;
        max-width: 95%;
        min-width: 95%;
        outline: none;
    }

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

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

        &:focus {
            outline: none;
        }
    }

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

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

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

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

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

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

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

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

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

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

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

    .unitImg {
        position: relative;
        z-index: 1;
    }

    .unitBox {
        z-index: 99;
        position: absolute;
        top: -5px;
        left: 40px;
    }

    .unit2Box {
        z-index: 99;
        position: absolute;
        top: -200px;
        left: 40px;
    }

    .unitGraphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #5192C6;
        border-radius: 50%;
        margin-right: 15px;
    }

    .unit2Graphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #F89C1C;
        border-radius: 50%;
        margin-right: 15px;
    }

    .unit3Graphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #448D9C;
        border-radius: 50%;
        margin-right: 15px;
    }

    .unit4Graphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #9EAA60;
        border-radius: 50%;
        margin-right: 15px;
    }


    .unitText {
        color: #5192C6;
        font-size: 18px;
    }

    .unit2Text {
        color: #F89C1C;
        font-size: 16px;
    }

    .unit3Text {
        color: #448D9C;
        font-size: 16px;
    }

    .unit4Text {
        color: #9EAA60;
        font-size: 16px;
    }



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

    ul {
        list-style-type: none;
    }

    li {
        list-style-type: none;
    }

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

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

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


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

    }

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

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

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

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

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



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

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

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

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


    div.bodystyle {
        text-align: justify;
        margin: 13% 13% 10% 3%;
        padding-bottom: 80px;
        line-height: 30px;
    }

    .UnitCover {
        margin: 0 13%;
        padding-top: 10%;
        padding-bottom: 80px;
    }

    .unit-title-parent {
        text-align: center;
        margin: 10% 0;
    }

    .unit-title {
        font-family: "方正正黑";
        display: inline-block;
        font-size: 1.6em;
        font-weight: 500;
        border-bottom: 1px solid #0082D4;
        padding: 10px 0;
    }


    span.zt-0 {
        color: #0087AF;
    }

    p.pzt-0 {
        color: #0087AF;
        font-size: 18px;
    }

    p.pzt-0-right {
        font-size: 18px;
        color: #0087AF;
        text-align: right;
    }

    p.pzt-1 {
        font-weight: bold;
        color: #0087AF;
        font-size: 18px;
    }

    div.sgc-toc-title {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: 1em;
        text-align: center;
    }


    .block {
        font-family: "kaiTi";
        text-indent: 2em;
        line-height: 30px;
        font-size: 17px;
        text-align: justify;
    }

    .block1 {
        text-align: center;
    }

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

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


    p {
        font-family: "方正书宋";
        margin-top: 0em;
        margin-bottom: 0.2em;
        text-indent: 2em;
        line-height: 30px;
        text-align: justify;
    }

    .cover {
        width: 100%;
        padding: 0px;
    }

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

    .center-ss {
        text-align: center;
        color: #EF8472;
        font-weight: bold;
        margin-left: 0%;
        margin-right: 0%;
        text-indent: 0em;
    }

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


    .img-0 {
        width: 100%;
    }

    .img-a {
        width: 95%;
    }

    .img-b {
        width: 70%;
    }

    .img-c {
        width: 60%;
    }

    .img-d {
        width: 50%;
    }

    .img-e {
        width: 45%;
    }

    .img-f {
        width: 40%;
    }

    .img-g {
        width: 30%;
    }

    .img-h {
        width: 20%;
    }

    .img-i {
        width: 10%;
    }

    .img-j {
        width: 5%;
    }

    // epub中自带的样式

    .foreword {
        padding: 30% 12%;
        height: 100%;
        background: #b0ddcf
    }

    .editorialBoard {
        background-color: #fff;
        border-radius: 50%;
        /* 顶部和底部为0，左右两侧为50% */
        padding: 5% 10% 20% 10%;
    }

    .series {
        padding: 12% 15%
    }

    .seriesTitle {
        font-size: 1.5em;
        color: #fff;
        font-weight: 400;
        background-color: #7acab4;
        width: 30%;
        padding-left: 1%;
        padding-right: 8%;
        background: linear-gradient(135deg, #7acab4, #7acab4 50%, transparent 50%, transparent 100%);
        margin-bottom: 10%;
    }

    .rotate-up {
        text-indent: 0;
        font-size: 16px;
        color: #7acab4;
        line-height: 10px;
        margin-bottom: 20px;
    }

    .rotate-down {
        text-indent: 0;
        font-size: 12.5px;
        color: #7acab4;
        line-height: 10px;
    }

    h1.firstTitle {
        padding: 0% 0 10% 0;
        text-align: center;
        font-size: 2em;
        line-height: 1.2em;
        text-indent: 0em;
        color: #b0ddcf;
        font-weight: 400;
        font-family: "方正正黑";
    }

    .preface {
        font-family: "汉仪特细等线";
        text-indent: 2em;
        color: #000;
    }


    .right-info {
        font-family: "kaiti";
        text-align: right;
        margin-bottom: 0.5em;
    }

    .imgdescript-l {
        margin-left: -5%;
    }

    h2 {
        text-align: center;
        color: #00aeef;
        font-family: "方正兰亭纤细";
        font-size: 1.5em;
    }

    .titleQuot-l {
        text-indent: 0em;
        margin: 15px 0 10px 0;
        font-size: 1.2em;
        font-weight: bold;
    }

    .poemtitle-l {
        font-family: "方正兰亭纤细";
        font-size: 1.1em;
        margin: 15px 0 10px 0;
    }

    .quotation {
        font-family: "kaiti";
    }

    /*底色*/
    .bgColor {
        padding: 10px 20px;
        background: #e1f4fc;
        border: 2px solid #008cb7;
        border-radius: 10px;
        margin: 1em auto;

        .bgColor-title {
            font-family: "方正细圆";
            font-weight: bold;
        }
    }

    // 拓展学习
    .ExpandLearning {
        padding: 40px 20px 20px 20px;
        background: #e1f4fc;
        border-top: 2px solid #008cb7;
        margin: 1em auto;
        position: relative;
    }

    .ExpandLearning-title {
        text-indent: 0;
        position: absolute;
        top: -16px;
        left: 0px;

        span {
            background-color: #e1f4fc;
            height: 20px;
            width: 30px;
            padding: 5px;
            border: 1px solid #008cb7;
            border-radius: 50%;
            margin-right: 1px;
        }
    }

    .imgdescript {
        font-size: 13px;
        text-indent: 0em;
        text-align: center;
    }

    .learningDetection {
        font-family: "汉仪正黑";
        background-color: #6bcff6;
        font-weight: bold;
        margin: 30px 0 20px 0;
    }

    .poemtitle {
        text-align: center;
        font-weight: bold;
        font-family: "方正兰亭细黑";
    }

    .bold {
        color: #b0ddcf;
        font-weight: bold;
    }

    .noteContent {
        font-size: 13.5px;
        word-break: break-all;
        margin: 0 !important;
        line-height: 25px;

        .noteContent-title {
            font-size: 13.5px;
            font-weight: bold;
            margin: 0 !important;
        }
    }

    sup {
        cursor: pointer;
    }
}

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

// 表格样式
table {
    border-collapse: collapse; //表格的边框合并，如果相邻，则共用一个边框。
    border-spacing: 0px; //设置行与单元格边框的间距。
}

@font-face {
    font-family: '汉仪特细等线';
    src: url('./Fonts/hyg6gjm.ttf');
}

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

// @font-face {
//     font-family: '汉仪楷体';
//     src: url('./Fonts/hyc1gjm.ttf');
// }

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

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

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

// @font-face {
//     font-family: '方正兰亭纤细';
//     src: url('./Fonts/FZLTXHK.TTF');
// }


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

// @font-face {
//     font-family: 'FZHTJW';
//     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;
    }

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

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

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

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

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


        .img-float {
            width: 130px;
        }

        .img-rights {
            width: 130px;
        }

        .btn-w {
            width: 42px;
        }

        .unitText {
            color: #5192C6;
            font-size: 10px;
        }

        .unit2Text {
            color: #F89C1C;
            font-size: 10px;
        }

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

        td {
            padding: 5px 10px;
        }
    }
}

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

New file
@@ -0,0 +1,185 @@
<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/feiYe.jpg" /> -->
      </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">
          <hr />
          <p class="td-1 fm-hyzh fz-16">图书在版编目（CIP）数据</p>
          <p class="left3 mr-0 td-1 fm-hyss fz-14">
            婴幼儿运动安全与保护/闫俊涛，张首文，孙璐主编.-北京:北京师范大学出版社，2022.1
          </p>
          <p class="left3 td-1 fm-hyss fz-14">ISBN 978-7-303-27698-1</p>
          <p class="left3 fm-hyss fz-14 mt-20 mb-20">
            I.①婴… Ⅱ.①闫… ②张… ③孙… Ⅲ,①婴幼儿-运动训练 I.G613.7
          </p>
          <p class="left3 fm-hyss fz-14">
            中国版本图书馆CIP数据核字(2021)第272797号
          </p>
          <hr />
          <p><br /></p>
          <p><br /></p>
          <p><br /></p>
          <p class="left fz-13 fm-hyss">
            <span class="fm-hyzh fz-14">图书意见反馈:</span> gaozhifk@bnupgcom
            010-58805079
          </p>
          <p class="left fz-13 fm-hyss">
            <span class="fm-hyzh fz-14">营销中心电话:</span> 010-58802755
            58801876
          </p>
          <hr />
          <p class="left fm-hyss fz-14">
            YINGYOUER YUNDONG ANOUAN YU BAOHU
          </p>
          <p class="left fm-hyss fz-14">
            出版发行：北京师范大学出版社 www.bnupg.com
          </p>
          <p class="left fm-hyss fz-14">
            　　　　　北京市西城区新街口外大街12-3号
          </p>
          <p class="left fm-hyss fz-14">　　　　　邮政编码：100088</p>
          <p class="left fm-hyss fz-14">
            印　　刷：北京玺诚印务有限公司
          </p>
          <p class="left fm-hyss fz-14">经　　销：全国新华书店</p>
          <p class="left fm-hyss fz-14">开　　本：787mmx1092mm　1/16</p>
          <p class="left fm-hyss fz-14">印　　张：12</p>
          <p class="left fm-hyss fz-14">字　　数：217千字</p>
          <p class="left fm-hyss fz-14">版　　次：2023年7月第1版</p>
          <p class="left fm-hyss fz-14">印　　次：2023年7月第1次印刷</p>
          <p class="left fm-hyss fz-14">定　　价：34.80元</p>
          <hr />
          <p class="left fm-hyss fz-14">
            策划编辑：王　超　罗佩珍　　　　责任编辑：李春生
          </p>
          <p class="left fm-hyss fz-14">
            美术编辑：焦　丽　　　　　　　　装帧设计：焦　丽
          </p>
          <p class="left fm-hyss fz-14">
            责任校对：段立超　　　　　　　　责任印制：陈　涛　
          </p>
          <p class="center mt-20"><b>版权所有 侵权必究</b></p>
          <p class="left center block">反盗版、侵权举报电话：010-58808104</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>
          <p class="left center block">编辑部电话:010-58802682</p>
        </div>
      </div>
    </div>
    <!-- 编委会 -->
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <div class="foreword">
          <div class="editorialBoard">
            <h1 class="firstTitle" style="color: #b0ddcf;">编委会</h1>
            <p class="preface"><span class="bold">丛书主编</span></p>
            <p class="preface mb-30">叶平枝</p>
            <p class="preface"><span class="bold">本书主编</span></p>
            <p class="preface mb-30">闫俊涛　张首文　孙　璐</p>
            <p class="preface"><span class="bold">本书副主编</span></p>
            <p class="preface mb-30">毕中情　李　徽　李迎春</p>
            <p class="preface"><span class="bold">本书参编（姓氏笔画排序）</span></p>
            <p class="preface">田佳欣　刘晓曦　闫俊倩　李　娜　吴升扣　吴梦晗</p>
            <p class="preface mb-30">宋　琳　孟　莉　胡国森　袁　伟　龚琪雯</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 丛书序 -->
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <div class="series">
          <h1 class="seriesTitle">丛书序</h1>
          <p class="rotate-up">^</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p><br /></p>
          <p><br /></p>
          <p><br /></p>
          <p class="preface">
            大力发展职业教育对于降低失业率、解决就业结构的矛盾，提高生产力和劳动者的整体素质，减少贫富差距、树立劳动者尊严，激发劳动者热情和创造力，推动我国民族复兴都具有重要意义。如果说德国经济腾飞的秘密武器是其双元制的职业教育体系，那么，我国职业教育的纵深发展也将成为撬动我国经济、社会发展的重要力量。进入“十四五”，我国职业教育又有了新起点、新变化：中等职业教育从“就业导向”到“就业与升学导向”，毕业生既可以直接就业，也可以继续升学到专科和本科职业院校，因而成为高等教育的生源基础，有着多元的发展路径；高职专科进入提质培优、增值赋能、以质图强，加快迈进现代化的新阶段；高职本科坚持理论先行、“高举高打”，充分发挥其在职业教育中的龙头地位。
          </p>
          <p class="preface">
            2021年3月教育部印发《职业教育专业目录（2021年）》（教职成〔2021〕2号），首次对中职、高职专科和高职本科三个层次专业目录进行一体化修（制）订，建立了统一的分类框架和上下衔接的专业名称，使职业教育类型特征更为凸显。通过中职、高职专科、高职本科一体化专业设置，为学生职业发展打开通路。
          </p>
          <p class="preface">
            根据这些职业教育发展趋势和国家《“十四五”职业教育规划教材建设实施方案》，本系列教材聚焦于婴幼儿照护类专业，通过不同梯度的内容设计，为学前教育、婴幼儿托育服务与管理、早期教育、婴幼儿发展与健康管理等专业提供专业教材，同时，也为实现“幼有所育、幼有优育、幼有善育”奠定基础。
          </p>
          <p class="preface">
            在编写过程中，编写组努力体现如下原则：（1）坚持正确的政治方向和价值导向；（2）以培养德智体美劳全面发展的社会主义建设者和接班人、未来的“四有好老师”为目标；（3）体现“培根铸魂、启智增慧”；（4）遵循职业教育教学规律和人才成长规律；（5）科学合理编排教材内容。
          </p>
        </div>
      </div>
    </div>
    <!-- 丛书序 -->
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <div class="page-father">
          <ul class="header-left">
            <li class="headerText ">婴<br />幼<br />儿<br />运<br />动<br />安<br />全<br />与<br />保<br />护</li>
            <li class="headerNumber">2</li>
            <img src="../../assets/images/a1.jpg" alt="">
          </ul>
          <div class="bodystyle">
            <p class="preface">本系列教材努力体现如下特色。</p>
            <p class="preface">
              （1）医养教结合，适用性强。本系列教材聚焦健康和保育，着重补充了婴幼儿照护类专业紧缺的课程教材。教材主要涵盖三个方面：一是婴幼儿卫生保健，包括《幼儿园食育》《婴幼儿感觉统合发展与训练》《婴幼儿常见疾病预防与护理》；二是婴幼儿体育，包括《婴幼儿体质健康与动作发展测评》《婴幼儿运动安全与保护》《婴幼儿运动处方设计与应用》；三是婴幼儿心理健康，包括《婴幼儿发展评价》《婴幼儿行为观察与指导》《婴幼儿常见发展问题与矫正》《婴幼儿亲职教育》《学前特殊儿童融合教育》。
            </p>
            <p class="preface">
              （2）行业专家领衔，专业度高。教材编写队伍多元，理论和实践专家相结合。本系列教材的编写者既有来自普通高校、职业院校、科研机构的教学研究人员，也有来自医疗机构、保教机构和婴幼儿保育实践的教研员；编写工作既有博导、教授等资深专家领衔，也有中青年新锐积极参与。编写队伍专业水平高，具有使命感、责任感和良好的师德，保证了教材的政治方向、权威性、科学性和前瞻性。
            </p>
            <p class="preface">
              （3）理实一体，可操作性突出。本系列教材为“岗课赛证”融通教材，内容根据职业院校学生的学习特点和职业发展需求编写，既有理论的指导，又有结合岗位需求的实践案例；既体现最新、最前沿学科发展，又深入浅出、可读性强、易于理解。
            </p>
            <p class="preface">
              （4）融媒体教材，立体化呈现。本系列教材将图文并茂的纸媒与数字化的微课、案例视频、在线习题等相结合，根据不同内容的具体需求，立体化呈现各门课程的学习要点、知识难点、核心技能等。设置各类情境中的互动实操环节，帮助学生形成个性化的学习方案和自主学习习惯，注重课程评价的过程性和形成性。
            </p>
            <p class="preface">
              相信本系列教材的出版，将有利于促进相关专业人才培养的开展和质量的提升，从而有力推动我国婴幼儿照护事业健康地、高质量地、持续地发展。同时，也希望通过本系列教材的推广和使用，进一步吸纳一线教师、科研人员及其他使用者的智慧与经验，使教材不断发展和完善，持续为广大师生提供高品质教材。
            </p>
            <p class="right-info mt-20">叶平枝</p>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

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

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

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

New file
@@ -0,0 +1,989 @@
<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> -->
        <!-- <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> -->
    </div>
  </div>
</template>

<script>
import pageHeader from "./header.vue";
// import chapterOne from "./chapter001.vue";
//   import chapterTwo from "./chapter002.vue";
//   import chapterThree from "./chapter003.vue";
//   import chapterFour from "./chapter004.vue";
//   import chapterFive from "./chapter005.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ 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
        : 16;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale
        ? this.$store.state.qiankun.scale / 100
        : 1;
    },
  },
  watch: {
    showCatalogList: {
      handler(newVal, oldVal) {
        if (
          this.$store.state.qiankun &&
          this.$store.state.qiankun.catalogChange
        ) {
          // 调用父层方法
          this.$store.state.qiankun.catalogChange({
            showCatalogList: newVal,
          });
        }
        // 启动页码观察
        setTimeout(() => {
          this.initObservation();
          this.initThemeColor();
        }, 500);
      },
    },
    loadPageList: {
      handler(newVal, oldVal) {
        setTimeout(() => {
          this.transformDom(this.$store.state.qiankun.fontSize);
          this.initSwiper();
          this.initViewer();
          this.closeAudio();
          this.closeVideo();
        }, 200);
      },
    },
    pageZoom: {
      handler(newVal, oldVal) {
        const scrollBox = (
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      },
    },
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [1];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
      this.throttleThreshold,
      { leading: true, trailing: false }
    );
    // 定义子层方法
    if (this.setGlobalState) {
      // 提供页面跳转功能
      this.setGlobalState({
        gotoPage: (catalog, page) => {
          this.gotoPage(catalog, page);
        },
        // 渲染笔记、高亮、划线
        renderSign: (type, data) => {
          // 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记；
          this.handelSignData(type, data);
          // this.renderSign(type, data);
        },
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        },
        // 全文检索
        searchBookByKeyword: (keyword) => {
          return this.searchTextByPage(keyword);
        },
        // 跳转检索结果位置
        jumpSearchItem: (data) => {
          this.searchItemLocation(data);
        },
      });
    }

    // 创建一个新的 Intersection Observer 实例，用于观察目标元素和执行相应的回调函数。
    // new IntersectionObserver(callback, options)：使用之前定义的 callback 回调函数和 options 配置选项来初始化 Intersection Observer 实例。
    this.observer = new IntersectionObserver(this.pageChangeCallback, {
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0.5, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
      root: null, // 指定根元素，这里设为 null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // 指定根元素的边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0, // 指定交叉比例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    // 启动页码观察
    setTimeout(() => {
      this.initObservation();
      this.initThemeColor();
    }, 500);

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

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
    //   .querySelectorAll(".page-box");
    // 检索
    // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
    // 检索跳转
    // this.searchItemLocation({
    //   catalog: 2,
    //   page: 10,
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    // }, 500);
  },
  methods: {
    // setZoom1() {
    //   let scale = this.$store.state.qiankun.scale + 10;
    //   const scrollBox = (
    //     this.container ? this.container : document
    //   ).querySelector(".page-main");
    //   this.$store.commit("setZoom", scale);
    // },
    // setZoom2() {
    //   let scale = this.$store.state.qiankun.scale - 10;
    //   const scrollBox = (
    //     this.container ? this.container : document
    //   ).querySelector(".page-main");
    //   this.$store.commit("setZoom", scale);
    // },
    // 滚动监听
    scrollFun(event) {
      this.handleVideoPicture();
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        this.getAduio();
        // 向下
        const currentScrollTop =
          event.target.scrollTop + event.target.offsetHeight;
        if (
          currentScrollTop >=
          event.target.scrollHeight - this.loadThreshold
        ) {
          console.log(1);

          // 到达阈值
          if (
            this.showCatalogList[this.showCatalogList.length - 1] <
            this.catalogLength
          ) {
            // 加载下一章
            this.showCatalogList.push(
              this.showCatalogList[this.showCatalogList.length - 1] + 1
            );
            if (this.showCatalogList.length > 3) {
              // 超过三章隐藏顶部一章
              this.showCatalogList.shift();
            }
          }
        }
      } else if (event.target.scrollTop < this.previousScrollTop) {
        this.handleAudio();
        // 向上
        const currentScrollTop = event.target.scrollTop;
        if (currentScrollTop <= this.loadThreshold) {
          // 到达阈值
          if (this.showCatalogList[0] > 0) {
            // 加载上一章
            this.showCatalogList.unshift(this.showCatalogList[0] - 1);
            if (this.showCatalogList.length > 3) {
              // 超过三章隐藏底部一章
              this.showCatalogList.pop();
            }
          }
        }
      }
      // showCatalogList 当前显示的三个章节，watch监听传递给主应用
      // 更新上一次滚动的位置
      this.previousScrollTop = event.target.scrollTop;
    },
    // 章节、页面跳转
    gotoPage(catalog, page) {
      if (catalog >= 0 && catalog <= this.catalogLength) {
        // 处理渲染章节
        if (catalog == 0) {
          this.showCatalogList = [0, 1];
        } else if (catalog == this.catalogLength) {
          this.showCatalogList = [
            this.catalogLength - 2,
            this.catalogLength - 1,
            this.catalogLength,
          ];
        } else {
          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
        }
        setTimeout(() => {
          // 跳转页码
          const pageDom = (
            this.container ? this.container : document
          ).querySelector(`[page="${page}"]`);
          if (pageDom) {
            pageDom.scrollIntoView();
          } else {
            console.log("页码错误！");
          }
        }, 500);
      } else {
        console.log("章节错误！");
      }
    },

    // 处理标记数据
    handelSignData(type, data) {
      if (this.loadPageList.indexOf(Number(data.page)) > -1) {
        // 立即渲染
        this.renderSign(type, data);
      }

      // 储存数据
      if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
      if (!this.renderSignMap[type][data.page])
        this.renderSignMap[type][data.page] = [];
      this.renderSignMap[type][data.page].push(data);
    },

    // 渲染标记
    renderSign(type, data) {
      // 父层设置禁止渲染标记时不再进行渲染
      if (this.$store.state.qiankun.disableSign) {
        return false;
      }
      const existence = (
        this.container ? this.container : document
      ).querySelector(`[dataid="${data.id}"]`);
      // 去重
      if (!existence) {
        const pageDom = (
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        // 创建 createTreeWalker 迭代器，用于遍历文本节点，保存到一个数组
        const treeWalker = document.createTreeWalker(
          pageDom,
          NodeFilter.SHOW_TEXT
        );
        const allTextNodes = [];
        let currentNode = treeWalker.nextNode();
        while (currentNode) {
          allTextNodes.push(currentNode);
          currentNode = treeWalker.nextNode();
        }
        for (let i = 0; i < allTextNodes.length; i++) {
          const textDom = allTextNodes[i];
          if (textDom.textContent.indexOf(data.txt) > -1) {
            let reg = new RegExp(`${data.txt}`, "ig");
            switch (type) {
              case "Highlight":
                // 高亮
                textDom.parentNode.innerHTML =
                  textDom.parentNode.innerHTML.replace(
                    reg,
                    `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
                  );
                break;
              case "Dashing":
                // 划线
                textDom.parentNode.innerHTML =
                  textDom.parentNode.innerHTML.replace(
                    reg,
                    `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
                  );
                break;
              case "Note":
                // 笔记
                textDom.parentNode.innerHTML =
                  textDom.parentNode.innerHTML.replace(
                    reg,
                    `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
                  );
                break;
            }
          }
        }
      }
    },
    // 删除标记渲染
    delSign({ ids, type }) {
      if (ids && ids.length) {
        for (let i = 0; i < ids.length; i++) {
          const id = ids[i];
          const dom = (
            this.container ? this.container : document
          ).querySelector(`[dataid="${id}"]`);
          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
            dom.outerHTML,
            dom.outerText
          );
        }
      }
      if (type) {
        const doms = (
          this.container ? this.container : document
        ).querySelectorAll(`[datatype="${type}"]`);
        for (let i = 0; i < doms.length; i++) {
          const dom = doms[i];
          dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
            dom.outerHTML,
            dom.outerText
          );
        }
      }
    },
    initObservation() {
      const sections = (
        this.container ? this.container : document
      ).querySelectorAll(".page-box");
      sections.forEach((section) => {
        if (this.config.activeBook && this.config.activeBook.tryPageCount) {
          const page = section.getAttribute("page");
          if (Number(page) > this.config.activeBook.tryPageCount) {
            let chapterDom = this.getParentWithClass(section, "chapter");
            const chapterNum = chapterDom.getAttribute("num");
            this.catalogLength = Number(chapterNum) - 1;
            section.remove();
            return false;
          }
        }
        // observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。
        const isObserver = section.getAttribute("observer");
        const isLoadObserver = section.getAttribute("loadObserver");
        if (!isObserver) {
          this.observer.observe(section);
          section.setAttribute("observer", "1");
        }
        if (!isLoadObserver) {
          this.loadPageObserver.observe(section);
          section.setAttribute("loadObserver", "1");
        }
      });
    },
    initThemeColor() {
      // 获取各种需要主题色的节点
      const colorDom = (
        this.container ? this.container : document
      ).querySelectorAll(".theme-color");
      const backgroundColorDom = (
        this.container ? this.container : document
      ).querySelectorAll(".theme-back");
      const borderColorDom = (
        this.container ? this.container : document
      ).querySelectorAll(".theme-border");
      // 获取配置的主题色
      const bookThemeColor =
        this.config.activeBook && this.config.activeBook.bookThemeColor
          ? this.config.activeBook.bookThemeColor
          : null;
      const chapterThemeColor =
        this.config.activeBook && this.config.activeBook.chapterThemeColor
          ? this.config.activeBook.chapterThemeColor
          : null;
      const pageThemeColor =
        this.config.activeBook && this.config.activeBook.pageThemeColor
          ? this.config.activeBook.pageThemeColor
          : null;
      colorDom.forEach((domItem) => {
        // 获取章节、页码
        let pageDom = this.getParentWithClass(domItem, "page-box");
        let chapterDom = this.getParentWithClass(domItem, "chapter");
        let page, chapterNum;
        if (pageDom) page = pageDom.getAttribute("page");
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        // 向上匹配主题色
        const themeColor =
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
      });
      backgroundColorDom.forEach((domItem) => {
        // 获取章节、页码
        let pageDom = this.getParentWithClass(domItem, "page-box");
        let chapterDom = this.getParentWithClass(domItem, "chapter");
        let page, chapterNum;
        if (pageDom) page = pageDom.getAttribute("page");
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        // 向上匹配主题色
        const themeColor =
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
      });
      borderColorDom.forEach((domItem) => {
        // 获取章节、页码
        let pageDom = this.getParentWithClass(domItem, "page-box");
        let chapterDom = this.getParentWithClass(domItem, "chapter");
        let page, chapterNum;
        if (pageDom) page = pageDom.getAttribute("page");
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        // 向上匹配主题色
        const themeColor =
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
      });
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    pageChangeCallback(entries, observer) {
      //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
      entries.forEach((entry) => {
        //entry.isIntersecting：检查当前目标元素是否与根元素相交。
        if (entry.isIntersecting) {
          const target = entry.target;
          //entry.target：获取当前目标元素
          const page = target.getAttribute("page");
          const catalogDom = this.tool.getParentNodeByClassName(
            target,
            "chapter"
          );
          const catalog = catalogDom.getAttribute("num");
          let text = null;
          if (target.querySelector("p")) {
            text = target.querySelector("p").textContent.substring(0, 50);
          }
          // 返回页码和章节信息
          if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
            this.$store.state.qiankun.pageChange({
              page: page,
              catalog: catalog,
              text,
            });
          // const sections = Array.from(document.querySelectorAll(".section"));
          //sections：获取所有具有 .section 类名的元素，并转换为数组。
          // let index = sections.findIndex((section) => section === target) + 1;
          //index：查找当前目标元素在 sections 数组中的索引，并加 1，用于确定当前页码。
        }
      });
    },
    loadPageCallback(entries, observer) {
      entries.forEach(async (entry) => {
        if (entry.isIntersecting) {
          const target = entry.target;
          const page = target.getAttribute("page");
          if (this.loadPageList.indexOf(Number(page)) == -1) {
            const catalogDom = this.tool.getParentNodeByClassName(
              target,
              "chapter"
            );
            // 添加页码
            this.loadPageList.push(Number(page));
            const catalog = catalogDom.getAttribute("num");
            // if (!this.questionDataMap[page]) {
            //   if (testData && testData[catalog]) {
            //     if (testData[catalog][page]) {
            //       if (Array.isArray(testData[catalog][page])) {
            //         this.questionDataMap[page] = await getQuestionList(
            //           page,
            //           testData[catalog][page],
            //           this.config.activeBook
            //         );
            //       } else {
            //         const obj = {};
            //         for (let key in testData[catalog][page]) {
            //           obj[key] = await getQuestionList(
            //             [],
            //             testData[catalog][page][key],
            //             this.config.activeBook
            //           );
            //         }
            //         this.questionDataMap[page] = obj;
            //       }
            //       console.log("题目", this.questionDataMap);
            //     }
            //   }
            // }
            // 渲染这一页的标记
            for (const key in this.renderSignMap) {
              if (this.renderSignMap[key][page]) {
                this.renderSignMap[key][page].forEach((item) => {
                  this.renderSign(key, item);
                });
              }
            }
            // 处理高亮
            if (this.highlightData) {
              // 高亮行
              setTimeout(() => {
                // 获取页面所有text节点
                const pageTextList = document.createTreeWalker(
                  target,
                  NodeFilter.SHOW_TEXT
                );
                // 匹配关键字
                const allPageTextNodes = [];
                let currentNode = pageTextList.nextNode();
                while (currentNode) {
                  allPageTextNodes.push(currentNode);
                  currentNode = pageTextList.nextNode();
                }
                for (let i = 0; i < allPageTextNodes.length; i++) {
                  const textDom = allPageTextNodes[i];
                  let txtIndex = textDom.textContent.indexOf(
                    this.highlightData.txt
                  );
                  if (txtIndex > -1) {
                    textDom.parentNode.style.transition =
                      "background-color 0.8s";
                    textDom.parentNode.scrollIntoView();
                    textDom.parentNode.style.backgroundColor = "#79bbf0";
                    setTimeout(() => {
                      textDom.parentNode.style.backgroundColor = "";
                    }, 1000);
                  }
                }
              }, 100);
            }
            if (this.loadPageList.length > 5) {
              // 超过5页
              this.loadPageList.shift();
            }
          }
        }
      });
    },
    initSwiper() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".swiper-img");
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        new Swiper(dom, {
          loop: false, // 无缝
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          // observer: true,
          // observeParents: true
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
          //     ".swiper-pagination"
          //   ),
          //   clickable: true // 分页器可以点击
          // }
        });
      }
      const pptDoms = (
        this.container ? this.container : document
      ).querySelectorAll(".swiper_ppt");
      for (let i = 0; i < pptDoms.length; i++) {
        const dom = pptDoms[i];
        new Swiper(dom, {
          loop: false, // 无缝
          autoplay: false,
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          on: {
            init: (value) => {
              let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
              let totalPages = value.slides.length; // 获取总页数
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
            slideChange: (value) => {
              let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
              let totalPages = value.slides.length; // 获取总页数
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            },
          },
        });
      }
    },
    initViewer() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".openImgBox");
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        new Viewer(dom, {
          container: this.container
            ? this.container.querySelector("#app")
            : "body",
          navbar: true, // 显示导航栏
          toolbar: true, // 显示工具栏
          title: true, // 显示标题
        });
      }
    },
    // 根据关键字全文检索
    searchTextByPage(keyword) {
      const searchResult = [];
      let catalogIndex = 0;
      // 所有章节组件（每本书制作时单独配置）
      const pageData = {
        pageHeader,
        //   chapterOne,
        //   chapterTwo,
        //   chapterThree,
        //   chapterFour,
        //   chapterFive,
      };
      // 遍历所有章节文件
      for (const key in pageData) {
        catalogIndex++;
        let pageComponent, pageExample;
        // 先渲染一次当前章节文件（这时页面的内容为空），获取页码信息
        pageComponent = Vue.extend(pageData[key]);
        pageExample = new pageComponent({
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true,
          },
        });
        pageExample.$mount(
          (this.container ? this.container : document).querySelector(
            "#searchContent"
          )
        );
        // 获取页码
        const pageDom = (this.container ? this.container : document)
          .querySelector("#searchDomBox")
          .querySelectorAll(".page-box");
        const pages = [];
        for (let i = 0; i < pageDom.length; i++) {
          const pageDomItem = pageDom[i];
          pages.push(Number(pageDomItem.getAttribute("page")));
        }
        // 获取页面结束，卸载销毁
        pageExample.$destroy();
        (this.container ? this.container : document).querySelector(
          "#searchDomBox"
        ).innerHTML = '<div id="searchContent"></div>';
        // 遍历页码
        if (pages.length) {
          for (let i = 0; i < pages.length; i++) {
            const pageNum = pages[i];
            // 动态渲染对应章节的页码
            pageComponent = Vue.extend(pageData[key]);
            pageExample = new pageComponent({
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true,
              },
            });
            pageExample.$mount(
              (this.container ? this.container : document).querySelector(
                "#searchContent"
              )
            );
            // 获取对应页面dom
            const thisPageDom = (this.container ? this.container : document)
              .querySelector("#searchDomBox")
              .querySelector(`[page="${pageNum}"]`);
            if (thisPageDom) {
              // 获取页面所有text节点
              const pageTextList = document.createTreeWalker(
                thisPageDom,
                NodeFilter.SHOW_TEXT
              );
              // 匹配关键字
              const allPageTextNodes = [];
              let currentNode = pageTextList.nextNode();
              while (currentNode) {
                allPageTextNodes.push(currentNode);
                currentNode = pageTextList.nextNode();
              }
              for (let i = 0; i < allPageTextNodes.length; i++) {
                const textDom = allPageTextNodes[i];
                let txtIndex = textDom.textContent.indexOf(keyword);
                if (txtIndex > -1) {
                  // 记录关键字所在页码、章节以及匹配到的段落
                  searchResult.push({
                    page: pageNum,
                    catalog: catalogIndex,
                    txt: textDom.textContent,
                    txtIndex: txtIndex,
                  });
                }
              }
              // 结束，卸载销毁
              pageExample.$destroy();
              (this.container ? this.container : document).querySelector(
                "#searchDomBox"
              ).innerHTML = '<div id="searchContent"></div>';
            }
          }
        }
      }
      // 输出搜索结果
      console.log(searchResult);
      return searchResult;
    },
    // 根据检索结果跳转对应位置并高亮
    searchItemLocation(data) {
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      this.videoList = allVideo;
      if (allVideo.length) {
        // 查找播放状态的最后一条音频
        const playAudio = allVideo
          .reverse()
          .find((item) => item.paused == false);
        if (playAudio) {
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap < 0) {
            playAudio.pause();
            this.audioPath = playAudio.src;
            this.currentTime = playAudio.currentTime;
          }
        }
      }
    },
    // 页面向上滚动，音频小窗回收
    handleAudio() {
      if (!this.audioPath) return false;
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if (allVideo.length) {
        //查找与小窗播放音频同源的页面audio DOM
        const playAudio = allVideo.find((item) => item.src == this.audioPath);
        if (playAudio) {
          const bottomGap = playAudio.getBoundingClientRect().bottom;
          if (bottomGap >= 0) {
            if (this.$refs.audioPlayer) {
              const playerState = this.$refs.audioPlayer.getVideoPlayer();
              this.audioPath = "";
              playAudio.currentTime = playerState.currentTime;
              if (!playerState.paused) playAudio.play();
            }
          }
        }
      }
    },
    // 关闭mini video
    closeMiniAudio() {
      this.audioPath = "";
    },
    // 点击音频播放，关闭其他音频
    closeAudio() {
      let allAudio = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      for (let index = 0; index < allAudio.length; index++) {
        const item = allAudio[index];
        item.addEventListener("play", () => {
          const audioList = Array.from(allAudio);
          for (let cindex = 0; cindex < audioList.length; cindex++) {
            const citem = audioList[cindex];
            if (citem.currentSrc != item.src) {
              citem.pause();
            }
          }
          this.closeMiniAudio();
        });
      }
    },
    // 点击视频关闭其他
    closeVideo() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      for (let index = 0; index < allVideo.length; index++) {
        const item = allVideo[index];
        item.addEventListener("playing", (item) => {
          const path = item.srcElement.src;
          const videoList = Array.from(allVideo);
          for (let cindex = 0; cindex < videoList.length; cindex++) {
            const citem = videoList[cindex];
            if (citem.currentSrc != path && path) {
              citem.pause();
            }
          }
        });
      }
    },
    // 视频小窗
    handleVideoPicture() {
      let doms = (this.container ? this.container : document).querySelectorAll(
        ".video"
      );
      doms = Array.from(doms);
      if (!doms.length) return false;
      const playVudio = doms.reverse().find((item) => item.paused == false);
      if (playVudio) {
        const bottomGap = playVudio.getBoundingClientRect().bottom;
        const topGap = playVudio.getBoundingClientRect().top;
        if (bottomGap < 0 || topGap > window.innerHeight) {
          try {
            if (playVudio.readyState) playVudio.requestPictureInPicture();
          } catch (error) {
            console.log(error, "小窗错误error");
          }
        }
      }
    },
    //其他类名下字体大小变化
    transformDom(fs) {
      if (!fs) return;
      let doms = (this.container ? this.container : document).querySelectorAll(
        ".block"
      );
      if (!doms.length) return;
      for (let index = 0; index < doms.length; index++) {
        const dom = doms[index];
        dom.style.fontSize = fs + "px";
      }
    },
  },
  components: {
    pageHeader,
    //   chapterOne,
    //   chapterTwo,
    //   chapterThree,
    //   chapterFour,
    //   chapterFive,
  },
};
</script>

<style lang="less" scoped>
.page-main {
  width: 100% !important;
  height: 100% !important;
  overflow: auto;

  .page-content {
    max-width: 816px;
    min-width: 375px;
    margin: 0 auto;
    padding-bottom: 100px;
  }
}
</style>

 src/books/toddlerSportsSafetyProtection/view/index.vue

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