婴幼儿游戏活动实施

zhongshujie

2025-01-22 cd11526f129cf05fd352444f60446562a6984f4c

婴幼儿游戏活动实施

 src/App.vue

@@ -17,6 +17,7 @@
    <aviationBasicSkills v-if="activeBook.name == 'aviationBasicSkills'"></aviationBasicSkills>
    <aviationSafety  v-if="activeBook.name == 'aviationSafety'"></aviationSafety>
    <aviationEtiquette  v-if="activeBook.name == 'aviationEtiquette'"></aviationEtiquette>
    <toddlerGameImplementation v-if="activeBook.name == 'toddlerGameImplementation'"></toddlerGameImplementation>
  </div>
</template>
<script>
@@ -58,6 +59,7 @@
    aviationBasicSkills: () => import("./books/aviationBasicSkills/view/index.vue"),
    aviationSafety: ()=> import("./books/aviationSafety/view/index.vue"),
    aviationEtiquette: ()=> import("./books/aviationEtiquette/view/index.vue"),
    toddlerGameImplementation: ()=> import("./books/toddlerGameImplementation/view/index.vue")
  },
  data() {
    return {
@@ -100,11 +102,12 @@
      // aviationBasicSkills //基本技能
      // aviationSafety      //安全检查实务
      // aviationEtiquette   //礼仪服务
      // toddlerGameImplementation  //婴幼儿游戏活动实施
      this.activeBook = await this.config.getBookConfig(
      process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "meetingPlanners")
          : "toddlerGameImplementation")
      );

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

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

Binary files differ

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

Binary files differ

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

Binary files differ

 src/books/toddlerGameImplementation/assets/images/0013-1.jpg

 src/books/toddlerGameImplementation/assets/images/0014-1.jpg

 src/books/toddlerGameImplementation/assets/images/0020-1.jpg

 src/books/toddlerGameImplementation/assets/images/0024-1.jpg

 src/books/toddlerGameImplementation/assets/images/0025-2.jpg

 src/books/toddlerGameImplementation/assets/images/0029-1.jpg

 src/books/toddlerGameImplementation/assets/images/0038-1.jpg

 src/books/toddlerGameImplementation/assets/images/0039-1.jpg

 src/books/toddlerGameImplementation/assets/images/0043-1.jpg

 src/books/toddlerGameImplementation/assets/images/0043-2.jpg

 src/books/toddlerGameImplementation/assets/images/0043-3.jpg

 src/books/toddlerGameImplementation/assets/images/0043-4.jpg

 src/books/toddlerGameImplementation/assets/images/0043-5.jpg

 src/books/toddlerGameImplementation/assets/images/0044-1.jpg

 src/books/toddlerGameImplementation/assets/images/0044-2.jpg

 src/books/toddlerGameImplementation/assets/images/0045-1.jpg

 src/books/toddlerGameImplementation/assets/images/0045-2.jpg

 src/books/toddlerGameImplementation/assets/images/0045-3.jpg

 src/books/toddlerGameImplementation/assets/images/0046-1.jpg

 src/books/toddlerGameImplementation/assets/images/0050-2.jpg

 src/books/toddlerGameImplementation/assets/images/0051-1.jpg

 src/books/toddlerGameImplementation/assets/images/0061-1.jpg

 src/books/toddlerGameImplementation/assets/images/0062-1.jpg

 src/books/toddlerGameImplementation/assets/images/0066-1.jpg

 src/books/toddlerGameImplementation/assets/images/0072-1.jpg

 src/books/toddlerGameImplementation/assets/images/0075-1.jpg

 src/books/toddlerGameImplementation/assets/images/0078-1.jpg

 src/books/toddlerGameImplementation/assets/images/0079-1.jpg

 src/books/toddlerGameImplementation/assets/images/0079-2.jpg

 src/books/toddlerGameImplementation/assets/images/0080-1.jpg

 src/books/toddlerGameImplementation/assets/images/0080-2.jpg

 src/books/toddlerGameImplementation/assets/images/0081-1.jpg

 src/books/toddlerGameImplementation/assets/images/0081-2.jpg

 src/books/toddlerGameImplementation/assets/images/0082-1.jpg

 src/books/toddlerGameImplementation/assets/images/0084-1.jpg

 src/books/toddlerGameImplementation/assets/images/0084-2.jpg

 src/books/toddlerGameImplementation/assets/images/0085-1.jpg

 src/books/toddlerGameImplementation/assets/images/0087-1.jpg

 src/books/toddlerGameImplementation/assets/images/0088-1.jpg

 src/books/toddlerGameImplementation/assets/images/0089-1.jpg

 src/books/toddlerGameImplementation/assets/images/0090-1.jpg

 src/books/toddlerGameImplementation/assets/images/0092-1.jpg

 src/books/toddlerGameImplementation/assets/images/0094-1.jpg

 src/books/toddlerGameImplementation/assets/images/0094-2.jpg

 src/books/toddlerGameImplementation/assets/images/0098-1.jpg

 src/books/toddlerGameImplementation/assets/images/0099-1.jpg

 src/books/toddlerGameImplementation/assets/images/0107-1.jpg

 src/books/toddlerGameImplementation/assets/images/0112-1.jpg

 src/books/toddlerGameImplementation/assets/images/0117-1.jpg

 src/books/toddlerGameImplementation/assets/images/0118-1.jpg

 src/books/toddlerGameImplementation/assets/images/0120-1.jpg

 src/books/toddlerGameImplementation/assets/images/0123-1.jpg

 src/books/toddlerGameImplementation/assets/images/0130-1.jpg

 src/books/toddlerGameImplementation/assets/images/0136-1.jpg

 src/books/toddlerGameImplementation/assets/images/0143-1.jpg

 src/books/toddlerGameImplementation/assets/images/0144-1.jpg

 src/books/toddlerGameImplementation/assets/images/0154-1.jpg

 src/books/toddlerGameImplementation/assets/images/0161-1.jpg

 src/books/toddlerGameImplementation/assets/images/0166-1.jpg

 src/books/toddlerGameImplementation/assets/images/0168-1.jpg

 src/books/toddlerGameImplementation/assets/images/0169-1.jpg

 src/books/toddlerGameImplementation/assets/images/0179-1.jpg

 src/books/toddlerGameImplementation/assets/images/0186-1.jpg

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

 src/books/toddlerGameImplementation/assets/images/FD.jpg

 src/books/toddlerGameImplementation/assets/images/SMY.jpg

 src/books/toddlerGameImplementation/assets/images/aldr.png

 src/books/toddlerGameImplementation/assets/images/alfx.png

 src/books/toddlerGameImplementation/assets/images/bkzn.png

 src/books/toddlerGameImplementation/assets/images/csx.jpg

 src/books/toddlerGameImplementation/assets/images/gjsy.png

 src/books/toddlerGameImplementation/assets/images/headerBj.png

 src/books/toddlerGameImplementation/assets/images/headerRight.png

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

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

 src/books/toddlerGameImplementation/assets/images/lyl.png

 src/books/toddlerGameImplementation/assets/images/ml.jpg

 src/books/toddlerGameImplementation/assets/images/qy.jpg

 src/books/toddlerGameImplementation/assets/images/sjtz.png

 src/books/toddlerGameImplementation/assets/images/sjyy.png

 src/books/toddlerGameImplementation/assets/images/sysm.jpg

 src/books/toddlerGameImplementation/assets/images/tzyd.png

 src/books/toddlerGameImplementation/assets/images/xxcty.png

 src/books/toddlerGameImplementation/assets/images/xxdt.png

 src/books/toddlerGameImplementation/assets/images/xxrwd.png

 src/books/toddlerGameImplementation/assets/images/xxxgjc.png

 src/books/toddlerGameImplementation/assets/images/xyx.png

 src/books/toddlerGameImplementation/assets/images/ysyd.png

 src/books/toddlerGameImplementation/assets/images/yxfa.png

 src/books/toddlerGameImplementation/assets/main.less

