艺术戏剧（部署7.3）

zhongshujie

2024-07-03 0cd16877a2ea61e9d086c4e7b93fc3cf17a8ad8e

艺术戏剧（部署7.3）

 src/books/English/assets/main.less

@@ -294,7 +294,8 @@
  }

  .fieldset {
    border: 2px solid #5f5f5d;
    border: 2px dashed #F9A71B;
    border-radius: 10px;
    font-size: 0.9em;
    margin-left: 1.5em;
    margin-right: 1.5em;
@@ -876,6 +877,34 @@
      outline: none;
    }
  }
  .input-bc-t {
    border: 0;
    border-bottom: 1px solid #000000;
    width: 86%;
    background-color: transparent;
    &:focus {
      outline: none;
    }
  }
 .input-no-border{
  border: 0;
  width: 86%;
  &:focus {
    outline: none;
  }
 }
 .bor-b-n{
  border-bottom: none;
 }
 .bor-t-n{
  border-top: none;
 }
 .continued{
  text-align: right;
  color: #FBB56D;
  margin: 0%;
  padding-right: 2%;
 }
  .preface-odd-header {
    height: 104px;
    display: flex;
@@ -1105,6 +1134,10 @@
    width: 500px;
    height: 36px;
  }
  .textarea-box-center{
    width: 300px;
    height: 36px;
  }
  .matching-title-text {
    color: #f49a4c;
    font-weight: bold;

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

@@ -331,6 +331,7 @@
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
              答案：The Silk Road &nbsp;&nbsp;&nbsp; Immigrants Sinologist
            </p>
            <!--  -->
            <p>
              2.China offers so much to see and explore.What took you by
              surprise about China?
@@ -1331,6 +1332,7 @@
              答案： 1.whether &nbsp; 2.if &nbsp; 3.whether &nbsp; 4.whether
              &nbsp; 5.if
            </p>
            <!-- 提交按钮 -->
            <div class="w100 fl">
              <ul class="fl ju-ar w100">
                <li>
@@ -1924,7 +1926,8 @@
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
            <!-- 答案框 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
              答案：(1)intercitut rain(2)online shopping (3)electronic payment (4)shared bike (5)take-away service (6)facial recognition
              答案：(1)intercitut rain(2)online shopping (3)electronic payment (4)shared bike (5)take-away service
              (6)facial recognition
              (7)2022 Beijing Winter Olympics (8)2023 World University Games (9)Hong Kong-Zhuhai-Macao Bridge
              (10)Scenery spots, such as Jiuzhaigou, the Palace Museum, the Great Wall
            </p>
@@ -1947,7 +1950,8 @@
            </p>
            <p class="center"><b>The Great Progress in China</b></p>
            <p class="center">
              <audio :src="resource.readingOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
              <audio :src="resource.readingThree" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio>
            </p>
            <p>
              On August 31st,2012,as I landed my feet on Chinese ground,I
@@ -1956,7 +1960,9 @@
              was for my studies.In a matter of days,I made a lot of friends
              from different countries and one afternoon,my friends and I
              planned to visit the world-famous Sun Yat-sen
              Mausoleum.A._______________ I looked around with curiosity,and
              Mausoleum.A.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 120px" v-model="testData.in.one" @change="setTestData" /> I looked around with
              curiosity,and
              everything seemed to move at a quick pace.
            </p>
            <p>
@@ -1979,13 +1985,16 @@
              wallet.
            </p>
            <p>
              B._______________ I went through all the necessary procedures and
              B.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 120px"
                v-model="testData.in.one" @change="setTestData" /> I went through all the necessary procedures and
              couldn’t wait to ride my first shared bike.
            </p>
            <p>
              Last but not least,nearly at the end of 2016,the ordering
              platforms made their appearance on all Chinese
              phones.C._______________ What makes my life easier is that I can
              phones.C.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 120px" v-model="testData.in.one" @change="setTestData" /> What makes my life easier is
              that I can
              buy vegetables and fruits online and get them delivered to my
              door.
            </p>
@@ -2020,7 +2029,7 @@
              <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
              <span class="line-border-box"></span>
            </p>
            <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
            <audio :src="resource.readingFour" controls controlslist="noplaybackrate nodownload"
              style="margin-left: 10px" class="audio"></audio>
            <p>breeze /briːz/ <i>n.</i> 微风；和风</p>
            <div class="bkbj">
@@ -2159,26 +2168,42 @@
              3.It was at that moment that I knew about the metro system.It was
              new,fast,and extraordinary.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案： A.3 &nbsp; B.1 &nbsp; C.2 &nbsp;
            </p>
            <p>
              B.Decide whether the following statements are true (T) or false
              (F).
            </p>
            <p>
              (　) 1.Vanessa made a lot of friends as soon as she arrived in
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" /> ) 1.Vanessa made a lot of friends as soon as she
              arrived in
              China.
            </p>
            <p>
              (　) 2.Before Vanessa came to China,she knew a lot about the metro
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 2.Before Vanessa came to China,she knew a lot about
              the metro
              system.
            </p>
            <p>
              (　) 3.Vanessa didn’t know about online shopping before she met
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 3.Vanessa didn’t know about online shopping before
              she met
              her neighbour Alison.
            </p>
            <p>(　) 4.Vanessa got her own online payment account by herself.</p>
            <p>(<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 4.Vanessa got her own online payment account by
              herself.</p>
            <p>
              (　) 5.Buying vegetables and fruits online makes Vanessa’s life
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 5.Buying vegetables and fruits online makes
              Vanessa’s life
              easier.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案： 1.T &nbsp; 2.F &nbsp; 3.T &nbsp; 4.F &nbsp; 5.T
            </p>
            <p><b>Ⅱ.Language focus.</b></p>
            <p>
@@ -2187,23 +2212,31 @@
            </p>
            <p>
              1.Tom was shocked by China’s progress that she had
              <i>noticed</i>.________
              <i>noticed</i>.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 90px" v-model="testData.in.one" @change="setTestData" />
            </p>
            <p>
              2.China has made <i>amazing</i> progress in the manufacturing
              industry.________
              industry.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 90px" v-model="testData.in.one" @change="setTestData" />
            </p>
            <p>
              3.Ordering platforms supported <i>by</i> various Apps is very
              convenient.________
              convenient.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 90px" v-model="testData.in.one" @change="setTestData" />
            </p>
            <p>
              4.The <i>age</i> of artificial intelligence was brought into being
              by the Internet.________
              by the Internet.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 90px" v-model="testData.in.one" @change="setTestData" />
            </p>
            <p>
              5.The <i>rhythm</i> of ancient people’s lives is slower than that
              of modern people.________
              of modern people.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 90px" v-model="testData.in.one" @change="setTestData" />
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案： 1.witnessed &nbsp; 2.extraordinary &nbsp; 3.via &nbsp; 4.era &nbsp; 5.pace
            </p>
            <p>
              B.Fill in the blanks with the proper form of the expressions given
@@ -2214,7 +2247,9 @@
                a matter of　go through　last but not least　well off　type in
              </p>
            </div>
            <p>1.China has________great changes in the era of big data.</p>
            <p>1.China has<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 60px" v-model="testData.in.one" @change="setTestData" />great changes in the era of big
              data.</p>
          </div>
        </div>
        <div class="preface-bottom">
@@ -2237,16 +2272,23 @@
        <div class="padding-93">
          <div class="bodystyle">
            <p>
              2.________key words and you can search for the needed goods in
              2.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 60px"
                v-model="testData.in.one" @change="setTestData" />key words and you can search for the needed goods in
              online shops.
            </p>
            <p>
              3.A dispute over online shopping can be settled in________days.
              3.A dispute over online shopping can be settled in<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />days.
            </p>
            <p>4.China has,in all respects,become very________.</p>
            <p>4.China has,in all respects,become very<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />.</p>
            <p>
              5.________,all the people committed to Shenzhou Spacecrafts
              5.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 60px"
                v-model="testData.in.one" @change="setTestData" />,all the people committed to Shenzhou Spacecrafts
              deserve respect.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案： 1.went through &nbsp; 2.Type in &nbsp; 3.a matter of &nbsp; 4.well Off &nbsp; 5.Last but not least
            </p>
            <p><b>Ⅲ.Grammar focus:The simple sentence.</b></p>
            <p>
@@ -2264,22 +2306,50 @@
              </p>
              <p>
                5.I always saw my Chinese classmates paying with their
                phones.（S+V+O+C)
                phones.(S+V+O+C)
              </p>
            </div>
            <p>1.It is actually an online shopping website.（________）</p>
            <p>1.It is actually an online shopping website.（<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />）</p>
            <p>
              2.Vanessa finally got her own online payment account.（________）
              2.Vanessa finally got her own online payment account.（<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />）
            </p>
            <p>
              3.China offers researchers world-class advanced research
              facilities in the institutes. （________）
              facilities in the institutes. （<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />）
            </p>
            <p>
              4.These friends made Vanessa see China through the eyes of the
              locals.（________）
              locals.（<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 60px"
                v-model="testData.in.one" @change="setTestData" />）
            </p>
            <p>5.The list of Chinese food never ends.（________）</p>
            <p>5.The list of Chinese food never ends.（<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />）</p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案： 1.S+V+C &nbsp; 2.S+V+O &nbsp; 3.S+V+O+O &nbsp; 4.S+V+O+C &nbsp; 5.S+V
            </p>

            <div class="w100 fl">
              <ul class="fl ju-ar w100">
                <li>
                  <button class="btn-border btn-w" @click="saveData">
                    提交
                  </button>
                </li>
                <li>
                  <button @click="changeTestData" class="btn-border btn-w">
                    重做
                  </button>
                </li>
                <li>
                  <button @click="showQuestionAnswer = !showQuestionAnswer" class="parimary-btn">
                    查看答案
                  </button>
                </li>
              </ul>
            </div>
            <h3 id="c007"><span class="bjh3">Mini-project</span></h3>
            <p>
              Life today is much better than that of 10 years ago.Work in
@@ -2290,6 +2360,7 @@
            <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">Items</td>
@@ -2349,7 +2420,7 @@
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
@@ -2363,7 +2434,7 @@
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
@@ -2377,7 +2448,7 @@
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
@@ -2386,9 +2457,9 @@
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td colspan="3">
                <td colspan="3" style="text-align: left;">
                  Your suggestion:
                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.ten" class="w100 table-tr-bc b0 table-textarea "
                    @change="setBookQuestion"></textarea>
                </td>
              </tr>
@@ -2396,32 +2467,49 @@
            <h2 id="b002">
              <img class="img-0" alt="" src="../../assets/images/dy1-le3.jpg" />
            </h2>
            <h3 id="c008"><span class="bjh3">Listening</span></h3>
            <h3 id="c008" class="fl al-cn">
              <span class="bjh3">Listening</span>
            </h3>

            <p>
              <b>Ⅰ.Listen to Tom,an overseas student,talking about his journey
                to China and fill in the blanks with what you hear.</b>
            </p>
            <audio :src="resource.readingTwo" controls controlslist="noplaybackrate nodownload"
              style="margin-left: 10px" class="audio"></audio>
            <audio :src="resource.listenTwo" controls controlslist="noplaybackrate nodownload" style="margin-left: 10px"
              class="audio"></audio>
            <p>
              After studying in China for almost three years by now,I call China
              my second homeland.I love the natural beauty,the 1.________,the
              my second homeland.I love the natural beauty,the 1.<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />,the
              people and the food.China is a large country with diverse
              landscapes awaiting adventurers to 2.________.There is a modern
              landscapes awaiting adventurers to 2.<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />.There
              is a modern
              public transportation system including city
              buses,3.________,high-speed trains,and airports,as well as a large
              highway network.These make travel 4.________and efficient and
              buses,3.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 60px"
                v-model="testData.in.one" @change="setTestData" />,high-speed trains,and airports,as well as a large
              highway network.These make travel 4.<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />and
              efficient and
              allow me to go to many places to enjoy the scenery and
              culture.China’s natural beauty keeps on 5.________me,from the pure
              culture.China’s natural beauty keeps on 5.<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one"
                @change="setTestData" />me,from the pure
              blue waterfalls in Jiuzhaigou to the snowcapped mountains of
              Shangri-la,from the sandy 6.________of Sanya to the rocky seaside
              Shangri-la,from the sandy 6.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 60px" v-model="testData.in.one" @change="setTestData" />of Sanya to the rocky seaside
              of Laoshan… China is such a beautiful country!
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案： 1.culture &nbsp; 2.explore &nbsp; 3.subways &nbsp; 4.convenient &nbsp; 5.surprising &nbsp; 6.beach
            </p>
            <p>
              <b>Ⅱ.Listen to the conversation about planning for the upcoming
                Chinese Culture Week and circle the right expressions to
                complete the following sentences.</b>
            </p>
            <audio :src="resource.listenThree" controls controlslist="noplaybackrate nodownload"
              style="margin-left: 10px" class="audio"></audio>
            <p>
              1.They would like to organize an activity for foreign students to
              experience Chinese handcrafts / learn Chinese calligraphy.
@@ -2461,9 +2549,38 @@
            </p>
            <h3 id="c009"><span class="bjh3">Practical Writing</span></h3>
            <p>Work with your partner to discuss the following questions.</p>
            <p>1.How do you let others know about an upcoming event?</p>
            <p>1.How do you let others know about an upcoming event?
              <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)" />
                </svg>
              </span>
            </p>
            <!-- 文本框 -->
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
            <!-- 答案框 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
              答案： 1)posters 2)Wechat public account 3)Campus radio 4)Campus TV station 5)Notice
            </p>
            <p>
              2.What information would you like to tell them about the event?
              <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)" />
                </svg>
              </span>
            </p>
            <!-- 文本框 -->
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
            <!-- 答案框 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
              答案：(1)Name of the event(2)Date & time (3)Address (4)Organizer
            </p>
            <p>
              <b>Ⅰ.Read the following tips for designing an event poster and
