hebing

litian

2025-01-22 2f88f23ad2ee48f0e7d9169e1f180d309362fabb

hebing

 src/App.vue

@@ -19,6 +19,9 @@
    <aviationEtiquette  v-if="activeBook.name == 'aviationEtiquette'"></aviationEtiquette>
    <childcareInstitutionsManagement  v-if="activeBook.name == 'childcareInstitutionsManagement'"></childcareInstitutionsManagement>
  </div>
    <preschoolGameGuidance  v-if="activeBook.name == 'preschoolGameGuidance'"></preschoolGameGuidance>
    <kindergartenLanguageActivity  v-if="activeBook.name == 'kindergartenLanguageActivity'"></kindergartenLanguageActivity>
</div>
</template>
<script>
  // 解决ERROR ResizeObserver loop completed with undelivered notifications.//问题的
@@ -60,6 +63,8 @@
    aviationSafety: ()=> import("./books/aviationSafety/view/index.vue"),
    aviationEtiquette: ()=> import("./books/aviationEtiquette/view/index.vue"),
    childcareInstitutionsManagement: ()=> import("./books/childcareInstitutionsManagement/view/index.vue"),
    preschoolGameGuidance: ()=> import("./books/preschoolGameGuidance/view/index.vue"),
    kindergartenLanguageActivity: ()=> import("./books/kindergartenLanguageActivity/view/index.vue"),
  },
  data() {
    return {
@@ -103,6 +108,8 @@
      // aviationSafety      //安全检查实务
      // aviationEtiquette   //礼仪服务
      //childcareInstitutionsManagement  //托育机构管理与实务
      // preschoolGameGuidance //学前游戏指导 preschoolGameGuidance
      // kindergartenLanguageActivity
      this.activeBook = await this.config.getBookConfig(
      process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"

 src/assets/methods/resources.js

@@ -9,8 +9,8 @@
      appRefCode,
    })
    .then((res) => {
      if (res != "" && res != undefined) {
        path = res;
      if (res.data != "" && res.data != undefined) {
        path = res.data;
      } else {
        path = process.env.VUE_APP_API_URL + "/file/api/ApiDownload?md5=" + md5;
      }

 src/books/kindergartenLanguageActivity/Fonts/FZHTJW.ttf

Binary files differ

 src/books/kindergartenLanguageActivity/Fonts/FZLTXIHJW.ttf

Binary files differ

 src/books/kindergartenLanguageActivity/Fonts/FZLTZHJW.ttf

Binary files differ

 src/books/kindergartenLanguageActivity/css/default.less

New file
@@ -0,0 +1,1193 @@
.temp-bookInnerContentSports {
  width: 100%;
  height: 100%;
  overflow: auto;

  .page-main {
    width: 100%;
    height: 100%;
    overflow: auto;

    .public-kindergartenLanguageActivity {
      font-family: '宋体';
      max-width: 816px;
      min-width: 375px;
      margin: 0 auto;
      border-color: #f49a4c;
      height: 100%;
      font-size: 18px;

      .page-header-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        .evenBox {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .evenIcon{
            height: 50px;
          }
          .evenContent {
            position: absolute;
            top: 5px;
            left: 0;
            font-size: 16px;
            font-weight: 700;
            font-family: '楷体';

            span:nth-child(1) {
              padding: 0 10px;
              border-right: 1px solid #00ADEF;
              margin-right: 10px;
            }
          }
        }
        .oddBox {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font-size: 16px;
          font-weight: 700;
          font-family: '楷体';
          span:nth-child(1) {
            margin-right: 10px;
          }

          span:nth-child(3) {
            padding: 0 10px;
            border-left: 1px solid #00ADEF;
            margin-left: 10px;
          }
          .oddIcon {
            width: 18px;
            margin-right: 5px;
          }
        }
      }

      .page-box {
        box-sizing: border-box;
        min-height: 1150px;
        margin-bottom: 20px;
        box-shadow: 0 3px 6px 1px #00000029;
        background-color: #fff;
        position: relative;
      }

      .notIndent {
        text-indent: 0 !important;
      }

      .chapter {

        .videoBox {
          width: 100%;
          padding: 30px 20px;
          padding-top: 60px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          align-items: center;
          background-image: url('../images/bj-v.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 100% 100%;

          .videoItem {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .video-border {
              width: 230px;
              height: 180px;
              border: 2px solid #fff;
              border-radius: 10px;
              margin-bottom: 10px;
            }
          }
        }

        .block {
          font-size: 16px;
          color: #333;
          font-weight: 600;
          font-family: '楷体';
        }


        .bk-xyx {
          textarea {
            width: 100%;
            max-width: 630px;
            border: 1px solid #35ACD6;
            border-radius: 5px;
            font-size: 16px;
            font-family: '宋体';
            line-height: 30px;
            padding: 10px;
            box-sizing: border-box;
          }

          textarea:focus {
            outline: none;
            border-color: #000;
          }
        }

        .coverImg {
          position: absolute;
          top: 0;
          left: 0;
        }

        ul {
          list-style-type: none;
        }

        li {
          list-style-type: none;
        }

        @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');
        }

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

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

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


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

        }

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

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

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

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

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



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

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

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

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


        div.bodystyle {
          font-family: '宋体';
          font-size: 18px;
          text-align: justify;
          padding: 10% 10%;
          box-sizing: border-box;
          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 {
          width: 100%;
          text-align: center;


        }

        .note {
          font-size: 0.85em;
        }



        // .block {

        //   color: #00ADEF;
        // }

        .block1 {
          text-align: center;
        }


        .img {
          font-weight: bold;
          font-family: 'FZLTXIHJW';
          text-align: center;
          font-size: 0.85em;
          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 {
          margin-top: 1em;
          text-indent: 2em;
          line-height: 30px;
          // font-size: 18px;
          text-align: justify;
          // font-family: 'msyh';

        }

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

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

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

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

        .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.8em;
          text-align: center;
          margin-bottom: 1em;
          margin-top: 1em;
          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-bk {
          box-shadow: 0em 0.1em 0em 0em #C3C2C0;
          border-top-style: solid;
          border-right-style: solid;
          border-bottom-style: solid;
          border-left-style: none;
          padding: 0.1em 0.8em 0.1em 0.5em;
          font-weight: bold;
          color: #000000;
          margin-bottom: 1em;
          margin-top: 1em;

        }




        .front {
          font-family: 'FZLTZHJW';
          font-weight: bold;
          font-size: 1.8em;
          color: #00ADEF;
          margin-top: 0.5em;
          margin-bottom: 0.5em;
          text-indent: 0em;
          text-align: center;
        }

        .zt-2 {
          font-size: 1.3em;
          font-weight: bold;
          background-color: #6DCFF6;
          border: 1px solid #00ADF2;


        }


        .zt-4 {
          font-family: 'FZLTZHJW';
          color: #01AFEE;
          font-size: 1.8em;
          color: #00ADEF;
          margin-top: 0.5em;
          margin-bottom: 0.5em;
          text-indent: 0em;
          text-align: right;
        }


        .zt-3 {
          font-size: 1.3em;
          font-weight: bold;
          border: 1px solid #00ADF2;

        }

        .left1 {
          text-indent: 3em;
        }



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

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

        }


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

        h6 {
          font-family: 'FZHTJW';
          color: #00ADEF;
          margin-bottom: 0.5em;
          margin-top: 1em;
          font-size: 1.2em;
          text-indent: 0em;
          border-bottom: 2px solid #00ADEF;
        }

        .h6-zt {
          margin-bottom: 0em;
          margin-top: -5em;
          margin-left: 0em;
        }

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

        .img-0 {
          width: 100%;
        }

        .img-a {
          width: 95%;
        }

        .img-b {
          width: 70%;
        }

        .img-c {
          width: 60%;
        }

        .img-d {
          width: 50%;
        }

        .img-e {
          width: 45%;
        }

        .img-f {
          width: 40%;
        }

        .img-g {
          width: 30%;
        }

        .img-h {
          width: 20%;
        }

        .img-i {
          width: 10%;
        }

        .img-j {
          width: 5%;
        }

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

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

        .inline0 {
          height: 3em;
        }

        .inline0-1 {
          height: 2em;
        }

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

        .inline2 {
          height: 2.3em;
        }

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


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

        div.bj {
          margin-bottom: 0em;
          margin-top: -0.5em;
          margin-left: -2.8em;
        }

        .un1 {
          border-bottom: 2px solid #00ADEF;
        }


        .zt-1 {
          font-weight: bold;
          font-size: 1.2em;
          text-indent: 0em;

        }

        .zt-ls1 {
          color: #00ADEF;
          font-weight: bold;
          font-size: 1.2em;
          text-indent: 0em;
        }

        .zt-ls {
          color: #00ADEF;
          text-indent: 0em;
          font-weight: bold;
        }


        span.lsyq-1 {
          background-color: #0082D4;
          padding: 0.2em 0.4em 0.2em 0.4em;
          border-radius: 1.2em;
          margin-right: 0.5em;
          color: #FFFFFF;
          font-weight: bold;
          font-size: 1.3em;
        }

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

        }

        .zt-hs1 {
          font-weight: bold;
          color: #F0855B;
          font-size: 1.2em;
        }

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

        .h1-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 #00ADEF;
          padding: 3px 10px 3px 10px;
          margin-top: 2em;
          border-radius: 1.5em;
          margin-bottom: 1em;
        }

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

        div.bk-1 {
          margin-top: -3em;
          margin-bottom: 1.5em;
          margin-left: -2.5em;
        }




        div.bk2 {
          background: #8DD8F8;
          border: 2px solid #00ADEF;
          padding: 3px 10px 3px 10px;
          margin-top: 2em;
          margin-bottom: 1em;
        }

        div.bk3 {
          border: 2px solid #00ADEF;
          border-radius: 1.5em;
          padding: 3px 10px 3px 10px;
          margin-top: 2em;
          margin-bottom: 1em;
        }



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


        span.bj1 {
          background-color: #00ADEF;
          padding: 0.2em 1em 0.2em 1em;
          font-size: 1em;
          font-weight: bold;
          color: #FFFFFF;
        }

        div.tp {
          margin-bottom: 0.2em;
          margin-top: -3em;
          margin-left: 5.5em;
        }


        div.tp-1 {
          margin-bottom: 0.2em;
          margin-top: -3em;
          margin-left: 3.2em;
        }

        div.tp-2 {
          margin-bottom: 0.2em;
          margin-top: -2.8em;
          margin-left: 18.2em;
        }

        div.tp-3 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: 6em;
        }

        div.tp-4 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: 5em;
        }

        div.tp-5 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: 4em;
        }

        div.tp-6 {
          margin-bottom: 0.2em;
          margin-top: -2.7em;
          margin-left: 5em;
        }

        div.tp-7 {
          margin-bottom: 0.2em;
          margin-top: -2.8em;
          margin-left: 6em;
        }

        div.tp-8 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: -1.2em;
        }

        div.tp-9 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: -2.2em;
        }

        div.tp-10 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: -1.8em;
        }


        .rwmb-1 {
          height: 1.6em;
        }


        .rwmb-4 {
          height: 2em;
        }

        .rwmb-5 {
          height: 2em;
        }

        .rwmb-2 {
          height: 2em;
        }

        .rwmb-3 {
          height: 2em;
        }

        .rwmb-6 {
          height: 2em;
        }


        span.bj2 {
          background-color: #00ADEF;
          padding: 0.2em 1.5em 0.2em 1em;
          font-size: 1.1em;
          font-weight: bold;
          text-indent: 0em;
          color: #FFFFFF;
          border-radius: 1.5em;
        }

        span.bj3 {
          background-color: #00ADEF;
          padding: 0.2em 1.5em 0.2em 1em;
          font-size: 1.1em;
          font-weight: bold;
          margin-left: -0.8em;
          color: #FFFFFF;
          border-radius: 1.5em;
        }

        span.bj4 {
          background-color: #6DCFF6;
          padding: 0.2em 1.5em 0.2em 1em;
          box-shadow: 0.2em 0.2em 0px 0px #00ADEF;
          font-size: 1.1em;
          font-weight: bold;
          margin-left: 0em;
          border-radius: 1.5em;
        }



        div.bj1 {
          background-color: #AAE0FA;
          padding: 0.2em 0.5em 0.2em 0.5em;
          border-radius: 1em;
          margin-bottom: 0.5em;
          margin-left: -0.6em;
          margin-right: -0.6em;
          margin-top: 0.5em;
        }


        div.bj2-1 {
          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.6em;
          margin-top: -1.4em;
        }


        div.bj3 {
          background-color: #C7EAFD;
          padding: 0.8em 1.8em 0.5em 0.1em;
          border-radius: 1.5em;
          margin-bottom: 0.2em;
          margin-left: -0.6em;
          margin-right: -0.6em;
          margin-top: -1.4em;
        }



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

        }

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

        .zt-h4 {
          background-color: #F0BD40;
          padding: 10px;
          color: #FFFFFF;
          margin-left: -2em;
          border-radius: 1.5em;
        }

        .qyls-h4 {
          font-family: "HiFont Hei GB";
          color: #6CB26C;
          font-weight: bold;
          padding: 0.2em;
          text-indent: 0em;
          margin-left: 0%;
        }


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

        }



        .bj5 {
          background-color: #CFCBDC;
          padding: 20px;
          border-radius: 1em;
          margin-bottom: 1em;
          margin-top: 2.5em;
        }

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

        }

        div.bj5-xyx {
          margin-top: -4em;
          margin-bottom: 1.5em;
          margin-left: -1.5em;
        }


        div.bj6 {
          margin-top: 1.6em;
          margin-bottom: -2.2em;
          margin-left: -1.3em;
        }


        span.bj6-xyx {
          background-color: #7B72A1;
          border-radius: 0.5em 0.5em 0em 0em;
          padding: 10px 20px 10px 20px;
          font-size: 1em;
          font-weight: bold;

        }



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


        .zt-cs {
          color: #FCA01B;
        }



        .zysx {
          margin-top: -2.2em;
          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: bold;
          padding: 6px;
          font-size: 1.2em;
        }

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

    }
  }
}

 src/books/kindergartenLanguageActivity/images/0008-1.jpg

 src/books/kindergartenLanguageActivity/images/0021-1.jpg

 src/books/kindergartenLanguageActivity/images/0036-1.jpg

 src/books/kindergartenLanguageActivity/images/0039-1.jpg

 src/books/kindergartenLanguageActivity/images/0053-1.jpg

 src/books/kindergartenLanguageActivity/images/0060-1.jpg

 src/books/kindergartenLanguageActivity/images/0071-1.jpg

 src/books/kindergartenLanguageActivity/images/0078-1.jpg

 src/books/kindergartenLanguageActivity/images/0083-1.jpg

 src/books/kindergartenLanguageActivity/images/0085-1.jpg

 src/books/kindergartenLanguageActivity/images/0085-2.jpg

 src/books/kindergartenLanguageActivity/images/0086-1.jpg

 src/books/kindergartenLanguageActivity/images/0118-1.jpg

 src/books/kindergartenLanguageActivity/images/0131-1.jpg

 src/books/kindergartenLanguageActivity/images/0131-2.jpg

 src/books/kindergartenLanguageActivity/images/0132-1.jpg

 src/books/kindergartenLanguageActivity/images/0132-2.jpg

 src/books/kindergartenLanguageActivity/images/0132-3.jpg

 src/books/kindergartenLanguageActivity/images/0132-4.jpg

 src/books/kindergartenLanguageActivity/images/0133-1.jpg

 src/books/kindergartenLanguageActivity/images/0137-1.jpg

 src/books/kindergartenLanguageActivity/images/0139-1.jpg

 src/books/kindergartenLanguageActivity/images/0148-1.jpg

 src/books/kindergartenLanguageActivity/images/0156-1.jpg

 src/books/kindergartenLanguageActivity/images/0156-2.jpg

 src/books/kindergartenLanguageActivity/images/0157-1.jpg

 src/books/kindergartenLanguageActivity/images/0159-1.jpg

 src/books/kindergartenLanguageActivity/images/0165-1.jpg

 src/books/kindergartenLanguageActivity/images/0171-1.jpg

 src/books/kindergartenLanguageActivity/images/0172-1.jpg

 src/books/kindergartenLanguageActivity/images/0175-1.jpg

 src/books/kindergartenLanguageActivity/images/0178-1.jpg

 src/books/kindergartenLanguageActivity/images/0181-1.jpg

 src/books/kindergartenLanguageActivity/images/0181-2.jpg

 src/books/kindergartenLanguageActivity/images/0182-1.jpg

 src/books/kindergartenLanguageActivity/images/0188-1.jpg

 src/books/kindergartenLanguageActivity/images/0188-2.jpg

 src/books/kindergartenLanguageActivity/images/0189-1.jpg

 src/books/kindergartenLanguageActivity/images/0189-2.jpg

 src/books/kindergartenLanguageActivity/images/0190-1.jpg

 src/books/kindergartenLanguageActivity/images/0190-2.jpg

 src/books/kindergartenLanguageActivity/images/0190-3.jpg

 src/books/kindergartenLanguageActivity/images/0191-1.jpg

 src/books/kindergartenLanguageActivity/images/0192-1.jpg

 src/books/kindergartenLanguageActivity/images/0195-1.jpg

 src/books/kindergartenLanguageActivity/images/0205-1.jpg

 src/books/kindergartenLanguageActivity/images/0208-1.jpg

 src/books/kindergartenLanguageActivity/images/0209-1.jpg

 src/books/kindergartenLanguageActivity/images/0209-2.jpg

 src/books/kindergartenLanguageActivity/images/0210-1.jpg

 src/books/kindergartenLanguageActivity/images/0213-1.jpg

 src/books/kindergartenLanguageActivity/images/0214-1.jpg

 src/books/kindergartenLanguageActivity/images/0215-1.jpg

 src/books/kindergartenLanguageActivity/images/0216-1.jpg

 src/books/kindergartenLanguageActivity/images/0217-1.jpg

 src/books/kindergartenLanguageActivity/images/0218-1.jpg

 src/books/kindergartenLanguageActivity/images/0219-1.jpg

 src/books/kindergartenLanguageActivity/images/0222-1.jpg

 src/books/kindergartenLanguageActivity/images/0230-1.jpg

 src/books/kindergartenLanguageActivity/images/0230-2.jpg

 src/books/kindergartenLanguageActivity/images/0230-3.jpg

 src/books/kindergartenLanguageActivity/images/0231-1.jpg

 src/books/kindergartenLanguageActivity/images/0241-1.jpg

 src/books/kindergartenLanguageActivity/images/0242-1.jpg

 src/books/kindergartenLanguageActivity/images/0246-1.jpg

 src/books/kindergartenLanguageActivity/images/0248-1.jpg

 src/books/kindergartenLanguageActivity/images/0257-1.jpg

 src/books/kindergartenLanguageActivity/images/0266-1.jpg

 src/books/kindergartenLanguageActivity/images/0270-1.jpg

 src/books/kindergartenLanguageActivity/images/0271-1.jpg

 src/books/kindergartenLanguageActivity/images/0273-1.jpg

 src/books/kindergartenLanguageActivity/images/FD.jpg

 src/books/kindergartenLanguageActivity/images/SMY.jpg

 src/books/kindergartenLanguageActivity/images/bj-v.png

 src/books/kindergartenLanguageActivity/images/even.png

 src/books/kindergartenLanguageActivity/images/tb-1.png

 src/books/kindergartenLanguageActivity/images/tb-10.png

 src/books/kindergartenLanguageActivity/images/tb-11.png

 src/books/kindergartenLanguageActivity/images/tb-2.png

 src/books/kindergartenLanguageActivity/images/tb-3.png

 src/books/kindergartenLanguageActivity/images/tb-4.png

 src/books/kindergartenLanguageActivity/images/tb-5.png

 src/books/kindergartenLanguageActivity/images/tb-6.png

 src/books/kindergartenLanguageActivity/images/tb-7.png

 src/books/kindergartenLanguageActivity/images/tb-8.png

 src/books/kindergartenLanguageActivity/images/tb-9.png

 src/books/kindergartenLanguageActivity/images/tb.png

 src/books/kindergartenLanguageActivity/images/ti-icon.png

 src/books/kindergartenLanguageActivity/images/z1.jpg

 src/books/kindergartenLanguageActivity/images/z10.jpg

 src/books/kindergartenLanguageActivity/images/z2.jpg

 src/books/kindergartenLanguageActivity/images/z3.jpg

 src/books/kindergartenLanguageActivity/images/z4.jpg

 src/books/kindergartenLanguageActivity/images/z5.jpg

 src/books/kindergartenLanguageActivity/images/z6.jpg

 src/books/kindergartenLanguageActivity/images/z7.jpg

 src/books/kindergartenLanguageActivity/images/z8.jpg

 src/books/kindergartenLanguageActivity/images/z9.jpg

 src/books/kindergartenLanguageActivity/js/examinationList.js

New file
@@ -0,0 +1,28 @@
const testData = {
  2: {
    15: [66984, 66985, 66986],
  },
  3: {
    29: [67015, 67016, 67017, 67018, 67019, 67020, 67021],
  },
  4: {
    54: [67022, 67023, 67024, 67025, 67026, 67027, 67028, 67029, 67030],
  },
  5: {
    70: [67031, 67032, 67033, 67034, 67035, 67036, 67037, 67038, 67039],
  },
  6: {
    99: [67040, 67041, 67042, 67043, 67044, 67045, 67046, 67047],
  },
  7: {
    113: [67048, 67049, 67050, 67051, 67052, 67053, 67054, 67055],
  },
  8: {
    136: [67056, 67057, 67058, 67059, 67060, 67061],
  },
  9: {
    146: [67062, 67063, 67064, 67065, 67066, 67067],
  },
};

export default testData;

 src/books/kindergartenLanguageActivity/js/tool.js

New file
@@ -0,0 +1,57 @@
import SparkMD5 from "spark-md5";

export function getFileMd5(file, chunkSize) {
  return new Promise((resolve, reject) => {
    let blobSlice =
      File.prototype.slice ||
      File.prototype.mozSlice ||
      File.prototype.webkitSlice;
    let chunks = Math.ceil(file.size / chunkSize);
    let currentChunk = 0;
    let spark = new SparkMD5.ArrayBuffer();
    let fileReader = new FileReader();
    fileReader.onload = function (e) {
      spark.append(e.target.result);
      currentChunk++;
      if (currentChunk < chunks) {
        loadNext();
      } else {
        const md5 = spark.end();
        resolve(md5);
      }
    };
    fileReader.onerror = function (e) {
      reject(e);
    };
    function loadNext() {
      let start = currentChunk * chunkSize;
      let end = start + chunkSize;
      if (end > file.size) {
        end = file.size;
      }
      fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    }
    loadNext();
  });
}

