From 558de7a1274017280509a14866c8b6d1d46286a2 Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期三, 19 六月 2024 10:08:11 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

---
 src/books/artAndDrama/view/components/chapter003.vue |  205 ++++++++++++++++++++++++++++++++-------------------
 1 files changed, 128 insertions(+), 77 deletions(-)

diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index 9754452..2a3261b 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -5,14 +5,15 @@
                 <h1 id="a004">
                     <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
                     <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
-                    <audio :src="auidoPathOne" class="audio" controls></audio>
+                    <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
                 </h1>
                 <div class="bodystyle">
                     <div class="bk">
                         <div class="bj1">
                             <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
                         </div>
-                        <p>姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈o紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�</p>
+                        <p class="block" style="margin:  8% 5% 5% 7%">
+                            姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈o紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�</p>
                     </div>
                 </div>
                 <p><br /></p>
@@ -28,18 +29,20 @@
                 <h1>
                     <img src="../../assets/images/header-green.png" alt="" style="width: 100%;" />
                 </h1>
-                <div class="bodystyle">
-                    <img src="../../assets/images/page5.png" alt="" />
-                    <h2 id="b011">绗竴璇俱��鍚瑰搷鍔冲姩鐨勯泦缁撳彿</h2>
+                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+                <div class="bodystyle" style="margin-top: 3%">
+
+                    <h2 id="b011" class="problem">绗竴璇俱��鍚瑰搷鍔冲姩鐨勯泦缁撳彿</h2>
                     <h3 class="lefth3" id="c021"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
-                    <p>瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛o紝鍔崇濂斿繖銆�</p>
-                    <p>鍥㈢粨涓�蹇冿紝鍚瑰搷鍙疯銆傚垢绂忕敓娲伙紝鍔冲姩鍒涢�犮��</p>
-                    <p><span class="hs1">鈼�</span>璇翠竴璇翠綘浼氬仛鍝簺瀹跺姟锛�</p>
-                    <p><span class="hs1">鈼�</span>鍜屽皬浼欎即璁ㄨ鍔冲姩鍦ㄧ敓娲讳腑鐨勪綔鐢ㄣ��</p>
-                    <p><span class="hs1">鈼�</span>琛ㄦ紨涓�绉嶅鍔″姵鍔紝璇峰皬浼欎即鐚滀竴鐚溿��</p>
-                    <h3 class="lefth3" id="c022"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��</p>
-                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
+                    <p class="text">瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛o紝鍔崇濂斿繖銆�</p>
+                    <p class="text">鍥㈢粨涓�蹇冿紝鍚瑰搷鍙疯銆傚垢绂忕敓娲伙紝鍔冲姩鍒涢�犮��</p>
+                    <p class="text"><span class="hs1">鈼�</span>璇翠竴璇翠綘浼氬仛鍝簺瀹跺姟锛�</p>
+                    <p class="text"><span class="hs1">鈼�</span>鍜屽皬浼欎即璁ㄨ鍔冲姩鍦ㄧ敓娲讳腑鐨勪綔鐢ㄣ��</p>
+                    <p class="text"><span class="hs1">鈼�</span>琛ㄦ紨涓�绉嶅鍔″姵鍔紝璇峰皬浼欎即鐚滀竴鐚溿��</p>
+                    <h3 class="lefth3" id="c022" style="margin-top: 7%"><img class="img-gn1" alt=""
+                            src="../../assets/images/czysj.jpg" /></h3>
+                    <p class="text"><span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��</p>
+                    <p class="center text"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
                 </div>
                 <p><br /></p>
                 <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -52,15 +55,16 @@
         <div class="page-box" page="24">
             <div v-if="showPageList.indexOf(24) > -1">
                 <h1>
-                    <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
+                    <img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" />
                 </h1>
-                <div class="bodystyle">
-                    <h2 id="b012">绗簩璇俱��鎰忓鍙戠敓浜嗭紒</h2>
+                <div class="bodystyle" style="margin-top: 3%;">
+                    <h2 id="b012" class="problem">绗簩璇俱��鎰忓鍙戠敓浜嗭紒</h2>
                     <h3 class="lefth3" id="c023"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�</p>
-                    <h3 class="lefth3" id="c024"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+                    <p class="text"><span class="hs1">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�</p>
+                    <h3 class="lefth3" id="c024" style="margin-top: 7%;"><img class="img-gn1" alt=""
+                            src="../../assets/images/czysj.jpg" /></h3>
                     <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-2.gif" /></p>
