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

闫增涛

2 天以前 b1ee986edd5ea1c55186b795bf4b54215e4e9331

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

 src/App.vue

@@ -29,6 +29,9 @@
    <policiesAndRegulations v-if="activeBook.name == 'policiesAndRegulations'"></policiesAndRegulations> 
    <OralAndBroadcasting v-if="activeBook.name == 'OralAndBroadcasting'" ></OralAndBroadcasting>
    <practicalCareChildrenManual v-if="activeBook.name == 'practicalCareChildrenManual'"></practicalCareChildrenManual>
    <childIllnessPreventionCare v-if="activeBook.name == 'childIllnessPreventionCare'"></childIllnessPreventionCare>
    <artInitiationForAges0to3 v-if="activeBook.name == 'artInitiationForAges0to3'"></artInitiationForAges0to3>
    <toddlerSportsSafetyProtection v-if="activeBook.name == 'toddlerSportsSafetyProtection'"></toddlerSportsSafetyProtection>
  </div>
</template>
<script>
@@ -80,7 +83,10 @@
    preschoolBasicKnowledge: ()=> import("./books/preschoolBasicKnowledge/view/index.vue"),
    policiesAndRegulations: ()=> import("./books/policiesAndRegulations/view/index.vue"),
    OralAndBroadcasting:()=> import("./books/OralAndBroadcasting/view/index.vue"),
    practicalCareChildrenManual: ()=> import("./books/practicalCareChildrenManual/view/index.vue")
    practicalCareChildrenManual: ()=> import("./books/practicalCareChildrenManual/view/index.vue"),
    childIllnessPreventionCare: ()=> import("./books/childIllnessPreventionCare/view/index.vue"),
    artInitiationForAges0to3: ()=> import("./books/artInitiationForAges0to3/view/index.vue"),
    toddlerSportsSafetyProtection : ()=> import("./books/toddlerSportsSafetyProtection/view/index.vue"),
  },
  data() {
    return {
@@ -141,7 +147,6 @@
          ? process.env.VUE_APP_BOOK_ID
          : "OralAndBroadcasting")
      );

      // this.activeBook = await this.config.getBookConfig(
      //   'http://182.92.203.7:3007/books/resource/'+
      //   (process.env.VUE_APP_ENV == "product"

 src/assets/js/config.js

@@ -13,7 +13,7 @@
  );
  return response.data;
};
export const appId = 2;
export const appId = 3;
export const requestTimeOut = 300000; // 请求超时时间
export const tokenKey = "jsek-token";
// export const tokenKey = "website-front-token"

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

@@ -65,6 +65,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";

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

@@ -48,6 +48,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";

 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,990 @@
<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 Vue from "vue";
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

@@ -40,6 +40,7 @@
  </template>
  
  <script>
  import Vue from "vue";
  import pageHeader from "./header.vue";
  import chapterOne from "./chapter001.vue";
  import chapterTwo from "./chapter002.vue";
@@ -184,7 +185,7 @@
  
      // 测试页面跳转
      // setTimeout(() => {
      //   this.gotoPage(6, 253);
      //   this.gotoPage(1, 1);
        //   setTimeout(() => {
        //     this.renderSign("Highlight", {
        //       id: "2ACA9359",

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

@@ -52,6 +52,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";

 src/books/aviationEtiquette/assets/main.less

@@ -1959,12 +1959,13 @@
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    }
}


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

@@ -674,10 +674,10 @@
            <input type="checkbox" name="ball2" :disabled="questionData.isComplete" value="D" id="5"
              v-model="questionData.projectOne.five.value" @change="setBookQuestion" />D.礼敬他人是与他人建立和谐的人际关系的基石
          </p>
          <p class="dialogQuestion">
          <p class="dialogQuestion" @click="openQuestion(1)">
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(1)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path
@@ -1502,10 +1502,10 @@
          <p>6.请根据所学知识分析民航服务的现状及服务质量问题产生的原因。</p>
          <textarea v-model="questionData.projectTwo.six.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box"
            @change="setBookQuestion"></textarea>
          <p class="dialogQuestion">
          <p class="dialogQuestion" @click="openQuestion(2)">
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(2)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path

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

@@ -1038,10 +1038,10 @@
          <p>6.沟通中“五心服务”是指哪五心？</p>
          <textarea v-model="questionData.projectOne.six.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box"
            @change="setBookQuestion"></textarea>
            <p class="dialogQuestion">
            <p class="dialogQuestion" @click="openQuestion(1)" >
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(1)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path
@@ -1643,10 +1643,10 @@
              v-model="questionData.projectTwo.five.value" @change="setBookQuestion" />C.先处理事件，后处理情感</p>
          <p><input type="radio" name="QFive" :disabled="questionData.isComplete" value="D" id="5"
              v-model="questionData.projectTwo.five.value" @change="setBookQuestion" />D.耐心倾听旅客的抱怨</p>
              <p class="dialogQuestion">
            <p class="dialogQuestion" @click="openQuestion(2)">
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(2)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path

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

@@ -1207,10 +1207,10 @@
          <p>9.电梯引导礼仪应遵循哪些原则？</p>
          <textarea v-model="questionData.projectOne.nine.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box"
            @change="setBookQuestion"></textarea>
          <p class="dialogQuestion">
          <p class="dialogQuestion" @click="openQuestion(1)">
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(1)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path
@@ -1644,10 +1644,10 @@
          <p>6.简述人身安全检查服务人员的仪容仪表礼仪规范。</p>
          <textarea v-model="questionData.projectTwo.six.value" placeholder="请输入内容" rows="4" class="fz-16 textarea-box"
            @change="setBookQuestion"></textarea>
          <p class="dialogQuestion">
          <p class="dialogQuestion"  @click="openQuestion(2)">
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(2)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path
@@ -2517,10 +2517,10 @@
          <p>10.请写一写在安全检查中乘务员需要注意哪些礼仪规范？</p>
          <textarea v-model="questionData.projectThree.ten.value" placeholder="请输入内容" rows="4"
            class="fz-16 textarea-box" @change="setBookQuestion"></textarea>
          <p class="dialogQuestion">
          <p class="dialogQuestion"  @click="openQuestion(3)">
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(3)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path

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

@@ -1094,10 +1094,10 @@
          <p>8.请简述民航礼仪技能展示情景剧创作注意事项。</p>
          <textarea v-model="questionData.projectTwo.eight.value" placeholder="请输入内容" rows="4"
            class="fz-16 textarea-box" @change="setBookQuestion"></textarea>
          <p class="dialogQuestion">
          <p class="dialogQuestion"  @click="openQuestion(1)">
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(1)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path

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

@@ -1548,10 +1548,10 @@
              v-model="questionData.projectTwo.eight.value" @change="setBookQuestion" />B.略浅一度</p>
          <p><input type="radio" name="projectTwo.eight" :disabled="questionData.isComplete" value="C" id="8"
              v-model="questionData.projectTwo.eight.value" @change="setBookQuestion" />C.相同</p>
          <p class="dialogQuestion">
          <p class="dialogQuestion" @click="openQuestion(1)">
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(1)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path
@@ -2424,10 +2424,10 @@
          <p>5.简述入座与离座的基本原则。</p>
          <textarea v-model="questionData.projectThree.five.value" placeholder="请输入内容" rows="4"
            class="fz-16 textarea-box" @change="setBookQuestion"></textarea>
          <p class="dialogQuestion">
          <p class="dialogQuestion" @click="openQuestion(2)">
            <span class="td-0">【本节测试】</span>
            <span class="td-0">
              <svg @click="openQuestion(2)" t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
              <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2536" xmlns:xlink="http://www.w3.org/1999/xlink" width="28"
                height="28">
                <path

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

@@ -19,6 +19,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chpater002.vue";
@@ -161,7 +162,7 @@

    //测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(4, 116);
    //   this.gotoPage(2, 18);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",
@@ -709,6 +710,7 @@
    searchTextByPage(keyword) {
      const searchResult = [];
      let catalogIndex = 0;
      console.log(keyword,"keyword")
      // 所有章节组件（每本书制作时单独配置）
      const pageData = {
        pageHeader,
@@ -718,6 +720,7 @@
        chapterFour,
        chapterFive
      };
      
      // 遍历所有章节文件
      for (const key in pageData) {
        catalogIndex++;
@@ -736,11 +739,13 @@
            "#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")));

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

@@ -22,6 +22,7 @@
  </template>
  
  <script>
  import Vue from "vue";
  import pageHeader from "./header.vue";
  import chapterOne from "./chapter001.vue";
  import chapterTwo from "./chapter002.vue";

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

@@ -20,6 +20,7 @@
  </template>
  
  <script>
  import Vue from "vue";
  import pageHeader from "./header.vue";
  // import chapterOne from "./chapterr001.vue";
//   import chapterTwo from "./chapter002.vue";

 src/books/childIllnessPreventionCare/assets/examinationList.js

New file
@@ -0,0 +1,9 @@
const testData = {
  3: {
    47: [103083,103124,103165,103200,98450,98468,98485,98500,98516,99332,99384,99420,99465,99486,99507,99625,99645,99669,99689,95073,96472,96687,96878,97060,97234,97363,97481,97593,97696],
    
  },
  
};

export default testData;

 src/books/childIllnessPreventionCare/assets/images/0014-03.jpg

 src/books/childIllnessPreventionCare/assets/images/0014_02.jpg

 src/books/childIllnessPreventionCare/assets/images/0019-03.jpg

 src/books/childIllnessPreventionCare/assets/images/0027-03.jpg

 src/books/childIllnessPreventionCare/assets/images/0036_01.jpg

 src/books/childIllnessPreventionCare/assets/images/0052-03.jpg

 src/books/childIllnessPreventionCare/assets/images/0053-01.jpg

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

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

 src/books/childIllnessPreventionCare/assets/images/0066-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0072-03.jpg

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

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

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

 src/books/childIllnessPreventionCare/assets/images/0107-03.jpg

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

 src/books/childIllnessPreventionCare/assets/images/0126-03.jpg

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

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

 src/books/childIllnessPreventionCare/assets/images/0152-03.jpg

 src/books/childIllnessPreventionCare/assets/images/0153-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0154-02.jpg

 src/books/childIllnessPreventionCare/assets/images/0156-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0158-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0161-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0164-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0167-02.jpg

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

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

 src/books/childIllnessPreventionCare/assets/images/0174-04.jpg

 src/books/childIllnessPreventionCare/assets/images/0174_01.png

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

 src/books/childIllnessPreventionCare/assets/images/0176-05.jpg

 src/books/childIllnessPreventionCare/assets/images/0176-07.jpg

 src/books/childIllnessPreventionCare/assets/images/0176-16.jpg

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

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

 src/books/childIllnessPreventionCare/assets/images/0180-04.jpg

 src/books/childIllnessPreventionCare/assets/images/0180-05.jpg

 src/books/childIllnessPreventionCare/assets/images/0183-03.jpg

 src/books/childIllnessPreventionCare/assets/images/0184-02.jpg

 src/books/childIllnessPreventionCare/assets/images/0187-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0190-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0193-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0199-03.jpg

 src/books/childIllnessPreventionCare/assets/images/0202-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0204-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0204-02.jpg

 src/books/childIllnessPreventionCare/assets/images/0205-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0209-02.jpg

 src/books/childIllnessPreventionCare/assets/images/0212-03.jpg

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

 src/books/childIllnessPreventionCare/assets/images/0215-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0215-02.jpg

 src/books/childIllnessPreventionCare/assets/images/0220-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0221-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0225-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0237-02.jpg

 src/books/childIllnessPreventionCare/assets/images/0239-03.jpg

 src/books/childIllnessPreventionCare/assets/images/0240-01.jpg

 src/books/childIllnessPreventionCare/assets/images/0274-03.jpg

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

 src/books/childIllnessPreventionCare/assets/images/bgImage/001-01.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/001-02.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/C.png

 src/books/childIllnessPreventionCare/assets/images/bgImage/C1.png

 src/books/childIllnessPreventionCare/assets/images/bgImage/C2.png

 src/books/childIllnessPreventionCare/assets/images/bgImage/C3.png

 src/books/childIllnessPreventionCare/assets/images/bgImage/C4.png

 src/books/childIllnessPreventionCare/assets/images/bgImage/CH.png

 src/books/childIllnessPreventionCare/assets/images/bgImage/CQ.png

 src/books/childIllnessPreventionCare/assets/images/bgImage/Figure-0017-01.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/Figure-0088-01.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/Figure-0112-01.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/Figure-0150-01.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/al.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/bg1.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/bg2-1.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/bg2.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/bg3.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/bg4.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/bg5.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/bg6.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/bg7.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/dr.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/fenge.png

 src/books/childIllnessPreventionCare/assets/images/bgImage/gjsy.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/jyhd.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/skylx.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/swdt.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/tzyd.jpg

 src/books/childIllnessPreventionCare/assets/images/bgImage/xxmb.jpg

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

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

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

 src/books/childIllnessPreventionCare/assets/main.less

New file
@@ -0,0 +1,419 @@
.childIllnessPreventionCare-book {
    width: 100%;
    height: 100%;

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

    p {
        font-family: "宋体";
        margin-top: 0.2em;
        margin-bottom: 0.2em !important;
        text-indent: 2em;
        line-height: 28px;
        text-align: justify;
        font-size: 16px;
        color:#5A5A5A;
    }
    .main-color{
        color:#7acab4 !important;
    }

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

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

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

    .fz-h1 {
        font-size: 1.4em !important;
        margin-top:-40px !important
    }

    .fl {
        display: flex;
    }

    .al-c {
        align-items: center;
    }
    
    .jc-sb {
        justify-content: space-between;
    }

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


    .pt {
        padding: 5% 0;
    }

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

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

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

	


    .img-rights {
        width: 240px;
        float: right;
        height: auto;
        margin: auto;
        margin-left: 18px;
        margin-top: 20px;
        position: relative;
    }
    .content1{
        position: absolute;
        left:0 ;
        top:-10px;
        padding:0 8%;
    }
    .tsTitle{
        font-family: "youyuan";
        color:#7acab4;
        font-weight: bold;
        text-indent: 1em;
        font-size: 18px;
    }
    .tsContent{
        font-family: 'FZLTXIHJW';
        font-size:15px;
        line-height: 24px;
    }



	
    .page-box:nth-child(even) .bodystyle {
        font-family: 'FZLTXIHJW';
        text-align: justify;
        margin: 0 15% 0 13%;
        padding-bottom: 80px;
        line-height: 30px;
        padding: 10% 0 14%;

    }

    .page-box:nth-child(odd) .bodystyle {
        font-family: 'FZLTXIHJW';
        text-align: justify;
        margin: 0 13% 0 15%;
        padding-bottom: 80px;
        line-height: 30px;
        padding: 8% 0 12% 0;
    }


    .block {
        font-size: 16px;
        font-family: "KAITI";
    }

    .block1 {
        font-size: 16px;
        font-family: "FangSong";
    }

    .block2 {
        font-family: "KaiTi";
        font-size: 15px;
    }

    .block3{
        font-size:15px;
        font-family: 'FZLTXIHJW';
        font-weight: 300;
    }

    .preface{
        font-family:"FZFSJW--GB1-0";
        color:#5A5A5A;
    }


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

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

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

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


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

	
    h1 {
        font-family: '宋体';
        line-height: 1.8em;
        font-weight: bold;
        font-size: 1.8em;
        text-indent: 0em;
        margin-top: -45px;
        color:#fff;
    }


    h2 {
        color:#fff;
        font-family: '宋体';
        font-weight: bold;
        font-size: 1.5em;
        margin:0;
    }


    h3 {
        font-family: 'FZFSJW--GB1-0';
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 0.6em;
        margin-top: 1em;
        text-indent: 1.5em;
        color:#7acab4;
    }


    h4 {
        font-family: '宋体';
        font-weight: bold;
        margin-bottom: 0.4em;
        margin-top: 0.4em;
        font-size: 1.1em;
        text-indent: 1.5em;
        color: #000;
    }


    .firstTitle-1{
        width: 100px;
        height: 0;
        padding: 0 10px;
        border-top: 40px solid #7acab4;
        border-left: 0px solid transparent;
        border-right: 40px solid transparent;
    }
    .firstTitle-2{
        height: 0;
        padding: 0 10px;
        border-top: 40px solid #7acab4;
        border-left: 0px solid transparent;
        border-right: 40px solid transparent;
        margin-top:10px;
        display: inline-block;
    }
    .secondTitle{
        background: #7acab4;
        border-radius: 10px;
        padding: 0 10px;
        margin-top:50px;
        margin-bottom: 20px;
        display: inline-block;

    }

    .bgColor{
        position: relative;
        margin-top: 30px;
		
    }
    .content{
        padding:15px;
        position: absolute;
        top:0;
        left:0;
    }
    .titleQuot{
        font-family: "FZFSJW--GB1-0";
        font-weight: bold;
        margin:10px 0;
    }


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

    .rwmb-1 {
        margin-left: -2.4em;
        margin-bottom: 0.6em;
        margin-top: 0.5em;
        height: 2.8em;
    }

    .rwmb-2 {
        margin-top: 1em;
        margin-bottom: 0.5em;
        height: 1.5em;
    }

	
	
    .header-l{
        width:12%;
        position: absolute;
        top: 0;
        left: 0; 
    }
    .page-l{
        position: absolute;
        bottom: 22%;
        left: 65%; 
        color:#7acab4;
        font-size:14px;
    }
    .header-r1{
        width:13%;
        position: absolute;
        top: 20px;
        right: 0; 
    }
    .header-r{
        width:12%;
        position: absolute;
        bottom: -5px;
        right: 0; 
    }
    .page-r{
        position: absolute;
        top: 13%;
        left: 22%; 
        color:#7acab4;
        font-size:14px;
    }

    .textarea-box {
        width:90%;
        margin-left:2em;
        overflow: auto;
        word-break: break-all;
        resize: none;
        border-radius: 5px;
        border: 1px solid #7acab4;
        background-color: rgba(255, 255, 255, 0);
        margin-bottom: 20px;
    }
	
    .video-box {
        margin: 20px 0 20px 0;
        border: 1px dashed #7acab4;
        padding: 2% 2%;
    }

    .videoname {
        display: flex;
        justify-content: center;
        color:#7acab4;
        font-size:14px;
    }

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

    .testTitle{
        height:24px;
        line-height:24px;
        display: inline-block;
        border-radius: 10px;
        background:#7acab4;
        margin-top:30px; 
        padding:0 5px;
    }
	
}

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