// 获取不受保护的图片
export function getPublicImage(md5, width, height) {
  let src = null;
  if (md5) {
    src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`;
  } else {
    return "";
  }
  if (width) src += `&width=${width}`;
  if (height) src += `&height=${height}`;
  return src;
}

// export function ForTable() {
//   const head = ["健康状况", "标志", "心理方面", "肉体方面", "社会方面"];
//   return head?.map((item) => {
//     return `<tr>${"<th>" + item + "</th>"}</tr>`;
//   });
// }


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

New file
@@ -0,0 +1,385 @@
<!-- eslint-disable no-irregular-whitespace -->
<template>
  <div class="chapter" num="1">
    <div class="page-box" page="1">
      <div v-if="showPageList.indexOf(1) > -1">
        <div class="bodystyle" style="padding-top: 560px">
          <h1 id="a010">
            <img class="img-0 coverImg" alt="" src="../../images/z1.jpg" />
          </h1>
          <h6>学习目标▶</h6>
          <p>1.了解语言的本质与功能，树立正确的语言教育观。</p>
          <p>2.正确认识语言教育的意义与价值。</p>
          <p>3.领会语言教育的基本观念，能用基本观念指导幼儿语言教育实践。</p>
          <h6>学习导图▶</h6>
          <p class="center openImgBox">
            <img
              class="img-b"
              style="width: 100%"
              alt=""
              src="../../images/0021-1.jpg"
            />
          </p>
          <h6>导入案例▶</h6>
          <p>幼儿园某班级中，正在进行语言活动……</p>
          <p>
            老师：小朋友们，我们一起来猜个谜语吧，仔细听哦！有时落在山腰，有时挂在树梢，有时像个圆盘，有时像把镰刀。
          </p>
          <p>幼儿：月亮。</p>
          <p>老师：你们真聪明，一下就猜出来了，掌声送给你们！</p>
          <p>老师：你们见过月亮吗？月亮是什么样子的？</p>
          <p>幼儿：像饼干、像圆盘……</p>
          <p>老师：你们可以把这句话说完整吗？圆圆的月亮像什么？</p>
          <p>幼儿1：圆圆的月亮像西瓜。</p>
          <p>幼儿2：圆圆的月亮像镜子。</p>
          <p>幼儿3：圆圆的月亮像皮球。</p>
          <p>……</p>
          <p><br /></p>
        </div>
      </div>
    </div>
    <div class="page-box" page="2">
      <div v-if="showPageList.indexOf(2) > -1">
        <div class="bodystyle">
          <p>
            作为未来的幼儿教师，你了解语言与幼儿的关系吗？理解语言教育的价值吗？要成为一名合格的幼儿教师，该秉持什么样的语言教育观念？让我们一起来探讨吧！
          </p>
          <p style="margin-bottom: 40px">&nbsp;</p>
          <p style="margin-bottom: 40px">&nbsp;</p>
          <p style="margin-bottom: 40px">&nbsp;</p>
          <h2 id="b002">第二节　幼儿语言教育的意义与基本观念</h2>
          <h3 id="c003">一、幼儿语言教育的意义</h3>
          <p>
            语言教育对幼儿的身心发展具有重要意义，它不仅能够直接促进幼儿语言能力的提升，为日后文字学习打下基础，还对幼儿的认知发展与社会性产生重要影响。
          </p>
          <h4 id="d007">（一）促进幼儿语言能力的发展</h4>
          <p>
            幼儿期是幼儿掌握本民族语言最迅速也是最关键的时期。这一时期，婴幼儿的听觉及发音器官不断发育成熟，大脑功能不断完善，正确发出全部语音的条件已经具备，是进行语言教育的最佳时期，错过了这个时期，其语言能力的进步就会比较缓慢。3岁之前婴幼儿的大脑，在神经系统上有显著的优势，神经元之间的突触联系比成人大脑具有更强的可塑性，这些可塑性极强的神经联系为语言学习提供了基础。一旦“关键期”结束，学习第一语言的能力就随之变弱。
          </p>
          <p class="left"><span class="bj2">相关链接</span></p>
          <div class="tp-5">
            <p><img class="rwmb-1" alt="" src="../../images/tb-5.png" /></p>
          </div>
          <p class="center">
            <span class="zt-ls1">狼孩的故事</span>
          </p>
          <p>
            1920年，在印度加尔各答西约1000千米的丛林中，人们发现两个被狼“抚养”长大的幼儿。姐姐叫卡玛拉（约7岁），妹妹叫阿玛拉（约2岁）。姐妹两人被发现时完全不懂得人类语言，会发出和狼差别不大的高嗓尖啸，生活习惯和人类也大不
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="3">
      <div v-if="showPageList.indexOf(3) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            一样，她们被安置在当地的孤儿院内。经过人类训练，妹妹在去世（约3岁）前，语言能力已经相当于一个学步小孩的水平，而姐姐的进度就要慢得多。经过教育家多年的努力，姐姐去世（约17岁）前只懂得40个单词及较差的语法。
          </p>
          <p>
            这是一个非常典型的例子，两人生活环境基本相似，但妹妹学习语言的速度明显比姐姐快很多，说明人类语言学习确实存在“关键期”。因为阿玛拉的年龄处于学习语言的“关键期”内，所以其学习语言的能力要强于错过语言发展“关键期”的卡玛拉。
          </p>
          <p><br /></p>
          <p>
            在现代社会，人们的活动范围日益广泛，人际交往日益频繁，也对语言交际能力提出了更高的要求。它要求社会成员有较高的口语水平，能在众人面前，用清晰、简洁的语言表达自己的观点和见解。这种能力必须从小培养，使婴幼儿尽早地从以表情、动作为主的交际手段提升到口语和多种交流方式并用的阶段。成人应为幼儿创设良好的语言学习环境，对幼儿进行科学、适时的语言教育，以促进其语言能力发展。
          </p>
          <p>
            幼儿语言教育不仅能够提高幼儿口语表达能力，还为其系统的书面语言学习打下基础。幼儿教师应该以游戏、活动的方式让幼儿逐渐熟悉本民族的文字，并尝试感知一些构词规则，但一般不做统一的书写要求。
          </p>
          <h4 id="d008">（二）促进幼儿认知能力的发展</h4>
          <p>
            幼儿获得人类基本语言能力后，其智力也随之发生质的变化。语言促进幼儿智力发展主要表现为语言能够提升其概括能力和间接认识能力。
          </p>
          <p>
            首先，幼儿通过词去命名事物，可以加深其对周围世界的认识。日常生活中，幼儿随着生活范围的不断扩大，会逐渐认识到很多新鲜事物，如果他们能够用词去命名并且描述这些事物，可以加深其对各类事物的认识。
          </p>
          <p>
            其次，幼儿可以用不同的词区分类似的事物，语言可以促进他们概括能力的发展，而概括是思维的重要能力之一。由于缺乏知识经验，他们经常会混淆类似的事物。如大多数幼儿分不清“狼”和“狗”，如果没有语言的介入，两者是很难向他们解释清楚的，语言使区分变得容易，我们可以告诉他们：“狼的尾巴是向下拖着的，比较长；狗的尾巴比较短，而且经常是翘起来的。”
          </p>
          <p>
            最后，幼儿可以根据语言间接地认识事物。有些孩子没有见过大海，如果我们结合图片或视频向其描述：“大海就像一个大大的湖一样，海水是蓝色的，海边有细软的沙子，海水冲向沙滩的时候还会打出朵朵浪花，非常壮观哦！”如果他们感受过湖泊、沙子、蓝色、水花等，就可以根据我们的描述间接地认识大海。
          </p>
          <p>
            语言能力与幼儿认知相互制约，一般来说，幼儿语言表达能力强，其智力发展状况也较好，智力水平低的幼儿，其语言能力往往也较弱。
          </p>
          <h4 id="d009">（三）促进幼儿社会性的发展</h4>
          <p>
            语言可以提高幼儿社会交往能力。随着幼儿语言能力的提高，其社会交往能力
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            也有了很大的改善。幼儿掌握语言后，人际交往明显活跃起来，语言促进了亲子、同伴间的相互理解，如“咱们玩开火车的游戏吧”。幼儿可以通过语言表达自己的意愿与情绪状态等，如“这个小女孩太可怜了，我们帮帮她吧”。幼儿也可以根据语言理解他人的情绪，进而调节自己的行为，如当听到伙伴说不开心的时候，幼儿可能主动去安慰伙伴。在和同伴交流过程中，语言促进了幼儿友谊的发展，也提高了其社会性。
          </p>
          <p>
            随着幼儿口语能力的逐渐提高，他们能用语言去实现自己的目的，进而提升幼儿的自我成就感，而自我成就感的提升又可以促进其积极地使用语言。
          </p>
          <p>
            语言还有助于幼儿道德的发展。幼儿阶段独立的道德判断标准还比较模糊，多数幼儿是以社会或成人的要求为道德行为准则的。幼儿只有正确理解成人或社会的道德要求，其道德行为才会不断形成，而这种理解是建立在语言理解能力的基础之上的。幼儿道德行为是在他们掌握语言后逐步发展起来的。
          </p>
          <p>
            可见，语言不仅能够促进幼儿交往能力的提高、辅助他们获得自我成就感，还有助于幼儿道德行为的发生与发展。幼儿在理解和使用语言的过程中，逐渐由生物人发展为社会人。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·考点预测</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="../../images/tb-1.png" /></p>
              </div>
            </div>
            <p>
              幼儿语言教育促进其社会性的发展，这主要体现在哪些方面？请结合实践说明。
            </p>
            <div class="bk-xyx">
              <textarea
                rows="8"
                v-model="chapter001.textBybItem01"
                @change="setBookQuestion"
              ></textarea>
            </div>
          </div>
          <h3 id="c004">二、幼儿语言教育的基本观念</h3>
          <p>
            幼儿语言教育的基本观念是贯穿幼儿语言教育全部过程的指导思想，直接影响着幼儿语言教育的效果，对语言教育起决定性作用。自20世纪60年代起，有关幼儿语言的研究在世界范围内有了突破性的进展，大量的研究引发人们对幼儿语言及语言教育的重新思考，在观念上也有了很多变化。这些观念层面的变化主要体现在三个方面：更重视语言教育活动的完整性，更重视语言教育活动和其他领域活动的整合性，更重视语言教育的活动性。
          </p>
          <h4 id="d010">（一）完整语言教育观</h4>
          <p>
            完整的语言教育观是指在幼儿语言发展的“关键期”内，有必要给他们提供“完整”的语言学习机会。“完整”体现在目标，内容和活动过程中，即幼儿语言教育的目标应该是完整的，内容应该是全面而完整的，活动过程应该是真实而形式多样的。
          </p>
          <h5 id="e012">1.幼儿语言教育目标应该是完整的</h5>
          <p>
            完整的语言教育目标应该包括培养幼儿在听、说、读、写四个方面的情感态度、认知和能力。对于幼儿来说，主要是培养他们的听说能力和良好的听说习惯，同时帮助他们获得早期阅读和书写的基本技能，以及对听、说、读、写材料与活动的兴趣和情感体验。在所有目标中，培养幼儿良好的听说习惯和技能应成为幼儿语
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <div class="bodystyle">
          <p class="notIndent">言教育的重点。</p>
          <h5 id="e013">2.幼儿语言教育内容应该是全面而完整的</h5>
          <p>
            语言教育的内容应该既涉及幼儿口语表达能力的训练，也涉及简单的书面语言的学习；既让幼儿理解日常生活用语，也不断引导幼儿学习文学语言。近期的研究表明，幼儿早期阅读对幼儿发展具有较高价值。所以，教师在进行语言教育的时候，应把幼儿语言表达能力和阅读理解能力的培养融为一体，而不是割裂为两部分。
          </p>
          <h5 id="e014">3.幼儿语言教育活动过程应该是真实而形式多样的</h5>
          <p>
            语言是用来交流的，幼儿在交流中学习语言是非常自然的事情。完整语言教育观提倡教师创设真实的语言交流环境，在真实的语言环境中，幼儿通过和他人交流，训练自己的语言表达能力。脱离了情境的语言是没有意义的，比如，让幼儿在不理解语言意义的基础上机械背诵古诗词是违背完整语言教育原则的。不论是在专门的语言教育活动中还是在日常语言教育活动中，教师都应该为幼儿提供动口、动手、动脑的生活环境和学习材料，展现给幼儿一个真实的、多样的语言学习环境，让幼儿成为主动的学习者。
          </p>
          <h4 id="d011">（二）整合语言教育观</h4>
          <p>
            整合的语言教育观是指把幼儿语言学习看成一个多领域相互作用的过程，充分意识到幼儿语言与认知、情感等领域的发展是整合一体的关系。在幼儿语言发展过程中，幼儿对每一个新词、每一种句法的习得，都是整个学习系统调整、吸收和发展的结果，幼儿语言能力的发展离不开其他心理能力的支持。整合语言教育观认为，幼儿语言教育的目标、内容、方式都应该和其他领域整合发展。
          </p>
          <h5 id="e015">1.语言教育目标的整合</h5>
          <p>
            语言教育目标的整合是指在制定语言教育目标时，要整合语言认知、语言情感与态度、语言能力与技能的要求，争取做到把应该知道些什么、愿意做些什么和能够干些什么整合起来。这三方面的要求是统一的，它们贯穿于语言教育活动的始终。如果在语言教育中只重视培养语言能力而忽视语言认知和情感态度的培养，幼儿的语言是难以得到真正发展的。幼儿更倾向于去表达那些他们喜爱的人或物，所以语言情感与态度是幼儿语言能力发展的基础，很多幼儿语言能力发展滞后的直接原因就是“不想说”，而不是“不知道”。所以，在语言认知和语言情感与态度的基础上培养幼儿语言能力与技巧是语言教育整合观的具体要求。
          </p>
          <h5 id="e016">2.语言教育内容的整合</h5>
          <p>
            幼儿语言发展是其身心发展中的有机组成部分，幼儿能运用语言去建构自己对世界的理解。所以，语言发展水平会直接影响幼儿认知、社会性和个性的发展。在选择语言教育内容时，应立足于幼儿的整体发展，不仅要考虑幼儿语言技能与技巧的获得，更要考虑语言教育目标对其整体身心发展的影响。语言材料的选择应该既适合幼儿身心发展水平，也能体现自然知识、社会知识、人文知识和语言知识的整合。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <div class="bodystyle">
          <h5 id="e017">3.语言教育方式的整合</h5>
          <p>
            语言教育方式的整合是指教师在组织语言活动时，要以多种组织形式来呈现语言教育内容。活动中应该结合幼儿感知觉、记忆、思维、想象等多种发展因素，允许与幼儿发展有关的多种符号系统参与进来，在外界语言环境的刺激下，促进幼儿产生积极的交往愿望，并主动通过音乐、美术、舞蹈等形式和环境发生相互作用。在整合的发展环境中，幼儿语言学习是主动的、积极的，幼儿就是语言的生产者和创造者而非简单的模仿者。
          </p>
          <h4 id="d012">（三）活动教育观</h4>
          <p>
            活动教育观是指以活动的形式组织幼儿语言教育过程，帮助幼儿学习语言。活动教育观认为，幼儿是在和环境的积极互动中获得语言能力的，强调教师和幼儿共同参与的活动作为语言教育的基本形式，强调引导幼儿在生动活泼的操作实践中成为语言的主动学习者。教师应该为幼儿创设丰富的语言活动环境，让幼儿在活动中不断提升自己的语言能力。
          </p>
          <h5 id="e018">1.教师应该为幼儿提供充分操作语言的机会</h5>
          <p>
            幼儿的语言能力是在和环境的相互作用中进步的，环境为幼儿提供了多种多样的信息，这些信息是在没有压力、非强迫的状态下进入幼儿学习视野的。幼儿语言教育就是引导幼儿积极地与这些信息发生互动的过程。家长和教师应该不断丰富幼儿的生活环境，让幼儿多运用语言表达生活中的人与事。
          </p>
          <h5 id="e019">2.让幼儿在多种形式的操作中发展语言能力</h5>
          <p>
            幼儿的学习方式是直接的，他们直接用眼睛、手、脚等身体器官和环境发生作用，通过具体操作感知世界。语言是表达这些感知的工具之一。教师可以通过游戏、竞赛、实验、观察等活动发展幼儿的语言能力，但所有类型的操作形式都应注意结合幼儿的生活兴趣。
          </p>
          <h5 id="e020">
            3.活动过程中，要注意发挥教师的主导作用并尊重幼儿的主体地位
          </h5>
          <p>
            教师作为一种中介力量出现在幼儿与环境相互作用的关系中，其语言环境创设的质量直接影响幼儿语言能力的发展。教师不仅是语言活动的组织者，更是活动材料的提供者。在活动过程中，教师可以通过提示或暗示、提问、讲述、示范等方式引导幼儿感知和探索。需要注意的是，教师在发挥其主导作用的过程中要尊重幼儿的主体地位，教师要根据幼儿语言发展的年龄特点和兴趣组织语言活动，并考虑活动是否有童趣。
          </p>
          <p>
            观念来源于实践，又指导实践。在幼儿语言教育活动中，教师应以基本观念为指导去设计教育目标，组织教育内容，实施课程方案。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·考点预测</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="../../images/tb-1.png" /></p>
              </div>
            </div>
            <p>
              你认为一名合格的幼儿教师应该秉持哪些幼儿语言教育的基本观念？请阐述你对这些语言观的理解，并结合实际说明如何在教学实践中运用。
            </p>
            <div class="bk-xyx">
              <textarea
                rows="8"
                v-model="chapter001.textBybItem02"
                @change="setBookQuestion"
              ></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <div class="bodystyle">
          <div class="bk2">
            <p class="center"><b>本章小结</b></p>
            <p>
              本章为幼儿园语言教育的基础部分，主要阐释了语言的本质与功能，幼儿语言教育的意义以及幼儿语言教育的基本观念。语言是一种音义结合的符号系统，它具有交流、思维认知、文化传播等功能。语言教育可以直接促进幼儿语言能力的提升，也对幼儿的认知、情感、社会性有重要影响。教师应以完整语言教育观、整合语言教育观和活动教育观为指导，为幼儿创设丰富的语言发展环境。
            </p>
          </div>
          <p><span class="zt-1">关键术语</span></p>
          <div class="tp-8">
            <p><img class="rwmb-3" alt="" src="../../images/tb-9.png" /></p>
          </div>
          <p class="notIndent">1、语言的本质</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter001.textBybItem38"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">2、语音</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter001.textBybItem39"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">3、词汇</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter001.textBybItem40"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">4、语法</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter001.textBybItem41"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">5、完整语言教育观</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter001.textBybItem42"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">6、整合语言教育观</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter001.textBybItem43"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">7、活动教育观</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter001.textBybItem44"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>
            <span class="zt-2">思</span><span class="zt-3">考</span
            ><span class="zt-2">题</span>
          </p>
          <div class="tp-9">
            <p><img class="rwmb-6" alt="" src="image/tb-10.png" /></p>
          </div>
          <p>1.简述语言的本质。</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="chapter001.textBybItem03"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>2.你认为语言教育在幼儿发展中有何意义及作用？</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="chapter001.textBybItem04"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>3.幼儿语言教育有哪些基本观念？谈谈你对每种观念的理解。</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="chapter001.textBybItem05"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="left"><span class="bj4">实训练习</span></p>
          <p>请结合幼儿园实践阐述如何运用“活动教育观”指导幼儿语言教育实践。</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="chapter001.textBybItem06"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="left1">
            <span class="zt-3">拓</span><span class="zt-2">展</span
            ><span class="zt-3">阅</span><span class="zt-2">读</span>
          </p>
          <div class="tp-10">
            <p><img class="rwmb-6" alt="" src="../../images/tb-11.png" /></p>
          </div>
          <p>
            史蒂芬·平克.语言本能：人类语言进化的奥秘［M］.欧阳明亮，译.杭州：浙江人民出版社，2015.
          </p>
          <p class="block">
            本书系统地为读者介绍了人类和语言的关系、语言与思维的关系、语言机制、语法、语音、单词、语言与大脑的关系、语言的差异性、幼儿学习语言的先天倾向性及语言器官、语言起源等相关知识，此书内容丰富，案例鲜明，并配有高清图片，具有较强的可读性。读完本书，你会对人类语言全貌有新的认识与思考。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageHeader from "./pageHeader.vue";
export default {
  name: "front-001",
  props: {
    showPageList: {
      type: Array,
    },
  },
  components: {
    pageHeader,
  },
  data() {
    return {
      chapter001: {},
    };
  },
  methods: {
    setBookQuestion() {
      this.$emit("setBookQuestion", this.chapter001);
    },
  },
};
</script>

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

New file
@@ -0,0 +1,816 @@
<template>
  <div class="chapter" num="2">
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
        <div class="bodystyle" style="padding-top: 508px">
          <h1 id="a013">
            <img class="img-0 coverImg" alt="" src="../../images/z4.jpg" />
          </h1>
          <h6>学习目标▶</h6>
          <p>
            1.了解幼儿文学作品的特点，能根据幼儿需要选择适合其学习与欣赏的优秀经典幼儿文学作品。
          </p>
          <p>2.掌握幼儿故事教学活动的组织过程，尝试开展故事活动。</p>
          <p>
            3.掌握幼儿诗歌、散文（诗）活动的组织过程，能初步开展诗歌散文活动。
          </p>
          <p>
            4.了解幼儿谜语、绕口令教学活动的特点与规律，能设计并尝试组织谜语、绕口令活动。
          </p>
          <p>
            5.体验我国幼儿文学作品体裁之多样、内容之丰富，感受适宜的语言教育活动对幼儿身心健康成长的意义。
          </p>
          <h6>学习导图▶</h6>
          <p class="center openImgBox">
            <img
              class="img-b"
              style="width: 100%"
              alt=""
              src="../../images/0086-1.jpg"
            />
          </p>
          <h6>导入案例▶</h6>
          <p>
            小班的胡老师准备给小朋友讲故事《春天的电话》。在开始讲故事之前，胡老师将一张“春天”的大背景图贴在磁板上，并用磁钉将小熊、小松鼠、小兔、小青蛙和小鸡的图片翻压在背景图边缘，再用布帘遮盖好磁板；将玩具电话和小动物头饰放到操作台下，然后又检查了录音机和磁带。
          </p>
          <p>
            在组织幼儿文学作品活动时，教师往往会根据故事内容采用不同的教学方法，选择不同的辅助教具。你知道这些属于什么教具吗？胡老师为什么准备这些教具？让我们一起走进幼儿文学作品活动中来体验感受吧！
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
        <div class="bodystyle">
          <h2 id="b012">第四节　幼儿谜语、绕口令活动的设计与组织指导</h2>
          <p>
            谜语与绕口令属于幼儿诗歌的特殊形式。它们不仅具有诗歌在句式上的对仗工整、音韵和谐的特点，还各具特色。教学中教师除了应满足幼儿诗歌教学的一般规律之外，还需注意它们各自的特殊性。
          </p>
          <h3 id="c029">一、幼儿谜语教学</h3>
          <h4 id="d074">（一）什么是谜语</h4>
          <p>
            谜语既是一种特殊的儿歌，又是有趣的智力游戏材料。它具有儿歌语言通俗简练、韵律自然和谐的特点，有的还采用排比、对偶的句式，对丰富幼儿词汇、发展语言有积极意义，同时又能开启幼儿心智，达到训练思维的作用。
          </p>
          <p>
            谜语由谜面与谜底构成，它通常运用比拟的手法，综合描述某物体或现象的形状、颜色、性质、动态、用途等特征，而隐藏其名称，让幼儿根据描述的情况（谜面）综合思考所描述的是什么物体或现象（谜底）。例如：
          </p>
          <p class="block">紫色树，开紫花，紫花落，结紫瓜，紫瓜里面装芝麻。</p>
          <p class="block">　　（谜底：茄子）</p>
          <h4 id="d075">（二）幼儿谜语活动</h4>
          <p>幼儿园谜语活动分为猜谜与编谜两种活动形式。</p>
          <h5 id="e100">1.猜谜活动设计与组织要点</h5>
          <p>（1）情景导入，引起幼儿猜谜语的好奇心和浓厚兴趣。</p>
          <p>猜谜导入类似诗歌导入。</p>
          <p>（2）教师介绍谜语的组成，引导幼儿了解猜谜的方法。</p>
          <p>
            要求幼儿仔细听清楚每句话，分析每句话的含义与范畴，然后将每句话连起来综合思考、判断，一点一点地缩小范围直至揭示谜底。
          </p>
          <p>（3）教师示范猜谜。</p>
          <p>
            教师出示一则谜语，示范猜谜，引导幼儿将谜面与谜底一一对应检验。例如：
          </p>
          <p class="block">头戴大红帽，</p>
          <p class="block">身披五彩衣，</p>
          <p class="block">清晨喔喔啼，</p>
          <p class="block">催人早早起。　</p>
          <p class="block">　　（谜底：公鸡）</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
        <div class="bodystyle">
          <p>
            教师引导幼儿想想什么动物头上有个大大的红帽子，它的身上是彩色的，清晨喔喔啼叫？幼儿猜出来是公鸡之后，教师再将公鸡的特征逐句与谜面对应。谜面的每一句都与公鸡的特征和习性相吻合，综合起来，谜底就是“公鸡”。
          </p>
          <p>（4）教师引导幼儿猜谜。</p>
          <p>
            首先，教师念读谜面。必须发音准确，吐字清楚，速度适中，关键字要重读。
          </p>
          <p>
            其次，启发幼儿猜谜。教师可适当讲解，通过启发性提问引导幼儿思考。例如：
          </p>
          <p class="block">圆圆脸儿像苹果，</p>
          <p class="block">又酸又甜营养多，</p>
          <p class="block">既能做菜吃，</p>
          <p class="block">又能当水果。</p>
          <p class="block">　　（谜底：西红柿）</p>
          <p>
            教师刚出示谜面时，幼儿可能很难猜出是西红杮，教师可以引导幼儿，启发幼儿思考：“在小朋友知道的蔬菜中，什么是可以做水果吃的，而且它长得像苹果，圆圆的，吃起来又酸又甜？”在教师的启发下，幼儿抓住能当蔬菜又能当水果吃的特点，就能猜出是“西红柿”。
          </p>
          <p>
            再次，教师出示谜底，师生共同印证谜语。教师引导幼儿将谜面的句子一一与谜底核对。
          </p>
          <p>最后，出示实物或图片，再次印证谜语。</p>
          <p>
            （5）幼儿记忆谜语谜面儿歌。教师可以用理解与记忆相结合的方式引导幼儿记忆谜语儿歌。
          </p>
          <p>
            （6）以同样方式出示2～3个谜语，引导幼儿学习猜谜。在幼儿猜谜兴趣浓厚的情况下，结束活动并鼓励幼儿在日常生活中继续猜谜活动。
          </p>
          <p class="left"><span class="bj2">活动案例4-6</span></p>
          <div class="tp">
            <p><img class="rwmb-5" alt="" src="../../images/tb.png" /></p>
          </div>
          <p class="center">
            <b>谜语活动：看图猜谜语（大班）</b>
          </p>
          <p><b>活动目标：</b></p>
          <p>（1）幼儿初步掌握谜语的特点，感受猜谜语的趣味性。</p>
          <p>（2）学习按物体的主要特征来猜谜语。</p>
          <p>（3）发展思维能力、想象力及大胆在集体面前表达自己想法的能力。</p>
          <p><b>活动重难点：</b></p>
          <p>重点：让幼儿懂得谜语的特点，并喜欢猜谜语。</p>
          <p>难点：学习按物体的主要特征来猜谜语。</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <div class="bodystyle">
          <p>
            <b>活动准备：</b>课件；1个盒子，里面装有桃子实物；实物水果若干。
          </p>
          <p><b>活动过程：</b></p>
          <p>一、开始部分</p>
          <p>集中幼儿注意力，引发对猜谜的兴趣。</p>
          <p>
            （1）出示1个盒子，提问：盒子里装着一样东西，请幼儿猜猜是什么，谁猜出来就送给谁。（鼓励幼儿大胆猜测）
          </p>
          <p>
            （2）老师谈话：小朋友猜得都不一样，现在老师要给大家念一首儿歌，这首儿歌是讲一样东西，但儿歌中不讲出这样东西的名称，只讲出它的样子、用处或者颜色、声音及其他特点。这样的儿歌叫谜语。
          </p>
          <p>
            （3）幼儿要知道猜谜语要仔细听清楚每个字和每句话，并把几句话连起来想一想，猜猜是什么东西。
          </p>
          <p>二、基本部分</p>
          <p>1.猜猜盒子里的东西</p>
          <p>
            （1）教师朗读谜语（课件展示）：小姑娘，长得美，粉红脸，歪歪嘴，满肚子，甜蜜水。（猜一水果）
          </p>
          <p>（2）先请幼儿想一想，猜一猜，猜出的幼儿到老师耳边来讲。</p>
          <p>（3）再次朗读谜语，并解释谜语。（帮助能力较差的幼儿理解）</p>
          <p>（4）再请幼儿猜。</p>
          <p>
            （5）教师请先猜出来的幼儿打开盒子出示桃子实物，并让孩子摸一摸，观察分析谜语内容，帮助幼儿掌握猜谜的方法。
          </p>
          <p>
            （6）小结（巩固掌握谜语的特点）：儿歌中讲了这种水果的颜色和外形等特点，但儿歌中并没有“桃子”两个字，而是让小朋友猜，这就是谜语。
          </p>
          <p>2.课件展示谜语</p>
          <p>
            （1）教师朗读谜语：弯弯树，弯弯藤，弯弯藤上挂青铃。青铃长大变紫铃，密密麻麻一层层。（猜一水果）
          </p>
          <p>（2）教师解释“青铃”“紫铃”的含义。</p>
          <p>（3）请幼儿自己猜，猜出后到老师耳边说出来并找一找这种水果。</p>
          <p>
            （4）教师课件展示葡萄，帮助幼儿理解谜语，并请幼儿一起告诉老师谜语讲的是什么东西。
          </p>
          <p>（5）提问：你们怎么猜出是葡萄的？（鼓励幼儿大胆地表达想法）</p>
          <p>
            （6）小结：儿歌中虽然没有葡萄这两个字，但把葡萄的样子和特点讲出来了，所以小朋友一下就能猜出是“葡萄”了。
          </p>
          <p>3.游戏：谜语大冲关</p>
          <p>
            （1）课件“神秘礼物盒”。老师谈话：今天，老师准备了好多礼物想送给小朋友。不过，只有猜出谜语的小朋友才能得到哦！猜出来的小朋友要说一说你是怎么猜出来的。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
        <div class="bodystyle">
          <p>（2）第一关。</p>
          <p>
            老师朗诵谜语：几个兄弟一个样，身子弯弯像月亮。黄黄衣服软心肠，吃到嘴里甜又香。（猜一水果）出示香蕉。
          </p>
          <p>（3）第二关。</p>
          <p>
            播放音乐，请幼儿仔细听，猜猜是什么。身体重重的，眼睛小小的，大腿粗粗的，鼻子长长的。猜猜这是什么动物。（猜一动物）
          </p>
          <p>（4）第三关。</p>
          <p>
            老师朗诵谜语：丁零零丁零零，一头说话一头听，两人不见面，说话听得清。（猜一通信工具）
          </p>
          <p>（5）揭示礼物，并把礼物送给所有的小朋友。</p>
          <p>三、结束部分</p>
          <p>
            活动延伸：请幼儿回家和爸爸妈妈一起玩猜谜语的游戏，并请爸爸妈妈把谜语写在纸上交给老师，让大家一起来猜。
          </p>
          <h5 id="e101">2.编谜活动设计与组织要点</h5>
          <p>
            编谜活动不仅要求幼儿具有较高的语言概括性、文学性、韵律性等语言驾驭能力，还要有观察力以及对事物的把握概括能力。幼儿能够编谜，最根本一点是幼儿对谜语的认知熟练程度与喜爱程度，幼儿只有在广泛地进行猜谜活动之后，知道谜语构成的基础上才能编谜，所以编谜活动一般在幼儿园大班开展。
          </p>
          <p>
            （1）引导幼儿认知谜语特点。教师解剖一首谜语，使幼儿懂得谜语的构成和特点。
          </p>
          <p>
            （2）教师示范编谜。例如，教师出示“猫”的谜底，告诉幼儿老师是这样用“猫”编谜语的：从它长什么样，怎样叫，它喜欢干什么、它的活动习惯是什么等方面来描述它。例如：
          </p>
          <p class="block">小小年纪胡子翘，</p>
          <p class="block">开口就说喵喵喵，</p>
          <p class="block">爱洗脸呀爱梳毛，</p>
          <p class="block">老鼠见了赶紧逃。</p>
          <p>也可以这样描述：</p>
          <p class="block">胡子不多两边翘，</p>
          <p class="block">开口总说喵喵喵，</p>
          <p class="block">黑夜巡逻眼似灯，</p>
          <p class="block">日里白天睡大觉。</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <div class="bodystyle">
          <p>（3）教师出示一个谜底，引导幼儿编谜。</p>
          <p>
            首先，出示一种幼儿熟悉的谜底的实物或图片，如“电视机”或“兔子”，告诉幼儿用这个谜底编谜，可以从它的形状、颜色、用途、性质、动态、生活习性等方面去叙述它，但在句子里不能说出这个物品的名称，而且编出来的句子尽量像儿歌一样短小精悍、音韵和谐，读起来朗朗上口。
          </p>
          <p>
            其次，让幼儿充分讨论、尝试。初次学习编谜，可以让幼儿逐句编谜；幼儿熟悉了编谜规律之后，教师可以提出系列启发性问题引导幼儿编谜。教师听取幼儿编谜句式之后，引导幼儿进一步修饰完善。
          </p>
          <p>最后，教师将幼儿自编谜语写在图片旁边，引导幼儿诵读自编谜语。</p>
          <p>
            通常，大班幼儿一次活动可以尝试编谜2～3个；也可以小组形式分别选择不同谜底编谜，教师巡回指导，然后在集体中诵读、交流。积累编谜结果，装订成册投放到图书区，供幼儿延伸活动使用。
          </p>
          <p class="left"><span class="bj2">活动案例4-7</span></p>
          <div class="tp">
            <p><img class="rwmb-5" alt="" src="../../images/tb.png" /></p>
          </div>
          <p class="center">
            <b>编谜活动：农夫果园大行动（大班）</b>
          </p>
          <p><b>活动目标：</b></p>
          <p>1.懂得谜语的基本构成常识，初步学会简单的编谜技巧。</p>
          <p>2.丰富生活经验，学会关注身边的事物或现象的特征。</p>
          <p>3.发展思维能力和语言表达能力，学会合作。</p>
          <p><b>活动准备：</b></p>
          <p>1.音乐《小飞机》。</p>
          <p>2.动物、植物、生活用品等图片若干。</p>
          <p>
            3.环境创设“农夫果园”“动物王国”“菜园”等。各种相应实物（延伸环节使用）。
          </p>
          <p><b>活动重难点：</b></p>
          <p>掌握编谜的基本技能，并能用语言表达出来。</p>
          <p><b>活动形式：</b></p>
          <p>集体、小组、个人形式相结合。</p>
          <p><b>活动方法：</b></p>
          <p>游戏法、直观法、讲解法。</p>
          <p><b>活动过程：</b></p>
          <p>一、导入：用语言创设情境</p>
          <p>
            “小朋友们，刚才农夫伯伯打来电话，他听说咱们大班的小朋友很聪明，不仅谜语猜得好，而且有小朋友还会自己编谜语呢！所以他想请我们大班的小朋友去他的农夫果园帮他摘果子，只要我们小朋友编出谜语，农夫伯伯就会送我们很多好吃
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            的水果。好了，坐上小飞机我们出发吧。”（随音乐进活动室——设置好的场景：农夫果园）
          </p>
          <p>二、教师解剖一首谜语，示范编谜，引导幼儿掌握编谜的方法</p>
          <p>
            1.教师引导幼儿认知谜语的结构，告诉幼儿谜语由谜面和谜底构成；教师可举例出示一则谜语，分析什么是谜面和谜底。
          </p>
          <p>
            2.教师示范编谜。“小朋友们看，这里有这么多好吃的水果，小朋友们一定非常想从农夫伯伯那‘赢’回来吧？老师可喜欢那串葡萄啦，看看老师是怎么赢得葡萄的！”老师先编谜语：“紫球球，水汪汪，嘟噜噜，挂架上。”
          </p>
          <p>
            3.分析谜语的组成。教师可引导幼儿逐句分析谜面：“为什么是紫球球呢？”（引导幼儿观察葡萄的颜色、形状）
          </p>
          <p>“为什么看起来是水汪汪的呢？”（引导幼儿观察葡萄的果肉特征）</p>
          <p>“那葡萄长在哪里呢？”（引导幼儿了解葡萄的生长习性）</p>
          <p>
            小结：小朋友们注意到了吗？编谜语的话要简短，每一句的字数最好是一样的。可以根据水果的颜色、味道、生长状态或习性、用途等来编谜。
          </p>
          <p>三、教师引导幼儿集体编谜</p>
          <p>
            教师可在大家熟悉或喜欢的水果中选定一种水果共同来编。可选水果香蕉。
          </p>
          <p>
            引导幼儿观察香蕉长什么样子，什么颜色，剥开来怎样，闻起来什么味道，吃起来怎样等（让幼儿思考几分钟，互相讨论。最后编出的谜语大致是：“样子弯弯，颜色金黄，吃到嘴里，又甜又香”）。游戏活动：送香蕉娃娃。
          </p>
          <p>四、幼儿分组竞赛编谜</p>
          <p>1.请小朋友参观农夫果园找到自己喜欢的水果，自由分组合作编谜。</p>
          <p>2.小组共同讨论，合作编谜，比赛哪一组又快又好，赢的水果最多。</p>
          <p>
            3.每组请一位代表将编好的谜语念出来，让大家猜。互相学习、鼓励，并记忆背诵下来。
          </p>
          <p><b>活动小结：</b></p>
          <p>1.总结，表扬肯动脑筋的幼儿和小组，并请农夫伯伯发送奖品。</p>
          <p>2.结束，小朋友们，请带好你们赢得的奖品，坐上小飞机回家吧。</p>
          <p><b>活动延伸：</b></p>
          <p>1.请幼儿到活动区制作水果沙拉，品尝各种水果。</p>
          <p>
            2.将幼儿编出的谜语或自己已经知道的谜语记录下来装订成册，并谱上曲方便幼儿记忆。
          </p>
          <p>
            3.继续创编“动物王国”“菜园”等活动区，让幼儿随时有机会发挥自己的创造性，继续编谜。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
        <div class="bodystyle">
          <h3 id="c030">二、幼儿绕口令教学</h3>
          <h4 id="d076">（一）幼儿绕口令的概述</h4>
          <h5 id="e102">1.含义</h5>
          <p>
            幼儿绕口令是由语音相近而容易混淆的字词和句子组成的一种练习发音的幼儿游戏儿歌。又叫急口令、拗口令。
          </p>
          <h5 id="e103">2.开展绕口令练习的意义</h5>
          <p>（1）帮助幼儿练习准确发音，辨别近似音，掌握吐字清晰的语言技巧。</p>
          <p>（2）满足幼儿游戏需求、认知需要以及达到训练思维的目的。</p>
          <h5 id="e104">3.特点</h5>
          <p>
            （1）内容与形式都比较生动活泼、诙谐幽默、生动形象。如《打醋买布》：
          </p>
          <p class="block">一位爷爷他姓顾，</p>
          <p class="block">上街打醋又买布。</p>
          <p class="block">买了布，打了醋，</p>
          <p class="block">回头看见鹰抓兔。</p>
          <p class="block">放下布，搁下醋，</p>
          <p class="block">上前去追鹰和兔。</p>
          <p class="block">飞了鹰，跑了兔，</p>
          <p class="block">打翻醋，醋湿布。</p>
          <p>
            （2）由语音相似且易混淆的字词构成，句式工整，符合儿歌特点。如《高高山上一条藤》：
          </p>
          <p class="block">高高山上一条藤，</p>
          <p class="block">藤条头上挂铜铃。</p>
          <p class="block">风吹藤动铜铃动，</p>
          <p class="block">风停藤停铜铃停。</p>
          <p>（3）朗读要求快速、准确、流畅。如《小三登山》：</p>
          <p class="block">三月三小三去登山，</p>
          <p class="block">上山又下山，下山又上山，</p>
          <p class="block">登了三次山，跑了三里三。</p>
          <p class="block">出了一身汗，湿了三件衫。</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -1">
        <div class="bodystyle">
          <p class="block">小三上山大声喊：“离天只有三尺三。”</p>
          <h4 id="d077">（二）幼儿绕口令教学活动设计与组织要点</h4>
          <h5 id="e105">1.选材要点</h5>
          <p>
            （1）根据幼儿年龄特点选材。由于绕口令对语音要求较高，所以主要在中班、大班开展。对于小班及3岁前的婴幼儿，重点是训练正确发音，教师可以选择一些短小押韵的儿歌或简单的听说游戏。如小班儿歌《冬冬和佳佳》：
          </p>
          <p class="block">冬冬有匹小木马，</p>
          <p class="block">佳佳有个布娃娃。</p>
          <p class="block">冬冬和佳佳，</p>
          <p class="block">一起来玩耍。</p>
          <p class="block">布娃娃，骑木马，</p>
          <p class="block">哒哒哒，哒哒哒。</p>
          <p>
            （2）根据地域特色选取相应的绕口令，以纠正幼儿的方言发音。例如，有些地区平翘舌音与前后鼻音容易混淆，可适当选择练习这方面的绕口令。
          </p>
          <p>训练前后鼻音的绕口令《盆和瓶》：</p>
          <p class="block">桌上放个盆，</p>
          <p class="block">盆里放个瓶。</p>
          <p class="block">乒乓一声响，</p>
          <p class="block">不知是瓶碰盆，</p>
          <p class="block">还是盆碰瓶。</p>
          <h5 id="e106">2.教学环节指导</h5>
          <p>
            （1）做好相应准备工作。教师先将自己选好的教材熟记于心，并事先备好自己速念绕口令的录音，教学时供幼儿欣赏。同时做好相应的玩教具准备。
          </p>
          <p>（2）情境导入。如学习阮居平先生的《鸭和霞》：</p>
          <p class="block">弯弯水田一片霞，</p>
          <p class="block">水上游来一群鸭。</p>
          <p class="block">霞是五彩霞，</p>
          <p class="block">鸭是麻花鸭，</p>
          <p class="block">麻花鸭钻进了五彩霞，</p>
          <p class="block">五彩霞网住了麻花鸭，</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
        <div class="bodystyle">
          <p class="block">乐坏了鸭，摇碎了霞，</p>
          <p class="block">分不清是鸭还是霞。</p>
          <p>
            教师可以通过多媒体课件演示江南水乡的丰收美景，引发幼儿丰富想象，激发幼儿对生活的热爱以及对绕口令和谐音韵的好奇。
          </p>
          <p>（3）教师用正常语速示范朗诵，注意吐字清楚，读准相似音。</p>
          <p>（4）帮助幼儿理解绕口令内容（方法同诗歌教学）。</p>
          <p>
            （5）教师再次示范朗诵，引导幼儿记诵绕口令。教师可以通过图片或实物引导幼儿发准相似音，然后采用多种形式的练习（如跟读、分组或个别朗诵、上下句接龙等），逐步提高要求，加快速度提高准确率。
          </p>
          <p>（6）围绕绕口令开展相应的游戏活动，如绕口令朗诵比赛等。</p>
          <p class="left"><span class="bj2">活动案例4-8</span></p>
          <div class="tp">
            <p><img class="rwmb-5" alt="" src="../../images/tb.png" /></p>
          </div>
          <p class="center">
            <b>绕口令活动：打醋买布（大班）</b>
          </p>
          <p><b>活动目标：</b></p>
          <p>
            1.感知理解绕口令的基本内容，练习发清“醋”“布”“兔”等易混淆的字音。
          </p>
          <p>2.观察图加文形式的绕口令，初步感知绕口令的韵脚。</p>
          <p>3.引导幼儿积极参与朗诵绕口令的活动，体验念绕口令的乐趣。</p>
          <p><b>活动准备：</b></p>
          <p>1.幼儿用书每人一册。</p>
          <p>2.小图片：爷爷、醋、布、兔、鹰若干张。</p>
          <p>3.在黑板上写出绕口令。在写“爷爷”“醋”“布”“兔”“鹰”的地方留空格。</p>
          <p><b>活动过程：</b></p>
          <p>1.引导幼儿初步了解绕口令的内容，感知绕口令的趣味性。</p>
          <p>（1）引导幼儿阅读幼儿用书，启发幼儿讲述画面的主要内容。</p>
          <p>（2）教师讲故事，让幼儿初步了解绕口令的主要内容。</p>
          <p>教师：老师把这个有趣的故事编成一首绕口令，请小朋友仔细听。</p>
          <p>教师：绕口令里说了些什么？</p>
          <p>2.阅读黑板上的绕口令，引导幼儿发现板书的不完整。</p>
          <p>
            （1）教师出示黑板上的文字，边指文字边有节奏地念绕口令《打醋买布》。
          </p>
          <p>（2）教师：刚才老师念绕口令，你发现黑板上的文字少了什么？</p>
          <p>3.学习绕口令。</p>
          <p>
            （1）教师引导幼儿依据绕口令的顺序，逐一找出相应的图片，放在文字板书的空格处，鼓励幼儿边看图文边跟读绕口令。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="19">
      <div v-if="showPageList.indexOf(19) > -1">
        <div class="bodystyle">
          <p>
            （2）教师启发幼儿观察黑板上的图加文绕口令，发现绕口令的韵脚，进一步感知绕口令的格律及特点。
          </p>
          <p>
            （3）教师带领幼儿观察图加文板书，采用预知、等待以及放慢速度的方式，鼓励幼儿与自己一同念绕口令。
          </p>
          <p>4.尝试用图加文的方式，表现绕口令的名字。</p>
          <p>启发幼儿在名字空格处摆放“醋”和“布”的图片，并指读绕口令的名字。</p>
          <p>5.朗诵绕口令，进一步体验绕口令的趣味性。</p>
          <p>（1）教师指图文，大家一起念绕口令。</p>
          <p>（2）教师带领幼儿边拍节奏边朗诵绕口令。</p>
          <p>（3）教师快速地念绕口令，让幼儿体验、感知绕口令的趣味性。</p>
          <div class="bk2">
            <p class="center"><b>本章小结</b></p>
            <p>
              本章对幼儿文学作品活动进行了系统的介绍。不仅对幼儿文学作品的特点和价值、幼儿文学作品的选择标准、幼儿文学作品活动的总体设计思路进行了概括性说明，还就幼儿文学作品的主要形式——幼儿故事、诗歌散文、谜语、绕口令等，分别进行了选材要求、设计思路、指导要点等方面的详尽探讨。每一种幼儿文学作品活动又分为更具体的活动形式，如幼儿故事活动又分为教师讲故事、幼儿续编创编故事，诗歌散文活动分为诗歌散文（诗）学习活动、诗歌散文（诗）仿编创编活动，谜语活动又分猜谜活动和编谜活动，本章分别进行了指导要求上的阐述。诗歌散文活动之后附设部分经典儿歌、儿童诗和散文供学生选用，每种具体的活动形式之后还附设了案例分享供参考讨论。
            </p>
          </div>
          <p><span class="zt-1">关键术语</span></p>
          <div class="tp-8">
            <p><img class="rwmb-3" alt="" src="../../images/tb-9.png" /></p>
          </div>
          <p class="notIndent">1、幼儿文学</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem30"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">2、幼儿文学作品活动</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem31"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">3、幼儿故事</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem32"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">4、儿歌</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem33"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">5、儿童诗</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem34"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">6、幼儿散文（诗）</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem35"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">7、谜语</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem36"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">8、绕口令</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem37"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">9、讲故事</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem38"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">10、朗诵</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem39"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">11、续编</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem40"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">12、仿编</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem41"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">13、创编</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="chapter004.textBybItem42"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>
            <span class="zt-2">思</span><span class="zt-3">考</span
            ><span class="zt-2">题</span>
          </p>
          <div class="tp-9">
            <p><img class="rwmb-6" alt="" src="../../images/tb-10.png" /></p>
          </div>
          <p>
            1.你认为怎样才能成为一个精彩的讲故事者？尤其是给3～6岁幼儿讲故事，教师应做好哪些准备工作？教师本人需必备哪几方面的技巧？
          </p>
          <div class="bk-xyx">
            <textarea
              rows="8"
              v-model="chapter004.textBybItem20"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>2.为幼儿选择文学作品的依据是什么？</p>
          <div class="bk-xyx">
            <textarea
              rows="8"
              v-model="chapter004.textBybItem21"
              @change="setBookQuestion"
            ></textarea>
          </div>

          <p>
            3.结合幼儿散文《落叶》或儿童诗《春天在哪里》，谈谈教师应怎样帮助幼儿理解诗文内容，并试着设计幼儿仿编的教学环节。
          </p>
          <div class="bk-xyx">
            <textarea
              rows="8"
              v-model="chapter004.textBybItem22"
              @change="setBookQuestion"
            ></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
        <div class="bodystyle">
          <p>
            4.幼儿文学是中国文学大家庭的重要一员，请列举优秀幼儿文学作品，谈谈这些作品是如何通过对人物的描写与刻画将正确的态度与观念、情感与知识，超越时空地传递给幼儿，潜移默化地影响与塑造幼儿的。
          </p>
          <div class="bk-xyx">
            <textarea
              rows="8"
              v-model="chapter004.textBybItem28"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="left"><span class="bj4">实训练习</span></p>
          <p>
            1.学讲10～20则经典幼儿故事，有条件的可以录音或录像，尝试通过“录制—回放—再录制—再回放”的形式提升讲故事的技巧。
          </p>
          <p>2.推荐10首优秀幼儿诗歌、散文（诗），并学习有感情地朗诵。</p>
          <p>
            3.收集10首适合不同年龄段幼儿的绕口令，学习又好又快地朗诵，并录音。
          </p>
          <p>
            4.设计一份某年龄班的绕口令活动方案，并尝试在幼儿园组织实施。实践后，请与师生交流思考。
          </p>
          <p>
            5.请设计一份幼儿园猜谜或编谜活动，并尝试模拟组织教学活动。活动后，思考如何改进组织策略。
          </p>
          <p class="left1">
            <span class="zt-3">拓</span><span class="zt-2">展</span
            ><span class="zt-3">阅</span><span class="zt-2">读</span>
          </p>
          <div class="tp-10">
            <p><img class="rwmb-6" alt="" src="../../images/tb-11.png" /></p>
          </div>
          <p>
            Jeanne
            M.Machado.幼儿语言教育[M].王懿颖，等，译.北京：北京师范大学出版社，2012.
          </p>
          <p class="block">
            本书系统地介绍了美国幼儿园的语言课程，对听、说、读、写——每个领域都以单独的章节进行了探讨和描述，理实兼备，内容全面，生动有趣，对我国幼儿园语言教育有较好的借鉴作用。这里特别推荐阅读第4部分文学（儿童与图书、故事讲述等章节），对你一定会有所启发。
          </p>
          <p class="left"><span class="zt-ls">【拓展视频案例】</span></p>
          <div class="videoBox">
            <div class="videoItem">
              <video
                :src="videoUrl.v41"
                webkit-playsinline="true"
                x-webkit-airplay="true"
                playsinline="true"
                x5-video-orientation="h5"
                x5-video-player-fullscreen="true"
                x5-playsinline=""
                controls
                class="video-border w100"
              ></video>
              <div class="vname">{{ videoMd5.v41.name }}</div>
            </div>
            <div class="videoItem">
              <video
                :src="videoUrl.v42"
                webkit-playsinline="true"
                x-webkit-airplay="true"
                playsinline="true"
                x5-video-orientation="h5"
                x5-video-player-fullscreen="true"
                x5-playsinline=""
                controls
                class="video-border w100"
              ></video>
              <div class="vname">{{ videoMd5.v42.name }}</div>
            </div>
          </div>
          <!-- <p class="center">
            <img class="img-g" alt="" src="../../images/0131-1.jpg" />
          </p>
          <p class="img">小班语言活动：太阳和月亮</p>
          <p class="center">
            <img class="img-g" alt="" src="../../images/0131-2.jpg" />
          </p>
          <p class="img">中班语言活动：金色的房子</p> -->
        </div>
      </div>
    </div>
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -1">
        <div class="bodystyle">
          <div class="videoBox">
            <div class="videoItem">
              <video
                :src="videoUrl.v44"
                webkit-playsinline="true"
                x-webkit-airplay="true"
                playsinline="true"
                x5-video-orientation="h5"
                x5-video-player-fullscreen="true"
                x5-playsinline=""
                controls
                class="video-border w100"
              ></video>
              <div class="vname">{{ videoMd5.v44.name }}</div>
            </div>
            <div class="videoItem">
              <video
                :src="videoUrl.v45"
                webkit-playsinline="true"
                x-webkit-airplay="true"
                playsinline="true"
                x5-video-orientation="h5"
                x5-video-player-fullscreen="true"
                x5-playsinline=""
                controls
                class="video-border w100"
              ></video>
              <div class="vname">{{ videoMd5.v45.name }}</div>
            </div>
          </div>
          <div class="videoBox">
            <div class="videoItem">
              <video
                :src="videoUrl.v46"
                webkit-playsinline="true"
                x-webkit-airplay="true"
                playsinline="true"
                x5-video-orientation="h5"
                x5-video-player-fullscreen="true"
                x5-playsinline=""
                controls
                class="video-border w100"
              ></video>
              <div class="vname">{{ videoMd5.v46.name }}</div>
            </div>
            <div class="videoItem">
              <video
                :src="videoUrl.v47"
                webkit-playsinline="true"
                x-webkit-airplay="true"
                playsinline="true"
                x5-video-orientation="h5"
                x5-video-player-fullscreen="true"
                x5-playsinline=""
                controls
                class="video-border w100"
              ></video>
              <div class="vname">{{ videoMd5.v47.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapter004",
  props: {
    showPageList: {
      type: Array,
    },
  },
  data() {
    return {
      chapter004: {},
      videoUrl: {},
      videoMd5: {
        v41: {
          md5: "375B7B2430E7D24094215211A5EABBEB",
          name: "小班语言活动：太阳和月亮",
        },
        v42: {
          md5: "9017B65F860DD32FE05522657448C2B9",
          name: "中班语言活动：金色的房子",
        },
        v44: {
          md5: "2EFDE4AE1924EB3DA52F433330BBF0F8",
          name: "小班语言活动：萝卜房子",
        },
        v45: {
          md5: "1635F50E7B917FAE78CE7E3A3D034B13",
          name: "小班语言活动：小老鼠旅行",
        },
        v46: {
          md5: "9E98468DE8EC2867738C43DCBD58872E",
          name: "小班语言活动：聪明的小白",
        },
        v47: {
          md5: "F3D79A3D94BFA48887B7A33EAF015DC3",
          name: "大班语言活动：猜、编动物谜语",
        },
      },
    };
  },
  methods: {
    async getVideo(md5, val) {
      const data = await getResourcePath(md5);
      this.videoUrl[val] = data;
    },
    setBookQuestion() {
      this.$emit("setBookQuestion", this.chapter004);
    },
  },
  mounted() {
    for (let key in this.videoMd5) {
      this.getVideo(this.videoMd5[key].md5, key);
    }
  },
};
</script>

 src/books/kindergartenLanguageActivity/view/components/front001.vue

New file
@@ -0,0 +1,40 @@
<!-- eslint-disable no-irregular-whitespace -->
<template>
  <div class="chapter" num="1">
    <div class="page-box" page="1">
      <div v-if="showPageList.indexOf(1) > -1">
        <div class="bodystyle">
          <p class="center"><img alt="" class="imz coverImg" src="../../images/SMY.jpg" /></p>
        </div>
      </div>
    </div>
    <div class="page-box" page="2">
      <div v-if="showPageList.indexOf(2) > -1"></div>
    </div>
    <div class="page-box" page="3">
      <div v-if="showPageList.indexOf(3) > -1"></div>
    </div>
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1"></div>
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1"></div>
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1"></div>
    </div>
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "front-001",
  props: {
    showPageList: {
      type: Array,
    },
  },
};
</script>

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

New file
@@ -0,0 +1,915 @@
<!-- @format -->

<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <div
      class="public-kindergartenLanguageActivity"
      :style="{
        fontSize: fontSize ? fontSize + 'px' : '16px',
        transform: `scale(${pageZoom ? pageZoom : 1})`,
        transformOrigin: 'center top',
      }"
    >
      <!-- <pageHeader
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></pageHeader> -->
      <chapterOne
        v-if="showCatalogList.indexOf(1) > -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(2) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
      <!-- <chapterfive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterfive> -->
      <!-- <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSix> -->
      <!-- <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList"></chapterSeven> -->
      <!-- <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight> -->
      <!-- <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList"></chapterNine> -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
// import pageHeader from "./front001";
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 chapterSix from './chapter006.vue'
// import chapterSeven from './chapter007.vue'
// import chapterEight from './chapter008.vue'
// import chapterNine from './chapter009.vue'

import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import getQuestionList from "@/assets/methods/examination";
import testData from "../../js/examinationList";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  data() {
    return {
      catalogLength: 2, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null,
      observer: null,
      loadPageObserver: null,
      loadPageList: [],
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
    };
  },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
  },
  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.initSwiper();
          this.initViewer();
          // this.readText()
        }, 200);
      },
    },
    pageZoom: {
      handler(newVal, oldVal) {
        const scrollBox = (
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      },
    },
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [1];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
      this.throttleThreshold,
      { leading: true, trailing: false }
    );
    // 定义子层方法
    if (this.setGlobalState) {
      // 提供页面跳转功能
      this.setGlobalState({
        gotoPage: (catalog, page) => {
          this.gotoPage(catalog, page);
        },
        // 渲染笔记、高亮、划线
        renderSign: (type, data) => {
          // 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记；
          this.handelSignData(type, data);
          // this.renderSign(type, data);
        },
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        },
        // 全文检索
        searchBookByKeyword: (keyword) => {
          return this.searchTextByPage(keyword);
        },
        // 跳转检索结果位置
        jumpSearchItem: (data) => {
          this.searchItemLocation(data);
        },
      });
    }

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

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

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

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

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
    //   .querySelectorAll(".page-box");
    // 检索
    // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
    // 检索跳转
    // this.searchItemLocation({
    //   catalog: 2,
    //   page: 10,
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    // }, 500)
  },
  methods: {
    swdtChange(data) {
      console.log("子应用pdf", data);
      if (this.$store.state.qiankun && this.$store.state.qiankun.openPDF) {
        if (data.type == "pdf") {
          this.$store.state.qiankun.openPDF({
            data: data.data,
          });
        } else {
          this.$store.state.qiankun.chooseWords({
            type: data.type,
            data: data.data,
          });
        }
      }
    },
    changeDomViewer() {
      this.initViewer();
    },
    // 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) {
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        // 向下
        const currentScrollTop =
          event.target.scrollTop + event.target.offsetHeight;
        if (
          currentScrollTop >=
          event.target.scrollHeight - this.loadThreshold
        ) {
          // 到达阈值
          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) {
        // 向上
        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) {
      console.log(element, className, "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;
                  }
                }
              }
            }
            // 渲染这一页的标记
            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,
        // chapterSix,
        // chapterSeven,
        // chapterEight,
        // chapterNine
        // assemblyOne,
        // assemblyTwo,
      };
      // 遍历所有章节文件
      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, () => {});
    },
    // readText() {
    //   const doms = (
    //     this.container ? this.container : document
    //   ).querySelectorAll('.read-aloud')
    //   for (let index = 0; index < doms.length; index++) {
    //     const dom = doms[index]
    //     let id = null
    //     dom.addEventListener('click', (e) => {
    //       if (e.srcElement.nodeName == 'svg') {
    //         id = dom.getAttribute('readId')
    //       } else if (e.srcElement.nodeName == 'g') {
    //         const svgDom = e.srcElement.parentNode
    //         id = svgDom.getAttribute('readId')
    //       } else {
    //         const svgDom = e.srcElement.parentNode.parentNode
    //         id = svgDom.getAttribute('readId')
    //       }
    //       const item = (
    //         this.container ? this.container : document
    //       ).querySelector('#' + id).innerText
    //       console.log(item, 233)
    //     })
    //   }
    // },
  },
  components: {
    // pageHeader,
    chapterOne,
    // chapterTwo,
    // chapterThree,
    chapterFour,
    // chapterfive,
    // chapterSix,
    // chapterSeven,
    // chapterEight,
    // chapterNine
    // assemblyOne,
    // assemblyTwo,
    // ChapterFour,
    // ChapterFive,
    // chapterSix,
    // chapterSeven,
    // chapterEight,
    // chapterNine,
    // chapter010,
    // chapter011,
    // chapter012,
    // chapter013,
    // chapter014,
    // chapter015,
    // chapter016,
    // chapter017,
    // chapter018,
  },
};
</script>

 src/books/kindergartenLanguageActivity/view/components/pageHeader.vue

New file
@@ -0,0 +1,46 @@
<template>
  <div class="page-header-box">
    <div class="evenBox" v-if="!isOdd">
      <div class="evenContent">
        <span>{{ num }}</span>
        <span>{{ name }}</span>
      </div>
      <img class="evenIcon" src="../../images/even.png" alt="" />
    </div>
    <div class="oddBox" v-else>
      <img class="oddIcon" src="../../images/ti-icon.png" alt="" />
      <div class="oddContent">
        <span>{{ chapter }}</span>
        <span>{{ name }}</span>
        <span>{{ num }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "pageHeader",
  props: {
    num: {
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    chapter: {
      type: String,
      default: "",
    },
    isOdd: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
};
</script>
<style></style>

 src/books/kindergartenLanguageActivity/view/index.vue

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

<script>
import pageContent from "./components/index.vue";
export default {
  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 "../css/default.less";
</style>

 src/books/preschoolGameGuidance/Fonts/FZHTJW.ttf

Binary files differ

 src/books/preschoolGameGuidance/Fonts/FZLTXIHJW.ttf

Binary files differ

 src/books/preschoolGameGuidance/Fonts/FZLTZHJW.ttf

Binary files differ

 src/books/preschoolGameGuidance/css/default.less

New file
@@ -0,0 +1,1252 @@
.temp-bookInnerContentSports {
  width: 100%;
  height: 100%;
  overflow: auto;

  .page-main {
    width: 100%;
    height: 100%;
    overflow: auto;

    .public-preschoolGameGuidance {
      font-family: '宋体';
      max-width: 816px;
      min-width: 375px;
      margin: 0 auto;
      border-color: #f49a4c;
      height: 100%;
      font-size: 18px;

      .page-box {
        box-sizing: border-box;
        min-height: 1150px;
        margin-bottom: 20px;
        box-shadow: 0 3px 6px 1px #00000029;
        background-color: #fff;
        position: relative;
      }

      .pdf-content {
        padding: 15%;
        box-sizing: border-box;
      }

      .tips-mask {
        width: 15px;
        height: 15px;
        font-size: 12px;
        border: 1px solid #35ACD6;
        color: #35ACD6;
        border-radius: 15px;
        position: absolute;
        top: 0;
        right: -25px;
        text-align: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }

      .notIndent {
        text-indent: 0 !important;
      }

      .chapter {

        .questionBox {
          width: 100%;
          border: 2px solid #00ADEF;
          margin-bottom: 10px;

          .titleBox {
            width: 100%;
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #00ADEF;

            .title {
              padding: 3px 0;
              width: 120px;
              background-color: #00ADEF;
              text-align: center;
              color: #000;
              font-weight: 600;
              letter-spacing: 2px;
            }

            img {
              width: 25px;
              height: 26px;
              cursor: pointer;
              margin-right: 10px;
            }
          }

          .questionContent {
            padding: 20px;
            box-sizing: border-box;
            .q-title {
              font-size: 32px;
              font-weight: 700;
              text-align: center;
              margin-bottom: 60px;
            }
            .q-tips {
              font-size: 22px;
              font-weight: 600;
              text-align: center;
              text-indent: 0;
            }
            .block-tips {
              font-size: 18px;
              font-weight: 600;
              font-family: '楷体';
            }

            .block-ms-tips {
              font-weight: 600;
            }
          }
        }

        .imgBox-003 {
          width: 100%;
          height: 220px;
        }

        .videoBox {
          width: 100%;
          padding: 30px 20px;
          padding-top: 60px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          align-items: center;

          .videoItem {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .video-border {
              width: 100%;
              // border: 2px solid #fff;
              border-radius: 10px;
              margin-bottom: 10px;
            }
          }
        }

        .bk-xyx {
          textarea {
            width: 100%;
            max-width: 630px;
            border: 1px solid #00ADEF;
            border-radius: 5px;
            font-size: 16px;
            font-family: '宋体';
            line-height: 30px;
            padding: 10px;
            box-sizing: border-box;
          }

          textarea:focus {
            outline: none;
            border-color: #000;
          }
        }

        .btn-group {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;
          padding-left: 20px;
          .answerText {
            margin-left: 20px;
            font-weight: 600;
          }
        }

        .btn-default {
          background-color: #35ACD6;
          border: 1px solid #35ACD6;
          color: #fff;
          padding: 5px 10px;
          box-sizing: border-box;
          border-radius: 5px;
          margin: 0 5px;
          cursor: pointer;
        }

        .coverImg {
          position: absolute;
          top: 0;
          left: 0;
        }

        ul {
          list-style-type: none;
        }

        li {
          list-style-type: none;
        }

        @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');
        }

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

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

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


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

        }

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

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

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

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

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



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

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

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

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


        div.bodystyle {
          // font-family: 'FZLTXIHJW';
          font-family: '宋体';
          font-size: 18px;
          text-align: justify;
          padding: 10% 10%;
          box-sizing: border-box;
          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 {
          width: 100%;
          text-align: center;


        }

        .note {
          font-size: 0.85em;
        }



        .block {
          font-size: 16px;
          color: #000;
          font-weight: 500;
          font-family: '楷体';
          line-height: 1.5;
        }

        .block1 {
          text-align: center;
        }


        .img {
          font-weight: bold;
          font-family: 'FZLTXIHJW';
          text-align: center;
          font-size: 0.85em;
          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 {
          margin-top: 1em;
          text-indent: 2em;
          line-height: 30px;
          // font-size: 18px;
          text-align: justify;
          // font-family: 'msyh';

        }

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

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

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

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

        .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.8em;
          text-align: center;
          margin-bottom: 1em;
          margin-top: 1em;
          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-bk {
          box-shadow: 0em 0.1em 0em 0em #C3C2C0;
          border-top-style: solid;
          border-right-style: solid;
          border-bottom-style: solid;
          border-left-style: none;
          padding: 0.1em 0.8em 0.1em 0.5em;
          font-weight: bold;
          color: #000000;
          margin-bottom: 1em;
          margin-top: 1em;

        }




        .front {
          font-family: 'FZLTZHJW';
          font-weight: bold;
          font-size: 1.8em;
          color: #00ADEF;
          margin-top: 0.5em;
          margin-bottom: 0.5em;
          text-indent: 0em;
          text-align: center;
        }

        .zt-2 {
          font-size: 1.3em;
          font-weight: bold;
          background-color: #6DCFF6;
          border: 1px solid #00ADF2;


        }


        .zt-4 {
          font-family: 'FZLTZHJW';
          color: #01AFEE;
          font-size: 1.8em;
          color: #00ADEF;
          margin-top: 0.5em;
          margin-bottom: 0.5em;
          text-indent: 0em;
          text-align: right;
        }


        .zt-3 {
          font-size: 1.3em;
          font-weight: bold;
          border: 1px solid #00ADF2;

        }

        .left1 {
          text-indent: 3em;
        }



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

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

        }


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

        h6 {
          font-family: 'FZHTJW';
          color: #00ADEF;
          margin-bottom: 0.5em;
          margin-top: 1em;
          font-size: 1.2em;
          text-indent: 0em;
          border-bottom: 2px solid #00ADEF;
        }

        .h6-zt {
          margin-bottom: 0em;
          margin-top: -5em;
          margin-left: 0em;
        }

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

        .img-0 {
          width: 100%;
        }

        .img-a {
          width: 95%;
        }

        .img-b {
          width: 70%;
        }

        .img-c {
          width: 60%;
        }

        .img-d {
          width: 50%;
        }

        .img-e {
          width: 45%;
        }

        .img-f {
          width: 40%;
        }

        .img-g {
          width: 30%;
        }

        .img-h {
          width: 20%;
        }

        .img-i {
          width: 10%;
        }

        .img-j {
          width: 5%;
        }

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

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

        .inline0 {
          height: 3em;
        }

        .inline0-1 {
          height: 2em;
        }

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

        .inline2 {
          height: 2.3em;
        }

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


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

        div.bj {
          margin-bottom: 0em;
          margin-top: -0.5em;
          margin-left: -2.8em;
        }

        .un1 {
          border-bottom: 2px solid #00ADEF;
        }


        .zt-1 {
          font-weight: bold;
          font-size: 1.2em;
          text-indent: 0em;

        }

        .zt-ls1 {
          color: #00ADEF;
          font-weight: bold;
          font-size: 1.2em;
          text-indent: 0em;
          position: relative;
        }

        .zt-ls2 {
          color: #00ADEF;
          font-weight: bold;
          text-align: center;
          text-indent: 0em;
        }

        .zt-ls {
          color: #00ADEF;
          text-indent: 0em;
          font-weight: bold;
        }


        span.lsyq-1 {
          background-color: #0082D4;
          padding: 0.2em 0.4em 0.2em 0.4em;
          border-radius: 1.2em;
          margin-right: 0.5em;
          color: #FFFFFF;
          font-weight: bold;
          font-size: 1.3em;
        }

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

        }

        .zt-hs1 {
          font-weight: bold;
          color: #F0855B;
          font-size: 1.2em;
        }

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

        .h1-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 #00ADEF;
          padding: 3px 10px 3px 10px;
          margin-top: 2em;
          border-radius: 1.5em;
          margin-bottom: 1em;
          font-size: 14px;
        }

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

        div.bk-1 {
          margin-top: -3em;
          margin-bottom: 1.5em;
          margin-left: -2.5em;
        }




        div.bk2 {
          background: #8DD8F8;
          border: 2px solid #00ADEF;
          padding: 3px 10px 3px 10px;
          margin-top: 2em;
          margin-bottom: 1em;
        }

        div.bk3 {
          border: 2px dotted #00ADEF;
          border-radius: 1.5em;
          padding: 3px 10px 3px 10px;
          margin-top: 2em;
          margin-bottom: 1em;
          min-height: 1150px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }



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


        span.bj1 {
          background-color: #00ADEF;
          padding: 0.2em 1em 0.2em 1em;
          font-size: 1em;
          font-weight: bold;
          color: #FFFFFF;
        }

        div.tp {
          margin-bottom: 0.2em;
          margin-top: -3em;
          margin-left: 5.5em;
        }


        div.tp-1 {
          margin-bottom: 0.2em;
          margin-top: -2.7em;
          margin-left: 6.9em;
        }

        div.tp-2 {
          margin-bottom: 0.2em;
          margin-top: -3em;
          margin-left: 25em;
        }

        div.tp-3 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: 6em;
        }

        div.tp-4 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: 5em;
        }

        div.tp-5 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: 6.5em;
        }

        div.tp-6 {
          margin-bottom: 0.2em;
          margin-top: -2.7em;
          margin-left: 5em;
        }

        div.tp-7 {
          margin-bottom: 0.2em;
          margin-top: -2.8em;
          margin-left: 6em;
        }

        div.tp-8 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: -1.2em;
        }

        div.tp-9 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: -2.2em;
        }

        div.tp-10 {
          margin-bottom: 0.2em;
          margin-top: -2.9em;
          margin-left: -1.8em;
        }


        .rwmb-1 {
          height: 1.6em;
        }


        .rwmb-4 {
          height: 2em;
        }

        .rwmb-5 {
          height: 2em;
        }

        .rwmb-2 {
          height: 2em;
        }

        .rwmb-3 {
          height: 2em;
        }

        .rwmb-6 {
          height: 2em;
        }


        span.bj2 {
          background-color: #00ADEF;
          padding: 0.2em 1.5em 0.2em 1em;
          font-size: 1.5em;
          font-weight: bold;
          text-indent: 0em;
          color: #FFFFFF;
          border-radius: 1.5em;
        }

        span.bj3 {
          background-color: #00ADEF;
          padding: 0.2em 1.5em 0.2em 1em;
          font-size: 1.1em;
          font-weight: bold;
          margin-left: -0.8em;
          color: #FFFFFF;
          border-radius: 1.5em;
        }

        span.bj4 {
          background-color: #6DCFF6;
          padding: 0.2em 1.5em 0.2em 1em;
          box-shadow: 0.2em 0.2em 0px 0px #00ADEF;
          font-size: 1.1em;
          font-weight: bold;
          margin-left: 0em;
          border-radius: 1.5em;
        }



        div.bj1 {
          background-color: #AAE0FA;
          padding: 0.2em 0.5em 0.2em 0.5em;
          border-radius: 1em;
          margin-bottom: 0.5em;
          margin-left: -0.6em;
          margin-right: -0.6em;
          margin-top: 0.5em;
        }


        div.bj2-1 {
          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.6em;
          margin-top: -1.4em;
        }


        div.bj3 {
          background-color: #C7EAFD;
          padding: 0.8em 1.8em 0.5em 0.1em;
          border-radius: 1.5em;
          margin-bottom: 0.2em;
          margin-left: -0.6em;
          margin-right: -0.6em;
          margin-top: -1.4em;
        }



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

        }

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

        .zt-h4 {
          background-color: #F0BD40;
          padding: 10px;
          color: #FFFFFF;
          margin-left: -2em;
          border-radius: 1.5em;
        }

        .qyls-h4 {
          font-family: "HiFont Hei GB";
          color: #6CB26C;
          font-weight: bold;
          padding: 0.2em;
          text-indent: 0em;
          margin-left: 0%;
        }


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

        }



        .bj5 {
          background-color: #CFCBDC;
          padding: 20px;
          border-radius: 1em;
          margin-bottom: 1em;
          margin-top: 2.5em;
        }

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

        }

        div.bj5-xyx {
          margin-top: -4em;
          margin-bottom: 1.5em;
          margin-left: -1.5em;
        }


        div.bj6 {
          margin-top: 1.6em;
          margin-bottom: -2.2em;
          margin-left: -1.3em;
        }


        span.bj6-xyx {
          background-color: #7B72A1;
          border-radius: 0.5em 0.5em 0em 0em;
          padding: 10px 20px 10px 20px;
          font-size: 1em;
          font-weight: bold;

        }



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


        .zt-cs {
          color: #FCA01B;
        }



        .zysx {
          margin-top: -2.2em;
          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: bold;
          padding: 6px;
          font-size: 1.2em;
        }

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

      }

    }
  }
}

 src/books/preschoolGameGuidance/images/0008-1.jpg

 src/books/preschoolGameGuidance/images/0012-1.jpg

 src/books/preschoolGameGuidance/images/0017-1.jpg

 src/books/preschoolGameGuidance/images/0039-1.jpg

 src/books/preschoolGameGuidance/images/0043-1.jpg

 src/books/preschoolGameGuidance/images/0044-1.jpg

 src/books/preschoolGameGuidance/images/0052-1.jpg

 src/books/preschoolGameGuidance/images/0058-1.jpg

 src/books/preschoolGameGuidance/images/0060-1.jpg

 src/books/preschoolGameGuidance/images/0067-1.jpg

 src/books/preschoolGameGuidance/images/0068-1.jpg

 src/books/preschoolGameGuidance/images/0069-1.jpg

 src/books/preschoolGameGuidance/images/0070-1.jpg

 src/books/preschoolGameGuidance/images/0077-1.jpg

 src/books/preschoolGameGuidance/images/0078-1.jpg

 src/books/preschoolGameGuidance/images/0086-1.jpg

 src/books/preschoolGameGuidance/images/0088-1-1.png

 src/books/preschoolGameGuidance/images/0088-1-2.png

 src/books/preschoolGameGuidance/images/0088-1.jpg

 src/books/preschoolGameGuidance/images/0091-1-1.png

 src/books/preschoolGameGuidance/images/0091-1-2.png

 src/books/preschoolGameGuidance/images/0091-1-3.png

 src/books/preschoolGameGuidance/images/0091-1-4.png

 src/books/preschoolGameGuidance/images/0091-1.jpg

 src/books/preschoolGameGuidance/images/0091-2.jpg

 src/books/preschoolGameGuidance/images/0092-1.jpg

 src/books/preschoolGameGuidance/images/0092-1.png

 src/books/preschoolGameGuidance/images/0092-2.png

 src/books/preschoolGameGuidance/images/0092-3.png

 src/books/preschoolGameGuidance/images/0094-1.jpg

 src/books/preschoolGameGuidance/images/0094-2.jpg

 src/books/preschoolGameGuidance/images/0095-1.jpg

 src/books/preschoolGameGuidance/images/0105-1.jpg

 src/books/preschoolGameGuidance/images/0105-2.jpg

 src/books/preschoolGameGuidance/images/0107-1.jpg

 src/books/preschoolGameGuidance/images/0108-1.jpg

 src/books/preschoolGameGuidance/images/0112-1.jpg

 src/books/preschoolGameGuidance/images/0112-2.jpg

 src/books/preschoolGameGuidance/images/0114-1.jpg

 src/books/preschoolGameGuidance/images/0114-2.jpg

 src/books/preschoolGameGuidance/images/0115-1.jpg

 src/books/preschoolGameGuidance/images/0115-2.jpg

 src/books/preschoolGameGuidance/images/0120-1.jpg

 src/books/preschoolGameGuidance/images/0120-2.jpg

 src/books/preschoolGameGuidance/images/0121-1.jpg

 src/books/preschoolGameGuidance/images/0121-2.jpg

 src/books/preschoolGameGuidance/images/0122-1.jpg

 src/books/preschoolGameGuidance/images/0123-1.jpg

 src/books/preschoolGameGuidance/images/0128-1.jpg

 src/books/preschoolGameGuidance/images/0133-1.jpg

 src/books/preschoolGameGuidance/images/0136-1.jpg

 src/books/preschoolGameGuidance/images/0136-2.jpg

 src/books/preschoolGameGuidance/images/0137-1.jpg

 src/books/preschoolGameGuidance/images/0138-1.jpg

 src/books/preschoolGameGuidance/images/0145-1.jpg

 src/books/preschoolGameGuidance/images/0147-1.jpg

 src/books/preschoolGameGuidance/images/0151-1.jpg

 src/books/preschoolGameGuidance/images/0155-1.jpg

 src/books/preschoolGameGuidance/images/0155-2.jpg

 src/books/preschoolGameGuidance/images/0158-1.jpg

 src/books/preschoolGameGuidance/images/0163-1.jpg

 src/books/preschoolGameGuidance/images/0166-1.jpg

 src/books/preschoolGameGuidance/images/0167-1.jpg

 src/books/preschoolGameGuidance/images/0175-1.jpg

 src/books/preschoolGameGuidance/images/0176-1.jpg

 src/books/preschoolGameGuidance/images/0177-1.jpg

 src/books/preschoolGameGuidance/images/0178-1.jpg

 src/books/preschoolGameGuidance/images/0179-1.jpg

 src/books/preschoolGameGuidance/images/0180-1.jpg

 src/books/preschoolGameGuidance/images/0184-1.jpg

 src/books/preschoolGameGuidance/images/0186-1.jpg

 src/books/preschoolGameGuidance/images/0188-1.jpg

 src/books/preschoolGameGuidance/images/0190-1.jpg

 src/books/preschoolGameGuidance/images/0192-1.jpg

 src/books/preschoolGameGuidance/images/0195-1.jpg

 src/books/preschoolGameGuidance/images/0198-1.jpg

 src/books/preschoolGameGuidance/images/0200-1.jpg

 src/books/preschoolGameGuidance/images/0201-1.jpg

 src/books/preschoolGameGuidance/images/0208-1.jpg

 src/books/preschoolGameGuidance/images/0218-1.jpg

 src/books/preschoolGameGuidance/images/0218-2.jpg

 src/books/preschoolGameGuidance/images/0219-1.jpg

 src/books/preschoolGameGuidance/images/0219-2.jpg

 src/books/preschoolGameGuidance/images/0222-1.jpg

 src/books/preschoolGameGuidance/images/0222-2.jpg

 src/books/preschoolGameGuidance/images/0223-1.jpg

 src/books/preschoolGameGuidance/images/0223-2.jpg

 src/books/preschoolGameGuidance/images/0223-3.jpg

 src/books/preschoolGameGuidance/images/0223-4.jpg

 src/books/preschoolGameGuidance/images/0224-1.jpg

 src/books/preschoolGameGuidance/images/0224-2.jpg

 src/books/preschoolGameGuidance/images/0224-3.jpg

 src/books/preschoolGameGuidance/images/0224-4.jpg

 src/books/preschoolGameGuidance/images/0225-1.jpg

 src/books/preschoolGameGuidance/images/0225-2.jpg

 src/books/preschoolGameGuidance/images/0225-3.jpg

 src/books/preschoolGameGuidance/images/0225-4.jpg

 src/books/preschoolGameGuidance/images/0225-5.jpg

 src/books/preschoolGameGuidance/images/0225-6.jpg

 src/books/preschoolGameGuidance/images/0226-1.jpg

 src/books/preschoolGameGuidance/images/0226-2.jpg

 src/books/preschoolGameGuidance/images/0226-3.jpg

 src/books/preschoolGameGuidance/images/0226-4.jpg

 src/books/preschoolGameGuidance/images/0227-1.jpg

 src/books/preschoolGameGuidance/images/0227-2.jpg

 src/books/preschoolGameGuidance/images/0228-1.jpg

 src/books/preschoolGameGuidance/images/0228-2.jpg

 src/books/preschoolGameGuidance/images/0228-3.jpg

 src/books/preschoolGameGuidance/images/0228-4.jpg

 src/books/preschoolGameGuidance/images/0229-1.jpg

 src/books/preschoolGameGuidance/images/0229-2.jpg

 src/books/preschoolGameGuidance/images/0231-1.jpg

 src/books/preschoolGameGuidance/images/0232-1.jpg

 src/books/preschoolGameGuidance/images/0240-1.jpg

 src/books/preschoolGameGuidance/images/0241-1.jpg

 src/books/preschoolGameGuidance/images/0242-1.jpg

 src/books/preschoolGameGuidance/images/0243-1.jpg

 src/books/preschoolGameGuidance/images/0244-1.jpg

 src/books/preschoolGameGuidance/images/0245-1.jpg

 src/books/preschoolGameGuidance/images/0245-2.jpg

 src/books/preschoolGameGuidance/images/0246-1.jpg

 src/books/preschoolGameGuidance/images/0247-1.jpg

 src/books/preschoolGameGuidance/images/0248-1.jpg

 src/books/preschoolGameGuidance/images/0249-1.jpg

 src/books/preschoolGameGuidance/images/0250-1.jpg

 src/books/preschoolGameGuidance/images/0250-2.jpg

 src/books/preschoolGameGuidance/images/0251-1.jpg

 src/books/preschoolGameGuidance/images/0251-2.jpg

 src/books/preschoolGameGuidance/images/0252-1.jpg

 src/books/preschoolGameGuidance/images/0252-2.jpg

 src/books/preschoolGameGuidance/images/0253-1.jpg

 src/books/preschoolGameGuidance/images/0253-2.jpg

 src/books/preschoolGameGuidance/images/0262-1.jpg

 src/books/preschoolGameGuidance/images/0264-1.jpg

 src/books/preschoolGameGuidance/images/0266-1.jpg

 src/books/preschoolGameGuidance/images/0269-1.jpg

 src/books/preschoolGameGuidance/images/0272-1.jpg

 src/books/preschoolGameGuidance/images/0275-1.jpg

 src/books/preschoolGameGuidance/images/0276-1.jpg

 src/books/preschoolGameGuidance/images/FD.jpg

 src/books/preschoolGameGuidance/images/SMY.jpg

 src/books/preschoolGameGuidance/images/tb-1.png

 src/books/preschoolGameGuidance/images/tb-10.png

 src/books/preschoolGameGuidance/images/tb-12.png

 src/books/preschoolGameGuidance/images/tb-5.png

 src/books/preschoolGameGuidance/images/tb-6.png

 src/books/preschoolGameGuidance/images/tb-9.png

 src/books/preschoolGameGuidance/images/ti-icon.png

 src/books/preschoolGameGuidance/images/z1.jpg

 src/books/preschoolGameGuidance/images/z10.jpg

 src/books/preschoolGameGuidance/images/z2.jpg

 src/books/preschoolGameGuidance/images/z3.jpg

 src/books/preschoolGameGuidance/images/z4.jpg

 src/books/preschoolGameGuidance/images/z5.jpg

 src/books/preschoolGameGuidance/images/z6.jpg

 src/books/preschoolGameGuidance/images/z7.jpg

 src/books/preschoolGameGuidance/images/z8.jpg

 src/books/preschoolGameGuidance/images/z9.jpg

 src/books/preschoolGameGuidance/js/examinationList.js

New file
@@ -0,0 +1,28 @@
const testData = {
  2: {
    15: [66984, 66985, 66986],
  },
  3: {
    29: [67015, 67016, 67017, 67018, 67019, 67020, 67021],
  },
  4: {
    54: [67022, 67023, 67024, 67025, 67026, 67027, 67028, 67029, 67030],
  },
  5: {
    70: [67031, 67032, 67033, 67034, 67035, 67036, 67037, 67038, 67039],
  },
  6: {
    99: [67040, 67041, 67042, 67043, 67044, 67045, 67046, 67047],
  },
  7: {
    113: [67048, 67049, 67050, 67051, 67052, 67053, 67054, 67055],
  },
  8: {
    136: [67056, 67057, 67058, 67059, 67060, 67061],
  },
  9: {
    146: [67062, 67063, 67064, 67065, 67066, 67067],
  },
};

export default testData;

 src/books/preschoolGameGuidance/js/tool.js

New file
@@ -0,0 +1,57 @@
import SparkMD5 from "spark-md5";

export function getFileMd5(file, chunkSize) {
  return new Promise((resolve, reject) => {
    let blobSlice =
      File.prototype.slice ||
      File.prototype.mozSlice ||
      File.prototype.webkitSlice;
    let chunks = Math.ceil(file.size / chunkSize);
    let currentChunk = 0;
    let spark = new SparkMD5.ArrayBuffer();
    let fileReader = new FileReader();
    fileReader.onload = function (e) {
      spark.append(e.target.result);
      currentChunk++;
      if (currentChunk < chunks) {
        loadNext();
      } else {
        const md5 = spark.end();
        resolve(md5);
      }
    };
    fileReader.onerror = function (e) {
      reject(e);
    };
    function loadNext() {
      let start = currentChunk * chunkSize;
      let end = start + chunkSize;
      if (end > file.size) {
        end = file.size;
      }
      fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    }
    loadNext();
  });
}

// 获取不受保护的图片
export function getPublicImage(md5, width, height) {
  let src = null;
  if (md5) {
    src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`;
  } else {
    return "";
  }
  if (width) src += `&width=${width}`;
  if (height) src += `&height=${height}`;
  return src;
}

