From b8e76c47abeebb8e7531c4ae6272699d1ab81f3a Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期三, 19 六月 2024 10:08:05 +0800
Subject: [PATCH] 艺术戏剧(连线题优化)
---
src/books/artAndDrama/view/components/chapter002.vue | 270 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 164 insertions(+), 106 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index e4e8ebb..ebd4afe 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -4,7 +4,7 @@
<div v-if="showPageList.indexOf(14) > -1">
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
- <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></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>
@@ -32,34 +32,37 @@
<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="b006">绗竴璇俱��浜斿畼鐨勫姏閲�</h2>
+ <div class="bodystyle" style="margin-top: 3%">
+ <h2 id="b006" class="problem">绗竴璇俱��浜斿畼鐨勫姏閲�</h2>
<h3 class="lefth3" id="c011">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p><span class="hs1">鈼�</span>鎴戞槸灏忕敾瀹�</p>
- <p>淇濇寔澶撮儴涓嶅姩锛岃瘯鐫�鐢ㄧ溂绁炵敾鍑轰笅闈㈢殑鍥炬鍚э紒</p>
+ <p class="text"><span class="hs1">鈼�</span>鎴戞槸灏忕敾瀹�</p>
+ <p class="text">淇濇寔澶撮儴涓嶅姩锛岃瘯鐫�鐢ㄧ溂绁炵敾鍑轰笅闈㈢殑鍥炬鍚э紒</p>
<p class="center">
<img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
</p>
- <p><span class="hs1">鈼�</span>鍡呰澶у啋闄�</p>
- <p>
- 浣犳渶鐖卞悆鐨勯鐗╂槸 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%" />銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+ <p class="text"><span class="hs1">鈼�</span>鍡呰澶у啋闄�</p>
+ <p class="text">
+ 浣犳渶鐖卞悆鐨勯鐗╂槸 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 10%" />銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
</p>
- <p>
- 浣犳渶涓嶇埍鍚冪殑椋熺墿鏄� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%"/>銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
+ <p class="text">
+ 浣犳渶涓嶇埍鍚冪殑椋熺墿鏄� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 10%" />銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
</p>
<h3 class="lefth3 openImgBox" id="c012">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p>
- <span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
- </p>
- <p class="center openImgBox">
- <img class="img-e" alt="" src="../../assets/images/2-1.gif" />
- </p>
+ <div style="display: flex; justify-content: flex-start;">
+ <p class="text" style="width: 50%">
+ <span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
+ </p>
+ <p class="openImgBox" style="width: 50%">
+ <img class="img-e" alt="" src="../../assets/images/2-1.gif" />
+ </p>
+ </div>
</div>
- <p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
<img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
@@ -72,22 +75,32 @@
<h1>
<img src="../../assets/images/unit2-header-img.png" alt="" style="height: auto; width: 100%" />
</h1>
- <div class="bodystyle">
- <h2 id="b007">绗簩璇俱��鏄庡療绉嬫</h2>
+ <div class="bodystyle" style="margin-top: 3%;">
+ <h2 id="b007" class="problem">绗簩璇俱��鏄庡療绉嬫</h2>
<h3 class="lefth3" id="c013"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p><span class="hs1">鈼�</span>鎴戜滑鐨勪笘鐣屼簲褰╂枒鏂撱�傝浣犲～涓�濉紝鎻愬埌杩欎簺棰滆壊锛屼綘鎯冲埌浜嗗摢浜涗簨鐗╋紵</p>
- <p>榛勮壊锛氭煚妾��<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
- <p>绾㈣壊锛氶灜鐐��<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
- <p>缁胯壊锛氬彾瀛愩��<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.eight" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
- <p>榛戣壊锛氶粦鏉裤��<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.ten" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
- <p>钃濊壊锛氬ぇ娴枫��<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�<input v-model="questionData.warnUp.twelve" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%"/>銆�</p>
- <h3 class="lefth3" id="c014"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p><span class="hs1">鈼�</span>闃呰涓嬮潰鐨勬枃瀛楋紝涓哄皬铓傝殎閫夋嫨涓�绉嶆�ф牸鍚с��</p>
+ <p class="text"><span class="hs1">鈼�</span>鎴戜滑鐨勪笘鐣屼簲褰╂枒鏂撱�傝浣犲～涓�濉紝鎻愬埌杩欎簺棰滆壊锛屼綘鎯冲埌浜嗗摢浜涗簨鐗╋紵</p>
+ <p class="text">榛勮壊锛氭煚妾��<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 15%" />銆�<input v-model="questionData.warnUp.four"
+ class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />銆�</p>
+ <p class="text">绾㈣壊锛氶灜鐐��<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion"
+ style="width: 15%" />銆�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 15%" />銆�</p>
+ <p class="text">缁胯壊锛氬彾瀛愩��<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 15%" />銆�<input v-model="questionData.warnUp.eight"
+ class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />銆�</p>
+ <p class="text">榛戣壊锛氶粦鏉裤��<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18" @change="setBookQuestion"
+ style="width: 15%" />銆�<input v-model="questionData.warnUp.ten" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 15%" />銆�</p>
+ <p class="text">钃濊壊锛氬ぇ娴枫��<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 15%" />銆�<input v-model="questionData.warnUp.twelve"
+ class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />銆�</p>
+ <h3 class="lefth3" id="c014" style="margin-top: 7%;"><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/2-2.gif" /></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>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -102,19 +115,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="b008">绗笁璇俱��闂诲０璇嗕汉</h2>
+ <div class="bodystyle" style="margin-top: 3%;">
+ <h2 id="b008" class="problem">绗笁璇俱��闂诲０璇嗕汉</h2>
<h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p>甯歌█閬擄細鑹█涓�鍙ヤ笁鍐殩锛屾伓璇激浜哄叚鏈堝瘨銆傝瑷�鍦ㄤ汉涓庝汉鐨勪氦寰�涓捣鐫�閲嶈鐨勪綔鐢紝鏈夌潃鏃犵┓鐨勫姏閲忋��</p>
- <p><span class="hs1">鈼�</span>濡傛灉鏈嬪弸蹇冩儏涓嶅ソ锛屼綘璇ユ�庝箞瀹夋叞浠�/濂瑰憿锛�</p>
- <p>鈥�<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 80%"/>銆傗��</p>
- <p><span class="hs1">鈼�</span>濡傛灉浣犻個璇峰ソ鏈嬪弸鏉ュ閲屽仛瀹紝浣犺璇翠粈涔堟潵娆㈣繋浠�/濂瑰憿锛�</p>
- <p>鈥�<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 80%"/>銆傗��</p>
- <h3 class="lefth3" id="c016"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p><span class="hs1">鈼�</span>璇锋牴鎹彁绀鸿鍑哄彞瀛愶紝娉ㄦ剰澹伴煶鍜岃姘旂殑鍙樺寲銆�</p>
- <p><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙嫛鐚剧殑铓傝殎锛屾兂瑕佹妸濂堕叒鍋峰伔鍦板崰涓哄繁鏈夛級</p>
- <p><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙杽鑹殑铓傝殎锛屽湪甯姪浠栦汉鍚庡緱鍒颁簡濂栧姳锛�</p>
- <p><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜弗鑲冪殑铓傝殎闃熼暱锛屽悜闃熶紞鍙戝嚭鍛戒护锛�</p>
+ <p class="text">甯歌█閬擄細鑹█涓�鍙ヤ笁鍐殩锛屾伓璇激浜哄叚鏈堝瘨銆傝瑷�鍦ㄤ汉涓庝汉鐨勪氦寰�涓捣鐫�閲嶈鐨勪綔鐢紝鏈夌潃鏃犵┓鐨勫姏閲忋��</p>
+ <p class="text"><span class="hs1">鈼�</span>濡傛灉鏈嬪弸蹇冩儏涓嶅ソ锛屼綘璇ユ�庝箞瀹夋叞浠�/濂瑰憿锛�</p>
+ <p class="text">鈥�<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion"
+ style="width: 80%" />銆傗��</p>
+ <p class="text"><span class="hs1">鈼�</span>濡傛灉浣犻個璇峰ソ鏈嬪弸鏉ュ閲屽仛瀹紝浣犺璇翠粈涔堟潵娆㈣繋浠�/濂瑰憿锛�</p>
+ <p class="text">鈥�<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion"
+ style="width: 80%" />銆傗��</p>
+ <h3 class="lefth3" id="c016" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p class="text"><span class="hs1">鈼�</span>璇锋牴鎹彁绀鸿鍑哄彞瀛愶紝娉ㄦ剰澹伴煶鍜岃姘旂殑鍙樺寲銆�</p>
+ <p class="text"><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙嫛鐚剧殑铓傝殎锛屾兂瑕佹妸濂堕叒鍋峰伔鍦板崰涓哄繁鏈夛級</p>
+ <p class="text"><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙杽鑹殑铓傝殎锛屽湪甯姪浠栦汉鍚庡緱鍒颁簡濂栧姳锛�</p>
+ <p class="text"><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜弗鑲冪殑铓傝殎闃熼暱锛屽悜闃熶紞鍙戝嚭鍛戒护锛�</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -128,15 +143,15 @@
<h1>
<img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle">
- <p><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜竴鍙急灏忕殑铓傝殎锛屽湪鍚戣殏铓侀槦闀胯姹備紤鎭級</p>
+ <div class="bodystyle" style="margin-top: 3%">
+ <p class="text"><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜竴鍙急灏忕殑铓傝殎锛屽湪鍚戣殏铓侀槦闀胯姹備紤鎭級</p>
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-3.gif" /></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">15</div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">15</div>
+ </div>
</div>
</div>
<div class="page-box" page="19">
@@ -145,46 +160,49 @@
<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="b009">绗洓璇俱��鐪熷惉鐪熺湅鐪熸劅鍙�</h2>
+ <div class="bodystyle" style="margin-top: 3%;">
+ <h2 id="b009" class="problem">绗洓璇俱��鐪熷惉鐪熺湅鐪熸劅鍙�</h2>
<h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p>寰呬汉鎺ョ墿鏈夌ぜ鏈夎妭銆佽唉鍗戞伃鏁紝鍦ㄨ浠栦汉鎰熷埌濡傛矏鏄ラ鐨勫悓鏃讹紝涔熶細璁╄嚜宸卞彈鍒颁粬浜虹殑灏婇噸鍜岀悊瑙ｃ�傝璇翠竴璇达紝鍦ㄤ笅闈㈣繖浜涘満鏅腑浣犲簲璇ュ浣曞仛锛�</p>
- <p><span class="hs1">鈼�</span>浣犵湅鍒板濡堢殑姘存澂娌℃按浜嗐��</p>
- <p><span class="hs1">鈼�</span>鐢垫閲岋紝浣犵珯鍦ㄦ渶鍓嶆帓锛屽悗闈㈢殑浜洪渶瑕佷笅鐢垫銆�</p>
- <h3 class="lefth3" id="c018"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p>浣犵煡閬撳悧锛熸棤瀹炵墿璁粌鏄竴绉嶈缁冩紨鍛樼殑鏈夋晥鏂规硶锛屼笉浠呰兘澶熷煿鍏绘紨鍛樿壇濂界殑鎯宠薄鑳藉姏锛屾洿鑳藉鍩瑰吇鍏惰鍔ㄧ殑閫昏緫鎬у拰鎯呮櫙閫傚簲鎬э紝鏈�缁堟彁楂樺叾濉戦�犱汉鐗╁舰璞＄殑鑳藉姏銆�</p>
- <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-4.gif" /></p>
- <p><span class="hs1">鈼�</span>璇疯瘯鐫�鐢ㄦ棤瀹炵墿琛ㄦ紨鐨勬柟寮忔妸涓嬮潰鐨勬儏鏅〃婕斿嚭鏉ュ惂锛�</p>
- <p class="center"><img class="img-0" alt="" src="../../assets/images/0020-2.jpg" /></p>
+ <p class="text">寰呬汉鎺ョ墿鏈夌ぜ鏈夎妭銆佽唉鍗戞伃鏁紝鍦ㄨ浠栦汉鎰熷埌濡傛矏鏄ラ鐨勫悓鏃讹紝涔熶細璁╄嚜宸卞彈鍒颁粬浜虹殑灏婇噸鍜岀悊瑙ｃ�傝璇翠竴璇达紝鍦ㄤ笅闈㈣繖浜涘満鏅腑浣犲簲璇ュ浣曞仛锛�</p>
+ <p class="text"><span class="hs1">鈼�</span>浣犵湅鍒板濡堢殑姘存澂娌℃按浜嗐��</p>
+ <p class="text"><span class="hs1">鈼�</span>鐢垫閲岋紝浣犵珯鍦ㄦ渶鍓嶆帓锛屽悗闈㈢殑浜洪渶瑕佷笅鐢垫銆�</p>
+ <h3 class="lefth3" id="c018" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <div style="display: flex; justify-content: flex-start; ">
+ <p class="text" style="width: 50%;">浣犵煡閬撳悧锛熸棤瀹炵墿璁粌鏄竴绉嶈缁冩紨鍛樼殑鏈夋晥鏂规硶锛屼笉浠呰兘澶熷煿鍏绘紨鍛樿壇濂界殑鎯宠薄鑳藉姏锛屾洿鑳藉鍩瑰吇鍏惰鍔ㄧ殑閫昏緫鎬у拰鎯呮櫙閫傚簲鎬э紝鏈�缁堟彁楂樺叾濉戦�犱汉鐗╁舰璞＄殑鑳藉姏銆�</p>
+ <div class="openImgBox" style="width: 50%"><img class="img-e" alt="" src="../../assets/images/2-4.gif" /></div>
+ </div>
+ <p class="text"><span class="hs1">鈼�</span>璇疯瘯鐫�鐢ㄦ棤瀹炵墿琛ㄦ紨鐨勬柟寮忔妸涓嬮潰鐨勬儏鏅〃婕斿嚭鏉ュ惂锛�</p>
+ <p class="center text"><img class="img-0" style="width: 100%; height: auto;" lt="" src="../../assets/images/0020-2.jpg" /></p>
+ </div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">16</div>
</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">16</div>
- </div>
+
</div>
<div class="page-box" page="20">
<div v-if="showPageList.indexOf(20) > -1">
<h1>
<img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle">
- <h2 id="b010">鍗曞厓娲诲姩浠诲姟</h2>
+ <div class="bodystyle" style="margin-top: 3%">
+ <h2 id="b010" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
<h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
- <p><span class="hs1">鈼�</span>鍚圭焊缁冧範</p>
- <p class="center"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" /></p>
- <p>鎵句竴寮犵焊宸撅紝灏嗗畠鎸夊湪澧欎笂銆傜Щ寮�鍙屾墜锛屽姫鍔涚敤姘旀伅灏嗙焊鈥滈拤鈥濆湪澧欓潰涓婏紝涓嶈璁╁畠鍚戜笅婊戣惤銆�</p>
- <p><span class="hs1">鈼�</span>鍚圭瑪缁冧範</p>
- <p>灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙ｆ皵灏嗗畠鍚瑰�掋��</p>
- <p><span class="hs1">鈼�</span>鍚硅瀛愮粌涔�</p>
- <p>灏嗕竴鍙鏂欒鎶涜嚦绌轰腑锛屽拰浣犵殑灏忎紮浼翠竴璧疯疆娴佸惞姘旓紝閬垮厤濉戞枡琚嬭惤鍦般��</p>
+ <p class="text"><span class="hs1">鈼�</span>鍚圭焊缁冧範</p>
+ <p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" /></p>
+ <p class="text">鎵句竴寮犵焊宸撅紝灏嗗畠鎸夊湪澧欎笂銆傜Щ寮�鍙屾墜锛屽姫鍔涚敤姘旀伅灏嗙焊鈥滈拤鈥濆湪澧欓潰涓婏紝涓嶈璁╁畠鍚戜笅婊戣惤銆�</p>
+ <p class="text"><span class="hs1">鈼�</span>鍚圭瑪缁冧範</p>
+ <p class="text">灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙ｆ皵灏嗗畠鍚瑰�掋��</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">17</div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">17</div>
+ </div>
</div>
</div>
<div class="page-box" page="21">
@@ -193,24 +211,39 @@
<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><span class="hs1">鈼�</span>鍚逛箳涔撶悆缁冧範</p>
- <p>鐢ㄦ皵鎭皢妗岄潰涓婄殑涔掍箵鐞冧粠鈥滆捣鐐光�濊繍閫佽嚦鈥滅粓鐐光�濓紝杩愰�佽繃绋嬩腑閬垮厤涔掍箵鐞冭Е纰伴殰纰嶇墿銆�</p>
- <h3 class="lefth3" id="c020"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
- <p><span class="hs1">鈼�</span>璇疯蛋杩涘墽鍦鸿鐪嬩笉鍚屽墽绉嶇殑鐜板満婕斿嚭锛屾劅鍙楁垙鍓х殑榄呭姏鍚э紒</p>
- <p class="center">
+ <div class="bodystyle" style="margin-top: 3%;" >
+ <p class="text"><span class="hs1">鈼�</span>鍚逛箳涔撶悆缁冧範</p>
+ <p class="text">鐢ㄦ皵鎭皢妗岄潰涓婄殑涔掍箵鐞冧粠鈥滆捣鐐光�濊繍閫佽嚦鈥滅粓鐐光�濓紝杩愰�佽繃绋嬩腑閬垮厤涔掍箵鐞冭Е纰伴殰纰嶇墿銆�</p>
+ <h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
+ <p class="text"><span class="hs1">鈼�</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" @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">18</div>
+ <!-- 姝ゅ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">18</div>
+ </div>
</div>
</div>
</div>
@@ -236,8 +269,16 @@
},
data() {
return {
+ collectImg: require("../../assets/images/icon/heart.png"),
+ collectCheck: require("../../assets/images/icon/heart-check.png"),
videoPathOne: "",
auidoPathOne: "",
+ chapterData: {
+ isCollectImg: false,
+ isCollectVideo: false,
+ txtOne: "",
+ txtTwo: "",
+ },
questionData: {
warnUp: {
one: "",
@@ -246,14 +287,14 @@
four: "",
five: "",
six: "",
- seven:"",
- eight:"",
- nine:"",
- ten:"",
- eleven:"",
- twelve:"",
- thirteen:"",
- fourteen:"",
+ seven: "",
+ eight: "",
+ nine: "",
+ ten: "",
+ eleven: "",
+ twelve: "",
+ thirteen: "",
+ fourteen: "",
},
reading: {
one: "",
@@ -273,8 +314,6 @@
},
};
},
-
-
methods: {
//瑙嗛鍜岄煶棰戠殑MD5鍦板潃
async getVidoePath() {
@@ -292,9 +331,28 @@
JSON.stringify(this.questionData)
);
},
+ //闊抽
audioPlay(e) {
- this.$emit('closeAudio',e.srcElement.currentSrc)
- }
+ 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>
--
Gitblit v1.9.1