From f77e02b69e4512f00251929b14888f3e6bbac37f Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 09 九月 2024 10:41:19 +0800
Subject: [PATCH] 艺术戏剧(bug解决)

---
 src/books/artAndDrama/view/components/chapter002.vue |  968 ++++++++++++++++++++++++++------------------------------
 1 files changed, 443 insertions(+), 525 deletions(-)

diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index 1fb35c7..fd20564 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -1,11 +1,10 @@
 <template>
   <div class="chapter" num="3">
-    <div class="page-box" page="14" style="min-height: auto">
+    <div class="page-box" page="14">
       <div v-if="showPageList.indexOf(14) > -1">
         <h1 id="a004">
-          <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
           <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
-          <audio :src="auidoPathOne" controls></audio>
+          <audio style="margin-top: 1em;" :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
         </h1>
         <div class="bodystyle">
           <div class="bk">
@@ -14,624 +13,543 @@
                 <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
               </p>
             </div>
-
-            <p class="block">
+            <p class="block" style="margin:  8% 5% 5% 7%">
               鎴忓墽琛ㄦ紨涓殑鍔ㄤ綔銆佷綋鎬併�佺溂绁炪�佸0闊冲湪濉戦�犺鑹叉椂璧峰埌浜嗛噸瑕佺殑浣滅敤銆傛湰鍗曞厓鎴戜滑灏嗙户缁涔犮�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽苟浠ュ伓鍓х殑褰㈠紡杩涜琛ㄦ紨銆�
             </p>
           </div>
         </div>
         <p><br /></p>
-        <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+        <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-right">11</div>
+        </div>
       </div>
     </div>
-    <div class="page-box" page="15" style="min-height: auto">
+    <div class="page-box" page="15">
       <div v-if="showPageList.indexOf(15) > -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>
-        <div class="bodystyle">
-          <img src="../../assets/images/page5.png" alt="" />
-          <h2 id="b006">绗竴璇俱��浜斿畼鐨勫姏閲�</h2>
+        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+        <div class="bodystyle" style="margin-top: 3%">
+          <h2 id="b006" class="problem">绗竴璇俱��浜斿畼鐨勫姏閲�</h2>
           <h3 class="lefth3" id="c011">
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
-          <p><span class="hs1">鈼�</span>鎴戞槸灏忕敾瀹�</p>
-          <p>淇濇寔澶撮儴涓嶅姩锛岃瘯鐫�鐢ㄧ溂绁炵敾鍑轰笅闈㈢殑鍥炬鍚э紒</p>
-          <p class="center">
+          <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鎴戞槸灏忕敾瀹�</p>
+          <p class="text">淇濇寔澶撮儴涓嶅姩锛岃瘯鐫�鐢ㄧ溂绁炵敾鍑轰笅闈㈢殑鍥炬鍚э紒</p>
+          <p class="center openImgBox">
             <img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
           </p>
-          <p><span class="hs1">鈼�</span>鍡呰澶у啋闄�</p>
-          <p>
-            浣犳渶鐖卞悆鐨勯鐗╂槸_________銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+          <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鍡呰澶у啋闄�</p>
+          <p class="text">
+            浣犳渶鐖卞悆鐨勯鐗╂槸 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
+              @change="setBookQuestion" style="width: 13%" />銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
           </p>
-          <p>
-            浣犳渶涓嶇埍鍚冪殑椋熺墿鏄痏________銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+          <p class="text">
+            浣犳渶涓嶇埍鍚冪殑椋熺墿鏄� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
+              @change="setBookQuestion" style="width: 13%" />銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
           </p>
-          <h3 class="lefth3" id="c012">
+          <h3 class="lefth3 openImgBox" id="c012">
             <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
           </h3>
-          <p>
-            <span class="hs1">鈼�</span
-            >浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
-          </p>
-          <p class="center">
-            <img class="img-e" alt="" src="../../assets/images/0016-2.jpg" />
-          </p>
+          <div style="display: flex;  justify-content: flex-start;">
+            <p class="text rhombusFather" style="width: 50%">
+              <span class="hs1 rhombus">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
+            </p>
+            <p class="openImgBox" style="width: 50%">
+              <img class="img-e" alt="" src="../../assets/images/2-1.gif" />
+            </p>
+          </div>
         </div>
-        <p><br /></p>
-        <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+        <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-left">12</div>
+        </div>
       </div>
     </div>