@@ -2574,13 +2691,35 @@
            </div>
            <div class="dy1-bj5">
              <p>1.What can be the title of the exhibition?</p>
              <p>_________________________________________</p>
              <p>
                <input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
                  v-model="testData.in.one" @change="setTestData" />
              </p>
              <!-- 答案 -->
              <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
                答案： Traditional handicraft show
              </p>
              <p>2.What should be included in the exhibition?</p>
              <p>_________________________________________</p>
              <p><input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
                  v-model="testData.in.one" @change="setTestData" /></p>
              <!-- 答案 -->
              <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
                答案： Various handicrafts made by Chinese students in theirtraditional Chinese culture courses
              </p>
              <p>3.Where will the exhibition be held?</p>
              <p>_________________________________________</p>
              <p><input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
                  v-model="testData.in.one" @change="setTestData" /></p>
              <!-- 答案 -->
              <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
                答案： Students activity center.
              </p>
              <p>4.When will the exhibition be held?</p>
              <p>_________________________________________</p>
              <p><input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
                  v-model="testData.in.one" @change="setTestData" /></p>
              <!-- 答案 -->
              <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
                答案： November 13th -- 19th
              </p>
              <p>...</p>
            </div>
          </div>
@@ -2926,6 +3065,10 @@
        listenOne: "",
        readingOne: "",
        readingTwo: "",
        readingThree: "",
        readingFour: "",
        listenTwo: "",
        listenThree: "",
      },
      dropDownList: [
        "online shopping",
@@ -3063,6 +3206,18 @@
      this.resource.readingTwo = await getResourcePath(
        "E8719EC88026BCFB11D292AA999F6D3D"
      );
      this.resource.readingThree = await getResourcePath(
        "43AAC2E2725009F975A611DDB5AF41A4"
      );
      this.resource.readingFour = await getResourcePath(
        "9B2DC045F8CD6697F14784714D472DBB"
      );
      this.resource.listenTwo = await getResourcePath(
        "D3DD18BEA1DCB8CF3772E9D1DCC8B893"
      );
      this.resource.listenThree = await getResourcePath(
        "F7026C57657D78745D38676F7854E9D7"
      );
    },
    showAnswer(type) {
      if (type == "showImg") {

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

@@ -123,29 +123,122 @@
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <h3 id="c011"><span class="bjh3">Listening</span></h3>
            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
            <h3 id="c011" class="fl al-cn">
              <span class="bjh3">Listening</span>
              <!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
              <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </h3>
            <p>
              <b>Four people are sharing their experiences of working with their
                colleagues.Listen to the recording and mark the true statements
                according to the speaker.</b>
            </p>
            <p class="center">
              <img class="img-a" alt="" src="../../assets/images/0031-3.jpg" />
            </p>
            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
              <!-- 第一行 -->
              <tr class="table-tr-bc">
                <td class="tl-cn table-th-bc" rowspan="2">Speaker 1</td>
                <td class="bor-b-n">
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> A. I can
                  understand my foreign colleagues because they are straightforward.
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td class="bor-t-n">
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> B. My foreign
                  colleagues just nod and agree with me when we have a discussion.
                </td>
              </tr>
              <!-- 第二行 -->
              <tr class="table-tr-bc">
                <td class="tl-cn table-th-bc" rowspan="2">Speaker 2</td>
                <td class="bor-b-n">
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> A. My foreign
                  boss closely oversees our work and criticizes us for our mistakes.
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td class="bor-t-n">
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> B. My foreign
                  boss is very hands-off and gives us a lot freedom to do things.
                </td>
              </tr>
              <!-- 第三行 -->
              <tr class="table-tr-bc">
                <td class="tl-cn table-th-bc" rowspan="2">Speaker 3</td>
                <td class="bor-b-n">
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> A. My Chinese
                  colleagues always stay late in the ofice or bring work home.
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td class="bor-t-n">
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> B. My Chinese
                  colleagues manage to get their work done during working hours.
                </td>
              </tr>
              <!-- 第四行 -->
              <tr class="table-tr-bc">
                <td class="tl-cn table-th-bc" rowspan="2">Speaker 4</td>
                <td class="bor-b-n">
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> A. My Chinese
                  colleagues deal with issues more objectively
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td class="bor-t-n">
                  <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> B. My Chinese
                  colleagues are likely to take things personally
                </td>
              </tr>
            </table>
            <h3 id="c012"><span class="bjh3">Reading</span></h3>
            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
            <p>
              1.Culture shock is a normal part of the life when moving somewhere
              new,such as travelling abroad,or studying abroad.So,what’s the
              definition of culture shock?
              <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)" />
                </svg>
              </span>
            </p>
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
              答案：Culture shock is a normal process of adapting to a new culture" ltis a time when a person becomes aware
              of the differences orconflicts in values and customs between their home culture andthe new culture they
              are in,Common feelings may be anxiety,confusion, homesickness or anger.
            </p>
            <p>
              2.Can you offer some examples of culture shock in regard to
              different languages,different table manners or different food
              customs?
              <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)" />
                </svg>
              </span>
            </p>
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
              答案：(1)In Japanese culture, using the wrong levelDolitene5saddress1ng5omeone can beenconsidered rude or
              disrespectful
              (2)German tends to be a more direct language, while English speakers often use indirectlanguage for
              opinions. For instance, in German, one might say "Close the window", whereas inEnglish, it could be "could
              you please close the window?" The directness in German mightcome across as rude to some English speakers.
              (3)Mandarin Chinese has four different tones, and the meaning of a word can change entirelydepending on
              the tone used, Mispronouncing tones can lead to misunderstanding
            </p>
            <p class="center"><b>Challenges of Working Across Cultures</b></p>
            <p class="center">
              <audio :src="resource.readingOne" controls class="audio" @play="audioPlay"></audio>
            </p>

            <p>
              It is not a secret that a company’s success is heavily based on
              its people.An employee is defined by his/her talents,knowledge and
@@ -222,7 +315,7 @@
              <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
              <span class="line-border-box"></span>
            </p>
            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
            <audio :src="resource.readingTwo" controls class="audio" @play="audioPlay"></audio>
            <p>define /dɪˈfaɪn/ <i>v.</i> 给……下定义</p>
            <div class="bkbj">
              <p><i>to state precisely the meaning of sth.</i></p>
@@ -382,28 +475,43 @@
              (F).
            </p>
            <p>
              (　) 1.An employee is usually defined by his/her talents and
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 1.An employee is usually defined by his/her talents
              and
              abilities.
            </p>
            <p>
              (　) 2.During the interview,I didn’t have difficulty in
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 2.During the interview,I didn’t have difficulty in
              understanding my interviewer.
            </p>
            <p>
              (　) 3.In Latvia,it is normal to expect replies by email after
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 3.In Latvia,it is normal to expect replies by email
              after
              normal working hours.
            </p>
            <p>
              (　) 4.Learning about your colleagues’ traditions can help you
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 4.Learning about your colleagues’ traditions can
              help you
              move forward.
            </p>
            <p>
              (　) 5.Email can make the communication more smooth because it
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 5.Email can make the communication more smooth
              because it
              conveys the emotions.
            </p>
            <p>
              (　) 6.We can learn a lot from each other when working in a
              (<input :disabled="testData.isComplete" type="text" class="input-no-border" style="width: 20px"
                v-model="testData.in.one" @change="setTestData" />) 6.We can learn a lot from each other when working in
              a
              cross-cultural environment.
            </p>
            <!-- 答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案： 1.F &nbsp; 2.F &nbsp; 3.F &nbsp; 4.T &nbsp; 5.F &nbsp; 6.T
            </p>
            <p><b>Ⅱ.Language focus.</b></p>
            <p>
@@ -414,11 +522,15 @@
              <p>reward　disturb　tradition　accept　colleague　arise</p>
            </div>
            <p>
              1.Working with photographers is one of the most ________ parts of
              1.Working with photographers is one of the most <input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" /> parts
              of
              my job.
            </p>
            <p>2.All families must have ________ that they regularly follow.</p>
            <p>3.Being late is ________ in any working environment.</p>
            <p>2.All families must have <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" />that they regularly follow.</p>
            <p>3.Being late is <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" />in any working environment.</p>
          </div>
        </div>
        <div class="preface-bottom">
@@ -441,46 +553,105 @@
        <div class="padding-93">
          <div class="bodystyle">
            <p>
              4.Sarah’s ________ Li Lin made her feel welcome on her first day
              4.Sarah’s
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 70px"
                v-model="testData.in.one" @change="setTestData" />
              Li Lin made her feel welcome on her first day
              at work.
            </p>
            <p>
              5.Problems will ________ from communication between people from
              5.Problems will <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" /> from communication between people
              from
              different cultures.
            </p>
            <p>
              6.I’m sorry to ________ you,but can I talk to you for a moment?
              6.I’m sorry to <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" /> you,but can I talk to you for a
              moment?
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案： 1.rewarding &nbsp; 2.traditions &nbsp; 3.unacceptable &nbsp; 4.colleague &nbsp; 5.arise &nbsp;
              6.disturb
            </p>
            <p>
              B.Underline the following expressions in the passage and make
              sentences with them.
            </p>
            <p>1.apply for____________________________________</p>
            <p>2.in response to________________________________</p>
            <p>3.get familiar with______________________________</p>
            <p>4.take over____________________________________</p>
            <p>5.make an effort________________________________</p>
            <p>1.apply for <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 370px" v-model="testData.in.one" @change="setTestData" /> </p>
            <!-- 例句 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              例句： I would like to apply for the position of sales assistant in your company.
            </p>
            <p>2.in response to <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 370px" v-model="testData.in.one" @change="setTestData" /> </p>
            <!-- 例句 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              例句： The product was developed in response to customer demand.
            </p>
            <p>3.get familiar with<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 370px" v-model="testData.in.one" @change="setTestData" /></p>
            <!-- 例句 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              例句： It is important to get familiar with the company’s missions and values.
            </p>
            <p>4.take over<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 370px" v-model="testData.in.one" @change="setTestData" /></p>
            <!-- 例句 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              例句： As employees, we shouldn’t let negative thoughts take over.
            </p>
            <p>5.make an effort<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 370px" v-model="testData.in.one" @change="setTestData" /></p>
            <!-- 例句 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              例句：The company is making an effort to improve its services for local markets.
            </p>
            <p>C.Translate the following sentences into Chinese.</p>
            <p>
              1.When working in a cross-cultural setting,there can be some
              language barriers among employees.
            </p>
            <p>_____________________________________________</p>
            <p><input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 470px"
                v-model="testData.in.one" @change="setTestData" /></p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：在跨文化环境中工作，员工之间可能会存在语言障碍。
            </p>
            <p>
              2.You could go for a walk or jog to manage your frustration at
              work.
            </p>
            <p>_____________________________________________</p>
            <p><input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 470px"
                v-model="testData.in.one" @change="setTestData" />
            </p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：你可以通过散步或慢跑来调节工作中的沮丧情绪。
            </p>
            <p>
              3.They gave us some advice on how to correctly handle cultural
              differences in the workplace.
            </p>
            <p>_____________________________________________</p>
            <p><input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 470px"
                v-model="testData.in.one" @change="setTestData" />
            </p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：他们就如何在工作中正确处理文化差异给了我们一些建议。
            </p>
            <p>
              4.Wearing appropriate clothes in the office will make you feel
              comfortable and confident.
            </p>
            <p>_____________________________________________</p>
            <p><input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 470px"
                v-model="testData.in.one" @change="setTestData" />
            </p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：在办公室穿着合适的衣服会让你感到舒适和自信。
            </p>
            <p><b>Ⅲ.Grammar focus:“it” as formal subject.</b></p>
            <p>
              A.Read the example and underline the real subject that “it”
@@ -542,20 +713,75 @@
              </p>
            </div>
            <p>1.To share new ideas with others makes us feel good.</p>
            <p>______________________________________________.</p>
            <p>
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 470px"
                v-model="testData.in.one" @change="setTestData" />.
            </p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：It makes us feel good to share new ideas with others.
            </p>
            <p>2.To get along well with colleagues is really important.</p>
            <p>______________________________________________.</p>
            <p>
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 470px"
                v-model="testData.in.one" @change="setTestData" />.
            </p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：It is really important to get along well with colleagues.
            </p>
            <p>
              3.To have an open mind towards a new culture is necessary in the
              workplace.
            </p>
            <p>_____________________________________________.</p>
            <p>
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 470px"
                v-model="testData.in.one" @change="setTestData" />.
            </p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：It is necessary to have an open mind towards a new culture in the workplace.
            </p>
            <p>
              4.To think twice before acting is always necessary for everyone.
            </p>
            <p>______________________________________________.</p>
            <p>
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 470px"
                v-model="testData.in.one" @change="setTestData" />.
            </p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：It is always necessary for everyone to think twice before acting.
            </p>
            <p>5.You are very kind to help me with my sales report.</p>
            <p>______________________________________________.</p>
            <p>
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 470px"
                v-model="testData.in.one" @change="setTestData" />.
            </p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：It’s very kind of you to help me with my sales report.
            </p>
            <!-- 提交按钮 -->
            <div class="w100 fl">
              <ul class="fl ju-ar w100">
                <li>
                  <button class="btn-border btn-w" @click="saveData">
                    提交
                  </button>
                </li>
                <li>
                  <button @click="changeTestData" class="btn-border btn-w">
                    重做
                  </button>
                </li>
                <li>
                  <button @click="showQuestionAnswer = !showQuestionAnswer" class="parimary-btn">
                    查看答案
                  </button>
                </li>
              </ul>
            </div>
            <h3 id="c013"><span class="bjh3">Mini-project</span></h3>
            <p>
              Most foreigners in China have a hard time keeping up with Chinese
