From 26952b2ec91133aadb3abc3cf66242650e1348c7 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期一, 27 五月 2024 10:08:00 +0800 Subject: [PATCH] 学前儿童 题目请求调整 --- src/books/English/view/components/chapter001.vue | 1144 +++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 821 insertions(+), 323 deletions(-) diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue index 5c01f67..3061298 100644 --- a/src/books/English/view/components/chapter001.vue +++ b/src/books/English/view/components/chapter001.vue @@ -46,176 +46,281 @@ >鈪�.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"> + <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> + </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"> + <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> + </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"> + <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> + </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"> + <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> + </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"> + <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> + </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"> + <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> + </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> @@ -247,9 +352,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 +359,29 @@ <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 +391,37 @@ 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 +431,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 @@ -553,6 +704,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 +720,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 +736,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 +751,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 +767,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 +816,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 +835,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 +850,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 +867,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" @@ -660,6 +883,14 @@ 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 v-model="testData.line.five" @@ -667,6 +898,14 @@ class="input-bottom-border" style="width: 76%" /> + </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛歋he is looking forward to visiting the incredible cities in + China. </p> </div> </div> @@ -699,6 +938,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 +955,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 +974,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 +991,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 +1023,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 +1043,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 +1059,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 +1079,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 +1098,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,10 +1152,25 @@ />I go to Sichuan,I will visit Chengdu Research Base of Giant Panda Breeding. </p> + <p + class="event-header-text-bc pd-5" + style="margin-left: 40px; width: 93%" + v-if="showQuestionAnswer" + > + 绛旀锛� 1.whether 2.if 3.whether 4.whether + 5.if + </p> <ul class="fl ju-ev" style="width: 50%"> - <li><button>鎻愪氦</button></li> - <li><button @click="setTestData">淇濆瓨</button></li> - <li><button>鏌ョ湅绛旀</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" + class="parimary-btn" + > + 鏌ョ湅绛旀 + </button> + </li> </ul> </div> </div> @@ -995,9 +1316,70 @@ /> </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('exquisite')" + >exquisite</span + > + <span class="word-bc mr-20 dl-span" @click="saveWord('ancient')" + >ancient</span + ><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')" + >traditional</span + ><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')" + >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')" + >hospitable</span + ><span + class="word-bc mr-20 dl-span" + @click="saveWord('enjoyable')" + >enjoyable</span + ><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> @@ -1036,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> @@ -1233,6 +1676,7 @@ <script> import getResourcePath from "@/assets/methods/resources"; + export default { name: "chapter-one", data() { @@ -1250,32 +1694,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 +1839,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() { @@ -1425,16 +1910,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 +1955,6 @@ item.value == item.answer ? (item.isRight = true) : (item.isRight = false); - } else if (type == "answer") { - item.value = item.answer; } } this.dropdownData = dropdownDatas; @@ -1509,4 +1983,28 @@ 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; + background-color:#fff; + &:hover { + background-color:#0bab87 ; + color: #fff; + } +} </style> -- Gitblit v1.9.1