英语分页

闫增涛

2024-05-24 2d685f5d2ad5bf41833b3545fefe04ab17b6f96f

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

@@ -1,15 +1,1512 @@
<template>
  <div>
    第一章
  <div class="chapter" num="0">
    <!-- 1 -->
    <div class="page-box" page="6">
      <div class="bodystyle">
        <h1 id="a005">
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
        </h1>
        <p class="img"></p>
        <p><b>This unit will help you to:</b></p>
        <p>➢ Learn words and expressions related to history and culture</p>
        <p>
          ➢ Review the structure of the conditional sentence (if-clause) and the
          simple sentence
        </p>
        <p>➢ Make polite or indirect recommendation</p>
        <p>➢ Be able to compose an event poster</p>
        <p>➢ Appreciate diversified Chinese culture</p>
        <p class="center">
          <img class="img-b" alt="" src="../../assets/images/0011-2.jpg" />
        </p>
        <p class="img"></p>
      </div>
    </div>
    <!-- 2 -->
    <div class="page-box" page="7">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
          style="height: 100px; padding-left: 40px"
        >
          <div class="preface-header-box event-header-text-bc">
            <span class="l-text">新标准通用职场英语</span>
            <span class="g-text event-text-color">基础模块一</span>
          </div>
        </div>
      </div>
      <div class="padding-93">
        <div class="bodystyle">
          <h2 id="b001">
            <img class="img-0" alt="" src="../../assets/images/dy1-le1.jpg" />
          </h2>
          <h3 id="c001"><span class="bjh3">Warm-up</span></h3>
          <p>
            <b
              >Ⅰ.Write down the English words for the Chinese cultural symbols
              in the following pictures.</b
            >
          </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>
              </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>
              </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>
              </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>
              </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>
              </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>
              </p>
            </div>
          </div>
          <p class="t0">
            <b>Ⅱ.What other symbols can you think of?</b>
            <button class="parimary-btn" @click="showAnswer('wp-seven')">
              显示答案
            </button>
          </p>
          <p class="t0">
            <input
              v-model="questionData.warnUp.seven"
              class="input-bottom-border w100 fz-18"
            />
          </p>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">2</span>
      </div>
    </div>
    <!-- 3 -->
    <div class="page-box" page="8">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
          <span class="chapter-left-bc">MODULE 1</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl"
            >CHINA,A WONDERLAND</span
          >
        </li>
      </ul>
      <div class="padding-102">
        <div class="bodystyle">
          <h3 id="c002" class="fl al-cn">
            <span class="bjh3">Listening</span>
            <audio :src="resource.listenOne" controls></audio>
          </h3>
          <p>
            <b
              >Four foreigners are talking about their impressions on Chinese
              culture.Listen to the recording and match the items with the
              corresponding descriptions.</b
            >
          </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>
          <h3 id="c003" class="fl al-cn">
            <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>
          </p>
          <textarea
            v-model="questionData.reading.one"
            placeholder="请输入内容"
            rows="6"
            style="margin-left: 40px; width: 92%"
            class="fz-16 fm-son"
            @change="setBookQuestion"
          ></textarea>
          <p>
            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>
          </p>
          <textarea
            v-model="questionData.reading.two"
            placeholder="请输入内容"
            rows="6"
            style="margin-left: 40px; width: 92%"
            class="fz-16 fm-son"
            @change="setBookQuestion"
          ></textarea>
          <p class="center"><b>My Experience in Wonderland</b></p>
          <p class="block">
            “So how was your journey to China?” asks Alexandra.“Highly
            enjoyable,” responds Alice.“You should visit it sometime.”
          </p>
          <p class="right">
            —<i>Alice in Wonderland </i>(“Through the Looking Glass”)
          </p>
          <p>
            My
            <span class="word-bc" @click="saveWord('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>
            and of course the huge variety of
            <span class="word-bc" @click="saveWord('landscapes')"
              >landscapes</span
            >.
          </p>
          <p>
            I found many great people and made several Chinese friends along the
            way.These friends made me see China through the eyes of the locals.I
            always found Chinese people very friendly and
            <span class="word-bc" @click="saveWord('hospitable')"
              >hospitable</span
            >
            towards foreigners.These Chinese friends made my understanding of
            Chinese culture and
            <span class="word-bc" @click="saveWord('civilization')"
              >civilization</span
            >
            much easier,enjoyable and memorable.I consider China my second home
            and love it like my own country!
          </p>
          <p>
            You cannot
            <span class="word-bc" @click="saveWord('explore')">explore</span>
            China properly if you do not try its delicious variety of food.If
            you ate
          </p>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">3</span>
      </div>
    </div>
    <!-- 4 -->
    <div class="page-box">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
          style="height: 100px; padding-left: 40px"
        >
          <div class="preface-header-box event-header-text-bc">
            <span class="l-text">新标准通用职场英语</span>
            <span class="g-text event-text-color">基础模块一</span>
          </div>
        </div>
      </div>
      <div class="padding-93">
        <div class="bodystyle">
          <p class="t0">
            a new kind of food every day for one whole year,the list of Chinese
            food would still never end! Though I love to eat almost all kinds of
            Chinese cuisine,I found Sichuan and Hunan cuisine quite
            <span class="word-bc" @click="saveWord('mouth-watering')"
              >mouth-watering</span
            >
            and
            <span class="word-bc" @click="saveWord('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.
          </p>
          <p>
            Like I said earlier,China is a huge wonderland.It has thousands of
            years of rich and beautiful culture.Every city you visit tells you
            its own story and history.From the big and advanced cities like
            Shanghai or Guangzhou to the ancient cities like Xi’an and
            Hangzhou,each city has its
            <span class="word-bc" @click="saveWord('unique')">unique</span>
            <span
              class="word-bc"
              style="margin-left: 5px"
              @click="saveWord('atmosphere')"
              >atmosphere</span
            >
            that attracts you.I visited more than a dozen cities and came across
            their charming features and unique landscapes such as Huangshan,the
            Great Wall,Canton Tower.
          </p>
          <p>
            There is so much to explore and I am looking forward to it during my
            stay.This is a whole new exciting experience for me,and it will
            always be remembered.
          </p>
          <!-- <p class="center">
            <img class="img-g" alt="" src="../../assets/images/0014-1.jpg" />
          </p> -->
          <p class="fl al-cn">
            <span class="zt-cs">Words &amp; Expressions</span>
            <span class="line-border-box"></span>
          </p>
          <audio
            :src="resource.readingTwo"
            controls
            style="margin-left: 10px"
          ></audio>
          <p>wonderland /ˈwʌndəlænd/ <i>n.</i> 有许多奇妙事物的地方</p>
          <div class="bkbj">
            <p><i>land or place full of marvels or wonderful things</i></p>
          </div>
          <p>incredible /ɪnˈkredəbl/ <i>adj.</i> 难以置信的</p>
          <div class="bkbj">
            <p><i>impossible or very difficult to believe</i></p>
          </div>
          <p>
            cuisine /kwɪˈziːn/ <i>n.</i> （通常指昂贵的餐馆中的） 饭菜，菜肴
          </p>
          <div class="bkbj">
            <p>
              <i>the food served in a restaurant (usually an expensive one)</i>
            </p>
          </div>
          <p>landscape /ˈlændskeɪp/ <i>n.</i> （陆上） 风景，景色</p>
          <div class="bkbj">
            <p><i>scenery of an area of land</i></p>
          </div>
          <p>hospitable /hɒˈspɪtəbl/ <i>adj.</i> 好客的</p>
          <div class="bkbj">
            <p><i>pleased to welcome and entertain guests</i></p>
          </div>
          <p>
            civilization /ˌsɪvəlaɪˈzeɪʃn/ <i>n.</i> （特定时期或地区的）
            社会文明
          </p>
          <div class="bkbj">
            <p>
              <i
                >a society,its culture and its way of life (during a particular
                period of time or in a particular part of the world)</i
              >
            </p>
          </div>
          <p>explore /ɪkˈsplɔː(r)/ <i>v.</i> 探索；考察</p>
          <div class="bkbj">
            <p>
              <i
                >to travel into or around an area or a country in order to learn
                about it</i
              >
            </p>
          </div>
          <p>mouth-watering <i>adj.</i> 令人垂涎的；美味的</p>
          <div class="bkbj">
            <p><i>that makes one want to eat; extremely delicious</i></p>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">4</span>
      </div>
    </div>
    <!-- 5 -->
    <div class="page-box">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
          <span class="chapter-left-bc">MODULE 1</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl"
            >CHINA,A WONDERLAND</span
          >
        </li>
      </ul>
      <div class="padding-93">
        <div class="bodystyle">
          <p>stimulating /ˈstɪmjuleɪtɪŋ/ <i>adj.</i> 增加活力的；增进健康的</p>
          <div class="bkbj">
            <p>
              <i>making you feel more active and healthy</i> foodie /ˈfuːdi/
              <i>n.</i> 吃货；美食家
            </p>
          </div>
          <p>
            <i
              >a person who is very interested in cooking and eating different
              kinds of food</i
            >
            unique /ju<i>ˈ</i>niːk/ <i>adj.</i> 唯一的；独一无二的
          </p>
          <div class="bkbj">
            <p><i>being the only one of its type</i></p>
          </div>
          <p>atmosphere /ˈætməsfɪə(r)/ <i>n.</i> 气氛；氛围</p>
          <div class="bkbj">
            <p>
              <i
                >the feeling or mood that you have in a particular place or
                situation</i
              >
            </p>
          </div>
          <p>get selected as ...被选为……</p>
          <p>(a) variety of ...各种各样的……</p>
          <p>come across 偶遇；碰到</p>
          <p>be curious about ...对……感到好奇</p>
          <p>along the way 沿途</p>
          <div class="bj-note">
            <p><b>Notes:</b></p>
            <p>
              <i>Alice in Wonderland</i> （<i
                >Alice's Adventures in Wonderland</i
              >的简写，中文译为《爱丽丝梦游仙境》），是19世纪英国作家刘易斯·卡罗尔创作的著名儿童文学作品，讲述了一个名叫爱丽丝的英国小女孩为了追逐一只揣着怀表、会说话的兔子而不慎掉入了兔子洞，从而进入了一个神奇的国度并经历了一系列奇幻冒险的故事。
            </p>
          </div>
          <p><b>Ⅰ.Reading comprehension.</b></p>
          <p>
            A.Mark the items that made the author curious when she arrived in
            China.
          </p>
          <p>□ Language</p>
          <p>□ People</p>
          <p>□ Culture</p>
          <p>□ Cuisine</p>
          <p>□ Folk art</p>
          <p>□ Landscapes</p>
          <p>□ Transportation</p>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">5</span>
      </div>
    </div>
    <!-- 6 -->
    <div class="page-box">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
          style="height: 100px; padding-left: 40px"
        >
          <div class="preface-header-box event-header-text-bc">
            <span class="l-text">新标准通用职场英语</span>
            <span class="g-text event-text-color">基础模块一</span>
          </div>
        </div>
      </div>
      <div class="padding-93">
        <div class="bodystyle">
          <p>
            B.Write down the answer to each question according to the passage.
          </p>
          <p>1.What’re the author’s comments about Chinese food?</p>
          <textarea
            v-model="testData.tx.one"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p>2.When and why did the author start her journey to China?</p>
          <textarea
            v-model="testData.tx.two"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p>3.What are the author’s expectations of her stay in China?</p>
          <textarea
            v-model="testData.tx.three"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p>4.What did the author think of Chinese people?</p>
          <textarea
            v-model="testData.tx.four"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p>5.What’s the author’s impression of the cities in China?</p>
          <textarea
            v-model="testData.tx.five"
            placeholder="请输入内容"
            rows="4"
            style="margin-left: 40px; width: 92%"
            class="fz-16 textarea-text"
          ></textarea>
          <p><b>Ⅱ.Language focus.</b></p>
          <p>
            A.Fill in the blanks with the proper words in the passage.The
            initial letters of the words have been given.
          </p>
          <p>
            In 2017,the author arrived in China.When she arrived,she was like
            Alice in <i>Alice in Wonderland</i>.She was curious about the
            people,the culture,the c<input
              type="text"
              class="input-bottom-border"
              style="width: 60px"
              v-model="testData.in.one"
            />
            ,and of course the huge variety of l<input
              v-model="testData.in.two"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />.Chinese friends helped her a lot in understanding Chinese culture
            and c<input
              v-model="testData.in.three"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />.The author believes that one cannot e<input
              type="text"
              v-model="testData.in.four"
              class="input-bottom-border"
              style="width: 60px"
            />China properly if he/she does not try its delicious variety of
            food.China has thousands of years of rich and beautiful culture.Each
            city has its u<input
              v-model="testData.in.five"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />atmosphere that attracts people.
          </p>
          <p>
            B.Underline the following expressions in the passage and make
            sentences with them.
          </p>
          <p>
            1.get selected as<input
              v-model="testData.line.one"
              type="text"
              class="input-bottom-border"
              style="width: 77%"
            />
          </p>
          <p>
            2.be curious about<input
              v-model="testData.line.two"
              type="text"
              class="input-bottom-border"
              style="width: 75%"
            />
          </p>
          <p>
            3.along the way<input
              v-model="testData.line.three"
              type="text"
              class="input-bottom-border"
              style="width: 77%"
            />
          </p>
          <p>
            4.come across<input
              v-model="testData.line.four"
              type="text"
              class="input-bottom-border"
              style="width: 79%"
            />
          </p>
          <p>
            5.look forward to<input
              v-model="testData.line.five"
              type="text"
              class="input-bottom-border"
              style="width: 76%"
            />
          </p>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">6</span>
      </div>
    </div>
    <!-- 7 -->
    <div class="page-box">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
          <span class="chapter-left-bc">MODULE 1</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl"
            >CHINA,A WONDERLAND</span
          >
        </li>
      </ul>
      <div class="padding-93">
        <div class="bodystyle">
          <p>C.Translate the following sentences into Chinese.</p>
          <p>
            1.Confucius created an atmosphere of education for the ordinary
            people.
          </p>
          <p>
            <input
              v-model="testData.ts.one"
              type="text"
              class="input-bottom-border"
            />
          </p>
          <p>
            2.Lei Zu invented the technology of reeling silk（缫丝术）and
            greatly promoted the development of ancient Chinese civilization.
          </p>
          <p>
            <input
              v-model="testData.ts.two"
              type="text"
              class="input-bottom-border"
            />
          </p>
          <p>
            3.Lu Yu,the author of <i>The Classic of Tea</i>,explored Chinese tea
            culture in depth.
          </p>
          <p>
            <input
              v-model="testData.ts.three"
              type="text"
              class="input-bottom-border"
            />
          </p>
          <p>
            4.Zhang Zhongjing was a doctor who had an incredible influence on
            Chinese medical science.
          </p>
          <p>
            <input
              v-model="testData.ts.four"
              type="text"
              class="input-bottom-border"
            />
          </p>
          <p>
            <b>Ⅲ.Grammar focus:The conditional sentence—if-clause.</b>
            <button class="parimary-btn" @click="showAnswer('showImg')">
              图片
            </button>
          </p>
          <el-image
            v-if="showImg"
            :src="imgThirteen"
            :preview-src-list="[imgThirteen]"
          />
          <p>A.Combine the following sentences into if-clauses.</p>
          <p>
            1.Try using sticks.You can enjoy the fun of having a real Chinese
            meal.
          </p>
          <p>
            <b>If</b
            ><input
              v-model="testData.gr.one"
              type="text"
              class="input-bottom-border"
            />.
          </p>
          <p>
            2.Go to my Chinese New Year party.You will meet my Chinese friends
            there.
          </p>
          <p>
            <b>If</b
            ><input
              v-model="testData.gr.two"
              type="text"
              class="input-bottom-border"
            />.
          </p>
          <p>3.Drink some Longjing tea,and you will love it.</p>
          <p>
            <b>If</b
            ><input
              type="text"
              v-model="testData.gr.three"
              class="input-bottom-border"
            />.
          </p>
          <p>
            4.One day I will go to Xi’an,and I will visit the terracotta
            warriors.
          </p>
          <p>
            <b>If</b
            ><input
              v-model="testData.gr.four"
              type="text"
              class="input-bottom-border"
            />.
          </p>
          <p>
            5.Ask foreigners about their favorite Chinese food.Kung Pao Chicken
            would possibly be in top three.
          </p>
          <p>
            <b>If</b
            ><input
              v-model="testData.gr.five"
              type="text"
              class="input-bottom-border"
            />.
          </p>
          <p>
            B.Complete the following sentences using <i>if</i> or
            <i>whether</i>.
          </p>
          <p>
            1.I was wondering<input
              v-model="testData.cm.one"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />to go for a walk in the Summer Palace.
          </p>
          <p>
            2.We can spend the afternoon on the beach<input
              v-model="testData.cm.two"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />the weather is fine.
          </p>
          <p>
            3.I called Wang to find out<input
              v-model="testData.cm.three"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />or not he really went to see the Peking opera show.
          </p>
          <p>
            4.We’re not interested in<input
              v-model="testData.cm.four"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />we get great jobs and that kind of thing.
          </p>
          <p>
            5.<input
              v-model="testData.cm.five"
              type="text"
              class="input-bottom-border"
              style="width: 60px"
            />I go to Sichuan,I will visit Chengdu Research Base of Giant Panda
            Breeding.
          </p>
          <ul class="fl ju-ev" style="width: 50%">
            <li><button>提交</button></li>
            <li><button @click="setTestData">保存</button></li>
            <li><button>查看答案</button></li>
          </ul>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">7</span>
      </div>
    </div>
    <!-- 8 -->
    <div class="page-box">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
          style="height: 100px; padding-left: 40px"
        >
          <div class="preface-header-box event-header-text-bc">
            <span class="l-text">新标准通用职场英语</span>
            <span class="g-text event-text-color">基础模块一</span>
          </div>
        </div>
      </div>
      <div class="padding-93">
        <div class="bodystyle">
          <h3 id="c004"><span class="bjh3">Mini-project</span></h3>
          <p>
            China is a great country with a fascinating culture.Its ancient
            civilization,rich history,and unique customs make it one of the most
            interesting countries in the world.There are so many interesting
            facts about Chinese culture.Work in groups and interview your group
            members about their knowledge of Chinese culture,and then:
          </p>
          <p>1.Find out interesting facts they know about Chinese culture;</p>
          <p>2.Finish the worksheet and report to the class.</p>
          <div class="fieldset">
            <p>Questions:1.Who are you going to interview?</p>
            <p>　　　　2.What is he/she interested in about Chinese culture?</p>
            <p>　　　　3.What does he/she know about it?</p>
          </div>
          <p class="left">
            <img
              class="img-gn"
              alt=""
              src="../../assets/images/dy1-worksheet.jpg"
            />
          </p>
          <table
            border="1"
            cellpadding="4"
            cellspacing="0"
            style="border-color: #fff"
            class="fz-14"
          >
            <tr class="table-th-bc">
              <td class="tl-cn">Interviewees</td>
              <td class="wh-no tl-cn">Chinese Culture</td>
              <td class="tl-cn">Interesting Facts He/She Knows About lt</td>
            </tr>
            <tr class="table-tr-bc">
              <td class="tl-cn">Wang Ning</td>
              <td class="wh-no tl-cn">Chinese Tea</td>
              <td>
                China, known as the hometown of tea, is the world's
                earliestcountry to plant tea, make tea, and drink tea. Chinese
                peoplehave developed different varieties of tea with unique
                flavors,such as green tea, black tea, white tea, and dark tea.
                Drinkingtea is benefcial to our health.
              </td>
            </tr>
            <tr class="table-tr-bc">
              <td>
                <textarea
                  v-model="questionData.table.one"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.two"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.three"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
            </tr>
            <tr class="table-tr-bc">
              <td>
                <textarea
                  v-model="questionData.table.four"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.five"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.six"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
            </tr>
            <tr class="table-tr-bc">
              <td>
                <textarea
                  v-model="questionData.table.seven"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.enight"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.nine"
                  class="w100 table-tr-bc b0 table-textarea"
                  @change="setBookQuestion"
                ></textarea>
              </td>
            </tr>
          </table>
          <p class="left">
            <img
              class="img-gn"
              alt=""
              src="../../assets/images/dy1-wordbank.jpg"
            />
          </p>
          <div class="bk-wh">
            <p>
              exquisite　ancient　incredible　unique　traditional　outstanding　mouth-watering　diverse　hospitable　enjoyable　memorable　charming
            </p>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">8</span>
      </div>
    </div>
    <!-- 9 -->
    <div class="page-box">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
          <span class="chapter-left-bc">MODULE 1</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl"
            >CHINA,A WONDERLAND</span
          >
        </li>
      </ul>
      <div class="padding-93">
        <div class="bodystyle">
          <h2 id="b002">
            <img class="img-0" alt="" src="image/dy1-le2.jpg" />
          </h2>
          <h3 id="c005"><span class="bjh3">Warm-up</span></h3>
          <p>
            <b
              >Put the expressions in the box below on the corresponding answer
              line under each picture.</b
            >
          </p>
          <div class="bk-wh">
            <p>
              online shopping　facial recognition　electronic payment　intercity
              train　shared bike　take-away service
            </p>
          </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>
              </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>
              </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>
              </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>
              </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>
              </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>
              </p>
            </div>
          </div>
          <div class="fl ju-ev" style="width: 50%">
            <button @click="setDropdownData">保存</button>
            <button>提交</button>
            <button @click="handleDropdown('judge')">判断正确</button>
            <button @click="handleDropdown('answer')">查看答案</button>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">9</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'chapter-one'
  }
