Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

zhongshujie

2024-09-04 002c3ab903cb545c1d595965807a4cd63fb5b7f3

 src/components/examinations/index.vue

@@ -1,11 +1,6 @@
<template>
  <div class="examination" v-loading="loading">
    <div
      v-for="(item, nindex) in cardData"
      :key="nindex"
      class="border-box"
      v-show="item.infoList.length"
    >
    <div v-for="(item, nindex) in cardData" :key="nindex" class="border-box" v-show="item.infoList.length">
      <p class="catalogName" :style="{ color: primaryColor }">
        <span v-if="nindex == 0">一、</span>
        <span v-if="nindex == 1">二、</span>
@@ -15,205 +10,105 @@
        <span>{{ item.catalogName }}</span>
      </p>
      <ul>
        <li
          v-for="(value, index) in item.infoList"
          :key="value.id"
          :id="'listItem-' + value.id"
        >
        <li v-for="(value, index) in item.infoList" :key="value.id" :id="'listItem-' + value.id">
          <!-- 标题 -->
          <div class="questionTitle">
            <div class="titleContent">
              <span
                class="questionNum"
                :style="{
                  marginTop: value.questionType == 'completion' ? '12px' : '0',
                }"
                >{{ index + 1 }}.
              <span class="questionNum" :style="{
                marginTop: value.questionType == 'completion' ? '12px' : '0',
              }">{{ index + 1 }}.
              </span>
              <!-- 听力进度条 -->
              <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '听力题'" /> -->
              <!-- 题干 -->
              <!-- 仅文字 -->
              <p
                class="titleText"
                v-if="
                  value.stemStyle == 'Txt' && value.questionType != 'completion'
                "
                :id="value.id"
              >
                {{ value.stem.stemTxt }}
              <p class="titleText" v-if="
                value.stemStyle == 'Txt' && value.questionType != 'completion'
              " :id="value.id">
                <span v-html="value.stem.stemTxt"></span>
                <!-- {{ value.stem.stemTxt }} -->
              </p>
              <!-- 仅图片 -->
              <el-image
                class="stemImg"
                v-else-if="value.stemStyle == 'Image'"
              <el-image class="stemImg" v-else-if="value.stemStyle == 'Image'"
                :src="getPublicImage(value.stem.stemImage, 150)"
                :preview-src-list="[getPublicImage(value.stem.stemImage)]"
              ></el-image>
                :preview-src-list="[getPublicImage(value.stem.stemImage)]"></el-image>
              <!-- 文字加图片 -->
              <p
                class="stemTxtAndImage titleText"
                v-else-if="value.stemStyle == 'TxtAndImage'"
              >
                <span> {{ value.stem.stemTxt }}</span>
                <el-image
                  :src="getPublicImage(value.stem.stemImage, 150)"
                  :preview-src-list="[getPublicImage(value.stem.stemImage)]"
                  style="margin-left: 10px"
                ></el-image>
              <p class="stemTxtAndImage titleText" v-else-if="value.stemStyle == 'TxtAndImage'">
                <span v-html="value.stem.stemTxt"> <!-- {{ value.stem.stemTxt }} --> </span>
                <el-image :src="getPublicImage(value.stem.stemImage, 150)"
                  :preview-src-list="[getPublicImage(value.stem.stemImage)]" style="margin-left: 10px"></el-image>
              </p>
              <!-- 填空题题干 -->
              <p class="titleText" v-if="value.questionType == 'completion'">
                <span
                  v-for="(itemText, indexText) in value.stem"
                  :key="indexText"
                >
                  <span
                    v-if="typeof itemText == 'string'"
                    v-html="itemText"
                  ></span>
                <span v-for="(itemText, indexText) in value.stem" :key="indexText">
                  <span v-if="typeof itemText == 'string'" v-html="itemText"></span>
                  <!-- &nbsp; -->
                  <input
                    v-else
                    type="text"
                    class="input"
                    v-model.trim="value.userAnswer[itemText.num]"
                    :disabled="value.isComplete"
                    :style="{ backgroundColor: inputBc }"
                  />
                  <input v-else type="text" class="input" v-model.trim="value.userAnswer[itemText.num]"
                    :disabled="value.isComplete" :style="{ backgroundColor: inputBc }" />
                  <!-- &nbsp; -->
                </span>
              </p>
              <!-- 富文本 -->
              <p
                class="titleText titleTextArea"
                v-else-if="value.stemStyle == 'RichText'"
                v-html="value.stem.stemTxt"
                v-cloak
              ></p>
              <p class="titleText titleTextArea" v-else-if="value.stemStyle == 'RichText'" v-html="value.stem.stemTxt"
                v-cloak></p>
            </div>
            <img
              :src="value.isCollect ? isHeart : heart"
              alt=""
              class="collect-png"
              @click="setCollect(nindex, index)"
              v-if="!(hideCollect && value.questionType == 'shortAnswer')"
            />
            <img :src="value.isCollect ? isHeart : heart" alt="" class="collect-png" @click="setCollect(nindex, index)"
              v-if="!(hideCollect && value.questionType == 'shortAnswer')" />
            <!-- 收藏 -->
          </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 in value.option"
                :key="content.value"
                :label="content.value"
                :class="
                  value.optionStyle == 'Image' ||
                  value.optionStyle == 'TxtAndImage' ||
                  value.optionStyle == 'RichText'
                    ? 'optionImg'
                    : 'optionTxt'
                "
              >
            <el-radio-group :disabled="value.isComplete" class="option" v-if="
              value.questionType == 'singleChoice' ||
              value.questionType == 'judge'
            " v-model="value.userAnswer">
              <el-radio v-for="content in value.option" :key="content.value" :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="isReal"
                  ></el-image>
                  <img
                    :src="content.img"
                    alt=""
                    v-if="!isReal"
                    class="radio-img"
                  />
                <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="isReal"></el-image>
                  <img :src="content.img" alt="" v-if="!isReal" class="radio-img" />
                </p>
                <p
                  class="optionContent"
                  v-else-if="value.optionStyle == 'TxtAndImage'"
                >
                  <span> {{ content.value }}、</span
                  ><span>{{ content.txt }}</span>
                  <el-image
                    :src="getPublicImage(content.img, 115)"
                    v-show="content.img"
                    :preview-src-list="[getPublicImage(content.img)]"
                  ></el-image>
                <p class="optionContent" v-else-if="value.optionStyle == 'TxtAndImage'">
                  <span> {{ content.value }}、</span><span>{{ content.txt }}</span>
                  <el-image :src="getPublicImage(content.img, 115)" v-show="content.img"
                    :preview-src-list="[getPublicImage(content.img)]"></el-image>
                </p>
                <p
                  class="optionContent titleTextArea"
                  v-else-if="value.optionStyle == 'RichText'"
                  v-html="`<span>${content.value}</span>` + '、' + content.txt"
                  id="mathjax"
                ></p>
                <p class="optionContent titleTextArea" v-else-if="value.optionStyle == 'RichText'"
                  v-html="`<span>${content.value}</span>` + '、' + content.txt" id="mathjax"></p>
              </el-radio>
            </el-radio-group>
            <!-- 多选 -->
            <el-checkbox-group
              :disabled="value.isComplete"
              v-model="value.userAnswer"
              class="option"
              v-else-if="value.questionType == 'multipleChoice'"
            >
              <el-checkbox
                v-for="content in value.option"
                :key="content.value"
                :label="content.value"
                :name="content.text"
                :class="
                  value.optionStyle == 'Image' ||
            <el-checkbox-group :disabled="value.isComplete" v-model="value.userAnswer" class="option"
              v-else-if="value.questionType == 'multipleChoice'">
              <el-checkbox v-for="content in value.option" :key="content.value" :label="content.value"
                :name="content.text" :class="value.optionStyle == 'Image' ||
                  value.optionStyle == 'TxtAndImage' ||
                  value.optionStyle == 'RichText'
                    ? 'optionImg'
                    : 'optionTxt'
                "
              >
                  ? 'optionImg'
                  : 'optionTxt'
                  ">
                <p class="optionContent" v-if="value.optionStyle == 'Txt'">
                  {{ content.value }}、{{ content.txt }}
                </p>
                <p
                  class="optionContent"
                  v-else-if="value.optionStyle == 'Image'"
                >
                  {{ content.value }}、<el-image
                    :src="getPublicImage(content.img, 115)"
                    :preview-src-list="[getPublicImage(content.img)]"
                    v-show="content.img"
                  ></el-image>
                <p class="optionContent" v-else-if="value.optionStyle == 'Image'">
                  {{ content.value }}、<el-image :src="getPublicImage(content.img, 115)"
                    :preview-src-list="[getPublicImage(content.img)]" v-show="content.img"></el-image>
                </p>
                <p
                  class="optionContent"
                  v-else-if="value.optionStyle == 'TxtAndImage'"
                >
                  <span> {{ content.value }}、</span
                  ><span>{{ content.txt }}</span>
                  <el-image
                    :src="getPublicImage(content.img, 115)"
                    :preview-src-list="[getPublicImage(content.img)]"
                    v-show="content.img"
                  ></el-image>
                <p class="optionContent" v-else-if="value.optionStyle == 'TxtAndImage'">
                  <span> {{ content.value }}、</span><span>{{ content.txt }}</span>
                  <el-image :src="getPublicImage(content.img, 115)" :preview-src-list="[getPublicImage(content.img)]"
                    v-show="content.img"></el-image>
                </p>
                <p
                  class="optionContent titleTextArea"
                  v-else-if="value.optionStyle == 'RichText'"
                  v-html="content.value + '、' + content.txt"
                ></p>
                <p class="optionContent titleTextArea" v-else-if="value.optionStyle == 'RichText'"
                  v-html="content.value + '、' + content.txt"></p>
              </el-checkbox>
            </el-checkbox-group>
            <!-- 简答 翻译 -->