-                    <p><span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�</p>
+                    <p class="text"><span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�</p>
                     <!-- 杩炵嚎棰� -->
                     <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'">
                     </matching>
@@ -77,13 +81,16 @@
                 <h1>
                     <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                 </h1>
-                <div class="bodystyle">
-                    <h2 id="b013">绗笁璇俱��鎴戣鎬庝箞鍔烇紵</h2>
+                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+                <div class="bodystyle" style="margin-top: 3%;">
+                    <h2 id="b013" class="problem">绗笁璇俱��鎴戣鎬庝箞鍔烇紵</h2>
                     <h3 class="lefth3" id="c025"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
-                    <p><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="c026"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�</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="c026" style="margin-top: 7%;"><img class="img-gn1" alt=""
+                            src="../../assets/images/czysj.jpg" /></h3>
+                    <p class="text"><span class="hs1">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�</p>
                     <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
                 </div>
                 <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -96,21 +103,27 @@
         <div class="page-box" page="26">
             <div v-if="showPageList.indexOf(26) > -1">
                 <h1>
-                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+                    <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
                 </h1>
-                <div class="bodystyle">
-                    <img src="../../assets/images/page5.png" alt="" />
-                    <h2 id="b014">绗洓璇俱��鐨嗗ぇ娆㈠枩</h2>
+                <div class="bodystyle" style="margin-top: 3%;">
+                    <h2 id="b014" class="problem">绗洓璇俱��鐨嗗ぇ娆㈠枩</h2>
                     <h3 class="lefth3" id="c027"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�</p>
-                    <p>鏃堕棿锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
-                    <p>鍦扮偣锛�<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
-                    <p>浜虹墿锛�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
-                    <p>璧峰洜锛�<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
-                    <p>缁忚繃锛�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
-                    <p>缁撴灉锛�<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
-                    <p><span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�</p>
-                    <p><input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
+                    <p class="text"><span class="hs1">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�</p>
+                    <p class="text">鏃堕棿锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
+                            @change="setBookQuestion" style="width: 70%" /></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>
+                    <p class="text" style="margin-top: 7%;"><span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�</p>
+                    <p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18"
+                            @change="setBookQuestion" style="width: 85%" /></p>
                 </div>
                 <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
                 <div class="page-footer">
@@ -124,41 +137,42 @@
                 <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="" />
+                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+                <div class="bodystyle" style="margin-top: 3%;">
                     <h3 class="lefth3" id="c028"><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/3-3.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">24</div>
+                <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+                <div class="page-footer">
+                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+                    <div class="page-footer-number-left">24</div>
+                </div>
             </div>
         </div>
         <div class="page-box" page="28">
             <div v-if="showPageList.indexOf(28) > -1">
                 <h1>
-                    <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
+                    <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
                 </h1>
-                <div class="bodystyle">
-                    <h2 id="b015">鍗曞厓娲诲姩浠诲姟</h2>
+                <div class="bodystyle" style="margin-top: 3%;">
+                    <h2 id="b015" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
                     <h3 class="lefth3" id="c029"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>鍠樻皵缁冧範</p>
