From f99d327dd2a9923c511373e76eef533457e4af32 Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期一, 17 六月 2024 15:15:30 +0800
Subject: [PATCH] 艺术戏剧（整本分页）
---
src/books/artAndDrama/view/components/chapter001.vue | 82 +++++++++++++++++++++--------------------
1 files changed, 42 insertions(+), 40 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 0de2d1b..54731ea 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -3,9 +3,8 @@
<div class="page-box" page="4">
<div v-if="showPageList.indexOf(4) > -1">
<h1 id="a004">
- <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
- <audio :src="auidoPathOne" class="audio" controls></audio>
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -14,14 +13,12 @@
<img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
</p>
</div>
-
<p class="block">
鍦ㄦ晠浜嬨�婁竴鍧楀ザ閰�嬩腑锛岃殏铓佸搴殑姣忎竴浣嶆垚鍛橀兘涓轰簡鍏卞悓鐨勭洰鏍囧垎宸ュ崗浣溿�佸姫鍔涘鏂楋紝鍦ㄩ潰瀵硅鎯戝拰鎸戞垬鏃舵洿鏄弗浜庡緥宸便�侀伒瀹堝洟闃熺邯寰嬨�傛湰鍗曞厓锛岃鎴戜滑璇讳竴璇汇�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽涔犺殏铓佷滑鐨勪紭绉�鍝佹牸鍚э紒
</p>
</div>
</div>
<p><br /></p>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
<img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-right">1</div>
@@ -30,11 +27,11 @@
</div>
<div class="page-box" page="5">
<div v-if="showPageList.indexOf(5) > -1">
- <h1>
+ <h1 style="margin-bottom: 0%">
<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">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b001">绗竴璇俱��榻愬績鍗忓姏</h2>
<h3 class="lefth3" id="c001">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -46,11 +43,13 @@
<span class="hs1">鈼�</span>澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
</p>
<h1>
- <audio :src="auidoPathTwo" class="audio" controls></audio>
+ <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
</h1>
- <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
+
<!-- 杩炵嚎棰� -->
- <matching :rawData="rawData" :item="question"></matching>
+ <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
+ <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
+
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -100,11 +99,11 @@
</div>
<div class="page-box" page="7">
<div v-if="showPageList.indexOf(7) > -1">
- <h1>
+ <h1 style="margin-bottom: 0%">
<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">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b002">绗簩璇俱��娲ユ触涔愰亾</h2>
<h3 class="lefth3" id="c003">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -112,7 +111,7 @@
<p>
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
- <h1><audio :src="auidoPathThree" class="audio" controls></audio></h1>
+ <h1><audio :src="auidoPathThree" controls class="audio" @play="audioPlay"></audio></h1>
<div class="bj3">
<p class="center">
@@ -150,18 +149,20 @@
<div class="page-box" page="8">
<div v-if="showPageList.indexOf(8) > -1">
<h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
<h2 id="b003">绗笁璇俱��鍐呭績鐨勫０闊�</h2>
- <h1 class="lefth3 openImgBox" id="c005">
- <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
- </h1>
+ <h3 class="lefth3" id="c006">
+ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
+ </h3>
<p>
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
- <h1><audio :src="auidoPathTwo" class="audio" controls></audio></h1>
+ <h1 class="lefth3 openImgBox" id="c005">
+ <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
+ </h1>
+ <h1><audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio></h1>
<div class="bj3">
<p class="center">
<span class="hs">鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</span>
@@ -176,7 +177,7 @@
class="un1">杞绘倓鎮�</span>鐨勶紝鑽�<span class="un1">杞坏缁�</span>鐨勩��
</p>
</div>
- <hr />
+ <hr style="margin-left: 0; width: 20%;" />
<p class="note">
<a id="m1">1</a>
鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
@@ -192,11 +193,11 @@
</div>
<div class="page-box" page="9">
<div v-if="showPageList.indexOf(9) > -1">
- <h1>
+ <h1 style="margin-bottom: 0%;">
<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">
- <img src="../../assets/images/page5.png" alt="" />
<h3 class="lefth3" id="c006">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
@@ -208,10 +209,10 @@
class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
</p>
<p>姝ｄ箟闃熼暱锛氣��
- <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" />鈥�
+ <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-66" @change="setBookQuestion" />銆傗��
</p>
- <p>榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
- @change="setBookQuestion" />鈥�</p>
+ <p>榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-66" @change="setBookQuestion" />銆傗��
+ </p>
</div>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -234,7 +235,7 @@
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1>
- <audio :src="auidoPathTwo" class="audio" controls></audio>
+ <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bj3">
@@ -263,7 +264,7 @@
v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
@change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
</p>
- <hr />
+ <hr style="margin-left: 0; width: 20%;" />
<p class="note">
<a id="m1">1</a>
鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
@@ -282,8 +283,9 @@
<h1>
<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">
- <img src="../../assets/images/page5.png" alt="" />
+
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-5.gif" />
</p>
@@ -337,6 +339,7 @@
<h1>
<img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle">
<h3 class="lefth3" id="c010">
<img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
@@ -373,6 +376,10 @@
showPageList: {
type: Array,
},
+ primaryColor: {
+ type: String,
+ default: "red"
+ }
},
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
@@ -385,9 +392,6 @@
data() {
return {
videoPathOne: "",
- videoPathTwo: "",
- videoPathThree: "",
- videoPathFour: "",
auidoPathOne: "",
auidoPathTwo: "",
auidoPathThree: "",
@@ -530,21 +534,11 @@
},
};
},
-
methods: {
//瑙嗛鍜岄煶棰戠殑MD5鍦板潃
async getVidoePath() {
this.videoPathOne = await getResourcePath(
"691cbd2c13198d04afc7800d0f2cafb0"
- );
- this.videoPathTwo = await getResourcePath(
- "a3c9b55ac8227e4c885384ff2fc6c0e7"
- );
- this.videoPathThree = await getResourcePath(
- "dd44a1e31b4304f50d10b2481a148411"
- );
- this.videoPathFour = await getResourcePath(
- "09de7704eeaaf3a210b8c6af0a94d545"
);
// this.auidoPathOne = await getResourcePath(
// "2c5f6c69b0f9f7a3c03e473cb8c977f5"
@@ -563,6 +557,9 @@
JSON.stringify(this.questionData)
);
},
+ audioPlay(e) {
+ this.$emit('closeAudio', e.srcElement.currentSrc)
+ }
},
};
</script>
@@ -591,4 +588,9 @@
height: 100%;
background-color: red;
}
+
+.macthing {
+ background-color: rgb(188, 220, 164);
+ padding: 5% 5%;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1