From bb584963c6abe77c5577cbcad3c9956b69444ae9 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期二, 01 七月 2025 17:17:30 +0800
Subject: [PATCH] 无人机样章
---
src/components/dialogExaminations/index.vue | 2321 +++++++++++++++++++++++++++++------------------------------
1 files changed, 1,148 insertions(+), 1,173 deletions(-)
diff --git a/src/components/dialogExaminations/index.vue b/src/components/dialogExaminations/index.vue
index 708310f..91ce858 100644
--- a/src/components/dialogExaminations/index.vue
+++ b/src/components/dialogExaminations/index.vue
@@ -1,319 +1,297 @@
<template>
- <el-dialog :visible.sync="localDialogVisible" @open="hadleOpenDialog" width="60vw" top="2vh" append-to-body
- lock-scroll :show-close="false" class="custom-dialog">
- <div slot="title" class="header_title">
- <span>{{ questionTitle }}</span>
- <span @click="closeDialog"> x </span>
- </div>
- <div class="pdfModal" v-if="localDialogVisible">
- <!-- 鍘熸湁鐨勫唴瀹� -->
- <div class="pdfBox-component">
- <div class="examination" v-loading="loading">
- <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 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">
- <!-- 鏍囬 -->
- <div class="questionTitle">
- <div class="titleContent">
- <span class="questionNum" :style="{
- marginTop:
- value.questionType == 'completion' ||
- value.questionType == 'mathField'
- ? '12px'
- : '0',
- }">{{ index + 1 }}.
- </span>
- <!-- 鍚姏杩涘害鏉� -->
- <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> -->
- <!-- 浠呮枃瀛� -->
- <p class="titleText text-fl" v-if="
- value.stemStyle == 'Txt' &&
- value.questionType != 'completion' &&
- value.questionType != 'dropdown' &&
- value.questionType != 'mathField'
- " :id="value.id" v-html="value.stem.stemTxt"></p>
- <!-- 浠呭浘鐗� -->
- <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>
- <!-- 鏂囧瓧鍔犲浘鐗� -->
- <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' ||
- value.questionType == 'mathField'
- ">
- <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-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>
- <!-- 瀵屾枃鏈� -->
- <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 && 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'
- ">
- <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>
- <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>
- <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' ||
- 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)"
- :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>
- <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 == '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' ||
- value.questionType == 'mathField')
- ">
- <el-button @click="checkPares(value)" style="margin-top: 10px">鏌ョ湅瑙ｆ瀽</el-button>
- </div>
- <!-- 鎻愪氦鍚庤В鏋� -->
- <div class="analysis" v-if="value.isComplete">
- <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>姝ｇ‘绛旀锛�</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">
- <span>鎮ㄧ殑绛旀锛�</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" />
- </p>
- <!-- 姝ｇ‘閿欒鍥炬爣 -->
- <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">灞曞紑瑙ｆ瀽</span><el-image />
- </p>
- <p v-else>
- <span class="analysisColor">鏀惰捣瑙ｆ瀽</span><el-image />
- </p>
- </div>
- </div>
- </template>
- <!-- 瑙ｆ瀽 -->
- <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>
- <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>
- <span v-html="value.answer" class="ti-2" :class="[
- 'subjectiveBox',
- value.isUnfold ? 'showText' : 'hideText',
- ]"></span>
- </div>
- <!-- 瑙ｆ瀽 -->
- <div class="referBox" v-if="value.analysisCon">
- <span>瑙ｆ瀽锛�</span>
- <p v-html="value.analysisCon" :class="[
- 'subjectiveBox',
- 'ti-2',
- value.isUnfold ? 'yincang' : '',
- ].join(' ')
- "></p>
- </div>
- </el-collapse-item>
- </el-collapse>
- </div>
- </div>
- </li>
- </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 @click="redo" class="examinations-btn-box">閲嶅仛</el-button>
- <el-button @click="(e) => {
- openAnswers();
- saveAnswer(e);
- }
- " class="examinations-btn-box" :style="{ borderColor: primaryColor }">鏌ョ湅绛旀</el-button>
- </div>
+ <el-dialog :visible.sync="localDialogVisible" @open="hadleOpenDialog" width="60vw" top="2vh" append-to-body
+ lock-scroll :show-close="false" class="custom-dialog">
+ <div slot="title" class="header_title">
+ <span>{{ questionTitle }}</span>
+ <span @click="closeDialog"> x </span>
+ </div>
+ <div class="pdfModal" v-if="localDialogVisible">
+ <!-- 鍘熸湁鐨勫唴瀹� -->
+ <div class="pdfBox-component">
+ <div class="examination" v-loading="loading">
+ <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 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">
+ <!-- 鏍囬 -->
+ <div class="questionTitle">
+ <div class="titleContent">
+ <span class="questionNum" :style="{
+ marginTop:
+ value.questionType == 'completion' ||
+ value.questionType == 'mathField'
+ ? '12px'
+ : '0',
+ }">{{ index + 1 }}.
+ </span>
+ <!-- 鍚姏杩涘害鏉� -->
+ <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> -->
+ <!-- 浠呮枃瀛� -->
+ <p class="titleText text-fl" v-if="
+ value.stemStyle == 'Txt' &&
+ value.questionType != 'completion' &&
+ value.questionType != 'dropdown' &&
+ value.questionType != 'mathField'
+ " :id="value.id" v-html="value.stem.stemTxt"></p>
+ <!-- 浠呭浘鐗� -->
+ <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>
+ <!-- 鏂囧瓧鍔犲浘鐗� -->
+ <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' ||
+ value.questionType == 'mathField'
+ ">
+ <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-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>
+ <!-- 瀵屾枃鏈� -->
+ <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 && item.type != 'material'" />
+ <!-- 鏀惰棌 -->
</div>
- </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'
+ ">
+ <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>
+ <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>
+ <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' ||
+ 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)"
+ :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>
+ <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 == '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' ||
+ value.questionType == 'mathField')
+ ">
+ <el-button @click="checkPares(value)" style="margin-top: 10px">鏌ョ湅瑙ｆ瀽</el-button>
+ </div>
+ <!-- 鎻愪氦鍚庤В鏋� -->
+ <div class="analysis" v-if="value.isComplete">
+ <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>姝ｇ‘绛旀锛�</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">
+ <span>鎮ㄧ殑绛旀锛�</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" />
+ </p>
+ <!-- 姝ｇ‘閿欒鍥炬爣 -->
+ <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">灞曞紑瑙ｆ瀽</span><el-image />
+ </p>
+ <p v-else>
+ <span class="analysisColor">鏀惰捣瑙ｆ瀽</span><el-image />
+ </p>
+ </div>
+ </div>
+ </template>
+ <!-- 瑙ｆ瀽 -->
+ <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>
+ <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>
+ <span v-html="value.answer" class="ti-2" :class="[
+ 'subjectiveBox',
+ value.isUnfold ? 'showText' : 'hideText',
+ ]"></span>
+ </div>
+ <!-- 瑙ｆ瀽 -->
+ <div class="referBox" v-if="value.analysisCon">
+ <span>瑙ｆ瀽锛�</span>
+ <p v-html="value.analysisCon" :class="[
+ 'subjectiveBox',
+ 'ti-2',
+ value.isUnfold ? 'yincang' : '',
+ ].join(' ')
+ "></p>
+ </div>
+ </el-collapse-item>
+ </el-collapse>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="bottom-btn" v-if="!loading">
+ <el-button class="examinations-btn-box" @click="saveAnswer">淇濆瓨</el-button>
+ <el-button @click="
+ (page) => {
+ handleQuestion();
+ saveAnswer(page);
+ }
+ " class="examinations-btn-box" :style="{ borderColor: primaryColor }">鎻愪氦</el-button>
+ <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button>
+ <el-button @click="
+ (page) => {
+ openAnswers();
+ saveAnswer(page);
+ }
+ " class="examinations-btn-box" :style="{ borderColor: primaryColor }">鏌ョ湅绛旀</el-button>
+ </div>
</div>
- </el-dialog>
+ </div>
+ </div>
+ </el-dialog>
</template>
<script>
@@ -321,1101 +299,1098 @@
import { Message } from "element-ui";
import TEditorVue from "../teditor/index.vue";
export default {
- name: "examination-option",
- components: { TEditorVue },
- props: {
- isClear: {
- type: Boolean,
- default: false,
- },
- cardList: {
- type: Array,
- },
- primaryColor: {
- type: String,
- default: "#00aeef",
- },
- chapter: {
- type: Number,
- },
- page: {
- type: Number || String,
- },
- inputBc: {
- type: String,
- default: "#fff",
- },
- hideCollect: {
- type: Boolean,
- default: false,
- },
- sourceType: {
- type: String,
- default: "bits",
- },
- questionTitle: {
- type: String,
- }
+ name: "examination-option",
+ components: { TEditorVue },
+ props: {
+ isClear: {
+ type: Boolean,
+ default: false,
},
- data() {
- return {
- type: "option",
- cardData: [],
- loading: true,
- heart: require("@/assets/images/heart.png"),
- isHeart: require("@/assets/images/heart-check.png"),
- collectList: [],
- localDialogVisible: false,
- allCollect: [
- {
- type: "bits",
- collectList: [],
- },
- {
- type: "json",
- collectList: [],
- },
- ],
- errorList: [],
- allError: [
- {
- type: "bits",
- errorList: [],
- },
- {
- type: "json",
- errorList: [],
- },
- ],
- };
+ cardList: {
+ type: Array,
},
- watch: {
- cardList: {
- handler(newVal) {
- this.cardData = this.cardList;
- if (newVal && newVal.length) {
- this.loading = false;
- }
- },
- immediate: true,
- deep: true,
- },
+ primaryColor: {
+ type: String,
+ default: "#00aeef",
},
- mounted() {
- this.getCollectIdList();
- this.getErrorList();
+ chapter: {
+ type: Number,
},
- methods: {
- hadleOpenDialog() {
-
+ page: {
+ type: Number || String,
+ },
+ inputBc: {
+ type: String,
+ default: "#fff",
+ },
+ hideCollect: {
+ type: Boolean,
+ default: false,
+ },
+ sourceType: {
+ type: String,
+ default: "bits",
+ },
+ questionTitle: {
+ type: String,
+ },
+ },
+ data() {
+ return {
+ type: "option",
+ cardData: [],
+ loading: true,
+ heart: require("@/assets/images/heart.png"),
+ isHeart: require("@/assets/images/heart-check.png"),
+ collectList: [],
+ localDialogVisible: false,
+ allCollect: [
+ {
+ type: "bits",
+ collectList: [],
},
- // 鑾峰彇涓嶅彈淇濇姢鐨勫浘鐗�
- 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;
+ {
+ type: "json",
+ collectList: [],
},
- // 鏁扮粍杞负瀛楃涓叉柟娉�
- arrayToString(data) {
- // 妫�鏌ユ槸鍚︿负鏁扮粍
- if (Array.isArray(data)) {
- // 浣跨敤 join 鏂规硶灏嗘暟缁勮浆鎹负瀛楃涓诧紝榛樿浣跨敤閫楀彿鍒嗛殧
- return data.join(",").replace(/<[^>]*>/g, "");
- } else {
- // 濡傛灉涓嶆槸鏁扮粍锛岀洿鎺ヨ繑鍥炲師濮嬪��
- return data.replace(/<[^>]*>/g, "");
- }
+ ],
+ errorList: [],
+ allError: [
+ {
+ type: "bits",
+ errorList: [],
},
- isHaveAnswer(data) {
- if (typeof data == "string") {
- data = data
- .replace(/<[^>]*>/g, "")
- .replace(/ /g, "")
- .trim();
- if (data.length) {
- return true;
- } else {
- return false;
- }
- } else {
- const answer = data.find((item) => item.length > 0);
- if (answer) {
- return true;
- } else {
- return false;
- }
- }
+ {
+ type: "json",
+ errorList: [],
},
- redo() {
- 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];
- 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;
- }
- }
- },
- openAnswers() {
- 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;
- },
- watchParsing(data) {
- data.isUnfold = !data.isUnfold;
- },
- // 鎵规敼棰樼洰 (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�)
- handleQuestion() {
- let errorId = [];
- 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" ||
- citem.questionType == "dropdown"
- ) {
- citem.isRight = citem.answer == citem.userAnswer;
- } else if (citem.questionType == "shortAnswer") {
- // 绠�绛� 缈昏瘧
- citem.isRight = null;
- } else if (
- citem.questionType == "completion" ||
- citem.questionType == "mathField"
- ) {
- // 濉┖
- 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]
- );
- }
- }
- }
- if (citem.isRight == false) {
- errorId.push(citem.id);
- }
- }
- }
- this.cardData = list;
- 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) {
- 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("淇濆瓨鎴愬姛");
- }
+ ],
+ };
+ },
+watch: {
+ cardList: {
+ handler(newVal) {
+ if (newVal && newVal.length) {
+ this.cardData = newVal;
+ this.loading = false;
+ }
+ },
+ immediate: true,
+ deep: true,
+ },
+},
- // 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) {
- 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;
- },
- closeDialog() {
- this.localDialogVisible = false
- },
- openDialogQuestion() {
- this.localDialogVisible = true
- },
+ mounted() {
+ this.getCollectIdList();
+ this.getErrorList();
+ },
+ methods: {
+ hadleOpenDialog() { },
+ // 鑾峰彇涓嶅彈淇濇姢鐨勫浘鐗�
+ 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) {
+ // 妫�鏌ユ槸鍚︿负鏁扮粍
+ if (Array.isArray(data)) {
+ // 浣跨敤 join 鏂规硶灏嗘暟缁勮浆鎹负瀛楃涓诧紝榛樿浣跨敤閫楀彿鍒嗛殧
+ return data.join(",").replace(/<[^>]*>/g, "");
+ } else {
+ // 濡傛灉涓嶆槸鏁扮粍锛岀洿鎺ヨ繑鍥炲師濮嬪��
+ return data.replace(/<[^>]*>/g, "");
+ }
+ },
+ isHaveAnswer(data) {
+ if (typeof data == "string") {
+ data = data
+ .replace(/<[^>]*>/g, "")
+ .replace(/ /g, "")
+ .trim();
+ if (data.length) {
+ return true;
+ } else {
+ return false;
+ }
+ } else {
+ const answer = data.find((item) => item.length > 0);
+ if (answer) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+ },
+ redo() {
+ 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];
+ 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;
+ }
+ }
+ },
+ openAnswers() {
+ 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;
+ },
+ watchParsing(data) {
+ data.isUnfold = !data.isUnfold;
+ },
+ // 鎵规敼棰樼洰 (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�)
+ handleQuestion() {
+ debugger
+ let errorId = [];
+ 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" ||
+ citem.questionType == "dropdown"
+ ) {
+ citem.isRight = citem.answer == citem.userAnswer;
+ } else if (citem.questionType == "shortAnswer") {
+ // 绠�绛� 缈昏瘧
+ citem.isRight = null;
+ } else if (
+ citem.questionType == "completion" ||
+ citem.questionType == "mathField"
+ ) {
+ // 濉┖
+ 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]
+ );
+ }
+ }
+ }
+ if (citem.isRight == false) {
+ errorId.push(citem.id);
+ }
+ }
+ }
+ this.cardData = list;
+ 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) {
+ element = element.parentElement;
+ if (element.classList.contains(className)) {
+ return element;
+ }
+ }
+ },
+ // 淇濆瓨鎸夐挳
+ saveAnswer(e) {
+ if (e) {
+ const pageNum = e
+ 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) {
+ this.cardData[infoNum].infoList[num].isCollect =
+ !this.cardData[infoNum].infoList[num].isCollect;
+ },
+ // 棰樼洰鏀惰棌鎸夐挳,鏀惰棌鍜屽彇娑堝悓涓�鎺ュ彛锛屽彇娑堟暟缁勫噺鍘昏椤筰d
+ setCollect(num, number) {
+ let item = null;
+ if (number >= 0) {
+ 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() {
+ console.log(this.cardList, "cardList")
+ 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;
+ },
+ closeDialog() {
+ this.localDialogVisible = false;
+ },
+ openDialogQuestion() {
+ this.localDialogVisible = true;
+ },
+ },
};
</script>
-
<style lang="less" scoped>
-
.titleText img {
- max-width: 80%;
- min-width: 220px;
+ max-width: 80%;
+ min-width: 220px;
}
.custom-dialog {
- height: 90vh;
- overflow: scroll;
+ height: 90vh;
+ overflow: scroll;
}
/deep/.el-loading-mask {
- background: transparent !important;
+ background: transparent !important;
}
-
.catalogName {
- display: flex;
- text-indent: 1em !important;
- font-size: 16px;
+ display: flex;
+ text-indent: 1em !important;
+ font-size: 16px;
- .catalogName-box {
- display: inline-block;
- width: 94%;
- }
+ .catalogName-box {
+ display: inline-block;
+ width: 94%;
+ }
}
.catalogImage {
- width: 50%;
+ width: 50%;
}
.examination {
- padding: 10px 0 50px 0;
- ul {
- list-style: none;
- }
+ padding: 10px 0 50px 0;
- p {
- margin: 0;
- }
+ ul {
+ list-style: none;
+ }
- math {}
+ p {
+ margin: 0;
+ }
+
+ math {}
}
.examinations-btn-box {
- height: 30px;
- width: 78px;
- padding: 4px 10px;
+ height: 30px;
+ width: 78px;
+ padding: 4px 10px;
}
.border-box {
- padding-top: 20px;
- // border: 2px solid #e9e9e9;
+ padding-top: 20px;
+ // border: 2px solid #e9e9e9;
}
.ti-2 {
- text-indent: 2em !important;
+ text-indent: 2em !important;
}
.questionContent {
- text-indent: 0em !important;
- margin-left: 20px;
+ text-indent: 0em !important;
+ margin-left: 20px;
- /deep/ .el-textarea__inner:focus {
- border-color: #15c0f2;
- }
+ /deep/ .el-textarea__inner:focus {
+ border-color: #15c0f2;
+ }
}
.input {
- /deep/ .el-input__inner {
- height: 26px;
- }
+ /deep/ .el-input__inner {
+ height: 26px;
+ }
}
p {
- margin-top: 0em;
- text-indent: 0em !important;
- line-height: 1.5em;
- font-size: 16px;
+ 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;
+ margin: 0 10px 0 23px;
+ width: 4px;
+ height: 19px;
+ background-color: #ff6c00;
}
.textOverFlow {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.question {
- overflow: auto;
- height: 775px;
- padding-bottom: 20px;
+ overflow: auto;
+ height: 775px;
+ padding-bottom: 20px;
}
.question::-webkit-scrollbar {
- width: 3px;
+ 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;
+ 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;
+ -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
+ border-radius: 20px;
+ background: #d9d9d9;
}
.paperMargin {
- margin-top: 30px;
+ margin-top: 30px;
- ul li {
- padding: 20px 41px 0px 46px;
- }
+ ul li {
+ padding: 20px 41px 0px 46px;
+ }
- li:last-child {
- padding-bottom: 20px;
- }
+ li:last-child {
+ padding-bottom: 20px;
+ }
}
.paperQuestion {
- padding-left: 12px;
- display: flex;
- align-items: center;
+ padding-left: 12px;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+
+ .questionText {
font-size: 16px;
+ color: #000;
+ }
- .questionText {
- font-size: 16px;
- color: #000;
- }
-
- span {
- color: #c2c2c2;
- }
+ span {
+ color: #c2c2c2;
+ }
}
/** 棰樺共 */
.questionTitle {
+ display: flex;
+ justify-content: center;
+
+ .titleContent {
+ width: 95%;
display: flex;
- justify-content: center;
+ align-items: flex-start;
- .titleContent {
- width: 95%;
+ .questionNum {
+ text-indent: 0 !important;
+ margin-right: 5px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ font-size: 16px;
+ 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;
+ min-width: 90%;
+ font-size: 16px;
+ line-height: 32px;
+ color: #000;
+
+ .input-txt {
display: flex;
- align-items: flex-start;
+ flex-wrap: wrap;
+ align-items: center;
+ }
- .questionNum {
- text-indent: 0 !important;
- margin-right: 5px;
- height: 32px;
- line-height: 32px;
- text-align: center;
- font-size: 16px;
- color: #333;
- font-weight: bold;
- }
+ span {
+ display: inline-block;
+ font-size: 16px;
+ color: #000;
+ font-weight: 400;
+ margin-top: 6px;
+ }
- .text-fl {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- }
+ select {
+ outline: none;
+ min-width: 100px;
+ }
- .titleText {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- text-align: left;
- min-width: 90%;
- font-size: 16px;
- line-height: 32px;
- color: #000;
+ input {
+ width: 140px;
+ height: 24px;
+ border: 0;
+ outline: none;
+ border-bottom: 1px solid #000;
+ }
- .input-txt {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- }
+ /deep/ .el-textarea.is-disabled .el-textarea__inner {
+ background-color: #fff;
+ }
- span {
- display: inline-block;
- font-size: 16px;
- color: #000;
- font-weight: 400;
- margin-top: 6px;
- }
+ /deep/ .el-input.is-disabled .el-input__inner {
+ background-color: #fff;
+ }
- select {
- outline: none;
- min-width: 100px;
- }
-
- input {
- width: 140px;
- height: 24px;
- border: 0;
- outline: none;
- border-bottom: 1px solid #000;
- }
-
- /deep/ .el-textarea.is-disabled .el-textarea__inner {
- background-color: #fff;
- }
-
- /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;
- }
- }
+ /dee/ p {
+ display: flex;
+ align-items: center;
+ }
}
- .collect {
- cursor: pointer;
- width: 21px;
- height: 21px;
+ ::v-deep {
+ .el-input__wrapper {
+ border-top: 0 !important;
+ }
}
+ }
- .mathField {
- min-width: 200px;
- max-width: 518px;
- }
+ .collect {
+ cursor: pointer;
+ width: 21px;
+ height: 21px;
+ }
+
+ .mathField {
+ min-width: 200px;
+ max-width: 518px;
+ }
}
-
/** 閫夐」 */
.option {
- .el-radio,
- .el-checkbox {
- // min-height: 32px;
- height: min-content;
- display: flex;
- align-items: center;
- min-width: 45%;
- margin-right: 50px;
- margin-bottom: 6px;
- white-space: pre-wrap !important;
- color: #000;
+ .el-radio,
+ .el-checkbox {
+ // min-height: 32px;
+ height: min-content;
+ display: flex;
+ 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-checkbox__label {
+ line-height: 1.5;
}
+ }
- /deep/ .el-radio__inner {
- border-color: #a5a3a3;
- }
+ /deep/ .el-radio__inner {
+ border-color: #a5a3a3;
+ }
- .optionContent {
- margin: 0;
- display: flex;
- align-items: center;
- line-height: 26px;
- color: #000;
- }
+ .optionContent {
+ margin: 0;
+ display: flex;
+ align-items: center;
+ line-height: 26px;
+ color: #000;
+ }
}
.analysis {
- margin: 20px 0;
- width: 94%;
- // margin-left: 12px;
+ margin: 20px 0;
+ width: 94%;
+ // margin-left: 12px;
}
.el-collapse {
- width: 100%;
+ width: 100%;
}
/** 瑙ｆ瀽 */
.objective {
- /deep/ .el-collapse-item__header {
- min-height: 48px;
- height: min-content;
- padding: 0 20px;
- font-size: 16px;
- background-color: #f4f4f4;
+ /deep/ .el-collapse-item__header {
+ min-height: 48px;
+ height: min-content;
+ 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;
+ .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;
+ .headerConent {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
- p {
- margin-bottom: 0;
- }
+ p {
+ margin-bottom: 0;
+ }
- .el-image {
- width: 9px;
- height: 9px;
- }
+ .el-image {
+ width: 9px;
+ height: 9px;
+ }
- .correct {
- color: #1fbc1f;
- width: 180px;
- text-align: left;
- display: flex;
+ .correct {
+ color: #1fbc1f;
+ width: 180px;
+ text-align: left;
+ display: flex;
- span:nth-child(1) {
- display: inline-block;
- width: 82px;
- }
- }
+ span:nth-child(1) {
+ display: inline-block;
+ width: 82px;
+ }
+ }
- .correctBox {
- width: 100px;
- height: min-content;
- word-break: break-all;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 1;
- /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */
- overflow: hidden;
- }
+ .correctBox {
+ width: 100px;
+ height: min-content;
+ word-break: break-all;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 1;
+ /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */
+ overflow: hidden;
+ }
- .error {
- display: flex;
- text-align: left;
- width: 170px;
- color: #ee1818;
+ .error {
+ display: flex;
+ text-align: left;
+ width: 170px;
+ color: #ee1818;
- span {
- height: min-content;
- }
+ span {
+ height: min-content;
+ }
- .errorBox {
- width: 100px;
- // height: 48px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ .errorBox {
+ width: 100px;
+ // height: 48px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
- ::v-deep {
- img {
- max-height: 48px;
- }
- }
- }
- }
+ ::v-deep {
+ img {
+ max-height: 48px;
+ }
}
+ }
}
-
- .checkAnalysis {
- cursor: pointer;
- height: 100%;
- display: flex;
- align-items: center;
- }
+ }
}
+
+ .checkAnalysis {
+ cursor: pointer;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ }
+ }
}
/deep/ .el-collapse-item__header:focus:not(:hover) {
- color: #333;
+ color: #333;
}
/deep/ .el-collapse-item__content {
- width: 93%;
- padding: 0 20px;
- background-color: #f4f4f4;
- font-size: 16px;
- color: #333;
+ width: 93%;
+ padding: 0 20px;
+ background-color: #f4f4f4;
+ font-size: 16px;
+ color: #333;
}
/deep/ .el-collapse-item__arrow {
- display: none;
+ display: none;
}
.subjectiveItem {
- background-color: #f4f4f4;
- padding: 10px 20px;
+ background-color: #f4f4f4;
+ padding: 10px 20px;
- p {
- text-indent: 0em;
- }
+ p {
+ text-indent: 0em;
+ }
}
.subjective {
- /deep/ .el-collapse-item__header {
- height: 80px;
- background-color: #f4f4f4;
- width: 100%;
- padding: 0 20px;
- font-size: 16px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
+ /deep/ .el-collapse-item__header {
+ height: 80px;
+ background-color: #f4f4f4;
+ width: 100%;
+ padding: 0 20px;
+ font-size: 16px;
+ display: flex;
+ 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;
+ text-align: left;
+ word-break: break-all;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 1;
+ /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */
+ overflow: hidden;
+ line-height: 20px;
+ }
+
+ .analysisDetailBox {
+ overflow: hidden;
+ max-height: 100px;
+ transition: 1s;
+
+ &.open {
+ max-height: 500px;
}
- .subjectiveTitle {
+ &.close {
+ max-height: 20px;
+ }
+
+ .referBox {
+ display: flex;
+ margin-bottom: 10px;
+
+ span {
width: 80px;
- height: 20px;
- line-height: 20px;
- }
+ color: #999;
+ }
- .subjectiveRefer {
- display: flex;
- align-items: flex-start;
- text-align: left;
- }
-
- .subjectiveAnswer {
- width: 540px;
- height: 20px;
- text-align: left;
- word-break: break-all;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 1;
- /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */
+ p {
+ flex: 1;
overflow: hidden;
+ }
+
+ span,
+ p {
+ text-indent: 0em;
+ font-size: 16px;
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;
- font-size: 16px;
- line-height: 20px;
- }
- }
- }
+ }
}
// 閫夐」
.optionImg {
- height: min-content;
- margin-bottom: 6px;
+ height: min-content;
+ margin-bottom: 6px;
- /deep/ img {
- margin-left: 10px;
- object-fit: contain;
- vertical-align: middle;
- }
+ /deep/ img {
+ margin-left: 10px;
+ object-fit: contain;
+ vertical-align: middle;
+ }
}
.optionTxt {
- height: 32px;
+ height: 32px;
}
// 棰樺共浠呭浘鐗�
.stemImg {
- margin: 0 10px 10px 10px;
+ margin: 0 10px 10px 10px;
}
// 鏂囧瓧鍔犲浘鐗�
.stemTxtAndImage {
- display: flex;
- align-items: flex-start;
+ display: flex;
+ align-items: flex-start;
}
.titleTextArea {
- ::v-deep {
+ ::v-deep {
- img,
- .el-image__inner {
- max-width: 150px !important;
- max-height: 100px !important;
- object-fit: contain;
- }
+ img,
+ .el-image__inner {
+ max-width: 150px !important;
+ max-height: 100px !important;
+ object-fit: contain;
}
+ }
}
.questionAnalysis {
- width: 100%;
- height: 48px;
+ width: 100%;
+ height: 48px;
+ display: flex;
+ justify-content: space-between;
+
+ .analysisAnswer {
+ width: 74%;
display: flex;
- justify-content: space-between;
+ }
- .analysisAnswer {
- width: 74%;
- display: flex;
- }
+ .referAnswer {
+ display: inline-block;
+ width: 60px;
+ }
- .referAnswer {
- display: inline-block;
- width: 60px;
- }
+ .answerContent {
+ height: 48px;
+ width: 80%;
+ text-align: left;
+ word-break: break-all;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 1;
+ /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */
+ overflow: hidden;
+ }
- .answerContent {
- height: 48px;
- width: 80%;
- text-align: left;
- word-break: break-all;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 1;
- /* 杩欓噷鏄秴鍑哄嚑琛岀渷鐣� */
- overflow: hidden;
- }
-
- .el-image {
- width: 9px;
- height: 9px;
- }
+ .el-image {
+ width: 9px;
+ height: 9px;
+ }
}
.analysisColor {
- cursor: pointer;
- color: #949494;
- margin-right: 4px;
+ cursor: pointer;
+ color: #949494;
+ margin-right: 4px;
}
.difficulty {
- display: flex;
- align-items: center;
+ display: flex;
+ align-items: center;
}
.cartoon {
- animation: spread 1s linear forwards;
+ animation: spread 1s linear forwards;
}
.downCartoon {
- animation: downSpred 1s linear forwards;
+ animation: downSpred 1s linear forwards;
}
.showText {
- animation: showText 1s linear forwards;
+ animation: showText 1s linear forwards;
}
.hideText {
- animation: hideText 2s linear forwards;
+ animation: hideText 2s linear forwards;
}
@keyframes spread {
- from {
- max-height: 20px;
- }
+ from {
+ max-height: 20px;
+ }
- to {
- max-height: 500px;
+ to {
+ max-height: 500px;
- p {
- flex: 1;
- overflow: hidden;
- }
+ p {
+ flex: 1;
+ overflow: hidden;
}
+ }
}
@keyframes downSpred {
- from {
- max-height: 500px;
- }
+ from {
+ max-height: 500px;
+ }
- to {
- max-height: 20px;
- }
+ to {
+ max-height: 20px;
+ }
}
@keyframes showText {
- 100% {
- height: auto;
- }
+ 100% {
+ height: auto;
+ }
}
@keyframes hideText {
- 0% {
- height: auto;
- }
+ 0% {
+ height: auto;
+ }
- 100% {
- height: 20px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
+ 100% {
+ height: 20px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
.yincang {
- animation: yincang 1s linear forwards;
+ animation: yincang 1s linear forwards;
}
@keyframes yincang {
- from {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
+ from {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
- to {
- overflow: auto;
- text-overflow: initial;
- white-space: pre-wrap;
- }
+ to {
+ overflow: auto;
+ text-overflow: initial;
+ white-space: pre-wrap;
+ }
}
.bottom-btn {
- margin-top: 25px;
- display: flex;
- justify-content: center;
- flex-wrap: wrap;
- margin-bottom: 50px;
- .el-button {
- margin-top: 10px;
- }
+ margin-top: 25px;
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-bottom: 50px;
+
+ .el-button {
+ margin-top: 10px;
+ }
}
.radio-img {
- width: 200px;
- object-fit: contain;
+ width: 200px;
+ object-fit: contain;
}
.collect-png {
- cursor: pointer;
- width: 18px;
- object-fit: contain;
+ cursor: pointer;
+ width: 18px;
+ object-fit: contain;
}
/deep/ .examination-math {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1