英语分页

闫增涛

2024-05-24 2d685f5d2ad5bf41833b3545fefe04ab17b6f96f

英语分页

 src/App.vue

@@ -47,7 +47,7 @@
    } else {
      this.activeBook = await this.config.getBookConfig(
        // childHealth
        this.config.resourceCtx + "lifeCare"
        this.config.resourceCtx + "english"
      );
      console.log('ac',this.activeBook);
      this.config.activeBook = this.activeBook;

 src/books/English/assets/images/0019-1.jpg

 src/books/English/assets/images/0019-2.jpg

 src/books/English/assets/images/0019-3.jpg

 src/books/English/assets/images/0019-4.jpg

 src/books/English/assets/images/0019-5.jpg

 src/books/English/assets/images/0019-6.jpg

 src/books/English/assets/images/grammar.jpg

 src/books/English/assets/main.less

@@ -667,6 +667,9 @@
    padding: 0;
    list-style: none;
  }
  .fm-son {
    font-family: "宋体", SimSun, sans-serif;
  }
  .tl {
    text-align: left !important;
  }
@@ -679,11 +682,20 @@
  .ju-cn {
    justify-content: center;
  }
  .ju-ev {
    justify-content: space-evenly;
  }
  .al-cn {
    align-items: center;
  }
  .al-end {
    align-items: flex-end;
  }
  .fz-14 {
    font-size: 14px;
  }
  .fz-16 {
    font-size: 16px;
  }
  .fz-18 {
    font-size: 18px;
@@ -703,12 +715,7 @@
  .wh-nr {
    white-space: nowrap;
  }
  .padding-93 {
    padding: 0 93px 0px 93px;
  }
  .padding-102 {
    padding: 0 102px 0 102px;
  }

  .pb-104 {
    padding-bottom: 104px;
  }
@@ -830,7 +837,6 @@
    }
  }
  .parimary-btn {
    cursor: pointer;
    margin-left: 5px;
    background-color: #0bab87;
    border-color: #0bab87;
@@ -853,4 +859,63 @@
    width: 18px;
    height: 18px;
  }
  .word-bc {
    // background-color: #a1afc8;
    background-color: #e1ebf6;
    cursor: pointer;
  }
  .textarea-text {
    &:focus {
      border-color: #659ac6;
      outline: none;
    }
  }
  .table-th-bc {
    background-color: #f7ab57;
  }
  .table-tr-bc {
    background-color: #f2e2be;
  }
  .table-textarea {
    font-size: 14px;
    font-family: "Times New Roman", "宋体";
    resize: none;
    &:focus {
      outline: none;
    }
  }
  .wh-no {
    white-space: nowrap;
  }
  .tl-cn {
    text-align: center;
  }
  .b0 {
    border: 0;
  }
  button {
    cursor: pointer;
  }
}
/* 媒体查询做基础响应式布局 */
@media (max-width: 660px) {
  .english-book {
    /* 分页padding */
    .padding-93 {
      padding: 0 20px;
    }
    .padding-102 {
      padding: 0 20px;
    }
  }
}
@media (min-width: 660px) {
  .english-book {
    .padding-93 {
      padding: 0 93px 0px 93px;
    }
    .padding-102 {
      padding: 0 102px 0 102px;
    }
  }
}

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

@@ -1,5 +1,6 @@
<template>
  <div class="chapter" num="0">
    <!-- 1 -->
    <div class="page-box" page="6">
      <div class="bodystyle">
        <h1 id="a005">
@@ -21,6 +22,7 @@
        <p class="img"></p>
      </div>
    </div>
    <!-- 2 -->
    <div class="page-box" page="7">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
@@ -55,6 +57,7 @@
                  v-model="questionData.warnUp.one.value"
                  class="input-bottom-border fz-18"
                  @blur="handleQuestion('one')"
                  @change="setBookQuestion"
                />
                <span class="icon-box">
                  <i
@@ -81,6 +84,7 @@
                  class="input-bottom-border fz-18"
                  v-model="questionData.warnUp.two.value"
                  @blur="handleQuestion('two')"
                  @change="setBookQuestion"
                />
                <span class="icon-box">
                  <i
@@ -106,6 +110,7 @@
                  class="input-bottom-border fz-18"
                  v-model="questionData.warnUp.three.value"
                  @blur="handleQuestion('three')"
                  @change="setBookQuestion"
                />
                <span class="icon-box">
                  <i
@@ -132,6 +137,7 @@
                  class="input-bottom-border fz-18"
                  v-model="questionData.warnUp.four.value"
                  @blur="handleQuestion('four')"
                  @change="setBookQuestion"
                />
                <span class="icon-box">
                  <i
