From 0cd16877a2ea61e9d086c4e7b93fc3cf17a8ad8e Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期三, 03 七月 2024 15:19:33 +0800
Subject: [PATCH] 艺术戏剧(部署7.3)

---
 src/books/artAndDrama/view/components/chapter004.vue |   14 
 src/books/artAndDrama/assets/main.less               |    8 
 src/books/English/view/components/chapter001.vue     |  247 +++++-
 src/books/artAndDrama/view/components/chapter003.vue | 1192 +++++++++++++++++++------------
 src/books/English/view/components/chapter002.vue     |  503 +++++++++++--
 src/books/artAndDrama/view/components/chapter002.vue |   72 -
 src/books/artAndDrama/view/components/chapter001.vue |   84 +-
 src/books/English/view/components/index.vue          |    6 
 src/components/choice/choice.vue                     |    6 
 src/books/English/assets/main.less                   |   35 
 src/books/artAndDrama/view/components/index.vue      |    6 
 11 files changed, 1,477 insertions(+), 696 deletions(-)

diff --git a/src/books/English/assets/main.less b/src/books/English/assets/main.less
index 3add23e..752f6bd 100644
--- a/src/books/English/assets/main.less
+++ b/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;
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 132d2eb..ae1b0a6 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/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">
               绛旀锛歍he 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鈥檛 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鈥檛 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鈥檛 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鈥檚 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鈥檚 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鈥檚 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鈥檚 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.锛圫+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鈥檚 natural beauty keeps on 5.________me,from the pure
+              culture.China鈥檚 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") {
diff --git a/src/books/English/view/components/chapter002.vue b/src/books/English/view/components/chapter002.vue
index efa84b1..e7de1ab 100644
--- a/src/books/English/view/components/chapter002.vue
+++ b/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鈥檚 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">
+              绛旀锛欳ulture 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鈥檚 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鈥檛 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鈥檛 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鈥檚 ________ Li Lin made her feel welcome on her first day
+              4.Sarah鈥檚
+              <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鈥檓 sorry to ________ you,but can I talk to you for a moment?
+              6.I鈥檓 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鈥檚 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鈥檛 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">
+              渚嬪彞锛歍he 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">
+              绛旀锛氫綘鍙互閫氳繃鏁f鎴栨參璺戞潵璋冭妭宸ヤ綔涓殑娌抚鎯呯华銆�
+            </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">
+              绛旀锛氫粬浠氨濡備綍鍦ㄥ伐浣滀腑姝g‘澶勭悊鏂囧寲宸紓缁欎簡鎴戜滑涓�浜涘缓璁��
+            </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">
+              绛旀锛氬湪鍔炲叕瀹ょ┛鐫�鍚堥�傜殑琛f湇浼氳浣犳劅鍒拌垝閫傚拰鑷俊銆�
+            </p>
             <p><b>鈪�.Grammar focus:鈥渋t鈥� as formal subject.</b></p>
             <p>
               A.Read the example and underline the real subject that 鈥渋t鈥�
