From 924121953fb670fd3c2278fffc26b65b57620110 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期二, 06 八月 2024 16:50:14 +0800
Subject: [PATCH] 英语书整本Bug修改结束

---
 src/books/English/view/components/chapter008.vue     |   14 
 src/books/English/view/components/chapter001.vue     |   16 
 src/books/artAndDrama/view/components/chapter003.vue |  359 +++++++++--------------------
 src/books/English/view/components/chapter003.vue     |    8 
 src/books/English/view/components/chapter005.vue     |   12 
 src/books/artAndDrama/view/components/chapter004.vue |   43 ++
 src/books/English/view/components/chapter007.vue     |    6 
 src/books/English/view/components/chapter004.vue     |   22 
 src/books/English/view/components/chapter002.vue     |    8 
 src/books/artAndDrama/view/components/chapter002.vue |   40 ++
 src/books/artAndDrama/view/components/chapter001.vue |   61 +++-
 src/books/English/view/components/chapter006.vue     |   40 +-
 src/components/dropdown/index.vue                    |   75 +++---
 src/books/English/view/components/index.vue          |    6 
 src/books/artAndDrama/view/components/index.vue      |    6 
 15 files changed, 326 insertions(+), 390 deletions(-)

diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index c62dfc5..97b1d52 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -359,7 +359,7 @@
               shadow puppet show, traditional Chinese medicine, Peking Opera
               scenery
             </p>
-            <p class="center"><b>My Experience in <span class="word-bc">Wonderland</span> </b></p>
+            <p class="center"><b>My Experience in <span class="word-bc" word="wonderland">Wonderland</span> </b></p>
             <p class="center">
               <audio :src="resource.readingOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
             </p>
@@ -379,7 +379,7 @@
               the people,the culture,the
               <span class="word-bc" >cuisine</span>
               and of course the huge variety of
-              <span class="word-bc">landscapes</span>.
+              <span class="word-bc" word="landscape">landscapes</span>.
             </p>
             <p>
               I found many great people and made several Chinese friends along
@@ -1965,7 +1965,7 @@
               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
-              <span class="word-bc">Mausoleum</span>
+              <span class="word-bc" word="mausoleum">Mausoleum</span>
               .A.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 90%"
                 v-model="testData.tg.one" @change="setTestData" />
               I looked around with curiosity,and everything seemed to move at a
@@ -1987,7 +1987,7 @@
               my room to turn on my
               <span class="word-bc">laptop</span>
               and typed in the key words.I was
-              <span class="word-bc">stunned</span>
+              <span class="word-bc" word="stun">stunned</span>
               ; I couldn鈥檛 believe my eyes.It is actually an online
               shopping website where you can buy anything you can think of.
             </p>
@@ -1995,7 +1995,7 @@
               After my graduation in 2015,I joined another university in
               Shanghai for further studies.I always saw my Chinese classmates
               paying with their phones; this
-              <span class="word-bc" >triggered</span>
+              <span class="word-bc" word="trigger">triggered</span>
               my attention.With the
               help of my classmates,I finally got my own online payment
               account.This is an absolute
@@ -2024,7 +2024,7 @@
               millions of people around China.The Chinese
               <span class="word-bc">economy</span>
               is
-              <span class="word-bc">booming</span>
+              <span class="word-bc" word="boom">booming</span>
               ,which makes people well off.I鈥檝e been in China for several
               years and witnessed China鈥檚
               <span class="word-bc" >potential</span>
@@ -4714,7 +4714,7 @@
     if (testData) {
       this.testData = JSON.parse(testData);
     }
-    const bookQuestion = localStorage.getItem("english-book-question-one");
+    const bookQuestion = localStorage.getItem("english-book-chapter01-question-one");
     if (bookQuestion) {
       this.questionData = JSON.parse(bookQuestion);
     }
@@ -4869,7 +4869,7 @@
     },
     setBookQuestion() {
       localStorage.setItem(
-        "english-book-question-one",
+        "english-book-chapter01-question-one",
         JSON.stringify(this.questionData)
       );
     },
diff --git a/src/books/English/view/components/chapter002.vue b/src/books/English/view/components/chapter002.vue
index 3fa2788..55a3668 100644
--- a/src/books/English/view/components/chapter002.vue
+++ b/src/books/English/view/components/chapter002.vue
@@ -1844,7 +1844,7 @@
               <span class="word-bc">cauldron</span>
               ,formed by the smaller
               snowflakes with names of the
-              <span class="word-bc">participating</span>
+              <span class="word-bc" word="participate">participating</span>
               countries and regions on them,was lit by two young Chinese
               athletes.
             </p>
@@ -1890,7 +1890,7 @@
             </p>
             <p>It was like getting over my schoolgirl crush and focusing on learning to love.</p>
             <p>I could not agree more with what a gold medal winner said during an interview.鈥淚n 2008 we
-              <span class="word-bc">impressed</span> the
+              <span class="word-bc" word="impress">impressed</span> the
               world while in 2022 we became people-centered 鈥攆or athletes and the people.鈥�
             </p>
             <p>I failed to control myself the moments when the Chinese national
@@ -4735,7 +4735,7 @@
     if (testData) {
       this.testData = JSON.parse(testData);
     }
-    const bookQuestion = localStorage.getItem("english-book-question-one");
+    const bookQuestion = localStorage.getItem("english-book-chapter02-question-one");
     if (bookQuestion) {
       this.questionData = JSON.parse(bookQuestion);
     }
@@ -4911,7 +4911,7 @@
     },
     setBookQuestion() {
       localStorage.setItem(
-        "english-book-question-one",
+        "english-book-chapter02-question-one",
         JSON.stringify(this.questionData)
       );
     },
diff --git a/src/books/English/view/components/chapter003.vue b/src/books/English/view/components/chapter003.vue
index 41a3268..f34339f 100644
--- a/src/books/English/view/components/chapter003.vue
+++ b/src/books/English/view/components/chapter003.vue
@@ -533,13 +533,13 @@
                         <p>
                             What鈥檚 more,volunteering is a fun and easy way to explore your
                             interests and
