Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

user1

2024-06-28 c7b33fe92cf6d4449ca5919353c15611ae9ad410

Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

 .env.product

@@ -1,6 +1,6 @@
VUE_APP_ENV = 'product'
VUE_APP_API_URL = "https://jsek.bnuic.com"
VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/artAndDrama'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/english'
VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook"
VUE_APP_BOOK_ID = 'artAndDrama'
VUE_APP_BOOK_ID = 'english'

 src/assets/images/brush.png

 src/assets/images/revoke.png

 src/assets/images/rubber.png

 src/assets/images/save.png

 src/assets/images/scrub.png

 src/assets/methods/examination.js

@@ -1,7 +1,9 @@
import MG from "@/assets/js/middleGround/WebMiddleGroundApi";
import getPublicImage from "@/assets/js/middleGround/tool";
// 获取题目列表
const getQuestionList = async (page, questionList, activeBook) => {
  console.log("page", page);
const collectList = await getCollectList(activeBook)
console.log('收藏列表',collectList);
  const oldAnswerData = localStorage.getItem(activeBook.name + "oldAnswerData");
  let oldData = null;
  let oldList = [];
@@ -97,7 +99,7 @@
        isSubmit: false, // 查看解析
        isRight: null, // 是否正确
        isComplete: false,
        isCollect: true,
        isCollect: collectList.indexOf(qitem) > -1 ? true : false,
        isUnfold: "",
      };
      // 多选和填空答案肯为数组，要转换JSON格式
@@ -222,7 +224,43 @@
  }
  return cardList.filter((item) => item.infoList.length > 0);
};

// 获取收藏列表
const getCollectList = async(activeBook) => {
  const allCollect = [
    {
      type:'bits',
      collectList:[]
    },
    {
      type:'json',
      collectList:[]
    },
  ]
  await MG.identity
  .getUserKey({
    domain: 'collectData',
    keys: [activeBook.bookId]
  })
  .then((res) => {
    try {
      const collect = JSON.parse(res[0].value)
      if (collect.length) {
        allCollect[0].collectList = collect.find(
          (citem) => citem.type == 'bits'
        ).collectList
        allCollect[1].collectList = collect.find(
          (citem) => citem.type == 'json'
        ).collectList
      }
    } catch (error) {
      console.log('暂无数据')
    }
  })
  .catch(() => {
    console.log('获取收藏报错');
  })
  return allCollect.find(item => item.type == 'bits').collectList
}
const getQuestionData = async (chapter, chapterData, activeBook) => {
  const data = { ...chapterData };
  const oldAnswerData = localStorage.getItem("oldAnswerData");

 src/books/English/assets/main.less

@@ -679,6 +679,9 @@
  .fw-wr {
    flex-wrap: wrap;
  }
  .ju-ar {
    justify-content: space-around;
  }
  .ju-bt {
    justify-content: space-between;
  }

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

@@ -26,7 +26,10 @@
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <div class="w100 mb-20" style="padding-right: 20px">
          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
          <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>
@@ -40,13 +43,22 @@
            </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>
              <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"
                <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)" />
                    transform="translate(-3327.144 15329)"
                  />
                </svg>
              </span>
            </p>
@@ -58,57 +70,120 @@
                      <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" />
                      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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                  <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%" />
                      <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" />
                      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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerTwo"
                  >
                    答案：Chinese medicine
                  </p>
                </div>
@@ -121,57 +196,120 @@
                      <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" />
                      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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                  <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%" />
                      <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" />
                      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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerTwo"
                  >
                    答案：Taichi
                  </p>
                </div>
@@ -184,57 +322,120 @@
                      <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" />
                      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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                  <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%" />
                      <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" />
                      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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerTwo">
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerTwo"
                  >
                    答案：Chinese chess
                  </p>
                </div>
@@ -249,17 +450,32 @@
                显示答案
              </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"
                <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)" />
                    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%" />
              <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">
            <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
@@ -280,20 +496,30 @@
          <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>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>a
        </ul>
        a
        <div class="padding-102">
          <div class="bodystyle">
            <h3 id="c002" class="fl al-cn">
              <span class="bjh3">Listening</span>
              <!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
              <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio
                :src="resource.listenOne"
                controls
                controlslist="noplaybackrate nodownload"
                class="audio"
              ></audio>
            </h3>
            <p>
              <b>Four foreigners are talking about their impressions on Chinese
              <b
                >Four foreigners are talking about their impressions on Chinese
                culture.Listen to the recording and match the items with the
                corresponding descriptions.</b>
                corresponding descriptions.</b
              >
            </p>
            <!-- <p class="center">
              <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
@@ -318,16 +544,33 @@
                显示答案
              </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"
                <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)" />
                    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">
            <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>
@@ -340,16 +583,33 @@
                显示答案
              </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"
                <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)" />
                    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">
            <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
@@ -357,8 +617,12 @@
            </p>
            <p class="center"><b>My Experience in Wonderland</b></p>
            <p class="center">
            <audio :src="resource.readingOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>

              <audio
                :src="resource.readingOne"
                controls
                controlslist="noplaybackrate nodownload"
                class="audio"
              ></audio>
            </p>
            <p class="block">
              “So how was your journey to China?” asks Alexandra.“Highly
@@ -369,29 +633,41 @@
            </p>
            <p>
              My
              <span class="word-bc" @click="saveWord($event, 'incredible')">incredible</span>
              <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>
              <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>.
              <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>
              <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>
              <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>
              <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>
@@ -406,7 +682,10 @@
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
        <div class="w100 mb-20" style="padding-right: 20px">
          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
          <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>
@@ -420,10 +699,16 @@
              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>
              <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>
              <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>
@@ -433,8 +718,15 @@
              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>
              <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.
@@ -448,11 +740,18 @@
              <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="zt-cs" style="font-size: 20px"
                >Words &amp; Expressions</span
              >
              <span class="line-border-box"></span>
            </p>
            <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
              @play="audioPlay"></audio>
            <audio
              :src="resource.readingTwo"
              controls
              controlslist="noplaybackrate nodownload"
              style="margin-left: 10px"
              class="audio"
            ></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>
@@ -466,7 +765,9 @@
            </p>
            <div class="bkbj">
              <p>
                <i>the food served in a restaurant (usually an expensive one)</i>
                <i
                  >the food served in a restaurant (usually an expensive one)</i
                >
              </p>
            </div>
            <p>landscape /ˈlændskeɪp/ <i>n.</i> （陆上） 风景，景色</p>
@@ -483,16 +784,20 @@
            </p>
            <div class="bkbj">
              <p>
                <i>a society,its culture and its way of life (during a
                <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>
                  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>
                <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>
@@ -513,7 +818,9 @@
          <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>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <div class="padding-93">
@@ -529,8 +836,10 @@
            <p>foodie /ˈfuːdi/<i>n.</i> 吃货；美食家</p>
            <div class="bkbj">
              <p>
                <i>a person who is very interested in cooking and eating
                  different kinds of food</i>
                <i
                  >a person who is very interested in cooking and eating
                  different kinds of food</i
                >
              </p>
            </div>
            <p>unique /ju<i>ˈ</i>niːk/ <i>adj.</i> 唯一的；独一无二的</p>
@@ -540,8 +849,10 @@
            <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>
                <i
                  >the feeling or mood that you have in a particular place or
                  situation</i
                >
              </p>
            </div>
            <ul class="w100 fl fw-wr">
@@ -559,17 +870,37 @@
            <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世纪英国作家刘易斯·卡罗尔创作的著名儿童文学作品，讲述了一个名叫爱丽丝的英国小女孩为了追逐一只揣着怀表、会说话的兔子而不慎掉入了兔子洞，从而进入了一个神奇的国度并经历了一系列奇幻冒险的故事。
                <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="ball1"
                :disabled="testData.isComplete"
                value="Language"
                id="1"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Language
              <span>
                <svg
                  v-if="testData.check.isRight"
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Language'
                    )
                  "
                  t="1716986419862"
                  class="icon"
                  viewBox="0 0 1820 1024"
@@ -587,7 +918,14 @@
                  ></path>
                </svg>
                <svg
                  v-if="testData.check.isRight == false"
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Language'
                    ) == false
                  "
                  t="1716987085767"
                  class="icon"
                  viewBox="0 0 1024 1024"
@@ -607,34 +945,394 @@
              </span>
            </p>
            <p>
              <input type="checkbox" name="ball1" value="Language" id="1" v-model="testData.check.value" @change="setTestData" />
              Language
            </p>
            <p>
              <input type="checkbox" name="ball2" value="People" id="2" v-model="testData.check.value"  @change="setTestData" />
              <input
                type="checkbox"
                name="ball2"
                :disabled="testData.isComplete"
                value="People"
                id="2"
                v-model="testData.check.value"
                @change="setTestData"
              />
              People
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'People'
                    )
                  "
                  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="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'People'
                    ) == 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>
            <p>
              <input type="checkbox" name="ball3" value="Culture" id="3" v-model="testData.check.value"  @change="setTestData" />
              <input
                type="checkbox"
                name="ball3"
                :disabled="testData.isComplete"
                value="Culture"
                id="3"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Culture
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Culture'
                    )
                  "
                  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="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Culture'
                    ) == 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>
            <p>
              <input type="checkbox" name="ball4" value="Cuisine" id="4" v-model="testData.check.value"  @change="setTestData" />
              <input
                type="checkbox"
                name="ball4"
                :disabled="testData.isComplete"
                value="Cuisine"
                id="4"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Cuisine
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Cuisine'
                    )
                  "
                  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="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Cuisine'
                    ) == 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>
            <p>
              <input type="checkbox" name="ball5" value="Folk" id="5" v-model="testData.check.value"  @change="setTestData" />
              <input
                type="checkbox"
                name="ball5"
                :disabled="testData.isComplete"
                value="Folk art"
                id="5"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Folk art
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Folk art'
                    )
                  "
                  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="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Folk art'
                    ) == 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>
            <p>
              <input type="checkbox" name="ball6" value="Landscapes" id="6" v-model="testData.check.value"  @change="setTestData" />
              <input
                type="checkbox"
                name="ball6"
                :disabled="testData.isComplete"
                value="Landscapes"
                id="6"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Landscapes
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Landscapes'
                    )
                  "
                  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="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Landscapes'
                    ) == 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>
            <p>
              <input type="checkbox" name="ball7" value="Transportation" id="7" v-model="testData.check.value"  @change="setTestData" />
              <input
                type="checkbox"
                name="ball7"
                :disabled="testData.isComplete"
                value="Transportation"
                id="7"
                v-model="testData.check.value"
                @change="setTestData"
              />
              Transportation
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Transportation'
                    )
                  "
                  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="
                    testData.isComplete &&
                    isShowRight(
                      testData.check.answer,
                      testData.check.value,
                      'Transportation'
                    ) == 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>
            <p class="event-header-text-bc pd-5" style="margin-left: 35px; width: 93%" v-if="showQuestionAnswer">
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 35px; width: 93%"
              v-if="showQuestionAnswer"
            >
              答案：Culture,Cuisine,Landscapes
            </p>
          </div>
@@ -648,7 +1346,10 @@
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <div class="w100 mb-20" style="padding-right: 20px">
          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
          <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>
@@ -661,37 +1362,92 @@
              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" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.one"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></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" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.two"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></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" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.three"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></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" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.four"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></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" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.tx.five"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></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>