New file
@@ -0,0 +1,2127 @@
.game-Imple {
  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;
  }

  .foreword {
    line-height: 10px !important;
    margin-top: 0;
  }

  .c-g {
    color: green;
  }

  .c-r {
    color: red;
  }

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

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

  .mr-9 {
    margin-right: 9%;
  }

  .ml-9 {
    margin-left: 9%;
  }

  .ml-2e {
    margin-left: 2em;
  }

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

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

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

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

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

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

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

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

  .w100 {
    width: 100%;
  }

  .w90 {
    width: 90%;
  }


  .w80 {
    width: 80%;
  }


  .b0 {
    border: 0;
  }

  .tal-j {
    display: inline-block;
    width: 120px;
    text-align-last: justify;
  }


  sup {
    vertical-align: super;
    /* 保持上标对齐方式 */
    font-size: smaller;
    // position: relative; /* 相对于正常位置调整 */  
    // top: -0.2em; /* 根据需要调整这个值 */ 
  }

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

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

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

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

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


  .img-0 {
    width: 100%;
  }

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

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

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

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

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

  .fl {
    display: flex;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .ta-l {
    text-align: left;
  }

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

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

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

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

  .headerImg {
    width: 30px;
  }

  .headerText-bc {
    width: 70px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #9CDCF8;
    border-radius: 15px;
  }

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

  .headerNumber {
    width: 90px;
    color: #fff;
    font-size: 12px;
    padding-left: 10px;
    text-align: left;
    background-color: #6BCFF6;
    border-radius: 15px 0 0 15px;
  }

  .header-left-Number {
    width: 50px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 15px;
    position: relative;

    span{
      position: absolute;
      left: 50%;
      top: 35%;
    }
  }

  .header-left-text {
    color: #00AFEF;
    margin-left: 8px;
    margin-top: 7px;
    font-size: 12px;
  }

  .radioClass {
    margin: 0 0 0 4px !important;

  }


  .task-u2-c {
    width: 16%;
    margin-bottom: 6em;
    margin-top: 0;
    border-top: 0.7em solid #F89C1C;
  }

  .task-u3-c {
    width: 16%;
    margin-bottom: 6em;
    margin-top: 0;
    border-top: 0.7em solid #0A9CAC;
  }

  .task-u4-c {
    width: 16%;
    margin-bottom: 6em;
    margin-top: 0;
    border-top: 0.7em solid #92B03D;
  }

  .task-u5-c {
    width: 16%;
    margin-bottom: 6em;
    margin-top: 0;
    border-top: 0.7em solid #0180CD;
  }

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

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

  .img-float-smaller {
    width: 200px;
    float: left;
    height: auto;
    margin: auto;
    margin-right: 20px;
  }

  .img-float-medium {
    width: 250px;
    float: left;
    height: auto;
    margin: auto;
    margin-right: 20px;
  }



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

    p {
      margin: 0;
    }
  }


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

    p {
      margin: 0;
    }
  }

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

    p {
      margin: 0 !important;
    }
  }

  .references {
    margin-top: 140px;

    hr {
      font-weight: bold;
      margin-left: 0;
      width: 15%;
    }
  }

  .w430 {
    width: 430px;
  }

  .w395 {
    width: 395px;
  }

  .w365 {
    width: 365px;
  }


  .w300 {
    width: 300px;
  }

  .w290 {
    width: 290px;
  }

  .w280 {
    width: 280px;
  }

  .w270 {
    width: 270px;
  }

  .w260 {
    width: 260px;
  }

  .w250 {
    width: 250px;
  }

  .w230 {
    width: 230px;
  }

  .w220 {
    width: 220px;
  }

  .w210 {
    width: 210px;
  }

  .w200 {
    width: 200px;
  }

  .w190 {
    width: 190px;
  }

  .w180 {
    width: 180px;
  }

  .w170 {
    width: 170px;
  }

  .w160 {
    width: 160px;
  }

  .w150 {
    width: 150px;
  }

  .w135 {
    width: 135px;
  }

  .w115 {
    width: 115px;
  }


  .w40 {
    width: 40% !important;
  }

  .w25 {
    width: 25%;
  }

  .w20 {
    width: 20%;
  }

  .w15 {
    width: 15%;
  }

  .w10 {
    width: 10%;
  }


  .table-th-bc {
    color: #00AEEF;
    background-color: #C6EAFA;
    line-height: 25px;
  }

  .table-tr-bc {
    background-color: #E1F4FC;
    line-height: 25px;

    p {
      font-family: 'Times New Roman', Times, serif;
      font-size: 14px;
    }
  }

  .table-title-bc {
    background-color: #8091BC;
    color: #fff;
    line-height: 25px;
  }

  .table-textarea {
    font-size: 14px;
    font-family: "Times New Roman", "宋体";
    resize: none;
    width: 95%;
    background-color: transparent;
    border: none;

    &:focus {
      outline: none;
    }
  }

  .table-input-border {
    width: 80%;
    background-color: transparent;
    border: 0;

    &:focus {
      outline: none;
    }
  }

  .table-input-border-w20 {
    width: 20%;
    background-color: transparent;
    border: 0;

    &:focus {
      outline: none;
    }
  }

  .table-input-border-w15 {
    width: 15%;
    background-color: transparent;
    border: 0;

    &:focus {
      outline: none;
    }
  }

  .table-input-border-w10 {
    width: 10%;
    background-color: transparent;
    border: 0;

    &:focus {
      outline: none;
    }
  }

  .table-input-border-w5 {
    width: 5%;
    background-color: transparent;
    border: 0;

    &:focus {
      outline: none;
    }
  }

  .input-bottom-border {
    width: 11%;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #000;

    &:focus {
      outline: none;
    }
  }

  .input-bottom-border1 {
    width: 33%;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #000;

    &:focus {
      outline: none;
    }
  }


  .input-bottom-border2 {
    width: 21.5%;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #000;

    &:focus {
      outline: none;
    }
  }

  // 视频  
  .video-box-cover {
    border: 1px dashed #40C7F4;
    padding: 2% 2%;
  }

  .video-box {
    margin: 20px 0 20px 0;
    border: 2px dashed #40C7F4;
    padding: 2% 2%;
  }

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

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

  .sInput {
    width: 60px;
    border: 0;
    outline: none;
    text-align: center;
  }

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

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

  // 续表
  .continued {
    text-align: right;
    margin: 0%;
  }


  .text-rights {
    width: 230px;
    float: right;
    height: auto;
    margin: auto;
    margin-left: 20px;

    img {
      width: 100%;
    }

    p {
      margin: 0 !important;
    }
  }



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

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

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

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

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

          svg {
            fill: #FAAD70;
          }
        }

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

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

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

  div.bk-ztgs {
    border: 0.15em dotted #5192c6;
    padding: 1.5em 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: -1.2em;
  }


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

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

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

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

    img {
      height: 80%;
    }
  }

  // 题目
  .textarea-box {
    background-color: transparent;
    max-width: 100%;
    min-width: 100%;
    outline: none;
  }

  .textarea-box-left {
    background-color: transparent;
    margin-left: 15%;
    max-width: 84%;
    min-width: 84%;
    outline: none;
  }

  .textarea-box-right {
    background-color: transparent;
    margin-left: 2em;
    margin-right: 9%;
    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: #D4F0FE;
  }

  // 迁移
  .bk-bwh {
    min-height: 800px;
    font-size: 1.2em;
    padding: 25px;
  }

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


  .bodystyle:nth-of-type(odd) {
    font-family: 'FZLTXIHJW';
    text-align: justify;
    margin: 0 12% 0 8%;
    padding-bottom: 80px;
    line-height: 30px;


    hr {
      font-weight: 800;
      margin-left: 0;
      margin-top: 10px;
      margin-bottom: 10px;
      width: 25%;
    }
  }

  .bodystyle:nth-of-type(even) {
    font-family: 'FZLTXIHJW';
    text-align: justify;
    margin: 0 9% 0 11%;
    padding-bottom: 80px;
    line-height: 30px;
  }


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

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

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

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

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

  div.sgc-toc-level-1 {
    margin-left: 0em;
  }

  div.sgc-toc-level-2 {
    margin-left: 2em;
  }

  div.sgc-toc-level-3 {
    margin-left: 2em;
  }

  div.sgc-toc-level-4 {
    margin-left: 2em;
  }

  div.sgc-toc-level-5 {
    margin-left: 2em;
  }

  div.sgc-toc-level-6 {
    margin-left: 2em;
  }

  .imz {
    height: 96%;
    text-align: center;


  }

  .note {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
  }

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

  .block1 {
    text-align: center;
  }

  .block2 {
    line-height: 25px;
  }

  .block3 {
    line-height: 20px;
  }

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

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


  p {
    font-family: '宋体';
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    text-indent: 2em;
    line-height: 23px;
    text-align: justify;
  }

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

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

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

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

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

  .left2 {
    font-size: 1.3em;
    text-indent: 0em;
    font-weight: bold;
    margin-left: 0%;
    margin-right: 0%;
  }

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

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

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

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

  .quote {
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: 1em;
    margin-right: 1em;
    text-align: justify;
    font-family: "cnepub", serif;
  }


  h1 {
    font-family: 'FZLTZHJW';
    color: #01AFEE;
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    text-indent: 0em;
  }

  .h1-zt {
    font-family: 'FZLTZHJW';
    line-height: 2em;
    color: #01AFEE;
    font-weight: bold;
    font-size: 1.9em;
    margin-bottom: 1em;
    margin-top: -0.5em;
    text-indent: 0em;

  }

  h1.jz {
    text-align: center;
    text-indent: 0em;
  }

  .front {
    font-family: 'FZLTZHJW';
    font-weight: bold;
    font-size: 1.1em;
    color: #00ADEF;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
    padding: 10% 0 0 0;
    text-indent: 0em;
    text-align: left;
  }


  h2 {
    font-family: 'FZHTJW';
    color: #00ADEF;
    font-weight: bold;
    font-size: 1.6em;
    margin-bottom: 0em;
    margin-top: 0.1em;
    text-indent: 2em;
  }

  .h2-zt {
    font-family: 'FZHTJW';
    color: #00ADEF;
    font-weight: bold;
    font-size: 1.4em;
    margin-top: 0em;
    text-indent: 2.2em;
    padding: 10px 0;
  }

  h3 {
    font-family: 'FZHTJW';
    color: #03AFED;
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 1em;
    margin-top: 1em;
    text-indent: 0em;
  }

  h4 {
    font-family: 'FZHTJW';
    font-weight: bold;
    color: #03AFED;
    margin-bottom: 0.5em;
    margin-top: 1em;
    font-size: 1.2em;
    text-indent: 1em;
  }

  h5 {

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

  .unit2-c {
    color: #F89C1C !important;
  }

  .unit3-c {
    color: #0A9CAC !important;
  }

  .unit4-c {
    color: #92B03D !important;
  }

  .unit5-c {
    color: #0180CD !important;
  }

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

  .bb {
    font-family: "cnepub", serif;
    font-family: 'FZHTJW';
    color: #66CCCC;
    font-size: 1.1em;
    margin-top: 10px;
    text-indent: 2em;
    margin-bottom: 10px;
    border-bottom: 5px dotted #F4C388;
    margin-left: 2em;
    margin-bottom: 0.5em;
    text-indent: 0em;
  }

  .u {
    text-decoration: underline;
  }

  .u {

    text-decoration: underline;
  }

  .img-0 {
    width: 100%;
  }

  .img-a {
    width: 96%;
  }

  .img-b {
    width: 70%;
  }

  .img-c {
    width: 60%;
  }

  .img-d {
    width: 50%;
  }

  .img-e {
    width: 45%;
  }

  .img-f {
    width: 40%;
  }

  .img-g {
    width: 30%;
  }

  .img-h {
    width: 20%;
  }

  .img-i {
    width: 10%;
  }

  .img-j {
    width: 5%;
  }

  .img-zt {
    height: 6em;
    margin-top: -1.5em;
    margin-bottom: -0.4em;
    margin-left: 15%;
  }

  .inline {
    height: 1em;
    margin-bottom: -0.3em;
  }

  .inline1 {
    height: 2.5em;
    margin-top: 0.5em;
    margin-bottom: -0.5em;
  }

  .inline2 {
    height: 1.5em;
    margin-top: 0.5em;
    margin-bottom: -0.5em;
  }

  .inline4 {
    height: 2em;
    margin-left: -2em;
    margin-right: 0.5em;
    margin-bottom: -0.6em;
  }

  .img-qj {
    height: 7.5em;
    margin-bottom: -3.4em;
    margin-right: 0.5em;
  }

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


  .ls2 {
    color: #00B1F5;
    font-weight: 500;
    font-size: 1.1em;
    line-height: 30px;
  }

  span.lsyq-1 {
    background-color: #6D84AE;
    padding: 0.2em 0.4em 0.2em 0.4em;
    border-radius: 1.5em;
    margin-right: 0.5em;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5em;
  }

  span.hsyq-1 {
    background-color: #FFB7D4;
    padding: 0.2em 0.4em 0.2em 0.4em;
    border-radius: 1.5em;
    margin-right: 0.5em;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 1.5em;

  }

  .zt-hs1 {
    font-weight: 500;
    color: #000;
    font-size: 1em;
  }

  .h2-zt1 {
    padding: 5px 25px 5px 25px;
    border-radius: 10px 0px 0px 10px;
    background-color: #5392C7;
    font-size: 1.2em;
    color: #FFFFFF;
  }

  .h2-zt2 {
    padding: 10px;
    background-color: #B1DDE0;
    margin-right: 2em;
    color: #FFFFFF;
    padding: 5px 50px 5px 25px;
    border-radius: 0px 5px 80px 0px;
    font-size: 1.2em;
  }



  div.bk {
    border: 2px solid #3FC6F6;
    box-shadow: 8px 8px 0px 0px #B0E2F9;
    padding: 16px 10px;
    margin-top: 2em;
    border-radius: 1.5em;
    margin-bottom: 1em;
    position: relative;
  }

  div.bk1 {
    margin-top: -2em;
    margin-bottom: 1.5em;
    margin-left: -1.6em;
  }

  p.bj1-qjms {
    background-color: #fff;
    color: #FAAD70;
    font-weight: bold;
    border-radius: 1.5em;
    margin-left: 0em;
    text-align: center;
    text-indent: 0em;
    position: absolute;
    top: -19px;
  }

  .span-box {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #FAAD70;
  }

  .span-text {
    font-size: 16px;
    font-weight: 100;
    padding: 0em 0.15em 0em 0.3em;
  }


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

  span.bj2 {
    background-color: #6E85AF;
    padding: 0.2em 1em 0.2em 1em;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 0.5em;
    color: #FFFFFF;
    box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
  }

  div.bk2 {
    background: #E2F4FE;
    border: 2px solid #3EC9F4;
    padding: 20px 10px;
    margin-top: 2em;
    margin-bottom: 1em;
    position: relative;
  }

  .zysx {
    margin-top: -1.7em;
    margin-left: -2em;
  }


  .zt-zysx {
    font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
    background-color: #24b8bc;
    border-radius: 1.5em;
    color: #FFFFFF;
    font-weight: bold;
    padding: 4px;
    font-size: 1.2em;
    box-shadow: 0.2em 0.2em 0px 0px #c1e3e4;
  }

  .zt-zysx1 {
    font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
    background-color: #96A7D5;
    border-radius: 1.5em;
    color: #FFFFFF;
    font-weight: 100;
    padding: 4px;
    font-size: 1.2em;
  }

  .zt-zysx2 {
    font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
    background-color: #0071BD;
    font-size: 1.2em;
  }

  .zt-1 {
    color: #6F84AF;
    font-weight: bold;
    font-size: 1.1em;

  }

  div.bj2 {
    background-color: #9ADBF9;
    padding: 0.1px 0.5px 0.1px 0.5px;
    border-radius: 1.5em;
    margin-bottom: 0.2em;
    margin-left: -0.6em;
    margin-right: -0.7em;
    margin-top: -1.4em;
    box-shadow: 10px -8px 1px #C7EAFD;
    // box-shadow: 5px -8px  #C7EAFD;
  }

  div.bj3 {
    background-color: #C7EAFD;
    padding: 28px 10px 6px 10px;
    border-radius: 1.5em;
    margin-bottom: 3em;
    margin-left: 0em;
    margin-right: 5em;
    margin-top: 0;
  }



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

  }

  div.bj3-xyx {
    position: absolute;
    top: -15px;
    left: -25px;

  }




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

  .zt-h4 {
    padding: 10px 0;
    border-radius: 1.5em;
  }

  .qyls-h4 {
    font-family: "HiFont Hei GB";
    padding: 0.2em 0;
    text-indent: 0em;
    margin-left: 0%;
  }

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

  }

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

  .bj4-xyx-pd {
    font-size: 16px;
    color: #fff;
    line-height: 20px;
    padding: 22px 10px 22px 10px;
    background-color: #5192C6;
    margin-right: 10px;
    border-radius: 5px;
    flex-wrap: nowrap;
  }

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

  .bj5 {
    background-color: #CEC9DA;
    padding: 20px;
    border-radius: 0.5em;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
    position: relative;
  }

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

  }

  div.bj5-xyx {
    position: absolute;
    top: -20px;

  }

  .bj6 {
    background-color: #FEDDB4;
    padding: 20px;
    border-radius: 0.5em;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
    position: relative;

    .zt-cs {
      color: #F89C1C;
    }

  }

  span.bj6-xyx {
    background-color: #F89C1C;
    color: #FFFFFF;
    border-radius: 0.3em;
    padding: 5px 5px 5px 5px;
    font-size: 1em;
    font-weight: bold;

  }

  div.bj6-xyx {
    position: absolute;
    top: -20px;
  }

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

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

  .bj-2-zt {
    color: #fff;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.8em;
  }

  .bj-1-zt {
    font-family: kaiti;
    font-weight: 100;
    text-indent: 2em;
    color: #fff;
    font-size: 15px;
    line-height: 1.8em;
  }

  .bj-3-zt {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    line-height: 1.8em;
  }

  .rwmb-1 {
    margin-left: -2.6em;
    margin-bottom: 0.2em;
    margin-top: 0.5em;
    height: 3.5em;
  }

  .rwmb-2 {
    margin-left: -2.3em;
    margin-bottom: -0.5em;
    margin-top: 0.2em;
    height: 2.3em;
  }

  .rwmb-3 {
    position: absolute;
    top: -15px;
    left: 5px;
    margin-bottom: 15px;
  }

  .rwmb-4 {
    position: absolute;
    top: -10px;
    left: 20px;
    margin-bottom: 15px;
  }

  .rwmb-5 {
    width: 15%;
    position: absolute;
    top: -10px;
    left: -2px;
  }

}

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

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

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

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

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

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

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

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

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

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

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

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

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

.custom-dialog {
  overflow: hidden !important;

  .el-dialog__body {
    padding: 0;
  }

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

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

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

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

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

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


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

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

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



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

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

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

  h1 {
    font-size: 1.1em;
  }

  .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) {
  .game-Imple {

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

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


    .img-float {
      width: 130px;
    }

    .img-rights {
      width: 130px;
    }

    .btn-w {
      width: 42px;
    }

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

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

    h1 {
      font-size: 1.1em;
    }
  }
}

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