-                            <span class="word-bc">passions</span>
+                            <span class="word-bc" word="passion">passions</span>
                             .Doing volunteer work can be a
                             relaxing,
-                            <span class="word-bc">energizing</span>
+                            <span class="word-bc" word="energize">energizing</span>
                             escape from your day-to-day routine of
                             work,school,or family
-                            <span class="word-bc">commitments</span>
+                            <span class="word-bc" word="commitment">commitments</span>
                             .Volunteering also provides you
                             with <span class="word-bc">creativity</span>
                             ,motivation,and
@@ -1934,7 +1934,7 @@
                         </p>
                         <p>
                             The engineers have solar-
-                            <span class="word-bc">electrified</span>
+                            <span class="word-bc" word="electrify">electrified</span>
                             45,000 houses.Please remember
                             that our students are
                             <span class="word-bc">primarily</span>
diff --git a/src/books/English/view/components/chapter004.vue b/src/books/English/view/components/chapter004.vue
index 44dfacb..ca28113 100644
--- a/src/books/English/view/components/chapter004.vue
+++ b/src/books/English/view/components/chapter004.vue
@@ -329,11 +329,11 @@
                         <p>Robots are on the rise! Today they can be found working in hotels and stores.Machines will
                             soon be used to study sea
 
-                            <span class="word-bc">creatures</span>
+                            <span class="word-bc" word="creature">creatures</span>
                             up close.These robots can
                             <span class="word-bc">blend</span>
                             blend right in with underwater
-                            <span class="word-bc">habitats</span>
+                            <span class="word-bc" word="habitat">habitats</span>
                             .Robots take on tasks to make our life easier and safer.Scientists keep coming up
                             with jobs that machines can do.Sometimes,the machines can do a better job than humans.Take a
                             look at the latest robots.
@@ -347,7 +347,7 @@
                             by slowly opening its soft
                             <span class="word-bc">rubber</span>
                             arms and then
-                            <span class="word-bc"> snapping</span>
+                            <span class="word-bc" word="snap"> snapping</span>
                             them shut.During tests,fish swam
                             alongside the Octobot.Researchers can use the robot to study sea creatures.
                         </p>
@@ -387,7 +387,7 @@
                             <span class="word-bc">rescue</span>
                             <span class="word-bc">missions</span>
                             and to carry heavy
-                            <span class="word-bc">facilities</span>
+                            <span class="word-bc"  word="facility">facilities</span>
                             .
                         </p>
                         <p class="center"><img class="img-f" alt="" src="../../assets/images/0071-3.jpg" /></p>
@@ -601,28 +601,28 @@
                             <li>
                                 <span>Pepper</span>
                                 <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataOne"
-                                    ref="choiceDropdownOne"></dropdown>
+                                    ref="choiceDropdownOne" :value ="readingOne[1].value[0].userAnswer"></dropdown>
                                 <img :src="readingOne[1].value[0].isRight ? correctIcon : errorIcon" alt=""
                                     v-if="readingOne[1].isComplete">
                             </li>
                             <li>
                                 <span>Spot</span>
                                 <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataTwo"
-                                    ref="choiceDropdownTwo"></dropdown>
+                                    ref="choiceDropdownTwo" :value ="readingOne[1].value[1].userAnswer"></dropdown>
                                 <img :src="readingOne[1].value[1].isRight ? correctIcon : errorIcon" alt=""
                                     v-if="readingOne[1].isComplete">
                             </li>
                             <li>
                                 <span>Mingo</span>
                                 <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataThree"
-                                    ref="choiceDropdownThree"></dropdown>
+                                    ref="choiceDropdownThree" :value ="readingOne[1].value[2].userAnswer"></dropdown>
                                 <img :src="readingOne[1].value[2].isRight ? correctIcon : errorIcon" alt=""
                                     v-if="readingOne[1].isComplete">
                             </li>
                             <li>
                                 <span>Octobot</span>
                                 <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataFour"
-                                    ref="choiceDropdownFour"></dropdown>
+                                    ref="choiceDropdownFour" :value ="readingOne[1].value[3].userAnswer"></dropdown>
                                 <img :src="readingOne[1].value[3].isRight ? correctIcon : errorIcon" alt=""
                                     v-if="readingOne[1].isComplete">
                             </li>
@@ -1360,12 +1360,12 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p>quite helpful in the discovery of around 340
-                            <span class="word-bc">pulsars</span>
+                            <span class="word-bc" word="pulsar">pulsars</span>
                             ,since becoming operational in September
                             2016.It has also contributed to helping human beings better understand the
                             <span class="word-bc">origin</span>
                             of fast radio
-                            <span class="word-bc">bursts</span>
+                            <span class="word-bc" word="burst">bursts</span>
                             ,extremely brief but powerful flashes in the
                             <span class="word-bc">universe</span>
                             .FAST was listed by the journals
@@ -1402,7 +1402,7 @@
                             spent 15 years on FAST,and,in return,FAST helped him to grow,increased his knowledge,and
                             <span class="word-bc" word="reward">rewarded</span>
                             him with confidence as he
-                            <span class="word-bc">overcame</span>
+                            <span class="word-bc" word="overcome">overcame</span>
                             many difficulties and setbacks.
                         </p>
                         <p>The 鈥淪ky Eye鈥� is open to the world and offers more
diff --git a/src/books/English/view/components/chapter005.vue b/src/books/English/view/components/chapter005.vue
index 01f5552..40afbbb 100644
--- a/src/books/English/view/components/chapter005.vue
+++ b/src/books/English/view/components/chapter005.vue
@@ -1816,12 +1816,12 @@
                         </p>
                         <p>Just this summer,a group of researchers in the UK published a study comparing the carbon
                             footprints connected with different diets:meat-eaters,fish-eaters,and
-                            <span class="word-bc" >vegans</span>
+                            <span class="word-bc" word="vegan">vegans</span>
                             .It turns out
                             that
-                            <span class="word-bc">eliminating</span>
+                            <span class="word-bc" word="eliminate">eliminating</span>
                              meat from your diet can reduce your carbon