@@ -228,131 +123,74 @@
              }
            "
          ></TEditorVue> -->
            <el-input
              :disabled="value.isComplete"
              style="width: 94%; margin: 0 auto"
              v-else-if="value.questionType == 'shortAnswer'"
              type="textarea"
              :rows="6"
              placeholder="请输入内容"
              v-model="value.userAnswer"
            />
            <div
              v-if="
                type != 'option' &&
                type != 'mock' &&
                (value.questionType == 'shortAnswer' ||
                  value.questionType == 'multipleChoice' ||
                  value.questionType == 'completion')
              "
            >
              <el-button @click="checkPares(value)" style="margin-top: 10px"
                >查看解析</el-button
              >
            <el-input :disabled="value.isComplete" style="width: 94%; margin: 0 auto"
              v-else-if="value.questionType == 'shortAnswer'" type="textarea" :rows="6" placeholder="请输入内容"
              v-model="value.userAnswer" />
            <div v-if="
              type != 'option' &&
              type != 'mock' &&
              (value.questionType == 'shortAnswer' ||
                value.questionType == 'multipleChoice' ||
                value.questionType == 'completion')
            ">
              <el-button @click="checkPares(value)" style="margin-top: 10px">查看解析</el-button>
            </div>
            <!-- 提交后解析 -->
            <div class="analysis" v-if="value.isComplete">
              <el-collapse
                v-model="value.isUnfold"
                @change="handleChange(value)"
                accordion
                v-if="value.questionType != 'shortAnswer'"
              >
              <el-collapse v-model="value.isUnfold" @change="handleChange(value)" accordion
                v-if="value.questionType != 'shortAnswer'">
                <el-collapse-item :name="value.id" class="objective">
                  <template #title>
                    <div class="headerBox">
                      <div class="headerConent">
                        <p class="correct" :title="arrayToString(value.answer)">
                          <span>正确答案：</span>
                          <span
                            v-html="arrayToString(value.answer)"
                            class="correctBox"
                          ></span>
                          <span v-html="arrayToString(value.answer)" class="correctBox"></span>
                        </p>
                        <p
                          :class="
                            value.isRight
                              ? 'correct textOverFlow'
                              : 'error textOverFlow'
                          "
                          :title="arrayToString(value.userAnswer)"
                          style="margin-left: 20px"
                        >
                        <p :class="value.isRight
                          ? 'correct textOverFlow'
                          : 'error textOverFlow'
                          " :title="arrayToString(value.userAnswer)" style="margin-left: 20px">
                          <span>您的答案：</span>
                          <span
                            class="errorBox"
                            v-if="isHaveAnswer(value.userAnswer)"
                            >{{ arrayToString(value.userAnswer) }}</span
                          >
                          <span class="errorBox" v-if="isHaveAnswer(value.userAnswer)">{{
                            arrayToString(value.userAnswer) }}</span>
                        </p>
                      </div>
                      <p class="difficulty" v-if="value.difficulty">
                        <span style="color: #333">难度等级：</span>
                        <el-rate
                          v-model="value.difficulty"
                          :max="3"
                          size="large"
                          disabled
                          disabled-void-color="#949494"
                        />
                        <el-rate v-model="value.difficulty" :max="3" size="large" disabled
                          disabled-void-color="#949494" />
                      </p>
                      <!-- 正确错误图标 -->
                      <span class="mr-10">
                        <svg
                          v-if="value.isRight"
                          t="1716986419862"
                          class="icon"
                          viewBox="0 0 1820 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="18767"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40"
                          height="20"
                        >
                        <svg v-if="value.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="40" height="20">
                          <path
                            d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                            fill="#1AFA29"
                            p-id="18768"
                          ></path>
                            fill="#1AFA29" p-id="18768"></path>
                        </svg>
                        <svg
                          v-if="value.isRight == false"
                          t="1716987085767"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="25745"
                          xmlns:xlink="http://www.w3.org/1999/xlink"
                          width="20"
                          height="20"
                        >
                        <svg v-if="value.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024"
                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
                          xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
                          <path
                            d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                            fill="#d81e06"
                            p-id="25746"
                          ></path>
                            fill="#d81e06" p-id="25746"></path>
                        </svg>
                      </span>

                      <div class="headerConent sitgBox">
                        <p v-if="!value.isUnfold">
                          <span class="analysisColor">展开解析</span
                          ><el-image />
                          <span class="analysisColor">展开解析</span><el-image />
                        </p>
                        <p v-else>
                          <span class="analysisColor">收起解析</span
                          ><el-image />
                          <span class="analysisColor">收起解析</span><el-image />
                        </p>
                      </div>
                    </div>
                  </template>
                  <!-- 解析 -->
                  <div
                    v-if="value.analysisCon"
                    v-html="value.analysisCon"
                  ></div>
                  <div v-if="value.analysisCon" v-html="value.analysisCon"></div>
                  <div v-else>暂无数据</div>
                </el-collapse-item>
                <!-- 主观题 -->