New file
@@ -0,0 +1,199 @@
<template>
  <div class="chapter" num="2">
    <!-- P1 -->
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
        <div class="bodystyle">
          <div class="firstTitle-1"><h1 >第一章</h1></div>
          <div class="firstTitle-2"><h1 >婴幼儿健康基础知识</h1></div>
          <div><img class="img-0" alt="" src="../../assets/images/bgImage/fenge.png"/></div>
          <p class="mt-10"><img class="rwmb-1" alt="" src="../../assets/images/bgImage/xxmb.jpg"/></p>
          <p class="preface">☆掌握婴幼儿健康的定义和特点。</p>
          <p class="preface">☆掌握婴幼儿健康的标志。</p>
          <p class="preface">☆了解婴幼儿健康的重要意义。</p>
          <p><img class="rwmb-1" alt="" src="../../assets/images/bgImage/swdt.jpg"/></p>
          <p class="center openImgBox">
            <img class="img-0" alt="" src="../../assets/images/0014-03.jpg" />
          </p>
          <p><img class="rwmb-1" alt="" src="../../assets/images/bgImage/dr.jpg"/></p>
          <p class="center preface">健康是什么？</p>
          <p class="preface">在日常生活中，常规意义上的“健康”通常是指身体没有疾病。但是，婴幼儿作为祖国未来的希望，他们的健康到底指什么呢？有没有其自身的特殊含义？婴幼儿健康包括哪些方面的内容，又有什么重要意义呢？</p>
          <div class="secondTitle"><h2>第一节 婴幼儿健康的定义和特点</h2></div>
          <h3>一、婴幼儿健康的定义</h3>
          <p>世界卫生组织（WHO）对健康的定义是：健康不仅是没有疾病和虚弱，而且是</p>
        </div>
      </div>
    </div>

    <!-- P2 -->
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
        <div class="bodystyle">
          <p class="td-0">个体在身体上、精神上、社会适应上的完好状态。因此，可以将婴幼儿健康定义为：婴幼儿各个器官、组织正常发育，能够较好地抵抗各种疾病，性格开朗，情绪乐观，无心理问题，对社会环境有较快的适应能力。</p>
          <h3>二、婴幼儿健康的特点</h3>
          <p>婴幼儿健康不仅是指通常意义上的没有躯体上的缺陷和疾病，而且还要有较好的生理、心理状态和适应社会的能力。其特点如下。</p>
          <h4>（一）身体健康</h4>
          <p>婴幼儿健康首先是指婴幼儿身体各个器官组织的结构正常发育，没有先天性心脏病、佝偻病、肥胖症、营养不良、贫血等躯体上的缺陷或疾病，躯体各个器官系统能良好地发挥作用，有效抵御各种疾病。</p>
          <h4>（二）心理健康</h4>
          <p>我国《幼儿园教育指导纲要（试行）》提出：“树立正确的健康观念，在重视幼儿身体健康的同时，要高度重视幼儿的心理健康。”心理健康是指心理发展健全，能正常地对待外界的各种变化，从情绪到内心均能适应并调整。其重要标志是有生命的活力、积极的内心体验，情绪反应适度，社会适应良好，能有效地发挥个人身心潜力。</p>
          <p>总之，婴幼儿健康既包括身体健康，也包括心理健康，二者浑然一体、不可分割。一个健康的婴幼儿应该是身心发展都处于健康状态之中的。</p>
          <div class="secondTitle"><h2>第二节 婴幼儿健康的标志</h2></div>
          <p>婴幼儿健康的标志指婴幼儿身心发育指标达到正常标准的状态。包括以下内容。</p>
          <h3>一、婴幼儿身体健康的标志</h3>
          <h4>（一）生长曲线达标</h4>
          <p >婴幼儿身高、体重、头围应符合全国儿童生长发育参照标准，身高（身长）、体重、体形在平均值加减两个标准差范围之内，不存在矮小、肥胖、营养不良等疾病状态。</p>
          <h4>（二）形态端正</h4>
          <p>无驼背、脊柱侧弯等异常。</p>
          <h4>（三）各器官系统生理功能正常</h4>
          <p>各器官系统的生理功能正常，实验室化验指标在正常范围内。</p>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">2</div>
        </div>
      </div>
    </div>
    <!-- P3 -->
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <div class="bodystyle">
          <h4>（四）身体无疾病</h4>
          <p>无感染性疾病、传染性疾病、寄生虫病等。</p>
          <h3>二、婴幼儿心理健康的标志</h3>
          <h4>（一）智力发育正常</h4>
          <p>婴幼儿智力是个体语言、运动、操作、观察、领悟、思维、推理等多种能力的综合体现。正常发育的智力指个体智力发展水平与其实际年龄相称，这是婴幼儿心理健康的重要前提，因为智力发展正常是婴幼儿生活、学习、交往的基本条件。</p>
          <h4>（二）情绪稳定，情绪反应适度</h4>
          <p>心理健康的婴幼儿在乐观、愉快等积极情绪体验方面占优势，虽然也会有消极情绪出现，但往往能宣泄和释放不良情绪，并能控制自己的情绪，使之保持相对稳定。</p>
          <h4>（三）乐于与人交往，与同伴关系融洽</h4>
          <p>心理健康的儿童有积极、良好的人际关系，能合群，爱与伙伴交往，对人有同情心和友好行为，不随便打人骂人，在集体中能愉快地生活，在成人指导下愿意为集体做力所能及的事。</p>
          <h4>（四）心理活动与心理发展年龄特征相适应</h4>
          <p>心理健康的儿童有一定的自尊心和自信心，对称赞感到高兴，对批评、指责感到羞愧，希望做受人欢迎的事，不愿做遭人责骂的事；不过分畏难、胆怯等。</p>
          <h4>（五）行为统一和协调</h4>
          <p>心理健康的婴幼儿，心理活动和行为方式能基本处于和谐的统一之中。相反，心理不健康的婴幼儿注意力不集中，兴趣时常转移，思维混乱，语言支离破碎，多动、冲动，行为经常出现前后矛盾的现象，自我控制和自我调节的能力很差。</p>
          <h4>（六）具备良好的社会适应能力</h4>
          <p>具备与年龄相符的生活自理能力，并能自觉调整个人与环境之间的关系，较好地适应周围环境。</p>
          <div class="secondTitle"><h2>第三节 婴幼儿健康的重要意义</h2></div>
          <h3>一、提高全社会卫生水平</h3>
          <p >教育婴幼儿的首要目的就是增强婴幼儿身心健康。婴幼儿的体格生长、心理</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C1.png"/>
          <div class="page-r">3</div>
        </div>
      </div>
    </div>
    <!-- P4 -->
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
        <div class="bodystyle">
          <p class="td-0">行为等方面的发育奠定了人类一生重要和关键的基础。婴幼儿健康是关系到全球政治、经济和安全的重要任务，关系到人类的可持续发展。学习婴幼儿健康知识、保障婴幼儿健康的重要意义在于：</p>
          <p>一个国家、一个民族的整体健康素质、文化素质和思想道德素质都是以上一代为基础，又同时会影响下一代的。学习婴幼儿健康知识，保障婴幼儿身心健康，培养其良好、积极、健康的生活方式和行为方式，能更好地促进婴幼儿身心健康成长与和谐发展。保障婴幼儿健康能有效地降低婴幼儿的发病率和死亡率，提高人群的平均期望寿命，对于提高全社会卫生水平起着十分重要的作用。</p>
          <p>党的二十大报告强调：“人民健康是民族昌盛和国家强盛的重要标志。把保障人民健康放在优先发展的战略位置，完善人民健康促进政策。”其中，婴幼儿健康更是国家发展和提高全社会卫生水平的基石。</p>
          <h3>二、为国家未来提供良好保障</h3>
          <p>健康的生命并非完全由自然给予，而是需要个体的积极参与，健康状况会因个体自身的活动而不断发生变化。因此，幼儿园教师和婴幼儿的其他照护人员所持有的健康观点和所掌握的健康知识直接影响其教养的方式、行为和幼儿身心健康。因此，我国《幼儿园教育指导纲要（试行）》明确要求：“幼儿园必须把保护幼儿的生命和促进幼儿的健康放在工作的首位。”婴幼儿健康知识是幼儿园教师、保育员、健康照护师、家长等婴幼儿照护人员必不可少的基础知识。只有掌握婴幼儿健康相关知识，才能保证婴幼儿身心健康，为祖国的未来可持续发展储备人才，为祖国未来的经济、政治、安全提供良好的保障。</p>
          <div class="bgColor">
            <img class="img-0" alt="" src="../../assets/images/bgImage/001-02.jpg"/>
            <div class="content">
              <p class="center titleQuot">小 结</p>
              <p>婴幼儿健康是指婴幼儿各个器官、组织正常发育，能够较好抵抗各种疾病，性格开朗，情绪乐观，无心理问题，对社会环境有较快的适应能力。婴幼儿健康不仅是指通常意义上的没有躯体上的缺陷和疾病，还要有较好的生理、心理状态和适应社会的能力，包括身体健康和心理健康，二者浑然一体、不可分割。</p>
              <p>婴幼儿健康的标志包括生长曲线达标、形态端正、各器官系统生理功能正常、身体无疾病、智力发育正常、情绪稳定、情绪反应适度、乐于与人交往、与同伴关系融洽、具备良好的社会适应能力等方面。</p>
              <p>学习婴幼儿健康知识，保障婴幼儿身心健康，能更好地促进婴幼儿身心健康成长与和谐发展，有效降低婴幼儿发病率和死亡率，提高人群平均期望寿命，对于提高全社会卫生水平起着十分重要的作用。</p>
            </div>
          </div>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">4</div>
        </div>
      </div>
    </div>
    <!-- P5 -->
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <div class="bodystyle">
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/gjsy.jpg"/></p>
          <p>婴幼儿　身体健康　心理健康</p>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/skylx.jpg"/></p>
          <p>1．发育正常是健康的重要标志，也是婴幼儿正常生活和学习的重要基础，请思考如何指导家长在日常生活中促进婴幼儿的智力发育。</p>
          <textarea v-model="thinkAbout.one" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p>2．如何合理安排婴幼儿日常饮食、活动及睡眠，从而促进其身体健康？</p>
          <textarea v-model="thinkAbout.two" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p>3．不同年龄的儿童有不同的心理行为表现，幼儿园教师怎么才能识别有心理问题的儿童呢？</p>
          <textarea v-model="thinkAbout.three" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/jyhd.jpg"/></p>
          <p>1．查阅书籍和文献，列举出切实可行的婴幼儿健康管理措施。</p>
          <textarea v-model="thinkAbout.four" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p>2．请说一说自己心目中的婴幼儿健康包括哪些方面。</p>
          <textarea v-model="thinkAbout.five" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/tzyd.jpg"/></p>
          <p>1．高露丹：《养成幼儿健康行为习惯的有效途径》，载《卷宗》，2020（6）。本文介绍了培养幼儿健康行为习惯的几个有效途径：从幼儿的点滴抓起，要注重强化教育，反复训练，提供榜样教育，巩固其健康习惯的形成；要寄情游戏，在游戏中养成健康行为；要家园共育，因人而异，寻找自身特点进行教育，坚持正面的引导教育，给予具体的指导。</p>
          <p>2．赵英：《浅议提高幼儿健康体能水平策略》，载《中国教师》，2015（4）。幼儿是社会的未来，关注幼儿的成长，增强幼儿体质对人类社会与发展具有重要意义。本文基于现阶段3～6岁儿童身体状况及《幼儿园教育指导纲要（试行）》和《3—6岁儿童学习与发展指南》要求，探讨了幼儿园有效提高幼儿健康体能水平的策略。</p>

        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C1.png"/>
          <div class="page-r">5</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getResourcePath, uploadFilePath } from "@/assets/methods/resources";
import {
  getCollectResource,
  setCollectResource,
} from "@/assets/methods/resources";

import tool from "@/assets/js/toolClass.js";
export default {
  name: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
  },

  data() {
    return {
        thinkAbout: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
        },
    };
  },
  async mounted() {
    //项目自测及寻礼之问
    const bookQuestion = localStorage.getItem(
      "childIllnessPreventionCare-book-chapter01-question"
    );
    if (bookQuestion) {
      this.thinkAbout = JSON.parse(bookQuestion);
    }
  },
  methods: {
    setBookQuestion() {
      localStorage.setItem(
        "childIllnessPreventionCare-book-chapter01-question",
        JSON.stringify(this.thinkAbout)
      );
    },
    
  },
};
</script>
<style lang="less" scoped></style>

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