import getResourcePath from "@/assets/methods/resources";
export default {
  name: "chapter-one",
  data() {
    return {
      imgOne: require("../../assets/images/0012-1.jpg"),
      imgTwo: require("../../assets/images/0012-2.jpg"),
      imgThree: require("../../assets/images/0012-3.jpg"),
      imgFour: require("../../assets/images/0012-4.jpg"),
      imgFive: require("../../assets/images/0012-5.jpg"),
      imgSix: require("../../assets/images/0012-6.jpg"),
      imgSeven: require("../../assets/images/0019-1.jpg"),
      imgEnight: require("../../assets/images/0019-2.jpg"),
      imgNine: require("../../assets/images/0019-3.jpg"),
      imgTen: require("../../assets/images/0019-4.jpg"),
      imgEleven: require("../../assets/images/0019-5.jpg"),
      imgTwelve: require("../../assets/images/0019-6.jpg"),
      imgThirteen: require("../../assets/images/grammar.jpg"),
      showImg: false,
      questionData: {
        warnUp: {
          one: {
            value: "",
            isRight: null,
          },
          two: {
            value: "",
            isRight: null,
          },
          three: {
            value: "",
            isRight: null,
          },
          four: {
            value: "",
            isRight: null,
          },
          five: {
            value: "",
            isRight: null,
          },
          six: {
            value: "",
            isRight: null,
          },
          seven: "",
        },
        reading: {
          one: "",
          two: "",
        },
        table: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven: "",
          enight: "",
          nine: "",
        },
      },
      testData: {
        tx: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
        },
        in: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
        },
        line: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
        },
        ts: {
          one: "",
          two: "",
          three: "",
          four: "",
        },
        gr: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
        },
        cm: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
        },
      },
      resource: {
        listenOne: "",
        readingOne: "",
        readingTwo: "",
      },
      dropDownList: [
        "online shopping",
        "facial recognition",
        "electronic payment",
        "intercity  train",
        "shared bike",
        "take-away service",
      ],
      dropdownData: {
        one: {
          value: "",
          isRight: null,
          answer: "intercity train",
        },
        two: {
          value: "",
          isRight: null,
          answer: "online shopping",
        },
        three: {
          value: "",
          isRight: null,
          answer: "electronic payment",
        },
        four: {
          value: "",
          isRight: null,
          answer: "shared bike",
        },
        five: {
          value: "",
          isRight: null,
          answer: "take-away service",
        },
        six: {
          value: "",
          isRight: null,
          answer: "facial recognition",
        },
      },
    };
  },
  mounted() {
    const testData = localStorage.getItem("english-testOne");
    if (testData) {
      this.testData = JSON.parse(testData);
    }
    const bookQuestion = localStorage.getItem("english-book-question-one");
    if (bookQuestion) {
      this.questionData = JSON.parse(bookQuestion);
    }
    const dropdownData = localStorage.getItem("english-dropdown-one");
    if (dropdownData) {
      this.dropdownData = JSON.parse(dropdownData);
    }
    this.getPath();
  },
  methods: {
    saveWord(word) {
      this.$emit("saveCharacters", word);
    },
    setTestData() {
      localStorage.setItem("english-testOne", JSON.stringify(this.testData));
    },
    setBookQuestion() {
      localStorage.setItem(
        "english-book-question-one",
        JSON.stringify(this.questionData)
      );
    },
    getPath() {
      this.resource.listenOne = getResourcePath(
        "422139A2EF66EA888C5ED1D550AE23E0"
      );
      this.resource.readingOne = getResourcePath(
        "3F442B682D84C8AB06C800B29D734920"
      );
      this.resource.readingTwo = getResourcePath(
        "E8719EC88026BCFB11D292AA999F6D3D"
      );
    },
    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") {
        this.showImg = !this.showImg;
      }
    },
    handleQuestion(type) {
      if (type == "one") {
        this.questionData.warnUp.one.value
          ? (this.questionData.warnUp.one.isRight =
              this.questionData.warnUp.one.value == "Chinese knot")
          : (this.questionData.warnUp.one.isRight = null);
      } else if (type == "two") {
        this.questionData.warnUp.two.value
          ? (this.questionData.warnUp.two.isRight =
              this.questionData.warnUp.two.value == "Chinese medicine")
          : (this.questionData.warnUp.two.isRight = null);
      } else if (type == "three") {
        this.questionData.warnUp.three.value
          ? (this.questionData.warnUp.three.isRight =
              this.questionData.warnUp.three.value == "Chinese calligraphy")
          : (this.questionData.warnUp.three.isRight = null);
      } else if (type == "four") {
        this.questionData.warnUp.four.value
          ? (this.questionData.warnUp.four.isRight =
              this.questionData.warnUp.four.value == "Taichi")
          : (this.questionData.warnUp.four.isRight = null);
      } else if (type == "five") {
        this.questionData.warnUp.five.value
          ? (this.questionData.warnUp.five.isRight =
              this.questionData.warnUp.five.value == "sweet dumpling")
          : (this.questionData.warnUp.five.isRight = null);
      } else if (type == "six") {
        this.questionData.warnUp.six.value
          ? (this.questionData.warnUp.six.isRight =
              this.questionData.warnUp.six.value == "Chinese chess")
          : (this.questionData.warnUp.six.isRight = null);
      }
    },
    handleDropdown(type) {
      const dropdownDatas = this.dropdownData;
      for (let key in dropdownDatas) {
        const item = dropdownDatas[key];
        if (type == "judge") {
          item.value == item.answer
            ? (item.isRight = true)
            : (item.isRight = false);
        } else if (type == "answer") {
          item.value = item.answer;
        }
      }
      this.dropdownData = dropdownDatas;
    },
    setDropdownData() {
      localStorage.setItem(
        "english-dropdown-one",
        JSON.stringify(this.dropdownData)
      );
    },
  },
};
</script>

<style lang="less" scoped>

</style>
p {
  font-size: 16px !important;
}
.bodystyle {
  margin: 0 !important;
}
.line-border-box {
  margin-left: 10px;
  display: inline-block;
  width: 50%;
  height: 3px;
  background-color: #f9a71b;
}
</style>