From f77e02b69e4512f00251929b14888f3e6bbac37f Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 09 九月 2024 10:41:19 +0800
Subject: [PATCH] 艺术戏剧（bug解决）
---
src/books/artAndDrama/view/components/chapter001.vue | 117 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 72 insertions(+), 45 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 77e18ae..cee59a7 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -4,7 +4,7 @@
<div v-if="showPageList.indexOf(4) > -1">
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
- <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+ <audio style="margin-top: 1em" :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -36,11 +36,11 @@
<h3 class="lefth3" id="c001">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
+ <p class="text ">
鍦ㄨ瑷�琛ㄨ堪涓紝涓轰簡绐佸嚭鎴栧己璋冩煇浜涙剰鎬濓紝鎴戜滑浼氫娇鐢ㄢ�滈�昏緫閲嶉煶鈥濊繖涓�鎶�宸с�傚悓鏍蜂竴鍙ヨ瘽锛屼笉鍚岀殑閫昏緫閲嶉煶鍙互琛ㄨ揪鍑轰笉涓�鏍风殑鎰忔�濄��
</p>
- <p class="text">
- <span class="hs1">鈼�</span>澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
</p>
<h1>
<!-- <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
@@ -72,14 +72,14 @@
<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">
<span>瑙嗛锛氭垜浠槸涓�瀹朵汉 </span>
<el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
placement="top-start">
- <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
+ <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
@click="handleCollect('video')" />
</el-tooltip>
</p>
@@ -102,8 +102,8 @@
<h3 class="lefth3" id="c003">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus" style="">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio></h1>
<div class="bj3">
@@ -122,8 +122,8 @@
<h3 class="lefth3" id="c004">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
</p>
<hr style="margin-left: 9%; margin-top: 10%; width: 25%;" />
<p class="note left1 references">
@@ -148,8 +148,8 @@
<h3 class="lefth3" id="c006">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1 class="lefth3 openImgBox" id="c005">
<img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
@@ -196,17 +196,21 @@
<h1 class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
</h1>
- <p class="text">
+ <p class="text rhombusFather">
<span
- class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
+ class="hs1 rhombus">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
</p>
<p class="text t-l">姝ｄ箟闃熼暱锛�
<textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
- style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')" @blur="handleBlur('one')" ></textarea>
+ style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
+ @blur="handleBlur('one')"></textarea>
</p>
<p class="text t-l">榛戞殫闃熼暱锛�
<textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
- style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')" @blur="handleBlur('two')"></textarea>
+ style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
+ @blur="handleBlur('two')"></textarea>
</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -226,8 +230,8 @@
<h3 class="lefth3" id="c007">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1>
<audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
@@ -247,8 +251,8 @@
<h3 class="lefth3" id="c008">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
</p>
<p class="text">
鎴戞槸铓傝殎 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" style=" width: 13%;"
@@ -284,8 +288,8 @@
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-5.gif" />
</p>
- <p class="text">
- <span class="hs1">鈼�</span>铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -305,8 +309,8 @@
<h3 class="lefth3" id="c009">
<img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
</h3>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombuSpecial">鈼�</span>鏀惧ぇ缂╁皬</span>
<span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
</p>
@@ -314,16 +318,16 @@
璇蜂綘浜ゆ浛鈥滄斁澶р�濆拰鈥滅缉灏忊�濅簲瀹樸�傚湪鈥滄斁澶р�濇椂锛屾兂璞′簲瀹樿椋炲埌澶栧お绌猴紱鍦ㄢ�滅缉灏忊�濇椂锛屾兂璞′簲瀹樺叏閮ㄧ缉灏忓埌浜嗛蓟灏栦笂銆�
</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombuSpecial">鈼�</span>鎻愬崌鑻规灉鑲�</span>
<span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
</p>
<p class="text">
鎯宠薄浣犲湪涓�涓檶鐢熺殑鍦版柟锛岃皝閮戒笉璁よ瘑锛岀獊鐒堕亣瑙佷簡濂芥湅鍙嬶紝浣犲緢楂樺叴锛屼笂鍓嶅拰浠�/濂规墦鎷涘懠銆傚仛涓�鍋氫綘姝ゆ椂鐨勮〃鎯呭惂銆�
</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</span>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>寰瑧璇粹�渁ng鈥�</span>
<span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload"
class="audio"></audio></span>
</p>
@@ -331,8 +335,8 @@
璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚０闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
</p>
- <p class="text ends">
- <span style="text-wrap: nowrap"><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</span>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</span>
<span style="margin-left: -4%;"><audio :src="auidoPathNine" controls
controlslist="noplaybackrate nodownload" class="audio"></audio></span>
@@ -358,7 +362,7 @@
<h3 class="lefth3" id="c010">
<img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
</h3>
- <p class="text"><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
<p class="text">
瀛旇瀺鍥涘瞾灏辨噦绀艰矊銆佺煡璋﹁锛屾槸鎴戜滑瀛︿範鐨勫ソ姒滄牱锛岃鎴戜滑杩愮敤鏈崟鍏冪殑鎴忓墽鐭ヨ瘑锛屾妸浠栫殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒
</p>
@@ -372,7 +376,7 @@
<span>瑙嗛锛氭垜浠槸涓�瀹朵汉 </span>
<el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
placement="top-start">
- <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
+ <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
@click="handleCollect('video')" />
</el-tooltip>
</p>
@@ -391,6 +395,7 @@
import matching from "@/components/matching/matching.vue";
import choice from "@/components/choice/choice.vue"
import { getResourcePath } from "@/assets/methods/resources";
+import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
export default {
name: "chapterOne",
components: {
@@ -403,12 +408,18 @@
},
},
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
- mounted() {
- this.getVidoePath();
+ async mounted() {
const bookQuestion = localStorage.getItem("artAndDrama-book-question-one");
if (bookQuestion) {
this.questionData = JSON.parse(bookQuestion);
}
+ this.getVidoePath();
+ const data = localStorage.getItem("artAndDrama-chapter01-Data");
+ if (data) {
+ this.chapterData = JSON.parse(data);
+ }
+ this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
+
},
data() {
return {
@@ -427,6 +438,7 @@
accentColor: "",
color: "#fff",
isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
+ collectResourceList:[],
chapterData: {
isCollectImg: false,
isCollectVideo: false,
@@ -734,14 +746,13 @@
"3729175530def1b0baca68e0bd344862"
);
},
- handleFocus(id) {
+ handleFocus(id) {
this.isFocused = id; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue
- },
- handleBlur(id) {
+ },
+ handleBlur(id) {
this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse
- },
+ },
setBookQuestion() {
- console.log("淇濆瓨");
localStorage.setItem(
"artAndDrama-book-question-one",
JSON.stringify(this.questionData)
@@ -749,18 +760,34 @@
},
handleChapterData() {
localStorage.setItem(
- "math-chapterData",
+ "artAndDrama-chapter01-Data",
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;
- }
+ if (type == "video") {
+ this.handleCollectResource("691cbd2c13198d04afc7800d0f2cafb0","691cbd2c13198d04afc7800d0f2cafb0",'',"瑙嗛","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>
--
Gitblit v1.9.1