@@ -371,29 +209,20 @@
                  </template>
                  <div class="referBox">
                    <span>参考答案：</span>
                    <p
                      v-html="arrayToString(value.answer)"
                      class="ti-2"
                      :class="[
                        'subjectiveBox',
                        value.isUnfold ? 'showText' : 'hideText',
                      ]"
                    ></p>
                    <span v-html="value.answer" class="ti-2" :class="[
                      'subjectiveBox',
                      value.isUnfold ? 'showText' : 'hideText',
                    ]"></span>
                  </div>
                  <!-- 解析 -->
                  <div class="referBox" v-if="value.analysisCon">
                    <span>解析：</span>
                    <p
                      v-if="value.analysisCon"
                      v-html="value.analysisCon"
                      :class="
                        [
                          'subjectiveBox',
                          'ti-2',
                          value.isUnfold ? 'yincang' : '',
                        ].join(' ')
                      "
                    ></p>
                    <p v-if="value.analysisCon" v-html="value.analysisCon" :class="[
                      'subjectiveBox',
                      'ti-2',
                      value.isUnfold ? 'yincang' : '',
                    ].join(' ')
                      "></p>
                    <p v-else class="ti-2">暂无数据</p>
                  </div>
                </el-collapse-item>
@@ -460,22 +289,18 @@
      </ul>
    </div>
    <div class="bottom-btn" v-if="!loading">
      <el-button class="examinations-btn-box" @click="saveAnswer"
        >保存</el-button
      >
      <el-button
        @click="handleQuestion"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >提交</el-button
      >
      <el-button 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="openAnswers"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >查看答案</el-button
      >
      <el-button @click="(e) => {
        openAnswers();
        saveAnswer(e);
      }
        " class="examinations-btn-box" :style="{ borderColor: primaryColor }">查看答案</el-button>
    </div>
  </div>