-    <!--<div class="page-box" page="16" style="min-height: auto">
-        <div v-if="showPageList.indexOf(16) > -1">
-          <h1>
-            <img
-              src="../../assets/images/page6-header-green.png"
-              alt=""
-              style="height: auto; width: 100%"
-            />
-          </h1>
-          <div class="bodystyle">
-            <h1 class="lefth3" id="c002">
-              <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
-            </h1>
-            <p><span class="hs1">鈼�</span>璇烽�夊嚭浣犺涓烘纭殑绛旀銆�</p>
-            <p class="center">
-              <img class="img-e" alt="" src="../../assets/images/1-2铓傝殎涓惧ぇ鏍�.gif" />
-            </p>
-            <p>铓傝殎鏄吀鍨嬬殑锛堛��銆�锛夋槅铏�傦紙澶氶�夛級</p>
-            <p>A.缇ゅ眳</p>
-            <p>B.绀句細鎬�</p>
-            <p>C.鐙眳</p>
-            <p>铓傝殎鍐呴儴鏈夛紙銆�銆�锛夊垎宸ャ�傦紙澶氶�夛級</p>
-            <p>A.鏄庣‘鐨�</p>
-            <p>B.濂囨�殑</p>
-            <p>C.鏈夊簭鐨�</p>
-            <p>涓�涓紙銆�銆�锛夌兢浣撳皯涓嶄簡榛樺鐨勯厤鍚堛�傦紙澶氶�夛級</p>
-            <p>A.鍥㈢粨鐨�</p>
-            <p>B.浼樼鐨�</p>
-            <p>C.鏉炬暎鐨�</p>
-            <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"
-              style="margin-top: 40px"
-            ></video>
+    <div class="page-box" page="16">
+      <div v-if="showPageList.indexOf(16) > -1">
+        <h1>
+          <img src="../../assets/images/unit2-header-img.png" alt="" style="height: auto; width: 100%" />
+        </h1>
+        <div class="bodystyle" style="margin-top: 3%;">
+          <h2 id="b007" class="problem">绗簩璇俱��鏄庡療绉嬫</h2>
+          <h3 class="lefth3" id="c013"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+          <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"
+              @change="setBookQuestion" style="width: 70%" /></p>
+          <p class="text">绾㈣壊锛氶灜鐐��<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
+              @change="setBookQuestion" style="width: 70%" /></p>
+          <p class="text">缁胯壊锛氬彾瀛愩��<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
+              @change="setBookQuestion" style="width: 70%" /></p>
+          <p class="text">榛戣壊锛氶粦鏉裤��<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
+              @change="setBookQuestion" style="width: 70%" /></p>
+          <p class="text">钃濊壊锛氬ぇ娴枫��<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
+              @change="setBookQuestion" style="width: 70%" /></p>
+          <h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt=""
+              src="../../assets/images/czysj.jpg" /></h3>
+          <!-- <p class="text"><span class="hs1">鈼�</span>闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��</p> -->
+          <drag :question="dragQuestion" :page="16" class="drag-text" />
+          <!-- <choice class="text" :questions="questions"  :primaryColor="accentColor"  hoverBackgroundColor="green" hoverColor="white"></choice> -->
+          <p class="center  openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
+        </div>
+        <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-right">13</div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="17">
+      <div v-if="showPageList.indexOf(17) > -1">
+        <h1>
+          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+        </h1>
+        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+        <div class="bodystyle" style="margin-top: 3%;">
+          <h2 id="b008" class="problem">绗笁璇俱��闂诲0璇嗕汉</h2>
+          <h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+          <p class="text">甯歌█閬擄細鑹█涓�鍙ヤ笁鍐殩锛屾伓璇激浜哄叚鏈堝瘨銆傝瑷�鍦ㄤ汉涓庝汉鐨勪氦寰�涓捣鐫�閲嶈鐨勪綔鐢紝鏈夌潃鏃犵┓鐨勫姏閲忋��</p>
+          <p class="text t-l rhombusFather" ><span class="hs1 rhombus">鈼�</span>濡傛灉鏈嬪弸蹇冩儏涓嶅ソ锛屼綘璇ユ�庝箞瀹夋叞浠�/濂瑰憿锛�
+            <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>
+          </p>
+
+          <p class="text t-l rhombusFather"><span class="hs1 rhombus">鈼�</span>濡傛灉浣犻個璇峰ソ鏈嬪弸鏉ュ閲屽仛瀹紝浣犺璇翠粈涔堟潵娆㈣繋浠�/濂瑰憿锛�
+            <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>
+          </p>
+
+          <h3 class="lefth3" id="c016" style="margin-top: 7%;"><img class="img-gn1" alt=""
+              src="../../assets/images/czysj.jpg" /></h3>
+          <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>璇锋牴鎹彁绀鸿鍑哄彞瀛愶紝娉ㄦ剰澹伴煶鍜岃姘旂殑鍙樺寲銆�</p>
+          <p class="text"><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙嫛鐚剧殑铓傝殎锛屾兂瑕佹妸濂堕叒鍋峰伔鍦板崰涓哄繁鏈夛級</p>
+          <p class="text"><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙杽鑹殑铓傝殎锛屽湪甯姪浠栦汉鍚庡緱鍒颁簡濂栧姳锛�</p>
+          <p class="text"><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜弗鑲冪殑铓傝殎闃熼暱锛屽悜闃熶紞鍙戝嚭鍛戒护锛�</p>
+        </div>
+        <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-left">14</div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="18">
+      <div v-if="showPageList.indexOf(18) > -1">
+        <h1>
+          <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
+        </h1>
+        <div class="bodystyle" style="margin-top: 3%">
+          <p class="text"><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜竴鍙急灏忕殑铓傝殎锛屽湪鍚戣殏铓侀槦闀胯姹備紤鎭級</p>
+          <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-3.gif" /></p>
+        </div>
+        <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-right">15</div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="19">
+      <div v-if="showPageList.indexOf(19) > -1">
+        <h1>
+          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+        </h1>
+        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+        <div class="bodystyle" style="margin-top: 3%;">
+          <h2 id="b009" class="problem">绗洓璇俱��鐪熷惉鐪熺湅鐪熸劅鍙�</h2>
+          <h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
+          <p class="text">寰呬汉鎺ョ墿鏈夌ぜ鏈夎妭銆佽唉鍗戞伃鏁紝鍦ㄨ浠栦汉鎰熷埌濡傛矏鏄ラ鐨勫悓鏃讹紝涔熶細璁╄嚜宸卞彈鍒颁粬浜虹殑灏婇噸鍜岀悊瑙c�傝璇翠竴璇达紝鍦ㄤ笅闈㈣繖浜涘満鏅腑浣犲簲璇ュ浣曞仛锛�</p>
+          <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>浣犵湅鍒板濡堢殑姘存澂娌℃按浜嗐��</p>
+          <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鐢垫閲岋紝浣犵珯鍦ㄦ渶鍓嶆帓锛屽悗闈㈢殑浜洪渶瑕佷笅鐢垫銆�</p>
+          <h3 class="lefth3" id="c018" style="margin-top: 7%;"><img class="img-gn1" alt=""
+              src="../../assets/images/czysj.jpg" /></h3>
+          <div style="display: flex; justify-content: flex-start; ">
+            <p class="text" style="width: 50%;">
+              浣犵煡閬撳悧锛熸棤瀹炵墿璁粌鏄竴绉嶈缁冩紨鍛樼殑鏈夋晥鏂规硶锛屼笉浠呰兘澶熷煿鍏绘紨鍛樿壇濂界殑鎯宠薄鑳藉姏锛屾洿鑳藉鍩瑰吇鍏惰鍔ㄧ殑閫昏緫鎬у拰鎯呮櫙閫傚簲鎬э紝鏈�缁堟彁楂樺叾濉戦�犱汉鐗╁舰璞$殑鑳藉姏銆�</p>
+            <div class="openImgBox" style="width: 50%"><img class="img-e" alt="" src="../../assets/images/2-4.gif" />
+            </div>
           </div>
