From fe614d7980573f66d91374dfb46c1c63b9b4e51f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 14 六月 2024 18:13:08 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/books/artAndDrama/view/components/chapter001.vue | 460 ++++++++++++++++++++-------------------------------------
1 files changed, 164 insertions(+), 296 deletions(-)
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 288d87f..babd03a 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -1,11 +1,10 @@
<template>
<div class="chapter" num="2">
- <div class="page-box" page="4" style="min-height: auto">
+ <div class="page-box" page="4">
<div v-if="showPageList.indexOf(4) > -1">
<h1 id="a004">
- <!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
- <audio :src="auidoPathOne" controls></audio>
+ <audio :src="auidoPathOne" class="audio" controls></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -14,24 +13,22 @@
<img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
</p>
</div>
-
<p class="block">
鍦ㄦ晠浜嬨�婁竴鍧楀ザ閰�嬩腑锛岃殏铓佸搴殑姣忎竴浣嶆垚鍛橀兘涓轰簡鍏卞悓鐨勭洰鏍囧垎宸ュ崗浣溿�佸姫鍔涘鏂楋紝鍦ㄩ潰瀵硅鎯戝拰鎸戞垬鏃舵洿鏄弗浜庡緥宸便�侀伒瀹堝洟闃熺邯寰嬨�傛湰鍗曞厓锛岃鎴戜滑璇讳竴璇汇�婁竴鍧楀ザ閰�嬬殑鏁呬簨锛屽涔犺殏铓佷滑鐨勪紭绉�鍝佹牸鍚э紒
</p>
</div>
</div>
<p><br /></p>
- <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">1</div>
+ </div>
</div>
- </div>
- <div class="page-box" page="5" style="min-height: auto">
+ </div>
+ <div class="page-box" page="5">
<div v-if="showPageList.indexOf(5) > -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>
<div class="bodystyle">
<img src="../../assets/images/page5.png" alt="" />
@@ -43,32 +40,27 @@
鍦ㄨ瑷�琛ㄨ堪涓紝涓轰簡绐佸嚭鎴栧己璋冩煇浜涙剰鎬濓紝鎴戜滑浼氫娇鐢ㄢ�滈�昏緫閲嶉煶鈥濊繖涓�鎶�宸с�傚悓鏍蜂竴鍙ヨ瘽锛屼笉鍚岀殑閫昏緫閲嶉煶鍙互琛ㄨ揪鍑轰笉涓�鏍风殑鎰忔�濄��
</p>
<p>
- <span class="hs1">鈼�</span
- >澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
+ <span class="hs1">鈼�</span>澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
</p>
<h1>
- <audio :src="auidoPathTwo" controls></audio>
+ <audio :src="auidoPathTwo" class="audio" controls></audio>
</h1>
<p>灏忔彁绀猴細鍔犵偣鐨勬枃瀛椾负鏈彞璇濅腑鐨勯�昏緫閲嶉煶锛屽湪鏈楄鍙戦煶鏃惰閲嶈銆�</p>
- <!-- 杩炵嚎棰� -->
- <matching :rawData="rawData" :item="question"></matching>
+ <!-- 杩炵嚎棰� -->
+ <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
</div>
<p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div style="position: relative; ">
- <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; top: 38px; text-align: center; font-size: 25px;">2</div>
- <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">2</div>
</div>
</div>
</div>
- <div class="page-box" page="6" style="min-height: auto">
+ <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%"
- />
+ <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
</h1>
<div class="bodystyle">
<h1 class="lefth3" id="c002">
@@ -90,75 +82,53 @@
<p>A.鍥㈢粨鐨�</p>
<p>B.浼樼鐨�</p>
<p>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"
- style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"
- ></video>
+ <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>
</div>
-
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">3</div>
+ </div>
</div>
</div>
- <div class="page-box" page="7" style="min-height: auto">
+ <div class="page-box" page="7">
<div v-if="showPageList.indexOf(7) > -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>
<div class="bodystyle">
<img src="../../assets/images/page5.png" alt="" />
<h2 id="b002">绗簩璇俱��娲ユ触涔愰亾</h2>
<h3 class="lefth3" id="c003">
- <img class="img-gn1" alt="" src="image/rhybx.jpg" />
+ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
<p>
- <span class="hs1">鈼�</span
- >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
- <h1><audio :src="auidoPathThree" controls></audio></h1>
-
+ <h1><audio :src="auidoPathThree" class="audio" controls></audio></h1>
+
<div class="bj3">
<p class="center">
- <span class="hs"
- >鏄�<a id="w1"><sup>1</sup></a>锛堣妭閫夛級</span>
+ <span class="hs">鏄�<a id="w1"><sup>1</sup></a>锛堣妭閫夛級</span>
</p>
<p class="center">鏈辫嚜娓�</p>
<p class="block">
- 鐩兼湜鐫�锛�<span class="un1">鐩兼湜鐫�</span>锛屼笢椋庢潵浜嗭紝鏄ュぉ鐨勮剼姝�<span
- class="un1"
- >杩�</span
- >浜嗐��
+ 鐩兼湜鐫�锛�<span class="un1">鐩兼湜鐫�</span>锛屼笢椋庢潵浜嗭紝鏄ュぉ鐨勮剼姝�<span class="un1">杩�</span>浜嗐��
</p>
<p class="block">
- 涓�鍒囬兘鍍�<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>
</div>
<h3 class="lefth3" id="c004">
- <img class="img-gn1" alt="" src="image/czysj.jpg" />
+ <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
<p>
- <span class="hs1">鈼�</span
- >鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
+ <span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
</p>
<hr />
<p class="note">
@@ -167,70 +137,42 @@
涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
</p>
</div>
-
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div>
- <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">4</div>
- <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">4</div>
</div>
</div>
</div>
- <div class="page-box" page="8" style="min-height: auto">
+ <div class="page-box" page="8">
<div v-if="showPageList.indexOf(8) > -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>
<div class="bodystyle">
<img src="../../assets/images/page5.png" alt="" />
<h2 id="b003">绗笁璇俱��鍐呭績鐨勫０闊�</h2>
<h1 class="lefth3 openImgBox" id="c005">
- <img
- class="img-gn1"
- alt=""
- src="../../assets/images/1-3.gif"
- style="height: auto; width: 50%"
- />
+ <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
</h1>
<p>
- <span class="hs1">鈼�</span
- >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
- <h1><audio :src="auidoPathTwo" controls></audio></h1>
+ <h1><audio :src="auidoPathTwo" class="audio" controls></audio></h1>
<div class="bj3">
<p class="center">
- <span class="hs"
- >鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</span
- >
+ <span class="hs">鏄�<a id="w1"></a><sup>1</sup>锛堣妭閫夛級</span>
</p>
<p class="center">鏈辫嚜娓�</p>
<p class="block">
- 灏忚崏鍋峰伔鍦颁粠鍦熼噷<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
- >鐨勩��
+ 灏忚崏鍋峰伔鍦颁粠鍦熼噷<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>
</div>
- <h3 class="lefth3" id="c006">
- <img class="img-gn1" alt="" src="image/czysj.jpg" />
- </h3>
- <p class="center">
- <img class="img-e" alt="" src="image/0010-1.jpg" />
- </p>
<hr />
<p class="note">
<a id="m1">1</a>
@@ -239,20 +181,16 @@
</p>
</div>
</div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div>
- <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">6</div>
- <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
- </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 class="page-box" page="9" style="min-height: auto">
+ <div class="page-box" page="9">
<div v-if="showPageList.indexOf(9) > -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>
<div class="bodystyle">
<img src="../../assets/images/page5.png" alt="" />
@@ -260,44 +198,29 @@
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
<h1 class="center openImgBox">
- <img
- class="img-e"
- alt=""
- src="../../assets/images/1-4.gif"
- style="height: auto; width: 50%"
- />
+ <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
</h1>
<p>
- <span class="hs1">鈼�</span
- >鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
+ <span
+ class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
</p>
<p>姝ｄ箟闃熼暱锛氣��
- <input
- v-model="questionData.warnUp.one.value"
- class="input-bottom-border fz-18"
- @blur="handleQuestion('one')"
- @change="setBookQuestion" />鈥�</p>
- <p>榛戞殫闃熼暱锛氣�� <input
- v-model="questionData.warnUp.one.value"
- class="input-bottom-border fz-18"
- @blur="handleQuestion('two')"
- @change="setBookQuestion" />鈥�</p>
+ <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" />鈥�
+ </p>
+ <p>榛戞殫闃熼暱锛氣�� <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
+ @change="setBookQuestion" />鈥�</p>
</div>
</div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div>
- <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">8</div>
- <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
- </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 class="page-box" page="10" style="min-height: auto">
+ <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"
- />
+ <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
<h2 id="b004">绗洓璇俱��韬复鍏跺</h2>
@@ -305,61 +228,37 @@
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
<p>
- <span class="hs1">鈼�</span
- >璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1>
- <audio :src="auidoPathTwo" controls></audio>
+ <audio :src="auidoPathTwo" class="audio" controls></audio>
</h1>
<div class="bj3">
<p class="center">
- <span class="hs"
- >鏄�<a id="w1"><sup>1</sup></a
- >锛堣妭閫夛級</span
- >
+ <span class="hs">鏄�<a id="w1"><sup>1</sup></a>锛堣妭閫夛級</span>
</p>
<p class="center">鏈辫嚜娓�</p>
<p class="block">
- <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>
</div>
<h3 class="lefth3" id="c008">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
<p>
- <span class="hs1">鈼�</span
- >鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
+ <span class="hs1">鈼�</span>鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
</p>
<p>
- 鎴戞槸铓傝殎 <input
- v-model="questionData.warnUp.one.value"
- class="input-bottom-border fz-18"
- style=" width: 10%;"
- @blur="handleQuestion('three')"
- @change="setBookQuestion" />锛堝悕瀛楋級锛屼粖澶╂槸
- <input
- v-model="questionData.warnUp.one.value"
- class="input-bottom-border fz-18"
- style=" width: 10%;"
- @blur="handleQuestion('four')"
- @change="setBookQuestion" />锛堝ぉ姘旓級锛屾垜鐨勫ザ閰壒鍒� <input
- v-model="questionData.warnUp.one.value"
- class="input-bottom-border fz-18"
- style=" width: 10%;"
- @blur="handleQuestion('five')"
- @change="setBookQuestion" />锛堣交/閲嶏級锛屾垜鎰熻濂� <input
- v-model="questionData.warnUp.one.value"
- class="input-bottom-border fz-18"
- style=" width: 10%;"
- @blur="handleQuestion('six')"
- @change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
+ 鎴戞槸铓傝殎 <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%;"
+ @change="setBookQuestion" />锛堝ぉ姘旓級锛屾垜鐨勫ザ閰壒鍒� <input v-model="questionData.warnUp.five"
+ class="input-bottom-border fz-18" style=" width: 10%;" @change="setBookQuestion" />锛堣交/閲嶏級锛屾垜鎰熻濂� <input
+ v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
+ @change="setBookQuestion" />锛堣韩浣撴劅瑙夛級鍟婏紒
</p>
<hr />
<p class="note">
@@ -369,18 +268,16 @@
</p>
</div>
</div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <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 class="page-box" page="11" style="min-height: auto">
+ <div class="page-box" page="11">
<div v-if="showPageList.indexOf(11) > -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>
<div class="bodystyle">
<img src="../../assets/images/page5.png" alt="" />
@@ -388,23 +285,20 @@
<img class="img-e" alt="" src="../../assets/images/1-5.gif" />
</p>
<p>
- <span class="hs1">鈼�</span
- >铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
+ <span class="hs1">鈼�</span>铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
</p>
</div>
</div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <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 class="page-box" page="12" style="min-height: auto">
+ <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"
- />
+ <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
<h2 id="b005">鍗曞厓娲诲姩浠诲姟</h2>
@@ -429,18 +323,16 @@
</p>
</div>
</div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <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 class="page-box" page="13" style="min-height: auto">
+ <div class="page-box" page="13">
<div v-if="showPageList.indexOf(13) > -1">
<h1>
- <img
- src="../../assets/images/page6-header-green.png"
- alt=""
- style="width: 100%; height: auto"
- />
+ <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
<div class="bodystyle">
<h3 class="lefth3" id="c010">
@@ -451,31 +343,24 @@
瀛旇瀺鍥涘瞾灏辨噦绀艰矊銆佺煡璋﹁锛屾槸鎴戜滑瀛︿範鐨勫ソ姒滄牱锛岃鎴戜滑杩愮敤鏈崟鍏冪殑鎴忓墽鐭ヨ瘑锛屾妸浠栫殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒
</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>
+ <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>
+ </p>
</div>
</div>
- <p class="center">
- <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
- </p>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <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>
</template>
-
- <script>
+
+<script>
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
@@ -485,17 +370,22 @@
showPageList: {
type: Array,
},
- },
+ primaryColor:{
+ type:String,
+ default:"red"
+ }
+ },
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
this.getVidoePath();
+ const bookQuestion = localStorage.getItem("artAndDrama-book-question-one");
+ if (bookQuestion) {
+ this.questionData = JSON.parse(bookQuestion);
+ }
},
data() {
return {
videoPathOne: "",
- videoPathTwo: "",
- videoPathThree: "",
- videoPathFour: "",
auidoPathOne: "",
auidoPathTwo: "",
auidoPathThree: "",
@@ -613,36 +503,12 @@
},
questionData: {
warnUp: {
- one: {
- value: "",
- isRight: null,
- answer: "Chinese knot",
- },
- two: {
- value: "",
- isRight: null,
- answer: "Chinese medicine",
- },
- three: {
- value: "",
- isRight: null,
- answer: "Chinese calligraphy",
- },
- four: {
- value: "",
- isRight: null,
- answer: "Taichi",
- },
- five: {
- value: "",
- isRight: null,
- answer: "sweet dumpling",
- },
- six: {
- value: "",
- isRight: null,
- answer: "Chinese chess",
- },
+ one: "",
+ two: "",
+ three: "",
+ four: "",
+ five: "",
+ six: "",
},
reading: {
one: "",
@@ -662,57 +528,59 @@
},
};
},
-
-
-
methods: {
//瑙嗛鍜岄煶棰戠殑MD5鍦板潃
async getVidoePath() {
this.videoPathOne = await getResourcePath(
"691cbd2c13198d04afc7800d0f2cafb0"
);
- this.videoPathTwo = await getResourcePath(
- "a3c9b55ac8227e4c885384ff2fc6c0e7"
- );
- this.videoPathThree = await getResourcePath(
- "dd44a1e31b4304f50d10b2481a148411"
- );
- this.videoPathFour = await getResourcePath(
- "09de7704eeaaf3a210b8c6af0a94d545"
- );
- this.auidoPathOne = await getResourcePath(
- "2c5f6c69b0f9f7a3c03e473cb8c977f5"
- );
- this.auidoPathTwo = await getResourcePath(
- "e93c0fdde08be5a4386c8c863892a287"
- );
- this.auidoPathThree = await getResourcePath(
- "e93c0fdde08be5a4386c8c863892a287"
+ // this.auidoPathOne = await getResourcePath(
+ // "2c5f6c69b0f9f7a3c03e473cb8c977f5"
+ // );
+ // this.auidoPathTwo = await getResourcePath(
+ // "e93c0fdde08be5a4386c8c863892a287"
+ // );
+ // this.auidoPathThree = await getResourcePath(
+ // "e93c0fdde08be5a4386c8c863892a287"
+ // );
+ },
+ setBookQuestion() {
+ console.log("淇濆瓨");
+ localStorage.setItem(
+ "artAndDrama-book-question-one",
+ JSON.stringify(this.questionData)
);
},
},
};
</script>
-
- <style lang="less" scoped>
+
+<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;
}
-</style>
-
\ No newline at end of file
+.macthing{
+ background-color: rgb(188, 220, 164);
+ padding: 5% 5%;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.1