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/chapter004.vue | 152 ++++---
src/books/artAndDrama/assets/images/unit5-header-img.png | 0
src/books/artAndDrama/view/components/chapter005.vue | 212 +++++-----
src/books/artAndDrama/view/components/header.vue | 21
src/books/artAndDrama/assets/main.less | 81 ++-
src/books/artAndDrama/view/components/chapter003.vue | 198 ++++++---
src/books/artAndDrama/view/components/chapter002.vue | 270 ++++++++-----
src/books/artAndDrama/view/components/chapter001.vue | 228 ++++++----
src/books/artAndDrama/assets/images/icon/heart-check.png | 0
src/books/artAndDrama/assets/images/icon/heart.png | 0
src/books/artAndDrama/view/components/index.vue | 35 +
11 files changed, 712 insertions(+), 485 deletions(-)
diff --git a/src/books/artAndDrama/assets/images/icon/heart-check.png b/src/books/artAndDrama/assets/images/icon/heart-check.png
new file mode 100644
index 0000000..74d469c
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/icon/heart-check.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/icon/heart.png b/src/books/artAndDrama/assets/images/icon/heart.png
new file mode 100644
index 0000000..7817ec4
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/icon/heart.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/unit5-header-img.png b/src/books/artAndDrama/assets/images/unit5-header-img.png
new file mode 100644
index 0000000..48f15f1
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/unit5-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index e000d1d..2b241da 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/src/books/artAndDrama/assets/main.less
@@ -1,7 +1,7 @@
.ans-drama {
width: 100%;
height: 100%;
- font-family: "STKaiti", SimSun, sans-serif;
+ font-family: "瀹嬩綋","STKaiti", SimSun, sans-serif;
span.un1{
-webkit-text-emphasis-style:dot;
-moz-text-emphasis-style:dot;
@@ -20,8 +20,6 @@
li {
list-style-type:none;
}
-
-
.ls1{
font-family:"HiFont Hei GB";
color:#30AAD1;
@@ -50,7 +48,7 @@
div.bodystyle {
font-size:18px;
text-align:justify;
- margin:5% 15%;
+ margin:5% 12%;
line-height:30px;
}
@@ -80,9 +78,8 @@
.note{
font-size:0.85em;
+padding: 0 9%;
}
-
-
.img{
text-align:center;
font-size:0.8em;
@@ -100,16 +97,14 @@
text-indent:0em;
}
-
p
{
- // margin-top:1em;
+ //margin-top:1em;
margin: 0;
text-indent:2em;
line-height:30px;
font-size:18px;
text-align:justify;
-
}
.cover {
width:100%;
@@ -121,7 +116,6 @@
margin-right:0%;
text-indent:0em;
}
-
.center1
{
font-family:"STKaiti";
@@ -141,7 +135,7 @@
}
.left1 {
- font-family:"STKaiti";
+ // font-family:"STKaiti";
text-indent:0em;
margin-left:0%;
margin-right:0%;
@@ -183,12 +177,11 @@
h2 {
-
font-family:"STKaiti";
text-align:center;
font-size:1.5em;
- margin-top:1.5em;
- margin-bottom:1.5em;
+ margin-top:0%;
+ margin-bottom:1.8em;
text-indent:0em;
}
@@ -217,7 +210,8 @@
text-align:left;
margin-top:0.2em;
- margin-bottom:0.2em;
+ margin-bottom:1.2em;
+ margin-left: 2em;
text-indent:0em;
}
@@ -254,7 +248,6 @@
.img-0{
width:100%;
-height: auto;
}
.imz{
width:96%;
@@ -325,6 +318,7 @@
{
font-family:"STKaiti";
font-size:1.15em;
+ font-weight: 400;
}
.block1
@@ -344,8 +338,7 @@
text-indent:0em;
}
-.block3
-{
+.block3{
font-weight:bold;
font-family:"STKaiti";
font-size:1.2em;
@@ -398,7 +391,7 @@
}
.img-gn{
height:2em;
- margin-bottom:-0.4em;
+ margin-bottom:-1.9em;
}
.img-gn1{
@@ -409,11 +402,12 @@
background:#C6DFA5;
padding:0.2em 0.5em 0.2em 0.5em;
margin-top:1em;
- margin-left:0.5em;
- margin-right:0.5em;
+ margin-left:1em;
+ margin-right:1em;
border-radius:1em;
margin-bottom:1.5em;
font-size:1.1em;
+ padding-left: 1em;
}
// 鑷畾涔�
@@ -426,7 +420,46 @@
background-color: #fff;
padding-bottom: 117px;
}
-
+ // .front{
+ // font-family:"SimSun";
+ // font-weight: bold;
+ // font-size: 18px;
+ // }
+ .text{
+ margin: 0 8%;
+ font-family: "STkaiti";
+ font-size: 19px;
+ }
+ .text1{
+ margin-bottom: 3%;
+ font-family: "STkaiti";
+ font-size: 22px;
+ }
+ //搴曢儴鍙傝�冩枃鐚殑鏍峰紡
+ .references{
+ font-family: "STkaiti";
+ font-size: 15px;
+ }
+ //瑙嗛搴曢儴瀛椾綋鍙婂浘鐗囨牱寮�
+ .videoname{
+ display: flex;
+ justify-content: center;
+ }
+ .collect-btn {
+ cursor: pointer;
+ width: 20px;
+ height: 20px;
+ margin-left: 10px;
+ margin-top: 0.8%;
+ }
+ .problem{
+ font-family:"kaiti";
+ font-size:1.6em;
+ font-weight: normal;
+ }
+ .lesson1{
+ margin-top: 0%;
+ }
ul {
list-style: none;
margin: 0;
@@ -516,8 +549,8 @@
}
}
// 鏁磋鐨刬nput鏍囩
- .input-w-66{
- width: 66%;
+ .input-w-60{
+ width: 60%;
}
.headerimg{
margin-left: 5%;
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 54731ea..b96d112 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -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>
@@ -31,25 +31,23 @@
<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="b001">绗竴璇俱��榻愬績鍗忓姏</h2>
+ <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" controls class="audio" @play="audioPlay"></audio>
</h1>
-
<!-- 杩炵嚎棰� -->
<matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
- <p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
-
+ <p class="text">灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -61,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">
@@ -103,16 +112,15 @@
<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="b002">绗簩璇俱��娲ユ触涔愰亾</h2>
+ <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" controls class="audio" @play="audioPlay"></audio></h1>
-
<div class="bj3">
<p class="center">
<span class="hs">鏄�<a id="w1"><sup>1</sup></a>锛堣妭閫夛級</span>
@@ -129,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>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -151,12 +158,12 @@
<h1>
<img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle">
- <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>
+ <p class="text">
<span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1 class="lefth3 openImgBox" id="c005">
@@ -177,19 +184,19 @@
class="un1">杞绘倓鎮�</span>鐨勶紝鑽�<span class="un1">杞坏缁�</span>鐨勩��
</p>
</div>
- <hr style="margin-left: 0; width: 20%;" />
- <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">
@@ -204,34 +211,33 @@
<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 input-w-66" @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 input-w-66" @change="setBookQuestion" />銆傗��
+ <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>
@@ -252,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%;"
@@ -264,19 +270,19 @@
v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
@change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
</p>
- <hr style="margin-left: 0; width: 20%;" />
- <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">
@@ -284,55 +290,55 @@
<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%;">
<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">
@@ -340,28 +346,43 @@
<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">
+ <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 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>
@@ -391,10 +412,18 @@
},
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: [
{
@@ -436,6 +465,7 @@
question: {
KnowledgePoint: "123",
analysis: "123",
+ //姝ｇ‘绛旀
answer: [
{
id: "FB34",
@@ -461,6 +491,7 @@
optionStyle: undefined,
id: 489306,
options: {
+ //
linkValues: [
{
oldId: "64D6",
@@ -506,6 +537,7 @@
titleDescription: "1",
userChoise: [],
value: [],
+ // answerImg: require("../../assets/images/matching-one.png"),
},
questionData: {
warnUp: {
@@ -559,7 +591,24 @@
},
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>
@@ -591,6 +640,7 @@
.macthing {
background-color: rgb(188, 220, 164);
- padding: 5% 5%;
+ padding: 3% 0;
+ margin: 0% 8%;
}
</style>
\ No newline at end of file
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>
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index 67b0f5d..2a3261b 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -5,14 +5,15 @@
<h1 id="a004">
<!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy3.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">
<div class="bj1">
<p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
</div>
- <p>姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈ｏ紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�</p>
+ <p class="block" style="margin: 8% 5% 5% 7%">
+ 姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈ｏ紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�</p>
</div>
</div>
<p><br /></p>
@@ -29,18 +30,19 @@
<img src="../../assets/images/header-green.png" alt="" style="width: 100%;" />
</h1>
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
- <div class="bodystyle">
-
- <h2 id="b011">绗竴璇俱��鍚瑰搷鍔冲姩鐨勯泦缁撳彿</h2>
+ <div class="bodystyle" style="margin-top: 3%">
+
+ <h2 id="b011" class="problem">绗竴璇俱��鍚瑰搷鍔冲姩鐨勯泦缁撳彿</h2>
<h3 class="lefth3" id="c021"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p>瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛ｏ紝鍔崇濂斿繖銆�</p>
- <p>鍥㈢粨涓�蹇冿紝鍚瑰搷鍙疯銆傚垢绂忕敓娲伙紝鍔冲姩鍒涢�犮��</p>
- <p><span class="hs1">鈼�</span>璇翠竴璇翠綘浼氬仛鍝簺瀹跺姟锛�</p>
- <p><span class="hs1">鈼�</span>鍜屽皬浼欎即璁ㄨ鍔冲姩鍦ㄧ敓娲讳腑鐨勪綔鐢ㄣ��</p>
- <p><span class="hs1">鈼�</span>琛ㄦ紨涓�绉嶅鍔″姵鍔紝璇峰皬浼欎即鐚滀竴鐚溿��</p>
- <h3 class="lefth3" id="c022"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p><span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��</p>
- <p class="center"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
+ <p class="text">瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛ｏ紝鍔崇濂斿繖銆�</p>
+ <p class="text">鍥㈢粨涓�蹇冿紝鍚瑰搷鍙疯銆傚垢绂忕敓娲伙紝鍔冲姩鍒涢�犮��</p>
+ <p class="text"><span class="hs1">鈼�</span>璇翠竴璇翠綘浼氬仛鍝簺瀹跺姟锛�</p>
+ <p class="text"><span class="hs1">鈼�</span>鍜屽皬浼欎即璁ㄨ鍔冲姩鍦ㄧ敓娲讳腑鐨勪綔鐢ㄣ��</p>
+ <p class="text"><span class="hs1">鈼�</span>琛ㄦ紨涓�绉嶅鍔″姵鍔紝璇峰皬浼欎即鐚滀竴鐚溿��</p>
+ <h3 class="lefth3" id="c022" style="margin-top: 7%"><img class="img-gn1" alt=""
+ src="../../assets/images/czysj.jpg" /></h3>
+ <p class="text"><span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��</p>
+ <p class="center text"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -55,13 +57,14 @@
<h1>
<img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" />
</h1>
- <div class="bodystyle">
- <h2 id="b012">绗簩璇俱��鎰忓鍙戠敓浜嗭紒</h2>
+ <div class="bodystyle" style="margin-top: 3%;">
+ <h2 id="b012" class="problem">绗簩璇俱��鎰忓鍙戠敓浜嗭紒</h2>
<h3 class="lefth3" id="c023"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p><span class="hs1">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�</p>
- <h3 class="lefth3" id="c024"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
+ <p class="text"><span class="hs1">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�</p>
+ <h3 class="lefth3" id="c024" style="margin-top: 7%;"><img class="img-gn1" alt=""
+ src="../../assets/images/czysj.jpg" /></h3>
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-2.gif" /></p>
- <p><span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�</p>
+ <p class="text"><span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�</p>
<!-- 杩炵嚎棰� -->
<matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'">
</matching>
@@ -79,13 +82,15 @@
<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="b013">绗笁璇俱��鎴戣鎬庝箞鍔烇紵</h2>
+ <div class="bodystyle" style="margin-top: 3%;">
+ <h2 id="b013" class="problem">绗笁璇俱��鎴戣鎬庝箞鍔烇紵</h2>
<h3 class="lefth3" id="c025"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <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>
- <h3 class="lefth3" id="c026"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p><span class="hs1">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�</p>
+ <p class="text"><span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝铓傝殎闃熼暱涔熻捣杩囪椽蹇冿紝浣嗕粬鏈�缁堟垚鍔熷厠鏈嶄簡璐績锛屼綘璁や负浠栨槸鎬庝箞鍋氬埌鐨勫憿锛�</p>
+ <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18 "
+ @change="setBookQuestion" style="width: 90%" /></p>
+ <h3 class="lefth3" id="c026" style="margin-top: 7%;"><img class="img-gn1" alt=""
+ src="../../assets/images/czysj.jpg" /></h3>
+ <p class="text"><span class="hs1">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�</p>
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -99,21 +104,26 @@
<div v-if="showPageList.indexOf(26) > -1">
<h1>
<img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
- </h1>
-
- <div class="bodystyle">
-
- <h2 id="b014">绗洓璇俱��鐨嗗ぇ娆㈠枩</h2>
+ </h1>
+ <div class="bodystyle" style="margin-top: 3%;">
+ <h2 id="b014" class="problem">绗洓璇俱��鐨嗗ぇ娆㈠枩</h2>
<h3 class="lefth3" id="c027"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p><span class="hs1">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�</p>
- <p>鏃堕棿锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
- <p>鍦扮偣锛�<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
- <p>浜虹墿锛�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
- <p>璧峰洜锛�<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
- <p>缁忚繃锛�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
- <p>缁撴灉锛�<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
- <p><span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�</p>
- <p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 85%"/></p>
+ <p class="text"><span class="hs1">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�</p>
+ <p class="text">鏃堕棿锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 70%" /></p>
+ <p class="text">鍦扮偣锛�<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 70%" /></p>
+ <p class="text">浜虹墿锛�<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 70%" /></p>
+ <p class="text">璧峰洜锛�<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 70%" /></p>
+ <p class="text">缁忚繃锛�<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 70%" /></p>
+ <p class="text">缁撴灉锛�<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 70%" /></p>
+ <p class="text" style="margin-top: 7%;"><span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�</p>
+ <p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18"
+ @change="setBookQuestion" style="width: 85%" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -127,17 +137,17 @@
<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%;">
<h3 class="lefth3" id="c028"><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="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-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-left">24</div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">24</div>
+ </div>
</div>
</div>
<div class="page-box" page="28">
@@ -145,23 +155,24 @@
<h1>
<img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle">
- <h2 id="b015">鍗曞厓娲诲姩浠诲姟</h2>
+ <div class="bodystyle" style="margin-top: 3%;">
+ <h2 id="b015" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
<h3 class="lefth3" id="c029"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
- <p><span class="hs1">鈼�</span>鍠樻皵缁冧範</p>
- <p>骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傛垨鍙夎叞锛屽弻鑴氬垎寮�锛屼笌鑲╁悓瀹姐�傛ā浠垮皬鐙楀枠姘旓紝鎰熷彈鑵归儴鐨勨�滃懠鍚糕�濈姸鎬侊紝鎯宠薄鑷繁鐨勮吂閮ㄦ槸涓�涓皵鐞冿紝鍦ㄥ惛姘旀椂鑵归儴鍚戝鎵╁紶锛屽悙姘旀椂鑵归儴鍚戝唴鏀剁缉銆�</p>
- <p><span class="hs1">鈼�</span>鈥滃樁鈥濆０缁冧範</p>
- <p>鍦ㄢ�滃枠姘旂粌涔犫�濈殑鍩虹涓婏紝鍙戝嚭鈥滃樁鈥濋煶锛屾瘡缁�4鐭�1闀裤��</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="text">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傛垨鍙夎叞锛屽弻鑴氬垎寮�锛屼笌鑲╁悓瀹姐�傛ā浠垮皬鐙楀枠姘旓紝鎰熷彈鑵归儴鐨勨�滃懠鍚糕�濈姸鎬侊紝鎯宠薄鑷繁鐨勮吂閮ㄦ槸涓�涓皵鐞冿紝鍦ㄥ惛姘旀椂鑵归儴鍚戝鎵╁紶锛屽悙姘旀椂鑵归儴鍚戝唴鏀剁缉銆�
+ </p>
+ <p class="text"><span class="hs1">鈼�</span>鈥滃樁鈥濆０缁冧範</p>
+ <p class="text">鍦ㄢ�滃枠姘旂粌涔犫�濈殑鍩虹涓婏紝鍙戝嚭鈥滃樁鈥濋煶锛屾瘡缁�4鐭�1闀裤��</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">25</div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">25</div>
+ </div>
</div>
</div>
<div class="page-box" page="29">
@@ -170,23 +181,31 @@
<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="c030"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
- <p><span class="hs1">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
+ <p class="text"><span
+ class="hs1">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
</p>
- <p class="center">
+ <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 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">26</div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">26</div>
+ </div>
</div>
</div>
</div>
@@ -202,7 +221,6 @@
showPageList: {
type: Array,
},
-
},
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
@@ -214,8 +232,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: "",
+ },
rawData: {
left: [
{
@@ -323,8 +349,8 @@
four: "",
five: "",
six: "",
- seven:"",
- enight:"",
+ seven: "",
+ enight: "",
},
reading: {
one: "",
@@ -365,8 +391,25 @@
);
},
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>
@@ -398,6 +441,7 @@
.macthing {
background-color: rgb(188, 220, 164);
- padding: 5% 0%;
+ padding: 3% 0;
+ margin: 0% 8%;
}
</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index cb0c15c..7d95fff 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -12,7 +12,7 @@
<div class="bj1">
<p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
</div>
- <p>鍦ㄦ垙鍓ф紨鍑轰腑锛岄櫎浜嗚垶鍙颁笂鐨勬紨鍛橈紝瀵兼紨銆佺伅鍏夈�侀�犲瀷绛夊箷鍚庝汉鍛樹篃鍙戞尌鐫�閲嶈鐨勪綔鐢ㄣ�傛湰鍗曞厓璁╂垜浠粠鍙板墠璧拌繘骞曞悗锛屽悜榛橀粯濂夌尞鐨勫伐浣滀汉鍛樿嚧鏁紒</p>
+ <p class="block" style="margin: 8% 5% 5% 7%">鍦ㄦ垙鍓ф紨鍑轰腑锛岄櫎浜嗚垶鍙颁笂鐨勬紨鍛橈紝瀵兼紨銆佺伅鍏夈�侀�犲瀷绛夊箷鍚庝汉鍛樹篃鍙戞尌鐫�閲嶈鐨勪綔鐢ㄣ�傛湰鍗曞厓璁╂垜浠粠鍙板墠璧拌繘骞曞悗锛屽悜榛橀粯濂夌尞鐨勫伐浣滀汉鍛樿嚧鏁紒</p>
</div>
</div>
<p><br /></p>
@@ -29,20 +29,19 @@
<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 class="text"><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅鍥存垚涓�鍦堬紝闈㈡湞鍦堝韫蹭笅锛岀浉閭讳袱浜轰簰鎸庢墜鑷傦紝缁勫憳鍚屾椂绔欒捣鏉ワ紝鐪嬬湅鍝釜缁勬渶蹇紒</p>
+ <p class="text"><span class="hs1">鈼�</span>璇翠竴璇达細蹇�熺珯璧锋潵鐨勭璇�鏄粈涔堬紵</p>
<p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 90%"/></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"><span class="hs1">鈼�</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,10 +57,10 @@
<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"><span class="hs1">鈼�</span>鏄ュぉ鏉ヤ簡锛屾槬椋庡惞杩囷紝鏌虫爲鍙戣娊浜嗭紝杩庢槬鑺卞紑浜嗭紝灏忕嚂瀛愬湪澶╃┖鑷敱鍦伴缈斻�備竴鍒囬兘鏄偅涔堢敓鏈哄媰鍕冦�傝涓衡�滄槬澶┾�濇秱涓婁綘鍠滄鐨勯鑹层��</p>
<!-- 鍥剧墖缂哄け -->
<!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
</div>
@@ -78,9 +77,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"><span class="hs1">鈼�</span>鍔ㄥ姩鎵嬶紝涓恒�婁竴鍧楀ザ閰�嬩腑鐨勮殏铓佽鑹茶璁＄畝鍗曠殑鏈嶈鍚э紒</p>
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -95,12 +94,12 @@
<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"><span class="hs1">鈼�</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"><span class="hs1">鈼�</span>璇锋牴鎹�婁竴鍧楀ザ閰�嬬殑鍓ф湰锛屽垪鍑烘紨鍑轰腑闇�瑕佺殑閬撳叿娓呭崟锛岃鎸夌収娓呭崟锛屽埄鐢ㄤ綘鏀堕泦鐨勬棫鐗╁埗浣滈亾鍏峰惂锛�</p>
<p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -116,49 +115,50 @@
<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"><span class="hs1">鈼�</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>
+ <h3 class="lefth3" id="c038" 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/4-2.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-left">32</div>
</div>
</div>
+ </div>
<div class="page-box" page="36">
<div v-if="showPageList.indexOf(36) > -1">
<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"><span class="hs1">鈼�</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"><span class="hs1">鈼�</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"><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">33</div>
</div>
+ </div>
+
</div>
<div class="page-box" page="37">
<div v-if="showPageList.indexOf(37) > -1">
@@ -166,29 +166,36 @@
<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"><span class="hs1">鈼�</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"><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>
- </div>
- </div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <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">
<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>
@@ -213,8 +220,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: "",
@@ -257,7 +272,24 @@
},
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();
+ },
},
};
diff --git a/src/books/artAndDrama/view/components/chapter005.vue b/src/books/artAndDrama/view/components/chapter005.vue
index 3305f5e..e85a5da 100644
--- a/src/books/artAndDrama/view/components/chapter005.vue
+++ b/src/books/artAndDrama/view/components/chapter005.vue
@@ -3,27 +3,27 @@
<div class="page-box" page="38">
<div v-if="showPageList.indexOf(38) > -1">
<h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ <img src="../../assets/images/unit5-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle">
- <h1 id="a008">闄勫綍</h1>
- <p class="block3"><span class="hs">鍓ф湰</span></p>
- <p class="center1"><span class="hs">涓�鍧楀ザ閰�</span></p>
- <p class="block">婕斿憳琛細铓傝殎闃熼暱銆佸皬铓傝殎銆佸ぇ澶磋殏铓併�佸皬鐪奸暅铓傝殎銆佽殏铓佸皬濡广�佸ザ閰汉</p>
- <p class="block3"><span class="hs">閫夋1</span></p>
- <p class="block">銆愯捣鍏夛紝铓傝殎闃熼暱涓婂満銆�</p>
- <p class="block">鍜诲捇鈥�</p>
- <p class="block">銆愯殏铓侀槦闀垮惞鍝嶉泦鍚堝彿锛岃殏铓佷滑杩呴�熻窇涓婂満绔欏ソ闃熷舰銆�</p>
- <p class="block">铓傝殎闃熼暱锛�<span class="un1">鎴戝甯�</span>锛佷粖澶╂惉杩愮伯椋燂紝鍙<span class="un1">鍑哄姏</span>锛屼笉璁�<span
+ <div class="bodystyle" style="margin-top: 3%">
+ <h1 id="a008" class="problem" style="color: black; font-weight: 500; margin-bottom: 10%">闄勩��褰�</h1>
+ <p class="block3" style=""><span class="hs">鍓ф湰</span></p>
+ <p class="center1 text" style="font-size: 25px; margin: 3% 0;"><span class="hs">涓�鍧楀ザ閰�</span></p>
+ <p class="block text">婕斿憳琛細铓傝殎闃熼暱銆佸皬铓傝殎銆佸ぇ澶磋殏铓併�佸皬鐪奸暅铓傝殎銆佽殏铓佸皬濡广�佸ザ閰汉</p>
+ <p class="block3 text" style="margin-top: 4%"><span class="hs">閫夋1</span></p>
+ <p class="block text">銆愯捣鍏夛紝铓傝殎闃熼暱涓婂満銆�</p>
+ <p class="block text">鍜诲捇鈥�</p>
+ <p class="block text">銆愯殏铓侀槦闀垮惞鍝嶉泦鍚堝彿锛岃殏铓佷滑杩呴�熻窇涓婂満绔欏ソ闃熷舰銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛�<span class="un1">鎴戝甯�</span>锛佷粖澶╂惉杩愮伯椋燂紝鍙<span class="un1">鍑哄姏</span>锛屼笉璁�<span
class="un1">鍋峰槾</span>銆傝皝鍋峰槾灏�<span class="un1">缃氳皝</span>锛�</p>
- <p class="block">铓傝殎浠細鏀跺埌锛�</p>
- <p class="block">灏忚殏铓侊細锛堝榾鍜曪級瑕佹槸鍋峰槾鐨�<span class="un1">鏄偍鍛�</span>锛�</p>
- <p class="block">铓傝殎闃熼暱锛氾紙涔夋璇嶄弗锛�<span class="un1">鐓ф牱鍙楃綒</span>锛�</p>
- <p class="block">銆愯殏铓佷滑榧撴帉銆�</p>
- <p class="block">铓傝殎闃熼暱锛氱◢鎭紒绔嬫锛佸鎵鹃鐗╋紒鍑哄彂锛�</p>
- <p class="block">銆愯殏铓佷滑浜夊厛鎭愬悗鍥涘瀵婚銆�</p>
- <p class="block">澶уご铓傝殎锛氾紙绐佺劧锛�<span class="un1">鎶ュ憡</span>锛�</p>
- <p class="block">铓傝殎闃熼暱锛氭�庝箞浜嗭紵</p>
+ <p class="block text">铓傝殎浠細鏀跺埌锛�</p>
+ <p class="block text">灏忚殏铓侊細锛堝榾鍜曪級瑕佹槸鍋峰槾鐨�<span class="un1">鏄偍鍛�</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙涔夋璇嶄弗锛�<span class="un1">鐓ф牱鍙楃綒</span>锛�</p>
+ <p class="block text">銆愯殏铓佷滑榧撴帉銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氱◢鎭紒绔嬫锛佸鎵鹃鐗╋紒鍑哄彂锛�</p>
+ <p class="block text">銆愯殏铓佷滑浜夊厛鎭愬悗鍥涘瀵婚銆�</p>
+ <p class="block text">澶уご铓傝殎锛氾紙绐佺劧锛�<span class="un1">鎶ュ憡</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氭�庝箞浜嗭紵</p>
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -39,28 +39,28 @@
<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 class="block">澶уご铓傝殎锛氾紙鎸囩潃锛夎繖閲屾湁涓�鍧楀ぇ濂堕叒锛�</p>
- <p class="block">銆愪竴鍧楀ザ閰紙婕斿憳锛夎洞鍦ㄨ钀藉銆�</p>
- <p class="block">铓傝殎闃熼暱锛氾紙鍏村锛夊摝锛�</p>
- <p class="block">銆愯殏铓侀槦闀胯濂堕叒鐨勯鍛宠糠浣忥紝杞捣浜嗗湀鍦堛��</p>
- <p class="block">銆愰煶涔愯捣锛岃殏铓侀槦闀垮拰濂堕叒浜鸿烦璧蜂簡鑸炶箞銆�</p>
- <p class="block">铓傝殎闃熼暱锛氾紙闄堕唹锛夊ザ閰�︹�﹀ザ閰�︹�﹀～楗辫倸瀛愪笉鍐嶅懕鍛卞彨銆傚ザ閰�︹�﹀ザ閰�︹�﹀悆涓嬩竴鍙ｄ竴澹扮編濡欌�︹��</p>
- <p class="block">銆愯殏铓佷滑鍋滀笅鎵嬮噷鐨勬惉杩愬伐浣滐紝鐪嬬潃闃熼暱銆�</p>
- <p class="block">澶уご铓傝殎锛氾紙澶у枈锛夐槦闀匡紒</p>
- <p class="block">銆愯殏铓侀槦闀胯鍚撻啋锛屽ザ閰汉瓒村湪鍦颁笂銆�</p>
- <p class="block">灏忕溂闀滆殏铓侊細闃熼暱锛侀槦闀匡紒<span class="un1">蹇偣鎼繍鍚�</span>锛佽繖涔�<span
+ <div class="bodystyle" style="margin-top: 3%">
+ <p class="block text">澶уご铓傝殎锛氾紙鎸囩潃锛夎繖閲屾湁涓�鍧楀ぇ濂堕叒锛�</p>
+ <p class="block text">銆愪竴鍧楀ザ閰紙婕斿憳锛夎洞鍦ㄨ钀藉銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙鍏村锛夊摝锛�</p>
+ <p class="block text">銆愯殏铓侀槦闀胯濂堕叒鐨勯鍛宠糠浣忥紝杞捣浜嗗湀鍦堛��</p>
+ <p class="block text">銆愰煶涔愯捣锛岃殏铓侀槦闀垮拰濂堕叒浜鸿烦璧蜂簡鑸炶箞銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙闄堕唹锛夊ザ閰�︹�﹀ザ閰�︹�﹀～楗辫倸瀛愪笉鍐嶅懕鍛卞彨銆傚ザ閰�︹�﹀ザ閰�︹�﹀悆涓嬩竴鍙ｄ竴澹扮編濡欌�︹��</p>
+ <p class="block text">銆愯殏铓佷滑鍋滀笅鎵嬮噷鐨勬惉杩愬伐浣滐紝鐪嬬潃闃熼暱銆�</p>
+ <p class="block text">澶уご铓傝殎锛氾紙澶у枈锛夐槦闀匡紒</p>
+ <p class="block text">銆愯殏铓侀槦闀胯鍚撻啋锛屽ザ閰汉瓒村湪鍦颁笂銆�</p>
+ <p class="block text">灏忕溂闀滆殏铓侊細闃熼暱锛侀槦闀匡紒<span class="un1">蹇偣鎼繍鍚�</span>锛佽繖涔�<span
class="un1">鐑�</span>鐨勫ぉ锛屽啀涓嶅嚭鍙戯紝濂堕叒灏�<span class="un1">鍖�</span>鍟︼紒</p>
- <p class="block">铓傝殎闃熼暱锛氳寰楀锛佹垜鐜板湪灏�<span class="un1">鎼�</span>锛�</p>
- <p class="block">銆愯殏铓侀槦闀胯蛋鍒板ザ閰潰鍓嶄娇鍔叉姮銆�</p>
- <p class="block">铓傝殎闃熼暱锛氬搸鍝燂紝鍝庡摕锛屽搸鍝熷摕銆�</p>
- <p class="block">銆愯殏铓侀槦闀夸竴娆′篃娌℃姮璧锋潵銆�</p>
- <p class="block3"><span class="hs">閫夋2</span></p>
- <p class="block">铓傝殎闃熼暱锛氾紙璧疯韩锛�<span class="un1">鎴戝喅瀹氫簡</span>锛佸ぇ瀹�<span
+ <p class="block text">铓傝殎闃熼暱锛氳寰楀锛佹垜鐜板湪灏�<span class="un1">鎼�</span>锛�</p>
+ <p class="block text">銆愯殏铓侀槦闀胯蛋鍒板ザ閰潰鍓嶄娇鍔叉姮銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氬搸鍝燂紝鍝庡摕锛屽搸鍝熷摕銆�</p>
+ <p class="block text">銆愯殏铓侀槦闀夸竴娆′篃娌℃姮璧锋潵銆�</p>
+ <p class="block3 text" style="margin-top: 4%"><span class="hs">閫夋2</span></p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙璧疯韩锛�<span class="un1">鎴戝喅瀹氫簡</span>锛佸ぇ瀹�<span
class="un1">涓�璧锋惉</span>锛佽繖鍧楀ザ閰互鎴戜负棣栵紝鎼繍鐨勮矾涓�<span class="un1">涓嶈鍋峰悆</span>锛�</p>
- <p class="block">铓傝殎浠細<span class="un1">鏄�</span>锛�</p>
- <p class="block">銆愯殏铓佷滑杩呴�熷洿鎴愪竴鍦堬紝铓傝殎闃熼暱绔欏湪濂堕叒鏈�鍓嶉潰銆�</p>
- <p class="block">铓傝殎闃熼暱锛氬惉鎴戝彛浠わ紒3锛�2锛�1锛佹姮锛�</p>
+ <p class="block text">铓傝殎浠細<span class="un1">鏄�</span>锛�</p>
+ <p class="block text">銆愯殏铓佷滑杩呴�熷洿鎴愪竴鍦堬紝铓傝殎闃熼暱绔欏湪濂堕叒鏈�鍓嶉潰銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氬惉鎴戝彛浠わ紒3锛�2锛�1锛佹姮锛�</p>
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -73,27 +73,27 @@
<div class="page-box" page="40">
<div v-if="showPageList.indexOf(40) > -1">
<h1>
- <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
+ <img src="../../assets/images/unit5-header-img.png" alt="" style="height: auto; width: 100%" />
</h1>
- <div class="bodystyle">
- <p class="block">銆愬ザ閰鎶捣銆�</p>
- <p class="block">澶уご铓傝殎锛氬搰锛佽繖鍧楀ザ閰�<span class="un1">濂介鍣�</span>锛�</p>
- <p class="block">灏忕溂闀滆殏铓侊細鎴戞兂<span class="un1">鍜�</span>涓�鍙ｏ紒</p>
- <p class="block">灏忚殏铓侊細濡傛灉鑳�<span class="un1">鑸斾竴涓�</span>灏卞ソ浜嗭紒</p>
- <p class="block">铓傝殎灏忓锛氭垜鐨勫彛姘存祦鍑烘潵浜嗭紒</p>
- <p class="block">铓傝殎闃熼暱锛氫笉璁哥瀻鎯筹紒涓嶈鍋峰悆锛�<span class="un1">鍑哄彂</span>锛�</p>
- <p class="block">銆愰煶涔愯捣锛岃殏铓佷滑鎶潃濂堕叒鍚戝墠璧扮潃銆�</p>
- <p class="block">铓傝殎浠細濂堕叒锛佸ザ閰紒鎴戜滑鐨勫ザ閰紒濂堕叒锛佸ザ閰紒鎴戜滑涓�璧峰垎浜��</p>
- <p class="block">銆愯殏铓佷滑闄堕唹涓��</p>
- <p class="block3"><span class="hs">閫夋3</span></p>
- <p class="block">鍢��</p>
- <p class="block">銆愯殏铓佷滑鐢ㄥ姴杩囩寷锛屽ザ閰殑涓�涓鎺変簡銆�</p>
- <p class="block">铓傝殎灏忓锛�<span class="un1">鍟�</span>锛侀槦闀匡紒濂堕叒鐨勮<span class="un1">鎺変簡</span>锛�</p>
- <p class="block">銆愬ぇ瀹剁湅鍒版帀鍦ㄥ湴涓婄殑濂堕叒銆�</p>
- <p class="block">铓傝殎浠細鍝囧摝锛�</p>
- <p class="block">铓傝殎闃熼暱锛氱瓑绛夛紒</p>
- <p class="block">銆愯垶鍙板彉鍏夛紝婕斿憳鍔ㄤ綔瀹氭牸銆�</p>
- <p class="block">铓傝殎闃熼暱锛氭帀浜�<span class="un1">涓�涓</span>锛岃繖璇�<span class="un1">鎬庝箞鍔�</span>锛�<span
+ <div class="bodystyle" style="margin-top: 3%">
+ <p class="block text">銆愬ザ閰鎶捣銆�</p>
+ <p class="block text">澶уご铓傝殎锛氬搰锛佽繖鍧楀ザ閰�<span class="un1">濂介鍣�</span>锛�</p>
+ <p class="block text">灏忕溂闀滆殏铓侊細鎴戞兂<span class="un1">鍜�</span>涓�鍙ｏ紒</p>
+ <p class="block text">灏忚殏铓侊細濡傛灉鑳�<span class="un1">鑸斾竴涓�</span>灏卞ソ浜嗭紒</p>
+ <p class="block text">铓傝殎灏忓锛氭垜鐨勫彛姘存祦鍑烘潵浜嗭紒</p>
+ <p class="block text">铓傝殎闃熼暱锛氫笉璁哥瀻鎯筹紒涓嶈鍋峰悆锛�<span class="un1">鍑哄彂</span>锛�</p>
+ <p class="block text">銆愰煶涔愯捣锛岃殏铓佷滑鎶潃濂堕叒鍚戝墠璧扮潃銆�</p>
+ <p class="block text">铓傝殎浠細濂堕叒锛佸ザ閰紒鎴戜滑鐨勫ザ閰紒濂堕叒锛佸ザ閰紒鎴戜滑涓�璧峰垎浜��</p>
+ <p class="block text">銆愯殏铓佷滑闄堕唹涓��</p>
+ <p class="block3 text" style="margin-top: 4%"><span class="hs">閫夋3</span></p>
+ <p class="block text">鍢��</p>
+ <p class="block text">銆愯殏铓佷滑鐢ㄥ姴杩囩寷锛屽ザ閰殑涓�涓鎺変簡銆�</p>
+ <p class="block text">铓傝殎灏忓锛�<span class="un1">鍟�</span>锛侀槦闀匡紒濂堕叒鐨勮<span class="un1">鎺変簡</span>锛�</p>
+ <p class="block text">銆愬ぇ瀹剁湅鍒版帀鍦ㄥ湴涓婄殑濂堕叒銆�</p>
+ <p class="block text">铓傝殎浠細鍝囧摝锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氱瓑绛夛紒</p>
+ <p class="block text">銆愯垶鍙板彉鍏夛紝婕斿憳鍔ㄤ綔瀹氭牸銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氭帀浜�<span class="un1">涓�涓</span>锛岃繖璇�<span class="un1">鎬庝箞鍔�</span>锛�<span
class="un1">涓㈡帀</span>锛屽疄鍦�<span class="un1">澶彲鎯�</span>锛�<span
class="un1">瓒佹満鍚冩帀</span>锛屽張瑕佺姱涓嶈鍋峰槾鐨勭浠ゃ�傛�庝箞鍔炲憿锛熸湁涓姙娉曪紒鎴戣鏄�<span class="un1">鍋峰槾</span>璋佷篃<span
class="un1">鐪嬩笉瑙�</span>锛�<span class="un1">杩欐牱</span>涓嶅氨琛屽暒锛佸ぇ瀹跺惉濂藉暒锛�</p>
@@ -111,26 +111,26 @@
<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 class="block3"><span class="hs">閫夋4</span></p>
- <p class="block">銆愯垶鍙板彉鍏夛紝婕斿憳绔嬫绔欏ソ銆�</p>
- <p class="block">铓傝殎闃熼暱锛氫紤鎭竴浼氬効锛�</p>
- <p class="block">铓傝殎灏忓锛�<span class="un1">涓轰粈涔�</span>瑕佷紤鎭憖锛�</p>
- <p class="block">灏忕溂闀滆殏铓侊細闃熼暱锛佽繖鍧楁帀鍦ㄥ湴涓婄殑濂堕叒<span class="un1">鎬庝箞鍔炲憖</span>锛�</p>
- <p class="block">澶уご铓傝殎锛氭垜浠涓嶆妸瀹�<span class="un1">鍒嗕簡鍚�</span>锛�</p>
- <p class="block">铓傝殎闃熼暱锛氬惉鎴戣锛�<span class="un1">浼戞伅</span>锛�<span
+ <div class="bodystyle" style="margin-top: 3%;">
+ <p class="block3 text" style="margin-top: 4%;"><span class="hs">閫夋4</span></p>
+ <p class="block text">銆愯垶鍙板彉鍏夛紝婕斿憳绔嬫绔欏ソ銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氫紤鎭竴浼氬効锛�</p>
+ <p class="block text">铓傝殎灏忓锛�<span class="un1">涓轰粈涔�</span>瑕佷紤鎭憖锛�</p>
+ <p class="block text">灏忕溂闀滆殏铓侊細闃熼暱锛佽繖鍧楁帀鍦ㄥ湴涓婄殑濂堕叒<span class="un1">鎬庝箞鍔炲憖</span>锛�</p>
+ <p class="block text">澶уご铓傝殎锛氭垜浠涓嶆妸瀹�<span class="un1">鍒嗕簡鍚�</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氬惉鎴戣锛�<span class="un1">浼戞伅</span>锛�<span
class="un1">绔嬪埢浼戞伅</span>锛佸ぇ瀹舵惉杩愬お杈涜嫤鍟︼紒鍒嗘暎寮�锛屽摢閲屽噳蹇氨鍒板摢閲屼紤鎭紒</p>
- <p class="block">銆愬ぇ瀹朵緷鏃т笉鍔ㄣ��</p>
- <p class="block">铓傝殎闃熼暱锛氬叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒鍚戝悗鈥旇浆锛侀綈姝モ�旇蛋锛�</p>
- <p class="block">铓傝殎闃熼暱锛氱珛鈥斿畾锛佸師鍦颁紤鎭紒</p>
- <p class="block">銆愯殏铓佷滑璺熼殢鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>
- <p class="block3"><span class="hs">閫夋5</span></p>
- <p class="block">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p>
- <p class="block">铓傝殎闃熼暱锛氾紙灏忓０锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</p>
- <p class="block">銆愯殏铓侀槦闀夸綆涓嬪ご锛屽梾浜嗕竴涓嬪ザ閰��</p>
- <p class="block">铓傝殎闃熼暱锛氬懗閬�<span class="un1">鐪�</span>棣欙紒</p>
- <p class="block">銆愯殏铓侀槦闀跨殑鎵嬩几鍚戝ザ閰福锛岀獊鐒讹紝濂堕叒浜虹珯浜嗚捣鏉ャ��</p>
- <p class="block">銆愬彉鍏夈��</p>
+ <p class="block text">銆愬ぇ瀹朵緷鏃т笉鍔ㄣ��</p>
+ <p class="block text">铓傝殎闃熼暱锛氬叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒鍚戝悗鈥旇浆锛侀綈姝モ�旇蛋锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氱珛鈥斿畾锛佸師鍦颁紤鎭紒</p>
+ <p class="block text">銆愯殏铓佷滑璺熼殢鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>
+ <p class="block3 text" style="margin-top: 4%;"><span class="hs">閫夋5</span></p>
+ <p class="block text">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙灏忓０锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</p>
+ <p class="block text">銆愯殏铓侀槦闀夸綆涓嬪ご锛屽梾浜嗕竴涓嬪ザ閰��</p>
+ <p class="block text">铓傝殎闃熼暱锛氬懗閬�<span class="un1">鐪�</span>棣欙紒</p>
+ <p class="block text">銆愯殏铓侀槦闀跨殑鎵嬩几鍚戝ザ閰福锛岀獊鐒讹紝濂堕叒浜虹珯浜嗚捣鏉ャ��</p>
+ <p class="block text">銆愬彉鍏夈��</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -142,20 +142,20 @@
<div class="page-box" page="42">
<div v-if="showPageList.indexOf(42) > -1">
<h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ <img src="../../assets/images/unit5-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
- <div class="bodystyle">
- <p class="block">濂堕叒浜猴細涓嶈鍚冿紒</p>
- <p class="block">铓傝殎闃熼暱锛氾紙鍚撲簡涓�璺筹級浣犱綘浣狅紒浣犳�庝箞<span class="un1">绔�</span>璧锋潵鍟︼紒</p>
- <p class="block">濂堕叒浜猴細鎴�<span class="un1">瀹炲湪</span>鐪嬩笉涓嬪幓鍟︼紒</p>
- <p class="block">铓傝殎闃熼暱锛氾紙瀹虫�曪級鏁戝懡鍝囷紒濂堕叒<span class="un1">娲�</span>鍟︼紒</p>
- <p class="block">銆愯殏铓侀槦闀胯窇銆�</p>
- <p class="block">濂堕叒浜猴細<span class="un1">绔欎綇</span>锛�</p>
- <p class="block">铓傝殎闃熼暱锛氫綘瑕佸共浠�涔堬紵</p>
- <p class="block">濂堕叒浜猴細<span class="un1">杩欏潡</span>锛�<span class="un1">浣犱笉鑳藉悆</span>锛�</p>
- <p class="block">铓傝殎闃熼暱锛氫负浠�涔堬紵</p>
- <p class="block">濂堕叒浜猴細<span class="un1">绗竴</span>锛�<span class="un1">浣�</span>瀹氱殑瑙勭煩锛屼粖澶╂惉杩愪腑锛�<span
+ <div class="bodystyle" style="margin-top: 3%">
+ <p class="block text">濂堕叒浜猴細涓嶈鍚冿紒</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙鍚撲簡涓�璺筹級浣犱綘浣狅紒浣犳�庝箞<span class="un1">绔�</span>璧锋潵鍟︼紒</p>
+ <p class="block text">濂堕叒浜猴細鎴�<span class="un1">瀹炲湪</span>鐪嬩笉涓嬪幓鍟︼紒</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙瀹虫�曪級鏁戝懡鍝囷紒濂堕叒<span class="un1">娲�</span>鍟︼紒</p>
+ <p class="block text">銆愯殏铓侀槦闀胯窇銆�</p>
+ <p class="block text">濂堕叒浜猴細<span class="un1">绔欎綇</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氫綘瑕佸共浠�涔堬紵</p>
+ <p class="block text">濂堕叒浜猴細<span class="un1">杩欏潡</span>锛�<span class="un1">浣犱笉鑳藉悆</span>锛�</p>
+ <p class="block text">铓傝殎闃熼暱锛氫负浠�涔堬紵</p>
+ <p class="block text">濂堕叒浜猴細<span class="un1">绗竴</span>锛�<span class="un1">浣�</span>瀹氱殑瑙勭煩锛屼粖澶╂惉杩愪腑锛�<span
class="un1">涓嶈鍋峰悆</span>锛佸鏋�<span class="un1">浣�</span>鍋氫笉鍒帮紝浣犲氨<span
class="un1">涓嶈兘瑕佹眰鍒汉</span>锛�<span class="un1">绗簩</span>锛佷綘鏄�<span
class="un1">铓傝殎闃熼暱</span>锛屽ぇ瀹堕�変綘褰撻槦闀匡紝鏄浣犵殑<span class="un1">淇′换</span>鍜�<span
@@ -163,12 +163,12 @@
class="un1">璇氬疄瀹堜俊</span>鏄編寰凤紝浣犲悆鎺夊ザ閰<span class="un1">鎾掕皫</span>锛屾拻浜�<span
class="un1">涓�涓�</span>璋庡氨瑕佺敤<span class="un1">鏃犳暟</span>鐨勮皫鏉ュ渾绗竴涓皫锛屾渶鍚�<span
class="un1">杩樻槸</span>浼氳鍙戠幇锛�</p>
- <p class="block">铓傝殎闃熼暱锛氾紙浣庡ご锛夋垜涓嶅悆浜嗭紝鎴戠煡閬�<span class="un1">閿欎簡</span>鈥︹�﹀彲鏄紝杩欐帀鍦ㄥ湴涓婄殑濂堕叒鎬庝箞鍔炲憿锛�</p>
- <p class="block">濂堕叒浜猴細锛堟兂浜嗘兂锛�<span class="un1">鏈夊姙娉�</span>锛佷綘鍙互閫夋嫨澶у<span
+ <p class="block text">铓傝殎闃熼暱锛氾紙浣庡ご锛夋垜涓嶅悆浜嗭紝鎴戠煡閬�<span class="un1">閿欎簡</span>鈥︹�﹀彲鏄紝杩欐帀鍦ㄥ湴涓婄殑濂堕叒鎬庝箞鍔炲憿锛�</p>
+ <p class="block text">濂堕叒浜猴細锛堟兂浜嗘兂锛�<span class="un1">鏈夊姙娉�</span>锛佷綘鍙互閫夋嫨澶у<span
class="un1">涓�璧峰垎</span>锛屼篃鍙互閫夋嫨缁欏勾榫勬渶灏忕殑铓傝殎鍚冿紒</p>
- <p class="block">铓傝殎闃熼暱锛�<span class="un1">濂戒富鎰�</span>锛佹垜杩欏氨闂棶澶у锛岃阿璋綘锛�</p>
- <p class="block">銆愬彉鍏夛紝濂堕叒鎱㈡參鍦拌汉鍦ㄥ湴涓娿��</p>
- <p class="block">铓傝殎闃熼暱锛氾紙鍠婏級<span class="un1">娉ㄦ剰鍟�</span>锛佸叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒</p>
+ <p class="block text">铓傝殎闃熼暱锛�<span class="un1">濂戒富鎰�</span>锛佹垜杩欏氨闂棶澶у锛岃阿璋綘锛�</p>
+ <p class="block text">銆愬彉鍏夛紝濂堕叒鎱㈡參鍦拌汉鍦ㄥ湴涓娿��</p>
+ <p class="block text">铓傝殎闃熼暱锛氾紙鍠婏級<span class="un1">娉ㄦ剰鍟�</span>锛佸叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -183,22 +183,22 @@
<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>鍚戝悗杞紒榻愭璧帮紒</p>
- <p class="block">銆愯殏铓佷滑鐢卞洓闈㈠叓鏂硅蛋鍥炴潵銆�</p>
- <p class="block">铓傝殎闃熼暱锛氬ぇ瀹朵紤鎭ソ鍟︼紒鎴戞湁涓�涓�<span class="un1">鍐冲畾</span>锛�</p>
- <p class="block">铓傝殎浠細浠�涔堝喅瀹氾紵</p>
- <p class="block">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓ｆ槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<span class="un1">浣�</span>鍚冩帀瀹冨惂锛�</p>
- <p class="block">銆愯殏铓佷滑榧撴帉銆�</p>
- <p class="block">銆愰煶涔愯捣锛屽ぇ瀹跺姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
- <p class="block">銆愭敹鍏夈��</p>
+ <div class="bodystyle" style="margin-top: 3%">
+ <p class="block text">鍚戝悗杞紒榻愭璧帮紒</p>
+ <p class="block text">銆愯殏铓佷滑鐢卞洓闈㈠叓鏂硅蛋鍥炴潵銆�</p>
+ <p class="block text">铓傝殎闃熼暱锛氬ぇ瀹朵紤鎭ソ鍟︼紒鎴戞湁涓�涓�<span class="un1">鍐冲畾</span>锛�</p>
+ <p class="block text">铓傝殎浠細浠�涔堝喅瀹氾紵</p>
+ <p class="block text">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓ｆ槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<span class="un1">浣�</span>鍚冩帀瀹冨惂锛�</p>
+ <p class="block text">銆愯殏铓佷滑榧撴帉銆�</p>
+ <p class="block text">銆愰煶涔愯捣锛屽ぇ瀹跺姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p>
+ <p class="block 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-left">40</div>
</div>
+ </div>
</div>
</div>
</template>
diff --git a/src/books/artAndDrama/view/components/header.vue b/src/books/artAndDrama/view/components/header.vue
index a6ef7ec..aba635a 100644
--- a/src/books/artAndDrama/view/components/header.vue
+++ b/src/books/artAndDrama/view/components/header.vue
@@ -15,24 +15,23 @@
<ul class="fl fl-cl ju-bt pg-mh" style="display: flex; flex-direction: column; justify-content: flex-end; " >
<li>
<div class="bodystyle" style="margin-bottom: 100px;" >
- <p id="a003" class="front" style="margin: 0%;">缂栧浼�</p>
- <hr />
- <p>椤俱��銆�闂細<span class="kaiti">褰悏璞°��涓ョ嚂鐢�</span></p>
- <p>涓汇��銆�缂栵細<span class="kaiti">楹绘枃鐞�</span></p>
- <p>鍓� 涓� 缂栵細<span class="kaiti">闄堛��鍒�</span></p>
- <ul class="fl">
+ <p id="a003" class="front left1">缂栧浼�</p>
+ <hr style="margin-bottom: 5%;" />
+ <p class="left1" >椤俱��銆�闂細<span class="kaiti">褰悏璞°��涓ョ嚂鐢�</span></p>
+ <p class="left1" >涓汇��銆�缂栵細<span class="kaiti">楹绘枃鐞�</span></p>
+ <p class="left1" >鍓� 涓� 缂栵細<span class="kaiti">闄堛��鍒�</span></p>
+ <ul class="fl left1">
<li>
- <p class="wh-nr" style="margin: 0%;">缂栧啓濮斿憳锛�</p>
+ <p class="wh-nr left1" style="margin: 0%;">缂栧啓濮斿憳锛�</p>
</li>
<li class="fl fl-cl">
<span class="kaiti">鐜嬭胺宸濄��璋㈤湝鍗椼��鏉庢櫒鎴愩��鍛ㄥ姏鍚涖��闊╃嚂妤犺彶</span>
- <!-- <span class="kaiti">闊╃嚂妤犺彶</span> -->
</li>
</ul>
- <p>缇庢湳缁樼敾锛�<span class="kaiti">浣曘��鍐�</span></p>
+ <p class="left1">缇庢湳缁樼敾锛�<span class="kaiti">浣曘��鍐�</span></p>
<ul class="fl">
<li>
- <p class="wh-nr" style="margin: 0%;">琛� 婕� 鑰咃細</p>
+ <p class="wh-nr left1" style="margin: 0%;">鐗堟潈璇存槑锛�</p>
</li>
<li class="fl fl-cl">
<span class="kaiti">鏈功閮ㄥ垎鏂囧瓧浣滃搧钁椾綔鏉冪敱涓浗鏂囧瓧钁椾綔鏉冨崗浼氭巿鏉冿紝</span>
@@ -49,11 +48,9 @@
</p> -->
</li>
</ul>
-
</div>
</div>
</div>
-
</template>
<script>
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index c3f7e59..7d6476a 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -9,10 +9,10 @@
transformOrigin: 'center top',
}">
<pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
- <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterOne>
- <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterTwo>
- <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterThree>
- <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterFour>
+ <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" @closeVideo="closeVideo"></chapterOne>
+ <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" @closeVideo="closeVideo"></chapterTwo>
+ <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" @closeVideo="closeVideo"></chapterThree>
+ <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio" @closeVideo="closeVideo"></chapterFour>
<chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
</div>
<!-- 闊抽灏忕獥鎾斁缁勪欢 -->
@@ -157,8 +157,8 @@
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
- // setTimeout(() => {
- // this.gotoPage(1, 10);
+ //setTimeout(() => {
+ //this.gotoPage(2,4);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -186,7 +186,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- // }, 5000);
+ // }, 500);
},
methods: {
// setZoom1() {
@@ -714,8 +714,7 @@
chapterTwo,
chapterThree,
chapterFour,
- chapterFive
-
+ chapterFive,
};
// 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
for (const key in pageData) {
@@ -879,6 +878,21 @@
closeMiniAudio() {
this.audioPath = "";
},
+ // 鐐瑰嚮瑙嗛鎾斁锛屽叧闂叾浠栬棰�
+ closeVideo(path) {
+ let allVideo = (
+ this.container ? this.container : document
+ ).querySelectorAll(".video");
+ allVideo = Array.from(allVideo);
+ if(allVideo.length) {
+ for (let index = 0; index < allVideo.length; index++) {
+ const item = allVideo[index];
+ if(item.currentSrc != path) {
+ item.pause()
+ }
+ }
+ }
+ }
},
components: {
pageHeader,
@@ -887,8 +901,7 @@
miniAudio,
chapterThree,
chapterFour,
- chapterFive
-
+ chapterFive,
},
};
</script>
--
Gitblit v1.9.1