From 38cdff1163573261e36f9d7f8920e1578e1172c8 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期五, 22 十一月 2024 10:55:33 +0800 Subject: [PATCH] 数学书收藏功能优化 --- src/components/examinations/index.vue | 589 +++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 434 insertions(+), 155 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index ded0303..35925bb 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.vue @@ -1,200 +1,405 @@ <template> <div class="examination" v-loading="loading"> - <div v-for="(item, nindex) in cardData" :key="nindex + 'item'" class="border-box" v-show="item.infoList.length"> + <div + v-for="(item, nindex) in cardData" + :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="index + 'value'" :id="'listItem-' + value.id"> + <li + v-for="(value, index) in item.infoList" + :key="index + 'value'" + :id="'listItem-' + value.id" + > <!-- 鏍囬 --> <div class="questionTitle"> <div class="titleContent"> - <span class="questionNum" :style="{ - marginTop: value.questionType == 'completion' ? '12px' : '0', - }">{{ index + 1 }}. + <span + class="questionNum" + :style="{ + marginTop: value.questionType == 'completion' ? '12px' : '0', + }" + >{{ index + 1 }}. </span> <!-- 鍚姏杩涘害鏉� --> <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> --> - <!-- 棰樺共 --> <!-- 浠呮枃瀛� --> - <p class="titleText" v-if=" - value.stemStyle == 'Txt' && value.questionType != 'completion' - " :id="value.id"> - <span v-html="value.stem.stemTxt"></span> - <!-- {{ value.stem.stemTxt }} --> - </p> + <p + class="titleText text-fl" + v-if=" + value.stemStyle == 'Txt' && + value.questionType != 'completion' && + value.questionType != 'dropdown' + " + :id="value.id" + v-html="value.stem.stemTxt" + ></p> <!-- 浠呭浘鐗� --> - <el-image class="stemImg" v-else-if="value.stemStyle == 'Image'" + <el-image + class="stemImg" + v-else-if="value.stemStyle == 'Image'" :src="getPublicImage(value.stem.stemImage, 150)" - :preview-src-list="[getPublicImage(value.stem.stemImage)]"></el-image> + :preview-src-list="[getPublicImage(value.stem.stemImage)]" + ></el-image> <!-- 鏂囧瓧鍔犲浘鐗� --> - <p class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'"> - <span v-html="value.stem.stemTxt"> <!-- {{ value.stem.stemTxt }} --> </span> - <el-image :src="getPublicImage(value.stem.stemImage, 150)" - :preview-src-list="[getPublicImage(value.stem.stemImage)]" style="margin-left: 10px"></el-image> + <p + class="stemTxtAndImage titleText" + v-else-if="value.stemStyle == 'TxtAndImage'" + > + <span v-html="value.stem.stemTxt"> </span> + <el-image + :src="getPublicImage(value.stem.stemImage, 150)" + :preview-src-list="[getPublicImage(value.stem.stemImage)]" + style="margin-left: 10px" + ></el-image> </p> <!-- 濉┖棰橀骞� --> <p class="titleText" v-if="value.questionType == 'completion'"> - <span v-for="(itemText, indexText) in value.stem" :key="indexText + 'questionType'"> - <span v-if="typeof itemText == 'string'" v-html="itemText"></span> - <!-- --> - <input v-else type="text" class="input" v-model.trim="value.userAnswer[itemText.num]" - :disabled="value.isComplete" :style="{ backgroundColor: inputBc }" /> - <!-- --> + <span + v-for="(itemText, indexText) in value.stem" + :key="indexText + 'questionType'" + > + <span + v-if="typeof itemText == 'string'" + v-html="itemText" + class="input-txt" + ></span> + <!-- <input + v-else + type="text" + class="input" + v-model.trim="value.userAnswer[itemText.num]" + :disabled="value.isComplete" + :style="{ backgroundColor: inputBc }" + /> --> + <math-field + v-else + class="mathField" + :menuItems="[]" + @input="onChangeInput($event,nindex,index,itemText.num)" + > + {{ value.userAnswer[itemText.num] }} + </math-field> </span> </p> <!-- 瀵屾枃鏈� --> - <p class="titleText titleTextArea" v-else-if="value.stemStyle == 'RichText'" v-html="value.stem.stemTxt" - v-cloak></p> + <p + class="titleText titleTextArea" + v-else-if="value.stemStyle == 'RichText'" + 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 && value.questionType == 'shortAnswer')" /> + <img + :src="value.isCollect ? isHeart : heart" + alt="" + class="collect-png" + @click="setCollect(nindex, index)" + v-if="!hideCollect && item.type != 'material'" + /> <!-- 鏀惰棌 --> </div> <div class="questionContent"> <!-- 鍗曢�� --> - <el-radio-group :disabled="value.isComplete" class="option" v-if=" - value.questionType == 'singleChoice' || - value.questionType == 'judge' - " v-model="value.userAnswer"> - <el-radio v-for="(content,contentIndex) in value.option" :key="contentIndex + 'contentIndex'" :label="content.value" :class="value.optionStyle == 'Image' || - value.optionStyle == 'TxtAndImage' || - value.optionStyle == 'RichText' - ? 'optionImg' - : 'optionTxt' - "> + <el-radio-group + :disabled="value.isComplete" + class="option" + v-if=" + value.questionType == 'singleChoice' || + value.questionType == 'judge' + " + v-model="value.userAnswer" + > + <el-radio + v-for="(content, contentIndex) in value.option" + :key="contentIndex + 'contentIndex'" + :label="content.value" + :class=" + value.optionStyle == 'Image' || + value.optionStyle == 'TxtAndImage' || + value.optionStyle == 'RichText' + ? 'optionImg' + : 'optionTxt' + " + > <p class="optionContent" v-if="value.optionStyle == 'Txt'"> {{ content.value }}銆亄{ content.txt }} </p> - <p class="optionContent" v-else-if="value.optionStyle == 'Image'"> - {{ content.value }}銆�<el-image :src="getPublicImage(content.img, 115)" v-show="content.img" - :preview-src-list="[getPublicImage(content.img)]" v-if="sourceType == 'bits'"></el-image> + <p + class="optionContent" + v-else-if="value.optionStyle == 'Image'" + > + {{ content.value }}銆�<el-image + :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" v-else-if="value.optionStyle == 'TxtAndImage'"> - <span> {{ content.value }}銆�</span><span>{{ content.txt }}</span> - <el-image :src="getPublicImage(content.img, 115)" v-show="content.img" - :preview-src-list="[getPublicImage(content.img)]"></el-image> + <p + class="optionContent" + v-else-if="value.optionStyle == 'TxtAndImage'" + > + <span> {{ content.value }}銆�</span + ><span>{{ content.txt }}</span> + <el-image + :src="getPublicImage(content.img, 115)" + v-show="content.img" + :preview-src-list="[getPublicImage(content.img)]" + ></el-image> </p> - <p class="optionContent titleTextArea" v-else-if="value.optionStyle == 'RichText'" - v-html="`<span>${content.value}</span>` + '銆�' + content.txt" id="mathjax"></p> + <p + class="optionContent titleTextArea" + v-else-if="value.optionStyle == 'RichText'" + v-html="`<span>${content.value}</span>` + '銆�' + content.txt" + id="mathjax" + ></p> </el-radio> </el-radio-group> <!-- 澶氶�� --> - <el-checkbox-group :disabled="value.isComplete" v-model="value.userAnswer" class="option" - v-else-if="value.questionType == 'multipleChoice'"> - <el-checkbox v-for="(content,contentCindex) in value.option" :key="contentCindex + 'contentCindex'" :label="content.value" - :name="content.text" :class="value.optionStyle == 'Image' || + <el-checkbox-group + :disabled="value.isComplete" + v-model="value.userAnswer" + class="option" + v-else-if="value.questionType == 'multipleChoice'" + > + <el-checkbox + v-for="(content, contentCindex) in value.option" + :key="contentCindex + 'contentCindex'" + :label="content.value" + :name="content.text" + :class=" + value.optionStyle == 'Image' || value.optionStyle == 'TxtAndImage' || value.optionStyle == 'RichText' - ? 'optionImg' - : 'optionTxt' - "> + ? 'optionImg' + : 'optionTxt' + " + > <p class="optionContent" v-if="value.optionStyle == 'Txt'"> {{ content.value }}銆亄{ content.txt }} </p> - <p class="optionContent" v-else-if="value.optionStyle == 'Image'"> - {{ content.value }}銆�<el-image :src="getPublicImage(content.img, 115)" - :preview-src-list="[getPublicImage(content.img)]" v-show="content.img"></el-image> + <p + class="optionContent" + v-else-if="value.optionStyle == 'Image'" + > + {{ content.value }}銆�<el-image + :src="getPublicImage(content.img, 115)" + :preview-src-list="[getPublicImage(content.img)]" + v-show="content.img" + ></el-image> </p> - <p class="optionContent" v-else-if="value.optionStyle == 'TxtAndImage'"> - <span> {{ content.value }}銆�</span><span>{{ content.txt }}</span> - <el-image :src="getPublicImage(content.img, 115)" :preview-src-list="[getPublicImage(content.img)]" - v-show="content.img"></el-image> + <p + class="optionContent" + v-else-if="value.optionStyle == 'TxtAndImage'" + > + <span> {{ content.value }}銆�</span + ><span>{{ content.txt }}</span> + <el-image + :src="getPublicImage(content.img, 115)" + :preview-src-list="[getPublicImage(content.img)]" + v-show="content.img" + ></el-image> </p> - <p class="optionContent titleTextArea" v-else-if="value.optionStyle == 'RichText'" - v-html="content.value + '銆�' + content.txt"></p> + <p + class="optionContent titleTextArea" + v-else-if="value.optionStyle == 'RichText'" + v-html="content.value + '銆�' + content.txt" + ></p> </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> --> - <el-input :disabled="value.isComplete" style="width: 94%; margin: 0 auto" - v-else-if="value.questionType == 'shortAnswer'" type="textarea" :rows="6" placeholder="璇疯緭鍏ュ唴瀹�" - v-model="value.userAnswer" /> - <div v-if=" - type != 'option' && - type != 'mock' && - (value.questionType == 'shortAnswer' || - value.questionType == 'multipleChoice' || - value.questionType == 'completion') - "> - <el-button @click="checkPares(value)" style="margin-top: 10px">鏌ョ湅瑙f瀽</el-button> + <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" + v-else-if="value.questionType == 'shortAnswer'" + type="textarea" + :rows="6" + placeholder="璇疯緭鍏ュ唴瀹�" + v-model="value.userAnswer" + /> + <div + v-if=" + type != 'option' && + type != 'mock' && + (value.questionType == 'shortAnswer' || + value.questionType == 'multipleChoice' || + value.questionType == 'completion') + " + > + <el-button @click="checkPares(value)" style="margin-top: 10px" + >鏌ョ湅瑙f瀽</el-button + > </div> <!-- 鎻愪氦鍚庤В鏋� --> <div class="analysis" v-if="value.isComplete"> - <el-collapse v-model="value.isUnfold" @change="handleChange(value)" accordion - v-if="value.questionType != 'shortAnswer'"> + <el-collapse + v-model="value.isUnfold" + accordion + v-if=" + value.questionType != 'shortAnswer' && + value.questionType != 'formula' + " + > <el-collapse-item :name="value.id" class="objective"> <template #title> <div class="headerBox"> <div class="headerConent"> <p class="correct" :title="arrayToString(value.answer)"> <span>姝g‘绛旀锛�</span> - <span v-html="arrayToString(value.answer)" class="correctBox"></span> + <span + v-html="arrayToString(value.answer)" + class="correctBox" + ></span> </p> - <p :class="value.isRight - ? 'correct textOverFlow' - : 'error textOverFlow' - " :title="arrayToString(value.userAnswer)" style="margin-left: 20px"> + <p + :class=" + value.isRight + ? 'correct textOverFlow' + : 'error textOverFlow' + " + :title="arrayToString(value.userAnswer)" + style="margin-left: 20px" + > <span>鎮ㄧ殑绛旀锛�</span> - <span class="errorBox" v-if="isHaveAnswer(value.userAnswer)">{{ - arrayToString(value.userAnswer) }}</span> + <span + class="errorBox" + v-if="isHaveAnswer(value.userAnswer)" + >{{ arrayToString(value.userAnswer) }}</span + > </p> </div> <p class="difficulty" v-if="value.difficulty"> <span style="color: #333">闅惧害绛夌骇锛�</span> - <el-rate v-model="value.difficulty" :max="3" size="large" disabled - disabled-void-color="#949494" /> + <el-rate + v-model="value.difficulty" + :max="3" + size="large" + disabled + 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"> + <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> + 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"> + <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> + fill="#d81e06" + p-id="25746" + ></path> </svg> </span> <div class="headerConent sitgBox"> <p v-if="!value.isUnfold"> - <span class="analysisColor">灞曞紑瑙f瀽</span><el-image /> + <span class="analysisColor">灞曞紑瑙f瀽</span + ><el-image /> </p> <p v-else> - <span class="analysisColor">鏀惰捣瑙f瀽</span><el-image /> + <span class="analysisColor">鏀惰捣瑙f瀽</span + ><el-image /> </p> </div> </div> </template> <!-- 瑙f瀽 --> - <div v-if="value.analysisCon" v-html="value.analysisCon"></div> + <div + v-if="value.analysisCon" + v-html="value.analysisCon" + ></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> @@ -209,21 +414,28 @@ </template> <div class="referBox"> <span>鍙傝�冪瓟妗堬細</span> - <span v-html="value.answer" class="ti-2" :class="[ - 'subjectiveBox', - value.isUnfold ? 'showText' : 'hideText', - ]"></span> + <span + v-html="value.answer" + class="ti-2" + :class="[ + 'subjectiveBox', + value.isUnfold ? 'showText' : 'hideText', + ]" + ></span> </div> <!-- 瑙f瀽 --> <div class="referBox" v-if="value.analysisCon"> <span>瑙f瀽锛�</span> - <p v-if="value.analysisCon" v-html="value.analysisCon" :class="[ - 'subjectiveBox', - 'ti-2', - value.isUnfold ? 'yincang' : '', - ].join(' ') - "></p> - <p v-else class="ti-2">鏆傛棤鏁版嵁</p> + <p + v-html="value.analysisCon" + :class=" + [ + 'subjectiveBox', + 'ti-2', + value.isUnfold ? 'yincang' : '', + ].join(' ') + " + ></p> </div> </el-collapse-item> </el-collapse> @@ -289,26 +501,43 @@ </ul> </div> <div class="bottom-btn" v-if="!loading"> - <el-button class="examinations-btn-box" @click="saveAnswer">淇濆瓨</el-button> - <el-button @click="(e) => { - handleQuestion(); - saveAnswer(e); - } - " class="examinations-btn-box" :style="{ borderColor: primaryColor }">鎻愪氦</el-button> + <el-button class="examinations-btn-box" @click="saveAnswer" + >淇濆瓨</el-button + > + <el-button + @click=" + (e) => { + handleQuestion(); + saveAnswer(e); + } + " + class="examinations-btn-box" + :style="{ borderColor: primaryColor }" + >鎻愪氦</el-button + > <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button> - <el-button @click="(e) => { - openAnswers(); - saveAnswer(e); - } - " class="examinations-btn-box" :style="{ borderColor: primaryColor }">鏌ョ湅绛旀</el-button> + <el-button + @click=" + (e) => { + openAnswers(); + saveAnswer(e); + } + " + class="examinations-btn-box" + :style="{ borderColor: primaryColor }" + >鏌ョ湅绛旀</el-button + > </div> </div> </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, @@ -371,7 +600,6 @@ watch: { cardList: { handler(newVal) { - // console.log('鏂板��',newVal); this.cardData = this.cardList; if (newVal && newVal.length) { this.loading = false; @@ -386,6 +614,24 @@ 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) { // 妫�鏌ユ槸鍚︿负鏁扮粍 @@ -466,9 +712,9 @@ } } 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") { // 绠�绛� 缈昏瘧 @@ -580,8 +826,15 @@ }, // 棰樼洰鏀惰棌鎸夐挳,鏀惰棌鍜屽彇娑堝悓涓�鎺ュ彛锛屽彇娑堟暟缁勫噺鍘昏椤筰d setCollect(num, number) { - const item = this.cardData[num].infoList[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 { @@ -599,7 +852,7 @@ const item = this.allCollect[index]; if (item.type == this.sourceType) item.collectList = this.collectList; } - // console.log(this.allCollect, this.collectList, list); + console.log('鐐瑰嚮鏀惰棌鎸夐挳',this.allCollect) this.MG.identity .setUserKey({ setKeyRequests: [ @@ -626,6 +879,7 @@ .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 @@ -668,30 +922,46 @@ (citem) => citem.type == "json" ).errorList; } - } catch (error) { } - console.log('閿欓鍒楄〃', this.allError) + } catch (error) {} }) - .catch(() => { }); + .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%; +} +</style> + <style lang="less" scoped> .catalogName { + display: flex; text-indent: 1em !important; font-size: 16px; + .catalogName-box { + display: inline-block; + width: 94%; + } } - +.catalogImage { + width: 50%; +} .examination { min-height: 100px; - ul { list-style: none; } p { margin: 0; + } + math { } } @@ -711,8 +981,6 @@ } .questionContent { - // display: flex; - // justify-content: center; text-indent: 0em !important; margin-left: 20px; @@ -819,24 +1087,33 @@ color: #333; font-weight: bold; } - + .text-fl { + display: flex; + align-items: center; + flex-wrap: wrap; + } .titleText { 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; } - + select { + outline: none; + min-width: 100px; + } input { width: 140px; height: 24px; @@ -871,11 +1148,14 @@ width: 21px; height: 21px; } + .mathField { + min-width: 200px; + max-width: 518px; + } } /** 閫夐」 */ .option { - .el-radio, .el-checkbox { // min-height: 32px; @@ -1137,7 +1417,6 @@ .titleTextArea { ::v-deep { - img, .el-image__inner { max-width: 150px !important; -- Gitblit v1.9.1