@@ -586,7 +812,7 @@
              <tr class="table-tr-bc">
                <td class="tl-cn">Eye Contact</td>
                <td>
                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.two" class="w100 table-tr-bc b0 table-textarea "
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
@@ -597,7 +823,7 @@
              <tr class="table-tr-bc">
                <td class="wh-no tl-cn">Gift Exchange</td>
                <td>
                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
@@ -608,7 +834,7 @@
              <tr class="table-tr-bc">
                <td class="wh-no tl-cn">Table Manners</td>
                <td>
                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
@@ -638,7 +864,7 @@
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p>continued</p>
            <p class="continued">continued</p>
            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
              <tr class="table-th-bc">
                <td class="wh-no tl-cn">Items</td>
@@ -648,7 +874,7 @@
              <tr class="table-tr-bc" style="width: 40%">
                <td class="wh-no tl-cn">Gift Exchange</td>
                <td class="tl-w-45">
                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"></textarea>
                </td>
                <td class="tl-w-45">
@@ -659,7 +885,7 @@
              <tr class="table-tr-bc">
                <td class="wh-no tl-cn">Table Manners</td>
                <td class="tl-w-45">
                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.enight" class="w100 table-tr-bc b0 table-textarea"
                    @change="setBookQuestion"></textarea>
                </td>
                <td class="tl-w-45">
@@ -678,20 +904,25 @@
              </p>
            </div>
            <h2 id="b006"><img class="img-0" alt="" src="../../assets/images/dy2-le2.jpg" /></h2>
            <h3 id="c014"><span class="bjh3">Warm-up</span></h3>
            <audio :src="resource.readingTwo" controls style="margin-left: 10px" class="audio"
              @play="audioPlay"></audio>
            <h3 id="c014" class="fl al-cn">
              <span class="bjh3">Warm-up</span>
              <!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
              <audio :src="resource.warmOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </h3>
            <p><b>Appreciate the theme song of the Beijing</b>2022<b> Winter Olympics<i> Together for a Shared
                  Future</i> and fill in the blanks.</b></p>
            <p class="center"><b><i>Together for a Shared Future</i></b></p>
            <p class="center">There’s a twinkle in your eye</p>
            <p class="center">Reflects the snow that gently covers the tiles</p>
            <p class="center">Fly to the 1._______</p>
            <p class="center">Fly to the 1.<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" /></p>
            <p class="center">See the world’s new coat of crystal white</p>
            <p class="center">This feeling you just can’t 2._______</p>
            <p class="center">This feeling you just can’t 2.<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" /></p>
            <p class="center">Feels as snow as pure as that azure ice</p>
            <p class="center">Fly to the sky</p>
            <p class="center">Ride the 3._______watch your fears roll by</p>
            <p class="center">Ride the 3.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" />watch your fears roll by</p>
          </div>
        </div>
        <div class="preface-bottom">
@@ -714,23 +945,31 @@
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p class="center">When everyone needs 4._______</p>
            <p class="center">When everyone needs 4.<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" /></p>
            <p class="center">Let’s go hand in hand and rise above</p>
            <p class="center">Together for a shared future</p>
            <p class="center">You and I</p>
            <p class="center">We can 5._______the sky</p>
            <p class="center">We can 5.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" />the sky</p>
            <p class="center">We all know how to love</p>
            <p class="center">Open up your 6._______and that’s enough</p>
            <p class="center">Open up your 6.<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" />and
              that’s enough</p>
            <p class="center">Together for a shared future</p>
            <p class="center">You and I</p>
            <p class="center">Together</p>
            <p class="center">We can touch the sky</p>
            <!--答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
              答案：(1)sky &nbsp; (2)deny &nbsp; (3)rainbow &nbsp; (4)love &nbsp; (5)touch &nbsp; (6)heart
            </p>
            <h3 id="c015"><span class="bjh3">Reading</span></h3>
            <audio :src="resource.readingTwo" controls style="margin-left: 10px" class="audio"
              @play="audioPlay"></audio>
            <p>1.Have you watched the Beijing 2022 Winter Olympics? What did you think of the opening ceremony?</p>
            <p>2.What impressed you most during the Beijing 2022 Winter Olympics?</p>
            <p class="center"><b>From 2008 to 2022:The Road of My Country and My Growth</b></p>
            <p class="center"><audio :src="resource.readingThree" controls style="margin-left: 10px" class="audio"
                @play="audioPlay"></audio></p>
            <p>For an individual or a country,a period of 14 years is long enough to become calm,confident and mature.On
              the road from 2008 to 2022,I learned to grow up with my country and the Olympics.</p>
            <p>In 2008,hosting the Olympics was new to China and I was then new in covering the Olympics as a
@@ -781,7 +1020,8 @@
              <span class="zt-cs" style="font-size: 20px">Words &amp; Expressions</span>
              <span class="line-border-box"></span>
            </p>
            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
            <!-- 视频 -->
            <audio :src="resource.readingFour" controls class="audio" @play="audioPlay"></audio>
            <p>individual /ˌɪndɪˈvɪdʒʊəl/ <i>n.</i> 个人；个体</p>
            <div class="bkbj">
              <p><i>a person considered separately rather than as part of a group</i></p>
@@ -884,9 +1124,15 @@
            <p><b>Ⅰ.Reading comprehension.</b></p>
            <p>A.Read the passage and answer the following questions.</p>
            <p>1.What was the theme of the Beijing 2022 Winter Olympics?</p>
            <p>______________________________________________</p>
            <p>
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 400px"
                v-model="testData.in.one" @change="setTestData" />.
            </p>
            <p>2.What made the Beijing 2022 Winter Olympics “exceptional”?</p>
            <p>______________________________________________</p>
            <p>
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 400px"
                v-model="testData.in.one" @change="setTestData" />.
            </p>
          </div>
        </div>
        <div class="preface-bottom">
@@ -909,7 +1155,11 @@
        <div class="padding-93">
          <div class="bodystyle">
            <p>3.How does the author feel about China holding two Olympic Games?</p>
            <p>______________________________________________</p>
            <p>
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 400px"
                v-model="testData.in.one" @change="setTestData" />.
            </p>

            <p>B.Read the author’s opinions of the two Olympics,and put the number of the sentence into the right
              column.</p>
            <p>1.I was full of energy rushing for work but also making errors.</p>
@@ -918,22 +1168,64 @@
            <p>4.I couldn’t control myself when the Chinese anthem was played.</p>
            <p>5.More audio-visual technologies were used in the opening ceremony.</p>
            <p>6.It focused more on introducing “myself” instead of telling the story of “togetherness”.</p>
            <p class="center"><img class="img-a" alt="" src="../../assets/images/0041-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">2008 Olympics</td>
                <td class="tl-cn">2022 Olympics</td>
              </tr>
              <tr class="table-tr-bc">
                <td>
                  <textarea v-model="questionData.table.one"
                    class="w100 table-tr-bc b0 table-textarea textarea-box-center" @change="setBookQuestion"></textarea>
                </td>
                <td>
                  <textarea v-model="questionData.table.two"
                    class="w100 table-tr-bc b0 table-textarea textarea-box-center" @change="setBookQuestion"></textarea>
                </td>
              </tr>
            </table>
            <p><b>Ⅱ.Language focus.</b></p>
            <p>A.Replace the words or expressions in italics with the exact words in the passage and change the form if
              necessary.</p>
            <p>1.Each <i>person</i> has a particular job within the company._________</p>
            <p>2.Lin Wei showed <i>excellent</i> mechanic skills as an auto technician._________</p>
            <p>3.As a team member,I always <i>take part</i> in the discussions as much as possible._________</p>
            <p>4.She was the winner of the business plan <i>contest</i> in my company._________</p>
            <p>5.He is a good <i>reporter</i> who is curious about new information every time._________</p>
            <p>1.Each <i>person</i> has a particular job within the company.
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 70px"
                v-model="testData.in.one" @change="setTestData" />
            </p>
            <p>2.Lin Wei showed <i>excellent</i> mechanic skills as an auto technician.
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 70px"
                v-model="testData.in.one" @change="setTestData" />
            </p>
            <p>3.As a team member,I always <i>take part</i> in the discussions as much as possible.
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 70px"
                v-model="testData.in.one" @change="setTestData" />
            </p>
            <p>4.She was the winner of the business plan <i>contest</i> in my company.
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 70px"
                v-model="testData.in.one" @change="setTestData" />
            </p>
            <p>5.He is a good <i>reporter</i> who is curious about new information every time.
              <input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 70px"
                v-model="testData.in.one" @change="setTestData" />
            </p>
            <!-- 答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
              答案：(1) individual &nbsp; (2) exceptional &nbsp; (3)participate &nbsp; (4)competition &nbsp; (5) journalist
              &nbsp;
            </p>
            <p>B.Fill in the blanks with the proper form of the expressions given below.</p>
            <div class="bk-wh">
              <p>fail to　focus on　due to　move away　pay tribute to</p>
            </div>
            <p>1.The delivery man was praised by us ________ his positive attitude.</p>
            <p>2.The manager basically ________ cost reduction and quality improvement.</p>
            <p>3.Li Ming ________ control his emotions when he saw the Chinese flag flying at the Olympic Stadium.</p>
            <p>1.The delivery man was praised by us <input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" /> his
              positive attitude.</p>
            <p>2.The manager basically <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" /> cost reduction and quality
              improvement.</p>
            <p>3.Li Ming <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" /> control his emotions when he saw
              the Chinese flag flying at the Olympic Stadium.</p>
          </div>
        </div>
        <div class="preface-bottom">
@@ -956,18 +1248,46 @@
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p>4.The boss ________ what she had done for the company.</p>
            <p>5.To be creative,we’d better ________ from traditional ideas at work.</p>
            <p>4.The boss <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" /> what she had done for the
              company.</p>
            <p>5.To be creative,we’d better <input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" /> from
              traditional ideas at work.</p>
            <!-- 答案 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
              答案：(1) due to &nbsp; (2) focuses on &nbsp; (3)failed to &nbsp; (4)paid tribute to &nbsp; (5) move away
              &nbsp;
            </p>
            <p><b>Ⅲ.Grammar focus:Active and passive voice.</b></p>
            <p>Complete the passage using the correct form of the verbs in the brackets.</p>
            <p>Fashion designer Vivienne Tam 1. ________ (name) “Yin Yok” when she was born.She was given her English
              name when she started studying in Hong Kong.Her teacher 2. ________ (teach) English at school but she
              spoke Chinese at home.Her parents 3. ________ (tell) her to remember Chinese culture.At the same
              time,Western ideas 4. ________ (introduce) to her since people from many cultures were living in Hong
              Kong.This mix of East and West in her life 5. ________ (see) in her designs even now.Vivienne 6. ________
            <p>Fashion designer Vivienne Tam 1. <input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" />
              (name) “Yin Yok” when she was born.She was given her English
              name when she started studying in Hong Kong.Her teacher 2. <input :disabled="testData.isComplete"
                type="text" class="input-bottom-border" style="width: 70px" v-model="testData.in.one"
                @change="setTestData" /> (teach) English at school but she
              spoke Chinese at home.Her parents 3. <input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" />
              (tell) her to remember Chinese culture.At the same
              time,Western ideas 4. <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" /> (introduce) to her since people
              from many cultures were living in Hong
              Kong.This mix of East and West in her life 5. <input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" /> (see)
              in her designs even now.Vivienne 6. <input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" />
              (move) to New York when she was twenty-five.Her new and interesting designs were liked by important shops
              there,so a lot of orders for her clothing 7 ________ (place).Today she 8. ________ (sell) East-meets-West
              there,so a lot of orders for her clothing 7 <input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 70px" v-model="testData.in.one" @change="setTestData" />
              (place).Today she 8. <input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 70px" v-model="testData.in.one" @change="setTestData" /> (sell) East-meets-West
              clothes not only in New York,but also in cities around the world.</p>
              <!-- 答案 -->
              <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerThree">
              答案：(1)was named  &nbsp; (2) taught &nbsp; (3)told &nbsp; (4)were introduced &nbsp; (5) is seen &nbsp; (6) moved &nbsp; (7) were placed &nbsp; (8) sells
              &nbsp;
            </p>
            <h3 id="c016"><span class="bjh3">Mini-project</span></h3>
            <p>China has a history of over 5,000 years with rich cultural heritage and great achievements that have
              drawn admiration from around the world.There are plenty of good reasons to be proud of her.List the things
@@ -988,7 +1308,7 @@
              <tr class="table-tr-bc">
                <td class="tl-cn">Chinses Art</td>
                <td>
                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.one" class="w100 table-tr-bc b0 table-textarea "
                    @change="setBookQuestion"></textarea>
                </td>
              </tr>
@@ -998,7 +1318,7 @@
                    @change="setBookQuestion"></textarea>
                </td>
                <td>
                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.three" class="w100 table-tr-bc b0 table-textarea "
                    @change="setBookQuestion"></textarea>
                </td>
              </tr>