@@ -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">
+              绛旀锛欼t 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">
+              绛旀锛欼t 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">
+              绛旀锛欼t 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">
+              绛旀锛欼t 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">
+              绛旀锛欼t鈥檚 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鈥檚 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鈥檚 new coat of crystal white</p>
-            <p class="center">This feeling you just can鈥檛 2._______</p>
+            <p class="center">This feeling you just can鈥檛 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鈥檚 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鈥檚 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鈥檚 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 鈥渆xceptional鈥�?</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鈥檚 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鈥檛 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 鈥渕yself鈥� instead of telling the story of 鈥渢ogetherness鈥�.</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鈥檇 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鈥檇 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) 鈥淵in 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) 鈥淵in 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) {
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 9d696ff..e6d5b92 100644
--- a/src/books/English/view/components/index.vue
+++ b/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() {
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index 29a6e44..707f5ac 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/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;
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index a521954..c097982 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/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>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
           </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>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫0闊冲嚭鐜帮細涓�涓0闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓0闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓g殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
           </p>
-          <p class="text">姝d箟闃熼暱锛氣��
-            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60"
-              @change="setBookQuestion" />銆傗��
+          <p class="text t-l">姝d箟闃熼暱锛�
+            <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>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
           </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>寰瑧璇粹�渁ng鈥�</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">
             璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚0闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
@@ -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;
 }
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index de0883c..515195d 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/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">绗笁璇俱��闂诲0璇嗕汉</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">灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙f皵灏嗗畠鍚瑰�掋��</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: "",
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index fd54e98..3671807 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/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%">
-                            姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈o紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�</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%">
+              姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈o紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�
+            </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">瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛o紝鍔崇濂斿繖銆�</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>鈥滃樁鈥濆0缁冧範</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">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�傛斁鏉惧弻鍞囷紝娣卞惛姘旓紝鍚瑰嚭姘旀祦甯﹀姩鍢村攪鎶栧姩锛屽彂鍑衡�滃槦鈥濈殑澹伴煶锛屽0闊宠秺闀胯秺濂姐��</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">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�備互璇存倓鎮勮瘽鐨勬劅瑙夛紝璇村嚭鈥滄垜浠禐缇庨暱姹熲�濓紝骞堕�愭澧炲姞姘斿0鐨勫姏搴︼紝鎵惧埌鍦ㄨ垶鍙颁笂璇存倓鎮勮瘽鐨勬劅瑙夈��</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">瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛o紝鍔崇濂斿繖銆�</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>鈥滃樁鈥濆0缁冧範</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">
+            骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�傛斁鏉惧弻鍞囷紝娣卞惛姘旓紝鍚瑰嚭姘旀祦甯﹀姩鍢村攪鎶栧姩锛屽彂鍑衡�滃槦鈥濈殑澹伴煶锛屽0闊宠秺闀胯秺濂姐��
+          </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">
+            骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�備互璇存倓鎮勮瘽鐨勬劅瑙夛紝璇村嚭鈥滄垜浠禐缇庨暱姹熲�濓紝骞堕�愭澧炲姞姘斿0鐨勫姏搴︼紝鎵惧埌鍦ㄨ垶鍙颁笂璇存倓鎮勮瘽鐨勬劅瑙夈��
+          </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">铓傝殎闃熼暱锛氾紙闄堕唹锛夊ザ閰�︹�﹀ザ閰�︹�﹀~楗辫倸瀛愪笉鍐嶅懕鍛卞彨銆傚ザ閰�︹�﹀ザ閰�︹�﹀悆涓嬩竴鍙d竴澹扮編濡欌�︹��</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>涓�鍙o紒</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">铓傝殎闃熼暱锛氬叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝o紒鍚戝悗鈥旇浆锛侀綈姝モ�旇蛋锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氱珛鈥斿畾锛佸師鍦颁紤鎭紒</p><p class=" mar-l-r-4">銆愯殏铓佷滑璺熼殢鍙d护娑堝け鍦ㄨ崏涓涢噷銆�</p>',
-                ' <p class=" mar-l-r-4">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙灏忓0锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</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>锛佸叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝o紒</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">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓f槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<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: '', // 褰撳墠鏄剧ず鐨凥TML鍐呭 
-            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">铓傝殎闃熼暱锛氾紙闄堕唹锛夊ザ閰�︹�﹀ザ閰�︹�﹀~楗辫倸瀛愪笉鍐嶅懕鍛卞彨銆傚ザ閰�︹�﹀ザ閰�︹�﹀悆涓嬩竴鍙d竴澹扮編濡欌�︹��</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>涓�鍙o紒</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">铓傝殎闃熼暱锛氬叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝o紒鍚戝悗鈥旇浆锛侀綈姝モ�旇蛋锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氱珛鈥斿畾锛佸師鍦颁紤鎭紒</p><p class=" mar-l-r-4">銆愯殏铓佷滑璺熼殢鍙d护娑堝け鍦ㄨ崏涓涢噷銆�</p>',
+        ' <p class=" mar-l-r-4">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙灏忓0锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</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>锛佸叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝o紒</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">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓f槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<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: "", // 褰撳墠鏄剧ず鐨凥TML鍐呭
+      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>
\ No newline at end of file
+</style>
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index 158b8b6..1635a5e 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/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: "",
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index 76a4d16..7e8978c 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/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() {
diff --git a/src/components/choice/choice.vue b/src/components/choice/choice.vue
index 1f36508..622f6f9 100644
--- a/src/components/choice/choice.vue
+++ b/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 {

--
Gitblit v1.9.1