@@ -701,9 +1457,24 @@
            <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
                :disabled="testData.isComplete"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                v-model="testData.in.one"
                @change="setTestData"
              />
              <span>
                <svg
                  v-if="testData.in.isRight"
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.one)
                  "
                  t="1716986419862"
                  class="icon"
                  viewBox="0 0 1820 1024"
@@ -721,7 +1492,10 @@
                  ></path>
                </svg>
                <svg
                  v-if="testData.in.isRight == false"
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.one) == false
                  "
                  t="1716987085767"
                  class="icon"
                  viewBox="0 0 1024 1024"
@@ -739,72 +1513,318 @@
                  ></path>
                </svg>
              </span>
            </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" @change="setTestData" />
              ,and of course the huge variety of l<input v-model="testData.in.two" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />.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" @change="setTestData" />.The author believes that one cannot e<input type="text"
                v-model="testData.in.four" class="input-bottom-border" style="width: 60px" @change="setTestData" />China properly if he/she
              does not try its delicious variety of
              ,and of course the huge variety of l
              <input
                :disabled="testData.isComplete"
                v-model="testData.in.two"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.two)
                  "
                  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="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.two) == 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>
              .Chinese friends helped her a lot in understanding Chinese culture
              and c<input
                :disabled="testData.isComplete"
                v-model="testData.in.three"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.three)
                  "
                  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="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.three) == 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>
              .The author believes that one cannot e<input
                :disabled="testData.isComplete"
                type="text"
                v-model="testData.in.four"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.four)
                  "
                  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="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.four) == 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>
              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" @change="setTestData" />atmosphere that attracts people.
              culture.Each city has its u<input
                :disabled="testData.isComplete"
                v-model="testData.in.five"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.five)
                  "
                  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="
                    testData.isComplete &&
                    isTextRight(testData.in.answer, testData.in.five) == 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>
              atmosphere that attracts people.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <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
            </p>
            <textarea v-model="testData.line.one" placeholder="请输入内容" rows="4" style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p>1.get selected as</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.one"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <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
            </p>
            <textarea v-model="testData.line.two" placeholder="请输入内容" rows="4" style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p>2.be curious about</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.two"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <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
            </p>
            <textarea v-model="testData.line.three" placeholder="请输入内容" rows="4" style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p>3.along the way</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.three"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <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
            </p>
            <textarea v-model="testData.line.four" placeholder="请输入内容" rows="4" style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p>4.come across</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.four"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <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
            </p>
            <textarea v-model="testData.line.five" placeholder="请输入内容" rows="4" style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text" @change="setTestData"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p>5.look forward to</p>
            <textarea
              :disabled="testData.isComplete"
              v-model="testData.line.five"
              placeholder="请输入内容"
              rows="4"
              style="margin-left: 40px; width: 92%"
              class="fz-16 textarea-text"
              @change="setTestData"
            ></textarea>
            <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>
@@ -822,7 +1842,9 @@
          <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>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <div class="padding-93">
@@ -833,9 +1855,19 @@
              people.
            </p>
            <p>
              <input v-model="testData.ts.one" type="text" class="input-bottom-border" @change="setTestData" />
              <input
                :disabled="testData.isComplete"
                v-model="testData.ts.one"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              答案：孔子开创了平民化的教育。
            </p>
            <p>
@@ -843,9 +1875,19 @@
              greatly promoted the development of ancient Chinese civilization.
            </p>
            <p>
              <input v-model="testData.ts.two" type="text" class="input-bottom-border"  @change="setTestData" />
              <input
                :disabled="testData.isComplete"
                v-model="testData.ts.two"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              答案：嫘祖发明了中国缫丝技术，这极大地促进了中国古代文明的发展。
            </p>
            <p>
@@ -853,9 +1895,19 @@
              tea culture in depth.
            </p>
            <p>
              <input v-model="testData.ts.three" type="text" class="input-bottom-border" @change="setTestData" />
              <input
                :disabled="testData.isComplete"
                v-model="testData.ts.three"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p
              class="event-header-text-bc pd-5"
              style="margin-left: 40px; width: 93%"
              v-if="showQuestionAnswer"
            >
              答案：陆羽，《茶经》的作者，对中国茶道进行了深入的研究。
            </p>
            <p>
@@ -863,33 +1915,67 @@
              Chinese medical science.
            </p>
            <p>
              <input v-model="testData.ts.four" type="text" class="input-bottom-border"  @change="setTestData" />
              <input
                :disabled="testData.isComplete"
                v-model="testData.ts.four"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <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">
                <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>
                    p-id="30865"
                  ></path>
                </svg>
              </span>
            </p>
            <el-image v-if="showImg" :src="imgThirteen" :preview-src-list="[imgThirteen]" />
            <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" @change="setTestData" />.
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                v-model="testData.gr.one"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <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>
@@ -898,17 +1984,39 @@
              there.
            </p>
            <p>
              <b>If</b><input v-model="testData.gr.two" type="text" class="input-bottom-border" @change="setTestData" />.
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                v-model="testData.gr.two"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <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" @change="setTestData" />.
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                type="text"
                v-model="testData.gr.three"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <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>
@@ -916,9 +2024,20 @@
              warriors.
            </p>
            <p>
              <b>If</b><input v-model="testData.gr.four" type="text" class="input-bottom-border" @change="setTestData" />.
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                v-model="testData.gr.four"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <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>
@@ -927,9 +2046,20 @@
              Chicken would possibly be in top three.
            </p>
            <p>
              <b>If</b><input v-model="testData.gr.five" type="text" class="input-bottom-border" @change="setTestData" />.
              <b>If</b
              ><input
                :disabled="testData.isComplete"
                v-model="testData.gr.five"
                type="text"
                class="input-bottom-border"
                @change="setTestData"
              />.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <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>
@@ -938,38 +2068,289 @@
              <i>whether</i>.
            </p>
            <p>
              1.I was wondering<input v-model="testData.cm.one" type="text" class="input-bottom-border"
                style="width: 60px" @change="setTestData" />to go for a walk in the Summer Palace.
              1.I was wondering<input
                :disabled="testData.isComplete"
                v-model="testData.cm.one"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />to go for a walk in the Summer Palace.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.one)
                  "
                  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="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.one) == 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>
            <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.
              2.We can spend the afternoon on the beach<input
                :disabled="testData.isComplete"
                v-model="testData.cm.two"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
              />the weather is fine.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.two)
                  "
                  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="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.two) == 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>
            <p>
              3.I called Wang to find out<input v-model="testData.cm.three" type="text" class="input-bottom-border"
                style="width: 60px" @change="setTestData" />or not he really went to see the Peking opera show.
              3.I called Wang to find out<input
                :disabled="testData.isComplete"
                v-model="testData.cm.three"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />or not he really went to see the Peking opera show.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.three)
                  "
                  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="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.three) == 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>
            <p>
              4.We’re not interested in<input v-model="testData.cm.four" type="text" class="input-bottom-border"
                style="width: 60px" @change="setTestData" />we get great jobs and that kind of thing.
              4.We’re not interested in<input
                :disabled="testData.isComplete"
                v-model="testData.cm.four"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />we get great jobs and that kind of thing.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.four)
                  "
                  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="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.four) == 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>
            <p>
              5.<input v-model="testData.cm.five" type="text" class="input-bottom-border" style="width: 60px" @change="setTestData" />I go to
              Sichuan,I will visit Chengdu Research Base of Giant
              5.<input
                :disabled="testData.isComplete"
                v-model="testData.cm.five"
                type="text"
                class="input-bottom-border"
                style="width: 60px"
                @change="setTestData"
              />I go to Sichuan,I will visit Chengdu Research Base of Giant
              Panda Breeding.
              <span>
                <svg
                  v-if="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.five)
                  "
                  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="
                    testData.isComplete &&
                    isTextRight(testData.cm.answer, testData.cm.five) == 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>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <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: 80%">
            <div class="w100 fl">
              <ul class="fl ju-ar w100">
                <li>
                  <button class="btn-border btn-w" @click="saveData">
                    提交
                  </button>
                </li>
                <li>
                </li>
                <li>
                  <button @click="changeTestData" class="btn-border btn-w">
@@ -977,7 +2358,10 @@
                  </button>
                </li>
                <li>
                  <button @click="showQuestionAnswer = !showQuestionAnswer" class="parimary-btn">
                  <button
                    @click="showQuestionAnswer = !showQuestionAnswer"
                    class="parimary-btn"
                  >
                    查看答案
                  </button>
                </li>
@@ -994,7 +2378,10 @@
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <div class="w100 mb-20" style="padding-right: 20px">
          <div class="event-header-bc fl al-end" style="height: 100px; padding-left: 40px">
          <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>
@@ -1022,9 +2409,19 @@
              <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" />
              <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">
            <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>
@@ -1043,64 +2440,133 @@
              </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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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" />
              <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>
                <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">
@@ -1264,7 +2730,9 @@
          <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>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <div class="padding-93">
@@ -1274,8 +2742,10 @@
            </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>
              <b
                >Put the expressions in the box below on the corresponding
                answer line under each picture.</b
              >
            </p>
            <div class="bk-wh">
              <p>
@@ -1288,68 +2758,146 @@
                <div class="left" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0019-1.jpg" alt="" class="w100" />
                      <img
                        src="../../assets/images/0019-1.jpg"
                        alt=""
                        class="w100"
                      />
                    </p>
                    <p class="center">
                      1.
                      <select class="select-border" v-model="dropdownData.one.value" @change="setDropdownData">
                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                      <select
                        class="select-border"
                        v-model="dropdownData.one.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                  <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%" />
                      <img
                        src="../../assets/images/0019-2.jpg"
                        alt=""
                        style="width: 98%"
                      />
                    </p>
                    <p class="center">
                      2.
                      <select class="select-border" v-model="dropdownData.two.value" @change="setDropdownData">
                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                      <select
                        class="select-border"
                        v-model="dropdownData.two.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerFive"
                  >
                    答案：online shopping
                  </p>
                </div>
@@ -1359,68 +2907,146 @@
                <div class="left" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0019-3.jpg" alt="" style="width: 98%" />
                      <img
                        src="../../assets/images/0019-3.jpg"
                        alt=""
                        style="width: 98%"
                      />
                    </p>
                    <p class="center">
                      3.
                      <select class="select-border" v-model="dropdownData.three.value" @change="setDropdownData">
                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                      <select
                        class="select-border"
                        v-model="dropdownData.three.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                  <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%" />
                      <img
                        src="../../assets/images/0019-4.jpg"
                        alt=""
                        style="width: 94%"
                      />
                    </p>
                    <p class="center">
                      4.
                      <select class="select-border" v-model="dropdownData.four.value" @change="setDropdownData">
                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                      <select
                        class="select-border"
                        v-model="dropdownData.four.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerFive"
                  >
                    答案：shared bike
                  </p>
                </div>
@@ -1430,68 +3056,146 @@
                <div class="left" style="width: 48%">
                  <div>
                    <p class="center">
                      <img src="../../assets/images/0019-5.jpg" alt="" class="w100" />
                      <img
                        src="../../assets/images/0019-5.jpg"
                        alt=""
                        class="w100"
                      />
                    </p>
                    <p class="center">
                      5.
                      <select class="select-border" v-model="dropdownData.five.value" @change="setDropdownData">
                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                      <select
                        class="select-border"
                        v-model="dropdownData.five.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                  <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%" />
                      <img
                        src="../../assets/images/0019-6.jpg"
                        alt=""
                        style="width: 98%"
                      />
                    </p>
                    <p class="center">
                      6.
                      <select class="select-border" v-model="dropdownData.six.value" @change="setDropdownData">
                        <option v-for="(item, index) in dropDownList" :key="index" :value="item">
                      <select
                        class="select-border"
                        v-model="dropdownData.six.value"
                        @change="setDropdownData"
                        :disabled="dropdownData.isComplete"
                      >
                        <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">
                        <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>
                            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">
                        <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>
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                        </svg>
                      </span>
                    </p>
                  </div>
                  <p class="event-header-text-bc pd-5" style="width: 90%" v-if="showAnswerFive">
                  <p
                    class="event-header-text-bc pd-5"
                    style="width: 90%"
                    v-if="showAnswerFive"
                  >
                    答案：facial recognition
                  </p>
                </div>
