From 6aac0dd9c6d6bd3de148f3d6e123f9c91b1aab4b Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期二, 02 七月 2024 09:31:04 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/artAndDrama/view/components/chapter001.vue |  903 ++++++++++++++++++++++++++++++-------------------------
 1 files changed, 491 insertions(+), 412 deletions(-)

diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index cc77a5c..a521954 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="chapter" num="2">
-    <div class="page-box" page="4" style="min-height: auto">
+    <div class="page-box" page="4">
       <div v-if="showPageList.indexOf(4) > -1">
         <h1 id="a004">
-            <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
           <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
-          <audio :src="auidoPathOne" class="audio" controls></audio>
+          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"
+            ></audio>
         </h1>
         <div class="bodystyle">
           <div class="bk">
@@ -14,473 +14,389 @@
                 <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
               </p>
             </div>
-
-            <p class="block">
+            <p class="block" style="margin:  8% 5% 5% 7%">
               鍦ㄦ晠浜嬨�婁竴鍧楀ザ閰�嬩腑锛岃殏铓佸搴殑姣忎竴浣嶆垚鍛橀兘涓轰簡鍏卞悓鐨勭洰鏍囧垎宸ュ崗浣溿�佸姫鍔涘鏂楋紝鍦ㄩ潰瀵硅鎯戝拰鎸戞垬鏃舵洿鏄弗浜庡緥宸便�侀伒瀹堝洟闃熺邯寰嬨�傛湰鍗曞厓锛岃鎴戜滑璇讳竴璇汇�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽涔犺殏铓佷滑鐨勪紭绉�鍝佹牸鍚э紒
             </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">1</div>
+        </div>
       </div>
     </div>
-    <div class="page-box" page="5" style="min-height: auto">
+    <div class="page-box" page="5">
       <div v-if="showPageList.indexOf(5) > -1">
-        <h1>
-          <img
-            src="../../assets/images/header-green.png"
-            alt=""
-            style="width: 100%; height: auto"
-          />
+        <h1 style="margin-bottom: 0%">
+          <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="b001">绗竴璇俱��榻愬績鍗忓姏</h2>
+        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+        <div class="bodystyle" style="margin-top: 3%">
+          <h2 id="b001" class="problem">绗竴璇俱��榻愬績鍗忓姏</h2>
           <h3 class="lefth3" id="c001">
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
-          <p>
+          <p class="text">
             鍦ㄨ瑷�琛ㄨ堪涓紝涓轰簡绐佸嚭鎴栧己璋冩煇浜涙剰鎬濓紝鎴戜滑浼氫娇鐢ㄢ�滈�昏緫閲嶉煶鈥濊繖涓�鎶�宸с�傚悓鏍蜂竴鍙ヨ瘽锛屼笉鍚岀殑閫昏緫閲嶉煶鍙互琛ㄨ揪鍑轰笉涓�鏍风殑鎰忔�濄��
           </p>
-          <p>
-            <span class="hs1">鈼�</span
-            >澶у0鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
+          <p class="text">
+            <span class="hs1">鈼�</span>澶у0鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
           </p>
           <h1>
-            <audio :src="auidoPathTwo" class="audio" controls></audio>
+            <!-- <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
+            ></audio> -->
           </h1>
-          <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
           <!-- 杩炵嚎棰� -->
-          <matching :rawData="rawData" :item="question"></matching>
+          <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color" :bordercolor="'#fff'"></matching>
+          <p class="text">灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
         </div>
         <p><br /></p>
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
-	<div style="position: relative;">  
-      <h1 style="position: relative; z-index: 1;">  
-      <img class="img-0" alt="" src="../../assets/images/ym.jpg" />  
-      <div style="position: absolute; z-index: 99; background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; bottom: 38px; text-align: center; line-height: 30px; font-size: 20px;">2</div>     
-      </h1>  
-	</div>
-        <!-- <div style="position: relative; "> 
-            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; top: 38px; text-align: center; font-size: 25px;">2</div>
-            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
-        </div> -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-left">2</div>
+        </div>
       </div>
     </div>
-    <div class="page-box" page="6" style="min-height: auto">
+    <div class="page-box" page="6">
       <div v-if="showPageList.indexOf(6) > -1">
