From 5b07f649010c3db7b3eb95d64d2d40560637b496 Mon Sep 17 00:00:00 2001 From: user1 <10901603+no-distractions1@user.noreply.gitee.com> Date: 星期五, 21 六月 2024 18:43:29 +0800 Subject: [PATCH] 艺术戏剧(选择题完成版) --- src/books/artAndDrama/view/components/chapter002.vue | 113 +++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 78 insertions(+), 35 deletions(-) diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue index ebd4afe..49800fa 100644 --- a/src/books/artAndDrama/view/components/chapter002.vue +++ b/src/books/artAndDrama/view/components/chapter002.vue @@ -82,25 +82,23 @@ <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.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.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> + <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> + <choice class="text" :questions="questions"></choice> <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></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"> @@ -120,12 +118,13 @@ <h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3> <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">鈥�<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">鈥�<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> @@ -166,13 +165,17 @@ <p class="text">寰呬汉鎺ョ墿鏈夌ぜ鏈夎妭銆佽唉鍗戞伃鏁紝鍦ㄨ浠栦汉鎰熷埌濡傛矏鏄ラ鐨勫悓鏃讹紝涔熶細璁╄嚜宸卞彈鍒颁粬浜虹殑灏婇噸鍜岀悊瑙c�傝璇翠竴璇达紝鍦ㄤ笅闈㈣繖浜涘満鏅腑浣犲簲璇ュ浣曞仛锛�</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> + <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> + <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> + <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"> @@ -191,7 +194,8 @@ <h2 id="b010" class="problem">鍗曞厓娲诲姩浠诲姟</h2> <h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3> <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="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">灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙f皵灏嗗畠鍚瑰�掋��</p> @@ -211,10 +215,11 @@ <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%;" > + <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> + <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" @@ -224,18 +229,10 @@ </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="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn" + @click="handleCollect('video')" /> </el-tooltip> </p> </div> @@ -252,8 +249,10 @@ <script> import { getResourcePath } from "@/assets/methods/resources"; +import choice from "@/components/choice/choice.vue" export default { name: "chapterTwo", + components: { choice }, props: { showPageList: { type: Array, @@ -312,6 +311,50 @@ nine: "", }, }, + questions: [ + { + analysisCon: "undefined", + answer: ['C', 'A', 'B'], + difficulty: 0, + id: 47775, + isCollect: false, + isComplete: false, + isRight: null, + isUnfold: "", + isUserAnswer: false, + number: 1, + options: [ + { + "img": "", + "index": "3CA6", + "txt": "鑳嗗皬鐨�", + "value": "A" + }, + { + "img": "", + "index": "73EE", + "txt": "鍠勮壇鐨�", + "value": "B" + }, + { + "img": "", + "index": "6AEF", + "txt": "娌夌ǔ鐨�", + "value": "C" + }, + ], + optionStyle: "Image", + questionType: "singleChoice", + score: 2, + stem: { + "stemTxt": "铓傝殎闃熼暱璧拌矾鏄傞鎸鸿兏銆佹浼愬潥瀹氾紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓侊紱灏忚殏铓佽蛋璧疯矾鏉ュ皬蹇冪考缈硷紝鐪肩椋樺拷涓嶅畾锛屽畠鏄竴鍙紙銆�銆�锛夎殏铓侊紱铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙紙銆�銆�锛夎殏铓併��" + }, + stemStyle: "Txt", + userAnswer: "", + // 鍗曢�夐杩欓噷鐨勫瓧娈靛唴瀹瑰氨鏄�"鍗曢�夐" + type: 'sort' + }, + ], }; }, methods: { -- Gitblit v1.9.1