新书

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,1750 +24,2004 @@
    </div>
    <!-- 2 -->
    <div class="page-box" page="8">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
          style="height: 100px; padding-left: 40px"
        >
          <div class="preface-header-box event-header-text-bc">
            <span class="l-text">新标准通用职场英语</span>
            <span class="g-text event-text-color">基础模块一</span>
          </div>
        </div>
      </div>
      <div class="padding-93">
        <div class="bodystyle">
          <h2 id="b001">
            <img class="img-0" alt="" src="../../assets/images/dy1-le1.jpg" />
          </h2>
          <h3 id="c001"><span class="bjh3">Warm-up</span></h3>
          <p>
            <b
              >Ⅰ.Write down the English words for the Chinese cultural symbols
              in the following pictures.</b
            >
            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                viewBox="0 0 20.501 20.501"
              >
                <path
                  class="a"
                  d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
            <!-- <button
              @click="showAnswerTwo = !showAnswerTwo"
              class="parimary-btn"
            >
              æ˜¾ç¤ºç­”案
            </button> -->
          </p>
          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgOne" :preview-src-list="[imgOne]" />
                </p>
                <p class="center">
                  1.<input
                    v-model="questionData.warnUp.one.value"
                    class="input-bottom-border fz-18"
                    @blur="handleQuestion('one')"
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <svg v-if="questionData.warnUp.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerTwo"
              >
                ç­”案：Chinese knot
              </p>
            </div>
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgTwo"
                    :preview-src-list="[imgTwo]"
                    style="width: 94%"
                  />
                </p>
                <p class="center">
                  2.<input
                    class="input-bottom-border fz-18"
                    v-model="questionData.warnUp.two.value"
                    @blur="handleQuestion('two')"
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <svg v-if="questionData.warnUp.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerTwo"
              >
                ç­”案：Chinese medicine
              </p>
            </div>
          </div>

          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgThree" :preview-src-list="[imgThree]" />
                </p>
                <p class="center">
                  3.<input
                    class="input-bottom-border fz-18"
                    v-model="questionData.warnUp.three.value"
                    @blur="handleQuestion('three')"
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <svg v-if="questionData.warnUp.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerTwo"
              >
                ç­”案：Chinese calligraphy
              </p>
            </div>
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgFour"
                    :preview-src-list="[imgFour]"
                    style="width: 93%"
                  />
                </p>
                <p class="center">
                  4.<input
                    class="input-bottom-border fz-18"
                    v-model="questionData.warnUp.four.value"
                    @blur="handleQuestion('four')"
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <svg v-if="questionData.warnUp.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerTwo"
              >
                ç­”案：Taichi
              </p>
            </div>
          </div>

          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgFive" :preview-src-list="[imgFive]" />
                </p>
                <p class="center">
                  5.<input
                    class="input-bottom-border fz-18"
                    v-model="questionData.warnUp.five.value"
                    @blur="handleQuestion('five')"
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <svg v-if="questionData.warnUp.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerTwo"
              >
                ç­”案：sweet dumpling
              </p>
            </div>
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgSix"
                    :preview-src-list="[imgSix]"
                    style="width: 92%"
                  />
                </p>
                <p class="center">
                  6.<input
                    class="input-bottom-border fz-18"
                    v-model="questionData.warnUp.six.value"
                    @blur="handleQuestion('six')"
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <svg v-if="questionData.warnUp.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerTwo"
              >
                ç­”案：Chinese chess
              </p>
            </div>
          </div>
          <p class="t0">
            <b>Ⅱ.What other symbols can you think of?</b>
            <!-- <button
              class="parimary-btn"
              @click="showAnswerOne = !showAnswerOne"
            >
              æ˜¾ç¤ºç­”案
            </button> -->
            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                viewBox="0 0 20.501 20.501"
              >
                <path
                  class="a"
                  d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
          </p>
          <p class="t0">
            <input
              v-model="questionData.warnUp.seven"
              class="input-bottom-border fz-18"
              style="width: 100%"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="width: 100%"
            v-if="showAnswerOne"
      <div v-if="showPageList.indexOf(8) > -1">
        <div class="w100 mb-20" style="padding-right: 20px">
          <div
            class="event-header-bc fl al-end"
            style="height: 100px; padding-left: 40px"
          >
            ç­”案：1. Hanfu 2. Qipao 3. Tang Suit 4. Chinese tea 5. Chinese silk
            6. Chinese calligraphy & painting 7. Chinese embroidery 8. Chinese
            papercut 9. Chinese lantern 10. Moon cake 11. Memorial archway 12.
            Chopsticks 13. Compass 14. Chinese kite 15. Kungfu 16. Opera facial
            makeup
          </p>
            <div class="preface-header-box event-header-text-bc">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text event-text-color">基础模块一</span>
            </div>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">2</span>
        <div class="padding-93">
          <div class="bodystyle">
            <h2 id="b001">
              <img class="img-0" alt="" src="../../assets/images/dy1-le1.jpg" />
            </h2>
            <h3 id="c001"><span class="bjh3">Warm-up</span></h3>
            <p>
              <b
                >Ⅰ.Write down the English words for the Chinese cultural symbols
                in the following pictures.</b
              >
              <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20.501"
                  height="20.501"
                  viewBox="0 0 20.501 20.501"
                >
                  <path
                    class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)"
                  />
                </svg>
              </span>
            </p>
            <div class="openImgBox">
              <div class="fl ju-bt">
                <div class="left" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0012-1.jpg" class="w100" />
                    </p>
                    <p class="center">
                      1.<input
                        v-model="questionData.warnUp.one.value"
                        class="input-bottom-border fz-18"
                        @blur="handleQuestion('one')"
                        @change="setBookQuestion"
                      />
                      <span class="icon-box">
                        <svg v-if="questionData.warnUp.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="questionData.warnUp.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerTwo"
                  >
                    ç­”案：Chinese knot
                  </p>
                </div>
                <div class="right" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0012-2.jpg" style="width: 94%" />
                    </p>
                    <p class="center">
                      2.<input
                        class="input-bottom-border fz-18"
                        v-model="questionData.warnUp.two.value"
                        @blur="handleQuestion('two')"
                        @change="setBookQuestion"
                      />
                      <span class="icon-box">
                        <svg v-if="questionData.warnUp.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="questionData.warnUp.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerTwo"
                  >
                    ç­”案：Chinese medicine
                  </p>
                </div>
              </div>
    
              <div class="fl ju-bt">
                <div class="left" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0012-3.jpg" class="w100" />
                    </p>
                    <p class="center">
                      3.<input
                        class="input-bottom-border fz-18"
                        v-model="questionData.warnUp.three.value"
                        @blur="handleQuestion('three')"
                        @change="setBookQuestion"
                      />
                      <span class="icon-box">
                        <svg v-if="questionData.warnUp.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="questionData.warnUp.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerTwo"
                  >
                    ç­”案：Chinese calligraphy
                  </p>
                </div>
                <div class="right" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0012-4.jpg" style="width: 93%" />
                    </p>
                    <p class="center">
                      4.<input
                        class="input-bottom-border fz-18"
                        v-model="questionData.warnUp.four.value"
                        @blur="handleQuestion('four')"
                        @change="setBookQuestion"
                      />
                      <span class="icon-box">
                        <svg v-if="questionData.warnUp.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="questionData.warnUp.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerTwo"
                  >
                    ç­”案：Taichi
                  </p>
                </div>
              </div>
    
              <div class="fl ju-bt">
                <div class="left" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0012-5.jpg" class="w100" />
                    </p>
                    <p class="center">
                      5.<input
                        class="input-bottom-border fz-18"
                        v-model="questionData.warnUp.five.value"
                        @blur="handleQuestion('five')"
                        @change="setBookQuestion"
                      />
                      <span class="icon-box">
                        <svg v-if="questionData.warnUp.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="questionData.warnUp.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerTwo"
                  >
                    ç­”案：sweet dumpling
                  </p>
                </div>
                <div class="right" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0012-6.jpg" style="width: 92%" />
                    </p>
                    <p class="center">
                      6.<input
                        class="input-bottom-border fz-18"
                        v-model="questionData.warnUp.six.value"
                        @blur="handleQuestion('six')"
                        @change="setBookQuestion"
                      />
                      <span class="icon-box">
                        <svg v-if="questionData.warnUp.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="questionData.warnUp.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerTwo"
                  >
                    ç­”案：Chinese chess
                  </p>
                </div>
              </div>
            </div>
            <p class="t0">
              <b>Ⅱ.What other symbols can you think of?</b>
              <!-- <button
                class="parimary-btn"
                @click="showAnswerOne = !showAnswerOne"
              >
                æ˜¾ç¤ºç­”案
              </button> -->
              <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20.501"
                  height="20.501"
                  viewBox="0 0 20.501 20.501"
                >
                  <path
                    class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)"
                  />
                </svg>
              </span>
            </p>
            <p class="t0">
              <input
                v-model="questionData.warnUp.seven"
                class="input-bottom-border fz-18"
                style="width: 100%"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="width: 100%"
              v-if="showAnswerOne"
            >
              ç­”案：1. Hanfu 2. Qipao 3. Tang Suit 4. Chinese tea 5. Chinese silk
              6. Chinese calligraphy & painting 7. Chinese embroidery 8. Chinese
              papercut 9. Chinese lantern 10. Moon cake 11. Memorial archway 12.
              Chopsticks 13. Compass 14. Chinese kite 15. Kungfu 16. Opera facial
              makeup
            </p>
          </div>
        </div>
        <div class="preface-bottom">
          <span class="contet-num-box">2</span>
        </div>
      </div>
    </div>
    <!-- 3 -->
    <div class="page-box" page="9">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
          <span class="chapter-left-bc">MODULE 1</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl"
            >CHINA,A WONDERLAND</span
          >
        </li>
      </ul>
      <div class="padding-102">
        <div class="bodystyle">
          <h3 id="c002" class="fl al-cn">
            <span class="bjh3">Listening</span>
            <audio :src="resource.listenOne" controls></audio>
          </h3>
          <p>
            <b
              >Four foreigners are talking about their impressions on Chinese
              culture.Listen to the recording and match the items with the
              corresponding descriptions.</b
      <div v-if="showPageList.indexOf(9) > -1">
        <ul class="preface-odd-header w100 fl ju-bt">
          <li class=""></li>
          <li class="fz-18">
            <span class="chapter-left-bc">MODULE 1</span>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </p>
          <p class="center">
            <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
          </p>
          <h3 id="c003" class="fl al-cn">
            <span class="bjh3">Reading</span>
            <audio :src="resource.readingOne" controls></audio>
          </h3>
          <p>
            1.How was Chinese culture introduced to the world in ancient times?
            <!-- <button
              class="parimary-btn"
              @click="showAnswerThree = !showAnswerThree"
            >
              æ˜¾ç¤ºç­”案
            </button> -->
            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                viewBox="0 0 20.501 20.501"
          </li>
        </ul>
        <div class="padding-102">
          <div class="bodystyle">
            <h3 id="c002" class="fl al-cn">
              <span class="bjh3">Listening</span>
              <audio :src="resource.listenOne" controls></audio>
            </h3>
            <p>
              <b
                >Four foreigners are talking about their impressions on Chinese
                culture.Listen to the recording and match the items with the
                corresponding descriptions.</b
              >
                <path
                  class="a"
                  d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
          </p>
          <textarea
            v-model="questionData.reading.one"
            placeholder="请输入内容"
            rows="6"
            style="margin-left: 40px; width: 92%"
            class="fz-16 fm-son"
            @change="setBookQuestion"
          ></textarea>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 91%"
            v-if="showAnswerThree"
          >
            ç­”案：The Silk Road &nbsp;&nbsp;&nbsp; Immigrants Sinologist
          </p>
          <p>
            2.China offers so much to see and explore.What took you by surprise
            about China?
            <!-- <button
              class="parimary-btn"
              @click="showAnswerFour = !showAnswerFour"
            >
              æ˜¾ç¤ºç­”案
            </button> -->
            <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                viewBox="0 0 20.501 20.501"
            </p>
            <p class="center">
              <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
            </p>
            <h3 id="c003" class="fl al-cn">
              <span class="bjh3">Reading</span>
              <audio :src="resource.readingOne" controls></audio>
            </h3>
            <p>
              1.How was Chinese culture introduced to the world in ancient times?
              <!-- <button
                class="parimary-btn"
                @click="showAnswerThree = !showAnswerThree"
              >
                <path
                  class="a"
                  d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
          </p>
          <textarea
            v-model="questionData.reading.two"
            placeholder="请输入内容"
            rows="6"
            style="margin-left: 40px; width: 92%"
            class="fz-16 fm-son"
            @change="setBookQuestion"
          ></textarea>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 91%"
            v-if="showAnswerFour"
          >
            ç­”案：(1)Various delicious food (2)Unique architectures (3)Beautiful
            (4)Intangible cultural heritage, such as Taichi, shadow puppet show,
            traditional Chinese medicine, Peking Opera scenery
          </p>
          <p class="center"><b>My Experience in Wonderland</b></p>
          <p class="block">
            â€œSo how was your journey to China?” asks Alexandra.“Highly
            enjoyable,” responds Alice.“You should visit it sometime.”
          </p>
          <p class="right">
            â€”<i>Alice in Wonderland </i>(“Through the Looking Glass”)
          </p>
          <p>
            My
            <span class="word-bc" @click="saveWord($event, 'incredible')"
              >incredible</span
                æ˜¾ç¤ºç­”案
              </button> -->
              <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20.501"
                  height="20.501"
                  viewBox="0 0 20.501 20.501"
                >
                  <path
                    class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)"
                  />
                </svg>
              </span>
            </p>
            <textarea
              v-model="questionData.reading.one"
              placeholder="请输入内容"
              rows="6"
              style="margin-left: 40px; width: 92%"
              class="fz-16 fm-son"
              @change="setBookQuestion"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 91%"
              v-if="showAnswerThree"
            >
            journey to China started in 2017 when I got selected as a foreign
            student for PhD studies at one university.When I arrived in China,I
            was like Alice in Alice in Wonderland.I was curious about the
            people,the culture,the
            <span class="word-bc" @click="saveWord($event, 'cuisine')"
              >cuisine</span
              ç­”案：The Silk Road &nbsp;&nbsp;&nbsp; Immigrants Sinologist
            </p>
            <p>
              2.China offers so much to see and explore.What took you by surprise
              about China?
              <!-- <button
                class="parimary-btn"
                @click="showAnswerFour = !showAnswerFour"
              >
                æ˜¾ç¤ºç­”案
              </button> -->
              <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20.501"
                  height="20.501"
                  viewBox="0 0 20.501 20.501"
                >
                  <path
                    class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)"
                  />
                </svg>
              </span>
            </p>
            <textarea
              v-model="questionData.reading.two"
              placeholder="请输入内容"
              rows="6"
              style="margin-left: 40px; width: 92%"
              class="fz-16 fm-son"
              @change="setBookQuestion"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 91%"
              v-if="showAnswerFour"
            >
            and of course the huge variety of
            <span class="word-bc" @click="saveWord($event, 'landscapes')"
              >landscapes</span
            >.
          </p>
          <p>
            I found many great people and made several Chinese friends along the
            way.These friends made me see China through the eyes of the locals.I
            always found Chinese people very friendly and
            <span class="word-bc" @click="saveWord($event, 'hospitable')"
              >hospitable</span
            >
            towards foreigners.These Chinese friends made my understanding of
            Chinese culture and
            <span class="word-bc" @click="saveWord($event, 'civilization')"
              >civilization</span
            >
            much easier,enjoyable and memorable.I consider China my second home
            and love it like my own country!
          </p>
          <p>
            You cannot
            <span class="word-bc" @click="saveWord($event, 'explore')"
              >explore</span
            >
            China properly if you do not try its delicious variety of food.If
            you ate
          </p>
              ç­”案：(1)Various delicious food (2)Unique architectures (3)Beautiful
              (4)Intangible cultural heritage, such as Taichi, shadow puppet show,
              traditional Chinese medicine, Peking Opera scenery
            </p>
            <p class="center"><b>My Experience in Wonderland</b></p>
            <p class="block">
              â€œSo how was your journey to China?” asks Alexandra.“Highly
              enjoyable,” responds Alice.“You should visit it sometime.”
            </p>
            <p class="right">
              â€”<i>Alice in Wonderland </i>(“Through the Looking Glass”)
            </p>
            <p>
              My
              <span class="word-bc" @click="saveWord($event, 'incredible')"
                >incredible</span
              >
              journey to China started in 2017 when I got selected as a foreign
              student for PhD studies at one university.When I arrived in China,I
              was like Alice in Alice in Wonderland.I was curious about the
              people,the culture,the
              <span class="word-bc" @click="saveWord($event, 'cuisine')"
                >cuisine</span
              >
              and of course the huge variety of
              <span class="word-bc" @click="saveWord($event, 'landscapes')"
                >landscapes</span
              >.
            </p>
            <p>
              I found many great people and made several Chinese friends along the
              way.These friends made me see China through the eyes of the locals.I
              always found Chinese people very friendly and
              <span class="word-bc" @click="saveWord($event, 'hospitable')"
                >hospitable</span
              >
              towards foreigners.These Chinese friends made my understanding of
              Chinese culture and
              <span class="word-bc" @click="saveWord($event, 'civilization')"
                >civilization</span
              >
              much easier,enjoyable and memorable.I consider China my second home
              and love it like my own country!
            </p>
            <p>
              You cannot
              <span class="word-bc" @click="saveWord($event, 'explore')"
                >explore</span
              >
              China properly if you do not try its delicious variety of food.If
              you ate
            </p>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">3</span>
        <div class="preface-bottom">
          <span class="contet-num-box">3</span>
        </div>
      </div>
    </div>
    <!-- 4 -->
    <div class="page-box" page="10">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
          style="height: 100px; padding-left: 40px"
        >
          <div class="preface-header-box event-header-text-bc">
            <span class="l-text">新标准通用职场英语</span>
            <span class="g-text event-text-color">基础模块一</span>
      <div v-if="showPageList.indexOf(10) > -1">
        <div class="w100 mb-20" style="padding-right: 20px">
          <div
            class="event-header-bc fl al-end"
            style="height: 100px; padding-left: 40px"
          >
            <div class="preface-header-box event-header-text-bc">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text event-text-color">基础模块一</span>
            </div>
          </div>
        </div>
      </div>
      <div class="padding-93">
        <div class="bodystyle">
          <p class="t0">
            a new kind of food every day for one whole year,the list of Chinese
            food would still never end! Though I love to eat almost all kinds of
            Chinese cuisine,I found Sichuan and Hunan cuisine quite
            <span class="word-bc" @click="saveWord($event, 'mouth-watering')"
              >mouth-watering</span
            >
            and
            <span class="word-bc" @click="saveWord($event, 'stimulating')"
              >stimulating</span
            >.For a
            <span class="word-bc" @click="saveWord($event, 'foodie')"
              >foodie</span
            >
            like me,China is a heaven.I simply cannot live without Chinese food.
          </p>
          <p>
            Like I said earlier,China is a huge wonderland.It has thousands of
            years of rich and beautiful culture.Every city you visit tells you
            its own story and history.From the big and advanced cities like
            Shanghai or Guangzhou to the ancient cities like Xi’an and
            Hangzhou,each city has its
            <span class="word-bc" @click="saveWord($event, 'unique')"
              >unique</span
            >
            <span
              class="word-bc"
              style="margin-left: 5px"
              @click="saveWord($event, 'atmosphere')"
              >atmosphere</span
            >
            that attracts you.I visited more than a dozen cities and came across
            their charming features and unique landscapes such as Huangshan,the
            Great Wall,Canton Tower.
          </p>
          <p>
            There is so much to explore and I am looking forward to it during my
            stay.This is a whole new exciting experience for me,and it will
            always be remembered.
          </p>
          <!-- <p class="center">
            <img class="img-g" alt="" src="../../assets/images/0014-1.jpg" />
          </p> -->
          <p class="fl al-cn mt-40">
            <span class="zt-cs " style="font-size:20px">Words &amp; Expressions</span>
            <span class="line-border-box"></span>
          </p>
          <audio
            :src="resource.readingTwo"
            controls
            style="margin-left: 10px"
          ></audio>
          <p>wonderland /ˈwʌndəlænd/ <i>n.</i> æœ‰è®¸å¤šå¥‡å¦™äº‹ç‰©çš„地方</p>
          <div class="bkbj">
            <p><i>land or place full of marvels or wonderful things</i></p>
          </div>
          <p>incredible /ɪnˈkredəbl/ <i>adj.</i> éš¾ä»¥ç½®ä¿¡çš„</p>
          <div class="bkbj">
            <p><i>impossible or very difficult to believe</i></p>
          </div>
          <p>
            cuisine /kwɪˈziːn/ <i>n.</i> ï¼ˆé€šå¸¸æŒ‡æ˜‚贵的餐馆中的） é¥­èœï¼Œèœè‚´
          </p>
          <div class="bkbj">
            <p>
              <i>the food served in a restaurant (usually an expensive one)</i>
            </p>
          </div>
          <p>landscape /ˈlændskeɪp/ <i>n.</i> ï¼ˆé™†ä¸Šï¼‰ é£Žæ™¯ï¼Œæ™¯è‰²</p>
          <div class="bkbj">
            <p><i>scenery of an area of land</i></p>
          </div>
          <p>hospitable /hɒˈspɪtəbl/ <i>adj.</i> å¥½å®¢çš„</p>
          <div class="bkbj">
            <p><i>pleased to welcome and entertain guests</i></p>
          </div>
          <p>
            civilization /ˌsɪvəlaɪˈzeɪʃn/ <i>n.</i> ï¼ˆç‰¹å®šæ—¶æœŸæˆ–地区的）
            ç¤¾ä¼šæ–‡æ˜Ž
          </p>
          <div class="bkbj">
            <p>
              <i
                >a society,its culture and its way of life (during a particular
                period of time or in a particular part of the world)</i
        <div class="padding-93">
          <div class="bodystyle">
            <p class="t0">
              a new kind of food every day for one whole year,the list of Chinese
              food would still never end! Though I love to eat almost all kinds of
              Chinese cuisine,I found Sichuan and Hunan cuisine quite
              <span class="word-bc" @click="saveWord($event, 'mouth-watering')"
                >mouth-watering</span
              >
            </p>
          </div>
          <p>explore /ɪkˈsplɔː(r)/ <i>v.</i> æŽ¢ç´¢ï¼›è€ƒå¯Ÿ</p>
          <div class="bkbj">
            <p>
              <i
                >to travel into or around an area or a country in order to learn
                about it</i
              and
              <span class="word-bc" @click="saveWord($event, 'stimulating')"
                >stimulating</span
              >.For a
              <span class="word-bc" @click="saveWord($event, 'foodie')"
                >foodie</span
              >
              like me,China is a heaven.I simply cannot live without Chinese food.
            </p>
          </div>
          <p>mouth-watering <i>adj.</i> ä»¤äººåž‚涎的；美味的</p>
          <div class="bkbj">
            <p><i>that makes one want to eat; extremely delicious</i></p>
            <p>
              Like I said earlier,China is a huge wonderland.It has thousands of
              years of rich and beautiful culture.Every city you visit tells you
              its own story and history.From the big and advanced cities like
              Shanghai or Guangzhou to the ancient cities like Xi’an and
              Hangzhou,each city has its
              <span class="word-bc" @click="saveWord($event, 'unique')"
                >unique</span
              >
              <span
                class="word-bc"
                style="margin-left: 5px"
                @click="saveWord($event, 'atmosphere')"
                >atmosphere</span
              >
              that attracts you.I visited more than a dozen cities and came across
              their charming features and unique landscapes such as Huangshan,the
              Great Wall,Canton Tower.
            </p>
            <p>
              There is so much to explore and I am looking forward to it during my
              stay.This is a whole new exciting experience for me,and it will
              always be remembered.
            </p>
            <!-- <p class="center">
              <img class="img-g" alt="" src="../../assets/images/0014-1.jpg" />
            </p> -->
            <p class="fl al-cn mt-40">
              <span class="zt-cs " style="font-size:20px">Words &amp; Expressions</span>
              <span class="line-border-box"></span>
            </p>
            <audio
              :src="resource.readingTwo"
              controls
              style="margin-left: 10px"
            ></audio>
            <p>wonderland /ˈwʌndəlænd/ <i>n.</i> æœ‰è®¸å¤šå¥‡å¦™äº‹ç‰©çš„地方</p>
            <div class="bkbj">
              <p><i>land or place full of marvels or wonderful things</i></p>
            </div>
            <p>incredible /ɪnˈkredəbl/ <i>adj.</i> éš¾ä»¥ç½®ä¿¡çš„</p>
            <div class="bkbj">
              <p><i>impossible or very difficult to believe</i></p>
            </div>
            <p>
              cuisine /kwɪˈziːn/ <i>n.</i> ï¼ˆé€šå¸¸æŒ‡æ˜‚贵的餐馆中的） é¥­èœï¼Œèœè‚´
            </p>
            <div class="bkbj">
              <p>
                <i>the food served in a restaurant (usually an expensive one)</i>
              </p>
            </div>
            <p>landscape /ˈlændskeɪp/ <i>n.</i> ï¼ˆé™†ä¸Šï¼‰ é£Žæ™¯ï¼Œæ™¯è‰²</p>
            <div class="bkbj">
              <p><i>scenery of an area of land</i></p>
            </div>
            <p>hospitable /hɒˈspɪtəbl/ <i>adj.</i> å¥½å®¢çš„</p>
            <div class="bkbj">
              <p><i>pleased to welcome and entertain guests</i></p>
            </div>
            <p>
              civilization /ˌsɪvəlaɪˈzeɪʃn/ <i>n.</i> ï¼ˆç‰¹å®šæ—¶æœŸæˆ–地区的）
              ç¤¾ä¼šæ–‡æ˜Ž
            </p>
            <div class="bkbj">
              <p>
                <i
                  >a society,its culture and its way of life (during a particular
                  period of time or in a particular part of the world)</i
                >
              </p>
            </div>
            <p>explore /ɪkˈsplɔː(r)/ <i>v.</i> æŽ¢ç´¢ï¼›è€ƒå¯Ÿ</p>
            <div class="bkbj">
              <p>
                <i
                  >to travel into or around an area or a country in order to learn
                  about it</i
                >
              </p>
            </div>
            <p>mouth-watering <i>adj.</i> ä»¤äººåž‚涎的；美味的</p>
            <div class="bkbj">
              <p><i>that makes one want to eat; extremely delicious</i></p>
            </div>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">4</span>
        <div class="preface-bottom">
          <span class="contet-num-box">4</span>
        </div>
      </div>
    </div>
    <!-- 5 -->
    <div class="page-box" page="11">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
          <span class="chapter-left-bc">MODULE 1</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl"
            >CHINA,A WONDERLAND</span
          >
        </li>
      </ul>
      <div class="padding-93">
        <div class="bodystyle">
          <p>stimulating /ˈstɪmjuleɪtɪŋ/ <i>adj.</i> å¢žåŠ æ´»åŠ›çš„；增进健康的</p>
          <div class="bkbj">
            <p>
              <i>making you feel more active and healthy</i> foodie /ˈfuːdi/
              <i>n.</i> åƒè´§ï¼›ç¾Žé£Ÿå®¶
            </p>
          </div>
          <p>
            <i
              >a person who is very interested in cooking and eating different
              kinds of food</i
      <div v-if="showPageList.indexOf(11) > -1">
        <ul class="preface-odd-header w100 fl ju-bt">
          <li class=""></li>
          <li class="fz-18">
            <span class="chapter-left-bc">MODULE 1</span>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
            unique /ju<i>ˈ</i>niːk/ <i>adj.</i> å”¯ä¸€çš„；独一无二的
          </p>
          <div class="bkbj">
            <p><i>being the only one of its type</i></p>
          </div>
          <p>atmosphere /ˈætməsfɪə(r)/ <i>n.</i> æ°”氛；氛围</p>
          <div class="bkbj">
          </li>
        </ul>
        <div class="padding-93">
          <div class="bodystyle">
            <p>stimulating /ˈstɪmjuleɪtɪŋ/ <i>adj.</i> å¢žåŠ æ´»åŠ›çš„；增进健康的</p>
            <div class="bkbj">
              <p>
                <i>making you feel more active and healthy</i> foodie /ˈfuːdi/
                <i>n.</i> åƒè´§ï¼›ç¾Žé£Ÿå®¶
              </p>
            </div>
            <p>
              <i
                >the feeling or mood that you have in a particular place or
                situation</i
                >a person who is very interested in cooking and eating different
                kinds of food</i
              >
              unique /ju<i>ˈ</i>niːk/ <i>adj.</i> å”¯ä¸€çš„；独一无二的
            </p>
          </div>
          <p>get selected as ...被选为……</p>
          <p>(a) variety of ...各种各样的……</p>
          <p>come across å¶é‡ï¼›ç¢°åˆ°</p>
          <p>be curious about ...对……感到好奇</p>
          <p>along the way æ²¿é€”</p>
          <div class="bj-note">
            <p class="m0 "><b class="fz-18">Notes:</b></p>
            <p class="m0">
              <i>Alice in Wonderland</i> ï¼ˆ<i
                >Alice's Adventures in Wonderland</i
              >的简写，中文译为《爱丽丝梦游仙境》），是19世纪英国作家刘易斯·卡罗尔创作的著名儿童文学作品，讲述了一个名叫爱丽丝的英国小女孩为了追逐一只揣着怀表、会说话的兔子而不慎掉入了兔子洞，从而进入了一个神奇的国度并经历了一系列奇幻冒险的故事。
            <div class="bkbj">
              <p><i>being the only one of its type</i></p>
            </div>
            <p>atmosphere /ˈætməsfɪə(r)/ <i>n.</i> æ°”氛；氛围</p>
            <div class="bkbj">
              <p>
                <i
                  >the feeling or mood that you have in a particular place or
                  situation</i
                >
              </p>
            </div>
            <p>get selected as ...被选为……</p>
            <p>(a) variety of ...各种各样的……</p>
            <p>come across å¶é‡ï¼›ç¢°åˆ°</p>
            <p>be curious about ...对……感到好奇</p>
            <p>along the way æ²¿é€”</p>
            <div class="bj-note">
              <p class="m0 "><b class="fz-18">Notes:</b></p>
              <p class="m0">
                <i>Alice in Wonderland</i> ï¼ˆ<i
                  >Alice's Adventures in Wonderland</i
                >的简写，中文译为《爱丽丝梦游仙境》），是19世纪英国作家刘易斯·卡罗尔创作的著名儿童文学作品，讲述了一个名叫爱丽丝的英国小女孩为了追逐一只揣着怀表、会说话的兔子而不慎掉入了兔子洞，从而进入了一个神奇的国度并经历了一系列奇幻冒险的故事。
              </p>
            </div>
            <p><b>Ⅰ.Reading comprehension.</b></p>
            <p>
              A.Mark the items that made the author curious when she arrived in
              China.
            </p>
            <p>
              <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> 
              Language</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>
          <p><b>Ⅰ.Reading comprehension.</b></p>
          <p>
            A.Mark the items that made the author curious when she arrived in
            China.
          </p>
          <p>
            <input type="checkbox" name="ball" value="basketball" id="1" checked="checked"/> 
            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>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">5</span>
        <div class="preface-bottom">
          <span class="contet-num-box">5</span>
        </div>
      </div>
    </div>
    <!-- 6 -->
    <div class="page-box" page="12">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
          style="height: 100px; padding-left: 40px"
        >
          <div class="preface-header-box event-header-text-bc">
            <span class="l-text">新标准通用职场英语</span>
            <span class="g-text event-text-color">基础模块一</span>
      <div v-if="showPageList.indexOf(12) > -1">
        <div class="w100 mb-20" style="padding-right: 20px">
          <div
            class="event-header-bc fl al-end"
            style="height: 100px; padding-left: 40px"
          >
            <div class="preface-header-box event-header-text-bc">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text event-text-color">基础模块一</span>
            </div>
          </div>
        </div>
      </div>
      <div class="padding-93">
        <div class="bodystyle">
          <p>
            B.Write down the answer to each question according to the passage.
          </p>
          <p>1.What’re the author’s comments about Chinese food?</p>
          <textarea
            v-model="testData.tx.one"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：Chinese food is very delicious. Sichuan and Hunan cuisines are
            quite mouth-watering and stimulating.
          </p>
          <p>2.When and why did the author start her journey to China?</p>
          <textarea
            v-model="testData.tx.two"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：When the author got selected as a foreign student for PhD
            studies at one university in 2017, she started her journey to China.
          </p>
          <p>3.What are the author’s expectations of her stay in China?</p>
          <textarea
            v-model="testData.tx.three"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：The author looks forward to exploring more during her stay.
          </p>
          <p>4.What did the author think of Chinese people?</p>
          <textarea
            v-model="testData.tx.four"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：The author thought the local Chinese were very friendly and
            hospitable.
          </p>
          <p>5.What’s the author’s impression of the cities in China?</p>
          <textarea
            v-model="testData.tx.five"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：Each city has its unique atmosphere with charming features and
            unique landscapes.
          </p>
          Each city has its unique atmosphere with charming features and unique
          landscapes.
          <p><b>Ⅱ.Language focus.</b></p>
          <p>
            A.Fill in the blanks with the proper words in the passage.The
            initial letters of the words have been given.
          </p>
          <p>
            In 2017,the author arrived in China.When she arrived,she was like
            Alice in <i>Alice in Wonderland</i>.She was curious about the
            people,the culture,the c<input
              type="text"
              class="input-bottom-border"
              style="width: 60px"
              v-model="testData.in.one"
            />
            ,and of course the huge variety of l<input
              v-model="testData.in.two"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />.Chinese friends helped her a lot in understanding Chinese culture
            and c<input
              v-model="testData.in.three"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />.The author believes that one cannot e<input
              type="text"
              v-model="testData.in.four"
              class="input-bottom-border"
              style="width: 60px"
            />China properly if he/she does not try its delicious variety of
            food.China has thousands of years of rich and beautiful culture.Each
            city has its u<input
              v-model="testData.in.five"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />atmosphere that attracts people.
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：cuisine, landscapes, civilization, explore, unique
          </p>
          <p>
            B.Underline the following expressions in the passage and make
            sentences with them.
          </p>
          <p>
            1.get selected as<input
              v-model="testData.line.one"
              type="text"
              class="input-bottom-border"
              style="width: 77%"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：She got selected as the cultural ambassador to show Chinese
            culture on campus.
          </p>
          <p>
            2.be curious about<input
              v-model="testData.line.two"
              type="text"
              class="input-bottom-border"
              style="width: 75%"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：Many foreigners are curious about the amazing Chinese martial
            arts.
          </p>
          <p>
            3.along the way<input
              v-model="testData.line.three"
              type="text"
              class="input-bottom-border"
              style="width: 77%"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：I suggest that you go to Tibet by train so that you can enjoy
            the natural scenery along the way.
          </p>
          <p>
            4.come across<input
              v-model="testData.line.four"
              type="text"
              class="input-bottom-border"
              style="width: 79%"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：He came across the temple fair in Beijing during the Spring
            Festival.
          </p>
          <p>
            5.look forward to<input
              v-model="testData.line.five"
              type="text"
              class="input-bottom-border"
              style="width: 76%"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：She is looking forward to visiting the incredible cities in
            China.
          </p>
        <div class="padding-93">
          <div class="bodystyle">
            <p>
              B.Write down the answer to each question according to the passage.
            </p>
            <p>1.What’re the author’s comments about Chinese food?</p>
            <textarea
              v-model="testData.tx.one"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：Chinese food is very delicious. Sichuan and Hunan cuisines are
              quite mouth-watering and stimulating.
            </p>
            <p>2.When and why did the author start her journey to China?</p>
            <textarea
              v-model="testData.tx.two"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：When the author got selected as a foreign student for PhD
              studies at one university in 2017, she started her journey to China.
            </p>
            <p>3.What are the author’s expectations of her stay in China?</p>
            <textarea
              v-model="testData.tx.three"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：The author looks forward to exploring more during her stay.
            </p>
            <p>4.What did the author think of Chinese people?</p>
            <textarea
              v-model="testData.tx.four"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：The author thought the local Chinese were very friendly and
              hospitable.
            </p>
            <p>5.What’s the author’s impression of the cities in China?</p>
            <textarea
              v-model="testData.tx.five"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
            ></textarea>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：Each city has its unique atmosphere with charming features and
              unique landscapes.
            </p>
            Each city has its unique atmosphere with charming features and unique
            landscapes.
            <p><b>Ⅱ.Language focus.</b></p>
            <p>
              A.Fill in the blanks with the proper words in the passage.The
              initial letters of the words have been given.
            </p>
            <p>
              In 2017,the author arrived in China.When she arrived,she was like
              Alice in <i>Alice in Wonderland</i>.She was curious about the
              people,the culture,the c<input
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                v-model="testData.in.one"
              />
              ,and of course the huge variety of l<input
                v-model="testData.in.two"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />.Chinese friends helped her a lot in understanding Chinese culture
              and c<input
                v-model="testData.in.three"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />.The author believes that one cannot e<input
                type="text"
                v-model="testData.in.four"
                class="input-bottom-border"
                style="width: 60px"
              />China properly if he/she does not try its delicious variety of
              food.China has thousands of years of rich and beautiful culture.Each
              city has its u<input
                v-model="testData.in.five"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />atmosphere that attracts people.
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：cuisine, landscapes, civilization, explore, unique
            </p>
            <p>
              B.Underline the following expressions in the passage and make
              sentences with them.
            </p>
            <p>
              1.get selected as<input
                v-model="testData.line.one"
                type="text"
                class="input-bottom-border"
                style="width: 77%"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：She got selected as the cultural ambassador to show Chinese
              culture on campus.
            </p>
            <p>
              2.be curious about<input
                v-model="testData.line.two"
                type="text"
                class="input-bottom-border"
                style="width: 75%"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：Many foreigners are curious about the amazing Chinese martial
              arts.
            </p>
            <p>
              3.along the way<input
                v-model="testData.line.three"
                type="text"
                class="input-bottom-border"
                style="width: 77%"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：I suggest that you go to Tibet by train so that you can enjoy
              the natural scenery along the way.
            </p>
            <p>
              4.come across<input
                v-model="testData.line.four"
                type="text"
                class="input-bottom-border"
                style="width: 79%"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：He came across the temple fair in Beijing during the Spring
              Festival.
            </p>
            <p>
              5.look forward to<input
                v-model="testData.line.five"
                type="text"
                class="input-bottom-border"
                style="width: 76%"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：She is looking forward to visiting the incredible cities in
              China.
            </p>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">6</span>
        <div class="preface-bottom">
          <span class="contet-num-box">6</span>
        </div>
      </div>
    </div>
    <!-- 7 -->
    <div class="page-box" page="13">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
          <span class="chapter-left-bc">MODULE 1</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl"
            >CHINA,A WONDERLAND</span
          >
        </li>
      </ul>
      <div class="padding-93">
        <div class="bodystyle">
          <p>C.Translate the following sentences into Chinese.</p>
          <p>
            1.Confucius created an atmosphere of education for the ordinary
            people.
          </p>
          <p>
            <input
              v-model="testData.ts.one"
              type="text"
              class="input-bottom-border"
      <div v-if="showPageList.indexOf(13) > -1">
        <ul class="preface-odd-header w100 fl ju-bt">
          <li class=""></li>
          <li class="fz-18">
            <span class="chapter-left-bc">MODULE 1</span>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <div class="padding-93">
          <div class="bodystyle">
            <p>C.Translate the following sentences into Chinese.</p>
            <p>
              1.Confucius created an atmosphere of education for the ordinary
              people.
            </p>
            <p>
              <input
                v-model="testData.ts.one"
                type="text"
                class="input-bottom-border"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：孔子开创了平民化的教育。
            </p>
            <p>
              2.Lei Zu invented the technology of reeling silk（缫丝术）and
              greatly promoted the development of ancient Chinese civilization.
            </p>
            <p>
              <input
                v-model="testData.ts.two"
                type="text"
                class="input-bottom-border"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：嫘祖发明了中国缫丝技术，这极大地促进了中国古代文明的发展。
            </p>
            <p>
              3.Lu Yu,the author of <i>The Classic of Tea</i>,explored Chinese tea
              culture in depth.
            </p>
            <p>
              <input
                v-model="testData.ts.three"
                type="text"
                class="input-bottom-border"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：陆羽，《茶经》的作者，对中国茶道进行了深入的研究。
            </p>
            <p>
              4.Zhang Zhongjing was a doctor who had an incredible influence on
              Chinese medical science.
            </p>
            <p>
              <input
                v-model="testData.ts.four"
                type="text"
                class="input-bottom-border"
              />
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：张仲景是一位对中国医学有着重大影响的医学家。
            </p>
            <p>
              <b>Ⅲ.Grammar focus:The conditional sentence—if-clause.</b>
              <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"
              :src="imgThirteen"
              :preview-src-list="[imgThirteen]"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：孔子开创了平民化的教育。
          </p>
          <p>
            2.Lei Zu invented the technology of reeling silk（缫丝术）and
            greatly promoted the development of ancient Chinese civilization.
          </p>
          <p>
            <input
              v-model="testData.ts.two"
              type="text"
              class="input-bottom-border"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：嫘祖发明了中国缫丝技术，这极大地促进了中国古代文明的发展。
          </p>
          <p>
            3.Lu Yu,the author of <i>The Classic of Tea</i>,explored Chinese tea
            culture in depth.
          </p>
          <p>
            <input
              v-model="testData.ts.three"
              type="text"
              class="input-bottom-border"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：陆羽，《茶经》的作者，对中国茶道进行了深入的研究。
          </p>
          <p>
            4.Zhang Zhongjing was a doctor who had an incredible influence on
            Chinese medical science.
          </p>
          <p>
            <input
              v-model="testData.ts.four"
              type="text"
              class="input-bottom-border"
            />
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：张仲景是一位对中国医学有着重大影响的医学家。
          </p>
          <p>
            <b>Ⅲ.Grammar focus:The conditional sentence—if-clause.</b>
            <button class="parimary-btn" @click="showAnswer('showImg')">
              å›¾ç‰‡
            </button>
          </p>
          <el-image
            v-if="showImg"
            :src="imgThirteen"
            :preview-src-list="[imgThirteen]"
          />
          <p>A.Combine the following sentences into if-clauses.</p>
          <p>
            1.Try using sticks.You can enjoy the fun of having a real Chinese
            meal.
          </p>
          <p>
            <b>If</b
            ><input
              v-model="testData.gr.one"
              type="text"
              class="input-bottom-border"
            />.
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：If you try using sticks, you can enjoy the fun of having a
            real Chinese meal.
          </p>
          <p>
            2.Go to my Chinese New Year party.You will meet my Chinese friends
            there.
          </p>
          <p>
            <b>If</b
            ><input
              v-model="testData.gr.two"
              type="text"
              class="input-bottom-border"
            />.
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：If you go to my Chinese New Year party, you will meet my
            Chinese friends there.
          </p>
          <p>3.Drink some Longjing tea,and you will love it.</p>
          <p>
            <b>If</b
            ><input
              type="text"
              v-model="testData.gr.three"
              class="input-bottom-border"
            />.
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：If you drink some Longjing tea, you will love it.
          </p>
          <p>
            4.One day I will go to Xi’an,and I will visit the terracotta
            warriors.
          </p>
          <p>
            <b>If</b
            ><input
              v-model="testData.gr.four"
              type="text"
              class="input-bottom-border"
            />.
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案：If I go to Xi’an one day, I will visit the terracotta
            warriors.
          </p>
          <p>
            5.Ask foreigners about their favorite Chinese food.Kung Pao Chicken
            would possibly be in top three.
          </p>
          <p>
            <b>If</b
            ><input
              v-model="testData.gr.five"
              type="text"
              class="input-bottom-border"
            />.
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案： If you ask foreigners about their favorite Chinese food, Kung
            Pao Chicken would possible be in top three
          </p>
          <p>
            B.Complete the following sentences using <i>if</i> or
            <i>whether</i>.
          </p>
          <p>
            1.I was wondering<input
              v-model="testData.cm.one"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />to go for a walk in the Summer Palace.
          </p>
          <p>
            2.We can spend the afternoon on the beach<input
              v-model="testData.cm.two"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />the weather is fine.
          </p>
          <p>
            3.I called Wang to find out<input
              v-model="testData.cm.three"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />or not he really went to see the Peking opera show.
          </p>
          <p>
            4.We’re not interested in<input
              v-model="testData.cm.four"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />we get great jobs and that kind of thing.
          </p>
          <p>
            5.<input
              v-model="testData.cm.five"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />I go to Sichuan,I will visit Chengdu Research Base of Giant Panda
            Breeding.
          </p>
          <p
            class="event-header-text-bc pd-5"
            style="margin-left: 40px; width: 93%"
            v-if="showQuestionAnswer"
          >
            ç­”案： 1.whether &nbsp; 2.if &nbsp; 3.whether &nbsp; 4.whether
            &nbsp; 5.if
          </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 @click="setTestData" class="btn-border btn-w">
                  ä¿å­˜
                </button>
              </li>
              <li>
                <button
                style="min-height:24px"
                  @click="showQuestionAnswer = !showQuestionAnswer"
                  class="parimary-btn"
                >
                  æŸ¥çœ‹ç­”案
                </button>
              </li>
            </ul>
            <p>A.Combine the following sentences into if-clauses.</p>
            <p>
              1.Try using sticks.You can enjoy the fun of having a real Chinese
              meal.
            </p>
            <p>
              <b>If</b
              ><input
                v-model="testData.gr.one"
                type="text"
                class="input-bottom-border"
              />.
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：If you try using sticks, you can enjoy the fun of having a
              real Chinese meal.
            </p>
            <p>
              2.Go to my Chinese New Year party.You will meet my Chinese friends
              there.
            </p>
            <p>
              <b>If</b
              ><input
                v-model="testData.gr.two"
                type="text"
                class="input-bottom-border"
              />.
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：If you go to my Chinese New Year party, you will meet my
              Chinese friends there.
            </p>
            <p>3.Drink some Longjing tea,and you will love it.</p>
            <p>
              <b>If</b
              ><input
                type="text"
                v-model="testData.gr.three"
                class="input-bottom-border"
              />.
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：If you drink some Longjing tea, you will love it.
            </p>
            <p>
              4.One day I will go to Xi’an,and I will visit the terracotta
              warriors.
            </p>
            <p>
              <b>If</b
              ><input
                v-model="testData.gr.four"
                type="text"
                class="input-bottom-border"
              />.
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案：If I go to Xi’an one day, I will visit the terracotta
              warriors.
            </p>
            <p>
              5.Ask foreigners about their favorite Chinese food.Kung Pao Chicken
              would possibly be in top three.
            </p>
            <p>
              <b>If</b
              ><input
                v-model="testData.gr.five"
                type="text"
                class="input-bottom-border"
              />.
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案： If you ask foreigners about their favorite Chinese food, Kung
              Pao Chicken would possible be in top three
            </p>
            <p>
              B.Complete the following sentences using <i>if</i> or
              <i>whether</i>.
            </p>
            <p>
              1.I was wondering<input
                v-model="testData.cm.one"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />to go for a walk in the Summer Palace.
            </p>
            <p>
              2.We can spend the afternoon on the beach<input
                v-model="testData.cm.two"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />the weather is fine.
            </p>
            <p>
              3.I called Wang to find out<input
                v-model="testData.cm.three"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />or not he really went to see the Peking opera show.
            </p>
            <p>
              4.We’re not interested in<input
                v-model="testData.cm.four"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />we get great jobs and that kind of thing.
            </p>
            <p>
              5.<input
                v-model="testData.cm.five"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />I go to Sichuan,I will visit Chengdu Research Base of Giant Panda
              Breeding.
            </p>
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              ç­”案： 1.whether &nbsp; 2.if &nbsp; 3.whether &nbsp; 4.whether
              &nbsp; 5.if
            </p>
            <div class="w100 fl ju-cn">
              <ul class="fl ju-ev" style="width: 50%">
                <li><button class="btn-border btn-w" @click="saveData">提交</button></li>
                <li>
                  <button @click="setTestData" class="btn-border btn-w">
                    ä¿å­˜
                  </button>
                </li>
                <li>
                  <button
                  style="min-height:24px"
                    @click="showQuestionAnswer = !showQuestionAnswer"
                    class="parimary-btn"
                  >
                    æŸ¥çœ‹ç­”案
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">7</span>
        <div class="preface-bottom">
          <span class="contet-num-box">7</span>
        </div>
      </div>
    </div>
    <!-- 8 -->
    <div class="page-box" page="14">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
          style="height: 100px; padding-left: 40px"
        >
          <div class="preface-header-box event-header-text-bc">
            <span class="l-text">新标准通用职场英语</span>
            <span class="g-text event-text-color">基础模块一</span>
          </div>
        </div>
      </div>
      <div class="padding-93">
        <div class="bodystyle">
          <h3 id="c004"><span class="bjh3">Mini-project</span></h3>
          <p>
            China is a great country with a fascinating culture.Its ancient
            civilization,rich history,and unique customs make it one of the most
            interesting countries in the world.There are so many interesting
            facts about Chinese culture.Work in groups and interview your group
            members about their knowledge of Chinese culture,and then:
          </p>
          <p>1.Find out interesting facts they know about Chinese culture;</p>
          <p>2.Finish the worksheet and report to the class.</p>
          <div class="fieldset">
            <p>Questions:1.Who are you going to interview?</p>
            <p>　　　　2.What is he/she interested in about Chinese culture?</p>
            <p>　　　　3.What does he/she know about it?</p>
          </div>
          <p class="left">
            <img
              class="img-gn"
              alt=""
              src="../../assets/images/dy1-worksheet.jpg"
            />
          </p>
          <table
            border="1"
            cellpadding="4"
            cellspacing="0"
            style="border-color: #fff"
            class="fz-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"
            style="height: 100px; padding-left: 40px"
          >
            <tr class="table-th-bc">
              <td class="tl-cn">Interviewees</td>
              <td class="wh-no tl-cn">Chinese Culture</td>
              <td class="tl-cn">Interesting Facts He/She Knows About lt</td>
            </tr>
            <tr class="table-tr-bc">
              <td class="tl-cn">Wang Ning</td>
              <td class="wh-no tl-cn">Chinese Tea</td>
              <td>
                China, known as the hometown of tea, is the world's
                earliestcountry to plant tea, make tea, and drink tea. Chinese
                peoplehave developed different varieties of tea with unique
                flavors,such as green tea, black tea, white tea, and dark tea.
                Drinkingtea is benefcial to our health.
              </td>
            </tr>
            <tr class="table-tr-bc">
              <td>
                <textarea
                  v-model="questionData.table.one"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.two"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.three"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
            </tr>
            <tr class="table-tr-bc">
              <td>
                <textarea
                  v-model="questionData.table.four"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.five"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.six"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
            </tr>
            <tr class="table-tr-bc">
              <td>
                <textarea
                  v-model="questionData.table.seven"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.enight"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.nine"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
            </tr>
          </table>
          <p class="left">
            <img
              class="img-gn"
              alt=""
              src="../../assets/images/dy1-wordbank.jpg"
            />
          </p>
          <div class="bk-wh">
            <p class="dl-box">
              <span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'exquisite')"
                >exquisite</span
              >
              <span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'ancient')"
                >ancient</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'incredible')"
                >incredible</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'unique')"
                >unique</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'traditional')"
                >traditional</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'outstanding')"
                >outstanding</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'mouth-watering')"
                >mouth-watering</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'diverse')"
                >diverse</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'hospitable')"
                >hospitable</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'enjoyable')"
                >enjoyable</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'memorable')"
                >memorable</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'charming')"
                >charming</span
              >
            </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"
            >
              <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"
                />
              </el-carousel-item>
            </el-carousel>
            <div class="preface-header-box event-header-text-bc">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text event-text-color">基础模块一</span>
            </div>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">8</span>
        <div class="padding-93">
          <div class="bodystyle">
            <h3 id="c004"><span class="bjh3">Mini-project</span></h3>
            <p>
              China is a great country with a fascinating culture.Its ancient
              civilization,rich history,and unique customs make it one of the most
              interesting countries in the world.There are so many interesting
              facts about Chinese culture.Work in groups and interview your group
              members about their knowledge of Chinese culture,and then:
            </p>
            <p>1.Find out interesting facts they know about Chinese culture;</p>
            <p>2.Finish the worksheet and report to the class.</p>
            <div class="fieldset">
              <p>Questions:1.Who are you going to interview?</p>
              <p>　　　　2.What is he/she interested in about Chinese culture?</p>
              <p>　　　　3.What does he/she know about it?</p>
            </div>
            <p class="left">
              <img
                class="img-gn"
                alt=""
                src="../../assets/images/dy1-worksheet.jpg"
              />
            </p>
            <table
              border="1"
              cellpadding="4"
              cellspacing="0"
              style="border-color: #fff"
              class="fz-14"
            >
              <tr class="table-th-bc">
                <td class="tl-cn">Interviewees</td>
                <td class="wh-no tl-cn">Chinese Culture</td>
                <td class="tl-cn">Interesting Facts He/She Knows About lt</td>
              </tr>
              <tr class="table-tr-bc">
                <td class="tl-cn">Wang Ning</td>
                <td class="wh-no tl-cn">Chinese Tea</td>
                <td>
                  China, known as the hometown of tea, is the world's
                  earliestcountry to plant tea, make tea, and drink tea. Chinese
                  peoplehave developed different varieties of tea with unique
                  flavors,such as green tea, black tea, white tea, and dark tea.
                  Drinkingtea is benefcial to our health.
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td>
                  <textarea
                    v-model="questionData.table.one"
                    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 textarea-box"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
                <td>
                  <textarea
                    v-model="questionData.table.three"
                    class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td>
                  <textarea
                    v-model="questionData.table.four"
                    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 textarea-box"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
                <td>
                  <textarea
                    v-model="questionData.table.six"
                    class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td>
                  <textarea
                    v-model="questionData.table.seven"
                    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 textarea-box"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
                <td>
                  <textarea
                    v-model="questionData.table.nine"
                    class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
              </tr>
            </table>
            <p class="left">
              <img
                class="img-gn"
                alt=""
                src="../../assets/images/dy1-wordbank.jpg"
              />
            </p>
            <div class="bk-wh">
              <p class="dl-box">
                <span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'exquisite')"
                  >exquisite</span
                >
                <span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'ancient')"
                  >ancient</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'incredible')"
                  >incredible</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'unique')"
                  >unique</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'traditional')"
                  >traditional</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'outstanding')"
                  >outstanding</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'mouth-watering')"
                  >mouth-watering</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'diverse')"
                  >diverse</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'hospitable')"
                  >hospitable</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'enjoyable')"
                  >enjoyable</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'memorable')"
                  >memorable</span
                ><span
                  class="word-bc mr-20 dl-span"
                  @click="saveWord($event, 'charming')"
                  >charming</span
                >
              </p>
            </div>
            <div class="resource-primary-border" style="padding: 8px">
              <div class="banshi openImgBox">
                  <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <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_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>
        <div class="preface-bottom">
          <span class="contet-num-box">8</span>
        </div>
      </div>
    </div>
    <!-- 9 -->
    <div class="page-box" page="15">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
          <span class="chapter-left-bc">MODULE 1</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl"
            >CHINA,A WONDERLAND</span
          >
        </li>
      </ul>
      <div class="padding-93">
        <div class="bodystyle">
          <h2 id="b002">
            <img class="img-0" alt="" src="image/dy1-le2.jpg" />
          </h2>
          <h3 id="c005"><span class="bjh3">Warm-up</span></h3>
          <p>
            <b
              >Put the expressions in the box below on the corresponding answer
              line under each picture.</b
      <div v-if="showPageList.indexOf(15) > -1">
        <ul class="preface-odd-header w100 fl ju-bt">
          <li class=""></li>
          <li class="fz-18">
            <span class="chapter-left-bc">MODULE 1</span>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </p>
          <div class="bk-wh">
          </li>
        </ul>
        <div class="padding-93">
          <div class="bodystyle">
            <h2 id="b002">
              <img class="img-0" alt="" src="image/dy1-le2.jpg" />
            </h2>
            <h3 id="c005"><span class="bjh3">Warm-up</span></h3>
            <p>
              online shopping　facial recognition　electronic payment　intercity
              train　shared bike　take-away service
              <b
                >Put the expressions in the box below on the corresponding answer
                line under each picture.</b
              >
            </p>
          </div>
          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgSeven" :preview-src-list="[imgSeven]" />
                </p>
                <p class="center">
                  1.
                  <select v-model="dropdownData.one.value">
                    <option
                      v-for="(item, index) in dropDownList"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span class="icon-box">
                    <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerFive"
              >
                ç­”案：intercity train
            <div class="bk-wh">
              <p>
                online shopping　facial recognition　electronic payment　intercity
                train　shared bike　take-away service
              </p>
            </div>
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgEnight"
                    :preview-src-list="[imgEnight]"
                    style="width: 98%"
                  />
                </p>
                <p class="center">
                  2.
                  <select v-model="dropdownData.two.value">
                    <option
                      v-for="(item, index) in dropDownList"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span class="icon-box">
                    <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
            <div class="openImgBox">
              <div class="fl ju-bt">
                <div class="left" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0019-1.jpg" alt="" class="w100" />
                    </p>
                    <p class="center">
                      1.
                      <select v-model="dropdownData.one.value">
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
                          :value="item"
                        >
                          {{ item }}
                        </option>
                      </select>
                      <span class="icon-box">
                        <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="dropdownData.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerFive"
                  >
                    ç­”案：intercity train
                  </p>
                </div>
                <div class="right" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0019-2.jpg" alt="" style="width: 98%" />
                    </p>
                    <p class="center">
                      2.
                      <select v-model="dropdownData.two.value">
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
                          :value="item"
                        >
                          {{ item }}
                        </option>
                      </select>
                      <span class="icon-box">
                        <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="dropdownData.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerFive"
                  >
                    ç­”案：online shopping
                  </p>
                </div>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerFive"
              >
                ç­”案：online shopping
              </p>
            </div>
          </div>

          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgNine" :preview-src-list="[imgNine]" />
                </p>
                <p class="center">
                  3.
                  <select v-model="dropdownData.three.value">
                    <option
                      v-for="(item, index) in dropDownList"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span class="icon-box">
                    <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
    
              <div class="fl ju-bt">
                <div class="left" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0019-3.jpg" alt="" style="width: 98%" />
                    </p>
                    <p class="center">
                      3.
                      <select v-model="dropdownData.three.value">
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
                          :value="item"
                        >
                          {{ item }}
                        </option>
                      </select>
                      <span class="icon-box">
                        <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="dropdownData.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerFive"
                  >
                    ç­”案：electronic payment
                  </p>
                </div>
                <div class="right" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0019-4.jpg" alt=""  style="width: 94%" />
                    </p>
                    <p class="center">
                      4.
                      <select v-model="dropdownData.four.value">
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
                          :value="item"
                        >
                          {{ item }}
                        </option>
                      </select>
                      <span class="icon-box">
                        <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="dropdownData.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerFive"
                  >
                    ç­”案：shared bike
                  </p>
                </div>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerFive"
              >
                ç­”案：electronic payment
              </p>
            </div>
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgTen"
                    :preview-src-list="[imgTen]"
                    style="width: 94%"
                  />
                </p>
                <p class="center">
                  4.
                  <select v-model="dropdownData.four.value">
                    <option
                      v-for="(item, index) in dropDownList"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span class="icon-box">
                    <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
    
              <div class="fl ju-bt">
                <div class="left" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0019-5.jpg" alt=""  class="w100" />
                    </p>
                    <p class="center">
                      5.
                      <select v-model="dropdownData.five.value">
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
                          :value="item"
                        >
                          {{ item }}
                        </option>
                      </select>
                      <span class="icon-box">
                        <svg v-if="dropdownData.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="dropdownData.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerFive"
                  >
                    ç­”案：take-away service
                  </p>
                </div>
                <div class="right" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0019-6.jpg" alt="" style="width: 98%" />
                    </p>
                    <p class="center">
                      6.
                      <select v-model="dropdownData.six.value">
                        <option
                          v-for="(item, index) in dropDownList"
                          :key="index"
                          :value="item"
                        >
                          {{ item }}
                        </option>
                      </select>
                      <span class="icon-box">
                        <svg v-if="dropdownData.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg v-if="dropdownData.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerFive"
                  >
                    ç­”案：facial recognition
                  </p>
                </div>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerFive"
              >
                ç­”案：shared bike
              </p>
            </div>
          </div>

          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgEleven" :preview-src-list="[imgEleven]" />
                </p>
                <p class="center">
                  5.
                  <select v-model="dropdownData.five.value">
                    <option
                      v-for="(item, index) in dropDownList"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span class="icon-box">
                    <svg v-if="dropdownData.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
            <div class="w100 fl ju-cn">
              <div class="fl ju-ev" style="width: 60%">
                <button @click="setDropdownData" class="btn-border btn-w">
                  ä¿å­˜
                </button>
                <button class="btn-border btn-w" @click="handleDropdown('judge')">
                  æäº¤
                </button>
                <button
                style="min-height:24px"
                  @click="showAnswerFive = !showAnswerFive"
                  class="parimary-btn"
                >
                  æŸ¥çœ‹ç­”案
                </button>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerFive"
              >
                ç­”案：take-away service
              </p>
            </div>
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgTwelve"
                    :preview-src-list="[imgTwelve]"
                    style="width: 98%"
                  />
                </p>
                <p class="center">
                  6.
                  <select v-model="dropdownData.six.value">
                    <option
                      v-for="(item, index) in dropDownList"
                      :key="index"
                      :value="item"
                    >
                      {{ item }}
                    </option>
                  </select>
                  <span class="icon-box">
                    <svg v-if="dropdownData.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
              <p
                class="event-header-text-bc pd-5"
                style="width: 90%"
                v-if="showAnswerFive"
              >
                ç­”案：facial recognition
              </p>
            </div>
          </div>
          <div class="w100 fl ju-cn">
            <div class="fl ju-ev" style="width: 60%">
              <button @click="setDropdownData" class="btn-border btn-w">
                ä¿å­˜
              </button>
              <button class="btn-border btn-w" @click="handleDropdown('judge')">
                æäº¤
              </button>
              <button
              style="min-height:24px"
                @click="showAnswerFive = !showAnswerFive"
                class="parimary-btn"
              >
                æŸ¥çœ‹ç­”案
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">9</span>
        <div class="preface-bottom">
          <span class="contet-num-box">9</span>
        </div>
      </div>
    </div>
  </div>
