新书

unknown

2024-05-30 474b491c5875a833a1aa302dc703d18fbc73b58b

新书

 src/App.vue

@@ -65,7 +65,7 @@
        // childHealth
        // lifeCare
        // sportsAndHealth
        this.config.resourceCtx + "sportsAndHealth"
        this.config.resourceCtx + "english"
      );
      // æµ‹è¯•è¯•è¯»30页
      // this.activeBook.tryPageCount = 10;
@@ -91,7 +91,7 @@
.highLight {
  border: 1px dashed rgba(255, 255, 255, 0);
  border-radius: 5px;
  padding: 3px;
  padding: 3px 0;
  cursor: pointer;
}
.highLight:hover {
@@ -100,7 +100,7 @@

.underline {
  border: 1px dashed rgba(255, 255, 255, 0);
  padding: 5px;
  padding: 5px 0;
  border-radius: 5px;
  text-decoration: underline;
  text-decoration-style: wavy;
@@ -167,4 +167,9 @@
  left: 0;
  margin: auto;
}


.openImgBox img{
  cursor: zoom-in;
}
</style>

 src/books/English/assets/images/icon/ͼƬÎļþ.svg

New file
@@ -0,0 +1,7 @@
<svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" p-id="30864" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="20" height="20">
  <path
    d="M387.2 471.152l-154.768 258.72v103.488h515.792V626.384l-149.12 103.488z m283.712-51.744a77.632 77.632 0 1 0 77.392 77.616 77.504 77.504 0 0 0-77.472-77.616zM640 0H160.72A96.736 96.736 0 0 0 64 96.72V927.36a96.736 96.736 0 0 0 96.72 96.64h702.56A96.704 96.704 0 0 0 960 927.36V298.016z m7.808 94.736l226.544 211.008h-146.544a80.08 80.08 0 0 1-80-80zM896 927.36a32.688 32.688 0 0 1-32.72 32.64h-702.56A32.704 32.704 0 0 1 128 927.36V96.72A32.752 32.752 0 0 1 160.72 64l423.088 0.384v161.44a144.176 144.176 0 0 0 144 143.92H896z"
    fill="#ffffff" p-id="30865"></path>
</svg>

 src/books/English/assets/main.less

@@ -860,6 +860,7 @@
    color: red;
  }
  .icon-box {
    margin-left: 8px;
    display: inline-block;
    width: 18px;
    height: 18px;
@@ -935,6 +936,15 @@
      }
    }
  }
  .textarea-box {
    border: none;
    text-align: center;
    width: 84px;
    height: 36px;
    overflow: auto;
    word-break: break-all;
    resize: none;
  }
}
/* åª’体查询做基础响应式布局 */
@media (max-width: 660px) {

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

@@ -2,7 +2,7 @@
  <div class="chapter" num="0">
    <!-- 1 -->
    <div class="page-box" page="7">
      <div class="bodystyle">
      <div class="bodystyle" v-if="showPageList.indexOf(7) > -1">
        <h1 id="a005">
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
        </h1>
@@ -24,6 +24,7 @@
    </div>
    <!-- 2 -->
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -60,18 +61,13 @@
                />
              </svg>
            </span>
            <!-- <button
              @click="showAnswerTwo = !showAnswerTwo"
              class="parimary-btn"
            >
              æ˜¾ç¤ºç­”案
            </button> -->
          </p>
            <div class="openImgBox">
          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgOne" :preview-src-list="[imgOne]" />
                      <img src="../../assets/images/0012-1.jpg" class="w100" />
                </p>
                <p class="center">
                  1.<input
@@ -109,11 +105,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgTwo"
                    :preview-src-list="[imgTwo]"
                    style="width: 94%"
                  />
                      <img src="../../assets/images/0012-2.jpg" style="width: 94%" />
                </p>
                <p class="center">
                  2.<input
@@ -154,7 +146,7 @@
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgThree" :preview-src-list="[imgThree]" />
                      <img src="../../assets/images/0012-3.jpg" class="w100" />
                </p>
                <p class="center">
                  3.<input
@@ -192,11 +184,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgFour"
                    :preview-src-list="[imgFour]"
                    style="width: 93%"
                  />
                      <img src="../../assets/images/0012-4.jpg" style="width: 93%" />
                </p>
                <p class="center">
                  4.<input
@@ -237,7 +225,7 @@
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgFive" :preview-src-list="[imgFive]" />
                      <img src="../../assets/images/0012-5.jpg" class="w100" />
                </p>
                <p class="center">
                  5.<input
@@ -275,11 +263,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgSix"
                    :preview-src-list="[imgSix]"
                    style="width: 92%"
                  />
                      <img src="../../assets/images/0012-6.jpg" style="width: 92%" />
                </p>
                <p class="center">
                  6.<input
@@ -313,6 +297,7 @@
              >
                ç­”案：Chinese chess
              </p>
                </div>
            </div>
          </div>
          <p class="t0">
@@ -362,8 +347,10 @@
        <span class="contet-num-box">2</span>
      </div>
    </div>
    </div>
    <!-- 3 -->
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -526,8 +513,10 @@
        <span class="contet-num-box">3</span>
      </div>
    </div>
    </div>
    <!-- 4 -->
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -648,8 +637,10 @@
        <span class="contet-num-box">4</span>
      </div>
    </div>
    </div>
    <!-- 5 -->
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -706,22 +697,24 @@
            China.
          </p>
          <p>
            <input type="checkbox" name="ball" value="basketball" id="1" checked="checked"/> 
              <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> 
            Language</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> People</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1"/> Culture</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Cuisine</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Folk art</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Landscapes</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Transportation</p>
            <p><input type="checkbox" name="ball" value="People" id="2" v-model="testData.check" /> People</p>
            <p><input type="checkbox" name="ball" value="Culture" id="3" v-model="testData.check" /> Culture</p>
            <p><input type="checkbox" name="ball" value="Cuisine" id="4" v-model="testData.check" /> Cuisine</p>
            <p><input type="checkbox" name="ball" value="Folk" id="5" v-model="testData.check" /> Folk art</p>
            <p><input type="checkbox" name="ball" value="Landscapes" id="6" v-model="testData.check" /> Landscapes</p>
            <p><input type="checkbox" name="ball" value="Transportation" id="7" v-model="testData.check" /> Transportation</p>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">5</span>
      </div>
    </div>
    </div>
    <!-- 6 -->
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -955,8 +948,10 @@
        <span class="contet-num-box">6</span>
      </div>
    </div>
    </div>
    <!-- 7 -->
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -1043,9 +1038,15 @@
          </p>
          <p>
            <b>Ⅲ.Grammar focus:The conditional sentence—if-clause.</b>
            <button class="parimary-btn" @click="showAnswer('showImg')">
              å›¾ç‰‡
            </button>
              <span class="btn-box" @click="showAnswer('showImg')">
                <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="30864" xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="20" height="20">
                  <path
                    d="M387.2 471.152l-154.768 258.72v103.488h515.792V626.384l-149.12 103.488z m283.712-51.744a77.632 77.632 0 1 0 77.392 77.616 77.504 77.504 0 0 0-77.472-77.616zM640 0H160.72A96.736 96.736 0 0 0 64 96.72V927.36a96.736 96.736 0 0 0 96.72 96.64h702.56A96.704 96.704 0 0 0 960 927.36V298.016z m7.808 94.736l226.544 211.008h-146.544a80.08 80.08 0 0 1-80-80zM896 927.36a32.688 32.688 0 0 1-32.72 32.64h-702.56A32.704 32.704 0 0 1 128 927.36V96.72A32.752 32.752 0 0 1 160.72 64l423.088 0.384v161.44a144.176 144.176 0 0 0 144 143.92H896z"
                     p-id="30865"></path>
                </svg>
              </span>
          </p>
          <el-image
            v-if="showImg"
@@ -1204,7 +1205,7 @@
          </p>
          <div class="w100 fl ju-cn">
            <ul class="fl ju-ev" style="width: 50%">
              <li><button class="btn-border btn-w">提交</button></li>
                <li><button class="btn-border btn-w" @click="saveData">提交</button></li>
              <li>
                <button @click="setTestData" class="btn-border btn-w">
                  ä¿å­˜
@@ -1227,8 +1228,10 @@
        <span class="contet-num-box">7</span>
      </div>
    </div>
    </div>
    <!-- 8 -->
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -1291,14 +1294,14 @@
              <td>
                <textarea
                  v-model="questionData.table.one"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.two"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
@@ -1314,14 +1317,14 @@
              <td>
                <textarea
                  v-model="questionData.table.four"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.five"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
@@ -1337,14 +1340,14 @@
              <td>
                <textarea
                  v-model="questionData.table.seven"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.enight"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
@@ -1419,26 +1422,284 @@
            </p>
          </div>
          <div class="resource-primary-border" style="padding: 8px">
            <el-carousel
              :autoplay="false"
              trigger="click"
              class="bones-carousel carousel-image"
              arrow="always"
              indicator-position="none"
              <div class="banshi openImgBox">
                  <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
            >
              <el-carousel-item
                v-for="(item, index) in pptList"
                :key="index"
                class="bones-carousel-item"
              >
                <el-image
                  :src="item"
                  :preview-src-list="pptList"
                  :preview-teleported="true"
                  class="open-image"
                          <img
                            src="../../assets/images/ppt/ppt_01.png"
                />
              </el-carousel-item>
            </el-carousel>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_01.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_03.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_04.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_05.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_06.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_07.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_08.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_09.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_10.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_11.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_12.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_13.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_14.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_15.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_16.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_17.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_18.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_19.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_20.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_21.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_22.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_23.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_24.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_25.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_26.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_27.png"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                  </div>
                </div>
          </div>
        </div>
      </div>
@@ -1446,8 +1707,10 @@
        <span class="contet-num-box">8</span>
      </div>
    </div>
    </div>
    <!-- 9 -->
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -1475,11 +1738,12 @@
              train　shared bike　take-away service
            </p>
          </div>
            <div class="openImgBox">
          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgSeven" :preview-src-list="[imgSeven]" />
                      <img src="../../assets/images/0019-1.jpg" alt="" class="w100" />
                </p>
                <p class="center">
                  1.
@@ -1521,11 +1785,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgEnight"
                    :preview-src-list="[imgEnight]"
                    style="width: 98%"
                  />
                      <img src="../../assets/images/0019-2.jpg" alt="" style="width: 98%" />
                </p>
                <p class="center">
                  2.
@@ -1570,7 +1830,7 @@
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgNine" :preview-src-list="[imgNine]" />
                      <img src="../../assets/images/0019-3.jpg" alt="" style="width: 98%" />
                </p>
                <p class="center">
                  3.
@@ -1612,11 +1872,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgTen"
                    :preview-src-list="[imgTen]"
                    style="width: 94%"
                  />
                      <img src="../../assets/images/0019-4.jpg" alt=""  style="width: 94%" />
                </p>
                <p class="center">
                  4.
@@ -1661,7 +1917,7 @@
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgEleven" :preview-src-list="[imgEleven]" />
                      <img src="../../assets/images/0019-5.jpg" alt=""  class="w100" />
                </p>
                <p class="center">
                  5.
@@ -1703,11 +1959,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgTwelve"
                    :preview-src-list="[imgTwelve]"
                    style="width: 98%"
                  />
                      <img src="../../assets/images/0019-6.jpg" alt="" style="width: 98%" />
                </p>
                <p class="center">
                  6.
@@ -1747,6 +1999,7 @@
              </p>
            </div>
          </div>
            </div>
          <div class="w100 fl ju-cn">
            <div class="fl ju-ev" style="width: 60%">
              <button @click="setDropdownData" class="btn-border btn-w">
@@ -1771,6 +2024,7 @@
      </div>
    </div>
  </div>
  </div>
</template>

<script>
@@ -1778,20 +2032,13 @@

export default {
  name: "chapter-one",
  props:{
    showPageList:{
      type:Array
    }
  },
  data() {
    return {
      imgOne: require("../../assets/images/0012-1.jpg"),
      imgTwo: require("../../assets/images/0012-2.jpg"),
      imgThree: require("../../assets/images/0012-3.jpg"),
      imgFour: require("../../assets/images/0012-4.jpg"),
      imgFive: require("../../assets/images/0012-5.jpg"),
      imgSix: require("../../assets/images/0012-6.jpg"),
      imgSeven: require("../../assets/images/0019-1.jpg"),
      imgEnight: require("../../assets/images/0019-2.jpg"),
      imgNine: require("../../assets/images/0019-3.jpg"),
      imgTen: require("../../assets/images/0019-4.jpg"),
      imgEleven: require("../../assets/images/0019-5.jpg"),
      imgTwelve: require("../../assets/images/0019-6.jpg"),
      imgThirteen: require("../../assets/images/grammar.jpg"),
      showAnswerOne: false,
      showAnswerTwo: false,
@@ -1851,6 +2098,7 @@
        },
      },
      testData: {
        check:[],
        tx: {
          one: "",
          two: "",
@@ -1940,7 +2188,7 @@
      },
      pptList: [
        require("../../assets/images/ppt/ppt_01.png"),
        require("../../assets/images/ppt/ppt_02.png"),
        require("../../assets/images/ppt/ppt_01.png"),
        require("../../assets/images/ppt/ppt_03.png"),
        require("../../assets/images/ppt/ppt_04.png"),
        require("../../assets/images/ppt/ppt_05.png"),
@@ -2064,6 +2312,9 @@
        JSON.stringify(this.dropdownData)
      );
    },
    saveData() {
      console.log(this.testData);
    }
  },
};
</script>
@@ -2107,4 +2358,13 @@
    color: #fff;
  }
}
.banshi {
  margin-top: 40px;
  width: 100%;
  height: 350px;
  margin: 0 auto;
}
select {
  height: 24px;
}
</style>

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