-                            <span class="word-bc">emissions</span>
+                            <span class="word-bc" word="emission">emissions</span>
                             by half.A vegan diet
                             was connected with the least amount of greenhouse gas emissions鈥�99 percent to 102 percent
                             less than meateaters鈥攂ut even switching from meat to fish can reduce your dietary emissions
@@ -1829,7 +1829,7 @@
                         </p>
                         <p>Before learning about this study,I never thought about how my diet impacted anyone but
                             myself.I always
-                            <span class="word-bc">figured</span>
+                            <span class="word-bc" word="figure">figured</span>
                             that what I put into my body was a personal decision,but it鈥檚 a
                             public concern.
                         </p>
@@ -4603,7 +4603,7 @@
         if (testData) {
             this.testData = JSON.parse(testData);
         }
-        const bookQuestion = localStorage.getItem("english-book-question-one");
+        const bookQuestion = localStorage.getItem("english-book-chapter05-question-one");
         if (bookQuestion) {
             this.questionData = JSON.parse(bookQuestion);
         }
@@ -4647,7 +4647,7 @@
         },
         setBookQuestion() {
             localStorage.setItem(
-                "english-book-question-one",
+                "english-book-chapter05-question-one",
                 JSON.stringify(this.questionData)
             );
         },
diff --git a/src/books/English/view/components/chapter006.vue b/src/books/English/view/components/chapter006.vue
index 5539a91..5ea3bbf 100644
--- a/src/books/English/view/components/chapter006.vue
+++ b/src/books/English/view/components/chapter006.vue
@@ -322,7 +322,7 @@
               <span class="word-bc">behavioral</span>&nbsp;
               <span class="word-bc">approach</span>
               .Good behavior also
-              <span class="word-bc">determines</span>
+              <span class="word-bc" word="determine">determines</span>
               good and peaceful environment.Another way is to ensure healthy
               relationships among the staff; that is why communication is quite
               necessary.Keeping an eye on staff
@@ -382,7 +382,7 @@
               The work environment can greatly influence how the employees feel
               about their jobs.Because of this,it鈥檚 important to find an
               employer that
-              <span class="word-bc">fosters</span>
+              <span class="word-bc" word="foster">fosters</span>
               a positive atmosphere and encourages employees
               <span class="word-bc">consistently</span>
               .A positive work environment can improve employees鈥�
@@ -1196,7 +1196,7 @@
               You can usually find a company鈥檚 code of conduct in an employee
               handbook.Each company has different rules in its code of
               conduct,and each company has its own policies for
-              <span class="word-bc">enforcing</span>
+              <span class="word-bc" word="enforce">enforcing</span>
               this code.
             </p>
             <p>
@@ -1259,7 +1259,7 @@
               </p>
               <p>
                 5.Advertising.Products should not be
-                <span class="word-bc">advertised</span>
+                <span class="word-bc" word="advertise">advertised</span>
                 in a
                 <span class="word-bc">misleading</span>
                 way.
@@ -1329,7 +1329,7 @@
               </p>
               <p>
                 14.
-                <span class="word-bc">Complaints</span>
+                <span class="word-bc" word="complaint">Complaints</span>
                 .Handle the complaints fairly and quickly.
               </p>
               <p>
@@ -1937,14 +1937,15 @@
                 and Ross and match the following information with the
                 corresponding speaker.</b>
             </p>
-            <audio :src="resource.listenThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+            <audio :src="resource.listenThree" controls controlslist="noplaybackrate nodownload" class="audio">
+            </audio>
             <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14">
               <tr class="table-tr-bc">
                 <td class="tl-cn wh-no table-th-bc">Sally</td>
                 <td class="fl de-cl al-cn ju-cn">
                   <img src="../../assets/images/table/c2.jpg" alt="">
                   <dropdown :options="listenThree[1].option" @changeDropdownData="changeDropdownDataOne"
-                    ref="choiceDropdownOne" :userAnswer="listenThree[1].value[0].userAnswer" />
+                    ref="choiceDropdownOne" :value="listenThree[1].value[0].userAnswer" />
                   <img :src="listenThree[1].value[0].isRight ? correctIcon : errorIcon"
                     v-if="listenThree[1].isComplete">
                 </td>
@@ -1975,7 +1976,7 @@
                 <td class="fl de-cl al-cn ju-cn">
                   <img src="../../assets/images/table/c1.jpg" alt="">
                   <dropdown :options="listenThree[1].option" @changeDropdownData="changeDropdownDataTwo"
-                    ref="choiceDropdownTwo" />
+                    ref="choiceDropdownTwo" :value="listenThree[1].value[1].userAnswer" />
                   <img :src="listenThree[1].value[1].isRight ? correctIcon : errorIcon"
                     v-if="listenThree[1].isComplete">
                 </td>
