0~3 岁婴幼儿认知与语言发展及教育样章完成

zhongshujie

1 天以前 263992109e5b4d76e545fc2bc4e2e1753af22567

0~3 岁婴幼儿认知与语言发展及教育样章完成

 .env.product

@@ -4,5 +4,5 @@
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/meetingPlanners'
# VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/'
# VUE_APP_PUBLIC_PATH = 'http://182.92.203.7:3007/books/book/artInitiationForAges0to3'
VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/childcareInstitutionsManagement/preschoolGameGuidance/kindergartenLanguageActivity/preschoolEvaluation/preschoolBasicKnowledge/practicalCareChildrenManual/OralAndBroadcasting/aurturingAndEducationAged0to3/policiesAndRegulations/kindergartenActivitiesDesignGuidance/toddlerSportsSafetyProtection/artInitiationForAges0to3/childIllnessPreventionCare/VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/childcareInstitutionsManagement/preschoolGameGuidance/kindergartenLanguageActivity/preschoolEvaluation/preschoolBasicKnowledge/practicalCareChildrenManual/OralAndBroadcasting/aurturingAndEducationAged0to3/policiesAndRegulations/kindergartenActivitiesDesignGuidance/toddlerSportsSafetyProtection/artInitiationForAges0to3/childIllnessPreventionCare"
VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/childcareInstitutionsManagement/preschoolGameGuidance/kindergartenLanguageActivity/preschoolEvaluation/preschoolBasicKnowledge/practicalCareChildrenManual/OralAndBroadcasting/aurturingAndEducationAged0to3/policiesAndRegulations/kindergartenActivitiesDesignGuidance/toddlerSportsSafetyProtection/artInitiationForAges0to3/childIllnessPreventionCare/VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/childcareInstitutionsManagement/preschoolGameGuidance/kindergartenLanguageActivity/preschoolEvaluation/preschoolBasicKnowledge/practicalCareChildrenManual/OralAndBroadcasting/aurturingAndEducationAged0to3/policiesAndRegulations/kindergartenActivitiesDesignGuidance/toddlerSportsSafetyProtection/artInitiationForAges0to3/childIllnessPreventionCare/cognitiveLanDevEduAges0to3"
VUE_APP_BOOK_ID = 'artInitiationForAges0to3'

 src/App.vue

@@ -72,6 +72,9 @@
    <toddlerSportsSafetyProtection
      v-if="activeBook.name == 'toddlerSportsSafetyProtection'"
    ></toddlerSportsSafetyProtection>
    <cognitiveLanDevEduAges0to3
      v-if="activeBook.name == 'cognitiveLanDevEduAges0to3'"
    ></cognitiveLanDevEduAges0to3>
  </div>
</template>
<script>
@@ -144,6 +147,8 @@
      import("./books/toddlerSportsSafetyProtection/view/index.vue"),
    behaviorObserveAndGuid: () =>
      import("./books/behaviorObserveAndGuid/view/index.vue"),
    cognitiveLanDevEduAges0to3: () =>
      import("./books/cognitiveLanDevEduAges0to3/view/index.vue"),
  },
  data() {
    return {
@@ -200,13 +205,13 @@
      // childIllnessPreventionCare // 0~3岁婴幼儿疾病预防
      // artInitiationForAges0to3 // 0~3岁婴幼儿艺术启蒙
      // toddlerSportsSafetyProtection // 0~3岁婴幼儿运动安全与保护
      // behaviorObserveAndGuid 婴幼儿行为观察与指导
      console.log("debugger", process.env);
      // behaviorObserveAndGuid  // 婴幼儿行为观察与指导
      // cognitiveLanDevEduAges0to3  // 0～3岁婴幼儿认知与语言发展及教育
      this.activeBook = await this.config.getBookConfig(
        process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "toddlerSportsSafetyProtection")
          (process.env.VUE_APP_ENV == "product"
            ? process.env.VUE_APP_BOOK_ID
            : "cognitiveLanDevEduAges0to3")
      );
      // this.activeBook = await this.config.getBookConfig(
      //   'http://182.92.203.7:3007/books/resource/'+

 src/assets/images/audioLogo.svg

New file
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14.24" height="19.987" viewBox="0 0 14.24 19.987"><defs><style>.a{fill:#0093ff;}</style></defs><g transform="translate(-227.018 -96)"><path class="a" d="M356,108.792h0a4.009,4.009,0,0,0,4-4V100a4.009,4.009,0,0,0-4-4h0a4.009,4.009,0,0,0-4,4v4.8A4.009,4.009,0,0,0,356,108.792Z" transform="translate(-121.859)"/><path class="a" d="M241.249,456.342a.8.8,0,1,0-1.579-.245,5.6,5.6,0,0,1-11.063,0,.8.8,0,1,0-1.579.245,7.145,7.145,0,0,0,6.311,6.041v2.446h-2.4a.8.8,0,0,0,0,1.6h6.4a.8.8,0,0,0,0-1.6h-2.4v-2.446A7.145,7.145,0,0,0,241.249,456.342Z" transform="translate(0 -350.438)"/></g></svg>

 src/books/cognitiveLanDevEduAges0to3/assets/Fonts/FZFSK.TTF

Binary files differ

 src/books/cognitiveLanDevEduAges0to3/assets/Fonts/FZLTXIHK.TTF

Binary files differ

 src/books/cognitiveLanDevEduAges0to3/assets/Fonts/FZSHJW.TTF

Binary files differ

 src/books/cognitiveLanDevEduAges0to3/assets/Fonts/FZXSSJW.TTF

Binary files differ

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

Binary files differ

 src/books/cognitiveLanDevEduAges0to3/assets/examinationList.js

New file
@@ -0,0 +1,11 @@
const testData = {
  2: {
    185: [
      95057, 96460, 96675, 96866, 97048, 97222, 97351, 97469, 97581, 97684,
      101474, 101475, 101476, 102404, 102437, 102458, 102483, 103818, 104121,
      104132, 104142, 104150, 104158, 104165, 104171,
    ],
  },
};

export default testData;

 src/books/cognitiveLanDevEduAges0to3/assets/images/0005-01.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0006-01.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0008-0101.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0014-0101.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0015-01.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0016-01.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0024-01.jpg

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0028-01.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0028-01.png

 src/books/cognitiveLanDevEduAges0to3/assets/images/0028-02.png

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

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0040-02.jpg

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

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0050-02.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0050-03.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0052-02.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0056-01.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0068-01.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0069-01.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0072-02.jpg

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

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

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0094-03.jpg

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

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

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

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

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

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0156-02.jpg

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0160-01.jpg

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0163-01.jpg

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

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0167-01.jpg

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

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0172-01.jpg

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

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

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

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

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0179-03.jpg

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0183-02.jpg

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

 src/books/cognitiveLanDevEduAges0to3/assets/images/0185-01.jpg

 src/books/cognitiveLanDevEduAges0to3/assets/images/0188-01.jpg

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

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

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

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

 src/books/cognitiveLanDevEduAges0to3/assets/main.less

New file
@@ -0,0 +1,1784 @@
.cognitiveLanDevEduAges0to3 {
    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 !important;
    }

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

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

    .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 {
        padding: 0 !important;
        display: flex;
        position: relative;

        img {
            width: 15%;
            height: auto;
            position: absolute;
            top: 10px;
            left: 0%;
        }
    }

    .headerNumber {
        font-size: 14px;
        position: absolute;
        top: 62%;
        left: 9%;
    }


    .headerText {
        font-size: 14px;
        margin-left: 16%;
        padding: 70px 0 30px 0;

    }



    .header-right {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        padding: 25px 5% 0 0;
        margin-bottom: 30px;

        div {
            width: 9%;
            text-align: center;

            img {
                width: 100%;
                height: auto;
            }
        }
    }

    .headerRight-Number {
        font-size: 14px;
    }

    .headerRight-Text {
        font-size: 14px;
        padding-bottom: 2px;
    }


    /*二级标题章标*/
    .secondsubHead-1 {
        text-align: left;
        line-height: 1.1em;
        font-size: 1em;
        text-indent: 0em;
        margin: 20% auto 0.3em auto;
        color: #888888;
    }

    .secondsubHead-2 {
        font-family: "方正新报宋";
        background-color: #7acab4;
        display: inline-block;
        align-items: center;
        text-align: left;
        color: #fff;
        border-radius: 10px;
        padding: 0px 10px;
        text-indent: 0em;
        font-size: 22px;
        line-height: 28px;
    }

    .tipes {
        background-color: #e2f2ed;
        border: 2px solid #96d3c1;
        padding: 10px;
    }



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

    .w210 {
        width: 210px;
    }

    .w200 {
        width: 200px;
    }

    .w180 {
        width: 180px;
    }

    .w150 {
        width: 150px;
    }

    .w115 {
        width: 115px;
    }

    .pdf .fm-zh {
        font-family: "方正正黑" !important;
    }

    .fm-kt {
        font-family: "kaiti" !important;
        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;
    }


    .imgBox {
        display: flex !important;
        flex-direction: column-reverse !important;
        position: relative !important;

        .img {
            color: #7acab4;
            margin: 0 !important;
            font-size: 14px !important;
            position: absolute !important;
            left: 50% !important;
            transform: translateX(-50%);
            bottom: -2% !important;
        }

        img {
            height: 80%;
        }
    }

    // 题目

    .textarea-question {
        border-color: #00aeef !important;
    }

    .textarea-question:focus {
         outline: none;
        /* 移除默认的焦点轮廓 */
    }

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

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

    // pdf 查看器
    .pdf-box {
        margin: 35px 0 20px 0;
        border: 1px solid #078fb9;
    }

    .pdf-title {
        display: flex;
        background-color: #e1f4fc;
        min-height: 25px;
        position: relative;

        .bg-img {
            width: 12%;
            position: absolute;
            top: -29.5px;
        }
    }

    .pdf-title-name {
        padding: 0 2%;
        display: flex;
        align-items: center;
        text-indent: 0em;
        margin: 0 !important;
        border-right: 1px solid #078fb9;

        img {
            cursor: pointer;
            margin-right: 10px;
        }

        .icon {
            fill: #078fb9;
        }
    }

    .pdf-title-img {
        text-indent: 1em;
        padding-right: 2%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;

        span {
            cursor: pointer;
            overflow: hidden;
        }

        img {
            cursor: pointer;
        }

        &:hover {
            text-decoration: underline;
            color: #219bc0;
        }
    }

    .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% 12% 0% 10%;
        padding-bottom: 10%;
        line-height: 30px;
    }

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

    .UnitCover {
        margin: 0 12% 0 10%;
        padding-top: 13%;
        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;
    }

    .bodyPic {
        position: relative;
    }

    .bodyPic-text {
        position: absolute;
        top: 15%;
        left: 8%;

        p {
            font-family: kaiti;
            font-size: 16px;
            line-height: 25px;
        }

        span {
            color: #006e92;
        }
    }

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

    .tl-c {
        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-h {
        width: 20%;
    }

    .img-15 {
        width: 15%;
    }


    .img-i {
        width: 10%;
    }

    .img-j {
        width: 5%;
    }


    .foreword-img-box {
        text-align: end;
        padding: 12% 0 10% 0;

        img {
            width: 30%;
        }
    }

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

    .series {
        padding: 12% 11%;
        background-color: #e1f1fa;
    }

    .openingScene {
        background-image: url("./images/0015-01.jpg");
        background-size: cover;
        background-repeat: no-repeat;

        min-height: 100%;
    }

    .quotation-box {
        padding: 15% 10% 30% 32%;
    }

    .firstTitle-l {
        font-family: "方正正黑";
        padding: 5% 13%;
        text-align: center;
        font-weight: 400;
    }


    .seriesTitle {
        font-size: 2em;
        color: #000;
        font-weight: 400;
        text-align: center;
        padding: 15% 0 10% 0;
    }

    .g-pic {
        height: 2.5em;
        vertical-align: middle;
    }

    .content {}

    .titleQuot-c {
        font-family: "方正兰亭细黑";
        color: #00aeef;
        text-indent: 0em;
        font-size: 1.7em;
        line-height: 1.3em;
        text-align: center;
        font-weight: 400;
        padding: 0 5%;
    }


    div.bk3 {
        background-color: #d6ece5;
        border: 1px solid #7acab4;
        padding: 25px 19px 20px 19px;
        margin-top: 2em;
        margin-bottom: 1em;
        position: relative;
    }

    .bk3-titOne {
        position: absolute;
        top: -18px;
        left: 20%;
    }

    .bk3-titTwo {
        position: absolute;
        top: -18px;
        left: 38%;
    }

    .bk3-titThree {
        position: absolute;
        top: -18px;
        right: 38%;
    }

    .bk3-titFour {
        position: absolute;
        top: -18px;
        right: 20%;
    }

    .bk3-top {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #fff;
        border-radius: 0 25px 0 0;
        transform: rotate(90deg);
        border-top: 1px solid #7acab4;
        border-right: 1px solid #7acab4;
        position: absolute;
        top: -2px;
        left: -2px;
        /* 旋转形成扇形 */
    }

    .bk3-top-right {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #fff;
        border-radius: 0 25px 0 0;
        transform: rotate(180deg);
        border-top: 1px solid #7acab4;
        border-right: 1px solid #7acab4;
        position: absolute;
        top: -2px;
        right: -2px;
        /* 旋转形成扇形 */
    }


    .bk3-bottom {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #fff;
        border-radius: 0 25px 0 0;
        transform: rotate(360deg);
        border-top: 1px solid #7acab4;
        border-right: 1px solid #7acab4;
        position: absolute;
        bottom: -5.5px;
        left: -2px;
        /* 旋转形成扇形 */
    }

    .bk3-bottom-right {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #fff;
        border-radius: 0 25px 0 0;
        transform: rotate(270deg);
        border-top: 1px solid #7acab4;
        border-right: 1px solid #7acab4;
        position: absolute;
        bottom: -5.5px;
        right: -2px;
        /* 旋转形成扇形 */
    }


    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: "方正正黑";
    }

    h2 {
        font-family: '方正宋黑';
        font-weight: 400;
        margin: 30px 0;
    }

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


    .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;
        font-weight: bold;
    }

    .quotation {
        font-family: "方正仿宋";
        text-align: left;
        text-indent: 2em;
        margin: 0.1em auto;
        line-height: 35px;
    }

    .titleQuot-1 {
        margin-bottom: 15px;
        font-family: "方正正黑";
        font-size: 1.1em;
        margin: 20px 0;
    }

    /*底色*/
    .bgColor {
        padding: 2px 5px;
        color: #000;
        background: #aae0f9;
    }

    // 拓展学习
    .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;
    }

    .imgdescript-title {
        color: #7acab4;
        font-size: 15px;
        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: 400;
        font-family: "方正书宋";
        margin: 10px 0;
    }

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

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

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

    }
}

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