@@ -2,19 +2,23 @@
  <div class="chapter" num="0">
    <!--  -->
    <div class="page-box" page="1">
      <div v-if="showPageList.indexOf(1) > -1">
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
      </p>
    </div>
    </div>
    <!-- 1 -->
    <div class="page-box" page="2">
      <div v-if="showPageList.indexOf(2) > -1">
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
      </p>
    </div>
    </div>
    <!-- 2 -->
    <div class="page-box text-center" style="padding: 136px 0" page="3">
      <div class="box">
      <div class="box" v-if="showPageList.indexOf(3) > -1">
        <hr class="line" />
        <p class="tl fz-14"><b>图书在版编目（CIP）数据</b></p>
        <p class="tl fz-14 m0">
@@ -72,6 +76,7 @@
    </div>
    <!-- 3 -->
    <div class="page-box " page="4">
      <div v-if="showPageList.indexOf(4) > -1">
      <div class="pd-20 ">
        <div class="preface w100 fl al-end ju-cn">
          <h1 id="a003" class="front preface-text">前言</h1>
@@ -98,8 +103,10 @@
        </p>
      </div>
    </div>
    </div>
    <!-- 4 -->
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
      <div class="mb-20" style="padding-right: 20px;">
        <div class="primary-bc fl al-end" style="height: 100px;padding-left: 40px;">
          <div class="preface-header-box y-bc">