@@ -2616,7 +2617,7 @@
   watch: {
     showPageList: {
       handler(newVal) {
-        console.log(123, newVal, this.$refs);
+
 
       },
       immediate: true
@@ -2630,6 +2631,7 @@
       errorIcon: require('@/assets/images/error.svg'),
       showImg: false,
       showImgOne: false,
+      selectedValue: null, // 鐢ㄤ簬瀛樺偍褰撳墠閫変腑鐨勫��  
       rawData: {
         left: [
           {
@@ -3812,12 +3814,7 @@
     const listenThree = localStorage.getItem('english-chapter06-listenThree')
     if (listenThree) {
       this.listenThree = JSON.parse(listenThree)
-
-
     }
-
-
-
   },
   methods: {
     arrayToString(data) {
@@ -4052,10 +4049,14 @@
     saveListenThree() {
       localStorage.setItem('english-chapter06-listenThree', JSON.stringify(this.listenThree))
     },
-    changeDropdownDataOne(data) {
-      this.$set(this.listenThree[1].value[0], 'userAnswer', data)
-      this.saveListenThree()
-    },
+    changeDropdownDataOne(data) {  
+      // 鍋囪data鏄柊鐨剈serAnswer鍊�  
+      if (this.listenThree.length > 1 && this.listenThree[1].value && this.listenThree[1].value.length > 0) {  
+        this.$set(this.listenThree[1].value[0], 'userAnswer', data);  
+        this.selectedValue = data; // 鏇存柊selectedValue浠ュ弽鏄犲綋鍓嶉�変腑鐨勫��  
+        this.saveListenThree(); // 淇濆瓨鏇存敼鍒發ocalStorage  
+      }  
+    },  
     changeDropdownDataTwo(data) {
       this.$set(this.listenThree[1].value[1], 'userAnswer', data)
       this.saveListenThree()
@@ -4095,13 +4096,14 @@
         }
       }
       localStorage.removeItem('english-chapter06-listenThree')
+      this.$emit('empty');
     },
     viewListenThree() {
       for (let index = 0; index < this.listenThree.length; index++) {
         const item = this.listenThree[index];
         item.isShowAnswer = !item.isShowAnswer
       }
-    }
+    },
   },
 };
 </script>
diff --git a/src/books/English/view/components/chapter007.vue b/src/books/English/view/components/chapter007.vue
index b4afeba..4cfb0ca 100644
--- a/src/books/English/view/components/chapter007.vue
+++ b/src/books/English/view/components/chapter007.vue
@@ -461,7 +461,7 @@
                             <span class="word-bc">dedication</span>
                             has made
                             him a role model for young people.Wang Innovation Studio now has nearly 100 members,who have
-                            <span class="word-bc">achieved</span>
+                            <span class="word-bc" word="achieve">achieved</span>
                             achieved more than 30 technological innovations.
                         </p>
                         <p>By the end of 2020,a total of 35 UHV projects had been completed or were under
@@ -909,11 +909,11 @@
                         <div class="bk-wh">
                             <p class="dl-box">
                                 <span class="word-bc mr-20 dl-span">strong-willed</span>
-                                <span class="word-bc mr-20 dl-span">motivated</span>
+                                <span class="word-bc mr-20 dl-span" word="motivate">motivated</span>
                                 <span class="word-bc mr-20 dl-span">active</span>
                                 <span class="word-bc mr-20 dl-span">cooperative</span>
                                 <span class="word-bc mr-20 dl-span">stressful</span>
-                                <span class="word-bc mr-20 dl-span">disciplined</span>
+                                <span class="word-bc mr-20 dl-span" word="discipline">disciplined</span>
                                 <span class="word-bc mr-20 dl-span">risky</span>
                                 <span class="word-bc mr-20 dl-span">helpful</span>
                                 <span class="word-bc mr-20 dl-span">dutiful</span>
diff --git a/src/books/English/view/components/chapter008.vue b/src/books/English/view/components/chapter008.vue
index 09fbe92..a6a7b12 100644
--- a/src/books/English/view/components/chapter008.vue
+++ b/src/books/English/view/components/chapter008.vue
@@ -348,7 +348,7 @@
                 <div class="padding-93">
                     <div class="bodystyle">
                         <p>So,I
-                            <span class="word-bc" >inquired</span>
+                            <span class="word-bc" word="inquire" >inquired</span>
                             as to who could give me work around town.I lived in the town of Woodway,which
                             had enough people,especially
                             <span class="word-bc">elderly</span>
@@ -368,7 +368,7 @@
                             pull out weeds one by one in her front yard and backyard.After this
                             <span class="word-bc" >tedious</span>
                             task,I
-                            <span class="word-bc" >mowed</span>
+                            <span class="word-bc" word="mow">mowed</span>
                             her
                             <span class="word-bc" >lawn</span>
                             鈥攆ront and back.That was it for my first day,and it took me about two hours.I asked her
@@ -1007,9 +1007,9 @@
                                 <span class="word-bc mr-20 dl-span"
                                     >repetitive</span>
                                 <span class="word-bc mr-20 dl-span" >risky</span>
-                                <span class="word-bc mr-20 dl-span"
+                                <span class="word-bc mr-20 dl-span" word="satisfy"
                                    >satisfying</span>
-                                <span class="word-bc mr-20 dl-span"
+                                <span class="word-bc mr-20 dl-span" word="stimulate"
                                     >stimulating</span>
                                 <span class="word-bc mr-20 dl-span"
                                     >stressful</span>
@@ -1373,17 +1373,17 @@
                         <p>We shouldn鈥檛 spend a lot of time worrying about where we should be.Things will fall into
                             place as they are meant to.There isn鈥檛 one correct path and everyone鈥檚 life is different.We
                             may face challenges that bring greater
-                            <span class="word-bc" >outcomes</span>
+                            <span class="word-bc" word="outcome" >outcomes</span>
                             later on.
                         </p>
                         <p>Some may argue that they need more money to survive and be happy.It is true that we need
                             money to survive,but after a certain amount it doesn鈥檛 give us any more happiness.It can
                             provide
-                            <span class="word-bc" >necessities</span>
+                            <span class="word-bc" word="necessity">necessities</span>
                             like food,water,clothes,and
                             <span class="word-bc" >shelter</span>
                             .It can also provide
-                            <span class="word-bc" >luxuries</span>
+                            <span class="word-bc" word="luxury" >luxuries</span>
                             like
                             vacations and going out to eat at a restaurant.But when we enjoy something,the feeling of
                             enjoyment doesn鈥檛 last forever.We usually return to our
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 695b7d5..064c344 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -205,8 +205,8 @@
     }, 500);
 
     // 娴嬭瘯椤甸潰璺宠浆
-      setTimeout(() => {
-       this.gotoPage(8,140);
+    //  setTimeout(() => {
+    //   this.gotoPage(5,69);
     //   setTimeout(() => {
     //     this.renderSign("Highlight", {
     //       id: "2ACA9359",
@@ -234,7 +234,7 @@
     //   txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
     //   txtIndex: 57
     // });
-      }, 50);
+    //  }, 50);
   },
   methods: {
     // setZoom1() {
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 77e18ae..1849a0e 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -79,7 +79,7 @@
             <span>瑙嗛锛氭垜浠槸涓�瀹朵汉 </span>
             <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
               placement="top-start">
-              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
+              <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
                 @click="handleCollect('video')" />
             </el-tooltip>
           </p>
@@ -202,11 +202,15 @@
           </p>
           <p class="text t-l">姝d箟闃熼暱锛�
             <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
-              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }"  @focus="handleFocus('one')"  @blur="handleBlur('one')" ></textarea>
+              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
+              :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
+              @blur="handleBlur('one')"></textarea>
           </p>
           <p class="text t-l">榛戞殫闃熼暱锛�
             <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
