From 30d147c4c92dbfd5ca1b2f8c24a617dc82d2d25b Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 28 四月 2025 18:34:51 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/artAndDrama/view/components/chapter004.vue | 375 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 290 insertions(+), 85 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index cb0c15c..3aa4c7b 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -5,14 +5,15 @@
<h1 id="a004">
<!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
- <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
+ <audio style="margin-top: 1em;" :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></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>鍦ㄦ垙鍓ф紨鍑轰腑锛岄櫎浜嗚垶鍙颁笂鐨勬紨鍛橈紝瀵兼紨銆佺伅鍏夈�侀�犲瀷绛夊箷鍚庝汉鍛樹篃鍙戞尌鐫�閲嶈鐨勪綔鐢ㄣ�傛湰鍗曞厓璁╂垜浠粠鍙板墠璧拌繘骞曞悗锛屽悜榛橀粯濂夌尞鐨勫伐浣滀汉鍛樿嚧鏁紒</p>
+ <p class="block mar-block">
+ 鍦ㄦ垙鍓ф紨鍑轰腑锛岄櫎浜嗚垶鍙颁笂鐨勬紨鍛橈紝瀵兼紨銆佺伅鍏夈�侀�犲瀷绛夊箷鍚庝汉鍛樹篃鍙戞尌鐫�閲嶈鐨勪綔鐢ㄣ�傛湰鍗曞厓璁╂垜浠粠鍙板墠璧拌繘骞曞悗锛屽悜榛橀粯濂夌尞鐨勫伐浣滀汉鍛樿嚧鏁紒</p>
</div>
</div>
<p><br /></p>
@@ -29,20 +30,24 @@
<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><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 90%"/></p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>浠ュ皬缁勪负鍗曚綅鍥存垚涓�鍦堬紝闈㈡湞鍦堝韫蹭笅锛岀浉閭讳袱浜轰簰鎸庢墜鑷傦紝缁勫憳鍚屾椂绔欒捣鏉ワ紝鐪嬬湅鍝釜缁勬渶蹇紒</p>
+ <p class="text t-l rhombusFather"><span class="hs1 rhombus">鈼�</span>璇翠竴璇达細蹇�熺珯璧锋潵鐨勭璇�鏄粈涔堬紵
+ <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ class="w90 ma-l-40 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><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛岃〃婕斾互涓嬪満鏅紝娉ㄦ剰淇濇寔鍔ㄤ綔涓�鑷村摝銆�</p>
- <p>铓傝殎闃熼暱鍚瑰搷闆嗗悎鍙凤紝铓傝殎浠繀閫熻窇涓婂満绔欏ソ闃熷舰銆�</p>
- <p>铓傝殎浠姮鐫�濂堕叒鍚戝墠璧扮潃銆�</p>
- <p>铓傝殎浠窡闅忚殏铓侀槦闀跨殑鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>
- <p>铓傝殎浠敱鍥涢潰鍏柟璧板洖鏉ャ��</p>
- <p>铓傝殎浠姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>浠ュ皬缁勪负鍗曚綅锛岃〃婕斾互涓嬪満鏅紝娉ㄦ剰淇濇寔鍔ㄤ綔涓�鑷村摝銆�</p>
+ <p class="text">铓傝殎闃熼暱鍚瑰搷闆嗗悎鍙凤紝铓傝殎浠繀閫熻窇涓婂満绔欏ソ闃熷舰銆�</p>
+ <p class="text">铓傝殎浠姮鐫�濂堕叒鍚戝墠璧扮潃銆�</p>
+ <p class="text">铓傝殎浠窡闅忚殏铓侀槦闀跨殑鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</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,12 +63,17 @@
<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 rhombusFather"><span
+ class="hs1 rhombus">鈼�</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" /> -->
+ <paint :imgUrl="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :page="32"
+ />
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -78,9 +88,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 rhombusFather"><span class="hs1 rhombus">鈼�</span>鍔ㄥ姩鎵嬶紝涓恒�婁竴鍧楀ザ閰�嬩腑鐨勮殏铓佽鑹茶璁＄畝鍗曠殑鏈嶈鍚э紒</p>
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -95,12 +105,20 @@
<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 rhombusFather"><span class="hs1 rhombus">鈼�</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 rhombusFather"><span class="hs1 rhombus">鈼�</span>璇锋牴鎹�婁竴鍧楀ザ閰�嬬殑鍓ф湰锛屽垪鍑烘紨鍑轰腑闇�瑕佺殑閬撳叿娓呭崟锛岃鎸夌収娓呭崟锛屽埄鐢ㄤ綘鏀堕泦鐨勬棫鐗╁埗浣滈亾鍏峰惂锛�</p>
+ <p class="text">
+ <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ style="margin: 1em 0; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
+ @blur="handleBlur('two')">
+ </textarea>
+ </p>
<p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -116,20 +134,21 @@
<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 rhombusFather"><span class="hs1 rhombus">鈼�</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>
- <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
+ <h3 class="lefth3" id="c038" style="margin-top: 7%;"><img class="img-gn1" alt=""
+ src="../../assets/images/czysj.jpg" /></h3>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>閭�璇峰悓浼村叡鍚屽畬鎴愩�婁竴鍧楀ザ閰�嬬殑灞曟紨鍚э紒</p>
+ <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/0036-2.jpg" /></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 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">
@@ -137,27 +156,39 @@
<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鎷嶆墜鑲樺唴渚у悜鍐呮敹鍥烇紝鍚庤儗鎷辫捣锛屽甫鍔ㄥ弻鑲╁唴鎵ｃ��</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 ends rhombusFather">
+ <span><span class="hs1 rhombus">鈼�</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 ends rhombusFather">
+ <span><span class="hs1 rhombus">鈼�</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鎷嶆墜鑲樺唴渚у悜鍐呮敹鍥烇紝鍚庤儗鎷辫捣锛屽甫鍔ㄥ弻鑲╁唴鎵ｃ��</p>
+ <p class="text">绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombus">鈼�</span>鎻愭矇鑲╄繍鍔�</span>
+ <span> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload"
+ class="audio"></audio> </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 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">
@@ -166,59 +197,93 @@
<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 ends rhombusFather">
+ <span><span class="hs1 rhombus">鈼�</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>
+ <h3 class="lefth3" id="c040" style="margin-top: 7%;"><img class="img-gn1" alt=""
+ src="../../assets/images/tzyys.jpg" /></h3>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</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"
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="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? 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">34</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>
-
<script>
import { getResourcePath } from "@/assets/methods/resources";
+import paint from '@/components/paint/index.vue'
+import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
export default {
name: "chapterFour",
props: {
showPageList: {
type: Array,
},
-
},
+ components: {
+ paint
+ },
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
- mounted() {
+ async mounted() {
this.getVidoePath();
const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
if (bookQuestion) {
this.questionData = JSON.parse(bookQuestion);
}
+
+ const data = localStorage.getItem("artAndDrama-chapter04-Data");
+ if (data) {
+ this.chapterData = JSON.parse(data);
+ }
+ this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
},
data() {
return {
+ 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鐨勮仛鐒︾姸鎬�
+ collectResourceList: [],
+ chapterData: {
+ isCollectImg: false,
+ isCollectVideo: false,
+ txtOne: "",
+ txtTwo: "",
+ },
questionData: {
warnUp: {
one: "",
-
},
reading: {
one: "",
@@ -238,32 +303,172 @@
},
};
},
+ //娴嬭瘯
+ computed: {
+ currentQuestion() {
+ return this.questions[this.currentIndex];
+ },
+ },
+ //娴嬭瘯缁撴潫
methods: {
//瑙嗛鍜岄煶棰戠殑MD5鍦板潃
async getVidoePath() {
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("淇濆瓨");
localStorage.setItem(
"artAndDrama-book-question-four",
JSON.stringify(this.questionData)
);
- },
- audioPlay(e) {
- this.$emit('closeAudio',e.srcElement.currentSrc)
- }
+ },
+ handleChapterData() {
+ localStorage.setItem(
+ "artAndDrama-chapter04-Data",
+ JSON.stringify(this.chapterData)
+ );
+ },
+ handleCollect(type) {
+ if (type == "video") {
+ this.handleCollectResource("09de7704eeaaf3a210b8c6af0a94d545", "09de7704eeaaf3a210b8c6af0a94d545", '', "瑙嗛", "bits", '瑙嗛锛氬洟缁撳氨鏄姏閲�')
+ }
+ this.handleChapterData();
+ },
+ //璧勬簮鏀惰棌浜嬩欢
+ handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
+ let list = this.collectResourceList
+ if (list.findIndex(item => item.id == id) > -1) {
+ list = list.filter(item => item.id != id)
+ } else {
+ list.push({
+ id,
+ md5,
+ resourcePath,
+ resourceType,
+ source,
+ resourceName,
+ })
+ }
+ this.collectResourceList = list
+ setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
+ }
},
-
};
</script>
<style lang="less" scoped>
+//娴嬭瘯
+.all-options {
+ display: flex;
+ justify-content: space-between;
+ margin-left: 10%;
+}
+
+.option {
+ position: relative;
+ /* 璁剧疆涓虹浉瀵瑰畾浣嶅鍣� */
+ display: inline-flex;
+ /* 浣跨敤 Flexbox 浠ヤ究鏇村ソ鍦版帶鍒跺竷灞�鍜屽榻� */
+ align-items: center;
+ /* 鍨傜洿灞呬腑瀵归綈 */
+
+}
+
+.option-img {
+ width: 80%;
+ height: auto;
+ // z-index: -1;
+}
+
+.option-text {
+ position: absolute;
+ z-index: 1;
+ left: 29px;
+ top: 64px;
+}
+
+.cloud-icon {
+ fill: rgb(245, 130, 32);
+}
+
+.btn-button {
+ width: 70%;
+ margin: 10px auto 0 auto;
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+}
+
+.btn-button>button {
+ width: 80px;
+ height: 30px;
+ margin-top: 10px;
+ border: 1px solid rgb(245, 130, 32);
+ background-color: transparent;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.btn-button>button:hover {
+ background-color: rgb(245, 130, 32);
+ /* 榧犳爣鎮仠鏃惰儗鏅壊鍙樹负绾㈣壊 */
+ color: white;
+ /* 榧犳爣鎮仠鏃跺瓧浣撻鑹插彉涓虹櫧鑹� */
+ /* 鍏朵粬浣犳兂瑕佺殑鎮仠鏍峰紡... */
+}
+
+.active {
+ color: white;
+ transition: color 0.3s;
+}
+
+.key {
+ display: flex;
+ justify-content: space-around;
+}
+
+.right-key {
+ color: green;
+}
+
+.correct-answer {
+ color: green;
+ /* 姝ｇ‘绛旀鐨勫瓧浣撻鑹� */
+}
+
+.incorrect-answer {
+ color: red;
+ /* 閿欒绛旀鐨勫瓧浣撻鑹� */
+}
+
+.face {
+ width: 15%;
+ height: auto;
+}
+
+//娴嬭瘯缁撴潫
.w70 {
width: 78%;
}
--
Gitblit v1.9.1