From b8e76c47abeebb8e7531c4ae6272699d1ab81f3a Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期三, 19 六月 2024 10:08:05 +0800
Subject: [PATCH] 艺术戏剧(连线题优化)

---
 src/books/artAndDrama/view/components/chapter004.vue |  152 ++++++++++++++++++++++++++++++--------------------
 1 files changed, 92 insertions(+), 60 deletions(-)

diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index cb0c15c..7d95fff 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -12,7 +12,7 @@
                         <div class="bj1">
                             <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
                         </div>
-                        <p>鍦ㄦ垙鍓ф紨鍑轰腑锛岄櫎浜嗚垶鍙颁笂鐨勬紨鍛橈紝瀵兼紨銆佺伅鍏夈�侀�犲瀷绛夊箷鍚庝汉鍛樹篃鍙戞尌鐫�閲嶈鐨勪綔鐢ㄣ�傛湰鍗曞厓璁╂垜浠粠鍙板墠璧拌繘骞曞悗锛屽悜榛橀粯濂夌尞鐨勫伐浣滀汉鍛樿嚧鏁紒</p>
+                        <p class="block" style="margin:  8% 5% 5% 7%">鍦ㄦ垙鍓ф紨鍑轰腑锛岄櫎浜嗚垶鍙颁笂鐨勬紨鍛橈紝瀵兼紨銆佺伅鍏夈�侀�犲瀷绛夊箷鍚庝汉鍛樹篃鍙戞尌鐫�閲嶈鐨勪綔鐢ㄣ�傛湰鍗曞厓璁╂垜浠粠鍙板墠璧拌繘骞曞悗锛屽悜榛橀粯濂夌尞鐨勫伐浣滀汉鍛樿嚧鏁紒</p>
                     </div>
                 </div>
                 <p><br /></p>
@@ -29,20 +29,19 @@
                     <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">
-                    
-                    <h2 id="b016">绗竴璇俱��涓�妯′竴鏍�</h2>
+                <div class="bodystyle" style="margin-top: 3%">
+                    <h2 id="b016" class="problem">绗竴璇俱��涓�妯′竴鏍�</h2>
                     <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅鍥存垚涓�鍦堬紝闈㈡湞鍦堝韫蹭笅锛岀浉閭讳袱浜轰簰鎸庢墜鑷傦紝缁勫憳鍚屾椂绔欒捣鏉ワ紝鐪嬬湅鍝釜缁勬渶蹇紒</p>
-                    <p><span class="hs1">鈼�</span>璇翠竴璇达細蹇�熺珯璧锋潵鐨勭璇�鏄粈涔堬紵</p>
+                    <p class="text"><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅鍥存垚涓�鍦堬紝闈㈡湞鍦堝韫蹭笅锛岀浉閭讳袱浜轰簰鎸庢墜鑷傦紝缁勫憳鍚屾椂绔欒捣鏉ワ紝鐪嬬湅鍝釜缁勬渶蹇紒</p>
+                    <p class="text"><span class="hs1">鈼�</span>璇翠竴璇达細蹇�熺珯璧锋潵鐨勭璇�鏄粈涔堬紵</p>
                     <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 90%"/></p>
                     <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛岃〃婕斾互涓嬪満鏅紝娉ㄦ剰淇濇寔鍔ㄤ綔涓�鑷村摝銆�</p>
-                    <p>铓傝殎闃熼暱鍚瑰搷闆嗗悎鍙凤紝铓傝殎浠繀閫熻窇涓婂満绔欏ソ闃熷舰銆�</p>
-                    <p>铓傝殎浠姮鐫�濂堕叒鍚戝墠璧扮潃銆�</p>
-                    <p>铓傝殎浠窡闅忚殏铓侀槦闀跨殑鍙d护娑堝け鍦ㄨ崏涓涢噷銆�</p>
-                    <p>铓傝殎浠敱鍥涢潰鍏柟璧板洖鏉ャ��</p>
-                    <p>铓傝殎浠姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
+                    <p class="text"><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛岃〃婕斾互涓嬪満鏅紝娉ㄦ剰淇濇寔鍔ㄤ綔涓�鑷村摝銆�</p>
+                    <p class="text">铓傝殎闃熼暱鍚瑰搷闆嗗悎鍙凤紝铓傝殎浠繀閫熻窇涓婂満绔欏ソ闃熷舰銆�</p>
+                    <p class="text">铓傝殎浠姮鐫�濂堕叒鍚戝墠璧扮潃銆�</p>
+                    <p class="text">铓傝殎浠窡闅忚殏铓侀槦闀跨殑鍙d护娑堝け鍦ㄨ崏涓涢噷銆�</p>
+                    <p class="text">铓傝殎浠敱鍥涢潰鍏柟璧板洖鏉ャ��</p>
+                    <p class="text">铓傝殎浠姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
                     <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-1.gif" /></p>
                 </div>
                 <p><br /></p>