</template>
@@ -550,6 +375,7 @@
  watch: {
    cardList: {
      handler(newVal) {
        // console.log('新值',newVal);
        this.cardData = this.cardList;
        if (newVal && newVal.length) {
          this.loading = false;
@@ -676,7 +502,7 @@
      ).errorList;
      for (let index = 0; index < errorId.length; index++) {
        const item = errorId[index];
        if (oldErrodId.indexOf(item == -1)) {
        if (oldErrodId.indexOf(item) == -1) {
          oldErrodId.push(item);
        }
      }
@@ -846,9 +672,10 @@
                (citem) => citem.type == "json"
              ).errorList;
            }
          } catch (error) {}
          } catch (error) { }
          console.log('错题列表', this.allError)
        })
        .catch(() => {});
        .catch(() => { });
    },
  },
};
@@ -859,53 +686,65 @@
  text-indent: 1em !important;
  font-size: 16px;
}

.examination {
  min-height: 100px;

  ul {
    list-style: none;
  }

  p {
    margin: 0;
  }
}

.examinations-btn-box {
  height: 30px;
  width: 78px;
  padding: 4px 10px;
}

.border-box {
  padding-top: 20px;
  // border: 2px solid #e9e9e9;
}

.ti-2 {
  text-indent: 2em !important;
}