-  
-          <p class="center">
-            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
+          <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>璇疯瘯鐫�鐢ㄦ棤瀹炵墿琛ㄦ紨鐨勬柟寮忔妸涓嬮潰鐨勬儏鏅〃婕斿嚭鏉ュ惂锛�</p>
+          <p class="center text"><img class="img-0" style="width: 100%; height: auto;" lt=""
+              src="../../assets/images/0020-2.jpg" /></p>
+        </div>
+        <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-left">16</div>
+        </div>
+      </div>
+
+    </div>
+    <div class="page-box" page="20">
+      <div v-if="showPageList.indexOf(20) > -1">
+        <h1>
+          <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
+        </h1>
+        <div class="bodystyle" style="margin-top: 3%">
+          <h2 id="b010" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
+          <h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
+          <p class="text ends rhombusFather">
+            <span><span class="hs1 rhombuSpecial">鈼�</span>鍚圭焊缁冧範</span>
+            <span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload"
+                class="audio"></audio></span>
+          </p>
+          <p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" />
+          </p>
+          <p class="text">鎵句竴寮犵焊宸撅紝灏嗗畠鎸夊湪澧欎笂銆傜Щ寮�鍙屾墜锛屽姫鍔涚敤姘旀伅灏嗙焊鈥滈拤鈥濆湪澧欓潰涓婏紝涓嶈璁╁畠鍚戜笅婊戣惤銆�</p>
+          <p class="text ends rhombusFather">
+            <span> <span class="hs1 rhombuSpecial">鈼�</span>鍚圭瑪缁冧範</span>
+            <span> <audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload"
+                class="audio"></audio></span>
+          </p>
+          <p class="text">灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙f皵灏嗗畠鍚瑰�掋��</p>
+          <p class="text ends rhombusFather">
+            <span><span class="hs1 rhombuSpecial">鈼�</span>鍚硅瀛愮粌涔�</span>
+            <span> <audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload"
+                class="audio"></audio></span>
+          </p>
+          <p class="text">灏嗕竴鍙鏂欒鎶涜嚦绌轰腑锛屽拰浣犵殑灏忎紮浼翠竴璧疯疆娴佸惞姘旓紝閬垮厤濉戞枡琚嬭惤鍦般��</p>
+        </div>
+        <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-right">17</div>
+        </div>
+      </div>
+    </div>
+    <div class="page-box" page="21">
+      <div v-if="showPageList.indexOf(21) > -1">
+        <h1>
+          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+        </h1>
+        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+        <div class="bodystyle" style="margin-top: 3%;">
+          <p class="text ends rhombusFather">
+            <span style="text-wrap: nowrap"> <span class="hs1 rhombuSpecial">鈼�</span>鍚逛箳涔撶悆缁冧範</span>
+            <span> <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload"
+                class="audio"></audio></span>
+          </p>
+          <p class="text">鐢ㄦ皵鎭皢妗岄潰涓婄殑涔掍箵鐞冧粠鈥滆捣鐐光�濊繍閫佽嚦鈥滅粓鐐光�濓紝杩愰�佽繃绋嬩腑閬垮厤涔掍箵鐞冭Е纰伴殰纰嶇墿銆�</p>
+          <h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt=""
+              src="../../assets/images/tzyys.jpg" /></h3>
+          <p class="text rhombusFather">
+            <span class="hs1 rhombus">鈼�</span>璇疯蛋杩涘墽鍦鸿鐪嬩笉鍚屽墽绉嶇殑鐜板満婕斿嚭锛屾劅鍙楁垙鍓х殑榄呭姏鍚э紒
+          </p>
+          <p class="center text">
+            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
+              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
+              controlslist="nodownload" class="w100 video"
+              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
+          </p>
+          <p class="center videoname">
+            <span>瑙嗛锛氭儫濡欐儫鑲栫殑浜虹墿 </span>
+            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
+              placement="top-start">
+              <img :src="collectResourceList.findIndex(item => item.id == 'a3c9b55ac8227e4c885384ff2fc6c0e7') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
+                @click="handleCollect('video')" />
+            </el-tooltip>
           </p>
         </div>