-        <h1>
-          <img
-            src="../../assets/images/page6-header-green.png"
-            alt=""
-            style="height: auto; width: 100%"
-          />
-        </h1>
+        <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
         <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>
+          <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>
           <p class="center openImgBox">
             <img class="img-e" alt="" src="../../assets/images/1-2铓傝殎涓惧ぇ鏍�.gif" />
+          </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>铓傝殎鏄吀鍨嬬殑锛堛��銆�锛夋槅铏�傦紙澶氶�夛級</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; border-radius: 10px; border: 2px solid green;"
-          ></video>
-          <h2>瑙嗛: 鎴戜滑鏄竴瀹朵汉</h2>
+          <p class="center videoname">
+            <span>瑙嗛锛氭垜浠槸涓�瀹朵汉 </span>
+            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
+              placement="top-start">
+              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
+                @click="handleCollect('video')" />
+            </el-tooltip>
+          </p>
         </div>
-
-        <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-right">3</div>
+        </div>
       </div>
     </div>
-    <div class="page-box" page="7" style="min-height: auto">
+    <div class="page-box" page="7">
       <div v-if="showPageList.indexOf(7) > -1">
-        <h1>
-          <img
-            src="../../assets/images/header-green.png"
-            alt=""
-            style="width: 100%; height: auto"
-          />
+        <h1 style="margin-bottom: 0%">
+          <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>
+        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+        <div class="bodystyle" style="margin-top: 3%">
+          <h2 id="b002" class="problem">绗簩璇俱��娲ユ触涔愰亾</h2>
           <h3 class="lefth3" id="c003">
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
-          <p>
-            <span class="hs1">鈼�</span
-            >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+          <p class="text">
+            <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
           </p>
-          <h1><audio :src="auidoPathThree" class="audio" controls></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>
+              <span class="hs">鏄�<a id="w1"><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>浜嗐��
             </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>璧锋潵浜嗐��
+              涓�鍒囬兘鍍�<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="../../assets/images/czysj.jpg" />
           </h3>
-          <p>
-            <span class="hs1">鈼�</span
-            >鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
+          <p class="text">
+            <span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
           </p>
-          <hr />
-          <p class="note">
+          <hr style="margin-left: 9%; margin-top: 10%; width: 25%;" />
+          <p class="note left1 references">
             <a id="m1">1</a>
-            鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
-            涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
+            鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功璇枃涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
           </p>
         </div>
-
         <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
-        <div> 
-            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">4</div>
-            <h1 style="position: relative; z-index: 1;"><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">4</div>
         </div>
       </div>
     </div>
-    <div class="page-box" page="8" style="min-height: auto">
+    <div class="page-box" page="8">
       <div v-if="showPageList.indexOf(8) > -1">
         <h1>
-          <img
-            src="../../assets/images/header-green.png"
-            alt=""
-            style="width: 100%; height: auto"
-          />
+          <img src="../../assets/images/page6-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 openImgBox" 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鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+        <div class="bodystyle" style="margin-top: 3%">
+          <h2 id="b003" class="problem">绗笁璇俱��鍐呭績鐨勫0闊�</h2>
+          <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>
-          <h1><audio :src="auidoPathTwo" class="audio" controls></audio></h1>
+          <h1 class="lefth3 openImgBox" id="c005">
+            <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
+          </h1>
+          <h1><audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"
+             ></audio></h1>
           <div class="bj3">
             <p class="center">
-              <span class="hs"
-                >鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</span
-              >
+              <span class="hs">鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</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
-              >鐨勩��
+              灏忚崏鍋峰伔鍦颁粠鍦熼噷<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>
-           <hr />
-          <p class="note">
+          <hr style="margin-left: 9%; width: 20%;" />
+          <p class="note left1 references">
             <a id="m1">1</a>
             鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
             涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
           </p>
         </div>
-      </div>
-          <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
-          <div> 
-            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">6</div>
-            <h1 style="position: relative; z-index: 1;"><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">5</div>
         </div>
+      </div>
     </div>
-    <div class="page-box" page="9" style="min-height: auto">
+    <div class="page-box" page="9">
       <div v-if="showPageList.indexOf(9) > -1">
