From a8da6c44895f90bc6d33df129bccd424bf73be3e Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期二, 31 十二月 2024 18:11:02 +0800
Subject: [PATCH]       小窗

---
 src/books/artAndDrama/view/components/chapter001.vue |  203 ++++++++++++++++++++++++++++----------------------
 1 files changed, 115 insertions(+), 88 deletions(-)

diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index af294c1..65f6b5a 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -4,8 +4,8 @@
       <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"
-            @play="audioPlay"></audio>
+          <audio style="margin-top: 1em" :src="auidoPathOne" controls controlslist="noplaybackrate nodownload"
+            class="audio"></audio>
         </h1>
         <div class="bodystyle">
           <div class="bk">
@@ -14,7 +14,7 @@
                 <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
               </p>
             </div>
-            <p class="block" style="margin:  8% 5% 5% 7%">
+            <p class="block mar-block">
               鍦ㄦ晠浜嬨�婁竴鍧楀ザ閰�嬩腑锛岃殏铓佸搴殑姣忎竴浣嶆垚鍛橀兘涓轰簡鍏卞悓鐨勭洰鏍囧垎宸ュ崗浣溿�佸姫鍔涘鏂楋紝鍦ㄩ潰瀵硅鎯戝拰鎸戞垬鏃舵洿鏄弗浜庡緥宸便�侀伒瀹堝洟闃熺邯寰嬨�傛湰鍗曞厓锛岃鎴戜滑璇讳竴璇汇�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽涔犺殏铓佷滑鐨勪紭绉�鍝佹牸鍚э紒
             </p>
           </div>
@@ -37,18 +37,19 @@
           <h3 class="lefth3" id="c001">
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
-          <p class="text">
+          <p class="text ">
             鍦ㄨ瑷�琛ㄨ堪涓紝涓轰簡绐佸嚭鎴栧己璋冩煇浜涙剰鎬濓紝鎴戜滑浼氫娇鐢ㄢ�滈�昏緫閲嶉煶鈥濊繖涓�鎶�宸с�傚悓鏍蜂竴鍙ヨ瘽锛屼笉鍚岀殑閫昏緫閲嶉煶鍙互琛ㄨ揪鍑轰笉涓�鏍风殑鎰忔�濄��
           </p>
-          <p class="text">
-            <span class="hs1">鈼�</span>澶у0鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
+          <p class="text rhombusFather">
+            <span class="hs1 rhombus">鈼�</span>澶у0鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
           </p>
           <h1>
             <!-- <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
-              @play="audioPlay"></audio> -->
+            ></audio> -->
           </h1>
           <!-- 杩炵嚎棰� -->
-          <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color"></matching>
+          <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color"
+            :bordercolor="'#fff'"></matching>
           <p class="text">灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
         </div>
         <p><br /></p>
@@ -64,21 +65,24 @@
         <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 " @play="videoPlay"
+              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')" />
+              <img
+                :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg"
+                alt="" class="collect-btn" @click="handleCollect('video')" />
             </el-tooltip>
           </p>
         </div>
@@ -100,11 +104,10 @@
           <h3 class="lefth3" id="c003">
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
-          <p class="text">
-            <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+          <p class="text rhombusFather">
+            <span class="hs1 rhombus" style="">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
           </p>
-          <h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"
-              @play="audioPlay"></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>
@@ -121,8 +124,8 @@
           <h3 class="lefth3" id="c004">
             <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
           </h3>
-          <p class="text">
-            <span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
+          <p class="text rhombusFather">
+            <span class="hs1 rhombus">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
           </p>
           <hr style="margin-left: 9%; margin-top: 10%; width: 25%;" />
           <p class="note left1 references">
@@ -147,14 +150,13 @@
           <h3 class="lefth3" id="c006">
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
-          <p class="text">
-            <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+          <p class="text rhombusFather">
+            <span class="hs1 rhombus">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
           </p>
           <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"
-              @play="audioPlay"></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>
@@ -196,16 +198,19 @@
           <h1 class="center openImgBox">
             <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
           </h1>
-          <p class="text">
+          <p class="text rhombusFather">
             <span
-              class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫0闊冲嚭鐜帮細涓�涓0闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓0闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓g殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
+              class="hs1 rhombus">鈼�</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 special-P">姝d箟闃熼暱锛�
+            <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" class="w90 ma-l-40"
+              @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
+              @blur="handleBlur('one')"></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 special-P">榛戞殫闃熼暱锛�
+            <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6" class="w90 ma-l-40"
+              @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
+              @blur="handleBlur('two')"></textarea>
           </p>
         </div>
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -225,12 +230,11 @@
           <h3 class="lefth3" id="c007">
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
-          <p class="text">
-            <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+          <p class="text rhombusFather">
+            <span class="hs1 rhombus">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
           </p>
           <h1>