New file
@@ -0,0 +1,283 @@
<template>
  <div class="chapter" num="3">
    
    <!-- P6 -->
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
        <div class="bodystyle">
          <div class="firstTitle-1"><h1 >第二章</h1></div>
          <div class="firstTitle-2"><h1 >婴幼儿的生理和心理行为特点</h1></div>
          <div><img class="img-0" alt="" src="../../assets/images/bgImage/fenge.png"/></div>
          <p class="mt-10"><img class="rwmb-1" alt="" src="../../assets/images/bgImage/xxmb.jpg"/></p>
          <p class="preface">☆掌握婴幼儿的解剖生理特点。</p>
          <p class="preface">☆掌握婴幼儿的生长发育特点。</p>
          <p class="preface">☆掌握婴幼儿的心理行为特点。</p>
          <p><img class="rwmb-1" alt="" src="../../assets/images/bgImage/swdt.jpg"/></p>
          <p class="center openImgBox">
            <img class="img-0" alt="" src="../../assets/images/0019-03.jpg" />
          </p>
          <p><img class="rwmb-1" alt="" src="../../assets/images/bgImage/dr.jpg"/></p>
          <p class="center preface">潇潇怎么了？</p>
          <p class="preface">一天，潇潇在照相馆拍照片，爸爸妈妈站在潇潇的左右两侧，拉起潇潇的手，让他做出腾空离地的姿势。正当摄影师准备抓拍照片时，潇潇大声哭了出来，爸爸妈妈仔细一看，潇潇胳膊无法伸直，表情非常痛苦。到医院急诊科就诊后，确诊潇潇是肘关节脱臼。医生说：婴幼儿与成人不同，上提胳膊很容易导致脱臼。那么，除此之外，婴幼儿还有哪些与成人不同的特殊生理特点和心理行为特点呢？在照护过程中，又该注意哪些方面呢？</p>

        </div>
      </div>
    </div>
    <!-- P7 -->
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
        <div class="bodystyle">
          <div class="secondTitle"><h2>第一节 婴幼儿的解剖生理特点</h2></div>
          <div class="img-rights">
            <img class="img-0" alt="" src="../../assets/images/bgImage/bg4.jpg"/>
            <div class="content1">
              <p class="tsTitle">小贴士</p>
              <p class="tsContent">营养性维生素D缺乏是婴幼儿期常见的一种营养缺乏症。婴幼儿体内的维生素D的来源是食物中的维生素D和皮肤的光照合成，其中皮肤的光照合成最重要。多晒太阳是预防维生素D缺乏的简便有效的方法，因此应保证婴幼儿的户外活动时间。平均户外活动应在1～2小时/日。在冬季日照不足时，应口服补充维生素D。</p>
            </div>
          </div>
          <h3>一、运动系统</h3>
          <h4>（一）骨骼</h4>
          <p>婴幼儿骨骼的主要基质是由交错的原始结缔纤维束构成的，含固体成分和无机物较少，含有机物较多，所以骨骼的韧性强而硬度小，受外力作用时易变形，不易折断。发生骨折时，可能会出现折而不断的现象，医学上称为青枝骨折。婴幼儿骨骼的新生力和吸收过程活跃，骨组织的再生能力较强，骨折的愈合速度较快。此外，婴幼儿的骨骼生长需要较多的钙和促进钙吸收的维生素D，否则骨骼生长硬度不够，会导致维生素D缺乏性佝偻病。</p>
          
          <h4>（二）关节囊和韧带</h4>
          <p>婴幼儿的关节囊和关节周围的韧带未完全发育，关节囊松弛，韧带不够结实，所以受外力牵拉时容易发生脱臼，造成牵拉肘。因此，拉着婴幼儿走路、上楼梯和给婴幼儿穿衣袖时，都要避免用力牵拉。</p>
          <h4>（三）脊柱</h4>
          <p>婴幼儿脊柱的颈曲、胸曲、腰曲、骶曲四个生理弯曲还未定型，所以在走、跑、跳时弹性较小，脊柱的生理弯曲在保持身体平衡、缓冲运动对脑和内脏器官震荡方面的功能不完善，会使脊柱的负重受到影响。不良姿势如不及时纠正，也易导致脊柱变形。</p>
          <h4>（四）肌肉</h4>
          <p>婴幼儿的肌肉纤细，蛋白质、脂肪、糖和无机盐较少，所以肌肉的力量和能量储备较少，容易感到疲劳；但新陈代谢快，疲劳后肌肉的恢复较快。</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">7</div>
        </div>
      </div>
    </div>

    <!-- P8 -->
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -1">
        <div class="bodystyle">
          <div class="img-rights">
            <img class="img-0" alt="" src="../../assets/images/bgImage/bg5.jpg"/>
            <div class="content1">
              <p class="tsTitle">小贴士</p>
              <p class="tsContent">急性上呼吸道感染：俗称“感冒”，是婴幼儿最常见的疾病之一，由各种病原体感染引起，最常见的是病毒感染。一般的上呼吸道感染表现为鼻塞、流涕、喷嚏、干咳、咽痛、全身乏力、发热，部分表现有腹痛、呕吐、腹泻等。本病多属于病毒感染，且具有自愈性，不要盲目给婴幼儿使用抗生素。</p>
            </div>
          </div>
          <h3>二、呼吸系统</h3>
          <h4>（一）上呼吸道</h4>
          <p>婴幼儿的鼻和鼻腔较短，鼻腔狭窄，无鼻毛，鼻黏膜柔嫩。如发生急性上呼吸道感染容易造成鼻塞，影响睡眠和进食。咽部相对狭小且垂直。扁桃体包括腭扁桃体和咽扁桃体，腭扁桃体在1岁末逐渐增大，4～10岁发育达高峰，此年龄阶段易患扁桃体炎。咽扁桃体又称腺样体，严重的腺样体肥大容易导致阻塞性睡眠呼吸暂停综合征。婴幼儿喉部相对较长和狭窄，声门狭小，软骨柔软，黏膜柔嫩且富含血管及淋巴组织，故轻微炎症即可引起喉头水肿导致吸气性呼吸困难。</p>
          
          <h4>（二）下呼吸道</h4>
          <p>婴幼儿胸腔狭窄，肺活量小，但代谢旺盛，机体需氧量多，所以只能以加快呼吸的频率来代偿。年龄越小，呼吸越快。婴幼儿气管腔比成人狭窄，缺乏弹性组织，黏膜纤毛运动能力弱，不能很好地排出微生物，加上呼吸道免疫球蛋白分泌量较低，肺泡吞噬细胞功能不足，分泌性免疫物质含量低，乳铁蛋白、溶菌酶等数量和活性不足，所以容易发生呼吸道感染。一旦感染容易发生气管充血水肿，导致呼吸道阻塞。左主支气管细长，右主支气管短粗，故异物容易进入右主支气管。</p>
          <p>肺部的弹力组织发育差，肺泡数量较少，肺含气量相对较少，故容易发生缺氧。肺血管丰富，肺间质发育旺盛，导致肺含血量多而含气量少。肺炎仍是我国婴幼儿的常见病和多发病。纵隔体积相对较大，周围组织松软，在胸腔积液或气胸时容易发生纵隔移位。</p>
          <h3>三、消化系统</h3>
          <h4>（一）口腔</h4>
          <p>一般在2～2.5岁，乳牙全部出齐，共20颗。6岁左右开始长出恒牙。乳牙具有咀嚼食物、促进颌面部正常发育和有助于正常发音等作用，所以要注意口腔卫生，避免乳牙过早脱落或发生龋齿。</p>
          <h4>（二）食管</h4>
          <p>婴幼儿的食管呈漏斗状，黏膜薄嫩，腺体缺乏，弹力组织及肌层尚不发达，食管下段括约肌发育不成熟，控制能力差，常发生胃食管反流。</p>

        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">8</div>
        </div>
      </div>
    </div>
    <!-- P9 -->
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
        <div class="bodystyle">
          <div class="img-rights">
            <img class="img-0" alt="" src="../../assets/images/bgImage/bg6.jpg"/>
            <div class="content1">
              <p class="tsTitle">小贴士</p>
              <p class="tsContent">肠套叠是指一段肠管套入与其连接的肠管内，并导致肠内容物通过障碍，是引起婴幼儿肠梗阻的最常见原因。婴幼儿肠套叠的典型表现是阵发性腹痛、呕吐、便血（果酱样大便）和腹部肿块四联症及全身表现，如治疗不及时可能造成肠坏死。</p>
            </div>
          </div>
          <h4>（三）胃肠道</h4>
          <p>婴幼儿的胃呈水平位，贲门较宽而松弛，且括约肌不够发达，所以容易呕吐。胃黏膜血管丰富，但盐酸和各种酶分泌较成人少，且酶活性低下，消化功能差，所以容易发生消化不良。</p>
          <p>婴幼儿的肠管相对比成人长，肠壁较薄，通透性高，有利于食物吸收。但由于肠管较长且柔软，易发生肠套叠和肠扭转。肠壁的屏障功能差，肠内的毒素易通过肠壁进入血液循环，引起全身感染性和过敏性疾病。婴幼儿盲肠与阑尾比较游离，活动度大，因而阑尾位置容易变动。</p>
          
          <h4>（四）肝胆</h4>
          <p>年龄越小，肝脏相对越大。婴幼儿的肝脏富含血管，结缔组织少，肝细胞小，再生能力强，不易发生肝硬化。但肝脏容易受到感染、缺氧、药物等影响出现肝细胞受损，转氨酶升高。此外，婴幼儿期胆汁分泌少，脂肪消化能力差，要注意饮食不宜过于油腻。</p>
          <h3>四、循环系统</h3>
          <h4>（一）血液</h4>
          <p>婴幼儿生长发育迅速，血液循环增加较快，如喂养不当或挑食、偏食，容易发生贫血。贫血严重的婴幼儿可能发生骨髓外造血，出现肝脾淋巴结肿大。婴幼儿的血液总量占体重的8%～10%，所以少量出血、脱水即可引起休克。白细胞吞噬病菌的能力较差，发生感染时易扩散，甚至出现脓毒症。血小板数目和成人相近，但血浆中的凝血物质较少，因此一旦出血，凝血较慢。相对于成人来讲，婴幼儿的造血器官更容易受伤害，某些药物或放射性污染对造血器官危害极大，所以不要把婴幼儿当作成人的缩小版，生病时应慎重选择药物。</p>
          <h4>（二）心脏</h4>
          <p>婴幼儿新陈代谢旺盛，心输出量少，只有通过加快心率才能满足机体需要。年龄越小，心率越快。常以测量脉搏来表示心率。脉搏很容易受内外各种因素的影响而不稳定，如哭闹、进食、发热、运动等。因此，应在安静状态下测量脉搏。</p>
          <h3>五、神经系统</h3>
          <p>神经系统发育不均衡，脊髓和脑干在出生时已经发育成熟，而小脑发育较晚，</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">9</div>
        </div>
      </div>
    </div>

    <!-- P10 -->
    <div class="page-box" page="19">
      <div v-if="showPageList.indexOf(19) > -1">
        <div class="bodystyle">
          <p class="td-0">3～6岁才能发育成熟。所以1岁学走路时步履蹒跚，3岁才能稳稳地走和跑，到5～6岁能准确协调地做出各种动作，比如跑、跳、上下台阶。大脑皮层的发育极为迅速，8岁左右大脑皮层发育基本接近成人。大脑皮层的兴奋和抑制过程发育不平衡。婴幼儿大脑皮层发育尚未完善，兴奋占优势，抑制过程形成较慢，但兴奋持续时间较短，容易泛化，主要表现为对事物保持注意时间不长，常随兴趣的改变而转移注意，动作缺乏准确性；不易形成兴奋灶，易疲劳而进入睡眠状态，需注意多休息。在遇到强烈的刺激时，容易发生惊厥。</p>
          <h3>六、泌尿系统</h3>
          <p>婴幼儿肾脏发育不完善，浓缩尿及排泄毒物的功能较差，故入量不足时易发生脱水，甚至诱发急性肾功能不全。膀胱储尿机能差，排尿次数多。所以，要培养婴幼儿及时排尿的习惯，教导婴幼儿不要长时间憋尿。另外，婴幼儿尿道短，防御能力差，易发生上行性泌尿系统感染。</p>
          <h3>七、皮肤</h3>
          <p>婴幼儿表皮较薄，很多部位角质层尚未形成，皮肤抵抗病毒、细菌感染能力较差，容易发生皮肤感染，如脓疱、甲沟炎等。皮下脂肪较少，皮肤抵抗外界刺激能力差，加上活泼爱动，所以皮肤容易受到损伤。皮脂分泌较少，秋冬季容易发生冻伤和皲裂，要在洗浴后及时涂抹面霜和护肤油。</p>
          <p>婴幼儿皮肤的毛细血管密集，流经皮肤的血流量相比成人多，汗腺发育较好，代谢旺盛，出汗多，因此皮肤散热多而快。但是，由于皮下脂肪少，皮肤保温功能差，再加上神经系统对体温调节不稳定，婴幼儿不能很好地适应外界温度的变化，气温骤降时容易患病。</p>
          <div class="secondTitle"><h2>第二节 婴幼儿的生长发育特点</h2></div>
          <p>生长是指随着年龄的增加，身体各组织、器官的不断长大，是量的变化，如体重、身高的增长。发育是细胞、组织、器官功能的分化和功能成熟，是质变的过程，如性的成熟。生长发育是个体成长过程中不可分割的两方面，生长的量的变化可在一定程度上反映身体器官、系统的成熟状况。婴幼儿生长发育的特点如下。</p>
          <h3>一、连续性、非匀速性、阶段性</h3>
          <p>生长是一个连续过程，但并不匀速，各年龄的生长速率各不相同，年龄越小，</p>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">10</div>
        </div>
      </div>
    </div>
    <!-- P11 -->
    <div class="page-box" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
        <div class="bodystyle">
          <p class="td-0">生长越快。人的整个生长期有两个生长高峰，一个是婴儿期，为生后的第一个生长高峰，以后体格生长趋于平衡；到青春期生长速度又加快，出现第二次生长高峰。</p>
          <h3>二、身体各系统和各部分生长不平衡</h3>
          <p >身体各系统的生长发育先后和快慢各不相同，如神经系统发育较早，脑在出生后2年内发育较快；淋巴系统在儿童期迅速生长，于青春期前达到高峰，以后逐渐下降；生殖系统发育最晚。其他系统，如心、肝、肾、肌肉的发育基本与体格生长相平行。</p>
          <h3>三、体格生长有个体差异</h3>
          <p >体格生长受到遗传和环境的复杂交互影响，有明显的个体差异，每个人的生长轨迹不会完全相同。因此，婴幼儿的生长发育水平有一定的正常范围，所谓正常值不是绝对的，评价时必须考虑个体不同的影响因素，才能作出正确判断。</p>
          <h3>四、除遗传外，还受到多种因素的影响</h3>
          <p >父母双方的遗传因素决定婴幼儿生长发育的轨道或特征，如皮肤和头发的颜色、面型特征、身材高矮、对疾病的敏感性等。环境因素也会影响生长发育，如长期慢性疾病会影响体重和身高的增长。家庭环境对婴幼儿的健康成长也是非常重要的。良好的居住环境，如阳光充足、空气新鲜、水源清洁、无噪声、居住条件舒适，配合良好的生活习惯、科学护理、良好教养、体育锻炼、完善的医疗保健设施等，是促进婴幼儿生长发育达到最佳状态的重要因素。</p>
          <div class="secondTitle"><h2>第三节 婴幼儿的心理行为特点</h2></div>
          <h3>一、婴幼儿心理的概念和发育基础</h3>
          <p >心理是大脑对客观现实的主观反映。婴幼儿心理行为的发展有赖于脑的发育。随着年龄的增加，大脑的重量不断增加，到6～7岁时基本接近成人，大脑各叶的分化逐渐形成；神经纤维增长，分支增多，神经之间的连接更加广泛；神经髓鞘不断发育，神经传递更加迅速、准确，神经系统的结构和功能日趋成熟，为心理行为的发育打下了良好基础。</p>
          <h3>二、婴幼儿的心理行为特点</h3>
          <p >婴幼儿心理各方面的发展相辅相成，共同提高，体现出其发展的平稳和协调，</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">11</div>
        </div>
      </div>
    </div>
    <!-- P12 -->
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -1">
        <div class="bodystyle">
          <p class="td-0">如语言发展和情绪、思维表达之间的相互促进作用。认识事物的过程是：先会看、听、感觉事物，逐渐发展到有记忆、思维、分析、判断。婴幼儿心理的各个方面都未发育成熟，未定型，具有可塑性，所以教师和家长要精心引导和培育，促进其心理的健康发展。</p>
          <p >婴幼儿高级神经活动的抑制过程不完善，兴奋过程易扩散，且常受外界情境和周围人的影响，所以自控力较差，容易出现注意力不集中，情绪易激动、不稳定，情感具有易变性和富有冲动性，甚至出现心理行为障碍，如儿童擦腿综合征。</p>
          <p >随着接触外界环境的增多，儿童口头语言的表达能力迅速发展起来，但由于所掌握的词汇量有限，对词意的理解不够准确，所以口语中常出现语病，还会表现出迟疑不决或反复，以致不能确切地表达自己的思想。</p>
          <p >由于环境、教育条件和遗传因素等的不同，婴幼儿的身心发展也存在个别差异，逐渐表现出性格、兴趣、能力等方面的个人特点，所以应该注意因材施教。</p>
          <p >总的来说，婴幼儿心理行为的发展是生理、心理和社会因素共同作用的结果。当然，对某一个婴幼儿来说，这三个因素并非均衡地发挥作用，它们的影响程度因人而异，因问题的性质不同而存在个体差异。</p>
          <div class="bgColor">
            <img class="img-0" alt="" src="../../assets/images/bgImage/001-02.jpg"/>
            <div class="content">
              <p class="center titleQuot">小 结</p>
              <p >婴幼儿不是缩小版的成人，具有其自身特殊的生理和心理行为特点。婴幼儿骨骼的韧性强而硬度小，发生骨折时常表现为青枝骨折，愈合速度较快。关节囊和关节周围的韧带未完全发育，受外力牵拉时容易发生脱臼造成牵拉肘，生活中应注意避免。婴幼儿气管腔比成人狭窄，缺乏弹性组织，黏膜纤毛运动能力弱，加上呼吸道抵抗力低，很容易发生呼吸道感染。婴幼儿的胃呈水平位，贲门较宽而松弛，且括约肌不够发达，所以容易呕吐。胃黏膜血管丰富，盐酸、各种酶分泌较成人少，且酶活性低下，消化功能差，所以容易发生消化不良。婴幼儿其余器官系统也各自具有与成人不同的特点。</p>
              <p >婴幼儿的生长发育有以下特点：连续性、非匀速性、阶段性；身体各系统和各部分生长不平衡；体格生长有个体差异；除遗传以外，还受到多种因素的影响。出生后，大脑的重量不断增加，到6～7岁时基本接近成人水平，心理各方面的发展相辅相成，共同提高。婴幼儿心理的发展是生理、心理和社会因素共同作用的结果，应注意精心引导和培育，促进婴幼儿的健康发展。</p>
            </div>
        </div>

        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">12</div>
        </div>
      </div>
    </div>
    <!-- P13 -->
    <div class="page-box" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
        <div class="bodystyle">
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/gjsy.jpg"/></p>
          <p >解剖生理　运动系统　呼吸系统　循环系统　泌尿系统　生长发育</p>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/skylx.jpg"/></p>
          <p >1．儿童健康发展领域的重要议程之一是儿童早期发展，这是指儿童体格、运动、语言、认知和社会情绪等领域的发展。2016年，中共中央、国务院印发并实施《“健康中国2030”规划纲要》，把儿童早期发展上升为国家战略。请判断下列行为是否正确，并说出理由：①给予婴幼儿积极的照护和回应，经常带领婴幼儿参加户外活动、集体活动，陪伴婴幼儿阅读、唱歌、讲故事等。②为了避免婴幼儿生病，让婴幼儿经常待在室内；在学前阶段让幼儿学习认字、算数等，促进其智力发育。</p>
          <textarea v-model="thinkAbout.one" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >2．婴幼儿的解剖生理特点与常见病之间有何联系？</p>
          <textarea v-model="thinkAbout.two" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/jyhd.jpg"/></p>
          <p >1．查找资料并绘制婴幼儿的解剖图，标注婴幼儿各器官系统的特点。</p>
          <textarea v-model="thinkAbout.three" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >2．婴幼儿期语言能力提升的方法有哪些？查找资料，设计一次有关促进婴幼儿语言发展的健康教育活动。</p>
          <textarea v-model="thinkAbout.four" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >3．根据婴幼儿的解剖生理特点，探讨婴幼儿意外伤害的预防措施。</p>
          <textarea v-model="thinkAbout.five" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/tzyd.jpg"/></p>
          <p >1．丁文龙、刘学政主编：《系统解剖学》，北京，人民卫生出版社，2018。本书详细介绍了人体各器官系统的解剖学特点，并配以详细的图谱，有助于更直观地理解解剖学知识。</p>
          <p >2．[奥]阿尔弗雷德·阿德勒：《儿童教育心理学》，张艳华译，北京，清华大学出版社，2017。本书主要围绕儿童如何形成正确健康的人格展开，强调用正确的方法培养儿童独立、勇敢、自信的品质。培养儿童健全的人格，才是儿童教育的首要任务。</p>

        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">13</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getResourcePath, uploadFilePath } from "@/assets/methods/resources";
import {
  getCollectResource,
  setCollectResource,
} from "@/assets/methods/resources";

import tool from "@/assets/js/toolClass.js";
export default {
  name: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
  },

  data() {
    return {
        thinkAbout: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
        },
    };
  },
  async mounted() {
    //项目自测及寻礼之问
    const bookQuestion = localStorage.getItem(
      "childIllnessPreventionCare-book-chapter02-question"
    );
    if (bookQuestion) {
      this.thinkAbout = JSON.parse(bookQuestion);
    }
  },
  methods: {
    setBookQuestion() {
      localStorage.setItem(
        "childIllnessPreventionCare-book-chapter02-question",
        JSON.stringify(this.thinkAbout)
      );
    },

  },
};
</script>
<style lang="less" scoped></style>

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