// export function ForTable() {
//   const head = ["健康状况", "标志", "心理方面", "肉体方面", "社会方面"];
//   return head?.map((item) => {
//     return `<tr>${"<th>" + item + "</th>"}</tr>`;
//   });
// }


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

New file
@@ -0,0 +1,530 @@
<!-- eslint-disable no-irregular-whitespace -->
<template>
  <div class="chapter" num="2">
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <div class="bodystyle" style="padding-top: 408px">
          <img class="img-0 coverImg" alt="" src="../../images/z1.jpg" />
          <h1 id="a009"></h1>
          <h6>学习目标▶</h6>
          <p>1.明确游戏的概念，掌握幼儿游戏的基本特点与分类。</p>
          <p>
            2.掌握游戏在促进幼儿身体发展、认知能力、社会性发展、情感发展等方面的作用，理解为什么游戏对幼儿来说是重要的。
          </p>
          <p>
            3.明确游戏在幼儿园的地位与作用，理解幼儿园“以游戏为基本活动”的目的和必要性。
          </p>
          <h6>学习导图▶</h6>
          <p class="center">
            <img class="img-b" alt="" src="../../images/0017-1.jpg" />
          </p>
          <h6>导入案例▶</h6>
          <p class="center">
            <span class="zt-ls1">大班的趣味数学活动</span>
          </p>
          <p>
            数学抽象且概括性强，数学教育通常被幼儿园老师视为不容易组织的学习活动，因为它不像跳舞、唱歌、绘画等活动形式灵活，符合幼儿好动的特点。然而，
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            芦德芹老师为幼儿组织的数学教育活动，则颇有“乐嬉戏”“萌动发越”的感觉。
          </p>
          <p>
            《十个小矮人》的乐曲拉开了活动的序幕。随着乐曲，全班小朋友载歌载舞进入音乐情境：第一遍音乐，每个小朋友找座位坐好；第二遍音乐，一个小朋友从首位站起，边唱边走，绕场一周邀请10个小朋友（点数），10个小朋友和他一起快乐地唱着、跳着。轮番几次，每个小朋友都能够得到一次圈内表演的机会，幼儿参与活动的兴趣被调动起来。
          </p>
          <p>
            还有以10以内的加减为主题的游戏活动，活动过程是首先在所有幼儿的脚腕上系上一个彩色气球，然后把幼儿分成两组：一组幼儿拿着口算算式的卡片，另一组幼儿拿着相应的得数卡片。游戏规则是要求幼儿踩到和自己的数字卡片得数相同的小朋友的气球，看谁最机智，既能踩到对方的气球，又能保护好自己的气球不被对方踩到。
          </p>
          <p>
            教师设计的这个游戏很有嬉戏性。幼儿在欢快、好奇、探索和操作活动中，轻松有趣地完成了10以内的加减的学习任务。游戏充满了对抗性，算得快的幼儿最容易抢占先机，知道自己要去踩谁的气球。同时，这个游戏也促使幼儿集中注意力，加快口算速度，并主动积极参与到游戏中，成为学习和活动的主体。
          </p>
          <h2 id="b001">第一节　幼儿游戏的特点与分类</h2>
          <p>
            游戏具有悠久的历史和广泛的存在，由于受到传统观念的影响和社会发展的局限，游戏一直被认为是和幼儿的学习、成人的工作相悖的活动，所谓“玩物丧志”“业精于勤而荒于嬉”等说法不一而足。即使到了今天，也仍然有人认为“游戏就是小孩子玩耍”，甚至常常将某种不足为道的行为斥为“儿戏”。因此，明确游戏的概念，掌握幼儿游戏的基本特点与分类对于我们来说至关重要。
          </p>
          <h3 id="c001">一、幼儿游戏的特点</h3>
          <p>
            游戏是一种易于观察但却难以定义的现象。汉语当中的“游戏”一词最早出现在战国时期的历史文献中，在此之前，与“游戏”内涵接近的表述主要有“游”“戏”“嬉”“玩”“遨”等。汉语的“游戏”一词最初形成时，就已经与学习对立，意指成人的休闲娱乐或小孩子的随意玩耍活动。在现代英语中，“游戏”有game与play的区分，game主要指“有规则的游戏”，包括代代相传的能决出胜负的民间游戏，也包括竞技类的体育运动，如奥林匹克运动会（the
            Olympic
            Games）。play的外延大于game，它作为名词时，是对一类行为的总称，小孩子的角色游戏、舞台表演、玩笑幽默等都在其范围之内，有规则的游戏（game）也包含其中。
          </p>
          <p>
            我们认为幼儿游戏是指在一定时空中，幼儿自发自愿进行的，伴有愉悦情绪体验的一系列假想的或现实的活动。这类活动以自身为目的，既可以是幼儿个体独自
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            进行的活动，也可以是幼儿与其他人之间的社会性交往活动。幼儿游戏具有和成人游戏不同的特点，主要表现在行为特征的可见性、游戏性体验的差异性和外部环境的宽松性三个方面。
          </p>
          <h4 id="d001">（一）行为特征的可见性</h4>
          <p>
            正如幼儿尚未学会掩饰自己的行为动机和体验一样，幼儿的游戏也是“可见的”，这些可见的外部行为特征主要包括面部表情、动作行为、言语伴随和游戏材料等方面。
          </p>
          <h5 id="e001">1.面部表情</h5>
          <p>
            面部表情是幼儿情绪主观体验的一种外部表现形式，是用来判断幼儿的活动是否是游戏活动的一项重要外部指标。对灵长类动物游戏的研究发现，动物在游戏时有一种特殊的面部表情——“玩相”（play
            face），其典型特征是张大的嘴巴，得意扬扬的神情，眼睛里充满了笑意。这种“玩相”也出现在幼儿的游戏中，向伙伴传递一个特殊的游戏信号，“这是玩啊（It
            is play），别当真”。
          </p>
          <p>
            需要说明的是，幼儿在游戏时并不总是在“笑”，有时候他们的表情是非常专注认真的。例如，当他们蹲在地上观察蚂蚁搬家时，当他们小心翼翼地用积木搭建高塔时，当他们和同伴讨论应该给娃娃穿什么衣服时的表情。可以说，幼儿在游戏中的面部表情取决于游戏活动的性质与类型（是认知性成分较强的活动还是嬉戏性活动较强的活动；是独自游戏还是与同伴一起玩等），也取决于游戏活动的阶段（开始、进行中还是结束）和游戏材料（是新异的还是熟悉的）等。
          </p>
          <h5 id="e002">2.动作行为</h5>
          <p>
            在游戏过程中，幼儿对物体或游戏材料的使用往往不同于日常生活中的使用方式，这些行为常常超出了成人的想象，其动作行为的特点主要包括非常规性、随意性和重复性。①非常规性。在游戏过程中，幼儿会表现出许多非常规性的动作。例如，把枕头抱在怀里假装哄宝宝睡觉，把脸朝向椅背骑在椅子上假装开汽车等动作，就是游戏性的动作而不是常规性或工具性的动作。②随意性。在游戏过程中，幼儿的动作没有规律，不同的幼儿可以用不同的方式去对待同一物体，同一个幼儿这次玩的方式也可能与下一次玩的方式不同。例如，有的幼儿把座椅当汽车，有的则把座椅翻过来当娃娃的澡盆，下次他们可能用很多座椅来连成火车，或者搭建自己的家，等等。③重复性。幼儿年龄越小，重复性的特征体现得越明显。例如，爬楼梯本身不是游戏，但当一个幼儿反复地上上下下时，通过动作及表情线索，人们可以判断他正在进行游戏。
          </p>
          <p>
            根据动作性质的不同，我们还可以把幼儿的游戏动作分为探索、象征和嬉戏三种基本类型。①探索。通过视觉、听觉、触摸觉、本体觉等感知觉的联合活动，幼
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            儿对当前事物的性质（如形状、颜色、软硬等），事物的变化（如形状改变、空间移位），以及事物之间和事物与自己动作之间的关系等进行考察的动作行为。②象征。在表象作用支配下的想象性、虚构性动作。例如，幼儿把小积木假装当作住在积木房子里的小人，户外活动时张开双臂奔跑假装自己是小飞机，等等。③嬉戏。故意做“坏事”或某种动作来取乐，带有幽默、逗乐、玩笑的性质。例如，幼儿故意把鞋子“穿”在手上，故意把水洒到地上。需要说明的是，幼儿在游戏中并非只表现出单一的游戏动作，而是会交叉表现，在不同内容的游戏活动中三种游戏动作所占的比重不同。例如，在娃娃家等角色游戏中象征性动作占优势，在搭积木、拼图等游戏中探索性动作占优势。即便是同一内容的游戏，在游戏过程中的不同阶段也会产生不同性质游戏动作之间的交替。例如，在搭积木的初级阶段，探索性动作较多；在搭好以后玩游戏“小矮人的家”（白雪公主的故事）时，象征性动作开始占主导地位。
          </p>
          <h5 id="e003">3.言语伴随</h5>
          <p>
            言语是思维的物质外衣，幼儿在游戏过程中通过伴随的言语来组织思维，表达情感并与他人进行沟通。注意倾听幼儿的言语，可以帮助我们判断幼儿是否在游戏以及游戏的水平与状况。一般而言，幼儿在游戏中的言语伴随主要包含三种类型。一是游戏过程中的独白言语，主要表现为一边自言自语，一边操作游戏材料。例如，“把红色的长积木放在下面，把绿色的小积木放在红积木上……”“娃娃生病了，我要带娃娃去医院”等。这种独白言语是幼儿在游戏中思维与想象的外化，在年龄越小的幼儿身上表现得越明显。二是扮演角色之间的交际性言语，也称为游戏性言语。例如，“卖糖果啦，好吃的糖果，谁来买糖果”“报告队长，侦查任务已经完成”“医生，我的宝宝病了，请帮他检查检查”等。游戏性言语的内容具有虚拟性，其说者和听者都是游戏角色，游戏性言语对合作性的角色游戏起到维系与支撑的作用。三是同伴之间的交际性言语。这类言语在游戏中主要起到建议、解释、协商、求助、申辩、指责他人等作用。例如，“我们来玩丢沙包吧”“我在帮宝宝洗澡呢”“把你的小汽车借给我玩一会儿行吗”“这个不是这样玩的”等。
          </p>
          <p>
            游戏中幼儿言语伴随频度的高低可以作为评价幼儿活动的自由度以及班级的心理环境质量的一个指标。游戏是幼儿自发自愿的活动，在游戏中幼儿的心理是最放松的，因此在游戏中幼儿的言语伴随最多，最能真正体现幼儿的所思、所感和所需。
          </p>
          <h5 id="e004">4.游戏材料</h5>
          <p>
            任何东西都可以成为幼儿的游戏材料，玩具是现代社会幼儿游戏时经常使用的游戏材料。游戏的顺利进行依赖具体的游戏材料或玩具，幼儿的年龄越小，对游戏材料和玩具的依赖性越强，对游戏材料的逼真性程度要求也越高。随着年龄的增长和语言抽象思维的发展，幼儿也会逐渐表现出一些无外在游戏材料的游戏，如语言游戏等。但总体来看，幼儿在游戏中对游戏材料和玩具仍然具有很大的依赖性，因
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            此，有无游戏材料和玩具也可以作为人们判断幼儿是否在游戏的指标之一。
          </p>
          <h4 id="d002">（二）游戏性体验的差异性</h4>
          <p>
            游戏性体验是游戏不可或缺的重要心理成分，指幼儿在游戏活动中产生的对于游戏活动本身的主观感受或心理体验。我们通常说游戏是“自由的”“愉悦的”，这些词汇都带有强烈的情绪体验色彩。游戏性体验的最大特点在于它的内在性，是主体在游戏过程中实实在在获得的主观性体验。游戏所带来的愉悦体验是幼儿进行游戏的最终目的，也是游戏的魅力所在。
          </p>
          <p>
            游戏性体验可分为兴趣性体验、自主性体验、胜任感、幽默感，以及因身体活动的需要满足而获得的生理快感。
          </p>
          <h5 id="e005">1.兴趣性体验</h5>
          <p>
            兴趣性体验是指由外物刺激带来的一种体验，是一种情不自禁地被卷入、被吸引的心理状态。例如，当一套色彩鲜艳、形状多样的积木摆在幼儿面前时，幼儿会产生极大的兴趣并很快投入其中进行游戏，这就是一种兴趣性体验。兴趣性体验是游戏性体验不可或缺的成分，幼儿游戏因兴趣的产生而发生，也因兴趣的消失而停止。
          </p>
          <h5 id="e006">2.自主性体验</h5>
          <p>
            自主性体验是指幼儿对自己在游戏中的主体地位的感知和体验，主要由游戏活动可以自由选择、自主决定的性质引起。如果用幼儿的语言来描述这种体验，就是“玩就是可以随便”“玩就是想干什么就干什么”。在游戏中，幼儿可以自由决定“玩什么”“怎么玩”“和谁玩”，即“我的游戏我做主”。自主性体验是幼儿游戏性体验的重要组成部分，也是幼儿进行游戏的根本动因之一。
          </p>
          <h5 id="e007">3.胜任感</h5>
          <p>
            胜任感是一种幼儿对自己能力的体验，这种体验可以增强其自信心。在游戏中，幼儿不必担心成人的批评与苛责，可以通过尝试错误选择适合自己能力的活动或获得屡次尝试后由成功所带来的胜任感。此外，幼儿还可以通过假想、想象来实现对现实环境的改造，转换、重构自己和外部环境之间的关系，进而获得掌握感和控制感。例如，在游戏中幼儿可以假装自己是神仙，手拿魔杖一挥，就可以变出自己想要的任何东西，甚至整个世界都可以按照自己的想法和愿望被重新安排。
          </p>
          <h5 id="e008">4.幽默感</h5>
          <p>
            幽默感是由嬉戏、欢笑、诙谐等引起的快感。作为游戏性体验的一部分，幼儿的幽默感有一个发生、发展的过程。最初的幽默感源于嬉戏性游戏的偶然结合。例如，当幼儿无意中把母亲的长发拉下来挡住自己的眼睛觉得很有趣时，就会马上重复这一动作，咯咯直乐，母亲的制止不但不会使幼儿停止这种行为，甚至还会强化这种行为。伴随着幼儿的成长与知识经验的丰富，他们会理解更多、更深层次的幽默并将其用于游戏过程中。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -1">
        <div class="bodystyle">
          <h5 id="e009">5.生理快感</h5>
          <p>
            对处于高速成长期的幼儿来说，“动即快乐”，游戏的生理快感主要源于满足其身体活动的需要和机体维持中枢神经最佳觉醒水平的需要。由于骨骼肌肉系统在生长发育上的特点，幼儿有身体活动的需要，在游戏的自由活动中，幼儿体验着成长所带来的快乐，获得了机体上的生理快感。同时，作为运动控制中心的小脑与作为情绪控制中心的边缘系统之间存在双向的神经联系，因此，积极的身体活动也可以使幼儿产生愉快的情绪体验。
          </p>
          <p>
            游戏性体验的实质是主体性体验，游戏之所以使人快乐就是因为幼儿能够从中获得肯定自己的主体性体验。需要说明的是，虽然游戏性体验包括上述五种体验，但在一种游戏活动中，这五种体验不一定同时发生。不同性质的游戏性体验存在与否及存在多少都取决于游戏自身的性质，其中，兴趣性体验、自主性体验与胜任感是任何游戏都不可或缺的基本部分。
          </p>
          <h4 id="d003">（三）外部环境的宽松性</h4>
          <p>
            幼儿游戏的发生是主客体相互作用的结果，既与游戏主体有关，又与外部环境相关。总体来看，幼儿可以产生游戏性体验的外部环境相对宽松，主要具有以下特征。
          </p>
          <h5 id="e010">1.自由选择游戏</h5>
          <p>
            游戏的自由选择是产生自主性体验的必要条件。因此，教师在组织游戏时必须给予幼儿自由选择的权利，并提供相应的条件使幼儿可以根据自己的兴趣和意愿来决定做什么和怎么做。相关研究表明，在游戏材料可选的情况下，幼儿的无所事事率较低，幼儿间交流较频繁；反之，幼儿无所事事率较高。在游戏材料任选的情况下，无所事事率最低，幼儿间交流最频繁。因此，教师应该致力于提供充足的游戏材料，并提供给幼儿自由选择游戏的权利与可能，形象地说，即幼儿有权利选择“玩不玩”和“玩什么”。
          </p>
          <h5 id="e011">2.自行决定游戏活动的方式方法</h5>
          <p>
            游戏活动的方式方法由幼儿自行决定也是游戏自主性的表现之一。自由选择是幼儿游戏发生的一个必要条件，但不是充分条件。对幼儿游戏活动的观察显示，即便是在游戏材料可自由选择的前提下，幼儿园内仍有许多幼儿并没有从内心真正认为他们在“玩”，而是将“老师的游戏”作为一项任务进行，原因就在于他们所选用的游戏材料的使用方式方法已经被教师提前规定好。幼儿游戏的真谛在于他们可以自主决定游戏活动的方式方法，主动控制游戏的进程，即自己决定“怎么玩”，而不是完全遵循教师的规定对所提供的游戏材料进行机械操作。
          </p>
          <h5 id="e012">3.游戏活动的难度与幼儿的能力相匹配</h5>
          <p>
            任务的难度与能力相匹配是胜任感产生的一个重要条件。自主游戏往往可以使幼儿通过自主选择找到与其自身能力匹配的游戏活动，并通过游戏活动产生一定的
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            成就感和胜任感。幼儿通过自身努力解决游戏中遇到的问题，获得成就感和胜任感，同时带来满足和快乐的习得性体验。因此，游戏的活动难度应该尽最大可能与幼儿的能力水平相一致，即游戏活动的难度处在幼儿的“最近发展区”，既有一定难度，又能让幼儿通过努力来完成任务或解决问题。
          </p>
          <h5 id="e013">4.不寻求或不担忧游戏以外的奖惩</h5>
          <p>
            “玩即目的”，幼儿的游戏性体验产生于游戏活动当中，而不是游戏活动之外，游戏本身的乐趣是吸引幼儿置身游戏的直接动机和关键。“游戏是目的在自身的活动”，虽然游戏中的奖励有一定的积极作用，但必须明确幼儿不是为了游戏以外的东西才进行游戏的，游戏活动本身就能使其感到满足。相关研究表明，外部强化（奖赏）会抑制幼儿对游戏本身的兴趣。经常性的外部奖励手段不但不会鼓励幼儿积极游戏，反而可能造成幼儿对奖励的依赖，使游戏失去其真正的意义。一旦幼儿关注奖励胜过游戏本身，游戏活动的本质就发生了变化，即幼儿的游戏被“异化”了。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·真题再现</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="image/tb-1.png" /></p>
              </div>
            </div>
            <p class="center"><b>2013年上半年《保教知识与能力》论述题</b></p>
            <p>
              李老师设计了一个“三只蝴蝶”的游戏活动，她选了三位幼儿扮演蝴蝶，又选了若干幼儿扮演花朵。结果，幼儿兴趣不高，表现被动。还没等游戏结束，一个幼儿就问李老师：“老师，游戏完了吗？我们可以自己玩了吧？”
            </p>
            <p>对于这种现象，请从幼儿游戏特征和游戏指导的角度进行论述。</p>
            <p><b>【参考答案】</b></p>
            <p>从幼儿游戏特征的角度分析，幼儿游戏应该具有以下四个特征。</p>
            <p>（1）游戏是儿童主动的、自愿的活动。</p>
            <p>（2）游戏是在假想的情境中反映周围生活。</p>
            <p>
              （3）游戏没有社会的实用价值，不直接创造财富，没有强制性的社会义务。
            </p>
            <p>（4）游戏伴随着愉悦的情绪。</p>
            <p>从教师对游戏指导的角度分析：</p>
            <p>
              李老师在游戏中是一种导演者的角色，以导演角色介入游戏中，告诉幼儿在游戏中应该做什么，不应该做什么，完全控制了幼儿游戏。这很可能破坏幼儿游戏，变成“游戏幼儿”而不是“幼儿游戏”。
            </p>
          </div>
          <h3 id="c002">二、幼儿游戏的分类</h3>
          <p>
            分类标准不同，对幼儿游戏的分类也不同。本部分采用最常见的分类方法，主要根据幼儿的认知发展和社会性发展对幼儿的游戏进行分类，并在此基础上介绍了
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="19">
      <div v-if="showPageList.indexOf(19) > -1">
        <div class="bodystyle">
          <p class="notIndent">在幼儿园实践中最常见的幼儿游戏分类。</p>
          <h4 id="d004">（一）以认知发展为标准</h4>
          <p>
            游戏是幼儿发展水平和发展状况的真实写照，认知发展是幼儿发展的重要维度之一。皮亚杰是最早从幼儿认知发展的角度对游戏进行分类的，他认为幼儿在不同的认知水平上，会表现出不同类别的游戏，并据此将幼儿的游戏划分为四类。
          </p>
          <h5 id="e014">1.练习性游戏</h5>
          <p>
            练习性游戏（practical play）又称感知运动游戏（sensori-motor
            play）或机能性游戏（functional
            play），是幼儿最早出现的游戏形式，主要发生在皮亚杰所说的感知运动阶段（0～2岁）。练习性游戏主要由简单的、重复的动作组成，如反复拍水、摇铃，绕着房间跑动，滑滑梯等都属于练习性游戏。练习性游戏在2岁前最多，之后比例逐步下降，到6岁时，大约占到全部游戏的14%。
          </p>
          <h5 id="e015">2.象征性游戏</h5>
          <p>
            象征性游戏又称想象游戏（imaginative play）或假装游戏（pretend
            play）、表演游戏（thematic
            play），是幼儿最典型的一种游戏形式。象征性游戏的主要特征是“假装”，即幼儿对事物的某些方面做想象性的改造，包括以物代物（如用积木假装打电话，把小椅子倒过来当汽车开），情景假设（如把张开双臂奔跑假想成自己在开飞机，把坐在秋千上高高荡起假想成自己在飞翔）和以人代人（如在“娃娃家”中扮演布娃娃的爸爸、妈妈，戴上听诊器扮演医生）等形式。象征性游戏大约发生在1岁半，2岁以后开始大量出现，4岁以后趋于成熟，并延伸到小学阶段。幼儿园阶段是幼儿象征性游戏发展的高峰期。
          </p>
          <h5 id="e016">3.结构性游戏</h5>
          <p>
            结构性游戏（constructive
            play）又称建构性游戏，是指幼儿按照一定的计划或目的来组织游戏材料或其他物体（如积木、积塑、火柴杆、塑料管、冰棒棍、木片、纸片、泥、沙、雪等），使之呈现出一定的形式或结构，从而反映现实生活中的物体或场景的活动。例如，拼搭积木，拼插积塑，玩拼图游戏，堆雪人，做泥工，进行沙筑碉堡、木工活动等建构活动都属于结构性游戏。结构性游戏一般发生在幼儿2岁左右，在幼儿阶段呈增加趋势，是幼儿游戏活动向非游戏活动的过渡，前期带有象征性，后期逐渐成为一种智力活动。
          </p>
          <h5 id="e017">4.规则性游戏</h5>
          <p>
            规则性游戏是指有两个或两个以上的幼儿参加，按照预先设定的规则进行，通常具有竞赛性质和奖惩措施，以输赢为完结的游戏，在英文中的表述是“games”或“games
            with
            rules”。规则性游戏包括智力性质的竞赛游戏，如五子棋、牛角棋等棋类游戏，说相反、词语接龙等语言类游戏，也包括运动技巧性质的游戏，如跳房子、丢沙包、贴人、老鹰抓小鸡等运动类游戏。规则性游戏是幼儿游戏的高级发展形式，多在四五岁以后发展起来。伴随着幼儿年龄的增长，游戏规则会更具体、更明确。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
        <div class="bodystyle">
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·真题再现</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="image/tb-1.png" /></p>
              </div>
            </div>
            <p class="center"><b>2014年上半年《保教知识与能力》单选题</b></p>
            <p>
              幼儿反复敲打桌子，在房间里跑来跑去，在椅子上摇来揺去，这类游戏属于（　　）。
            </p>
            <p>A.建构游戏</p>
            <p>B.象征性游戏</p>
            <p>C.规则游戏</p>
            <p>D.机能性游戏</p>
            <p>（答案：D）</p>
            <p class="center"><b>2014年下半年《保教知识与能力》单选题</b></p>
            <p>儿童拿一竹竿当马骑，竹竿在游戏中属于（　　）。</p>
            <p>A.表演性符号</p>
            <p>B.工具性符号</p>
            <p>C.象征性符号</p>
            <p>D.规则性符号</p>
            <p>（答案：C）</p>
            <p class="center"><b>2015年上半年《保教知识与能力》单选题</b></p>
            <p>儿童最早玩的游戏类型是（　　）。</p>
            <p>A.练习游戏</p>
            <p>B.规则游戏</p>
            <p>C.象征性游戏</p>
            <p>D.建构游戏</p>
            <p>（答案：A）</p>
            <p class="center"><b>2015年下半年《保教知识与能力》单选题</b></p>
            <p>
              幼儿以积木、沙、雪等材料为道具来模仿周围现实生活的游戏是（　　）。
            </p>
            <p>A.表演游戏</p>
            <p>B.建构游戏</p>
            <p>C.角色游戏</p>
            <p>D.规则游戏</p>
            <p>（答案：B）</p>
          </div>
          <h4 id="d005">（二）以社会性发展为标准</h4>
          <p>
            以社会性发展水平为依据对幼儿游戏进行分类的主要有柏顿（Parten）和豪伊斯（Howes），其中柏顿的游戏分类使用最为普遍，我们主要介绍柏顿对游戏的分类。柏顿通过观察托幼机构中幼儿的游戏，按照社会性参与的不同水平把2～6岁幼
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            儿的游戏分为偶然的行为或无所事事、旁观、独自游戏、平行游戏、联合游戏、合作游戏六大类。
          </p>
          <h5 id="e018">1.偶然的行为或无所事事</h5>
          <p>
            偶然的行为或无所事事主要指幼儿在游戏中缺乏目标，东游西逛，行为漫无目的，目光飘忽不定，关注碰巧引起其兴趣的事物，对事物没有兴趣时就摆弄或玩自己的肢体，在椅子上爬上爬下，或是坐在一个地方东张西望。例如，在某幼儿园的大型游戏室里，一间很大的屋子被分割成若干游戏区：饭店、医院、娃娃家、银行、商店、理发店等。各个区域被逼真的玩具与材料装饰得很精美，在用不锈钢和有机玻璃制成的“挂号台”后面坐着一位“小护士”，已经很久没有“病人”来挂号看病了，“小护士”就一直呆坐在那里，偶尔目光游移、四处张望。严格地说，这种偶然的行为或无所事事不属于游戏。
          </p>
          <h5 id="e019">2.旁观</h5>
          <p>
            在游戏中旁观时，幼儿是作为游戏的旁观者，即置身于游戏活动之外，不参与游戏，大部分时间都是在一旁观看同伴们游戏，偶尔和他人交谈，有时候会提出问题或提供建议，但从行为上并不主动参与和介入同伴正在进行的游戏。例如，在“娃娃家”游戏中，“宝宝”生病了，“爸爸”“妈妈”非常着急。这时在一旁观看的小文也很着急，建议赶紧送“宝宝”去医院看病；小美也在旁边看到了这一情景，她突然问了一句“你们的娃娃是从哪里找到的？”旁观的行为可能是游戏，也可能不是游戏。案例中小文的行为说明她的旁观具有游戏的性质，而小美的旁观则与正在进行的游戏没有关系，不是游戏。
          </p>
          <h5 id="e020">3.独自游戏</h5>
          <p>
            独自游戏是指幼儿虽然与正在进行游戏的同伴在交谈距离之内，然而他们却专注于自己手中的游戏材料，不与其他同伴交流，一个人玩着自己的游戏。例如，在幼儿园的角色游戏区，天天在玩商店的游戏，他一边认真地整理着“货架”上的“商品”，给“商品”贴“价签”，一边把它们分类摆放得整整齐齐，等待“顾客”光临。而在他旁边的齐齐却趴在天天的“柜台”上，一边摆弄着手头的小积木，一边自言自语道：“这个是霸王龙，这个是三角龙，这个是巴斯顿龙……”随后还在“柜台”上开始了“霸王龙大战三角龙”的游戏。独自游戏的特点是幼儿专心、独立地操作玩具或游戏材料，而没有接近其他幼儿的尝试。
          </p>
          <h5 id="e021">4.平行游戏</h5>
          <p>
            平行游戏是指幼儿操作着相同或相近的玩具或游戏材料，但他们彼此之间却没有进行真正意义上的互动。他们可能彼此和谐相处，不时地也有少量言语交谈，或者相互模仿，但是在活动中没有合作。例如，在幼儿园的积木建构区，天天和齐齐都在专心地摆弄和搭建各自的积木。天天正在把积木搭成“大高塔”，齐齐正在把积木连接成“小火车”。过了一会儿，齐齐一抬头看到了天天搭建的“大高塔”，于是，他也开始尝试把积木搭高，并自言自语道：“我的大高塔也建起来了。”天天扫了一眼齐齐的高塔，冲他笑了一下，然后低头继续在自己的高塔旁边搭建新的高塔，齐齐则开始尝试把“小火车”首尾相接，围住自己搭建的“大高塔”。与独自游戏相比，幼儿在平行游戏时会有言语或眼神的交流，也可能会相互模仿，然而
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            大部分时间仍是自己玩自己的，幼儿之间仍没有合作。
          </p>
          <h5 id="e022">5.联合游戏</h5>
          <p>
            联合游戏也称为协同游戏，一般发生在由多个幼儿参与的游戏中。联合游戏时幼儿是在一起玩的，也有“我们一起玩”的共同活动的意识，然而却没有明确的分工与合作，他们对于游戏材料、游戏目的和游戏结果缺乏共同的计划和组织，只是因为玩游戏时游戏活动的相似而简单地聚合在一起。例如，在游戏“开火车”中，几个幼儿一个接一个地共同把“火车厢”连接在一起，组成了一列“火车”，然而他们对诸如“火车”开去哪里、怎么行驶等都没有明确规定，假如某个幼儿离开了也不会影响其他幼儿继续游戏。在联合游戏中，幼儿之间的互动和合作开始增多，但是游戏团体的组织仍较为松散，小组成员变换较为频繁，没有明确的计划和组织。
          </p>
          <h5 id="e023">6.合作游戏</h5>
          <p>
            合作游戏是指由两个或多个幼儿在一起，围绕一个共同的游戏主题进行的游戏。合作游戏的游戏主题明确，幼儿对于游戏材料的使用、游戏目标和游戏结果都有共同的计划和组织，分工明确、角色互补，所结成的玩伴关系可以持续较长的一段时间。例如，在幼儿园的“娃娃家”中，齐齐、天天、小文和小美在商量角色的分配，小文和小美都想当“妈妈”，这时齐齐说道：“妈妈要带宝宝，还要买菜做饭，谁最能干谁才能当妈妈。”小文抢道：“这些我都会，我来当妈妈。小美，你当宝宝吧，你当可爱漂亮的宝宝。”小美眨了眨眼，想了想然后说道：“那好吧，我来当可爱的宝宝，嘻嘻。”天天在旁边插不上嘴，有点着急，说：“我想当爸爸，我来当爸爸吧？”齐齐说：“好的，那天天当爸爸，我来当舅舅吧，今天舅舅来家里做客了。”于是，他们按照商量好的角色开始了游戏。合作游戏是幼儿社会性发展的高级阶段，对于幼儿的发展具有重要的意义。教师应该创设良好的环境，鼓励和支持幼儿的合作游戏。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·真题再现</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="image/tb-1.png" /></p>
              </div>
            </div>
            <p class="center"><b>2017年下半年《保教知识与能力》单选题</b></p>
            <p>
              当教师以“病人”身份进入小班医院时，有六位“小医生”同时上来询问病情，每个孩子都积极地为教师看病、打针，忙得不亦乐乎，结果教师一共被打了六针，对此班幼儿这种游戏行为最恰当的理解是（　　）。
            </p>
            <p>A.过于重视教师的身份</p>
            <p>B.角色游戏呈现合作游戏的特点</p>
            <p>C.在游戏角色定位中出现混乱</p>
            <p>D.角色游戏呈现平行游戏的特点</p>
            <p>（答案：D）</p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="23">
      <div v-if="showPageList.indexOf(23) > -1">
        <div class="bodystyle">
          <h4 id="d006">（三）幼儿园常见的游戏分类</h4>
          <h5 id="e024">1.角色游戏</h5>
          <p>
            角色游戏是幼儿以角色扮演为主要的表征手段自主地表现和表达自己对现实生活和环境的认识与体验、想法与愿望的一种象征性游戏活动。例如，幼儿喜爱的游戏“医院”“娃娃家”等，就是通过扮演医生、爸爸、妈妈等角色表达自己的认知与体验的。
          </p>
          <h5 id="e025">2.表演游戏</h5>
          <p>
            表演游戏是幼儿以故事为线索展开的游戏活动。表演游戏的主题和内容源于故事，在规则和结构上强调遵循相关故事的基本框架。在游戏中，幼儿可以自由选择和切换主题，自由决定和改变游戏内容。
          </p>
          <h5 id="e026">3.建构游戏</h5>
          <p>
            建构游戏也称结构游戏，是幼儿利用不同的结构材料如积木、积塑、金属部件、沙、土等来进行建筑、构造的游戏。在建构游戏中，幼儿可以根据自己的想象进行构思来塑造一定的物体。
          </p>
          <h5 id="e027">4.规则游戏</h5>
          <p>
            规则游戏是至少有两人参与的、按照一定的规则进行的一种游戏活动，具有规则性、竞赛性和文化传承性等特征。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·真题再现</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="image/tb-1.png" /></p>
              </div>
            </div>
            <p class="center"><b>2012年下半年《保教知识与能力》单选题</b></p>
            <p>幼儿园的“娃娃家”游戏属于（　　）。</p>
            <p>A.建构游戏</p>
            <p>B.表演游戏</p>
            <p>C.角色游戏</p>
            <p>D.智力游戏</p>
            <p>（答案：C）</p>
          </div>
          <h2 id="b002">第二节　幼儿游戏的意义与价值</h2>
          <p>
            幼儿期是个体的高速发展期，在这个时期，充分的游戏对其身体、认知、社会性、情绪与情感等的发展具有重要的意义与价值。
          </p>
          <h3 id="c003">一、游戏促进幼儿的身体发展</h3>
          <p>
            身体发展是人全面发展的基础。幼儿的年龄越小，身体发展对其心理发展的影
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="24">
      <div v-if="showPageList.indexOf(24) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            响就越明显。这里主要从游戏促进幼儿的身体生长发育、动作的协调发展和运动技能的形成三个方面分析游戏在幼儿身体发展方面的意义与价值。
          </p>
          <h4 id="d007">（一）游戏促进幼儿身体的生长发育</h4>
          <p>
            人的身体发展包括三个方面的基本内容：（1）各器官系统的生长发育，包括形态结构与生理机能的发展变化，可用身高、体重、头围、胸围、脉搏、血压、肺活量等作为测量指标；（2）运动能力的发展，包括身体基本活动能力与身体素质的发展，可用走、跑、跳、投掷等动作以及动作与运动的协调、灵敏、速度、力量等作为测量指标；（3）机体适应能力的提高，包括对外界环境变化的适应能力、对各种疾病的抵抗能力和病后恢复能力。
          </p>
          <p>
            游戏是幼儿最喜爱的、自发的活动。在这一活动中，幼儿的各种身体器官和运动机能均可获得发展。各种游戏尤其是户外游戏有助于幼儿呼吸新鲜空气，锻炼心肺功能，可以满足幼儿身体活动的需要，促进机体的新陈代谢和生长发育，增强体质。
          </p>
          <h4 id="d008">（二）游戏促进幼儿动作的协调发展</h4>
          <p>
            幼儿的游戏总是与身体动作分不开，在游戏中，走、跑、跳、钻爬、攀登、投掷、平衡等基本游戏动作可以锻炼幼儿的大肌肉群，增强灵敏、平衡、协调等身体素质。例如，在传统的民间游戏“老鹰抓小鸡”当中，扮演小鸡的幼儿为了不被“老鹰”抓到，就必须在母鸡的带领下躲避老鹰的追捕；而扮演老鹰的幼儿必须避开“母鸡”的阻挠，努力追捕“小鸡”。在这一游戏中，幼儿通过不断奔跑、躲闪、跳跃锻炼了很多大肌肉群，同时四肢的协调性和灵活性也得以发展，促进了幼儿大肌肉动作的协调发展。
          </p>
          <p>
            此外，游戏还有利于促进幼儿小肌肉和精细动作的发展，促进控制性和手眼协调。例如，在捏泥、插塑、拼图、穿珠、剪画、搭积木等手工活动和游戏中，幼儿必须仔细耐心地用手去操作物体，因此他们的手部肌肉得到了锻炼，手指灵活性进一步增强，发展了幼儿手部小肌肉的活动能力和手眼协调、并用的能力。在游戏中，幼儿通过不断控制和微调，增强控制能力，使自己的动作变得更为精细、熟练和灵活。
          </p>
          <h4 id="d009">（三）游戏促进幼儿运动技能的形成</h4>
          <p>
            运动的控制与协调是运动技能发展的核心，运动控制与协调能力是复杂的规则游戏和体验运动的基础。游戏可以丰富幼儿的运动经验，为其身体运动能力的发展和运动技能的形成奠定良好的基础。格拉胡认为2～7岁是幼儿的基础运动时期，他们开始学习多种动作的协调，出现自主性的协调运动，如跑、跳、扔、踢、伸展等。这个时期正是幼儿开始探索世界、爱跑爱跳的时期，充分的运动性游戏和基本动作练习机会至关重要。
          </p>
          <p>
            我们都有过这样的体验，在一群同样学习舞蹈或打球的成年人中，可能有的人学得快，动作技能掌握较好，有的人则协调性相对差一些，动作技能掌握得慢。究其根源，这与其在基础运动时期是否获得了足够的游戏和运动机会，发展了基本运动能力密切相关。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="25">
      <div v-if="showPageList.indexOf(25) > -1">
        <div class="bodystyle">
          <h4 id="d007">（一）游戏促进幼儿身体的生长发育</h4>
          <p>
            人的身体发展包括三个方面的基本内容：（1）各器官系统的生长发育，包括形态结构与生理机能的发展变化，可用身高、体重、头围、胸围、脉搏、血压、肺活量等作为测量指标；（2）运动能力的发展，包括身体基本活动能力与身体素质的发展，可用走、跑、跳、投掷等动作以及动作与运动的协调、灵敏、速度、力量等作为测量指标；（3）机体适应能力的提高，包括对外界环境变化的适应能力、对各种疾病的抵抗能力和病后恢复能力。
          </p>
          <p>
            游戏是幼儿最喜爱的、自发的活动。在这一活动中，幼儿的各种身体器官和运动机能均可获得发展。各种游戏尤其是户外游戏有助于幼儿呼吸新鲜空气，锻炼心肺功能，可以满足幼儿身体活动的需要，促进机体的新陈代谢和生长发育，增强体质。
          </p>
          <h4 id="d008">（二）游戏促进幼儿动作的协调发展</h4>
          <p>
            幼儿的游戏总是与身体动作分不开，在游戏中，走、跑、跳、钻爬、攀登、投掷、平衡等基本游戏动作可以锻炼幼儿的大肌肉群，增强灵敏、平衡、协调等身体素质。例如，在传统的民间游戏“老鹰抓小鸡”当中，扮演小鸡的幼儿为了不被“老鹰”抓到，就必须在母鸡的带领下躲避老鹰的追捕；而扮演老鹰的幼儿必须避开“母鸡”的阻挠，努力追捕“小鸡”。在这一游戏中，幼儿通过不断奔跑、躲闪、跳跃锻炼了很多大肌肉群，同时四肢的协调性和灵活性也得以发展，促进了幼儿大肌肉动作的协调发展。
          </p>
          <p>
            此外，游戏还有利于促进幼儿小肌肉和精细动作的发展，促进控制性和手眼协调。例如，在捏泥、插塑、拼图、穿珠、剪画、搭积木等手工活动和游戏中，幼儿必须仔细耐心地用手去操作物体，因此他们的手部肌肉得到了锻炼，手指灵活性进一步增强，发展了幼儿手部小肌肉的活动能力和手眼协调、并用的能力。在游戏中，幼儿通过不断控制和微调，增强控制能力，使自己的动作变得更为精细、熟练和灵活。
          </p>
          <h4 id="d009">（三）游戏促进幼儿运动技能的形成</h4>
          <p>
            运动的控制与协调是运动技能发展的核心，运动控制与协调能力是复杂的规则游戏和体验运动的基础。游戏可以丰富幼儿的运动经验，为其身体运动能力的发展和运动技能的形成奠定良好的基础。格拉胡认为2～7岁是幼儿的基础运动时期，他们开始学习多种动作的协调，出现自主性的协调运动，如跑、跳、扔、踢、伸展等。这个时期正是幼儿开始探索世界、爱跑爱跳的时期，充分的运动性游戏和基本动作练习机会至关重要。
          </p>
          <p>
            我们都有过这样的体验，在一群同样学习舞蹈或打球的成年人中，可能有的人学得快，动作技能掌握较好，有的人则协调性相对差一些，动作技能掌握得慢。究其根源，这与其在基础运动时期是否获得了足够的游戏和运动机会，发展了基本运
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="26">
      <div v-if="showPageList.indexOf(26) > -1">
        <div class="bodystyle">
          <p class="notIndent">动能力密切相关。</p>
          <h3 id="c004">二、游戏促进幼儿的认知发展</h3>
          <p>
            认知发展是人的发展的重要组成部分，它是指个体认知结构和认知能力的形成、发展、变化的过程，涉及知觉、记忆、思维、言语、想象等多种心理过程。幼儿在游戏中能够更好地掌握概念，解决问题，培养创造性。
          </p>
          <h4 id="d010">（一）游戏促进幼儿感知觉的发展和概念的形成</h4>
          <p>
            感知觉是幼儿认识活动的开端，是其认识外界事物、增长知识、发展智力的主要途径。感知觉主要包括视觉、听觉、味觉、嗅觉、肤觉、时间知觉、空间知觉和观察力等，幼儿的感知觉只有在活动中才能更好地得到发展。在游戏中，幼儿接触各种性质的物体，并通过眼看、耳听、口尝、手摸，以及身体动作来了解事物的个别属性，大大增强了感官的感受性；同时，通过对物体属性以及空间和时间概念的把握，游戏也加强了幼儿对物体的整体属性的感知。例如，“击鼓传花”游戏可以通过不同长度和节奏的鼓点促进幼儿听觉和注意力的发展；“找不同”游戏可以通过两幅图之间的细微差别对比促进幼儿视觉敏感性和观察能力的发展；“奇妙的口袋”游戏可以通过幼儿把手放进口袋里触摸并猜出物品的名称来锻炼其触摸觉以及联想匹配能力；“浮与沉”游戏则可以通过把不同材质和体积的物体浸入水中帮助幼儿感知和认识水的流动、浮力、物体的轻重和体积等特性，以及不同材质和体积的物体与水的关系。
          </p>
          <p>
            概念的形成和发展是认知发展的重要内容。对于幼儿来说，口头告知和死记硬背式的概念学习很难起到实质性作用，幼儿需要通过自己的游戏和活动来积累感性经验，理解和掌握概念。在游戏中，幼儿探索世界，积累有关事物的形状、颜色、位置、用途等感性认知，通过大脑的认知加工处理，将其纳入自己的认知系统当中，从而形成概念。例如，幼儿通过“过家家”游戏当中用杯子喝水、用小勺吃饭等获得有关物品的功能性概念。正是通过游戏，幼儿逐渐获得了社会约定俗成的相关概念。
          </p>
          <h4 id="d011">（二）游戏促进幼儿注意和记忆的发展</h4>
          <p>
            游戏有助于引起和发展幼儿的注意，尤其是有意注意。在游戏活动，幼儿需要专注于当下的游戏任务，或遵守一定的游戏规则才能更好地开展游戏。这就要求他们必须理解和记住相关内容。苏联心理学家曾经做过这样一个实验：他们让幼儿在单纯完成任务和游戏两种不同的活动方式下，将各种颜色的纸分别装在与之同色的盒子里，观察幼儿注意力集中的时间。实验结果发现，在单纯完成任务的情境下，4岁幼儿只能坚持17分钟，6岁幼儿只能坚持62分钟。而在游戏的情境下，4岁幼儿可以持续专注于游戏任务22分钟，6岁幼儿可以坚持71分钟，并且其分放不同颜色纸张的数量比单纯完成任务的无游戏情境的形式下多50%。可见，游戏可以引起并促进幼儿注意的发展。
          </p>
          <p>
            记忆根据内容不同可分为形象记忆、逻辑记忆、情绪记忆和运动记忆等。在游戏活动中，幼儿会有意识地进行记忆，并可以运用到多种记忆形式，促进其记忆力
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="27">
      <div v-if="showPageList.indexOf(27) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            的发展。例如，在骑小车、走平衡木等锻炼身体协调性和平衡性的体育游戏中，幼儿能够愉快地掌握动作，熟练操作后能将其存储到长时记忆中，丰富原来的记忆内容，实现游戏动作的自动化。再如，在“听听我是谁”的游戏中，幼儿需要记住所听到的小动物或者别人说话的声音，并且跟自己记忆中的声音线索相匹配，才能完成游戏。在幼儿园，有的老师在一天的活动结束后会带领幼儿回忆并讨论今天所做过的事，这是培养幼儿有意识地回忆，并促进其语言表达的很好方式。
          </p>
          <h4 id="d012">（三）游戏促进幼儿思维发展，培养创造性</h4>
          <p>
            游戏是幼儿的优良教师，通过游戏幼儿不仅可以锻炼身体，认识环境，也可以学习解决问题的方法，促进思维能力发展，培养创造性。由于幼儿在参与游戏时主体性增强，因此游戏活动能够很大程度上促进其思维能力的发展，提高其解决问题的能力。在自发的游戏活动中，幼儿需要自行决定游戏主题，选择适合的游戏材料，与同伴结组合作等，这就要求其在游戏前要自己去分析、判断、推理、概括和总结。而在游戏中，幼儿还会遇到一些突发性的状况，为了使游戏能够顺利进行下去，幼儿需要针对问题想出解决的方法，从而进一步促使幼儿思考。例如，想给娃娃打针却没有注射器怎么办？在抓人游戏中如何才能抓到别人而不被别人抓到？这些都需要幼儿积极开动脑筋，想办法去解决。
          </p>
          <p>
            想象是创造的基础和源泉。根据创新程度不同，想象可以细分为再造想象和创造想象。幼儿期是象征性游戏的高峰期，想象和假想是其基本特点。可以说，幼儿游戏的过程就是想象和创造的过程，而游戏则为其想象和创造提供了宽松的环境和充分的空间。例如，借助想象，幼儿可以做到以物代物，即把一种物品当作另一种物品来使用，一个贝壳可以被幼儿当作猫，一块积木可以被幼儿当作蛋糕、小人、火车……借助想象，幼儿可以去做现实生活中不能做的事情，他们可以像爸爸妈妈一样在“娃娃家”里“照顾宝宝”，可以像医生那样“给病人看病打针”，可以像解放军叔叔一样为保卫祖国“放哨站岗”，也可以像传说中的仙女一样“点石成金”……可以说，正是游戏使幼儿展开了想象的翅膀，能够在他们自己创造的世界中自由飞翔。
          </p>
          <h3 id="c005">三、游戏促进幼儿的语言发展</h3>
          <p>
            语言是表达思想和交流情感的工具，其最本质的功能就是交际。学前期是口头语言发展的关键期，幼儿在游戏中与同伴的交流与互动其实就是其组织语言、锻炼表达能力的过程。
          </p>
          <h4 id="d013">（一）游戏为幼儿提供语言交往的机会</h4>
          <p>
            游戏，尤其是角色游戏，往往有言语伴随，而且这些言语还是幼儿与同伴、教师以交流为目的进行的，不同于幼儿的喃喃自语，这为幼儿的语言实践提供了机会，是促进幼儿语言发展的重要和有效途径。在角色游戏中，幼儿在选择扮演的角色时会不断交流，在角色游戏中还会自然而然地练习特定社会角色的语言形式。例如，在“医院”的角色游戏中，“小医生”把医治“病人”、给“病人”打针拿药
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="28">
      <div v-if="showPageList.indexOf(28) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            当作自己的职责，当游戏实际进展中出现“配错药”的问题时，不同角色之间就会由于冲突而产生讨论、交流，甚至争执。可见，在游戏活动中，幼儿需要和同伴、教师进行交流，这就促使其不断提高语言能力，丰富语言运用。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "chapter001",
  props: {
    showPageList: {
      type: Array,
    },
  },

};
</script>

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