@@ -1024,7 +1344,7 @@
        <!-- 内容 -->
        <div class="padding-93">
          <div class="bodystyle">
            <p class="mr-rg">continued</p>
            <p class="mr-rg continued">continued</p>
            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
              <tr class="table-th-bc">
                <td class="tl-cn">Items</td>
@@ -1036,7 +1356,7 @@
                    @change="setBookQuestion"></textarea>
                </td>
                <td style="width: 90%;">
                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea "
                    @change="setBookQuestion"></textarea>
                </td>
              </tr>
@@ -1046,7 +1366,7 @@
                    @change="setBookQuestion"></textarea>
                </td>
                <td style="width: 90%;">
                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea textarea-box"
                  <textarea v-model="questionData.table.seven" class="w100 table-tr-bc b0 table-textarea "
                    @change="setBookQuestion"></textarea>
                </td>
              </tr>
@@ -1054,7 +1374,7 @@
            <h2 id="b007"><img class="img-0" alt="" src="image/dy2-le3.jpg" /></h2>
            <h3 id="c017"><span class="bjh3">Listening</span></h3>
            <p><b>Ⅰ.Listen to the introduction to Cultural Diversity Day and fill in the following blanks.</b></p>
            <audio :src="resource.listenOne" controls class="audio" @play="audioPlay"></audio>
            <audio :src="resource.listenTwo" controls class="audio" @play="audioPlay"></audio>
            <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
              <tr class="table-th-bc">
                <td class="tl-cn" colspan="2">Cultural Diversity Day</td>
@@ -1074,6 +1394,7 @@
              </tr>
            </table>
            <p><b>Ⅱ.Listen to the conversation and mark the activities when mentioned.</b></p>
            <audio :src="resource.listenThree" controls class="audio" @play="audioPlay"></audio>
            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />
              Lecture on Ancient Chinese History</p>
            <p><input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" />Calligraphy &amp;
@@ -1254,7 +1575,7 @@
                </td>
              </tr>
              <tr class="table-tr-bc">
                <td >
                <td>
                  <textarea v-model="questionData.table.five" class="w100 table-tr-bc b0 table-textarea textarea-box"
                    @change="setBookQuestion"></textarea>
                </td>