-                    <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傛垨鍙夎叞锛屽弻鑴氬垎寮�锛屼笌鑲╁悓瀹姐�傛ā浠垮皬鐙楀枠姘旓紝鎰熷彈鑵归儴鐨勨�滃懠鍚糕�濈姸鎬侊紝鎯宠薄鑷繁鐨勮吂閮ㄦ槸涓�涓皵鐞冿紝鍦ㄥ惛姘旀椂鑵归儴鍚戝鎵╁紶锛屽悙姘旀椂鑵归儴鍚戝唴鏀剁缉銆�</p>
-                    <p><span class="hs1">鈼�</span>鈥滃樁鈥濆0缁冧範</p>
-                    <p>鍦ㄢ�滃枠姘旂粌涔犫�濈殑鍩虹涓婏紝鍙戝嚭鈥滃樁鈥濋煶锛屾瘡缁�4鐭�1闀裤��</p>
-                    <p><span class="hs1">鈼�</span>鈥滃槦鈥濋煶缁冧範</p>
-                    <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�傛斁鏉惧弻鍞囷紝娣卞惛姘旓紝鍚瑰嚭姘旀祦甯﹀姩鍢村攪鎶栧姩锛屽彂鍑衡�滃槦鈥濈殑澹伴煶锛屽0闊宠秺闀胯秺濂姐��</p>
-                    <p><span class="hs1">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌涔�</p>
-                    <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�備互璇存倓鎮勮瘽鐨勬劅瑙夛紝璇村嚭鈥滄垜浠禐缇庨暱姹熲�濓紝骞堕�愭澧炲姞姘斿0鐨勫姏搴︼紝鎵惧埌鍦ㄨ垶鍙颁笂璇存倓鎮勮瘽鐨勬劅瑙夈��</p>
+                    <p class="text"><span class="hs1">鈼�</span>鍠樻皵缁冧範</p>
+                    <p class="text">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傛垨鍙夎叞锛屽弻鑴氬垎寮�锛屼笌鑲╁悓瀹姐�傛ā浠垮皬鐙楀枠姘旓紝鎰熷彈鑵归儴鐨勨�滃懠鍚糕�濈姸鎬侊紝鎯宠薄鑷繁鐨勮吂閮ㄦ槸涓�涓皵鐞冿紝鍦ㄥ惛姘旀椂鑵归儴鍚戝鎵╁紶锛屽悙姘旀椂鑵归儴鍚戝唴鏀剁缉銆�
+                    </p>
+                    <p class="text"><span class="hs1">鈼�</span>鈥滃樁鈥濆0缁冧範</p>
+                    <p class="text">鍦ㄢ�滃枠姘旂粌涔犫�濈殑鍩虹涓婏紝鍙戝嚭鈥滃樁鈥濋煶锛屾瘡缁�4鐭�1闀裤��</p>
+                    <p class="text"><span class="hs1">鈼�</span>鈥滃槦鈥濋煶缁冧範</p>
+                    <p class="text">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�傛斁鏉惧弻鍞囷紝娣卞惛姘旓紝鍚瑰嚭姘旀祦甯﹀姩鍢村攪鎶栧姩锛屽彂鍑衡�滃槦鈥濈殑澹伴煶锛屽0闊宠秺闀胯秺濂姐��</p>
+                    <p class="text"><span class="hs1">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌涔�</p>
+                    <p class="text">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�備互璇存倓鎮勮瘽鐨勬劅瑙夛紝璇村嚭鈥滄垜浠禐缇庨暱姹熲�濓紝骞堕�愭澧炲姞姘斿0鐨勫姏搴︼紝鎵惧埌鍦ㄨ垶鍙颁笂璇存倓鎮勮瘽鐨勬劅瑙夈��</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">25</div>
+                <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+                <div class="page-footer">
+                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+                    <div class="page-footer-number-right">25</div>
+                </div>
             </div>
         </div>
         <div class="page-box" page="29">
@@ -166,23 +180,32 @@
                 <h1>
                     <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                 </h1>
-                <div class="bodystyle">
-                    <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
-                    <p><span class="hs1">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
+                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+                <div class="bodystyle" style="margin-top: 3%">
+                    <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
+                    <p class="text"><span
+                            class="hs1">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
                     </p>
-                    <p class="center">
+                    <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>
+                    <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>
-            <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
-            <div class="page-footer">
-                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
-                <div class="page-footer-number-left">26</div>
+                <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+                <div class="page-footer">
+                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+                    <div class="page-footer-number-left">26</div>
+                </div>
             </div>
         </div>
     </div>
@@ -198,7 +221,6 @@
         showPageList: {
             type: Array,
         },
-
     },
     //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
     mounted() {
@@ -210,8 +232,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: "",
+            },
             rawData: {
                 left: [
                     {
@@ -319,8 +349,8 @@
                     four: "",
                     five: "",
                     six: "",
-                    seven:"",
-                    enight:"",
+                    seven: "",
+                    enight: "",
                 },
                 reading: {
                     one: "",
@@ -360,6 +390,26 @@
                 JSON.stringify(this.questionData)
             );
         },
+        audioPlay(e) {
+            this.$emit('closeAudio', e.srcElement.currentSrc)
+        },
+        videoPlay(e) {
+            this.$emit('closeVideo', e.srcElement.currentSrc)
+        },
+        handleChapterData() {
+            localStorage.setItem(
+                "math-chapterData",
+                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>
@@ -391,6 +441,7 @@
 
 .macthing {
     background-color: rgb(188, 220, 164);
-    padding: 5% 0%;
+    padding: 3% 0;
+    margin: 0% 8%;
 }
 </style>
\ No newline at end of file

--
Gitblit v1.9.1