-            <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"
-              @play="audioPlay"></audio>
+            <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
           </h1>
 
           <div class="bj3">
@@ -247,16 +251,16 @@
           <h3 class="lefth3" id="c008">
             <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
           </h3>
-          <p class="text">
-            <span class="hs1">鈼�</span>鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
+          <p class="text rhombusFather">
+            <span class="hs1 rhombus">鈼�</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%;" />
@@ -284,8 +288,8 @@
           <p class="center openImgBox">
             <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
           </p>
-          <p class="text">
-            <span class="hs1">鈼�</span>铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
+          <p class="text rhombusFather">
+            <span class="hs1 rhombus">鈼�</span>铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
           </p>
         </div>
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -305,37 +309,37 @@
           <h3 class="lefth3" id="c009">
             <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
           </h3>
-          <p class="text ends">
-            <span><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</span>
-            <span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"
-            @play="audioPlay"></audio> </span>
-          </p> 
+          <p class="text ends rhombusFather">
+            <span><span class="hs1 rhombuSpecial">鈼�</span>鏀惧ぇ缂╁皬</span>
+            <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"
-              @play="audioPlay"></audio> </span>
+          <p class="text ends rhombusFather">
+            <span><span class="hs1 rhombuSpecial">鈼�</span>鎻愬崌鑻规灉鑲�</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"
-              @play="audioPlay"></audio></span>
+          <p class="text ends rhombusFather">
+            <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>寰瑧璇粹�渁ng鈥�</span>
+            <span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload"
+                class="audio"></audio></span>
           </p>
           <p class="text">
             璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚0闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
           </p>
 
-          <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"
-              @play="audioPlay"></audio></span>
-            
+          <p class="text ends rhombusFather">
+            <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</span>
+            <span style="margin-left: -4%;"><audio :src="auidoPathNine" controls
+                controlslist="noplaybackrate nodownload" class="audio"></audio></span>
+
           </p>
           <p class="text">
             鎯宠薄鑷繁绔欏湪涓�搴ч珮灞变笂锛屽ソ鏈嬪弸鈥滈樋姣涒�濈珯鍦ㄥ闈㈢殑楂樺北涓婏紝浣犺濡備綍鍠婁粬鍛紵
@@ -358,22 +362,23 @@
           <h3 class="lefth3" id="c010">
             <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
           </h3>
-          <p class="text"><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
+          <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
           <p class="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" @play="videoPlay"
+              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')" />
+              <img
+                :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg"
+                alt="" class="collect-btn" @click="handleCollect('video')" />
             </el-tooltip>
           </p>
         </div>
@@ -391,6 +396,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 +409,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 {
@@ -424,8 +436,10 @@
       auidoPathSeven: "",
       auidoPathEight: "",
       auidoPathNine: "",
-      accentColor:"",
-      color:"#fff",
+      accentColor: "",
+      color: "#fff",
+      isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�  
+      collectResourceList: [],
       chapterData: {
         isCollectImg: false,
         isCollectVideo: false,
@@ -549,7 +563,7 @@
       questions: [
         {
           analysisCon: "undefined",
-          answer: ['A','B'],
+          answer: ['A', 'B'],
           difficulty: 0,
           id: 1,
           isCollect: false,
@@ -680,10 +694,6 @@
           two: "",
           three: "",
           four: "",
-          five: "",
-          six: "",
-          seven: "",
-          enight: "",
         },
         reading: {
           one: "",
@@ -729,7 +739,7 @@
       );
       this.auidoPathSeven = await getResourcePath(
         "27fcd83f77a10ecbf97970863e2653c3"
-      ); 
+      );
       this.auidoPathEight = await getResourcePath(
         "3d7f52cc80f8ed8994a046b418399116"
       );
@@ -737,33 +747,48 @@
         "3729175530def1b0baca68e0bd344862"
       );
     },
+    handleFocus(id) {
+      this.isFocused = id; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue  
+    },
+    handleBlur(id) {
+      this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse  
+    },
     setBookQuestion() {
-      console.log("淇濆瓨");
       localStorage.setItem(
         "artAndDrama-book-question-one",
         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",
+        "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>
@@ -772,7 +797,8 @@
 .w70 {
   width: 78%;
 }
-.choice{
+
+.choice {
   border: 1px solid green;
   border-radius: 10px;
   padding: 0 10px;
@@ -780,6 +806,7 @@
   font-family: "STkaiti";
   font-size: 19px;
 }
+
 .fw-400 {
   font-weight: 400 !important;
 }

--
Gitblit v1.9.1