@@ -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">
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
      </p>
      <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">
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
      </p>
      <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,109 +76,115 @@
    </div>
    <!-- 3 -->
    <div class="page-box " page="4">
      <div class="pd-20 ">
        <div class="preface w100 fl al-end ju-cn">
          <h1 id="a003" class="front preface-text">前言</h1>
        </div>  
      </div>
      <div class="bodystyle padding-93 pb-104 ">
        <p>
          ã€Šæ–°æ ‡å‡†é€šç”¨èŒåœºè‹±è¯­ã€‹çš„编写团队以党的教育方针为宗旨，贯彻党的二十大报告精神，对标《高等职业教育专科英语课程标准（2021年版）》，遵循《高等学校课程思政建设指导纲要》的要求，参照《中国英语能力等级量表》四级和五级能力要求，立足高职英语教学实际，进行设计和编写，既注重提升学生的核心素养、促进普职融通，又全方位融入课程思政，落实立德树人根本任务。
        </p>
        <p class="center primary-title-color "><b>一、教材编写理念</b></p>
        <p><span class="kaiti">1.全面贯彻落实新课程标准要求</span></p>
        <p>
          ã€Šæ–°æ ‡å‡†é€šç”¨èŒåœºè‹±è¯­ã€‹ç³»åˆ—教材全面对标《高等职业教育专科英语课程标准（2021年版）》，充分突出高职英语课程的思想性、科学性、职业性、时代性，关注各学段的衔接性，实现价值引领，培养学生的必备能力和关键能力。
        </p>
        <p>
          <span class="kaiti ">2.全程融入课程思政，彰显语言课程的育人功能</span>
        </p>
        <p>
          æ•™æä»Žå•å…ƒä¸»é¢˜ã€ç´ æé€‰å–、练习设置等各方面综合设计，紧密联系中国社会和文化，弘扬正能量。在提升学生核心素养的同时，引导学生关注社会，关注他人，潜移默化地培养学生的家国情怀和人文素养，增强学生在多元文化交流环境中讲述中国故事和推介中国文化的能力。教材以“立德树人”为根本任务，立足新时代中国职业教育大背景，以职业为关键词，选取职业与个人、职业与社会、职业与环境主题的语言材料，在助力语言教学的同时，引导学生贡献社会、关心社会、爱岗敬业，实现公共英语课程培根铸魂、启智增慧的功能，促进学生全面发展。
        </p>
        <p><span class="kaiti">3.基于产出导向理念，实施项目化教学</span></p>
        <p>
          æ•™æåŸºäºŽäº§å‡ºå¯¼å‘的理念，打破传统听、说、读、写分板块编写的体例，进行一单元一项目的项目化教学设计，综合运用听、说、读、写、看等多种语言技能和融媒体手段，搭建语言支架，层层递进，环环相扣，助力学生最终完成单元项目任务。
        </p>
      <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>
          </div>  
        </div>
        <div class="bodystyle padding-93 pb-104 ">
          <p>
            ã€Šæ–°æ ‡å‡†é€šç”¨èŒåœºè‹±è¯­ã€‹çš„编写团队以党的教育方针为宗旨，贯彻党的二十大报告精神，对标《高等职业教育专科英语课程标准（2021年版）》，遵循《高等学校课程思政建设指导纲要》的要求，参照《中国英语能力等级量表》四级和五级能力要求，立足高职英语教学实际，进行设计和编写，既注重提升学生的核心素养、促进普职融通，又全方位融入课程思政，落实立德树人根本任务。
          </p>
          <p class="center primary-title-color "><b>一、教材编写理念</b></p>
          <p><span class="kaiti">1.全面贯彻落实新课程标准要求</span></p>
          <p>
            ã€Šæ–°æ ‡å‡†é€šç”¨èŒåœºè‹±è¯­ã€‹ç³»åˆ—教材全面对标《高等职业教育专科英语课程标准（2021年版）》，充分突出高职英语课程的思想性、科学性、职业性、时代性，关注各学段的衔接性，实现价值引领，培养学生的必备能力和关键能力。
          </p>
          <p>
            <span class="kaiti ">2.全程融入课程思政，彰显语言课程的育人功能</span>
          </p>
          <p>
            æ•™æä»Žå•å…ƒä¸»é¢˜ã€ç´ æé€‰å–、练习设置等各方面综合设计，紧密联系中国社会和文化，弘扬正能量。在提升学生核心素养的同时，引导学生关注社会，关注他人，潜移默化地培养学生的家国情怀和人文素养，增强学生在多元文化交流环境中讲述中国故事和推介中国文化的能力。教材以“立德树人”为根本任务，立足新时代中国职业教育大背景，以职业为关键词，选取职业与个人、职业与社会、职业与环境主题的语言材料，在助力语言教学的同时，引导学生贡献社会、关心社会、爱岗敬业，实现公共英语课程培根铸魂、启智增慧的功能，促进学生全面发展。
          </p>
          <p><span class="kaiti">3.基于产出导向理念，实施项目化教学</span></p>
          <p>
            æ•™æåŸºäºŽäº§å‡ºå¯¼å‘的理念，打破传统听、说、读、写分板块编写的体例，进行一单元一项目的项目化教学设计，综合运用听、说、读、写、看等多种语言技能和融媒体手段，搭建语言支架，层层递进，环环相扣，助力学生最终完成单元项目任务。
          </p>
        </div>
      </div>
    </div>
    <!-- 4 -->
    <div class="page-box" page="5">
      <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">
            <span class="l-text">新标准通用职场英语</span>
            <span class="g-text g-color">基础模块一</span>
      <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">
              <span class="l-text">新标准通用职场英语</span>
              <span class="g-text g-color">基础模块一</span>
            </div>
          </div>
        </div>
      </div>
      <div class="padding-93">
        <p><span class="kaiti">4.满足教与学的多元需求</span></p>
        <p>
          é«˜èŒæ‰©æ‹›ä¹‹åŽï¼Œå­¦ç”Ÿå‘ˆå¤šå…ƒåŒ–层级结构，对学习的需求也变得多元化。本套教材，基于高职学生公共英语课程的现状调研，聚焦教学内容、教学活动、教学模式等方面，着力开发新形态教材和相关资源，满足高职院校学生的多种学习需求。
        </p>
        <p class="center primary-title-color"><b>二、教材体系设计</b></p>
        <p><span class="kaiti">1.项目为导向的单元设计</span></p>
        <p>
          æ¯ä¸ªå•å…ƒåŒ…含三个子项目。输入材料由浅入深，从语言、内容、结构上逐渐搭建支架，引领学生有针对性地探索、学习，最终完成单元项目。
        </p>
        <p><span class="kaiti">2.职场为导向的情境设置</span></p>
        <p>
          å°†å•å…ƒé¡¹ç›®èžå…¥èŒåœºæƒ…境，结合行业和企业对高职学生语言技能的要求，从求职应聘、生产服务、营销售后等典型职业场景规划语言学习内容，创设学习情境和具体学习任务，培养学生在职场环境中用英语进行沟通的能力及解决职场问题的能力。
        </p>
        <p><span class="kaiti">3.混合式学习为导向的教学模式</span></p>
        <p>
          ä¾æ‰˜åŒ—师大“京师乐学”和“京师E课”平台，开发与教材深度融合的移动数字级创新慕课平台。数字课程包含视频微课、在线练习、互动讨论等，与教材有机结合，相互依托。线上线下深度融合，赋能教学。
        </p>
        <p class="center primary-title-color"><b>三、教材特色</b></p>
        <p>1.紧扣新课标要求，突出学生核心素养培养，落实立德树人根本任务</p>
        <p>
          åŸºäºŽå­¦ç”ŸçŽ°æœ‰çš„英语水平和未来的工作需求，针对基础模块课程，结合职场情境设计任务，通过多模态语篇和不同类型体裁的学习素材，夯实学生的听、说、读、写、译、看等技能，提高学生的职场涉外沟通能力，开拓学生的国际视野。单元项目设置聚焦思辨和创新思维训练，旨在提升学生的语言思维能力，使其养成善于探究的思维品格。自我评估环节旨在检测学生的学习效果，使其适时调整学习策略，促进自主学能的提升。
        </p>
        <p>
          <span class="kaiti">2.运用信息技术，建设融媒体资源，赋能教学</span>
        </p>
        <p>
          åœ¨éµå¾ªè¯­è¨€ä¹ å¾—规律的基础上，探究将传统纸质教材融入丰富的融媒体教学资源的路径与方法，充分利用现代化的教学手段和出版社的信息化平台，克服传统教材知识容量有限、内容更新周期慢、图文形式单一、缺乏与学生的互动和反馈等的局限性，针对当代学生依赖互联网、注重阅读体验、感知和接受新事物
        </p>
      </div>
      <div class="preface-bottom">
        <span class="num-box">2</span>
        <div class="padding-93">
          <p><span class="kaiti">4.满足教与学的多元需求</span></p>
          <p>
            é«˜èŒæ‰©æ‹›ä¹‹åŽï¼Œå­¦ç”Ÿå‘ˆå¤šå…ƒåŒ–层级结构，对学习的需求也变得多元化。本套教材，基于高职学生公共英语课程的现状调研，聚焦教学内容、教学活动、教学模式等方面，着力开发新形态教材和相关资源，满足高职院校学生的多种学习需求。
          </p>
          <p class="center primary-title-color"><b>二、教材体系设计</b></p>
          <p><span class="kaiti">1.项目为导向的单元设计</span></p>
          <p>
            æ¯ä¸ªå•å…ƒåŒ…含三个子项目。输入材料由浅入深，从语言、内容、结构上逐渐搭建支架，引领学生有针对性地探索、学习，最终完成单元项目。
          </p>
          <p><span class="kaiti">2.职场为导向的情境设置</span></p>
          <p>
            å°†å•å…ƒé¡¹ç›®èžå…¥èŒåœºæƒ…境，结合行业和企业对高职学生语言技能的要求，从求职应聘、生产服务、营销售后等典型职业场景规划语言学习内容，创设学习情境和具体学习任务，培养学生在职场环境中用英语进行沟通的能力及解决职场问题的能力。
          </p>
          <p><span class="kaiti">3.混合式学习为导向的教学模式</span></p>
          <p>
            ä¾æ‰˜åŒ—师大“京师乐学”和“京师E课”平台，开发与教材深度融合的移动数字级创新慕课平台。数字课程包含视频微课、在线练习、互动讨论等，与教材有机结合，相互依托。线上线下深度融合，赋能教学。
          </p>
          <p class="center primary-title-color"><b>三、教材特色</b></p>
          <p>1.紧扣新课标要求，突出学生核心素养培养，落实立德树人根本任务</p>
          <p>
            åŸºäºŽå­¦ç”ŸçŽ°æœ‰çš„英语水平和未来的工作需求，针对基础模块课程，结合职场情境设计任务，通过多模态语篇和不同类型体裁的学习素材，夯实学生的听、说、读、写、译、看等技能，提高学生的职场涉外沟通能力，开拓学生的国际视野。单元项目设置聚焦思辨和创新思维训练，旨在提升学生的语言思维能力，使其养成善于探究的思维品格。自我评估环节旨在检测学生的学习效果，使其适时调整学习策略，促进自主学能的提升。
          </p>
          <p>
            <span class="kaiti">2.运用信息技术，建设融媒体资源，赋能教学</span>
          </p>
          <p>
            åœ¨éµå¾ªè¯­è¨€ä¹ å¾—规律的基础上，探究将传统纸质教材融入丰富的融媒体教学资源的路径与方法，充分利用现代化的教学手段和出版社的信息化平台，克服传统教材知识容量有限、内容更新周期慢、图文形式单一、缺乏与学生的互动和反馈等的局限性，针对当代学生依赖互联网、注重阅读体验、感知和接受新事物
          </p>
        </div>
        <div class="preface-bottom">
          <span class="num-box">2</span>
        </div>
      </div>
    </div>
    <!-- 5 -->
    <div class="page-box" page="6">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class="left primary-bc "></li>
        <li>
          <span class="primary-bc">前&nbsp;言</span>
          <span class="y-bc"></span>
        </li>
      </ul>
      <div class="padding-93">
        <p class="t0">
          èƒ½åŠ›å¼ºçš„特点，更新教材内容和呈现形式，应用信息技术和资源，形成“纸质教材+微课堂+云资源”
          ç­‰èžåª’体教学资源的线上线下教学新形态，满足学生碎片化学习、自主学习、个性化学习的需求，增加学生的参与度，从而提高学生的学习效率。
        </p>
        <p class="center"><b>四、教材创新</b></p>
        <p><span class="kaiti">1.项目导向，任务创设情境化</span></p>
        <p>
          æ•™æç¼–写团队紧扣新课标主题类别话题要求，以层层递进的项目化任务为引领，通过引导学生完成精心设计的情境语言任务，帮助学生全面学习并掌握与主题和情境相关的语言文化知识，提高学生的语言沟通交流能力。
        </p>
        <p><span class="kaiti">2.学用结合，能力培养系统化</span></p>
        <p>
          æ•™æé‡‡ç”¨ç³»ç»ŸåŒ–的教学设计，以发展学生的核心素养为核心，将学用结合的原则贯穿教学活动全过程，让学生习得的技能有用武之地。
        </p>
        <p class="center"><b>五、编写队伍</b></p>
        <p>
          ã€Šæ–°æ ‡å‡†é€šç”¨èŒåœºè‹±è¯­ã€‹ç³»åˆ—教材由成都纺织高等专科学校的王朝晖担任总主编，由四川文轩职业学院的刘大利、四川建筑职业技术学院的罗忠明和邓冬至担任主编，本册由成都纺织高等专科学校的贾丽萍、成都职业技术学院的刘海燕、四川开放大学的侯书华担任副主编。具体编写人员均为多年从事高职公共英语教学与研究的领军人物、骨干教师、双师型素质教师。编写团队教学、管理经验丰富，熟悉语言教学规律，了解职业教育理念，关注职业教育教学的政策和动态，确保了本套教材的编写质量。
        </p>
        <p>
          å›¿äºŽæ°´å¹³ï¼Œæ•™æç–æ¼ä¹‹å¤„难免。我们真诚欢迎专家、师生对教材提出宝贵意见和建议，以便我们动态完善教材，更好地服务高职外语教育教学，服务广大师生。
        </p>
      </div>
      <div class="preface-bottom" style="margin-top: 236px">
        <span class="num-box">3</span>
      <div v-if="showPageList.indexOf(6) > -1">        
        <ul class="preface-odd-header w100 fl ju-bt">
          <li class="left primary-bc "></li>
          <li>
            <span class="primary-bc">前&nbsp;言</span>
            <span class="y-bc"></span>
          </li>
        </ul>
        <div class="padding-93">
          <p class="t0">
            èƒ½åŠ›å¼ºçš„特点，更新教材内容和呈现形式，应用信息技术和资源，形成“纸质教材+微课堂+云资源”
            ç­‰èžåª’体教学资源的线上线下教学新形态，满足学生碎片化学习、自主学习、个性化学习的需求，增加学生的参与度，从而提高学生的学习效率。
          </p>
          <p class="center"><b>四、教材创新</b></p>
          <p><span class="kaiti">1.项目导向，任务创设情境化</span></p>
          <p>
            æ•™æç¼–写团队紧扣新课标主题类别话题要求，以层层递进的项目化任务为引领，通过引导学生完成精心设计的情境语言任务，帮助学生全面学习并掌握与主题和情境相关的语言文化知识，提高学生的语言沟通交流能力。
          </p>
          <p><span class="kaiti">2.学用结合，能力培养系统化</span></p>
          <p>
            æ•™æé‡‡ç”¨ç³»ç»ŸåŒ–的教学设计，以发展学生的核心素养为核心，将学用结合的原则贯穿教学活动全过程，让学生习得的技能有用武之地。
          </p>
          <p class="center"><b>五、编写队伍</b></p>
          <p>
            ã€Šæ–°æ ‡å‡†é€šç”¨èŒåœºè‹±è¯­ã€‹ç³»åˆ—教材由成都纺织高等专科学校的王朝晖担任总主编，由四川文轩职业学院的刘大利、四川建筑职业技术学院的罗忠明和邓冬至担任主编，本册由成都纺织高等专科学校的贾丽萍、成都职业技术学院的刘海燕、四川开放大学的侯书华担任副主编。具体编写人员均为多年从事高职公共英语教学与研究的领军人物、骨干教师、双师型素质教师。编写团队教学、管理经验丰富，熟悉语言教学规律，了解职业教育理念，关注职业教育教学的政策和动态，确保了本套教材的编写质量。
          </p>
          <p>
            å›¿äºŽæ°´å¹³ï¼Œæ•™æç–æ¼ä¹‹å¤„难免。我们真诚欢迎专家、师生对教材提出宝贵意见和建议，以便我们动态完善教材，更好地服务高职外语教育教学，服务广大师生。
          </p>
        </div>
        <div class="preface-bottom" style="margin-top: 236px">
          <span class="num-box">3</span>
        </div>
      </div>
    </div>
  </div>
