From 53c71572f88a86514a41f0a8f489fccfcaeed6e2 Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期三, 19 六月 2024 11:31:48 +0800
Subject: [PATCH] 艺术戏剧（连线题验证）
---
src/books/artAndDrama/view/components/chapter001.vue | 383 +++++++++++++++++++++++++++++++----------------------
1 files changed, 223 insertions(+), 160 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index babd03a..68b2c5b 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" class="audio" controls></audio>
+ <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -13,7 +13,7 @@
<img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
</p>
</div>
- <p class="block">
+ <p class="block" style="margin: 8% 5% 5% 7%">
鍦ㄦ晠浜嬨�婁竴鍧楀ザ閰�嬩腑锛岃殏铓佸搴殑姣忎竴浣嶆垚鍛橀兘涓轰簡鍏卞悓鐨勭洰鏍囧垎宸ュ崗浣溿�佸姫鍔涘鏂楋紝鍦ㄩ潰瀵硅鎯戝拰鎸戞垬鏃舵洿鏄弗浜庡緥宸便�侀伒瀹堝洟闃熺邯寰嬨�傛湰鍗曞厓锛岃鎴戜滑璇讳竴璇汇�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽涔犺殏铓佷滑鐨勪紭绉�鍝佹牸鍚э紒
</p>
</div>
@@ -24,30 +24,30 @@
<div class="page-footer-number-right">1</div>
</div>
</div>
- </div>
+ </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>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h2 id="b001">绗竴璇俱��榻愬績鍗忓姏</h2>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle" style="margin-top: 3%">
+ <h2 id="b001" class="problem">绗竴璇俱��榻愬績鍗忓姏</h2>
<h3 class="lefth3" id="c001">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p>
+ <p class="text">
鍦ㄨ瑷�琛ㄨ堪涓紝涓轰簡绐佸嚭鎴栧己璋冩煇浜涙剰鎬濓紝鎴戜滑浼氫娇鐢ㄢ�滈�昏緫閲嶉煶鈥濊繖涓�鎶�宸с�傚悓鏍蜂竴鍙ヨ瘽锛屼笉鍚岀殑閫昏緫閲嶉煶鍙互琛ㄨ揪鍑轰笉涓�鏍风殑鎰忔�濄��
</p>
- <p>
+ <p class="text">
<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" class="macthing" :primaryColor="'transparent'"></matching>
+ <!-- 杩炵嚎棰� -->
+ <matching :rawData="rawData" :question="question" class="macthing" :primaryColor="'transparent'"></matching>
+ <p class="text">灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -59,34 +59,45 @@
</div>
<div class="page-box" page="6">
<div v-if="showPageList.indexOf(6) > -1">
- <h1>
- <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
- </h1>
+ <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
<div class="bodystyle">
- <h1 class="lefth3" id="c002">
- <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
- </h1>
- <p><span class="hs1">鈼�</span>璇烽�夊嚭浣犺涓烘纭殑绛旀銆�</p>
+ <h3 class="lefth3" id="c001"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p class="text"><span class="hs1">鈼�</span>璇烽�夊嚭浣犺涓烘纭殑绛旀銆�</p>
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-2铓傝殎涓惧ぇ鏍�.gif" />
</p>
- <p>铓傝殎鏄吀鍨嬬殑锛堛��銆�锛夋槅铏�傦紙澶氶�夛級</p>
- <p>A.缇ゅ眳</p>
- <p>B.绀句細鎬�</p>
- <p>C.鐙眳</p>
- <p>铓傝殎鍐呴儴鏈夛紙銆�銆�锛夊垎宸ャ�傦紙澶氶�夛級</p>
- <p>A.鏄庣‘鐨�</p>
- <p>B.濂囨�殑</p>
- <p>C.鏈夊簭鐨�</p>
- <p>涓�涓紙銆�銆�锛夌兢浣撳皯涓嶄簡榛樺鐨勯厤鍚堛�傦紙澶氶�夛級</p>
- <p>A.鍥㈢粨鐨�</p>
- <p>B.浼樼鐨�</p>
- <p>C.鏉炬暎鐨�</p>
+ <p class="text">铓傝殎鏄吀鍨嬬殑锛堛��銆�锛夋槅铏�傦紙澶氶�夛級</p>
+ <p class="text">A.缇ゅ眳</p>
+ <p class="text">B.绀句細鎬�</p>
+ <p class="text">C.鐙眳</p>
+ <p class="text">铓傝殎鍐呴儴鏈夛紙銆�銆�锛夊垎宸ャ�傦紙澶氶�夛級</p>
+ <p class="text">A.鏄庣‘鐨�</p>
+ <p class="text">B.濂囨�殑</p>
+ <p class="text">C.鏈夊簭鐨�</p>
+ <p class="text">涓�涓紙銆�銆�锛夌兢浣撳皯涓嶄簡榛樺鐨勯厤鍚堛�傦紙澶氶�夛級</p>
+ <p class="text">A.鍥㈢粨鐨�</p>
+ <p class="text">B.浼樼鐨�</p>
+ <p class="text">C.鏉炬暎鐨�</p>
<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" @play="videoPlay"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
- <h2>瑙嗛: 鎴戜滑鏄竴瀹朵汉</h2>
+ <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"
+ @click="handleCollect('video')"
+ />
+ </el-tooltip>
+ </p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -97,20 +108,19 @@
</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>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h2 id="b002">绗簩璇俱��娲ユ触涔愰亾</h2>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle" style="margin-top: 3%">
+ <h2 id="b002" class="problem">绗簩璇俱��娲ユ触涔愰亾</h2>
<h3 class="lefth3" id="c003">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p>
+ <p class="text">
<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">
<span class="hs">鏄�<a id="w1"><sup>1</sup></a>锛堣妭閫夛級</span>
@@ -127,14 +137,13 @@
<h3 class="lefth3" id="c004">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p>
+ <p class="text">
<span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
</p>
- <hr />
- <p class="note">
+ <hr style="margin-left: 9%; margin-top: 10%; width: 25%;" />
+ <p class="note left1 references">
<a id="m1">1</a>
- 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
- 涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
+ 鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功璇枃涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -147,18 +156,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>
+ <div class="bodystyle" style="margin-top: 3%">
+ <h2 id="b003" class="problem">绗笁璇俱��鍐呭績鐨勫０闊�</h2>
+ <h3 class="lefth3" id="c006">
+ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
+ </h3>
+ <p class="text">
+ <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ </p>
<h1 class="lefth3 openImgBox" id="c005">
<img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
</h1>
- <p>
- <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
- </p>
- <h1><audio :src="auidoPathTwo" class="audio" controls></audio></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>
@@ -173,65 +184,64 @@
class="un1">杞绘倓鎮�</span>鐨勶紝鑽�<span class="un1">杞坏缁�</span>鐨勩��
</p>
</div>
- <hr />
- <p class="note">
+ <hr style="margin-left: 9%; width: 20%;" />
+ <p class="note left1 references">
<a id="m1">1</a>
鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
</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">5</div>
- </div>
+ </div>
+ </div>
</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>
<h1 class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
</h1>
- <p>
- <span
- class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
+ <p class="text">
+ <span class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
</p>
- <p>姝ｄ箟闃熼暱锛氣��
- <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" />鈥�
+ <p class="text">姝ｄ箟闃熼暱锛氣��
+ <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60" @change="setBookQuestion" />銆傗��
</p>
- <p>榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
- @change="setBookQuestion" />鈥�</p>
+ <p class="text">榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-60" @change="setBookQuestion" />銆傗��
+ </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">6</div>
- </div>
+ </div>
+ </div>
</div>
<div class="page-box" page="10">
<div v-if="showPageList.indexOf(10) > -1">
<h1>
<img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle">
- <h2 id="b004">绗洓璇俱��韬复鍏跺</h2>
+ <div class="bodystyle" style="margin-top: 3%">
+ <h2 id="b004" class="problem">绗洓璇俱��韬复鍏跺</h2>
<h3 class="lefth3" id="c007">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p>
+ <p class="text">
<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">
@@ -248,10 +258,10 @@
<h3 class="lefth3" id="c008">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p>
+ <p class="text">
<span class="hs1">鈼�</span>鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
</p>
- <p>
+ <p class="text">
鎴戞槸铓傝殎 <input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" style=" width: 10%;"
@change="setBookQuestion" />锛堝悕瀛楋級锛屼粖澶╂槸
<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" style=" width: 10%;"
@@ -260,102 +270,119 @@
v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
@change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
</p>
- <hr />
- <p class="note">
+ <hr style="margin-left: 9%; width: 20%;" />
+ <p class="note references">
<a id="m1">1</a>
鏈辫嚜娓咃細銆婃槬銆嬶紝瑙佹俯鍎掓晱绛夛細銆婁箟鍔℃暀鑲叉暀绉戜功 璇枃
涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
</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">7</div>
- </div>
+ </div>
+ </div>
</div>
<div class="page-box" page="11">
<div v-if="showPageList.indexOf(11) > -1">
<h1>
<img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle" style="margin-top: 3%;">
+
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-5.gif" />
</p>
- <p>
+ <p class="text">
<span class="hs1">鈼�</span>铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
</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">8</div>
- </div>
+ </div>
+ </div>
</div>
<div class="page-box" page="12">
<div v-if="showPageList.indexOf(12) > -1">
<h1>
<img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle">
- <h2 id="b005">鍗曞厓娲诲姩浠诲姟</h2>
+ <div class="bodystyle" style="margin-top: 3%">
+ <h2 id="b005" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
<h3 class="lefth3" id="c009">
<img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
</h3>
- <p><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</p>
- <p>
+ <p class="text"><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</p>
+ <p class="text">
璇蜂綘浜ゆ浛鈥滄斁澶р�濆拰鈥滅缉灏忊�濅簲瀹樸�傚湪鈥滄斁澶р�濇椂锛屾兂璞′簲瀹樿椋炲埌澶栧お绌猴紱鍦ㄢ�滅缉灏忊�濇椂锛屾兂璞′簲瀹樺叏閮ㄧ缉灏忓埌浜嗛蓟灏栦笂銆�
</p>
- <p><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</p>
- <p>
+ <p class="text"><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</p>
+ <p class="text">
鎯宠薄浣犲湪涓�涓檶鐢熺殑鍦版柟锛岃皝閮戒笉璁よ瘑锛岀獊鐒堕亣瑙佷簡濂芥湅鍙嬶紝浣犲緢楂樺叴锛屼笂鍓嶅拰浠�/濂规墦鎷涘懠銆傚仛涓�鍋氫綘姝ゆ椂鐨勮〃鎯呭惂銆�
</p>
- <p><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</p>
- <p>
+ <p class="text"><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</p>
+ <p class="text">
璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚０闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
</p>
- <p><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</p>
- <p>
+ <p class="text"><span class="hs1">鈼�</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">9</div>
</div>
+ </div>
</div>
<div class="page-box" page="13">
<div v-if="showPageList.indexOf(13) > -1">
<h1>
<img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle">
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle" style="margin-top: 3%">
<h3 class="lefth3" id="c010">
<img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
</h3>
- <p><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
- <p>
+ <p class="text"><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
+ <p class="text">
瀛旇瀺鍥涘瞾灏辨噦绀艰矊銆佺煡璋﹁锛屾槸鎴戜滑瀛︿範鐨勫ソ姒滄牱锛岃鎴戜滑杩愮敤鏈崟鍏冪殑鎴忓墽鐭ヨ瘑锛屾妸浠栫殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒
</p>
<p class="center">
<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" @play="videoPlay"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
- <h2>瑙嗛: 鎴戜滑鏄竴瀹朵汉</h2>
- </p>
+ </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"
+ @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">10</div>
</div>
+ </div>
</div>
</div>
</template>
@@ -370,9 +397,9 @@
showPageList: {
type: Array,
},
- primaryColor:{
- type:String,
- default:"red"
+ primaryColor: {
+ type: String,
+ default: "red",
}
},
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
@@ -385,27 +412,36 @@
},
data() {
return {
+ collectImg: require("../../assets/images/icon/heart.png"),
+ collectCheck: require("../../assets/images/icon/heart-check.png"),
videoPathOne: "",
auidoPathOne: "",
auidoPathTwo: "",
auidoPathThree: "",
+ chapterData: {
+ isCollectImg: false,
+ isCollectVideo: false,
+ txtOne: "",
+ txtTwo: "",
+ },
rawData: {
left: [
{
oldId: "FB34",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
+ txt: " <span class='un1'>鎴�</span>璇蜂綘鍚冭嫻鏋滃惂锛�",
+
},
{
oldId: "64D6",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
+ txt: "鎴�<span class='un1'>璇�</span>浣犲悆鑻规灉鍚э紒",
},
{
oldId: "2ED4",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
+ txt: "鎴戣<span class='un1'>浣�</span>鍚冭嫻鏋滃惂锛�",
},
{
oldId: "44DE",
- txt: "鎴戣浣犲悆鑻规灉鍚э紒",
+ txt: "鎴戣浣犲悆<span class='un1'>鑻规灉</span>鍚э紒",
},
],
right: [
@@ -414,15 +450,15 @@
txt: "寮鸿皟鏄瀹�",
},
{
- oldId: "FB34",
+ oldId: "2ED4",
txt: "寮鸿皟璇风殑鏄�滀綘鈥�",
},
{
- oldId: "2ED4",
+ oldId: "44DE",
txt: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
},
{
- oldId: "44DE",
+ oldId: "FB34",
txt: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
},
],
@@ -430,66 +466,68 @@
question: {
KnowledgePoint: "123",
analysis: "123",
+ //姝ｇ‘绛旀
answer: [
{
id: "FB34",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟鏄瀹�",
+ linkValue: "<span class='un1'>鎴�</span>璇蜂綘鍚冭嫻鏋滃惂锛�",
+ value: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
},
{
id: "64D6",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
+ linkValue: "鎴�<span class='un1'>璇�</span>浣犲悆鑻规灉鍚э紒",
+ value: "寮鸿皟鏄瀹�",
+ },
+ {
+ id: "2ED4",
+ linkValue: "鎴戣<span class='un1'>浣�</span>鍚冭嫻鏋滃惂锛�",
value: "寮鸿皟璇风殑鏄�滀綘鈥�",
},
{
- id: "2ED4",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
- },
- {
id: "44DE",
- linkValue: "鎴戣浣犲悆鑻规灉鍚э紒",
- value: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
+ linkValue: "鎴戣浣犲悆<span class='un1'>鑻规灉</span>鍚э紒",
+ value: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
},
],
optionStyle: undefined,
id: 489306,
options: {
linkValues: [
- {
- oldId: "64D6",
- txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
- },
- {
- oldId: "44DE",
- txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
- },
- {
- oldId: "FB34",
- txt: "The clothing material is quite popular among Roman women inancient times.",
- },
- {
- oldId: "2ED4",
- txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
- },
+ {
+ oldId: "FB34",
+ txt: "<span class='un1'>鎴�</span>璇蜂綘鍚冭嫻鏋滃惂锛�",
+
+ },
+ {
+ oldId: "64D6",
+ txt: "鎴�<span class='un1'>璇�</span>浣犲悆鑻规灉鍚э紒",
+ },
+ {
+ oldId: "2ED4",
+ txt: "鎴戣<span class='un1'>浣�</span>鍚冭嫻鏋滃惂锛�",
+ },
+ {
+ oldId: "44DE",
+ txt: "鎴戣浣犲悆<span class='un1'>鑻规灉</span>鍚э紒",
+ },
],
values: [
- {
- oldId: "FB34",
- txt: "Martin Silk",
- },
- {
- oldId: "64D6",
- txt: "The Great Wall",
- },
- {
- oldId: "2ED4",
- txt: "Chinese Food",
- },
- {
- oldId: "44DE",
- txt: "Chinese Tea",
- },
+ {
+ oldId: "64D6",
+ txt: "寮鸿皟鏄瀹�",
+ },
+ {
+ oldId: "2ED4",
+ txt: "寮鸿皟璇风殑鏄�滀綘鈥�",
+ },
+ {
+ oldId: "44DE",
+ txt: "寮鸿皟鍚冪殑涓滆タ鏄�滆嫻鏋溾��",
+ },
+ {
+ oldId: "FB34",
+ txt: "寮鸿皟璇峰鐨勪汉鏄�滄垜鈥�",
+ },
],
},
questionType: "matching",
@@ -500,6 +538,7 @@
titleDescription: "1",
userChoise: [],
value: [],
+ answerImg: require("../../assets/images/matching-one.png"),
},
questionData: {
warnUp: {
@@ -509,6 +548,8 @@
four: "",
five: "",
six: "",
+ seven: "",
+ enight: "",
},
reading: {
one: "",
@@ -551,6 +592,26 @@
JSON.stringify(this.questionData)
);
},
+ audioPlay(e) {
+ this.$emit('closeAudio', e.srcElement.currentSrc)
+ },
+ videoPlay(e) {
+ this.$emit('closeVideo',e.srcElement.currentSrc)
+ },
+ handleChapterData() {
+ localStorage.setItem(
+ "math-chapterData",
+ 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;
+ }
+ this.handleChapterData();
+ },
},
};
</script>
@@ -579,8 +640,10 @@
height: 100%;
background-color: red;
}
-.macthing{
+
+.macthing {
background-color: rgb(188, 220, 164);
- padding: 5% 5%;
+ padding: 3% 0;
+ margin: 0% 8%;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1