From 0ab7ff07fd29ac32be045d505ae2d2b9290647a7 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 01 七月 2024 15:32:51 +0800
Subject: [PATCH] 涂色提组件优化
---
src/books/mathBook/view/components/chapter001.vue | 658 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 470 insertions(+), 188 deletions(-)
diff --git a/src/books/mathBook/view/components/chapter001.vue b/src/books/mathBook/view/components/chapter001.vue
index c887734..a31cf36 100644
--- a/src/books/mathBook/view/components/chapter001.vue
+++ b/src/books/mathBook/view/components/chapter001.vue
@@ -5,7 +5,7 @@
<h1 id="a007">
<img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
</h1>
- <div class="padding-96">
+ <div class="padding-116">
<p>
鍦ㄥ瑙備笘鐣屼腑瀛樺湪鍚勭鍚勬牱鐨勮繍鍔ㄥ彉鍖栫幇璞�.濡傛惌杞界鑸熷崄鍥涘彿杞戒汉椋炶埞鐨勯暱寰佷簩鍙疯繍杞界伀绠彂灏勮繃绋嬩腑锛岄鑸逛笌鍙戝皠鐐硅窛绂讳細闅忕潃鏃堕棿鐨勫彉鍖栬�屽彉鍖栵紱娣辨捣鍕囧＋鍙疯浇浜烘綔姘村櫒鍦ㄤ笅娼滃疄楠岃繃绋嬩腑锛屽叾鍘嬪己闅忕潃涓嬫綔娣卞害鐨勫鍔犺�屽澶э紱浠ｈ〃鏂拌兘婧愭妧鏈殑鍏変紡鍙戠數鍜岄鑳藉彂鐢碉紝鎴戝浗鐨勮鏈哄閲忛殢鏃堕棿鍙樺寲鑰屽闀匡紱鎴戝浗蹇�熷彂灞曠殑楂橀�熼搧璺紝鍏舵�婚噷绋嬫槸閫愬勾澧炲姞鐨勶紝鐜板凡绐佺牬4涓噆m
锛岀ǔ灞呬笘鐣岀涓�锛涙瘡涓汉鐨勪綋娓╅殢鐫�鏃堕棿鐨勫彉鍖栬�屽彉鍖栵紱鍒板晢搴楄喘涔板悓涓�绉嶉ギ鏂欑殑鏁伴噺瓒婂锛屼粯璐硅秺澶氱瓑.杩欎簺鍔ㄦ�佸彉鍖栫幇璞￠兘琛ㄧ幇涓哄彉閲忎箣闂寸殑瀵瑰簲鍏崇郴锛屾垜浠父鐢ㄥ嚱鏁版ā鍨嬫潵鎻忚堪杩欎簺鍙橀噺涔嬮棿鐨勫叧绯诲拰瑙勫緥锛屽苟閫氳繃鐮旂┒鍑芥暟鏉ヨ璇嗗瑙備笘鐣�.
@@ -21,7 +21,7 @@
</div>
<div class="page-box" page="5">
<div v-if="showPageList.indexOf(5) > -1">
- <div class="padding-96">
+ <div class="padding-116">
<p class="left">
<img class="inline2" alt="" src="../../assets/images/xxmb.jpg" />
</p>
@@ -55,7 +55,7 @@
<p><span>089</span></p>
</li>
</ul>
- <div class="padding-96">
+ <div class="padding-116">
<h3 id="c031">
3.3.2 鍑芥暟鐨勫鍋舵��<span class="fontsz2">锛烇紴锛�</span>
</h3>
@@ -66,6 +66,14 @@
鍑芥暟<i>f</i>锛�<i>x</i>锛�=|<i>x</i>|鍜�<i>g</i>锛�<i>x</i>锛�=<i>x</i
><sup>2</sup>鐨勫浘鍍忕殑瀵圭О鎬у浣曪紵
</p>
+ <textarea
+ cols="30"
+ rows="4"
+ v-model="chapterData.txtOne"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ class="w100 ta-br textarea-text"
+ @input="handleChapterData"
+ ></textarea>
<p class="left">
<img class="img-gn" alt="" src="../../assets/images/tjfx.jpg" />
</p>
@@ -104,7 +112,7 @@
>=<i>g</i>锛�<i>x</i>锛夛紝鍗�<i>g</i>锛�-<i>x</i>锛�=<i>g</i>锛�<i>x</i>锛�.
</p>
<p>
- 杩欎袱涓嚱鏁扮殑鍥惧儚閮藉叧浜�<i>y</i>杞村绉帮紱褰撹嚜鍙橀噺鍙栧畾涔夊煙涓换鎰忎竴瀵圭浉鍙嶆暟鏃讹紝瀵瑰簲鐨勫嚱鏁板�奸兘鐩哥瓑锛岃繖绉嶅嚱鏁板氨鏄伓鍑芥暟.
+ 杩欎袱涓嚱鏁扮殑鍥惧儚閮藉叧浜� <i>y</i> 杞村绉帮紱褰撹嚜鍙橀噺鍙栧畾涔夊煙涓换鎰忎竴瀵圭浉
</p>
</div>
</div>
@@ -116,7 +124,8 @@
<li>鏁板.鍩虹妯″潡</li>
<li></li>
</ul>
- <div class="padding-96">
+ <div class="padding-116">
+ <p class="t0">鍙嶆暟鏃讹紝瀵瑰簲鐨勫嚱鏁板�奸兘鐩哥瓑锛岃繖绉嶅嚱鏁板氨鏄伓鍑芥暟.</p>
<p class="left">
<img class="img-gn" alt="" src="../../assets/images/cxgk.jpg" />
</p>
@@ -140,13 +149,18 @@
</p>
<p class="img fl fl-cn ju-cn">
<span>鍥�3-15</span>
- <el-tooltip class="item" effect="dark" :content="chapterData.isCollectImg ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start">
+ <el-tooltip
+ class="item"
+ effect="dark"
+ :content="chapterData.isCollectImg ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
+ placement="top-start"
+ >
<img
- :src="chapterData.isCollectImg ? collectCheck : collectImg"
- alt=""
- class="collect-btn"
- @click="handleCollect('img')"
- />
+ :src="collectResourceList.findIndex(item => item.id == '722FE833') > -1 ? collectCheck : collectImg"
+ alt=""
+ class="collect-btn"
+ @click="handleCollect('img')"
+ />
</el-tooltip>
</p>
<video
@@ -163,23 +177,30 @@
></video>
<p class="img fl fl-cn ju-cn">
<span>瑙嗛锛氬垽鏁板嚱鏁板鍋舵�х殑鏂规硶鍜屾楠� </span>
- <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'" placement="top-start">
+ <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')"
- />
+ :src="collectResourceList.findIndex(item => item.id == 'a28cd862d61b5df2201406b76e9f01b0') > -1 ? collectCheck : collectImg"
+ alt=""
+ class="collect-btn"
+ @click="handleCollect('video')"
+ />
</el-tooltip>
</p>
- <p>
- <span class="zt-ls"><b>渚�1</b></span
- >銆�鏍规嵁鍥�3-16涓嚱鏁扮殑鍥惧儚锛屽垽鏂摢浜涘嚱鏁版槸鍋跺嚱鏁�.
+ <p class="fl">
+ <span>
+ <span class="zt-ls"><b>渚�1</b></span
+ >銆�鏍规嵁鍥�3-16涓嚱鏁扮殑鍥惧儚锛屽垽鏂摢浜涘嚱鏁版槸鍋跺嚱鏁�.
+ </span>
<span class="btn-box" @click="isShowExampleOne = !isShowExampleOne">
<svg
xmlns="http://www.w3.org/2000/svg"
- width="20.501"
- height="20.501"
+ width="16.501"
+ height="16.501"
viewBox="0 0 20.501 20.501"
>
<path
@@ -202,14 +223,30 @@
鐨勫嚱鏁板浘鍍忎笉鍏充簬<i>y</i>杞村绉�.鏍规嵁鍋跺嚱鏁扮殑鍥惧儚鍏锋湁鍏充簬<i>y</i>杞村绉扮殑鐗圭偣锛屽浘3-16锛�1锛夊拰鍥�3-16锛�4锛夌殑鍑芥暟鏄伓鍑芥暟锛屽浘3-16锛�2锛夊拰鍥�3-16锛�3锛夌殑鍑芥暟涓嶆槸鍋跺嚱鏁�.
</p>
</div>
- <p>
- <span class="zt-ls"><b>渚�2</b></span
- >銆�宸茬煡<i>f</i>锛�<i>x</i>锛�=|<i>x</i>|+1鍥惧儚鍦�<i>y</i>杞村彸杈圭殑閮ㄥ垎濡傚浘3-17鎵�绀�.璇曠敾鍑鸿繖涓嚱鏁板浘鍍忓湪<i>y</i>杞村乏杈圭殑閮ㄥ垎.
+ </div>
+ </div>
+ </div>
+ <div class="page-box" page="8">
+ <div v-if="showPageList.indexOf(8) > -1">
+ <ul class="page-header-box">
+ <li>
+ <p>绗笁鍗曞厓 鍑芥暟</p>
+ </li>
+ <li>
+ <p><span>091</span></p>
+ </li>
+ </ul>
+ <div class="padding-116">
+ <p class="fl">
+ <span>
+ <span class="zt-ls"><b>渚�2</b></span>
+ 銆�宸茬煡<i>f</i>锛�<i>x</i>锛�=|<i>x</i>|+1鍥惧儚鍦�<i>y</i>杞村彸杈圭殑閮ㄥ垎濡傚浘3-17鎵�绀�.璇曠敾鍑鸿繖涓嚱鏁板浘鍍忓湪<i>y</i>杞村乏杈圭殑閮ㄥ垎.
+ </span>
<span class="btn-box" @click="isShowExampleTwo = !isShowExampleTwo">
<svg
xmlns="http://www.w3.org/2000/svg"
- width="20.501"
- height="20.501"
+ width="16.501"
+ height="16.501"
viewBox="0 0 20.501 20.501"
>
<path
@@ -229,20 +266,6 @@
/>
</p>
<p class="img">鍥�3-17</p>
- </div>
- </div>
- </div>
- <div class="page-box" page="8">
- <div v-if="showPageList.indexOf(8) > -1">
- <ul class="page-header-box">
- <li>
- <p>绗笁鍗曞厓 鍑芥暟</p>
- </li>
- <li>
- <p><span>091</span></p>
- </li>
- </ul>
- <div class="padding-96">
<p v-if="isShowExampleTwo">
<span class="zt-ls"><b>瑙�</b></span>
鍑芥暟<i>f</i>锛�<i>x</i>锛�=|<i>x</i>|+1鐨勫畾涔夊煙鏄紙-鈭烇紝+鈭烇級锛屽洜涓哄畠鏄伓鍑芥暟锛屾墍浠ユ牴鎹叾鍥惧儚鍏充簬<i>y</i>杞村绉扮殑鐗圭偣锛屽嵆鍙敾鍑鸿繖涓嚱鏁板湪<i>x</i>鈭堬紙-鈭烇紝0锛戒笂鐨勫浘鍍�.
@@ -286,8 +309,8 @@
>
<svg
xmlns="http://www.w3.org/2000/svg"
- width="18.501"
- height="18.501"
+ width="16.501"
+ height="16.501"
viewBox="0 0 20.501 20.501"
>
<path
@@ -300,8 +323,8 @@
<span class="btn-box" @click="openThinkingDialog">
<svg
xmlns="http://www.w3.org/2000/svg"
- width="18.545"
- height="20.112"
+ width="16.545"
+ height="18.112"
viewBox="0 0 20.545 22.112"
>
<path
@@ -314,8 +337,8 @@
<span class="btn-box" @click="stepDialog = true">
<svg
xmlns="http://www.w3.org/2000/svg"
- width="17.28"
- height="19.563"
+ width="15.28"
+ height="17.563"
viewBox="0 0 19.28 20.563"
>
<g transform="translate(-109.056 -82.941)">
@@ -341,8 +364,8 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
- width="17.323"
- height="17.939"
+ width="15.323"
+ height="15.939"
viewBox="0 0 18.323 15.939"
>
<g transform="translate(-398 -946)">
@@ -371,10 +394,10 @@
class="btn-box"
@click="isShowExampleFour = !isShowExampleFour"
>
- <svg
+ <svg
xmlns="http://www.w3.org/2000/svg"
- width="18.501"
- height="18.501"
+ width="16.501"
+ height="16.501"
viewBox="0 0 20.501 20.501"
>
<path
@@ -388,8 +411,8 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
- width="17.323"
- height="17.939"
+ width="15.323"
+ height="15.939"
viewBox="0 0 18.323 15.939"
>
<g transform="translate(-398 -946)">
@@ -418,10 +441,10 @@
class="btn-box"
@click="isShowExampleFive = !isShowExampleFive"
>
- <svg
+ <svg
xmlns="http://www.w3.org/2000/svg"
- width="18.501"
- height="18.501"
+ width="16.501"
+ height="16.501"
viewBox="0 0 20.501 20.501"
>
<path
@@ -435,8 +458,8 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
- width="17.323"
- height="17.939"
+ width="15.323"
+ height="15.939"
viewBox="0 0 18.323 15.939"
>
<g transform="translate(-398 -946)">
@@ -513,18 +536,18 @@
/>
</p>
</div>
- <p class="block">
+ <p class="block tl">
濡傛灉<i>f</i>锛�<i>x</i>锛夛紝<i>g</i>锛�<i>x</i>锛夐兘鏄畾涔夊煙涓�<i>D</i>鐨勫伓鍑芥暟锛岄偅涔�<i>f</i>锛�<i>x</i>锛�+<i>g</i>锛�<i>x</i>锛夊拰<i>f</i>锛�<i>x</i>锛�<i>g</i>锛�<i>x</i>锛変粛鏄伓鍑芥暟鍚楋紵
+ <textarea
+ cols="30"
+ rows="4"
+ v-model="chapterData.txtTwo"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ class="w100 ta-br textarea-text"
+ @input="handleChapterData"
+ ></textarea>
</p>
</div>
- <textarea
- cols="30"
- rows="4"
- v-model="chapterData.txtOne"
- placeholder="璇疯緭鍏ュ唴瀹�"
- class="w100 ta-br textarea-text"
- @input="handleChapterData"
- ></textarea>
</div>
</div>
</div>
@@ -535,157 +558,292 @@
<li>鏁板.鍩虹妯″潡</li>
<li></li>
</ul>
- <div class="padding-96">
+ <div class="padding-116">
<p class="left">
<img class="img-gn" alt="" src="../../assets/images/stlx.jpg" />
</p>
<div class="bj">
<examinations
- :cardList="questionData"
+ :cardList="questionData[9]"
+ :hideCollect="true"
+ sourceType="json"
+ inputBc="#d3edfa"
v-if="questionData"
:isReal="false"
></examinations>
+ <p class="gr-title">鍥涖�佸嚱鏁� f(x)=x鈥�-3 鐨勫浘鍍忓湪 杞村乏杈圭殑閮ㄥ垎濡傚浘鎵�绀猴紝璇蜂綘鐢诲嚭杩欎釜鍑芥暟鍥惧儚鍦� y杞村彸杈圭殑閮ㄥ垎.</p>
+ <div style="margin:0 auto;width:330px">
+ <graffiti :page="9" :bcImg="this.config.activeBook.resourceUrl + '/images/0103-2.jpg'" :imgHeight="300" :imgWidth="300" :bcColor="'#d3edfa'" />
+ </div>
+
</div>
</div>
</div>
</div>
-
<!-- 鍑芥暟鎺т欢寮圭獥 -->
<el-dialog
- title=""
:visible.sync="dialogVisible"
width="60%"
:append-to-body="true"
+ :show-close="false"
>
+ <div slot="title" style="padding: 0 0 15px 0;position: relative;">
+ <svg
+ style="position: absolute; right:10px;cursor: pointer;"
+ @click="dialogVisible = false"
+ t="1718596022986"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="4252"
+ width="20"
+ height="20"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <path
+ d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
+ fill="#979797"
+ p-id="4253"
+ ></path>
+ <path
+ d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
+ fill="#979797"
+ p-id="4254"
+ ></path>
+ </svg>
+ </div>
<iframe
src="https://www.geogebra.org/calculator"
frameborder="0"
- class="iframe-box"
+ style="width: 100%; min-height: 800px"
></iframe>
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="dialogVisible = false"
- >纭� 瀹�</el-button
- >
- </span>
</el-dialog>
<!-- 瑙ｉ鎬濊矾寮圭獥 -->
<el-dialog
- title="瑙ｉ鎬濊矾"
:visible.sync="thinkingDialog"
width="40%"
:append-to-body="true"
+ :show-close="false"
>
+ <div slot="title" style="padding: 0; text-align: center; color: #333;display:flex;justify-content: center;">
+ <span style=""> 瑙ｉ鎬濊矾 </span>
+ <svg
+ style="position: absolute; right:10px;cursor: pointer;"
+ @click="thinkingDialog = false"
+ t="1718596022986"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="4252"
+ width="20"
+ height="20"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <path
+ d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
+ fill="#979797"
+ p-id="4253"
+ ></path>
+ <path
+ d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
+ fill="#979797"
+ p-id="4254"
+ ></path>
+ </svg>
+ </div>
<ul>
<li v-for="(item, index) in thinkOne" :key="index">
- <div v-if="item.isShow">
- <p class="txt-p">{{ item.txt }}</p>
- <div style="text-align: center">
- <svg
- @click="showNext(index + 1)"
- v-if="index != thinkOne.length - 1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- t="1710234570135"
- class="icon"
- viewBox="0 0 1024 1024"
- version="1.1"
- p-id="5067"
- width="15"
- height="15"
+ <div v-if="item.isShow" style="display: flex">
+ <span style="position: relative">
+ <span
+ style="position: absolute; top: 16px; left: 13px; color: #fff"
+ >{{ index + 1 }}</span
>
- <path
- d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
- fill="#1296db"
- p-id="5068"
- />
- <path
- d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
- fill="#1296db"
- p-id="5069"
- />
- </svg>
- </div>
+ <img
+ src="../../assets/images/icon/blue-group.png"
+ alt=""
+ style="margin-right: 10px"
+ v-if="index < thinkOne.length - 1"
+ />
+ <img
+ src="../../assets/images/icon/blue.png"
+ alt=""
+ v-if="index == thinkOne.length - 1"
+ style="margin-right: 10px"
+ />
+ </span>
+ <p class="txt-p">{{ item.txt }}</p>
</div>
</li>
</ul>
-
- <span slot="footer" class="dialog-footer">
- <el-button @click="thinkingDialog = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="thinkingDialog = false"
- >纭� 瀹�</el-button
+ <div
+ @click="showNext(thinkIndex)"
+ style="
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ "
+ >
+ <img
+ src="../../assets/images/icon/mouse.png"
+ alt=""
+ v-if="thinkIndex != 3"
+ />
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ t="1710234570135"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ p-id="5067"
+ width="15"
+ height="15"
>
- </span>
+ <path
+ d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
+ fill="#1296db"
+ p-id="5068"
+ />
+ <path
+ d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
+ fill="#1296db"
+ p-id="5069"
+ />
+ </svg>
+ </div>
</el-dialog>
<!-- 瑙ｉ姝ラ寮圭獥 -->
<el-dialog
+ class="stepDialog"
title="瑙ｉ姝ラ"
:visible.sync="stepDialog"
width="40%"
:append-to-body="true"
+ :show-close="false"
>
+ <div slot="title" style="padding: 0; text-align: center; color: #333;display:flex;justify-content: center;">
+ <span>
+ 瑙ｉ姝ラ
+ </span>
+ <svg
+ style="position: absolute; right:10px;cursor: pointer;"
+ @click="stepDialog = false"
+ t="1718596022986"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ p-id="4252"
+ width="20"
+ height="20"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ >
+ <path
+ d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
+ fill="#979797"
+ p-id="4253"
+ ></path>
+ <path
+ d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
+ fill="#979797"
+ p-id="4254"
+ ></path>
+ </svg>
+ </div>
<ul>
<li v-for="(item, index) in stepOne" :key="index">
- <div v-if="item.isShow">
- <p class="txt-p">{{ item.txt }}</p>
- <div style="text-align: center">
- <svg
- @click="showNextChange(index + 1)"
- v-if="index != thinkOne.length - 1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- t="1710234570135"
- class="icon"
- viewBox="0 0 1024 1024"
- version="1.1"
- p-id="5067"
- width="15"
- height="15"
+ <div v-if="item.isShow" style="display: flex">
+ <span style="position: relative">
+ <span
+ style="position: absolute; top: 16px; left: 13px; color: #fff"
+ >{{ index + 1 }}</span
>
- <path
- d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
- fill="#1296db"
- p-id="5068"
- />
- <path
- d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
- fill="#1296db"
- p-id="5069"
- />
- </svg>
- </div>
+ <img
+ src="../../assets/images/icon/blue-group.png"
+ alt=""
+ style="margin-right: 10px"
+ v-if="index < stepOne.length - 1"
+ />
+ <img
+ src="../../assets/images/icon/blue.png"
+ alt=""
+ v-if="index == stepOne.length - 1"
+ style="margin-right: 10px"
+ />
+ </span>
+ <p class="txt-p">{{ item.txt }}</p>
</div>
</li>
</ul>
-
- <span slot="footer" class="dialog-footer">
- <el-button @click="stepDialog = false">鍙� 娑�</el-button>
- <el-button type="primary" @click="stepDialog = false">纭� 瀹�</el-button>
- </span>
+ <div
+ @click="showNextChange(stepIndex)"
+ style="
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ "
+ >
+ <img
+ src="../../assets/images/icon/mouse.png"
+ alt=""
+ v-if="stepIndex != 2"
+ />
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ t="1710234570135"
+ class="icon"
+ viewBox="0 0 1024 1024"
+ version="1.1"
+ p-id="5067"
+ width="15"
+ height="15"
+ >
+ <path
+ d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
+ fill="#1296db"
+ p-id="5068"
+ />
+ <path
+ d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
+ fill="#1296db"
+ p-id="5069"
+ />
+ </svg>
+ </div>
</el-dialog>
</div>
</template>
<script>
import examinations from "@/components/examinations/index.vue";
+import graffiti from '@/components/graffiti/index.vue'
import { getResourcePath } from "@/assets/methods/resources";
-import axios from "axios";
+import { getCollectResource,setCollectResource } from "@/assets/methods/resources";
export default {
name: "chapter-one",
- components: { examinations },
+ components: { examinations,graffiti },
props: {
showPageList: {
type: Array,
default: [],
},
+ questionData:{
+ type:Object
+ }
},
- mounted() {
+ async mounted() {
const data = localStorage.getItem("math-chapterData");
if (data) {
this.chapterData = JSON.parse(data);
}
this.getPath();
- this.getQuestionData();
+ this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
},
data() {
return {
@@ -700,11 +858,14 @@
thinkingDialog: false,
stepDialog: false,
videoPath: "",
- questionData: [],
+ stepIndex: 1,
+ thinkIndex: 1,
+ collectResourceList:[],
chapterData: {
isCollectImg: false,
isCollectVideo: false,
txtOne: "",
+ txtTwo: "",
},
thinkOne: [
{
@@ -730,6 +891,80 @@
isShow: false,
},
],
+ dragQuestion:[
+ {
+ analysisCon: null,
+ answer: ['A','B','C'],
+ difficulty: 0,
+ id: "7BC7B760",
+ isCollect: false,
+ isComplete: false,
+ isRight: null,
+ isUnfold: "",
+ isUserAnswer: false,
+ number: 1,
+ option: [
+ {
+ img: "",
+ index: "010311",
+ txt: "鑳嗗皬鐨�",
+ value: "A",
+ isShow:true
+ },
+ {
+ img: "",
+ index: "010312",
+ txt: "鍠勮壇鐨�",
+ value: "B",
+ isShow:true
+ },
+ {
+ img: "",
+ index: "010313",
+ txt: "娌夌ǔ鐨�",
+ value: "C",
+ isShow:true
+ },
+ ],
+ optionStyle: "Txt",
+ questionType: "drag",
+ score: 2,
+ stem: {
+ 0: "铓傝殎闃熼暱璧拌矾鏄傞鎸鸿兏銆佹浼愬潥瀹氾紝瀹冩槸涓�鍙�(",
+ 1:{
+ data: "span",
+ num: 0
+ },
+ 2: ")铓傝殎;灏忚殏铓佽蛋璧疯矾鏉ュ皬蹇冪考缈硷紝鐪肩椋樺拷涓嶅畾锛屽畠鏄竴鍙�(",
+ 3:{
+ data:"span",
+ num:1
+ },
+ 4:")铓傝殎;铓傝殎灏忓闈㈠甫寰瑧锛屾椂鍒绘効鎰忓府鍔╁ぇ瀹讹紝瀹冩槸涓�鍙�(",
+ 5:{
+ data:"span",
+ num:2,
+ },
+ 6:" )铓傝殎"
+ },
+ stemStyle: "RichTxt",
+ type: "鎷栨嫿棰�",
+ userAnswer:[
+ {
+ vlaue:'',
+ txt:''
+ },
+ {
+ vlaue:'',
+ txt:''
+ },
+ {
+ vlaue:'',
+ txt:''
+ },
+ ]
+ },
+ ]
};
},
methods: {
@@ -744,45 +979,46 @@
"a28cd862d61b5df2201406b76e9f01b0"
);
},
- getQuestionData() {
- axios
- .get(this.config.activeBook.resourceUrl + "/question.json")
- .then((res) => {
- let oldAnswer = localStorage.getItem(
- this.config.activeBook.name + "oldAnswerData"
- );
- if (oldAnswer) {
- oldAnswer = JSON.parse(oldAnswer);
- console.log("鏃ф暟鎹�", oldAnswer);
- if (oldAnswer[9]) {
- for (let index = 0; index < res.data.data.length; index++) {
- const item = res.data.data[index];
- if (item.infoList.length) {
- for (
- let cindex = 0;
- cindex < item.infoList.length;
- cindex++
- ) {
- const citem = item.infoList[cindex];
- const question = oldAnswer[9].find(
- (ditem) => ditem.id == citem.id
- );
- if (question) {
- citem.userAnswer = question.userAnswer;
- }
- }
- }
- }
- }
- }
- this.questionData = res.data.data;
- });
- },
+ // getQuestionData() {
+ // axios
+ // .get(this.config.activeBook.resourceUrl + "/question.json")
+ // .then((res) => {
+ // let oldAnswer = localStorage.getItem(
+ // this.config.activeBook.name + "oldAnswerData"
+ // );
+ // if (oldAnswer) {
+ // oldAnswer = JSON.parse(oldAnswer);
+ // console.log("鏃ф暟鎹�", oldAnswer);
+ // if (oldAnswer[9]) {
+ // for (let index = 0; index < res.data.data.length; index++) {
+ // const item = res.data.data[index];
+ // if (item.infoList.length) {
+ // for (
+ // let cindex = 0;
+ // cindex < item.infoList.length;
+ // cindex++
+ // ) {
+ // const citem = item.infoList[cindex];
+ // const question = oldAnswer[9].find(
+ // (ditem) => ditem.id == citem.id
+ // );
+ // if (question) {
+ // citem.userAnswer = question.userAnswer;
+ // }
+ // }
+ // }
+ // }
+ // }
+ // }
+ // this.questionData = res.data.data;
+ // });
+ // },
handleCollect(type) {
if (type == "img") {
- this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
+ this.handleCollectResource("722FE833","",'images/0101-1.jpg',"鍥剧墖","json",'鍥�3-15')
} else if (type == "video") {
- this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
+ this.handleCollectResource("a28cd862d61b5df2201406b76e9f01b0","a28cd862d61b5df2201406b76e9f01b0",'',"瑙嗛","bits",'瑙嗛锛氬垽鏁板嚱鏁板鍋舵�х殑鏂规硶鍜屾楠�')
+ // setCollectResource(this.config.activeBook.bookId,[])
}
this.handleChapterData();
},
@@ -796,27 +1032,73 @@
const number = this.thinkOne.findIndex((item, index) => index == num);
console.log(number);
this.thinkOne[number].isShow = true;
+ if (this.thinkIndex <= 2) {
+ this.thinkIndex++;
+ }
},
showNextChange(num) {
const number = this.stepOne.findIndex((item, index) => index == num);
this.stepOne[number].isShow = true;
+ if (this.stepIndex < 2) {
+ this.stepIndex++;
+ }
},
+ //璧勬簮鏀惰棌浜嬩欢
+ handleCollectResource(id,md5,resourcePath,resourceType,source,resourceName){
+ console.log(this.collectResourceList);
+ 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>
<style lang="less" scoped>
+p {
+ font-size: 18px;
+ text-align: justify;
+}
.iframe-box {
width: 100%;
min-height: 800px;
- border: 1px solid #8281ed;
+ border: 1px solid #00a1e9;
+ border-radius: 10px;
}
li {
list-style: none;
}
.txt-p {
margin-top: 0;
- border-bottom: 1px dashed #000;
padding: 10px 0;
}
+.bottom-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+.step-num {
+ position: relative;
+ .step-num-box {
+ position: absolute;
+ top: 16px;
+ left: 13px;
+ color: #fff;
+ }
+}
+.stepDialog {
+}
</style>
--
Gitblit v1.9.1