From 0e6467836bbd3fcd85d1cfaefcf763e58c9149be Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期四, 04 七月 2024 15:36:48 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/books/artAndDrama/view/components/chapter004.vue | 77 +++++++++++++++++++++++++++++--------- 1 files changed, 59 insertions(+), 18 deletions(-) diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue index 8b4faed..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,7 +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="800" /> + <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" + :imgWidth="596" :imgHeight="500" /> </div> <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 --> <div class="page-footer"> @@ -146,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> <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 --> @@ -164,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"> @@ -175,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> @@ -185,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"> @@ -216,7 +236,7 @@ type: Array, }, }, - components:{graffiti}, + components: { graffiti }, //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞� mounted() { this.getVidoePath(); @@ -230,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, @@ -240,11 +265,9 @@ questionData: { warnUp: { one: "", - }, reading: { one: "", - two: "", }, table: { one: "", @@ -273,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