最新样章

zhongshujie

4 天以前 92b4aea88467686de1009e822ba9310fb8553634

最新样章

 src/App.vue

@@ -29,6 +29,8 @@
    <policiesAndRegulations v-if="activeBook.name == 'policiesAndRegulations'"></policiesAndRegulations> 
    <OralAndBroadcasting v-if="activeBook.name == 'OralAndBroadcasting'" ></OralAndBroadcasting>
    <practicalCareChildrenManual v-if="activeBook.name == 'practicalCareChildrenManual'"></practicalCareChildrenManual>
    <artInitiationForAges0to3 v-if="activeBook.name == 'artInitiationForAges0to3'"></artInitiationForAges0to3>
    <toddlerSportsSafetyProtection v-if="activeBook.name == 'toddlerSportsSafetyProtection'"></toddlerSportsSafetyProtection>
  </div>
</template>
<script>
@@ -80,7 +82,9 @@
    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"),
    artInitiationForAges0to3: ()=> import("./books/artInitiationForAges0to3/view/index.vue"),
    toddlerSportsSafetyProtection : ()=> import("./books/toddlerSportsSafetyProtection/view/index.vue"),
  },
  data() {
    return {
@@ -132,11 +136,13 @@
      // preschoolBasicKnowledge //学前教育基础知识
      // policiesAndRegulations  //政策法律与法规|旅游社
      // practicalCareChildrenManual // 婴幼儿照护实录
      // artInitiationForAges0to3  // 0-3岁婴幼儿艺术启蒙
      // toddlerSportsSafetyProtection // 婴幼儿运动安全与保护
      this.activeBook = await this.config.getBookConfig(
        process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "meetingPlanners")
          : "toddlerSportsSafetyProtection")
      );

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

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

Binary files differ

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

Binary files differ

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

Binary files differ

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

Binary files differ

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

Binary files differ

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

Binary files differ

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

Binary files differ

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

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

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

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

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

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

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

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

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

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

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

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

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

 src/books/artInitiationForAges0to3/assets/main.less

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

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

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

    .c-g {
        color: green;
    }

    .c-r {
        color: red;
    }

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

    .mr-0 {
        margin: 0;
    }

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

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

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

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

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

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

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

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

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

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

    .w100 {
        width: 100%;
    }

    .w80 {
        width: 80%;
    }

    .w70 {
        width: 70%;
    }

    .w25 {
        width: 25%;
    }

    .w20 {
        width: 20%;
    }

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

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

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

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

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

    .img-0 {
        width: 100%;
    }

    .img-c {
        width: 70%;
    }

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

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

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


    td {
        padding: 5px 10px;
    }

    .fl {
        display: flex;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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

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



    table {
        border-color: none !important;
    }

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

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

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

        &:focus {
            outline: none;
        }
    }

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


    .b0 {
        border: 0;
    }

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

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

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

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

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

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

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

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

        img {
            width: 100%;
        }

        p {
            margin: 0;
        }
    }

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

        img {
            width: 100%;
        }

        p {
            margin: 0 !important;
        }
    }

    .w430 {
        width: 430px;
    }

    .w395 {
        width: 395px;
    }

    .w350 {
        width: 350px;
    }

    .w290 {
        width: 290px;
    }

    .w280 {
        width: 280px;
    }

    .w275 {
        width: 275px;
    }

    .w270 {
        width: 270px;
    }

    .w250 {
        width: 250px;
    }

    .w230 {
        width: 230px;
    }

    .w220 {
        width: 220px;
    }

    .w200 {
        width: 200px;
    }

    .w180 {
        width: 180px;
    }

    .w150 {
        width: 150px;
    }

    .w115 {
        width: 115px;
    }

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

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

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

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

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

                    svg {
                        fill: #895B2E;
                    }
                }

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

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

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

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

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

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

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


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

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

    // 题目}

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

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

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

        &:focus {
            outline: none;
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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



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

    ul {
        list-style-type: none;
    }

    li {
        list-style-type: none;
    }

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

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

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


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

    }

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

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

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

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

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



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

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

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

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


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

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

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

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


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

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

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

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

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


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

    .block1 {
        text-align: center;
    }

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

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


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

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

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

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

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


    .img-0 {
        width: 100%;
    }

    .img-a {
        width: 95%;
    }

    .img-b {
        width: 70%;
    }

    .img-c {
        width: 60%;
    }

    .img-d {
        width: 50%;
    }

    .img-e {
        width: 45%;
    }

    .img-f {
        width: 40%;
    }

    .img-g {
        width: 30%;
    }

    .img-h {
        width: 20%;
    }

    .img-i {
        width: 10%;
    }

    .img-j {
        width: 5%;
    }

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    sup{
        cursor: pointer;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.custom-dialog {
    overflow: hidden !important;

    .el-dialog__body {
        padding: 0;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

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

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


        .img-float {
            width: 130px;
        }

        .img-rights {
            width: 130px;
        }

        .btn-w {
            width: 42px;
        }

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

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

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

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

@media (min-width: 660px) {
    .artInitiationForAges0to3 {
        .padding-93 {
            padding: 0 93px 0px 93px;
        }

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

::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgba(125, 125, 125, 0.3);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.3);
    -webkit-border-radius: 6px;
}

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

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

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

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

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

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

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

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

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

New file
@@ -0,0 +1,989 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <div
      class="page-content"
      :style="{
        fontSize: fontSize + 'px',
        transform: `scale(${pageZoom})`,
        transformOrigin: 'center top',
      }"
    >
      <pageHeader
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <chapterOne
          v-if="showCatalogList.indexOf(2) > -1"
          :showPageList="loadPageList"
        ></chapterOne>
        <!-- <chapterTwo
          v-if="showCatalogList.indexOf(3) > -1"
          :showPageList="loadPageList"
        ></chapterTwo>
        <chapterThree
          v-if="showCatalogList.indexOf(4) > -1"
          :showPageList="loadPageList"
        ></chapterThree>
        <chapterFour
          v-if="showCatalogList.indexOf(5) > -1"
          :showPageList="loadPageList"
        ></chapterFour>
        <chapterFive
          v-if="showCatalogList.indexOf(6) > -1"
          :showPageList="loadPageList"
        ></chapterFive> -->
    </div>
  </div>
</template>

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

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

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

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

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

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

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

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

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

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

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

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

 src/books/artInitiationForAges0to3/view/index.vue

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

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

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

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

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

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

 src/books/cognitiveLanDevEduAges0to3/view/index.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>