@@ -58,10 +57,10 @@
                 <h1>
                     <img src="../../assets/images/unit4-header-img.png" alt="" style="height: auto; width: 100%" />
                 </h1>
-                <div class="bodystyle">
-                    <h2 id="b017">绗簩璇俱��閫犲瀷鍙樺彉鍙�</h2>
+                <div class="bodystyle" style="margin-top: 3%;" >
+                    <h2 id="b017" class="problem">绗簩璇俱��閫犲瀷鍙樺彉鍙�</h2>
                     <h3 class="lefth3" id="c033"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>鏄ュぉ鏉ヤ簡锛屾槬椋庡惞杩囷紝鏌虫爲鍙戣娊浜嗭紝杩庢槬鑺卞紑浜嗭紝灏忕嚂瀛愬湪澶╃┖鑷敱鍦伴缈斻�備竴鍒囬兘鏄偅涔堢敓鏈哄媰鍕冦�傝涓衡�滄槬澶┾�濇秱涓婁綘鍠滄鐨勯鑹层��</p>
+                    <p class="text"><span class="hs1">鈼�</span>鏄ュぉ鏉ヤ簡锛屾槬椋庡惞杩囷紝鏌虫爲鍙戣娊浜嗭紝杩庢槬鑺卞紑浜嗭紝灏忕嚂瀛愬湪澶╃┖鑷敱鍦伴缈斻�備竴鍒囬兘鏄偅涔堢敓鏈哄媰鍕冦�傝涓衡�滄槬澶┾�濇秱涓婁綘鍠滄鐨勯鑹层��</p>
                     <!-- 鍥剧墖缂哄け -->
                     <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
                 </div>
@@ -78,9 +77,9 @@
                     <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">
+                <div class="bodystyle" style="margin-top: 3%;" >
                     <h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>鍔ㄥ姩鎵嬶紝涓恒�婁竴鍧楀ザ閰�嬩腑鐨勮殏铓佽鑹茶璁$畝鍗曠殑鏈嶈鍚э紒</p>
+                    <p class="text"><span class="hs1">鈼�</span>鍔ㄥ姩鎵嬶紝涓恒�婁竴鍧楀ザ閰�嬩腑鐨勮殏铓佽鑹茶璁$畝鍗曠殑鏈嶈鍚э紒</p>
                     <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
                 </div>
                 <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -95,12 +94,12 @@
                 <h1>
                     <img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
                 </h1>
-                <div class="bodystyle">
-                    <h2 id="b018">绗笁璇俱��鍙樺簾涓哄疂</h2>
+                <div class="bodystyle" style="margin-top: 3%">
+                    <h2 id="b018" class="problem">绗笁璇俱��鍙樺簾涓哄疂</h2>
                     <h3 class="lefth3" id="c035"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屽ご椤剁焊鏉紝鑵垮す鎶ョ焊锛岃繘琛屽す绾歌繍鏉父鎴忥紒</p>
-                    <h3 class="lefth3" id="c036"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>璇锋牴鎹�婁竴鍧楀ザ閰�嬬殑鍓ф湰锛屽垪鍑烘紨鍑轰腑闇�瑕佺殑閬撳叿娓呭崟锛岃鎸夌収娓呭崟锛屽埄鐢ㄤ綘鏀堕泦鐨勬棫鐗╁埗浣滈亾鍏峰惂锛�</p>
+                    <p class="text"><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屽ご椤剁焊鏉紝鑵垮す鎶ョ焊锛岃繘琛屽す绾歌繍鏉父鎴忥紒</p>
+                    <h3 class="lefth3" id="c036" style="margin-top: 7%"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+                    <p class="text"><span class="hs1">鈼�</span>璇锋牴鎹�婁竴鍧楀ザ閰�嬬殑鍓ф湰锛屽垪鍑烘紨鍑轰腑闇�瑕佺殑閬撳叿娓呭崟锛岃鎸夌収娓呭崟锛屽埄鐢ㄤ綘鏀堕泦鐨勬棫鐗╁埗浣滈亾鍏峰惂锛�</p>
                     <p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
                 </div>
                 <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -116,49 +115,50 @@
                     <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">
-                    <h2 id="b019">绗洓璇俱��濂囧鐨勮垶鍙�</h2>
+                <div class="bodystyle" style="margin-top: 3%;">
+                    <h2 id="b019" class="problem">绗洓璇俱��濂囧鐨勮垶鍙�</h2>
                     <h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>璇蜂綘璇曠潃妯℃嫙婕斿憳鍊欏満銆佽阿骞曪紝鑸炲彴缇庢湳宸ヤ綔浜哄憳杩涜骞曞悗鍑嗗鐨勫満鏅��</p>