@@ -142,8 +149,10 @@
        <span class="num-box">2</span>
      </div>
    </div>
    </div>
    <!-- 5 -->
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">        
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class="left primary-bc "></li>
        <li>
@@ -178,11 +187,17 @@
      </div>
    </div>
  </div>
  </div>
</template>

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


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

@@ -1,18 +1,36 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div class="page-content">
      <pageHeader ></pageHeader>
      <chapterOne @saveCharacters="saveCharacters"></chapterOne>
    <div
      class="page-content"
      :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
        @saveCharacters="saveCharacters"
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
    </div>
  </div>
</template>

<script>
import pageHeader from './header.vue'
import chapterOne from './chapter001.vue'
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  name: "pageContent",
  components:{pageHeader,chapterOne},
  data() {
    return {
      catalogLength: 2, // æ€»ç« èŠ‚æ•°
@@ -22,7 +40,19 @@
      previousScrollTop: 0,
      throttledScrollHandler: null,
      observer: null,
      loadPageObserver: null,
      loadPageList: [],
      questionData: {},
      renderSignMap: {},
    };
  },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
  },
  watch: {
    showCatalogList: {
@@ -39,13 +69,23 @@
        // å¯åŠ¨é¡µç è§‚察
        setTimeout(() => {
          this.initObservation();
          this.initThemeColor();
        }, 500);
      },
    },
    loadPageList: {
      handler(newVal, oldVal) {
        console.log(newVal, "this.loadPageList");
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
        }, 200);
      },
    },
  },
  mounted() {
    // é»˜è®¤åŠ è½½ç« èŠ‚
    this.showCatalogList = [0, 1];
    this.showCatalogList = [1];
    // æ»šåŠ¨ç›‘听节流
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
@@ -61,7 +101,9 @@
        },
        // æ¸²æŸ“笔记、高亮、划线
        renderSign: (type, data) => {
          this.renderSign(type, data);
          // å› ä¸ºè°ƒæ•´ä¸ºé¡µé¢æ‡’加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记；
          this.handelSignData(type, data);
          // this.renderSign(type, data);
        },
        // åˆ é™¤ç¬”记、高亮、划线
        delSign: (data) => {
@@ -78,19 +120,26 @@
      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(5, 100);
    //   this.gotoPage(1, 10);
    //   setTimeout(() => {
    //     this.renderSign("Note", {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
    //       txt: "营养素和热量，才能",
    //       page: "100",
    //       txt: "题一学习主题一 è¿åŠ¨",
    //       page: "10",
    //       type: "Highlight",
    //       color: "#F5E12A"
    //     });
@@ -99,8 +148,8 @@
    //         ids: ["2ACA9359"]
    //       });
    //     }, 2000);
    //   }, 5000);
    //   }, 1000);
    // }, 3000);
  },
  methods: {
    // æ»šåŠ¨ç›‘听
@@ -178,6 +227,20 @@
        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) {
      const existence = (
@@ -188,29 +251,48 @@
        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":
            // é«˜äº®
            pageDom.innerHTML = pageDom.innerHTML.replace(
                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":
            // åˆ’线
            pageDom.innerHTML = pageDom.innerHTML.replace(
                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":
            // ç¬”è®°
            pageDom.innerHTML = pageDom.innerHTML.replace(
                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}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></span>`
                    `<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;
            }
          }
        }
      }
    },
