From 1695fcd442fe2cefb6d3b63869ad8a72ebd5210a Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 04 七月 2025 23:57:18 +0800
Subject: [PATCH] 测试图书 7.4

---
 src/components/dialogExaminations/index.vue | 2329 +++++++++++++++++++++++++++++------------------------------
 1 files changed, 1,151 insertions(+), 1,178 deletions(-)

diff --git a/src/components/dialogExaminations/index.vue b/src/components/dialogExaminations/index.vue
index 0c299b5..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">鏌ョ湅瑙f瀽</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>姝g‘绛旀锛�</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>
-                                                        <!-- 姝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 />
-                                                            </p>
-                                                            <p v-else>
-                                                                <span class="analysisColor">鏀惰捣瑙f瀽</span><el-image />
-                                                            </p>
-                                                        </div>
-                                                    </div>
-                                                </template>
-                                                <!-- 瑙f瀽 -->
-                                                <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>
-                                                <!-- 瑙f瀽 -->
-                                                <div class="referBox" v-if="value.analysisCon">
-                                                    <span>瑙f瀽锛�</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">鏌ョ湅瑙f瀽</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>姝g‘绛旀锛�</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>
+                            <!-- 姝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 />
+                              </p>
+                              <p v-else>
+                                <span class="analysisColor">鏀惰捣瑙f瀽</span><el-image />
+                              </p>
+                            </div>
+                          </div>
+                        </template>
+                        <!-- 瑙f瀽 -->
+                        <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>
+                        <!-- 瑙f瀽 -->
+                        <div class="referBox" v-if="value.analysisCon">
+                          <span>瑙f瀽锛�</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,1103 +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,
-        },
-        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 {
-            questionTitle: "",
-            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(/&nbsp;/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(/&nbsp;/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">
-.titleText img {
-    max-width: 80%;
-    min-width: 220px;
-}
-</style>
-
 <style lang="less" scoped>
+.titleText img {
+  max-width: 80%;
+  min-width: 220px;
+}
+
 .custom-dialog {
-    height: 900px;
-    overflow: auto;
-    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 {
-    min-height: 800px;
-    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%;
 }
 
 /** 瑙f瀽 */
 .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;
-    .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