From 06a893e503c32ea16026db428f4d82eef7eedb3c Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期一, 27 五月 2024 17:37:50 +0800 Subject: [PATCH] 合并 --- src/books/English/view/components/chapter001.vue | 566 ++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 384 insertions(+), 182 deletions(-) diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue index 326ee76..3061298 100644 --- a/src/books/English/view/components/chapter001.vue +++ b/src/books/English/view/components/chapter001.vue @@ -46,7 +46,27 @@ >鈪�.Write down the English words for the Chinese cultural symbols in the following pictures.</b > - <button @click="showAnswerTwo = !showAnswerTwo">鏄剧ず绛旀</button> + <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%"> @@ -262,12 +282,27 @@ </div> <p class="t0"> <b>鈪�.What other symbols can you think of?</b> - <button + <!-- <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 @@ -326,12 +361,27 @@ </h3> <p> 1.How was Chinese culture introduced to the world in ancient times? - <button + <!-- <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" @@ -351,12 +401,27 @@ <p> 2.China offers so much to see and explore.What took you by surprise about China? - <button + <!-- <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" @@ -1096,10 +1161,13 @@ 5.if </p> <ul class="fl ju-ev" style="width: 50%"> - <li><button>鎻愪氦</button></li> - <li><button @click="setTestData">淇濆瓨</button></li> + <li><button class="btn-border btn-w">鎻愪氦</button></li> + <li><button @click="setTestData" class="btn-border btn-w">淇濆瓨</button></li> <li> - <button @click="showQuestionAnswer = !showQuestionAnswer"> + <button + @click="showQuestionAnswer = !showQuestionAnswer" + class="parimary-btn" + > 鏌ョ湅绛旀 </button> </li> @@ -1254,28 +1322,64 @@ > <span class="word-bc mr-20 dl-span" @click="saveWord('ancient')" >ancient</span - ><span class="word-bc mr-20 dl-span" @click="saveWord('incredible')" + ><span + class="word-bc mr-20 dl-span" + @click="saveWord('incredible')" >incredible</span ><span class="word-bc mr-20 dl-span" @click="saveWord('unique')" >unique</span - ><span class="word-bc mr-20 dl-span" @click="saveWord('traditional')" + ><span + class="word-bc mr-20 dl-span" + @click="saveWord('traditional')" >traditional</span - ><span class="word-bc mr-20 dl-span" @click="saveWord('outstanding')" + ><span + class="word-bc mr-20 dl-span" + @click="saveWord('outstanding')" >outstanding</span - ><span class="word-bc mr-20 dl-span" @click="saveWord('mouth-watering')" + ><span + class="word-bc mr-20 dl-span" + @click="saveWord('mouth-watering')" >mouth-watering</span ><span class="word-bc mr-20 dl-span" @click="saveWord('diverse')" >diverse</span - ><span class="word-bc mr-20 dl-span" @click="saveWord('hospitable')" + ><span + class="word-bc mr-20 dl-span" + @click="saveWord('hospitable')" >hospitable</span - ><span class="word-bc mr-20 dl-span" @click="saveWord('enjoyable')" + ><span + class="word-bc mr-20 dl-span" + @click="saveWord('enjoyable')" >enjoyable</span - ><span class="word-bc mr-20 dl-span" @click="saveWord('memorable')" + ><span + class="word-bc mr-20 dl-span" + @click="saveWord('memorable')" >memorable</span ><span class="word-bc mr-20 dl-span" @click="saveWord('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> @@ -1314,191 +1418,252 @@ </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"> + <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> + </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"> + <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> + </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"> + <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> + </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"> + <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> + </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"> + <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> + </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"> + <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> + </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="fl ju-ev" style="width: 70%"> + <button @click="setDropdownData" class="btn-border btn-w"> + 淇濆瓨 + </button> + <button class="btn-border btn-w">鎻愪氦</button> + <button @click="handleDropdown('judge')" class="btn-border btn-w">鍒ゆ柇姝g‘</button> + <button + @click="showAnswerFive = !showAnswerFive" + class="parimary-btn" + > + 鏌ョ湅绛旀 + </button> </div> </div> </div> @@ -1511,6 +1676,7 @@ <script> import getResourcePath from "@/assets/methods/resources"; + export default { name: "chapter-one", data() { @@ -1532,6 +1698,7 @@ showAnswerTwo: false, showAnswerThree: false, showAnswerFour: false, + showAnswerFive: false, showImg: false, showQuestionAnswer: false, questionData: { @@ -1672,8 +1839,35 @@ answer: "facial recognition", }, }, - pptList:[ - ] + 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() { @@ -1761,8 +1955,6 @@ item.value == item.answer ? (item.isRight = true) : (item.isRight = false); - } else if (type == "answer") { - item.value = item.answer; } } this.dropdownData = dropdownDatas; @@ -1805,4 +1997,14 @@ line-height: 20px; } } +.btn-w { + font-size: 14px; + border-width:1px; + min-width: 80px; + background-color:#fff; + &:hover { + background-color:#0bab87 ; + color: #fff; + } +} </style> -- Gitblit v1.9.1