-        <h1>
-          <img
-            src="../../assets/images/header-green.png"
-            alt=""
-            style="width: 100%; height: auto"
-          />
+        <h1 style="margin-bottom: 0%;">
+          <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">
-          <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 openImgBox">
-            <img
-              class="img-e"
-              alt=""
-              src="../../assets/images/1-4.gif"
-              style="height: auto; width: 50%"
-            />
+            <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 class="text">
+            <span
+              class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫0闊冲嚭鐜帮細涓�涓0闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓0闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓g殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
           </p>
-          <p>姝d箟闃熼暱锛氣��
-            <input
-                v-model="questionData.warnUp.one.value"
-                class="input-bottom-border fz-18"
-                @blur="handleQuestion('one')"
-                @change="setBookQuestion" />鈥�</p>
-          <p>榛戞殫闃熼暱锛氣��        <input
-                v-model="questionData.warnUp.one.value"
-                class="input-bottom-border fz-18"
-                @blur="handleQuestion('two')"
-                @change="setBookQuestion" />鈥�</p>
+          <p class="text">姝d箟闃熼暱锛氣��
+            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60"
+              @change="setBookQuestion" />銆傗��
+          </p>
+          <p class="text">榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-60"
+              @change="setBookQuestion" />銆傗��
+          </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">6</div>
         </div>
       </div>
-        <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
-        <div> 
-            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">8</div>
-            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
-        </div>
     </div>
-    <div class="page-box" page="10" style="min-height: auto">
+    <div class="page-box" page="10">
       <div v-if="showPageList.indexOf(10) > -1">
         <h1>
-          <img
-            src="../../assets/images/page6-header-green.png"
-            alt=""
-            style="width: 100%; height: auto"
-          />
+          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
         </h1>
-        <div class="bodystyle">
-          <h2 id="b004">绗洓璇俱��韬复鍏跺</h2>
+        <div class="bodystyle" style="margin-top: 3%">
+          <h2 id="b004" class="problem">绗洓璇俱��韬复鍏跺</h2>
           <h3 class="lefth3" id="c007">
             <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
           </h3>
-          <p>
-            <span class="hs1">鈼�</span
-            >璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+          <p class="text">
+            <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у0鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
           </p>
           <h1>
-            <audio :src="auidoPathTwo" class="audio" controls></audio>  
+            <audio :src="auidoPathFive" 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
-              >
+              <span class="hs">鏄�<a id="w1"><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>銆傝姳閲屽甫鐫�鐢滃懗鍎库�︹��
             </p>
           </div>
           <h3 class="lefth3" id="c008">
             <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
           </h3>
-          <p>
-            <span class="hs1">鈼�</span
-            >鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
+          <p class="text">
+            <span class="hs1">鈼�</span>鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
           </p>
-          <p>
-            鎴戞槸铓傝殎 <input
-                v-model="questionData.warnUp.one.value"
-                class="input-bottom-border fz-18"
-                style=" width: 10%;"
-                @blur="handleQuestion('three')"
-                @change="setBookQuestion" />锛堝悕瀛楋級锛屼粖澶╂槸 
-                <input
-                v-model="questionData.warnUp.one.value"
-                class="input-bottom-border fz-18"
-                style=" width: 10%;"
-                @blur="handleQuestion('four')"
-                @change="setBookQuestion" />锛堝ぉ姘旓級锛屾垜鐨勫ザ閰壒鍒� <input
-                v-model="questionData.warnUp.one.value"
-                class="input-bottom-border fz-18"
-                style=" width: 10%;"
-                @blur="handleQuestion('five')"
-                @change="setBookQuestion" />锛堣交/閲嶏級锛屾垜鎰熻濂� <input
-                v-model="questionData.warnUp.one.value"
-                class="input-bottom-border fz-18"
-                style=" width: 10%;"
-                @blur="handleQuestion('six')"
-                @change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
+          <p class="text">
+            鎴戞槸铓傝殎 <input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" style=" width: 10%;"
+              @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%;"
+              @change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
           </p>
-          <hr />
-          <p class="note">
+          <hr style="margin-left: 9%; width: 20%;" />
+          <p class="note references">
             <a id="m1">1</a>
             鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
             涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
           </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">7</div>
+        </div>
       </div>
-      <p class="center">
-        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-      </p>
     </div>
-    <div class="page-box" page="11" style="min-height: auto">
+    <div class="page-box" page="11">
       <div v-if="showPageList.indexOf(11) > -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="" />
