From f90af24164f9b8ba49d7fe1fb78eb2bb61664858 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期四, 13 六月 2024 19:22:18 +0800 Subject: [PATCH] 数学优化 --- src/books/mathBook/view/components/chapter001.vue | 128 ++++++++++++++---------- src/books/mathBook/assets/main.less | 25 +++- src/assets/images/isCollect.png | 0 src/components/examinations/index.vue | 128 +++++++++++++++++++----- src/assets/images/collect.png | 0 5 files changed, 191 insertions(+), 90 deletions(-) diff --git a/src/assets/images/collect.png b/src/assets/images/collect.png new file mode 100644 index 0000000..958cf16 --- /dev/null +++ b/src/assets/images/collect.png Binary files differ diff --git a/src/assets/images/isCollect.png b/src/assets/images/isCollect.png new file mode 100644 index 0000000..0cb1cf7 --- /dev/null +++ b/src/assets/images/isCollect.png Binary files differ diff --git a/src/books/mathBook/assets/main.less b/src/books/mathBook/assets/main.less index 4f7490e..cd19bdb 100644 --- a/src/books/mathBook/assets/main.less +++ b/src/books/mathBook/assets/main.less @@ -1,7 +1,8 @@ .math-book { width: 100%; height: 100%; - font-family: "瀹嬩綋", SimSun, sans-serif; + // font-family: "瀹嬩綋", SimSun, sans-serif; + font-family: "Times New Roman", "瀹嬩綋", SimSun, sans-serif !important; mn{ font-size:1em; } @@ -560,7 +561,7 @@ margin: 0 !important; width: 100%; height: 24px; - background-color: #97a4d3; + background-color: #40c7f4; text-align: right; padding-right: 20px; color: #fff; @@ -573,7 +574,7 @@ height: 100%; padding:0 4px; width: min-content; - border: 1px solid #7b8cc5; + border: 1px solid #40c7f4; text-indent: 0em; display: flex; align-items: flex-end; @@ -589,7 +590,7 @@ display: flex; justify-content: space-between; li:first-child { - border: 1px solid #7b8cc5; + border: 1px solid #40c7f4; width: 15%; height: 24px; text-align: right; @@ -600,7 +601,7 @@ padding: 0 4px; min-width:132px; height: 24px; - border: 1px solid #7b8cc5; + border: 1px solid #40c7f4; text-align: center; box-sizing: border-box; color: #5f7abc; @@ -609,7 +610,7 @@ li:last-child { width: 64%; height: 24px; - background-color: #97a4d3; + background-color: #40c7f4; } } .fw-b { @@ -635,6 +636,9 @@ } .mb-80 { margin-bottom: 80px !important; + } + .mr-10 { + margin-right: 10px; } .mr-20 { margin-right: 20px; @@ -749,7 +753,8 @@ margin-left: 5px; cursor: pointer; text-indent: 0; - display: inline-block; + display: flex; + align-items: center; border:1px solid #00a1e9; height: 22px; padding: 2px; @@ -787,6 +792,9 @@ .padding-96 { padding: 0 20px 40px 20px; } + .padding-116 { + padding: 0 20px 40px 20px; + } /* video澶у皬 */ .video-box { max-width: 260px; @@ -811,6 +819,9 @@ .padding-96 { padding: 0 96px 104px 96px; } + .padding-116 { + padding: 0 116px 104px 116px; + } .video-box { max-width: 370px; } diff --git a/src/books/mathBook/view/components/chapter001.vue b/src/books/mathBook/view/components/chapter001.vue index 2f327f9..74934e8 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> 鍦ㄥ瑙備笘鐣屼腑瀛樺湪鍚勭鍚勬牱鐨勮繍鍔ㄥ彉鍖栫幇璞�.濡傛惌杞界鑸熷崄鍥涘彿杞戒汉椋炶埞鐨勯暱寰佷簩鍙疯繍杞界伀绠彂灏勮繃绋嬩腑锛岄鑸逛笌鍙戝皠鐐硅窛绂讳細闅忕潃鏃堕棿鐨勫彉鍖栬�屽彉鍖栵紱娣辨捣鍕囧+鍙疯浇浜烘綔姘村櫒鍦ㄤ笅娼滃疄楠岃繃绋嬩腑锛屽叾鍘嬪己闅忕潃涓嬫綔娣卞害鐨勫鍔犺�屽澶э紱浠h〃鏂拌兘婧愭妧鏈殑鍏変紡鍙戠數鍜岄鑳藉彂鐢碉紝鎴戝浗鐨勮鏈哄閲忛殢鏃堕棿鍙樺寲鑰屽闀匡紱鎴戝浗蹇�熷彂灞曠殑楂橀�熼搧璺紝鍏舵�婚噷绋嬫槸閫愬勾澧炲姞鐨勶紝鐜板凡绐佺牬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> @@ -172,14 +181,16 @@ /> </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="18.501" - height="18.501" + width="16.501" + height="16.501" viewBox="0 0 20.501 20.501" > <path @@ -202,14 +213,31 @@ 鐨勫嚱鏁板浘鍍忎笉鍏充簬<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="18.501" - height="18.501" + width="16.501" + height="16.501" viewBox="0 0 20.501 20.501" > <path @@ -229,20 +257,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锛戒笂鐨勫浘鍍�. @@ -300,8 +314,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 +328,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 +355,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)"> @@ -373,8 +387,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 @@ -388,8 +402,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)"> @@ -420,8 +434,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 @@ -435,8 +449,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)"> @@ -515,16 +529,16 @@ </div> <p class="block"> 濡傛灉<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,7 +549,7 @@ <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> @@ -560,7 +574,7 @@ <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> @@ -705,6 +719,7 @@ isCollectImg: false, isCollectVideo: false, txtOne: "", + txtTwo:"", }, thinkOne: [ { @@ -806,10 +821,15 @@ </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; diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index 5efb3b0..4ec8d90 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.vue @@ -68,7 +68,10 @@ v-for="(itemText, indexText) in value.stem" :key="indexText" > - <span v-if="typeof itemText == 'string'" v-html="itemText" ></span> + <span + v-if="typeof itemText == 'string'" + v-html="itemText" + ></span> <!-- --> <el-input v-else @@ -88,6 +91,7 @@ v-cloak ></p> </div> + <img :src="value.isCollect ? isCollect : collect" alt="" class="collect-png" @click="handleCollect(nindex,index)" > <!-- 鏀惰棌 --> </div> <div class="questionContent"> @@ -126,7 +130,12 @@ :preview-src-list="[getPublicImage(content.img)]" v-if="isReal" ></el-image> - <img :src="content.img" alt="" v-if="!isReal" class="radio-img"> + <img + :src="content.img" + alt="" + v-if="!isReal" + class="radio-img" + /> </p> <p class="optionContent" @@ -280,6 +289,46 @@ disabled-void-color="#949494" /> </p> + <!-- 姝g‘閿欒鍥炬爣 --> + <span class="mr-10"> + <svg + v-if="value.isRight" + t="1716986419862" + class="icon" + viewBox="0 0 1820 1024" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + p-id="18767" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="40" + height="20" + > + <path + d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" + fill="#1AFA29" + p-id="18768" + ></path> + </svg> + <svg + v-if="value.isRight == false" + t="1716987085767" + class="icon" + viewBox="0 0 1024 1024" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + p-id="25745" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="20" + height="20" + > + <path + d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" + fill="#d81e06" + p-id="25746" + ></path> + </svg> + </span> + <div class="headerConent sitgBox"> <p v-if="!value.isUnfold"> <span class="analysisColor">灞曞紑瑙f瀽</span @@ -325,7 +374,7 @@ ></p> </div> <!-- 瑙f瀽 --> - <div class="referBox"> + <div class="referBox" v-if="value.analysisCon"> <span>瑙f瀽锛�</span> <p v-if="value.analysisCon" @@ -404,7 +453,9 @@ </ul> </div> <div class="bottom-btn" v-if="!loading"> - <el-button class="examinations-btn-box" @click="saveAnswer">淇濆瓨</el-button> + <el-button class="examinations-btn-box" @click="saveAnswer" + >淇濆瓨</el-button + > <el-button @click="handleQuestion" class="examinations-btn-box" @@ -439,32 +490,33 @@ page: { type: Number, }, - isReal:{ - type:Boolean, - default:true - } + isReal: { + type: Boolean, + default: true, + }, }, data() { return { type: "option", loading: false, - cardData:[], - loading:true, - + cardData: [], + loading: true, + collect:require("@/assets/images/collect.png"), + isCollect:require("@/assets/images/isCollect.png") }; }, - watch:{ - cardList:{ + watch: { + cardList: { handler(newVal) { - console.log('11',newVal); - this.cardData = this.cardList - if(newVal && newVal.length) { - this.loading = false + console.log("11", newVal); + this.cardData = this.cardList; + if (newVal && newVal.length) { + this.loading = false; } }, - immediate:true, - deep:true - } + immediate: true, + deep: true, + }, }, mounted() { // this.cardData = this.cardList @@ -587,7 +639,8 @@ }, // 淇濆瓨鎸夐挳 saveAnswer() { - const element = (this.container ? this.container : document + const element = ( + this.container ? this.container : document ).querySelector(".examination"); if (element) { const pageNum = this.getParentWithClass( @@ -609,13 +662,19 @@ }); } } - if(oldData[pageNum]) { - oldData[pageNum] = oldData[pageNum].filter(citem => asnwerList.findIndex(ditem => ditem.id == citem.id) == -1 ) - oldData[pageNum].push(...asnwerList) + if (oldData[pageNum]) { + oldData[pageNum] = oldData[pageNum].filter( + (citem) => + asnwerList.findIndex((ditem) => ditem.id == citem.id) == -1 + ); + oldData[pageNum].push(...asnwerList); } else { - oldData[pageNum] = asnwerList + oldData[pageNum] = asnwerList; } - localStorage.setItem(this.config.activeBook.name + "oldAnswerData", JSON.stringify(oldData)); + localStorage.setItem( + this.config.activeBook.name + "oldAnswerData", + JSON.stringify(oldData) + ); } // if(oldData[this.chapter]) { @@ -625,8 +684,11 @@ // oldData[this.chapter][this.page] = asnwerList // } // console.log(oldData); - }, + handleCollect(infoNum,num) { + console.log(this.cardData[infoNum].infoList[num] ); + this.cardData[infoNum].infoList[num].isCollect = !this.cardData[infoNum].infoList[num].isCollect + } }, }; </script> @@ -639,10 +701,12 @@ font-size: 16px; } .examination { - margin-top: 20px; min-height: 100px; ul { list-style: none; + } + p { + margin: 0; } } .examinations-btn-box { @@ -851,6 +915,7 @@ height: 100%; display: flex; justify-content: space-between; + align-items: center; flex-wrap: wrap; .headerConent { height: 100%; @@ -887,7 +952,7 @@ .error { display: flex; text-align: left; - width: 180px; + width: 170px; color: #ee1818; span { height: min-content; @@ -1146,4 +1211,9 @@ width: 200px; object-fit: contain; } +.collect-png { + cursor: pointer; + width: 25px; + object-fit: contain; +} </style> -- Gitblit v1.9.1