-              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two'  }"  @focus="handleFocus('two')"  @blur="handleBlur('two')"></textarea>
+              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
+              :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
+              @blur="handleBlur('two')"></textarea>
           </p>
         </div>
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -372,7 +376,7 @@
             <span>瑙嗛锛氭垜浠槸涓�瀹朵汉 </span>
             <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
               placement="top-start">
-              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
+              <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
                 @click="handleCollect('video')" />
             </el-tooltip>
           </p>
@@ -391,6 +395,7 @@
 import matching from "@/components/matching/matching.vue";
 import choice from "@/components/choice/choice.vue"
 import { getResourcePath } from "@/assets/methods/resources";
+import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
 export default {
   name: "chapterOne",
   components: {
@@ -403,12 +408,18 @@
     },
   },
   //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
-  mounted() {
-    this.getVidoePath();
+  async mounted() {
     const bookQuestion = localStorage.getItem("artAndDrama-book-question-one");
     if (bookQuestion) {
       this.questionData = JSON.parse(bookQuestion);
     }
+    this.getVidoePath();
+    const data = localStorage.getItem("artAndDrama-chapter01-Data");
+    if (data) {
+      this.chapterData = JSON.parse(data);
+    }
+    this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
+    
   },
   data() {
     return {
@@ -427,6 +438,7 @@
       accentColor: "",
       color: "#fff",
       isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�  
+      collectResourceList:[],
       chapterData: {
         isCollectImg: false,
         isCollectVideo: false,
@@ -734,14 +746,13 @@
         "3729175530def1b0baca68e0bd344862"
       );
     },
-    handleFocus(id) {  
+    handleFocus(id) {
       this.isFocused = id; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue  
-    },  
-    handleBlur(id) {  
+    },
+    handleBlur(id) {
       this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse  
-    },  
+    },
     setBookQuestion() {
-      console.log("淇濆瓨");
       localStorage.setItem(
         "artAndDrama-book-question-one",
         JSON.stringify(this.questionData)
@@ -749,18 +760,34 @@
     },
     handleChapterData() {
       localStorage.setItem(
-        "math-chapterData",
+        "artAndDrama-chapter01-Data",
         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;
-      }
+      if (type == "video") {
+        this.handleCollectResource("691cbd2c13198d04afc7800d0f2cafb0","691cbd2c13198d04afc7800d0f2cafb0",'',"瑙嗛","bits",'瑙嗛锛氭垜浠槸涓�瀹朵汉')
+      } 
       this.handleChapterData();
     },
+    //璧勬簮鏀惰棌浜嬩欢
+    handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
+      let list = this.collectResourceList
+      if (list.findIndex(item => item.id == id) > -1) {
+        list = list.filter(item => item.id != id)
+      } else {
+        list.push({
+          id,
+          md5,
+          resourcePath,
+          resourceType,
+          source,
+          resourceName,
+        })
+      }
+      this.collectResourceList = list
+      setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
+    }
   },
 };
 </script>
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index 8c0f6b2..f982cfe 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -249,7 +249,7 @@
             <span>瑙嗛锛氭儫濡欐儫鑲栫殑浜虹墿 </span>
             <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
               placement="top-start">
-              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
+              <img :src="collectResourceList.findIndex(item => item.id == 'a3c9b55ac8227e4c885384ff2fc6c0e7') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
                 @click="handleCollect('video')" />
             </el-tooltip>
           </p>
@@ -267,6 +267,7 @@
 <script>
 import drag from "@/components/dragQuestion/index.vue"
 import { getResourcePath } from "@/assets/methods/resources";
+import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
 export default {
   name: "chapterTwo",
   components: { drag },
@@ -276,12 +277,17 @@
     },
   },
   //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