New file
@@ -0,0 +1,1450 @@
<template>
    <div class="chapter" num="2">
        <!-- 1页 -->
        <div class="page-box" page="8">
            <div v-if="showPageList.indexOf(8) > -1">
                <div style="display: flex;">
                    <div style="background-color: #c6eafa;">
                        <p><br></p>
                        <!-- <p><img class="rwmb-1" alt="" src="../../assets/images/xxdt.png" /></p> -->
                    </div>
                    <div class="" style="padding: 15% 0;">
                        <h1 id="a008">学习模块一</h1>
                        <p class="h1-zt">婴幼儿游戏概述</p>
                        <div class="bj1">
                            <p>游戏是婴幼儿的工作，理解游戏对婴幼儿发展的意义至关重要。在教室中，我们应当将促进婴幼儿游戏与保障婴幼儿安全和进行日常照护同等认真对待。只有重视并支持婴幼儿的游戏，他们才能茁壮成长。从这个角度来说，我们肩负着一项重要的责任，即基于婴幼儿的兴趣、能力和发展进程来促进他们的游戏，帮助他们在各个领域获得全面发展。因此，深入了解婴幼儿早期发展的相关知识，并在此基础上观察记录婴幼儿的发展情况就显得尤为重要。
                            </p>
                        </div>
                        <p><img class="rwmb-1" alt="" src="../../assets/images/xxdt.png" /></p>
                        <p class="center"><img class="img-b" alt="" src="../../assets/images/0013-1.jpg" /></p>
                        <p><img class="rwmb-1" alt="" src="../../assets/images/xxcty.png" /></p>
                        <p>游戏是孩子整个的生活。孩子两三个月大时就在床上不停地动手踢脚，独自地玩。到了五六个月的时候，看见东西就要抓；再大一点就这里推推、那里拉拉，还会不停地爬来爬去、走来走去；到了三四岁的时候，游戏的种类更加繁多。你认为游戏对婴幼儿发展的意义是什么？照护者在0～3岁婴幼儿游戏中的作用是什么？婴幼儿的发展与其游戏之间有怎样的关系呢？
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 2页 -->
        <div class="page-box" page="9">
            <div v-if="showPageList.indexOf(9) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>2</span>
                    </li>
                    <li class="header-left-text">婴幼儿游戏活动实施</li>
                </ul>
                <div class="bj3">
                    <div class="bj2">
                        <h2 id="b001">学习任务一</h2>
                        <p class="h2-zt">0～3岁婴幼儿发展概况</p>
                    </div>
                </div>
                <div class="bodystyle">
                    <p><img class="rwmb-1" alt="" src="../../assets/images/xxrwd.png" /></p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 img-0">
                        <tr class="table-th-bc">
                            <td class="center">项目</td>
                            <td class="center">内容</td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc img-h">学习目标</td>
                            <td class="ta-l table-tr-bc">
                                <p> ①了解 0~3 岁婴幼儿的发展概况。</p>
                                <p> ②掌握 0~3 岁婴幼儿的发展特点。</p>
                                <p> ③能够分辨各年龄段婴幼儿的发展表现。</p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc">学习要点</td>
                            <td class="ta-l table-tr-bc">
                                <p>任务重点:掌握 0~3 岁婴幼儿的发展特点。</p>
                                <p>任务难点:能够分辨各年龄段婴幼儿的发展表现。</p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc">学习建议</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0"><b>学习前:</b></p>
                                <p>①完成本任务的学习初体验活动。</p>
                                <p>②查阅 0~3 岁婴儿身心发展特点的相关资料。</p>
                                <p class="td-0"><b>学习中:</b></p>
                                <p>①深入了解婴幼儿早期发展的相关知识。</p>
                                <p>②能够将婴幼儿游戏实景与婴幼儿发展进行--对应。</p>
                                <p class="td-0"><b>学习后:</b></p>
                                <p>①完成本任务的学习效果检测。</p>
                                <p>②尝试结合所学对婴幼儿的行为表现进行初步分析。</p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc">学习运用</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">你觉得在哪些工作场景中可以运用到所学内容?</p>
                                <textarea v-model="tableData.unitOne.one" placeholder="请输入内容" rows="9"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc">学习反思</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">请记录你在学习过程中的任何思考。</p>
                                <textarea v-model="tableData.unitOne.two" placeholder="请输入内容" rows="9"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 3页 -->
        <div class="page-box" page="10">
            <div v-if="showPageList.indexOf(10) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-45">
                    <li class="headerText-bc">学习模块一</li>
                    <li class="headerText">婴儿游戏概述</li>
                    <li class="headerNumber">3</li>
                </ul>
                <div class="bodystyle">
                    <p class="mb-10"><img class="rwmb-2" alt="" src="../../assets/images/aldr.png" /></p>
                    <p>1岁左右的孩子开始喜欢藏找游戏。他们开始喜欢的藏找游戏形式就是蒙脸打开，乐此不疲。当孩子更大一点，他们对于藏找游戏就不再满足于蒙脸打开，开始喜欢更高级的游戏形式。比如，当我们在孩子面前把东西藏在枕头底下、毯子里或其他地方，问“它在哪里啊”“你能找到它吗”时，孩子会开始寻找，并乐在其中。由此可见，游戏形式与婴幼儿的年龄有密切关系。只有了解不同年龄婴幼儿的发展特点与规律，才能为他们提供适宜的游戏，并真正发挥游戏在婴幼儿成长过程中的作用。
                    </p>
                    <p><b>想一想：</b></p>
                    <p>1.为什么6个月左右的孩子没有对藏找游戏产生兴趣？</p>
                    <p>2.开展藏找游戏的前提是什么？</p>
                    <p>3.游戏与婴幼儿发展之间的关系是什么？</p>
                    <h3 id="c001">一、0～1岁婴儿的发展概况</h3>
                    <h4 id="d001">（一）0～3个月婴儿的发展概况</h4>
                    <p>0～3个月婴儿已经准备好迎接世界。在他们的五大感觉发展中，味觉和嗅觉成熟得相对较早。例如，他们能用微笑、皱眉和伸舌头来表示对甜、咸、苦的好恶。新生儿只有20厘米左右的视程，而且看不清楚细节。到3个月时，婴儿不仅能仔细观察近物，还能视觉追物。这个阶段婴儿的动作发展主要表现为小手从握拳到松开，有意识地尝试着去抓东西；颈部肌肉从无力支撑头部到俯卧时抬头45°；四肢从随机、无控制发展到有意识地抬臂、踢腿。他们会运用感官和动作探索世界。<sup>①</sup>
                    </p>
                    <p>这个阶段的婴儿的情绪、情感发展主要表现为哭声的分化和社会性微笑的产生。比起关注物体，他们更喜欢关注人，从最初的喜欢看人脸、喜欢听人说话，发展到喜欢与人交流、玩耍。尤其是对亲近的主要教养人，婴儿已发展出对其的整体感知，渐渐依恋上这个值得信赖的人，并期待与之发生社会互动。关注彼此是令他们愉悦的。很快，婴儿就会对他人（主要教养人）的微笑或低语做出相似的回应，构建有来有往的互动循环。这是一种更复杂的游戏形式。
                    </p>
                    <h4 id="d002">（二）4～6个月婴儿的发展概况</h4>
                    <p>随着年龄的增长，4～6个月婴儿明显开始喜欢探索和游戏。此时，婴儿的感知觉发展更加精细化，并能逐步协调身体内部的感知。感觉统合能力的发展激发婴儿产生了探索世界的新方式。他们看到想要的东西伸手就能拿到，喜欢用口腔认识事物，常常一拿到东西就送入口中。这个阶段的婴儿开始发现自己的动作和外界的关联性。比如，当踢响了挂在床头的铃铛时，他们会反复去踢。
                    </p>
                    <p>随着颈部及腿部肌肉力量的增强，这个阶段的婴儿可以自主进行两侧翻身，开始学习匍匐前进，从被动移动转向自主移动。随着身体协调能力与肌肉力量的增强，婴儿的视野随之拓宽，对外界的控制能力也逐步增强。
                    </p>
                    <p>这个阶段的婴儿的积极情绪体验增多，他们更容易被逗笑，也会用自己的面部表情和身体动作发出信号，但并非对所有人都这样，只对身边亲近的人才会这样。陌生人的出现和靠近反而会使这一阶段的婴儿高度警惕，甚至感到惊慌、害怕而哭闹。这种现象源于婴儿的陌生人焦虑，认生现象也在这一阶段开始出现。
                    </p>
                    <hr class="img-g">
                    <p class="p-even note td-0">&nbsp;&nbsp;<a
                            id="m1">①</a>&emsp;李营：《0～3岁婴幼儿玩教具推荐及游戏指导》视频指导版，2页，北京，人民邮电出版社，2019。</p>
                </div>
            </div>
        </div>
        <!-- 4页 -->
        <div class="page-box" page="11">
            <div v-if="showPageList.indexOf(11) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>4</span>
                    </li>
                    <li class="header-left-text">婴幼儿游戏活动实施</li>
                </ul>
                <div class="bodystyle">
                    <p>这个阶段的婴儿的发音逐渐增多，如声母、韵母陆续出现，连续音节也频繁出现，并且开始意识到通过发声可以展开交流。</p>
                    <h4 id="d003">（三）7～9个月婴儿的发展概况</h4>
                    <p>在动作发展方面，7～9个月婴儿能自如地独坐，开始了手膝爬，爬行距离增加且速度变快。他们的五指初步分化，能够用拇指和其余四指配合捏取物品。同时，他们的单手操作物品和双手合作的能力也在提高。他们会摇晃、投掷、扔东西，会灵活地用双手交换物品，会对击敲东西。
                    </p>
                    <p>在社会交往方面，这个阶段的婴儿对他人尤其感兴趣，越发明确他人的动作和语言是在向自己传递“意图”，即告诉自己要做些什么。他们乐于模仿成人的肢体动作和语言，可以读懂成人的表情。当成人表扬婴儿时，他们会扬扬自得；当成人批评婴儿时，他们会闷闷不乐。
                    </p>
                    <p>这个阶段的婴儿的语言发展表现为能听懂几个简单的词，如“拍手”“再见”，也知道身体部位和家人的称谓，且沉迷于模仿成人的发音。</p>
                    <p>这个阶段的婴儿的独立能力日益增强，他们开始学习独自睡觉，开始学习简单的自我服务，如用杯子喝水、自己拿东西吃。这些技能和婴儿的自主移动一样，成为他们独立自主的重要起点。</p>
                    <h4 id="d004">（四）10～12个月婴儿的发展概况</h4>
                    <p>在动作发展方面，10～12个月婴儿能够滚动、爬行、站起来，并开始学习独立行走。在这个过程中，他们的手逐步被解放出来。除了手的动作继续精细化以外，他们还能在自我认知的引导下学习按照事物的属性进行操作，如拧瓶盖、剥糖纸等。
                    </p>
                    <p>这个阶段的婴儿开始获得客体永恒性，开始喜欢“藏猫猫”和蒙脸游戏。他们对因果关系有了初步的认识，会研究新物品的使用方式和途径，越来越明确如何借助自己已经掌握的行为去解决问题。他们在面临一个已知的问题情境时，会表现得游刃有余。除了关注自己的探索外，他们会比以前更乐意观察并学习成人，且有着惊人的模仿能力。
                    </p>
                    <p>在语言发展方面，这个阶段的婴儿会说常用的词，如妈妈、爸爸等。他们能理解的词也在不断增多，能听懂许多常用的语言指令，能配合家长穿衣、吃饭、洗澡，也能简单地帮家长的小忙，如收拾玩具；还能使用手势语和体态语，如用摇头表示“不”，通过更加精准的表情动作来表达内心的想法。
                    </p>
                    <p>这个阶段的婴儿在生活方面表现得更加独立，学着应对延迟满足，如必须等换完尿布才能玩游戏。</p>
                    <h3 id="c002">二、1～2岁幼儿的发展概况</h3>
                    <h4 id="d005">（一）13～18个月幼儿的发展概况</h4>
                    <p>13～18个月幼儿喜欢探索，开始关注客体的外在属性，如大小、形状、颜色、数量及空间关系，而且能够理解客体间简单的因果关系。在这个年龄段，模仿成为除了探索以外常用的一种学习方式，且贯穿在发展的各个领域。此时，我们可以通过幼儿的行为表现推测其接受的刺激影响。
                    </p>
                    <p>这个阶段的幼儿是娴熟的行动者。他们已学会熟练地行走、上下楼梯，尝试着跑步、踢球等，小手也开始有更多的功能性动作，即按照事物的特点去操作，如搭积木、涂鸦、翻书等。</p>
                    <p>这个阶段的幼儿进入真正的语言发展期，能够用手势、面部表情和词语与他人交流。虽然只是单个的名词或动词，但表达的是一句完整的话。这个阶段的幼儿还喜欢翻阅图书，能够说出书上图片的名称。</p>
                    <p>这个阶段的幼儿独立意识开始萌芽，能更加明确地意识到自己与他人的不同，并且很有自己的想法。他们开始对外界的人、事、物有更清晰的情绪和情感回应，在短时间内情绪变化会很强烈。尤其是当外界
                    </p>
                </div>
            </div>
        </div>
        <!-- 5页 -->
        <div class="page-box" page="12">
            <div v-if="showPageList.indexOf(12) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-45">
                    <li class="headerText-bc">学习模块一</li>
                    <li class="headerText">婴儿游戏概述</li>
                    <li class="headerNumber">5</li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        与他们自身的心理状态和需求不符，如受挫时，他们就会发脾气。但与此同时，幼儿也在发展新的积极情感，如同情。1岁以后，幼儿虽然以独自游戏为主，但已经开始长时间地观察同龄人的游戏，有时候在成人的引导下能够参与到小组活动中。
                    </p>
                    <p>在自我服务活动方面，这个阶段的幼儿会配合成人穿脱衣服、洗手、洗脸，会自己用杯子喝水、用勺子吃饭，甚至会自己刷牙。他们已经具备了基本的生活自理能力，尽管还不够熟练，但这是走出家庭、适应集体生活的重要一步。
                    </p>
                    <h4 id="d006">（二）19～24个月幼儿的发展概况</h4>
                    <p>这个阶段的幼儿学会了思考，能够在脑子里想解决问题的方法，并通过直接的行动尝试着寻找问题的解决方案。这是表征能力发展的结果，预示着幼儿的认知能力将从感知运动阶段发展到前运算阶段。</p>
                    <p>这个阶段的幼儿进入典型的反抗期，不仅事事要亲力亲为，而且为了验证自己的能力，还不惜与成人对抗，执拗地坚持自己的想法和行为。此时的幼儿对什么是“我的”很明确，这使他们的占有、争抢行为增加。不过，他们的反抗行为在家长的适当引导下会逐步减少。
                    </p>
                    <p>在粗大动作发展方面，这个阶段的幼儿一方面继续巩固和发展基本动作能力，如单手扶手上下楼梯、比较稳健地跑、双脚离地跳：另一方面开始掌握一些稍有技巧的肢体动作，如走直线、踮起脚尖走路等。此时幼儿精细动作的发展主要体现在上一年龄段量的累积上，即同样的活动能够做得更细致，如能一页一页地翻书、搭五六块积木、把珠子穿起来、用手指捡豆子、画直线等。
                    </p>
                    <p>这个阶段的幼儿进入语言爆发期，在与他人的对话中变得更主动。他们会用语言简单地谈论熟悉的人和事，不仅会提出问题，还会回答问题。此时他们已经有30个左右的词汇储备量，还会使用双词句。</p>
                    <p>在自我服务活动方面，这个阶段的幼儿可以培养初步的用餐习惯，如安静、愉快地进餐，不挑食、不偏食，不贪吃零食等。幼儿对进餐规则的掌握和相应技能的熟练化，使家长的养育工作逐步轻松起来。</p>
                    <h3 id="c003">三、2～3岁幼儿的发展概况</h3>
                    <h4 id="d007">（一）25～30个月幼儿的发展概况</h4>
                    <p>随着年龄的增长，这个阶段的幼儿已表现出“小大人”的特质，他们对物品所有权、常规活动、吃饭时间以及游戏活动都有自己的主见，在整体的社会适应方面已经娴熟了许多。<sup>①</sup>他们的认知发展正式进入前运算阶段，能够借助表象进行思考，从而认识更抽象的符号体系，如数的概念、用实物或图形表征社会现实等。新的思维能力也带动幼儿对社会事件的理解和记忆力的发展。他们能记住自己的姓名、性别，能回忆起不久前亲身经历的事件。这一阶段的幼儿的思维容量明显增加，思维的抽象水平也比上一阶段有很大提高。
                    </p>
                    <p>这个阶段的幼儿的动作开始变得更加复杂，他们的抓握能力、平衡能力和手眼协调能力都在增强，其技巧性也开始表现出来。这一阶段形成的动作技能主要服务于日常生活及游戏中一些特定的时机与场合，特点是灵活自如、平衡性强，如倒退走、迈过障碍物、独脚站片刻等。工具使用的熟练化也是这一阶段的突出特点：骑小三轮脚踏车，旋转门把手，用大蜡笔画水平与垂直线。日益复杂的动作为他们适应集体生活及参与各类学习活动做好了准备。
                    </p>
                    <hr class="img-g">
                    <p class="p-even note td-0">&nbsp;&nbsp;<a id="m1">①</a>&emsp;［美］Julia Luckenbill、［美］Aarti
                        Subramaniam、［美］Janet Thompson：《0-3岁婴幼儿游戏：适宜的环境创设与师幼互动》，张和颐、尹雪力译，83页，北京，中国轻工业出版社，2022。</p>

                </div>
            </div>
        </div>
        <!-- 6页 -->
        <div class="page-box" page="13">
            <div v-if="showPageList.indexOf(13) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>6</span>
                    </li>
                    <li class="header-left-text">婴幼儿游戏活动实施</li>
                </ul>
                <div class="bodystyle">
                    <p>这个阶段的幼儿能用比较完整的简单句表达自己的意愿和感受，有时还会用复合句。这是由于他们已经开始掌握和运用虚词，如代词、连词及少量的形容词。这一阶段的幼儿对语言活动的兴趣和理解力也提高了许多，已经可以自己看图书了，对有简单故事情节的图画比对单个的图片更有兴趣。儿歌受到他们的欢迎，一些节奏明快、朗朗上口的儿歌还会很快成为他们口中的念词。
                    </p>
                    <p>这个阶段的幼儿对与同伴的交往表现出特别的兴趣。虽然这一阶段的幼儿争取独立的斗争还在继续，发脾气、争抢的行为也时有发生，但随着情绪控制能力的发展，尤其是对他人情感理解力的增强，他们听从规劝的次数增加了。在社会交往中，幼儿还发展了简单的是非观念，如知道抢别人的玩具不好、不应该打人等。所以，这个阶段的幼儿可以和同伴一起玩简单的平行游戏，但与同伴的合作能力还需要在实践中进一步加强。
                    </p>
                    <h4 id="d008">（二）31～36个月幼儿的发展概况</h4>
                    <p>这个阶段的幼儿对社会和自身的理解越来越抽象化，已经逐步习惯借助表象和符号进行思考，并且对属性的理解进一步加深，能够讲出许多常见物品的用途。</p>
                    <p>这个阶段幼儿的动作发展主要体现在协调性和稳定性的增强上。他们的基本动作连贯自如，已经能够应对大多数的突发情况，并开始逐步自动化。例如，幼儿可以在行进中灵活地转弯、玩玩具；能连续地双脚腾空跳跃、单脚站立；还能做简单的口令操，且动作比较准确。在使用玩具材料和工具方面，他们的动作更加精细化，如能够用大蜡笔画封闭的圆，会用手撕简单的几何图形，还能尝试着用筷子、拉拉链等。此时，他们已经做好了独立适应幼儿园生活的准备。
                    </p>
                    <p>这个阶段的幼儿对语言的驾驭能力开始显现出来，能用语言简单介绍自己和家人的基本情况，经常会问“是什么”“为什么”之类的问题。幼儿的词汇量也在使用中激增，他们会使用许多形容词，并能理解一些常用的反义词；喜欢说故事、念儿歌、唱童谣，并能从中体会到自信和快乐。这个阶段的幼儿依然是强烈的情绪表达者，但他们对极端情绪的控制能力明显提高，甚至会试图隐藏自己的感情。这一阶段的幼儿的同伴交往策略不断发展，在成人的引导下可以分享并有简单的合作。与此同时，幼儿逐步发展起来的性别意识开始影响他们与同伴的交往。2岁以后，幼儿已经知道自己是男孩或女孩。幼儿更喜欢和同性别的伙伴一起玩。
                    </p>
                    <div class="bk2">
                        <p><img class="rwmb-5" alt="" src="../../assets/images/sjtz.png" /></p>
                        <p>试着把0～3岁婴幼儿的发展概况以思维导图的形式展示出来，可以从语言、动作、认知、情绪情感等角度呈现，并总结对婴幼儿照护工作实践的启示要点。</p>
                    </div>
                    <p><img class="rwmb-1" alt="" src="../../assets/images/xxxgjc.png" /></p>
                    <ul v-for="(item, index) in unitQuestion.unitOne.slice(0, 2)" :key="index">
                        <li>
                            {{ index + 1 }}.（单选）{{ item.txt }}。
                        </li>
                        <li v-for="(citem, cindex) in item.option" :key="cindex">
                            <input type="radio" :disabled="unitQuestion.isComplete" :name="item.txt"
                                :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" />
                            {{ citem.value }} . {{ citem.txt }}
                        </li>
                        <li v-if="unitQuestion.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
                            <span class="c-g"> 答案：{{ item.answer }}</span>
                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{
                                item.userAnswer
                                }}</span>
                            <span class="icon-box-big fl al-c">
                                <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                    <path
                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                        fill="#1AFA29" p-id="18768"></path>
                                </svg>
                                <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                    <path
                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                        fill="#d81e06" p-id="25746"></path>
                                </svg>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 7页 -->
        <div class="page-box" page="14">
            <div v-if="showPageList.indexOf(14) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-45">
                    <li class="headerText-bc">学习模块一</li>
                    <li class="headerText">婴儿游戏概述</li>
                    <li class="headerNumber">7</li>
                </ul>
                <div class="bodystyle">
                    <ul v-for="(item, index) in unitQuestion.unitOne.slice(2, 4)" :key="index">
                        <li>
                            {{ index + 3 }}.（单选）{{ item.txt }}。
                        </li>
                        <li v-for="(citem, cindex) in item.option" :key="cindex">
                            <input type="radio" :disabled="unitQuestion.isComplete" :name="item.txt"
                                :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" />
                            {{ citem.value }} . {{ citem.txt }}
                        </li>
                        <li v-if="unitQuestion.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
                            <span class="c-g"> 答案：{{ item.answer }}</span>
                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{
                                item.userAnswer
                                }}</span>
                            <span class="icon-box-big fl al-c">
                                <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                    <path
                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                        fill="#1AFA29" p-id="18768"></path>
                                </svg>
                                <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                    <path
                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                        fill="#d81e06" p-id="25746"></path>
                                </svg>
                            </span>
                        </li>
                    </ul>
                    <p>5.你会为19～24个月幼儿设计哪些有利于其精细动作发展的游戏？</p>
                    <textarea v-model="unitQuestion.textOne" placeholder="请输入内容" rows="6"
                        style="max-width: 90%; min-width: 90%; margin-left: 40px;" class="fz-16 textarea-main"
                        @change="saveUnitOne"></textarea>
                    <p>6.根据31～36个月幼儿的发展特点，你会设计哪些有利于促进其粗大动作发展的游戏？</p>
                    <textarea v-model="unitQuestion.textTwo" placeholder="请输入内容" rows="6"
                        style="max-width: 90%; min-width: 90%; margin-left: 40px;" class="fz-16 textarea-main"
                        @change="saveUnitOne"></textarea>
                    <!-- 提交按钮 -->
                    <div class="w100 fl ju-cn">
                        <ul class="fl ju-ev w80 choice">
                            <li>
                                <button class="btn-border btn-w" @click="goCheckJudge">
                                    提交
                                </button>
                            </li>
                            <li>
                                <button @click="changeCheckData" class="btn-border btn-w">
                                    重做
                                </button>
                            </li>
                            <li>
                                <button @click=" unitQuestion.isComplete = !unitQuestion.isComplete"
                                    class="parimary-btn">
                                    查看答案
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 8页 -->
        <div class="page-box" page="15">
            <div v-if="showPageList.indexOf(15) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>8</span>
                    </li>
                    <li class="header-left-text">婴幼儿游戏活动实施</li>
                </ul>
                <div class="bj3">
                    <div class="bj2">
                        <h2 class="pt-10" id="b001">学习任务二</h2>
                        <p class="h2-zt">婴幼儿游戏理论及其启示</p>
                    </div>
                </div>
                <div class="bodystyle">
                    <p><img class="rwmb-1" alt="" src="../../assets/images/xxrwd.png" /></p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #5192c6; border-collapse: collapse" class="fz-15 img-0">
                        <tr class="table-th-bc">
                            <td class="center">项目</td>
                            <td class="center">内容</td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc img-h">学习目标</td>
                            <td class="ta-l table-tr-bc">
                                <p> ①认识不同流派的游戏理论观点。</p>
                                <p> ②能从多角度思考和阐述婴幼儿游戏的意义。</p>
                                <p> ③树立"有鉴别以对待、有扬弃以继承”的态度，明确诸多游戏理论的核心思想对婴幼儿发展的指引。</p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc">学习要点</td>
                            <td class="ta-l table-tr-bc">
                                <p>任务重点：能从多角度思考和阐述婴幼儿游戏的意义。</p>
                                <p>任务难点：树立“有鉴别以对待、有扬弃以继承”的态度，明确诸多游戏理论的核心思想幼儿游戏发展的指引。</p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc">学习建议</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0"><b>学习前：</b></p>
                                <p>①查阅不同流派的游戏理论观点，并记录下来。</p>
                                <p>②思考学习不同流派的游戏理论观点对指导婴幼儿游戏的作用。</p>
                                <p class="td-0"><b>学习中：</b></p>
                                <p>①深入学习不同流派的游戏理论观点，并绘制思维导图。</p>
                                <p>②小组讨论，总结相关游戏理论对当代指导婴幼儿游戏的启示。</p>
                                <p class="td-0"><b>学习后：</b></p>
                                <p>完成本任务的学习效果检测。</p>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc">学习运用</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">你觉得在哪些工作场景中可以运用到所学内容?</p>
                                <textarea v-model="tableData.unitOne.three" placeholder="请输入内容" rows="9"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td class="center table-th-bc">学习反思</td>
                            <td class="ta-l table-tr-bc">
                                <p class="td-0">请记录你在学习过程中的任何思考。</p>
                                <textarea v-model="tableData.unitOne.four" placeholder="请输入内容" rows="9"
                                    class="table-textarea" @change="setBookQuestion"></textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 9页 -->
        <div class="page-box" page="16">
            <div v-if="showPageList.indexOf(16) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-45">
                    <li class="headerText-bc">学习模块一</li>
                    <li class="headerText">婴儿游戏概述</li>
                    <li class="headerNumber">9</li>
                </ul>
                <div class="bodystyle">
                    <p><img class="rwmb-2" alt="" src="../../assets/images/aldr.png" /></p>
                    <p>在历史的发展长河中，有了人类就有了游戏，甚至说游戏的发展与人类社会的发展是息息相关的。伴随着时代的变迁，人们关于游戏的探索越来越多。有的研究者说：“游戏是儿童发泄精力的方式。”有的则说：“游戏是帮助儿童为日后生活做准备的。”有的还说：“游戏是对过去某一事件的重演……”诸多的说法让人们感到游戏的起源越来越神秘。时至今日，游戏从何而来、为什么会存在等问题尚未有定论。人们多是从人类的本能或本性中去寻找答案，这些研究仍然对后人的研究产生着一定的影响。
                    </p>
                    <p><b>想一想：</b></p>
                    <p>1.为什么研究者对于游戏的认识各有不同？</p>
                    <textarea v-model="questionData.unitOne.one" placeholder="请输入内容" rows="6"
                        style="max-width: 90%; min-width: 90%; margin-left: 40px;" class="fz-16 textarea-main"
                        @change="setQuestionData"></textarea>
                    <p>2.面对各种不同的游戏观点，我们应该树立怎样的态度？</p>
                    <textarea v-model="questionData.unitOne.two" placeholder="请输入内容" rows="6"
                        style="max-width: 90%; min-width: 90%; margin-left: 40px;" class="fz-16 textarea-main"
                        @change="setQuestionData"></textarea>
                    <p>3.基于这些观点，我们如何理解游戏的本质及对婴幼儿的发展价值？</p>
                    <textarea v-model="questionData.unitOne.three" placeholder="请输入内容" rows="6"
                        style="max-width: 90%; min-width: 90%; margin-left: 40px;" class="fz-16 textarea-main"
                        @change="setQuestionData"></textarea>
                    <h3 id="c004">一、剩余精力说</h3>
                    <p>剩余精力说是较早出现的游戏理论之一，该游戏理论的代表人物有席勒和斯宾塞。该游戏理论认为，游戏是机体的基本生存需要满足后仍有富裕的精力的产物，即游戏的动力来自“剩余精力”。这一游戏思想初见于18世纪席勒的著作中，后经19世纪斯宾塞发展并形成。
                    </p>
                    <p>席勒在探索文化与艺术的起源时关注到游戏问题，他将游戏和审美活动的性质看成是相同的，认为它们都是超越功利范围的“自由活动”。虽然“自由”，但人们进行游戏需要满足一个物质前提，即基本物质生活需要得以满足。之所以要游戏，是因为人们在满足了基本生存需要之后还有充裕的精力，这些过剩的精力应无任何功利目的地被消耗。他将游戏分为两类：一类是由于物质（或体力）方面过剩引起的游戏，即动物性的身体器官运动的游戏；另一类是由于精神（或美的）方面过剩引起的游戏，即人所特有的想象游戏或艺术的审美活动。通常来说，物质过剩引起的游戏先于精神过剩引起的游戏。而人类在通过追求物质过剩向精神过剩转变的过程中，不断超越功利，远离动物界而走进人生理想境界，成为自觉、自由的活动主体。席勒从人的发展、人的自由的哲学高度阐述了游戏的本质。
                    </p>
                    <p>19世纪英国思想家斯宾塞从生物进化领域来阐述对游戏的认识。他认为活动是动物与人的普遍倾向，但只有进化等级较高的物种才有更多的时间、精力去游戏，而这一游戏是与生存无关的、非功利性的活动。他尝试解释游戏的神经生理机制，认为游戏是处于静止期、得到修复的或重新活跃的神经细胞的“多余的”活动。此外，他还是一名本能论者，他将游戏看作一种本能的、无意识的产物，认为游戏是儿童受本能驱使进行的与成人本能活动相似的但并不具有实际意义的活动。
                    </p>
                    <p>剩余精力说在后世或多或少被人诟病。比如，人们认为它使用的“剩余的”“无目的的”这些字眼带有贬义，反映出一种消极的价值判断，或多或少地看轻或贬低了游戏的价值。但在那个时代，在游戏的研究领域，它的影响是不容忽视的。后人的诸多研究都是在该研究的基础上形成、发展起来的，对教育也具有一定的有益启示：不要机械地禁止儿童的游戏，可以让儿童在游戏中发泄剩余精力，防止因压抑而出问题；鼓励儿童的游戏，游戏是身体发展所不能缺少的。
                    </p>
                    <div class="video-box">
                        <p class="center text">
                            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true"
                                playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true"
                                x5-playsinline="" controls controlslist="nodownload" class="w100 video"
                                style=" border-radius: 10px; "></video>
                        </p>
                        <p class="center videoname">
                            <span>视频：剩余精力说 </span>
                            <el-tooltip class="item" effect="dark"
                                :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == 'dad3d3586822dfe922f40c47ba10e76f') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-01')" />
                            </el-tooltip>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 10页 -->
        <div class="page-box" page="17">
            <div v-if="showPageList.indexOf(17) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>10</span>
                    </li>
                    <li class="header-left-text">婴幼儿游戏活动实施</li>
                </ul>
                <div class="bodystyle">
                    <div class="img-float w150">
                        <div class="bk">
                            <div class="bk1">
                                <img class="rwmb-3 img-d" alt="" src="../../assets/images/xyx.png" />
                            </div>
                            <p>依据剩余精力说，婴幼儿游戏的动力来源于哪里？如何看待这种动力？</p>
                            <textarea v-model="questionData.unitOne.four" placeholder="请输入内容" rows="6"
                                style="max-width: 90%; min-width: 90%;" class="fz-16 textarea-main"
                                @change="setQuestionData"></textarea>
                        </div>
                    </div>
                    <span>
                        <h3 id="c005">二、生活准备说</h3>
                        <p>生活准备说或称前练习说，是由德国学者格鲁斯提出来的。格鲁斯的代表作有《动物的游戏》《人的游戏》。他在研究美学的过程中，受席勒的艺术起源与游戏思想的影响，开始对儿童游戏产生兴趣，在批评剩余精力说的基础上建构起了自己的理论。
                        </p>
                        <p>格鲁斯发现低等动物的本能行为是与生俱来且成熟的，因此不需要游戏；而人类在出生时发育并不充分，需要在家长的帮助和照顾下，锻炼和发展适应生活的技能和本领。这一成长期是动物的不成熟期，游戏也正是这一时期的特有现象。基于此，格鲁斯认为游戏不仅是无伤害地处理动物剩余精力的手段，而且为它们提供了参加严肃生活的途径。他坚信，游戏具有生物适用的技能；游戏是对与生俱来的但不完善和成熟的本能行为的练习，能够帮助动物适应未来的生活。
                        </p>
                        <p>格鲁斯将儿童的游戏分为两类：练习性游戏和社会性游戏。前者包括感知运动的练习和高级的心理能力的练习，其作用在于促进自我控制能力的发展；后者包括追逐打闹和模仿性的游戏，其作用在于形成人与人之间的关系。
                        </p>
                        <p>格鲁斯的游戏理论和斯宾塞的游戏理论并不是矛盾的或针锋相对的，而是相互补充的。它们的共同之处在于从动物进化的视角来解读游戏；不同之处在于两者观察的角度不同，即斯宾塞说明了动物进化与游戏的生物学条件之间的关系，而格鲁斯则进一步说明了动物进化与游戏的生物适应机能之间的关系。格鲁斯所指的高等动物仅凭天生本领无法适应生活，而要借助后天的练习和学习。这是符合事实的。他所强调的幼年期的可塑性与游戏的生物适应机能得到了和谐统一。这也有利于改变人们的儿童观，对扭转当时人们认为儿童游戏无价值的传统观念无疑具有积极的意义。但他过分依赖“本能”概念，把“本能”作为发展的中心驱力，把动物的游戏与人类儿童的游戏等量齐观，也遭到了质疑。它给教育的启示是，婴幼儿时期是重要的游戏期；我们应该重视游戏的价值，引导婴幼儿在游戏中发展将来生活所需要的各种本领。
                        </p>
                        <div class="video-box">
                            <p class="center text">
                                <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.isCollectVideo01 ? '点击取消' : '点击收藏'" placement="top-start">
                                    <img :src="collectResourceList.findIndex(item => item.id == 'dcb45feb677250012c73d3a6affb7d27') > -1 ? collectCheck : collectImg"
                                        alt="" class="collect-btn" @click="handleCollect('video-02')" />
                                </el-tooltip>
                            </p>
                        </div>
                        <div class="bk2">
                            <p><img class="rwmb-5" alt="" src="../../assets/images/bkzn.png" /></p>
                            <p class="center"><span class="ls2">2021年初级育婴师理论知识考试真题</span></p>
                            <p>（单选题）以下说法符合生活准备说观点的是（　　）。</p>
                            <p>A.游戏是剩余精力的发泄</p>
                            <p>B.游戏是用来恢复精力的轻松活动</p>
                            <p>C.游戏是为未来生活做准备</p>
                            <p>D.游戏是人类生物遗传的结果</p>
                            <p>参考答案：C。</p>
                        </div>
                        <h3 id="c006">三、复演说</h3>
                        <p>复演说的主要倡导者是美国心理学家霍尔。在他看来，儿童的游戏是对人类祖先生活的“回忆”重视。霍尔对格鲁斯的游戏理论是不认同的，他认为格鲁斯关于游戏是对未来成人活动的练习的观点是非常片面的、表面的和错误的，因为它忽视了过去。霍尔认为，胎儿在胎内的发展重演了动物进化的过程（从原生物到人），儿童时期的发展则重演了人类进化的过程（从猿到人）。从儿童的身上可以找到与之相应的游戏行为表现，这是人类祖先行为的反映。儿童的游戏就是祖先的“工作”，原始人的打猎、追逐等构成了现代儿童游戏的基本内容。由于这些活动已经成为人的本能，因此儿童做起来不需要花费力气，并且游戏的快乐也总是直接与遗传趋势的方向和力量成比例的。现代生活中是找不到任何对于游戏快乐的解
                        </p>
                    </span>
                </div>
            </div>
        </div>
        <!-- 11页 -->
        <div class="page-box" page="18">
            <div v-if="showPageList.indexOf(18) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-45">
                    <li class="headerText-bc">学习模块一</li>
                    <li class="headerText">婴儿游戏概述</li>
                    <li class="headerNumber">11</li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        释，只有回溯“过去”才能发现游戏的深远意义。许多现代的活动都是原始人生存斗争的复演。此外，儿童在游戏中既能感受到快乐，也能进行情感的宣泄。
                    </p>
                    <p>霍尔的游戏理论在某种程度上反映了儿童游戏内容的社会历史性：社会环境不同，儿童游戏内容不同。他没有就这种现象做出正确的解释。虽然他没能完成这一任务，但其思想也能给予后人的研究一些新的启示。它给教育的启示是，关注游戏给予儿童的快乐情感体验；重视社会历史对儿童发展的影响，也可从社会历史中发现丰富的和可借鉴的游戏形式和素材。
                    </p>
                    <div class="video-box">
                        <p class="center text">
                            <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.isCollectVideo02 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '2bcf6dd642394b18984d7fca4d3e8e46') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-03')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <h3 id="c007">四、松弛说</h3>
                    <p>与剩余精力说不同，松弛说认为人之所以游戏并不是因为精力的“剩余”，而是因为“缺乏”或者“不足”。游戏可以让人们解除身心的疲劳，具有恢复精力、放松的功能。这一思想早在17世纪就已出现。直到19世纪末20世纪初，哲学家拉察鲁斯和柏屈克进一步发展了这一观点。
                    </p>
                    <p>拉察鲁斯认为，游戏或消遣性娱乐性的活动是具有精力恢复作用的活动。此时，他并没有提及儿童游戏，但之后柏屈克发展了他的思想。柏屈克认为，现代人游戏是现代人的工作性质造成的“松弛”的需要，并且只有运动性游戏才有可能将人从这种由心理压力导致的疲劳中解脱出来。在他看来，儿童生来就是“游戏的动物”，他们的游戏受到“种族习惯”和“种族记忆”的驱使。可见，柏屈克的理论是本能论和复演论的混合物。
                    </p>
                    <p>与早期的游戏理论一样，松弛说也受到了许多批评。人们认为这一理论更适合解释成人的游戏活动或者静态与动态活动的关系，而不适合解释儿童的游戏。它给教育的启示是，当面对儿童的情绪压力时，适当的运动性游戏可以帮助儿童进行疏导。
                    </p>
                    <div class="video-box">
                        <p class="center text">
                            <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.isCollectVideo03 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '647ad3aa9f427af5841fed29d3ce39b8') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-04')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <h3 id="c008">五、精神分析学派的游戏理论</h3>
                    <p>精神分析学派是研究婴幼儿游戏中不可忽视的一个重要理论派别。精神分析学派认为，一切生物生存的基础是与生俱来的原始冲动和欲望；人们需要为现实中长期受压抑的冲动和欲望寻找出路，游戏便是表现这些原始的、受压抑的冲动和欲望的隐晦曲折的方式之一。游戏是可供个人支配的自由天地和领域。
                    </p>
                    <p>奥地利医生弗洛伊德是精神分析学派的创始人。在其人格构成学说的基础上，他认为儿童的游戏对于人格的正常发展具有重要的作用；游戏可以帮助儿童释放因内驱力受社会压制而产生的紧张和压力，帮助儿童处理适应不良的经验，因而具有“治疗”的作用；游戏为儿童提供了一个安全的环境，可以让儿童在现实生活中不能实现的愿望在想象中得到实现；游戏作为一种想象或假装的行动，可以使儿童以自己的方式来处理现实生活那些超出他们的能力但对于他们具有特殊意义的事情。当然，游戏不一定全是愉快的体验，也可能是不愉快的体验。
                    </p>
                    <p>在弗洛伊德的基础上，另一位理论家埃里克森在其基础上进一步丰富、充实了关于游戏的观点。埃里克森认为游戏可以减少焦虑情绪、补偿性地满足儿童的愿望、在儿童人格的发展中有积极的作用。同样，埃里克森在其建构的人格发展理论中进一步阐述了对游戏的认识。他认为，儿童在早期的婴幼儿阶段是相对软弱无能的，完全依赖他人的养育和保护；婴幼儿需要从生理需要的满足中，体验到身体的康宁与环境的安全，从而建立对周围环境的信任感；游戏对于母子关系的形成和信任感的产生具有重要的意义。这一
                    </p>
                </div>
            </div>
        </div>
        <!-- 12页 -->
        <div class="page-box" page="19">
            <div v-if="showPageList.indexOf(19) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>12</span>
                    </li>
                    <li class="header-left-text">婴幼儿游戏活动实施</li>
                </ul>
                <div class="bodystyle">
                    <p class="td-0">
                        阶段的婴幼儿往往与母亲相互凝视，这种视觉的相互作用必然带有某种游戏性。母亲的眼神不仅传递着爱的信息，也含有游戏性的鼓励。埃里克森还认为，游戏可以通过创造特定情境，并在角色扮演中化解各阶段人格的危机，让儿童获得成长；此外，儿童的游戏有着明显的性别差异。
                    </p>
                    <div class="video-box">
                        <p class="center text">
                            <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.isCollectVideo04 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '1b6f935a41905a24e2c7bab01e183ee9') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-05')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <div class="bk2">
                        <p><img class="rwmb-5" alt="" src="../../assets/images/tzyd.png" /></p>
                        <p class="center"><span class="ls2">弗洛伊德、埃里克森的人格发展阶段的对比</span></p>
                        <p>北京师范大学刘焱教授对弗洛伊德、埃里克森的人格发展阶段进行了对比，如表1-1所示。</p>
                        <p class="img">表1-1 弗洛伊德与埃里克森的人格发展阶段的对比</p>
                        <p class="center openImgBox"><img class="img-0" alt="" src="../../assets/images/0024-1.jpg" />
                        </p>
                        <p>资料来源：刘焱，《儿童游戏通论》，109页，福州，福建人民出版社，2015。</p>
                    </div>
                    <p>儿童在游戏中所扮演的角色一直是精神分析学派心理学家感兴趣的问题。佩勒在系统分析儿童在游戏中经常扮演的角色以及支配这种角色扮演的动机的基础上发展了弗洛伊德的思想。佩勒认为，儿童的许多游戏背后隐藏着深刻的情绪原因，儿童对于角色的选择往往基于他们对于某个人的感情；他们希望通过模仿那些受人爱戴、尊敬的人，以满足内心和成人一样的愿望。此外，儿童还愿意扮演其他身份角色，以满足他们能够在安全的气氛中做平时不能做的事或者掩饰自己的错误和过失。佩勒还概括了儿童角色游戏的九种典型模式，分析了捉迷藏游戏和操作性游戏产生的原因。他从儿童和母亲关系发展的角度考察了儿童的游戏结构的发展变化。在不同的阶段，矛盾冲突不一样，游戏内容也不一样。
                    </p>
                    <p>蒙尼格从消极的“宣泄”方面发展了弗洛伊德的思想。他认为人生来就有一种攻击性倾向，这种倾向如果得不到宣泄就会形成病症；如果提供一种合法的途径使这种攻击性驱力以对他人无害的方式得到释放，就可以减轻这种驱力而不形成病症；游戏正是这样一种合法的、为社会所允许的途径。蒙尼格相信，游戏具有非实用性的属性，其重要的价值是为释放被抑制的攻击性提供了机会。蒙格尼关于游戏的观点不仅将传统的宣泄理论推向了极端，而且为暴力行为的合理性提供了依据。
                    </p>
                    <p>精神分析学派发端于医学，因而这一学派关于游戏的理论带有明显的临床诊断的色彩。它注重各种不同的、儿童个人的游戏，因而需要在前期对被试进行情况摸底。这将需要耗费大量时间。此外，研究者的主观思想很难在研究中“根除”，出现了同一个儿童的游戏可能在不同的精神分析学家那里得到不同的解释的现象。尽管如此，精神分析学派的游戏理论让人们看到了整个的有着自己的情绪情感、需要和动机的活生生的儿童，引导人们重视儿童的游戏和儿童的早期经验，意识到游戏的重要性。它对我们现在的教育有许多启示：游戏是了解每个儿童的独特性的途径；游戏能够帮助儿童习得应对危机的技能；游戏能够帮助儿童疏导不良情绪；游戏是儿童发展自我和构建人格的重要方式。
                    </p>
                </div>
            </div>
        </div>
        <!-- 13页 -->
        <div class="page-box" page="20">
            <div v-if="showPageList.indexOf(20) > -1">
                <ul class="fl al-c jc-fe pad-t-55 mb-45">
                    <li class="headerText-bc">学习模块一</li>
                    <li class="headerText">婴儿游戏概述</li>
                    <li class="headerNumber">13</li>
                </ul>
                <div class="bodystyle">
                    <h3 id="c009">六、认知发展学派的游戏理论</h3>
                    <p>瑞士儿童心理学家皮亚杰是认知发展理论的创始人，他从儿童认知发展的角度来考察儿童的游戏。在他看来，儿童的游戏是智力活动的一个方面，正如想象与思维的关系一样。</p>
                    <p>皮亚杰认为，从认知活动的本质来看，游戏的实质是同化超过了顺应，即儿童的游戏是主体为满足自我的需要与希望愿望转变成现实而较少考虑事物的客观特征的活动。游戏的主要功能在于对新的心理机能的练习，即每当认知活动发展到一个新的水平时，它的机能最初是不成熟的，通过游戏或练习可以使它成熟起来。
                    </p>
                    <p>皮亚杰不仅用描述认知发展的术语解释了游戏的性质，而且强调了游戏的发生、发展对儿童认知发展水平的反映。有什么样的认知发展水平就有什么类型的游戏出现，如表1-2所示。</p>
                    <div class="video-box">
                        <p class="center text">
                            <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.isCollectVideo05 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '88b0102270455fb73013b867da27ce57') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-06')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <p class="img">表1-2 皮亚杰的游戏发展阶段</p>
                    <p class="center openImgBox"><img class="img-0" alt="" src="../../assets/images/0025-2.jpg" /></p>
                    <p>有关儿童游戏的发生、发展，皮亚杰认为，游戏不是儿童与生俱来的、不习而能的本能，而是随着儿童的认知发展逐渐发生、发展起来的。在新生儿期，既没有游戏，也没有模仿；在2～4个月，随着动作的“循环反应”现象发生，出现了游戏；到12～18个月，游戏开始有所变化，不再是儿童原样重复过去已做过的事情，而是儿童开始能够把一些原先互不相关的动作组合起来构成新的活动以“娱乐”自己；在18～24个月，游戏开始发生质的变化，出现了象征性图式。象征性游戏的出现也标志着思维的出现。
                    </p>
                    <p>2岁以后，象征性游戏大量出现并成为主角。儿童通过象征性替代去满足自身的情感需要。多种多样的象征性图式或来源儿童自身的动作，或者来源于对他人或他物动作的模仿。</p>
                    <p>皮亚杰的游戏理论开拓了从儿童认知发展的角度考察儿童游戏的新途径，在此基础上引发一系列关于游戏与认知发展的实证研究，极大地丰富了人们对儿童游戏的认知发展价值的认识。但皮亚杰的研究只是试图从游戏这一侧面说明儿童认知发展的特征，因此他只关注到了游戏的认知价值，未充分挖掘游戏的其他价值。它对教育的启示是，在理解和尊重儿童的认识发展规律上，更重视发挥游戏的作用，并通过有效的指导促进儿童获得更好的发展。
                    </p>
                    <div class="bk2">
                        <p><img class="rwmb-5" alt="" src="../../assets/images/bkzn.png" /></p>
                        <p class="center"><span class="ls2">2019年高级育婴师理论知识考试真题</span></p>
                        <p>（单选题）我们应该抓住婴幼儿感情培养的（　　），通过有针对性的活动与游戏激发其兴趣。</p>
                        <p>A.机会</p>
                        <p>B.时机</p>
                        <p>C.敏感期</p>
                        <p>D.时期</p>
                        <p>参考答案：C。</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 14页 -->
        <div class="page-box" page="21">
            <div v-if="showPageList.indexOf(21) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>14</span>
                    </li>
                    <li class="header-left-text">婴幼儿游戏活动实施</li>
                </ul>
                <div class="bodystyle">
                    <h3 id="c010">七、其他游戏理论</h3>
                    <p>除了上述理论流派的游戏观点外，还有其他游戏理论对婴幼儿游戏的研究有重要的借鉴价值。</p>
                    <h4 id="d009">（一）社会文化历史学派的游戏理论</h4>
                    <p>社会文化历史学派是以维果茨基、列昂捷夫和鲁利亚为代表的心理学派。他们在论述游戏时，认为儿童游戏不仅有生物学起源，还有社会文化历史起源；他们强调游戏是学前期的主导活动，是在儿童与成人的交往中、在成人的教育与影响下、在与成人之间的关系发生改变的情况下逐渐发生、发展的。
                    </p>
                    <p>维果茨基强调当在发展过程中出现了大量的、超出儿童实际能力的、不能立即实现的愿望的时候，就发生了游戏。3岁前的儿童典型的行为方式就是“立即满足”，即想要的东西就必须马上得到它；受愿望的驱使，儿童通过游戏满足自己的内心需求。他还提到了游戏活动的特点是儿童在游戏中创造了一种“想象的情境”，表现为儿童用一个东西来代替另一个东西，以一种简缩的方式再现真实的生活情境。此外，维果茨基高度评价游戏在儿童发展尤其是高级心理机能发展中的作用，认为游戏是儿童发展的基本源泉，游戏可以创造儿童的“最近发展区”。
                    </p>
                    <div class="img-float w150">
                        <div class="bk">
                            <div class="bk1">
                                <p class="td-0"><img class="rwmb-4 img-c" alt="" src="../../assets/images/gjsy.png" />
                                </p>
                            </div>
                            <p><span class="ls2">最近发展区：</span>
                                儿童的发展有两种水平。一种是儿童的现有水平，指独立活动时所能达到的解决问题的水平；另一种是儿童可能的发展水平，也就是在成人的帮助下所能获得的潜力。两者之间的差异就是最近发展区。
                            </p>
                        </div>
                    </div>
                    <span>
                        <p>维果茨基的游戏理论奠定了社会文化历史学派游戏理论的基石。该学派的游戏理论只研究儿童的游戏，不研究动物的游戏；且研究的重点在于3岁以后的主题角色游戏，并且非常强调成人对儿童游戏的指导和干预。也正因为它对成人作用的过分强调，教育实践中出现了教师导演与指挥儿童游戏，或者按照成人的想法让儿童游戏的情况。但它所提到的一些观点对现在的教育仍然有现实价值：面对不同年龄段的儿童，成人应当扮演不同的角色以参与儿童的游戏。
                        </p>
                        <h4 id="d010">（二）游戏的唤醒理论</h4>
                        <p>唤醒理论也可以被称为内驱力理论，代表人物是伯莱恩、哈特、埃利斯。该理论主要试图解释游戏的生理机制。在他们看来，人和动物的一切行为都直接或间接地指向满足事物需求、解除痛苦等基本的生物需要，指向降低或释放由这些生物需要引起的内驱力。但机体并不仅有食物、睡眠等原始内驱力，还有探究、需求刺激和理解等非生物性、认知的需要。在外界刺激的作用下，这些认知需要可引起活动内驱力、探究内驱力，而游戏正是该类驱力作用的产物。
                        </p>
                    </span>
                    <div class="video-box">
                        <p class="center text">
                            <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.isCollectVideo06 ? '点击取消' : '点击收藏'" placement="top-start">
                                <img :src="collectResourceList.findIndex(item => item.id == '4f1f70e849911a2a90ce4df6b08fd3cc') > -1 ? collectCheck : collectImg"
                                    alt="" class="collect-btn" @click="handleCollect('video-07')" />
                            </el-tooltip>
                        </p>
                    </div>
                    <p>“唤醒”是游戏的唤醒理论的核心概念。机体在不同的刺激水平下会表现出不同的状态，机体存在一种平衡机制用来调节唤醒水平和驱力状态。当外界刺激作用于机体时，机体会先经过分析，确认刺激的性质。若是环境刺激较新异，机体会因主观上的认知不确定性而导致唤醒水平的提升，从而可能感到紧张和焦虑，那么为维持机体平衡，就会想方设法使唤醒达到最佳水平。若是环境刺激较为单调、贫乏，机体会感到厌烦、疲劳，唤醒就会低于最佳水平。在机体平衡机制的作用下，机体会去主动“寻求刺激”以使唤醒从低状态回到最佳。在缺乏刺激、唤醒水平低下的情况下，发生的多是多样性探究。游戏的作用就在于寻找刺激、避免厌烦等不良的唤醒状态，提高唤醒水平。
                    </p>
                    <p>通常而言，游戏是在唤醒处于中等水平上发生的，它受环境刺激的影响和制约。若环境中出现的是新异刺激，儿童会更多表现出探究行为；若是熟悉的环境，儿童会通过多样化的探索表现出游戏行为。</p>
                    <p>根据唤醒理论我们可以得知，刺激绝不是越多越好，过多过少都会对儿童有不利的影响。积极的游戏行为的引导应该帮助维持儿童的唤醒处于中等水平。此外，该理论描述了机体不同性质的行为与不同性质的环境刺激之间的相互制约关系，揭示了环境与人的行为之间的交互作用，进而启示教育者应该重视幼儿园环境的合理组织；同样对于指导开展新生入园的适应工作也有一定的意义。
                    </p>
                </div>
            </div>
        </div>
        <!-- 15页 -->
        <div class="page-box" page="22">
            <div v-if="showPageList.indexOf(22) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>15</span>
                    </li>
                    <li class="header-left-text">婴幼儿游戏活动实施</li>
                </ul>
                <div class="bodystyle">
                    <div class="img-rights w115">
                        <div class="bk">
                            <div class="bk1">
                                <p><img class="rwmb-3 img-b" alt="" src="../../assets/images/xyx.png" /></p>
                            </div>
                            <p>如何帮助维持儿童的唤醒处于中等水平？</p>
                            <textarea v-model="questionData.unitOne.five" placeholder="请输入内容" rows="6"
                                style="max-width: 90%; min-width: 90%;" class="fz-16 textarea-main"
                                @change="setQuestionData"></textarea>
                        </div>
                    </div>
                    <span>
                        <h4 id="d011">（三）游戏的元交际理论</h4>
                        <p>游戏的元交际理论将游戏看作一种意识与信息的意义交流和理解过程。作为一种元交际活动，游戏本身是有价值的，游戏是儿童进入人类的文化和表征世界的一种必需的技能和重要途径。</p>
                        <p>元交际是该理论的核心概念，指的是交际的“交际”，是隐藏在显性的或外在的交际后面的“交际”，实际上是一种抽象的交际。比如说客人在等小伙计上面时，看到小伙计黑黑的指甲浸在面汤里，于是说了一句：“你的指甲都泡在汤里了！”小伙计一笑，说：“没关系！我不怕烫！”很显然这是一次失败的交流。客人的意思是表达不满和对食品安全的怀疑，而非小伙计理解的“关心”；如果信息交流的双方无法准确理解元交际所传递的信息，就会使交际过程阻断，产生意义理解上的分歧。元交际能力是一种非常重要的社会交往能力，是一种就内隐的交际所传达的信息进行意义沟通的能力。缺乏这种能力，就无法胜任社会性交往活动。
                        </p>
                    </span>
                    <p>最早把游戏与元交际联系在一起解释游戏作为一种元交际的深刻意义的是人类学家贝特森。他在动物的游戏中发现，游戏中的许多动作如果是发生在实际生活中，将会引起严重的后果，但是因为发生在游戏中，所以就不被当回事。由此，他提出，所有的动物在游戏时，都会发出某种适应性的信号以使伙伴知道所发生的动作的目的是什么，是真的还是假装的。游戏活动以元交际过程为基础，游戏活动的开展需要以游戏双方能够识别对方的游戏意图为前提，游戏活动具有适应的技能和意义。
                    </p>
                    <p>儿童元交际能力的发展离不开成人的支持。元交际能力是在与成人生活游戏的相互作用的过程中逐步习得的，最早萌发于母婴游戏中。游戏作为元交际也是一种重要的学习方式，可以锻炼儿童掌握人类文化经验系统所必需的元交际能力。
                    </p>
                    <p>过去，人们常把游戏看作发展的其他辅助手段。而游戏的元交际理论打破了这一传统观念，提出游戏本身就是有价值的，它不仅在交际和文明的进化中起过重要的作用，而且本身就是进入人类的文化和表征世界的一种重要途径。这些观点都将引导人们更全面地认识婴幼儿的游戏。
                    </p>
                    <p>各种各样的游戏观点虽然不尽相同，但它们都是前人宝贵的探索经验，也促进了我们对婴幼儿游戏的理解。无论在哪一个时代，游戏始终都是重要的任务，是婴幼儿在发展之路上不可或缺的成长活动。</p>
                    <p><img class="rwmb-1" alt="" src="../../assets/images/xxxgjc.png" /></p>
                    <ul v-for="(item, index) in unitQuestionOne.unitTwo.slice(0, 3)" :key="index">
                        <li>
                            {{ index + 1 }}.（单选）{{ item.txt }}。
                        </li>
                        <li v-for="(citem, cindex) in item.option" :key="cindex">
                            <input type="radio" :disabled="unitQuestionOne.isComplete" :name="item.txt"
                                :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" />
                            {{ citem.value }} . {{ citem.txt }}
                        </li>
                        <li v-if="unitQuestionOne.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
                            <span class="c-g"> 答案：{{ item.answer }}</span>
                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{
                                item.userAnswer
                                }}</span>
                            <span class="icon-box-big fl al-c">
                                <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                    <path
                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                        fill="#1AFA29" p-id="18768"></path>
                                </svg>
                                <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                    <path
                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                        fill="#d81e06" p-id="25746"></path>
                                </svg>
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 16页 -->
        <div class="page-box" page="23">
            <div v-if="showPageList.indexOf(23) > -1">
                <ul class="fl al-c pad-t-55 pad-l-60 mb-45">
                    <li class="header-left-Number">
                        <img class="img-0" src="../../assets/images/headerBj.png" alt="">
                        <span>16</span> 
                    </li>
                    <li class="header-left-text">婴幼儿游戏活动实施</li>
                </ul>
                <div class="bodystyle">
                    <ul v-for="(item, index) in unitQuestionOne.unitTwo.slice(3, 5)" :key="index">
                        <li>
                            {{ index + 4 }}.（单选）{{ item.txt }}。
                        </li>
                        <li v-for="(citem, cindex) in item.option" :key="cindex">
                            <input type="radio" :disabled="unitQuestionOne.isComplete" :name="item.txt"
                                :value="citem.value" v-model="item.userAnswer" @change="saveUnitTwo" />
                            {{ citem.value }} . {{ citem.txt }}
                        </li>
                        <li v-if="unitQuestionOne.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
                            <span class="c-g"> 答案：{{ item.answer }}</span>
                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{
                                item.userAnswer
                                }}</span>
                            <span class="icon-box-big fl al-c">
                                <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                    <path
                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.6044444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                        fill="#1AFA29" p-id="18768"></path>
                                </svg>
                                <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                    <path
                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                        fill="#d81e06" p-id="25746"></path>
                                </svg>
                            </span>
                        </li>
                    </ul>
                    <ul v-for="(item, index) in unitQuestionOne.unitTwoChoice" :key="index">
                        <li>
                            {{ index + 6 }}.（多选）{{ item.txt }}。
                        </li>
                        <li v-for="(citem, cindex) in item.option" :key="cindex">
                            <input type="checkbox" :disabled="unitQuestionOne.isComplete" :name="item.txt"
                                :value="citem.value" v-model="item.userAnswer" @change="saveUnitTwo" />
                            {{ citem.value }} . {{ citem.txt }}
                        </li>
                        <li v-if="unitQuestionOne.isComplete" class="event-header-text-bc pd-5 fl jc-sa">
                            <span class="c-g"> 答案：<span v-for="(answer, index) in item.answer"
                                    :key="'answer-' + index">{{ answer }}、</span></span>

                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：<span
                                    v-for="(userAnswer, index) in item.userAnswer" :key="'userAnswer-' + index">{{
                                    userAnswer }}、</span></span>
                            <span class="icon-box-big fl al-c">
                                <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20">
                                    <path
                                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.6044444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                                        fill="#1AFA29" p-id="18768"></path>
                                </svg>
                                <svg v-if="item.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                                    <path
                                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                                        fill="#d81e06" p-id="25746"></path>
                                </svg>
                            </span>
                        </li>
                    </ul>
                    <p>8.简述皮亚杰游戏理论对游戏本质的理解及其局限性。</p>
                    <textarea v-model="unitQuestionOne.textOne" placeholder="请输入内容" rows="6"
                        style="max-width: 90%; min-width: 90%; margin-left: 40px;" class="fz-16 textarea-main"
                        @change="saveUnitTwo"></textarea>
                    <p>9.结合当下婴幼儿游戏发展，谈谈游戏理论对婴幼儿游戏开展的启示。</p>
                    <textarea v-model="unitQuestionOne.textTwo" placeholder="请输入内容" rows="6"
                        style="max-width: 90%; min-width: 90%; margin-left: 40px;" class="fz-16 textarea-main"
                        @change="saveUnitTwo"></textarea>
                    <!-- 提交按钮 -->
                    <div class="w100 fl ju-cn">
                        <ul class="fl ju-ev w80 choice">
                            <li>
                                <button class="btn-border btn-w" @click="goUnitTwo">
                                    提交
                                </button>
                            </li>
                            <li>
                                <button @click="changeUnitTwo" class="btn-border btn-w">
                                    重做
                                </button>
                            </li>
                            <li>
                                <button @click="unitQuestionOne.isComplete = !unitQuestionOne.isComplete"
                                    class="parimary-btn">
                                    查看答案
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getResourcePath } from "@/assets/methods/resources";
import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
export default {
    name: "chapterOne",
    props: {
        showPageList: {
            type: Array,
        },
    },
    data() {
        return {
            collectImg: require("../../assets/images/icon/heart.png"),
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            videoPathOne: "",
            videoPathTwo: "",
            videoPathThree: "",
            videoPathFour: "",
            videoPathFive: "",
            collectResourceList: [],
            chapterData: {
                isCollectVideo: false,
                isCollectVideo01: false,
                isCollectVideo02: false,
                isCollectVideo03: false,
                isCollectVideo04: false,
                isCollectVideo05: false,
                isCollectVideo06: false,
            },
            questionData: {
                unitOne: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                }
            },
            tableData: {
                unitOne: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                }
            },
            unitQuestion: {
                isComplete: false,
                unitOne: [
                    {
                        txt: "新生儿的视程大概是（　　）",
                        isRight: null,
                        answer: "A",
                        userAnswer: "",
                        option: [
                            {
                                txt: "30厘米",
                                value: "A"
                            },
                            {
                                txt: "20厘米",
                                value: "B"
                            },
                            {
                                txt: "50厘米",
                                value: "C"
                            },
                            {
                                txt: "100厘米",
                                value: "D"
                            },
                        ]
                    },
                    {
                        txt: "一般来说，（　　）个月婴儿能够翻身",
                        isRight: null,
                        answer: "C",
                        userAnswer: "",
                        option: [
                            {
                                txt: "7～9",
                                value: "A"
                            },
                            {
                                txt: "10～12",
                                value: "B"
                            },
                            {
                                txt: "4～6",
                                value: "C"
                            },
                            {
                                txt: "1～3",
                                value: "D"
                            },
                        ]
                    },
                    {
                        txt: "（　　）个月幼儿开始关注客体的外在属性",
                        isRight: null,
                        answer: "B",
                        userAnswer: "",
                        option: [
                            {
                                txt: "18～24",
                                value: "A"
                            },
                            {
                                txt: "4～6",
                                value: "B"
                            },
                            {
                                txt: "7～9",
                                value: "C"
                            },
                            {
                                txt: "13～18",
                                value: "D"
                            },
                        ]
                    },
                    {
                        txt: "（　　）个月幼儿进入典型的反抗期",
                        isRight: null,
                        answer: "A",
                        userAnswer: "",
                        option: [
                            {
                                txt: "19～24",
                                value: "A"
                            },
                            {
                                txt: "7～9",
                                value: "B"
                            },
                            {
                                txt: "12～18",
                                value: "C"
                            },
                            {
                                txt: "1～3",
                                value: "D"
                            },
                        ]
                    },
                ],
                textOne: "",
                textTwo: "",
            },
            unitQuestionOne: {
                isComplete: false,
                unitTwo: [
                    {
                        txt: "认为游戏是用来恢复精力的轻松活动的游戏理论是（　　）",
                        isRight: null,
                        answer: "A",
                        userAnswer: "",
                        option: [
                            {
                                txt: "松弛说",
                                value: "A"
                            },
                            {
                                txt: "剩余精力说",
                                value: "B"
                            },
                            {
                                txt: "复演说",
                                value: "C"
                            },
                            {
                                txt: "生活准备说",
                                value: "D"
                            },
                        ]
                    },
                    {
                        txt: "提出生活准备说的代表人物是（　　）",
                        isRight: null,
                        answer: "C",
                        userAnswer: "",
                        option: [
                            {
                                txt: "霍尔",
                                value: "A"
                            },
                            {
                                txt: "格鲁斯",
                                value: "B"
                            },
                            {
                                txt: "维果茨基",
                                value: "C"
                            },
                            {
                                txt: "皮亚杰",
                                value: "D"
                            },
                        ]
                    },
                    {
                        txt: "认为游戏能够满足儿童的愿望，化解创伤事件造成的伤害和使受压抑的敌意冲动得到发泄的理论流派是（　　）",
                        isRight: null,
                        answer: "B",
                        userAnswer: "",
                        option: [
                            {
                                txt: "社会文化历史学派",
                                value: "A"
                            },
                            {
                                txt: "精神分析学派",
                                value: "B"
                            },
                            {
                                txt: "认知发展学派",
                                value: "C"
                            },
                            {
                                txt: "经典学派",
                                value: "D"
                            },
                        ]
                    },
                    {
                        txt: "认为游戏是儿童的主导活动，强调成人与教育影响对儿童游戏的作用的学派是（　　）",
                        isRight: null,
                        answer: "A",
                        userAnswer: "",
                        option: [
                            {
                                txt: "社会文化历史学派",
                                value: "A"
                            },
                            {
                                txt: "精神分析学派",
                                value: "B"
                            },
                            {
                                txt: "认知发展学派",
                                value: "C"
                            },
                            {
                                txt: "经典学派",
                                value: "D"
                            },
                        ]
                    },
                    {
                        txt: "游戏的唤醒理论告诉我们，组织和创设托幼机构的环境应注意（　　）",
                        isRight: null,
                        answer: "A",
                        userAnswer: "",
                        option: [
                            {
                                txt: "环境刺激越丰富越有利于儿童的发展",
                                value: "A"
                            },
                            {
                                txt: "环境刺激越少越有利于儿童的发展",
                                value: "B"
                            },
                            {
                                txt: "环境刺激应注意适当性、合理性",
                                value: "C"
                            },
                            {
                                txt: "环境刺激与儿童发展的无关",
                                value: "D"
                            },
                        ]
                    },
                ],
                unitTwoChoice: [
                    {
                        txt: "以下游戏理论中属于经典游戏理论的有（　　）",
                        isRight: null,
                        answer: ["A", "B", "C"],
                        userAnswer: [],
                        option: [
                            {
                                txt: "松弛说",
                                value: "A"
                            },
                            {
                                txt: "游戏的元交际理论",
                                value: "B"
                            },
                            {
                                txt: "复演说",
                                value: "C"
                            },
                            {
                                txt: "生活准备说",
                                value: "D"
                            },
                        ]
                    },
                    {
                        txt: "提出生活准备说的代表人物是（　　）",
                        isRight: null,
                        answer: ["A", "B", "C"],
                        userAnswer: [],
                        option: [
                            {
                                txt: "弗洛伊德",
                                value: "A"
                            },
                            {
                                txt: "蒙尼格",
                                value: "B"
                            },
                            {
                                txt: "维果茨基",
                                value: "C"
                            },
                            {
                                txt: "皮亚杰",
                                value: "D"
                            },
                        ]
                    },
                ],
                textOne: "",
                textTwo: "",
            }
        }
    },
    async mounted() {
        const bookQuestion = localStorage.getItem("toddleGame-book-chapter01-tableData");
        if (bookQuestion) {
            this.tableData = JSON.parse(bookQuestion);
        }

        const questionData = localStorage.getItem("toddleGame-book-chapter01-questionData");
        if (questionData) {
            this.questionData = JSON.parse(questionData);
        }

        const UnitOne = localStorage.getItem("toddleGame-book-chapter01-UnitOne");
        if (UnitOne) {
            this.unitQuestion = JSON.parse(UnitOne);
        }

        const unitTwo = localStorage.getItem("toddleGame-book-chapter01-UnitTwo");
        if (unitTwo) {
            this.unitQuestionOne = JSON.parse(unitTwo);
        }

        this.getVidoePath()
        this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
    },
    methods: {
        async getVidoePath() {
            this.videoPathOne = await getResourcePath(
                "dad3d3586822dfe922f40c47ba10e76f"
            );
            this.videoPathTwo = await getResourcePath(
                "dcb45feb677250012c73d3a6affb7d27"
            );
            this.videoPathThree = await getResourcePath(
                "2bcf6dd642394b18984d7fca4d3e8e46"
            );
            this.videoPathFour = await getResourcePath(
                "647ad3aa9f427af5841fed29d3ce39b8"
            );
            this.videoPathFive = await getResourcePath(
                "1b6f935a41905a24e2c7bab01e183ee9"
            );
            this.videoPathSix = await getResourcePath(
                "88b0102270455fb73013b867da27ce57"
            );
            this.videoPathSeven = await getResourcePath(
                "4f1f70e849911a2a90ce4df6b08fd3cc"
            );
        },
        handleCollect(e) {
            if (e == 'video-01') {
                this.handleCollectResource("dad3d3586822dfe922f40c47ba10e76f", "dad3d3586822dfe922f40c47ba10e76f", '', "视频", "bits", '视频：剩余精力说')
                this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo
            } else if (e == 'video-02') {
                this.handleCollectResource("dcb45feb677250012c73d3a6affb7d27", "dcb45feb677250012c73d3a6affb7d27", '', "视频", "bits", '视频：生活准备说')
                this.chapterData.isCollectVideo01 = !this.chapterData.isCollectVideo01
            } else if (e == 'video-03') {
                this.handleCollectResource("2bcf6dd642394b18984d7fca4d3e8e46", "2bcf6dd642394b18984d7fca4d3e8e46", '', "视频", "bits", '视频：复演说')
                this.chapterData.isCollectVideo02 = !this.chapterData.isCollectVideo02
            } else if (e == 'video-04') {
                this.handleCollectResource("647ad3aa9f427af5841fed29d3ce39b8", "647ad3aa9f427af5841fed29d3ce39b8", '', "视频", "bits", '视频：松弛说')
                this.chapterData.isCollectVideo03 = !this.chapterData.isCollectVideo03
            } else if (e == 'video-05') {
                this.handleCollectResource("1b6f935a41905a24e2c7bab01e183ee9", "1b6f935a41905a24e2c7bab01e183ee9", '', "视频", "bits", '视频：精神分析学派的游戏理论')
                this.chapterData.isCollectVideo04 = !this.chapterData.isCollectVideo04
            } else if (e == 'video-06') {
                this.handleCollectResource("88b0102270455fb73013b867da27ce57", "88b0102270455fb73013b867da27ce57", '', "视频", "bits", '视频：认知发展学派的游戏理论')
                this.chapterData.isCollectVideo05 = !this.chapterData.isCollectVideo05
            } else if (e == 'video-07') {
                this.handleCollectResource("4f1f70e849911a2a90ce4df6b08fd3cc", "4f1f70e849911a2a90ce4df6b08fd3cc", '', "视频", "bits", '视频：社会文化历史学派的游戏理论')
                this.chapterData.isCollectVideo06 = !this.chapterData.isCollectVideo06
            }

            this.handleChapterData();
        },
        //资源收藏事件
        // resourcePath  文件路径，
        // resourceType  文件类型
        // source        文件来源
        handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
            let list = this.collectResourceList
            if (list.findIndex(item => item.id == id) > -1) {
                list = list.filter(item => item.id != id)
            } else {
                list.push({
                    id,
                    md5,
                    resourcePath,
                    resourceType,
                    source,
                    resourceName,
                })
            }
            this.collectResourceList = list
            setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
        },
        setBookQuestion() {
            localStorage.setItem(
                "toddleGame-book-chapter01-tableData",
                JSON.stringify(this.tableData)
            );
        },
        setQuestionData() {
            localStorage.setItem(
                "toddleGame-book-chapter01-questionData",
                JSON.stringify(this.questionData)
            );
        },
        saveUnitOne() {
            localStorage.setItem('toddleGame-book-chapter01-UnitOne', JSON.stringify(this.unitQuestion))
        },
        saveUnitTwo() {
            localStorage.setItem('toddleGame-book-chapter01-UnitTwo', JSON.stringify(this.unitQuestionOne))
        },
        goCheckJudge() {
            for (let index = 0; index < this.unitQuestion.unitOne.length; index++) {
                const item = this.unitQuestion.unitOne[index];
                if (item.userAnswer == item.answer) {
                    item.isRight = true
                } else {
                    item.isRight = false
                }
            }
            this.unitQuestion.isComplete = true
        },
        changeCheckData() {
            localStorage.removeItem("toddleGame-book-chapter01-UnitOne")
            for (let index = 0; index < this.unitQuestion.unitOne.length; index++) {
                const item = this.unitQuestion.unitOne[index];
                item.userAnswer = ""
                item.isRight = null
            }
            this.unitQuestion.isComplete = false
            this.unitQuestion.textOne = ""
            this.unitQuestion.textTwo = ""
        },

        goUnitTwo() {
            for (let index = 0; index < this.unitQuestionOne.unitTwo.length; index++) {
                const item = this.unitQuestionOne.unitTwo[index];
                if (item.userAnswer == item.answer) {
                    item.isRight = true
                } else {
                    item.isRight = false
                }
            }

            for (let index = 0; index < this.unitQuestionOne.unitTwoChoice.length; index++) {
                const item = this.unitQuestionOne.unitTwoChoice[index];
                if (item.userAnswer.length === item.answer.length) {
                    // 使用every方法检查userAnswer中的每个元素是否都在answer中
                    const isRight = item.userAnswer.every(answer => item.answer.includes(answer));
                    item.isRight = isRight;
                } else {
                    // 如果长度不同，则它们不可能完全相同
                    item.isRight = false;
                }
            }
            this.unitQuestionOne.isComplete = true
        },
        changeUnitTwo() {
            localStorage.removeItem("toddleGame-book-chapter01-UnitTwo")
            for (let index = 0; index < this.unitQuestionOne.unitTwo.length; index++) {
                const item = this.unitQuestionOne.unitTwo[index];
                item.userAnswer = ""
                item.isRight = null
            }
            for (let index = 0; index < this.unitQuestionOne.unitTwoChoice.length; index++) {
                const item = this.unitQuestionOne.unitTwoChoice[index];
                item.userAnswer = []
                item.isRight = null
            }
            this.unitQuestionOne.isComplete = false
            this.unitQuestionOne.textOne = ""
            this.unitQuestionOne.textTwo = ""
        }




    }
}
</script>

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

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

