From 3002c5f4593c91cbd5dd8bc684c3800eff9ab122 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期三, 29 五月 2024 21:58:20 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/English/view/components/chapter001.vue | 1316 +++++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 957 insertions(+), 359 deletions(-) diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue index 5c01f67..e437630 100644 --- a/src/books/English/view/components/chapter001.vue +++ b/src/books/English/view/components/chapter001.vue @@ -1,7 +1,7 @@ <template> <div class="chapter" num="0"> <!-- 1 --> - <div class="page-box" page="6"> + <div class="page-box" page="7"> <div class="bodystyle"> <h1 id="a005"> <img class="img-0" alt="" src="../../assets/images/dy1.jpg" /> @@ -23,7 +23,7 @@ </div> </div> <!-- 2 --> - <div class="page-box" page="7"> + <div class="page-box" page="8"> <div class="w100 mb-20" style="padding-right: 20px"> <div class="event-header-bc fl al-end" @@ -46,176 +46,315 @@ >鈪�.Write down the English words for the Chinese cultural symbols in the following pictures.</b > + <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="20.501" + height="20.501" + viewBox="0 0 20.501 20.501" + > + <path + class="a" + d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z" + transform="translate(-3327.144 15329)" + /> + </svg> + </span> + <!-- <button + @click="showAnswerTwo = !showAnswerTwo" + class="parimary-btn" + > + 鏄剧ず绛旀 + </button> --> </p> <div class="fl ju-bt"> <div class="left" style="width: 48%"> - <p class="center"> - <el-image :src="imgOne" :preview-src-list="[imgOne]" /> - </p> - <p class="center"> - 1.<input - v-model="questionData.warnUp.one.value" - class="input-bottom-border fz-18" - @blur="handleQuestion('one')" - @change="setBookQuestion" - /> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="questionData.warnUp.one.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="questionData.warnUp.one.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image :src="imgOne" :preview-src-list="[imgOne]" /> + </p> + <p class="center"> + 1.<input + v-model="questionData.warnUp.one.value" + class="input-bottom-border fz-18" + @blur="handleQuestion('one')" + @change="setBookQuestion" + /> + <span class="icon-box"> + <svg v-if="questionData.warnUp.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="questionData.warnUp.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerTwo" + > + 绛旀锛欳hinese knot </p> </div> <div class="right" style="width: 48%"> - <p class="center"> - <el-image - :src="imgTwo" - :preview-src-list="[imgTwo]" - style="width: 96%" - /> - </p> - <p class="center"> - 2.<input - class="input-bottom-border fz-18" - v-model="questionData.warnUp.two.value" - @blur="handleQuestion('two')" - @change="setBookQuestion" - /> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="questionData.warnUp.two.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="questionData.warnUp.two.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image + :src="imgTwo" + :preview-src-list="[imgTwo]" + style="width: 94%" + /> + </p> + <p class="center"> + 2.<input + class="input-bottom-border fz-18" + v-model="questionData.warnUp.two.value" + @blur="handleQuestion('two')" + @change="setBookQuestion" + /> + <span class="icon-box"> + <svg v-if="questionData.warnUp.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="questionData.warnUp.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerTwo" + > + 绛旀锛欳hinese medicine </p> </div> </div> <div class="fl ju-bt"> <div class="left" style="width: 48%"> - <p class="center"> - <el-image :src="imgThree" :preview-src-list="[imgThree]" /> - </p> - <p class="center"> - 3.<input - class="input-bottom-border fz-18" - v-model="questionData.warnUp.three.value" - @blur="handleQuestion('three')" - @change="setBookQuestion" - /> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="questionData.warnUp.three.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="questionData.warnUp.three.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image :src="imgThree" :preview-src-list="[imgThree]" /> + </p> + <p class="center"> + 3.<input + class="input-bottom-border fz-18" + v-model="questionData.warnUp.three.value" + @blur="handleQuestion('three')" + @change="setBookQuestion" + /> + <span class="icon-box"> + <svg v-if="questionData.warnUp.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="questionData.warnUp.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerTwo" + > + 绛旀锛欳hinese calligraphy </p> </div> <div class="right" style="width: 48%"> - <p class="center"> - <el-image - :src="imgFour" - :preview-src-list="[imgFour]" - style="width: 94%" - /> - </p> - <p class="center"> - 4.<input - class="input-bottom-border fz-18" - v-model="questionData.warnUp.four.value" - @blur="handleQuestion('four')" - @change="setBookQuestion" - /> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="questionData.warnUp.four.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="questionData.warnUp.four.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image + :src="imgFour" + :preview-src-list="[imgFour]" + style="width: 93%" + /> + </p> + <p class="center"> + 4.<input + class="input-bottom-border fz-18" + v-model="questionData.warnUp.four.value" + @blur="handleQuestion('four')" + @change="setBookQuestion" + /> + <span class="icon-box"> + <svg v-if="questionData.warnUp.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="questionData.warnUp.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerTwo" + > + 绛旀锛歍aichi </p> </div> </div> <div class="fl ju-bt"> <div class="left" style="width: 48%"> - <p class="center"> - <el-image :src="imgFive" :preview-src-list="[imgFive]" /> - </p> - <p class="center"> - 5.<input - class="input-bottom-border fz-18" - v-model="questionData.warnUp.five.value" - @blur="handleQuestion('five')" - @change="setBookQuestion" - /> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="questionData.warnUp.five.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="questionData.warnUp.five.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image :src="imgFive" :preview-src-list="[imgFive]" /> + </p> + <p class="center"> + 5.<input + class="input-bottom-border fz-18" + v-model="questionData.warnUp.five.value" + @blur="handleQuestion('five')" + @change="setBookQuestion" + /> + <span class="icon-box"> + <svg v-if="questionData.warnUp.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="questionData.warnUp.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerTwo" + > + 绛旀锛歴weet dumpling </p> </div> <div class="right" style="width: 48%"> - <p class="center"> - <el-image - :src="imgSix" - :preview-src-list="[imgSix]" - style="width: 94%" - /> - </p> - <p class="center"> - 6.<input - class="input-bottom-border fz-18" - v-model="questionData.warnUp.six.value" - @blur="handleQuestion('six')" - @change="setBookQuestion" - /> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="questionData.warnUp.six.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="questionData.warnUp.six.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image + :src="imgSix" + :preview-src-list="[imgSix]" + style="width: 92%" + /> + </p> + <p class="center"> + 6.<input + class="input-bottom-border fz-18" + v-model="questionData.warnUp.six.value" + @blur="handleQuestion('six')" + @change="setBookQuestion" + /> + <span class="icon-box"> + <svg v-if="questionData.warnUp.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="questionData.warnUp.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerTwo" + > + 绛旀锛欳hinese chess </p> </div> </div> <p class="t0"> <b>鈪�.What other symbols can you think of?</b> - <button class="parimary-btn" @click="showAnswer('wp-seven')"> + <!-- <button + class="parimary-btn" + @click="showAnswerOne = !showAnswerOne" + > 鏄剧ず绛旀 - </button> + </button> --> + <span class="btn-box" @click="showAnswerOne = !showAnswerOne"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="20.501" + height="20.501" + viewBox="0 0 20.501 20.501" + > + <path + class="a" + d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z" + transform="translate(-3327.144 15329)" + /> + </svg> + </span> </p> <p class="t0"> <input v-model="questionData.warnUp.seven" - class="input-bottom-border w100 fz-18" + class="input-bottom-border fz-18" + style="width: 100%" /> + </p> + <p + class="event-header-text-bc pd-5" + style="width: 100%" + v-if="showAnswerOne" + > + 绛旀锛�1. Hanfu 2. Qipao 3. Tang Suit 4. Chinese tea 5. Chinese silk + 6. Chinese calligraphy & painting 7. Chinese embroidery 8. Chinese + papercut 9. Chinese lantern 10. Moon cake 11. Memorial archway 12. + Chopsticks 13. Compass 14. Chinese kite 15. Kungfu 16. Opera facial + makeup </p> </div> </div> @@ -224,7 +363,7 @@ </div> </div> <!-- 3 --> - <div class="page-box" page="8"> + <div class="page-box" page="9"> <ul class="preface-odd-header w100 fl ju-bt"> <li class=""></li> <li class="fz-18"> @@ -247,9 +386,6 @@ corresponding descriptions.</b > </p> - <!-- <p class="center"> - <img class="img-g" alt="" src="../../assets/images/0013-1.jpg" /> - </p> --> <p class="center"> <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" /> </p> @@ -257,14 +393,28 @@ <span class="bjh3">Reading</span> <audio :src="resource.readingOne" controls></audio> </h3> - <!-- <p class="center"> - <img class="img-g" alt="" src="../../assets/images/0013-2.jpg" /> - </p> --> <p> 1.How was Chinese culture introduced to the world in ancient times? - <button class="parimary-btn" @click="showAnswer('rd-one')"> + <!-- <button + class="parimary-btn" + @click="showAnswerThree = !showAnswerThree" + > 鏄剧ず绛旀 - </button> + </button> --> + <span class="btn-box" @click="showAnswerThree = !showAnswerThree"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="20.501" + height="20.501" + viewBox="0 0 20.501 20.501" + > + <path + class="a" + d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z" + transform="translate(-3327.144 15329)" + /> + </svg> + </span> </p> <textarea v-model="questionData.reading.one" @@ -274,12 +424,36 @@ 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" + > + 绛旀锛歍he Silk Road Immigrants Sinologist + </p> <p> 2.China offers so much to see and explore.What took you by surprise about China? - <button class="parimary-btn" @click="showAnswer('rd-two')"> + <!-- <button + class="parimary-btn" + @click="showAnswerFour = !showAnswerFour" + > 鏄剧ず绛旀 - </button> + </button> --> + <span class="btn-box" @click="showAnswerFour = !showAnswerFour"> + <svg + xmlns="http://www.w3.org/2000/svg" + width="20.501" + height="20.501" + viewBox="0 0 20.501 20.501" + > + <path + class="a" + d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z" + transform="translate(-3327.144 15329)" + /> + </svg> + </span> </p> <textarea v-model="questionData.reading.two" @@ -289,6 +463,15 @@ class="fz-16 fm-son" @change="setBookQuestion" ></textarea> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 91%" + v-if="showAnswerFour" + > + 绛旀锛�(1)Various delicious food (2)Unique architectures (3)Beautiful + (4)Intangible cultural heritage, such as Taichi, shadow puppet show, + traditional Chinese medicine, Peking Opera scenery + </p> <p class="center"><b>My Experience in Wonderland</b></p> <p class="block"> 鈥淪o how was your journey to China?鈥� asks Alexandra.鈥淗ighly @@ -299,16 +482,18 @@ </p> <p> My - <span class="word-bc" @click="saveWord('incredible')" + <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('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('landscapes')" + <span class="word-bc" @click="saveWord($event, 'landscapes')" >landscapes</span >. </p> @@ -316,12 +501,12 @@ 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('hospitable')" + <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('civilization')" + <span class="word-bc" @click="saveWord($event, 'civilization')" >civilization</span > much easier,enjoyable and memorable.I consider China my second home @@ -329,7 +514,9 @@ </p> <p> You cannot - <span class="word-bc" @click="saveWord('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> @@ -340,7 +527,7 @@ </div> </div> <!-- 4 --> - <div class="page-box"> + <div class="page-box" page="10"> <div class="w100 mb-20" style="padding-right: 20px"> <div class="event-header-bc fl al-end" @@ -358,15 +545,17 @@ a new kind of food every day for one whole year,the list of Chinese food would still never end! Though I love to eat almost all kinds of Chinese cuisine,I found Sichuan and Hunan cuisine quite - <span class="word-bc" @click="saveWord('mouth-watering')" + <span class="word-bc" @click="saveWord($event, 'mouth-watering')" >mouth-watering</span > and - <span class="word-bc" @click="saveWord('stimulating')" + <span class="word-bc" @click="saveWord($event, 'stimulating')" >stimulating</span >.For a - <span class="word-bc" @click="saveWord('foodie')">foodie</span> like - me,China is a heaven.I simply cannot live without Chinese food. + <span class="word-bc" @click="saveWord($event, 'foodie')" + >foodie</span + > + like me,China is a heaven.I simply cannot live without Chinese food. </p> <p> Like I said earlier,China is a huge wonderland.It has thousands of @@ -374,11 +563,13 @@ its own story and history.From the big and advanced cities like Shanghai or Guangzhou to the ancient cities like Xi鈥檃n and Hangzhou,each city has its - <span class="word-bc" @click="saveWord('unique')">unique</span> + <span class="word-bc" @click="saveWord($event, 'unique')" + >unique</span + > <span class="word-bc" style="margin-left: 5px" - @click="saveWord('atmosphere')" + @click="saveWord($event, 'atmosphere')" >atmosphere</span > that attracts you.I visited more than a dozen cities and came across @@ -393,8 +584,8 @@ <!-- <p class="center"> <img class="img-g" alt="" src="../../assets/images/0014-1.jpg" /> </p> --> - <p class="fl al-cn"> - <span class="zt-cs">Words & Expressions</span> + <p class="fl al-cn mt-40"> + <span class="zt-cs " style="font-size:20px">Words & Expressions</span> <span class="line-border-box"></span> </p> <audio @@ -458,7 +649,7 @@ </div> </div> <!-- 5 --> - <div class="page-box"> + <div class="page-box" page="11"> <ul class="preface-odd-header w100 fl ju-bt"> <li class=""></li> <li class="fz-18"> @@ -502,8 +693,8 @@ <p>be curious about ...瀵光�︹�︽劅鍒板ソ濂�</p> <p>along the way 娌块��</p> <div class="bj-note"> - <p><b>Notes:</b></p> - <p> + <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涓栫邯鑻卞浗浣滃鍒樻槗鏂峰崱缃楀皵鍒涗綔鐨勮憲鍚嶅効绔ユ枃瀛︿綔鍝侊紝璁茶堪浜嗕竴涓悕鍙埍涓戒笣鐨勮嫳鍥藉皬濂冲涓轰簡杩介�愪竴鍙彛鐫�鎬�琛ㄣ�佷細璇磋瘽鐨勫厰瀛愯�屼笉鎱庢帀鍏ヤ簡鍏斿瓙娲烇紝浠庤�岃繘鍏ヤ簡涓�涓濂囩殑鍥藉害骞剁粡鍘嗕簡涓�绯诲垪濂囧够鍐掗櫓鐨勬晠浜嬨�� @@ -514,13 +705,15 @@ A.Mark the items that made the author curious when she arrived in China. </p> - <p>鈻� Language</p> - <p>鈻� People</p> - <p>鈻� Culture</p> - <p>鈻� Cuisine</p> - <p>鈻� Folk art</p> - <p>鈻� Landscapes</p> - <p>鈻� Transportation</p> + <p> + <input type="checkbox" name="ball" value="basketball" id="1" checked="checked"/> + Language</p> + <p><input type="checkbox" name="ball" value="basketball" id="1" /> People</p> + <p><input type="checkbox" name="ball" value="basketball" id="1"/> Culture</p> + <p><input type="checkbox" name="ball" value="basketball" id="1" /> Cuisine</p> + <p><input type="checkbox" name="ball" value="basketball" id="1" /> Folk art</p> + <p><input type="checkbox" name="ball" value="basketball" id="1" /> Landscapes</p> + <p><input type="checkbox" name="ball" value="basketball" id="1" /> Transportation</p> </div> </div> <div class="preface-bottom"> @@ -528,7 +721,7 @@ </div> </div> <!-- 6 --> - <div class="page-box"> + <div class="page-box" page="12"> <div class="w100 mb-20" style="padding-right: 20px"> <div class="event-header-bc fl al-end" @@ -553,6 +746,14 @@ style="margin-left: 40px; width: 92%" class="fz-16 textarea-text" ></textarea> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛欳hinese 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" @@ -561,6 +762,14 @@ style="margin-left: 40px; width: 92%" class="fz-16 textarea-text" ></textarea> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛歐hen 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鈥檚 expectations of her stay in China?</p> <textarea v-model="testData.tx.three" @@ -569,6 +778,13 @@ style="margin-left: 40px; width: 92%" class="fz-16 textarea-text" ></textarea> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛歍he 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" @@ -577,6 +793,14 @@ style="margin-left: 40px; width: 92%" class="fz-16 textarea-text" ></textarea> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛歍he author thought the local Chinese were very friendly and + hospitable. + </p> <p>5.What鈥檚 the author鈥檚 impression of the cities in China?</p> <textarea v-model="testData.tx.five" @@ -585,6 +809,16 @@ style="margin-left: 40px; width: 92%" class="fz-16 textarea-text" ></textarea> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛欵ach city has its unique atmosphere with charming features and + unique landscapes. + </p> + Each city has its unique atmosphere with charming features and unique + landscapes. <p><b>鈪�.Language focus.</b></p> <p> A.Fill in the blanks with the proper words in the passage.The @@ -624,6 +858,13 @@ style="width: 60px" />atmosphere that attracts people. </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛歝uisine, landscapes, civilization, explore, unique + </p> <p> B.Underline the following expressions in the passage and make sentences with them. @@ -636,6 +877,14 @@ style="width: 77%" /> </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛歋he got selected as the cultural ambassador to show Chinese + culture on campus. + </p> <p> 2.be curious about<input v-model="testData.line.two" @@ -643,6 +892,14 @@ class="input-bottom-border" style="width: 75%" /> + </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛歁any foreigners are curious about the amazing Chinese martial + arts. </p> <p> 3.along the way<input @@ -652,6 +909,14 @@ style="width: 77%" /> </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛欼 suggest that you go to Tibet by train so that you can enjoy + the natural scenery along the way. + </p> <p> 4.come across<input v-model="testData.line.four" @@ -659,6 +924,14 @@ class="input-bottom-border" style="width: 79%" /> + </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛欻e came across the temple fair in Beijing during the Spring + Festival. </p> <p> 5.look forward to<input @@ -668,6 +941,14 @@ style="width: 76%" /> </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛歋he is looking forward to visiting the incredible cities in + China. + </p> </div> </div> <div class="preface-bottom"> @@ -675,7 +956,7 @@ </div> </div> <!-- 7 --> - <div class="page-box"> + <div class="page-box" page="13"> <ul class="preface-odd-header w100 fl ju-bt"> <li class=""></li> <li class="fz-18"> @@ -699,6 +980,13 @@ class="input-bottom-border" /> </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛氬瓟瀛愬紑鍒涗簡骞虫皯鍖栫殑鏁欒偛銆� + </p> <p> 2.Lei Zu invented the technology of reeling silk锛堢极涓濇湳锛塧nd greatly promoted the development of ancient Chinese civilization. @@ -709,6 +997,13 @@ type="text" class="input-bottom-border" /> + </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛氬珮绁栧彂鏄庝簡涓浗缂笣鎶�鏈紝杩欐瀬澶у湴淇冭繘浜嗕腑鍥藉彜浠f枃鏄庣殑鍙戝睍銆� </p> <p> 3.Lu Yu,the author of <i>The Classic of Tea</i>,explored Chinese tea @@ -721,6 +1016,13 @@ class="input-bottom-border" /> </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛氶檰缇斤紝銆婅尪缁忋�嬬殑浣滆�咃紝瀵逛腑鍥借尪閬撹繘琛屼簡娣卞叆鐨勭爺绌躲�� + </p> <p> 4.Zhang Zhongjing was a doctor who had an incredible influence on Chinese medical science. @@ -731,6 +1033,13 @@ type="text" class="input-bottom-border" /> + </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛氬紶浠叉櫙鏄竴浣嶅涓浗鍖诲鏈夌潃閲嶅ぇ褰卞搷鐨勫尰瀛﹀銆� </p> <p> <b>鈪�.Grammar focus:The conditional sentence鈥攊f-clause.</b> @@ -756,6 +1065,14 @@ class="input-bottom-border" />. </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛欼f you try using sticks, you can enjoy the fun of having a + real Chinese meal. + </p> <p> 2.Go to my Chinese New Year party.You will meet my Chinese friends there. @@ -768,6 +1085,14 @@ class="input-bottom-border" />. </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛欼f 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 @@ -776,6 +1101,13 @@ v-model="testData.gr.three" class="input-bottom-border" />. + </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛欼f you drink some Longjing tea, you will love it. </p> <p> 4.One day I will go to Xi鈥檃n,and I will visit the terracotta @@ -789,6 +1121,14 @@ class="input-bottom-border" />. </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛欼f I go to Xi鈥檃n one day, I will visit the terracotta + warriors. + </p> <p> 5.Ask foreigners about their favorite Chinese food.Kung Pao Chicken would possibly be in top three. @@ -800,6 +1140,14 @@ type="text" class="input-bottom-border" />. + </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛� If you ask foreigners about their favorite Chinese food, Kung + Pao Chicken would possible be in top three </p> <p> B.Complete the following sentences using <i>if</i> or @@ -846,11 +1194,33 @@ />I go to Sichuan,I will visit Chengdu Research Base of Giant Panda Breeding. </p> - <ul class="fl ju-ev" style="width: 50%"> - <li><button>鎻愪氦</button></li> - <li><button @click="setTestData">淇濆瓨</button></li> - <li><button>鏌ョ湅绛旀</button></li> - </ul> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛� 1.whether 2.if 3.whether 4.whether + 5.if + </p> + <div class="w100 fl ju-cn"> + <ul class="fl ju-ev" style="width: 50%"> + <li><button class="btn-border btn-w">鎻愪氦</button></li> + <li> + <button @click="setTestData" class="btn-border btn-w"> + 淇濆瓨 + </button> + </li> + <li> + <button + style="min-height:24px" + @click="showQuestionAnswer = !showQuestionAnswer" + class="parimary-btn" + > + 鏌ョ湅绛旀 + </button> + </li> + </ul> + </div> </div> </div> <div class="preface-bottom"> @@ -858,7 +1228,7 @@ </div> </div> <!-- 8 --> - <div class="page-box"> + <div class="page-box" page="14"> <div class="w100 mb-20" style="padding-right: 20px"> <div class="event-header-bc fl al-end" @@ -995,9 +1365,80 @@ /> </p> <div class="bk-wh"> - <p> - exquisite銆�ancient銆�incredible銆�unique銆�traditional銆�outstanding銆�mouth-watering銆�diverse銆�hospitable銆�enjoyable銆�memorable銆�charming + <p class="dl-box"> + <span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'exquisite')" + >exquisite</span + > + <span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'ancient')" + >ancient</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'incredible')" + >incredible</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'unique')" + >unique</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'traditional')" + >traditional</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'outstanding')" + >outstanding</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'mouth-watering')" + >mouth-watering</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'diverse')" + >diverse</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'hospitable')" + >hospitable</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'enjoyable')" + >enjoyable</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'memorable')" + >memorable</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord($event, 'charming')" + >charming</span + > </p> + </div> + <div class="resource-primary-border" style="padding: 8px"> + <el-carousel + :autoplay="false" + trigger="click" + class="bones-carousel carousel-image" + arrow="always" + indicator-position="none" + > + <el-carousel-item + v-for="(item, index) in pptList" + :key="index" + class="bones-carousel-item" + > + <el-image + :src="item" + :preview-src-list="pptList" + :preview-teleported="true" + class="open-image" + /> + </el-carousel-item> + </el-carousel> </div> </div> </div> @@ -1006,7 +1447,7 @@ </div> </div> <!-- 9 --> - <div class="page-box"> + <div class="page-box" page="15"> <ul class="preface-odd-header w100 fl ju-bt"> <li class=""></li> <li class="fz-18"> @@ -1036,191 +1477,292 @@ </div> <div class="fl ju-bt"> <div class="left" style="width: 48%"> - <p class="center"> - <el-image :src="imgSeven" :preview-src-list="[imgSeven]" /> - </p> - <p class="center"> - 1. - <select v-model="dropdownData.one.value"> - <option - v-for="(item, index) in dropDownList" - :key="index" - :value="item" - > - {{ item }} - </option> - </select> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="dropdownData.one.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="dropdownData.one.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image :src="imgSeven" :preview-src-list="[imgSeven]" /> + </p> + <p class="center"> + 1. + <select v-model="dropdownData.one.value"> + <option + v-for="(item, index) in dropDownList" + :key="index" + :value="item" + > + {{ item }} + </option> + </select> + <span class="icon-box"> + <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="dropdownData.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerFive" + > + 绛旀锛歩ntercity train </p> </div> <div class="right" style="width: 48%"> - <p class="center"> - <el-image - :src="imgEnight" - :preview-src-list="[imgEnight]" - style="width: 98%" - /> - </p> - <p class="center"> - 2. - <select v-model="dropdownData.two.value"> - <option - v-for="(item, index) in dropDownList" - :key="index" - :value="item" - > - {{ item }} - </option> - </select> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="dropdownData.two.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="dropdownData.two.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image + :src="imgEnight" + :preview-src-list="[imgEnight]" + style="width: 98%" + /> + </p> + <p class="center"> + 2. + <select v-model="dropdownData.two.value"> + <option + v-for="(item, index) in dropDownList" + :key="index" + :value="item" + > + {{ item }} + </option> + </select> + <span class="icon-box"> + <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="dropdownData.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerFive" + > + 绛旀锛歰nline shopping </p> </div> </div> <div class="fl ju-bt"> <div class="left" style="width: 48%"> - <p class="center"> - <el-image :src="imgNine" :preview-src-list="[imgNine]" /> - </p> - <p class="center"> - 3. - <select v-model="dropdownData.three.value"> - <option - v-for="(item, index) in dropDownList" - :key="index" - :value="item" - > - {{ item }} - </option> - </select> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="dropdownData.three.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="dropdownData.three.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image :src="imgNine" :preview-src-list="[imgNine]" /> + </p> + <p class="center"> + 3. + <select v-model="dropdownData.three.value"> + <option + v-for="(item, index) in dropDownList" + :key="index" + :value="item" + > + {{ item }} + </option> + </select> + <span class="icon-box"> + <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="dropdownData.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerFive" + > + 绛旀锛歟lectronic payment </p> </div> <div class="right" style="width: 48%"> - <p class="center"> - <el-image - :src="imgTen" - :preview-src-list="[imgTen]" - style="width: 94%" - /> - </p> - <p class="center"> - 4. - <select v-model="dropdownData.four.value"> - <option - v-for="(item, index) in dropDownList" - :key="index" - :value="item" - > - {{ item }} - </option> - </select> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="dropdownData.four.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="dropdownData.four.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image + :src="imgTen" + :preview-src-list="[imgTen]" + style="width: 94%" + /> + </p> + <p class="center"> + 4. + <select v-model="dropdownData.four.value"> + <option + v-for="(item, index) in dropDownList" + :key="index" + :value="item" + > + {{ item }} + </option> + </select> + <span class="icon-box"> + <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="dropdownData.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerFive" + > + 绛旀锛歴hared bike </p> </div> </div> <div class="fl ju-bt"> <div class="left" style="width: 48%"> - <p class="center"> - <el-image :src="imgEleven" :preview-src-list="[imgEleven]" /> - </p> - <p class="center"> - 5. - <select v-model="dropdownData.five.value"> - <option - v-for="(item, index) in dropDownList" - :key="index" - :value="item" - > - {{ item }} - </option> - </select> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="dropdownData.five.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="dropdownData.five.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image :src="imgEleven" :preview-src-list="[imgEleven]" /> + </p> + <p class="center"> + 5. + <select v-model="dropdownData.five.value"> + <option + v-for="(item, index) in dropDownList" + :key="index" + :value="item" + > + {{ item }} + </option> + </select> + <span class="icon-box"> + <svg v-if="dropdownData.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="dropdownData.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerFive" + > + 绛旀锛歵ake-away service </p> </div> <div class="right" style="width: 48%"> - <p class="center"> - <el-image - :src="imgTwelve" - :preview-src-list="[imgTwelve]" - style="width: 98%" - /> - </p> - <p class="center"> - 6. - <select v-model="dropdownData.six.value"> - <option - v-for="(item, index) in dropDownList" - :key="index" - :value="item" - > - {{ item }} - </option> - </select> - <span class="icon-box"> - <i - class="el-icon-check correct-icon" - v-if="dropdownData.six.isRight" - ></i> - <i - class="el-icon-close error-icon" - v-if="dropdownData.six.isRight == false" - ></i> - </span> + <div> + <p class="center"> + <el-image + :src="imgTwelve" + :preview-src-list="[imgTwelve]" + style="width: 98%" + /> + </p> + <p class="center"> + 6. + <select v-model="dropdownData.six.value"> + <option + v-for="(item, index) in dropDownList" + :key="index" + :value="item" + > + {{ item }} + </option> + </select> + <span class="icon-box"> + <svg v-if="dropdownData.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" height="20"> + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" p-id="18768"></path> + </svg> + <svg v-if="dropdownData.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" + xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" height="20"> + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" p-id="25746"></path> + </svg> + </span> + </p> + </div> + <p + class="event-header-text-bc pd-5" + style="width: 90%" + v-if="showAnswerFive" + > + 绛旀锛歠acial recognition </p> </div> </div> - <div class="fl ju-ev" style="width: 50%"> - <button @click="setDropdownData">淇濆瓨</button> - <button>鎻愪氦</button> - <button @click="handleDropdown('judge')">鍒ゆ柇姝g‘</button> - <button @click="handleDropdown('answer')">鏌ョ湅绛旀</button> + <div class="w100 fl ju-cn"> + <div class="fl ju-ev" style="width: 60%"> + <button @click="setDropdownData" class="btn-border btn-w"> + 淇濆瓨 + </button> + <button class="btn-border btn-w" @click="handleDropdown('judge')"> + 鎻愪氦 + </button> + <button + style="min-height:24px" + @click="showAnswerFive = !showAnswerFive" + class="parimary-btn" + > + 鏌ョ湅绛旀 + </button> + </div> </div> </div> </div> @@ -1233,6 +1775,7 @@ <script> import getResourcePath from "@/assets/methods/resources"; + export default { name: "chapter-one", data() { @@ -1250,32 +1793,44 @@ imgEleven: require("../../assets/images/0019-5.jpg"), imgTwelve: require("../../assets/images/0019-6.jpg"), imgThirteen: require("../../assets/images/grammar.jpg"), + showAnswerOne: false, + showAnswerTwo: false, + showAnswerThree: false, + showAnswerFour: false, + showAnswerFive: false, showImg: false, + showQuestionAnswer: false, questionData: { warnUp: { one: { value: "", isRight: null, + answer: "Chinese knot", }, two: { value: "", isRight: null, + answer: "Chinese medicine", }, three: { value: "", isRight: null, + answer: "Chinese calligraphy", }, four: { value: "", isRight: null, + answer: "Taichi", }, five: { value: "", isRight: null, + answer: "sweet dumpling", }, six: { value: "", isRight: null, + answer: "Chinese chess", }, seven: "", }, @@ -1383,6 +1938,35 @@ answer: "facial recognition", }, }, + pptList: [ + require("../../assets/images/ppt/ppt_01.png"), + require("../../assets/images/ppt/ppt_02.png"), + require("../../assets/images/ppt/ppt_03.png"), + require("../../assets/images/ppt/ppt_04.png"), + require("../../assets/images/ppt/ppt_05.png"), + require("../../assets/images/ppt/ppt_06.png"), + require("../../assets/images/ppt/ppt_07.png"), + require("../../assets/images/ppt/ppt_08.png"), + require("../../assets/images/ppt/ppt_09.png"), + require("../../assets/images/ppt/ppt_10.png"), + require("../../assets/images/ppt/ppt_11.png"), + require("../../assets/images/ppt/ppt_12.png"), + require("../../assets/images/ppt/ppt_13.png"), + require("../../assets/images/ppt/ppt_14.png"), + require("../../assets/images/ppt/ppt_15.png"), + require("../../assets/images/ppt/ppt_16.png"), + require("../../assets/images/ppt/ppt_17.png"), + require("../../assets/images/ppt/ppt_18.png"), + require("../../assets/images/ppt/ppt_19.png"), + require("../../assets/images/ppt/ppt_20.png"), + require("../../assets/images/ppt/ppt_21.png"), + require("../../assets/images/ppt/ppt_22.png"), + require("../../assets/images/ppt/ppt_23.png"), + require("../../assets/images/ppt/ppt_24.png"), + require("../../assets/images/ppt/ppt_25.png"), + require("../../assets/images/ppt/ppt_26.png"), + require("../../assets/images/ppt/ppt_27.png"), + ], }; }, mounted() { @@ -1401,8 +1985,8 @@ this.getPath(); }, methods: { - saveWord(word) { - this.$emit("saveCharacters", word); + saveWord(event, word) { + this.$emit("saveCharacters", event, word); }, setTestData() { localStorage.setItem("english-testOne", JSON.stringify(this.testData)); @@ -1425,16 +2009,7 @@ ); }, showAnswer(type) { - if (type == "wp-seven") { - this.questionData.warnUp.seven = - "1. Hanfu 2. Qipao 3. Tang Suit 4. Chinese tea 5. Chinese silk"; - } else if (type == "rd-one") { - this.questionData.reading.one = - "(1)The Silk Road (2)Immigrants Sinologist"; - } else if (type == "rd-two") { - this.questionData.reading.two = - "(1)Various delicious food (2)Unique architectures (3)Beautiful scenery (4)Intangible cultural heritage, such as Taichi, shadow puppet show, traditional Chinese medicine, Peking Opera"; - } else if (type == "showImg") { + if (type == "showImg") { this.showImg = !this.showImg; } }, @@ -1479,8 +2054,6 @@ item.value == item.answer ? (item.isRight = true) : (item.isRight = false); - } else if (type == "answer") { - item.value = item.answer; } } this.dropdownData = dropdownDatas; @@ -1509,4 +2082,29 @@ height: 3px; background-color: #f9a71b; } +.mr-20 { + margin-right: 20px; +} +.dl-box { + display: flex; + flex-wrap: wrap; + .dl-span { + display: inline-block; + text-indent: 0; + margin-bottom: 15px; + height: 20px; + line-height: 20px; + } +} +.btn-w { + font-size: 14px; + border-width: 1px; + min-width: 80px; + min-height: 24px; + background-color: #fff; + &:hover { + background-color: #0bab87; + color: #fff; + } +} </style> -- Gitblit v1.9.1