.questionContent {
  // display: flex;
  // justify-content: center;
  text-indent: 0em !important;
  margin-left: 20px;

  /deep/ .el-textarea__inner:focus {
    border-color: #15c0f2;
  }
}

.input {
  /deep/ .el-input__inner {
    height: 26px;
  }
}

p {
  margin-top: 0em;
  text-indent: 0em !important;
  line-height: 1.5em;
  font-size: 16px;
}

.colorBox {
  margin: 0 10px 0 23px;
  width: 4px;
  height: 19px;
  background-color: #ff6c00;
}

.textOverFlow {
  overflow: hidden;
  text-overflow: ellipsis;
@@ -917,51 +756,63 @@
  height: 775px;
  padding-bottom: 20px;
}

.question::-webkit-scrollbar {
  width: 3px;
}

/*滚动条滑块*/
.question::-webkit-scrollbar-thumb {
  border-radius: 20px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #333;
}

/*滚动条轨道*/
.question::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
  border-radius: 20px;
  background: #d9d9d9;
}

.paperMargin {
  margin-top: 30px;

  ul li {
    padding: 20px 41px 0px 46px;
  }

  li:last-child {
    padding-bottom: 20px;
  }
}

.paperQuestion {
  padding-left: 12px;
  display: flex;
  align-items: center;
  font-size: 16px;

  .questionText {
    font-size: 16px;
    color: #000;
  }

  span {
    color: #c2c2c2;
  }
}

/** 题干 */
.questionTitle {
  display: flex;
  justify-content: center;

  .titleContent {
    width: 95%;
    display: flex;
    align-items: flex-start;

    .questionNum {
      text-indent: 0 !important;
      margin-right: 5px;
@@ -972,6 +823,7 @@
      color: #333;
      font-weight: bold;
    }

    .titleText {
      text-align: left;
      // padding: 0 10px 10px 0px;
@@ -979,6 +831,7 @@
      font-size: 16px;
      line-height: 32px;
      color: #000;

      span {
        display: inline-block;
        font-size: 16px;
@@ -987,6 +840,7 @@
        font-weight: 400;
        margin-top: 6px;
      }

      input {
        width: 140px;
        height: 24px;
@@ -994,31 +848,38 @@
        outline: none;
        border-bottom: 1px solid #15c0f2;
      }

      /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;
      }
    }
  }

  .collect {
    cursor: pointer;
    width: 21px;
    height: 21px;
  }
}

/** 选项 */
.option {

  .el-radio,
  .el-checkbox {
    // min-height: 32px;
@@ -1030,13 +891,16 @@
    margin-bottom: 6px;
    white-space: pre-wrap !important;
    color: #000;

    /deep/ .el-checkbox__label {
      line-height: 1.5;
    }
  }

  /deep/ .el-radio__inner {
    border-color: #a5a3a3;
  }

  .optionContent {
    margin: 0;
    display: flex;
@@ -1045,14 +909,17 @@
    color: #000;
  }
}

.analysis {
  margin: 20px 0;
  width: 94%;
  // margin-left: 12px;
}

.el-collapse {
  width: 100%;
}