New file
@@ -0,0 +1,1085 @@
<template>
  <div class="chapter" num="4">
    <!-- P14 -->
    <div class="page-box" page="23">
      <div v-if="showPageList.indexOf(23) > -1">
        <div class="bodystyle">
          <div class="firstTitle-1"><h1 >第三章</h1></div>
          <div class="firstTitle-2"><h1 class="fz-h1">婴幼儿患病的早期迹象和常见症状的预防与护理</h1></div>
          <div><img class="img-0" alt="" src="../../assets/images/bgImage/fenge.png"/></div>
          <p class="mt-10"><img class="rwmb-1" alt="" src="../../assets/images/bgImage/xxmb.jpg"/></p>
          <p class="preface">☆掌握婴幼儿患病的早期迹象和常见症状的预防与护理技术。</p>
          <p class="preface">☆了解婴幼儿常见症状的临床表现。</p>
          <p class="preface">☆了解婴幼儿常见症状的病因。</p>
          <p class="preface">☆能利用所学知识及时发现婴幼儿患病，并能初步进行处理。</p>
          <p><img class="rwmb-1" alt="" src="../../assets/images/bgImage/swdt.jpg"/></p>
          <p class="center openImgBox">
            <img class="img-0" alt="" src="../../assets/images/0027-03.jpg" />
          </p>
        </div>
      </div>
    </div>
    <!-- P15 -->
    <div class="page-box" page="24">
      <div v-if="showPageList.indexOf(24) > -1">
        <div class="bodystyle">
          <p><img class="rwmb-1" alt="" src="../../assets/images/bgImage/dr.jpg"/></p>
          <p class="center preface">莉莉怎么了？</p>
          <p class="preface">中午，小朋友们在午睡，刘老师巡查时发现莉莉脸色发红，呼吸快、喘气声音粗，赶紧摸摸莉莉后背，发现她身上很热，莉莉到底怎么了？老师应该怎么护理呢？</p>
          <div class="secondTitle"><h2>第一节 婴幼儿患病的早期迹象</h2></div>
          <p >婴幼儿患病后，在日常生活的许多方面，如情绪、进食、玩耍、睡眠、大小便等，会出现异常反应。如发现婴幼儿有生病的迹象，应予以重视。若病情不重，可暂时在家或在幼儿园观察，给予适当处理。若病情持续不缓解或者加重，应及时去医院诊治。</p>
          <p >婴幼儿患病的早期迹象可从情绪和行为、精神和表情、食欲、颜面和皮肤、呼吸、睡眠、体温以及大小便的改变等进行观察和检查。</p>
          <h3>一、情绪和行为的改变</h3>
          <p >健康的婴幼儿精神饱满，双眼有神，不爱哭闹。如果婴幼儿烦躁不安、面色发红、口唇干燥，大多是发热的表现；如果婴幼儿目光呆滞、两眼发直、两手握拳，可能是抽搐的预兆；如果两腿屈曲，有阵发性哭闹、翻滚，可能是腹痛的表现；如果叫不醒、呕吐、脖子发硬，可能是脑炎的症状；如果睡眠时哭闹不止，时常摇头、抓耳，发热，可能是患了外耳道炎、湿疹或中耳炎。</p>
          <h3>二、精神和表情的改变</h3>
          <p >健康的婴幼儿活力四射，活泼好动，对周围环境和事物充满了兴趣；而患病后则会表现出没有精神，不爱动，不爱玩，疲倦嗜睡，或者烦躁不安、哭闹等精神方面的异常。健康的婴幼儿眼神灵活，声音洪亮，精神饱满；而患病后常常眼神呆滞，无神，有时会盯着一处看，有尖声哭闹等现象。</p>
          <h3>三、食欲的改变</h3>
          <p >若婴幼儿平时食欲很好，突然食欲不振，伴精神不佳，可能是出现发热，需要测量体温。腹胀、打嗝、放屁，且气味酸臭，可能是消化不良。拒食或食后哭闹，且口水多，可能是患了口腔疾病，如口腔溃疡或者疱疹性口腔炎。讨厌油腻食物，则要考虑病毒性肝炎。吃得多、喝得多、尿得多，但体重下降明显，同时皮肤经常</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">15</div>
        </div>
      </div>
    </div>

    <!-- P16 -->
    <div class="page-box" page="25">
      <div v-if="showPageList.indexOf(25) > -1">
        <div class="bodystyle">
          <p class="td-0">有感染，可能是糖尿病。颜面及口唇欠红润，可能是贫血，需要去医院化验血常规。食欲不好伴头发脱落、骨痛等，要考虑维生素A和维生素D摄入过量引起的中毒，这常常是家长盲目让婴幼儿超量服用鱼肝油所致。如果婴幼儿有爱吃墙皮、泥土、头发、纸张等异食癖症状，可能是肠道钩虫病或缺锌所致。</p>
          <h3>四、颜面和皮肤的改变</h3>
          <p >健康的婴幼儿面色红润，皮肤光滑、温暖、柔嫩、不干燥、不油腻，没有发红和破损，没有皮疹、肿块、瘀斑等表现，而且对冷热和触摸等刺激反应敏感。如果出现以下表现，提示可能患病。</p>
          <p >皮肤发白、发凉、多汗，可能是休克或虚脱等所致；面色苍白或发黄，翻开下眼睑也明显发白、缺少血色，多是贫血的表现。巩膜、皮肤及其他组织被染成黄色，常见于病毒性肝炎。婴幼儿剧烈活动后或兴奋激动时，可出现生理性面色发红、灼热的变化，休息后可恢复。如果持续发红，可能是高热或者一氧化碳中毒。皮肤和黏膜呈现青紫色改变，比如甲床、耳轮、鼻尖、口唇等处青紫，多见于严重支气管肺炎或者先天性心脏病。皮肤出汗多、潮湿，常见于结核病和佝偻病。皮肤有皮疹，多见于病毒和细菌感染性疾病，比如水痘、猩红热、手足口病等；或者过敏性疾病，比如荨麻疹、特应性皮炎等。眼结膜充血、黏膜发红、有分泌物，可能是结膜炎或者角膜炎。</p>
          <h3>五、呼吸的改变</h3>
          <p >健康的婴幼儿的呼吸平稳，面色红润。如果呼吸增粗、增快，面部发红，可能是发热的表现；张口呼吸，鼻音重，多是鼻塞的表现；呼吸急促、鼻翼扇动、口唇发青，提示可能患肺炎；呼吸困难、喉鸣、犬吠样咳嗽，可能是急性喉炎的表现；呼吸急促、口唇发青、四肢无力，提示可能是心脏方面的疾病；精神差、点头呼吸、呼吸费力、口唇发青，这是呼吸困难的表现，需要及时送医院。</p>
          <h3>六、睡眠的改变</h3>
          <p >健康的婴幼儿上床后很快入睡，睡得安稳，不打呼噜，身上可能会有微微出汗。如果入睡困难或睡眠不安、嗜睡，多提示疾病。睡前烦躁不安，睡后面色发红，呼吸急促，是发热的表现；睡眠不稳，伴鼻塞、咳嗽、呼吸喘憋，是肺炎的表现；入睡前用手抓肛门处，常是肛周有蛲虫的表现；睡后大汗淋漓，多是佝偻病的早期表现；嗜睡、不易叫醒，多提示脑部异常，可见于脑膜炎、脑炎的早期阶段；睡眠伴呼噜声，甚至出现呼吸暂停，是腺样体肥大的表现。</p>

        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">16</div>
        </div>
      </div>
    </div>
    <!-- P17-->
    <div class="page-box" page="26">
      <div v-if="showPageList.indexOf(26) > -1">
        <div class="bodystyle">
          <h3>七、体温的改变</h3>
          <p >人的体温主要受体温调节中枢的调控，使机体产热和散热过程保持动态平衡，保持体温在相对恒定的范围内。婴幼儿新陈代谢比成人相对旺盛，体温调节中枢尚未发育完善，正常体温较成人高，一般在36℃～37.4℃之间波动。正常体温在不同个体之间有略微差异，还受机体内外因素的影响而波动。个体自身在昼夜之间体温也有一定波动，下午体温较早晨稍高，饮食、哭闹、剧烈运动、穿衣过厚、室温过高、情绪波动等均可使体温暂时性升高，但一昼夜体温波动一般不超过1℃。</p>
          <p >婴幼儿体温的异常变化多是体温升高，即发热。发热会启动身体的免疫系统，可以帮助婴幼儿抵抗体内感染，是身体的保护机制之一。通常体温在38.5℃以下时，不用进行药物降温，可多喝水，注意休息。但如果精神不好，哭闹，脸色苍白发灰，甚至出现惊厥、四肢发凉、皮肤发花，体温持续在38.5℃以上，要及时送往医院治疗。</p>
          <h3>八、大便的改变</h3>
          <p >正常的大便性状和食物有关，一般为成形软便，呈黄褐色或者棕黄色，主要是食物残渣、脱落的肠黏膜细胞、细菌以及机体代谢废物和少量黏液。如果出现腹泻或便秘等不正常表现，说明婴幼儿身体出了问题。婴幼儿发生腹泻的原因应根据大便的性质进行判断：大便呈蛋花汤样、稀水样或白色米汤样，多数是病毒性肠炎；大便呈脓血便，多数是细菌性腹泻甚至细菌性痢疾；大便表面有鲜血，可能是痔疮或者肛裂；大便呈黑色柏油样，提示上消化道出血；大便呈红色果酱样，伴阵发性腹痛、呕吐，提示肠套叠；大便呈白陶土样，伴小便颜色深，提示胆道梗阻。大多数便秘是消化功能不成熟、排便行为习惯不好导致的，只要多吃高纤维的食品或蔬菜，养成定时排便习惯，便秘多数会消失。如果持续便秘，最好咨询医生，排除生病的可能。</p>
          <h3>九、小便的改变</h3>
          <p >正常的尿液清晰透明，淡黄至深黄色。尿量个体差异较大，与饮水量和食物的含水量、出汗量有很大关系。尿的颜色出现明显异常，排尿次数、尿量改变，往往提示相关疾病：如果尿色呈洗肉水样或者淡红色云雾状或混有血凝块，多见于急性肾炎、输尿管结石、泌尿系统感染等；如果尿色呈橘黄色或棕绿色，多见于肝胆疾病，或者口服一些药物如黄连素等所致；如果尿液呈棕黄色或浓茶色，有泡沫，且泡沫也发黄，多见于黄疸型肝炎；如果尿呈乳白色，内混有脓液，同时有尿急、尿</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">17</div>
        </div>

      </div>
    </div>
    <!-- P18 -->
    <div class="page-box" page="27">
      <div v-if="showPageList.indexOf(27) > -1">
        <div class="bodystyle">
          <p class="td-0">频、尿痛等，提示泌尿系统感染；如果尿量减少伴上眼睑水肿，尤其是晨起眼肿，常是肾脏疾病如肾病综合征的表现；如果尿量减少伴腹泻、皮肤干燥，提示脱水。如果少尿伴烦渴、多饮，多见于尿崩症。</p>
          <h3>十、疼痛</h3>
          <p >婴幼儿患病时，常会发生局部或全身不适，甚至出现疼痛，以腹痛、头痛多见。疼痛是一种主观感觉，年龄较大幼儿会诉说，但描述不清楚。婴幼儿虽然无法准确表述，但多会用行为表现出来，如头痛时会用手打头或频繁摇头；腹痛时会哭闹，不让大人触摸肚子。</p>
          <h3>十一、其他异常改变</h3>
          <p >淋巴结肿大；口腔异味，黏膜干燥、发红或出血、溃疡；舌头颜色改变；咽部发红，吞咽困难；扁桃体肿大、化脓；动耳朵时疼痛，脓液流出；鼻腔分泌物增多，有化脓性分泌物；等等。</p>
          <div class="secondTitle"><h2>第二节 婴幼儿常见症状的预防与护理</h2></div>
          <p >症状是指患儿主观上感受到不适或痛苦的异常感觉或某些客观病态感觉。症状是诊断疾病的依据，也是反映病情的重要指标。婴幼儿疾病症状多样，很多情况下会出现同病异症或异病同症。虽然疾病不同，但是同种症状在护理措施上有相似之处，称为对症护理。但是要真正消除症状，必须找到病因并针对病因进行治疗。婴幼儿常见症状及其护理如下。</p>
          <h3>一、发热</h3>
          <p >发热是指机体在各种原因的作用下，体温调节中枢的功能发生障碍，机体产热增加而散热减少，体温超过正常范围。发热对机体既有保护作用也有不利的一面。一方面，体温在一定范围内升高，能增强机体抗御能力，增强特异免疫反应。另一方面，高热对机体也有很多不良影响。例如，高热会使各种营养素的代谢增加，增加机体耗氧量。体温每升高1℃，基础代谢增加13%，过多的水分丧失可致脱水、电解质紊乱、心搏加快、心血管负担加重。高热还会增高颅内压，体温每上升1℃，颅内血流量增加8%，大脑皮层过度兴奋，会出现烦躁、头痛或高热惊厥，严重者可出现谵语、昏睡、昏迷、呕吐及脑水肿。</p>

        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">18</div>
        </div>
      </div>
    </div>
    <!-- P19 -->
    <div class="page-box" page="28">
      <div v-if="showPageList.indexOf(28) > -1">
        <div class="bodystyle">
          <div class="img-rights">
            <img class="img-0" alt="" src="../../assets/images/bgImage/bg7.jpg"/>
            <div class="content1">
              <p class="tsTitle">小贴士</p>
              <p class="tsContent">夏季低热：低热发生于夏季，秋凉后自行退热，每年如此反复出现，连续数年后多可自愈。多见于幼儿，因体温调节中枢功能不完善，夏季身体虚弱，且多发生于营养不良或脑发育不全者。</p>
            </div>
          </div>
          <h4>（一）发热的病因</h4>
          <p >发热的病因分为感染性与非感染性两大类，其中以感染性发热最常见。</p>
          <p >1．感染性发热</p>
          <p >各种病原体如细菌、病毒、支原体、真菌、寄生虫等引起急性或慢性感染，局部性或全身性感染均可引起发热。</p>
          
          <p >2．非感染性发热</p>
          <p >非感染性发热病情更复杂，诊断更加困难，常有以下原因：组织破坏或坏死，如大型手术后组织损伤、大面积烧伤等。变态反应性疾病，如风湿病、结缔组织病、药物热等。产热过多和（或）散热减少，如甲状腺功能亢进、严重脱水、失血过多、先天性汗腺缺乏症等。癫痫持续状态可引起发热，是产热过多所致。体温调节中枢功能失调，如中暑、脑震荡、脑出血等。自主神经功能紊乱，如感染治愈后仍有低热、夏季低热。血液病，如白血病、淋巴瘤、恶性组织细胞病等。生理性低热，如精神紧张、剧烈运动、哭闹后。</p>
          <h4>（二）发热的分度</h4>
          <p >以腋窝温度为准，水银温度计测量5～10分钟。低热：37.4℃～38.0℃。中等度热：38.1℃～39.0℃。高热：39.1℃～41.0℃。超高热：41.0℃以上。</p>
          <h4>（三）发热的过程和特点</h4>
          <p >发热一般分为以下三个阶段。</p>
          <p >1．体温上升期</p>
          <p >此期的特点是机体产热大于散热，导致体温上升。患儿常有疲乏无力、肌肉酸痛、皮肤苍白、无汗、怕冷或寒战等现象。产热和散热过程在较高水平上保持相对平衡。高热持续时间长短不一，如疟疾引起的高热可持续数小时，大叶性肺炎、流行性感冒引起的高热可持续数天。患儿常有皮肤发红伴灼热感，呼吸加快加深，畏寒、寒战消失。</p>
          <p >体温上升有两种形式。①骤升型：体温在数小时内达39℃甚至40℃以上，伴有寒战。易引起婴幼儿高热惊厥。常见于大叶性肺炎、败血症、流行性感冒等。②缓升型：体温逐渐上升，在数日内达到高峰，多不伴寒战。常见于结核病、伤寒等。</p>
          <p >2．体温下降期</p>
          <p >此期的特点是产热相对减少，散热大于产热，体温降至正常水平。患儿常有出</p>

        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">19</div>
        </div>
      </div>
    </div>
    <!-- P20 -->
    <div class="page-box" page="29">
      <div v-if="showPageList.indexOf(29) > -1">
        <div class="bodystyle">
          <p class="td-0">汗多、皮肤潮湿现象。因大量出汗体液丢失，若不及时补充水分容易出现血压下降、脉搏细速、四肢发冷等虚脱或休克现象。</p>
          <p >体温下降也有两种形式。①骤降型：体温在数小时内迅速下降至正常，有时可略低于正常，常伴有大汗淋漓。常见于疟疾、大叶性肺炎等。②渐降型：体温在数天内逐渐降至正常。常见于伤寒、风湿热等。</p>
          <h4>（四）发热的伴随症状</h4>
          <p >伴寒战，见于大叶性肺炎、败血症、疟疾、流行性脑脊髓膜炎等。伴结膜充血，见于结膜炎、麻疹、流行性出血热等。伴淋巴结肿大，见于传染性单核细胞增多症、淋巴瘤等。伴肝脾肿大，见于传染性单核细胞增多症、白血病、病毒性肝炎、结缔组织病等。伴出血，见于重症感染、病毒性肝炎、败血症等。伴关节肿痛，见于败血症、猩红热、风湿热等。伴皮疹，见于麻疹、水痘、猩红热等。伴昏迷，见于中暑、中毒性菌痢、流行性乙型脑炎等。</p>
          <h4>（五）发热的护理</h4>
          <p >发热，尤其是高热对婴幼儿机体有着很大的影响，可使心跳加快，代谢增加，耗氧量也直线上升；使大脑过度兴奋，产生烦躁、惊厥，也可过度抑制引起昏睡、昏迷；还可使消化道消化液分泌减少，消化酶活力降低，胃肠运动减慢，而致食欲不振、腹胀、便秘等症状出现。所以，当婴幼儿发热时，要从以下几方面进行护理。</p>
          <p >1．定时测量体温</p>
          <p >一般每4小时测一次。如是40℃以上超高热，或有高热惊厥史及其他特殊情况，需每1～2小时测量一次体温。若给予退热处理，应观察有无体温骤降，可在1小时后测体温，以观察体温动态变化。如发现体温显著下降，且有大量出汗、全身无力等现象，大多是退热过度引起虚脱。此时，应注意给患儿多饮温水，必要时需到医院静脉补液。连续发热2周以上时，需定时（一般早、中、晚各一次）测量体温，并做好记录，供医生参考。此外尚需仔细观察有无其他症状，如咳嗽、呕吐、腹泻等。</p>
          <p >2．适时降温</p>
          <p >发热是机体抵抗疾病的防御功能之一。因此，不必对所有发热都给予对症处理。当高热对机体可能产生不良影响或既往有高热惊厥史者，应及时给予降温处理。一般38℃左右的发热，婴幼儿精神良好，无其他异常症状，可不必处理。但如超过38℃，且持续不退热，需降温处理。降温的方法有以下几种。</p>
          <p >（1）物理降温</p>
          <p >可根据情况选用冰袋、冰湿敷、温水擦浴三种方法，详见“发热的护理操作技术”。</p>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">20</div>
        </div>
      </div>
    </div>
    <!-- P21 -->
    <div class="page-box" page="30">
      <div v-if="showPageList.indexOf(30) > -1">
        <div class="bodystyle">
          <p >（2）药物降温</p>
          <p >世界卫生组织推荐的适合婴幼儿口服的退热药是布洛芬和对乙酰氨基酚。服用退热药后如高热不退，6小时后可重复使用退热药物。但是要注意剂量，以防过量引起出汗过多导致虚脱。</p>
          <p >3．居室环境</p>
          <p >将患儿安排在舒适、安静、温湿度适宜、通风良好的环境中休息，注意不要让对流风直接吹到患儿身上。定时开窗通风，保持室内空气新鲜。</p>
          <p >4．衣物</p>
          <p >不要过多包裹，以免影响散热，引起体温再度升高而发生惊厥。及时更换汗湿的衣服和被褥，保持皮肤清洁。</p>
          <p >5．饮食</p>
          <p >发热期间尽量给患儿吃一些清淡容易消化的食物，少吃或尽量不吃油腻食品和含糖量较高的食品，蔬菜汤、水果、果汁等含水分较多的食品应适当补充。</p>
          <p >6．休息</p>
          <p >发热时机体消耗较大，所以要注意休息，酌情减少活动，避免剧烈运动，高热患儿要卧床休息。</p>
          <p >7．补充水分</p>
          <p >发热时体内的水分散发，尤其是服退热药后发汗过多，会造成体内水分损失。所以应多饮温开水并加少量食盐，既可补充水分，又使小便增多，促进体温下降。</p>
          <p >8．口腔护理</p>
          <p >高热时患儿唾液分泌减少，舌及口腔黏膜干燥，有利于细菌的生长繁殖，应在吃饭前后及晨起给患儿喝水或漱口，口唇干燥的涂唇油保护。</p>
          <p >9．心理护理</p>
          <p >若患儿出现哭闹不安、紧张焦虑或恐惧，应让其表达情感，给予精神安抚，缓解不良情绪。</p>
          <p >10．观察病情</p>
          <p >在护理过程中应注意观察患儿的发热程度、伴随症状及体征、治疗效果，以及饮水量、进食量、尿量的变化。对高热患儿要观察有无惊厥，并给予相应护理。</p>
          <h4>（六）发热的护理操作技术</h4>
          <p >1．物理降温</p>
          <p >①冰袋：将冰袋放在前额、腋窝、肘窝、腹股沟等大动脉经过之处，每次放置</p>          
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">21</div>
        </div>
      </div>
    </div>
    <!-- P22 -->
    <div class="page-box" page="31">
      <div v-if="showPageList.indexOf(31) > -1">
        <div class="bodystyle">
          <p class="td-0">时间不超过30分钟。应注意冰袋不能与患儿皮肤直接接触，应套有布套或包裹干毛巾，以免温度过低引起患儿不适。</p>
          <p >②冰湿敷：将小毛巾放入冷水中浸润，取出后拧至半干，以不滴水为度，抖开并折叠呈适宜大小敷于患儿额头，每5分钟左右更换一次，持续15～20分钟。</p>
          <p >③温水擦浴：温水擦浴属于全身降温。将小毛巾放入32℃～34℃温水中浸湿后取出拧至半干，包裹在手上成手套状，擦拭大血管经过的部位，如前颈部、腋窝、腹股沟等处。擦拭过程中，不要过度暴露患儿的身体，要注意保暖；每擦拭完一处都要用干毛巾及时擦干皮肤。</p>
          <p >注意事项：冷敷时注意观察病情，若患儿出现寒战、面色苍白等不适，要立即停止降温措施，采取喝热水、增加盖被等方法给患儿保暖。</p>
          <div class="video-box">
              <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="img-0"></video>
            <p class="center videoname">
              <span>视频3-1发热的护理操作技术-物理降温</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == 'BA4D51803E69D87866C622349C51F122'
                ) > -1
                    ? collectCheck
                    : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-01')" />
              </el-tooltip>
            </p>
          </div>
          <p >2．测量生命体征</p>
          <p >生命体征包括体温、呼吸、脉搏、血压，其中测量体温、脉搏、呼吸最常用。生命体征是观察身心状况的可靠指标，但是需要注意的是，剧烈运动、紧张、恐惧、进食、喝冷热饮、洗浴以及哭闹时，这些指标都会发生变化。存在上述情况时先不测量，待30分钟后再测量。</p>
          <p >（1）测量体温</p>
          <p >使用水银温度计测量体温的步骤如下。</p>
          <p >①先看体温计的水银柱是否在35℃刻度线以下。查看度数的方法是：拿住温度计的玻璃端，使温度计与自己的视线平行，轻轻转动温度计，读出水银柱所指度数。如果水银柱在35℃刻度线以上，就用一只手捏住玻璃端向下、向外甩几下，使水银温度计水银柱降至35℃刻度线以下。</p>
          <p >②测量体温的部位有口腔、直肠和腋窝。常采用测量腋窝温度这种安全卫生的方法。测量时，先擦去患儿腋窝的汗液，再将温度计的水银球部放置于腋窝中间，体温计紧贴皮肤，让患儿弯曲手臂夹紧，大人在旁边扶着患儿胳膊以夹紧。</p>
          <p >③测量5分钟后取出读数。</p>
          <p >用电子体温计测量时，先开启电源键，将探头放在测温部位，待电子蜂鸣器发出蜂鸣音后再保持3秒，显示屏上出现体温数据。</p>
          <p >（2）测量脉搏</p>
          <p >脉搏是动脉管壁随着心脏的收缩和舒张而出现的周期性的起伏搏动，身体上比</p>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">22</div>
        </div>
      </div>
    </div>
    <!-- P23 -->
    <div class="page-box" page="32">
      <div v-if="showPageList.indexOf(32) > -1">
        <div class="bodystyle">
          <p class="td-0">较浅且靠近骨骼处的动脉都可作为测量脉搏的部位。桡动脉位于手腕拇指侧，腕横线上方2～3cm处，因测量方便最常选用。测量时，让患儿手腕伸展，手臂放于舒适位置；测量者用食指、中指、无名指的指端按压在桡动脉上测量1分钟的脉搏数，按压力量适中，能清楚测得脉搏搏动即可。1～3岁幼儿的正常脉搏数为100～120次/分，4～7岁幼儿为80～100次/分。</p>
          <p >（3）测量呼吸</p>
          <p >观察患儿胸腹部的起伏，一起一伏为1次呼吸，同时观察呼吸节律和深度、声音有无异常，计数1分钟。正常呼吸频率是：小于1岁婴儿为30～40次/分，1～3岁幼儿为25～30次/分；4～7岁幼儿为20～25次/分。若患儿呼吸微弱不易准确测量，可将棉线放在其鼻孔处观察棉线被气流吹动的次数。由于呼吸受意识的控制，所以测量时不要让患儿观察到，可以在测量脉搏后仍然保持测脉姿势，同时测量呼吸。</p>
          <div class="video-box">
              <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="img-0"></video>
            <p class="center videoname">
              <span>视频3-2测量生命体征</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo2 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '210D956D2882EB43DF26A9549F20AA1A'
                ) > -1
                    ? collectCheck
                    : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-02')" />
              </el-tooltip>
            </p>
          </div>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/al.jpg"/></p>
          <p class="center main-color block3">脸红的乐乐</p>
          <p class="block3">上午9：30，李老师发现，和平时相比，乐乐表现不活泼，坐在椅子上明显不爱动，也不说话。李老师拿来乐乐喜欢的玩具，她也不感兴趣。李老师马上用手摸了一下孩子的额头，感觉不热，检查了一下她的双手、口腔和身上的皮肤，没有发现皮疹。但是，李老师还是给她量了体温，36.6℃。午睡的时候，李老师特意来看乐乐，发现她的面颊很红，呼吸也变快了。李老师赶忙再次给乐乐量了体温，39.5℃！呼吸36次/分，脉搏138次/分！</p>
          <p class="block3">李老师联系家长后，把乐乐带到了保健室。保健医检查发现乐乐的喉咙有点红，其他没有什么异常。于是，在保健医的指导下，李老师就把乐乐的厚外套脱下来（发热的婴幼儿穿衣服不宜过厚，否则会影响散热，导致体温难以下降），让她舒适地躺在观察床上休息；接着，让乐乐少量多次喝水补充水分，用温水打湿毛巾，擦拭她的额头、脖子、前胸、后背，还把乐乐的袜子脱掉，把乐乐的双脚泡在温水里，力图降温；同时立即与家长联系，并不断地观察着乐乐的病情变化，做好常见病登记。</p>
          <p class="block3">终于，在李老师的正确护理下，乐乐的体温慢慢降到了38℃，呼吸、脉搏也没有原来那么快了。等乐乐家长到幼儿园后，李老师把乐乐的“常见病登记本”拿给其家长看，并简单说了乐乐的情况。家长非常感谢李老师和幼儿园的精心照顾。</p>
          <p class="block3">发热是婴幼儿常见的症状，容易突然起病，部分患儿有发生高热惊厥的可能。生活中应掌握婴幼儿发热的定义、分度、原因、物理降温等知识，以便正确应对。</p>

        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">23</div>
        </div>
      </div>
    </div>
    <!-- P24 -->
    <div class="page-box" page="33">
      <div v-if="showPageList.indexOf(33) > -1">
        <div class="bodystyle">
          <h3>二、哭闹</h3>
          <p >哭闹是婴幼儿对来自体内或体外的不良刺激引起身体不适的一种表达。由于婴幼儿语言表达能力弱，所以哭是其表达要求或痛苦的一种方式。</p>
          <h4>（一）哭闹的病因</h4>
          <p >1．生理性哭闹</p>
          <p >生理性哭闹最常见的原因是饥饿和口渴，还有情绪变化、冷热不当、潮湿、体位不当、受惊吓、衣服太紧、被褥过重、睡眠不足、蚊虫叮咬、锐物刺激、排便前的肠蠕动加剧、排尿前的下腹部胀感等。</p>
          <p >2．病理性哭闹</p>
          <p >任何疾病所导致的身体上的不适都会引起婴幼儿哭闹，如活动期维生素D缺乏性佝偻病、营养不良、胃肠炎、肠套叠、肠扭转、肠痉挛、鼻塞、呼吸道异物或炎症、智能发育障碍、泌尿系统感染、中耳炎、臀部糜烂、过敏性皮肤病等。</p>
          <h4>（二）哭闹的表现</h4>
          <div class="img-rights">
            <img class="img-0" alt="" src="../../assets/images/bgImage/bg7.jpg"/>
            <div class="content1">
              <p class="tsTitle">小贴士</p>
              <p class="tsContent">18-三体综合征是一种常见的染色体异常，表现为生长延迟、严重智力落后、多器官系统畸形、眼距宽、白内障等，预后极差。对此，孕前或孕产期应做好遗传咨询和产前诊断。</p>
            </div>
          </div>
          <p >1．哭闹的性质</p>
          <p >哭声忽高忽低多为要挟性哭闹。突然剧烈哭闹、不好安抚，应注意肠套叠、肠痉挛、泌尿系统结石、锐物刺入等。哭闹声音尖、哭声发直，要注意颅内出血、脑膜炎等原因引起的颅内压增高。哭声单调，哭时没有悲伤感，要注意脑发育障碍。有些特殊的哭声提示染色体疾病，如18-三体综合征的哭声似猫叫。哭声嘶哑见于喉炎、喉头水肿、白喉等。哭声低弱或呻吟提示婴幼儿病情较重。</p>
          <p >2．哭闹的发生和持续时间</p>
          <p >生理性哭闹一般持续时间不长，强度不大，在满足婴幼儿要求，去除影响因素或分散其注意力后即可停止哭闹，并活泼如常；疾病造成的哭闹呈持续性或反复性，不能用安慰或者食物等方法终止。</p>
          <p >进食前或午夜后哭闹可能是由于饥饿。进食时哭闹注意口腔有无溃疡、口腔炎或鼻塞；先天性心脏病、肺部疾病或贫血婴幼儿因缺氧导致进食受影响而哭闹。夜间哭闹应注意饥饿、衣被不当、冷热不当、活动期佝偻病、蛲虫病等可能。排便、排尿时哭闹应注意有无结肠炎、膀胱炎、尿道炎、痔疮、肛裂、消化道或泌尿系统畸形等。哭闹时不断摇头并抓扯耳部，应注意有无中耳炎或外耳道疖等。卧位时安静，但在抱起或触到肢体时哭闹，应考虑肢体有无受伤，如骨折、脱臼等。</p>

        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">24</div>
        </div>
      </div>
    </div>
    <!-- P25 -->
    <div class="page-box" page="34">
      <div v-if="showPageList.indexOf(34) > -1">
        <div class="bodystyle">
          <h4>（三）哭闹的护理和预防</h4>
          <p >1．环境</p>
          <p >保持周围环境安静，空气流通，温度及湿度适宜，使婴幼儿感到舒适。</p>
          <p >2．去除原因</p>
          <p >针对不同的原因，尤其是生理性哭闹，给予舒适的护理，如进食、睡眠、听音乐等，使婴幼儿养成规律生活的习惯。</p>
          <p >3．观察病情</p>
          <p >注意观察哭闹的声调、持续时间、特点及伴随症状，如果排除了生理性因素，婴幼儿仍然持续哭闹，多是疾病引起，应及时送至医院，以便及时诊治。</p>
          <p >4．健康指导</p>
          <p >指导家长给予婴幼儿合理的生活护理，同时注意良好性格和行为的培养，纠正各种不良习惯，如要挟性哭闹，不要无原则地溺爱婴幼儿。</p>
          <h3>三、咳嗽</h3>
          <p >咳嗽本身不是一种疾病，而是某种疾病或不适的症状表现。咳嗽是一种突然的爆发性呼吸运动，是一种保护性反射。通过咳嗽可以清除呼吸道分泌物及异物。痰是气管、支气管的分泌物或肺泡内的渗出液，借助咳嗽可将其排出。咳嗽对机体既有保护作用也有不利的一面，如在公共场合咳嗽可使呼吸道感染扩散；如果长期剧烈咳嗽，就会影响睡眠和生活质量，甚至导致呼吸道出血，使胸内压增高，增加心脏负荷。</p>
          <h4>（一）咳嗽的常见原因</h4>
          <p >1．呼吸道疾病</p>
          <p >呼吸道感染是引起咳嗽最常见的原因。</p>
          <p >2．胸膜疾病</p>
          <p >各种原因导致的胸膜炎、气胸等刺激胸膜，引起刺激性咳嗽。</p>
          <p >3．心血管疾病</p>
          <p >心脏瓣膜病变，如二尖瓣狭窄或其他原因引起肺淤血或者肺水肿时，因肺泡及支气管内有渗出物，可引起咳嗽。</p>
          <p >4．中枢神经因素</p>
          <p >从大脑皮质发出冲动传至延髓咳嗽中枢，人可随意引发咳嗽或抑制咳嗽反射，脑炎、脑膜炎时也可出现咳嗽。</p>
          <p >5．其他因素所致慢性咳嗽</p>
          <p >胃食管反流所致咳嗽、习惯性及心理性咳嗽等。</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">25</div>
        </div>
      </div>
    </div>
    <!-- P26 -->
    <div class="page-box" page="35">
      <div v-if="showPageList.indexOf(35) > -1">
        <div class="bodystyle">
          <h4>（二）咳嗽的常见表现</h4>
          <p >1．发病方式和病程</p>
          <p >呼吸道异物多引起突发性咳嗽，慢性呼吸道感染的咳嗽起病缓慢，病程迁延。呼吸道或肺部急性感染的咳嗽常持续在2周之内，而支气管扩张、肺结核的咳嗽病程较长。</p>
          <p >2．咳嗽的性质</p>
          <p >干性咳嗽无痰或痰量极少，常见于急慢性咽喉炎、急性支气管炎初期、支气管异物等；湿性咳嗽有咳痰，常见于慢性支气管炎、肺炎等。</p>
          <p >3．咳嗽的时间与规律</p>
          <p >吸入刺激性气体或异物引起突发性咳嗽；百日咳、支气管哮喘多为晨起发作性咳嗽；左心衰竭、咳嗽变异性哮喘多为夜间咳嗽；肺结核为长期慢性咳嗽。</p>
          <p >4．咳嗽的声音特点</p>
          <p >咳嗽声音嘶哑多见于过度用嗓导致的声带炎症、息肉压迫喉返神经、感染性喉炎。鸡鸣样咳嗽多见于百日咳，会厌、喉部疾病或气管受压，表现为连续性阵发性剧咳伴有高调吸气回声。金属音咳嗽常见于纵隔肿瘤等占位性病变压迫气管所致。咳嗽声音低微或无力见于声带麻痹和极度衰弱者。</p>
          <p >5．咳嗽的伴随症状</p>
          <p >伴发热者多见于急性呼吸道感染、肺结核、胸膜炎等。伴胸痛多见于肺炎、胸膜炎、自发性气胸等。伴呼吸困难多见于喉头水肿、支气管哮喘、重症肺炎、肺结核、气胸、气管或支气管异物、肺水肿等。伴咯血多见于支气管扩张、肺结核、肺脓肿等。伴脓痰多见于细菌性呼吸道感染、支气管扩张、肺脓肿、支气管胸膜瘘等。伴哮鸣音多见于支气管哮喘、支气管异物、毛细支气管炎等。伴杵状指（趾）多见于支气管扩张、先天性心脏病、脓胸等。</p>
          <h4>（三）咳嗽的护理和预防</h4>
          <p >1．日常护理</p>
          <p >对于容易生病咳嗽的婴幼儿，应教育其注意手卫生，加强锻炼，增加抵抗力。同时，预防和治疗相关疾病，如营养不良、贫血及佝偻病。老师和家长应关注天气变化，及时为婴幼儿增减衣物。</p>
          <p >2．环境</p>
          <p >保持室内空气清洁、温湿度适宜。避免婴幼儿吸入过敏原和刺激性气体如烟草味、油烟味，避免被动吸烟，打扫卫生尽量不要让灰尘飞扬。平时多开窗通风，保持房间空气流通、湿润，特别是冬季有暖气或空调的房间。</p>

        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">26</div>
        </div>
      </div>
    </div>
    <!-- P27 -->
    <div class="page-box" page="36">
      <div v-if="showPageList.indexOf(36) > -1">
        <div class="bodystyle">
          <p >3．饮食均衡</p>
          <p >呼吸道感染时吃清淡易消化的食物，避免油腻食物或刺激性食物，如过甜、过咸、过辣的食物。多喝水，有利于稀释痰液并排出。</p>
          <p >4．注意休息</p>
          <p >保证充足的睡眠休息，鼓励患儿多休息，天气好时可适当户外活动，但要避免过量运动，尤其咳嗽厉害时不宜剧烈运动和玩耍。若患儿睡眠时咳嗽，或感到呼吸有些困难，可让其侧卧，用毛巾或枕头将头部及上半身垫高，这样既可以防止呼吸道分泌物反流到气管引起咳嗽而影响睡眠，也可使患儿感到舒服，缓解呼吸困难。</p>
          <p >5．促进痰液排出</p>
          <p >年龄较小的患儿往往不会有效咳痰，所以老师和家长应该进行指导，必要时采用有效咳嗽和叩击两种方法促进患儿排痰。</p>
          <p >6．观察病情</p>
          <p >注意观察患儿面色、呼吸等情况。如果咳嗽加重或长期咳嗽，特别是有呼吸困难、口唇发绀时应及时就诊，以免延误治疗时机。</p>
          <h4>（四）咳嗽的护理技术</h4>
          <p >1．有效咳嗽方法</p>
          <p >大人在旁边指导、协助。患儿取坐位或半坐位，屈膝，上身向前倾，双手抱膝或环抱一个枕头，两臂夹紧，进行数次深而缓慢的呼吸。深吸气后屏气3～5秒，进行2～3次咳嗽，然后腹部用力及两手抱紧膝部或枕头，用力做爆破性咳嗽将痰咳出。</p>
          <p >2．叩击</p>
          <p >用手叩击患儿胸背部，借助振动使呼吸道的分泌物松脱而排出体外。</p>
          <p >（1）方法：让患儿俯卧于床上，头偏向一侧。大人五指并拢，手背隆起，手掌中空呈杯状，以手腕力量，从肺底自下向上、由外到内，迅速而有节奏地轻轻叩击背部，应听到空空的叩击声，而不是啪啪的拍打声。边叩击边鼓励患儿咳嗽。每天叩击数次，每次叩击10～15分钟。操作后让患儿休息，协助做好口腔清洁，祛除痰液。</p>
          <p >（2）注意事项：叩击力量要适宜，以不引起患儿疼痛为宜；叩击时避开纽扣、拉链；不可直接在裸露的皮肤上叩击，可用薄布或干毛巾保护皮肤；叩击时间宜在餐后2小时至餐前30分钟，以免导致呕吐。</p>
          <div class="video-box">
              <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="img-0"></video>
            <p class="center videoname">
              <span>视频3-3 咳嗽的护理技术</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo3 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '9A7B869CEC090D9933BF0D915E3D0731'
                ) > -1
                    ? collectCheck
                    : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-03')" />
              </el-tooltip>
            </p>
          </div>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">27</div>
        </div>
      </div>
    </div>
    <!-- P28 -->
    <div class="page-box" page="37">
      <div v-if="showPageList.indexOf(37) > -1">
        <div class="bodystyle">
          <h3>四、头痛</h3>
          <p >头痛通常是指局限于头颅上半部，包括前额、头顶、两侧颞部及后枕部的疼痛，以偏头痛最常见。头痛发生的原因诸多，反复发作或持续性的头痛，可能是某些器质性疾病的信号，有些甚至是致命疾患，要引起重视。</p>
          <h4>（一）头痛的病因</h4>
          <p >1．颅脑病变</p>
          <p >感染：如脑膜炎、脑炎、脑脓肿等。血管病变：如蛛网膜下腔出血、脑出血、高血压脑病、脑血管畸形等。占位性病变：如脑肿瘤、脑囊虫病等。颅脑外伤：如硬膜下血肿、颅内血肿等。其他：如腰椎穿刺术后及腰椎麻醉后头痛等。</p>
          <p >2．颅外病变</p>
          <p >颅骨病变：如颅底凹陷症、颅骨肿瘤等。颈部病变：如颈椎畸形等。神经痛：如三叉神经痛等。其他：如眼、耳、鼻和牙齿等疾病所致的头痛。</p>
          <p >3．全身性疾病</p>
          <p >急性感染：如流感、伤寒、肺炎等发热性疾病。心血管疾病：如高血压、心力衰竭等。中毒：如铅、一氧化碳、有机磷、药物等中毒。其他：如尿毒症、低血糖、贫血、中暑等。</p>
          <p >4．精神心理因素</p>
          <p >如抑郁、焦虑等。</p>
          <h4>（二）头痛的表现</h4>
          <p >1．发病情况</p>
          <p >急性起病并有发热者多为感染性疾病所致。持续的急剧头痛，并有不同程度的意识障碍而无发热者，提示颅内血管病变，如蛛网膜下腔出血。慢性进行性头痛并有颅内压增高的表现，要注意颅内占位性病变（如颅内肿瘤）。长期的间歇性头痛，发作时有抽搐，有可能是癫痫。</p>
          <p >2．头痛部位</p>
          <p >了解头痛部位是单侧、双侧、前额或枕部，局部或弥散，颅内或颅外，对病因的判断有重要价值。全身性或颅内感染性疾病的头痛，多为全头部痛。眼部疾病引起的头痛仅限于眼眶、前额或颞部。鼻源性或牙源性头痛多为浅表性头痛。</p>
          <p >3．头痛的程度和性质</p>
          <p >头痛的程度一般分为轻、中、重三种，但与病情的轻重并无平行关系。头痛的性质可为胀痛、跳痛、钻痛、开裂样痛、针扎样痛、刀割样痛或隐痛。脑膜刺激的疼痛非常剧烈。血管性痛或发热性疾病的头痛，表现为搏动性头痛。神经痛多表现</p>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">28</div>
        </div>
      </div>
    </div>
    <!-- P29 -->
    <div class="page-box" page="38">
      <div v-if="showPageList.indexOf(38) > -1">
        <div class="bodystyle">
          <p class="td-0">为持续数秒至数十秒的刺激或电击样痛。紧张性头痛多为重压感、紧箍感或戴帽感等非搏动性疼痛。</p>
          <p >4．头痛出现的时间与持续时间</p>
          <p >某些头痛可发生在特定时间，如鼻窦炎的头痛常发生于清晨或上午，丛集性头痛常在晚上发生，颅内占位性病变往往清晨加剧。脑肿瘤的头痛多为持续性，可有长短不等的缓解期。</p>
          <h4>（三）头痛的伴随症状</h4>
          <p >头痛伴剧烈呕吐多见于颅内压增高。头痛在呕吐后减轻者多见于偏头痛。头痛伴眩晕见于小脑肿瘤、椎-基底动脉供血不足等。头痛伴发热见于感染性疾病，包括颅内感染或全身性感染。慢性头痛突然加剧并有意识障碍，提示可能发生脑疝。头痛伴视力障碍可见于脑肿瘤或青光眼。头痛伴脑膜刺激征提示有脑膜炎或蛛网膜下腔出血。头痛伴癫痫发作可见于脑血管畸形、脑肿瘤等。</p>
          <h4>（四）头痛的护理</h4>
          <p >头痛发作时，注意安抚患儿，减轻精神压力，缓解紧张情绪。减少刺激，宜将患儿安排在光线较暗、安静的房间内休息。如果出现呕吐，应及时清除呕吐物，取侧卧位或头偏向一侧，防止呕吐物被误吸入肺部。可视病情给予清淡易消化饮食，呕吐剧烈者或意识障碍者禁食、禁水。不可擅自给患儿使用止痛药，以免掩盖病情，造成入院后医生诊断困难。注意观察病情，及时就医。如果婴幼儿经常有头痛的现象，且每次发作的情形与以往一样，那么可以让其多休息，仔细观察头痛的变化。若头痛为首次发作，排除精神性因素后，仍不缓解或有加重，要及时去医院诊治。</p>
          <h4>（五）头痛的预防</h4>
          <p >合理安排婴幼儿的作息时间，生活要有规律，保证充足的睡眠时间。及时治疗能引起头痛的慢性疾病，如慢性鼻炎、鼻窦炎、中耳炎、眼屈光不正等。</p>
          <h3>五、呕吐</h3>
          <p >呕吐是婴幼儿常见的一种症状，是指通过胃的强烈收缩使胃或部分小肠的内容物经食管、口腔而排出体外的现象。严重的呕吐易引起呼吸暂停甚至窒息而出现发绀；若处理不当，可能出现误吸，继发呼吸道感染。</p>
          <h4>（一）呕吐的病因</h4>
          <p >引起呕吐的病因很多，常见的有以下几种。</p>
          <p >1．反射性呕吐</p>
          <p >咽部受到刺激：如剧烈咳嗽、鼻咽部炎症等。胃十二指肠疾病：急慢性胃炎、</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">29</div>
        </div>
      </div>
    </div>
    <!-- P30 -->
    <div class="page-box" page="39">
      <div v-if="showPageList.indexOf(39) > -1">
        <div class="bodystyle">
          <p class="td-0">消化性溃疡、功能性消化不良、幽门梗阻等。肠道疾病：急性阑尾炎、各种肠梗阻、急性出血坏死性肠炎、腹型过敏性紫癜等。肝胆胰疾病：急性肝炎、胆囊炎等。腹膜及肠系膜疾病：如急性腹膜炎。其他疾病：急性肾盂肾炎、心力衰竭等。</p>
          <p >2．中枢性呕吐</p>
          <p >神经系统疾病：脑炎、脑膜炎、脑出血、颅内血肿、蛛网膜下腔出血、癫痫等。全身性疾病：肾输尿管结石、肾上腺皮质功能不全等。中毒：重金属、一氧化碳、有机磷农药、鼠药中毒等。精神因素：胃神经官能症、神经性厌食等。</p>
          <h4>（二）呕吐的表现</h4>
          <p >1．呕吐的发生时间</p>
          <p >晚上或夜间呕吐见于幽门梗阻。晨起呕吐见于鼻窦炎或消化不良。</p>
          <p >2．呕吐与进食的关系</p>
          <p >进食过程中或进食后即刻呕吐见于幽门管溃疡或精神性呕吐。餐后1小时以上呕吐提示胃排空延迟。餐后较久或数餐后呕吐见于幽门梗阻。餐后近期呕吐，有群体发病，多见于食物中毒。</p>
          <p >3．呕吐的特点</p>
          <p >喷射性呕吐多为颅内高压性疾病。长期反复发作呕吐伴营养不良的多为精神性呕吐。</p>
          <p >4．呕吐物的性质</p>
          <p >呕吐物带发酵、腐败气味提示胃潴留。带粪臭味提示低位小肠梗阻。不含胆汁说明梗阻平面多在十二指肠乳头以上，含多量胆汁提示梗阻平面在十二指肠乳头以下。无酸味可能是胃贲门狭窄或贲门失弛缓症。</p>
          <h4>（三）呕吐的伴随症状</h4>
          <div class="img-rights">
            <img class="img-0" alt="" src="../../assets/images/bgImage/bg6.jpg"/>
            <div class="content1">
              <p class="tsTitle">小贴士</p>
              <p class="tsContent">婴幼儿出现呕吐，很多人会直接考虑到肠胃问题。实际上，呕吐原因众多，呼吸道感染、颅内感染、阿奇霉素副作用等均可造成婴幼儿呕吐。发现婴幼儿呕吐时，一定要注意呕吐发生的时间、与进食的关系、伴随症状等，及时、正确处理。</p>
            </div>
          </div>
          <p >伴腹痛、腹泻见于急性胃肠炎、细菌性食物中毒及其他原因引起的食物中毒。伴头痛及喷射性呕吐常见于颅内高压症。</p>
          <h4>（四）呕吐的护理</h4>
          <p >1．维持呼吸道畅通</p>
          <p >患儿呕吐厉害时，呕吐物可能从鼻腔喷出，应立即将鼻腔中的异物清除，保持呼吸道畅通。若呕吐发生在直立或卧床时，可以先让患儿身体向前倾或维持侧卧的姿势，让呕吐物易于流出，以免造成窒息或吸入性肺炎。</p>

        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">30</div>
        </div>
      </div>
    </div>
    <!-- P31 -->
    <div class="page-box" page="40">
      <div v-if="showPageList.indexOf(40) > -1">
        <div class="bodystyle">
          <p >2．保持口腔清洁</p>
          <p >呕吐之后，会有一些胃酸及未消化的食物残留在口腔中，难闻的味道会使患儿不适而更容易引发呕吐。对于较小的婴幼儿，可以湿纱布蘸温水帮助来清洁口腔。对于能配合的幼儿，可以用温开水漱口，以保持口腔清洁。</p>
          <p >3．短暂禁食</p>
          <p >如果呕吐后立刻进食，易导致反复呕吐。呕吐后应先暂时禁食，包括温水、牛奶等。可用棉花棒蘸水湿润口腔。当症状改善时再给予少量多次的温水、口服补液盐。若无明显恶心、呕吐、腹胀情形，可再给予清淡食物（如稀饭、面条、面包、馒头），但应避免油腻饮食。</p>
          <h4>（五）呕吐的预防</h4>
          <p >合理喂养，注意饮食卫生，培养良好的饮食习惯。安抚婴幼儿，避免紧张、恐惧等不良情绪。婴幼儿哭闹时要及时给予安抚，避免因呼吸道分泌物太多导致呕吐。容易晕车或晕船的婴幼儿可更换其他交通工具外出，或者外出前服用药物预防晕车或晕船。及时治疗引起呕吐的各种疾病。</p>
          <h3>六、腹痛</h3>
          <p >腹痛是婴幼儿常见的病症，几乎每个婴幼儿都有腹痛的经历，只是症状有轻有重，持续时间有长有短。腹痛分为内科疾病性腹痛及外科疾病性腹痛两大类。引起腹痛的原因多种多样，治疗方法也因病而异。</p>
          <p >腹痛随年龄大小而有不同的表现。婴幼儿往往不能用言语表达疼痛，只能从表现来判断是否发生腹痛，比如哭闹不安、面色苍白、拒绝进食、蜷缩双腿等。年长儿腹痛时常哭闹或辗转不安，双腿屈曲向腹部，并用双手按着腹部。所以，老师和家长要仔细询问，耐心观察。对于出现腹痛的婴幼儿，不要一发现腹痛就让其服用止痛药物，而应对病情进行一定时间的仔细观察，疼痛剧烈或持续时间长者应及时就医。</p>
          <h4>（一）腹痛的分类和病因</h4>
          <p >1．急性腹痛</p>
          <p >腹腔脏器的急性炎症：急性胃炎、急性肠炎、急性阑尾炎等。空腔脏器的阻塞或扩张：肠梗阻、肠套叠、胆道蛔虫症、泌尿系统结石等。脏器扭转或破裂：肠扭转、绞窄性肠梗阻、胃肠穿孔、扭转、肝破裂等。腹膜炎症：如胃肠道穿孔引起的腹膜炎。全身疾病引起的腹痛：腹型过敏性紫癜、铅中毒等。</p>
          <p >2．慢性腹痛</p>
          <p >婴幼儿慢性腹痛不多见，常见的原因是腹腔脏器如胃肠道的慢性炎症、慢性肠</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">31</div>
        </div>
      </div>
    </div>
    <!-- P32 -->
    <div class="page-box" page="41">
      <div v-if="showPageList.indexOf(41) > -1">
        <div class="bodystyle">
          <p class="td-0">梗阻、功能性消化不良、慢性肝炎，慢性中毒如铅中毒等。</p>
          <div class="img-rights">
            <img class="img-0" alt="" src="../../assets/images/bgImage/bg4.jpg"/>
            <div class="content1">
              <p class="tsTitle">小贴士</p>
              <p class="tsContent">穿孔是指腹腔内的空腔脏器如胃肠道的壁，由于各种原因造成壁破，使得脏器与腹腔相通，如胃十二指肠溃疡穿孔、急性阑尾炎穿孔等。腹腔脏器穿孔后，其内容物进入腹腔引起急性弥漫性腹膜炎，出现腹痛、恶心、呕吐、烦躁不安、面色苍白、心动过速等。全腹呈板样强直，腹壁有明显的压痛、反跳痛，严重的甚至出现休克。</p>
            </div>
          </div>
          <h4>（二）腹痛的部位</h4>
          <p >肠系膜淋巴结炎一般在脐周疼痛；结肠疼痛多在下腹部或左下腹部；急性弥漫性腹膜炎、腹型过敏性紫癜和机械性肠梗阻为弥漫性或部位不定的疼痛。</p>
          <h4>（三）腹痛的性质和程度</h4>
          <p >胃十二指肠溃疡穿孔表现为突发的中上腹剧烈刀割样疼痛。慢性胃炎或胃十二指肠溃疡表现为上腹部持续性隐痛。急性弥漫性腹膜炎表现为持续性、广泛性剧烈疼痛伴腹壁肌肉紧张或强直。胆道蛔虫症表现为阵发性剑突下钻顶样疼痛。</p>
          <h4>（四）导致腹痛的几种常见婴幼儿疾病</h4>
          <p >1．急性肠胃炎</p>
          <p >患有急性肠胃炎的婴幼儿不仅会腹痛，还有恶心、呕吐、腹泻等症状，而且常伴有发热，大便呈稀糊状、稀水状或者黏（脓）血便，多跟饮食不洁有关。</p>
          <p >2．嵌顿疝</p>
          <p >有腹股沟斜疝病史的患儿，如果发生疝气嵌顿于外环处或阴囊内，常会哭闹不安、呕吐等。仔细观察发现患儿腹股沟阴囊区肿胀，有一质地较硬的包块。极少数患儿睡后疝囊能自行回到腹腔，急性嵌顿疝需要急诊手术。</p>
          <p >3．肠痉挛</p>
          <p >肠壁肌肉强烈收缩引起的阵发性痉挛易导致腹痛。受凉、暴食、大量冷食都有可能引起肠痉挛。肠痉挛的特点是：每次发作在10分钟以内，腹痛反复发作，多数可自愈。</p>
          <p >4．阑尾炎</p>
          <p >阑尾炎的腹痛一般从上腹部或肚脐周围开始，再转移到右下腹，腹痛难忍拒绝别人按压。虽然阑尾炎可有发热、呕吐、腹泻，但早期多无发热或消化道症状。如果有典型的转移性右下腹疼痛，要注意阑尾炎的可能。</p>
          <p >5．肠道和胆道蛔虫</p>
          <p >人体肠道内有蛔虫寄生会引起轻微的腹痛，若是蛔虫太多就会在肠道内集结成团阻塞肠道，进而引起持续性的剧烈疼痛。会钻孔的蛔虫如果窜到胆道内就会形成胆道蛔虫，患者上腹部会出现剧烈疼痛，甚至会躺在床上、地上翻滚哭叫。婴幼儿</p>

        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">32</div>
        </div>
      </div>
    </div>
    <!-- P33 -->
    <div class="page-box" page="42">
      <div v-if="showPageList.indexOf(42) > -1">
        <div class="bodystyle">
          <p class="td-0">患胆道蛔虫病有时会有黄疸、厌食、厌油等症状。</p>
          <p >6．肠系膜淋巴结炎</p>
          <p >肠系膜淋巴结炎的特点是：多有上呼吸道感染病史，发病时还可有发热，腹痛部位也不明确，全腹柔软，多为弥漫性腹痛。部分婴幼儿会出现呕吐、腹泻，做超声检查显示肠系膜淋巴结肿大。</p>
          <h4>（五）腹痛的护理</h4>
          <p >1．休息</p>
          <p >腹痛时应让患儿卧床休息，保持舒适体位。可下肢屈曲侧卧或仰卧，以减轻腹部肌肉紧张引起的腹痛。</p>
          <p >2．饮食</p>
          <p >根据病情保证营养摄入。可以进食的患儿应给予富含营养、容易消化的饮食，而胃肠道疾病如胃肠道穿孔、急性阑尾炎等要禁食，给予静脉补液。</p>
          <p >3．对症处理</p>
          <p >病因明确的要对症处理，如胃肠道功能紊乱引起的腹痛，可给予腹部热敷按摩。剧烈腹痛的患儿按照医嘱可给予解痉镇痛药物。病因不明的腹痛切忌擅自处理使用止痛药，以免掩盖病情，耽误治疗。不可在腹部直接放置热水袋，以免烫伤皮肤。</p>
          <p >4．观察病情</p>
          <p >注意观察腹痛的性质、部位、程度、持续时间及伴随症状等，病情加重要及时送医院就诊。</p>
          <p >5．预防意外损伤</p>
          <p >剧烈腹痛的患儿可因疼痛翻滚发生坠床或者碰伤，应注意保护安全，专人看护。</p>
          <h3>七、便秘</h3>
          <p >便秘是指大便次数减少，一般每周少于3次，伴排便困难、粪便干结。便秘是婴幼儿常见的排泄问题，多长期存在，影响生活质量。</p>
          <h4>（一）便秘的原因</h4>
          <p >1．肠道菌群失衡</p>
          <p >大便的性质和婴幼儿摄入的食物成分密切相关。如食物中含大量蛋白质，而碳水化合物不足，肠道菌群继发改变，肠内容物发酵过程少，大便易呈碱性，干燥。如食物中含较多的碳水化合物，肠道发酵菌增多，发酵作用增加，产酸多，大便易呈酸性，次数多而软。进食量少，食物缺乏纤维素或水分不足，对结肠运动的刺激减少，也会导致便秘。这些情况多是家长没有注意婴幼儿的科学饮食，或者婴幼儿挑食厌食导致的。</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">33</div>
        </div>
      </div>
    </div>
    <!-- P34 -->
    <div class="page-box" page="43">
      <div v-if="showPageList.indexOf(43) > -1">
        <div class="bodystyle">
          <p >2．肠道功能异常</p>
          <p >长期使用开塞露等灌肠剂或长期憋便，都会引起肠壁肌肉乏力、功能失常而便秘。另外交感神经功能失常、腹肌软弱或麻痹也常会引起婴幼儿便秘。</p>
          <p >3．生活习惯</p>
          <p >生活不规律，或家长没有为婴幼儿培养良好的排便习惯，都会导致婴幼儿未形成排便的条件反射，进而导致便秘。</p>
          <p >4．器质性便秘</p>
          <p >一些先天性的肠道疾病，比如先天性巨结肠和肛门裂、肛门狭窄等疾病会导致肛门括约肌痉挛、排便疼痛，造成婴幼儿惧怕排便而出现便秘。大量腹腔积液、膈肌麻痹、肠粘连、肠套叠、肠扭转等均会导致便秘。全身性疾病如甲状腺功能减退症、糖尿病等使肠肌松弛、排便无力而出现便秘。一些药物如吗啡、抗胆碱能药物、镇静剂等使肠道松弛而出现便秘。</p>
          <h4>（二）便秘的表现</h4>
          <p >主要表现为排便不畅、排便困难、粪便干硬、腹痛、腹胀、消化不良、食欲减退、下腹部不适、乏力等。腹部较硬实且紧张，有时候在左下腹可摸到粪块。严重排便困难的婴幼儿会出现肛裂、肛门疼痛、便血。婴幼儿会哭闹不安、不愿排便，从而加重便秘。</p>
          <h4>（三）便秘的预防和护理</h4>
          <p >1．巧妙补充纤维素</p>
          <p >对于已经添加辅食的婴幼儿，如果平时讨厌吃蔬菜，可以让其多吃木耳、杏鲍菇、海苔、海带等食物，以增加纤维素的摄入，从而促进其排便。生活中注意培养婴幼儿均衡饮食的良好习惯。</p>
          <p >2．适当运动</p>
          <p >鼓励婴儿多活动，鼓励幼儿多参加体育运动。因为运动可增加肠蠕动，促进排便。</p>
          <p >3．定时排便</p>
          <p >不按时排便是导致许多婴幼儿便秘的原因之一。婴幼儿腹部及骨盆腔的肌肉正处在发育阶段，排便反射的功能尚不成熟，排便经常需要大人的提醒。因此，可以把早餐后1小时作为婴幼儿固定的排便时间。如厕前可给婴幼儿喝一杯温水润肠。</p>
          <p >4．腹部按摩</p>
          <p >排便困难时，可给婴幼儿做腹部按摩，以肚脐为中心顺时针方向轻轻按摩腹部，促进肠蠕动。</p>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">34</div>
        </div>
      </div>
    </div>
    <!-- P35 -->
    <div class="page-box" page="44">
      <div v-if="showPageList.indexOf(44) > -1">
        <div class="bodystyle">
          <p >5．通便药物</p>
          <p >便秘严重时，可短期使用简易安全的通便剂如开塞露、甘油栓等软化粪便，润滑肠道，刺激大便排出。</p>
          <h4>（四）便秘的护理技术</h4>
          <p >1．开塞露通便</p>
          <p >开塞露由甘油或山梨醇制成，属于润滑性缓泻药。用时将封口端圆弧形剪去，先挤出少许润滑开口处。让患儿左侧卧于床上，放松肛门，然后将开塞露的前端轻轻插入肛门后将药液挤入直肠内，保留5～10分钟后排便。</p>
          <p >2．肥皂栓法</p>
          <p >肥皂栓属于自制简易通便剂，将普通肥皂削成圆锥形（底部直径1cm，长3～4cm），即成肥皂栓。使用时戴上手套，将肥皂栓蘸热水后轻轻插入患儿肛门。注意：肛门处皮肤有破溃及肛门剧烈疼痛的患儿不宜使用。</p>
          <p >3．人工取便法</p>
          <p >如患儿长时间不排便，多量干便堆积在直肠内，采用上述方法无法解决问题时，可用手抠出大便。戴上一次性手套，将食指涂润滑剂后慢慢插入患儿肛门内，先机械地搅碎粪块，再将碎粪块取出。注意动作轻柔，避免损伤直肠黏膜。如发现患儿有心慌、头晕等不适，应立即停止操作。</p>
          <div class="video-box">
              <video :src="videoPathFour" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="img-0"></video>
            <p class="center videoname">
              <span>视频3-4便秘的护理技术</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo4 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == 'A105D1669E6DB25167EA4386DA84AFC5'
                ) > -1
                    ? collectCheck
                    : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-04')" />
              </el-tooltip>
            </p>
          </div>
          <h3>八、其他护理技术</h3>
          <h4>（一）协助患儿用药</h4>
          <p >药物在预防、治疗和诊断疾病中都起着重要作用，给药法是预防和治疗婴幼儿常见病的基本常用方法，必须熟悉常用药物的性能、作用及不良反应，掌握药物的剂型、剂量和给药方法，以做到合理使用，减少药物不良反应。需要重点指出的是：在园给幼儿用药一定要遵照医嘱，并征得家长的同意，以防不良事件的发生。给药法基本原则如下。</p>
          <p >1．执行查对制度</p>
          <p >在给药操作前、操作中、操作后，均要注意核对患儿姓名、药名、药品有效期、药物浓度、剂量、用药方法、用药时间等，以杜绝差错，防止喂错药物、剂量过大、外用药当成口服药等意外发生。</p>
          <p >2．服糖浆类药物的注意事项</p>
          <p >在幼儿园里，幼儿因咳嗽吃药的占大多数。在给服止咳药的时候应该注意：每</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">35</div>
        </div>
      </div>
    </div>
    <!-- P36 -->
    <div class="page-box" page="45">
      <div v-if="showPageList.indexOf(45) > -1">
        <div class="bodystyle">
          <p>次服药时应先服消炎、治感冒的药物，再服化痰止咳的糖浆，服完糖浆后不要立即喝水，以增强化痰效果，缩短病程。</p>
          <p >3．服抗过敏药物的注意事项</p>
          <p >对过敏体质或怀疑是过敏性咳嗽的患儿，医生会给予扑尔敏、赛庚啶之类的抗过敏药物。此类药物的副作用是困倦，严重的出现嗜睡，要注意观察不良反应，保证幼儿在园安全。</p>
          <p >4．注意手卫生</p>
          <p >给患儿用药前后，护理者应注意手卫生，以防污染药液。</p>
          <p >6．安抚患儿</p>
          <p >安抚患儿心理，给药时要根据患儿不同的心理状态给予解释、鼓励、劝慰，以消除其对药物治疗的怀疑、恐惧及抗药心理。要注意态度和蔼、动作轻柔、技术熟练，使患儿对治疗产生信任，从而积极配合治疗。</p>
          <p >7．做好记录</p>
          <p >注意记录患儿名字、所使用药物的名称、药物使用时间、用药后的反应等，若出现不良反应及时停用。</p>
          <div class="video-box">
              <video :src="videoPathFive" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="img-0"></video>
            <p class="center videoname">
              <span>视频3-5协助患儿用药</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo5 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '128D8188E7D564E45576EF3434122762'
                ) > -1
                    ? collectCheck
                    : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-05')" />
              </el-tooltip>
            </p>
          </div>
          <h4>（二）滴（涂）眼药</h4>
          <p >1．滴眼液的使用方法</p>
          <p >患儿取仰卧位，年龄大的幼儿可取坐位，头稍后仰。操作者洗净双手，将患儿眼部分泌物用干净棉签擦净。操作者站在患儿对面或者头侧，告诉患儿向上注视，左手持消毒棉签将下眼睑向下方牵拉，暴露下结膜囊，右手持滴眼液，挤出1滴药水冲瓶口，在距眼睛2～3cm处将1～2滴药液滴入。滴完后嘱患儿轻闭眼，再用拇指和食指轻提患儿上眼皮，使药液均匀分布于眼球。用消毒棉签轻轻擦去流出的药液，并告诉患儿轻轻闭眼2～3分钟。</p>
          <p >2．眼膏的使用方法</p>
          <p >眼膏在睡前使用。操作者先洗净双手，告诉患儿睁大眼睛，一手分开患儿上下眼睑，一手持药膏，将药膏直接挤入下眼皮内，告知患儿轻轻闭眼，轻轻按摩眼睑至药膏分布均匀。</p>
          <p >3．注意事项</p>
          <p >双眼滴药时，需先滴健侧眼睛，后滴患侧眼睛。勿使药瓶碰及睫毛，以防污染。混悬液用之前需摇匀。多种眼药水同用时，需要间隔2～3分钟，不可同时滴入。已开封的眼药水应放置于阴凉、避光处，如果天气较热最好在4℃冰箱内冷藏。</p>
          <div class="video-box">
              <video :src="videoPathSix" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="img-0"></video>
            <p class="center videoname">
              <span>视频3-6滴（涂）眼药</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo6 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '90A4E5763FE611B1411F5E58E52579E7'
                ) > -1
                    ? collectCheck
                    : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-06')" />
              </el-tooltip>
            </p>
          </div>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">36</div>
        </div>
      </div>
    </div>
    <!-- P37 -->
    <div class="page-box" page="46">
      <div v-if="showPageList.indexOf(46) > -1">
        <div class="bodystyle">
          <h4>（三）滴鼻药、滴耳药</h4>
          <p >1．滴鼻药</p>
          <p >患儿取平卧位，肩下垫个枕头，使头后仰，鼻孔向上，或坐在椅子上，背靠椅背，头尽量后仰。操作者先洗净双手，充分暴露患儿鼻腔，一手持药瓶在距鼻孔上方约2cm处滴入药液2～3滴，另一手轻捏鼻翼使药液均匀分布于鼻腔。如果需要，用同样方法滴另一侧鼻孔。滴药后让患儿保持原体位约3分钟后再起来。用棉球擦拭流出来的药液。注意滴药时药瓶不要与患儿鼻腔皮肤接触。</p>
          <p >2．滴耳药</p>
          <p >患儿取坐位或者仰卧位，头偏向健侧，患耳朝上。操作者先洗净双手，一手向后下方牵拉耳郭，使耳道变直，充分暴露耳道，另一手持药瓶沿着外耳道后壁滴入药液2～3滴，轻压耳屏，使药液流向耳道深处，并使患儿保持原姿势5～10分钟。如果需要，用同样方法滴另一侧外耳道。若外耳道内有分泌物，要用棉签擦净后再滴药。注意药液不能太凉，有鼓膜穿孔的患儿禁止进行耳内滴药。滴管口不可触及患儿皮肤，以免污染药液。</p>
          <div class="video-box">
              <video :src="videoPathSeven" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="img-0"></video>
            <p class="center videoname">
              <span>视频3-7滴鼻药、滴耳药</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo7 ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '986015C2CFAB8545FB95A49E3738FA96'
                ) > -1
                    ? collectCheck
                    : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-07')" />
              </el-tooltip>
            </p>
          </div>
          <div class="bgColor">
            <img class="img-0" alt="" src="../../assets/images/bgImage/001-02.jpg"/>
            <div class="content">
              <p class="center titleQuot">小 结</p>
              <p >婴幼儿患病的早期迹象包括情绪和行为、精神和表情、食欲、颜面和皮肤、呼吸、睡眠、体温以及大小便的改变等，可表现为：烦躁不安、面色发红、目光呆滞；没有精神，不爱动，不爱玩，疲倦嗜睡；拒食或食后哭闹，口水多；面色苍白或发黄；出现皮疹；呼吸增粗、增快；体温改变；大便次数、颜色改变；尿量减少、尿液颜色改变等。生活中要注意观察，如发现婴幼儿有生病的迹象，应予以重视，及时处理。</p>
              <p >婴幼儿常见症状有发热、哭闹、咳嗽、头痛、呕吐、腹痛、便秘等，各有其自身不同的发病原因，应注意生活中的护理和预防。另外，应掌握物理降温、测量生命体征、协助患儿有效咳嗽、叩击法、开塞露通便、肥皂栓塞肛法、人工取便法、协助患儿用药、滴（涂）眼药、滴鼻药、滴耳药这些常用护理技术，以便在遇到相应情况时及时给予患儿有效的护理。</p>
            </div>
          </div>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C2.png"/>
          <div class="page-r">37</div>
        </div>
      </div>
    </div>
    <!-- P38 -->
    <div class="page-box" page="47">
      <div v-if="showPageList.indexOf(47) > -1">
        <div class="bodystyle">
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/gjsy.jpg"/></p>
          <p >发热　物理降温　药物降温　咳嗽　有效咳嗽　头痛</p>
          <p >呕吐　腹痛　肠痉挛　蛔虫　便秘　开塞露</p>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/skylx.jpg"/></p>
          <p >1．通过哪些患病的早期迹象能发现患病的婴幼儿？</p>
          <textarea v-model="thinkAbout.one" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >2．婴幼儿发热的分度和护理方法是什么？</p>
          <textarea v-model="thinkAbout.two" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >3．婴幼儿呕吐的原因、护理和预防方法是什么？</p>
          <textarea v-model="thinkAbout.three" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >4．婴幼儿腹痛的常见原因有哪些？</p>
          <textarea v-model="thinkAbout.four" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >5．婴幼儿便秘的日常护理和预防方法是什么？</p>
          <textarea v-model="thinkAbout.five" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/jyhd.jpg"/></p>
          <p >1．情景演练：假如鹏鹏发烧了，现在体温39℃，你作为他的老师，会如何处理？</p>
          <textarea v-model="thinkAbout.six" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >2．情景演练：依依咳嗽厉害，你作为她的老师，会怎么协助她有效咳嗽？</p>
          <textarea v-model="thinkAbout.seven" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >3．情景演练：明明3天没有排便了，现在想上卫生间解大便，但是解不出来，哭闹不止，你作为他的老师，该选择什么方法？怎么操作？</p>
          <textarea v-model="thinkAbout.eight" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p >4．情景演练：果果患病了，你作为他的老师，会怎么协助他用药？有哪些注意事项？</p>
          <textarea v-model="thinkAbout.nine" placeholder="请输入内容" rows="4"
          class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <p class="td-0"><img class="rwmb-2" alt="" src="../../assets/images/bgImage/tzyd.jpg"/></p>
          <p >1．白海静：《儿童发热的药物治疗》，载《健康向导》，2020（5）。发热是儿童患病后最常出现的症状之一，本文详细介绍了发热的药物治疗方法和注意事项。</p>
          <p >2．郑莉萍：《381例儿童呕吐的诊疗分析研究》，载《现代医药卫生》，2020（6）。本文通过收集儿科门诊及病房以呕吐为主要症状的患儿381例，对其临床特征进行回顾性分析，得出结论：儿童呕吐病因复杂，如胃肠炎、肠套叠、颅内感染等，应高度重视其鉴别诊断，及时处理，避免延误病情。</p>
          <p >3．刘沁橘、朱莉：《儿童腹痛的常见原因及诊断方法》，载《医药前沿》杂志，2019（16）。本文对导致儿童腹痛的几个原因进行阐述，并对临床诊断腹痛病因的常用方法（如胃镜）以及临床上对各种导致腹痛的疾病的治疗方法进行介绍。</p>
          <p >4．张树成、白玉作：《儿童便秘的治疗手段及应用指征》，载《临床小儿外科杂志》，2020（1）。本文对儿童常用便秘治疗手段的应用指征进行了深入的探讨。</p>
          <div class="testTitle">云 测 试</div>
          <div class="bk" v-if="questionData">
            <examinations v-if="questionData" :cardList="questionData[3]" /> 
          </div>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">38</div>
        </div>
      </div>
    </div>
     
  </div>
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
import {
  getCollectResource,
  setCollectResource,
} from "@/assets/methods/resources";
import tool from "@/assets/js/toolClass.js";
import examinations from "@/components/examinations/index.vue";
export default {
  name: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
    questionData: {
      type: Object,
    },
  },
  components: {
    examinations,
  },

  data() {
    return {
      thinkAbout: {
        one: "",
        two: "",
        three: "",
        four: "",
        five: "",
        six: "",
        seven: "",
        eight:"",
        nine:""
      },
      
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      collectResourceList: [],
      chapterData: {
        isCollectVideo: false,
        isCollectVideo2: false,
        isCollectVideo3: false,
        isCollectVideo4: false,
        isCollectVideo5: false,
        isCollectVideo6: false,
        isCollectVideo7: false,
      },
      videoPathOne: "",
      videoPathTwo:'',
      videoPathThree:'',
      videoPathFour:'',
      videoPathFive:'',
      videoPathSix: '',
      videoPathSeven:'',
    };
  },
  async mounted() {
    //项目自测及寻礼之问
    const bookQuestion = localStorage.getItem(
      "childIllnessPreventionCare-book-chapter03-question"
    );
    if (bookQuestion) {
      this.thinkAbout = JSON.parse(bookQuestion);
    }
    this.getVidoePath();
    this.collectResourceList = await getCollectResource(
      this.config.activeBook.bookId
    );
  },
  methods: {
    setBookQuestion() {
      localStorage.setItem(
        "childIllnessPreventionCare-book-chapter03-question",
        JSON.stringify(this.thinkAbout)
      );
    },
    
    //获取视频
    async getVidoePath() {
      this.videoPathOne = await getResourcePath(
        "BA4D51803E69D87866C622349C51F122"
      );
      this.videoPathTwo = await getResourcePath(
        "210D956D2882EB43DF26A9549F20AA1A"
      );
      this.videoPathThree = await getResourcePath(
        "9A7B869CEC090D9933BF0D915E3D0731"
      );
      this.videoPathFour = await getResourcePath(
        "A105D1669E6DB25167EA4386DA84AFC5"
      );
      this.videoPathFive = await getResourcePath(
        "128D8188E7D564E45576EF3434122762"
      );
      this.videoPathSix = await getResourcePath(
        "90A4E5763FE611B1411F5E58E52579E7"
      );
      this.videoPathSeven = await getResourcePath(
        "986015C2CFAB8545FB95A49E3738FA96"
      );
     
    },
    handleCollect(e) {
      if (e == "video-01") {
        this.handleCollectResource(
          "BA4D51803E69D87866C622349C51F122",
          "BA4D51803E69D87866C622349C51F122",
          "",
          "视频",
          "bits",
          "视频3-1发热的护理操作技术-物理降温"
        );
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
      }
      if (e == "video-02") {
        this.handleCollectResource(
          "210D956D2882EB43DF26A9549F20AA1A",
          "210D956D2882EB43DF26A9549F20AA1A",
          "",
          "视频",
          "bits",
          "视频3-2测量生命体征"
        );
        this.chapterData.isCollectVideo2 = !this.chapterData.isCollectVideo2;
      }
      if (e == "video-03") {
        this.handleCollectResource(
          "9A7B869CEC090D9933BF0D915E3D0731",
          "9A7B869CEC090D9933BF0D915E3D0731",
          "",
          "视频",
          "bits",
          "视频3-3 咳嗽的护理技术"
        );
        this.chapterData.isCollectVideo3 = !this.chapterData.isCollectVideo3;
      }
      if (e == "video-04") {
        this.handleCollectResource(
          "A105D1669E6DB25167EA4386DA84AFC5",
          "A105D1669E6DB25167EA4386DA84AFC5",
          "",
          "视频",
          "bits",
          "视频3-4便秘的护理技术"
        );
        this.chapterData.isCollectVideo4 = !this.chapterData.isCollectVideo4;
      }
      if (e == "video-05") {
        this.handleCollectResource(
          "128D8188E7D564E45576EF3434122762",
          "128D8188E7D564E45576EF3434122762",
          "",
          "视频",
          "bits",
          "视频3-5协助患儿用药"
        );
        this.chapterData.isCollectVideo5 = !this.chapterData.isCollectVideo5;
      }
      if (e == "video-06") {
        this.handleCollectResource(
          "90A4E5763FE611B1411F5E58E52579E7",
          "90A4E5763FE611B1411F5E58E52579E7",
          "",
          "视频",
          "bits",
          "视频3-6滴（涂）眼药"
        );
        this.chapterData.isCollectVideo6 = !this.chapterData.isCollectVideo6;
      }
      if (e == "video-07") {
        this.handleCollectResource(
          "986015C2CFAB8545FB95A49E3738FA96",
          "986015C2CFAB8545FB95A49E3738FA96",
          "",
          "视频",
          "bits",
          "视频3-7滴鼻药、滴耳药"
        );
        this.chapterData.isCollectVideo7 = !this.chapterData.isCollectVideo7;
      }
     
      this.handleChapterData();
    },

    handleChapterData() {
      localStorage.setItem(
        "childIllnessPreventionCare-book-chapter03-Data",
        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
      );
    },

  },
};
</script>
<style lang="less" scoped></style>

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