.examination {
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

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

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

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

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

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

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

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

@font-face {
    font-family: '方正兰亭细黑';
    src: url('./Fonts/FZLTXIHK.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) {
    .cognitiveLanDevEduAges0to3 {

        .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) {
    .cognitiveLanDevEduAges0to3 {
        .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/cognitiveLanDevEduAges0to3/components/checkVideo/index.vue

New file
@@ -0,0 +1,244 @@
<template>
  <div class="video-box">
    <div class="video-title">
      <img class="bg-img" :src="type == 'video'? videoBgIcon : audioBgIcon" alt="" />
      <p class="video-title-name" v-if="type == 'video'">
        <img @click="isDisplay = !isDisplay" :src="videoIcon" alt="" />
        <span>视频资料</span>
      </p>
      <p class="video-title-name" v-else>
        <img @click="isDisplay = !isDisplay" :src="audioIcon" alt="" />
        <span>音频资料</span>
      </p>
      <p class="video-title-img" v-if="type == 'video'">
        <span> {{ videoName }}</span>
        <el-tooltip
          class="item"
          effect="dark"
          :content="localIsCollectVideo ? '点击取消' : '点击收藏'"
          placement="top-start"
        >
          <img
            :src="
              collectResourceList.findIndex((item) => item.id == videoPath) > -1
                ? collectCheck
                : collectImg
            "
            alt=""
            class="collect-btn"
            @click="handleCollect()"
          />
        </el-tooltip>
      </p>
      <p class="video-title-img" v-if="type == 'audio'">
        <span> {{ videoName }}</span>
      </p>
    </div>
    <div class="video-main" v-if="isDisplay">
      <video
        :src="videoPathSrc"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        playsinline="true"
        x5-video-orientation="h5"
        x5-video-player-fullscreen="true"
        x5-playsinline=""
        controls
        controlslist="nodownload"
        class="w100 video"
        v-if="type == 'video'"
      ></video>
      <audio
        :src="videoPathSrc"
        controls
        controlslist="nodownload"
        class="w100 video"
        v-else
      ></audio>
    </div>
  </div>
</template>

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

    handleCollect() {
      this.handleCollectResource(
        this.videoPath,
        this.videoPath,
        "",
        "视频",
        "bits",
        "视频：" + this.videoName
      );
      this.localIsCollectVideo = !this.localIsCollectVideo;
    },
    //资源收藏事件
    // resourcePath  文件路径，
    // resourceType  文件类型
    // source        文件来源
    handleCollectResource(
      id,
      md5,
      resourcePath,
      resourceType,
      source,
      resourceName
    ) {
      let list = this.collectResourceList;
      if (list.findIndex((item) => item.id == id) > -1) {
        list = list.filter((item) => item.id != id);
      } else {
        list.push({
          id,
          md5,
          resourcePath,
          resourceType,
          source,
          resourceName,
        });
      }
      this.collectResourceList = list;
      setCollectResource(this.BookId, this.collectResourceList);
    },
  },
};
</script>

<style lang="less" scoped>
.video-box {
  margin: 35px 0 20px 0;
  border: 1px solid #078fb9;
}

.video-title {
  display: flex;
  justify-content: space-between;
  background-color: #e1f4fc;
  border-bottom: 1px solid #078fb9;
  min-height: 25px;
  position: relative;

  .bg-img {
    width: 12%;
    position: absolute;
    top: -30px;
  }
}

.video-title-name {
  padding: 0 2%;
  display: flex;
  align-items: center;
  text-indent: 0em;
  margin: 0 !important;
  border-right: 1px solid #078fb9;

  img {
    cursor: pointer;
    margin-right: 10px;
  }
}

.video-title-img {
  width: 75%;
  padding-right: 2%;
  text-indent: 0em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;

  span {
    overflow: hidden;
  }

  img {
    cursor: pointer;
  }
}

.video-main {
  margin: 5% 5%;
}

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

.w100 {
  width: 100%;
}
</style>

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

New file
@@ -0,0 +1,1143 @@
<template>
  <div class="chapter" num="2">
    <!-- 30页 -->
    <div class="page-box" page="38">
      <div v-if="showPageList.indexOf(38) > -1">
        <div class="UnitCover">
          <h1 class="firstTitle-l">第二章　0～6个月婴儿认知与语言发展指导</h1>
          <div class="bodyPic mb-30">
            <img
              src="../../assets/images/0016-01.jpg"
              style="width: 100%"
              alt=""
              active="true"
            />
            <div class="bodyPic-text">
              <p class="content">
                <span class="bold">通过学习本章，你将可以：</span>
              </p>
              <p class="quotation">1．掌握0～6个月婴儿认知发展的特点。</p>
              <p class="quotation">2．掌握0～6个月婴儿语言发展的特点。</p>
              <p class="quotation">3．掌握0～6个月婴儿认知发展目标。</p>
              <p class="quotation">4．掌握0～6个月婴儿语言发展目标。</p>
              <p class="quotation">5．能进行0～6个月婴儿认知发展的环境创设。</p>
              <p class="quotation">6．能进行0～6个月婴儿语言发展的环境创设。</p>
            </div>
          </div>
          <p class="content">
            0～6个月是个体一生中成长最快的阶段，也是大脑发育的最关键时期。婴儿一直积极运用自己的感官和动作探究周围的世界，构建自己对世界万事万物的认识。他们并不像家长想象的那样“什么都不会”，而是表现出惊人的能力。
          </p>
          <h2 class="secondTitle">一、0～6个月婴儿认知与语言发展的特点</h2>
          <p class="titleQuot-1">（一）0～6个月婴儿认知发展的特点</p>
          <p class="content"><span class="bold">1．味觉知觉发展</span></p>
          <p class="content">
            这个阶段的婴儿开始能分辨不同的味道，主要是对甜、咸、苦三种味觉有不同的反应，尝到甜的味道婴儿会笑和手舞足蹈，尝到咸的味道婴儿会皱眉撇嘴，尝到苦的味道婴儿会摇头和哭泣。
          </p>
        </div>
      </div>
    </div>
    <!-- 31页 -->
    <div class="page-box" page="39">
      <div v-if="showPageList.indexOf(39) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">
            第二章　0~6个月婴儿认知与语言发展指导
          </li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">031</li>
          </div>
        </ul>
        <div class="bodystyle">
          <p class="content"><span class="bold">2．听觉知觉发展</span></p>
          <p class="content">
            这个阶段的婴儿能对熟悉或新颖的听觉刺激有反应，能转向声源处。
          </p>
          <p class="content"><span class="bold">3．视听定向能力发展</span></p>
          <p class="content">
            这个阶段的婴儿眼睛能立刻注意到面前大的玩具，眼睛能追随着人的走动而移动，能注视红球并目光追随移动，能注视自己的手。
          </p>
          <p class="content"><span class="bold">4．视觉知觉发展</span></p>
          <p class="content">
            这个阶段的婴儿能感知色彩，如红色、黄色、蓝色等，对色彩对比强烈的图样有反应，能注视约75厘米远的物体，能用较长的时间来审视物体和图形，喜欢颜色鲜艳的玩具或图画。
          </p>
          <p class="content"><span class="bold">5．适应能力发展</span></p>
          <p class="content">
            这个阶段的婴儿开始将声音和形象联系起来，试图找出声音的来源，听到歌谣和摇篮曲会手舞足蹈，听到熟悉物品的名称能用眼睛注视物品，能寻找手中丢失的东西，听到自己的名字会转头看，能根据不同的声音找不同的家人。
          </p>
          <p class="titleQuot-1">（二）0～6个月婴儿语言发展的特点</p>
          <p class="content"><span class="bold">1．能够发出一些单音节</span></p>
          <p class="content">
            这个阶段的婴儿在吃饱穿暖睡醒后，会发出一些单音，韵母发音较早，声母发音很少，主要是“h”音，有时是“m”音。当婴儿焦急或不舒服时，常发出“i”和“e”等音，而在愉快状态下则较多地发出“a”“o”“u”等音。（拓展阅读：2个月婴儿的发音）
          </p>
          <!-- pdf查看 -->
          <div class="pdf-box">
            <div class="pdf-title">
              <img class="bg-img" :src="videoBgIcon" alt="" />
              <p class="pdf-title-name">
                <svg
                  t="1717640665152"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11009"
                  width="25.098"
                  height="24.098"
                >
                  <path
                    d="M896.152 336.108l0 576.229c0 26.511-21.508 48.019-48.018 48.019L175.866 960.356c-26.511 0-48.019-21.508-48.019-48.019L127.847 112.019c0-26.511 21.508-48.019 48.019-48.019l448.179 0c26.512 0 63.527 15.508 82.031 34.013l156.064 156.064C880.645 272.582 896.152 309.597 896.152 336.108zM832.127 384.127 624.045 384.127c-26.512 0-48.02-21.508-48.02-48.019L576.025 128.025 191.873 128.025l0 768.306 640.254 0L832.127 384.127zM335.93 448.153l352.14 0c9.004 0 16.006 7.003 16.006 16.006l0 32.013c0 9.003-7.002 16.007-16.006 16.007L335.93 512.179c-9.003 0-16.006-7.003-16.006-16.007l0-32.013C319.924 455.156 326.927 448.153 335.93 448.153zM704.076 592.21l0 32.013c0 9.004-7.002 16.007-16.006 16.007L335.93 640.23c-9.003 0-16.006-7.003-16.006-16.007L319.924 592.21c0-9.003 7.003-16.006 16.006-16.006l352.14 0C697.074 576.204 704.076 583.207 704.076 592.21zM704.076 720.262l0 32.013c0 9.003-7.002 16.006-16.006 16.006L335.93 768.281c-9.003 0-16.006-7.003-16.006-16.006l0-32.013c0-9.004 7.003-16.007 16.006-16.007l352.14 0C697.074 704.255 704.076 711.258 704.076 720.262zM640.051 320.102l188.076 0c-3.002-8.505-7.502-17.009-11.002-20.511L660.563 143.029c-3.502-3.501-12.006-8-20.512-11.003L640.051 320.102z"
                    p-id="11010"
                  ></path>
                </svg>
                <span>拓展阅读</span>
              </p>
              <p class="pdf-title-img">
                <span @click="toUrl(1)"> {{ chapter002.pdfMd5[1].name }}</span>
              </p>
            </div>
          </div>
          <p class="content"><span class="bold">2．与家长面对面“交谈”</span></p>
          <p class="content">
            这个阶段的婴儿在生理需要得到满足之后，对家长的逗弄和语言刺激能用微笑、声音或者身体动作反应给予应答，好像在和家长“交谈”一样。
          </p>
        </div>
      </div>
    </div>
    <!-- 32页 -->
    <div class="page-box" page="40">
      <div v-if="showPageList.indexOf(40) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">032</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle">
          <p class="content"><span class="bold">3．发出连续的音节</span></p>
          <p class="content">
            这个阶段的婴儿的发音出现了以辅音和元音相结合的连续音节，从单音节发声过渡到重叠多音节发声的过程。（拓展阅读：4～8个月婴儿连续音节的发音）
          </p>
          <!-- pdf查看 -->
          <div class="pdf-box">
            <div class="pdf-title">
              <img class="bg-img" :src="videoBgIcon" alt="" />
              <p class="pdf-title-name">
                <svg
                  t="1717640665152"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11009"
                  width="25.098"
                  height="24.098"
                >
                  <path
                    d="M896.152 336.108l0 576.229c0 26.511-21.508 48.019-48.018 48.019L175.866 960.356c-26.511 0-48.019-21.508-48.019-48.019L127.847 112.019c0-26.511 21.508-48.019 48.019-48.019l448.179 0c26.512 0 63.527 15.508 82.031 34.013l156.064 156.064C880.645 272.582 896.152 309.597 896.152 336.108zM832.127 384.127 624.045 384.127c-26.512 0-48.02-21.508-48.02-48.019L576.025 128.025 191.873 128.025l0 768.306 640.254 0L832.127 384.127zM335.93 448.153l352.14 0c9.004 0 16.006 7.003 16.006 16.006l0 32.013c0 9.003-7.002 16.007-16.006 16.007L335.93 512.179c-9.003 0-16.006-7.003-16.006-16.007l0-32.013C319.924 455.156 326.927 448.153 335.93 448.153zM704.076 592.21l0 32.013c0 9.004-7.002 16.007-16.006 16.007L335.93 640.23c-9.003 0-16.006-7.003-16.006-16.007L319.924 592.21c0-9.003 7.003-16.006 16.006-16.006l352.14 0C697.074 576.204 704.076 583.207 704.076 592.21zM704.076 720.262l0 32.013c0 9.003-7.002 16.006-16.006 16.006L335.93 768.281c-9.003 0-16.006-7.003-16.006-16.006l0-32.013c0-9.004 7.003-16.007 16.006-16.007l352.14 0C697.074 704.255 704.076 711.258 704.076 720.262zM640.051 320.102l188.076 0c-3.002-8.505-7.502-17.009-11.002-20.511L660.563 143.029c-3.502-3.501-12.006-8-20.512-11.003L640.051 320.102z"
                    p-id="11010"
                  ></path>
                </svg>
                <span>拓展阅读</span>
              </p>
              <p class="pdf-title-img">
                <span @click="toUrl(2)"> {{ chapter002.pdfMd5[2].name }}</span>
              </p>
            </div>
          </div>

          <p class="content"><span class="bold">4．形成对话的雏形</span></p>
          <p class="content">
            在用语音与家长“对话”时，这个阶段的婴儿出现与家长轮流“说”的倾向，即家长说一句，婴儿发几个音，待家长再说一句，婴儿再发几个音。当家长和婴儿之间的一段“对话”结束后，婴儿会用发一个或几个音来主动地引起另一段“对话”，从而使这种交流延续下去，这表明婴儿开始敏锐地感知到语言交往的基本要求。
          </p>
          <p class="content">
            <span class="bold">5．使用不同的语调表达自己的态度</span>
          </p>
          <p class="content">
            这个阶段的婴儿会用尖叫声或急促上扬的语调，伴以蹬脚、摆手的动作，表明自己不愿意的态度。当目的达到、要求得到满足后，婴儿会用平静温和的语调或表情来表达高兴。
          </p>
          <p class="content">
            <span class="bold">6．辨别家长语言中语气语调的变化</span>
          </p>
          <p class="content">
            这个阶段的婴儿能从不同语调的语言中判断出家长的态度。当家长用愉快的语气与婴儿说话时，语调升扬，婴儿能用微笑和喁喁作声做出反应。当家长用生气的语气与婴儿说话时，语调下降，婴儿能用睁大眼睛和哭做出反应。
          </p>
          <h2 class="secondTitle">二、0～6个月婴儿认知与语言发展目标</h2>
          <p class="titleQuot-1">（一）0～6个月婴儿认知发展目标</p>
          <p class="content">
            <span class="bold">1．0～3个月婴儿认知发展目标</span>
          </p>
          <p class="content">
            （1）仰卧时手脚会动，两侧力量及动的频率幅度差异不大。
          </p>
          <p class="content">
            （2）听到突发大声响时，惊吓地出现双臂快速向外伸展的反射。
          </p>
          <p class="content">（3）抱直立，脚触及平面，出现原始踏步反射。</p>
        </div>
      </div>
    </div>
    <!-- 33页 -->
    <div class="page-box" page="41">
      <div v-if="showPageList.indexOf(41) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">
            第二章　0~6个月婴儿认知与语言发展指导
          </li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">033</li>
          </div>
        </ul>
        <div class="bodystyle">
          <p class="content">
            （4）仰卧时在脑后用摇铃逗引，会转头（左、右侧）。俯趴时尝试抬头，仅维持瞬间。
          </p>
          <p class="content">
            （5）以手指触碰其手掌，手指紧握成拳，出现抓握反射。
          </p>
          <p class="content">
            （6）用手指抚摸一侧脸颊，会将头转向该侧，表现寻找乳头的反射。
          </p>
          <p class="content">（7）视力不到0.1，可见30厘米距离内的物体。</p>
          <p class="content">（8）眼前（20～30厘米）出现人脸，会专注看。</p>
          <p class="content">（9）移动中的物体能吸引其注意。</p>
          <p class="content">（10）刺激脸部会微笑。</p>
          <p class="content">（11）自发式微笑回应对他的疼爱。</p>
          <p class="content">（12）对他伸舌数次，他会模仿做出类似动作。</p>
          <p class="content">
            （13）喜欢看自己的手（将他的手在他眼前晃一晃，会看自己的手，可维持1～3秒）。
          </p>
          <p class="content">（14）认得妈妈。</p>
          <p class="content">
            <span class="bold">2．4～6个月婴儿认知发展目标</span>
          </p>
          <p class="content">（1）喜欢看自己的手和手中抓的物品。</p>
          <p class="content">（2）喜欢看移动中的物体。</p>
          <p class="content">（3）到陌生地方会好奇地四处张望。</p>
          <p class="content">（4）和他说话时，他会以注视、微笑、发声等回应。</p>
          <p class="content">（5）认识家人及家中宠物，可从照片中认出妈妈。</p>
          <p class="content">（6）会玩躲猫猫游戏。</p>
          <p class="content">
            （7）看不到人会哭；哭泣时，如果有人靠近，即停止哭，看到人会笑。
          </p>
          <p class="content">
            （8）对光谱的感受度已接近成人的水平，能看出红、蓝、绿、黄等四色。
          </p>
          <p class="content">（9）用表情、动作等表达情绪，微笑迎接人。</p>
          <p class="titleQuot-1">（二）0～6个月婴儿语言发展目标</p>
          <p class="content">
            <span class="bold">1．1个月婴儿语言发展目标</span>
          </p>
          <p class="content">
            （1）听到突发大声响引发惊吓反射，双臂快速向外伸展。
          </p>
        </div>
      </div>
    </div>
    <!-- 34页 -->
    <div class="page-box" page="42">
      <div v-if="showPageList.indexOf(42) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">034</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            （2）听到温柔的声音，停止原有动作静下来，头转向声源专注倾听。
          </p>
          <p class="content">（3）辨认母亲的声音。</p>
          <p class="content">（4）对着他说话，他会嚅动嘴唇，好像要说话。</p>
          <p class="content">（5）饿或痛时会哭。</p>
          <p class="content">（6）发出的声音单调、没变化。</p>
          <p class="content">（7）刺激脸部会微笑。</p>
          <p class="content">
            <span class="bold">2．2个月婴儿语言发展目标</span>
          </p>
          <p class="content">
            （1）比起父亲低沉的声调，更喜欢母亲较高亢的声音。
          </p>
          <p class="content">
            （2）用声音逗他，会发出不同的声音，如尖叫等回应。
          </p>
          <p class="content">
            <span class="bold">3．3个月婴儿语言发展目标</span>
          </p>
          <p class="content">会发出“a”“ei”“ou”“u”等简单韵母。</p>
          <p class="content">
            <span class="bold">4．4个月婴儿语言发展目标</span>
          </p>
          <p class="content">（1）会吹口水泡泡。</p>
          <p class="content">（2）对他说话时，会发声回应。</p>
          <p class="content">（3）试着发“ga-ga”“a-gu”等声音。</p>
          <p class="content">
            <span class="bold">5．5个月婴儿语言发展目标</span>
          </p>
          <p class="content">（1）认识家长的声音，从其音调中感知对方情绪。</p>
          <p class="content">
            （2）下巴会有节奏地动，舌头灵活，吸奶时不会漏奶。
          </p>
          <p class="content">（3）尝试发不同的韵母、声母。</p>
          <p class="content">（4）因高兴而尖叫。</p>
          <p class="content">
            <span class="bold">6．6个月婴儿语言发展目标</span>
          </p>
          <p class="content">（1）听到逐渐接近的脚步声会兴奋。</p>
          <p class="content">（2）有人叫唤他的名字时，会有回应。</p>
          <p class="content">（3）可听出熟悉音乐中小小的改变。</p>
          <p class="content">（4）发韵母与声母的简单音，如“ka”“da”“ma”等。</p>
          <p class="content">（5）会吹气。</p>
          <p class="content">（6）喃喃自语，对着镜中人说话。</p>
        </div>
      </div>
    </div>
    <!-- 35页 -->
    <div class="page-box" page="43">
      <div v-if="showPageList.indexOf(43) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">
            第二章　0~6个月婴儿认知与语言发展指导
          </li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">035</li>
          </div>
        </ul>
        <div class="bodystyle">
          <h2 class="secondTitle">
            三、促进0～6个月婴儿认知发展的环境创设与活动指导及家庭操作案例
          </h2>
          <p class="titleQuot-1">
            （一）0～6个月婴儿认知发展的环境创设与活动指导
          </p>
          <p class="content">
            <span class="bold">1．1个月婴儿认知发展的环境创设与活动指导</span>
          </p>
          <div class="img-rights w250 openImgBox">
            <img
              class="img-0"
              src="../../assets/images/0048-01.jpg"
              alt=""
              active="true"
            />
            <p class="imgdescript">图2-1　抬头追视</p>
          </div>
          <span>
            <p class="content">
              （1）家长应在婴儿经常活动的区域内摆放色彩鲜艳的带有声响的玩具。家长把色彩鲜艳带有声响的玩具，放在距婴儿眼睛25厘米处，边摇边缓慢地移动玩具，使婴儿的视线能随着玩具和声响移动（图2-1）。
            </p>
            <p class="content">
              （2）家长应在婴儿生活的环境内，多带他走动，一边走动一边给婴儿讲解各个区域的用途和物品名称，尽快让婴儿熟悉他生活的环境，培养其良好的情绪和安全感。
            </p>
          </span>
          <p class="content">
            （3）家长应在日常生活中，多给婴儿听轻柔的讲话声、音乐声或玩具声，经常抚摸和搂抱婴儿，关注、理解婴儿各种哭声等表达需求的信息（拓展阅读：家长应如何应对婴儿的各种哭），并对婴儿各种哭声做出适宜的反应满足其需求，让婴儿充分享受母爱。
          </p>
          <p class="content">
            <span class="bold">2．2个月婴儿认知发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，丰富婴儿的视听刺激，通过听音乐、玩带声响玩具、看人脸等游戏，促进婴儿认知能力的发展。
          </p>
          <p class="content">
            （2）家长应在日常生活中，多与婴儿亲切柔和地交流，经常抚摸、搂抱婴儿，加强母子情感交流，培育母子“安全型”依恋情绪。
          </p>
          <p class="content">
            （3）家长应在日常生活中，培养婴儿良好的行为习惯，多带婴儿去户外活动，使其保持愉快情绪。
          </p>
          <!-- pdf查看 -->
          <div class="pdf-box">
            <div class="pdf-title">
              <img class="bg-img" :src="videoBgIcon" alt="" />
              <p class="pdf-title-name">
                <svg
                  t="1717640665152"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11009"
                  width="25.098"
                  height="24.098"
                >
                  <path
                    d="M896.152 336.108l0 576.229c0 26.511-21.508 48.019-48.018 48.019L175.866 960.356c-26.511 0-48.019-21.508-48.019-48.019L127.847 112.019c0-26.511 21.508-48.019 48.019-48.019l448.179 0c26.512 0 63.527 15.508 82.031 34.013l156.064 156.064C880.645 272.582 896.152 309.597 896.152 336.108zM832.127 384.127 624.045 384.127c-26.512 0-48.02-21.508-48.02-48.019L576.025 128.025 191.873 128.025l0 768.306 640.254 0L832.127 384.127zM335.93 448.153l352.14 0c9.004 0 16.006 7.003 16.006 16.006l0 32.013c0 9.003-7.002 16.007-16.006 16.007L335.93 512.179c-9.003 0-16.006-7.003-16.006-16.007l0-32.013C319.924 455.156 326.927 448.153 335.93 448.153zM704.076 592.21l0 32.013c0 9.004-7.002 16.007-16.006 16.007L335.93 640.23c-9.003 0-16.006-7.003-16.006-16.007L319.924 592.21c0-9.003 7.003-16.006 16.006-16.006l352.14 0C697.074 576.204 704.076 583.207 704.076 592.21zM704.076 720.262l0 32.013c0 9.003-7.002 16.006-16.006 16.006L335.93 768.281c-9.003 0-16.006-7.003-16.006-16.006l0-32.013c0-9.004 7.003-16.007 16.006-16.007l352.14 0C697.074 704.255 704.076 711.258 704.076 720.262zM640.051 320.102l188.076 0c-3.002-8.505-7.502-17.009-11.002-20.511L660.563 143.029c-3.502-3.501-12.006-8-20.512-11.003L640.051 320.102z"
                    p-id="11010"
                  ></path>
                </svg>
                <span>拓展阅读</span>
              </p>
              <p class="pdf-title-img">
                <span @click="toUrl(3)"> {{ chapter002.pdfMd5[3].name }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 36页 -->
    <div class="page-box" page="44">
      <div v-if="showPageList.indexOf(44) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">036</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            <span class="bold">3．3个月婴儿认知发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，发展婴儿随物移动视线和学会寻找消失的带声音的人和物的能力。家长跟婴儿继续玩眼睛追逐物体移动的游戏，还可以用手绢玩藏猫猫的游戏。
          </p>
          <p class="content">
            （2）家长应引导婴儿适应室内、室外的环境变化，促进婴儿注意、观察能力、听觉能力的发展。
          </p>
          <p class="content">
            （3）家长应在日常生活中，丰富婴儿感知觉的刺激，给婴儿提供多看、多听、多摸、多尝的教育机会，鼓励婴儿用多感官认知同一事物。
          </p>
          <p class="content">
            （4）家长应在日常生活中，多与婴儿说笑逗乐，用张口、吐舌各种表情和不同语调声音逗引婴儿，鼓励其学会模仿面部表情和微笑，保持愉快情绪和安全感，培养其健全人格。
          </p>
          <p class="content">
            （5）家长应在日常生活中，逗引婴儿对亲近的人和声音产生反应，从微笑发展到笑出声，体验愉快情绪，重视母子、父子交流，建立良好的亲子关系。
          </p>
          <p class="content">
            <span class="bold">4．4个月婴儿认知发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，给婴儿从大到小地出示玩具，逗引婴儿能注视较小的玩具。
          </p>
          <p class="content">
            （2）在日常生活中，除了经常面对面注视和说话外，家长还应变换方向或距离与婴儿对话，吸引婴儿注视和倾听，经常呼唤婴儿的名字，让婴儿对家长的呼唤有转头、注视等反应。
          </p>
          <p class="content">
            （3）家长应在日常生活中，经常带婴儿到户外活动，引导其看行驶的车辆、奔跑的小狗、飞翔的鸟，锻炼婴儿的视觉追踪能力。
          </p>
          <p class="content">
            （4）家长应在日常生活中，多给婴儿提供照镜子的机会。家长抱着婴儿在镜子面前做各种表情，让婴儿逐渐学会分辨各种表情，学会对不同表情做出不同的反应，并学会表达自己的感受。
          </p>
          <p class="content">
            （5）家长应在日常生活中，提供能引起婴儿手眼脑协调一致追随移动事物的机会。家长在婴儿前方25厘米处摇动拨浪鼓，当婴儿注意到拨浪鼓在响时，引导婴儿盯着拨浪鼓，张开手想要抓拨浪鼓（图2-2），然后再把拨浪鼓慢慢移到婴儿能看到的最左边、最右边摇动，培养婴儿手、眼、脑的协调发展。
          </p>
        </div>
      </div>
    </div>
    <!-- 37页 -->
    <div class="page-box" page="45">
      <div v-if="showPageList.indexOf(45) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">
            第二章　0~6个月婴儿认知与语言发展指导
          </li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">037</li>
          </div>
        </ul>
        <div class="bodystyle">
          <div class="img-rights w200 openImgBox">
            <img
              class="img-0"
              src="../../assets/images/0050-01.jpg"
              alt=""
              active="true"
            />
            <p class="imgdescript">图2-2　抓握拨浪鼓</p>
          </div>
          <span>
            <p class="content">
              <span class="bold">5．5个月婴儿认知发展的环境创设与活动指导</span>
            </p>
            <p class="content">
              （1）家长应在日常生活中，提供发展婴儿寻找从视线中突然消失事物的能力的机会。家长用一个滚动的、能发出声音的玩具，从桌子一头慢慢滚动到另一头（从桌子左边滚到右边、从桌子右边滚到左边），在此过程中，婴儿都能随着声音伸头转身追寻玩具（图2-3、图2-4）。如果婴儿能做到随声追寻玩具，家长再用不发声的玩具训练婴儿追寻玩具的能力。
            </p>
          </span>
          <div class="fl al-c openImgBox">
            <div class="tl-c">
              <img
                src="../../assets/images/0050-02.jpg"
                style="width: 80%"
                alt=""
                active="true"
              />
              <p class="imgdescript">图2-3　追视移动中的物件</p>
            </div>
            <div class="tl-c">
              <img
                src="../../assets/images/0050-03.jpg"
                style="width: 80%"
                alt=""
                active="true"
              />
              <p class="imgdescript">图2-4　追视移动中的物件</p>
            </div>
          </div>
          <p class="content mt-20">
            （2）家长应在日常生活中，把镜子作为促进婴儿认知发展的重要学习工具。家长抱着婴儿照镜子，引导婴儿看镜子里家长和婴儿的五官和表情，逗引婴儿笑，还可以引导婴儿在镜中认知自己的五官。
          </p>
          <p class="content">
            （3）家长应在日常生活中，经常用愉快、亲切、温柔的态度和情感照顾婴儿，多和婴儿说话，培养婴儿愉快的情绪，多给婴儿听儿歌和音乐，使之对熟悉的音乐有愉快的情绪反应。
          </p>
          <p class="content">
            （4）家长应在日常生活中，教婴儿认识家庭成员，让婴儿能辨认自己的家人。
          </p>
          <p class="content">
            （5）家长应在日常生活中，给婴儿提供他们喜爱的玩具。婴儿喜欢色彩鲜艳、发光、有声响的玩具，看到这些玩具，婴儿会高兴得手舞足蹈，主动伸手抓握和玩耍，通过玩玩具促进了婴儿认知能力的发展。
          </p>
        </div>
      </div>
    </div>
    <!-- 38页 -->
    <div class="page-box" page="46">
      <div v-if="showPageList.indexOf(46) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">038</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            （6）家长应在日常生活中，经常给婴儿做抚触按摩操，促进其触觉知觉能力的发展。
          </p>
          <p class="content">
            <span class="bold">6．6个月婴儿认知发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，拓展婴儿的认知范围，多带婴儿到户外活动，让其多接触社会和人，为婴儿提供与人交往的环境，尤其要让婴儿多和小朋友玩，培养婴儿适应人和环境的能力，避免婴儿见陌生人时躲避害怕和哭闹的现象。
          </p>
          <p class="content">
            （2）家长应在日常生活中，引导婴儿认知他熟悉并喜爱的各种生活用品的名称，如灯、冰箱等，鼓励婴儿在听到名称后用眼睛看、用手指摸，促进婴儿手、眼、脑的协调发展。
          </p>
          <p class="content">
            （3）家长应在日常生活中，引导婴儿分辨家长的不同表情和情绪。家长通过做各种表情和发出与之对应的语调，引导婴儿观察家长不同的面部表情，学习分辨具有明显情绪的表情、语调，婴儿能对亲切的语言表示愉快，能对严厉的语言表现出不安。
          </p>
          <p class="content">
            （4）家长应在日常生活中，培养婴儿寻找消失在视线外的物品能力。家长轻摇花铃棒，引起婴儿的注意后，走到婴儿视线以外的地方，在婴儿身体一侧摇响花铃棒，逗引他去寻找。当婴儿头转向响声，家长摇响花铃棒，当着婴儿的面把花铃棒塞入毛巾里，只露出部分花铃棒，问“花铃棒在哪儿呢”，家长可以用眼神示意，引导婴儿去寻找。
          </p>
          <p class="titleQuot-1">（二）0～6个月婴儿认知发展的家庭操作案例</p>
          <p class="content">
            <span class="bold">1.视觉听觉活动之抬头追视</span>
          </p>
          <p class="content">
            （1）活动目标：通过逗引婴儿追视玩教具，发展婴儿的视觉听觉。
          </p>
          <p class="content">（2）活动准备：带声响的逗引玩教具。</p>
          <checkVideo
            :videoPath="videoData[0].videoSrc"
            :videoName="videoData[0].videoNameSrc"
            :type="videoData[0].type"
            :BookId="bookIdSrc"
            :isCollectVideo="chapterData.isCollectVideoOne"
            @saveVideoStatus="saveVideoStatus"
          >
          </checkVideo>
        </div>
      </div>
    </div>
    <!-- 39页 -->
    <div class="page-box" page="47">
      <div v-if="showPageList.indexOf(47) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">
            第二章　0~6个月婴儿认知与语言发展指导
          </li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">039</li>
          </div>
        </ul>
        <div class="bodystyle">
          <p class="content">
            （3）活动过程：婴儿趴在地垫上，家长晃动逗引玩教具放到婴儿面前，逗引婴儿头随着逗引玩教具转向身体的一侧，然后再晃动逗引玩教具放到婴儿面前，使婴儿的头随着逗引玩教具转向身体的另一侧。（视频资源：视觉听觉活动之抬头追视）
          </p>
          <p class="content">
            （4）注意事项：婴儿吃完奶半小时后，再进行这项活动，避免婴儿吐奶或溢奶。
          </p>
          <p class="content">
            （5）延伸指导：家长在婴儿安静觉醒状态下，可通过在婴儿眼前晃动手绢、一边面向婴儿微笑一边慢慢移动手绢等方式，发展婴儿追视能力。
          </p>
          <p class="content"><span class="bold">2．触觉活动之洗手擦脸</span></p>
          <p class="content">
            （1）活动目标：通过家长与婴儿的友爱互动，促进婴儿触觉的发展，增强亲子关系，发展婴儿将具体事物与抽象语言一一对应的能力。
          </p>
          <div class="img-rights w150 openImgBox">
            <img
              class="img-0"
              src="../../assets/images/0052-02.jpg"
              alt=""
              active="true"
            />
            <p class="imgdescript">图2-5　洗手擦脸</p>
          </div>
          <span>
            <p class="content">
              （2）活动准备：儿歌《洗手擦脸》（音频资源：洗手擦脸），歌词：小小手儿洗一洗，小小脸儿擦一擦，瞧瞧宝宝多干净，快让妈妈亲一亲。
            </p>
            <p class="content">（3）活动过程</p>
            <p class="content">
              婴儿平躺，家长坐在婴儿脚下方（图2-5），与婴儿面对面微笑，注视婴儿并与婴儿说话。
            </p>
            <p class="content">
              家长根据歌词，带着婴儿愉快地做如下的动作（视频资源：触觉活动之洗手擦脸）。
            </p>
            <p class="content">
              歌词第一遍时：“小小手儿洗一洗”，家长握住婴儿的一只手，从手掌向指尖稍稍用力推，让婴儿的手掌打开；“小小脸儿擦一擦，瞧瞧宝宝多干净”，家长用双手掌给婴儿的面部做按摩，稍稍用力，促进婴儿面部神经末梢的发展；“快让妈妈亲一亲”，家长充满爱意地亲吻婴儿，把满满的爱传递给婴儿。
            </p>
            <p class="content">
              歌词第二遍时：“小小手儿洗一洗”，家长握住婴儿的另一只手，重复歌词第一遍时的动作。
            </p>
          </span>
          <p class="content">
            歌词第三、四遍时：“小小手儿洗一洗”，家长握住婴儿的两只手，使其双手的手心相触，带动婴儿做双手手心上下摩擦的动作，还可以带着婴儿做一只手手心用力抚摸另一只手手背的动作；重复歌词第一遍时的动作。
          </p>
        </div>
      </div>
    </div>
    <!-- 40页 -->
    <div class="page-box" page="48">
      <div v-if="showPageList.indexOf(48) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">040</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            （4）延伸指导：欢迎家里所有的成员都带着婴儿玩这个活动，有助于婴儿建立良好的亲子关系。
          </p>
          <checkVideo
            :videoPath="videoData[1].videoSrc"
            :videoName="videoData[1].videoNameSrc"
            :type="videoData[1].type"
            :BookId="bookIdSrc"
            :isCollectVideo="chapterData.isCollectVideoTwo"
            @saveVideoStatus="saveVideoStatus"
          >
          </checkVideo>
          <checkVideo
            :videoPath="videoData[2].videoSrc"
            :videoName="videoData[2].videoNameSrc"
            :type="videoData[2].type"
            :BookId="bookIdSrc"
            :isCollectVideo="chapterData.isCollectVideoTwo"
            @saveVideoStatus="saveVideoStatus"
          >
          </checkVideo>
          <h2 class="secondTitle">
            四、促进0～6个月婴儿语言发展的环境创设与活动指导及家庭操作案例
          </h2>
          <p class="titleQuot-1">
            （一）0～6个月婴儿语言发展的环境创设与活动指导
          </p>
          <p class="content">
            <span class="bold">1．1个月婴儿语言发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，给婴儿提供听各种各样自然界声音及日常生活中发出的各种声音的机会，如电话铃声、小鸟叫的声音等，发展婴儿的听觉知觉能力，提高其对外界环境中声音的适应能力。
          </p>
          <p class="content">
            （2）家长应在日常生活中，引导婴儿对家长说话感兴趣。家长与婴儿面对面说话时，可以故意高声和大声说话，提高婴儿对家长说话声尤其是高音的敏感度。
          </p>
          <p class="content">
            （3）家长应在日常生活中，提供给婴儿发音的机会。家长与婴儿面对面微笑说话，逗引婴儿发出细小的喉音。
          </p>
          <p class="content">
            <span class="bold">2．2个月婴儿语言发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，促进婴儿的听觉知觉的发展。家长多给婴儿听优美的古典音乐，唱儿歌。
          </p>
          <p class="content">
            （2）家长应在日常生活中，引导婴儿对家长的逗引有反应。家长可以经常与婴儿面对面交流，多发出如“a”“o”“u”等单音，多和婴儿说话，逗引婴儿发出“咕咕”声和类似“a”“o”“u”的音。
          </p>
          <p class="content">
            <span class="bold">3．3个月婴儿语言发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，提供给婴儿分辨不同人的说话声音及其语调的机会。家长与婴儿交谈时，可以经常变换语调，逗引婴儿发音、笑出声，使其愿意与人对话。
          </p>
        </div>
      </div>
    </div>
    <!-- 41页 -->
    <div class="page-box" page="49">
      <div v-if="showPageList.indexOf(49) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">
            第二章　0~6个月婴儿认知与语言发展指导
          </li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">041</li>
          </div>
        </ul>
        <div class="bodystyle">
          <p class="content">
            （2）这个阶段的婴儿哭声明显减少并开始分化，家长应在日常生活中，掌握婴儿各种哭声的含义，并采取适宜的方法，满足婴儿的各种需要。
          </p>
          <p class="content">
            （3）家长应在日常生活中，引导婴儿发单个韵母音。家长用亲切温柔的声音与婴儿交谈，逗引婴儿自然发出单个韵母“a”“o”“u”“e”或其他发音。
          </p>
          <p class="content">
            <span class="bold">4．4个月婴儿语言发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，引导婴儿认识到不同声音代表不同的含义。家长留意观察婴儿的各种发音，并及时给予不同的反应，促使婴儿认知到不同的声音会得到家长不同的反馈。
          </p>
          <p class="content">
            （2）家长应在日常生活中，促进婴儿听觉知觉能力的发展。家长应多给婴儿听优美的音乐、各种动物的叫声、自然界中的各种声音。
          </p>
          <p class="content">
            （3）家长应在日常生活中，引导婴儿与家长玩相互模仿的发音游戏。这个阶段的婴儿有明显的发音愿望，在婴儿情绪愉快时，家长可用愉快的语气和表情，或用玩具，让他发出“呢”“啊”“咯”的笑声，逗引婴儿主动发声，家长富有感情地与他“对话”，引导婴儿用“咿呀”声与人交流（拓展阅读：成人应如何与婴儿对话）。
          </p>
          <p class="content">
            （4）家长应在日常生活中，引导婴儿发出某些辅音。家长与婴儿交谈，引导其发出“b”“p”“m”“d”“n”等辅音。
          </p>
          <!-- pdf查看 -->
          <div class="pdf-box">
            <div class="pdf-title">
              <img class="bg-img" :src="videoBgIcon" alt="" />
              <p class="pdf-title-name">
                <svg
                  t="1717640665152"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11009"
                  width="25.098"
                  height="24.098"
                >
                  <path
                    d="M896.152 336.108l0 576.229c0 26.511-21.508 48.019-48.018 48.019L175.866 960.356c-26.511 0-48.019-21.508-48.019-48.019L127.847 112.019c0-26.511 21.508-48.019 48.019-48.019l448.179 0c26.512 0 63.527 15.508 82.031 34.013l156.064 156.064C880.645 272.582 896.152 309.597 896.152 336.108zM832.127 384.127 624.045 384.127c-26.512 0-48.02-21.508-48.02-48.019L576.025 128.025 191.873 128.025l0 768.306 640.254 0L832.127 384.127zM335.93 448.153l352.14 0c9.004 0 16.006 7.003 16.006 16.006l0 32.013c0 9.003-7.002 16.007-16.006 16.007L335.93 512.179c-9.003 0-16.006-7.003-16.006-16.007l0-32.013C319.924 455.156 326.927 448.153 335.93 448.153zM704.076 592.21l0 32.013c0 9.004-7.002 16.007-16.006 16.007L335.93 640.23c-9.003 0-16.006-7.003-16.006-16.007L319.924 592.21c0-9.003 7.003-16.006 16.006-16.006l352.14 0C697.074 576.204 704.076 583.207 704.076 592.21zM704.076 720.262l0 32.013c0 9.003-7.002 16.006-16.006 16.006L335.93 768.281c-9.003 0-16.006-7.003-16.006-16.006l0-32.013c0-9.004 7.003-16.007 16.006-16.007l352.14 0C697.074 704.255 704.076 711.258 704.076 720.262zM640.051 320.102l188.076 0c-3.002-8.505-7.502-17.009-11.002-20.511L660.563 143.029c-3.502-3.501-12.006-8-20.512-11.003L640.051 320.102z"
                    p-id="11010"
                  ></path>
                </svg>
                <span>拓展阅读</span>
              </p>
              <p class="pdf-title-img">
                <span @click="toUrl(4)"> {{ chapter002.pdfMd5[4].name }}</span>
              </p>
            </div>
          </div>
          <p class="content">
            <span class="bold">5．5个月婴儿语言发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，引导婴儿认知自己的名字。家长用固定名字称呼婴儿，经常呼唤他的名字，当他对呼唤有反应时，家长做出鼓励和表扬的积极反馈，使婴儿认知到自己与名字的关系。
          </p>
          <p class="content">
            （2）家长应在日常生活中，引导婴儿无意发出“爸”或“妈”的音。这个阶段的婴儿开始咿呀学语，家长与婴儿面对面说话，用愉快的语气与表情发出“ba-ba”“ma-ma”等重复音节，引导婴儿注视家长的口型变化，主动模仿，家长每发一个重复音节后要有停顿，留给婴儿模仿的时间。
          </p>
        </div>
      </div>
    </div>
    <!-- 42页 -->
    <div class="page-box" page="50">
      <div v-if="showPageList.indexOf(50) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">042</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle">
          <p class="content">
            （3）家长应在日常生活中，提供给婴儿更多感受语言的教育机会。家长对婴儿经常接触到的事物要反复告知婴儿事物的名称、用途和特征。
          </p>
          <p class="content">
            （4）家长应在日常生活中，引导婴儿辨别4种基本面部表情。家长做出各种表情给婴儿看，引导婴儿分辨惊讶、害怕、生气和高兴4种面部表情的含义。
          </p>
          <p class="content">
            <span class="bold">6．6个月婴儿语言发展的环境创设与活动指导</span>
          </p>
          <p class="content">
            （1）家长应在日常生活中，引导婴儿与家长一起“啊啊”“呜呜”地聊天。在婴儿高兴时，家长与他面对面，慢慢而清晰地发出各种简单音节，例如，“ba-ba”“ma-ma”“da-da”“na-na”“wa-wa”“pai-pai”“wu-wu”，引导婴儿看着家长的口型模仿发音，经常反复进行，一般在6个月时婴儿能发出4～5个音节，并用这些音节与家长聊天。
          </p>
          <p class="content">
            （2）家长应在日常生活中，引导婴儿理解动作与语言的对应关系。这时期家长与婴儿说话依然很重要，家长要使婴儿懂得语言和很多动作和物品之间的联系，如听儿歌时做动作，做动作时加上语言，促进婴儿理解动作与语言的对应关系。
          </p>
          <p class="content">
            （3）家长应在日常生活中，引导婴儿听懂家长的语言信号。家长引导婴儿听到主要家庭成员名称时找到对应的人，如妈妈说“爸爸回来了”婴儿会马上转头看爸爸，婴儿听到“妈妈在哪里呢”时会马上朝妈妈看。
          </p>
          <p class="titleQuot-1">（二）0～6个月婴儿语言发展的家庭操作案例</p>
          <p class="content">
            <span class="bold">语言输入活动之我爱妈妈</span>
          </p>
          <p class="content">
            （1）活动目标：通过家长朗读和音乐播放儿歌的方法，锻炼婴儿的记忆力和听觉理解力，延长婴儿注意力的时间，提高婴儿对语言的理解力。
          </p>
          <p class="content">
            （2）活动准备：儿歌《我爱妈妈》（音频资源：我爱妈妈），歌词：我有一个好妈妈，每天都在照顾我。我要做个乖宝宝，好好爱着好妈妈。
          </p>
        </div>
      </div>
    </div>
    <!-- 43页 -->
    <div class="page-box" page="51">
      <div v-if="showPageList.indexOf(51) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">
            第二章　0~6个月婴儿认知与语言发展指导
          </li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">043</li>
          </div>
        </ul>
        <div class="bodystyle">
          <div class="center openImgBox">
            <img
              src="../../assets/images/0056-01.jpg"
              style="width: 40%"
              alt=""
              active="true"
            />
            <p class="imgdescript">图2-6　我爱妈妈</p>
          </div>
          <p class="content">
            （3）活动过程：家长和婴儿找一个最舒服的姿势，面对面地看着对方，家长面带微笑地给婴儿背诵《我爱妈妈》的儿歌，把儿歌中美好的含义通过语言、声调和表情，温柔地传递给婴儿（图2-6、视频资源：语言输入活动之我爱妈妈）。每天最好选择在婴儿安静觉醒状态时，分别在早、中、晚三个时间段给婴儿背诵1～3遍《我爱妈妈》的儿歌。
          </p>
          <p class="content">
            （4）延伸指导：不背诵的时候，家长可以从网上找来《我爱妈妈》的歌曲，或自己录音，把《我爱妈妈》的歌曲放给婴儿听，这样做一是可以给婴儿体会同一首儿歌内容不同形式的听觉输入方式，二是可以增加婴儿听觉输入的次数，让婴儿尽快熟悉儿歌的内容，为以后婴儿顺利接说《我爱妈妈》做好准备。
          </p>
          <checkVideo
            :videoPath="videoData[3].videoSrc"
            :videoName="videoData[3].videoNameSrc"
            :type="videoData[3].type"
            :BookId="bookIdSrc"
            :isCollectVideo="chapterData.isCollectVideoThree"
            @saveVideoStatus="saveVideoStatus"
          >
          </checkVideo>
          <div class="fl al-c jc-c center mt-30 mb-20">
            <img class="img-i" src="../../assets/images/0040-01.jpg" alt="" />
            <p class="titleQuot-c">本章小结</p>
            <img class="img-i" src="../../assets/images/0040-02.jpg" alt="" />
          </div>
          <p class="quotation">
            本章内容包括四部分，分别介绍了0～6个月各个阶段婴儿认知和语言发展的特点、目标，婴幼儿家长关于0～6个月各个阶段婴儿认知和语言发展的指导内容，以及认知与语言教育活动案例。本章内容的重点是了解0～6个月各个阶段婴儿认知与语言教育的实施要点，为便于理解掌握，学习者可在阅读文本的同时扫码浏览活动视频，加强实践运用能力。
          </p>
        </div>
      </div>
    </div>
    <!-- 44页 -->
    <div class="page-box" page="52">
      <div v-if="showPageList.indexOf(52) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">044</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle">
          <div class="fl al-c jc-c center mt-30 mb-20">
            <img class="img-i" src="../../assets/images/0040-01.jpg" alt="" />
            <p class="titleQuot-c">小任务</p>
            <img class="img-i" src="../../assets/images/0040-02.jpg" alt="" />
          </div>
          <p class="quotation">
            1．美美出生1个月了，家里人怕有些声音过大会吓到美美，所以家人与美美说话时、和他人之间说话时都会用很小的声音。但刮大风或下大雨时，外物拍打窗户的声音却没法避免，家人很苦恼，想寻求解决办法。请结合本章介绍的婴幼儿认知与语言发展特点，想一想美美家人的做法是否有不当之处，并结合他们的苦恼给出合适的照护和教育建议。
          </p>
          <textarea
            v-model="videoQuestionData.one"
            placeholder="请输入内容"
            rows="5"
            style="max-width: 100%; width: 100%"
            class="fz-16 fm-son textarea-question"
            @change="saveVideoQuestionData"
          ></textarea>
          <p class="quotation">
            2．小叶子出生3个月了，妈妈在小叶子安静觉醒状态下，总是让她躺在床上，眼看天花板，妈妈认为：“现在孩子太小了，什么也不会，睡醒后躺着就好了。”请你作为小叶子妈妈的亲朋好友，给小叶子制订一份促进小叶子认知与语言发展的教育方案，并指导小叶子妈妈操作。
          </p>
          <textarea
            v-model="videoQuestionData.two"
            placeholder="请输入内容"
            rows="5"
            style="max-width: 100%; width: 100%"
            class="fz-16 fm-son textarea-question"
            @change="saveVideoQuestionData"
          ></textarea>
          <p class="quotation">
            3．找不少于5个6个月大的婴儿，请他们的家长记录婴儿一周内发出的所有 音，根据每个婴儿各自的发音情况，给每个婴儿写一份语言发展指导方案。
          </p>
          <textarea
            v-model="videoQuestionData.three"
            placeholder="请输入内容"
            rows="5"
            style="max-width: 100%; width: 100%"
            class="fz-16 fm-son textarea-question"
            @change="saveVideoQuestionData"
          ></textarea>
          <div class="fl al-c jc-c center mt-30 mb-30">
            <img class="img-i" src="../../assets/images/0040-01.jpg" alt="" />
            <p class="titleQuot-c">常见问题解答</p>
            <img class="img-i" src="../../assets/images/0040-02.jpg" alt="" />
          </div>
          <p class="content">
            <span class="bgColor"><span class="fm-zh">问题1</span></span
            >　<span class="fm-zh">跟半岁婴儿玩的藏猫猫游戏有哪些玩法？</span>
          </p>
          <p class="content">
            <span class="bgColor"
              ><span class="quotation">解&ensp;答</span> </span
            >　<span class="quotation"
              >藏猫猫可以有很多种玩法。当婴儿的动作更灵活、反应更灵敏时，家长可以创造一些由他来主导的游戏。</span
            >
          </p>
          <p class="quotation">
            1．家长将一块柔软的布盖在婴儿头上，然后问：“宝宝在哪儿呢？”当婴儿理解这个游戏后，就会自己拿掉布，笑着把头露出来。
          </p>
          <p class="quotation">
            2．让婴儿面向家长平躺，将他的两条腿都抬起来，说“起，起，起”，直到婴儿双腿挡住家长的脸，然后分开婴儿的两条腿大喊：“藏猫猫！”当婴儿明白怎么玩以后，就会自己移动两腿（这在换尿布的时候是非常好的游戏）。
          </p>
          <p class="quotation">
            3．家长藏在门后或家具后，在婴儿能看到的地方留一只脚或一条胳膊做提示。婴儿会很高兴地爬过来找家长。
          </p>
        </div>
      </div>
    </div>
    <!-- 45页 -->
    <div class="page-box" page="53">
      <div v-if="showPageList.indexOf(53) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">
            第二章　0~6个月婴儿认知与语言发展指导
          </li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">045</li>
          </div>
        </ul>
        <div class="bodystyle">
          <p class="quotation">
            4．家长先将头“藏”在大浴巾下面，让婴儿把浴巾拿掉，然后把浴巾盖在婴儿头上，家长来拿掉，轮流这么做。
          </p>
          <p class="content mt-10">
            <span class="bgColor"><span class="fm-zh">问题2</span></span
            >　<span class="fm-zh">婴儿有必要听音乐吗？</span>
          </p>
          <p class="content">
            <span class="bgColor"
              ><span class="quotation">解&ensp;答</span></span
            >　<span class="quotation"
              >美国研究者安德森（J.W.Anderson）研究总结：大多数婴儿已经具备了敏锐的辨别不同频率声音的能力，而6个月的婴儿已经能感知协和音程的变化，表示出了对协和音程的偏好；婴儿还能感觉出话语中的感情因素，表现出对带有愉悦感情的语音的偏好；婴儿还能觉察出自然完整的乐句与不完整的乐句之间的差异，对完整的乐句，流畅的音符表示出了偏好。婴儿已有识别旋律轮廓的心理参与的听觉能力。</span
            >
          </p>
          <p class="quotation">
            另有研究者（Krumhansl和Juscyk）在1990年做了婴儿对完整与不完整的乐句偏好的实验研究。实验使用了两种音乐样本，一是西方古典音乐作品中自然、完整的乐句；二是从西方古典音乐作品原有乐句中截出的一段，没有开始，也没有结束。两种样本有类似的音高及长度。实验中，婴儿坐在妈妈身上，播音器上有一个闪烁的灯吸引婴儿的注意。两种音乐样本随机播放。结果是24个婴儿中有22个表现出对完整乐句的偏好。在完整乐句的音乐样本播放时，他们把头偏向播放器，表现出长时间的兴趣，而在不完整乐句的音乐样本播放时，他们两秒不到就把头扭开。
          </p>
          <div class="fl al-c jc-c center mt-30 mb-30">
            <img class="img-i" src="../../assets/images/0040-01.jpg" alt="" />
            <p class="titleQuot-c">云测试</p>
            <img class="img-i" src="../../assets/images/0040-02.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 46页 -->
    <!-- <div class="page-box" page="54">
      <div v-if="showPageList.indexOf(54) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">046</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle"></div>
      </div>
    </div> -->
    <!-- 47页 -->
    <!-- <div class="page-box" page="55">
      <div v-if="showPageList.indexOf(55) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">
            第二章　0~6个月婴儿认知与语言发展指导
          </li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">047</li>
          </div>
        </ul>
        <div class="bodystyle"></div>
      </div>
    </div> -->
    <!-- 48页 -->
    <!-- <div class="page-box" page="56">
      <div v-if="showPageList.indexOf(56) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">048</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle"></div>
      </div>
    </div> -->
    <preView
      :isClear="dialogVisible"
      :md5="p_md5"
      :pdfTitle="somePdfTitleValue"
      ref="pdfDialogRef"
    ></preView>
  </div>
</template>

<script>
import checkVideo from "../../components/checkVideo/index.vue";
import preView from "@/components/pdfview/index.vue";
import dialogExaminations from "@/components/dialogExaminations/index.vue";
export default {
  name: "chapterTwo",
  props: {
    showPageList: {
      type: Array,
    },
    interfaceQuestion: {
      type: Object,
    },
  },
  components: {
    checkVideo,
    preView,
    dialogExaminations,
  },
  data() {
    return {
      bookIdSrc: this.config.activeBook.bookId,
      videoData: [
        {
          videoSrc: "f1261ba8fe2f387be46aa33b878201af",
          videoNameSrc: "视觉听觉活动：抬头追视",
          type: "video",
        },
        {
          videoSrc: "dba2eaa14adb68bd7983f053564a2d05",
          videoNameSrc: "洗手洗脸",
          type: "audio",
        },
        {
          videoSrc: "93c28e2c157ddc803c73a62c770cd9b1",
          videoNameSrc: "触觉活动：洗手洗脸",
          type: "video",
        },
        {
          videoSrc: "092871238db875f9adbe83f6e00418e5",
          videoNameSrc: "我爱妈妈",
          type: "audio",
        },
        {
          videoSrc: "d610de9238a9a39f8c735783a8ccd268",
          videoNameSrc: "语言输入活动：我爱妈妈",
          type: "video",
        },
      ],
      chapterData: {
        isCollectVideoOne: false,
        isCollectVideoTwo: false,
        isCollectVideoThree: false,
      },
      //pdf阅读器
      videoBgIcon: require("../../assets/images/0028-02.png"),
      dialogVisible: false,
      pdfDialogRef: "",
      somePdfTitleValue: "",
      p_md5: "",
      chapter002: {
        pdfMd5: {
          1: {
            md5: "3095299df66209a0214f797292a07875",
            name: "拓展阅读2-1：2个月婴儿的发音",
          },
          2: {
            md5: "32c6d688583b0e86ed29713ecb4975e7",
            name: "拓展阅读2-2：4～8个月婴儿连续音节的发音",
          },
          3: {
            md5: "ff29eae9a55a1576ac7bac69ba59c9a8",
            name: "拓展阅读2-3：家长应如何应对婴儿的各种哭",
          },
          4: {
            md5: "85bdd8c60a285e0a6448d84d46ad9492",
            name: "拓展阅读2-4：成人应如何与婴儿对话",
          },
        },
      },
      // 题目相关
      dialogVisibleOne: false,
      themeColor: "#7acab4",
      questionNum: 0,
      questionTitleMain: "",
      chapter001: {
        question: {
          1: {
            questionTitleMain: "第五章　婴幼儿常见运动伤害的处理与急救",
            questionNum: 185,
          },
        },
      },
      // 简答题
      videoQuestionData: {
        one:"",
        two:"",
        three:"",
      },
    };
  },
  mounted() {
    const videoQuestionData = localStorage.getItem(
      "cognitiveLanDevEduAges0to3-book-chapter002-videoQuestionData"
    );
    if (videoQuestionData) {
      this.videoQuestionData = JSON.parse(videoQuestionData);
    }

  },

  methods: {
    toUrl(val) {
      if (val) {
        this.p_md5 = this.chapter002.pdfMd5[val].md5;
        this.somePdfTitleValue = this.chapter002.pdfMd5[val].name;
        this.$refs.pdfDialogRef.openDialog();
      }
    },

    saveVideoQuestionData() {
      localStorage.setItem(
        "cognitiveLanDevEduAges0to3-book-chapter002-videoQuestionData",
        JSON.stringify(this.videoQuestionData)
      );
    },

    // openQuestion(num) {
    //   if (num) {
    //     this.questionNum = this.chapter001.question[num].questionNum;
    //     this.questionTitleMain =
    //       this.chapter001.question[num].questionTitleMain;
    //     this.$refs.dialogRef.openDialogQuestion();
    //   }
    // },
  },
};
</script>
<style lang="less" scoped>
hr {
  margin-left: 0;
  margin-bottom: 25px;
  width: 25%;
  border: none;
  height: 1px;
  background-color: #000;
}

.header-right-img {
  width: 100%;
  display: inline-block;
  justify-content: center;
  padding-top: 40%;
  min-height: 600px !important;

  img {
    width: 35%;
    height: auto;
  }
}
</style>

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

New file
@@ -0,0 +1,267 @@
<template>
  <div class="chapter" num="1">
    <!-- 封面 -->
    <div class="page-box mt-20" page="1" style="min-height: auto">
      <div v-if="showPageList.indexOf(1) > -1">
        <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
      </div>
    </div>
    <div class="page-box mt-20" page="2" style="min-height: auto">
      <div v-if="showPageList.indexOf(2) > -1">
        <img class="img-0" alt="" src="../../assets/images/feiYe.jpg" />
      </div>
    </div>
    <!-- 介绍页面 -->
    <div class="page-box" page="3">
      <div v-if="showPageList.indexOf(3) > -1">
        <div style="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.4(2024.1重印)
          </p>
          <p class="left3 td-1 fm-hyss fz-14">
            (婴幼儿保育与教育指导丛书/刘馨主编)
          </p>
          <p class="left3 td-1 fm-hyss fz-14">ISBN 978-7-303-25215-2</p>
          <p class="left3 fm-hyss fz-14 mt-20 mb-20">
            I·①0… Ⅱ，①李… Ⅲ，①婴幼儿-语言教学-幼儿师范学校-教材 W·① G613.2
          </p>
          <p class="left3 fm-hyss fz-14">
            中国版本图书馆CP数据核字(2019)第235842号
          </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"
              >编&nbsp;辑&nbsp;部&nbsp;电&nbsp;话:</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">印　　张：12</p>
          <p class="left fm-hyss fz-14">字　　数：250千字</p>
          <p class="left fm-hyss fz-14">版　　次：2020年4月第1版</p>
          <p class="left fm-hyss fz-14">印　　次：2024年1月第3次印刷</p>
          <p class="left fm-hyss fz-14">定　　价：48.00元</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="series">
          <h1 class="seriesTitle">丛&ensp;书&ensp;序</h1>
          <p class="preface">
            学前教育事业是一项伟大、神圣而又十分广阔的事业。在所有学段中，学前教育是基础教育的启蒙阶段，更是人一生发展的奠基阶段；它不仅涉及学前教育机构的教育，也包括家庭教育和社会教育。
          </p>
          <p class="preface">
            从学前教育的研究对象及内涵来看，目前基本达成共识的阐释是联合国教科文组织1981年在法国巴黎召开的国际学前教育协商会议中提出的，将学前教育界定为：“能够激起从初生至小学的儿童（小学入学年龄因国家不同，一般在5～7岁之间）的学习愿望，给他们学习体验且有利于他们整体发展的活动总和。”此次会议还进一步明确提出，学前教育的关注与研究对象是贯穿整个学龄前阶段的儿童，包括初生的婴孩。
          </p>
          <p class="preface">
            随着脑科学、心理学、社会学和教育学等领域研究的不断深入与发展，越来越多的研究表明，儿童的早期体验、早期经验和早期发展不仅关系到儿童当前的成长和幸福，还对其一生的发展产生重要而深远的影响。0～3岁是人生的开端，是人的发展的重要和关键时期，把教育的视线向前延伸至儿童出生（甚至更早）的那一刻，已成为世界许多国家政府的共识，也是学前教育改革与发展的重要趋势。
          </p>
          <p class="preface">
            自20世纪六七十年代开始，一些国家已率先从政府层面开始将0～3岁儿童的早期发展与教育逐步纳入政府主导或支持的公共服务体系之中，如美国、瑞典、法国、新西兰、英国、加拿大、日本、韩国等。尤其是政府加大支持力度，针对贫困人群开展儿童早期发展国家行动，为0～3岁儿童提供免费的早期保育与教育服务。进入21世纪以来，联合国教科文组织、联合国儿童基金会、经济合作与发展组织等国际组织先后对一些国家在儿童早期发展政策及实践效果方面进行了分析与评估，其研究结果表明，开展高质量的0～3岁儿童早期发展与教育项目具有巨大的社会效益和经济效益。
          </p>
        </div>
      </div>
    </div>
    <!-- 丛书序 -->
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">002</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle">
          <p class="preface">
            近些年来，我国政府也将0～3岁儿童早期教育工作纳入国家决策议程，进入实施阶段。从2001年国务院印发《中国儿童发展纲要（2001—2010年）》，明确提出要“发展0～3岁儿童的早期教育”“建立并完善0～3岁儿童早期教育管理体制”，到2010年《国家中长期教育改革和发展规划纲要（2010—2020年）》中强调学前教育阶段的发展任务中要“重视0～3岁婴幼儿教育”，2011年《中国儿童发展纲要（2011—2020年）》中进一步强调要“促进0～3岁儿童早期综合发展”“以幼儿园和社区为依托，为0～3岁儿童及其家庭提供早期保育和教育指导”“加快培养0～3岁儿童早期教育专业化人才”，以及2013年教育部启动部分地区0～3岁婴幼儿早期教育试点，再到2019年《国务院办公厅关于促进3岁以下婴幼儿照护服务发展的指导意见》的出台及国家卫生健康委颁布《托育机构设置标准（试行）》和《托育机构管理规范（试行）》等重要文件等，显示出国家正在从政策和管理层面积极推进和落实0～3岁儿童早期教育指导工作和托育工作。
          </p>
          <p class="preface">
            当前，我国一些地区已经开展了面向0～3岁儿童和家庭的儿童早期教育指导工作。随着国家和各地政府对0～3岁婴幼儿托育工作的积极推进和大力支持，面向低龄幼儿开办的托育机构也在逐渐增多。
          </p>
          <p class="preface">
            儿童的健康成长关系到人类的未来，关系到千家万户的幸福。科学、适宜的儿童早期教育需要高素质、懂专业的保教人员和管理者，也需要爱儿童、懂儿童、会科学育儿的家长。为了适应我国0～3岁儿童早期教育指导和托育工作的需要，支持相关行业从业人员的培养与培训，也为了更好地服务于婴幼儿家长，北京师范大学出版社特邀京津两地从事0～3岁儿童早期教育研究和实践的多名专家组成了“婴幼儿保育与教育指导丛书”的研究与编写团队。其中既包括高校中从事0～3岁儿童早期发展与教育研究的教师和区级从事早期教育指导的教研员，也包括具有丰富实践经验的儿童保健与疾病防治的医务工作者，以及来自一线、多年从事0～3岁儿童早期教育指导和托育工作的教师与管理者等。我们致力于将科学、适宜的儿童早期教育理念与专业理论知识、实践指导有机结合，更好地提升儿童早期教育工作者和管理者的专业素养、专业知识与实际操作能力，提高家长科学育儿的能力。
          </p>
        </div>
      </div>
    </div>
    <!-- 丛书序 -->
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">丛书序</li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">003</li>
          </div>
        </ul>
        <div class="bodystyle">
          <p class="preface">
            本套丛书从0～3岁婴幼儿身心发育与发展的年龄特点出发，围绕0～3岁婴幼儿的生活照护、卫生保健、发展与促进以及早期教育机构的组织与管理展开，构建成三大模块的内容体系，计划包括10余册。
          </p>
          <p class="preface">
            第一个模块为“婴幼儿养育基础”。该模块包括《0～3岁婴幼儿生长发育与心理发展概论》《0～3岁婴幼儿营养与喂养》《0～3岁婴幼儿日常照护》和《0～3岁婴幼儿常见疾病与意外伤害预防及护理》等。
          </p>
          <p class="preface">
            第二个模块为“婴幼儿教育指导”。该模块包括《0～3岁婴幼儿动作发展与教育》《0～3岁婴幼儿认知与语言发展及教育》《0～3岁婴幼儿情感与社会性发展及教育》《0～3岁婴幼儿艺术启蒙教育》等。
          </p>
          <p class="preface">
            第三个模块为“早期教育机构的组织与管理”。该模块包括《早期教育指导机构组织与管理》《托育服务机构组织与管理》等。
          </p>
          <p class="preface">
            真诚地期望本套丛书能满足正在从事或即将从事0～3岁儿童早期教育指导和托育服务工作的保教人员和管理者的专业学习、教研与培训的需求，同时，也能为广大婴幼儿家长及关心儿童发展事业的社会工作者提供科学育儿和专业指导的支持与帮助。
          </p>
          <p class="right-info">刘　馨</p>
          <p class="right-info">2019年10月于北京师范大学</p>
        </div>
      </div>
    </div>
    <!-- 前言 -->
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
        <div class="page-father">
          <div class="bodystyle">
            <div class="foreword-img-box">
              <img src="../../assets/images/0008-0101.jpg" alt="" />
            </div>
            <p class="preface">
              党的二十大报告指出“我们要坚持教育优先发展、科技自立自强、人才引领驱动，加快建设教育强国、科技强国、人才强国，坚持为党育人、为国育才，全面提高人才自主培养质量，着力造就拔尖创新人才，聚天下英才而用之。”
            </p>
            <p class="preface">
              党的二十大报告首次将“实施科教兴国战略，强化现代化建设人才支撑”作为一个单独部分，充分体现了教育的基础性、战略性地位，为2035年建成教育强国指明了新的前进方向。新修订的《职业教育法》明确了职业教育是与普通教育具有同等重要地位的教育类型，并指出“要加快培养托育、护理、康养、家政等方面技术技能人才”。因此，为适应新时代托育和学前专业人才培养需求，落实立德树人的根本任务。
            </p>
            <p class="preface">
              蒙台梭利认为：“一个人的智力发展和形成概念的方法在很大程度上先取决于认知与语言的发展。”婴幼儿认知与语言的发展是一个连续的、有秩序的、有规律的过程，是一个由量变到质变的过程，受遗传、环境、教育、营养等多种因素的影响，每个婴幼儿认知与语言的发展虽各有特色，但在认知与语言发展顺序和发展特点上有着共同的特点。
            </p>
            <p class="preface">
              本书是针对婴幼儿认知与语言发展特点及教育活动设计编写的教师指导用书。本书所界定的婴幼儿年龄范围为0～3岁，0～1岁为婴儿期，1～3岁为幼儿期。本书是作者基于20年的一线实践与培训经验，并吸收了当前国内外0～3岁婴幼儿认知与语言发展和教育新近理论与研究成果编写而成。内容注重理论与实践相结合，在精练概述婴幼儿认知与语言发展及教育的理论的同时，配有大量便于应用的活动指导方案和增进理解的拓展学习资源，既保证了知识学习的系统性，又兼顾了技能训练的可操作性。
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 前言 -->
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <ul class="header-left">
          <img src="../../assets/images/0005-01.jpg" alt="" />
          <li class="headerNumber">002</li>
          <li class="headerText">0~3 岁婴幼儿认知与语言发展及教育</li>
        </ul>
        <div class="bodystyle">
          <p class="preface">
            本书内容共六章，第一章综合介绍了婴幼儿认知与语言发展及教育的相关理论、影响因素和发展策略，第二到第五章主要介绍了四个年龄段（0～6个月、7～12个月、1～2岁、2～3岁）婴幼儿认知与语言发展的特点、目标、环境创设指导及家庭操作案例。第六章主要介绍了保教机构中婴幼儿认知与语言教育的方法、对家长的指导方法、教育活动设计与指导等理论知识及相关案例。
          </p>
          <p class="preface">本书在内容与体例设计上体现了以下特点：</p>
          <p class="preface">
            第一，突出早教指导的理念。党的二十大报告指出“我们深入贯彻以人民为中心的发展思想，在幼有所育、学有所教、劳有所得、病有所医、老有所养、住有所居、弱有所扶上持续用力，人民生活全方位改善。”促进婴幼儿认知与语言发展需要家庭与社区、早教机构等在遵循婴幼儿发展规律的前提下相互协同，多方合作。早教机构加强师德师风建设，培养高素质教师队伍，弘扬尊师重教社会风尚，要向家长传递科学育儿知识，帮助家长提高育儿水平。
          </p>
          <p class="preface">
            第二，教育活动设计的针对性强。本书将0～3岁婴幼儿认知与语言发展的过程分为0～6个月、7～12个月、1～2岁、2～3岁这四个年龄段，围绕婴幼儿能力发展和年龄特点进行活动设计，旨在帮助教师及家长理解、把握0～3岁婴幼儿认知与语言发展的特点与规律，使各年龄段认知与语言活动目标更加明确，教育活动的针对性更强。
          </p>
          <p class="preface">
            第三，强调实用性和可操作性。优化人口发展战略，建立生育支持政策体系，降低生育、养育、教育成本。本书作为婴幼儿保教人员培养与培训用书，内容上注重理论联系实际，偏重实践性、应用性知识的阐述，提供了丰富的认知与语言指导活动案例，强调实际操作能力的培养。
          </p>
          <p class="preface">
            第四，图文并茂，资源丰富。书中结合婴幼儿认知与语言发展的相关内容，穿插“拓展阅读”“音频资源”“视频资源”等栏目，通过丰富的照片、图表、案例、音频及视频资源对纸质图书内容进行补充和完善，使本书内容更加生动活泼、通俗易懂，推进教育数字化，建设全民终身学习的学习型社会、学习型大国。其中音频资料来源于宝宝吧网站（www.baobao88.com），在此表示感谢。
          </p>
        </div>
      </div>
    </div>
    <!-- 前言 -->
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
        <ul class="header-right">
          <li class="headerRight-Text">丛书序</li>
          <div>
            <img src="../../assets/images/0006-01.jpg" alt="" />
            <li class="headerRight-Number">003</li>
          </div>
        </ul>
        <div class="bodystyle">
          <p class="preface">
            教育是国之大计、党之大计。培养什么人、怎样培养人、为谁培养人是教育的根本问题。育人的根本在于立德。全面贯彻党的教育方针，落实立德树人根本任务，培养德智体美劳全面发展的社会主义建设者和接班人。本书是为即将从事早期教育工作和已具备一定早期教育经验的新手教师编写的培训用书，同时也可作为相关教育工作者、育婴师及婴幼儿家长的参考读物。
          </p>
          <p class="preface">
            在此，诚挚感谢丛书主编刘馨老师和于晓晴编辑提出的宝贵意见，以及对本书部分内容进行过审读的中华女子学院夏菡老师。由于0～3岁婴幼儿早期教育工作在我国还处于起步阶段，可供借鉴的国内外研究资料较少，加之作者水平和能力有限，因此编写内容难免存在一些问题和疏漏，敬请广大同行和读者批评指正！
          </p>
          <p class="right-info">李营</p>
          <p class="right-info">2020年3月</p>
        </div>
      </div>
    </div>
    <!-- 开篇情景 -->
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1" style="height: 100%">
        <div class="openingScene">
          <img class="img-0" src="../../assets/images/0014-0101.jpg" alt="" />
          <div class="quotation-box">
            <p class="quotation">
              桦桦刚出生时，只会哭、睡和吃奶。6个月时，桦桦可以通过手和嘴探索世界，会对声音做出回应。12个月时，桦桦会用很多不同的方式（摇晃、敲击、抛出去、扔到地上）探索世界，会说“爸爸”和“妈妈”。24个月时，桦桦会按照形状和颜色排列物体，会玩角色扮演游戏，会使用简单的词组表达需求。36个月时，桦桦会理解并执行包含3部分的指令，掌握一些基本的语法规则，讲出最长5～6个词的句子。
            </p>
            <p class="quotation">
              桦桦跟众多婴幼儿一样，与生俱来对世界有着独特的感受和观察的角度，有着学习力和探索力，从呱呱坠地的那一刻起，便开始了生命的探索之旅。他们对这未知的世界充满了好奇，充满了憧憬。他们什么都想知道，他们观察、尝试、比较，在探索中自得其乐。而作为家长和教育工作者，我们应该做些什么？我们如何建立一个婴幼儿认知与语言发展的支持系统？如何营造一个关心和支持婴幼儿早期认知与语言发展的氛围？如何增进对婴幼儿的了解、提高保育与教育能力，以便让自己成为合格的教养人或早期教育工作者？翻开这本书，你会找到所需的答案。
            </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/cognitiveLanDevEduAges0to3/view/components/index.vue

@@ -0,0 +1,992 @@
<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(2) > -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(2) > -1"
            :showPageList="loadPageList"
            :interfaceQuestion="questionDataMap"
          ></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 getQuestionList from "@/assets/methods/examination";
//   import testData from "../../assets/examinationList";
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, 48);
      //   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/cognitiveLanDevEduAges0to3/view/index.vue

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

@@ -547,7 +547,10 @@
            // 添加页码
            this.loadPageList.push(Number(page));
            const catalog = catalogDom.getAttribute("num");
            console.log(this.questionDataMap[page],11);
            if (!this.questionDataMap[page]) {
   
              
              if (testData && testData[catalog]) {
                if (testData[catalog][page]) {
                  if (Array.isArray(testData[catalog][page])) {

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

@@ -1222,19 +1222,8 @@
            this.tableData = JSON.parse(bookQuestion);
        }

        const videoData = localStorage.getItem("practicalCareChildrenManual-book-chapter001-video");
        if (videoData) {
            this.chapterData = JSON.parse(videoData);
        }
    },
    methods: {
        saveVideoStatus() {
            this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
            localStorage.setItem(
                "practicalCareChildrenManual-book-chapter001-video",
                JSON.stringify(this.chapterData)
            );
        },
        setBookQuestion() {
            localStorage.setItem(
                "practicalCareChildrenManual-book-chapter01-tableData",

 src/books/toddlerSportsSafetyProtection/assets/Fonts/FZNBSK.TTF

Binary files differ

 src/books/toddlerSportsSafetyProtection/assets/examinationList.js

New file
@@ -0,0 +1,11 @@
const testData = {
  2: {
    185: [
      95057, 96460, 96675, 96866, 97048, 97222, 97351, 97469, 97581, 97684,
      101474, 101475, 101476, 102404, 102437, 102458, 102483, 103818, 104121,
      104132, 104142, 104150, 104158, 104165, 104171,
    ],
  },
};

export default testData;

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

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

 src/books/toddlerSportsSafetyProtection/assets/main.less

@@ -188,6 +188,10 @@
        justify-content: space-around
    }

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

    .mr-70 {
        margin-right: 70px;
    }
@@ -270,10 +274,18 @@


    .header-right {
        min-height: 100%;
        overflow: hidden;
        min-width: 12%;
        padding: 0 !important;
        margin: 0 !important;
        position: relative;

    }

    .header-right-imgBottom {
        position: absolute;
        bottom: -2%;

    }

@@ -335,10 +347,11 @@
        text-align: left;
        color: #7acab4;
        margin-bottom: 10px;
        font-size: 12px;

        span {
            font-family: "方正细圆";
            font-size: 14px;
            font-size: 12px;
            position: absolute;
            left: 25%;
            bottom: 20%;
@@ -356,15 +369,17 @@
    }

    .secondsubHead-2 {
        font-family: "方正新报宋";
        background-color: #7acab4;
        display: inline-block;
        align-items: center;
        text-align: left;
        color: #fff;
        border-radius: 10px;
        padding: 0px 10px;
        text-indent: 0em;
        font-size: 18px;
        line-height: 24px;
        font-size: 22px;
        line-height: 28px;
    }

    .tipes {
@@ -397,6 +412,15 @@
        &:focus {
            outline: none;
        }
    }
    // 文本框
    .textarea-question {
        border-color: #7acab4 !important;
    }

    .textarea-question:focus {
         outline: none;
        /* 移除默认的焦点轮廓 */
    }

    .textarea-box {
@@ -1112,7 +1136,7 @@


    p {
        font-family: "方正书宋";
        font-family: "方正新报宋";
        margin-top: 0em;
        margin-bottom: 0.2em;
        text-indent: 2em;
@@ -1183,6 +1207,7 @@
    .img-h {
        width: 20%;
    }

    .img-h {
        width: 20%;
    }
@@ -1220,15 +1245,19 @@
    }

    .seriesTitle {
        display: inline-block;
        font-size: 1.5em;
        color: #fff;
        font-weight: 400;
        background-color: #7acab4;
        padding-left: 1%;
        padding-right: 8%;
        background: linear-gradient(135deg, #7acab4, #7acab4 50%, transparent 50%, transparent 100%);
        background: linear-gradient(135deg, #7acab4, #7acab4 80%, transparent 50%, transparent 100%);
        margin-bottom: 5px;
        margin-top: 5px;

        span{
            width: auto;
        }
    }

    .rotate-up {
@@ -1252,7 +1281,6 @@
    }

    .content {
        font-size: 1em;
        line-height: 25px;
    }

@@ -1404,10 +1432,6 @@
        font-weight: bold;
    }

    .imgdescript {
        color: #7acab4;
    }

    .quotation {
        font-family: "汉仪楷体", "ETrump KaiTi", "方正仿宋", "FZFSJW--GB1-0";
        font-size: 0.95em;
@@ -1419,6 +1443,7 @@
    }

    .titleQuot-1 {
        font-family: "方正书宋";
        color: #7acab4;
        font-size: 1.1em;
    }
@@ -1464,7 +1489,15 @@
    }

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

    .imgdescript-title {
        color: #7acab4;
        font-size: 15px;
        text-indent: 0em;
        text-align: center;
    }
@@ -1483,8 +1516,9 @@
    }

    .bold {
        color: #b0ddcf;
        // color: #b0ddcf;
        font-weight: bold;
        font-family: "方正书宋";
    }

    .noteContent {
@@ -1505,9 +1539,27 @@
    }
}

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

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

    }
}

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


    .pdfBox-component {
        width: 100%;
@@ -1620,6 +1672,13 @@
    }
}

.examination {
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

.header_title {
    display: flex;
    justify-content: space-between;
@@ -1645,6 +1704,11 @@
    src: url('./Fonts/hyg6gjm.ttf');
}

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

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

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

@@ -1,5 +1,5 @@
<template>
  <div class="chapter" num="2">
  <div class="chapter" num="10">
    <!-- 1页 -->
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">

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

@@ -4,10 +4,13 @@
    <div class="page-box" page="163">
      <div v-if="showPageList.indexOf(163) > -1">
        <div class="UnitCover">
          <h1 class="seriesTitle">第五章&nbsp;</h1>
          <h1 class="seriesTitle mb-20">
            婴幼儿常见运动伤害的处理与急救&nbsp;
          </h1>
          <div class="seriesTitle">
            <span style="margin-right: 0px;">第五章</span>
          </div>
          <br />
          <div class="seriesTitle mb-20">
            <span style="margin-right: 70px;">婴幼儿常见运动伤害的处理与急救</span>
          </div>
          <p class="rotate-up">^</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
@@ -16,12 +19,12 @@
          <p class="rotate-down">v</p>
          <p class="rotate-down">v</p>
          <p class="rotate-down mb-20">v</p>
          <p class="content">
          <p class="content td-0">
            <img class="g-pic" src="../../assets/images/0013_01.jpg" alt="" />
          </p>
          <p class="quotation">1．理解运动伤害处理的原则。</p>
          <p class="quotation">2．掌握运动伤害的判断与处理方法。</p>
          <p class="content">
          <p class="content td-0">
            <img class="g-pic" src="../../assets/images/0013_02.jpg" alt="" />
          </p>
          <div class="bodyPic openImgBox">
@@ -32,7 +35,7 @@
              active="true"
            />
          </div>
          <p class="content">
          <p class="content td-0">
            <img class="g-pic" src="../../assets/images/0013_04.jpg" alt="" />
          </p>
          <p class="quotation">
@@ -82,21 +85,26 @@
            <p class="content">
              运动伤害事件出现后正确的判断和处理流程对救护的效果起着决定性作用。幼教机构和家长应熟悉正确的处理流程，为应对紧急情况做好准备。幼教机构应提前制订运动伤害事件紧急处理程序预案。预案里应包括不同运动伤害事件的类型、疏散、急救常识和处理流程等。在出现运动伤害事件后可以按照以下流程处理。
            </p>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
          </div>
          <ul class="header-right">
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">155</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">155</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -188,7 +196,9 @@
            <p class="content td-0">
              <img class="img-h" src="../../assets/images/0015_01.jpg" alt="" />
            </p>
            <p class="imgdescript">急性运动伤害遵循PRICE原则（见图5-3）</p>
            <p class="imgdescript-title">
              急性运动伤害遵循PRICE原则（见图5-3）
            </p>
            <div class="img-rights w210 openImgBox`">
              <img
                src="../../assets/images/0169-03.jpg"
@@ -220,16 +230,18 @@
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">157</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">167</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -267,7 +279,7 @@
              3．冰敷还是热敷？一般热敷可以刺激血液流动，放松肌肉，总体上能产生镇静的作用，从而促进治疗。但是受伤后立刻热敷会使肿胀更严重、增强疼痛感、延缓伤口愈合过程。所以受伤处理方式是先冰敷，48小时后肿胀和疼痛感减轻后，再使用热敷的方法。
            </p>
            <p class="poemtitle-l">（二）开放性软组织损伤</p>
            <div class="img-rights w200 openImgBox mt-20">
            <div class="img-rights w200 openImgBox">
              <img
                src="../../assets/images/0170-01.jpg"
                style="width: 100%"
@@ -329,21 +341,27 @@
                动脉出血：由于动脉血管内压力较高，所以出血时呈泉涌、搏动性，尤其是大的动脉血管破裂，血液呈喷射状，颜色鲜红，常在短时内造成大量失血，易引起生命危险。
              </p>
            </span>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
          </div>
          <ul class="header-right">
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">159</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">159</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -362,24 +380,46 @@
          <div class="bodystyle">
            <p class="poemtitle-l">（一）止血方法</p>
            <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：婴幼儿出血处理</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoOne ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '758EFE380803FE03E335BBBE8204F0BC'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-01')" />
              </el-tooltip>
            </p>
          </div>
              <p class="center text td-0">
                <video
                  :src="videoPathOne"
                  webkit-playsinline="true"
                  x-webkit-airplay="true"
                  playsinline="true"
                  x5-video-orientation="h5"
                  x5-video-player-fullscreen="true"
                  x5-playsinline=""
                  controls
                  controlslist="nodownload"
                  class="w100 video"
                  style="border-radius: 10px"
                ></video>
              </p>
              <p class="center videoname">
                <span>视频：婴幼儿出血处理</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    chapterData.isCollectVideoOne ? '点击取消' : '点击收藏'
                  "
                  placement="top-start"
                >
                  <img
                    :src="
                      collectResourceList.findIndex(
                        (item) => item.id == '758EFE380803FE03E335BBBE8204F0BC'
                      ) > -1
                        ? collectCheck
                        : collectImg
                    "
                    alt=""
                    class="collect-btn"
                    @click="handleCollect('video-01')"
                  />
                </el-tooltip>
              </p>
            </div>
            <p class="content">1．指压止血法</p>
            <p class="content">
              在伤口的上方，即近心端，找到跳动的血管，用手指紧紧压住。在不能使用止血带的部位，在身边没有器材或紧急情况下，可暂用指压止血法。此法为紧急的临时止血法，与此同时，应准备材料换用其他止血方法。采用此法，救护人必须熟悉各部位血管出血的压迫点。
@@ -521,22 +561,30 @@
            <p class="content">
              用于腹股沟、腋窝、鼻腔出血或一些大而深的伤口。应先用无菌纱布或洁净的布料填塞伤口，再选用加压包扎止血法。
            </p>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
          </div>
          <ul class="header-right">
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>

            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">161</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">161</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -605,16 +653,18 @@
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">163</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">163</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -747,21 +797,25 @@
                5．股骨骨折固定：选用长木板两块，将大腿小腿连同腰部齐平，一起固定。置于大腿前后长达腰部，并将踝关节一起固定，以防这两部位活动引起骨折错位（见图5-21、图5-22）。
              </p>
            </span>
            <p><br /></p>
            <p><br /></p>
          </div>
          <ul class="header-right">
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">165</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">165</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -850,24 +904,46 @@
              </div>
            </div>
            <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathTwo" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频： 婴幼儿骨折处理流程</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoTwo ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '672F54E4542A0BB15AE6DAD12C1AA74C'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-02')" />
              </el-tooltip>
            </p>
          </div>
              <p class="center text td-0">
                <video
                  :src="videoPathTwo"
                  webkit-playsinline="true"
                  x-webkit-airplay="true"
                  playsinline="true"
                  x5-video-orientation="h5"
                  x5-video-player-fullscreen="true"
                  x5-playsinline=""
                  controls
                  controlslist="nodownload"
                  class="w100 video"
                  style="border-radius: 10px"
                ></video>
              </p>
              <p class="center videoname">
                <span>视频： 婴幼儿骨折处理流程</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    chapterData.isCollectVideoTwo ? '点击取消' : '点击收藏'
                  "
                  placement="top-start"
                >
                  <img
                    :src="
                      collectResourceList.findIndex(
                        (item) => item.id == '672F54E4542A0BB15AE6DAD12C1AA74C'
                      ) > -1
                        ? collectCheck
                        : collectImg
                    "
                    alt=""
                    class="collect-btn"
                    @click="handleCollect('video-02')"
                  />
                </el-tooltip>
              </p>
            </div>
            <p class="poemtitle-l">（三）脊柱损伤搬运方法</p>
            <p class="content">
              只要怀疑有脊柱损伤就应按脊柱损伤情况处理，将脊柱不稳定的患儿仰卧固定在一块坚硬长背板上并将其放置在中心直线位置，即头部、颈部、躯干、骨盆应以中心直线位置逐一固定，保持脊柱伸直位，严禁弯曲或扭转。
@@ -903,24 +979,46 @@
              <p class="imgdescript">图5-24　脊柱损伤搬运</p>
            </div>
            <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathThree" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频： 婴幼儿脊柱损伤搬运方法</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoThree ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '52D13E40E39BA98987EC269C1F41C16E'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-03')" />
              </el-tooltip>
            </p>
          </div>
              <p class="center text td-0">
                <video
                  :src="videoPathThree"
                  webkit-playsinline="true"
                  x-webkit-airplay="true"
                  playsinline="true"
                  x5-video-orientation="h5"
                  x5-video-player-fullscreen="true"
                  x5-playsinline=""
                  controls
                  controlslist="nodownload"
                  class="w100 video"
                  style="border-radius: 10px"
                ></video>
              </p>
              <p class="center videoname">
                <span>视频： 婴幼儿脊柱损伤搬运方法</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    chapterData.isCollectVideoThree ? '点击取消' : '点击收藏'
                  "
                  placement="top-start"
                >
                  <img
                    :src="
                      collectResourceList.findIndex(
                        (item) => item.id == '52D13E40E39BA98987EC269C1F41C16E'
                      ) > -1
                        ? collectCheck
                        : collectImg
                    "
                    alt=""
                    class="collect-btn"
                    @click="handleCollect('video-03')"
                  />
                </el-tooltip>
              </p>
            </div>
            <p class="content td-0">
              <img class="img-h" src="../../assets/images/0015_01.jpg" alt="" />
            </p>
@@ -934,21 +1032,24 @@
            <p class="content">
              心脏骤停一旦发生，如得不到即刻及时地抢救复苏，4～6分钟后会造成患儿脑和其他人体重要器官组织的不可逆的损害，因此心脏骤停后的心肺复苏必须在现场立即进行。心脏复苏通俗地讲就是当患儿停止呼吸和心停时，用人工呼吸和闭胸按压进行抢救的一种技术。人在心脏病、溺水、车祸、药物中毒、高血压、触电、异物堵塞时都可能会心脏骤停，呼吸停止，均可用心肺复苏术来抢救。其处置流程如下。
            </p>
            <p><br /></p>
          </div>
          <ul class="header-right">
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">167</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">167</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -1020,24 +1121,46 @@
              5．停止心肺复苏的指征。在施救的同时也要时刻观察患儿的生命体征。触摸患儿的手足，若温度有所回升，则进一步触摸颈动脉，发现有搏动即可停止心肺复苏，尽快把患儿送往医院进行进一步的治疗。
            </p>
            <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathFour" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频： 婴幼儿心跳呼吸骤停处理</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoFour ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '1DA74ED152C683BF7716A53EAAF304E9'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-04')" />
              </el-tooltip>
            </p>
          </div>
              <p class="center text td-0">
                <video
                  :src="videoPathFour"
                  webkit-playsinline="true"
                  x-webkit-airplay="true"
                  playsinline="true"
                  x5-video-orientation="h5"
                  x5-video-player-fullscreen="true"
                  x5-playsinline=""
                  controls
                  controlslist="nodownload"
                  class="w100 video"
                  style="border-radius: 10px"
                ></video>
              </p>
              <p class="center videoname">
                <span>视频： 婴幼儿心跳呼吸骤停处理</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    chapterData.isCollectVideoFour ? '点击取消' : '点击收藏'
                  "
                  placement="top-start"
                >
                  <img
                    :src="
                      collectResourceList.findIndex(
                        (item) => item.id == '1DA74ED152C683BF7716A53EAAF304E9'
                      ) > -1
                        ? collectCheck
                        : collectImg
                    "
                    alt=""
                    class="collect-btn"
                    @click="handleCollect('video-04')"
                  />
                </el-tooltip>
              </p>
            </div>
            <p class="content td-0 mt-20">
              <img class="img-h" src="../../assets/images/0015_01.jpg" alt="" />
            </p>
@@ -1064,16 +1187,18 @@
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">169</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">169</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -1086,7 +1211,7 @@
            <li class="headerText">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <li class="headerNumber">179</li>
            <li class="headerNumber">170</li>
            <img src="../../assets/images/a1.jpg" alt="" />
          </ul>
          <div class="bodystyle">
@@ -1141,24 +1266,46 @@
              如肩部脱位，可把患儿肘部弯成直角，再用三角巾把前臂和肘部托起，挂在颈上，再用一条宽带缠过脑部，在对侧脑作结。如髋部脱位，则应立即让患儿躺在平板上送往医院。
            </p>
            <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathFive" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：  婴幼儿关节脱位处理</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoFive ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '439863064461BF97467E94EA53280FBF'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-05')" />
              </el-tooltip>
            </p>
          </div>
              <p class="center text td-0">
                <video
                  :src="videoPathFive"
                  webkit-playsinline="true"
                  x-webkit-airplay="true"
                  playsinline="true"
                  x5-video-orientation="h5"
                  x5-video-player-fullscreen="true"
                  x5-playsinline=""
                  controls
                  controlslist="nodownload"
                  class="w100 video"
                  style="border-radius: 10px"
                ></video>
              </p>
              <p class="center videoname">
                <span>视频： 婴幼儿关节脱位处理</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    chapterData.isCollectVideoFive ? '点击取消' : '点击收藏'
                  "
                  placement="top-start"
                >
                  <img
                    :src="
                      collectResourceList.findIndex(
                        (item) => item.id == '439863064461BF97467E94EA53280FBF'
                      ) > -1
                        ? collectCheck
                        : collectImg
                    "
                    alt=""
                    class="collect-btn"
                    @click="handleCollect('video-05')"
                  />
                </el-tooltip>
              </p>
            </div>
            <p class="content td-0 mt-20">
              <img class="img-h" src="../../assets/images/0015_01.jpg" alt="" />
            </p>
@@ -1182,24 +1329,46 @@
              婴幼儿头部着地受到损伤时，教师、家长应给予足够的重视。情况较轻者，可卧床休息1～2天，如无特殊表现才可以下床活动，并应持续观察一周。如发现头部伴有血肿，应去医院拍片检查，判明有无颅骨骨折。凡有明显意识障碍，伴有休克的，应立即平卧、固定头部，紧急送往三级医院抢救。严禁摇动、牵扯，更不要随意移动位置，头部两侧用衣物填塞，以免左右摇晃，同时用毛巾浸湿冷敷头部，身体衣着要保暖。对神志不清者可用手指掐人中、合谷等穴，使其苏醒。
            </p>
            <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathSix" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：  婴幼儿脑震荡处理</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoSix ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == 'D85245AAC0CFCBDB8287FD5BEBFBBB51'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-06')" />
              </el-tooltip>
            </p>
          </div>
              <p class="center text td-0">
                <video
                  :src="videoPathSix"
                  webkit-playsinline="true"
                  x-webkit-airplay="true"
                  playsinline="true"
                  x5-video-orientation="h5"
                  x5-video-player-fullscreen="true"
                  x5-playsinline=""
                  controls
                  controlslist="nodownload"
                  class="w100 video"
                  style="border-radius: 10px"
                ></video>
              </p>
              <p class="center videoname">
                <span>视频： 婴幼儿脑震荡处理</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    chapterData.isCollectVideoSix ? '点击取消' : '点击收藏'
                  "
                  placement="top-start"
                >
                  <img
                    :src="
                      collectResourceList.findIndex(
                        (item) => item.id == 'D85245AAC0CFCBDB8287FD5BEBFBBB51'
                      ) > -1
                        ? collectCheck
                        : collectImg
                    "
                    alt=""
                    class="collect-btn"
                    @click="handleCollect('video-06')"
                  />
                </el-tooltip>
              </p>
            </div>
            <p class="content td-0 mt-20">
              <img class="img-h" src="../../assets/images/0015_01.jpg" alt="" />
            </p>
@@ -1216,16 +1385,18 @@
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">171</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">171</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -1348,16 +1519,18 @@
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">173</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">173</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -1396,24 +1569,46 @@
            </p>
            <p class="titleQuot-1">九、运动性休克的处理与急救</p>
            <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathSeven" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：  幼儿运动性休克处理</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideoSeven ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '558BD52BD08066945D05B243F61772B6'
                ) > -1
                  ? collectCheck
                  : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-07')" />
              </el-tooltip>
            </p>
          </div>
              <p class="center text td-0">
                <video
                  :src="videoPathSeven"
                  webkit-playsinline="true"
                  x-webkit-airplay="true"
                  playsinline="true"
                  x5-video-orientation="h5"
                  x5-video-player-fullscreen="true"
                  x5-playsinline=""
                  controls
                  controlslist="nodownload"
                  class="w100 video"
                  style="border-radius: 10px"
                ></video>
              </p>
              <p class="center videoname">
                <span>视频： 幼儿运动性休克处理</span>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="
                    chapterData.isCollectVideoSeven ? '点击取消' : '点击收藏'
                  "
                  placement="top-start"
                >
                  <img
                    :src="
                      collectResourceList.findIndex(
                        (item) => item.id == '558BD52BD08066945D05B243F61772B6'
                      ) > -1
                        ? collectCheck
                        : collectImg
                    "
                    alt=""
                    class="collect-btn"
                    @click="handleCollect('video-07')"
                  />
                </el-tooltip>
              </p>
            </div>
            <p class="content">
              运动性休克是指在特定的运动环境中，因受到各种不利因素的侵袭，而迅速出现循环系统及其他系统功能急剧下降的一种病理生理状态。多见于平素体育锻炼较少的人，尤以少年儿童为多见。过分紧张、激动或带病参加运动为其诱因。有时少年儿童剧烈奔跑或赛跑后，如果立即站立不动，会使下肢的毛细血管和静脉失去肌肉收缩时产生的挤压作用，血液由于重力作用而淤积于下肢扩张的静脉和毛细血管里，也会产生休克。
            </p>
@@ -1473,21 +1668,27 @@
            <p class="quotation">
              4．幼儿会比成人丢失的钠和氯化物少，因而补充水分的饮料要比成人的稀薄一点。
            </p>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
            <p><br /></p>
          </div>
          <ul class="header-right">
            <li class="header-right-img">
              <img src="../../assets/images/a2.jpg" alt="" />
            </li>
            <img
              class="header-right-imgTop"
              src="../../assets/images/a3.jpg"
              alt=""
            />
            <li class="header-right-Number">175</li>
            <li class="header-right-Text">第<br />五<br />章</li>
            <li class="header-right-Text-bottom">
              婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
            </li>
            <div class="header-right-imgBottom">
              <img
                class="header-right-imgTop"
                src="../../assets/images/a3.jpg"
                alt=""
              />
              <li class="header-right-Number">175</li>
              <li class="header-right-Text">第<br />五<br />章</li>
              <li class="header-right-Text-bottom">
                婴<br />幼<br />儿<br />常<br />见<br />运<br />动<br />伤<br />害<br />的<br />处<br />理<br />与<br />急<br />救
              </li>
            </div>
          </ul>
        </div>
      </div>
@@ -1538,38 +1739,165 @@
            </div>

            <p class="content td-0 mb-10 mt-30">
              <img class="img-15" src="../../assets/images/0027_02.jpg" alt="" />
              <img
                class="img-15"
                src="../../assets/images/0027_02.jpg"
                alt=""
              />
            </p>
            <p class="content">
              软组织损伤　骨折　脑震荡　运动性腹痛　心肺复苏　运动性脱水
            </p>
            <p class="content td-0 mb-10 mt-30">
              <img class="img-15" src="../../assets/images/0028_01.jpg" alt="" />
              <img
                class="img-15"
                src="../../assets/images/0028_01.jpg"
                alt=""
              />
            </p>
            <p class="content"><span class="bold">一、简单题</span></p>
            <p class="content">1．婴幼儿运动伤害的判断与处理流程是什么？</p>
            <textarea
              v-model="videoQuestionData.one"
              placeholder="请输入内容"
              rows="5"
              style="max-width: 100%; width: 90%"
              class="fz-16 fm-son ml-40 textarea-question"
              @change="saveVideoQuestionData"
            ></textarea>
            <p class="content">2．急性运动伤害的PRICE原则是什么？</p>
            <textarea
              v-model="videoQuestionData.two"
              placeholder="请输入内容"
              rows="5"
              style="max-width: 100%; width: 90%"
              class="fz-16 fm-son ml-40 textarea-question"
              @change="saveVideoQuestionData"
            ></textarea>
            <p class="content">3．外伤出血的处理方法是什么？</p>
            <textarea
              v-model="videoQuestionData.three"
              placeholder="请输入内容"
              rows="5"
              style="max-width: 100%; width: 90%"
              class="fz-16 fm-son ml-40 textarea-question"
              @change="saveVideoQuestionData"
            ></textarea>
            <p class="content">4．骨折的处置流程是什么？</p>
            <textarea
              v-model="videoQuestionData.four"
              placeholder="请输入内容"
              rows="5"
              style="max-width: 100%; width: 90%"
              class="fz-16 fm-son ml-40 textarea-question"
              @change="saveVideoQuestionData"
            ></textarea>
            <p class="content">5．心肺复苏的操作流程有哪些？</p>
            <textarea
              v-model="videoQuestionData.five"
              placeholder="请输入内容"
              rows="5"
              style="max-width: 100%; width: 90%"
              class="fz-16 fm-son ml-40 textarea-question"
              @change="saveVideoQuestionData"
            ></textarea>
            <p class="content">6．牙外伤后的处理方法是什么？</p>
            <textarea
              v-model="videoQuestionData.six"
              placeholder="请输入内容 "
              rows="5"
              style="max-width: 100%; width: 90%"
              class="fz-16 fm-son ml-40 textarea-question"
              @change="saveVideoQuestionData"
            ></textarea>
            <p class="content">7．运动性腹痛的处理方法是什么？</p>
            <textarea
              v-model="videoQuestionData.seven"
              placeholder="请输入内容"
              rows="5"
              style="max-width: 100%; width: 90%"
              class="fz-16 fm-son ml-40 textarea-question"
              @change="saveVideoQuestionData"
            ></textarea>
            <p class="content">8．运动性休克的处理方法是什么？</p>
            <textarea
              v-model="videoQuestionData.eight"
              placeholder="请输入内容"
              rows="5"
              style="max-width: 100%; width: 90%"
              class="fz-16 fm-son ml-40 textarea-question"
              @change="saveVideoQuestionData"
            ></textarea>
            <p class="content">9．运动性脱水的表现及预防方法是什么？</p>
            <textarea
              v-model="videoQuestionData.nine"
              placeholder="请输入内容"
              rows="5"
              style="max-width: 100%; width: 90%"
              class="fz-16 fm-son ml-40 textarea-question"
              @change="saveVideoQuestionData"
            ></textarea>
            <p class="content"><span class="bold">二、实践与练习</span></p>
            <p class="content">
              三个人为一组，一人扮演患儿，两人扮演教师，练习踝关节扭伤后的急救处理和心肺复苏操作方法。
            </p>
            <p class="content td-0 mb-10 mt-30">
              <img class="img-15" src="../../assets/images/0028_02.jpg" alt="" />
              <img
                class="img-15"
                src="../../assets/images/0028_02.jpg"
                alt=""
              />
            </p>
            <p class="content">
              王国祥、王虎主编：《体育运动伤害防护》，苏州，苏州大学出版社，2017。该书从运动损伤的发生机制、症状体征以及处理方法与措施等方面，对人体各部位常见运动损伤进行了详细介绍，着重介绍了头部、躯干和四肢主要关节部位的120多种急、慢性损伤，能满足进一步深入研究的需求。
            </p>
            <p class="dialogQuestion" @click="openQuestion(1)">
              <span class="td-0">【本节测试】</span>
              <span class="td-0">
                <svg
                  t="1736157124915"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2536"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="28"
                  height="28"
                >
                  <path
                    d="M798.72 76.8H947.2v145.92h51.2V25.6h-199.68zM947.2 798.72v145.92h-148.48v51.2H998.4v-197.12zM66.56 222.72V76.8h148.48V25.6H12.8v197.12zM215.04 944.64H66.56v-145.92H12.8v197.12h202.24z"
                    fill="#fff"
                    p-id="2537"
                  ></path>
                  <path
                    d="M826.88 522.24L512 207.36c0-2.56-2.56-2.56-7.68-2.56-2.56 0-5.12 0-7.68 2.56L184.32 524.8c-2.56 2.56-5.12 7.68-2.56 10.24 2.56 5.12 5.12 7.68 10.24 7.68h58.88V793.6c0 12.8 10.24 25.6 25.6 25.6 12.8 0 25.6-10.24 25.6-25.6V504.32c0-5.12-5.12-10.24-10.24-10.24h-2.56l217.6-220.16 220.16 222.72c-5.12 0-10.24 5.12-10.24 10.24V793.6c0 12.8 10.24 25.6 25.6 25.6 12.8 0 25.6-10.24 25.6-25.6v-250.88h51.2c5.12 0 10.24-5.12 10.24-10.24 2.56-5.12 0-7.68-2.56-10.24z"
                    fill="#fff"
                    p-id="2538"
                  ></path>
                  <path
                    d="M386.56 762.88h240.64c10.24 0 17.92 7.68 17.92 17.92 0 10.24-7.68 17.92-17.92 17.92h-240.64c-10.24 0-17.92-7.68-17.92-17.92 0-10.24 7.68-17.92 17.92-17.92z m0-69.12h240.64c10.24 0 17.92 7.68 17.92 17.92 0 10.24-7.68 17.92-17.92 17.92h-240.64c-10.24 0-17.92-7.68-17.92-17.92 0-10.24 7.68-17.92 17.92-17.92z m0-71.68h240.64c10.24 0 17.92 7.68 17.92 17.92 0 10.24-7.68 17.92-17.92 17.92h-240.64c-10.24 0-17.92-7.68-17.92-17.92 0-7.68 7.68-17.92 17.92-17.92zM514.56 535.04h-20.48c-5.12 0-7.68-2.56-7.68-7.68v-2.56c0-17.92 5.12-30.72 23.04-46.08 17.92-15.36 23.04-23.04 23.04-33.28s-7.68-20.48-20.48-20.48c-15.36 0-25.6 7.68-30.72 25.6 0 5.12-5.12 5.12-10.24 5.12l-25.6-5.12c-5.12 0-7.68-5.12-5.12-10.24 10.24-38.4 33.28-53.76 79.36-53.76 38.4 0 61.44 25.6 61.44 51.2 0 20.48-7.68 35.84-33.28 53.76-20.48 15.36-23.04 20.48-23.04 33.28-2.56 7.68-7.68 10.24-10.24 10.24zM481.28 588.8v-28.16c0-5.12 2.56-7.68 7.68-7.68h30.72c5.12 0 7.68 2.56 7.68 7.68V588.8c0 5.12-2.56 7.68-7.68 7.68h-30.72c-5.12 0-7.68-5.12-7.68-7.68z"
                    fill="#fff"
                    p-id="2539"
                  ></path>
                </svg>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <dialogExaminations
      :isClear="dialogVisibleOne"
      :primaryColor="themeColor"
      :cardList="interfaceQuestion[questionNum]"
      v-if="interfaceQuestion"
      :chapter="2"
      :page="questionNum"
      :questionTitle="questionTitleMain"
      ref="dialogRef"
    >
    </dialogExaminations>
  </div>
</template>

@@ -1579,13 +1907,19 @@
  getCollectResource,
  setCollectResource,
} from "@/assets/methods/resources";
import preView from "@/components/pdfview/index.vue";
import dialogExaminations from "@/components/dialogExaminations/index.vue";
export default {
  name: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
    interfaceQuestion: {
      type: Object,
    },
  },
  components: {
    dialogExaminations,
  },
  data() {
    return {
@@ -1609,8 +1943,29 @@
      },
      videoQuestionData: {
        one: "",
        two: "",
        three: "",
        four: "",
        five: "",
        six: "",
        seven: "",
        eight: "",
        nine: "",
      },
      collectResourceList:[],
      collectResourceList: [],
      // 题目相关
      dialogVisibleOne: false,
      themeColor: "#7acab4",
      questionNum: 0,
      questionTitleMain: "",
      chapter001: {
        question: {
          1: {
            questionTitleMain: "第五章　婴幼儿常见运动伤害的处理与急救",
            questionNum: 185,
          },
        },
      },
    };
  },
  async mounted() {
@@ -1660,7 +2015,6 @@
      );
    },


    handleCollect(e) {
      if (e == "video-01") {
        this.handleCollectResource(
@@ -1669,10 +2023,76 @@
          "",
          "视频",
          "bits",
          "活动视频：宝宝发现美"
          "活动视频：婴幼儿出血处理"
        );
        this.chapterData.isCollectVideoOne =
          !this.chapterData.isCollectVideoOne;
      } else if (e == "video-02") {
        this.handleCollectResource(
          "672F54E4542A0BB15AE6DAD12C1AA74C",
          "672F54E4542A0BB15AE6DAD12C1AA74C",
          "",
          "视频",
          "bits",
          "活动视频：婴幼儿骨折处理流程"
        );
        this.chapterData.isCollectVideoTwo =
          !this.chapterData.isCollectVideoTwo;
      } else if (e == "video-03") {
        this.handleCollectResource(
          "52D13E40E39BA98987EC269C1F41C16E",
          "52D13E40E39BA98987EC269C1F41C16E",
          "",
          "视频",
          "bits",
          "活动视频：婴幼儿脊柱损伤搬运方法"
        );
        this.chapterData.isCollectVideoThree =
          !this.chapterData.isCollectVideoThree;
      } else if (e == "video-04") {
        this.handleCollectResource(
          "1DA74ED152C683BF7716A53EAAF304E9a",
          "1DA74ED152C683BF7716A53EAAF304E9a",
          "",
          "视频",
          "bits",
          "活动视频：婴幼儿心跳呼吸骤停处理"
        );
        this.chapterData.isCollectVideoFour =
          !this.chapterData.isCollectVideoFour;
      } else if (e == "video-05") {
        this.handleCollectResource(
          "439863064461BF97467E94EA53280FBF",
          "439863064461BF97467E94EA53280FBF",
          "",
          "视频",
          "bits",
          "活动视频：婴幼儿关节脱位处理"
        );
        this.chapterData.isCollectVideoFive =
          !this.chapterData.isCollectVideoFive;
      } else if (e == "video-06") {
        this.handleCollectResource(
          "D85245AAC0CFCBDB8287FD5BEBFBBB51",
          "D85245AAC0CFCBDB8287FD5BEBFBBB51",
          "",
          "视频",
          "bits",
          "活动视频：婴幼儿脑震荡处理"
        );
        this.chapterData.isCollectVideoSix =
          !this.chapterData.isCollectVideoSix;
      } else if (e == "video-07") {
        this.handleCollectResource(
          "558BD52BD08066945D05B243F61772B6",
          "558BD52BD08066945D05B243F61772B6",
          "",
          "视频",
          "bits",
          "活动视频：幼儿运动性休克处理"
        );
        this.chapterData.isCollectVideoSeven =
          !this.chapterData.isCollectVideoSeven;
      }
      this.saveVideoStatus();
    },
