From eede90603b539f0945d0b26ffa00e1baaaa6af34 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期三, 06 十一月 2024 17:41:01 +0800
Subject: [PATCH] 艺术戏剧（手机端修改完成）
---
src/books/artAndDrama/view/components/chapter003.vue | 981 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 619 insertions(+), 362 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index 9754452..29ce7d4 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -1,396 +1,653 @@
<template>
- <div class="chapter" num="4">
- <div class="page-box" page="22">
- <div v-if="showPageList.indexOf(22) > -1">
- <h1 id="a004">
- <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
- <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
- <audio :src="auidoPathOne" class="audio" controls></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>
- </div>
- </div>
- <p><br /></p>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">19</div>
- </div>
+ <div class="chapter" num="4">
+ <div class="page-box" page="22">
+ <div v-if="showPageList.indexOf(22) > -1">
+ <h1 id="a004">
+ <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
+ <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
+ <audio style="margin-top: 1em" :src="audioPathOne" controls controlslist="noplaybackrate nodownload"
+ class="audio"></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 class="block mar-block">
+ 姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈ｏ紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�
+ </p>
+ </div>
</div>
- <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%;" />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h2 id="b011">绗竴璇俱��鍚瑰搷鍔冲姩鐨勯泦缁撳彿</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>
- </div>
- <p><br /></p>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-left">20</div>
- </div>
- </div>
+ <p><br /></p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">19</div>
</div>
- <div class="page-box" page="24">
- <div v-if="showPageList.indexOf(24) > -1">
- <h1>
- <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
- </h1>
- <div class="bodystyle">
- <h2 id="b012">绗簩璇俱��鎰忓鍙戠敓浜嗭紒</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="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-2.gif" /></p>
- <p><span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�</p>
- <!-- 杩炵嚎棰� -->
- <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'">
- </matching>
- </div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">21</div>
- </div>
- </div>
- </div>
- <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" />
- </h1>
- <div class="bodystyle">
- <h2 id="b013">绗笁璇俱��鎴戣鎬庝箞鍔烇紵</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="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></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">22</div>
- </div>
- </div>
- </div>
- <div class="page-box" page="26">
- <div v-if="showPageList.indexOf(26) > -1">
- <h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h2 id="b014">绗洓璇俱��鐨嗗ぇ娆㈠枩</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.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%"/></p>
- </div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">23</div>
- </div>
- </div>
- </div>
- <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" />
- </h1>
- <div class="bodystyle">
- <img src="../../assets/images/page5.png" alt="" />
- <h3 class="lefth3" id="c028"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p><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>
- </div>
- <div class="page-box" page="28">
- <div v-if="showPageList.indexOf(28) > -1">
- <h1>
- <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
- </h1>
- <div class="bodystyle">
- <h2 id="b015">鍗曞厓娲诲姩浠诲姟</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>
- </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>
- </div>
- <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" />
- </h1>
- <div class="bodystyle">
- <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p><span class="hs1">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
- </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"
- style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
- <h2>瑙嗛: 蹇冩湁澶氬ぇ锛岃垶鍙板氨鏈夊澶�</h2>
- </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>
- </div>
+ </div>
</div>
+ <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%" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <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 class="text">瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛ｏ紝鍔崇濂斿繖銆�</p>
+ <p class="text">鍥㈢粨涓�蹇冿紝鍚瑰搷鍙疯銆傚垢绂忕敓娲伙紝鍔冲姩鍒涢�犮��</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>璇翠竴璇翠綘浼氬仛鍝簺瀹跺姟锛�</p>
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>鍜屽皬浼欎即璁ㄨ鍔冲姩鍦ㄧ敓娲讳腑鐨勪綔鐢ㄣ��
+ </p>
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus ">鈼�</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 rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��
+ </p>
+ <p class="block3" style="margin: 3% 0%">
+ <span class="hs">鍓ф湰:銆�涓�鍧楀ザ閰紙閫夋1~2锛�</span>
+ </p>
+ <!-- <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>
+ </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" />
+ <div class="page-footer-number-left">20</div>
+ </div>
+ </div>
+ </div>
+ <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%" />
+ </h1>
+ <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 class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</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 class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�
+ </p>
+ <!-- 杩炵嚎棰� -->
+ <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" />
+ <div class="page-footer-number-right">21</div>
+ </div>
+ </div>
+ </div>
+ <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" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <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 class="text t-l rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝铓傝殎闃熼暱涔熻捣杩囪椽蹇冿紝浣嗕粬鏈�缁堟垚鍔熷厠鏈嶄簡璐績锛屼綘璁や负浠栨槸鎬庝箞鍋氬埌鐨勫憿锛�
+ <textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ class="w90 ma-l-40 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 rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�
+ </p>
+ <p class="block3" style="margin: 3% 0%">
+ <span class="hs">鍓ф湰:銆�涓�鍧楀ザ閰紙閫夋3~5锛�</span>
+ </p>
+ <!-- 姝ゅ涓洪檮褰曡祫婧愬 -->
+ <div class="Options text">
+ <span class="folder" v-for="(segment, index) in paragraph" :key="index" @click="showContent(index+2)"><img
+ src="../../assets/images/icon/folder.svg" alt="" />閫夋{{
+ segment
+ }}</span>
+ </div>
+ <div v-if="activeIndex !== null" class="content-wrapper text" v-html="activeContent"></div>
+ <p class="center openImgBox">
+ <img class="img-e" alt="" src="../../assets/images/3-3.gif" />
+ </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">22</div>
+ </div>
+ </div>
+ </div>
+ <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" />
+ </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 class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�
+ </p>
+ <p class="text2 special-P">
+ 鏃堕棿锛�<input v-model="questionData.warnUp.one" class="input-bottom-border fz-18 w70" @change="setBookQuestion"
+ />
+ </p>
+ <p class="text2 special-P">
+ 鍦扮偣锛�<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18 w70" @change="setBookQuestion"
+ />
+ </p>
+ <p class="text2 special-P">
+ 浜虹墿锛�<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18 w70" @change="setBookQuestion"
+ />
+ </p>
+ <p class="text2 t-l special-P">
+ 璧峰洜锛�
+ <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ class="w90 ma-l-40 fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
+ @blur="handleBlur('two')">
+ </textarea>
+ </p>
+ <p class="text2 t-l special-P">
+ 缁忚繃锛�
+ <textarea v-model="questionData.reading.three" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ class="w90 ma-l-40 fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'three' }" @focus="handleFocus('three')"
+ @blur="handleBlur('three')">
+ </textarea>
+ </p>
+ <p class="text2 t-l special-P">
+ 缁撴灉锛�
+ <textarea v-model="questionData.reading.four" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ class="w90 ma-l-40 fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'four' }" @focus="handleFocus('four')"
+ @blur="handleBlur('four')">
+ </textarea>
+ </p>
+ <p class="text t-l rhombusFather" style="margin-top: 7%">
+ <span class="hs1 rhombus">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�
+ <textarea v-model="questionData.reading.five" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ class="w90 ma-l-40 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" />
+ <div class="page-footer-number-right">23</div>
+ </div>
+ </div>
+ </div>
+ <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" />
+ </h1>
+ <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 class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>杩愮敤閲嶉煶銆佸唴蹇冪嫭鐧藉拰鍔ㄤ綔璁捐绛夎〃鐜版柟寮忥紝灏嗐�婁竴鍧楀ザ閰�嬬殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒锛堝墽鏈闄勫綍锛�
+ </p>
+ <p class="center openImgBox">
+ <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" />
+ <div class="page-footer-number-left">24</div>
+ </div>
+ </div>
+ </div>
+ <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" />
+ </h1>
+ <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 class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>鍠樻皵缁冧範</span>
+ <span>
+ <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+ </span>
+ </p>
+ <p class="text">
+ 骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傛垨鍙夎叞锛屽弻鑴氬垎寮�锛屼笌鑲╁悓瀹姐�傛ā浠垮皬鐙楀枠姘旓紝鎰熷彈鑵归儴鐨勨�滃懠鍚糕�濈姸鎬侊紝鎯宠薄鑷繁鐨勮吂閮ㄦ槸涓�涓皵鐞冿紝鍦ㄥ惛姘旀椂鑵归儴鍚戝鎵╁紶锛屽悙姘旀椂鑵归儴鍚戝唴鏀剁缉銆�
+ </p>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>鈥滃樁鈥濆０缁冧範</span>
+ <span>
+ <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+ </span>
+ </p>
+ <p class="text">鍦ㄢ�滃枠姘旂粌涔犫�濈殑鍩虹涓婏紝鍙戝嚭鈥滃樁鈥濋煶锛屾瘡缁�4鐭�1闀裤��</p>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>鈥滃槦鈥濋煶缁冧範</span>
+ <span>
+ <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+ </span>
+ </p>
+ <p class="text">
+ 骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�傛斁鏉惧弻鍞囷紝娣卞惛姘旓紝鍚瑰嚭姘旀祦甯﹀姩鍢村攪鎶栧姩锛屽彂鍑衡�滃槦鈥濈殑澹伴煶锛屽０闊宠秺闀胯秺濂姐��
+ </p>
+ <p class="text rhombusFather" style="text-align: left">
+ <span><span class="hs1 rhombuSpecial">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌涔�</span>
+ <span class="text">
+ <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
+ class="audio"></audio></span>
+ </p>
+ <p class="text">
+ 骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�備互璇存倓鎮勮瘽鐨勬劅瑙夛紝璇村嚭鈥滄垜浠禐缇庨暱姹熲�濓紝骞堕�愭澧炲姞姘斿０鐨勫姏搴︼紝鎵惧埌鍦ㄨ垶鍙颁笂璇存倓鎮勮瘽鐨勬劅瑙夈��
+ </p>
+ </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">
+ <div v-if="showPageList.indexOf(29) > -1">
+ <h1>
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
+ </h1>
+ <img class="headerimg" src="../../assets/images/page5.png" alt="" />
+ <div class="bodystyle" style="margin-top: 3%">
+ <h3 class="lefth3" id="c030">
+ <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
+ </h3>
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</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="
+ margin-top: 40px;
+ border-radius: 10px;
+ border: 2px solid green;
+ "></video>
+ </p>
+ <p class="center videoname">
+ <span>瑙嗛锛氬績鏈夊澶э紝鑸炲彴灏辨湁澶氬ぇ </span>
+ <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" />
+ <div class="page-footer-number-left">26</div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<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 },
- props: {
- showPageList: {
- type: Array,
+ name: "chapterThree",
+ components: { matching },
+ props: {
+ showPageList: {
+ type: Array,
+ },
+ primaryColor: {
+ type: String,
+ default: "red",
+ },
+ },
+ async mounted() {
+ this.getVidoePath();
+ const bookQuestion = localStorage.getItem(
+ "artAndDrama-book-question-three"
+ );
+ 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 {
+ collectImg: require("../../assets/images/icon/heart.png"),
+ collectCheck: require("../../assets/images/icon/heart-check.png"),
+ videoPathOne: "",
+ audioPathOne: "",
+ audioPathTwo: "",
+ audioPathThree: "",
+ audioPathFour: "",
+ audioPathFive: "",
+ isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
+ segments: [1, 2],
+ paragraph:[3,4,5],
+ collectResourceList: [],
+ color: "#fff",
+ activeIndex: null, // 鐢ㄤ簬杩借釜褰撳墠娲诲姩鐨勬寜閽储寮�
+ contents: [
+ // 瀵瑰簲閫夋鐨勫唴瀹癸紝杩欓噷鐢ㄥ瓧绗︿覆浣滀负绀轰緥
+ ' <p class=" mar-l-r-4">銆愯捣鍏夛紝铓傝殎闃熼暱涓婂満銆�</p><p class=" mar-l-r-4">鍜诲捇鈥�</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀垮惞鍝嶉泦鍚堝彿锛岃殏铓佷滑杩呴�熻窇涓婂満绔欏ソ闃熷舰銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛�<span class="un1">鎴戝甯�</span>锛佷粖澶╂惉杩愮伯椋燂紝鍙<span class="un1">鍑哄姏</span>锛屼笉璁�<span class="un1">鍋峰槾</span>銆傝皝鍋峰槾灏�<span class="un1">缃氳皝</span>锛�</p><p class=" mar-l-r-4">铓傝殎浠細鏀跺埌锛�</p><p class=" mar-l-r-4">灏忚殏铓侊細锛堝榾鍜曪級瑕佹槸鍋峰槾鐨�<span class="un1">鏄偍鍛�</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙涔夋璇嶄弗锛�<span class="un1">鐓ф牱鍙楃綒</span>锛�</p><p class=" mar-l-r-4">銆愯殏铓佷滑榧撴帉銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氱◢鎭紒绔嬫锛佸鎵鹃鐗╋紒鍑哄彂锛�</p><p class=" mar-l-r-4">銆愯殏铓佷滑浜夊厛鎭愬悗鍥涘瀵婚銆�</p><p class=" mar-l-r-4">澶уご铓傝殎锛氾紙绐佺劧锛�<span class="un1">鎶ュ憡</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氭�庝箞浜嗭紵</p><p class=" mar-l-r-4">澶уご铓傝殎锛氾紙鎸囩潃锛夎繖閲屾湁涓�鍧楀ぇ濂堕叒锛�</p><p class=" mar-l-r-4">銆愪竴鍧楀ザ閰紙婕斿憳锛夎洞鍦ㄨ钀藉銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙鍏村锛夊摝锛�</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀胯濂堕叒鐨勯鍛宠糠浣忥紝杞捣浜嗗湀鍦堛��</p><p class=" mar-l-r-4">銆愰煶涔愯捣锛岃殏铓侀槦闀垮拰濂堕叒浜鸿烦璧蜂簡鑸炶箞銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙闄堕唹锛夊ザ閰�︹�﹀ザ閰�︹�﹀～楗辫倸瀛愪笉鍐嶅懕鍛卞彨銆傚ザ閰�︹�﹀ザ閰�︹�﹀悆涓嬩竴鍙ｄ竴澹扮編濡欌�︹��</p><p class=" mar-l-r-4">銆愯殏铓佷滑鍋滀笅鎵嬮噷鐨勬惉杩愬伐浣滐紝鐪嬬潃闃熼暱銆�</p><p class=" mar-l-r-4">澶уご铓傝殎锛氾紙澶у枈锛夐槦闀匡紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀胯鍚撻啋锛屽ザ閰汉瓒村湪鍦颁笂銆�</p><p class=" mar-l-r-4">灏忕溂闀滆殏铓侊細闃熼暱锛侀槦闀匡紒<span class="un1">蹇偣鎼繍鍚�</span>锛佽繖涔�<span class="un1">鐑�</span>鐨勫ぉ锛屽啀涓嶅嚭鍙戯紝濂堕叒灏�<span class="un1">鍖�</span>鍟︼紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氳寰楀锛佹垜鐜板湪灏�<span class="un1">鎼�</span>锛�</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀胯蛋鍒板ザ閰潰鍓嶄娇鍔叉姮銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬搸鍝燂紝鍝庡摕锛屽搸鍝熷摕銆�</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀夸竴娆′篃娌℃姮璧锋潵銆�</p>',
+ ' <p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙璧疯韩锛�<span class="un1">鎴戝喅瀹氫簡</span>锛佸ぇ瀹�<span class="un1">涓�璧锋惉</span>锛佽繖鍧楀ザ閰互鎴戜负棣栵紝鎼繍鐨勮矾涓�<span class="un1">涓嶈鍋峰悆</span>锛�</p><p class=" mar-l-r-4">铓傝殎浠細<span class="un1">鏄�</span>锛�</p><p class=" mar-l-r-4">銆愯殏铓佷滑杩呴�熷洿鎴愪竴鍦堬紝铓傝殎闃熼暱绔欏湪濂堕叒鏈�鍓嶉潰銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬惉鎴戝彛浠わ紒3锛�2锛�1锛佹姮锛�</p> <p class=" mar-l-r-4">銆愬ザ閰鎶捣銆�</p><p class=" mar-l-r-4">澶уご铓傝殎锛氬搰锛佽繖鍧楀ザ閰�<span class="un1">濂介鍣�</span>锛�</p><p class=" mar-l-r-4">灏忕溂闀滆殏铓侊細鎴戞兂<span class="un1">鍜�</span>涓�鍙ｏ紒</p><p class=" mar-l-r-4">灏忚殏铓侊細濡傛灉鑳�<span class="un1">鑸斾竴涓�</span>灏卞ソ浜嗭紒</p><p class=" mar-l-r-4">铓傝殎灏忓锛氭垜鐨勫彛姘存祦鍑烘潵浜嗭紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫笉璁哥瀻鎯筹紒涓嶈鍋峰悆锛�<span class="un1">鍑哄彂</span>锛�</p><p class=" mar-l-r-4">銆愰煶涔愯捣锛岃殏铓佷滑鎶潃濂堕叒鍚戝墠璧扮潃銆�</p><p class=" mar-l-r-4">铓傝殎浠細濂堕叒锛佸ザ閰紒鎴戜滑鐨勫ザ閰紒濂堕叒锛佸ザ閰紒鎴戜滑涓�璧峰垎浜��</p><p class=" mar-l-r-4">銆愯殏铓佷滑闄堕唹涓��</p>',
+ ' <p class=" mar-l-r-4">鍢��</p><p class=" mar-l-r-4">銆愯殏铓佷滑鐢ㄥ姴杩囩寷锛屽ザ閰殑涓�涓鎺変簡銆�</p><p class=" mar-l-r-4">铓傝殎灏忓锛�<span class="un1">鍟�</span>锛侀槦闀匡紒濂堕叒鐨勮<span class="un1">鎺変簡</span>锛�</p> <p class=" mar-l-r-4">銆愬ぇ瀹剁湅鍒版帀鍦ㄥ湴涓婄殑濂堕叒銆�</p><p class=" mar-l-r-4">铓傝殎浠細鍝囧摝锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氱瓑绛夛紒</p><p class=" mar-l-r-4">銆愯垶鍙板彉鍏夛紝婕斿憳鍔ㄤ綔瀹氭牸銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氭帀浜�<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>',
+ ' <p class=" mar-l-r-4">銆愯垶鍙板彉鍏夛紝婕斿憳绔嬫绔欏ソ銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫紤鎭竴浼氬効锛�</p><p class=" mar-l-r-4">铓傝殎灏忓锛�<span class="un1">涓轰粈涔�</span>瑕佷紤鎭憖锛�</p><p class=" mar-l-r-4">灏忕溂闀滆殏铓侊細闃熼暱锛佽繖鍧楁帀鍦ㄥ湴涓婄殑濂堕叒<span class="un1">鎬庝箞鍔炲憖</span>锛�</p><p class=" mar-l-r-4">澶уご铓傝殎锛氭垜浠涓嶆妸瀹�<span class="un1">鍒嗕簡鍚�</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬惉鎴戣锛�<span class="un1">浼戞伅</span>锛�<span class="un1">绔嬪埢浼戞伅</span>锛佸ぇ瀹舵惉杩愬お杈涜嫤鍟︼紒鍒嗘暎寮�锛屽摢閲屽噳蹇氨鍒板摢閲屼紤鎭紒</p><p class=" mar-l-r-4">銆愬ぇ瀹朵緷鏃т笉鍔ㄣ��</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒鍚戝悗鈥旇浆锛侀綈姝モ�旇蛋锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氱珛鈥斿畾锛佸師鍦颁紤鎭紒</p><p class=" mar-l-r-4">銆愯殏铓佷滑璺熼殢鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>',
+ ' <p class=" mar-l-r-4">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙灏忓０锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀夸綆涓嬪ご锛屽梾浜嗕竴涓嬪ザ閰��</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬懗閬�<span class="un1">鐪�</span>棣欙紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀跨殑鎵嬩几鍚戝ザ閰福锛岀獊鐒讹紝濂堕叒浜虹珯浜嗚捣鏉ャ��</p><p class=" mar-l-r-4">銆愬彉鍏夈��</p><p class=" mar-l-r-4">濂堕叒浜猴細涓嶈鍚冿紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙鍚撲簡涓�璺筹級浣犱綘浣狅紒浣犳�庝箞<span class="un1">绔�</span>璧锋潵鍟︼紒</p><p class=" mar-l-r-4">濂堕叒浜猴細鎴�<span class="un1">瀹炲湪</span>鐪嬩笉涓嬪幓鍟︼紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙瀹虫�曪級鏁戝懡鍝囷紒濂堕叒<span class="un1">娲�</span>鍟︼紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀胯窇銆�</p><p class=" mar-l-r-4">濂堕叒浜猴細<span class="un1">绔欎綇</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫綘瑕佸共浠�涔堬紵</p><p class=" mar-l-r-4">濂堕叒浜猴細<span class="un1">杩欏潡</span>锛�<span class="un1">浣犱笉鑳藉悆</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫负浠�涔堬紵</p><p class=" mar-l-r-4">濂堕叒浜猴細<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 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><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙浣庡ご锛夋垜涓嶅悆浜嗭紝鎴戠煡閬�<span class="un1">閿欎簡</span>鈥︹�﹀彲鏄紝杩欐帀鍦ㄥ湴涓婄殑濂堕叒鎬庝箞鍔炲憿锛�</p><p class=" mar-l-r-4">濂堕叒浜猴細锛堟兂浜嗘兂锛�<span class="un1">鏈夊姙娉�</span>锛佷綘鍙互閫夋嫨澶у<span class="un1">涓�璧峰垎</span>锛屼篃鍙互閫夋嫨缁欏勾榫勬渶灏忕殑铓傝殎鍚冿紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛�<span class="un1">濂戒富鎰�</span>锛佹垜杩欏氨闂棶澶у锛岃阿璋綘锛�</p><p class=" mar-l-r-4">銆愬彉鍏夛紝濂堕叒鎱㈡參鍦拌汉鍦ㄥ湴涓娿��</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙鍠婏級<span class="un1">娉ㄦ剰鍟�</span>锛佸叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒</p><p class=" mar-l-r-4">鍚戝悗杞紒榻愭璧帮紒</p><p class=" mar-l-r-4">銆愯殏铓佷滑鐢卞洓闈㈠叓鏂硅蛋鍥炴潵銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬ぇ瀹朵紤鎭ソ鍟︼紒鎴戞湁涓�涓�<span class="un1">鍐冲畾</span>锛�</p><p class=" mar-l-r-4">铓傝殎浠細浠�涔堝喅瀹氾紵</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓ｆ槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<span class="un1">浣�</span>鍚冩帀瀹冨惂锛�</p><p class=" mar-l-r-4">銆愯殏铓佷滑榧撴帉銆�</p><p class=" mar-l-r-4">銆愰煶涔愯捣锛屽ぇ瀹跺姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p><p class=" mar-l-r-4">銆愭敹鍏夈��</p>',
+ ],
+ activeContent: "", // 褰撳墠鏄剧ず鐨凥TML鍐呭
+ chapterData: {
+ isCollectImg: false,
+ isCollectVideo: false,
+ txtOne: "",
+ txtTwo: "",
+ },
+ rawData: {
+ left: [
+ {
+ oldId: "FB34",
+ txt: "鈥滄帀浜嗕竴涓锛岃繖璇ユ�庝箞鍔烇紒鈥�",
+ },
+ {
+ oldId: "64D6",
+ txt: "鈥滀涪鎺夛紝瀹炲湪澶彲鎯滐紒鈥�",
+ },
+ {
+ oldId: "2ED4",
+ txt: "鈥滄垜瑕佹槸鍋峰槾璋佷篃鐪嬩笉瑙併�傗��",
+ },
+ ],
+ right: [
+ {
+ oldId: "64D6",
+ txt: "涓嶈兘涓㈡帀鍟婏紝濡傛灉鑳界粰鎴戝悆灏卞お濂戒簡锛�",
+ },
+ {
+ oldId: "2ED4",
+ txt: "瑕佷笉鎴戞妸濂堕叒鍋峰伔鍚冧簡鍚с��",
+ },
+ {
+ oldId: "FB34",
+ txt: "濂藉彲鎯滃晩锛岃繖涔堢編鍛崇殑濂堕叒锛�",
+ },
+ ],
+ },
+ question: {
+ KnowledgePoint: "123",
+ analysis: "123",
+ answer: [
+ {
+ id: "FB34",
+ linkValue: "濂藉彲鎯滃晩锛岃繖涔堢編鍛崇殑濂堕叒锛�",
+ value: "鈥滄帀浜嗕竴涓锛岃繖璇ユ�庝箞鍔烇紒鈥�",
+ },
+ {
+ id: "64D6",
+ linkValue: "涓嶈兘涓㈡帀鍟婏紝濡傛灉鑳界粰鎴戝悆灏卞お濂戒簡锛�",
+ value: "鈥滀涪鎺夛紝瀹炲湪澶彲鎯滐紒鈥�",
+ },
+ {
+ id: "2ED4",
+ linkValue: "瑕佷笉鎴戞妸濂堕叒鍋峰伔鍚冧簡鍚с��",
+ value: "鈥滄垜瑕佹槸鍋峰槾璋佷篃鐪嬩笉瑙併�傗��",
+ },
+ ],
+ optionStyle: undefined,
+ id: 489306,
+ options: {
+ linkValues: [
+ {
+ oldId: "64D6",
+ txt: "涓嶈兘涓㈡帀鍟婏紝濡傛灉鑳界粰鎴戝悆灏卞お濂戒簡锛�",
+ },
+ {
+ oldId: "2ED4",
+ txt: "瑕佷笉鎴戞妸濂堕叒鍋峰伔鍚冧簡鍚с��",
+ },
+ {
+ oldId: "FB34",
+ txt: "濂藉彲鎯滃晩锛岃繖涔堢編鍛崇殑濂堕叒锛�",
+ },
+ ],
+ values: [
+ {
+ oldId: "FB34",
+ txt: "鈥滄帀浜嗕竴涓锛岃繖璇ユ�庝箞鍔烇紒鈥�",
+ },
+ {
+ oldId: "64D6",
+ txt: "鈥滀涪鎺夛紝瀹炲湪澶彲鎯滐紒鈥�",
+ },
+ {
+ oldId: "2ED4",
+ txt: "鈥滄垜瑕佹槸鍋峰槾璋佷篃鐪嬩笉瑙併�傗��",
+ },
+ ],
},
+ questionType: "matching",
+ stem: {
+ stemTxt: "鎸夐『搴忚繛绾�",
+ },
+ stemStyle: undefined,
+ titleDescription: "1",
+ userChoise: [],
+ value: [],
+ answerImg: require("../../assets/images/matching-two.png"),
+ },
+ questionData: {
+ warnUp: {
+ one: "",
+ two: "",
+ three: "",
+ },
+ reading: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ },
+ table: {
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
+ seven: "",
+ enight: "",
+ nine: "",
+ },
+ },
+ };
+ },
+ methods: {
+ //瑙嗛鍜岄煶棰戠殑MD5鍦板潃
+ async getVidoePath() {
+ // 瑙嗛Md5鍦板潃
+ this.videoPathOne = await getResourcePath(
+ "dd44a1e31b4304f50d10b2481a148411"
+ );
+ // 闊抽Md5鍦板潃
+ this.audioPathOne = await getResourcePath(
+ "3d00a10af86180ecafbd4de96cc1060b"
+ );
+ this.audioPathTwo = await getResourcePath(
+ "e88bbf13654fa2398f71718864a670e3"
+ );
+ this.audioPathThree = await getResourcePath(
+ "35e278e4f40f5a05d793789dc89e061a"
+ );
+ this.audioPathFour = await getResourcePath(
+ "09be0464578bb624b131628e4eb9a573"
+ );
+ this.audioPathFive = await getResourcePath(
+ "f56a9d889d3098fa6800125ae7627481"
+ );
+ },
+ handleFocus(id) {
+ this.isFocused = id; // 褰搕extarea鑱氱劍鏃讹紝璁剧疆涓簍rue
+ },
+ handleBlur(id) {
+ this.isFocused = null; // 褰搕extarea澶卞幓鐒︾偣鏃讹紝璁剧疆涓篺alse
+ },
+ setBookQuestion() {
+ localStorage.setItem(
+ "artAndDrama-book-question-three",
+ JSON.stringify(this.questionData)
+ );
+ },
+ audioPlay(e) {
+ this.$emit("closeAudio", e.srcElement.currentSrc);
+ },
+ videoPlay(e) {
+ this.$emit("closeVideo", e.srcElement.currentSrc);
+ },
+ handleChapterData() {
+ localStorage.setItem(
+ "artAndDrama-chapter03-Data",
+ JSON.stringify(this.chapterData)
+ );
+ },
+ handleCollect(type) {
+ if (type == "video") {
+ this.handleCollectResource("dd44a1e31b4304f50d10b2481a148411", "dd44a1e31b4304f50d10b2481a148411", '', "瑙嗛", "bits", '瑙嗛锛氬績鏈夊澶э紝鑸炲彴灏辨湁澶氬ぇ')
+ }
+ this.handleChapterData();
+ },
+ showContent(index) {
+ // 濡傛灉褰撳墠婵�娲荤殑绱㈠紩鍜岀偣鍑荤殑绱㈠紩鐩稿悓锛屽垯闅愯棌鍐呭
+ if (this.activeIndex === index) {
+ this.activeIndex = null;
+ this.activeContent = "";
+ } else {
+ // 鍚﹀垯鏄剧ず瀵瑰簲绱㈠紩鐨勫唴瀹�
+ this.activeIndex = index;
+ 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)
+ }
- },
- //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
- mounted() {
- this.getVidoePath();
- const bookQuestion = localStorage.getItem("artAndDrama-book-question-three");
- if (bookQuestion) {
- this.questionData = JSON.parse(bookQuestion);
- }
- },
- data() {
- return {
- videoPathOne: "",
- auidoPathOne: "",
- rawData: {
- left: [
- {
- oldId: "FB34",
- txt: "鈥滄帀浜嗕竴涓锛岃繖璇ユ�庝箞鍔烇紒鈥�",
- },
- {
- oldId: "64D6",
- txt: "鈥滀涪鎺夛紝瀹炲湪澶彲鎯滐紒鈥�",
- },
- {
- oldId: "2ED4",
- txt: "鈥滄垜瑕佹槸鍋峰槾璋佷篃鐪嬩笉瑙併�傗��",
- },
- ],
- right: [
- {
- oldId: "64D6",
- txt: "涓嶈兘涓㈡帀鍟婏紝濡傛灉鑳界粰鎴戝悆灏卞お濂戒簡锛�",
- },
- {
- oldId: "FB34",
- txt: "瑕佷笉鎴戞妸濂堕叒鍋峰伔鍚冧簡鍚с��",
- },
- {
- oldId: "2ED4",
- txt: "濂藉彲鎯滃晩锛岃繖涔堢編鍛崇殑濂堕叒锛�",
- },
- ],
- },
- question: {
- KnowledgePoint: "123",
- analysis: "123",
- answer: [
- {
- id: "FB34",
- linkValue: "鈥滄帀浜嗕竴涓锛岃繖璇ユ�庝箞鍔烇紒鈥�",
- value: "瑕佷笉鎴戞妸濂堕叒鍋峰伔鍚冧簡鍚с��",
- },
- {
- id: "64D6",
- linkValue: "鈥滀涪鎺夛紝瀹炲湪澶彲鎯滐紒鈥�",
- value: "涓嶈兘涓㈡帀鍟婏紝濡傛灉鑳界粰鎴戝悆灏卞お濂戒簡锛�",
- },
- {
- id: "2ED4",
- linkValue: "鈥滄垜瑕佹槸鍋峰槾璋佷篃鐪嬩笉瑙併�傗��",
- value: "濂藉彲鎯滃晩锛岃繖涔堢編鍛崇殑濂堕叒锛�",
- },
- ],
- optionStyle: undefined,
- id: 489306,
- options: {
- linkValues: [
- {
- oldId: "64D6",
- txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
- },
- {
- oldId: "44DE",
- txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
- },
- {
- oldId: "FB34",
- txt: "The clothing material is quite popular among Roman women inancient times.",
- },
- {
- oldId: "2ED4",
- txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
- },
- ],
- values: [
- {
- oldId: "FB34",
- txt: "Martin Silk",
- },
- {
- oldId: "64D6",
- txt: "The Great Wall",
- },
- {
- oldId: "2ED4",
- txt: "Chinese Food",
- },
- {
- oldId: "44DE",
- txt: "Chinese Tea",
- },
- ],
- },
- questionType: "matching",
- stem: {
- stemTxt: "鎸夐『搴忚繛绾�",
- },
- stemStyle: undefined,
- titleDescription: "1",
- userChoise: [],
- value: [],
- },
- questionData: {
- warnUp: {
- one: "",
- two: "",
- three: "",
- four: "",
- five: "",
- six: "",
- seven:"",
- enight:"",
- },
- reading: {
- one: "",
- two: "",
- },
- table: {
- one: "",
- two: "",
- three: "",
- four: "",
- five: "",
- six: "",
- seven: "",
- enight: "",
- nine: "",
- },
- },
- };
- },
- methods: {
- //瑙嗛鍜岄煶棰戠殑MD5鍦板潃
- async getVidoePath() {
- // 瑙嗛Md5鍦板潃
- this.videoPathOne = await getResourcePath(
- "dd44a1e31b4304f50d10b2481a148411"
- );
- // 闊抽Md5鍦板潃
- // this.auidoPathOne = await getResourcePath(
- // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
- // );
-
- },
- setBookQuestion() {
- console.log("淇濆瓨");
- localStorage.setItem(
- "artAndDrama-book-question-three",
- JSON.stringify(this.questionData)
- );
- },
- },
+ },
};
</script>
<style lang="less" scoped>
.w70 {
- width: 78%;
+ width: 78%;
}
.fw-400 {
- font-weight: 400 !important;
+ font-weight: 400 !important;
}
.fz-26 {
- font-size: 26px !important;
+ font-size: 26px !important;
}
.cover-img {
- position: absolute;
- top: 33%;
- left: 23%;
+ position: absolute;
+ top: 33%;
+ left: 23%;
}
.division-line {
- width: 2px;
- height: 100%;
- background-color: red;
+ width: 2px;
+ height: 100%;
+ background-color: red;
}
.macthing {
- background-color: rgb(188, 220, 164);
- padding: 5% 0%;
+ background-color: rgb(188, 220, 164);
+ padding: 3% 0;
+ margin: 0% 8%;
}
-</style>
\ No newline at end of file
+
+.content-wrapper {
+ border: 1px solid black;
+ border-radius: 10px;
+}
+
+/deep/.mar-l-r-4 {
+ margin: 0 4%;
+ font-family: "STkaiti";
+ font-size: 19px;
+}
+</style>
--
Gitblit v1.9.1