-  mounted() {
+  async mounted() {
     this.getVidoePath();
     const bookQuestion = localStorage.getItem("artAndDrama-book-question-two");
     if (bookQuestion) {
       this.questionData = JSON.parse(bookQuestion);
     }
+    const data = localStorage.getItem("artAndDrama-chapter02-Data");
+    if (data) {
+      this.chapterData = JSON.parse(data);
+    }
+    this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
   },
   data() {
     return {
@@ -294,6 +300,7 @@
       auidoPathFour: "",
       auidoPathFive: "",
       isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
+      collectResourceList:[],
       chapterData: {
         isCollectImg: false,
         isCollectVideo: false,
@@ -476,7 +483,6 @@
       this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse  
     }, 
     setBookQuestion() {
-      console.log("淇濆瓨");
       localStorage.setItem(
         "artAndDrama-book-question-two",
         JSON.stringify(this.questionData)
@@ -484,18 +490,34 @@
     },
     handleChapterData() {
       localStorage.setItem(
-        "math-chapterData",
+        "artAndDrama-chapter02-Data",
         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;
-      }
+      if (type == "video") {
+        this.handleCollectResource("a3c9b55ac8227e4c885384ff2fc6c0e7","a3c9b55ac8227e4c885384ff2fc6c0e7",'',"瑙嗛","bits",'瑙嗛锛氭儫濡欐儫鑲栫殑浜虹墿')
+      } 
       this.handleChapterData();
     },
+      //璧勬簮鏀惰棌浜嬩欢
+      handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
+      let list = this.collectResourceList
+      if (list.findIndex(item => item.id == id) > -1) {
+        list = list.filter(item => item.id != id)
+      } else {
+        list.push({
+          id,
+          md5,
+          resourcePath,
+          resourceType,
+          source,
+          resourceName,
+        })
+      }
+      this.collectResourceList = list
+      setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
+    }
   },
 };
 </script>
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index cdd58ce..da54dc5 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -5,12 +5,7 @@
         <h1 id="a004">
           <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
           <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
-          <audio
-            :src="audioPathOne"
-            controls
-            controlslist="noplaybackrate nodownload"
-            class="audio"
-          ></audio>
+          <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
         </h1>
         <div class="bodystyle">
           <div class="bk">
@@ -27,11 +22,7 @@
         <p><br /></p>
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
         <div class="page-footer">
-          <img
-            class="page-footer-image"
-            src="../../assets/images/ym.jpg"
-            alt="Page Image"
-          />
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
           <div class="page-footer-number-right">19</div>
         </div>
       </div>
@@ -39,11 +30,7 @@
     <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%"
-          />
+          <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%">
@@ -64,8 +51,7 @@
             <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
           </h3>
           <p class="text">
-            <span class="hs1">鈼�</span
-            >閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��
+            <span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��
           </p>
           <p class="block3" style="margin: 3% 0%">
             <span class="hs">鍓ф湰:銆�涓�鍧楀ザ閰�</span>
@@ -73,32 +59,19 @@
           <!-- <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
-            >
+            <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>
+          <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"
-          />
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
           <div class="page-footer-number-left">20</div>
         </div>
       </div>
@@ -106,11 +79,7 @@
     <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%"
-          />
+          <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>
@@ -118,8 +87,7 @@
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
           <p class="text">
-            <span class="hs1">鈼�</span
-            >褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�
+            <span class="hs1">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�
           </p>
           <h3 class="lefth3" id="c024" style="margin-top: 7%">
             <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
@@ -131,22 +99,13 @@
             <span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�
           </p>
           <!-- 杩炵嚎棰� -->
-          <matching
-            :rawData="rawData"
-            :question="question"
-            class="macthing"
-            :primary-color="color"
-            :bordercolor="'#fff'"
-          >
+          <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"
-          />
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
           <div class="page-footer-number-right">21</div>
         </div>
       </div>
@@ -154,11 +113,7 @@
     <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"
-          />
+          <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%">
@@ -167,25 +122,18 @@
             <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"
-              :class="{ 'textarea-focused': isFocused === 'one' }"  @focus="handleFocus('one')"  @blur="handleBlur('one')" 
-            >
+            <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"
+              :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
+              @blur="handleBlur('one')">
             </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锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�
+            <span class="hs1">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�
           </p>
           <p class="center openImgBox">
             <img class="img-e" alt="" src="../../assets/images/3-3.gif" />
@@ -193,11 +141,7 @@
         </div>
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
         <div class="page-footer">
-          <img
-            class="page-footer-image"
-            src="../../assets/images/ym.jpg"
-            alt="Page Image"
-          />
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
           <div class="page-footer-number-left">22</div>
         </div>
       </div>
@@ -205,11 +149,7 @@
     <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"
-          />
+          <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>
@@ -217,95 +157,57 @@
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
           <p class="text">
-            <span class="hs1">鈼�</span
-            >璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�
+            <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%"
-            />
+            鏃堕棿锛�<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%"
-            />
+            鍦扮偣锛�<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%"
-            />
+            浜虹墿锛�<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"
-              :class="{ 'textarea-focused': isFocused === 'two' }"  @focus="handleFocus('two')"  @blur="handleBlur('two')" 
-            >
+            <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+              :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
+              @blur="handleBlur('two')">
             </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"
-              :class="{ 'textarea-focused': isFocused === 'three' }"  @focus="handleFocus('three')"  @blur="handleBlur('three')" 
-            >
+            <textarea v-model="questionData.reading.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+              :class="{ 'textarea-focused': isFocused === 'three' }" @focus="handleFocus('three')"
+              @blur="handleBlur('three')">
             </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"
-              :class="{ 'textarea-focused': isFocused === 'four' }"  @focus="handleFocus('four')"  @blur="handleBlur('four')" 
-            >
+            <textarea v-model="questionData.reading.four" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+              :class="{ 'textarea-focused': isFocused === 'four' }" @focus="handleFocus('four')"
+              @blur="handleBlur('four')">
             </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"
-              :class="{ 'textarea-focused': isFocused === 'five' }"  @focus="handleFocus('five')"  @blur="handleBlur('five')" 
-            >
+            <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"
+              :class="{ 'textarea-focused': isFocused === 'five' }" @focus="handleFocus('five')"
+              @blur="handleBlur('five')">
             </textarea>
           </p>
         </div>
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
         <div class="page-footer">
-          <img
-            class="page-footer-image"
-            src="../../assets/images/ym.jpg"
-            alt="Page Image"
-          />
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
           <div class="page-footer-number-right">23</div>
         </div>
       </div>
@@ -313,11 +215,7 @@
     <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"
-          />
+          <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%">
@@ -325,20 +223,15 @@
             <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
           </h3>
           <p class="text">
-            <span class="hs1">鈼�</span
-            >杩愮敤閲嶉煶銆佸唴蹇冪嫭鐧藉拰鍔ㄤ綔璁捐绛夎〃鐜版柟寮忥紝灏嗐�婁竴鍧楀ザ閰�嬬殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒锛堝墽鏈闄勫綍锛�
+            <span class="hs1">鈼�</span>杩愮敤閲嶉煶銆佸唴蹇冪嫭鐧藉拰鍔ㄤ綔璁捐绛夎〃鐜版柟寮忥紝灏嗐�婁竴鍧楀ザ閰�嬬殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒锛堝墽鏈闄勫綍锛�
           </p>
           <p class="center openImgBox">
-            <img class="img-e" alt="" src="../../assets/images/3-3.gif" />
+            <img class="img-a" alt="" src="../../assets/images/0028-1.jpg" />
           </p>
         </div>
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
         <div class="page-footer">
-          <img
-            class="page-footer-image"
-            src="../../assets/images/ym.jpg"
-            alt="Page Image"
-          />
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
           <div class="page-footer-number-left">24</div>
         </div>
       </div>
@@ -346,11 +239,7 @@
     <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"
-          />
+          <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>
@@ -360,12 +249,7 @@
           <p class="text ends">
             <span><span class="hs1">鈼�</span>鍠樻皵缁冧範</span>
             <span>
-              <audio
-                :src="audioPathTwo"
-                controls
-                controlslist="noplaybackrate nodownload"
-                class="audio"
-              ></audio>
+              <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
             </span>
           </p>
           <p class="text">
@@ -374,39 +258,24 @@
           <p class="text ends">
             <span><span class="hs1">鈼�</span>鈥滃樁鈥濆0缁冧範</span>
             <span>
-              <audio
-                :src="audioPathThree"
-                controls
-                controlslist="noplaybackrate nodownload"
-                class="audio"
-              ></audio>
+              <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>
+              <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><span class="hs1">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌涔�</span>
             <span class="text">
-              <audio
-                :src="audioPathFive"
-                controls
-                controlslist="noplaybackrate nodownload"
-                class="audio"
-              ></audio
-            ></span>
+              <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
+                class="audio"></audio></span>
           </p>
           <p class="text">
             骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�備互璇存倓鎮勮瘽鐨勬劅瑙夛紝璇村嚭鈥滄垜浠禐缇庨暱姹熲�濓紝骞堕�愭澧炲姞姘斿0鐨勫姏搴︼紝鎵惧埌鍦ㄨ垶鍙颁笂璇存倓鎮勮瘽鐨勬劅瑙夈��
@@ -414,11 +283,7 @@
         </div>
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
         <div class="page-footer">
-          <img
-            class="page-footer-image"
-            src="../../assets/images/ym.jpg"
-            alt="Page Image"
-          />
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
           <div class="page-footer-number-right">25</div>
         </div>
       </div>
@@ -426,11 +291,7 @@
     <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"
-          />
+          <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%">
@@ -438,52 +299,29 @@
             <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
           </h3>
           <p class="text">
-            <span class="hs1">鈼�</span
-            >鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
+            <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="
+            <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>
+              "></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 class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
+              placement="top-start">
+              <img :src="collectResourceList.findIndex(item => item.id == 'dd44a1e31b4304f50d10b2481a148411') > -1 ? 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"
-          />
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
           <div class="page-footer-number-left">26</div>
         </div>
       </div>
@@ -494,6 +332,7 @@
 <script>
 import matching from "@/components/matching/matching.vue";
 import { getResourcePath } from "@/assets/methods/resources";
+import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
 export default {
   name: "chapterThree",
   components: { matching },
@@ -506,7 +345,7 @@
       default: "red",
     },
   },
