From 0147b2e4cd7b1e38a84de32ea954b7ed47acf31f Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 22 七月 2024 16:29:17 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

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

diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index 4696f8a..8e13d67 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -5,7 +5,7 @@
                 <h1 id="a004">
                     <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
                     <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
-                    <audio :src="auidoPathOne" controls class="audio"></audio>
+                    <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
                 </h1>
                 <div class="bodystyle">
                     <div class="bk">
@@ -34,9 +34,13 @@
                     <h2 id="b016" class="problem">绗竴璇俱��涓�妯′竴鏍�</h2>
                     <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                     <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>
+                    <p class="text t-l"><span class="hs1">鈼�</span>璇翠竴璇达細蹇�熺珯璧锋潵鐨勭璇�鏄粈涔堬紵
+                        <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+                            :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
+                            @blur="handleBlur('one')">
+                         </textarea>
+                    </p>
                     <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                     <p class="text"><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛岃〃婕斾互涓嬪満鏅紝娉ㄦ剰淇濇寔鍔ㄤ綔涓�鑷村摝銆�</p>
                     <p class="text">铓傝殎闃熼暱鍚瑰搷闆嗗悎鍙凤紝铓傝殎浠繀閫熻窇涓婂満绔欏ソ闃熷舰銆�</p>
@@ -66,6 +70,8 @@
                             class="hs1">鈼�</span>鏄ュぉ鏉ヤ簡锛屾槬椋庡惞杩囷紝鏌虫爲鍙戣娊浜嗭紝杩庢槬鑺卞紑浜嗭紝灏忕嚂瀛愬湪澶╃┖鑷敱鍦伴缈斻�備竴鍒囬兘鏄偅涔堢敓鏈哄媰鍕冦�傝涓衡�滄槬澶┾�濇秱涓婁綘鍠滄鐨勯鑹层��</p>
                     <!-- 鍥剧墖缂哄け -->
                     <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
+                    <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'"
+                        :imgWidth="596" :imgHeight="500" />
                 </div>
                 <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
                 <div class="page-footer">
@@ -145,16 +151,28 @@
                     <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 text1"><span class="hs">褰綋鎿嶇粌涔�</span></p>
-                    <p class="text"><span class="hs1">鈼�</span>澶撮儴杩愬姩</p>
+                    <p class="text ends">
+                        <span><span class="hs1">鈼�</span>澶撮儴杩愬姩</span>
+                        <span> <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio> </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 ends">
+                        <span><span class="hs1">鈼�</span>寮�鑲╃粌涔�</span>
+                        <span> <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio> </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 ends">
+                        <span><span class="hs1">鈼�</span>鎻愭矇鑲╄繍鍔�</span>
+                        <span> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio> </span>
+                    </p>
                     <p class="text">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
                 </div>
                 <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -163,7 +181,6 @@
                     <div class="page-footer-number-right">33</div>
                 </div>
             </div>
-
         </div>
         <div class="page-box" page="37">
             <div v-if="showPageList.indexOf(37) > -1">
@@ -174,7 +191,11 @@
                 <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 ends">
+                        <span><span class="hs1">鈼�</span>浼稿睍杩愬姩</span>
+                        <span> <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
+                                class="audio"></audio> </span>
+                    </p>
                     <p class="text">韬綋鏀炬澗锛岃啙鐩栧井灞堬紝涓婅韩鑷劧寮洸涓嬫矇锛屾墜鑷傝嚜鐒朵笅鍨傘��</p>
                     <p class="text">绗�1涓叓鎷嶏細绗�1-7鎷嶈韩浣撶洿璧凤紝鍙岃噦涓捐捣锛岃府璧疯剼灏栵紱绗�8鎷嶈繕鍘熷垵濮嬬姸鎬併��</p>
                     <p class="text">绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
@@ -184,7 +205,7 @@
                     <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" 
+                            controlslist="nodownload" class="w100 video"
                             style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
                     </p>
                     <p class="center videoname">
@@ -207,6 +228,7 @@
 </template>
 <script>
 import { getResourcePath } from "@/assets/methods/resources";
+import graffiti from '@/components/graffiti/index.vue'
 export default {
     name: "chapterFour",
     props: {
@@ -214,6 +236,7 @@
             type: Array,
         },
     },
+    components: { graffiti },
     //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
     mounted() {
         this.getVidoePath();
@@ -227,7 +250,12 @@
             collectImg: require("../../assets/images/icon/heart.png"),
             collectCheck: require("../../assets/images/icon/heart-check.png"),
             videoPathOne: "",
-            auidoPathOne: "",
+            audioPathOne: "",
+            audioPathTwo: "",
+            audioPathThree: "",
+            audioPathFour: "",
+            audioPathFive: "",
+            isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
             chapterData: {
                 isCollectImg: false,
                 isCollectVideo: false,
@@ -237,11 +265,9 @@
             questionData: {
                 warnUp: {
                     one: "",
-
                 },
                 reading: {
                     one: "",
-                    two: "",
                 },
                 table: {
                     one: "",
@@ -270,9 +296,27 @@
             this.videoPathOne = await getResourcePath(
                 "09de7704eeaaf3a210b8c6af0a94d545"
             );
-            // this.auidoPathOne = await getResourcePath(
-            //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
-            // );
+            this.audioPathOne = await getResourcePath(
+                "7c74b4da6fe6981d5c2148e48a0d66ed"
+            );
+            this.audioPathTwo = await getResourcePath(
+                "b9ce656b414814b49213a2d5838844fe"
+            );
+            this.audioPathThree = await getResourcePath(
+                "87f0de453538e671a27b9e8ffc8f34b9"
+            );
+            this.audioPathFour = await getResourcePath(
+                "e5b62ed418572b13405115020682e1cd"
+            );
+            this.audioPathFive = await getResourcePath(
+                "7abb747bd16745afb83715fcbb3579ab"
+            );
+        },
+        handleFocus(id) {
+            this.isFocused = id; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue  
+        },
+        handleBlur(id) {
+            this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse  
         },
         setBookQuestion() {
             console.log("淇濆瓨");

--
Gitblit v1.9.1