From 88c89a86c370f9824e975d8958bfd057013aa9fd Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期五, 14 六月 2024 18:10:15 +0800
Subject: [PATCH] 艺术戏剧（优化）
---
src/books/artAndDrama/view/components/chapter003.vue | 396 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 396 insertions(+), 0 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
new file mode 100644
index 0000000..9754452
--- /dev/null
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -0,0 +1,396 @@
+<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>
+ </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>
+ </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>
+</template>
+
+<script>
+import matching from "@/components/matching/matching.vue";
+import { getResourcePath } from "@/assets/methods/resources";
+export default {
+ name: "chapterThree",
+ components: { matching },
+ props: {
+ showPageList: {
+ type: Array,
+ },
+
+ },
+ //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
+ 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%;
+}
+
+.fw-400 {
+ font-weight: 400 !important;
+}
+
+.fz-26 {
+ font-size: 26px !important;
+}
+
+.cover-img {
+ position: absolute;
+ top: 33%;
+ left: 23%;
+}
+
+.division-line {
+ width: 2px;
+ height: 100%;
+ background-color: red;
+}
+
+.macthing {
+ background-color: rgb(188, 220, 164);
+ padding: 5% 0%;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.1