+                    <p class="text"><span class="hs1">鈼�</span>璇蜂綘璇曠潃妯℃嫙婕斿憳鍊欏満銆佽阿骞曪紝鑸炲彴缇庢湳宸ヤ綔浜哄憳杩涜骞曞悗鍑嗗鐨勫満鏅��</p>
                     <p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></p>
-                    <h3 class="lefth3" id="c038"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>閭�璇峰悓浼村叡鍚屽畬鎴愩�婁竴鍧楀ザ閰�嬬殑灞曟紨鍚э紒</p>
+                    <h3 class="lefth3" id="c038" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+                    <p class="text"><span class="hs1">鈼�</span>閭�璇峰悓浼村叡鍚屽畬鎴愩�婁竴鍧楀ザ閰�嬬殑灞曟紨鍚э紒</p>
                     <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
                 </div>
-            </div>
             <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
             <div class="page-footer">
                 <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                 <div class="page-footer-number-left">32</div>
             </div>
         </div>
+        </div>
         <div class="page-box" page="36">
             <div v-if="showPageList.indexOf(36) > -1">
                 <h1>
                     <img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
                 </h1>
-                <div class="bodystyle">
-                    <h2 id="b020">鍗曞厓娲诲姩浠诲姟</h2>
+                <div class="bodystyle" style="margin-top: 3%;" >
+                    <h2 id="b020" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
                     <h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
-                    <p class="center"><span class="hs">褰綋鎿嶇粌涔�</span></p>
-                    <p><span class="hs1">鈼�</span>澶撮儴杩愬姩</p>
-                    <p>绗�1涓叓鎷嶏細鍙虫墜瓒婅繃澶撮《鎽稿乏鑰筹紝鍚戝彸杞昏交鍘嬪ご閮ㄣ��</p>
-                    <p>绗�2涓叓鎷嶏細宸︽墜瓒婅繃澶撮《鎽稿彸鑰筹紝鍚戝乏杞昏交鍘嬪ご閮ㄣ��</p>
-                    <p>绗�3涓叓鎷嶏細澶撮儴椤烘椂閽堣浆涓�鍦堛��</p>
-                    <p>绗�4涓叓鎷嶏細澶撮儴閫嗘椂閽堣浆涓�鍦堛��</p>
-                    <p><span class="hs1">鈼�</span>寮�鑲╃粌涔�</p>
-                    <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
-                    <p>绗�1涓叓鎷嶏細绗�1-4鎷嶆墜鑲樺唴渚у悜澶栬浆鍔紝甯﹀姩 鍙岃偐鎵撳紑锛涚5-8鎷嶆墜鑲樺唴渚у悜鍐呮敹鍥烇紝鍚庤儗鎷辫捣锛屽甫鍔ㄥ弻鑲╁唴鎵c��</p>
-                    <p>绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
-                    <p><span class="hs1">鈼�</span>鎻愭矇鑲╄繍鍔�</p>
-                    <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
+                    <p class="center text1"><span class="hs">褰綋鎿嶇粌涔�</span></p>
+                    <p class="text"><span class="hs1">鈼�</span>澶撮儴杩愬姩</p>
+                    <p class="text">绗�1涓叓鎷嶏細鍙虫墜瓒婅繃澶撮《鎽稿乏鑰筹紝鍚戝彸杞昏交鍘嬪ご閮ㄣ��</p>
+                    <p class="text">绗�2涓叓鎷嶏細宸︽墜瓒婅繃澶撮《鎽稿彸鑰筹紝鍚戝乏杞昏交鍘嬪ご閮ㄣ��</p>
+                    <p class="text">绗�3涓叓鎷嶏細澶撮儴椤烘椂閽堣浆涓�鍦堛��</p>
+                    <p class="text">绗�4涓叓鎷嶏細澶撮儴閫嗘椂閽堣浆涓�鍦堛��</p>
+                    <p class="text"><span class="hs1">鈼�</span>寮�鑲╃粌涔�</p>
+                    <p class="text">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
+                    <p class="text">绗�1涓叓鎷嶏細绗�1-4鎷嶆墜鑲樺唴渚у悜澶栬浆鍔紝甯﹀姩 鍙岃偐鎵撳紑锛涚5-8鎷嶆墜鑲樺唴渚у悜鍐呮敹鍥烇紝鍚庤儗鎷辫捣锛屽甫鍔ㄥ弻鑲╁唴鎵c��</p>
+                    <p class="text">绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
+                    <p class="text"><span class="hs1">鈼�</span>鎻愭矇鑲╄繍鍔�</p>
+                    <p class="text">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
                 </div>