@@ -1499,13 +3203,19 @@
            </div>
            <div class="w100 fl ju-cn">
              <div class="fl ju-ev mt-40" style="width: 80%">
                <button class="btn-border btn-w" @click="handleDropdown('judge')">
                <button
                  class="btn-border btn-w"
                  @click="handleDropdown('judge')"
                >
                  提交
                </button>
                <button class="btn-border btn-w" @click="changeDropdown">
                  重做
                </button>
                <button @click="showAnswerFive = !showAnswerFive" class="parimary-btn">
                <button
                  @click="showAnswerFive = !showAnswerFive"
                  class="parimary-btn"
                >
                  查看答案
                </button>
              </div>
@@ -1521,7 +3231,10 @@
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -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="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>
@@ -1602,18 +3315,27 @@
          <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>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p class="fl al-cn mt-40">
              <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
              <span class="zt-cs" style="font-size: 20px"
                >Words &amp; Expressions</span
              >
              <span class="line-border-box"></span>
            </p>
            <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
              @play="audioPlay"></audio>
            <audio
              :src="resource.readingTwo"
              controls
              controlslist="noplaybackrate nodownload"
              style="margin-left: 10px"
              class="audio"
            ></audio>
            <p>breeze /briːz/ <i>n.</i> 微风；和风</p>
            <div class="bkbj">
              <p><i>a light wind</i></p>
@@ -1637,8 +3359,10 @@
            <p>dormitory /ˈdɔːmətri/ <i>n.</i> 学生宿舍；集体宿舍</p>
            <div class="bkbj">
              <p>
                <i>a room for several people to sleep in,esp.in a school or
                  other institution</i>
                <i
                  >a room for several people to sleep in,esp.in a school or
                  other institution</i
                >
              </p>
            </div>
            <p>neighbour /ˈneɪbə(r)/ <i>n.</i> 邻居；邻人</p>
@@ -1656,15 +3380,19 @@
            <p>laptop /ˈlæptɒp/ <i>n.</i> 便携式电脑；笔记本电脑</p>
            <div class="bkbj">
              <p>
                <i>a small computer that can work with a battery and be easily
                  carried</i>
                <i
                  >a small computer that can work with a battery and be easily
                  carried</i
                >
              </p>
            </div>
            <p>stun /stʌn/ <i>v.</i> 使震惊（或惊愕、目瞪口呆）</p>
            <div class="bkbj">
              <p>
                <i>to surprise or shock sb.so much that he/she cannot think
                  clearly or speak</i>
                <i
                  >to surprise or shock sb.so much that he/she cannot think
                  clearly or speak</i
                >
              </p>
            </div>
            <p>trigger /ˈtrɪɡə(r)/ <i>v.</i> 引起；触发</p>
@@ -1678,16 +3406,20 @@
            <p>era /ˈɪərə/ <i>n.</i> 时代；年代</p>
            <div class="bkbj">
              <p>
                <i>a period of time,usually in history,that is different from
                <i
                  >a period of time,usually in history,that is different from
                  other periods because of particular characteristics or
                  events</i>
                  events</i
                >
              </p>
            </div>
            <p>economy /ɪˈkɒnəmi/ <i>n.</i> 经济；经济情况</p>
            <div class="bkbj">
              <p>
                <i>the relationship between production,trade and the supply of
                  money in a particular country or region</i>
                <i
                  >the relationship between production,trade and the supply of
                  money in a particular country or region</i
                >
              </p>
            </div>
          </div>
@@ -1702,7 +3434,10 @@
      <div v-if="showPageList.indexOf(18) > -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="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>
@@ -1715,8 +3450,10 @@
            <p>boom /buːm/ <i>v.</i> 迅速发展；繁荣昌盛</p>
            <div class="bkbj">
              <p>
                <i>to have a period of rapid growth; to become bigger,more
                  successful,etc.</i>
                <i
                  >to have a period of rapid growth; to become bigger,more
                  successful,etc.</i
                >
              </p>
            </div>
            <p>potential /pəˈtenʃl/ <i>n.</i> 潜力；潜能</p>
@@ -1822,7 +3559,9 @@
          <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>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <!-- 内容 -->
@@ -1880,9 +3619,19 @@
              changes,then report to the class.
            </p>
            <p class="left">
              <img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" />
              <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">
            <table
              border="1"
              cellpadding="4"
              cellspacing="0"
              style="border-color: #fff"
              class="fz-14"
            >
              <tr class="table-th-bc">
                <td class="tl-cn">Items</td>
                <td class="wh-no tl-cn">A Decade Ago</td>
@@ -1912,7 +3661,10 @@
      <div v-if="showPageList.indexOf(20) > -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="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>
@@ -1922,7 +3674,13 @@
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
            <table
              border="1"
              cellpadding="4"
              cellspacing="0"
              style="border-color: #fff"
              class="fz-14"
            >
              <tr class="table-th-bc">
                <td class="tl-cn">Items</td>
                <td class="wh-no tl-cn">A Decade Ago</td>
@@ -1937,51 +3695,81 @@
              </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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <textarea
                    v-model="questionData.table.nine"
                    class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td colspan="3">
                  Your suggestion:
                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
                    @change="setBookQuestion"></textarea>
                  <textarea
                    v-model="questionData.table.seven"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                    @change="setBookQuestion"
                  ></textarea>
                </td>
              </tr>
            </table>
@@ -1990,11 +3778,18 @@
            </h2>
            <h3 id="c008"><span class="bjh3">Listening</span></h3>
            <p>
              <b>Ⅰ.Listen to Tom,an overseas student,talking about his journey
                to China and fill in the blanks with what you hear.</b>
              <b
                >Ⅰ.Listen to Tom,an overseas student,talking about his journey
                to China and fill in the blanks with what you hear.</b
              >
            </p>
            <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload" style="margin-left: 10px" class="audio"
              @play="audioPlay"></audio>
            <audio
              :src="resource.readingTwo"
              controls
              controlslist="noplaybackrate nodownload"
              style="margin-left: 10px"
              class="audio"
            ></audio>
            <p>
              After studying in China for almost three years by now,I call China
              my second homeland.I love the natural beauty,the 1.________,the
@@ -2010,9 +3805,11 @@
              of Laoshan… China is such a beautiful country!
            </p>
            <p>
              <b>Ⅱ.Listen to the conversation about planning for the upcoming
              <b
                >Ⅱ.Listen to the conversation about planning for the upcoming
                Chinese Culture Week and circle the right expressions to
                complete the following sentences.</b>
                complete the following sentences.</b
              >
            </p>
            <p>
              1.They would like to organize an activity for foreign students to
@@ -2033,7 +3830,9 @@
          <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>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <!-- 内容 -->
@@ -2058,8 +3857,10 @@
              2.What information would you like to tell them about the event?
            </p>
            <p>
              <b>Ⅰ.Read the following tips for designing an event poster and
                mark the key elements in the following poster.</b>
              <b
                >Ⅰ.Read the following tips for designing an event poster and
                mark the key elements in the following poster.</b
              >
            </p>
            <p>
              An event poster is a marketing tool designed to attract visitors
@@ -2075,48 +3876,112 @@
            <div class="horizontal" style="display: flex">
              <div class="left" style="width: 48%">
                <p class="center">
                  <img class="img-e" alt="" src="../../assets/images/0025-1.jpg" />
                  <img
                    class="img-e"
                    alt=""
                    src="../../assets/images/0025-1.jpg"
                  />
                </p>
              </div>
              <div class="right" style="width: 48%">
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Name of the event
                </p>
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Date and time
                </p>
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Location
                </p>
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Greetings
                </p>
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Warnings
                </p>
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Organizer
                </p>
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Signature
                </p>
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  A short description of the event
                </p>
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Contact information
                </p>
                <p>
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
                  <input
                    type="checkbox"
                    name="ball"
                    value="Language"
                    id="1"
                    v-model="testData.check"
                  />
                  Pictures of the event
                </p>
              </div>
@@ -2133,7 +3998,10 @@
      <div v-if="showPageList.indexOf(22) > -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="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>
@@ -2144,22 +4012,27 @@
        <div class="padding-93">
          <div class="bodystyle">
            <p>
              <b>Ⅱ.DIY Crafts Club is planning a paper-cutting contest to
              <b
                >Ⅱ.DIY Crafts Club is planning a paper-cutting contest to
                promote Chinese handicrafts.The contest will be held in the
                lobby of Student Center at</b>6：00-8：00<b> November</b>16<b>.You're in charge of publicity in the club
                and are required to
                lobby of Student Center at</b
              >6：00-8：00<b> November</b>16<b
                >.You're in charge of publicity in the club and are required to
                design a poster for the contest.Complete the necessary
                information in the following poster.</b>
                information in the following poster.</b
              >
            </p>
            <p class="center">
              <img class="img-a" alt="" src="../../assets/images/0026-1.jpg" />
            </p>
            <p>
              <b>Ⅲ.Your class has prepared a Chinese culture exhibition for
              <b
                >Ⅲ.Your class has prepared a Chinese culture exhibition for
                foreign exchange students.Your group takes the responsibility of
                designing a poster for it.Discuss with your partner and try to
                answer the questions below to find out what information is
                needed.</b>
                needed.</b
              >
            </p>
            <div class="dy1-bj4">
              <p class="center"><b>Information to put into our poster</b></p>
@@ -2190,15 +4063,19 @@
          <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>
            <span class="chapter-right-bc fw-bl chapter-right-cl"
              >CHINA,A WONDERLAND</span
            >
          </li>
        </ul>
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p>
              Ⅳ<b>.Design a poster for the exhibition according to the
                information in the table above.</b>
              Ⅳ<b
                >.Design a poster for the exhibition according to the
                information in the table above.</b
              >
            </p>
            <p class="center">
              <img class="img-b" alt="" src="../../assets/images/0027-1.jpg" />
@@ -2237,7 +4114,10 @@
      <div v-if="showPageList.indexOf(24) > -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="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>
@@ -2248,7 +4128,11 @@
        <div class="padding-93">
          <div class="bodystyle">
            <p class="left">
              <img class="img-gn" alt="" src="../../assets/images/dy1-worksheet.jpg" />
              <img
                class="img-gn"
                alt=""
                src="../../assets/images/dy1-worksheet.jpg"
              />
            </p>
            <p class="center">
              <img class="img-b" alt="" src="../../assets/images/0028-1.jpg" />