@@ -245,14 +327,116 @@
      const sections = (
        this.container ? this.container : document
      ).querySelectorAll(".page-box");
      //observer è§‚察每个元素，以便在它们进入或离开视窗时触发回调函数。
      sections.forEach((section) => {
        if (this.config.activeBook && this.config.activeBook.tryPageCount) {
          const page = section.getAttribute("page");
          if (Number(page) > this.config.activeBook.tryPageCount) {
            let chapterDom = this.getParentWithClass(section, "chapter");
            const chapterNum = chapterDom.getAttribute("num");
            this.catalogLength = Number(chapterNum) - 1;
            section.remove();
            return false;
          }
        }
        // observer è§‚察每个元素，以便在它们进入或离开视窗时触发回调函数。
        const isObserver = section.getAttribute("observer");
        const isLoadObserver = section.getAttribute("loadObserver");
        if (!isObserver) {
          this.observer.observe(section);
          section.setAttribute("observer", "1");
        }
        if (!isLoadObserver) {
          this.loadPageObserver.observe(section);
          section.setAttribute("loadObserver", "1");
        }
      });
    },
    initThemeColor() {
      // èŽ·å–各种需要主题色的节点
      const colorDom = (
        this.container ? this.container : document
      ).querySelectorAll(".theme-color");
      const backgroundColorDom = (
        this.container ? this.container : document
      ).querySelectorAll(".theme-back");
      const borderColorDom = (
        this.container ? this.container : document
      ).querySelectorAll(".theme-border");
      // èŽ·å–配置的主题色
      const bookThemeColor =
        this.config.activeBook && this.config.activeBook.bookThemeColor
          ? this.config.activeBook.bookThemeColor
          : null;
      const chapterThemeColor =
        this.config.activeBook && this.config.activeBook.chapterThemeColor
          ? this.config.activeBook.chapterThemeColor
          : null;
      const pageThemeColor =
        this.config.activeBook && this.config.activeBook.pageThemeColor
          ? this.config.activeBook.pageThemeColor
          : null;
      colorDom.forEach((domItem) => {
        // èŽ·å–章节、页码
        let pageDom = this.getParentWithClass(domItem, "page-box");
        let chapterDom = this.getParentWithClass(domItem, "chapter");
        let page, chapterNum;
        if (pageDom) page = pageDom.getAttribute("page");
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        // å‘上匹配主题色
        const themeColor =
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
      });
      backgroundColorDom.forEach((domItem) => {
        // èŽ·å–章节、页码
        let pageDom = this.getParentWithClass(domItem, "page-box");
        let chapterDom = this.getParentWithClass(domItem, "chapter");
        let page, chapterNum;
        if (pageDom) page = pageDom.getAttribute("page");
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        // å‘上匹配主题色
        const themeColor =
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
      });
      borderColorDom.forEach((domItem) => {
        // èŽ·å–章节、页码
        let pageDom = this.getParentWithClass(domItem, "page-box");
        let chapterDom = this.getParentWithClass(domItem, "chapter");
        let page, chapterNum;
        if (pageDom) page = pageDom.getAttribute("page");
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        // å‘上匹配主题色
        const themeColor =
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
      });
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    pageChangeCallback(entries, observer) {
      //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
@@ -267,12 +451,16 @@
            "chapter"
          );
          const catalog = catalogDom.getAttribute("num");
          console.log("page", page, catalog);
          let text = null;
          if (target.querySelector("p")) {
            text = target.querySelector("p").textContent.substring(0, 20);
          }
          // è¿”回页码和章节信息
          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 ç±»åçš„元素，并转换为数组。
@@ -280,6 +468,114 @@
          //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"
            );
            const catalog = catalogDom.getAttribute("num");
            // if (!this.questionData[page]) {
            //   if (testData && testData[catalog]) {
            //     if (testData[catalog][page]) {
            //       if (Array.isArray(testData[catalog][page])) {
            //         this.questionData[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.questionData[page] = obj;
            //       }
            //       console.log('题目',this.questionData);
            //     }
            //   }
            // }
            // æ·»åŠ é¡µç 
            this.loadPageList.push(Number(page));
            // æ¸²æŸ“这一页的标记
            for (const key in this.renderSignMap) {
              if (this.renderSignMap[key][page]) {
                this.renderSignMap[key][page].forEach((item) => {
                  this.renderSign(key, item);
                });
              }
            }
            if (this.loadPageList.length > 5) {
              // è¶…过5页
              this.loadPageList.shift();
            }
          }
        }
      });
    },
    initSwiper() {
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".swiper-container");
      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: (this.container ? this.container : document).querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
              ".swiper-button-prev"
            ),
          },
          // çª—口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          // // å¦‚果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
          //     ".swiper-pagination"
          //   ),
          //   clickable: true // åˆ†é¡µå™¨å¯ä»¥ç‚¹å‡»
          // }
        });
      }
    },
    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, // æ˜¾ç¤ºæ ‡é¢˜
        });
      }
    },
    // ç‚¹å‡»äº‹ä»¶ï¼šå°†ç”Ÿåƒ»å•è¯ä¼ ç»™ ä¸»åº”用 ä»Žè€Œè°ƒç”¨è¯å…¸åŠŸèƒ½
    saveCharacters(event,word) {
@@ -293,6 +589,11 @@
        }
      // chooseWords
    }

  },
  components: {
    pageHeader,
    chapterOne,
  },
};
</script>

 src/books/childHealth/view/content/components/chapter001.vue