-            </div>
-            <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+              <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
             <div class="page-footer">
                 <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                 <div class="page-footer-number-right">33</div>
             </div>
+        </div>
+          
         </div>
         <div class="page-box" page="37">
             <div v-if="showPageList.indexOf(37) > -1">
@@ -166,29 +166,36 @@
                     <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">
-                    <p>绗�1鑷崇2涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝鍙岃偐涓婃彁鍐嶆矇涓嬶紝涓ゆ媿涓�鍔ㄣ��</p>
-                    <p>绗�3鑷崇4涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝宸﹀彸鑲╄唨渚濇涓婃彁鍐嶆矇涓嬶紝涓�鎷嶄竴鍔ㄣ��</p>
-                    <p><span class="hs1">鈼�</span>浼稿睍杩愬姩</p>
-                    <p>韬綋鏀炬澗锛岃啙鐩栧井灞堬紝涓婅韩鑷劧寮洸涓嬫矇锛屾墜鑷傝嚜鐒朵笅鍨傘��</p>
-                    <p>绗�1涓叓鎷嶏細绗�1-7鎷嶈韩浣撶洿璧凤紝鍙岃噦涓捐捣锛岃府璧疯剼灏栵紱绗�8鎷嶈繕鍘熷垵濮嬬姸鎬併��</p>
-                    <p>绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
-                    <h3 class="lefth3" id="c040"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>鍐欎竴绡囨帓婕旀�荤粨锛屽垎浜涔犵粡楠屽拰鎰熷彈锛�</p>
-                    <p class="center">
+                <div class="bodystyle" style="margin-top: 3%;">
+                    <p class="text">绗�1鑷崇2涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝鍙岃偐涓婃彁鍐嶆矇涓嬶紝涓ゆ媿涓�鍔ㄣ��</p>
+                    <p class="text">绗�3鑷崇4涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝宸﹀彸鑲╄唨渚濇涓婃彁鍐嶆矇涓嬶紝涓�鎷嶄竴鍔ㄣ��</p>
+                    <p class="text"><span class="hs1">鈼�</span>浼稿睍杩愬姩</p>
+                    <p class="text">韬綋鏀炬澗锛岃啙鐩栧井灞堬紝涓婅韩鑷劧寮洸涓嬫矇锛屾墜鑷傝嚜鐒朵笅鍨傘��</p>
+                    <p class="text">绗�1涓叓鎷嶏細绗�1-7鎷嶈韩浣撶洿璧凤紝鍙岃噦涓捐捣锛岃府璧疯剼灏栵紱绗�8鎷嶈繕鍘熷垵濮嬬姸鎬併��</p>
+                    <p class="text">绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
+                    <h3 class="lefth3" id="c040" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
+                    <p class="text"><span class="hs1">鈼�</span>鍐欎竴绡囨帓婕旀�荤粨锛屽垎浜涔犵粡楠屽拰鎰熷彈锛�</p>
+                    <p class="center text">
                         <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                             x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
-                            controlslist="nodownload" class="w100"
+                            controlslist="nodownload" class="w100 video"  @play="videoPlay"
                             style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
-                    <h2>瑙嗛: 鍥㈢粨灏辨槸鍔涢噺</h2>
                     </p>
-                </div>
-            </div>
-            <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+                    <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">34</div>
             </div>
+        </div>     
         </div>
     </div>
 </template>
@@ -213,8 +220,16 @@
     },
     data() {
         return {
+            collectImg: require("../../assets/images/icon/heart.png"),
+            collectCheck: require("../../assets/images/icon/heart-check.png"),
             videoPathOne: "",
             auidoPathOne: "",
+            chapterData: {
+                isCollectImg: false,
+                isCollectVideo: false,
+                txtOne: "",
+                txtTwo: "",
+            },
             questionData: {
                 warnUp: {
                     one: "",
@@ -257,7 +272,24 @@
         },    
         audioPlay(e) {
       this.$emit('closeAudio',e.srcElement.currentSrc)
-    }
+    },
+    videoPlay(e) {
+      this.$emit('closeVideo',e.srcElement.currentSrc)
+    },
+    handleChapterData() {
+            localStorage.setItem(
+                "math-chapterData",
+                JSON.stringify(this.chapterData)
+            );
+        },
+        handleCollect(type) {
+            if (type == "img") {
+                this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
+            } else if (type == "video") {
+                this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
+            }
+            this.handleChapterData();
+        },
     },
 
 };

--
Gitblit v1.9.1