-      </div>
-      <div class="page-box" page="17" style="min-height: auto">
-        <div v-if="showPageList.indexOf(17) > -1">
-          <h1>
-            <img
-              src="../../assets/images/header-green.png"
-              alt=""
-              style="width: 100%; height: auto"
-            />
-          </h1>
-          <div class="bodystyle">
-            <img src="../../assets/images/page5.png" alt="" />
-            <h2 id="b002">绗簩璇俱��娲ユ触涔愰亾</h2>
-            <h3 class="lefth3" id="c003">
-              <img class="img-gn1" alt="" src="image/rhybx.jpg" />
-            </h3>
-            <p>
-              <span class="hs1">鈼�</span
-              >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
-            </p>
-            <audio :src="auidoPathThree" controls></audio>
-            <div class="bj3">
-              <p class="center">
-                <span class="hs"
-                  >鏄�<a id="w1"></a><a href="chapter003.html#m1"><sup>[1]</sup></a
-                  >锛堣妭閫夛級</span
-                >
-              </p>
-              <p class="center">鏈辫嚜娓�</p>
-              <p class="block">
-                鐩兼湜鐫�锛�<span class="un1">鐩兼湜鐫�</span>锛屼笢椋庢潵浜嗭紝鏄ュぉ鐨勮剼姝�<span
-                  class="un1"
-                  >杩�</span
-                >浜嗐��
-              </p>
-              <p class="block">
-                涓�鍒囬兘鍍�<span class="un1">鍒氱潯閱�</span>鐨勬牱瀛愶紝娆f鐒�<span
-                  class="un1"
-                  >寮犲紑</span
-                >浜嗙溂銆傚北<span class="un1">鏈楁鼎</span>璧锋潵浜嗭紝姘�<span class="un1"
-                  >娑�</span
-                >璧锋潵浜嗭紝澶槼鐨勮劯<span class="un1">绾�</span>璧锋潵浜嗐��
-              </p>
-            </div>
-            <h3 class="lefth3" id="c004">
-              <img class="img-gn1" alt="" src="image/czysj.jpg" />
-            </h3>
-            <p>
-              <span class="hs1">鈼�</span
-              >鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
-            </p>
-            <hr />
-            <p class="note">
-              <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
-              鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
-              涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
-            </p>
-          </div>
-  
-          <p class="center">
-            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-          </p>
+        <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-left">18</div>
         </div>
       </div>