@@ -1721,6 +2141,15 @@
        this.collectResourceList
      );
    },

    openQuestion(num) {
      if (num) {
        this.questionNum = this.chapter001.question[num].questionNum;
        this.questionTitleMain =
          this.chapter001.question[num].questionTitleMain;
        this.$refs.dialogRef.openDialogQuestion();
      }
    },
  },
};
</script>

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

@@ -8,7 +8,7 @@
    </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" /> -->
        <img class="img-0" alt="" src="../../assets/images/feiYe.jpg" />
      </div>
    </div>
    <!-- 介绍页面 -->

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

@@ -34,6 +34,7 @@
        <chapterFive
          v-if="showCatalogList.indexOf(2) > -1"
          :showPageList="loadPageList"
          :interfaceQuestion="questionDataMap"
        ></chapterFive> 
    </div>
  </div>
@@ -47,6 +48,8 @@
//   import chapterFour from "./chapter004.vue";
import chapterFive from "./chapter005.vue";
import NoteIcon from "@/assets/images/biji.png";
import getQuestionList from "@/assets/methods/examination";
import testData from "../../assets/examinationList";
import _ from "lodash";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
@@ -183,8 +186,8 @@
    }, 500);

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

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -569,30 +572,30 @@
            // 添加页码
            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);
            //     }
            //   }
            // }
            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]) {

 src/components/checkVideo/index.vue

@@ -101,7 +101,6 @@
                "视频：" + this.videoName
            );
            this.localIsCollectVideo = !this.localIsCollectVideo;
            this.$emit('saveVideoStatus')
        },
        //资源收藏事件
        // resourcePath  文件路径，