New file
@@ -0,0 +1,1323 @@
<template>
  <div class="chapter" num="3">
    <div class="page-box" page="66">
      <div v-if="showPageList.indexOf(66) > -1">
        <div class="bodystyle" style="padding-top: 408px">
          <h1 id="a011">
            <img class="img-0 coverImg" alt="" src="../../images/z3.jpg" />
          </h1>
          <h6>学习目标▶</h6>
          <p>1.理解角色游戏的概念与特点。</p>
          <p>2.了解角色游戏对幼儿发展的意义。</p>
          <p>3.掌握角色游戏的结构与指导方法。</p>
          <h6>学习导图▶</h6>
          <p class="center">
            <img
              class="img-b openImgBox"
              alt=""
              src="../../images/0070-1.jpg"
            />
          </p>
          <h2 id="b007">第二节　角色游戏的组织与指导</h2>
          <p>
            《纲要》指出，游戏是幼儿的基本活动。游戏是幼儿学习的基本特点，也是幼儿生活和学习的方式。角色游戏对幼儿身心发展的促进功能是其他游戏无法取代的。因此，幼儿园教师有必要认真研究角色游戏的结构，这样才能组织好幼儿角色游戏，提高幼儿游戏水平。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="67">
      <div v-if="showPageList.indexOf(67) > -1">
        <div class="bodystyle">
          <h3 id="c020">一、角色游戏的结构</h3>
          <h4 id="d043">（一）游戏主题</h4>
          <p>
            游戏主题是角色游戏结构中的核心要素，它统帅着其他的结构要素。所以有些专家也把角色游戏称作主题游戏。游戏主题不仅包括游戏名称，还包括游戏内容，以及在活动中的动作、事件和相互关系，是幼儿在游戏中所反映的周围人们的生活。例如，上述“大千美食城”中佳佳和强强模仿饭店中厨师的活动，“我是小司机”中祺祺用电扇叶片模仿汽车司机开车的活动等，都是源于生活中的经验表象。
          </p>
          <h4 id="d044">（二）角色扮演</h4>
          <p>
            角色游戏之所以能吸引幼儿乐在其中，正是因为幼儿可以扮演自己感兴趣的生活中成人的角色。可以说每个孩子在幼年都渴望成为像成人那样的角色，做成人可以做的事情。幼儿天生就是好奇的，他们有着强烈的心理愿望，就是渴望像成人一样做事，以此满足自己的愿望。角色游戏中角色扮演成为最吸引他们开展角色游戏的重要因素之一。爸爸妈妈哄孩子、老师给小朋友讲故事、解放军叔叔背着枪站岗、警察抓坏人、司机手握方向盘开车、医生给病人看病打针等，幼儿眼中的各种社会角色的活动都像磁铁一样吸引着幼儿，他们有着强烈的欲望尝试各种角色的活动，于是他们开展各种主题的角色游戏，在丰富的游戏主题中扮演各行各业的社会角色，对扮演角色的假想也支撑幼儿更好地推进游戏的进程。
          </p>
          <h4 id="d045">（三）假想</h4>
          <p>
            假想是角色游戏的重要特质，是贯穿整个角色游戏始终的重要构成要素。它包括对游戏材料和物品的假想、对游戏角色动作和情节的假想。
          </p>
          <h5 id="e045">1.对游戏材料和物品的假想</h5>
          <p>
            幼儿在角色游戏中对游戏材料和物品的假想是支撑角色游戏开展的又一重要因素。幼儿不可能像成人那样用真实的工具材料工作。因此幼儿必须借助对眼前可以利用的材料的假想来进行游戏活动。没有了对材料的假想，幼儿等于失去了开展游戏的支柱，如佳佳和强强把彩纸和树叶、草叶当成蔬菜，把塑料碗当成锅等；祺祺把风扇叶片假想成方向盘等。也只有如此，幼儿才能投入快乐的游戏情境之中，感受假想材料和活动带给自己的满足感。当然，幼儿对游戏材料和物品的假想，并不是无意识的，而是根据手头材料的特点来开展假想并利用的。因此对材料的假想表明幼儿对环境的关注和已有表象的认知和加工水平。例如，在对材料的假想中，幼儿会对材料的形状、质地、颜色、功能等进行假想利用。他们会把土或沙子当面粉，而绝对不会把石块砖头当面粉或大米来用。
          </p>
          <h5 id="e046">2.对游戏角色动作和情节的假想</h5>
          <p>
            角色游戏中幼儿通过对角色动作的假想来展现自己模仿的角色活动并推进游戏情节。当幼儿选择确定开展的游戏主题后，便开始了角色的活动。扮演什么角色、
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="68">
      <div v-if="showPageList.indexOf(68) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            角色活动怎样，在不同情节中会做出怎样的反应，幼儿会根据需要认真考虑并做出相应回应。幼儿是通过对扮演角色的某些代表性动作来进行角色假想的。幼儿的假想动作往往不会像现实生活角色的动作那样复杂。例如，妈妈的活动经常是用照料孩子的动作来代表：用给孩子喂饭、梳头、穿衣服等一些个别动作来代表妈妈的活动；用“站岗”来代表解放军的活动；用“打针”来代表医生给病人看病的一系列活动和情节。幼儿正是通过这样一些角色的特征性动作的假想来展开游戏情节的。其中很多角色的活动通过这些简单动作代替，不少情节是被省略概括的。例如，解放军不只是站岗一件事；妈妈也不只是照顾孩子，还要工作；医生也有具体的分工，“打针”这一个动作不能代替看病的所有情节。
          </p>
          <h4 id="d046">（四）内在规则</h4>
          <p>
            维果茨基认为，角色扮演的特征——按规则行事，强化了儿童在行动前的思考能力，它要求儿童抵抗自己的即时冲动。这样，他们就能更好地理解并努力遵循社会规范和期望。其实这里的规则便是生活中人们遵循的某些社会角色活动中的活动程序和行为规范等。这些规则是内隐的，与规则游戏中的规则不同。规则游戏中的规则是外显的。外显的游戏规则是指为了游戏活动的顺利进行，在游戏开始前由游戏指导者或游戏者向“所有游戏人”宣布的，是人人可以看见和直接认知的。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·考点预测</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="../../images/tb-1.png" /></p>
              </div>
            </div>
            <p>角色游戏的结构有（　　）。</p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer01.isComplete"
                value="A"
                id="1"
                @change="changeRadio($event, 'aswer01', 'check01')"
                v-model="questionData.aswer01.check01"
              />A.游戏主题
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer01.isComplete"
                value="B"
                id="2"
                @change="changeRadio($event, 'aswer01', 'check02')"
                v-model="questionData.aswer01.check02"
              />B.角色扮演
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer01.isComplete"
                value="C"
                id="3"
                @change="changeRadio($event, 'aswer01', 'check03')"
                v-model="questionData.aswer01.check03"
              />C.假想
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer01.isComplete"
                value="D"
                id="4"
                @change="changeRadio($event, 'aswer01', 'check04')"
                v-model="questionData.aswer01.check04"
              />D.内在规则
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer01.isComplete"
                value="E"
                id="5"
                @change="changeRadio($event, 'aswer01', 'check05')"
                v-model="questionData.aswer01.check05"
              />E.游戏过程
            </p>
            <p v-if="questionData.showAswer01">（答案：ABCD）</p>
            <div class="btn-group">
              <div v-if="questionData.aswer01.isComplete">
                <span class="answerText"
                  >您的答案：{{ questionData.aswer01.data.join(",") }}</span
                >
                <span class="answerText" style="color: #1fbc1f"
                  >正确答案：A,B,C,D</span
                >
              </div>
              <div v-else></div>
              <div class="btn-data">
                <button
                  class="btn btn-default"
                  @click="setBookQuestion('aswer01')"
                >
                  提交
                </button>
                <button
                  class="btn btn-default"
                  @click="resetAswer('aswer01', 'showAswer01')"
                >
                  重做
                </button>
                <button
                  class="btn btn-default"
                  @click="lookAnswer('showAswer01')"
                >
                  查看答案
                </button>
              </div>
            </div>
          </div>
          <p>
            幼儿角色游戏的规则具有内隐性。“内隐的游戏规则”表现为“游戏内在的情境性和秩序感”，它是在游戏过程中得以体现的。幼儿游戏是按照实际生活中的规则（或者称为“世界的规则”）进行的。
            “世界的规则”是指客观事物及人类社会发生、发展的规律，它制约着一切事物，包括游戏的开展。角色游戏规则是幼儿的自我限制。哪里有游戏，哪里就有假想情境；哪里有假想情境，哪里就有规则。在游戏中，规则是隐含的，是幼儿自己制定的规则与执行时的一种内部的自我限制。例如，幼儿在玩打针游戏时，会按照自己打针的生活印象，先消毒再打针，而不会先打针再消毒。再如，到美食城做顾客的幼儿，吃完饭后，会用假装的“纸币”结账，绝对不会吃完饭就离开，这同样是幼儿自我内在的游戏规则，而不用依靠任何人告诉他们该如何按游戏的规则去开展游戏。
          </p>
          <h3 id="c021">二、角色游戏的组织与指导</h3>
          <p>
            角色游戏是幼儿期开展最多、内容最丰富的一种游戏。虽然幼儿角色游戏有其
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="69">
      <div v-if="showPageList.indexOf(69) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            独立自主性，但如果没有教师的组织指导，游戏主题、情节不会特别丰富，幼儿的角色游戏水平不易迅速提高。因此，幼儿园教师可以在尊重幼儿游戏意愿的基础上，加以适度组织指导，以有助于幼儿的角色游戏水平得到不同程度的提升。教师应根据幼儿的实际经验和兴趣，在游戏过程中给予适当指导，使幼儿保持愉快的情绪，促进幼儿能力的全面发展。
          </p>
          <p>
            角色游戏源于幼儿生活经验的一种创造性游戏活动。幼儿游戏的水平既和幼儿生活经验有关，又受幼儿认知发展水平的制约，因此小、中、大班游戏的水平不同，这就要求幼儿园教师对各年龄班的角色游戏活动予以不同的组织指导。
          </p>
          <h4 id="d047">（一）角色游戏的一般指导</h4>
          <h5 id="e047">1.丰富幼儿的生活经验</h5>
          <p>
            角色游戏是建立在幼儿所掌握的生活知识和经验基础上的社会生活再造活动。幼儿的知识越多，生活内容越丰富，角色游戏的主题和内容也就越新颖、越充实。教师要善于利用教育活动、观察、参观、日常生活、劳动、娱乐等多种活动来丰富幼儿的知识经验，加深幼儿对周围生活、人与人的关系的印象。同时帮助家长安排好幼儿的家庭生活，适当带幼儿出行，引导幼儿观察人们的活动，了解成人角色的丰富内容，使幼儿在家庭中获得更广泛的知识经验，为开展角色游戏打下良好的基础。丰富幼儿的生活经验是角色游戏指导的首要工作。
          </p>
          <h5 id="e048">2.为幼儿提供角色游戏的基本条件</h5>
          <p>
            角色游戏的开展需要一定的条件，否则幼儿的角色游戏就不能尽情展开。
          </p>
          <p>
            首先，要为幼儿提供充裕的游戏时间。角色游戏的开展需要较长的时间，每次游戏至少需要30分钟。只有时间充足，幼儿确定主题、分配角色、寻找材料、开展情节等活动才能深入展开，否则势必影响游戏的效果。幼儿园每天都要保证幼儿在园有充裕的自主游戏时间，幼儿可以依据兴趣需要自主选择角色游戏，确保游戏效果良好。
          </p>
          <p>
            其次，要根据幼儿的兴趣特点和生活经验，为幼儿创设角色游戏的场地，配备游戏玩具和材料。幼儿比较喜欢的角色区有娃娃家、小医院、美食城、服装店、小超市、小银行、理发店等，创设时主题应尽量丰富。
          </p>
          <p class="block">
            娃娃家：娃娃，小床，家具，小服装，鞋帽，厨具灶具，小餐具，小桌椅，家用电器（电视机、冰箱、空调、微波炉、洗衣机、电脑等），废旧纸盒，代金币等。
          </p>
          <p class="block">
            小医院：小床、听诊器、体温计、药瓶、注射器、血压计、棉签、输液器、药品柜、小镊子等。
          </p>
          <p class="block">
            美食城：桌椅、筷子、餐盘、塑料碗、各种食品卡片、各种食品材料、代金币、饮料瓶等。
          </p>
          <p class="block">服装店：各种小服装、代金币等。</p>
          <p class="block">
            小超市：各种各样的商品，如小食品、日用品、水果、蔬菜、米面等。
          </p>
          <p class="block">小银行：电脑、取款机、票据、水笔、代金币等。</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="70">
      <div v-if="showPageList.indexOf(70) > -1">
        <div class="bodystyle">
          <p class="block">
            理发店：小镜子、椅子、桌子、吹风机、发型画册、剪刀、梳子、围巾、洗手盆、热水器、洗发膏、焗油膏、代金币等。
          </p>
          <p>
            需要说明的是，教师在角色区提供丰富多样的玩具和游戏材料以保证游戏开展时材料的多效性和对幼儿思维想象的激发作用。1989年的《规程》第二十四条指出，“游戏材料应强调多功能和可变性”。2016年修订颁布的《规程》又进一步重申，“幼儿园应当因地制宜创设游戏条件，提供丰富、适宜的游戏材料”。幼儿角色游戏的开展离不开材料的支撑。因此，教师布置各个角色主题区角时，要为幼儿提供多功能的游戏材料。游戏材料和玩具的多功能并不一定是购置的高级娃娃家具、超市小桌椅等，而是可以在多个主题游戏和情节发挥其功能。教师提供的废旧物品、半成品材料或可塑性材料如沙子、橡皮泥等，可以一物多用，更能够激发孩子的想象力，促使他们挖掘材料的多种功能。例如，一个废旧的纸盒，可以当作娃娃的小床、小桌子、小案板、柜台、椅子等；一节木棍，可以当作饭勺、梳子、擀面杖、指挥棒、口琴、注射器、遥控器、铅笔等。可见，游戏材料的多效性和可变性能够刺激幼儿大脑的兴奋性，调动已有经验，从而激发幼儿的创造想象。
          </p>
          <p>
            另外，游戏材料并非越多越好，丰富是品种和材料种类丰富，数量不一定越多越好。教师提供各种材料便给幼儿创设了开展游戏的环境，幼儿会根据自己的兴趣投入游戏。而一旦他们的情节中缺乏某种游戏用具，他们会积极地思考，去寻找可以替代的物品、材料。这样不仅可以激发幼儿创造性地利用环境、物品，还可以促进幼儿认知的发展。
          </p>
          <p>
            教师还可以“鼓励幼儿制作玩具”，如手工活动中的作品可以放到超市，美术课画好的衣服可以放到服装店，等等。幼儿对亲手制作的玩具会表现出更浓厚的兴趣和积极性。
          </p>
          <h5 id="e049">3.尊重幼儿的游戏意愿，鼓励幼儿确定主题、分配角色</h5>
          <p>
            角色游戏是幼儿自主自愿的游戏活动，游戏主题必须是幼儿自己感兴趣的，开展哪个主题的游戏必须尊重幼儿的意愿，否则幼儿会失去兴趣，也不符合角色游戏的特征。所以无论是确定主题还是分配角色，都需要尊重幼儿的意愿。
          </p>
          <p>
            有的幼儿特别是低龄班幼儿，经常重复模仿某些成人的动作，但缺乏更为丰富的情节。这些幼儿喜欢角色游戏但不会确定游戏主题或游戏主题不够明确，教师需要给予引导，帮助幼儿确定游戏主题，丰富游戏内容。例如，一名三岁半的幼儿坐在小椅子上，双手不停地旋转重复司机着开汽车的动作，嘴里不时“嘀嘀嘀”。显然他在学司机开车。但是他没有意识到，只有简单的动作重复，不能展开游戏。此时教师可以对孩子加以引导：“小朋友，你是在开汽车吗？那你是在玩开汽车的游戏吧？那你就是小司机啊。噢，你开的是什么车？是货车还是客车？如果是货车有
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="71">
      <div v-if="showPageList.indexOf(71) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            副驾驶吗？有装货卸货的工人吗？如果是客车，那客车开往哪里啊？有谁在车上啊？有没有售票员啊？”幼儿会迅速确定游戏方向，明确主题，继而围绕主题展开游戏。
          </p>
          <h5 id="e050">4.鼓励幼儿学会分配角色</h5>
          <p>
            游戏角色是幼儿最感兴趣的，角色分配也经常成为开展游戏时的关键问题。游戏角色分配主要有两个方面需要关注。一是幼儿确定主题后不清楚到底游戏中该有怎样的角色。例如，几个男孩子想玩“神七奔月”，只知道有人驾驶神七，其他就不清楚了，此时教师可以引导：“小朋友在玩神七奔月，真好。那你们说除了驾驶飞船上天的叔叔，还需要什么人呢？地面上有没有一些叔叔阿姨科学家来指挥飞船，跟飞船驾驶员联系呢？”二是分配角色时发生矛盾。有的游戏角色是所有参加游戏的幼儿都想扮演的，他们又知道不能同时扮演，由此可能会争执谁扮演。教师可以借此机会帮助幼儿学会分配角色，同时不失时机地帮助幼儿学会谦让等良好行为。“娃娃家”中只有一个爸爸和妈妈，可是到娃娃家的三个人都想做爸爸。教师的做法：“噢，三个小朋友都想当爸爸，可是，都做爸爸的话，家里就没有人当妈妈，爸爸妈妈也没有孩子了。这可怎么办呢？”在教师的引导下，三个幼儿互相商定：一人做爸爸，一人演妈妈，一人演孩子。过一会儿三人轮换角色，如果时间不够，可以下次来娃娃家时再换。就这样教师不仅不失时机地鼓励幼儿自己化解了角色分配的冲突，还对幼儿进行了良好行为品质的教育。
          </p>
          <h5 id="e051">5.适时参与到游戏中，促进幼儿游戏情节的发展</h5>
          <p>
            角色游戏虽然是幼儿自主活动，但是在游戏过程中教师要随时观察各角色区的游戏进行情况，适时有针对性地介入并指导幼儿游戏，以保证游戏的情节更加丰富，幼儿游戏水平更高。例如，在“美食城”中，小厨师都在忙活着切菜做饭，服务员见没有顾客来就餐，也跑到厨师那里帮忙。有几个小顾客进来坐了一下发现没有人接待，于是离开了“美食城”。教师观察到这一情况，迅速走过去并大声说：“老板，你这儿有啥好吃的啊？服务员呢？我想看看菜单，请帮我把菜单拿过来啊。”服务员听到后，急忙跑过来递上菜单说：“请点菜吧。”教师说：“顾客来吃饭你们要招待呀，不然我们就到别处去吃饭了啊。”此时，服务员明白自己的责任是招呼进来就餐的客人，而不是去后面帮厨师。一些小朋友看到有服务员招呼了也来到美食城就餐，美食城的生意迅速兴旺起来。
          </p>
          <p>
            由于角色游戏是幼儿的自主游戏，教师的指导一般是参与性间接指导，而非直接告诉幼儿如何游戏。美食城中教师以游戏的角色身份出现，适时介入恰到好处，既不影响幼儿游戏的自主性，又帮助幼儿明确角色内容，更好地展开游戏。
          </p>
          <h5 id="e052">6.选择时机自然愉快地结束游戏</h5>
          <p>
            游戏有好的开端也要有好的结束。结束环节主要包括游戏的自然结束、游戏后的整理工作、游戏后的总结评价。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="72">
      <div v-if="showPageList.indexOf(72) > -1">
        <div class="bodystyle">
          <p>（1）游戏的自然结束</p>
          <p>
            角色游戏是幼儿感兴趣的活动，幼儿带着良好情绪开始游戏，也要在愉快的气氛中结束游戏。从游戏开始到进行、结束都使幼儿感兴趣，才能吸引幼儿下次继续玩角色游戏。通常，结束游戏是在教师观察的基础上自然终止。前面提到角色游戏时间一般是30分钟，此时幼儿各主题情节基本开展完毕，如果再进行下去可能不会再有丰富的内容，也会因此使幼儿失去游戏兴趣。因此，教师要看准时机，适时结束游戏。结束的方式尽量自然，可根据游戏主题来提示，告诉幼儿游戏进入尾声。例如，超市服务台广播：“各位顾客好，超市还有5分钟就要下班了，请顾客抓紧时间选好物品，到收银台结账。祝您购物愉快！”教师以理发店经理的身份对理发师说：“大家辛苦了，抓紧时间接待完最后一位顾客就要整理店内卫生，准备下班了。”
          </p>
          <p>（2）游戏后的整理工作</p>
          <p>
            游戏结束后整理场地、收拾玩具和材料既是为下次开展游戏做准备，又是培养幼儿良好生活习惯的重要时机。教师切不可包办代替，要提示幼儿在结束游戏后收拾场地，将材料归位，养成良好习惯。针对不同年龄班幼儿的特点，教师可以采取不同的指导方法。例如，对小班幼儿，主要是培养他们游戏后参与整理场地的意识。教师可以请幼儿一起收拾玩具，整理场地。对中班幼儿，主要是培养他们收拾玩具的能力，整理场地和收拾玩具以幼儿为主，教师只在必要时给予帮助。对大班幼儿，应要求他们独立做好收拾场地及玩具、材料的整理工作，教师只要给予适当督促即可。
          </p>
          <p>（3）游戏后的总结评价</p>
          <p>
            教师组织幼儿对游戏总结评价必不可少。总结评价能够引导幼儿明确游戏方向，提升游戏水平。总结评价可以由教师和幼儿共同进行。幼儿是游戏的亲历者，对每个角色的活动和情节的开展最有发言权。幼儿参与总结评价环节的积极性高，既是对游戏的回顾，又可以积累游戏的经验，相互学习交流，提升游戏水平。总结评价包括游戏主题、角色扮演、区域互动、材料和玩具的使用、情节开展等多方面内容。教师在引导幼儿共同总结评价游戏过程中，可以让幼儿知道自己和别人游戏的情况，获得游戏经验，以便今后提高游戏水平。
          </p>
          <p>
            对于角色游戏的评价，形式可以灵活。不一定每次都要在集体中进行，也可以在游戏小组中进行；不一定每次都是在游戏结束后进行，也可以在游戏过程中进行。例如，去小剧场看表演，教师可以在节目结束后引导幼儿观众总结评价游戏的开展情况。
          </p>
          <p>游戏评价的形式主要有以下几种。</p>
          <p>①讨论。</p>
          <p>
            当幼儿在游戏中发生纠纷时，教师可以让幼儿讨论是与非。例如，在角色分配出现争执、情节方向不统一时，教师可以让幼儿讨论怎样开展最好玩，大家也能比
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="73">
      <div v-if="showPageList.indexOf(73) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            较满意。如果幼儿因缺乏生活经验不能得出结论，教师可以找机会让幼儿参观来丰富经验。需要注意的是，教师不要试图把控讨论，而是要引导幼儿发掘游戏中的闪光点。事实上，幼儿往往不能说出教师所认为的闪光点，因为幼儿眼中的闪光点与教师眼中的闪光点可能是完全不同的。
          </p>
          <p>②现场评议。</p>
          <p>
            有的角色游戏开展较好，为提升全体幼儿游戏水平，可以保留游戏现场，组织现场评议。例如，超市区的幼儿布置的货物齐全，摆放有序，井井有条，还有幼儿自己找来许多代金券、商品等，教师可在各区域游戏结束后带领大家一起参观超市，请开展超市游戏的幼儿介绍自己开展游戏的情况，也可以让其他幼儿提意见。现场评议可以使幼儿继续回到游戏中，体会并分析游戏的快乐。
          </p>
          <p>③汇报发言。</p>
          <p>
            游戏结束后，教师可组织各游戏区的幼儿讲讲各自是如何游戏的，分享游戏的快乐。通常，大班幼儿汇报发言比较积极踊跃。针对这种情况，可以安排相应的环境来满足幼儿的需求。例如，制作或准备小话筒放在活动室后面，小话筒数量与活动区人数一致。这样幼儿可以在课下与其他小组分享，而且每个人都可以有发言的机会。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·考点预测</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="../../images/tb-1.png" /></p>
              </div>
            </div>
            <p>1.教师组织指导幼儿开展角色游戏的首要工作是（　　）。</p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer02.isComplete"
                value="A"
                id="1"
                @change="changeRadio($event, 'aswer02', 'check011')"
                v-model="questionData.aswer02.check011"
              />A.丰富幼儿生活经验
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer02.isComplete"
                value="B"
                id="1"
                @change="changeRadio($event, 'aswer02', 'check012')"
                v-model="questionData.aswer02.check012"
              />B.确定主题
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer02.isComplete"
                value="C"
                id="1"
                @change="changeRadio($event, 'aswer02', 'check013')"
                v-model="questionData.aswer02.check013"
              />C.分配角色
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer02.isComplete"
                value="D"
                id="1"
                @change="changeRadio($event, 'aswer02', 'check014')"
                v-model="questionData.aswer02.check014"
              />D.适当参与
            </p>
            <p v-if="questionData.showAswer02">（答案：A）</p>

            <div class="btn-group">
              <div v-if="questionData.aswer02.isComplete">
                <span class="answerText"
                  >您的答案：{{ questionData.aswer02.data.join(",") }}</span
                >
                <span class="answerText" style="color: #1fbc1f"
                  >正确答案：A</span
                >
              </div>
              <div v-else></div>
              <div>
                <button
                  class="btn btn-default"
                  @click="setBookQuestion('aswer02')"
                >
                  提交
                </button>
                <button
                  class="btn btn-default"
                  @click="resetAswer('aswer02', 'showAswer02')"
                >
                  重做
                </button>
                <button
                  class="btn btn-default"
                  @click="lookAnswer('showAswer02')"
                >
                  查看答案
                </button>
              </div>
            </div>
            <p>2.结合实例说明组织幼儿角色游戏的指导方法。</p>
            <div class="bk-xyx">
              <textarea
                rows="6"
                v-model="questionData.textBybItem22"
                @change="setBookQuestion"
              ></textarea>
            </div>
          </div>
          <p>
            教师在评价总结活动中应注意：提问以开放性问题为主，以促使幼儿讨论话题，并表达不同观点；每次游戏评价要有重点，具体、准确地指导幼儿的问题或行为；以幼儿评价为主，教师适时引导；评价活动要为幼儿进行下一次游戏指明方向。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·真题再现</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="../../images/tb-1.png" /></p>
              </div>
            </div>
            <p class="center">
              <b>2012年下半年《保教知识与能力》材料分析题</b>
            </p>
            <p>
              李老师发现大班“理发店”的顾客很少，“顾客”对理发店不感兴趣。于是李老师带幼儿到理发店参观，看理发店的设施，鼓励幼儿向理发师咨询问题，记录幼儿的问题，还拍下照片，幼儿在理发店看到顾客躺着洗头，梳理发型。回到幼儿园，李老师组织幼儿讨论“如何开好理发店”，并把照片给孩子回顾，有的幼儿反映没有躺椅，有的反映没有发型梳，李老师则启发幼儿自己用积木做躺椅，
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="74">
      <div v-if="showPageList.indexOf(74) > -1">
        <div class="bodystyle">
          <div class="bk">
            <p class="notIndent">自己画发型。之后，“理发店”生意又红火起来。</p>
            <p>
              请分析案例中教师采用了哪些策略来支持幼儿的游戏活动。<button
                class="btn btn-default"
                @click="lookAnswer('showAswer03')"
              >
                显示答案
              </button>
            </p>
            <div class="bk-xyx">
              <textarea
                rows="6"
                v-model="questionData.textBybItem33"
                @change="setBookQuestion"
              ></textarea>
            </div>
            <div v-if="questionData.showAswer03">
              <p><b>【参考答案】</b></p>
              <p>
                教师指导游戏就需要介入幼儿的游戏当中去，介入的目的是引导幼儿继续游戏，促进幼儿游戏向高一级水平发展，从而提高游戏质量，促进幼儿社会性发展。在这个案例中，教师采用的是外部干预的介入方式来指导游戏，外部干预是指成人并不直接参与游戏，而是以一个外在的角色引导说明、建议、鼓励游戏中幼儿的行为。
              </p>
              <p>该案例中，李老师采用了以下策略来支持幼儿的游戏活动。</p>
              <p>（1）及时帮助幼儿记录与总结角色游戏中的突出特点。</p>
              <p>
                李老师观察游戏中孩子的表现以及游戏主题及材料的使用情况。及时记录孩子在游戏中的特点，帮助幼儿把无意识的游戏变为有意识的学习过程。另外，还可以让幼儿通过参观、记录、提问的方式发现问题，自己来制作躺椅、自己画发型来参与游戏。通过这些，不断地充实和深化幼儿的角色游戏。
              </p>
              <p>（2）以交流体验为媒介。</p>
              <p>
                李老师引导幼儿自发地进行交流（幼儿向理发师咨询问题，记录幼儿的问题），积极地表达情感，相互体验，共享快乐，共解难题，进一步为幼儿提供表现和学习的机会。自发交流是游戏同伴间对自己游戏的交流，自发交流改变了过去交流只是教师对幼儿的自上而下的片面做法，凸显了幼儿在整个游戏过程的主体地位，更有利于幼儿自主独立创造的个性和社会性人格情感的培养发展。
              </p>
            </div>
          </div>
          <h4 id="d048">（二）各年龄阶段角色游戏的组织与指导</h4>
          <p>
            幼儿年龄不同，生活经验不同，幼儿游戏层次和水平也有区别。例如，小班幼儿的角色游戏多以简单动作模仿为主，中班幼儿的角色游戏主题丰富，大班幼儿的角色游戏以创造为主。教师需要根据实际情况，针对各年龄班做出相应指导。
          </p>
          <h5 id="e053">1.小班幼儿角色游戏组织与指导</h5>
          <!-- <p class="center">
            <img class="img-g" alt="" src="../../images/0086-1.jpg" />
          </p> -->
          <div class="videoBox">
            <div class="videoItem">
              <video
                :src="videoUrl.v31"
                webkit-playsinline="true"
                x-webkit-airplay="true"
                playsinline="true"
                x5-video-orientation="h5"
                x5-video-player-fullscreen="true"
                x5-playsinline=""
                controls
                class="video-border w100"
              ></video>
              <div class="vname">{{ videoMd5.v31.name }}</div>
            </div>
          </div>
          <!-- <p class="img">小班角色游戏</p> -->
          <p>（1）小班幼儿角色游戏的特点</p>
          <p>
            小班幼儿的无意注意占优势，直觉行动思维仍然是主要的思维方式，所以小班幼儿角色游戏对玩具的依赖性最强，通常是眼前有什么玩具就选择什么玩具、玩什么游戏，离开了眼前的玩具，游戏也就停止了。幼儿对玩具的运用主要是依据玩具的刺激性特点，不是自己真的喜欢玩某个游戏。也就是说，是玩具刺激他们开始游戏活动。小班幼儿缺乏游戏活动的目的性，喜欢模仿，看到周围人玩什么玩具、做什么游戏，就会舍弃自己手中的玩具，终止游戏活动，转而跑去玩和别人一样的游
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="75">
      <div v-if="showPageList.indexOf(75) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            戏。小班幼儿处于独自游戏和平行游戏的高峰阶段，喜欢和同伴玩相同或者相似的游戏。他们没有自己明确的游戏目的，没有游戏的发起者和组织者，游戏角色不明，同伴之间往往没有什么交往，如果有也是简单的观看或互借玩具的简单交流，如“我的娃娃想喝奶了，给我一袋酸奶吧”，游戏情节十分简单，游戏水平比较低。例如，小班幼儿看到娃娃便抱着娃娃玩过家家，看到小药瓶就玩医院游戏，等等。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·考点预测</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="../../images/tb-1.png" /></p>
              </div>
            </div>
            <p>
              根据各年龄班游戏特点和水平差异，谈谈如何组织幼儿开展角色游戏。
            </p>
            <div class="bk-xyx">
              <textarea
                rows="6"
                v-model="questionData.textBybItem44"
                @change="setBookQuestion"
              ></textarea>
            </div>
          </div>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·真题再现</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="../../images/tb-1.png" /></p>
              </div>
            </div>
            <p class="center"><b>2018年下半年《保教知识与能力》单选题</b></p>
            <p>
              小班同一个“娃娃家”中，常常出现许多“妈妈”在烧饭，每位幼儿都感到很满足。这反映小班幼儿游戏行为特点是（　　）。
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer04.isComplete"
                value="A"
                id="1"
                @change="changeRadio($event, 'aswer04', 'check01')"
                v-model="questionData.aswer04.check01"
              />A.喜欢模仿
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer04.isComplete"
                value="B"
                id="1"
                @change="changeRadio($event, 'aswer04', 'check02')"
                v-model="questionData.aswer04.check02"
              />B.喜欢合作
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer04.isComplete"
                value="C"
                id="1"
                @change="changeRadio($event, 'aswer04', 'check03')"
                v-model="questionData.aswer04.check03"
              />C.协调能力差
            </p>
            <p>
              <input
                type="checkbox"
                name="ball5"
                :disabled="questionData.aswer04.isComplete"
                value="D"
                id="1"
                @change="changeRadio($event, 'aswer04', 'check04')"
                v-model="questionData.aswer04.check04"
              />D.角色意识弱
            </p>
            <!-- <p>（答案：A）</p> -->
            <p v-if="questionData.showAswer04">（答案：A）</p>

            <div class="btn-group">
              <div v-if="questionData.aswer04.isComplete">
                <span class="answerText"
                  >您的答案：{{ questionData.aswer04.data.join(",") }}</span
                >
                <span class="answerText" style="color: #1fbc1f"
                  >正确答案：A</span
                >
              </div>
              <div v-else></div>
              <div>
                <button
                  class="btn btn-default"
                  @click="setBookQuestion('aswer04')"
                >
                  提交
                </button>
                <button
                  class="btn btn-default"
                  @click="resetAswer('aswer04', 'showAswer04')"
                >
                  重做
                </button>
                <button
                  class="btn btn-default"
                  @click="lookAnswer('showAswer04')"
                >
                  查看答案
                </button>
              </div>
            </div>
          </div>
          <p>（2）小班幼儿角色游戏指导</p>
          <p>
            针对小班幼儿生活经验比较少、平行游戏居多的实际情况，教师要做出相应的组织指导。教师需要为幼儿提供种类少、数量多且性质相似的成品玩具，以确保每个幼儿都能拥有玩具，避免因玩具短缺而发生争吵甚至攻击。教师以游戏角色身份参与到幼儿游戏中，用游戏角色的口吻来指导幼儿游戏。小班幼儿角色游戏的目的不明，缺少主题引领，教师有必要帮助幼儿确定游戏主题，分配角色，调动、挖掘幼儿的生活印象，明确角色的活动内容。同时，教师要注意引导他们多与同伴进行游戏主题内部和各游戏主题之间的交往。小班幼儿的规则意识淡薄，在角色游戏中教师要注意培养他们游戏的常规意识。
          </p>
          <div class="bk">
            <div class="bk1">
              <p><span class="bj2">幼儿园教师资格证考试·考点预测</span></p>
              <div class="tp-2">
                <p><img class="rwmb-1" alt="" src="../../images/tb-1.png" /></p>
              </div>
            </div>
            <p>
              小班区域活动开始了，小娜和嘉祺迅速来到娃娃家。小娜当妈妈，像往常一样给娃娃喂饭、梳头；嘉祺则坐在沙发上看手机。两个人没有什么交流，各自沉浸在自己的活动中。根据以上材料，说明教师如何引导小班幼儿开展角色游戏。
            </p>
            <div class="bk-xyx">
              <textarea
                rows="6"
                v-model="questionData.textBybItem55"
                @change="setBookQuestion"
              ></textarea>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="76">
      <div v-if="showPageList.indexOf(76) > -1">
        <div class="bodystyle">
          <p class="left"><span class="bj2">指导案例</span></p>
          <div class="tp-5">
            <p><img class="rwmb-1" alt="" src="../../images/tb-5.png" /></p>
          </div>
          <p class="center"><span class="zt-ls1">娃娃家（小班）</span></p>
          <p><b>观察指导</b></p>
          <p>
            莎莎今天是娃娃家的妈妈，她一进娃娃家，就忙活起来。一边拿起小炒锅，一边说“今天我给你们做好吃的”。妈妈在忙着做饭，在炒锅放入一些彩色纸条和一些猪肉；奶奶哄着娃娃坐在一边；爸爸走到这里看看又走去那边瞧瞧，似乎没什么可以做的事；爷爷在奶奶旁边的椅子上坐着，偶尔看看娃娃。过了一会儿，爸爸又跑出娃娃家，不知道去哪里了。爷爷感觉自己没意思，说：“妈妈做好吃的，做好了吗？我都饿了。”似乎孩子们在娃娃家就是做饭哄孩子，而这些往往多是由女孩子完成的；男孩子在娃娃家似乎总是找不到自己可以做的事情。小班娃娃家的内容显得单一，无法展开。
          </p>
          <p>
            老师出现在娃娃家门口，当当当，当当当，敲开娃娃家的门，这时奶奶放下孩子来开门，爷爷抱起娃娃，扮妈妈的莎莎放下炒锅请老师坐下，还给老师倒水，老师说：“我是你们家邻居，今天我忘记带家里钥匙了，进不去门，想请你家爸爸帮我把门弄开。”爷爷连忙找爸爸：“快点去帮忙啊，要不客人进不去家门啦。”老师说看看小桌子摆的很多食物，说：“哇，你家这么多好吃的啊！”妈妈说：“是啊，我做了好多好吃的呢，锅里还有。要不我们一起坐下来吃吧？反正你也进不去家，我做了好吃的，在我家吃饭吧。”接下来老师扮演的邻居和娃娃家的成员一起吃饭。邻居一看爷爷把娃娃放在了床上急忙说：“你家娃娃也吃点饭吧，她一定也饿了。”演妈妈的莎莎喂娃娃吃东西，边喂边说：“娃娃不好好吃饭，奶奶来喂吧。”这时奶奶放下手里的塑料碗，过来抱起娃娃开始喂饭。奶奶拿起小勺喂起来，一边喂还一边说：“快点吃！”
          </p>
          <!-- <p>
            <b
              >附图<a id="w6"></a
              ><a href="chapter003.html#m6"><sup>[6]</sup></a></b
            >
          </p> -->
          <div class="imgBox-003 openImgBox">
            <div class="swiper-container swiper-img">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../images/0088-1-1.png" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../images/0088-1-2.png" />
                  </div>
                </div>
              </div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
          <!-- <p class="center">
            <img class="img-b" alt="" src="../../images/0088-1.jpg" />
          </p> -->
          <p><b>分析</b></p>
          <p>
            小班娃娃家里，幼儿的分工还较明确，但却缺乏游戏情节。虽然在游戏分享
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="77">
      <div v-if="showPageList.indexOf(77) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            时，幼儿都会讲爸爸妈妈、爷爷奶奶平时在家会做些什么，但游戏时，又显得没事可做。于是老师适时介入游戏，作为娃娃的邻居到她家请爸爸帮忙，并在娃娃家做客。在老师的建议引导下，幼儿开展了一家人请邻居吃饭、喂娃娃吃饭、收拾整理碗筷、洗碗、帮邻居开门等一系列活动。教师的引导让幼儿增加了更多的游戏情节，游戏分享时，他们讲得特别高兴，其他幼儿听得也特别认真。
          </p>
          <h5 id="e054">2.中班幼儿角色游戏组织与指导</h5>
          <p>（1）中班幼儿角色游戏的特点</p>
          <p>
            经过幼儿园小班一年的学习生活，中班幼儿的生活经验越来越丰富，语言表达能力不断提高，幼儿之间的同伴关系也比较融洽，游戏持续时间比较长。此阶段的幼儿角色游戏主题丰富，涉及生活的各个领域，如商店、医院、超市、银行、理发店、邮局等；但是游戏主题不够稳定，时常出现频繁更换游戏的现象。例如，有的幼儿本来在娃娃家当妈妈做饭，但是看到小医院人多热闹，就跑去医院，而忘记自己的角色职责。相对于小班幼儿角色游戏，中班幼儿角色游戏的目的性比较强，情节得到丰富发展，角色意识较强，角色刻画比较深入，游戏角色有归属感。幼儿之间的交流愿望增强，但交流能力有限；幼儿有了简单的规则意识，但不太会处理与其他幼儿之间的纠纷，经常出现一些争执冲突、告状等现象。
          </p>
          <p>（2）中班幼儿角色游戏指导</p>
          <p>
            首先是玩具材料的提供上。在为幼儿提供成型玩具的基础上，适当投放一些半成品材料，如旧纸盒、化妆品瓶子、纸片、废旧的破皮球、花生壳、毛线团、泡沫等，幼儿可以根据主题需要挖掘废旧材料的游戏功能，同时满足并激发幼儿创造想象的愿望。此外，对幼儿游戏的指导，以平行游戏和合作游戏的方式为佳。指导重点是帮助幼儿拓宽游戏主题，学习分配角色，设计游戏情节，引导幼儿制定并遵守游戏规则。教师要善于观察幼儿游戏进程，及时发现幼儿发生纠纷的原因，引导幼儿逐渐学会自己处理冲突。在游戏结束环节，教师提示幼儿收拾游戏场地，将玩具材料归位。
          </p>
          <p class="left"><span class="bj2">指导案例</span></p>
          <div class="tp-5">
            <p><img class="rwmb-1" alt="" src="../../images/tb-5.png" /></p>
          </div>
          <p class="center"><span class="zt-ls1">贝贝烧烤城 （中班）</span></p>
          <p><b>观察指导</b></p>
          <p>
            “贝贝烧烤城”是中一班孩子非常喜欢的一个角色游戏。根据幼儿的需要，现在烧烤城的食品有猪肉、牛肉、羊肉串、馒头片、面筋、大蒜和其他蔬菜等。很多幼儿都喜欢参与贝贝烧烤城的游戏，摆弄这些形象逼真的材料。今天下午区域活动时，王佳选择了贝贝烧烤城游戏，卖起了烤羊肉串。游戏中，他发现负责穿串的浩森离开了，自己没有肉串可以烤，就跑去摆弄穿肉串的竹签和各种调料，越玩越觉
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="78">
      <div v-if="showPageList.indexOf(78) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            得开心，忘记了自己的岗位是烤羊肉串。不一会儿，浩森回来了，与王佳争执起来。因为王佳摆弄竹签和调料正起劲不愿意离开，让浩森去卖羊肉串，一直在串肉串的李楠不愿意，他急红了脸据理力争，对浩森和王佳说：“我才是串羊肉串的，你俩是卖肉串的，我先来的。”王佳还是不情愿，说：“那我们一会儿换换好吧？”李楠说：“我不换，我先来的。”李楠说着看看浩森和王佳，当他看到两人特别是王佳可怜兮兮的样子时，说：“嗯，那要不这样吧，我们石头、剪刀、布，谁输了就去卖肉串。”三个人都同意了。王佳输了，他只好回到卖羊肉串的岗位。
          </p>
          <p><b>分析与思考</b></p>
          <p>
            游戏进行到一定的时间，在同一游戏中出现了不同的角色，而各角色应有自己不同的职责。观察中，幼儿之间因为“你该做什么，我该做什么”发生争吵，这说明幼儿的游戏在进步。在之前的游戏中，幼儿游戏的角色少、不稳定，没有明确的角色分工。随着游戏的逐步开展，游戏角色增加了、游戏的情节丰富了，幼儿常常受游戏材料和参与游戏人数等因素的影响而离开自己当前的角色，去扮演比较有兴趣的角色，有时参与到其他游戏，甚至强占他人的角色。这些现象的出现告诉教师，幼儿的游戏需要规则，需要明确的角色分工，幼儿在游戏中必须明确自己的角色、履行自己的角色职责。
          </p>
          <p><b>实施措施</b></p>
          <p>
            1.教师和幼儿讨论：“在角色游戏中，怎样才能让别人一看就知道自己是做什么工作的？”鼓励幼儿与教师共同想办法，制作标志如牌子、图片、服装等，表现相应的角色。
          </p>
          <p>
            2.根据幼儿讨论，为幼儿提供不同的服饰，帮助幼儿明确自己和同伴的角色。
          </p>
          <p>
            3.游戏中，有意识地询问幼儿，“你今天玩的什么游戏？你扮演什么角色？这个角色的任务是什么？”让幼儿回答：“今天我是××，我的任务是……”
          </p>
          <p>
            4.游戏中教师随时观察，发现幼儿离开岗位时可以以游戏角色的身份参与游戏，间接引导幼儿回归游戏角色。例如，王佳是因为没有人买羊肉串才离开的，教师观察后可以扮演买肉串的顾客：“哎呀，谁是卖羊肉串的啊？我要买羊肉串啊！”这时王佳意识到自己的岗位是卖肉串，自然会回到自己的岗位上。
          </p>
          <p>
            教师随时观察幼儿游戏情况，及时帮助幼儿明确自己的角色与职责，在游戏时能自始至终不离开游戏岗位。
          </p>
          <p><b>活动反思</b></p>
          <p>
            角色的分工以及角色职责都应从幼儿的游戏中来，教师在游戏观察的基础上组织幼儿讨论、确定游戏角色的分工以及角色职责。在幼儿游戏过程中关注每一位幼儿是教师工作的重要一环，当幼儿发生困惑、疑虑、争执的时候，教师都要及时地给予帮助和鼓励。因为幼儿游戏水平的不断提高除了需要幼儿自我的积极探索外，更需要教师去引导和推进。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="79">
      <div v-if="showPageList.indexOf(79) > -1">
        <div class="bodystyle">
          <div class="imgBox-003 openImgBox">
            <div class="swiper-container swiper-img">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../images/0091-1-1.png" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../images/0091-1-2.png" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../images/0091-1-3.png" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../images/0091-1-4.png" />
                  </div>
                </div>
              </div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
          <h5 id="e055">3.大班幼儿角色游戏组织与指导</h5>
          <!-- <p class="center">
            <img class="img-g" alt="" src="../../images/0091-2.jpg" />
          </p> -->
          <div class="videoBox">
            <div class="videoItem">
              <video
                :src="videoUrl.v32"
                webkit-playsinline="true"
                x-webkit-airplay="true"
                playsinline="true"
                x5-video-orientation="h5"
                x5-video-player-fullscreen="true"
                x5-playsinline=""
                controls
                class="video-border w100"
              ></video>
              <div class="vname">{{ videoMd5.v32.name }}</div>
            </div>
          </div>
          <p>（1）大班幼儿角色游戏的特点</p>
          <p>
            大班幼儿的生活经验日益丰富，角色游戏水平也日益提高。游戏主题广泛新颖，往往与幼儿的社会生活紧密联系，反映的人际关系也较为复杂。大班幼儿角色游戏处于合作游戏阶段，喜欢和同伴一起游戏，而且通常有比较固定的玩伴。游戏的目的性较强，合作水平高，会分配游戏角色，并能较好地扮演角色，游戏情节也更为丰富。游戏的规则意识较强，而且对自我游戏水平和他人游戏水平有一定的评价能力。
          </p>
          <p>（2）大班幼儿角色游戏指导</p>
          <p>
            大班幼儿角色游戏指导的重点应放在培养他们独立开展游戏的能力上，包括独立确定游戏主题、自主布置游戏场地、准备游戏玩具材料、商定如何分配角色、设计游戏情节、制订游戏规则、独立解决游戏中遇到的困难和各种冲突、自制玩具等。教师可以多用提问、建议引导幼儿游戏。教师要注意随时观察幼儿游戏的活动进程，及时为幼儿提供游戏机会和创设游戏条件；引导幼儿在游戏中进行更多更深入的沟通，以便反映现实生活中更复杂的社会关系；鼓励幼儿参与游戏评价，充分讨论问题，分享游戏经验，促进幼儿初步分析与解决问题的能力的提高。
          </p>
          <p class="left"><span class="bj2">指导案例</span></p>
          <div class="tp-5">
            <p><img class="rwmb-1" alt="" src="../../images/tb-5.png" /></p>
          </div>
          <p class="center"><span class="zt-ls1">爱心诊所 （大班）</span></p>
          <p><b>观察指导</b></p>
          <p>
            “爱心诊所”里有个“治疗床”，在这里护士给病人打针，医生给病人治病检
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="80">
      <div v-if="showPageList.indexOf(80) > -1">
        <div class="bodystyle">
          <p class="notIndent">
            查，给伤者做手术。今天的值班医生是佳宝，佳宝天天乐呵呵的，小朋友们都喜欢和他一起玩。今天来到手术室排队的人特别多。
          </p>
          <p>
            伟业抢先排在第一个，手里拿着一张“挂号单”，递给了佳宝，因为人太多，佳宝着急没看挂号单，就往废纸篓子一扔，说：“上去吧。”伟业马上爬上了铺着白单子的手术床。佳宝医生找了一根雪糕棍拿在手里当作手术刀，在伟业身上比画了几下，没一会儿就给伟业做完了手术，说：“好了。”伟业立即跳下了手术床，高兴地一蹦一跳地去玩别的游戏了。排队的幼儿大多拿着挂号单，脸上表情很开心，没有一丝痛苦的样子。
          </p>
          <p><b>分析</b></p>
          <p>
            角色游戏的每个主题都有一定的内隐规则。游戏规则中规定幼儿要先到挂号处挂号，然后去“医生门诊”那儿看病，需要做手术的病人必须持有医生给的手术卡片卡才能到手术床上去找医生做手术，而大多数幼儿没有遵守游戏规则。因为生活中，幼儿看病时大多数是吃药、打针、打点滴，很少手术，所以对手术治疗非常感兴趣，一个个都往那儿跑，加上此游戏是刚刚玩，幼儿对自己的角色把握得不是很好。而且幼儿做手术完全没有痛苦表情，反而都是开心的，做完手术马上蹦跳走开了。
          </p>
          <p><b>反思</b></p>
          <p>
            在组织幼儿游戏时，教师往往急于求成，摆出游戏的道具，讲解完游戏的规则，就让幼儿自由地游戏了，由此在游戏活动中产生了很大的问题：幼儿玩游戏没有深度，对游戏不理解，把道具当作玩具玩，等等。这需要教师把每一步工作做细、做到位，从幼儿对角色的理解模仿到道具的使用及整个参与过程，教师都要十分重视并加以引导。此次游戏后，教师仔细地向幼儿讲解了游戏规则，让幼儿认真体会病人与医生的表情、动作等，在第二次小医院活动中，情况有了很大的好转。
          </p>
          <div class="imgBox-003 openImgBox">
            <div class="swiper-container swiper-img">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../images/0092-1.png" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../images/0092-2.png" />
                  </div>
                </div>
                <div class="swiper-slide">
                  <div class="imgBox" style="width: 100%; height: 100%">
                    <img src="../../images/0092-3.png" />
                  </div>
                </div>
              </div>
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>
          </div>
          <!-- <p class="center">
            <img class="img-b" alt="" src="../../images/0092-1.jpg" />
          </p> -->
        </div>
      </div>
    </div>
    <div class="page-box" page="81">
      <div v-if="showPageList.indexOf(81) > -1">
        <div class="bodystyle">
          <div class="bk2">
            <p class="center"><b>本章小结</b></p>
            <p>
              1.角色游戏是幼儿期最为活跃的游戏，作为幼儿教师要重视角色游戏在幼儿发展中的重要价值，要充分了解角色游戏的特点和结构，积极为幼儿开展角色游戏创造条件，依据各年龄班的不同特点，科学合理地指导幼儿角色游戏的开展，真正发挥角色游戏对幼儿成长的价值。
            </p>
            <p>
              2.角色游戏是幼儿期最受欢迎的游戏之一。角色游戏是指幼儿根据自己的兴趣和意愿，通过扮演角色，运用想象和模仿，创造性地反映个人生活印象的一种游戏，又称为主题角色游戏。
            </p>
            <p>
              3.角色游戏具有自身特点。主要包括自主性、社会性、创造性、表征性。幼儿角色游戏过程的假想会出现以人代人、以物代物、以物代人、以人代物等表征特点。
            </p>
            <p>
              4.角色游戏作为幼儿喜欢的创造性游戏具有多种功能。角色游戏能够促进幼儿认知的发展，一是社会性认知的发展，二是对环境中替代物的认知发展。“以物代物”是幼儿角色游戏开展不可或缺的。角色游戏有助于幼儿社会性的发展。角色游戏还能够促进幼儿语言交流能力的发展，有助于培养幼儿良好的个性品质，有助于培养幼儿积极的情绪与情感。
            </p>
            <p>
              5.角色游戏有一定的结构。角色游戏有游戏主题，角色扮演，假想（包括对游戏材料和物品的假想、对游戏角色动作和情节的假想），内在规则。
            </p>
            <p>
              6.教师应注意做好幼儿角色游戏的指导工作。角色游戏的指导主要是丰富幼儿的生活经验；为幼儿提供角色游戏的基本条件（包括时间、空间和游戏材料等）；尊重幼儿的游戏意愿，鼓励幼儿确定主题、分配角色；鼓励幼儿学会分配角色；适时参与到游戏中，促进幼儿游戏情节的发展；选择时机自然愉快地结束游戏。
            </p>
            <p>
              7.幼儿年龄不同，教师指导方法也各有区别。幼儿年龄不同，生活经验不同，幼儿游戏层次和水平也有区别。例如，小班的角色游戏多以简单动作模仿为主，中班幼儿的角色游戏主题丰富，大班幼儿的角色游戏则以创造为主。教师需要根据实际情况，针对各年龄班做出相应指导。
            </p>
          </div>
          <p><span class="zt-1">关键术语</span></p>
          <div class="tp-8">
            <p><img class="rwmb-3" alt="" src="../../images/tb-9.png" /></p>
          </div>
          <p class="notIndent">1、角色游戏</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="questionData.textBybItem61"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">2、游戏主题</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="questionData.textBybItem62"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">3、角色扮演</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="questionData.textBybItem63"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="notIndent">4、假想</p>
          <div class="bk-xyx">
            <textarea
              rows="1"
              v-model="questionData.textBybItem64"
              @change="setBookQuestion"
            ></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="82">
      <div v-if="showPageList.indexOf(82) > -1">
        <div class="bodystyle">
          <p>
            <span class="zt-2">思</span><span class="zt-3">考</span
            ><span class="zt-2">题</span>
          </p>
          <div class="tp-9">
            <p><img class="rwmb-6" alt="" src="../../images/tb-10.png" /></p>
          </div>
          <p><b>一、简答题</b></p>
          <p>1.举例说明角色游戏的特点。</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="questionData.textBybItem70"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>2.角色游戏对幼儿发展的功能表现在哪些方面？</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="questionData.textBybItem71"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>3.角色游戏由哪几部分构成？</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="questionData.textBybItem72"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>4.幼儿角色游戏的一般指导方法包括哪些内容？</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="questionData.textBybItem73"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p><b>二、论述题</b></p>
          <p>结合各年龄幼儿的不同特点，说明如何指导幼儿进行角色游戏。</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="questionData.textBybItem74"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="left"><span class="bj4">实训练习</span></p>
          <p>1.观察记录某一年龄班幼儿的角色游戏以及教师对游戏的指导情况。</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="questionData.textBybItem75"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>2.结合见习、实习，尝试指导某一年龄班的一个角色游戏。</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="questionData.textBybItem76"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p>3.生活中观察一幼儿角色游戏活动，并分析角色游戏的特点、构成。</p>
          <div class="bk-xyx">
            <textarea
              rows="6"
              v-model="questionData.textBybItem77"
              @change="setBookQuestion"
            ></textarea>
          </div>
          <p class="left1"><b>拓展练习</b></p>
          <div class="tp-10">
            <p><img class="rwmb-6" alt="" src="../../images/tb-12.png" /></p>
          </div>
          <p>以下为部分教师资格证考试笔试真题及面试真题，可扫描二维码观看。</p>
          <!-- <p class="center">
            <img class="img-g" alt="" src="../../images/0094-1.jpg" />
          </p> -->
          <div class="questionBox">
            <div class="titleBox">
              <span class="title">笔试真题</span>
              <img
                src="../../images/ti-icon.png"
                @click="openQuestion(1)"
                alt=""
              />
            </div>
            <div class="questionContent" v-if="questionData.showQuestion01">
              <div class="q-title">幼儿园教师资格考试·真题再现</div>
              <p class="q-tips">2013 年下半年《保教知识与能力》活动设计题</p>
              <p>
                中二班幼儿在娃娃家游戏中，接待“客人”主动热情，与长辈交往很有礼貌，可家长却说，孩子在家不是这样的，有客人来了很少打招呼，还经常对爷爷奶奶发脾气。
              </p>
              <p>
                请针对上述幼儿行为的反差，设计解决这一问题的方法。<button
                  class="btn btn-default"
                  @click="lookAnswer('showAswer05')"
                >
                  显示答案
                </button>
              </p>
              <p>（1）写出问题的原因分析。</p>
              <div class="bk-xyx">
                <textarea
                  rows="6"
                  v-model="questionData.textBybItem78"
                  @change="setBookQuestion"
                ></textarea>
              </div>
              <p>（2）教学目标。</p>
              <div class="bk-xyx">
                <textarea
                  rows="6"
                  v-model="questionData.textBybItem79"
                  @change="setBookQuestion"
                ></textarea>
              </div>
              <p>（3）教育指导内容、方法。</p>
              <div class="bk-xyx">
                <textarea
                  rows="6"
                  v-model="questionData.textBybItem80"
                  @change="setBookQuestion"
                ></textarea>
              </div>
              <div v-if="questionData.showAswer05" class="questionAswer">
                <p><b>【参考答案】</b></p>
                <p>（1）原因分析：</p>
                <p>
                  ①由孩子的心理特点所决定。孩子年幼，自控能力差，对家长有强烈的依赖心理。
                </p>
                <p>
                  ②由家长自身的原因造成。溺爱孩子，对他们放松要求；保护过多，对孩子包办代替；教育方法不得当；忽视了家庭与幼儿园教育的一致性。
                </p>
                <p>
                  ③由于幼儿园教师在相关领域活动中没有加强幼儿园教育影响的一致性和连贯性，欠缺和家长的沟通工作。
                </p>
                <p>（2）教学目标：</p>
                <p>①在游戏中，初步认识与人礼貌交往的重要性。</p>
                <p>
                  ②在打电话的游戏中，学习日常的礼貌用语，知道在家里和幼儿园应该同样懂礼貌，培养良好的人际交往能力和习惯。
                </p>
                <p>（3）教育指导内容：</p>
                <p>①学说礼貌用语。</p>
                <p>②提高人际交往能力。</p>
                <p>③家园保持一致。</p>
                <p style="margin-bottom: 30px">具体活动设计如下。</p>
                <div>
                  <p class="block" style="text-align: center">
                    小猴打电话——中班社会交往活动
                  </p>
                  <p class="block-tips">活动准备</p>
                  <p class="block">1．玩具小猴一个。</p>
                  <p class="block">2．故事动画《小猴打电话》。</p>
                  <p class="block">3．玩具电话四台。</p>
                  <p class="block">4．小猴、小熊、小鸭、小兔头饰若干。</p>
                  <p class="block">5．歌曲：《我们从小有礼貌》。</p>
                  <p class="block-tips">活动过程</p>
                  <p class="block">
                    1.谈话导入：孩子们，平时你们都喜欢和谁打电话？打电话时你都和他说些什么？你是怎样说的？
                  </p>
                  <p class="block">2.出示玩具小猴，进入课题。</p>
                  <p class="block">
                    教师：今天，小猴豆豆特别高兴，因为他搬新家了，他要给他的好朋友打电话，邀请他们来家里玩。我们来看看他是怎样打电话的。
                  </p>
                  <p class="block">
                    （1）播放故事动画《小猴打电话》，使幼儿感知没礼貌的后果。
                  </p>
                  <p class="block">
                    （2）教师提问：①小猴都给哪些好朋友打电话了？②他的好朋友来了吗？为什么没有来？
                  </p>
                  <p class="block">
                    （3）小结：小猴豆豆在电话里说话不礼貌，所以朋友们都不理睬他。
                  </p>
                  <p class="block">
                    （1）过渡语：小伙伴们都不肯来，小猴豆豆可难过了，他多想让伙伴们来玩呀。于是第二天，小猴豆豆又给小伙伴们打电话了。这一次老师要请小朋友们来教豆豆打有礼貌的电话了。小朋友们想一想，该怎样打呢？
                  </p>
                  <p class="block">
                    （2）教师示范游戏：教师戴小猴头饰，用礼貌用语给小熊打电话（让配班教师当小熊戴小熊头饰）（“喂！您好，您是小熊吗？请到我家来玩，好吗？”“好的，谢谢您。再见。”）
                  </p>
                  <p class="block">
                    （3）教师请个别幼儿模仿游戏：请两名幼儿自由选择当小猴和小鸭，用礼貌语打电话。（游戏进行若干次，让幼儿都能用礼貌用语接打电话。）
                  </p>
                  <p class="block">
                    （4）分组游戏：全班幼儿分成四组，每组有一台电话、一个小猴的头饰和若干个小熊、小鸭、小兔的头饰。每次每组有一位扮演小猴的小朋友打电话，打给谁就由谁接电话，教师巡回指导。
                  </p>
                  <p class="block">
                    4.提问讨论：小朋友，你们帮小猴豆豆变得有礼貌了，你们自己在幼儿园、在家里该怎样做有礼貌的孩子呢？（幼儿发言，教师给予鼓励）
                  </p>
                  <p class="block">5.启发提问：</p>
                  <p class="block">
                    （1)小朋友上幼儿园时，见了老师该怎么说？和妈妈分手时该怎么说？
                  </p>
                  <p class="block">
                    （2）平时在遇到熟悉的长辈时，你该怎样做？怎样说？
                  </p>
                  <p class="block">（3）当小朋友帮助了你时，你该怎样说？</p>
                  <p class="block">
                    （4）当你不小心碰疼了朋友时，你该怎样说？如果朋友碰了你时,你又该怎样说呢？
                  </p>
                  <p class="block">6.音乐欣赏：歌曲《我们从小有礼貌》。</p>
                  <p class="block">7.活动延伸。</p>
                  <p class="block">
                    在家里，家长指导幼儿用礼貌用语给亲人和朋友打电话。
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- <p class="center">
            <img class="img-g" alt="" src="../../images/0094-2.jpg" />
          </p> -->
          <div class="questionBox">
            <div class="titleBox">
              <span class="title">面试真题</span>
              <img
                src="../../images/ti-icon.png"
                @click="openQuestion(2)"
                alt=""
              />
            </div>
            <div class="questionContent" v-if="questionData.showQuestion02">
              <div class="q-tips">面试训练营</div>
              <p class="block-ms-tips">面试真题 1</p>
              <p>1.题目：该怎么付钱。</p>
              <p>
                2.内容：教师为大班的超市游戏提供了自制的钱（1 元、2 元、5
                元等），并为每件商品标上了价钱，想让幼儿在买卖游戏中运用所学的教学知识。可她却发现幼儿在游戏的时候，仍随便付钱，收银员也随便收钱。
              </p>
              <p>3.基本要求：</p>
              <p>
                （1）回答问题：教师可以怎样引导幼儿利用钱币玩超市游戏？请想出两种方法。
              </p>
              <p>（2）模拟演示：</p>
              <p>①教师介入指导幼儿使用钱币玩游戏的一种方法。</p>
              <p>②要求语言清晰，语调柔和，便于幼儿接受。</p>
              <p>（3）请在 10 分钟内完成上述任务。</p>
              <p class="block-ms-tips">面试真题 2</p>
              <p>1.题目：医院游戏。</p>
              <p>
                2.内容：大班游戏开始了，医院里很多病人，大家吵吵闹闹，影响了其他幼儿游戏。教师看到以后，大声训斥道：“你们听听你们的声音，别人还能游戏吗？”接着幼儿纷纷离开了游戏。
              </p>
              <p>
                3.基本要求：（1）回答问题：你是否赞同案例中教师解决幼儿吵闹的方法？为什么？
              </p>
              <p>（2）模拟演示：</p>
              <p>①你如何处理上面这个医院游戏中出现的问题，请演示你的方法。</p>
              <p>②要求语气亲切自然，表达明白易懂，易于幼儿理解。</p>
              <p>（3）请在 10 分钟内完成上述任务。</p>
              <p class="block-ms-tips">面试真题 3</p>
              <p>1.题目：斑马线。</p>
              <p>
                2.内容：中班下学期角色游戏，成成当司机，发现没有斑马线，就裁了一些纸条，一条条粘在地上当斑马线，他对周围的幼儿说：“行人过马路只能走斑马线”，可是没人理他，大家还是随意走来走去的。一会儿，斑马线就乱了，他很着急……
              </p>
              <p>
                3.基本要求：（1）回答问题：如果你是老师，遇到这种情况你会怎么办?请列举两种方法。
              </p>
              <p>（2）模拟演示：</p>
              <p>①请选取一种方法，模拟演示介入游戏指导。</p>
              <p>②说出你采用这种方法的理由。</p>
              <p>（3）请在 10 分钟内完成上述任务。</p>
              <p>
                （4）回答问题：如果你是老师，遇到这种情况你会怎么办?请列举两种方法。
              </p>
              <p class="block-ms-tips">面试真题 4</p>
              <p>1.题目：没人玩。</p>
              <p>
                2.内容：角色游戏的时候，教师发现中班的医院没有人玩，超市也没有营业员，大家都拥挤到了娃娃家和饮食店里了。
              </p>
              <p>3.基本要求：</p>
              <p>
                （1）回答问题：遇到这种情况，教师该如何指导？请说出 3 种方法。
              </p>
              <p>（2）模拟演示：</p>
              <p>模拟演示一种方法，对上述游戏进行指导。</p>
              <p>要求语言清晰，语义明了。</p>
              <p>（3）请在 10 分钟内完成上述任务。</p>
              <p class="block-ms-tips">面试真题 5</p>
              <p>1.题目：谁也不认识谁。</p>
              <p>
                2.内容：小班娃娃家。欣欣正忙着给娃娃穿衣服，东东忙着煮饭，宁宁呆呆地坐在沙发上。老师走过去问欣欣：你是谁呀？欣欣答：我是妈妈。老师又问：那他们两个是谁呀？欣欣摇摇头，说不知道。老师又问沙发上的宁宁，你知道他们是娃娃家的什么人吗？宁宁也摇摇头表示不知道。
              </p>
              <p>3.基本要求：</p>
              <p>（1）回答问题：</p>
              <p>案例反映了幼儿什么样的游戏水平？</p>
              <p>遇到这样的情况，你会怎么指导？</p>
              <p>（2）模拟演示：</p>
              <p>介入指导幼儿游戏，让幼儿互相了解所扮演的角色。</p>
              <p>要求语调柔和，语气自然。</p>
              <p>（3）请在 10 分钟内完成上述任务。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapter002",
  props: {
    showPageList: {
      type: Array,
    },
  },
  data() {
    return {
      questionData: {
        isComplete: false,
        showAswer01: false,
        showAswer02: false,
        showAswer03: false,
        showAswer04: false,
        showAswer05: false,
        aswer01: {
          data: [],
        },
        aswer02: {
          data: [],
        },
        aswer04: {
          data: [],
        },
        showQuestion01: true,
        showQuestion02: true,
      },
      videoUrl: {},
      videoMd5: {
        v31: {
          md5: "faaf41f2f32e31511eb9cb7f576a66fb",
          name: "小班角色游戏",
        },
        v32: {
          md5: "1dbc323ca1b6879e4294da0c4d660767",
          name: "大班角色游戏",
        },
      },
    };
  },
  created() {
    const bookQuestion = localStorage.getItem(
      "preschoolGameGuidance-book-chapter01"
    );
    if (bookQuestion) {
      this.questionData = JSON.parse(bookQuestion);
    }
  },
  methods: {
    async getVideo(md5, val) {
      const data = await getResourcePath(md5);
      this.videoUrl[val] = data;
    },
    setBookQuestion(val) {
      if (val) {
        this.questionData[val].isComplete = true;
      }
      localStorage.setItem(
        "preschoolGameGuidance-book-chapter01",
        JSON.stringify(this.questionData)
      );

      const bookQuestion = localStorage.getItem(
        "preschoolGameGuidance-book-chapter01"
      );
      if (bookQuestion) {
        this.questionData = JSON.parse(bookQuestion);
      }
    },
    lookAnswer(val) {
      this.questionData[val] = !this.questionData[val];
      console.log(this.questionData);
    },
    resetAswer(val1, val2) {
      this.questionData[val1] = {};
      this.questionData[val2] = false;
      this.questionData[val1].isComplete = false;
      this.questionData[val1].data = [];
    },
    openQuestion(val) {
      this.questionData["showQuestion0" + val] =
        !this.questionData["showQuestion0" + val];
    },
    changeRadio(e, val, val2) {
      this.questionData[val][val2] = e.target.checked;
      if (this.questionData[val][val2]) {
        this.questionData[val].data.push(e.target.value);
      } else {
        const str = e.target.value;
        this.questionData[val].data = this.questionData[val].data.filter(
          (item) => item !== str
        );
      }
    },
  },
  mounted() {
    for (let key in this.videoMd5) {
      this.getVideo(this.videoMd5[key].md5, key);
    }
  },
};
</script>

 src/books/preschoolGameGuidance/view/components/front001.vue