-  mounted() {
+  async mounted() {
     this.getVidoePath();
     const bookQuestion = localStorage.getItem(
       "artAndDrama-book-question-three"
@@ -514,6 +353,11 @@
     if (bookQuestion) {
       this.questionData = JSON.parse(bookQuestion);
     }
+    const data = localStorage.getItem("artAndDrama-chapter03-Data");
+    if (data) {
+      this.chapterData = JSON.parse(data);
+    }
+    this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
   },
   data() {
     return {
@@ -527,6 +371,7 @@
       audioPathFive: "",
       isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
       segments: [1, 2, 3, 4, 5],
+      collectResourceList:[],
       color: "#fff",
       activeIndex: null, // 鐢ㄤ簬杩借釜褰撳墠娲诲姩鐨勬寜閽储寮�
       contents: [
@@ -645,9 +490,9 @@
         reading: {
           one: "",
           two: "",
-          three:"",
-          four:"",
-          five:"",
+          three: "",
+          four: "",
+          five: "",
         },
         table: {
           one: "",
@@ -687,14 +532,13 @@
         "f56a9d889d3098fa6800125ae7627481"
       );
     },
-    handleFocus(id) {  
+    handleFocus(id) {
       this.isFocused = id; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue  
-    },  
-    handleBlur(id) {  
+    },
+    handleBlur(id) {
       this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse  
-    }, 
+    },
     setBookQuestion() {
-      console.log("淇濆瓨");
       localStorage.setItem(
         "artAndDrama-book-question-three",
         JSON.stringify(this.questionData)
@@ -708,16 +552,14 @@
     },
     handleChapterData() {
       localStorage.setItem(
-        "math-chapterData",
+        "artAndDrama-chapter03-Data",
         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;
-      }
+      if (type == "video") {
+        this.handleCollectResource("dd44a1e31b4304f50d10b2481a148411","dd44a1e31b4304f50d10b2481a148411",'',"瑙嗛","bits",'瑙嗛锛氬績鏈夊澶э紝鑸炲彴灏辨湁澶氬ぇ')
+      } 
       this.handleChapterData();
     },
     showContent(index) {
@@ -731,6 +573,25 @@
         this.activeContent = this.contents[index];
       }
     },
+    //璧勬簮鏀惰棌浜嬩欢
+    handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
+      let list = this.collectResourceList
+      if (list.findIndex(item => item.id == id) > -1) {
+        list = list.filter(item => item.id != id)
+      } else {
+        list.push({
+          id,
+          md5,
+          resourcePath,
+          resourceType,
+          source,
+          resourceName,
+        })
+      }
+      this.collectResourceList = list
+      setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
+    }
+
   },
 };
 </script>
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index 8e13d67..f8ccd77 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -133,7 +133,7 @@
                     <h3 class="lefth3" id="c038" style="margin-top: 7%;"><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/4-2.gif" /></p>
+                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/0036-2.jpg" /></p>
                 </div>
                 <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
                 <div class="page-footer">
@@ -212,8 +212,8 @@
                         <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')" />
+                            <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg"
+                                alt="" class="collect-btn" @click="handleCollect('video')" />
                         </el-tooltip>
                     </p>
                 </div>
@@ -229,6 +229,7 @@
 <script>
 import { getResourcePath } from "@/assets/methods/resources";
 import graffiti from '@/components/graffiti/index.vue'
+import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
 export default {
     name: "chapterFour",
     props: {
@@ -238,12 +239,18 @@
     },
     components: { graffiti },
     //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
-    mounted() {
+    async mounted() {
         this.getVidoePath();
         const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
         if (bookQuestion) {
             this.questionData = JSON.parse(bookQuestion);
         }
+
+        const data = localStorage.getItem("artAndDrama-chapter04-Data");
+        if (data) {
+            this.chapterData = JSON.parse(data);
+        }
+        this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
     },
     data() {
         return {
@@ -256,6 +263,7 @@
             audioPathFour: "",
             audioPathFive: "",
             isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
+            collectResourceList: [],
             chapterData: {
                 isCollectImg: false,
                 isCollectVideo: false,
@@ -319,7 +327,6 @@
             this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse  
         },
         setBookQuestion() {
-            console.log("淇濆瓨");
             localStorage.setItem(
                 "artAndDrama-book-question-four",
                 JSON.stringify(this.questionData)
@@ -327,18 +334,34 @@
         },
         handleChapterData() {
             localStorage.setItem(
-                "math-chapterData",
+                "artAndDrama-chapter04-Data",
                 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;
+            if (type == "video") {
+                this.handleCollectResource("09de7704eeaaf3a210b8c6af0a94d545", "09de7704eeaaf3a210b8c6af0a94d545", '', "瑙嗛", "bits", '瑙嗛锛氬洟缁撳氨鏄姏閲�')
             }
             this.handleChapterData();
         },
+        //璧勬簮鏀惰棌浜嬩欢
+        handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
+            let list = this.collectResourceList
+            if (list.findIndex(item => item.id == id) > -1) {
+                list = list.filter(item => item.id != id)
+            } else {
+                list.push({
+                    id,
+                    md5,
+                    resourcePath,
+                    resourceType,
+                    source,
+                    resourceName,
+                })
+            }
+            this.collectResourceList = list
+            setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
+        }
     },
 };
 </script>
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index cec59d6..cbdad77 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,26);
+      setTimeout(() => {
+      this.gotoPage(3,24);
     //   setTimeout(() => {
     //     this.renderSign("Highlight", {
     //       id: "2ACA9359",
@@ -188,7 +188,7 @@
     //   txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
     //   txtIndex: 57
     // });
-    // }, 500);
+     }, 500);
   },
   methods: {
     // setZoom1() {
diff --git a/src/components/dropdown/index.vue b/src/components/dropdown/index.vue
index b352e5c..7e50256 100644
--- a/src/components/dropdown/index.vue
+++ b/src/components/dropdown/index.vue
@@ -1,33 +1,18 @@
 <template>
   <div class="dropdown">
-    <div class="selected-option" >
+    <div class="selected-option">
       <div class="selected-values">
-        <span
-          v-for="(option, index) in selectedOptions"
-          :key="index"
-          class="selected-value"
-        >
+        <span v-for="(option, index) in selectedOptions" :key="index" class="selected-value">
           <span class="selected-value-txt">{{ option }}</span>
           <span class="delete" @click="removeOption(option)"> &times; </span>
         </span>
       </div>
-      <input
-        type="text"
-        v-model="searchText"
-        placeholder="璇烽�夋嫨閫夐」"
-        @input="filterOptions"
-        v-if="isShowSearch"
-      />
+      <input type="text" v-model="searchText" placeholder="璇烽�夋嫨閫夐」" @input="filterOptions" v-if="isShowSearch" />
       <span class="arrow" @click="toggleDropdown"></span>
     </div>
-
     <!-- <button class="confirm-button" @click="submitSelection">纭</button> -->
     <ul v-if="showDropdown" class="options-list">
-      <li
-        v-for="option in filteredOptions"
-        :key="option"
-        @click="toggleOption(option)"
-      >
+      <li v-for="option in filteredOptions" :key="option" @click="toggleOption(option)">
         <input type="checkbox" :value="option" :checked="isSelected(option)" />
         <label>{{ option }}</label>
       </li>
@@ -37,13 +22,16 @@
 
 <script>
 export default {
-  props:{
-    options:{
-      type:Array
+  props: {
+    options: {
+      type: Array
     },
-    isShowSearch:{
-      type:Boolean,
-      default:false
+    value: {
+      type: Array
+    },
+    isShowSearch: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -54,6 +42,7 @@
       searchText: "", // 杩囨护閫夐」鐨勬悳绱㈡枃鏈�
       // ...
       showConfirmButton: false,
+      selected: this.value
     };
   },
   computed: {
@@ -62,15 +51,22 @@
         option.toLowerCase().includes(this.searchText.toLowerCase())
       );
     },
-    
+
   },
-  watch:{
-    selectedOptions:{
+  watch: {
+    value: {
+      deep: true, // 娣卞害鐩戣(閽堝澶嶆潅绫诲瀷)
+      immediate: true, // 鏄惁绔嬪埢鎵ц涓�娆andler
       handler(newValue) {
-        console.log('閫変腑椤瑰彉鍖�',newValue);
-        this.$emit('changeDropdownData',newValue)
+        this.selectedOptions = newValue
+      
       }
-    },deep:true
+    },
+    selectedOptions: {
+      handler(newValue) {
+        this.$emit('changeDropdownData', newValue)
+      }
+    }, deep: true
   },
   methods: {
     toggleDropdown() {
@@ -92,8 +88,6 @@
       }
     },
     submitSelection() {
-      // 鍦ㄨ繖閲屽鐞嗘彁浜ら�夐」鐨勯�昏緫
-      console.log("宸查�夋嫨鐨勯�夐」:", this.selectedOptions);
       // 閲嶇疆閫夐」骞堕殣钘忕‘璁ゆ寜閽�
       this.selectedOptions = [];
       this.showConfirmButton = false;
@@ -105,10 +99,14 @@
       this.showDropdown = true;
     },
     //鏆撮湶
-     changeSelectData(value){
+    changeSelectData(value) {
       this.selectedOptions = value
-
-  }
+    },
+    handleChange(event) {
+      // 褰撻�変腑椤瑰彉鍖栨椂瑙﹀彂  
+      // 閫氱煡鐖剁粍浠舵柊鐨勯�変腑鍊�  
+      this.$emit('changeDropdownData', event.target.value);
+    },
   },
 };
 </script>
@@ -127,6 +125,7 @@
   right: -31%;
   top: -21%;
 }
+
 .dropdown {
   min-width: 200px;
   position: relative;
@@ -163,14 +162,16 @@
   margin-right: 4px;
   margin-bottom: 4px;
 }
+
 .selected-value .selected-value-txt {
   height: 24px;
-    display: inline-block;
+  display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 80px;
 }
+
 .selected-value .delete {
   margin-left: 4px;
   cursor: pointer;

--
Gitblit v1.9.1