New file
@@ -0,0 +1,180 @@
<template>
  <div class="chapter" num="1">
    <!-- 封面 -->
    <div class="page-box mt-20" page="1" style="min-height: auto">
      <div v-if="showPageList.indexOf(1) > -1">
        <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
      </div>
    </div>
    <div class="page-box mt-20" page="2" style="min-height: auto">
      <div v-if="showPageList.indexOf(2) > -1">
        <img class="img-0" alt="" src="../../assets/images/feiye.jpg" />
      </div>
    </div>
    <!-- 介绍页面 -->
    <div class="page-box" page="3">
      <div v-if="showPageList.indexOf(3) > -1">
        <div style="margin: 0 25%; padding: 10% 0">
          <hr />
          <p class="block3 fz-16"><b>图书在版编目（CIP）数据</b></p>
          <p class="left3 fz-15 mr-0">婴幼儿常见疾病预防与护理/郝义彬，苗萍，郑莉萍主编.—北京：北京师范大学出版社，2022.4(2024.9重印)</p>
          <p class="left3 fz-15">ISBN 978-7-303-27583-0</p>
          <p class="left3 fz-15 mt-20">1.①婴…Ⅱ.①郝… ②苗… ③郑…Ⅷ.①小儿疾病-常见病-预防(卫生)②小儿疾病-常见病-护理V.①R720.1②R473.72</p>
          <p class="left3 fz-15 mt-20">中国版本图书馆CIP数据核字(2021)第261146号</p>
          <hr />
          <p><br /></p>
          <p><br /></p>
          <p><br /></p>
          <p class="left fz-15 mt-20"><b>图书意见反馈</b>：gaozhifk@bnupg.com　010-58805079</p>
          <p class="left fz-15">营销中心电话：010-58806880　58801876</p>
          <p class="left fz-15">编辑部电话：010-58807468</p>
          <hr />
          <p class="left fz-15">出版发行：北京师范大学出版社　www.bnupg.com</p>
          <p class="left fz-15">　　　　　北京市西城区新街口外大街12-3号</p>
          <p class="left fz-15">　　　　　邮政编码：100088</p>
          <p class="left fz-15">印　　刷：保定市中画美凯印刷有限公司</p>
          <p class="left fz-15">经　　销：全国新华书店</p>
          <p class="left fz-15">开　　本：787mm×1092mm　1/16</p>
          <p class="left fz-15">印　　张：17.75</p>
          <p class="left fz-15">字　　数：300千字</p>
          <p class="left fz-15">版　　次：2022年4月第1版</p>
          <p class="left fz-15">印　　次：2024年9月第5次印刷</p>
          <p class="left fz-15">定　　价：44.80元</p>
          <hr />
          <p class="left fz-15">策划编辑：罗佩珍 王超　 　责任编辑：孟　浩</p>
          <p class="left fz-15">美术编辑：焦　丽　　　　　装帧设计：焦　丽</p>
          <p class="left fz-15">责任校对：陈　荟　　　　　责任印制：陈　涛　赵　龙</p>
          <p class="center mt-20"><p class="center block3 fz-18"><b>版权所有　侵权必究</b></p></p>
          <p class="left center"><b>反盗版、侵权举报电话：</b>010-58800697</p>
          <p class="left center block2">北京读者服务部电话：010-58808104</p>
          <p class="left center block2">外埠邮购电话：010-58808083</p>
          <p class="left center block2">本书如有印装质量问题，请与印制管理部联系调换。</p>
          <p class="left center block2">印制管理部电话：010-58800608</p>
        </div>
      </div>
    </div>
    <!-- 介绍页面 -->
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <div class="bodystyle">
          <div class="firstTitle-1"><h1>丛书序</h1></div>
          <div class="pt"><img class="img-0" alt="" src="../../assets/images/bgImage/fenge.png"/></div>
          <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="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <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 block1 mt-20">叶平枝</p> 
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">2</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <div class="bodystyle">
          <div class="firstTitle-1"><h1 >前    言</h1></div>
          <div class="pt"><img class="img-0" alt="" src="../../assets/images/bgImage/fenge.png"/></div>
          <p class="preface">婴幼儿是人类的未来，婴幼儿的健康成长关系到家庭的幸福、民族的素质和国家的兴衰。但是，婴幼儿不是缩小版的成人；他们具有特殊的身心特点，需要予以特别呵护。婴幼儿时期的健康将会影响人终生的发展。努力预防并减少疾病对婴幼儿生存和健康的危害，保障和促进婴幼儿实现生理、心理和社会能力的全面发展（即生存、保护和发展），对国家、社会、学校、家庭而言，不仅是一项重要任务，而且是不懈的奋斗目标。</p>
          <p class="preface">正在生长发育过程中的婴幼儿，各器官系统尚未发育完全，身体各部分的结构和功能还不够成熟，尤其是神经系统对整个机体的控制、调节机能较差，因而对疾病的抵抗能力较差，容易受到疾病侵害。一旦造成损伤，严重时可影响婴幼儿一生。许多人在成年期出现的疾病和心理行为障碍，总能在其幼年找到相关的因素和病因。例如，儿童期肥胖症会导致成年期患冠心病、糖尿病的概率明显上升，严重营养不良会影响智力的发育，抽动症、注意缺陷多动障碍等发育行为疾病的症状随着年龄的增长会更加严重，甚至出现共病，影响成年期就业、婚姻，还会导致离婚率、犯罪率上升，等等。并且，婴幼儿由于自我保护意识和识别危险能力不足，容易出现外伤、气管异物、消化道异物等多种意外，严重时甚至危及生命。婴幼儿有很大一部分时间是跟托幼机构的教师们在一起的，因此教师掌握婴幼儿常见疾病的预防与护理知识就变得非常重要。无论是托幼机构教师还是家长，都应高度重视婴幼儿的疾病预防与护理工作，掌握婴幼儿生长发育的特点与常见病的表现、护理和预防知识，及早识别和发现疾病并给予正确处理，以期协助医生达到最好的治疗效果，以及保障婴幼儿健康。这也是编写本书的重要意义所在。</p>
          <h4 id="d003" class="preface">一、编写理念</h4>
          <p class="preface">既往，我国实行的是单一的医疗或单一的学前教育，其单方面资源是有限的，加之社会传统家庭育儿观念存在一些误区，使很多有健康问题或疑似健康问题的婴</p>
         
        </div>
       
      </div>
    </div>
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
        <div class="bodystyle">
          <p class="preface td-0">幼儿，不能被及时发现、诊断，因而延误或错失早期干预或治疗的良好时机，导致这些婴幼儿在身体健康、认知、交往等方面出现问题，严重时甚至死亡。</p>
          <p class="preface">为了保障婴幼儿健康发展，也为了适应新形势下学前教育和医学的发展需要，2007年，我国提出了医教结合的理念。2010年，《国务院办公厅关于开展国家教育体制改革试点的通知》（国办发〔2010〕48号）发布，最初是针对注意缺陷多动障碍、孤独症谱系障碍等特殊学前儿童进行医教结合共同干预。托幼机构教师掌握特殊学前儿童的早期识别方法，并在医生指导下进行在园干预，与医院的专业干预相结合，这样的医教结合、融合教育取得了较好的效果，使许多身心障碍儿童得到早期成功的康复，融入正常生活。</p>
          <p class="preface">目前，医教结合的理念已经不局限于此，而是有了更广泛的内涵：在培养托幼机构教师的过程中加入婴幼儿常见疾病预防与护理的相关知识，让教师根据婴幼儿的生长发育特点，合理安排饮食、运动等在园日程，并掌握患病早期迹象的识别、发热的护理、视力的保护、营养障碍的饮食指导、心肺复苏等相关知识，以期充分保障婴幼儿的身体健康和生命安全。</p>
          <p class="preface">通过医教结合的方法，可使既往医教分离的工作高效整合，实现相互补充、各施所长，做到早识别、早干预。多学科专业团队紧密配合，形成教育和医学的合力，达到使婴幼儿及其家庭都受益的共赢效果。这种新形势下的医教结合，正是本书自始至终所贯彻的理念。</p>
          <h4 id="d003" class="preface">二、内容结构</h4>
          <p class="preface">《婴幼儿常见疾病预防与护理》是一本适合我国教育改革的、面向婴幼儿照护类专业的教材，适应国家相关专业人才培养需求。本书从婴幼儿健康的定义、婴幼儿的生理和心理行为特点入手，系统介绍了患病的早期迹象和常见症状的护理方法，营养障碍性疾病的预防与护理，消化系统、呼吸系统、心血管系统、泌尿系统、神经系统疾病的预防与护理，发育行为疾病的预防与护理，皮肤科、口腔科、五官科疾病的预防与护理，常见急救知识，常见传染病的早期识别、预防和护理知识，内容全面丰富，提供了很多切实可行的预防方法和护理措施。</p>
          <p class="preface">本书共包含十六章，分别为第一章婴幼儿健康基础知识、第二章婴幼儿的生理和心理行为特点、第三章婴幼儿患病的早期迹象和常见症状的预防与护理、第四章营养障碍性疾病预防与护理、第五章消化系统疾病预防与护理、第六章呼吸系统疾病预防与护理、第七章心血管系统疾病预防与护理、第八章泌尿系统疾病预防与护理、第九章神经系统疾病预防与护理、第十章发育行为疾病预防与护理、第十一章皮肤科疾病预防与护理、第十二章口腔科疾病预防与护理、第十三章眼科疾病预防与护理、第十四章耳鼻喉科疾病预防与护理、第十五章婴幼儿常见急救处理、第十</p>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">2</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <div class="bodystyle">
          <p class="preface td-0">六章传染病预防与护理。每章包含学习目标、思维导图、导入、小结、关键术语、思考与练习、建议的活动、拓展阅读等多个版块。</p>
          <h4 id="d003" class="preface">三、编写特色</h4>
          <p class="block">1．注重将课程思政元素融入教材</p>
          <p class="preface">立德树人是教学之本。本书以习近平新时代中国特色社会主义思想为指导，坚持正确的政治方向和价值导向，设置了教学和德育双重目标，体现党的理论创新最新成果特别是习近平新时代中国特色社会主义思想，体现中国和中华民族风格，体现人类文化知识积累和创新成果，弘扬劳动光荣、技能宝贵、创造伟大的时代风尚。</p>
          <p class="preface">2022年10月，中国共产党第二十次全国代表大会召开，报告指出:教育、科技、人才是全面建设社会主义现代化国家的基础性、战略性支撑。必须坚持人才是第一资源，深入实施科教兴国战略、人才强国战略，坚持为党育人、为国育才，全面提高人才自主培养质量，聚天下英才而用之。在培养婴幼儿照护类专业人才的过程中，本书遵照党中央的指示引入党的二十大的相关内容，育人更育德，着重培养国家需要的高质量人才，向党的二十大报告中要求的统筹职业教育协同创新的方向努力。</p>
          <p class="block">2.遵循职业教育教学规律和人才成长规律</p>
          <p class="preface">本书内容结构符合学生认知特点，体现先进的职业教育理念，以托幼机构实际生活中的案例为载体，将知识、能力和正确价值观的培养有机结合，适应专业建设、课程建设、教学模式与方法改革创新等方面的需要，满足婴幼儿常见疾病相关知识和技能的项目学习、案例学习、模块化学习等不同学习方式要求，有效激发学生学习兴趣和创新潜能。通过系统专业的知识体系和实际技能的教育教学，培养学生成材，实现立德与树人、育人与育才的有机结合，落实党的教育方针，培养合格的社会主义建设者和接班人。</p>
          <p class="block">3.医养教结合，确保教材科学适用</p>
          <p class="preface">本书由郑州人民医院院长郝义彬及儿童健康发展中心苗萍、郑莉萍担任主编。本书编委会的副主编与参编均由在临床工作多年、经验丰富的医护人员担任，汇集了郑州人民医院(系河南中医药大学第五临床医学院)和郑州大学的多位优秀人才，将医学知识与婴幼儿教育密切结合。同时，考虑到本书面对的读者是托幼机构教师，我们还特别邀请了具有深厚婴幼儿教育经验的郑州市教工幼儿园园长戴红梅、汇爱国际教育集团总园长谷长缨、郑州市新华蓝天幼儿园园长田小燕、郑州市二七区第一幼儿园执行园长张晓英参与本书内容的审核把关，确保本书内容的科学性和适用性。</p>
          <p class="block">4.理实一体，形式新颖</p>
          <p class="preface">本书包括相关医学常识、疾病预防和护理的实操方法，兼具专业性、实用性和</p>
        </div>
        <div class="header-r1">
          <img class="img-0" alt="" src="../../assets/images/bgImage/C.png"/>
        </div>
        <div class="header-r">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CQ.png"/>
          <div class="page-r">3</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
        <div class="bodystyle">
          <p class="preface td-0">指导性，全书图文表并茂，生动活泼，将晦涩难懂的医学知识以通俗易懂的语言加以阐述，符合职业院校学生的学习特点;注重结合学生未来职业所需，融入托幼机构实践案例，以“小贴士”栏目呈现，内容丰富有趣，贴近未来职业场景，即便是没有医学背景的读者也能够理解并学会实际应用。</p>
          <p class="block">5.融媒体资源丰富</p>
          <p class="preface">本书采用了纸质版和数字版融合的新模式。书内多处附有二维码，融入数字化内容，读者可使用手机扫描二维码查阅视频内容。一些难以理解并且烦琐的操作，如喂药法、测量生命体征、七步洗手法、心肺复苏、海姆立克急救法等，通过专业护理人员的演示，以视频方式展示出来，更加直观易懂。这种新模式适应了知识爆炸和知识信息化条件下的学习模式，有利于提高读者的学习兴趣和自主学习能力，可以很好地保证学习效果。此外，全书各章都配有检测题，扫描封二二维码进入小程序即可在线答题检测，便于学生随时进行自检自查。</p>
          <h4 id="d003" class="preface">四、本书分工</h4>
          <p class="preface">本书的作者分工如下:郝义彬、苗萍、郑莉萍负责总体审核，苗萍负责撰写发育行为疾病预防与护理章节，郑莉萍负责撰写婴幼儿健康基础知识、消化系统疾病预防与护理、泌尿系统疾病预防与护理、烧烫伤急救处理章节，郑莉萍与蒋会莉共同撰写传染病预防与护理章节，吴彪负责撰写神经系统疾病预防与护理、心血管系统疾病预防与护理章节，刘艳红负责撰写婴幼儿的生理和心理行为特点、婴幼儿患病的早期迹象和常见症状的预防和护理章节，朱庆华负责撰写营养障碍性疾病预防与护理章节，陈园园负责撰写婴幼儿常见急救处理章节中的心肺复苏和骨折、异物、软组织损伤、急性中毒的急救处理部分，盖翠芳负责撰写口腔科疾病预防与护理及牙外伤急救处理章节，黄玉成负责撰写皮肤科疾病预防与护理及蜂蜇伤急救处理章节，李源负责撰写呼吸系统疾病预防与护理、耳鼻喉科疾病预防与护理章节，闫媛媛负责撰写眼科疾病预防与护理及眼外伤急救处理章节。</p>
          <p class="preface">书中各个章节的“导入”“案例”“建议的活动”部分由戴红梅、谷长缨、田小燕、张晓英负责审核。视频由刘晓娟组织拍摄并进行后期编辑。</p>
          <p class="preface">此外，温馨提醒各位读者:医学存在专业性，需要临床医生根据不同病情采取不同的处理方案;本书中涉及的“临床处置”内容均为针对疾病的常规医学处理方法，仅供读者了解，不作为实际操作的指导;在实际情况中，应当谨遵医嘱和托幼机构的相关规定。同时，由于经验和水平局限，本书难免有缺点和不当之处，敬请各位读者提出宝贵的意见。</p>
          <p class="right block1 mt-20">郝义彬</p>
        </div>
        <div class="header-l">
          <img class="img-0" alt="" src="../../assets/images/bgImage/CH.png"/>
          <div class="page-l">4</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/childIllnessPreventionCare/view/components/index.vue