New file
@@ -0,0 +1,279 @@
<!-- eslint-disable no-irregular-whitespace -->
<template>
  <div class="chapter" num="1">
    <div class="page-box" page="1">
      <div v-if="showPageList.indexOf(1) > -1">
        <div class="bodystyle">
          <p class="center coverImg">
            <img alt="" class="imz" src="../../images/SMY.jpg" />
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="2">
      <div v-if="showPageList.indexOf(2) > -1">
        <div class="bodystyle">
          <div class="pdf-content">
            <hr />
            <p><b>图书在版编目（CIP）数据</b></p>
            <p>
              体育与健康/毛振明，于素梅主编.—3版.—北京：北京师范大学出版社，2022.8（2023.6重印）
            </p>
            <p>ISBN 978-7-303-27568-7</p>
            <p>
              Ⅰ.①体… Ⅱ.①毛…②于…
              Ⅲ.①体育-中等专业学校-教材②健康教育-中等专业学校-教材 Ⅳ.①G634.961
            </p>
            <p>中国版本图书馆CIP数据核字（2021）第260336号</p>
            <hr />
            <p><br /></p>
            <p><br /></p>
            <hr />
            <p class="left">
              <b>教材意见反馈：</b>gaozhifk@bnupg.com　010-58805079
            </p>
            <p class="left">营销中心电话：010-58802755 58800035</p>
            <hr />
            <p class="left">出版发行：北京师范大学出版社　www.bnupg.com</p>
            <p class="left">　　　　　北京市西城区新街口外大街12-3号</p>
            <p class="left">　　　　　邮政编码：100088</p>
            <p class="left">印　　刷：北京盛通彩色印刷有限公司</p>
            <p class="left">经　　销：全国新华书店</p>
            <p class="left">开　　本：889mm×1194mm　1/16</p>
            <p class="left">印　　张：18.5</p>
            <p class="left">字　　数：460千字</p>
            <p class="left">版　　次：2022年8月第3版</p>
            <p class="left">印　　次：2023年6月第29次印刷</p>
            <p class="left">定　　价：38.80元</p>
            <hr />
            <p class="left">策划编辑：林　子　姚贵平</p>
            <p class="left">责任编辑：孟　浩　梁宏宇</p>
            <p class="left">　　　　　冯　倩　林　子</p>
            <p class="left">插图绘制：先帷帷</p>
            <p class="left">装帧设计：焦　丽</p>
            <p class="left">美术编辑：焦　丽</p>
            <p class="left">责任校对：陈　民</p>
            <p class="left">责任印制：陈　涛</p>
            <p class="center"><b>版权所有 侵权必究</b></p>
            <p class="center"><b>反盗版、侵权举报电话：</b>010-58800697</p>
            <p class="block2">北京读者服务部电话：010-58808104</p>
            <p class="block2">外埠邮购电话：010-58808083</p>
            <p class="block2">本书如有印装质量问题，请与印制管理部联系调换。</p>
            <p class="block2">印制管理部电话：010-58808284</p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="3">
      <div v-if="showPageList.indexOf(3) > -1">
        <div class="bodystyle">
          <div class="bk3">
            <h1 id="a003" class="front">——丛书编委会——</h1>
            <p class="center"><span class="bj1">主编</span></p>
            <p class="center">郭健</p>
            <p class="center"><span class="bj1">副主编</span></p>
            <p class="center">田宝军　范明丽</p>
            <p class="center"><span class="bj1">编委</span></p>
            <p class="center">（按姓氏拼音排序）</p>
            <p class="center">柴志高　董顺英　盖春瑞　苟增强　郭建怀</p>
            <p class="center">胡保利　蒋国新　李玉侠　刘永利　麻士琦</p>
            <p class="center">庞彦强　宋耀武　王冬岩　王国英　王艳玲</p>
            <p class="center">王英龙　吴宝瑞　薛彦华　姚　春　袁　铸</p>
            <p class="center">张成起　张景亮　张丽娟　赵春兰　赵宗更</p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <div class="bodystyle">
          <div class="bk3">
            <h1 id="a004" class="front">——本书编委会——</h1>
            <p class="center"><span class="bj1">主编</span></p>
            <p class="center">范明丽　朱学英</p>
            <p class="center"><span class="bj1">副主编</span></p>
            <p class="center">李　月　杜媛媛</p>
            <p class="center"><span class="bj1">编委</span></p>
            <p class="center">（按姓氏拼音排序）</p>
            <p class="center">杜媛媛　范明丽　李聪聪　李海先</p>
            <p class="center">李　月　刘建如　明淑君　师　慧</p>
            <p class="center">孙美红　邢颖洁　张　静　张乃艳</p>
            <p class="center">张艳荣　赵立平　朱学英</p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <div class="bodystyle">
          <h1 id="a005" class="zt-4">第2版丛书修订说明　|</h1>
          <p>
            自2015年策划、2017年出版以来，本套由河北省高等学校教育学教学指导委员会组编的教材已经出版了近20个品种，因其实用性、时效性等特点，受到广大院校师生的普遍欢迎。
          </p>
          <p>
            2017年10月，为了贯彻落实党的十九大精神，推进教师教育质量保障体系建设，规范引导师范类专业建设，提高师范类专业人才培养质量，教育部印发了《普通高等学校师范类专业认证实施办法（暂行）》，开始进行普通高等学校师范类专业认证工作。2018年1月，中共中央、国务院颁布了《关于全面深化新时代教师队伍建设改革的意见》，这是中华人民共和国成立以来，党中央出台的第一个专门面向教师队伍建设的里程碑式的政策文件，对新时代教师队伍建设做出了全面的决策部署。
          </p>
          <p>
            针对近几年学前教育领域的政策变化，尤其是师范类专业认证对学前教育专业的培养目标、毕业要求、课程与教学等方面的具体规范，以及广大院校在教育教学改革过程中出现的关注实践、注重能力培养、倡导理论与实践相结合的发展趋势，在数字资源建设等方面的需求，我们启动了第2版教材修订工作。
          </p>
          <p>
            在修订过程中，本套教材严格遵守2019年12月教育部印发的《职业院校教材管理办法》和《普通高等学校教材管理办法》，适度吸纳一线的优秀教师、园长等参与教材编写或审读，注重跨校、跨区域联合编写，力求遵循教育教学规律和人才培养规律，体现创新性和学科特色。
          </p>
          <p>本次修订的重点为：</p>
          <p>
            1.注重数字资源建设，增添视频、微课或虚拟仿真实验教学项目等内容，读者可以扫描教材中的二维码观看、学习。
          </p>
          <p>
            2.补充试题、教案、多媒体课件等配套教学资源，形成更加多元、丰富的教学资源库，有助于教师的教与学生的学。
          </p>
          <p>
            3.关注实践，增补新的教学案例或相关研究成果等，倡导理论与实践相结合，注重学生岗位入职能力培养。
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <div class="bodystyle">
          <h1 id="a006" class="zt-4">第1版丛书序　|</h1>
          <p>
            2010年7月，中共中央、国务院颁发《国家中长期教育改革和发展规划纲要（2010—2020年）》，提出了到2020年全国基本普及学前教育的战略目标。2010年11月，国务院发布《国务院关于当前发展学前教育的若干意见》（简称“国十条”）。此后，中国学前教育事业进入了史无前例的快速发展时期。全国各地为解决学前教育师资问题，纷纷开设学前教育专业，不同层次的学前教育专业如雨后春笋般地涌现出来，学前教育专业在校生规模急剧扩大。然而，学前教育专业人才培养质量良莠不齐，状况堪忧，引起社会广泛关注。学前教育专业改革呼声日益高涨。
          </p>
          <p>
            2011年10月，教育部颁布《教师教育课程标准（试行）》，并发文要求各地要“按照《教师教育课程标准（试行）》的学习领域、建议模块和学分要求，制订有针对性的幼儿园、小学和中学教师教育课程方案，保证新入职教师基本适应基础教育新课程的需要”。为了推进《教师教育课程标准（试行）》的实施，教育部要求，“加强教师教育课程和教材管理”。同年，全国教师资格考试政策也进行了重大调整，教师资格考试由各省自主组织改为全国统考，河北省于2012年成为改革试点省份。
          </p>
          <p>
            在全国学前教育大发展的背景下，在《教师教育课程标准（试行）》和教师资格考试新政策的实施过程中，学前教育改革与发展显然跟不上时代步伐。例如，学前教育专业课程既无法满足《教师教育课程标准（试行）》的要求，也无法有效应对学生参加教师资格考试的需要，修订课程方案和教材势在必行。
          </p>
          <p>
            为了适应我国学前教育发展改革趋势，有效地整合地方学前教育资源，提升地方高校学前教育整体发展水平和人才培养质量，2015年4月，河北省高等学校教育学教学指导委员会和北京师范大学出版社在充分调研的基础上，联合启动了河北省学前教育专业“十三五”规划教材建设工作。教材编写成员主要来自河北省内开设学前教育专业的各所高校，同时也吸收了部分幼儿园一线教师和省外高校教师参与。教材编写品种包括《学前教育学》《学前心理学》《学前儿童卫生与保育》《幼儿园健康教育与活动指导》《幼儿园社会教育与活动指导》《幼儿园语言教育与活动指导》《幼儿园科学教育与活动指导》《幼儿园数学教育与活动指导》《幼儿园美术教育与活动指导》《幼儿园音乐教育与活动指导》《幼儿园教育活动设计
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
        <div class="bodystyle">
          <p style="text-indent: 0">
            与实施》《幼儿游戏与指导》《幼儿园组织与管理》《学前教育研究方法》《幼儿园一日活动指导》《幼儿园教育评价》《幼儿园环境创设与玩教具制作》《舞蹈基础》《美术基础》《音乐基础》《钢琴基础》《声乐基础》等。
          </p>
          <p>
            为了保证教材编写质量，我们设立了丛书编写委员会，实行主编负责制，并确立了以下编写原则。
          </p>
          <p>
            第一，以本科教育层次为主，兼顾其他层次。目前，我国幼儿园师资的培养一般包括中职中专、高职高专和本科教育三个层次。此外，还有五年制专科、专接本、专升本、专业硕士研究生等。本套教材主要面向全日制四年制学前教育本科专业，同时兼顾其他层次培养所需。
          </p>
          <p>
            第二，全面系统与灵活性相结合。本套教材涵盖学前教育专业人才培养基础课程，注重教材之间衔接和统一，注重基础理论、专业实践和基本技能等内容的交叉与协调。同时，根据地域、院校特点，为各校开设选修课程保留了较大的自主发挥空间。
          </p>
          <p>
            第三，理论与实践相结合。本套教材强调深入落实《教师教育课程标准（试行）》
            “实践取向”“能力为重”的精神，注重实践性教学内容及环节，关注解决教育实践问题。在板块设计上，有正文的理论阐述，同时还辅以导入案例、案例分析、实践练习题、建议的活动、想一想、做一做等实践板块，引导学生将所学理论运用到实践中。整套教材旨在让学生不仅知道怎样做，而且要知道为什么这样做，还要具备进一步去探索、发现并提出新问题、新理念和新方法的基础能力。
          </p>
          <p>
            第四，基础性与时代性相结合。本套教材坚持呈现各学科领域的基本概念、基本知识、基本理论，为学生搭建一个全面而扎实的知识体系。在此基础上，本套教材紧密结合《教师教育课程标准（试行）》《3-6岁儿童学习与发展指南》《幼儿园工作规程》（2016）等最新国家政策文件精神，吸纳教育学、心理学、学科教学的最新研究成果，同时根据教师资格考试改革需要设置了专门的学习模块，确保教材内容与时俱进。在教材的呈现方式上，我们也谨慎采用了一些信息化的新媒体技术，以适应全媒体时代的学习方式。
          </p>
          <p>
            经过大家一年多的共同努力，首批教材即将付梓。作为丛书主编，我对参与教材编写工作的所有人员致以诚挚的谢意，特别要感谢丛书副主编田宝军教授以及各分册主编付出的辛勤劳动。感谢北京师范大学出版社编辑罗佩珍女士精心策划、积极协调，为丛书编写工作付出了极大的精力与努力。当然，由于时间比较仓促，教材在体系建设、内容选择等方面肯定存在着不足与疏漏，欢迎广大学界同仁和读者朋友不吝赐教，多提宝贵意见。
          </p>
          <p class="right">
            <img class="inline" alt="" src="../../images/0008-1.jpg" />
          </p>
          <p class="right">2016年6月30日</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <div class="bodystyle">
          <h1 id="a007" class="zt-4">前言　|</h1>
          <p>
            教育是国之大计、党之大计。2014年9月9日上午，习近平总书记在会见庆祝第三十个教师节暨全国教育系统先进集体和先进个人表彰大会受表彰代表后，在北京师范大学强调全国广大教师要做“有理想信念、有道德情操、有扎实知识、有仁爱之心”的“四有”好老师，为发展具有中国特色、世界水平的现代教育，培养社会主义事业建设者和接班人做出更大贡献。2017年10月，为了贯彻落实党的十九大精神，推进教师教育质量保障体系建设，规范引导师范类专业建设，提高师范类专业人才的培养质量，教育部印发了《普通高等学校师范类专业认证实施办法（暂行）》，开始进行普通高等学校师范类专业认证工作。2018年1月，中共中央、国务院颁布了《关于全面深化新时代教师队伍建设改革的意见》，这是中华人民共和国成立以来，党中央出台的第一个专门面向教师队伍建设的里程碑式的政策文件，对新时代教师队伍建设做出了全面的决策部署。
          </p>
          <p>
            学前教育是终身学习的开端，是国民教育体系的重要组成部分，是重要的社会公益事业。办好学前教育、实现幼有所育，是党和政府为老百姓办实事的重大民生工程，关系亿万儿童健康成长，关系社会和谐稳定，关系党和国家事业未来。游戏是幼儿的基本活动，幼儿期是特殊的游戏期。中国著名的幼儿教育专家陈鹤琴先生曾经指出“幼儿是以游戏为生活的”。游戏所具有的自由性、趣味性、假想性与创造性等基本特征与幼儿好动、好奇、好模仿的天性相吻合，是幼儿最喜闻乐见的活动形式，可以有效促进其身体、认知、社会性、情绪情感等方面的健康发展。
          </p>
          <p>
            2001年9月，我国开始实施的《幼儿园教育指导纲要（试行）》在总则中明确指出：“幼儿园教育应尊重幼儿的人格和权利，尊重幼儿身心发展的规律和学习特点，以游戏为基本活动，保教并重，关注个别差异，促进每个幼儿富有个性的发展。”然而，近年来以早期教育名义出现的各种学业和技能训练正在挤占幼儿游戏的空间与时间，压榨着孩子们宝贵的童年时光。有学者指出，当前我国学前教育领域存在着一种普遍的“游戏困境”，即“理论上、口头上重视游戏，实践上、行动上轻视和忽视游戏”；在幼儿园实践中“重上课、轻游戏，重教师编制的教学游戏、轻幼儿自发的自由游戏”。2011年12月，针对幼儿园教育“小学化”现象日益突出的问题，教育部专门颁布了《关于规范幼儿园保育教育工作防
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
        <div class="bodystyle">
          <p style="text-indent: 0">
            止和纠正“小学化”现象的通知》，再次明确提出幼儿园“要坚持以游戏为基本活动”，“要创设多种区域活动空间，配备丰富的玩具、游戏材料和幼儿读物，为幼儿自主游戏和学习探索提供机会和条件”。2016年3月1日我国开始正式实施的《幼儿园工作规程》中规定幼儿园要“以游戏为基本活动，寓教育于各项活动之中”，并进一步明确了“幼儿园应当将游戏作为对幼儿进行全面发展教育的重要形式。幼儿园应当因地制宜创设游戏条件，提供丰富、适宜的游戏材料，保证充足的游戏时间，开展多种游戏。幼儿园应当根据幼儿的年龄特点指导游戏，鼓励和支持幼儿根据自身兴趣、需要和经验水平，自主选择游戏内容、游戏材料和伙伴，使幼儿在游戏过程中获得积极的情绪情感，促进幼儿能力和个性的全面发展”。
          </p>
          <p>
            2010年7月，我国正式发布的《国家中长期教育改革和发展规划纲要（2010—2020年）》专章明确提出基本普及学前教育，学前教育进入了“发展的春天”。加快发展学前教育，提高学前教育质量的关键是师资。2012年2月，我国颁布实施的《幼儿园教师专业标准（试行）》把“游戏活动的支持与引导”作为幼儿园教师应当具备的七大专业能力之一，并进一步将其细分为四种基本能力：1.提供符合幼儿兴趣需要、年龄特点和发展目标的游戏条件；2.充分利用与合理设计游戏活动空间，提供丰富、适宜的游戏材料，支持、引发和促进幼儿的游戏；3.鼓励幼儿自主选择游戏内容、伙伴和材料，支持幼儿主动地、创造性地开展游戏，充分体验游戏的快乐和满足；4.引导幼儿在游戏活动中获得身体、认知、语言和社会性等多方面的发展。<a
              id="w1"
            ></a
            ><a href="front007.html#m1"><sup>[1]</sup></a
            >可见，理解游戏对于幼儿学习和发展的重要的价值，认同并坚持幼儿园以游戏为基本活动的教育理念，掌握组织和指导幼儿开展游戏活动的方法和技能，已经成为学前教育专业学生的基本要求。
          </p>
          <p>
            本教材定位于学前教育专业教学的基本要求，在把握时代特征的同时借鉴学前教育界前辈与同行的研究成果，注重实用性与操作性，既可作为学前教育专业学生的教材，也可作为幼儿园教师真正理解幼儿游戏的实质、迅速把握支持和指导幼儿游戏的基本方法的辅助工具。“幼儿游戏与指导”这门课程在学前教育专业培养方案中属于专业必修课程和核心课程，极大契合了国家法规政策的要求和幼儿园教学实践的需要。本教材由河北省高等学校教育学教学指导委员会组织编写，历经启动、主编会、大纲修改、初稿、二稿、三稿等多次修改完善，之后又结合实际使用情况增加电子资源，形成了第2版的“融媒体”教材。既注重理论深度，又兼顾幼儿园实际，编写的要求高、科学性强、质量有保障。全书共十章：第一章概述幼儿游戏，第二章介绍基本的游戏理论及其影响，第三、四、五、六章分别探讨幼儿园最为常见的角色游戏、表演游戏、建构游戏和规则游戏，第七章分析幼儿游戏的支持环境，第八章聚焦如何对幼儿游戏进行观察和评价，第九章立足幼儿园玩教具的开发与制作，第十章拓展了其他游
          </p>
          <hr/>
          <p class="note">
            <!-- <a id="m1"></a
            ><a href="front007.html#w1">[1]</a> -->
            教育部.幼儿园教师专业标准（试行）2012.2
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
        <div class="bodystyle">
          <p style="text-indent: 0">戏资源的开发。</p>
          <p>总体来看，本教材具有如下特色。</p>
          <p>
            1.注重立德树人，融入课程思政。习近平总书记高度重视教师队伍建设，希望广大教师做“四有”好老师，当好“四个引路人”，坚持“四个相统一”，教师要自觉“做学生为学、为事、为人的大先生”。作为培养准教师的载体，本教材在修订过程中注重融入课程思政元素，把立德树人融入文化知识教育、社会实践教育等各环节，引导学生树立正确的儿童观、教师观和教育观。教材体系、教学体系和配套资源都围绕立德树人这个目标来设计，教师围绕这个目标来教，学生围绕这个目标来学。
          </p>
          <p>
            2.理论指导实践，实践丰富理论。本教材注重帮助学习者掌握基本的幼儿游戏理论，形成对幼儿游戏的科学认识，在此基础上注重培养其科学观察和指导幼儿游戏，以及合理利用游戏材料、创设游戏环境的能力。
          </p>
          <p>
            3.教材结构合理，语言论述清晰。本教材前两章为游戏概述与游戏基本理论，第三章到第六章为幼儿园最常见的游戏类型及其指导，后四章关注游戏环境、游戏观察与评价、玩教具及其他游戏资源的开发。全书结构合理，层次清晰，内容编排注重逻辑性；行文上力求做到语言简洁，指导清晰，方便学习者理解。
          </p>
          <p>
            4.突出案例教学，分析点评到位。每章均精选幼儿游戏的实践案例作为开篇，力图通过具体问题引发学习者的兴趣和思考，在此基础上呈现学习内容；各章讲述中也穿插相关实例，加以分析点评，引导学习者通过案例理解理论、掌握知识、提升能力。
          </p>
          <p>
            5.配套资源完善，突出“双证融通”。本教材修订时配备了大量资源，如角色游戏、表演游戏、建构游戏、规则游戏等章节均有相应的幼儿游戏视频，建构游戏一章新增了河北大学教育学院“学前儿童建构游戏技能辨析及其支持”虚拟仿真实验的内容；依据“双证融通”的要求，更新和增加了幼儿园教师资格证考试的内容，包括笔试真题和面试真题，可以有效帮助师生将教材知识与教师资格考试紧密结合；为了使学习者更好地把握所学内容，方便教师或学习者本人进行学习效果检查，编者还为全书以及各章设计了配套试卷和答案。
          </p>
          <p>
            本教材由范明丽和朱学英主编，范明丽提出全书框架，各部分作者分工合作研究撰写。具体分工如下：第一章由范明丽、孙美红撰写和修订，第二章由刘建如、李月撰写和修订，第三章由朱学英、范明丽撰写和修订，第四章由赵立平、李聪聪撰写和修订，第五章由师慧、邢颖洁撰写和修订，第六章由赵立平、师慧、范明丽撰写和修订；第七章由范明丽、张静撰写和修订；第八章由范明丽、李海先撰写和修订；第九章由张艳荣、范明丽撰写和修订；第十章由张乃艳、明淑君撰写和修订。
          </p>
          <p>
            本教材能够出版和修订，要感谢教育部高等学校教育学类教学指导委员会副主任委员郭健教授的大力支持，感谢田宝军教授的关心指导。特别感谢北京
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
        <div class="bodystyle">
          <p style="text-indent: 0">
            师范大学出版社编辑罗佩珍老师的认真负责，她在教材出版和修订过程中付出了很多心血。此外，本教材还参考了许多专家学者的相关论著，河北保定、石家庄、涿州、唐山，以及安徽池州的多所幼儿园为本书提供了大量图片和视频，在此表示衷心感谢！
          </p>
          <p class="right">
            <img class="inline" alt="" src="../../images/0012-1.jpg" />
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "front-001",
  props: {
    showPageList: {
      type: Array,
    },
  },
};
</script>

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

