From 91cc846ad7f1d9c417260837b54fcd4bb0a0d94f Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期一, 17 六月 2024 14:51:27 +0800 Subject: [PATCH] 图书优化 --- src/components/examinations/index.vue | 665 +++++++++++++++++++++++++++++------------------------- 1 files changed, 359 insertions(+), 306 deletions(-) diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue index 9adde9f..f2bdffd 100644 --- a/src/components/examinations/index.vue +++ b/src/components/examinations/index.vue @@ -1,7 +1,12 @@ <template> <div class="examination" v-loading="loading"> - <div v-for="(item, nindex) in cardList" :key="nindex"> - <p class="catalogName"> + <div + v-for="(item, nindex) in cardData" + :key="nindex" + 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> @@ -18,7 +23,13 @@ <!-- 鏍囬 --> <div class="questionTitle"> <div class="titleContent"> - <span class="questionNum" :style="{marginTop:value.questionType == 'completion' ? '12px' : '0'}">{{ index + 1 }}銆�</span> + <span + class="questionNum" + :style="{ + marginTop: value.questionType == 'completion' ? '12px' : '0', + }" + >{{ index + 1 }}. + </span> <!-- 鍚姏杩涘害鏉� --> <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> --> <!-- 棰樺共 --> @@ -57,14 +68,18 @@ v-for="(itemText, indexText) in value.stem" :key="indexText" > - <span v-if="typeof itemText == 'string'">{{ itemText }}</span> + <span + v-if="typeof itemText == 'string'" + v-html="itemText" + ></span> <!-- --> - <el-input + <input v-else type="text" class="input" v-model.trim="value.userAnswer[itemText.num]" :disabled="value.isComplete" + :style="{backgroundColor:inputBc}" /> <!-- --> </span> @@ -77,6 +92,7 @@ v-cloak ></p> </div> + <img :src="value.isCollect ? isHeart : heart" alt="" class="collect-png" @click="handleCollect(nindex,index)" > <!-- 鏀惰棌 --> </div> <div class="questionContent"> @@ -113,7 +129,14 @@ :src="getPublicImage(content.img, 115)" v-show="content.img" :preview-src-list="[getPublicImage(content.img)]" + v-if="isReal" ></el-image> + <img + :src="content.img" + alt="" + v-if="!isReal" + class="radio-img" + /> </p> <p class="optionContent" @@ -200,7 +223,8 @@ " ></TEditorVue> --> <el-input - style="width: 90%; margin: 0 auto" + :disabled="value.isComplete" + style="width: 94%; margin: 0 auto" v-else-if="value.questionType == 'shortAnswer'" type="textarea" :rows="6" @@ -266,14 +290,54 @@ 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 - ><el-image :src="chakanIcon" /> + <span class="analysisColor">灞曞紑瑙f瀽</span + ><el-image /> </p> <p v-else> <span class="analysisColor">鏀惰捣瑙f瀽</span - ><el-image :src="packIcon" /> + ><el-image /> </p> </div> </div> @@ -287,12 +351,53 @@ </el-collapse-item> <!-- 涓昏棰� --> </el-collapse> - <div + <el-collapse v-else v-model="value.isUnfold" accordion> + <el-collapse-item :name="value.id" class="objective"> + <template #title> + <div class="headerBox"> + <p v-if="!value.isUnfold"> + <span class="analysisColor">灞曞紑绛旀涓庤В鏋�</span> + </p> + <p v-else> + <span class="analysisColor">鏀惰捣绛旀涓庤В鏋�</span> + </p> + </div> + </template> + <div class="referBox"> + <span>鍙傝�冪瓟妗堬細</span> + <p + v-html="arrayToString(value.answer)" + class="ti-2" + :class="[ + 'subjectiveBox', + value.isUnfold ? 'showText' : 'hideText', + ]" + ></p> + </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> + </div> + </el-collapse-item> + </el-collapse> + <!-- <div v-if="value.questionType == 'shortAnswer'" class="subjective subjectiveItem" > <div class="questionAnalysis"> - <p class="difficulty"> + <p class="difficulty" v-if="value.difficulty"> <span style="color: #333">闅惧害绛夌骇锛�</span> <el-rate v-model="value.difficulty" @@ -306,12 +411,10 @@ <span class="analysisColor" >{{ value.isUnfold ? "鏀惰捣绛旀鍜岃В鏋�" : "鏌ョ湅绛旀涓庤В鏋�" - }} </span - ><el-image :src="!value.isUnfold ? chakanIcon : packIcon" /> + }} + </span> </p> </div> - <!-- :class="['analysisDetailBox', value.isUnfold ? 'open' : 'close'].join(' ') --> - <!-- :class="['analysisDetailBox', value.isUnfold ? 'cartoon' : 'downCartoon'].join(' ') --> <div :class=" [ @@ -322,7 +425,6 @@ > <div class="referBox"> <span>鍙傝�冪瓟妗堬細</span> - <!-- <p v-html="arrayToString(value.answer)" class="subjectiveBox"></p> --> <p v-html="arrayToString(value.answer)" :class="[ @@ -345,36 +447,86 @@ <p v-else>鏆傛棤鏁版嵁</p> </div> </div> - </div> + </div> --> </div> </div> </li> </ul> </div> - <div class="bottom-btn" v-if="!loading"> - <el-button>淇濆瓨</el-button> - <el-button @click="openAnswers">鎻愪氦</el-button> - <el-button @click="redo">閲嶅仛</el-button> - <el-button @click="openAnswers">鏌ョ湅绛旀</el-button> + <el-button class="examinations-btn-box" @click="saveAnswer" + >淇濆瓨</el-button + > + <el-button + @click="handleQuestion" + class="examinations-btn-box" + :style="{ borderColor: primaryColor }" + >鎻愪氦</el-button + > + <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button> + <el-button + @click="openAnswers" + class="examinations-btn-box" + :style="{ borderColor: primaryColor }" + >鏌ョ湅绛旀</el-button + > </div> </div> </template> <script> -import { getPublicImage } from "@/assets/js/middleGround/tool"; +import { Message } from 'element-ui'; export default { name: "examination-option", - props: ["productLinkPath"], + props: { + cardList: { + type: Array, + }, + primaryColor: { + type: String, + default: "#00aeef", + }, + chapter: { + type: Number, + }, + page: { + type: Number, + }, + isReal: { + type: Boolean, + default: true, + }, + inputBc: { + type: String, + default: "#fff", + }, + }, data() { return { type: "option", - cardList: [], loading: false, + cardData: [], + loading: true, + heart:require("@/assets/images/heart.png"), + isHeart:require("@/assets/images/heart-check.png"), }; }, + watch: { + cardList: { + handler(newVal) { + this.cardData = this.cardList; + if (newVal && newVal.length) { + this.loading = false; + } + }, + immediate: true, + deep: true, + }, + }, mounted() { - this.getIdPathList() + // this.cardData = this.cardList + // console.log('this.cardList',this.cardList); + // console.log('this.cardData',this.cardData); }, methods: { // 鏁扮粍杞负瀛楃涓叉柟娉� @@ -409,291 +561,179 @@ } }, redo() { - for (let index = 0; index < this.cardList.length; index++) { - const item = this.cardList[index]; + for (let index = 0; index < this.cardData.length; index++) { + const item = this.cardData[index]; for (let cindex = 0; cindex < item.infoList.length; cindex++) { const citem = item.infoList[cindex]; citem.userAnswer = ""; citem.isComplete = false; } } - // for (let index = 0; index < this.questionList.length; index++) { - // const item = this.questionList[index]; - // item.userAnswer = ""; - // item.isComplete = false - // } }, openAnswers() { - this.$data.loading = true - for (let index = 0; index < this.cardList.length; index++) { - const item = this.cardList[index]; + this.$data.loading = true; + for (let index = 0; index < this.cardData.length; index++) { + const item = this.cardData[index]; for (let cindex = 0; cindex < item.infoList.length; cindex++) { const citem = item.infoList[cindex]; citem.isComplete = true; } } - this.$data.loading = false + this.$data.loading = false; }, watchParsing(data) { data.isUnfold = !data.isUnfold; }, - // 鑾峰彇璇曞嵎涓嬮鐩被鍨� - getIdPathList() { - this.$data.loading = true; - let query = { - path: "*", - queryType: "*", - productId: this.config.bookId, - cmsPath: '24080\\63791\\63792\\63807', - pading: { - start: 0, - size: 999, - }, - }; - this.MG.store.getProductDetail(query).then(async (res) => { - console.log(this.$props.productLinkPath,res.datas.cmsDatas[0].datas); - const idPathList = res.datas.cmsDatas[0].datas; - await this.getQuestionList(idPathList); - }); - }, - // 鑾峰彇棰樺簱棰樼洰 - async getQuestionList(idPathList, oldData) { - let cardList = []; - // 娓呯┖姝g‘棰樻暟璁板綍 - for (let index = 0; index < idPathList.length; index++) { - const pathitem = idPathList[index]; - const pathList = cardList; - pathList.push({ - path: pathitem.productLinkPath, - catalogName: pathitem.name, - infoList: [], - }); - cardList = pathList; - // 鑾峰彇棰樼洰 - let query = { - path: "*", - queryType: "*", - productId: this.config.bookId, - cmsPath: pathitem.productLinkPath, - itemFields: { - Embedded_QuestionBank_Stem: [], - Embedded_QuestionBank_AnalysisCon: [], - Embedded_QuestionBank_Answer: [], - Embedded_QuestionBank_Option: [], - Embedded_QuestionBank_QuestionType: [], - Embedded_QuestionBank_StemStyle: [], - Embedded_QuestionBank_OptionStyle: [], - Embedded_QuestionBank_KnowledgePoint: [], - Embedded_QuestionBank_Difficulty: [], - }, - pading: { - start: 0, - size: 999, - }, - }; - await this.MG.store.getProductDetail(query).then((res) => { - let oldList; - if (oldData) { - // 鎻愪氦杩囷紝瀛樺湪绛旈璁板綍 - oldList = oldData.find( - (item) => item.path == pathitem.productLinkPath - ).infoList; - this.setData({ - submitStatus: true, - }); + // 鎵规敼棰樼洰 (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�) + handleQuestion() { + const list = this.cardData; + for (let index = 0; index < list.length; index++) { + const item = list[index]; + for (let cindex = 0; cindex < item.infoList.length; cindex++) { + const citem = item.infoList[cindex]; + citem.isComplete = true; + // 淇敼棰樼洰鐘舵�佷负瀹屾垚 + citem.isComplete = true; + // 鎵规敼棰樼洰 + if (citem.questionType == "multipleChoice") { + // 澶氶�夐 + if (citem.answer.length == citem.userAnswer.length) { + const sortedArr1 = citem.answer.slice().sort(); + const sortedArr2 = citem.userAnswer.slice().sort(); + citem.isRight = sortedArr1.every( + (value, index) => value === sortedArr2[index] + ); + } else { + citem.isRight = false; + } + } else if ( + citem.questionType == "singleChoice" || + citem.questionType == "judge" + ) { + 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") { + // 濉┖ + if (typeof citem.answer == "string") { + citem.isRight = citem.answer == citem.userAnswer[0]; + } else { + if (citem.answer.length != citem.userAnswer.length) { + citem.isRight = false; + } else { + citem.isRight = citem.answer.every( + (value, index) => value === citem.userAnswer[index] + ); + } + } } - res.datas.cmsDatas[0].datas.forEach((item, index) => { - let oldObj = ""; - if (oldList) - oldObj = oldList.find((oldItem) => oldItem.id == item.id); - let questionObj = { - // num: index, // 棰樺彿 - id: item.id, - type: pathitem.name, - stem: - item.Embedded_QuestionBank_QuestionType == "completion" - ? JSON.parse(item.Embedded_QuestionBank_Stem) - .stemTxt.replaceAll("<vacancy>", ",input,") - .split(",") - : JSON.parse(item.Embedded_QuestionBank_Stem), // 棰樺共 - answer: item.Embedded_QuestionBank_Answer, // 绛旀 - option: item.Embedded_QuestionBank_Option - ? JSON.parse(item.Embedded_QuestionBank_Option) - : "", // 閫夋嫨棰橀�夐」 - analysisCon: item.Embedded_QuestionBank_AnalysisCon, // 瑙f瀽 - questionType: item.Embedded_QuestionBank_QuestionType, // 棰樺瀷 - optionStyle: item.Embedded_QuestionBank_OptionStyle, // 閫夐」鏄剧ず绫诲瀷 - stemStyle: item.Embedded_QuestionBank_StemStyle, // 棰樺共鏄剧ず绫诲瀷 - difficulty: item.Embedded_QuestionBank_Difficulty - ? 4 - item.Embedded_QuestionBank_Difficulty - : 0, // 闅惧害绛夌骇 - userAnswer: oldObj - ? oldObj.userAnswer - : item.Embedded_QuestionBank_QuestionType == "completion" || - item.Embedded_QuestionBank_QuestionType == "multipleChoice" - ? [] - : "", - isUserAnswer: oldObj - ? this.isHaveAnswer(oldObj.userAnswer) - : false, - isRight: oldObj ? oldObj.isRight : null, - isComplete: oldObj ? oldObj.isComplete : false, - isCollect: false, - isUnfold: "", // 鎺у埗瑙f瀽鐨勬姌鍙犻潰鏉挎槸鍚﹀睍寮� - }; - // 澶氶�夊拰濉┖绛旀鑲负鏁扮粍锛岃杞崲JSON鏍煎紡 - if ( - questionObj.questionType == "completion" || - questionObj.questionType == "multipleChoice" - ) { - try { - questionObj.answer = JSON.parse(questionObj.answer).toString(); - } catch (error) { - questionObj.answer = item.Embedded_QuestionBank_Answer; - } - } - // 濉┖棰樻敼閫� - if (questionObj.questionType == "completion") { - let index = 0; - for (let i = 0; i < questionObj.stem.length; i++) { - const item = questionObj.stem[i]; - if (item == "input") { - questionObj.stem[i] = { - num: index, - data: "input", - }; - if (!oldObj) questionObj.userAnswer[index] = ""; - index++; - } - } - } - // 棰樺共瀵屾枃鏈鐞� - if (questionObj.stemStyle == "RichText") { - // questionObj.option.txt = '' - questionObj.stem.stemTxt = questionObj.stem.stemTxt - .replace( - /\<img/gi, - '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" ' - ) - .replace(/\<p/gi, '<p class="stem-rich-p"') - .replace("../file", app.config.requestCtx + "/file"); - } - // 閫夐」瀵屾枃鏈鐞� - if ( - questionObj.optionStyle == "RichText" && - (questionObj.questionType == "singleChoice" || - questionObj.questionType == "judge" || - questionObj.questionType == "multipleChoice") - ) { - questionObj.option.forEach((item) => { - if (item.txt) - item.txt = item.txt - .replace(/\<img/gi, '<img class="option-rich-img"') - .replace(/\<p/gi, '<p class="stem-rich-p"') - .replace("../file", app.config.requestCtx + "/file"); - }); - } - // 瑙f瀽瀵屾枃鏈鐞� - if ( - questionObj.analysisCon && - typeof questionObj.analysisCon == "string" - ) { - questionObj.analysisCon = questionObj.analysisCon.replace( - /\<img/gi, - '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" ' - ); - } - // 鍚姏棰樹慨鏀� - // if (questionObj.questionType == 'singleChoice') { - // const src = this.extractSourceSrc(questionObj.stem.stemTxt) - // if (src) { - // questionObj.src = src - // questionObj.stem.stemTxt = this.removeVideoAndAudioTags(questionObj.stem.stemTxt) - // } - // } - // 鑾峰彇鍥剧墖 - if ( - questionObj.stemStyle == "Image" || - questionObj.stemStyle == "TxtAndImage" - ) { - questionObj.stem.stemImage = getPublicImage( - questionObj.stem.stemImage, - 150 - ); - } - if ( - questionObj.optionStyle == "Image" || - questionObj.optionStyle == "TxtAndImage" - ) { - questionObj.option.forEach((optionItem) => { - if (optionItem.img) - optionItem.img = getPublicImage(optionItem.img, 150); - }); - } - // 瀹㈣棰樻�诲垎璧嬪�� - if (questionObj.questionType !== "shortAnswer") { - // this.setData({ - // subjectiveGrade: this.data.subjectiveGrade + 2, - // }); - } - // 鏃ф暟鎹噷 棰樼洰姝g‘ 璁板綍姝g‘鏁伴噺 - if (questionObj.isRight) { - // this.setData({ - // correctNum: this.data.correctNum + 1, - // }); - } - if ( - pathitem.name == "鍒ゆ柇棰�" || - pathitem.name == "濉┖棰�" || - pathitem.name == "澶氶�夐" || - pathitem.name == "鍗曢�夐" || - pathitem.name == "鍚姏棰�" - ) { - if (oldObj) { - // this.setData({ - // subjectiveTotal: this.data.subjectiveTotal + 1, - // }); - } - } - // cardList璧嬪�� - let cardIndex = cardList.findIndex( - (item) => item.path == pathitem.productLinkPath - ); - let infoList = cardList[cardIndex].infoList; - infoList.push(questionObj); - cardList[cardIndex].infoList = infoList; - let questionList = []; - const cardUpdatedList = cardList; - cardUpdatedList.forEach((aitem) => { - aitem.infoList.forEach((bitem, bindex) => { - questionList.push(bitem); - bitem.number = bindex + 1; - bitem.score = 2; - }); - }); - cardList = cardUpdatedList; - this.$data.cardList = cardList; - this.$data.loading = false; - // console.log("棰樼洰鍛�", cardList); - // return cardList - }); - }); + } + } + this.cardData = list; + console.log(this.cardData); + }, + getParentWithClass(element, className) { + while (element.parentElement) { + element = element.parentElement; + if (element.classList.contains(className)) { + return element; + } } }, + // 淇濆瓨鎸夐挳 + saveAnswer(e) { + if (e.srcElement) { + const pageNum = this.getParentWithClass( + e.srcElement, + "page-box" + ).getAttribute("page"); + const oldAnswerData = localStorage.getItem( + this.config.activeBook.name + "oldAnswerData" + ); + let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {}; + const asnwerList = []; + for (let index = 0; index < this.cardData.length; index++) { + const item = this.cardData[index]; + for (let cindex = 0; cindex < item.infoList.length; cindex++) { + const citem = item.infoList[cindex]; + asnwerList.push({ + id: citem.id, + userAnswer: citem.userAnswer, + }); + } + } + 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; + } + localStorage.setItem( + this.config.activeBook.name + "oldAnswerData", + JSON.stringify(oldData) + ); + Message.success('淇濆瓨鎴愬姛') + } + + // if(oldData[this.chapter]) { + // oldData[this.chapter][this.page] = asnwerList + // } else { + // oldData[this.chapter] = {} + // 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> <style lang="less" scoped> .catalogName { - color: #00aeef; text-indent: 1em !important; - font-size: 24px; + font-size: 16px; } .examination { min-height: 100px; ul { - list-style:none ; + list-style: none; + } + p { + margin: 0; + } +} +.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 { @@ -747,9 +787,9 @@ padding-left: 12px; display: flex; align-items: center; - font-size: 14px; + font-size: 16px; .questionText { - font-size: 14px; + font-size: 16px; color: #000; } span { @@ -759,12 +799,14 @@ /** 棰樺共 */ .questionTitle { display: flex; - justify-content: space-between; + justify-content: center; .titleContent { width: 95%; display: flex; align-items: flex-start; .questionNum { + text-indent: 0 !important; + margin-right: 5px; height: 32px; line-height: 32px; text-align: center; @@ -774,33 +816,28 @@ } .titleText { text-align: left; - padding: 0 10px 10px 0px; + // padding: 0 10px 10px 0px; min-width: 90%; - font-size: 14px; + font-size: 16px; line-height: 32px; color: #000; span { display: inline-block; - font-size: 14px; + font-size: 16px; // line-height: 26px; color: #000; font-weight: 400; margin-top: 6px; } - .el-input { - width: 150px; + input { + width: 140px; height: 24px; - border-top: 0; + border: 0; + outline: none; + border-bottom: 1px solid #15c0f2; } - /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 #000 !important; - border-radius: 0 !important; + /deep/ .el-textarea.is-disabled .el-textarea__inner { + background-color: #fff; } /deep/ .el-input.is-disabled .el-input__inner { background-color: #fff; @@ -832,11 +869,15 @@ align-items: center; min-width: 45%; margin-right: 50px; + 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; @@ -848,6 +889,8 @@ } .analysis { margin: 20px 0; + width: 94%; + // margin-left: 12px; } .el-collapse { width: 100%; @@ -858,13 +901,14 @@ min-height: 48px; height: min-content; padding: 0 20px; - font-size: 14px; + 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%; @@ -901,14 +945,14 @@ .error { display: flex; text-align: left; - width: 180px; + width: 170px; color: #ee1818; span { height: min-content; } .errorBox { width: 100px; - height: 48px; + // height: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -934,10 +978,10 @@ color: #333; } /deep/ .el-collapse-item__content { - width: 100%; + width: 93%; padding: 0 20px; background-color: #f4f4f4; - font-size: 14px; + font-size: 16px; color: #333; } /deep/ .el-collapse-item__arrow { @@ -956,7 +1000,7 @@ background-color: #f4f4f4; width: 100%; padding: 0 20px; - font-size: 14px; + font-size: 16px; display: flex; flex-direction: column; justify-content: flex-start; @@ -1007,7 +1051,7 @@ span, p { text-indent: 0em; - font-size: 14px; + font-size: 16px; line-height: 20px; } } @@ -1148,7 +1192,7 @@ } .bottom-btn { - margin-top: 50px; + margin-top: 25px; display: flex; justify-content: center; flex-wrap: wrap; @@ -1156,4 +1200,13 @@ margin-top: 10px; } } +.radio-img { + width: 200px; + object-fit: contain; +} +.collect-png { + cursor: pointer; + width: 18px; + object-fit: contain; +} </style> -- Gitblit v1.9.1