@@ -157,6 +163,7 @@
                  class="input-bottom-border fz-18"
                  v-model="questionData.warnUp.five.value"
                  @blur="handleQuestion('five')"
                  @change="setBookQuestion"
                />
                <span class="icon-box">
                  <i
@@ -183,6 +190,7 @@
                  class="input-bottom-border fz-18"
                  v-model="questionData.warnUp.six.value"
                  @blur="handleQuestion('six')"
                  @change="setBookQuestion"
                />
                <span class="icon-box">
                  <i
@@ -199,7 +207,7 @@
          </div>
          <p class="t0">
            <b>Ⅱ.What other symbols can you think of?</b>
            <button class="parimary-btn" @click="showAnswer('seven')">
            <button class="parimary-btn" @click="showAnswer('wp-seven')">
              显示答案
            </button>
          </p>
@@ -215,17 +223,23 @@
        <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>
        <li class="fz-18">
          <span class="chapter-left-bc">MODULE 1</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl">CHINA,A WONDERLAND</span>
          <span class="chapter-right-bc fw-bl chapter-right-cl"
            >CHINA,A WONDERLAND</span
          >
        </li>
      </ul>
      <div class="padding-102">
        <div class="bodystyle">
          <h3 id="c002"><span class="bjh3">Listening</span></h3>
          <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
@@ -233,23 +247,48 @@
              corresponding descriptions.</b
            >
          </p>
          <p class="center">
          <!-- <p class="center">
            <img class="img-g" alt="" src="../../assets/images/0013-1.jpg" />
          </p>
          </p> -->
          <p class="center">
            <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
          </p>
          <h3 id="c003"><span class="bjh3">Reading</span></h3>
          <p class="center">
          <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> -->
          <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
@@ -259,23 +298,40 @@
            —<i>Alice in Wonderland </i>(“Through the Looking Glass”)
          </p>
          <p>
            My incredible 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 cuisine and of course the
            huge variety of landscapes.
            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 hospitable towards
            foreigners.These Chinese friends made my understanding of Chinese
            culture and civilization much easier,enjoyable and memorable.I
            consider China my second home and love it like my own country!
            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 explore China properly if you do not try its delicious
            variety of food.If you ate
            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>
@@ -283,33 +339,69 @@
        <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>
        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 mouth-watering and
        stimulating.For a foodie like me,China is a heaven.I simply cannot live
        without Chinese food.
          <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 unique atmosphere 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.
            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.
            stay.This is a whole new exciting experience for me,and it will
            always be remembered.
      </p>
      <p class="center">
          <!-- <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>
      <p><span class="zt-cs">Words &amp; Expressions</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>
@@ -318,9 +410,13 @@
      <div class="bkbj">
        <p><i>impossible or very difficult to believe</i></p>
      </div>
      <p>cuisine /kwɪˈziːn/ <i>n.</i> （通常指昂贵的餐馆中的） 饭菜，菜肴</p>
          <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>
            <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">
@@ -331,7 +427,8 @@
        <p><i>pleased to welcome and entertain guests</i></p>
      </div>
      <p>
        civilization /ˌsɪvəlaɪˈzeɪʃn/ <i>n.</i> （特定时期或地区的） 社会文明
            civilization /ˌsɪvəlaɪˈzeɪʃn/ <i>n.</i> （特定时期或地区的）
            社会文明
      </p>
      <div class="bkbj">
        <p>
@@ -354,6 +451,25 @@
      <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>
@@ -363,8 +479,8 @@
      </div>
      <p>
        <i
          >a person who is very interested in cooking and eating different kinds
          of food</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>
@@ -388,13 +504,15 @@
      <div class="bj-note">
        <p><b>Notes:</b></p>
        <p>
          <i>Alice in Wonderland</i> （<i>Alice's Adventures in Wonderland</i
              <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.
            A.Mark the items that made the author curious when she arrived in
            China.
      </p>
      <p>□ Language</p>
      <p>□ People</p>