New file
@@ -0,0 +1,909 @@
<!-- @format -->

<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <div
      class="public-preschoolGameGuidance"
      :style="{
        fontSize: fontSize ? fontSize + 'px' : '16px',
        transform: `scale(${pageZoom ? pageZoom : 1})`,
        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>
      <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSix>
      <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList"></chapterSeven>
      <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight>
      <chapterNine v-if="showCatalogList.indexOf(10) > -1" :showPageList="loadPageList"></chapterNine> -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import pageHeader from "./front001";
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 chapterSix from './chapter006.vue'
// import chapterSeven from './chapter007.vue'
// import chapterEight from './chapter008.vue'
// import chapterNine from './chapter009.vue'

import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import getQuestionList from "@/assets/methods/examination";
import testData from "../../js/examinationList";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  data() {
    return {
      catalogLength: 3, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null,
      observer: null,
      loadPageObserver: null,
      loadPageList: [],
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
    };
  },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
  },
  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.initSwiper();
          this.initViewer();
          // this.readText()
        }, 200);
      },
    },
    pageZoom: {
      handler(newVal, oldVal) {
        const scrollBox = (
          this.container ? this.container : document
        ).querySelector(".page-main");
        scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
      },
    },
  },
  mounted() {
    // 默认加载章节
    this.showCatalogList = [1];
    // 滚动监听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
      this.throttleThreshold,
      { leading: true, trailing: false }
    );
    // 定义子层方法
    if (this.setGlobalState) {
      // 提供页面跳转功能
      this.setGlobalState({
        gotoPage: (catalog, page) => {
          this.gotoPage(catalog, page);
        },
        // 渲染笔记、高亮、划线
        renderSign: (type, data) => {
          // 因为调整为页面懒加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记；
          this.handelSignData(type, data);
          // this.renderSign(type, data);
        },
        // 删除笔记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        },
        // 全文检索
        searchBookByKeyword: (keyword) => {
          return this.searchTextByPage(keyword);
        },
        // 跳转检索结果位置
        jumpSearchItem: (data) => {
          this.searchItemLocation(data);
        },
      });
    }

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

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

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

    // 测试页面跳转
    setTimeout(() => {
      this.gotoPage(3, 66);
      //   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: {
    swdtChange(data) {
      console.log("子应用pdf", data);
      if (this.$store.state.qiankun && this.$store.state.qiankun.openPDF) {
        if (data.type == "pdf") {
          this.$store.state.qiankun.openPDF({
            data: data.data,
          });
        } else {
          this.$store.state.qiankun.chooseWords({
            type: data.type,
            data: data.data,
          });
        }
      }
    },
    changeDomViewer() {
      this.initViewer();
    },
    // 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) {
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        // 向下
        const currentScrollTop =
          event.target.scrollTop + event.target.offsetHeight;
        if (
          currentScrollTop >=
          event.target.scrollHeight - this.loadThreshold
        ) {
          // 到达阈值
          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) {
        // 向上
        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) {
      console.log(element, className, "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;
                  }
                }
              }
            }
            // 渲染这一页的标记
            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,
        // chapterSix,
        // chapterSeven,
        // chapterEight,
        // chapterNine
        // assemblyOne,
        // assemblyTwo,
      };
      // 遍历所有章节文件
      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, () => {});
    },
    // readText() {
    //   const doms = (
    //     this.container ? this.container : document
    //   ).querySelectorAll('.read-aloud')
    //   for (let index = 0; index < doms.length; index++) {
    //     const dom = doms[index]
    //     let id = null
    //     dom.addEventListener('click', (e) => {
    //       if (e.srcElement.nodeName == 'svg') {
    //         id = dom.getAttribute('readId')
    //       } else if (e.srcElement.nodeName == 'g') {
    //         const svgDom = e.srcElement.parentNode
    //         id = svgDom.getAttribute('readId')
    //       } else {
    //         const svgDom = e.srcElement.parentNode.parentNode
    //         id = svgDom.getAttribute('readId')
    //       }
    //       const item = (
    //         this.container ? this.container : document
    //       ).querySelector('#' + id).innerText
    //       console.log(item, 233)
    //     })
    //   }
    // },
  },
  components: {
    pageHeader,
    chapterOne,
    chapterTwo,
    // chapterThree,
    // chapterFour,
    // chapterfive,
    // chapterSix,
    // chapterSeven,
    // chapterEight,
    // chapterNine
    // assemblyOne,
    // assemblyTwo,
    // ChapterFour,
    // ChapterFive,
    // chapterSix,
    // chapterSeven,
    // chapterEight,
    // chapterNine,
    // chapter010,
    // chapter011,
    // chapter012,
    // chapter013,
    // chapter014,
    // chapter015,
    // chapter016,
    // chapter017,
    // chapter018,
  },
};
</script>

 src/books/preschoolGameGuidance/view/index.vue

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

<script>
import pageContent from "./components/index.vue";
export default {
  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 "../css/default.less";
</style>

 yarn.lock

Diff too large