+        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+        <div class="bodystyle" style="margin-top: 3%;">
+
           <p class="center openImgBox">
             <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
           </p>
-          <p>
-            <span class="hs1">鈼�</span
-            >铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
+          <p class="text">
+            <span class="hs1">鈼�</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">8</div>
+        </div>
       </div>
-      <p class="center">
-        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-      </p>
     </div>
-    <div class="page-box" page="12" style="min-height: auto">
+    <div class="page-box" page="12">
       <div v-if="showPageList.indexOf(12) > -1">
         <h1>
-          <img
-            src="../../assets/images/page6-header-green.png"
-            alt=""
-            style="width: 100%; height: auto"
-          />
+          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
         </h1>
-        <div class="bodystyle">
-          <h2 id="b005">鍗曞厓娲诲姩浠诲姟</h2>
+        <div class="bodystyle" style="margin-top: 3%">
+          <h2 id="b005" class="problem">鍗曞厓娲诲姩浠诲姟</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 class="text ends">
+            <span><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</span>
+            <span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"
+           ></audio> </span>
+          </p> 
+          <p class="text">
             璇蜂綘浜ゆ浛鈥滄斁澶р�濆拰鈥滅缉灏忊�濅簲瀹樸�傚湪鈥滄斁澶р�濇椂锛屾兂璞′簲瀹樿椋炲埌澶栧お绌猴紱鍦ㄢ�滅缉灏忊�濇椂锛屾兂璞′簲瀹樺叏閮ㄧ缉灏忓埌浜嗛蓟灏栦笂銆�
           </p>
-          <p><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</p>
-          <p>
+
+          <p class="text ends">
+            <span><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</span>
+            <span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"
+              ></audio> </span>
+          </p>
+          <p class="text">
             鎯宠薄浣犲湪涓�涓檶鐢熺殑鍦版柟锛岃皝閮戒笉璁よ瘑锛岀獊鐒堕亣瑙佷簡濂芥湅鍙嬶紝浣犲緢楂樺叴锛屼笂鍓嶅拰浠�/濂规墦鎷涘懠銆傚仛涓�鍋氫綘姝ゆ椂鐨勮〃鎯呭惂銆�
           </p>
-          <p><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</p>
-          <p>
+          <p class="text ends">
+            <span><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</span>
+            <span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload" class="audio"
+             ></audio></span>
+          </p>
+          <p class="text">
             璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚0闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
           </p>
-          <p><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</p>
-          <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"
+              ></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">9</div>
+        </div>
       </div>
-      <p class="center">
-        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-      </p>
     </div>
-    <div class="page-box" page="13" style="min-height: auto">
+    <div class="page-box" page="13">
       <div v-if="showPageList.indexOf(13) > -1">
         <h1>
-          <img
-            src="../../assets/images/page6-header-green.png"
-            alt=""
-            style="width: 100%; height: auto"
-          />
+          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
         </h1>
-        <div class="bodystyle">
+        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+        <div class="bodystyle" style="margin-top: 3%">
           <h3 class="lefth3" id="c010">
             <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
           </h3>
-          <p><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
-          <p>
+          <p class="text"><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
+          <p class="text">
             瀛旇瀺鍥涘瞾灏辨噦绀艰矊銆佺煡璋﹁锛屾槸鎴戜滑瀛︿範鐨勫ソ姒滄牱锛岃鎴戜滑杩愮敤鏈崟鍏冪殑鎴忓墽鐭ヨ瘑锛屾妸浠栫殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒
           </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; border-radius: 10px; border: 2px solid green;"
-          ></video>
-          <h2>瑙嗛: 鎴戜滑鏄竴瀹朵汉</h2>
+          <p class="center text">
+            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
+              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
+              controlslist="nodownload" class="w100 video" 
+              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
+          </p>
+          <p class="center videoname">
+            <span>瑙嗛锛氭垜浠槸涓�瀹朵汉 </span>
+            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
+              placement="top-start">
+              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
+                @click="handleCollect('video')" />
+            </el-tooltip>
           </p>
         </div>
+        <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+        <div class="page-footer">
+          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+          <div class="page-footer-number-left">10</div>
+        </div>
       </div>
-      <p class="center">
-        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
-      </p>
     </div>
   </div>
 </template>