@@ -2463,10 +4347,11 @@
        },
      },
      testData: {
        isComplete: false,
        check: {
          isRight:null,
          answer:["Culture","Cuisine","Landscapes"],
          value:[]
          isRight: null,
          answer: ["Culture", "Cuisine", "Landscapes"],
          value: [],
        },
        tx: {
          one: "",
@@ -2481,8 +4366,8 @@
          three: "",
          four: "",
          five: "",
          isRight:null,
          answer:'cuisine,landscapes,civilization,explore,unique'
          isRight: null,
          answer: ["uisine", "andscapes", "ivilization", "xplore", "nique"],
        },
        line: {
          one: "",
@@ -2510,6 +4395,7 @@
          three: "",
          four: "",
          five: "",
          answer: ["whether", "if", "whether", "whether", "if"],
        },
      },
      resource: {
@@ -2526,6 +4412,7 @@
        "take-away service",
      ],
      dropdownData: {
        isComplete: false,
        one: {
          value: "",
          isRight: null,
@@ -2584,10 +4471,11 @@
    changeTestData() {
      localStorage.removeItem("english-testOne");
      this.testData = {
        isComplete: false,
        check: {
          isRight:null,
          answer:["Culture","Cuisine","Landscapes"],
          value:[]
          isRight: null,
          answer: ["Culture", "Cuisine", "Landscapes"],
          value: [],
        },
        tx: {
          one: "",
@@ -2602,8 +4490,8 @@
          three: "",
          four: "",
          five: "",
          isRight:null,
          answer:['uisine','andscapes','ivilization','xplore','nique']
          isRight: null,
          answer: ["uisine", "andscapes", "ivilization", "xplore", "nique"],
        },
        line: {
          one: "",
@@ -2631,11 +4519,11 @@
          three: "",
          four: "",
          five: "",
          answer: ["whether", "if", "whether", "whether", "if"],
        },
      };
    },
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "english-book-question-one",
        JSON.stringify(this.questionData)
@@ -2661,55 +4549,61 @@
      if (type == "one") {
        this.questionData.warnUp.one.value
          ? (this.questionData.warnUp.one.isRight =
            this.questionData.warnUp.one.value == "Chinese knot")
              this.questionData.warnUp.one.value == "Chinese knot")
          : (this.questionData.warnUp.one.isRight = null);
      } else if (type == "two") {
        this.questionData.warnUp.two.value
          ? (this.questionData.warnUp.two.isRight =
            this.questionData.warnUp.two.value == "Chinese medicine")
              this.questionData.warnUp.two.value == "Chinese medicine")
          : (this.questionData.warnUp.two.isRight = null);
      } else if (type == "three") {
        this.questionData.warnUp.three.value
          ? (this.questionData.warnUp.three.isRight =
            this.questionData.warnUp.three.value == "Chinese calligraphy")
              this.questionData.warnUp.three.value == "Chinese calligraphy")
          : (this.questionData.warnUp.three.isRight = null);
      } else if (type == "four") {
        this.questionData.warnUp.four.value
          ? (this.questionData.warnUp.four.isRight =
            this.questionData.warnUp.four.value == "Taichi")
              this.questionData.warnUp.four.value == "Taichi")
          : (this.questionData.warnUp.four.isRight = null);
      } else if (type == "five") {
        this.questionData.warnUp.five.value
          ? (this.questionData.warnUp.five.isRight =
            this.questionData.warnUp.five.value == "sweet dumpling")
              this.questionData.warnUp.five.value == "sweet dumpling")
          : (this.questionData.warnUp.five.isRight = null);
      } else if (type == "six") {
        this.questionData.warnUp.six.value
          ? (this.questionData.warnUp.six.isRight =
            this.questionData.warnUp.six.value == "Chinese chess")
              this.questionData.warnUp.six.value == "Chinese chess")
          : (this.questionData.warnUp.six.isRight = null);
      }
    },
    handleDropdown(type) {
      const dropdownDatas = this.dropdownData;
      for (let key in dropdownDatas) {
        const item = dropdownDatas[key];
        let item = dropdownDatas[key];
        if (type == "judge") {
          item.value == item.answer
            ? (item.isRight = true)
            : (item.isRight = false);
          console.log(item.value, item.answer);
          if (key != "isComplete") {
            item.value == item.answer
              ? (item.isRight = true)
              : (item.isRight = false);
          }
        }
      }
      this.dropdownData = dropdownDatas;
      this.$set(this.dropdownData,'isComplete',true)
      this.setDropdownData()
    },
    changeDropdown() {
      localStorage.removeItem("english-dropdown-one");
      for (let key in this.dropdownData) {
        const item = this.dropdownData[key];
        item.value = "";
        item.isRight = null;
        let item = this.dropdownData[key];
        if(key != 'isComplete') {
          item.value = "";
          item.isRight = null;
        } 
      }
      this.$set(this.dropdownData,'isComplete',false)
    },
    setDropdownData() {
      localStorage.setItem(
@@ -2718,33 +4612,42 @@
      );
    },
    saveData() {
      const item = this.testData['check']
      const item = this.testData["check"];
      const sortedArr1 = item.answer.slice().sort();
      const sortedArr2 = item.value.slice().sort();
      const isRight = sortedArr1.every(
                (value, index) => value === sortedArr2[index]
              );
      const inData = this.testData['in']
      let inString = []
        (value, index) => value === sortedArr2[index]
      );
      const inData = this.testData["in"];
      let inString = [];
      for (let key in inData) {
        const citem = inData[key];
        if(key != 'answer' && key !== 'isRight') {
        if (key != "answer" && key !== "isRight") {
          console.log(key);
          inString.push(citem)
          inString.push(citem);
        }
        
        
      }
      const inRight = inData.answer == inString
      console.log('in',inData.answer,inString);
      this.$set(this.testData['in'],'isRight',inRight)
      this.$set(this.testData['check'],'isRight',isRight)
      this.setTestData()
      console.log(this.testData);

      const inRight = inData.answer == inString;
      console.log("in", inData.answer, inString);
      this.$set(this.testData["in"], "isRight", inRight);
      this.$set(this.testData["check"], "isRight", isRight);
      this.$set(this.testData, "isComplete", true);
      this.setTestData();
      this.showQuestionAnswer = true;
    },
    audioPlay() {
      this.$emit("closeMiniAudio");
    isShowRight(answer, userAnswer, data) {
      let flag = null;
      if (userAnswer.indexOf(data) > -1) {
        flag = answer.indexOf(data) > -1 ? true : false;
      }
      return flag;
    },
    isTextRight(answer, data) {
      let flag = null;
      if (data) {
        flag = answer.indexOf(data) > -1 ? true : false;
      }
      return flag;
    },
  },
};
@@ -2828,7 +4731,7 @@
  border: 0;
  border-bottom: 1px solid #767676;
  &:focus {
    outline: none; 
    outline: none;
  }
}
</style>

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

@@ -21,9 +21,9 @@
            </div>
        </div>
        <!-- 59 -->
        <div class="page-box" page="65">
        <!-- <div class="page-box" page="65">
            <div v-if="showPageList.indexOf(65) > -1">
                <!-- 头部 -->

                <ul class="preface-odd-header w100 fl ju-bt">
                    <li class=""></li>
                    <li class="fz-18">
@@ -32,7 +32,7 @@
                            VOLUNTEERS</span>
                    </li>
                </ul>
                <!-- 内容 -->
            
                <div class="padding-93">
                    <div class="bodystyle">
                        <h2 id="b013"><img class="img-0" alt="" src="../../assets/images/dy4-le1.jpg" /></h2>
@@ -64,11 +64,11 @@
                    <span class="contet-num-box">59</span>
                </div>
            </div>
        </div>
        </div> -->
        <!-- 60 -->
        <div class="page-box" page="66">
        <!-- <div class="page-box" page="66">
            <div v-if="showPageList.indexOf(66) > -1">
                <!-- 头部 -->
        
                <div class="w100 mb-20" style="padding-right: 20px">
                    <div class="event-header-bc-unit4 fl al-end" style="height: 100px; padding-left: 40px">
                        <div class="preface-header-box event-header-text-bc-unit4">
@@ -77,7 +77,7 @@
                        </div>
                    </div>
                </div>
                <!-- 内容 -->

                <div class="padding-93">
                    <div class="bodystyle">
                        <h3 id="c029"><span class="bjh3">Listening</span></h3>
@@ -1006,7 +1006,7 @@
                    <span class="contet-num-box">76</span>
                </div>
            </div>
        </div>
        </div> -->
    </div>
</template>
<script>

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

@@ -1,29 +1,44 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <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" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne>
      <chapterTwo @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
        <chapterThree @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
        <chapterFour @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
        <chapterFive @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
        <chapterSex @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSex>
        <chapterSeven @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList"></chapterSeven>
        <chapterEight @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight>
    <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>
      <chapterTwo
        @saveCharacters="saveCharacters"
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
      ></chapterTwo>
      <chapterThree
        @saveCharacters="saveCharacters"
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
        @saveCharacters="saveCharacters"
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
    </div>
    <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
    <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    >
    </miniAudio>
  </div>
</template>
@@ -97,6 +112,7 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.closeAudio()
        }, 200);
      },
    },
@@ -167,36 +183,36 @@
    }, 500);

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

      // const pageDom = (this.container ? this.container : document)
      //   .querySelector("#app")
      //   .querySelectorAll(".page-box");
      // 检索
      // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
      // 检索跳转
      // this.searchItemLocation({
      //   catalog: 2,
      //   page: 10,
      //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
      //   txtIndex: 57
      // });
     }, 500);
    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
    //   .querySelectorAll(".page-box");
    // 检索
    // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
    // 检索跳转
    // this.searchItemLocation({
    //   catalog: 2,
    //   page: 10,
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    //  }, 50);
  },
  methods: {
    // setZoom1() {
@@ -455,8 +471,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
@@ -473,8 +489,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
@@ -491,8 +507,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
@@ -635,23 +651,19 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            )
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
          observeParents: true
          observeParents: true,
          // // 如果需要分页器
          // pagination: {
          //   el: (this.container ? this.container : document).querySelector(
@@ -674,12 +686,8 @@
          spaceBetween: 30, // 间隔
          // 如果需要前进后退按钮
          navigation: {
            nextEl: dom.querySelector(
              ".swiper-button-next"
            ),
            prevEl: dom.querySelector(
              ".swiper-button-prev"
            )
            nextEl: dom.querySelector(".swiper-button-next"),
            prevEl: dom.querySelector(".swiper-button-prev"),
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -698,8 +706,8 @@
              var paginationInfoEl = dom.querySelector(".pageBox");
              if (paginationInfoEl)
                paginationInfoEl.textContent = currentPage + "/" + totalPages;
            }
          }
            },
          },
        });
      }
    },