New file
@@ -0,0 +1,970 @@
<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(3) > -1" :showPageList="loadPageList" :questionData="questionDataMap"></chapterThree>
      <!--<chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
       <chapterSeven v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterSeven> -->
    </div>
  </div>
</template>

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

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

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

 src/books/childIllnessPreventionCare/view/index.vue

New file
@@ -0,0 +1,78 @@
<template>
    <div class="childIllnessPreventionCare-book" @mouseup="handleMouseUp">
      <pageContent></pageContent>
    </div>
  </template>
  
  <script>
  import pageContent from "./components/index.vue"
  export default {
    name: "childIllnessPreventionCare-book",
    components: { pageContent },
    computed: {
      fontSize() {
        return this.$store.state.qiankun.fontSize;
      },
      pageZoom() {
        return this.$store.state.qiankun.scale / 100;
      },
    },
    methods: {
      getParentWithClass(element, className) {
        while (element.parentElement) {
          element = element.parentElement;
          if (element.classList.contains(className)) {
            return element;
          }
        }
      },
      handleMouseUp(e) {
        const selection = (
          this.container ? this.container : window
        ).getSelection();
        const txt = selection.toString();
        if (selection.type != "none" && txt) {
          let node = selection.anchorNode.parentNode;
          let pageHtml = this.getParentWithClass(
            selection.anchorNode,
            "page-box"
          );
          let chapterDom = this.getParentWithClass(
            selection.anchorNode,
            "chapter"
          );
          let chapterNum;
          if (chapterDom) chapterNum = chapterDom.getAttribute("num");
          if (pageHtml) {
            const page = pageHtml.getAttribute("page");
            // 监听选中文本事件，并触发父层方法
            if (this.$store.state.qiankun.windowSelection) {
              this.$store.state.qiankun.windowSelection({
                chapterNum,
                txt,
                page,
                x: e.x,
                y: e.y,
              });
            }
          }
        } else {
          if (this.$store.state.qiankun.windowSelection) {
            this.$store.state.qiankun.windowSelection({
              chapterNum: "",
              txt: "",
              page: "",
              x: e.x,
              y: e.y,
            });
          }
        }
      },
    },
  };
  </script>
  
  <style lang="less">
  @import "../assets/main.less";
  </style>
  

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