@@ -358,7 +358,8 @@
            </span>
            <examinations
              v-if="testOne && questionData"
              ref="examinationOne"
              :chapter="1"
              :page="10"
              :cardList="questionData[10]"
            />
          </div>

 src/books/childHealth/view/content/index.vue

@@ -147,7 +147,6 @@
    },
    loadPageList: {
      handler(newVal, oldVal) {
        console.log(newVal, "this.loadPageList");
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
@@ -302,6 +301,12 @@

    // å¤„理标记数据
    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] = [];
@@ -556,7 +561,6 @@
                      testData[catalog][page],
                      this.config.activeBook
                    );
                    
                  } else {
                    const obj = {};
                    for (let key in testData[catalog][page]) {
@@ -568,7 +572,7 @@
                    }
                    this.questionData[page] = obj;
                  }
                  console.log('题目',this.questionData);
                  console.log("题目", this.questionData);
                }
              }
            }
@@ -617,7 +621,7 @@
          },
          // çª—口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          observeParents: true
          // // å¦‚果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -635,7 +639,9 @@
      for (let i = 0; i < doms.length; i++) {
        const dom = doms[i];
        new Viewer(dom, {
          container: (this.container ? this.container.querySelector("#app") : "body"),
          container: this.container
            ? this.container.querySelector("#app")
            : "body",
          navbar: true, // æ˜¾ç¤ºå¯¼èˆªæ 
          toolbar: true, // æ˜¾ç¤ºå·¥å…·æ 
          title: true // æ˜¾ç¤ºæ ‡é¢˜

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

@@ -792,7 +792,6 @@
            </div>
          </div>
        </div>

      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
          <li class="footer-num">8</li>
@@ -1098,7 +1097,7 @@
          </p>
          <div class="qrbodyPic">
            <div class="openImgBox">
                <img src="../../assets/images/img00021003.jpg" alt="" class="w100">
                <img style="width:70%" src="../../assets/images/img00021003.jpg" alt="" class="w100">
              </div>
            <p class="imgdescript">图1-21　选择TPC类型</p>
          </div>

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

@@ -29,16 +29,6 @@
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
  name: "pageContent",
  components: { pageHeader, chapterOne },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
  },
  data() {
    return {
      catalogLength: 2, // æ€»ç« èŠ‚æ•°
@@ -51,8 +41,16 @@
      loadPageObserver: null,
      loadPageList: [],
      questionData: {},
      testData: {},
      renderSignMap: {}
    };
  },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    }
  },
  watch: {
    showCatalogList: {
@@ -63,7 +61,7 @@
        ) {
          // è°ƒç”¨çˆ¶å±‚方法
          this.$store.state.qiankun.catalogChange({
            showCatalogList: newVal,
            showCatalogList: newVal
          });
        }
        // å¯åŠ¨é¡µç è§‚察
@@ -71,16 +69,17 @@
          this.initObservation();
          this.initThemeColor();
        }, 500);
      },
      }
    },
    loadPageList: {
      handler(newVal, oldVal) {
        console.log(newVal, "this.loadPageList");
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
        }, 200);
      },
    },
      }
    }
  },
  mounted() {
    // é»˜è®¤åŠ è½½ç« èŠ‚
@@ -100,12 +99,14 @@
        },
        // æ¸²æŸ“笔记、高亮、划线
        renderSign: (type, data) => {
          this.renderSign(type, data);
          // å› ä¸ºè°ƒæ•´ä¸ºé¡µé¢æ‡’加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记；
          this.handelSignData(type, data);
          // this.renderSign(type, data);
        },
        // åˆ é™¤ç¬”记、高亮、划线
        delSign: (data) => {
          this.delSign(data);
        },
        }
      });
    }