@@ -745,7 +753,7 @@
          propsData: {
            showPageList: [],
            questionData: {},
            isSearch: true
            isSearch: true,
          },
        });
        pageExample.$mount(
@@ -777,7 +785,7 @@
              propsData: {
                showPageList: [pageNum],
                questionData: {},
                isSearch: true
                isSearch: true,
              },
            });
            pageExample.$mount(
@@ -833,7 +841,7 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => { });
      this.gotoPage(data.catalog, data.page, () => {});
    },
    // 点击事件：将生僻单词传给 主应用 从而调用词典功能
    saveCharacters(event, word) {
@@ -898,6 +906,25 @@
    closeMiniAudio() {
      this.audioPath = "";
    },
    // 点击音频播放，关闭其他音频
    closeAudio() {
      let allAudio = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      for (let index = 0; index < allAudio.length; index++) {
        const item = allAudio[index];
        item.addEventListener("play", () => {
          const audioList = Array.from(allAudio);
          for (let cindex = 0; cindex < audioList.length; cindex++) {
            const citem = audioList[cindex];
            if (citem.currentSrc != item.src) {
              citem.pause();
            }
          }
          this.closeMiniAudio();
        });
      }
    },
  },
  components: {
    pageHeader,

 src/books/artAndDance/assets/main.less

@@ -454,6 +454,13 @@
    }
  }
}
@media (max-width:820px) {
  .ans-dance {
    .page-box {
      min-height: 500px;
    }
  } 
}
@media (min-width: 660px) {
  .ans-dance {
    .page-padding {

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

@@ -54,13 +54,13 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8 ">男童音</span>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay" ></audio>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
            <li class="fl al-cn mt-20 " >
              <span class="wh-nr auido-text mr-8 ">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
          </ul>
          <h3 id="c003">黄鹤楼送孟浩然之广陵</h3>
@@ -79,7 +79,7 @@
            x5-playsinline=""
            controls
            controlslist="nodownload"
            class="w100"
            class="w100 video"
            style="margin-top: 40px;"
          ></video>
        </div>
@@ -172,9 +172,6 @@
      this.auidoPathOne = await getResourcePath("2c5f6c69b0f9f7a3c03e473cb8c977f5");
      this.auidoPathTwo = await getResourcePath("e93c0fdde08be5a4386c8c863892a287");
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -69,13 +69,13 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8">男童音</span>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
          </ul>
          <h3 id="c006">亡羊补牢</h3>
@@ -119,7 +119,7 @@
            x5-playsinline=""
            controls
            controlslist="nodownload"
            class="w100"
            class="w100 video"
            style="margin-top: 40px;"
          ></video>
          <h2 class="lefth2 mt-40" id="b007">
@@ -225,9 +225,6 @@
        }
      },200)
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
};
</script>

 src/books/artAndDance/view/components/chapter003.vue

@@ -54,13 +54,13 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8">男童音</span>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </li>
          </ul>
          <h3 id="c009">小儿垂钓</h3>
@@ -79,7 +79,7 @@
            x5-playsinline=""
            controls
            controlslist="nodownload"
            class="w100"
            class="w100 video"
            style="margin-top: 40px;"
          ></video>
        </div>
@@ -171,9 +171,6 @@
      this.auidoPathOne = await getResourcePath("85923e871441c541991be07fe4ce8771");
      this.auidoPathTwo = await getResourcePath("c018f7a6434abfac0b0e0da1174d643a");
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
  }
</script>

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

@@ -60,13 +60,13 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8">男童音</span>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8">
                女童音
              </span>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
          </ul>
          <h3 id="c012">寻隐者不遇</h3>
@@ -83,7 +83,7 @@
            x5-playsinline=""
            controls
            controlslist="nodownload"
            class="w100"
            class="w100 video"
            style="margin-top: 40px;"
          ></video>
        </div>
@@ -175,9 +175,6 @@
      this.auidoPathOne = await getResourcePath("a865ff99b91fa24d87ac81a883be54db");
      this.auidoPathTwo = await getResourcePath("66f3cc00d272a120514201e13e87fb9d");
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
  }
</script>

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

@@ -66,11 +66,11 @@
          <ul class="fl fl-cl al-cn audio-box">
            <li class="fl al-cn">
              <span class="wh-nr auido-text mr-8">男童音</span>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
            <li class="fl al-cn mt-20">
              <span class="wh-nr auido-text mr-8"> 女童音 </span>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
              <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio>
            </li>
          </ul>
          <h3 id="c015">渔歌子</h3>
@@ -111,7 +111,7 @@
            x5-playsinline=""
            controls
            controlslist="nodownload"
            class="w100"
            class="w100 video"
            style="margin:38px 0"
          ></video>
          <h2 class="lefth2" id="b003">
@@ -219,9 +219,6 @@
        }
      },200)
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
};
</script>

 src/books/artAndDance/view/components/chapter006.vue

@@ -311,10 +311,14 @@
        </ul>
      </div>
    </div>
    <!-- <div class="page-box" page="30">
        <giffiti :page="30" :bcImg="'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF'" />
    </div> -->
  </div>
</template>

<script>
import giffiti from '@/components/graffiti/index.vue'
export default {
  name: "chapterSix",
  props: {
@@ -322,6 +326,7 @@
      type: Array,
    },
  },
  components:{giffiti}
};
</script>


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

@@ -18,28 +18,23 @@
      <chapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      >
      </chapterTwo>
      <chapterThree
      v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterThree>
      <chapterFour
      v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterFour>
      <chapterFive
      v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
        @closeAudio="closeAudio"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
@@ -123,6 +118,8 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.closeAudio()
          this.closeVideo()
        }, 200);
      },
    },
@@ -194,7 +191,7 @@

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(6, 26);
    //   this.gotoPage(6, 30);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -208,7 +205,7 @@
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    //   }, 5000);
      // }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -900,20 +897,43 @@
      this.audioPath = "";
    },
    // 点击音频播放，关闭其他音频
    closeAudio(path) {
      let allVideo = (
    closeAudio() {
      let allAudio = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if(allVideo.length) {
        for (let index = 0; index < allVideo.length; index++) {
          const item = allVideo[index];
          if(item.currentSrc != path) {
            item.pause()
      for (let index = 0; index < allAudio.length; index++) {
        const item = allAudio[index];
        item.addEventListener('play',() => {
          const audioList = Array.from(allAudio);
            for (let cindex = 0; cindex < audioList.length; cindex++) {
            const citem = audioList[cindex];
            if(citem.currentSrc != item.src) {
              citem.pause()
              
            }
          }
        }
          this.closeMiniAudio()
        })
      }
      this.closeMiniAudio()
    },
    // 点击视频关闭其他
    closeVideo() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      for (let index = 0; index < allVideo.length; index++) {
        const item = allVideo[index];
        item.addEventListener('playing',(item) => {
          const path  = item.srcElement.src
          const videoList = Array.from(allVideo);
          for (let cindex = 0; cindex < videoList.length; cindex++) {
            const citem = videoList[cindex];
            if(citem.currentSrc != path && path) {
              citem.pause()
            }
          }
        })
      }
    }
  },
  components: {

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

@@ -48,7 +48,7 @@
              @play="audioPlay"></audio> -->
          </h1>
          <!-- 连线题 -->
          <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color"></matching>
          <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color" :bordercolor="'#fff'"></matching>
          <p class="text">小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>
        </div>
        <p><br /></p>
@@ -417,7 +417,7 @@
      videoPathOne: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree: "",
      auidoPathThree:"",
      auidoPathFour: "",
      auidoPathFive: "",
      auidoPathSex: "",

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

@@ -97,8 +97,8 @@
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt=""
              src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>阅读下面的文字，为小蚂蚁选择一种性格吧。</p>
          <drag :question="dragQuestion" :page="16" class="drag-text" />
          <!-- <p class="text"><span class="hs1">◇</span>阅读下面的文字，为小蚂蚁选择一种性格吧。</p> -->
          <drag  :question="dragQuestion" :page="16" class="drag-text"/> 
          <!-- <choice class="text" :questions="questions"  :primaryColor="accentColor"  hoverBackgroundColor="green" hoverColor="white"></choice> -->
          <p class="center  openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
        </div>
@@ -536,7 +536,7 @@
}

.drag-text {
  margin: 0 6%;
  margin: 0 4%;
  font-family: "STKaiti";
  font-size: 19px;
}

 src/books/artAndDrama/view/components/chapter003.vue

@@ -73,7 +73,7 @@
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-2.gif" /></p>
                    <p class="text"><span class="hs1">◇</span>请把蚂蚁队长的台词和他的内心独白连起来吧！</p>
                    <!-- 连线题 -->
                    <matching :rawData="rawData" :question="question" class="macthing" :primaryColor="'transparent'" :bordercolor="'transparent'">
                    <matching :rawData="rawData" :question="question" class="macthing" :primaryColor="'transparent'" :bordercolor="'transparent'" >
                    </matching>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->

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

@@ -155,8 +155,8 @@
    }, 500);

    // 测试页面跳转
     setTimeout(() => {
     this.gotoPage(2,6);
    //  setTimeout(() => {
    //  this.gotoPage(2,6);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -184,7 +184,7 @@
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
     }, 500);
    //  }, 500);
  },
  methods: {
    // setZoom1() {

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

@@ -330,7 +330,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童体重的测量</p>
            </div>
@@ -384,7 +383,6 @@
                  controls
                  controlslist="nodownload"
                  class="w100 video-border video"
                  @play="videoPlay"
                ></video>
                <p class="img">视频：学前儿童身高的测量</p>
              </div>
@@ -424,7 +422,6 @@
                  controls
                  controlslist="nodownload"
                  class="w100 video-border video"
                  @play="videoPlay"
                ></video>
                <p class="img">视频：学前儿童头围的测量</p>
              </div>
@@ -473,7 +470,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童胸围的测量</p>
            </div>
@@ -757,7 +753,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童的健康检查</p>
            </div>
@@ -1256,7 +1251,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：儿童绘人测试</p>
            </div>
@@ -1602,9 +1596,6 @@
    gotoLabel(id) {
      (this.container ? this.container : document).getElementById(id).scrollIntoView()
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -323,7 +323,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
            </span>
            <span class="span-border"></span>
@@ -417,7 +416,6 @@
                    controls
                    controlslist="nodownload"
                    class="video-box video-border video"
                    @play="videoPlay"
                  ></video>
                  <p class="img">视频：骨骼</p>
                  <h5 id="e001">1.骨生长迅速</h5>
@@ -1028,7 +1026,6 @@
                controlslist="nodownload"
                style="margin-top: 20px"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童呼吸道的防御特点与保健</p>
            </div>
@@ -1489,7 +1486,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童心、血管的特点及保健</p>
            </div>
@@ -1970,7 +1966,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童牙齿的生理特点及保健</p>
            </div>
@@ -3046,7 +3041,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童内分泌系统的生理特点与保健</p>
            </div>
@@ -3447,7 +3441,6 @@
                  controls
                  controlslist="nodownload"
                  class="video-border w100 video"
                  @play="videoPlay"
                ></video>
              </p>
              <p class="img">视频：学前儿童大脑的生理特点及保健</p>
@@ -3970,7 +3963,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童眼的生理特点与保健</p>
            </div>
@@ -4075,7 +4067,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童耳的特点及保健</p>
            </div>
@@ -4282,7 +4273,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童皮肤的特点与保健</p>
            </div>
@@ -4983,9 +4973,6 @@
        JSON.stringify(this.chapterOneData)
      );
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -303,7 +303,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：儿童各阶段的特点和保健要点</p>
            </div>
@@ -638,7 +637,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：生长发育的“铁”规律</p>
            </div>
@@ -809,7 +807,7 @@
        </div>
        <div class="padding-96">
          <div class="fieldset">
            <p class="t0">胞间相互依存的动态关系发生作用。</p>
            <p class="t0 block">胞间相互依存的动态关系发生作用。</p>
            <p class="block">
              人类大脑皮层中，2岁前突触产生数目多于成年，在以后10年内逐渐减少，这可能与发育过程中一些长期得不到刺激的无功能神经细胞逐渐凋亡有关。
            </p>
@@ -1032,7 +1030,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
            </div>
          </div>
@@ -1508,9 +1505,6 @@
        JSON.stringify(this.chapterTwoData)
      );
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -547,7 +547,6 @@
                controls
                controlslist="nodownload"
                class="video-border w100 video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：影响学前儿童心理发展的因素</p>
            </div>
@@ -1076,7 +1075,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：过度依赖</p>
            </div>
@@ -1197,7 +1195,6 @@
                  controls
                  controlslist="nodownload"
                  class="video-border w100 video"
                  @play="videoPlay"
                ></video>
              </p>
              <p class="img">视频：自慰</p>