-      <div class="page-box" page="18" style="min-height: auto">
-        <div v-if="showPageList.indexOf(18) > -1">
-          <h1>
-            <img
-              src="../../assets/images/header-green.png"
-              alt=""
-              style="width: 100%; height: auto"
-            />
-          </h1>
-          <div class="bodystyle">
-            <img src="../../assets/images/page5.png" alt="" />
-            <h2 id="b003">绗笁璇俱��鍐呭績鐨勫0闊�</h2>
-            <h1 class="lefth3" id="c005">
-              <img
-                class="img-gn1"
-                alt=""
-                src="../../assets/images/1-3.gif"
-                style="height: auto; width: 50%"
-              />
-            </h1>
-            <p>
-              <span class="hs1">鈼�</span
-              >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
-            </p>
-            <p class="center">
-              <img class="img-e" alt="" src="image/0009-1.jpg" />
-            </p>
-            <audio :src="auidoPathTwo" controls></audio>
-            <div class="bj3">
-              <p class="center">
-                <span class="hs"
-                  >鏄�<a id="w1"></a><a href="chapter004.html#m1"><sup>[1]</sup></a
-                  >锛堣妭閫夛級</span
-                >
-              </p>
-              <p class="center">鏈辫嚜娓�</p>
-              <p class="block">
-                灏忚崏鍋峰伔鍦颁粠鍦熼噷<span class="un1">閽诲嚭鏉�</span>锛�<span class="un1"
-                  >瀚╁鐨�</span
-                >锛�<span class="un1">缁跨豢鐨�</span>銆傚洯瀛愰噷锛岀敯閲庨噷锛�<span
-                  class="un1"
-                  >鐬�</span
-                >鍘伙紝涓�澶х墖涓�澶х墖婊℃槸鐨勩��<span class="un1">鍧�</span>鐫�锛�<span
-                  class="un1"
-                  >韬�</span
-                >鐫�锛�<span class="un1">鎵�</span>涓や釜<span class="un1">婊�</span
-                >鍎匡紝<span class="un1">韪�</span>鍑犺剼<span class="un1">鐞�</span
-                >锛�<span class="un1">璧�</span>鍑犺稛<span class="un1">璺�</span
-                >锛�<span class="un1">鎹�</span>鍑犲洖<span class="un1">杩疯棌</span
-                >銆傞<span class="un1">杞绘倓鎮�</span>鐨勶紝鑽�<span class="un1"
-                  >杞坏缁�</span
-                >鐨勩��
-              </p>
-            </div>
-            <h3 class="lefth3" id="c006">
-              <img class="img-gn1" alt="" src="image/czysj.jpg" />
-            </h3>
-            <p class="center">
-              <img class="img-e" alt="" src="image/0010-1.jpg" />
-            </p>
-            <hr />
-            <p class="note">
-              <a id="m1"></a><a href="chapter004.html#w1">[1]</a>
-              鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
-              涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
-            </p>
-          </div>
-        </div>
-        <p class="center">
-          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-        </p>
-      </div>
-      <div class="page-box" page="19" style="min-height: auto">
-        <div v-if="showPageList.indexOf(19) > -1">
-          <h1>
-            <img
-              src="../../assets/images/header-green.png"
-              alt=""
-              style="width: 100%; height: auto"
-            />
-          </h1>
-          <div class="bodystyle">
-            <img src="../../assets/images/page5.png" alt="" />
-            <h3 class="lefth3" id="c006">
-              <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
-            </h3>
-            <h1 class="center">
-              <img
-                class="img-e"
-                alt=""
-                src="../../assets/images/1-4.gif"
-                style="height: auto; width: 50%"
-              />
-            </h1>
-            <p>
-              <span class="hs1">鈼�</span
-              >鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫0闊冲嚭鐜帮細涓�涓0闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓0闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓g殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
-            </p>
-            <p>姝d箟闃熼暱锛氣�淿________________________________銆傗��</p>
-            <p>榛戞殫闃熼暱锛氣�淿________________________________銆傗��</p>
-          </div>
-        </div>
-        <p class="center">
-          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-        </p>
-      </div>
-      <div class="page-box" page="20" style="min-height: auto">
-        <div v-if="showPageList.indexOf(20) > -1">
-          <h1>
-            <img
-              src="../../assets/images/page6-header-green.png"
-              alt=""
-              style="width: 100%; height: auto"
-            />
-          </h1>
-          <div class="bodystyle">
-            <h2 id="b004">绗洓璇俱��韬复鍏跺</h2>
-            <h3 class="lefth3" id="c007">
-              <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
-            </h3>
-            <p>
-              <span class="hs1">鈼�</span
-              >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
-            </p>
-            <audio :src="auidoPathTwo" controls></audio>
-            <div class="bj3">
-              <p class="center">
-                <span class="hs"
-                  >鏄�<a id="w1"></a><a href="chapter005.html#m1"><sup>[1]</sup></a
-                  >锛堣妭閫夛級</span
-                >
-              </p>
-              <p class="center">鏈辫嚜娓�</p>
-              <p class="block">
-                <span class="un1">妗�</span>鏍戙��<span class="un1">鏉�</span
-                >鏍戙��<span class="un1">姊�</span
-                >鏍戯紝浣犱笉璁╂垜锛屾垜涓嶈浣狅紝閮藉紑婊′簡鑺辫刀瓒熷効銆傜孩鐨勫儚<span class="un1"
-                  >鐏�</span
-                >锛岀矇鐨勫儚<span class="un1">闇�</span>锛岀櫧鐨勫儚<span class="un1"
-                  >闆�</span
-                >銆傝姳閲屽甫鐫�鐢滃懗鍎库�︹��
-              </p>
-            </div>
-            <h3 class="lefth3" id="c008">
-              <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
-            </h3>
-            <p>
-              <span class="hs1">鈼�</span
-              >鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
-            </p>
-            <p>
-              鎴戞槸铓傝殎_________锛堝悕瀛楋級锛屼粖澶╂槸_________锛堝ぉ姘旓級锛屾垜鐨勫ザ閰壒鍒玙________锛堣交/閲嶏級锛屾垜鎰熻濂絖________锛堣韩浣撴劅瑙夛級鍟婏紒
-            </p>
-            <hr />
-            <p class="note">
-              <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
-              鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
-              涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
-            </p>
-          </div>
-        </div>
-        <p class="center">
-          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-        </p>
-      </div>
-      <div class="page-box" page="21" style="min-height: auto">
-        <div v-if="showPageList.indexOf(21) > -1">
-          <h1>
-            <img
-              src="../../assets/images/header-green.png"
-              alt=""
-              style="width: 100%; height: auto"
-            />
-          </h1>
-          <div class="bodystyle">
-            <img src="../../assets/images/page5.png" alt="" />
-            <p class="center">
-              <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
-            </p>
-            <p>
-              <span class="hs1">鈼�</span
-              >铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
-            </p>
-          </div>
-        </div>
-        <p class="center">
-          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-        </p>
-      </div>
-      <div class="page-box" page="22" style="min-height: auto">
-        <div v-if="showPageList.indexOf(22) > -1">
-          <h1>
-            <img
-              src="../../assets/images/page6-header-green.png"
-              alt=""
-              style="width: 100%; height: auto"
-            />
-          </h1>
-          <div class="bodystyle">
-            <h2 id="b005">鍗曞厓娲诲姩浠诲姟</h2>
-            <h3 class="lefth3" id="c009">
-              <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
-            </h3>
-            <p><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</p>
-            <p>
-              璇蜂綘浜ゆ浛鈥滄斁澶р�濆拰鈥滅缉灏忊�濅簲瀹樸�傚湪鈥滄斁澶р�濇椂锛屾兂璞′簲瀹樿椋炲埌澶栧お绌猴紱鍦ㄢ�滅缉灏忊�濇椂锛屾兂璞′簲瀹樺叏閮ㄧ缉灏忓埌浜嗛蓟灏栦笂銆�
-            </p>
-            <p><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</p>
-            <p>
-              鎯宠薄浣犲湪涓�涓檶鐢熺殑鍦版柟锛岃皝閮戒笉璁よ瘑锛岀獊鐒堕亣瑙佷簡濂芥湅鍙嬶紝浣犲緢楂樺叴锛屼笂鍓嶅拰浠�/濂规墦鎷涘懠銆傚仛涓�鍋氫綘姝ゆ椂鐨勮〃鎯呭惂銆�
-            </p>
-            <p><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</p>
-            <p>
-              璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚0闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
-            </p>
-            <p><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</p>
-            <p>
-              鎯宠薄鑷繁绔欏湪涓�搴ч珮灞变笂锛屽ソ鏈嬪弸鈥滈樋姣涒�濈珯鍦ㄥ闈㈢殑楂樺北涓婏紝浣犺濡備綍鍠婁粬鍛紵
-            </p>
-          </div>
-        </div>
-        <p class="center">
-          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-        </p>
-      </div>
-      <div class="page-box" page="23" style="min-height: auto">
-        <div v-if="showPageList.indexOf(23) > -1">
-          <h1>
-            <img
-              src="../../assets/images/page6-header-green.png"
-              alt=""
-              style="width: 100%; height: auto"
-            />
-          </h1>
-          <div class="bodystyle">
-            <h3 class="lefth3" id="c010">
-              <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
-            </h3>
-            <p><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
-            <p>
-              瀛旇瀺鍥涘瞾灏辨噦绀艰矊銆佺煡璋﹁锛屾槸鎴戜滑瀛︿範鐨勫ソ姒滄牱锛岃鎴戜滑杩愮敤鏈崟鍏冪殑鎴忓墽鐭ヨ瘑锛屾妸浠栫殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒
-            </p>
-            <p class="center">
-              <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"
-              style="margin-top: 40px"
-            ></video>
-            </p>
-          </div>
-        </div>
-        <p class="center">
-          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-        </p>
-      </div> -->
+    </div>
   </div>
 </template>