@@ -18,6 +18,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";

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

@@ -40,6 +40,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";
@@ -122,7 +123,7 @@
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      },
      }, 
    },
  },
  mounted() {
@@ -735,7 +736,7 @@
      let catalogIndex = 0;
      // 所有章节组件（每本书制作时单独配置）
      const pageData = {
        pageHeader,
        pageHeader, 
        chapterOne,
        chapterTwo,
        chapterThree,

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

@@ -36,6 +36,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chpater002.vue";

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

 src/books/cognitiveLanDevEduAges0to3/view/index.vue

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

@@ -23,6 +23,7 @@
  </div>
</template>
<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import NoteIcon from "@/assets/images/biji.png";

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

@@ -862,6 +862,7 @@
          .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")));

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

@@ -50,6 +50,7 @@
</template>

<script>
import Vue from "vue";
import axios from "axios";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";

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

@@ -20,6 +20,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";

 src/books/policiesAndRegulations/view/components/chapter006.vue

@@ -288,7 +288,7 @@
          <p>《宪法》第 28 条规定，国家维护社会秩序，镇压叛国和其他危害国家安全的犯罪活动，制裁危害社会治安、破坏社会主义经济和其他犯罪的活动，惩办和改造犯罪分子。第 29 条规定，中华人民共和国的武装力量属于人民。它的任务是巩固国防，抵抗侵略，保卫祖国，保卫人民的和平劳动，参加国家建设事业，努力为人民服务。国家加强武装力量的革命化、现代化、正规化的建设，增强国防力量。</p>
          <div class="fl al-c"><img class="" alt="" src="../../assets/images/question.svg" /><p class='td-0 mainColor h6'>【习 题】</p><div class="hr1"></div></div>
          <div class="bk" v-if="questionData">
            <examinations v-if="questionData" :cardList="questionData[15]" />
            <examinations v-if="questionData" :cardList="questionData[15]" /> 
          </div>
        </div>
        <ul class="fl f-right">

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

@@ -22,6 +22,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
// import chapterOne from "./chapter001.vue";
// import chapterTwo from "./chapter002.vue";

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

@@ -47,6 +47,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
// import chapterTwo from "./chapter002.vue";

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

@@ -19,6 +19,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
// import chapterTwo from "./chapter002.vue";

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

@@ -23,6 +23,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";

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

@@ -46,6 +46,7 @@
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue";

 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>