@@ -114,13 +115,13 @@
    this.observer = new IntersectionObserver(this.pageChangeCallback, {
      root: null, // æŒ‡å®šæ ¹å…ƒç´ ï¼Œè¿™é‡Œè®¾ä¸º null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // æŒ‡å®šæ ¹å…ƒç´ çš„边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0.5, // æŒ‡å®šäº¤å‰æ¯”例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
      threshold: 0.5 // æŒ‡å®šäº¤å‰æ¯”例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
      root: null, // æŒ‡å®šæ ¹å…ƒç´ ï¼Œè¿™é‡Œè®¾ä¸º null，表示选取整个视窗作为根元素。
      rootMargin: "0px", // æŒ‡å®šæ ¹å…ƒç´ çš„边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
      threshold: 0, // æŒ‡å®šäº¤å‰æ¯”例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
      threshold: 0 // æŒ‡å®šäº¤å‰æ¯”例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    // å¯åŠ¨é¡µç è§‚察
@@ -131,21 +132,21 @@

    // æµ‹è¯•é¡µé¢è·³è½¬
    // setTimeout(() => {
    //   this.gotoPage(1, 11);
    //   //   setTimeout(() => {
    //   //     this.renderSign("Note", {
    //   //       id: "2ACA9359",
    //   //       txt: "营养素和热量，才能",
    //   //       page: "100",
    //   //       type: "Highlight",
    //   //       color: "#F5E12A"
    //   //     });
    //   //     setTimeout(() => {
    //   //       this.delSign({
    //   //         ids: ["2ACA9359"]
    //   //       });
    //   //     }, 2000);
    //   //   }, 1000);
    //   this.gotoPage(1, 10);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
    //       txt: "题一学习主题一 è¿åŠ¨",
    //       page: "10",
    //       type: "Highlight",
    //       color: "#F5E12A"
    //     });
    // setTimeout(() => {
    //   this.delSign({
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    //   }, 5000);
    // }, 1000);
  },
  methods: {
@@ -204,7 +205,7 @@
          this.showCatalogList = [
            this.catalogLength - 2,
            this.catalogLength - 1,
            this.catalogLength,
            this.catalogLength
          ];
        } else {
          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -225,6 +226,19 @@
      }
    },

    // å¤„理标记数据
    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) {
      const existence = (
@@ -235,29 +249,48 @@
        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":
            // é«˜äº®
            pageDom.innerHTML = pageDom.innerHTML.replace(
                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":
            // åˆ’线
            pageDom.innerHTML = pageDom.innerHTML.replace(
                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":
            // ç¬”è®°
            pageDom.innerHTML = pageDom.innerHTML.replace(
                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;
            }
          }
        }
      }
    },
