From e89d2f02233370260faa26eae68819f94e906e14 Mon Sep 17 00:00:00 2001
From: yiming <m13691596795@163.com>
Date: 星期三, 07 八月 2024 16:06:48 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/artAndDrama/view/components/chapter003.vue | 359 ++++++++++++++++++-----------------------------------------
1 files changed, 110 insertions(+), 249 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index cdd58ce..da54dc5 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -5,12 +5,7 @@
<h1 id="a004">
<!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
- <audio
- :src="audioPathOne"
- controls
- controlslist="noplaybackrate nodownload"
- class="audio"
- ></audio>
+ <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -27,11 +22,7 @@
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
- <img
- class="page-footer-image"
- src="../../assets/images/ym.jpg"
- alt="Page Image"
- />
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-right">19</div>
</div>
</div>
@@ -39,11 +30,7 @@
<div class="page-box" page="23">
<div v-if="showPageList.indexOf(23) > -1">
<h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%"
- />
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%" />
</h1>
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle" style="margin-top: 3%">
@@ -64,8 +51,7 @@
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
<p class="text">
- <span class="hs1">鈼�</span
- >閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��
+ <span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��
</p>
<p class="block3" style="margin: 3% 0%">
<span class="hs">鍓ф湰:銆�涓�鍧楀ザ閰�</span>
@@ -73,32 +59,19 @@
<!-- <p class="center1 text" style="font-size: 25px; margin: 3% 0;"><span class="hs">涓�鍧楀ザ閰�</span></p> -->
<!-- 姝ゅ涓洪檮褰曡祫婧愬 -->
<div class="Options text">
- <span
- class="folder"
- v-for="(segment, index) in segments"
- :key="index"
- @click="showContent(index)"
- ><img src="../../assets/images/icon/folder.svg" alt="" />閫夋{{
- segment
- }}</span
- >
+ <span class="folder" v-for="(segment, index) in segments" :key="index" @click="showContent(index)"><img
+ src="../../assets/images/icon/folder.svg" alt="" />閫夋{{
+ segment
+ }}</span>
</div>
- <div
- v-if="activeIndex !== null"
- class="content-wrapper text"
- v-html="activeContent"
- ></div>
+ <div v-if="activeIndex !== null" class="content-wrapper text" v-html="activeContent"></div>
<p class="center text">
<img class="img-e" alt="" src="../../assets/images/0024-1.jpg" />
</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
- <img
- class="page-footer-image"
- src="../../assets/images/ym.jpg"
- alt="Page Image"
- />
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-left">20</div>
</div>
</div>
@@ -106,11 +79,7 @@
<div class="page-box" page="24">
<div v-if="showPageList.indexOf(24) > -1">
<h1>
- <img
- src="../../assets/images/unit3-header-img.png"
- alt=""
- style="height: auto; width: 100%"
- />
+ <img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" />
</h1>
<div class="bodystyle" style="margin-top: 3%">
<h2 id="b012" class="problem">绗簩璇俱��鎰忓鍙戠敓浜嗭紒</h2>
@@ -118,8 +87,7 @@
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
<p class="text">
- <span class="hs1">鈼�</span
- >褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�
+ <span class="hs1">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�
</p>
<h3 class="lefth3" id="c024" style="margin-top: 7%">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
@@ -131,22 +99,13 @@
<span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�
</p>
<!-- 杩炵嚎棰� -->
- <matching
- :rawData="rawData"
- :question="question"
- class="macthing"
- :primary-color="color"
- :bordercolor="'#fff'"
- >
+ <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color"
+ :bordercolor="'#fff'">
</matching>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
- <img
- class="page-footer-image"
- src="../../assets/images/ym.jpg"
- alt="Page Image"
- />
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-right">21</div>
</div>
</div>
@@ -154,11 +113,7 @@
<div class="page-box" page="25">
<div v-if="showPageList.indexOf(25) > -1">
<h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
+ <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" style="margin-top: 3%">
@@ -167,25 +122,18 @@
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
<p class="text t-l">
- <span class="hs1">鈼�</span
- >鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝铓傝殎闃熼暱涔熻捣杩囪椽蹇冿紝浣嗕粬鏈�缁堟垚鍔熷厠鏈嶄簡璐績锛屼綘璁や负浠栨槸鎬庝箞鍋氬埌鐨勫憿锛�
- <textarea
- v-model="questionData.reading.one"
- placeholder="璇疯緭鍏ュ唴瀹�"
- rows="6"
- style="margin-left: 40px; width: 92%"
- class="fz-16 fm-son"
- @change="setBookQuestion"
- :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')" @blur="handleBlur('one')"
- >
+ <span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝铓傝殎闃熼暱涔熻捣杩囪椽蹇冿紝浣嗕粬鏈�缁堟垚鍔熷厠鏈嶄簡璐績锛屼綘璁や负浠栨槸鎬庝箞鍋氬埌鐨勫憿锛�
+ <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
+ @blur="handleBlur('one')">
</textarea>
</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锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�
+ <span class="hs1">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�
</p>
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/3-3.gif" />
@@ -193,11 +141,7 @@
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
- <img
- class="page-footer-image"
- src="../../assets/images/ym.jpg"
- alt="Page Image"
- />
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-left">22</div>
</div>
</div>
@@ -205,11 +149,7 @@
<div class="page-box" page="26">
<div v-if="showPageList.indexOf(26) > -1">
<h1>
- <img
- src="../../assets/images/unit3-header-img.png"
- alt=""
- style="width: 100%; height: auto"
- />
+ <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle" style="margin-top: 3%">
<h2 id="b014" class="problem">绗洓璇俱��鐨嗗ぇ娆㈠枩</h2>
@@ -217,95 +157,57 @@
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
<p class="text">
- <span class="hs1">鈼�</span
- >璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�
+ <span class="hs1">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�
</p>
<p class="text2">
- 鏃堕棿锛�<input
- v-model="questionData.warnUp.one"
- class="input-bottom-border fz-18"
- @change="setBookQuestion"
- style="width: 70%"
- />
+ 鏃堕棿锛�<input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"
+ style="width: 70%" />
</p>
<p class="text2">
- 鍦扮偣锛�<input
- v-model="questionData.warnUp.two"
- class="input-bottom-border fz-18"
- @change="setBookQuestion"
- style="width: 70%"
- />
+ 鍦扮偣锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion"
+ style="width: 70%" />
</p>
<p class="text2">
- 浜虹墿锛�<input
- v-model="questionData.warnUp.three"
- class="input-bottom-border fz-18"
- @change="setBookQuestion"
- style="width: 70%"
- />
+ 浜虹墿锛�<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion"
+ style="width: 70%" />
</p>
<p class="text2 t-l">
璧峰洜锛�
- <textarea
- v-model="questionData.reading.two"
- placeholder="璇疯緭鍏ュ唴瀹�"
- rows="6"
- style="margin-left: 40px; width: 92%"
- class="fz-16 fm-son"
- @change="setBookQuestion"
- :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')" @blur="handleBlur('two')"
- >
+ <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
+ @blur="handleBlur('two')">
</textarea>
</p>
<p class="text2 t-l">
缁忚繃锛�
- <textarea
- v-model="questionData.reading.three"
- placeholder="璇疯緭鍏ュ唴瀹�"
- rows="6"
- style="margin-left: 40px; width: 92%"
- class="fz-16 fm-son"
- @change="setBookQuestion"
- :class="{ 'textarea-focused': isFocused === 'three' }" @focus="handleFocus('three')" @blur="handleBlur('three')"
- >
+ <textarea v-model="questionData.reading.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'three' }" @focus="handleFocus('three')"
+ @blur="handleBlur('three')">
</textarea>
</p>
<p class="text2 t-l">
缁撴灉锛�
- <textarea
- v-model="questionData.reading.four"
- placeholder="璇疯緭鍏ュ唴瀹�"
- rows="6"
- style="margin-left: 40px; width: 92%"
- class="fz-16 fm-son"
- @change="setBookQuestion"
- :class="{ 'textarea-focused': isFocused === 'four' }" @focus="handleFocus('four')" @blur="handleBlur('four')"
- >
+ <textarea v-model="questionData.reading.four" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'four' }" @focus="handleFocus('four')"
+ @blur="handleBlur('four')">
</textarea>
</p>
<p class="text t-l" style="margin-top: 7%">
- <span class="hs1">鈼�</span
- >浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�
- <textarea
- v-model="questionData.reading.five"
- placeholder="璇疯緭鍏ュ唴瀹�"
- rows="6"
- style="margin-left: 40px; width: 92%"
- class="fz-16 fm-son"
- @change="setBookQuestion"
- :class="{ 'textarea-focused': isFocused === 'five' }" @focus="handleFocus('five')" @blur="handleBlur('five')"
- >
+ <span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�
+ <textarea v-model="questionData.reading.five" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'five' }" @focus="handleFocus('five')"
+ @blur="handleBlur('five')">
</textarea>
</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
- <img
- class="page-footer-image"
- src="../../assets/images/ym.jpg"
- alt="Page Image"
- />
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-right">23</div>
</div>
</div>
@@ -313,11 +215,7 @@
<div class="page-box" page="27">
<div v-if="showPageList.indexOf(27) > -1">
<h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
+ <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" style="margin-top: 3%">
@@ -325,20 +223,15 @@
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
<p class="text">
- <span class="hs1">鈼�</span
- >杩愮敤閲嶉煶銆佸唴蹇冪嫭鐧藉拰鍔ㄤ綔璁捐绛夎〃鐜版柟寮忥紝灏嗐�婁竴鍧楀ザ閰�嬬殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒锛堝墽鏈闄勫綍锛�
+ <span class="hs1">鈼�</span>杩愮敤閲嶉煶銆佸唴蹇冪嫭鐧藉拰鍔ㄤ綔璁捐绛夎〃鐜版柟寮忥紝灏嗐�婁竴鍧楀ザ閰�嬬殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒锛堝墽鏈闄勫綍锛�
</p>
<p class="center openImgBox">
- <img class="img-e" alt="" src="../../assets/images/3-3.gif" />
+ <img class="img-a" alt="" src="../../assets/images/0028-1.jpg" />
</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
- <img
- class="page-footer-image"
- src="../../assets/images/ym.jpg"
- alt="Page Image"
- />
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-left">24</div>
</div>
</div>
@@ -346,11 +239,7 @@
<div class="page-box" page="28">
<div v-if="showPageList.indexOf(28) > -1">
<h1>
- <img
- src="../../assets/images/unit3-header-img.png"
- alt=""
- style="width: 100%; height: auto"
- />
+ <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle" style="margin-top: 3%">
<h2 id="b015" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
@@ -360,12 +249,7 @@
<p class="text ends">
<span><span class="hs1">鈼�</span>鍠樻皵缁冧範</span>
<span>
- <audio
- :src="audioPathTwo"
- controls
- controlslist="noplaybackrate nodownload"
- class="audio"
- ></audio>
+ <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
</p>
<p class="text">
@@ -374,39 +258,24 @@
<p class="text ends">
<span><span class="hs1">鈼�</span>鈥滃樁鈥濆０缁冧範</span>
<span>
- <audio
- :src="audioPathThree"
- controls
- controlslist="noplaybackrate nodownload"
- class="audio"
- ></audio>
+ <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
</p>
<p class="text">鍦ㄢ�滃枠姘旂粌涔犫�濈殑鍩虹涓婏紝鍙戝嚭鈥滃樁鈥濋煶锛屾瘡缁�4鐭�1闀裤��</p>
<p class="text ends">
<span><span class="hs1">鈼�</span>鈥滃槦鈥濋煶缁冧範</span>
<span>
- <audio
- :src="audioPathFour"
- controls
- controlslist="noplaybackrate nodownload"
- class="audio"
- ></audio>
+ <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
</p>
<p class="text">
骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�傛斁鏉惧弻鍞囷紝娣卞惛姘旓紝鍚瑰嚭姘旀祦甯﹀姩鍢村攪鎶栧姩锛屽彂鍑衡�滃槦鈥濈殑澹伴煶锛屽０闊宠秺闀胯秺濂姐��
</p>
<p class="text" style="text-align: left">
- <span><span class="hs1">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌</span>
+ <span><span class="hs1">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌涔�</span>
<span class="text">
- <audio
- :src="audioPathFive"
- controls
- controlslist="noplaybackrate nodownload"
- class="audio"
- ></audio
- ></span>
+ <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
+ class="audio"></audio></span>
</p>
<p class="text">
骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�備互璇存倓鎮勮瘽鐨勬劅瑙夛紝璇村嚭鈥滄垜浠禐缇庨暱姹熲�濓紝骞堕�愭澧炲姞姘斿０鐨勫姏搴︼紝鎵惧埌鍦ㄨ垶鍙颁笂璇存倓鎮勮瘽鐨勬劅瑙夈��
@@ -414,11 +283,7 @@
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
- <img
- class="page-footer-image"
- src="../../assets/images/ym.jpg"
- alt="Page Image"
- />
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-right">25</div>
</div>
</div>
@@ -426,11 +291,7 @@
<div class="page-box" page="29">
<div v-if="showPageList.indexOf(29) > -1">
<h1>
- <img
- src="../../assets/images/header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
+ <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" style="margin-top: 3%">
@@ -438,52 +299,29 @@
<img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
</h3>
<p class="text">
- <span class="hs1">鈼�</span
- >鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
+ <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 video"
- style="
+ <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
+ x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
+ controlslist="nodownload" class="w100 video" style="
margin-top: 40px;
border-radius: 10px;
border: 2px solid green;
- "
- ></video>
+ "></video>
</p>
<p class="center videoname">
<span>瑙嗛锛氬績鏈夊澶э紝鑸炲彴灏辨湁澶氬ぇ </span>
- <el-tooltip
- class="item"
- effect="dark"
- :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
- placement="top-start"
- >
- <img
- :src="chapterData.isCollectVideo ? collectCheck : collectImg"
- alt=""
- class="collect-btn"
- @click="handleCollect('video')"
- />
+ <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
+ placement="top-start">
+ <img :src="collectResourceList.findIndex(item => item.id == 'dd44a1e31b4304f50d10b2481a148411') > -1 ? 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"
- />
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
<div class="page-footer-number-left">26</div>
</div>
</div>
@@ -494,6 +332,7 @@
<script>
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
+import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
export default {
name: "chapterThree",
components: { matching },
@@ -506,7 +345,7 @@
default: "red",
},
},
- mounted() {
+ async mounted() {
this.getVidoePath();
const bookQuestion = localStorage.getItem(
"artAndDrama-book-question-three"
@@ -514,6 +353,11 @@
if (bookQuestion) {
this.questionData = JSON.parse(bookQuestion);
}
+ const data = localStorage.getItem("artAndDrama-chapter03-Data");
+ if (data) {
+ this.chapterData = JSON.parse(data);
+ }
+ this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
},
data() {
return {
@@ -527,6 +371,7 @@
audioPathFive: "",
isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
segments: [1, 2, 3, 4, 5],
+ collectResourceList:[],
color: "#fff",
activeIndex: null, // 鐢ㄤ簬杩借釜褰撳墠娲诲姩鐨勬寜閽储寮�
contents: [
@@ -645,9 +490,9 @@
reading: {
one: "",
two: "",
- three:"",
- four:"",
- five:"",
+ three: "",
+ four: "",
+ five: "",
},
table: {
one: "",
@@ -687,14 +532,13 @@
"f56a9d889d3098fa6800125ae7627481"
);
},
- handleFocus(id) {
+ handleFocus(id) {
this.isFocused = id; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue
- },
- handleBlur(id) {
+ },
+ handleBlur(id) {
this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse
- },
+ },
setBookQuestion() {
- console.log("淇濆瓨");
localStorage.setItem(
"artAndDrama-book-question-three",
JSON.stringify(this.questionData)
@@ -708,16 +552,14 @@
},
handleChapterData() {
localStorage.setItem(
- "math-chapterData",
+ "artAndDrama-chapter03-Data",
JSON.stringify(this.chapterData)
);
},
handleCollect(type) {
- if (type == "img") {
- this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
- } else if (type == "video") {
- this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
- }
+ if (type == "video") {
+ this.handleCollectResource("dd44a1e31b4304f50d10b2481a148411","dd44a1e31b4304f50d10b2481a148411",'',"瑙嗛","bits",'瑙嗛锛氬績鏈夊澶э紝鑸炲彴灏辨湁澶氬ぇ')
+ }
this.handleChapterData();
},
showContent(index) {
@@ -731,6 +573,25 @@
this.activeContent = this.contents[index];
}
},
+ //璧勬簮鏀惰棌浜嬩欢
+ handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
+ let list = this.collectResourceList
+ if (list.findIndex(item => item.id == id) > -1) {
+ list = list.filter(item => item.id != id)
+ } else {
+ list.push({
+ id,
+ md5,
+ resourcePath,
+ resourceType,
+ source,
+ resourceName,
+ })
+ }
+ this.collectResourceList = list
+ setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
+ }
+
},
};
</script>
--
Gitblit v1.9.1