New file
@@ -0,0 +1,229 @@
<template>
  <div class="chapter" num="1">
    <div class="page-box mt-20" page="1" style="padding-bottom: 0px">
      <div v-if="showPageList.indexOf(1) > -1">
        <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
      </div>
    </div>
    <div class="page-box mt-20" page="2" style="padding-bottom: 0px">
      <div v-if="showPageList.indexOf(2) > -1">
        <img class="img-0" alt="" src="../../assets/images/SMY.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: 15% 0 15% 0">
          <hr />
          <p class="td-1 fz-15 block2"><b>图书在版编目（CIP）数据</b></p>
          <p class="td-1 fz-15 block2">
            婴幼儿游戏活动实施/赖莎莉，李晶主编.—北京：北京师范大学出版社，2024.6
          </p>
          <p class="td-1 fz-15 block2">ISBN 978-7-303-29442-8</p>
          <p class="td-1 fz-15 block2">
            Ⅰ.①婴… Ⅱ.①赖… ②李… Ⅲ.①学前教育-游戏课-教学法 Ⅳ.①G613.7
          </p>
          <p class="td-1 fz-15 block2">
            中国国家版本馆CIP数据核字（2023）第208970号
          </p>
          <hr />
          <p><br /></p>
          <p><br /></p>
          <p><br /></p>
          <p><br /></p>
          <p class="td-0 fz-15 block3">
            <b>图书意见反馈：gaozhifk@bnupg.com　010-58805079</b>
          </p>
          <p class="td-0 fz-15 block3">营销中心电话：010-58802181　58805532</p>
          <p class="td-0 fz-15 block3">编辑部电话：010-58808898</p>
          <hr />
          <p class="td-0 fz-14 block3">
            出版发行：北京师范大学出版社　www.bnupg.com
          </p>
          <p class="td-0 fz-14 block3">
            　　　　　北京市西城区新街口外大街12-3号
          </p>
          <p class="td-0 fz-14 block3">邮政编码：100088</p>
          <p class="td-0 fz-14 block3">印　　刷：天津中印联印务有限公司</p>
          <p class="td-0 fz-14 block3">经　　销：全国新华书店</p>
          <p class="td-0 fz-14 block3">开　　本：889mm×1194mm　1/16</p>
          <p class="td-0 fz-14 block3">印　　张：12</p>
          <p class="td-0 fz-14 block3">字　　数：320千字</p>
          <p class="td-0 fz-14 block3">版　　次：2024年6月第1版</p>
          <p class="td-0 fz-14 block3">印　　次：2024年6月第1次印刷</p>
          <p class="td-0 fz-14 block3">定　　价：42.80元</p>
          <hr />
          <p class="td-0 fz-15 block3">
            策划编辑：罗佩珍　　　　　　责任编辑：孟　浩
          </p>
          <p class="td-0 fz-15 block3">
            美术编辑：焦　丽　　　　　　装帧设计：焦　丽
          </p>
          <p class="td-0 fz-15 block3 mb-20">
            责任校对：陈　荟　　　　　　责任印制：陈　涛　赵　龙
          </p>
          <p class="center block3"><b>版权所有 侵权必究</b></p>
          <p class="center block3"><b>反盗版、侵权举报电话：</b>010-58800697</p>
          <p class="center block3">北京读者服务部电话：010-58808104</p>
          <p class="center block3">外埠邮购电话：010-58808083</p>
          <p class="center block3">
            本书如有印装质量问题，请与印制管理部联系调换。
          </p>
          <p class="center block3">印制管理部电话：010-58800608</p>
        </div>
      </div>
    </div>
    <!-- 编委会 -->
    <div class="page-box" page="3">
      <div v-if="showPageList.indexOf(3) > -1">
        <div style="background-color: #c6eafa;">
          <div class="fz-16" style="margin: 0 13%; padding: 30% 12%; background-color: #fff;">
            <div class="bj3">
              <div class="bj2">
                <h1 id="a003">编委会</h1>
              </div>
            </div>
            <p class="td-0 mt-20"><b class="tal-j">丛书主编：</b>　洪秀敏</p>
            <p class="td-0">
              <b class="tal-j">丛书副主编：</b>　张根健　商传辉
            </p>
            <p class="td-0">
              <b class="tal-j">本 书 主 编：</b>　赖莎莉　李　晶
            </p>
            <p class="td-0">
              <b class="tal-j">本书副主编：</b>　罗　萌　李　香　鲁　双
            </p>
            <p class="td-0">
              <b class="tal-j">本书参编作者：</b>　彭　萍　冯羽茜　李俊彦　董硕灵
            </p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
            <p><br></p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <h1 id="a004" class="front"><img class="img-d" alt="" src="../../assets/images/sysm.jpg" /></h1>
        <div style="padding: 50px 8% 0 10%">
          <p><span class="ls2">一、教材框架</span></p>
          <p>（一）模块化</p>
          <p>
            本教材围绕居家和托育机构保育人员的岗位要求，重构并序化课程结构，按照婴幼儿游戏与指导内容划分为七个学习模块，分别为婴幼儿游戏概述、婴幼儿玩具选择与游戏环境创设、婴幼儿游戏设计与指导、婴幼儿动作游戏设计与指导、婴幼儿认知游戏设计与指导、婴幼儿语言游戏设计与指导、婴幼儿情绪情感与社会性游戏设计与指导。本教材遵循婴幼儿的成长规律，考虑学生的学习兴趣，采用模块化结构进行编写，不仅能将理论知识、操作技能、实践经验集中展开，还能完成三者与活动方式、方法、方案同步式一体化，以实现提高职业能力和职业素养的人才培养目标。
          </p>
          <p>（二）任务式</p>
          <p>每个学习模块都设计了若干学习任务，各学习任务之间具有一定的逻辑关系。任务式编写模式不仅可以很好地反映婴幼儿托育照护人员工作流程中的工作内容和工作方式，还有助于学生逐步提升自己的职业能力。</p>
          <p>（三）信息化资源</p>
          <p>本教材配有微课、教学课件、试题库等，同时每个学习任务还根据学生学习和内容安排配有随文的配套资源。本教材的配套资源可直接扫描书中的二维码获得，其他资源可使用“京师乐学”微信小程序获取。</p>
          <p><span class="ls2">二、教材使用方法</span></p>
          <p>为适应并满足职业教育模块化学习的要求，本教材十分注重以典型工作任务、典型案例等为载体进行教学单元的组织，以融媒体的形式来建设，方便高等职业院校婴幼儿托育相关专业学生及工作者参考学习。</p>
          <p>“学习初体验”部分介绍与本学习模块相关的实践体验活动，引发学习者思考和讨论。</p>
          <p>“学习任务单”部分简要介绍本学习任务的学习目标及学习要点等，并给学习者提出学习前、学习中、学习后的相关建议。</p>
          <p>“案例导入”部分介绍与学习任务相关的案例或情境故事以导入学习，激发学生学习的兴趣并引发学习者深入思考。学习本任务后，学生可以再次分析该案例，将所学内容应用于实践场景。</p>
          <p>
            正文部分主要呈现与对应学习任务相关的政策文件、系统理论、实践方法等。阐述内容的同时穿插“想一想”“实践拓展”“拓展阅读”等多样化板块，目的就是力求多维度引导学习者将相关理论知识与托育机构工作实践相结合，提升专业能力。
          </p>
          <p>“备考指南”部分主要链接育婴员、保育师、幼儿照护和早教国赛试题。</p>
          <p>“学习效果检测”部分主要设计与本学习任务相关的思考题、运用题等，通过多样化的题型帮助学生检测知识掌握情况。</p>
          <p>“延伸阅读”部分推荐与学习任务相关的图书、论文等，让学生进行学习与拓展。</p>
          <p><span class="ls2">三、课时分配</span></p>
          <p>本教材对应的教学时间为32学时，计2学分。每周安排一次课。</p>

        </div>
      </div>
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <h1 id="a004" class="front"><img class="img-d" alt="" src="../../assets/images/csx.jpg" /></h1>
        <div style="padding: 8% 8% 0 10%">
          <p>
            3岁以下婴幼儿照护服务是生命全周期服务管理的重要内容，事关婴幼儿健康成长，事关千家万户。党中央、国务院高度重视婴幼儿照护服务发展。党的十九大报告在保障和改善民生的蓝图中将“幼有所育”排在七项民生之首；党的二十大报告指出，要“深入贯彻以人民为中心的发展思想”，在“幼有所育”等方面持续用力，“建立生育支持政策体系”。加快发展普惠托育服务体系，专业人才培养是关键。而支撑职业教育高质量发展，专业教材建设是关键。教材建设是育人育才的重要依托，是培养学生职业道德、职业技能、就业创业和继续学习能力的重要载体。职业教育专业教材是职业院校开展教学工作的基础，建设什么样的教材体系，核心教材传授什么内容、倡导什么价值，都直接影响着托育相关专业职业教育的学科建设和人才培养质量。
          </p>
          <p>
            2021年，教育部发布了新调整的职业教育专业目录，一体化设计了中职—高职专科—高职本科专业体系，新增了中职、高职专科、高职本科三个学段婴幼儿托育相关专业，亟需建设相关配套专业教材。《“十四五”职业教育规划教材建设实施方案》明确指出要服务民生领域急需紧缺行业发展，加快建设托育等领域专业课程教材。为服务于托育相关专业教学与课程建设需求，本套丛书以促进学生全面发展、增强综合素质为目标，以打造培根铸魂、启智增慧、适应时代要求、具有较高质量的托育相关专业职业教育教材为重点，力图做到“四个坚持”。
          </p>
          <p><span class="ls2">一、坚持德育为先，发挥课程思政与立德树人功能</span></p>
          <p>
            教材建设的根本问题是培养人的问题。在本套丛书编写过程中，编写团队始终坚持正确的政治方向和价值导向，将习近平新时代中国特色社会主义思想特别是关于教材建设的重要论述贯穿教材建设的各个环节，全面落实课程思政要求，努力贯彻落实立德树人根本任务。编写团队认真贯彻落实党中央、国务院关于发展婴幼儿照护服务的政策精神，将培育和践行社会主义核心价值观融入教材编写的全过程，在价值理念导向、专业知识诠释和实践案例选取过程中，扎根中国大地，站稳中国立场，坚定“四个自信”，努力增强教材铸魂育人功能，注重引导学生增强专业认同感，关爱婴幼儿，热爱托育事业，正确理解3岁以下婴幼儿发展特点研究和托育机构保育工作的重要意义，坚定专业信念，自觉努力成长为有理想信念、有道德情操、有扎实学识、有仁爱之心的婴幼儿健康成长的启蒙者和引路人。
          </p>
          <p><span class="ls2">二、坚持学生为本，遵循学生学习规律与发展需求</span></p>
          <p>
            本套丛书编写坚持以学生为中心的理念，深入研究托育相关专业人才成长规律和学生认知特点，遵循职业教育学生学习的特点、规律和需求，增强教材对学生专业学习与发展的适切性。在编写过程中，编写团队努力以学习成果为导向设计教材结构和内容，注重托育机构工作场景、典型保育工作任务、案例分析等模块化课程和项目化学习成果设计，创新教材呈现形式，通过生活化、情景化、动态化、形象化的案例场景，积极开发具有补充性、更新性和延伸性的学习资源，遵循理论知识与实践技能相统一、从简单到复杂、从单一到综合的学习规律与职业成长规律，注重通过通俗易懂的文字论述和丰富的案例材料，最大限度地激发学生的学习兴趣和探究行为，满足学生多样化、个性化和实用化的学习需求与专业发展需求，提高他们对婴幼儿
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <h1 id="a004" class="front"><img class="img-d" alt="" src="../../assets/images/csx.jpg" /></h1>
        <div style="padding: 50px 8% 0 10%">
          <p class="td-0">
            托育的专业认知、专业情感、专业态度和专业精神等专业素养。
          </p>
          <p><span class="ls2">三、坚持研究为要，反映托育领域最新政策、研究与实践</span></p>
          <p>
            托育相关专业是涉及多学科、综合性强的新专业，目前可直接参考借鉴的资源不多，教材编写难度大。为此，编写团队主要从以下方面入手：一是注重对国家托育改革创新实践与最新政策的动态关注，认真学习并全面贯彻我国托育服务相关政策与法规的最新要求，在教材编写中力求及时反映托育政策和事业改革发展的新要求、新理念和新规范；二是全面对标托育相关专业的教学标准和保育师国家职业技能标准，持续追踪婴幼儿发展与托育研究的动态，深入了解婴幼儿生理与心理发展、营养与喂养、学习与发展、卫生与保健、常见病和伤害预防与处理等领域的专业知识与最新研究进展，及时吸纳新方法和新成果，尽可能体现出先进性、引领性和科学性；三是为充分体现职业教育的实用性与实践性特点，坚持深入调研了解行业企业和托育机构的现状与需求，跟进了解行业企业发展与院校培养的最新动态，努力反映托育行业的新探索、新实践和新经验。
          </p>
          <p><span class="ls2">四、坚持质量为重，建设联合攻关高水平教材编写团队</span></p>
          <p>
            多主体协同、多元化参与，是确保教材思想方向、保障专业水准、拓展教材形式、提升编写质量等的关键所在。本套丛书在编写过程中，充分调动和吸纳了一批儿童早期发展、卫生保健、儿童心理学、学前教育学等方面的高校、科研机构的研究者，职业院校婴幼儿托育相关专业的工作者，来自行业协会、托育机构等的优质资源，组建了一支产教融合、校企合作、结构合理、经验丰富、专业能力强的高水平教材编写团队。大家凝智聚力，联合攻关，统一指导思想、编写理念、编写策略和编写风格，发挥各家所长，相互协调配合，同时加强编写、审定和出版各环节的严格把关，确保专业教材的编写质量，力争打造一批培根铸魂、启智增慧，具有时代性、科学性、权威性、前沿性、实用性的托育职业教育专业精品教材。
          </p>
          <p>本套丛书的编写得到了北京师范大学出版社的大力支持。在撰写过程中，本套丛书参考和引用了国内外许多研究成果与观点，在此深致谢忱。真诚希望本套丛书的出版能够为托育培训者和管理者、广大托育机构工作者等提供有益的参考与借鉴。
          </p>
          <p class="right"><b>北京师范大学 洪秀敏</b></p>
        </div>
      </div>
    </div>
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
        <h1 id="a004" class="front" style="padding-left: 3%;"><img class="img-d" alt="" src="../../assets/images/qy.jpg" /></h1>
        <div style="padding: 50px 8% 0 10%">
          <p>
            游戏贯穿在婴幼儿生活的每一个角落，是婴幼儿重要的学习形式。通过游戏，婴幼儿学会了互动、参与、分享、坚持。在游戏中，婴幼儿的空间知觉、动作技能、语言表达能力、社会交往能力也在逐渐发展。正如皮亚杰所说，新事物是如何产生的？游戏就是这个问题的答案。
          </p>
          <p>作为一名婴幼儿照护者，理解并支持婴幼儿游戏对其发展意义重大。我们肩负着一项重要的责任，即基于每个儿童的兴趣、能力和发展进程来促进他们的游戏，帮助他们在动作、认知、语言、情绪和社会性等多领域获得发展。</p>
          <p>
            为了更好地帮助照护者理解和支持婴幼儿游戏，本教材将岗位核心能力、职业资格考试、专业技能竞赛的相关知识与能力进行有机整合，开发模块化学习内容，试图构建“工作过程完整”而非“学科完整”的学习过程。本教材从“岗、证、赛、课”融合选择学习内容，在强调获取适度够用的陈述性知识或理论知识，如婴幼儿游戏基本理论、婴幼儿游戏活动设计原则、婴幼儿游戏指导要点等的基础上，强调获取完成婴幼儿游戏活动设计与组织工作任务的过程性知识，重点解决“什么是玩具与游戏”“投放什么玩具”“为什么设计婴幼儿游戏活动”“什么样的游戏活动是好的游戏活动”“怎么设计和指导不同的婴幼儿游戏活动”“如何观察与评价婴幼儿游戏活动”等问题。同时本教材融合了大量婴幼儿游戏实践案例，帮助学习者完成从兴趣导入、专业学习再到实践应用的学习过程。
          </p>
          <p>
            本教材根据“师德为先、幼儿为本、能力为重和终身学习”的要求，在每个模块、在实施过程中渗透思政教育。本教材立足学习内容的自然属性和知识体系，结合托育、早教机构从业人员的职业道德要求，从课程思政目标、思政元素、思政案例入手，注重加强专业教育与思政教育的有机融合。本教材旨在构建以“好学、爱童、乐教”为核心的课程思政教学体系，引导学习者关注婴幼儿的身心发展，增强学习者对婴幼儿游戏的研究与学习，让学习者树立正确的游戏观，用温暖的仁爱精神关爱婴幼儿，用科学的理性思维理解婴幼儿，用严谨求实的工作态度和爱岗敬业的职业精神守护婴幼儿。
          </p>
          <p>
            本教材由湖南民族职业学院和长沙幼儿师范高等专科学校组建的编写团队编写。赖莎莉、李晶担任主编负责统稿，丛书编审委员会审稿和定稿。具体分工如下：学习模块一、学习模块五由罗萌、赖莎莉编写；学习模块二由冯羽茜编写；学习模块三、学习模块七由李香编写；学习模块四由彭萍、李晶编写；学习模块六由鲁双编写。全书数字化微课资源主要由董硕灵、李俊彦、李晶负责完成。由于编写水平有限，本教材的不足之处在所难免，殷切希望广大学习者批评、指正。
          </p>
          <p>
            在编写过程中，我们参考了许多专家和学者的研究成果，也引用和借鉴了一部分早教、托育典型案例和图片资料，在此对他们表示衷心的感谢。也希望婴幼儿托育照护同行以及其他关注婴幼儿发展的读者能从本教材中有所收获，共同为促进婴幼儿的健康成长贡献力量。
          </p>
          <p class="right"><b>赖莎莉</b></p>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style scoped></style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 src/books/toddlerGameImplementation/view/index.vue

New file
@@ -0,0 +1,76 @@
<template>
  <div class="game-Imple" @mouseup="handleMouseUp">
    <pageContent></pageContent>
  </div>
</template>

<script>
import pageContent from "./components/index.vue";
export default {
  name: "gameImplementation",
  components: {
    pageContent,
  },
  data() {
    return {};
  },

  mounted() { },
  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>