-    
-    <script>
-//import matching from "@/components/matching/matching.vue";
+
+<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: { matching },
+  components: { drag },
   props: {
     showPageList: {
       type: Array,
     },
-  }, 
-   //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
-  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 {
+      collectImg: require("../../assets/images/icon/heart.png"),
+      collectCheck: require("../../assets/images/icon/heart-check.png"),
       videoPathOne: "",
-      videoPathTwo: "",
-      videoPathThree: "",
-      videoPathFour: "",
       auidoPathOne: "",
       auidoPathTwo: "",
       auidoPathThree: "",
-      rawData: {
-        left: [
-          {
-            oldId: "FB34",
-            txt: "鎴戣浣犲悆鑻规灉鍚э紒",
-          },
-          {
-            oldId: "64D6",
-            txt: "鎴戣浣犲悆鑻规灉鍚э紒",
-          },
-          {
-            oldId: "2ED4",
-            txt: "鎴戣浣犲悆鑻规灉鍚э紒",
-          },
-          {
-            oldId: "44DE",
-            txt: "鎴戣浣犲悆鑻规灉鍚э紒",
-          },
-        ],
-        right: [
-          {
-            oldId: "64D6",
-            txt: "寮鸿皟鏄瀹�",
-          },
-          {
-            oldId: "FB34",
-            txt: "寮鸿皟璇风殑鏄�滀綘鈥�",
-          },
-          {
-            oldId: "2ED4",
-            txt: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
-          },
-          {
-            oldId: "44DE",
-            txt: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
-          },
-        ],
+      auidoPathFour: "",
+      auidoPathFive: "",
+      isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
+      collectResourceList:[],
+      chapterData: {
+        isCollectImg: false,
+        isCollectVideo: false,
+        txtOne: "",
+        txtTwo: "",
       },
-      question: {
-        KnowledgePoint: "123",
-        analysis: "123",
-        answer: [
-          {
-            id: "FB34",
-            linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
-            value: "寮鸿皟鏄瀹�",
-          },
-          {
-            id: "64D6",
-            linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
-            value: "寮鸿皟璇风殑鏄�滀綘鈥�",
-          },
-          {
-            id: "2ED4",
-            linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
-            value: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
-          },
-          {
-            id: "44DE",
-            linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
-            value: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
-          },
-        ],
-        optionStyle: undefined,
-        id: 489306,
-        options: {
-          linkValues: [
+      questionData: {
+        warnUp: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+          six: "",
+          seven: "",
+        },
+        reading: {
+          one: "",
+          two: "",
+        },
+        table: {
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+          six: "",
+          seven: "",
+          enight: "",
+          nine: "",
+        },
+      },
+      dragQuestion: [
+        {
+          analysisCon: null,
+          answer: ['C', 'A', 'B'],
+          difficulty: 0,
+          id: "7BC7B760",
+          isCollect: false,
+          isComplete: false,
+          isRight: null,
+          isUnfold: "",
+          isUserAnswer: false,
+          number: 1,
+          option: [
             {
-              oldId: "64D6",
-              txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
+              img: "",
+              index: "010311",
+              txt: "鑳嗗皬鐨�",
+              value: "A",
+              isShow: true
             },
             {
-              oldId: "44DE",
-              txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
+              img: "",
+              index: "010312",
+              txt: "鍠勮壇鐨�",
+              value: "B",
+              isShow: true
             },
             {
-              oldId: "FB34",
-              txt: "The clothing material is quite popular among Roman women inancient times.",
-            },
-            {
-              oldId: "2ED4",
-              txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
+              img: "",
+              index: "010313",
+              txt: "娌夌ǔ鐨�",
+              value: "C",
+              isShow: true
             },
           ],
-          values: [
+          optionStyle: "Txt",
+          questionType: "drag",
+          score: 2,
+          stem: {
+            0: "铓傝殎闃熼暱璧拌矾鏄傞鎸鸿兏銆佹浼愬潥瀹氾紝瀹冩槸涓�鍙�(",
+            1: {
+              data: "span",
+              num: 0
+            },
+            2: ")铓傝殎;灏忚殏铓佽蛋璧疯矾鏉ュ皬蹇冪考缈硷紝鐪肩椋樺拷涓嶅畾锛屽畠鏄竴鍙�(",
+            3: {
+              data: "span",
+              num: 1
+            },
+            4: ")铓傝殎;铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙�(",
+            5: {
+              data: "span",
+              num: 2,
+            },
+            6: " )铓傝殎"
+          },
+          stemStyle: "RichTxt",
+          type: "鎷栨嫿棰�",
+          userAnswer: [
             {
-              oldId: "FB34",
-              txt: "Martin  Silk",
+              vlaue: '',
+              txt: ''
             },
             {
-              oldId: "64D6",
-              txt: "The Great Wall",
+              vlaue: '',
+              txt: ''
             },
             {
-              oldId: "2ED4",
-              txt: "Chinese Food",
+              vlaue: '',
+              txt: ''
+            },
+          ]
+        },
+      ],
+      questions: [
+        {
+          analysisCon: "undefined",
+          answer: ['C', 'A', 'B'],
+          difficulty: 0,
+          id: 47775,
+          isCollect: false,
+          isComplete: false,
+          isRight: null,
+          isUnfold: "",
+          isUserAnswer: false,
+          number: 1,
+          options: [
+            {
+              "img": "",
+              "index": "3CA6",
+              "txt": "鑳嗗皬鐨�",
+              "value": "A"
             },
             {
-              oldId: "44DE",
-              txt: "Chinese Tea",
+              "img": "",
+              "index": "73EE",
+              "txt": "鍠勮壇鐨�",
+              "value": "B"
+            },
+            {
+              "img": "",
+              "index": "6AEF",
+              "txt": "娌夌ǔ鐨�",
+              "value": "C"
             },
           ],
+          optionStyle: "Image",
+          questionType: "singleChoice",
+          score: 2,
+          stem: {
+            "stemTxt": "铓傝殎闃熼暱璧拌矾鏄傞鎸鸿兏銆佹浼愬潥瀹氾紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓侊紱灏忚殏铓佽蛋璧疯矾鏉ュ皬蹇冪考缈硷紝鐪肩椋樺拷涓嶅畾锛屽畠鏄竴鍙紙銆�銆�锛夎殏铓侊紱铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓併��"
+          },
+          stemStyle: "Txt",
+          userAnswer: "",
+          // 鍗曢�夐杩欓噷鐨勫瓧娈靛唴瀹瑰氨鏄�"鍗曢�夐"
+          type: 'sort'
         },
-        questionType: "matching",
-        stem: {
-          stemTxt: "鎸夐『搴忚繛绾�",
-        },
-        stemStyle: undefined,
-        titleDescription: "1",
-        userChoise: [],
-        value: [],
-      },
+      ],
+      accentColor: 'green',
     };
   },
-
-
   methods: {
     //瑙嗛鍜岄煶棰戠殑MD5鍦板潃
     async getVidoePath() {
       this.videoPathOne = await getResourcePath(
-        "691cbd2c13198d04afc7800d0f2cafb0"
-      );
-      this.videoPathTwo = await getResourcePath(
         "a3c9b55ac8227e4c885384ff2fc6c0e7"
       );
-      this.videoPathThree = await getResourcePath(
-        "dd44a1e31b4304f50d10b2481a148411"
-      );
-      this.videoPathFour = await getResourcePath(
-        "09de7704eeaaf3a210b8c6af0a94d545"
-      );
       this.auidoPathOne = await getResourcePath(
-        "2c5f6c69b0f9f7a3c03e473cb8c977f5"
+        "0c147c73d67672d1538f76fa22793ff1"
       );
       this.auidoPathTwo = await getResourcePath(
-        "e93c0fdde08be5a4386c8c863892a287"
+        "daf62713e056d875baa37283c6190a46"
       );
       this.auidoPathThree = await getResourcePath(
-        "e93c0fdde08be5a4386c8c863892a287"
+        "126edb6a476971840e4c6abf0a3e9da5"
+      );
+      this.auidoPathFour = await getResourcePath(
+        "2485785e9a21a78bcfc58db132537ffd"
+      );
+      this.auidoPathFive = await getResourcePath(
+        "a37bb621b2591e3666e94d1a3bc23bc0"
       );
     },
+    handleFocus(id) {  
+      this.isFocused = id; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue  
+    },  
+    handleBlur(id) {  
+      this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse  
+    }, 
+    setBookQuestion() {
+      localStorage.setItem(
+        "artAndDrama-book-question-two",
+        JSON.stringify(this.questionData)
+      );
+    },
+    handleChapterData() {
+      localStorage.setItem(
+        "artAndDrama-chapter02-Data",
+        JSON.stringify(this.chapterData)
+      );
+    },
+    handleCollect(type) {
+      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>
-    
-    <style lang="less" scoped>
+
+<style lang="less" scoped>
 .w70 {
   width: 78%;
 }
+
 .fw-400 {
   font-weight: 400 !important;
 }
+
 .fz-26 {
   font-size: 26px !important;
 }
+
 .cover-img {
   position: absolute;
   top: 33%;
   left: 23%;
 }
+
 .division-line {
   width: 2px;
   height: 100%;
   background-color: red;
 }
-</style>
-    
\ No newline at end of file
+
+.drag-text {
+  margin: 0 4%;
+  font-family: "STKaiti";
+  font-size: 19px;
+}
+</style>
\ No newline at end of file

--
Gitblit v1.9.1