@@ -403,92 +521,273 @@
      <p>□ Folk art</p>
      <p>□ Landscapes</p>
      <p>□ Transportation</p>
      <p>B.Write down the answer to each question according to the passage.</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>
      <p>_________________________________________</p>
      <p>_________________________________________</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>
      <p>_________________________________________</p>
      <p>_________________________________________</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>
      <p>_________________________________________</p>
      <p>_________________________________________</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>
      <p>_________________________________________</p>
      <p>_________________________________________</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>
      <p>_________________________________________</p>
      <p>_________________________________________</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.
            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_________,and of course the huge variety of
        l_________.Chinese friends helped her a lot in understanding Chinese
        culture and c_________.The author believes that one cannot
        e_________China properly if he/she does not try its delicious variety of
            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_________atmosphere that attracts people.
            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.
            B.Underline the following expressions in the passage and make
            sentences with them.
      </p>
      <p>1.get selected as__________________________</p>
      <p>2.be curious about_________________________</p>
      <p>3.along the way___________________________</p>
      <p>4.come across____________________________</p>
      <p>5.look forward to__________________________</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.
            1.Confucius created an atmosphere of education for the ordinary
            people.
      </p>
      <p>_________________________________________</p>
      <p>
        2.Lei Zu invented the technology of reeling silk（缫丝术）and greatly
        promoted the development of ancient Chinese civilization.
            <input
              v-model="testData.ts.one"
              type="text"
              class="input-bottom-border"
            />
      </p>
      <p>_________________________________________</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>_________________________________________</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>_________________________________________</p>
      <p><b>Ⅲ.Grammar focus:The conditional sentence—if-clause.</b></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.
            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>______________________________________________________________.
            <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.
            4.One day I will go to Xi’an,and I will visit the terracotta
            warriors.
      </p>
      <p>
        <b>If</b>______________________________________________________________.
            <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
@@ -496,34 +795,90 @@
      </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_______to go for a walk in the Summer Palace.</p>
      <p>
        2.We can spend the afternoon on the beach_______the weather is fine.
            B.Complete the following sentences using <i>if</i> or
            <i>whether</i>.
      </p>
      <p>
        3.I called Wang to find out_______or not he really went to see the
        Peking opera show.
            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>
        4.We’re not interested in________we get great jobs and that kind of
        thing.
            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>
        5.________I go to Sichuan,I will visit Chengdu Research Base of Giant
        Panda Breeding.
            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:
            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>
@@ -539,11 +894,105 @@
          src="../../assets/images/dy1-worksheet.jpg"
        />
      </p>
      <p class="center">
        <img class="img-a" alt="" src="../../assets/images/0018-1.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" />
            <img
              class="img-gn"
              alt=""
              src="../../assets/images/dy1-wordbank.jpg"
            />
      </p>
      <div class="bk-wh">
        <p>
@@ -552,9 +1001,238 @@
      </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>
import getResourcePath from "@/assets/methods/resources";
export default {
  name: "chapter-one",
  data() {
@@ -565,6 +1243,14 @@
      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: {
@@ -593,47 +1279,217 @@
          },
          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 == "seven") {
        this.questionData.warnUp.seven = "This is a good idear.";
      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 == "你好")
              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 == "你好")
              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 == "你好")
              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 == "你好")
              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 == "你好")
              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 == "你好")
              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)
      );
    },
  },
};
@@ -646,4 +1502,11 @@
.bodystyle {
  margin: 0 !important;
}
.line-border-box {
  margin-left: 10px;
  display: inline-block;
  width: 50%;
  height: 3px;
  background-color: #f9a71b;
}
</style>

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

@@ -26,8 +26,7 @@
        <p class="tl fz-14 mb-0" style="margin-top: 136px">
          <b>图书意见反馈 gaozhifk@bnupg.com 010-58805079</b>
        </p>
        <p class="tl fz-14 m0">营销中心电话 010-58802755 58800035</p>
        <p class="tl fz-14 m0">编辑部电话：010-58802883</p>
        <p class="tl fz-14 mt-100">营销中心电话 010-58802755 58800035</p>
        <hr class="line" style="height: 1px" />
        <p class="tl fz-14 m0">出版发行：北京师范大学出版社 www.bnupg.com</p>
        <p class="tl fz-14 m0">　　　　　北京市西城区新街口外大街12-3号</p>
@@ -197,5 +196,7 @@
  font-size: 26px !important;
  color: #000 !important;
}

.mt-100 {
  margin-top: 100px !important;
}
</style>

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

@@ -2,7 +2,7 @@
  <div class="page-main" @scroll="throttledScrollHandler">
    <div class="page-content">
      <pageHeader></pageHeader>
      <chapterOne></chapterOne>
      <chapterOne @saveCharacters="saveCharacters"></chapterOne>
    </div>
  </div>
</template>
@@ -281,6 +281,11 @@
        }
      });
    },

    // 点击事件：将生僻单词传给 主应用 从而调用词典功能
    saveCharacters(word) {
      console.log('生僻字',word);
    }
  },
};
</script>