/** 解析 */
.objective {
  /deep/ .el-collapse-item__header {
@@ -1061,6 +928,7 @@
    padding: 0 20px;
    font-size: 16px;
    background-color: #f4f4f4;

    .headerBox {
      width: 100%;
      height: 100%;
@@ -1068,28 +936,34 @@
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .headerConent {
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        p {
          margin-bottom: 0;
        }

        .el-image {
          width: 9px;
          height: 9px;
        }

        .correct {
          color: #1fbc1f;
          width: 180px;
          text-align: left;
          display: flex;

          span:nth-child(1) {
            display: inline-block;
            width: 82px;
          }
        }

        .correctBox {
          width: 100px;
          height: min-content;
@@ -1097,23 +971,28 @@
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1; /* 这里是超出几行省略 */
          -webkit-line-clamp: 1;
          /* 这里是超出几行省略 */
          overflow: hidden;
        }

        .error {
          display: flex;
          text-align: left;
          width: 170px;
          color: #ee1818;

          span {
            height: min-content;
          }

          .errorBox {
            width: 100px;
            // height: 48px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            ::v-deep {
              img {
                max-height: 48px;
@@ -1132,9 +1011,11 @@
    }
  }
}

/deep/ .el-collapse-item__header:focus:not(:hover) {
  color: #333;
}

/deep/ .el-collapse-item__content {
  width: 93%;
  padding: 0 20px;
@@ -1142,16 +1023,20 @@
  font-size: 16px;
  color: #333;
}

/deep/ .el-collapse-item__arrow {
  display: none;
}

.subjectiveItem {
  background-color: #f4f4f4;
  padding: 10px 20px;

  p {
    text-indent: 0em;
  }
}

.subjective {
  /deep/ .el-collapse-item__header {
    height: 80px;
@@ -1163,16 +1048,19 @@
    flex-direction: column;
    justify-content: flex-start;
  }

  .subjectiveTitle {
    width: 80px;
    height: 20px;
    line-height: 20px;
  }

  .subjectiveRefer {
    display: flex;
    align-items: flex-start;
    text-align: left;
  }

  .subjectiveAnswer {
    width: 540px;
    height: 20px;
@@ -1181,31 +1069,39 @@
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 这里是超出几行省略 */
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
    line-height: 20px;
  }

  .analysisDetailBox {
    overflow: hidden;
    max-height: 100px;
    transition: 1s;

    &.open {
      max-height: 500px;
    }

    &.close {
      max-height: 20px;
    }

    .referBox {
      display: flex;
      margin-bottom: 10px;

      span {
        width: 80px;
        color: #999;
      }

      p {
        flex: 1;
        overflow: hidden;
      }

      span,
      p {
        text-indent: 0em;
@@ -1215,30 +1111,37 @@
    }
  }
}

// 选项
.optionImg {
  height: min-content;
  margin-bottom: 6px;

  /deep/ img {
    margin-left: 10px;
    object-fit: contain;
    vertical-align: middle;
  }
}

.optionTxt {
  height: 32px;
}

// 题干仅图片
.stemImg {
  margin: 0 10px 10px 10px;
}

// 文字加图片
.stemTxtAndImage {
  display: flex;
  align-items: flex-start;
}

.titleTextArea {
  ::v-deep {

    img,
    .el-image__inner {
      max-width: 150px !important;
@@ -1247,19 +1150,23 @@
    }
  }
}

.questionAnalysis {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: space-between;

  .analysisAnswer {
    width: 74%;
    display: flex;
  }

  .referAnswer {
    display: inline-block;
    width: 60px;
  }

  .answerContent {
    height: 48px;
    width: 80%;
@@ -1268,64 +1175,80 @@
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 这里是超出几行省略 */
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
  }

  .el-image {
    width: 9px;
    height: 9px;
  }
}

.analysisColor {
  cursor: pointer;
  color: #949494;
  margin-right: 4px;
}

.difficulty {
  display: flex;
  align-items: center;
}

.cartoon {
  animation: spread 1s linear forwards;
}

.downCartoon {
  animation: downSpred 1s linear forwards;
}

.showText {
  animation: showText 1s linear forwards;
}

.hideText {
  animation: hideText 2s linear forwards;
}

@keyframes spread {
  from {
    max-height: 20px;
  }

  to {
    max-height: 500px;

    p {
      flex: 1;
      overflow: hidden;
    }
  }
}

@keyframes downSpred {
  from {
    max-height: 500px;
  }

  to {
    max-height: 20px;
  }
}

@keyframes showText {
  100% {
    height: auto;
  }
}

@keyframes hideText {
  0% {
    height: auto;
  }

  100% {
    height: 20px;
    overflow: hidden;
@@ -1333,15 +1256,18 @@
    white-space: nowrap;
  }
}

.yincang {
  animation: yincang 1s linear forwards;
}

@keyframes yincang {
  from {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  to {
    overflow: auto;
    text-overflow: initial;
@@ -1354,17 +1280,26 @@
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .el-button {
    margin-top: 10px;
  }
}

.radio-img {
  width: 200px;
  object-fit: contain;
}

.collect-png {
  cursor: pointer;
  width: 18px;
  object-fit: contain;
}

/deep/ .examination-math {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>