@@ -183,6 +193,11 @@
<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,29 +120,36 @@
      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"
    //     });
    //     setTimeout(() => {
    //       this.delSign({
    //         ids: ["2ACA9359"]
    //       });
    //     }, 2000);
    //   }, 1000);
    // }, 3000);
    // setTimeout(() => {
    //   this.delSign({
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    //   }, 5000);
    // }, 1000);
  },
  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}"]`);
        let reg = new RegExp(`${data.txt}`, "ig");
        switch (type) {
          case "Highlight":
            // é«˜äº®
            pageDom.innerHTML = pageDom.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(
              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(
              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>`
            );
            break;
        // åˆ›å»º 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;
            }
          }
        }
      }
    },
@@ -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}"]`);
        let reg = new RegExp(`${data.txt}`, "ig");
        switch (type) {
          case "Highlight":
            // é«˜äº®
            pageDom.innerHTML = pageDom.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(
              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(
              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;
        // åˆ›å»º 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;
            }
          }
        }
      }
    },
@@ -303,7 +336,7 @@
            return false;
          }
        }
        //observer è§‚察每个元素，以便在它们进入或离开视窗时触发回调函数。
        // observer è§‚察每个元素，以便在它们进入或离开视窗时触发回调函数。
        const isObserver = section.getAttribute("observer");
        const isLoadObserver = section.getAttribute("loadObserver");
        if (!isObserver) {
@@ -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);