-  
-  <script>
+
+<script>
 import matching from "@/components/matching/matching.vue";
+import choice from "@/components/choice/choice.vue"
 import { getResourcePath } from "@/assets/methods/resources";
 export default {
   name: "chapterOne",
-  components: { matching },
+  components: {
+    matching,
+    choice,
+  },
   props: {
     showPageList: {
       type: Array,
@@ -489,33 +405,51 @@
   //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
   mounted() {
     this.getVidoePath();
+    const bookQuestion = localStorage.getItem("artAndDrama-book-question-one");
+    if (bookQuestion) {
+      this.questionData = JSON.parse(bookQuestion);
+    }
   },
   data() {
     return {
+      collectImg: require("../../assets/images/icon/heart.png"),
+      collectCheck: require("../../assets/images/icon/heart-check.png"),
       videoPathOne: "",
-      videoPathTwo: "",
-      videoPathThree: "",
-      videoPathFour: "",
       auidoPathOne: "",
       auidoPathTwo: "",
-      auidoPathThree: "",
+      auidoPathThree:"",
+      auidoPathFour: "",
+      auidoPathFive: "",
+      auidoPathSex: "",
+      auidoPathSeven: "",
+      auidoPathEight: "",
+      auidoPathNine: "",
+      accentColor:"",
+      color:"#fff",
+      chapterData: {
+        isCollectImg: false,
+        isCollectVideo: false,
+        txtOne: "",
+        txtTwo: "",
+      },
       rawData: {
         left: [
           {
             oldId: "FB34",
-            txt: "鎴戣浣犲悆鑻规灉鍚э紒",
+            txt: " <span class='un1'>鎴�</span>璇蜂綘鍚冭嫻鏋滃惂锛�",
+
           },
           {
             oldId: "64D6",
-            txt: "鎴戣浣犲悆鑻规灉鍚э紒",
+            txt: "鎴�<span class='un1'>璇�</span>浣犲悆鑻规灉鍚э紒",
           },
           {
             oldId: "2ED4",
-            txt: "鎴戣浣犲悆鑻规灉鍚э紒",
+            txt: "鎴戣<span class='un1'>浣�</span>鍚冭嫻鏋滃惂锛�",
           },
           {
             oldId: "44DE",
-            txt: "鎴戣浣犲悆鑻规灉鍚э紒",
+            txt: "鎴戣浣犲悆<span class='un1'>鑻规灉</span>鍚э紒",
           },
         ],
         right: [
@@ -524,15 +458,15 @@
             txt: "寮鸿皟鏄瀹�",
           },
           {
-            oldId: "FB34",
+            oldId: "2ED4",
             txt: "寮鸿皟璇风殑鏄�滀綘鈥�",
           },
           {
-            oldId: "2ED4",
+            oldId: "44DE",
             txt: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
           },
           {
-            oldId: "44DE",
+            oldId: "FB34",
             txt: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
           },
         ],
@@ -540,66 +474,66 @@
       question: {
         KnowledgePoint: "123",
         analysis: "123",
+        //姝g‘绛旀
         answer: [
           {
             id: "FB34",
-            linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
-            value: "寮鸿皟鏄瀹�",
+            linkValue: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
+            value: "<span class='un1'>鎴�</span>璇蜂綘鍚冭嫻鏋滃惂锛�",
           },
           {
             id: "64D6",
-            linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
-            value: "寮鸿皟璇风殑鏄�滀綘鈥�",
+            linkValue: "寮鸿皟鏄瀹�",
+            value: "鎴�<span class='un1'>璇�</span>浣犲悆鑻规灉鍚э紒",
           },
           {
             id: "2ED4",
-            linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
-            value: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
+            linkValue: "寮鸿皟璇风殑鏄�滀綘鈥�",
+            value: "鎴戣<span class='un1'>浣�</span>鍚冭嫻鏋滃惂锛�",
           },
           {
             id: "44DE",
-            linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
-            value: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
+            linkValue: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
+            value: "鎴戣浣犲悆<span class='un1'>鑻规灉</span>鍚э紒",
           },
         ],
         optionStyle: undefined,
         id: 489306,
         options: {
-          linkValues: [
-            {
-              oldId: "64D6",
-              txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
-            },
-            {
-              oldId: "44DE",
-              txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
-            },
-            {
-              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.",
-            },
+          linkValues: [{
+            oldId: "64D6",
+            txt: "寮鸿皟鏄瀹�",
+          },
+          {
+            oldId: "2ED4",
+            txt: "寮鸿皟璇风殑鏄�滀綘鈥�",
+          },
+          {
+            oldId: "44DE",
+            txt: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
+          },
+          {
+            oldId: "FB34",
+            txt: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
+          },
           ],
-          values: [
-            {
-              oldId: "FB34",
-              txt: "Martin  Silk",
-            },
-            {
-              oldId: "64D6",
-              txt: "The Great Wall",
-            },
-            {
-              oldId: "2ED4",
-              txt: "Chinese Food",
-            },
-            {
-              oldId: "44DE",
-              txt: "Chinese Tea",
-            },
+          values: [{
+            oldId: "FB34",
+            txt: "<span class='un1'>鎴�</span>璇蜂綘鍚冭嫻鏋滃惂锛�",
+
+          },
+          {
+            oldId: "64D6",
+            txt: "鎴�<span class='un1'>璇�</span>浣犲悆鑻规灉鍚э紒",
+          },
+          {
+            oldId: "2ED4",
+            txt: "鎴戣<span class='un1'>浣�</span>鍚冭嫻鏋滃惂锛�",
+          },
+          {
+            oldId: "44DE",
+            txt: "鎴戣浣犲悆<span class='un1'>鑻规灉</span>鍚э紒",
+          },
           ],
         },
         questionType: "matching",
@@ -610,39 +544,146 @@
         titleDescription: "1",
         userChoise: [],
         value: [],
+        answerImg: require("../../assets/images/matching-one.png"),
       },
+      questions: [
+        {
+          analysisCon: "undefined",
+          answer: ['A','B'],
+          difficulty: 0,
+          id: 1,
+          isCollect: false,
+          isComplete: false,
+          isRight: null,
+          isUnfold: "",
+          isUserAnswer: false,
+          number: 1,
+          options: [
+            {
+              img: "",
+              index: "3CA6",
+              txt: "缇ゅ眳",
+              value: "A"
+            },
+            {
+              img: "",
+              index: "73EE",
+              txt: "绀句細鎬�",
+              value: "B"
+            },
+            {
+              img: "",
+              index: "6AEF",
+              txt: "鐙眳",
+              value: "C"
+            },
+          ],
+          optionStyle: "Image",
+          questionType: "singleChoice",
+          score: 2,
+          stem: {
+            "stemTxt": "1銆佽殏铓佹槸鍏稿瀷鐨�(銆�)鏄嗚櫕銆�(澶氶��)"
+          },
+          stemStyle: "Txt",
+          userAnswer: "",
+          // 鍗曢�夐杩欓噷鐨勫瓧娈靛唴瀹瑰氨鏄�"鍗曢�夐"
+          type: 'multi'
+        },
+        {
+          analysisCon: "undefined",
+          answer: ['A', 'C'],
+          difficulty: 0,
+          id: 2,
+          isCollect: false,
+          isComplete: false,
+          isRight: null,
+          isUnfold: "",
+          isUserAnswer: false,
+          number: 1,
+          options: [
+            {
+              img: "",
+              index: "3CA6",
+              txt: "鏄庣‘鐨�",
+              value: "A"
+            },
+            {
+              img: "",
+              index: "73EE",
+              txt: "濂囨�殑",
+              value: "B"
+            },
+            {
+              img: "",
+              index: "6AEF",
+              txt: "鏈夊簭鐨�",
+              value: "C"
+            },
+          ],
+          optionStyle: "Image",
+          questionType: "singleChoice",
+          score: 2,
+          stem: {
+            "stemTxt": "2銆佽殏铓佸唴閮ㄥ張(銆�)鍒嗗伐銆�(澶氶��)"
+          },
+          stemStyle: "Txt",
+          userAnswer: "",
+          // 鍗曢�夐杩欓噷鐨勫瓧娈靛唴瀹瑰氨鏄�"鍗曢�夐"
+          type: 'multi'
+        },
+        {
+          analysisCon: "undefined",
+          answer: ['A', 'B'],
+          difficulty: 0,
+          id: 3,
+          isCollect: false,
+          isComplete: false,
+          isRight: null,
+          isUnfold: "",
+          isUserAnswer: false,
+          number: 1,
+          options: [
+            {
+              img: "",
+              index: "3CA6",
+              txt: "鍥㈢粨鐨�",
+              value: "A"
+            },
+            {
+              img: "",
+              index: "73EE",
+              txt: "浼樼鐨�",
+              value: "B"
+            },
+            {
+              img: "",
+              index: "6AEF",
+              txt: "鏉炬暎鐨�",
+              value: "C"
+            },
+          ],
+          optionStyle: "Image",
+          questionType: "singleChoice",
+          score: 2,
+          stem: {
+            "stemTxt": "3銆佷竴涓�(銆�)缇や綋灏戜笉浜嗛粯濂戠殑閰嶅悎銆�(澶氶��)"
+          },
+          stemStyle: "Txt",
+          userAnswer: "",
+          // 鍗曢�夐杩欓噷鐨勫瓧娈靛唴瀹瑰氨鏄�"鍗曢�夐"
+          type: 'multi'
+        },
+      ],
       questionData: {
         warnUp: {
-          one: {
-            value: "",
-            isRight: null,
-            answer: "Chinese knot",
-          },
-          two: {
-            value: "",
-            isRight: null,
-            answer: "Chinese medicine",
-          },
-          three: {
-            value: "",
-            isRight: null,
-            answer: "Chinese calligraphy",
-          },
-          four: {
-            value: "",
-            isRight: null,
-            answer: "Taichi",
-          },
-          five: {
-            value: "",
-            isRight: null,
-            answer: "sweet dumpling",
-          },
-          six: {
-            value: "",
-            isRight: null,
-            answer: "Chinese chess",
-          },
+          one: "",
+          two: "",
+          three: "",
+          four: "",
+          five: "",
+          six: "",
+          seven: "",
+          enight: "",
         },
         reading: {
           one: "",
@@ -662,62 +703,100 @@
       },
     };
   },
-
   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"
+        "a8778fb480281170f6c421b57694d4ef"
       );
-      this.auidoPathTwo = await getResourcePath(
-        "e93c0fdde08be5a4386c8c863892a287"
-      );
+      // this.auidoPathTwo = await getResourcePath(
+      //   "1089676a40bedbe85a12db86199c3615"
+      // );
       this.auidoPathThree = await getResourcePath(
-        "e93c0fdde08be5a4386c8c863892a287"
+        "1089676a40bedbe85a12db86199c3615"
+      );
+      this.auidoPathFour = await getResourcePath(
+        "abbb24d6a0f1de8c08462c3d4b68f575"
+      );
+      this.auidoPathFive = await getResourcePath(
+        "abce7305a3e3c22b686af3a395575411"
+      );
+      this.auidoPathSex = await getResourcePath(
+        "66b8f2c7f953556400367a89e0af8321"
+      );
+      this.auidoPathSeven = await getResourcePath(
+        "27fcd83f77a10ecbf97970863e2653c3"
+      ); 
+      this.auidoPathEight = await getResourcePath(
+        "3d7f52cc80f8ed8994a046b418399116"
+      );
+      this.auidoPathNine = await getResourcePath(
+        "3729175530def1b0baca68e0bd344862"
       );
     },
     setBookQuestion() {
       console.log("淇濆瓨");
       localStorage.setItem(
-        "english-book-question-one",
+        "artAndDrama-book-question-one",
         JSON.stringify(this.questionData)
       );
+    },
+    handleChapterData() {
+      localStorage.setItem(
+        "math-chapterData",
+        JSON.stringify(this.chapterData)
+      );
+    },
+    handleCollect(type) {
+      if (type == "img") {
+        this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
+      } else if (type == "video") {
+        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
+      }
+      this.handleChapterData();
     },
   },
 };
 </script>
-  
-  <style lang="less" scoped>
+
+<style lang="less" scoped>
 .w70 {
   width: 78%;
+}
+.choice{
+  border: 1px solid green;
+  border-radius: 10px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  font-family: "STkaiti";
+  font-size: 19px;
 }
 .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
+
+.macthing {
+  background-color: rgb(188, 220, 164);
+  padding: 3% 0;
+  margin: 0% 8%;
+}
+</style>
\ No newline at end of file

--
Gitblit v1.9.1