@@ -1563,7 +1560,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：言语及语言发育障碍</p>
            </div>
@@ -1610,7 +1606,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：怎样发现孩子发育迟缓</p>
            </div>
@@ -1724,7 +1719,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：儿童多动症</p>
            </div>
@@ -2168,9 +2162,6 @@
    gotoLabel(id) {
      (this.container ? this.container : document).getElementById(id).scrollIntoView()
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -444,7 +444,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：营养素</p>
            </div>
@@ -1600,7 +1599,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：乳儿辅助食品的添加</p>
            </div>
@@ -1908,7 +1906,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童膳食的配制原则</p>
            </div>
@@ -2106,7 +2103,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：儿童饮食习惯的培养</p>
            </div>
@@ -2933,9 +2929,6 @@
    gotoLabel(id) {
      (this.container ? this.container : document).getElementById(id).scrollIntoView()
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -840,7 +840,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：新生儿特点与保健</p>
            </div>
@@ -1147,7 +1146,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：重视新生儿疾病筛查</p>
            </div>
@@ -1229,7 +1227,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：早产儿的特点与保健</p>
            </div>
@@ -2313,7 +2310,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：幼儿期的特点与保健</p>
            </div>
@@ -2965,9 +2961,6 @@
    gotoLabel(id) {
      (this.container ? this.container : document).getElementById(id).scrollIntoView()
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -239,7 +239,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：疾病基础</p>
            </div>
@@ -640,7 +639,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：遗传病、出生缺陷与优生</p>
            </div>
@@ -1391,7 +1389,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童常见疾病——肥胖症</p>
            </div>
@@ -1516,7 +1513,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频七：学前儿童常见疾病——维生素D缺乏性佝偻病</p>
            </div>
@@ -1623,7 +1619,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童常见疾病——缺铁性贫血</p>
            </div>
@@ -1691,7 +1686,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童常见疾病——上呼吸道感染</p>
            </div>
@@ -1840,7 +1834,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童常见疾病——龋齿</p>
            </div>
@@ -1921,7 +1914,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童常见疾病——中耳炎</p>
            </div>
@@ -1968,7 +1960,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童常见疾病——弱视</p>
            </div>
@@ -2317,7 +2308,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：传染病基础知识——特性与三个环节</p>
            </div>
@@ -2537,7 +2527,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：传染病及其预防——疫苗</p>
            </div>
@@ -3172,7 +3161,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：传染病及其预防——狂犬病</p>
            </div>
@@ -3296,7 +3284,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：学前儿童常见寄生虫病——蛲虫病</p>
            </div>
@@ -3834,7 +3821,7 @@
      this.pathThree = await getResourcePath("79aa2ccd431dcc000dbe2962ded4397c");
      this.pathFour = await getResourcePath("94654e3d22604a815f9f4558616d8f39");
      this.pathFive = await getResourcePath("2373520e42d1be7bb70fbd5729d2f860");
      this.pathSix = await getResourcePath("bf7cabfb18771490b5cbb2eebdf424a3");
      this.pathSix = await getResourcePath("dac5587e1f5e51b67f221773b04c1aed");
      this.pathSeven = await getResourcePath("99a137c537d757a6ee39e6888218ca7c");
      this.pathEight = await getResourcePath("9a1e8e3374e3bdf82a5066ead76398ef");
      this.pathNine = await getResourcePath("7ae6133d91e84c4ea5c96d5d4ac62fb9");
@@ -3852,9 +3839,6 @@
    gotoLabel(id) {
      (this.container ? this.container : document).getElementById(id).scrollIntoView()
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -334,7 +334,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：体温测量</p>
            </div>
@@ -388,7 +387,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：物理降温</p>
            </div>
@@ -475,7 +473,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">
                视频：学前儿童常用的护理与急救技术——儿童科学用药指南
@@ -596,7 +593,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：止鼻血</p>
            </div>
@@ -1015,7 +1011,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：异物的处理</p>
            </div>
@@ -1057,7 +1052,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：鱼刺卡喉的处理</p>
            </div>
@@ -1221,7 +1215,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：惊厥、晕厥、休克的处理</p>
            </div>
@@ -1388,7 +1381,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：骨折与脱位</p>
            </div>
@@ -1475,7 +1467,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：心肺复苏</p>
            </div>
@@ -1936,7 +1927,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：幼儿园安全教育</p>
            </div>
@@ -2596,9 +2586,6 @@
      this.$data.pathNine = await getResourcePath("bf45a94562ab237da0ef65ba33631022");
      this.$data.pathTen = await getResourcePath("f7b5594f23b2ded96e15b99c296be54d");
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -306,7 +306,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：动力定型及其形成</p>
            </div>
@@ -595,7 +594,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：七步洗手法</p>
            </div>
@@ -630,7 +628,7 @@
            />
            云测试
          </h6>
          <p class="blockh6-c center">
          <p class="blockh6-c">
            <span class="img center dl-bl w100">专题九 学习主题一</span>
            <examinations
            v-if="questionData"
@@ -996,7 +994,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：晨间检查</p>
            </div>
@@ -1058,7 +1055,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：预防接种</p>
            </div>
@@ -1272,7 +1268,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：传染病基础知识——隔离</p>
            </div>
@@ -1328,7 +1323,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：传染病基础知识——消毒</p>
            </div>
@@ -1463,7 +1457,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：环境卫生制度与卫生保健登记、统计制度</p>
            </div>
@@ -1900,9 +1893,6 @@
        "960e9aa17b48e900b08cde6e44b774f3"
      );
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -366,7 +366,7 @@
          </p>
          <div class="annotation-border"></div>
          <p class="note" id="childTen-labelOne">
            <a id="m1"></a><a href="chapter010.html#w1">[1]</a>
            <a id="m1"></a><a href="javascript: void(0)">[1]</a>
            摘自《幼儿园建设标准》（建标175—2016）。
          </p>
        </div>
@@ -424,7 +424,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：幼儿园各室配置的卫生要求</p>
            </div>
@@ -1092,7 +1091,6 @@
                controls
                controlslist="nodownload"
                class="w100 video-border video"
                @play="videoPlay"
              ></video>
              <p class="img">视频：幼儿园文具和教玩具卫生</p>
            </div>
@@ -1493,9 +1491,6 @@
    gotoLabel(id) {
      (this.container ? this.container : document).getElementById(id).scrollIntoView()
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -21,61 +21,51 @@
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterTwo>
      <chapterThree
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterThree>
      <chapterFour
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterFour>
      <chapterFive
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterSix>
      <chapterSeven
        v-if="showCatalogList.indexOf(8) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterSeven>
      <chapterEight
        v-if="showCatalogList.indexOf(9) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterEight>
      <chapterNine
        v-if="showCatalogList.indexOf(10) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterNine>
      <chapterTen
        v-if="showCatalogList.indexOf(11) > -1"
        :showPageList="loadPageList"
        :questionData="questionDataMap"
        @closeVideo="closeVideo"
      ></chapterTen>
      <chapterEleven
        v-if="showCatalogList.indexOf(12) > -1"
@@ -167,6 +157,7 @@
        setTimeout(() => {
          this.initSwiper();
          this.initViewer();
          this.closeVideo()
        }, 200);
      }
    },
@@ -238,7 +229,7 @@

    // 测试页面跳转
    // setTimeout(() => {
    // this.gotoPage(1,10);
    // this.gotoPage(8,175);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -907,18 +898,23 @@
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
    },
    closeVideo(path) {
    // 点击视频关闭其他
    closeVideo() {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      allVideo = Array.from(allVideo);
      if(allVideo.length) {
        for (let index = 0; index < allVideo.length; index++) {
          const item = allVideo[index];
          if(item.currentSrc != path) {
            item.pause()
      for (let index = 0; index < allVideo.length; index++) {
        const item = allVideo[index];
        item.addEventListener('playing',(item) => {
          const path  = item.srcElement.src
          const videoList = Array.from(allVideo);
          for (let cindex = 0; cindex < videoList.length; cindex++) {
            const citem = videoList[cindex];
            if(citem.currentSrc != path && path) {
              citem.pause()
            }
          }
        }
        })
      }
    }
  },

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

@@ -575,10 +575,6 @@
        </div>
      </div>
    </div>
    <!-- <div class="page-box padding-116" page="10">
      <drag :question="dragQuestion" :page="10"/> 
        <graffiti style="width:100%" />
    </div> -->
    <!-- 函数控件弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
@@ -823,11 +819,9 @@
import examinations from "@/components/examinations/index.vue";
import { getResourcePath } from "@/assets/methods/resources";
import { getCollectResource,setCollectResource } from "@/assets/methods/resources";
import drag from '@/components/dragQuestion/index.vue'
import graffiti from "@/components/graffiti/index.vue"
export default {
  name: "chapter-one",
  components: { examinations,drag,graffiti },
  components: { examinations },
  props: {
    showPageList: {
      type: Array,

 src/components/dragQuestion/index.vue

@@ -1,5 +1,28 @@
<template>
  <div class="drag-box">
  <div class="drag-box" :style="{ borderColor: bcColor }">
    <div class="title-box">
      <p class="text" style="text-indent:2em !important"><span class="hs1">◇</span>{{ titileText }}</p>
      <span class="svg-btn t0"  @mouseenter="mouseenterTitle" @mouseleave="mouseleaveTitle">
        <p class="p-title" v-if="ishowTitle">请拖拽答案到括号里吧</p>
          <svg
          t="1719309984490"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6316"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="20"
          height="20"
        >
          <path
            d="M510.66571776 2.32285525c281.13999758 0.03143566 510.59693795 229.62226973 510.04273323 510.34079346-0.55769771 281.76056661-229.64788451 510.68426013-510.37339307 509.99849074-281.55681565-0.68693447-509.37908565-228.64309817-509.75166009-510.05321216C0.20965945 231.71226624 229.53852701 2.29141959 510.66571776 2.32285525zM972.54389419 512.41565298C972.50314354 258.01834837 766.47298389 51.25351879 510.91837042 50.72958578c-254.73844338-0.52160398-461.85256163 206.22576071-462.11918507 461.70003911-0.26545949 254.42175431 206.44814165 460.98865493 461.56614428 461.71517497C764.4715611 974.86899086 972.5846437 766.95849529 972.54389419 512.41565298zM539.07335282 677.31941831c-21.78046749 0-42.9799515 0-64.78370475 0 0-12.93997511-0.69159139-25.64243456 0.14553657-38.24359993 1.68939179-25.44566841 7.57490347-49.85162069 20.87115321-72.0221275 10.34708992-17.25368889 23.52341675-32.14269326 38.16209863-45.82548935 18.18046691-16.99288633 36.5774939-33.76688469 54.39702926-51.13118151 10.49262649-10.22367517 19.81863026-21.62794496 24.66675485-35.82070101 11.61384277-34.00090851 4.18913394-64.36339485-18.43079054-91.405312-37.56481536-44.90802403-100.39250489-46.44605838-138.86663567-23.96934258-24.24993792 14.16597845-38.78965362 35.84282283-47.27736433 61.9113893-3.80491662 11.68719417-6.43273045 23.75744057-9.84295083 36.5856438-22.35912192-2.65459257-45.24566983-5.3720576-68.99030357-8.19081558 0.88602851-5.92276935 1.52056946-11.49159197 2.57425635-16.9800795 5.91229042-30.78861824 16.59935403-59.50246343 36.69741568-84.13079666 24.48396061-30.00271872 56.38215225-47.47180259 93.95744654-54.68344547 39.22044359-7.527168 78.41527125-6.71448974 116.55641316 5.67360967 48.83402752 15.86002717 84.96908857 46.85006848 101.39030641 96.21501497 15.76571904 47.39379427 8.01966421 92.16443165-23.01345564 132.15913187-19.68590051 25.37115307-44.16869717 45.98383275-67.17633194 68.0751673-10.12121714 9.71837099-20.36119211 19.49728541-29.15278394 30.3741292-13.05873294 16.15459442-18.04308025 35.69262933-19.61720718 56.12134969C540.4507136 653.56547072 539.84644437 665.12226418 539.07335282 677.31941831zM470.0818853 814.35345351c0-25.59353401 0-50.94023737 0-76.69910073 25.64359851 0 50.98447986 0 76.7526582 0 0 25.51552569 0 50.86921501 0 76.69910073C521.33997454 814.35345351 495.85239154 814.35345351 470.0818853 814.35345351z"
            p-id="6317"
          ></path>
        </svg>

      </span>
    </div>
    <div
      v-for="(item, index) in drageQuestion"
      :key="item.id"
@@ -18,41 +41,41 @@
            {{ item.userAnswer[ditem.num].txt }}
            <span>
              <svg
                    v-if="getItemRight(index,ditem.num)"
                    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="getItemRight(index,ditem.num) == 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>
                v-if="getItemRight(index, ditem.num)"
                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="getItemRight(index, ditem.num) == 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>
          </span>
        </span>
@@ -61,7 +84,14 @@
      <!-- 选项 -->
      <ul class="option-box">
        <li v-for="(citem, cindex) in item.option" :key="cindex">
          <span class="drag-option" @mousedown="mousedown" v-show="item.userAnswer.findIndex(eitem => eitem.value == citem.value) == -1"
          <span
            class="drag-option"
            @mousedown="mousedown"
            v-show="
              item.userAnswer.findIndex(
                (eitem) => eitem.value == citem.value
              ) == -1
            "
            >{{ citem.value }}、{{ citem.txt }}</span
          >
        </li>
@@ -94,14 +124,20 @@
                    style="margin-left: 20px"
                  >
                    <span>您的答案：</span>
                    <span
                      class="errorBox"
                      v-if="item.userAnswer.length"
                    <span class="errorBox" v-if="item.userAnswer.length">
                      <span
                        v-for="(answerItem, answerIdnex) in item.userAnswer"
                        :key="answerIdnex"
                        >{{ answerItem.value
                        }}<span
                          v-if="
                            answerIdnex !== item.userAnswer.length - 1 &&
                            answerItem.value
                          "
                          >,</span
                        ></span
                      >
                      <span v-for="(answerItem,answerIdnex) in item.userAnswer" :key="answerIdnex">{{answerItem.value}}<span v-if="answerIdnex !== item.userAnswer.length - 1 && answerItem.value">,</span></span>
                      
                      </span
                    >
                    </span>
                  </p>
                </div>
                <p class="difficulty" v-if="item.difficulty">
@@ -192,6 +228,14 @@
    page: {
      type: Number,
    },
    bcColor: {
      type: String,
      default: "#8fae34",
    },
    titileText: {
      type: String,
      default: "阅读下面的文字，为小蚂蚁选择一种性格吧。",
    },
  },
  watch: {
    question: {
@@ -200,7 +244,7 @@
          this.config.activeBook.name + "-drag-" + this.page
        );
        if (oldAnswer) {
          this.submitState = true
          this.submitState = true;
          oldAnswer = JSON.parse(oldAnswer);
          for (let index = 0; index < newValue.length; index++) {
            // 旧答案赋值
@@ -232,24 +276,24 @@
      maxX: null,
      maxY: null,
      spaceList: [],
      submitState:false,
      isLift:false
      submitState: false,
      isLift: false,
      ishowTitle:false
    };
  },
  mounted() {
  },
  mounted() {},
  methods: {
    // 1.选项拖拽
    // 2.限制拖拽移动只能在题范围内
    // 3.限制鼠标松开要在空格的范围内
    mousedown(e) {
      e.preventDefault();
      if(this.submitState) return false
      this.isLift = false
      if (this.submitState) return false;
      this.isLift = false;
      this.moveDom = e.toElement;
      this.parentDom = this.getParentWithClass(e.toElement, "question-box");
      this.questionIndex = this.parentDom.getAttribute("num");
      if(!this.spaceList.length) this.getSpaceInfo(this.parentDom);
      if (!this.spaceList.length) this.getSpaceInfo(this.parentDom);
      const parentInfo = this.parentDom.getBoundingClientRect();
      this.parentX = parentInfo.x;
      this.parentY = parentInfo.y;
@@ -263,14 +307,14 @@
      // 限制在此题范围内拖动
      if (e.x <= this.maxX && e.y < this.maxY) {
        const moveX = e.x - this.parentX;
        const moveY = e.y - this.parentY;
        const moveY = e.y - this.parentY + 40;
        this.moveDom.style.left = moveX + "px";
        this.moveDom.style.top = moveY + "px";
        // 如果还有有空格
        if (this.spaceList.length) {
          for (let index = 0; index < this.spaceList.length; index++) {
            let item = this.spaceList[index];
            if(!item) return false
            if (!item) return false;
            if (
              e.x >= item.minX &&
              e.x <= item.maxX &&
@@ -278,22 +322,22 @@
              e.y <= item.maxY
            ) {
              // 如果移动到空格范围内,且鼠标抬起后,将答案填入空格,并将该空格的数据清空(空格不能删除,只能清空,否则导致数组索引改变,不能正确写入到指定空格中)
              if(!this.isLift) return false
              if (!this.isLift) return false;
              this.$set(
                this.drageQuestion[this.questionIndex].userAnswer,
                index,
                {
                  value:this.moveDom.textContent.charAt(0),
                  txt:this.moveDom.textContent.slice(2)
                  value: this.moveDom.textContent.charAt(0),
                  txt: this.moveDom.textContent.slice(2),
                }
              );
              if(this.drageQuestion[this.questionIndex].userAnswer[index]) {
              if (this.drageQuestion[this.questionIndex].userAnswer[index]) {
                this.moveDom.style.display = "none";
                this.moveDom = null;
                this.$set(this.spaceList,index,{})
                this.$set(this.spaceList, index, {});
              }
            } else {
              if(this.isLift && this.moveDom) {
              if (this.isLift && this.moveDom) {
                // 在非空格区域抬起鼠标
                this.moveDom.style.position = "";
                this.moveDom.style.left = "0px";
@@ -308,22 +352,20 @@
    mouseup(e) {
      if (this.moveDom) {
        // this.moveDom = null;
        
      }
      this.isLift = true
    
      this.isLift = true;
    },
    // 获取题目空格坐标
    getSpaceInfo(parentDom) {
      let arr = [];
      const list = parentDom.querySelectorAll(".space");
      

      for (let index = 0; index < list.length; index++) {
        const itemInfo = list[index].getBoundingClientRect();
        arr.push({
          minX: itemInfo.x,
          maxX: itemInfo.x + itemInfo.width,
          minY: itemInfo.y + 3 ,
          minY: itemInfo.y + 3,
          maxY: itemInfo.y + itemInfo.height,
        });
      }
@@ -355,51 +397,49 @@
    },
    // 提交
    submitData() {
      this.submitState = true
      this.submitState = true;
      let arr = [];
      const data = this.drageQuestion;
      for (let index = 0; index < data.length; index++) {
        const item = data[index];
        for (let cindex = 0; cindex < item.userAnswer.length; cindex++) {
          let citem = item.userAnswer[cindex];
          arr[cindex] = citem.value
          arr[cindex] = citem.value;
        }
        item.isRight = JSON.stringify(arr)  == JSON.stringify(item.answer)
        item.isComplete = true
        item.isRight = JSON.stringify(arr) == JSON.stringify(item.answer);
        item.isComplete = true;
      }
    },
    redio() {
      this.submitState = false
      this.submitState = false;
      localStorage.removeItem(
        this.config.activeBook.name + "-drag-" + this.page
      );
      let arr = []
      let arr = [];
      // const data = []
      for (let index = 0; index < this.drageQuestion.length; index++) {
        const item = this.drageQuestion[index];
        item.isComplete = false
        item.isRight = null
        item.isComplete = false;
        item.isRight = null;
        for (let cindex = 0; cindex < item.option.length; cindex++) {
          const citem = item.option[cindex];
          arr.push(
            {
              txt:'',
              value:''
            }
          )
          arr.push({
            txt: "",
            value: "",
          });
        }
        item.userAnswer = arr
        item.userAnswer = arr;
      }
      const optionList = (
        this.container ? this.container : document
      ).querySelectorAll(".drag-option");
      for (let index = 0; index < optionList.length; index++) {
        const item = optionList[index];
        item.style.position = null
        item.style.top = null
        item.style.left = null
        item.style.position = null;
        item.style.top = null;
        item.style.left = null;
      }
      this.spaceList = []
      this.spaceList = [];
    },
    seeAnswer() {
      for (let index = 0; index < this.drageQuestion.length; index++) {
@@ -439,17 +479,25 @@
      }
    },
    // 显示对错方法
    getItemRight(num,number) {
      if(!this.submitState) return null
      let flag = null
      const item = this.question[num]
      console.log(item,num,number);
      const answer = item.answer[number]
      const userAns = item.userAnswer[number].value
      if(answer && userAns) {
        flag = answer == userAns
      } 
      return flag
    getItemRight(num, number) {
      if (!this.submitState) return null;
      let flag = null;
      const item = this.question[num];
      console.log(item, num, number);
      const answer = item.answer[number];
      const userAns = item.userAnswer[number].value;
      if (answer && userAns) {
        flag = answer == userAns;
      }
      return flag;
    },
    mouseenterTitle() {
      this.ishowTitle = true
      console.log(this.ishowTitle );
    },
    mouseleaveTitle() {
      this.ishowTitle = false
      console.log(this.ishowTitle );
    }
  },
};
@@ -460,7 +508,11 @@
  text-indent: 0 !important;
}
.drag-box {
  box-sizing: border-box;
  position: relative;
  border: 1px solid;
  padding: 10px;
  border-radius: 10px;
}
.space {
  display: inline-block;
@@ -510,6 +562,40 @@
.el-collapse {
  width: 100%;
}
.svg-btn {
  position: relative;
  margin-left: 5px;
  max-height: 20px;
  cursor: pointer;
  display: flex;
  padding: 3px;
  fill: #fff;
  border: 1px solid #8fae34;
  border-radius: 5px;
  background-color: #8fae34;
  &:hover {
    fill: #8fae34;
    background-color: #fff;
  }
}
.p-title {
  text-indent: 0 !important;
  position: absolute;
  top: -33px;
  background-color:#8fae34 ;
  padding: 0 4px;
  white-space: nowrap;
  border-radius: 4px;
  color: #fff;
}
.title-box {
  display: flex;
  margin-bottom: 20px;
  p {
    margin: 0;
    text-indent: 2em ;
  }
}
/** 解析 */
.objective {
  /deep/ .el-collapse-item__header {

 src/components/examinations/index.vue

@@ -464,14 +464,20 @@
        >保存</el-button
      >
      <el-button
        @click="handleQuestion"
        @click="(e) =>{
          handleQuestion()
          saveAnswer(e)
        }"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >提交</el-button
      >
      <el-button @click="redo" class="examinations-btn-box">重做</el-button>
      <el-button
        @click="openAnswers"
        @click="(e) => {
          openAnswers()
          saveAnswer(e)
        }"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >查看答案</el-button

 src/components/graffiti/components/brushSize.vue

@@ -9,6 +9,7 @@
      title="调整笔刷粗细"
      @change="(event) => $emit('change-size', +event.target.value)"
    />
    <el-color-picker v-model="checkColor" @change="onChangeColor"></el-color-picker>
  </div>
</template>

@@ -24,12 +25,29 @@
    brushSize() {
      return this.size
    }
  },
  data() {
    return  {
      checkColor:"#000000"
    }
  },
  methods:{
    onChangeColor(color) {
      this.$emit("change-color", color);
    },
  }
};

// const brushSize = computed(() => props.size);
</script>
<style scoped>
<style lang="less" scoped>
.wrap-range {
  display: flex;
  align-items: center;
  .el-color-picker {
    margin-left: 20px;
  }
}
.wrap-range input {
  width: 150px;
  height: 20px;

 src/components/graffiti/components/colorPicker.vue

File was deleted

 src/components/graffiti/components/toolBtns.vue

@@ -5,9 +5,15 @@
      :key="index"
      :class="{ active: toolSelected === item.name }"
      :title="item.title"
      @click="onChangeTool(item.name)"
      @click="onChangeTool(item.name, index)"
      :style="{ boxShadow: index == num ? '0 0 15px #00ccff' : '' }"
    >
      <i :class="['iconfont', item.icon]"></i>
      <img
        :src="item.icon"
        alt=""
        class="giaffiti-btn"
        :style="{ width: index == 0 ? '18px' : '' }"
      />
    </button>
  </div>
</template>
@@ -20,24 +26,46 @@
      default: "brush",
    },
  },
  computed:{
  computed: {
    toolSelected() {
      return this.tool
    }
      return this.tool;
    },
  },
  data() {
    return {
      toolList: [
        { name: "brush", title: "画笔", icon: "icon-qianbi" },
        { name: "eraser", title: "橡皮擦", icon: "icon-xiangpi" },
        { name: "clear", title: "清空", icon: "icon-qingchu" },
        { name: "undo", title: "撤销", icon: "icon-chexiao" },
        { name: "save", title: "保存", icon: "icon-fuzhi" },
        {
          name: "brush",
          title: "画笔",
          icon: require("@/assets/images/brush.png"),
        },
        {
          name: "eraser",
          title: "橡皮擦",
          icon: require("@/assets/images/rubber.png"),
        },
        {
          name: "clear",
          title: "清空",
          icon: require("@/assets/images/scrub.png"),
        },
        {
          name: "undo",
          title: "撤销",
          icon: require("@/assets/images/revoke.png"),
        },
        {
          name: "save",
          title: "保存",
          icon: require("@/assets/images/save.png"),
        },
      ],
      num: 0,
    };
  },
  methods: {
    onChangeTool(tool) {
    onChangeTool(tool, index) {
      if (index == 0 || index == 1) this.num = index;
      this.$emit("change-tool", tool);
    },
  },
@@ -45,6 +73,10 @@
</script>

<style scoped>
.tools {
  display: flex;
  align-items: center;
}
.tools button {
  /* border-radius: 50%; */
  width: 32px;
@@ -71,4 +103,7 @@
.tools button i {
  font-size: 20px;
}
.giaffiti-btn {
  width: 24px;
}
</style>

 src/components/graffiti/index.vue

@@ -1,3 +1,4 @@
<!-- 涂色连线题控件 -->
<template>
  <div class="page">
    <div class="main">
@@ -5,7 +6,6 @@
        <canvas
          id="canvas"
          :style="{
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }"
@@ -14,8 +14,7 @@
      </div>
    </div>
    <div class="footer">
      <BrushSize :size="brushSize" @change-size="onChangeSize" />
      <ColorPicker :color="brushColor" @change-color="onChangeColor" />
      <BrushSize :size="brushSize" @change-size="onChangeSize"  @change-color="onChangeColor" />
      <ToolBtns :tool="brushTool" @change-tool="onChangeTool" />
    </div>
  </div>
@@ -23,16 +22,23 @@

<script>
import BrushSize from "./components/brushSize.vue";
import ColorPicker from "./components/colorPicker.vue";
import ToolBtns from "./components/toolBtns.vue";
export default {
  name: "graffiti",
  components: { BrushSize, ColorPicker, ToolBtns },
  components: { BrushSize, ToolBtns },
  props:{
    page:{
      type:Number
    },
    bcImg:{
      type:String
    }
  },
  data() {
    return {
      canvas: null,
      context: null,
      painting: false,
      painting: false,  // 记录状态，鼠标是否在按下状态
      historyData: [], // 存储历史数据，用于撤销
      brushSize: 5, // 笔刷大小
      brushColor: "#000000", // 笔刷颜色
@@ -42,16 +48,17 @@
        top: 0,
      },
      backgroundImage:
        "https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF",
        "",
    };
  },
  mounted() {
    this.backgroundImage = this.bcImg
    this.canvas = document.getElementById("canvas");
    if (this.canvas.getContext) {
      this.context = this.canvas.getContext("2d", { willReadFrequently: true });
      this.initCanvas();
      // window.addEventListener('resize', updateCanvasPosition);
      window.addEventListener("scroll", this.updateCanvasOffset); // 添加滚动条滚动事件监听器
      window.addEventListener("scroll",this.updateCanvasOffset,true); // 添加滚动条滚动事件监听器
      this.getCanvasOffset();
      this.context.lineGap = "round";
      this.context.lineJoin = "round";
@@ -61,14 +68,39 @@
      this.canvas.addEventListener("mouseleave", this.closePaint);
    }
    this.toolClear();
    const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
    if(oldData) {
      this.backgroundImage = oldData
    }
  },
  // watch:{
  //   backgroundImage:{
  //     handler(newValue) {
  //       if(newValue && this.context) {
  //         const imgData = new Image();
  //         // 分两种情况，初次的图片 直接用外部链接，需要加跨域和时间戳，二次保存的作为背景则不需要
  //         const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
  //         if(oldData) {
  //           imgData.src = newValue
  //         } else {
  //           imgData.src = newValue + '?' + new Date().getTime();
  //           imgData.setAttribute('crossOrigin', '');
  //         }
  //         imgData.onload = () => {
  //           this.context.drawImage(imgData,0,0)
  //         }
  //       }
  //     }
  //   }
  // },
  methods: {
    changeBackground(imgUrl) {
      this.backgroundImage = imgUrl;
    },
    // 初始化 画布，设置大小背景色
    initCanvas() {
      const that = this
      function resetCanvas() {
      const resetCanvas = () => {
        const elPanel = document.getElementById("canvas_panel");
        that.canvas.width = elPanel.clientWidth;
        that.canvas.height = elPanel.clientHeight;
@@ -79,9 +111,22 @@
        that.context.fillRect(0, 0, that.canvas.width, that.canvas.height);
        that.context.fillStyle = "black";
        that.getCanvasOffset(); // 更新画布位置
        // 设置画布背景图
        const imgData = new Image();
        // 分两种情况，初次的图片 直接用外部链接，需要加跨域和时间戳，二次保存的作为背景则不需要
        const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
        if(oldData) {
          imgData.src = oldData
        } else {
          imgData.src = this.backgroundImage + '?' + new Date().getTime();
          imgData.setAttribute('crossOrigin', '');
        }
        imgData.onload = () => {
          this.context.drawImage(imgData,0,0)
        }
      }

      resetCanvas();
      // 监听窗口大小 ，窗口改变重新渲染画布
      window.addEventListener("resize", resetCanvas);
    },

@@ -99,7 +144,7 @@
        y: y - this.canvasOffset.top,
      };
    },

    // 鼠标抬起方法
    downCallback(event) {
      // 先保存之前的数据，用于撤销时恢复（绘制前保存，不是绘制后再保存）
      const data = this.context.getImageData(
@@ -118,7 +163,7 @@
        this.brushTool === "eraser" ? "#FFFFFF" : this.brushColor;
      this.painting = true;
    },

    // 鼠标移动方法(计算坐标并渲染轨迹)
    moveCallback(event) {
      if (!this.painting) {
        return;
@@ -131,16 +176,19 @@
    closePaint() {
      this.painting = false;
    },
    // 重新计算画布的偏移值
    updateCanvasOffset() {
      this.getCanvasOffset(); // 重新计算画布的偏移值
      this.getCanvasOffset(); 
    },

    // 改变笔刷大小
    onChangeSize(size) {
      this.brushSize = size;
    },
    // 改变笔刷颜色
    onChangeColor(color) {
      this.brushColor = color;
    },
    // 保存，清空等按钮
    onChangeTool(tool) {
      this.brushTool = tool;
      switch (tool) {
@@ -155,38 +203,67 @@
          break;
      }
    },
    // 清空canvas所有内容(背景图除外)
    toolClear() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.resetToolActive();
      // 新加内容，清空后将背景图再设置上去
      const imgData = new Image();
      // 分两种情况，初次的图片 直接用外部链接，需要加跨域和时间戳，二次保存的作为背景则不需要
      const oldData = localStorage.getItem(this.config.activeBook.name + '-graffiti-' + this.page)
      if(oldData) {
        imgData.src = oldData
      } else {
        imgData.src = this.backgroundImage + '?' + new Date().getTime();
        imgData.setAttribute('crossOrigin', '');
      }
      imgData.onload = () => {
        this.context.drawImage(imgData,0,0)
      }
    },
    // 保存画布背景和划线到本地方法
    toolSave() {
      const imageDataUrl = this.canvas.toDataURL("image/png");
      console.log(imageDataUrl);
      // const imgUrl = canvas.toDataURL('image/png');
      // const el = document.createElement('a');
      // el.setAttribute('href', imgUrl);
      // el.setAttribute('target', '_blank');
      // el.setAttribute('download', `graffiti-${Date.now()}`);
      // document.body.appendChild(el);
      // el.click();
      // document.body.removeChild(el);
      // resetToolActive();
      var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:800,});
      localStorage.setItem(this.config.activeBook.name + '-graffiti-' + this.page,imgData)
    },
    // 保存为一张图片并下载的方法
    saveImgData() {
      var link = document.createElement("a");
      var imgData = this.canvas.toDataURL({format: 'png', quality:1, width:20000, height:4000});
      var strDataURI = imgData.substr(22, imgData.length);
      var blob = dataURLtoBlob(imgData);
      var objurl = URL.createObjectURL(blob);
      link.download = "grid1.png";
      link.href = objurl;
      link.click();
    
      function  dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
      }
    },
    // 返回上一步方法(撤销)
    toolUndo() {
      // 
      if (this.historyData.length <= 0) {
        this.resetToolActive();
        return;
      }
      // 将画的上一步数据写入canvas 重新渲染
      const lastIndex = this.historyData.length - 1;
      this.context.putImageData(this.historyData[lastIndex], 0, 0);
      this.historyData.pop();

      this.resetToolActive();
    },
    // 存储数据
    saveData(data) {
      this.historyData.length >= 50 && this.historyData.shift(); // 设置储存上限为50步
      this.historyData.push(data);
      console.log('数据',this.historyData);
    },
    // 清除、撤销、保存状态不需要保持，操作完后恢复笔刷状态
    resetToolActive() {
@@ -202,7 +279,7 @@
.page {
  display: flex;
  flex-direction: column;
  width: 1038px;
  width:100%;
  height: 866px;
}