@@ -1726,6 +2047,11 @@
        listenOne: "",
        readingOne: "",
        readingTwo: "",
        warmOne: "",
        readingThree: "",
        readingFour: "",
        listenTwo: "",
        listenThree: "",
      },
      dropDownList: [
        "online shopping",
@@ -1847,13 +2173,28 @@
    },
    async getPath() {
      this.resource.listenOne = await getResourcePath(
        "422139A2EF66EA888C5ED1D550AE23E0"
        "D96D6F8082786B037A2B1842860BC0C4 "
      );
      this.resource.readingOne = await getResourcePath(
        "3F442B682D84C8AB06C800B29D734920"
        "E51F6E052B08F00B19819E4D5504219F"
      );
      this.resource.readingTwo = await getResourcePath(
        "E8719EC88026BCFB11D292AA999F6D3D"
        "1456A70576E21C0E8C1497916A6E8D57"
      );
      this.resource.warmOne = await getResourcePath(
        "7301D06AC2208C93FE05A9952C8858E7"
      );
      this.resource.readingThree = await getResourcePath(
        "85198824B16CA185AFF073275FC394BE"
      );
      this.resource.readingFour = await getResourcePath(
        "148CD1F30A60DAF665B4E4678755D767"
      );
      this.resource.listenTwo = await getResourcePath(
        "7CE34F30D8440BAE15D4A76479834434"
      );
      this.resource.listenThree = await getResourcePath(
        "D5080B2EEBFE29233A6DB282B1A28D6C"
      );
    },
    showAnswer(type) {

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

@@ -183,8 +183,8 @@
    }, 500);

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(4,59);
     setTimeout(() => {
       this.gotoPage(3,37);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -212,7 +212,7 @@
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    //  }, 50);
      }, 50);
  },
  methods: {
    // setZoom1() {

 src/books/artAndDrama/assets/main.less

@@ -424,7 +424,13 @@
  //   font-weight: bold;
  //   font-size: 18px;
  // }
  
  .t-l{
    text-align: left;
  }
  textarea{
    font-family: "STkaiti";
    font-size: 19px;
  }
  input{
    font-family: "STkaiti";
    font-size: 19px;

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

@@ -4,8 +4,7 @@
      <div v-if="showPageList.indexOf(4) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"
            ></audio>
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -48,7 +47,8 @@
            ></audio> -->
          </h1>
          <!-- 连线题 -->
          <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color" :bordercolor="'#fff'"></matching>
          <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color"
            :bordercolor="'#fff'"></matching>
          <p class="text">小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>
        </div>
        <p><br /></p>
@@ -64,13 +64,15 @@
        <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
        <div class="bodystyle">
          <h3 class="lefth3" id="c001"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <choice class="choice" :questions="questions" :primaryColor="accentColor" hoverBackgroundColor="#F58200" hoverColor="white"></choice>
          <choice class="choice" :questions="questions" :primaryColor="accentColor" hoverBackgroundColor="#F58200"
            hoverColor="white"></choice>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-2蚂蚁举大树.gif" />
          </p><p class="center text">
          </p>
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
              controlslist="nodownload" class="w100 video " 
              controlslist="nodownload" class="w100 video "
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          </p>
          <p class="center videoname">
@@ -103,8 +105,7 @@
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"
              ></audio></h1>
          <h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio></h1>
          <div class="bj3">
            <p class="center">
              <span class="hs">春<a id="w1"><sup>1</sup></a>（节选）</span>
@@ -153,8 +154,7 @@
          <h1 class="lefth3 openImgBox" id="c005">
            <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
          </h1>
          <h1><audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"
             ></audio></h1>
          <h1><audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"></audio></h1>
          <div class="bj3">
            <p class="center">
              <span class="hs">春<a id="w1"></a><sup>1</sup>（节选）</span>
@@ -200,12 +200,13 @@
            <span
              class="hs1">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
          </p>
          <p class="text">正义队长：“
            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60"
              @change="setBookQuestion" />。”
          <p class="text t-l">正义队长：
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
          </p>
          <p class="text">黑暗队长：“ <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-60"
              @change="setBookQuestion" />。”
          <p class="text t-l">黑暗队长：
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
@@ -229,8 +230,7 @@
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1>
            <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"
             ></audio>
            <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
          </h1>

          <div class="bj3">
@@ -251,12 +251,12 @@
            <span class="hs1">◇</span>假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
          </p>
          <p class="text">
            我是蚂蚁 <input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" style=" width: 10%;"
            我是蚂蚁 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" style=" width: 13%;"
              @change="setBookQuestion" />（名字），今天是
            <input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" style=" width: 10%;"
              @change="setBookQuestion" />（天气），我的奶酪特别 <input v-model="questionData.warnUp.five"
              class="input-bottom-border fz-18" style=" width: 10%;" @change="setBookQuestion" />（轻/重），我感觉好 <input
              v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
            <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" style=" width: 13%;"
              @change="setBookQuestion" />（天气），我的奶酪特别 <input v-model="questionData.warnUp.three"
              class="input-bottom-border fz-18" style=" width: 13%;" @change="setBookQuestion" />（轻/重），我感觉好 <input
              v-model="questionData.warnUp.four" class="input-bottom-border fz-18" style=" width: 13%;"
              @change="setBookQuestion" />（身体感觉）啊！
          </p>
          <hr style="margin-left: 9%; width: 20%;" />
@@ -307,25 +307,25 @@
          </h3>
          <p class="text ends">
            <span><span class="hs1">◇</span>放大缩小</span>
            <span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"
           ></audio> </span>
          </p> 
            <span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </span>
          </p>
          <p class="text">
            请你交替“放大”和“缩小”五官。在“放大”时，想象五官要飞到外太空；在“缩小”时，想象五官全部缩小到了鼻尖上。
          </p>

          <p class="text ends">
            <span><span class="hs1">◇</span>提升苹果肌</span>
            <span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"
              ></audio> </span>
            <span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </span>
          </p>
          <p class="text">
            想象你在一个陌生的地方，谁都不认识，突然遇见了好朋友，你很高兴，上前和他/她打招呼。做一做你此时的表情吧。
          </p>
          <p class="text ends">
            <span><span class="hs1">◇</span>微笑说“ang”</span>
            <span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload" class="audio"
             ></audio></span>
            <span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
          </p>
          <p class="text">
            请你试一试在提升苹果肌的基础上，发出“ang”的音。声音要尽可能拉长、保持稳定，并向远送。
@@ -333,9 +333,9 @@

          <p class="text ends">
            <span style="text-wrap: nowrap"><span class="hs1">◇</span>向远山喊“阿毛”</span>
            <span style="margin-left: -4%;"><audio :src="auidoPathNine" controls controlslist="noplaybackrate nodownload" class="audio"
              ></audio></span>
            
            <span style="margin-left: -4%;"><audio :src="auidoPathNine" controls
                controlslist="noplaybackrate nodownload" class="audio"></audio></span>

          </p>
          <p class="text">
            想象自己站在一座高山上，好朋友“阿毛”站在对面的高山上，你要如何喊他呢？
@@ -365,7 +365,7 @@
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
              controlslist="nodownload" class="w100 video" 
              controlslist="nodownload" class="w100 video"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          </p>
          <p class="center videoname">
@@ -417,15 +417,15 @@
      videoPathOne: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree:"",
      auidoPathThree: "",
      auidoPathFour: "",
      auidoPathFive: "",
      auidoPathSex: "",
      auidoPathSeven: "",
      auidoPathEight: "",
      auidoPathNine: "",
      accentColor:"",
      color:"#fff",
      accentColor: "",
      color: "#fff",
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
@@ -549,7 +549,7 @@
      questions: [
        {
          analysisCon: "undefined",
          answer: ['A','B'],
          answer: ['A', 'B'],
          difficulty: 0,
          id: 1,
          isCollect: false,
@@ -680,10 +680,6 @@
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven: "",
          enight: "",
        },
        reading: {
          one: "",
@@ -729,7 +725,7 @@
      );
      this.auidoPathSeven = await getResourcePath(
        "27fcd83f77a10ecbf97970863e2653c3"
      ); 
      );
      this.auidoPathEight = await getResourcePath(
        "3d7f52cc80f8ed8994a046b418399116"
      );
@@ -766,7 +762,8 @@
.w70 {
  width: 78%;
}
.choice{

.choice {
  border: 1px solid green;
  border-radius: 10px;
  padding: 0 10px;
@@ -774,6 +771,7 @@
  font-family: "STkaiti";
  font-size: 19px;
}

.fw-400 {
  font-weight: 400 !important;
}

 src/books/artAndDrama/view/components/chapter002.vue

@@ -4,8 +4,7 @@
      <div v-if="showPageList.indexOf(14) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"
           ></audio>
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -46,11 +45,11 @@
          <p class="text"><span class="hs1">◇</span>嗅觉大冒险</p>
          <p class="text">
            你最爱吃的食物是 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 10%" />。当闻到它的味道时，你会做出什么表情呢？
              @change="setBookQuestion" style="width: 13%" />。当闻到它的味道时，你会做出什么表情呢？
          </p>
          <p class="text">
            你最不爱吃的食物是 <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 10%" />。当闻到它的味道时，你会做出什么表情呢？
              @change="setBookQuestion" style="width: 13%" />。当闻到它的味道时，你会做出什么表情呢？
          </p>
          <h3 class="lefth3 openImgBox" id="c012">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
@@ -81,24 +80,19 @@
          <h3 class="lefth3" id="c013"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>我们的世界五彩斑斓。请你填一填，提到这些颜色，你想到了哪些事物？</p>
          <p class="text">黄色：柠檬、<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.four"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">红色：鞭炮、<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.six"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">绿色：叶子、<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.eight"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">黑色：黑板、<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.ten"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">蓝色：大海、<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.twelve"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
              @change="setBookQuestion" style="width: 70%" /></p>
          <p class="text">红色：鞭炮、<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 70%" /></p>
          <p class="text">绿色：叶子、<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 70%" /></p>
          <p class="text">黑色：黑板、<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 70%" /></p>
          <p class="text">蓝色：大海、<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 70%" /></p>
          <h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt=""
              src="../../assets/images/czysj.jpg" /></h3>
          <!-- <p class="text"><span class="hs1">◇</span>阅读下面的文字，为小蚂蚁选择一种性格吧。</p> -->
          <drag  :question="dragQuestion" :page="16" class="drag-text"/> 
          <drag :question="dragQuestion" :page="16" class="drag-text" />
          <!-- <choice class="text" :questions="questions"  :primaryColor="accentColor"  hoverBackgroundColor="green" hoverColor="white"></choice> -->
          <p class="center  openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
        </div>
@@ -119,12 +113,17 @@
          <h2 id="b008" class="problem">第三课　闻声识人</h2>
          <h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
          <p class="text">常言道：良言一句三冬暖，恶语伤人六月寒。语言在人与人的交往中起着重要的作用，有着无穷的力量。</p>
          <p class="text"><span class="hs1">◇</span>如果朋友心情不好，你该怎么安慰他/她呢？</p>
          <p class="text">“<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 80%" />。”</p>
          <p class="text"><span class="hs1">◇</span>如果你邀请好朋友来家里做客，你该说什么来欢迎他/她呢？</p>
          <p class="text">“<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 80%" />。”</p>
          <p class="text t-l" ><span class="hs1">◇</span>如果朋友心情不好，你该怎么安慰他/她呢？
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
          </p>

          <p class="text t-l"><span class="hs1">◇</span>如果你邀请好朋友来家里做客，你该说什么来欢迎他/她呢？
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
          </textarea>
          </p>

          <h3 class="lefth3" id="c016" style="margin-top: 7%;"><img class="img-gn1" alt=""
              src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>请根据提示读出句子，注意声音和语气的变化。</p>
@@ -197,22 +196,22 @@
          <h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
          <p class="text ends">
            <span><span class="hs1">◇</span>吹纸练习</span>
            <span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
               ></audio></span>
            <span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
          </p>
          <p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" />
          </p>
          <p class="text">找一张纸巾，将它按在墙上。移开双手，努力用气息将纸“钉”在墙面上，不要让它向下滑落。</p>
          <p class="text ends">
            <span> <span class="hs1">◇</span>吹笔练习</span>
            <span> <audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"
                ></audio></span>
            <span> <audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
          </p>
          <p class="text">将一支笔立于桌面，看看你能不能用一口气将它吹倒。</p>
          <p class="text ends">
            <span><span class="hs1">◇</span>吹袋子练习</span>
            <span> <audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"
                ></audio></span>
            <span> <audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
          </p>
          <p class="text">将一只塑料袋抛至空中，和你的小伙伴一起轮流吹气，避免塑料袋落地。</p>
        </div>
@@ -232,8 +231,8 @@
        <div class="bodystyle" style="margin-top: 3%;">
          <p class="text ends">
            <span> <span class="hs1">◇</span>吹乒乓球练习</span>
            <span> <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"
               ></audio></span>
            <span> <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
          </p>
          <p class="text">用气息将桌面上的乒乓球从“起点”运送至“终点”，运送过程中避免乒乓球触碰障碍物。</p>
          <h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt=""
@@ -310,13 +309,6 @@
          five: "",
          six: "",
          seven: "",
          eight: "",
          nine: "",
          ten: "",
          eleven: "",
          twelve: "",
          thirteen: "",
          fourteen: "",
        },
        reading: {
          one: "",

 src/books/artAndDrama/view/components/chapter003.vue

@@ -1,513 +1,767 @@
<template>
    <div class="chapter" num="4">
        <div class="page-box" page="22">
            <div v-if="showPageList.indexOf(22) > -1">
                <h1 id="a004">
                    <!-- 这里的动图有问题，没有背景图片 -->
                    <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
                    <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
                </h1>
                <div class="bodystyle">
                    <div class="bk">
                        <div class="bj1">
                            <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
                        </div>
                        <p class="" style="margin:  8% 5% 5% 7%">
                            每个人的心中都有一个舞台，演绎着生活的酸甜苦辣，记录着成长的点点滴滴。《一块奶酪》中的每只小蚂蚁也有很多心里话要表达，让我们一起演绎出来吧！</p>
                    </div>
                </div>
                <p><br /></p>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">19</div>
                </div>
  <div class="chapter" num="4">
    <div class="page-box" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
        <h1 id="a004">
          <!-- 这里的动图有问题，没有背景图片 -->
          <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
          <audio
            :src="audioPathOne"
            controls
            controlslist="noplaybackrate nodownload"
            class="audio"
          ></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
            <div class="bj1">
              <p class="left">
                <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
              </p>
            </div>
            <p class="" style="margin: 8% 5% 5% 7%">
              每个人的心中都有一个舞台，演绎着生活的酸甜苦辣，记录着成长的点点滴滴。《一块奶酪》中的每只小蚂蚁也有很多心里话要表达，让我们一起演绎出来吧！
            </p>
          </div>
        </div>
        <div class="page-box" page="23">
            <div v-if="showPageList.indexOf(23) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%;" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%">
                    <h2 id="b011" class="problem">第一课　吹响劳动的集结号</h2>
                    <h3 class="lefth3" id="c021"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text">寒来暑往，秋收冬藏。一年四季，劳碌奔忙。</p>
                    <p class="text">团结一心，吹响号角。幸福生活，劳动创造。</p>
                    <p class="text"><span class="hs1">◇</span>说一说你会做哪些家务？</p>
                    <p class="text"><span class="hs1">◇</span>和小伙伴讨论劳动在生活中的作用。</p>
                    <p class="text"><span class="hs1">◇</span>表演一种家务劳动，请小伙伴猜一猜。</p>
                    <h3 class="lefth3" id="c022" style="margin-top: 7%"><img class="img-gn1" alt=""
                            src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>邀请小伙伴分角色朗诵附录中的剧本选段1～2，重读加点文字。</p>
                    <p class="block3" style="margin: 3% 0%;"><span class="hs">剧本:　一块奶酪</span></p>
                    <!-- <p class="center1 text" style="font-size: 25px; margin: 3% 0;"><span class="hs">一块奶酪</span></p> -->
                    <!-- 此处为附录资源处 -->
                    <div class="Options text">
                        <span class="folder" v-for="(segment, index) in segments" :key="index"
                            @click="showContent(index)"><img src="../../assets/images/icon/folder.svg" alt="">选段{{
                                segment }}</span>
                    </div>
                    <div v-if="activeIndex !== null" class="content-wrapper text" v-html="activeContent"></div>
                    <p class="center text"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">20</div>
                </div>
            </div>
        <p><br /></p>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img
            class="page-footer-image"
            src="../../assets/images/ym.jpg"
            alt="Page Image"
          />
          <div class="page-footer-number-right">19</div>
        </div>
        <div class="page-box" page="24">
            <div v-if="showPageList.indexOf(24) > -1">
                <h1>
                    <img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b012" class="problem">第二课　意外发生了！</h2>
                    <h3 class="lefth3" id="c023"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>当上半场比赛失利，中场休息时，你会怎么做？当别人夸赞你的时候，你会怎么做？请你和朋友一起演一演吧。</p>
                    <h3 class="lefth3" id="c024" style="margin-top: 7%;"><img class="img-gn1" alt=""
                            src="../../assets/images/czysj.jpg" /></h3>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-2.gif" /></p>
                    <p class="text"><span class="hs1">◇</span>请把蚂蚁队长的台词和他的内心独白连起来吧！</p>
                    <!-- 连线题 -->
                    <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color" :bordercolor="'#fff'">
                    </matching>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">21</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="25">
            <div v-if="showPageList.indexOf(25) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b013" class="problem">第三课　我该怎么办？</h2>
                    <h3 class="lefth3" id="c025"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>在《一块奶酪》的故事中，蚂蚁队长也起过贪心，但他最终成功克服了贪心，你认为他是怎么做到的呢？</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18 "
                            @change="setBookQuestion" style="width: 90%" /></p>
                    <h3 class="lefth3" id="c026" style="margin-top: 7%;"><img class="img-gn1" alt=""
                            src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>阅读附录中的剧本选段5，为自己的表演设计动作吧！</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">22</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="26">
            <div v-if="showPageList.indexOf(26) > -1">
                <h1>
                    <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b014" class="problem">第四课　皆大欢喜</h2>
                    <h3 class="lefth3" id="c027"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>请按照事件六要素的结构给大家分享一件快乐的事吧！</p>
                    <p class="text2">时间：<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text2">地点：<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text2">人物：<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text2">起因：<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text2">经过：<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text2">结果：<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text" style="margin-top: 7%;"><span class="hs1">◇</span>你有烦恼吗？说一说是什么，你是怎么处理它的？</p>
                    <!-- 输入框 -->
                    <p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 85%" /></p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">23</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="27">
            <div v-if="showPageList.indexOf(27) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%;">
                    <h3 class="lefth3" id="c028"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>运用重音、内心独白和动作设计等表现方式，将《一块奶酪》的故事表演出来吧！（剧本见附录）</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">24</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="28">
            <div v-if="showPageList.indexOf(28) > -1">
                <h1>
                    <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b015" class="problem">单元活动任务</h2>
                    <h3 class="lefth3" id="c029"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>喘气练习</span>
                        <span> <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
                    <p class="text">平视前方，肩膀放松，双手自然下垂或叉腰，双脚分开，与肩同宽。模仿小狗喘气，感受腹部的“呼吸”状态，想象自己的腹部是一个气球，在吸气时腹部向外扩张，吐气时腹部向内收缩。
                    </p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>“嘶”声练习</span>
                        <span> <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
                    <p class="text">在“喘气练习”的基础上，发出“嘶”音，每组4短1长。</p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>“嘟”音练习</span>
                        <span> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
                    <p class="text">平视前方，肩膀放松，双手自然下垂，双脚分开，与肩同宽。放松双唇，深吸气，吹出气流带动嘴唇抖动，发出“嘟”的声音，声音越长越好。</p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>“我们赞美长江”气声练</span>
                        <span> <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio></span>
                    </p>
                    <p class="text">平视前方，肩膀放松，双手自然下垂，双脚分开，与肩同宽。以说悄悄话的感觉，说出“我们赞美长江”，并逐步增加气声的力度，找到在舞台上说悄悄话的感觉。</p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">25</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="29">
            <div v-if="showPageList.indexOf(29) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%">
                    <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
                    <p class="text"><span
                            class="hs1">◇</span>劳动最光荣！请为家中长辈做一件力所能及的事情，用实际行动表达你的爱意！体验过程中要记住每一个动作的细节，再尝试以无实物表演的方式进行展示。
                    </p>
                    <p class="center text">
                        <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                            x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                            controlslist="nodownload" class="w100 video"
                            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
                    </p>
                    <p class="center videoname">
                        <span>视频：心有多大，舞台就有多大 </span>
                        <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
                            placement="top-start">
                            <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt=""
                                class="collect-btn" @click="handleCollect('video')" />
                        </el-tooltip>
                    </p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">26</div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="23">
      <div v-if="showPageList.indexOf(23) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%"
          />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b011" class="problem">第一课　吹响劳动的集结号</h2>
          <h3 class="lefth3" id="c021">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">寒来暑往，秋收冬藏。一年四季，劳碌奔忙。</p>
          <p class="text">团结一心，吹响号角。幸福生活，劳动创造。</p>
          <p class="text"><span class="hs1">◇</span>说一说你会做哪些家务？</p>
          <p class="text">
            <span class="hs1">◇</span>和小伙伴讨论劳动在生活中的作用。
          </p>
          <p class="text">
            <span class="hs1">◇</span>表演一种家务劳动，请小伙伴猜一猜。
          </p>
          <h3 class="lefth3" id="c022" style="margin-top: 7%">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span
            >邀请小伙伴分角色朗诵附录中的剧本选段1～2，重读加点文字。
          </p>
          <p class="block3" style="margin: 3% 0%">
            <span class="hs">剧本:　一块奶酪</span>
          </p>
          <!-- <p class="center1 text" style="font-size: 25px; margin: 3% 0;"><span class="hs">一块奶酪</span></p> -->
          <!-- 此处为附录资源处 -->
          <div class="Options text">
            <span
              class="folder"
              v-for="(segment, index) in segments"
              :key="index"
              @click="showContent(index)"
              ><img src="../../assets/images/icon/folder.svg" alt="" />选段{{
                segment
              }}</span
            >
          </div>
          <div
            v-if="activeIndex !== null"
            class="content-wrapper text"
            v-html="activeContent"
          ></div>
          <p class="center text">
            <img class="img-e" alt="" src="../../assets/images/0024-1.jpg" />
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img
            class="page-footer-image"
            src="../../assets/images/ym.jpg"
            alt="Page Image"
          />
          <div class="page-footer-number-left">20</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="24">
      <div v-if="showPageList.indexOf(24) > -1">
        <h1>
          <img
            src="../../assets/images/unit3-header-img.png"
            alt=""
            style="height: auto; width: 100%"
          />
        </h1>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b012" class="problem">第二课　意外发生了！</h2>
          <h3 class="lefth3" id="c023">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span
            >当上半场比赛失利，中场休息时，你会怎么做？当别人夸赞你的时候，你会怎么做？请你和朋友一起演一演吧。
          </p>
          <h3 class="lefth3" id="c024" style="margin-top: 7%">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/3-2.gif" />
          </p>
          <p class="text">
            <span class="hs1">◇</span>请把蚂蚁队长的台词和他的内心独白连起来吧！
          </p>
          <!-- 连线题 -->
          <matching
            :rawData="rawData"
            :question="question"
            class="macthing"
            :primary-color="color"
            :bordercolor="'#fff'"
          >
          </matching>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img
            class="page-footer-image"
            src="../../assets/images/ym.jpg"
            alt="Page Image"
          />
          <div class="page-footer-number-right">21</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="25">
      <div v-if="showPageList.indexOf(25) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b013" class="problem">第三课　我该怎么办？</h2>
          <h3 class="lefth3" id="c025">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text t-l">
            <span class="hs1">◇</span
            >在《一块奶酪》的故事中，蚂蚁队长也起过贪心，但他最终成功克服了贪心，你认为他是怎么做到的呢？
            <textarea
              v-model="questionData.reading.one"
              placeholder="请输入内容"
              rows="6"
              style="margin-left: 40px; width: 92%"
              class="fz-16 fm-son"
              @change="setBookQuestion"
            >
            </textarea>
          </p>
          <h3 class="lefth3" id="c026" style="margin-top: 7%">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span
            >阅读附录中的剧本选段5，为自己的表演设计动作吧！
          </p>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/3-3.gif" />
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img
            class="page-footer-image"
            src="../../assets/images/ym.jpg"
            alt="Page Image"
          />
          <div class="page-footer-number-left">22</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="26">
      <div v-if="showPageList.indexOf(26) > -1">
        <h1>
          <img
            src="../../assets/images/unit3-header-img.png"
            alt=""
            style="width: 100%; height: auto"
          />
        </h1>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b014" class="problem">第四课　皆大欢喜</h2>
          <h3 class="lefth3" id="c027">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span
            >请按照事件六要素的结构给大家分享一件快乐的事吧！
          </p>
          <p class="text2">
            时间：<input
              v-model="questionData.warnUp.one"
              class="input-bottom-border fz-18"
              @change="setBookQuestion"
              style="width: 70%"
            />
          </p>
          <p class="text2">
            地点：<input
              v-model="questionData.warnUp.two"
              class="input-bottom-border fz-18"
              @change="setBookQuestion"
              style="width: 70%"
            />
          </p>
          <p class="text2">
            人物：<input
              v-model="questionData.warnUp.three"
              class="input-bottom-border fz-18"
              @change="setBookQuestion"
              style="width: 70%"
            />
          </p>

          <p class="text2 t-l">
            起因：
            <textarea
              v-model="questionData.reading.two"
              placeholder="请输入内容"
              rows="6"
              style="margin-left: 40px; width: 92%"
              class="fz-16 fm-son"
              @change="setBookQuestion"
            >
            </textarea>
          </p>
          <p class="text2 t-l">
            经过：
            <textarea
              v-model="questionData.reading.three"
              placeholder="请输入内容"
              rows="6"
              style="margin-left: 40px; width: 92%"
              class="fz-16 fm-son"
              @change="setBookQuestion"
            >
            </textarea>
          </p>
          <p class="text2 t-l">
            结果：
            <textarea
              v-model="questionData.reading.four"
              placeholder="请输入内容"
              rows="6"
              style="margin-left: 40px; width: 92%"
              class="fz-16 fm-son"
              @change="setBookQuestion"
            >
            </textarea>
          </p>
          <p class="text t-l" style="margin-top: 7%">
            <span class="hs1">◇</span
            >你有烦恼吗？说一说是什么，你是怎么处理它的？
            <textarea
              v-model="questionData.reading.five"
              placeholder="请输入内容"
              rows="6"
              style="margin-left: 40px; width: 92%"
              class="fz-16 fm-son"
              @change="setBookQuestion"
            >
            </textarea>
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img
            class="page-footer-image"
            src="../../assets/images/ym.jpg"
            alt="Page Image"
          />
          <div class="page-footer-number-right">23</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="27">
      <div v-if="showPageList.indexOf(27) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle" style="margin-top: 3%">
          <h3 class="lefth3" id="c028">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span
            >运用重音、内心独白和动作设计等表现方式，将《一块奶酪》的故事表演出来吧！（剧本见附录）
          </p>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/3-3.gif" />
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img
            class="page-footer-image"
            src="../../assets/images/ym.jpg"
            alt="Page Image"
          />
          <div class="page-footer-number-left">24</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="28">
      <div v-if="showPageList.indexOf(28) > -1">
        <h1>
          <img
            src="../../assets/images/unit3-header-img.png"
            alt=""
            style="width: 100%; height: auto"
          />
        </h1>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b015" class="problem">单元活动任务</h2>
          <h3 class="lefth3" id="c029">
            <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
          </h3>
          <p class="text ends">
            <span><span class="hs1">◇</span>喘气练习</span>
            <span>
              <audio
                :src="audioPathTwo"
                controls
                controlslist="noplaybackrate nodownload"
                class="audio"
              ></audio>
            </span>
          </p>
          <p class="text">
            平视前方，肩膀放松，双手自然下垂或叉腰，双脚分开，与肩同宽。模仿小狗喘气，感受腹部的“呼吸”状态，想象自己的腹部是一个气球，在吸气时腹部向外扩张，吐气时腹部向内收缩。
          </p>
          <p class="text ends">
            <span><span class="hs1">◇</span>“嘶”声练习</span>
            <span>
              <audio
                :src="audioPathThree"
                controls
                controlslist="noplaybackrate nodownload"
                class="audio"
              ></audio>
            </span>
          </p>
          <p class="text">在“喘气练习”的基础上，发出“嘶”音，每组4短1长。</p>
          <p class="text ends">
            <span><span class="hs1">◇</span>“嘟”音练习</span>
            <span>
              <audio
                :src="audioPathFour"
                controls
                controlslist="noplaybackrate nodownload"
                class="audio"
              ></audio>
            </span>
          </p>
          <p class="text">
            平视前方，肩膀放松，双手自然下垂，双脚分开，与肩同宽。放松双唇，深吸气，吹出气流带动嘴唇抖动，发出“嘟”的声音，声音越长越好。
          </p>
          <p class="text" style="text-align: left">
            <span><span class="hs1">◇</span>“我们赞美长江”气声练</span>
            <span class="text">
              <audio
                :src="audioPathFive"
                controls
                controlslist="noplaybackrate nodownload"
                class="audio"
              ></audio
            ></span>
          </p>
          <p class="text">
            平视前方，肩膀放松，双手自然下垂，双脚分开，与肩同宽。以说悄悄话的感觉，说出“我们赞美长江”，并逐步增加气声的力度，找到在舞台上说悄悄话的感觉。
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img
            class="page-footer-image"
            src="../../assets/images/ym.jpg"
            alt="Page Image"
          />
          <div class="page-footer-number-right">25</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="29">
      <div v-if="showPageList.indexOf(29) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle" style="margin-top: 3%">
          <h3 class="lefth3" id="c030">
            <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span
            >劳动最光荣！请为家中长辈做一件力所能及的事情，用实际行动表达你的爱意！体验过程中要记住每一个动作的细节，再尝试以无实物表演的方式进行展示。
          </p>
          <p class="center text">
            <video
              :src="videoPathOne"
              webkit-playsinline="true"
              x-webkit-airplay="true"
              playsinline="true"
              x5-video-orientation="h5"
              x5-video-player-fullscreen="true"
              x5-playsinline=""
              controls
              controlslist="nodownload"
              class="w100 video"
              style="
                margin-top: 40px;
                border-radius: 10px;
                border: 2px solid green;
              "
            ></video>
          </p>
          <p class="center videoname">
            <span>视频：心有多大，舞台就有多大 </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            </el-tooltip>
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img
            class="page-footer-image"
            src="../../assets/images/ym.jpg"
            alt="Page Image"
          />
          <div class="page-footer-number-left">26</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
    name: "chapterThree",
    components: { matching },
    props: {
        showPageList: {
            type: Array,
        },
        primaryColor: {
            type: String,
            default: "red",
        }
  name: "chapterThree",
  components: { matching },
  props: {
    showPageList: {
      type: Array,
    },
    mounted() {
        this.getVidoePath();
        const bookQuestion = localStorage.getItem("artAndDrama-book-question-three");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }
    primaryColor: {
      type: String,
      default: "red",
    },
    data() {
        return {
            collectImg: require("../../assets/images/icon/heart.png"),
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            videoPathOne: "",
            audioPathOne: "",
            audioPathTwo: "",
            audioPathThree: "",
            audioPathFour: "",
            audioPathFive: "",
            segments: [1, 2, 3, 4, 5],
            color:"#fff",
            activeIndex: null, // 用于追踪当前活动的按钮索引  
            contents: [ // 对应选段的内容，这里用字符串作为示例  
                ' <p class=" mar-l-r-4">【起光，蚂蚁队长上场】</p><p class=" mar-l-r-4">咻咻—</p><p class=" mar-l-r-4">【蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形】</p><p class=" mar-l-r-4">蚂蚁队长：<span class="un1">我宣布</span>！今天搬运粮食，只许<span class="un1">出力</span>，不许<span class="un1">偷嘴</span>。谁偷嘴就<span class="un1">罚谁</span>！</p><p class=" mar-l-r-4">蚂蚁们：收到！</p><p class=" mar-l-r-4">小蚂蚁：（嘀咕）要是偷嘴的<span class="un1">是您呢</span>？</p><p class=" mar-l-r-4">蚂蚁队长：（义正词严）<span class="un1">照样受罚</span>！</p><p class=" mar-l-r-4">【蚂蚁们鼓掌】</p><p class=" mar-l-r-4">蚂蚁队长：稍息！立正！寻找食物！出发！</p><p class=" mar-l-r-4">【蚂蚁们争先恐后四处寻食】</p><p class=" mar-l-r-4">大头蚂蚁：（突然）<span class="un1">报告</span>！</p><p class=" mar-l-r-4">蚂蚁队长：怎么了？</p><p class=" mar-l-r-4">大头蚂蚁：（指着）这里有一块大奶酪！</p><p class=" mar-l-r-4">【一块奶酪（演员）趴在角落处】</p><p class=" mar-l-r-4">蚂蚁队长：（兴奋）哦？</p><p class=" mar-l-r-4">【蚂蚁队长被奶酪的香味迷住，转起了圈圈】</p><p class=" mar-l-r-4">【音乐起，蚂蚁队长和奶酪人跳起了舞蹈】</p><p class=" mar-l-r-4">蚂蚁队长：（陶醉）奶酪……奶酪……填饱肚子不再呱呱叫。奶酪……奶酪……吃下一口一声美妙……</p><p class=" mar-l-r-4">【蚂蚁们停下手里的搬运工作，看着队长】</p><p class=" mar-l-r-4">大头蚂蚁：（大喊）队长！</p><p class=" mar-l-r-4">【蚂蚁队长被吓醒，奶酪人趴在地上】</p><p class=" mar-l-r-4">小眼镜蚂蚁：队长！队长！<span class="un1">快点搬运吧</span>！这么<span class="un1">热</span>的天，再不出发，奶酪就<span class="un1">化</span>啦！</p><p class=" mar-l-r-4">蚂蚁队长：说得对！我现在就<span class="un1">搬</span>！</p><p class=" mar-l-r-4">【蚂蚁队长走到奶酪面前使劲抬】</p><p class=" mar-l-r-4">蚂蚁队长：哎哟，哎哟，哎哟哟。</p><p class=" mar-l-r-4">【蚂蚁队长一次也没抬起来】</p>',
                ' <p class=" mar-l-r-4">蚂蚁队长：（起身）<span class="un1">我决定了</span>！大家<span class="un1">一起搬</span>！这块奶酪以我为首，搬运的路上<span class="un1">不许偷吃</span>！</p><p class=" mar-l-r-4">蚂蚁们：<span class="un1">是</span>！</p><p class=" mar-l-r-4">【蚂蚁们迅速围成一圈，蚂蚁队长站在奶酪最前面】</p><p class=" mar-l-r-4">蚂蚁队长：听我口令！3！2！1！抬！</p>                  <p class=" mar-l-r-4">【奶酪被抬起】</p><p class=" mar-l-r-4">大头蚂蚁：哇！这块奶酪<span class="un1">好香噢</span>！</p><p class=" mar-l-r-4">小眼镜蚂蚁：我想<span class="un1">咬</span>一口！</p><p class=" mar-l-r-4">小蚂蚁：如果能<span class="un1">舔一下</span>就好了！</p><p class=" mar-l-r-4">蚂蚁小妹：我的口水流出来了！</p><p class=" mar-l-r-4">蚂蚁队长：不许瞎想！不许偷吃！<span class="un1">出发</span>！</p><p class=" mar-l-r-4">【音乐起，蚂蚁们抬着奶酪向前走着】</p><p class=" mar-l-r-4">蚂蚁们：奶酪！奶酪！我们的奶酪！奶酪！奶酪！我们一起分享。</p><p class=" mar-l-r-4">【蚂蚁们陶醉中】</p>',
                ' <p class=" mar-l-r-4">嘭—</p><p class=" mar-l-r-4">【蚂蚁们用劲过猛，奶酪的一个角掉了】</p><p class=" mar-l-r-4">蚂蚁小妹：<span class="un1">啊</span>！队长！奶酪的角<span class="un1">掉了</span>！</p> <p class=" mar-l-r-4">【大家看到掉在地上的奶酪】</p><p class=" mar-l-r-4">蚂蚁们：哇哦！</p><p class=" mar-l-r-4">蚂蚁队长：等等！</p><p class=" mar-l-r-4">【舞台变光，演员动作定格】</p><p class=" mar-l-r-4">蚂蚁队长：掉了<span class="un1">一个角</span>，这该<span class="un1">怎么办</span>！<span class="un1">丢掉</span>，实在<span class="un1">太可惜</span>！<span class="un1">趁机吃掉</span>，又要犯不许偷嘴的禁令。怎么办呢？有个办法！我要是<span class="un1">偷嘴</span>谁也<span class="un1">看不见</span>，<span class="un1">这样</span>不就行啦！大家听好啦！</p>',
                ' <p class=" mar-l-r-4">【舞台变光，演员立正站好】</p><p class=" mar-l-r-4">蚂蚁队长：休息一会儿！</p><p class=" mar-l-r-4">蚂蚁小妹：<span class="un1">为什么</span>要休息呀？</p><p class=" mar-l-r-4">小眼镜蚂蚁：队长！这块掉在地上的奶酪<span class="un1">怎么办呀</span>？</p><p class=" mar-l-r-4">大头蚂蚁：我们要不把它<span class="un1">分了吧</span>！</p><p class=" mar-l-r-4">蚂蚁队长：听我说！<span class="un1">休息</span>！<span class="un1">立刻休息</span>！大家搬运太辛苦啦！分散开，哪里凉快就到哪里休息！</p><p class=" mar-l-r-4">【大家依旧不动】</p><p class=" mar-l-r-4">蚂蚁队长：全体都有！稍息！立正！向后—转！齐步—走！</p><p class=" mar-l-r-4">蚂蚁队长：立—定！原地休息！</p><p class=" mar-l-r-4">【蚂蚁们跟随口令消失在草丛里】</p>',
                ' <p class=" mar-l-r-4">【蚂蚁队长向草丛里望去，确定没有声响】</p><p class=" mar-l-r-4">蚂蚁队长：（小声）嘿嘿嘿，吃掉后就说被风刮走或者就说被老鹰吃掉就好啦！</p><p class=" mar-l-r-4">【蚂蚁队长低下头，嗅了一下奶酪】</p><p class=" mar-l-r-4">蚂蚁队长：味道<span class="un1">真</span>香！</p><p class=" mar-l-r-4">【蚂蚁队长的手伸向奶酪渣，突然，奶酪人站了起来】</p><p class=" mar-l-r-4">【变光】</p><p class=" mar-l-r-4">奶酪人：不许吃！</p><p class=" mar-l-r-4">蚂蚁队长：（吓了一跳）你你你！你怎么<span class="un1">站</span>起来啦！</p><p class=" mar-l-r-4">奶酪人：我<span class="un1">实在</span>看不下去啦！</p><p class=" mar-l-r-4">蚂蚁队长：（害怕）救命哇！奶酪<span class="un1">活</span>啦！</p><p class=" mar-l-r-4">【蚂蚁队长跑】</p><p class=" mar-l-r-4">奶酪人：<span class="un1">站住</span>！</p><p class=" mar-l-r-4">蚂蚁队长：你要干什么？</p><p class=" mar-l-r-4">奶酪人：<span class="un1">这块</span>，<span class="un1">你不能吃</span>！</p><p class=" mar-l-r-4">蚂蚁队长：为什么？</p><p class=" mar-l-r-4">奶酪人：<span class="un1">第一</span>！<span class="un1">你</span>定的规矩，今天搬运中，<span class="un1">不许偷吃</span>！如果<span class="un1">你</span>做不到，你就<span class="un1">不能要求别人</span>！<span class="un1">第二</span>！你是<span class="un1">蚂蚁队长</span>，大家选你当队长，是对你的<span class="un1">信任</span>和<span class="un1">尊重</span>！你却背着大家<span class="un1">偷吃</span>！<span class="un1">第三</span>！<span class="un1">诚实守信</span>是美德，你吃掉奶酪要<span class="un1">撒谎</span>，撒了<span class="un1">一个</span>谎就要用<span class="un1">无数</span>的谎来圆第一个谎，最后<span class="un1">还是</span>会被发现！</p><p class=" mar-l-r-4">蚂蚁队长：（低头）我不吃了，我知道<span class="un1">错了</span>……可是，这掉在地上的奶酪怎么办呢？</p><p class=" mar-l-r-4">奶酪人：（想了想）<span class="un1">有办法</span>！你可以选择大家<span class="un1">一起分</span>，也可以选择给年龄最小的蚂蚁吃！</p><p class=" mar-l-r-4">蚂蚁队长：<span class="un1">好主意</span>！我这就问问大家，谢谢你！</p><p class=" mar-l-r-4">【变光，奶酪慢慢地躺在地上】</p><p class=" mar-l-r-4">蚂蚁队长：（喊）<span class="un1">注意啦</span>！全体都有！稍息！立正！</p><p class=" mar-l-r-4">向后转！齐步走！</p><p class=" mar-l-r-4">【蚂蚁们由四面八方走回来】</p><p class=" mar-l-r-4">蚂蚁队长：大家休息好啦！我有一个<span class="un1">决定</span>！</p><p class=" mar-l-r-4">蚂蚁们：什么决定？</p><p class=" mar-l-r-4">蚂蚁队长：这点儿奶酪渣是刚才弄掉的，丢了可惜，（指向小蚂蚁）你是我们中年龄最小的，<span class="un1">你</span>吃掉它吧！</p><p class=" mar-l-r-4">【蚂蚁们鼓掌】</p><p class=" mar-l-r-4">【音乐起，大家劲儿比刚才更足，抬起奶酪向山洞走去】</p><p class=" mar-l-r-4">【收光】</p>'
            ],
            activeContent: '', // 当前显示的HTML内容 
            chapterData: {
                isCollectImg: false,
                isCollectVideo: false,
                txtOne: "",
                txtTwo: "",
  },
  mounted() {
    this.getVidoePath();
    const bookQuestion = localStorage.getItem(
      "artAndDrama-book-question-three"
    );
    if (bookQuestion) {
      this.questionData = JSON.parse(bookQuestion);
    }
  },
  data() {
    return {
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      videoPathOne: "",
      audioPathOne: "",
      audioPathTwo: "",
      audioPathThree: "",
      audioPathFour: "",
      audioPathFive: "",
      segments: [1, 2, 3, 4, 5],
      color: "#fff",
      activeIndex: null, // 用于追踪当前活动的按钮索引
      contents: [
        // 对应选段的内容，这里用字符串作为示例
        ' <p class=" mar-l-r-4">【起光，蚂蚁队长上场】</p><p class=" mar-l-r-4">咻咻—</p><p class=" mar-l-r-4">【蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形】</p><p class=" mar-l-r-4">蚂蚁队长：<span class="un1">我宣布</span>！今天搬运粮食，只许<span class="un1">出力</span>，不许<span class="un1">偷嘴</span>。谁偷嘴就<span class="un1">罚谁</span>！</p><p class=" mar-l-r-4">蚂蚁们：收到！</p><p class=" mar-l-r-4">小蚂蚁：（嘀咕）要是偷嘴的<span class="un1">是您呢</span>？</p><p class=" mar-l-r-4">蚂蚁队长：（义正词严）<span class="un1">照样受罚</span>！</p><p class=" mar-l-r-4">【蚂蚁们鼓掌】</p><p class=" mar-l-r-4">蚂蚁队长：稍息！立正！寻找食物！出发！</p><p class=" mar-l-r-4">【蚂蚁们争先恐后四处寻食】</p><p class=" mar-l-r-4">大头蚂蚁：（突然）<span class="un1">报告</span>！</p><p class=" mar-l-r-4">蚂蚁队长：怎么了？</p><p class=" mar-l-r-4">大头蚂蚁：（指着）这里有一块大奶酪！</p><p class=" mar-l-r-4">【一块奶酪（演员）趴在角落处】</p><p class=" mar-l-r-4">蚂蚁队长：（兴奋）哦？</p><p class=" mar-l-r-4">【蚂蚁队长被奶酪的香味迷住，转起了圈圈】</p><p class=" mar-l-r-4">【音乐起，蚂蚁队长和奶酪人跳起了舞蹈】</p><p class=" mar-l-r-4">蚂蚁队长：（陶醉）奶酪……奶酪……填饱肚子不再呱呱叫。奶酪……奶酪……吃下一口一声美妙……</p><p class=" mar-l-r-4">【蚂蚁们停下手里的搬运工作，看着队长】</p><p class=" mar-l-r-4">大头蚂蚁：（大喊）队长！</p><p class=" mar-l-r-4">【蚂蚁队长被吓醒，奶酪人趴在地上】</p><p class=" mar-l-r-4">小眼镜蚂蚁：队长！队长！<span class="un1">快点搬运吧</span>！这么<span class="un1">热</span>的天，再不出发，奶酪就<span class="un1">化</span>啦！</p><p class=" mar-l-r-4">蚂蚁队长：说得对！我现在就<span class="un1">搬</span>！</p><p class=" mar-l-r-4">【蚂蚁队长走到奶酪面前使劲抬】</p><p class=" mar-l-r-4">蚂蚁队长：哎哟，哎哟，哎哟哟。</p><p class=" mar-l-r-4">【蚂蚁队长一次也没抬起来】</p>',
        ' <p class=" mar-l-r-4">蚂蚁队长：（起身）<span class="un1">我决定了</span>！大家<span class="un1">一起搬</span>！这块奶酪以我为首，搬运的路上<span class="un1">不许偷吃</span>！</p><p class=" mar-l-r-4">蚂蚁们：<span class="un1">是</span>！</p><p class=" mar-l-r-4">【蚂蚁们迅速围成一圈，蚂蚁队长站在奶酪最前面】</p><p class=" mar-l-r-4">蚂蚁队长：听我口令！3！2！1！抬！</p>                  <p class=" mar-l-r-4">【奶酪被抬起】</p><p class=" mar-l-r-4">大头蚂蚁：哇！这块奶酪<span class="un1">好香噢</span>！</p><p class=" mar-l-r-4">小眼镜蚂蚁：我想<span class="un1">咬</span>一口！</p><p class=" mar-l-r-4">小蚂蚁：如果能<span class="un1">舔一下</span>就好了！</p><p class=" mar-l-r-4">蚂蚁小妹：我的口水流出来了！</p><p class=" mar-l-r-4">蚂蚁队长：不许瞎想！不许偷吃！<span class="un1">出发</span>！</p><p class=" mar-l-r-4">【音乐起，蚂蚁们抬着奶酪向前走着】</p><p class=" mar-l-r-4">蚂蚁们：奶酪！奶酪！我们的奶酪！奶酪！奶酪！我们一起分享。</p><p class=" mar-l-r-4">【蚂蚁们陶醉中】</p>',
        ' <p class=" mar-l-r-4">嘭—</p><p class=" mar-l-r-4">【蚂蚁们用劲过猛，奶酪的一个角掉了】</p><p class=" mar-l-r-4">蚂蚁小妹：<span class="un1">啊</span>！队长！奶酪的角<span class="un1">掉了</span>！</p> <p class=" mar-l-r-4">【大家看到掉在地上的奶酪】</p><p class=" mar-l-r-4">蚂蚁们：哇哦！</p><p class=" mar-l-r-4">蚂蚁队长：等等！</p><p class=" mar-l-r-4">【舞台变光，演员动作定格】</p><p class=" mar-l-r-4">蚂蚁队长：掉了<span class="un1">一个角</span>，这该<span class="un1">怎么办</span>！<span class="un1">丢掉</span>，实在<span class="un1">太可惜</span>！<span class="un1">趁机吃掉</span>，又要犯不许偷嘴的禁令。怎么办呢？有个办法！我要是<span class="un1">偷嘴</span>谁也<span class="un1">看不见</span>，<span class="un1">这样</span>不就行啦！大家听好啦！</p>',
        ' <p class=" mar-l-r-4">【舞台变光，演员立正站好】</p><p class=" mar-l-r-4">蚂蚁队长：休息一会儿！</p><p class=" mar-l-r-4">蚂蚁小妹：<span class="un1">为什么</span>要休息呀？</p><p class=" mar-l-r-4">小眼镜蚂蚁：队长！这块掉在地上的奶酪<span class="un1">怎么办呀</span>？</p><p class=" mar-l-r-4">大头蚂蚁：我们要不把它<span class="un1">分了吧</span>！</p><p class=" mar-l-r-4">蚂蚁队长：听我说！<span class="un1">休息</span>！<span class="un1">立刻休息</span>！大家搬运太辛苦啦！分散开，哪里凉快就到哪里休息！</p><p class=" mar-l-r-4">【大家依旧不动】</p><p class=" mar-l-r-4">蚂蚁队长：全体都有！稍息！立正！向后—转！齐步—走！</p><p class=" mar-l-r-4">蚂蚁队长：立—定！原地休息！</p><p class=" mar-l-r-4">【蚂蚁们跟随口令消失在草丛里】</p>',
        ' <p class=" mar-l-r-4">【蚂蚁队长向草丛里望去，确定没有声响】</p><p class=" mar-l-r-4">蚂蚁队长：（小声）嘿嘿嘿，吃掉后就说被风刮走或者就说被老鹰吃掉就好啦！</p><p class=" mar-l-r-4">【蚂蚁队长低下头，嗅了一下奶酪】</p><p class=" mar-l-r-4">蚂蚁队长：味道<span class="un1">真</span>香！</p><p class=" mar-l-r-4">【蚂蚁队长的手伸向奶酪渣，突然，奶酪人站了起来】</p><p class=" mar-l-r-4">【变光】</p><p class=" mar-l-r-4">奶酪人：不许吃！</p><p class=" mar-l-r-4">蚂蚁队长：（吓了一跳）你你你！你怎么<span class="un1">站</span>起来啦！</p><p class=" mar-l-r-4">奶酪人：我<span class="un1">实在</span>看不下去啦！</p><p class=" mar-l-r-4">蚂蚁队长：（害怕）救命哇！奶酪<span class="un1">活</span>啦！</p><p class=" mar-l-r-4">【蚂蚁队长跑】</p><p class=" mar-l-r-4">奶酪人：<span class="un1">站住</span>！</p><p class=" mar-l-r-4">蚂蚁队长：你要干什么？</p><p class=" mar-l-r-4">奶酪人：<span class="un1">这块</span>，<span class="un1">你不能吃</span>！</p><p class=" mar-l-r-4">蚂蚁队长：为什么？</p><p class=" mar-l-r-4">奶酪人：<span class="un1">第一</span>！<span class="un1">你</span>定的规矩，今天搬运中，<span class="un1">不许偷吃</span>！如果<span class="un1">你</span>做不到，你就<span class="un1">不能要求别人</span>！<span class="un1">第二</span>！你是<span class="un1">蚂蚁队长</span>，大家选你当队长，是对你的<span class="un1">信任</span>和<span class="un1">尊重</span>！你却背着大家<span class="un1">偷吃</span>！<span class="un1">第三</span>！<span class="un1">诚实守信</span>是美德，你吃掉奶酪要<span class="un1">撒谎</span>，撒了<span class="un1">一个</span>谎就要用<span class="un1">无数</span>的谎来圆第一个谎，最后<span class="un1">还是</span>会被发现！</p><p class=" mar-l-r-4">蚂蚁队长：（低头）我不吃了，我知道<span class="un1">错了</span>……可是，这掉在地上的奶酪怎么办呢？</p><p class=" mar-l-r-4">奶酪人：（想了想）<span class="un1">有办法</span>！你可以选择大家<span class="un1">一起分</span>，也可以选择给年龄最小的蚂蚁吃！</p><p class=" mar-l-r-4">蚂蚁队长：<span class="un1">好主意</span>！我这就问问大家，谢谢你！</p><p class=" mar-l-r-4">【变光，奶酪慢慢地躺在地上】</p><p class=" mar-l-r-4">蚂蚁队长：（喊）<span class="un1">注意啦</span>！全体都有！稍息！立正！</p><p class=" mar-l-r-4">向后转！齐步走！</p><p class=" mar-l-r-4">【蚂蚁们由四面八方走回来】</p><p class=" mar-l-r-4">蚂蚁队长：大家休息好啦！我有一个<span class="un1">决定</span>！</p><p class=" mar-l-r-4">蚂蚁们：什么决定？</p><p class=" mar-l-r-4">蚂蚁队长：这点儿奶酪渣是刚才弄掉的，丢了可惜，（指向小蚂蚁）你是我们中年龄最小的，<span class="un1">你</span>吃掉它吧！</p><p class=" mar-l-r-4">【蚂蚁们鼓掌】</p><p class=" mar-l-r-4">【音乐起，大家劲儿比刚才更足，抬起奶酪向山洞走去】</p><p class=" mar-l-r-4">【收光】</p>',
      ],
      activeContent: "", // 当前显示的HTML内容
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
        txtTwo: "",
      },
      rawData: {
        left: [
          {
            oldId: "FB34",
            txt: "“掉了一个角，这该怎么办！”",
          },
          {
            oldId: "64D6",
            txt: "“丢掉，实在太可惜！”",
          },
          {
            oldId: "2ED4",
            txt: "“我要是偷嘴谁也看不见。”",
          },
        ],
        right: [
          {
            oldId: "64D6",
            txt: "不能丢掉啊，如果能给我吃就太好了！",
          },
          {
            oldId: "2ED4",
            txt: "要不我把奶酪偷偷吃了吧。",
          },
          {
            oldId: "FB34",
            txt: "好可惜啊，这么美味的奶酪！",
          },
        ],
      },
      question: {
        KnowledgePoint: "123",
        analysis: "123",
        answer: [
          {
            id: "FB34",
            linkValue: "好可惜啊，这么美味的奶酪！",
            value: "“掉了一个角，这该怎么办！”",
          },
          {
            id: "64D6",
            linkValue: "不能丢掉啊，如果能给我吃就太好了！",
            value: "“丢掉，实在太可惜！”",
          },
          {
            id: "2ED4",
            linkValue: "要不我把奶酪偷偷吃了吧。",
            value: "“我要是偷嘴谁也看不见。”",
          },
        ],
        optionStyle: undefined,
        id: 489306,
        options: {
          linkValues: [
            {
              oldId: "64D6",
              txt: "不能丢掉啊，如果能给我吃就太好了！",
            },
            rawData: {
                left: [
                    {
                        oldId: "FB34",
                        txt: "“掉了一个角，这该怎么办！”",
                    },
                    {
                        oldId: "64D6",
                        txt: "“丢掉，实在太可惜！”",
                    },
                    {
                        oldId: "2ED4",
                        txt: "“我要是偷嘴谁也看不见。”",
                    },
                ],
                right: [
                    {
                        oldId: "64D6",
                        txt: "不能丢掉啊，如果能给我吃就太好了！",
                    },
                    {
                        oldId: "2ED4",
                        txt: "要不我把奶酪偷偷吃了吧。",
                    },
                    {
                        oldId: "FB34",
                        txt: "好可惜啊，这么美味的奶酪！",
                    },
                ],
            {
              oldId: "2ED4",
              txt: "要不我把奶酪偷偷吃了吧。",
            },
            question: {
                KnowledgePoint: "123",
                analysis: "123",
                answer: [
                    {
                        id: "FB34",
                        linkValue: "好可惜啊，这么美味的奶酪！",
                        value: "“掉了一个角，这该怎么办！”",
                    },
                    {
                        id: "64D6",
                        linkValue: "不能丢掉啊，如果能给我吃就太好了！",
                        value: "“丢掉，实在太可惜！”",
                    },
                    {
                        id: "2ED4",
                        linkValue: "要不我把奶酪偷偷吃了吧。",
                        value: "“我要是偷嘴谁也看不见。”",
                    },
                ],
                optionStyle: undefined,
                id: 489306,
                options: {
                    linkValues: [
                        {
                            oldId: "64D6",
                            txt: "不能丢掉啊，如果能给我吃就太好了！",
                        },
                        {
                            oldId: "2ED4",
                            txt: "要不我把奶酪偷偷吃了吧。",
                        },
                        {
                            oldId: "FB34",
                            txt: "好可惜啊，这么美味的奶酪！",
                        },],
                    values: [
                        {
                            oldId: "FB34",
                            txt: "“掉了一个角，这该怎么办！”",
                        },
                        {
                            oldId: "64D6",
                            txt: "“丢掉，实在太可惜！”",
                        },
                        {
                            oldId: "2ED4",
                            txt: "“我要是偷嘴谁也看不见。”",
                        },
                    ],
                },
                questionType: "matching",
                stem: {
                    stemTxt: "按顺序连线",
                },
                stemStyle: undefined,
                titleDescription: "1",
                userChoise: [],
                value: [],
                answerImg: require("../../assets/images/matching-two.png"),
            {
              oldId: "FB34",
              txt: "好可惜啊，这么美味的奶酪！",
            },
            questionData: {
                warnUp: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                    nine: "",
                },
          ],
          values: [
            {
              oldId: "FB34",
              txt: "“掉了一个角，这该怎么办！”",
            },
        };
            {
              oldId: "64D6",
              txt: "“丢掉，实在太可惜！”",
            },
            {
              oldId: "2ED4",
              txt: "“我要是偷嘴谁也看不见。”",
            },
          ],
        },
        questionType: "matching",
        stem: {
          stemTxt: "按顺序连线",
        },
        stemStyle: undefined,
        titleDescription: "1",
        userChoise: [],
        value: [],
        answerImg: require("../../assets/images/matching-two.png"),
      },
      questionData: {
        warnUp: {
          one: "",
          two: "",
          three: "",
        },
        reading: {
          one: "",
          two: "",
          three:"",
          four:"",
          five:"",
        },
        table: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven: "",
          enight: "",
          nine: "",
        },
      },
    };
  },
  methods: {
    //视频和音频的MD5地址
    async getVidoePath() {
      // 视频Md5地址
      this.videoPathOne = await getResourcePath(
        "dd44a1e31b4304f50d10b2481a148411"
      );
      // 音频Md5地址
      this.audioPathOne = await getResourcePath(
        "3d00a10af86180ecafbd4de96cc1060b"
      );
      this.audioPathTwo = await getResourcePath(
        "e88bbf13654fa2398f71718864a670e3"
      );
      this.audioPathThree = await getResourcePath(
        "35e278e4f40f5a05d793789dc89e061a"
      );
      this.audioPathFour = await getResourcePath(
        "09be0464578bb624b131628e4eb9a573"
      );
      this.audioPathFive = await getResourcePath(
        "f56a9d889d3098fa6800125ae7627481"
      );
    },
    methods: {
        //视频和音频的MD5地址
        async getVidoePath() {
            // 视频Md5地址
            this.videoPathOne = await getResourcePath(
                "dd44a1e31b4304f50d10b2481a148411"
            );
            // 音频Md5地址
            this.audioPathOne = await getResourcePath(
                "3d00a10af86180ecafbd4de96cc1060b"
            );
            this.audioPathTwo = await getResourcePath(
                "e88bbf13654fa2398f71718864a670e3"
            );
            this.audioPathThree = await getResourcePath(
                "35e278e4f40f5a05d793789dc89e061a"
            );
            this.audioPathFour = await getResourcePath(
                "09be0464578bb624b131628e4eb9a573"
            );
            this.audioPathFive = await getResourcePath(
                "f56a9d889d3098fa6800125ae7627481"
            );
        },
        setBookQuestion() {
            console.log("保存");
            localStorage.setItem(
                "artAndDrama-book-question-three",
                JSON.stringify(this.questionData)
            );
        },
        audioPlay(e) {
            this.$emit('closeAudio', e.srcElement.currentSrc)
        },
        videoPlay(e) {
            this.$emit('closeVideo', e.srcElement.currentSrc)
        },
        handleChapterData() {
            localStorage.setItem(
                "math-chapterData",
                JSON.stringify(this.chapterData)
            );
        },
        handleCollect(type) {
            if (type == "img") {
                this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
            } else if (type == "video") {
                this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
            }
            this.handleChapterData();
        },
        showContent(index) {
            // 如果当前激活的索引和点击的索引相同，则隐藏内容  
            if (this.activeIndex === index) {
                this.activeIndex = null;
                this.activeContent = '';
            } else {
                // 否则显示对应索引的内容  
                this.activeIndex = index;
                this.activeContent = this.contents[index];
            }
        }
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "artAndDrama-book-question-three",
        JSON.stringify(this.questionData)
      );
    },
    audioPlay(e) {
      this.$emit("closeAudio", e.srcElement.currentSrc);
    },
    videoPlay(e) {
      this.$emit("closeVideo", e.srcElement.currentSrc);
    },
    handleChapterData() {
      localStorage.setItem(
        "math-chapterData",
        JSON.stringify(this.chapterData)
      );
    },
    handleCollect(type) {
      if (type == "img") {
        this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
      } else if (type == "video") {
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
      }
      this.handleChapterData();
    },
    showContent(index) {
      // 如果当前激活的索引和点击的索引相同，则隐藏内容
      if (this.activeIndex === index) {
        this.activeIndex = null;
        this.activeContent = "";
      } else {
        // 否则显示对应索引的内容
        this.activeIndex = index;
        this.activeContent = this.contents[index];
      }
    },
  },
};
</script>

<style lang="less" scoped>
.w70 {
    width: 78%;
  width: 78%;
}

.fw-400 {
    font-weight: 400 !important;
  font-weight: 400 !important;
}

.fz-26 {
    font-size: 26px !important;
  font-size: 26px !important;
}

.cover-img {
    position: absolute;
    top: 33%;
    left: 23%;
  position: absolute;
  top: 33%;
  left: 23%;
}

.division-line {
    width: 2px;
    height: 100%;
    background-color: red;
  width: 2px;
  height: 100%;
  background-color: red;
}

.macthing {
    background-color: rgb(188, 220, 164);
    padding: 3% 0;
    margin: 0% 8%;
  background-color: rgb(188, 220, 164);
  padding: 3% 0;
  margin: 0% 8%;
}

.content-wrapper {
    border: 1px solid black;
    border-radius: 10px;
  border: 1px solid black;
  border-radius: 10px;
}
/deep/.mar-l-r-4{
    margin: 0 4%;
    font-family: "STkaiti";
    font-size: 19px;

/deep/.mar-l-r-4 {
  margin: 0 4%;
  font-family: "STkaiti";
  font-size: 19px;
}
</style>
</style>

 src/books/artAndDrama/view/components/chapter004.vue

@@ -34,9 +34,11 @@
                    <h2 id="b016" class="problem">第一课　一模一样</h2>
                    <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>以小组为单位围成一圈，面朝圈外蹲下，相邻两人互挎手臂，组员同时站起来，看看哪个组最快！</p>
                    <p class="text"><span class="hs1">◇</span>说一说：快速站起来的秘诀是什么？</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 90%" /></p>
                    <p class="text t-l"><span class="hs1">◇</span>说一说：快速站起来的秘诀是什么？
                        <textarea  v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
                         </textarea>
                    </p>
                    <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>以小组为单位，表演以下场景，注意保持动作一致哦。</p>
                    <p class="text">蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形。</p>
@@ -66,7 +68,7 @@
                            class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
                     <graffiti  :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :imgWidth="596" :imgHeight="800" />
                    <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :imgWidth="596" :imgHeight="500" />
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
@@ -231,7 +233,7 @@
            type: Array,
        },
    },
    components:{graffiti},
    components: { graffiti },
    //在这里对调用的方法进行挂载
    mounted() {
        this.getVidoePath();
@@ -259,11 +261,9 @@
            questionData: {
                warnUp: {
                    one: "",

                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",

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

@@ -159,8 +159,8 @@
    }, 500);

    // 测试页面跳转
    //  setTimeout(() => {
    //  this.gotoPage(4,32);
      setTimeout(() => {
      this.gotoPage(2,4);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -188,7 +188,7 @@
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    // }, 500);
     }, 500);
  },
  methods: {
    // setZoom1() {

 src/components/choice/choice.vue

@@ -47,7 +47,9 @@
              </svg>
            </span>
            <!-- 选项 -->
            <span class="option-text"
            <span class="option-text" @click="(e)=>{
              e.preventDefault()
            }"
              :style="{ color: formatAnswer(getSelectedOptions()).indexOf(option.value) > -1 ? '#fff' : '#000' }">
              {{ option.value }}、{{ option.txt }}
            </span>
@@ -573,7 +575,7 @@
.smiling-face{
  position: absolute;
  z-index: 1;
  bottom: 2% ;
  bottom: -2% ;
  right: 4%;
}
.face {