@@ -416,10 +449,8 @@
            "chapter"
          );
          const catalog = catalogDom.getAttribute("num");
          console.log(page, "page", catalog, "catalog");
          let text = null;
          if (target.querySelector("p")) {
            console.log(target.querySelector("p").textContent.substring(0, 20));
            text = target.querySelector("p").textContent.substring(0, 20);
          }
          // è¿”回页码和章节信息
@@ -427,7 +458,7 @@
            this.$store.state.qiankun.pageChange({
              page: page,
              catalog: catalog,
              text,
              text
            });
          // const sections = Array.from(document.querySelectorAll(".section"));
          //sections：获取所有具有 .section ç±»åçš„元素，并转换为数组。
@@ -441,8 +472,7 @@
        if (entry.isIntersecting) {
          const target = entry.target;
          const page = target.getAttribute("page");
          if (this.loadPageList.indexOf(page) == -1) {
            //
          if (this.loadPageList.indexOf(Number(page)) == -1) {
            const catalogDom = this.tool.getParentNodeByClassName(
              target,
              "chapter"
@@ -457,6 +487,7 @@
            //           testData[catalog][page],
            //           this.config.activeBook
            //         );
                    
            //       } else {
            //         const obj = {};
            //         for (let key in testData[catalog][page]) {
@@ -468,11 +499,20 @@
            //         }
            //         this.questionData[page] = obj;
            //       }
            //       console.log('题目',this.questionData);
            //     }
            //   }
            // }
            // æ·»åŠ é¡µç 
            this.loadPageList.push(Number(page));
            console.log('页码列表',this.loadPageList);
            // æ¸²æŸ“这一页的标记
            for (const key in this.renderSignMap) {
              if (this.renderSignMap[key][page]) {
                this.renderSignMap[key][page].forEach((item) => {
                  this.renderSign(key, item);
                });
              }
            }
            if (this.loadPageList.length > 5) {
              // è¶…过5页
              this.loadPageList.shift();
@@ -492,22 +532,28 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // ä¸€ç»„三个
          spaceBetween: 30, // é—´éš”
          // å¦‚果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
            nextEl: (this.container ? this.container : document).querySelector(
              ".swiper-button-next"
            ),
            prevEl: (this.container ? this.container : document).querySelector(
              ".swiper-button-prev"
            )
          },
          // çª—口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true,
          // // å¦‚果需要分页器
          // pagination: {
          //   el: ".swiper-pagination",
          //   el: (this.container ? this.container : document).querySelector(
          //     ".swiper-pagination"
          //   ),
          //   clickable: true // åˆ†é¡µå™¨å¯ä»¥ç‚¹å‡»
          // }
        });
@@ -520,13 +566,18 @@
      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, // æ˜¾ç¤ºæ ‡é¢˜
          title: true // æ˜¾ç¤ºæ ‡é¢˜
        });
      }
    }
    },
  },
  components: {
    pageHeader,
    chapterOne,
  }
};
</script>
<style scoped lang="less">

 src/components/examinations/index.vue

@@ -445,6 +445,13 @@
      cardData:[]
    };
  },
  watch:{
    cardList:{
      handler(newVal) {
        console.log('11',newVal);
      }
    }
  },
  mounted() {
    this.cardData = this.cardList
    console.log('this.cardList',this.cardList);