From cf6e9bcbfc64019bb14fb0964576ae3e3bd2fde5 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期三, 26 三月 2025 11:22:20 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout --- src/components/examinations/index.vue | 692 +++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 591 insertions(+), 101 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index ce572f4..95c9fe5 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.vue @@ -1,23 +1,38 @@ <template> - <div class="examination" v-loading="!cardData.length"> + <div class="examination" v-loading="loading"> <div v-for="(item, nindex) in cardData" - :key="nindex" + :key="nindex + 'item'" class="border-box" v-show="item.infoList.length" > <p class="catalogName" :style="{ color: primaryColor }"> - <span v-if="nindex == 0">涓�銆�</span> - <span v-if="nindex == 1">浜屻��</span> - <span v-if="nindex == 2">涓夈��</span> - <span v-if="nindex == 3">鍥涖��</span> - <span v-if="nindex == 4">浜斻��</span> - <span>{{ item.catalogName }}</span> + <span class="catalogName-box"> + <span v-if="nindex == 0">涓�銆�</span> + <span v-if="nindex == 1">浜屻��</span> + <span v-if="nindex == 2">涓夈��</span> + <span v-if="nindex == 3">鍥涖��</span> + <span v-if="nindex == 4">浜斻��</span> + <span v-html="item.catalogName"></span> + </span> + <img + :src="item.isCollect ? isHeart : heart" + alt="" + class="collect-png" + @click="setCollect(nindex, index)" + v-if="!hideCollect && item.type == 'material'" + /> </p> + <el-image + v-if="item.catalogImage" + :src="item.catalogImage" + :preview-src-list="[item.catalogImage]" + class="catalogImage" + ></el-image> <ul> <li v-for="(value, index) in item.infoList" - :key="value.id" + :key="index + 'value'" :id="'listItem-' + value.id" > <!-- 鏍囬 --> @@ -26,23 +41,28 @@ <span class="questionNum" :style="{ - marginTop: value.questionType == 'completion' ? '12px' : '0', + marginTop: + value.questionType == 'completion' || + value.questionType == 'mathField' + ? '12px' + : '0', }" >{{ index + 1 }}. </span> <!-- 鍚姏杩涘害鏉� --> <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> --> - <!-- 棰樺共 --> <!-- 浠呮枃瀛� --> <p - class="titleText" + class="titleText text-fl" v-if=" - value.stemStyle == 'Txt' && value.questionType != 'completion' + value.stemStyle == 'Txt' && + value.questionType != 'completion' && + value.questionType != 'dropdown' && + value.questionType != 'mathField' " :id="value.id" - > - {{ value.stem.stemTxt }} - </p> + v-html="value.stem.stemTxt" + ></p> <!-- 浠呭浘鐗� --> <el-image class="stemImg" @@ -55,7 +75,7 @@ class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'" > - <span> {{ value.stem.stemTxt }}</span> + <span v-html="value.stem.stemTxt"> </span> <el-image :src="getPublicImage(value.stem.stemImage, 150)" :preview-src-list="[getPublicImage(value.stem.stemImage)]" @@ -63,21 +83,44 @@ ></el-image> </p> <!-- 濉┖棰橀骞� --> - <p class="titleText" v-if="value.questionType == 'completion'"> + <p + class="titleText" + v-if=" + value.questionType == 'completion' || + value.questionType == 'mathField' + " + > <span v-for="(itemText, indexText) in value.stem" - :key="indexText" + :key="indexText + 'questionType'" > - <span v-if="typeof itemText == 'string'">{{ itemText }}</span> - <!-- --> - <el-input - v-else + <span + v-if="typeof itemText == 'string'" + v-html="itemText" + class="input-txt" + ></span> + <input + v-if=" + typeof itemText != 'string' && + value.questionType == 'completion' + " type="text" class="input" v-model.trim="value.userAnswer[itemText.num]" :disabled="value.isComplete" + :style="{ backgroundColor: inputBc }" /> - <!-- --> + <math-field + v-if=" + typeof itemText != 'string' && + value.questionType == 'mathField' + " + class="mathField" + :menuItems="[]" + @input="onChangeInput($event, nindex, index, itemText.num)" + > + {{ value.userAnswer[itemText.num] }} + </math-field> </span> </p> <!-- 瀵屾枃鏈� --> @@ -87,7 +130,39 @@ v-html="value.stem.stemTxt" v-cloak ></p> + <!-- 涓嬫媺閫夋嫨棰� --> + <p class="titleText" v-if="value.questionType == 'dropdown'"> + <span + v-for="(itemText, indexText) in value.stem" + :key="indexText + 'questionType'" + > + <span + v-if="typeof itemText == 'string'" + v-html="itemText" + class="input-txt" + ></span> + <select + v-else + v-model="value.userAnswer" + :disabled="value.isComplete" + > + <option + v-for="(citem, cindex) in value.option" + :key="cindex + 'dropdown'" + :label="citem" + :value="citem" + ></option> + </select> + </span> + </p> </div> + <img + :src="value.isCollect ? isHeart : heart" + alt="" + class="collect-png" + @click="setCollect(nindex, index)" + v-if="!hideCollect && item.type != 'material'" + /> <!-- 鏀惰棌 --> </div> <div class="questionContent"> @@ -102,8 +177,8 @@ v-model="value.userAnswer" > <el-radio - v-for="content in value.option" - :key="content.value" + v-for="(content, contentIndex) in value.option" + :key="contentIndex + 'contentIndex'" :label="content.value" :class=" value.optionStyle == 'Image' || @@ -124,7 +199,9 @@ :src="getPublicImage(content.img, 115)" v-show="content.img" :preview-src-list="[getPublicImage(content.img)]" + v-if="sourceType == 'bits'" ></el-image> + <img :src="content.img" alt="" v-else class="radio-img" /> </p> <p class="optionContent" @@ -154,8 +231,8 @@ v-else-if="value.questionType == 'multipleChoice'" > <el-checkbox - v-for="content in value.option" - :key="content.value" + v-for="(content, contentCindex) in value.option" + :key="contentCindex + 'contentCindex'" :label="content.value" :name="content.text" :class=" @@ -199,17 +276,16 @@ </el-checkbox> </el-checkbox-group> <!-- 绠�绛� 缈昏瘧 --> - <!-- <TEditorVue - v-else-if="value.questionType == 'shortAnswer'" - :value="value.userAnswer" - :disabled="value.isComplete" - @getContent=" - (val) => { - value.userAnswer = val.trim(); - inputChange(); - } - " - ></TEditorVue> --> + <TEditorVue + v-else-if="value.questionType == 'formula'" + :value="value.userAnswer" + :disabled="value.isComplete" + @getContent=" + (val) => { + value.userAnswer = val; + } + " + /> <el-input :disabled="value.isComplete" style="width: 94%; margin: 0 auto" @@ -225,7 +301,8 @@ type != 'mock' && (value.questionType == 'shortAnswer' || value.questionType == 'multipleChoice' || - value.questionType == 'completion') + value.questionType == 'completion' || + value.questionType == 'mathField') " > <el-button @click="checkPares(value)" style="margin-top: 10px" @@ -236,9 +313,11 @@ <div class="analysis" v-if="value.isComplete"> <el-collapse v-model="value.isUnfold" - @change="handleChange(value)" accordion - v-if="value.questionType != 'shortAnswer'" + v-if=" + value.questionType != 'shortAnswer' && + value.questionType != 'formula' + " > <el-collapse-item :name="value.id" class="objective"> <template #title> @@ -278,6 +357,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 @@ -297,8 +416,8 @@ ></div> <div v-else>鏆傛棤鏁版嵁</div> </el-collapse-item> - <!-- 涓昏棰� --> </el-collapse> + <!-- 涓昏棰� --> <el-collapse v-else v-model="value.isUnfold" accordion> <el-collapse-item :name="value.id" class="objective"> <template #title> @@ -313,20 +432,19 @@ </template> <div class="referBox"> <span>鍙傝�冪瓟妗堬細</span> - <p - v-html="arrayToString(value.answer)" + <span + v-html="value.answer" class="ti-2" :class="[ 'subjectiveBox', value.isUnfold ? 'showText' : 'hideText', ]" - ></p> + ></span> </div> <!-- 瑙f瀽 --> - <div class="referBox"> + <div class="referBox" v-if="value.analysisCon"> <span>瑙f瀽锛�</span> <p - v-if="value.analysisCon" v-html="value.analysisCon" :class=" [ @@ -336,7 +454,6 @@ ].join(' ') " ></p> - <p v-else class="ti-2">鏆傛棤鏁版嵁</p> </div> </el-collapse-item> </el-collapse> @@ -402,17 +519,29 @@ </ul> </div> <div class="bottom-btn" v-if="!loading"> - <el-button class="btn-box" @click="saveAnswer">淇濆瓨</el-button> + <el-button class="examinations-btn-box" @click="saveAnswer" + >淇濆瓨</el-button + > <el-button - @click="handleQuestion" - class="btn-box" + @click=" + (e) => { + handleQuestion(); + saveAnswer(e); + } + " + class="examinations-btn-box" :style="{ borderColor: primaryColor }" >鎻愪氦</el-button > - <el-button @click="redo" class="btn-box">閲嶅仛</el-button> + <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button> <el-button - @click="openAnswers" - class="btn-box" + @click=" + (e) => { + openAnswers(); + saveAnswer(e); + } + " + class="examinations-btn-box" :style="{ borderColor: primaryColor }" >鏌ョ湅绛旀</el-button > @@ -421,12 +550,15 @@ </template> <script> +import { MathfieldElement } from "mathlive"; +import { Message } from "element-ui"; +import TEditorVue from "../teditor/index.vue"; export default { name: "examination-option", + components: { TEditorVue }, props: { cardList: { type: Array, - default: [], }, primaryColor: { type: String, @@ -438,20 +570,86 @@ page: { type: Number, }, + inputBc: { + type: String, + default: "#fff", + }, + hideCollect: { + type: Boolean, + default: false, + }, + sourceType: { + type: String, + default: "bits", + }, }, data() { return { type: "option", loading: false, - cardData:[] + cardData: [], + loading: true, + heart: require("@/assets/images/heart.png"), + isHeart: require("@/assets/images/heart-check.png"), + collectList: [], + allCollect: [ + { + type: "bits", + collectList: [], + }, + { + type: "json", + collectList: [], + }, + ], + errorList: [], + allError: [ + { + type: "bits", + errorList: [], + }, + { + type: "json", + errorList: [], + }, + ], }; }, + watch: { + cardList: { + handler(newVal) { + this.cardData = this.cardList; + if (newVal && newVal.length) { + this.loading = false; + } + }, + immediate: true, + deep: true, + }, + }, mounted() { - this.cardData = this.cardList - console.log('this.cardList',this.cardList); - console.log('this.cardData',this.cardData); + this.getCollectIdList(); + this.getErrorList(); }, methods: { + // 鑾峰彇涓嶅彈淇濇姢鐨勫浘鐗� + getPublicImage(md5, width, height) { + if (!md5) return; + if (md5.includes("http")) { + if (width) { + return md5 + `?width=${width}`; + } else { + return md5; + } + } + let src = null; + if (md5) { + src = process.env.VUE_APP_API_URL + `/file/GetPreViewImage?md5=${md5}`; + } + if (width) src += `&width=${width}`; + if (height) src += `&height=${height}`; + return src; + }, // 鏁扮粍杞负瀛楃涓叉柟娉� arrayToString(data) { // 妫�鏌ユ槸鍚︿负鏁扮粍 @@ -488,7 +686,18 @@ const item = this.cardData[index]; for (let cindex = 0; cindex < item.infoList.length; cindex++) { const citem = item.infoList[cindex]; - citem.userAnswer = ""; + if (typeof citem.userAnswer == "string") { + citem.userAnswer = ""; + } else { + if (citem.questionType == "multipleChoice") { + citem.userAnswer = []; + } else { + // 濉┖棰� + for (let dindex = 0; dindex < citem.userAnswer.length; dindex++) { + citem.userAnswer[dindex] = ""; + } + } + } citem.isComplete = false; } } @@ -509,6 +718,7 @@ }, // 鎵规敼棰樼洰 (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�) handleQuestion() { + let errorId = []; const list = this.cardData; for (let index = 0; index < list.length; index++) { const item = list[index]; @@ -531,14 +741,17 @@ } } else if ( citem.questionType == "singleChoice" || - citem.questionType == "judge" + citem.questionType == "judge" || + citem.questionType == "dropdown" ) { - if (citem.id == "63825") console.log("i", item); citem.isRight = citem.answer == citem.userAnswer; } else if (citem.questionType == "shortAnswer") { // 绠�绛� 缈昏瘧 citem.isRight = null; - } else if (citem.questionType == "completion") { + } else if ( + citem.questionType == "completion" || + citem.questionType == "mathField" + ) { // 濉┖ if (typeof citem.answer == "string") { citem.isRight = citem.answer == citem.userAnswer[0]; @@ -552,10 +765,38 @@ } } } + if (citem.isRight == false) { + errorId.push(citem.id); + } } } this.cardData = list; - console.log(this.cardData); + let oldErrodId = this.allError.find( + (item) => item.type == this.sourceType + ).errorList; + for (let index = 0; index < errorId.length; index++) { + const item = errorId[index]; + if (oldErrodId.indexOf(item) == -1) { + oldErrodId.push(item); + } + } + for (let cindex = 0; cindex < this.allError.length; cindex++) { + const citem = this.allError[cindex]; + if (citem.type == this.sourceType) citem.errorList = oldErrodId; + } + this.MG.identity + .setUserKey({ + setKeyRequests: [ + { + domain: "errorData", + key: this.config.activeBook.bookId, + value: JSON.stringify(this.allError), + }, + ], + }) + .then((res) => { + console.log("閿欓宸蹭繚瀛�", this.allError); + }); }, getParentWithClass(element, className) { while (element.parentElement) { @@ -566,14 +807,12 @@ } }, // 淇濆瓨鎸夐挳 - saveAnswer() { - const element = document.getElementsByClassName("examination")[0]; - if (element) { + saveAnswer(e) { + if (e.srcElement) { const pageNum = this.getParentWithClass( - element, + e.srcElement, "page-box" ).getAttribute("page"); - console.log(this.config.activeBook.name, pageNum); const oldAnswerData = localStorage.getItem( this.config.activeBook.name + "oldAnswerData" ); @@ -589,13 +828,20 @@ }); } } - 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) + ); + Message.success("淇濆瓨鎴愬姛"); } // if(oldData[this.chapter]) { @@ -605,64 +851,196 @@ // oldData[this.chapter][this.page] = asnwerList // } // console.log(oldData); - + }, + handleCollect(infoNum, num) { + this.cardData[infoNum].infoList[num].isCollect = + !this.cardData[infoNum].infoList[num].isCollect; + }, + // 棰樼洰鏀惰棌鎸夐挳,鏀惰棌鍜屽彇娑堝悓涓�鎺ュ彛锛屽彇娑堟暟缁勫噺鍘昏椤筰d + setCollect(num, number) { + let item = null; + if (number) { + item = this.cardData[num].infoList[number]; + } else { + item = this.cardData[num]; + } + item.isCollect = !item.isCollect; + console.log(111, item); + if (this.cardData.length == 0) { + this.collectList.push(item.id); + } else { + const isShow = this.collectList.findIndex((citem) => citem == item.id); + if (isShow == -1) { + this.collectList.push(item.id); + } else { + this.collectList = this.collectList.filter( + (citem) => citem != item.id + ); + } + } + const list = this.collectList; + for (let index = 0; index < this.allCollect.length; index++) { + const item = this.allCollect[index]; + if (item.type == this.sourceType) item.collectList = this.collectList; + } + console.log("鐐瑰嚮鏀惰棌鎸夐挳", this.allCollect); + this.MG.identity + .setUserKey({ + setKeyRequests: [ + { + domain: "collectData", + key: this.config.activeBook.bookId, + value: JSON.stringify(this.allCollect), + }, + ], + }) + .then((res) => { + console.log("鏀惰棌/鍙栨秷鎴愬姛"); + }); + }, + // 鑾峰彇鏀惰棌id鍒楄〃 + getCollectIdList() { + const token = localStorage.getItem("token"); + if (!token) return false; + this.MG.identity + .getUserKey({ + domain: "collectData", + keys: [this.config.activeBook.bookId], + }) + .then((res) => { + try { + const collect = JSON.parse(res[0].value); + console.log("鍏ㄩ儴鏀惰棌id", collect); + if (collect.length) { + this.collectList = collect.find( + (citem) => citem.type == this.sourceType + ).collectList; + this.allCollect[0].collectList = collect.find( + (citem) => citem.type == "bits" + ).collectList; + this.allCollect[1].collectList = collect.find( + (citem) => citem.type == "json" + ).collectList; + } + } catch (error) { + console.log("鏆傛棤鏁版嵁"); + } + }) + .catch((res) => { + console.log("绛旈鍣ㄨ姹傞鐩敹钘廼d鎶ラ敊"); + }); + }, + // 鑾峰彇閿欓id鍒楄〃 + getErrorList() { + const token = localStorage.getItem("token"); + if (!token) return false; + this.MG.identity + .getUserKey({ + domain: "errorData", + keys: [this.config.activeBook.bookId], + }) + .then((res) => { + try { + const error = JSON.parse(res[0].value); + if (error.length) { + this.errorList = error.find( + (citem) => citem.type == this.sourceType + ).errorList; + this.allError[0].errorList = error.find( + (citem) => citem.type == "bits" + ).errorList; + this.allError[1].errorList = error.find( + (citem) => citem.type == "json" + ).errorList; + } + } catch (error) {} + }) + .catch(() => {}); + }, + onChangeInput(e, index, cindex, num) { + this.cardData[index].infoList[cindex].userAnswer[num] = e.target.value; }, }, }; </script> +<style lang="less"> +.titleText img { + max-width: 80%; + min-width: 220px; +} +</style> + <style lang="less" scoped> -.catalogName { - // color: #00aeef; - // color: #ff6c00; +.catalogName { + display: flex; text-indent: 1em !important; font-size: 16px; + .catalogName-box { + display: inline-block; + width: 94%; + } +} +.catalogImage { + width: 50%; } .examination { - margin-top: 20px; min-height: 100px; ul { list-style: none; } + + p { + margin: 0; + } + math { + } } -.btn-box { + +.examinations-btn-box { height: 30px; width: 78px; padding: 4px 10px; } + .border-box { padding-top: 20px; // border: 2px solid #e9e9e9; } + .ti-2 { text-indent: 2em !important; } + .questionContent { - // display: flex; - // justify-content: center; text-indent: 0em !important; margin-left: 20px; + /deep/ .el-textarea__inner:focus { border-color: #15c0f2; } } + .input { /deep/ .el-input__inner { height: 26px; } } + p { margin-top: 0em; text-indent: 0em !important; line-height: 1.5em; font-size: 16px; } + .colorBox { margin: 0 10px 0 23px; width: 4px; height: 19px; background-color: #ff6c00; } + .textOverFlow { overflow: hidden; text-overflow: ellipsis; @@ -674,51 +1052,63 @@ height: 775px; padding-bottom: 20px; } + .question::-webkit-scrollbar { width: 3px; } + /*婊氬姩鏉℃粦鍧�*/ .question::-webkit-scrollbar-thumb { border-radius: 20px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background-color: #333; } + /*婊氬姩鏉¤建閬�*/ .question::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0); border-radius: 20px; background: #d9d9d9; } + .paperMargin { margin-top: 30px; + ul li { padding: 20px 41px 0px 46px; } + li:last-child { padding-bottom: 20px; } } + .paperQuestion { padding-left: 12px; display: flex; align-items: center; font-size: 16px; + .questionText { font-size: 16px; color: #000; } + span { color: #c2c2c2; } } + /** 棰樺共 */ .questionTitle { display: flex; justify-content: center; + .titleContent { width: 95%; display: flex; align-items: flex-start; + .questionNum { text-indent: 0 !important; margin-right: 5px; @@ -729,59 +1119,76 @@ color: #333; font-weight: bold; } + .text-fl { + display: flex; + align-items: center; + flex-wrap: wrap; + } .titleText { + display: flex; + flex-wrap: wrap; + align-items: center; text-align: left; - // padding: 0 10px 10px 0px; min-width: 90%; font-size: 16px; line-height: 32px; color: #000; + .input-txt { + display: flex; + flex-wrap: wrap; + align-items: center; + } span { display: inline-block; font-size: 16px; - // line-height: 26px; color: #000; font-weight: 400; margin-top: 6px; } - .el-input { + select { + outline: none; + min-width: 100px; + } + input { width: 140px; height: 24px; - border-top: 0; + border: 0; + outline: none; + border-bottom: 1px solid #000; } + /deep/ .el-textarea.is-disabled .el-textarea__inner { background-color: #fff; } - /deep/.el-input__wrapper { - border-top: 0 !important; - } - /deep/ .el-input__inner { - border-top: 0 !important; - border-left: 0 !important ; - border-right: 0 !important ; - border-bottom: 1px solid #15c0f2 !important; - border-radius: 0 !important; - } + /deep/ .el-input.is-disabled .el-input__inner { background-color: #fff; } + /dee/ p { display: flex; align-items: center; } } + ::v-deep { .el-input__wrapper { border-top: 0 !important; } } } + .collect { cursor: pointer; width: 21px; height: 21px; } + .mathField { + min-width: 200px; + max-width: 518px; + } } + /** 閫夐」 */ .option { .el-radio, @@ -795,13 +1202,16 @@ margin-bottom: 6px; white-space: pre-wrap !important; color: #000; + /deep/ .el-checkbox__label { line-height: 1.5; } } + /deep/ .el-radio__inner { border-color: #a5a3a3; } + .optionContent { margin: 0; display: flex; @@ -810,14 +1220,17 @@ color: #000; } } + .analysis { margin: 20px 0; width: 94%; // margin-left: 12px; } + .el-collapse { width: 100%; } + /** 瑙f瀽 */ .objective { /deep/ .el-collapse-item__header { @@ -826,34 +1239,42 @@ padding: 0 20px; font-size: 16px; background-color: #f4f4f4; + .headerBox { width: 100%; height: 100%; display: flex; justify-content: space-between; + align-items: center; flex-wrap: wrap; + .headerConent { height: 100%; display: flex; align-items: center; flex-wrap: wrap; + p { margin-bottom: 0; } + .el-image { width: 9px; height: 9px; } + .correct { color: #1fbc1f; width: 180px; text-align: left; display: flex; + span:nth-child(1) { display: inline-block; width: 82px; } } + .correctBox { width: 100px; height: min-content; @@ -861,23 +1282,28 @@ text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 1; /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */ + -webkit-line-clamp: 1; + /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */ overflow: hidden; } + .error { display: flex; text-align: left; - width: 180px; + width: 170px; color: #ee1818; + span { height: min-content; } + .errorBox { width: 100px; // height: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + ::v-deep { img { max-height: 48px; @@ -896,9 +1322,11 @@ } } } + /deep/ .el-collapse-item__header:focus:not(:hover) { color: #333; } + /deep/ .el-collapse-item__content { width: 93%; padding: 0 20px; @@ -906,16 +1334,20 @@ font-size: 16px; color: #333; } + /deep/ .el-collapse-item__arrow { display: none; } + .subjectiveItem { background-color: #f4f4f4; padding: 10px 20px; + p { text-indent: 0em; } } + .subjective { /deep/ .el-collapse-item__header { height: 80px; @@ -927,16 +1359,19 @@ flex-direction: column; justify-content: flex-start; } + .subjectiveTitle { width: 80px; height: 20px; line-height: 20px; } + .subjectiveRefer { display: flex; align-items: flex-start; text-align: left; } + .subjectiveAnswer { width: 540px; height: 20px; @@ -945,31 +1380,39 @@ text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 1; /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */ + -webkit-line-clamp: 1; + /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */ overflow: hidden; line-height: 20px; } + .analysisDetailBox { overflow: hidden; max-height: 100px; transition: 1s; + &.open { max-height: 500px; } + &.close { max-height: 20px; } + .referBox { display: flex; margin-bottom: 10px; + span { width: 80px; color: #999; } + p { flex: 1; overflow: hidden; } + span, p { text-indent: 0em; @@ -979,28 +1422,34 @@ } } } + // 閫夐」 .optionImg { height: min-content; margin-bottom: 6px; + /deep/ img { margin-left: 10px; object-fit: contain; vertical-align: middle; } } + .optionTxt { height: 32px; } + // 棰樺共浠呭浘鐗� .stemImg { margin: 0 10px 10px 10px; } + // 鏂囧瓧鍔犲浘鐗� .stemTxtAndImage { display: flex; align-items: flex-start; } + .titleTextArea { ::v-deep { img, @@ -1011,19 +1460,23 @@ } } } + .questionAnalysis { width: 100%; height: 48px; display: flex; justify-content: space-between; + .analysisAnswer { width: 74%; display: flex; } + .referAnswer { display: inline-block; width: 60px; } + .answerContent { height: 48px; width: 80%; @@ -1032,64 +1485,80 @@ text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 1; /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */ + -webkit-line-clamp: 1; + /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */ overflow: hidden; } + .el-image { width: 9px; height: 9px; } } + .analysisColor { cursor: pointer; color: #949494; margin-right: 4px; } + .difficulty { display: flex; align-items: center; } + .cartoon { animation: spread 1s linear forwards; } + .downCartoon { animation: downSpred 1s linear forwards; } + .showText { animation: showText 1s linear forwards; } + .hideText { animation: hideText 2s linear forwards; } + @keyframes spread { from { max-height: 20px; } + to { max-height: 500px; + p { flex: 1; overflow: hidden; } } } + @keyframes downSpred { from { max-height: 500px; } + to { max-height: 20px; } } + @keyframes showText { 100% { height: auto; } } + @keyframes hideText { 0% { height: auto; } + 100% { height: 20px; overflow: hidden; @@ -1097,15 +1566,18 @@ white-space: nowrap; } } + .yincang { animation: yincang 1s linear forwards; } + @keyframes yincang { from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + to { overflow: auto; text-overflow: initial; @@ -1118,8 +1590,26 @@ display: flex; justify-content: center; flex-wrap: wrap; + .el-button { margin-top: 10px; } } + +.radio-img { + width: 200px; + object-fit: contain; +} + +.collect-png { + cursor: pointer; + width: 18px; + object-fit: contain; +} + +/deep/ .examination-math { + display: flex; + align-items: center; + flex-wrap: wrap; +} </style> -- Gitblit v1.9.1