图书优化

闫增涛

2024-06-17 91cc846ad7f1d9c417260837b54fcd4bb0a0d94f

 src/components/examinations/index.vue

@@ -1,7 +1,12 @@
<template>
  <div class="examination" v-loading="loading">
    <div v-for="(item, nindex) in cardList" :key="nindex">
      <p class="catalogName">
    <div
      v-for="(item, nindex) in cardData"
      :key="nindex"
      class="border-box"
      v-show="item.infoList.length"
    >
      <p class="catalogName" :style="{ color: primaryColor }">
        <span v-if="nindex == 0">一、</span>
        <span v-if="nindex == 1">二、</span>
        <span v-if="nindex == 2">三、</span>
@@ -18,7 +23,13 @@
          <!-- 标题 -->
          <div class="questionTitle">
            <div class="titleContent">
              <span class="questionNum" :style="{marginTop:value.questionType == 'completion' ? '12px' : '0'}">{{ index + 1 }}、</span>
              <span
                class="questionNum"
                :style="{
                  marginTop: value.questionType == 'completion' ? '12px' : '0',
                }"
                >{{ index + 1 }}.
              </span>
              <!-- 听力进度条 -->
              <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '听力题'" /> -->
              <!-- 题干 -->
@@ -57,14 +68,18 @@
                  v-for="(itemText, indexText) in value.stem"
                  :key="indexText"
                >
                  <span v-if="typeof itemText == 'string'">{{ itemText }}</span>
                  <span
                    v-if="typeof itemText == 'string'"
                    v-html="itemText"
                  ></span>
                  <!-- &nbsp; -->
                  <el-input
                  <input
                    v-else
                    type="text"
                    class="input"
                    v-model.trim="value.userAnswer[itemText.num]"
                    :disabled="value.isComplete"
                    :style="{backgroundColor:inputBc}"
                  />
                  <!-- &nbsp; -->
                </span>
@@ -77,6 +92,7 @@
                v-cloak
              ></p>
            </div>
            <img :src="value.isCollect ? isHeart : heart" alt="" class="collect-png" @click="handleCollect(nindex,index)" >
            <!-- 收藏 -->
          </div>
          <div class="questionContent">
@@ -113,7 +129,14 @@
                    :src="getPublicImage(content.img, 115)"
                    v-show="content.img"
                    :preview-src-list="[getPublicImage(content.img)]"
                    v-if="isReal"
                  ></el-image>
                  <img
                    :src="content.img"
                    alt=""
                    v-if="!isReal"
                    class="radio-img"
                  />
                </p>
                <p
                  class="optionContent"
@@ -200,7 +223,8 @@
            "
          ></TEditorVue> -->
            <el-input
              style="width: 90%; margin: 0 auto"
              :disabled="value.isComplete"
              style="width: 94%; margin: 0 auto"
              v-else-if="value.questionType == 'shortAnswer'"
              type="textarea"
              :rows="6"
@@ -266,14 +290,54 @@
                          disabled-void-color="#949494"
                        />
                      </p>
                      <!-- 正确错误图标 -->
                      <span class="mr-10">
                        <svg
                        v-if="value.isRight"
                        t="1716986419862"
                        class="icon"
                        viewBox="0 0 1820 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="18767"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="40"
                        height="20"
                      >
                        <path
                          d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                          fill="#1AFA29"
                          p-id="18768"
                        ></path>
                      </svg>
                      <svg
                        v-if="value.isRight == false"
                        t="1716987085767"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="25745"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="20"
                        height="20"
                      >
                        <path
                          d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                          fill="#d81e06"
                          p-id="25746"
                        ></path>
                      </svg>
                      </span>

                      <div class="headerConent sitgBox">
                        <p v-if="!value.isUnfold">
                          <span class="analysisColor">查看解析</span
                          ><el-image :src="chakanIcon" />
                          <span class="analysisColor">展开解析</span
                          ><el-image />
                        </p>
                        <p v-else>
                          <span class="analysisColor">收起解析</span
                          ><el-image :src="packIcon" />
                          ><el-image />
                        </p>
                      </div>
                    </div>
@@ -287,12 +351,53 @@
                </el-collapse-item>
                <!-- 主观题 -->
              </el-collapse>
              <div
              <el-collapse v-else v-model="value.isUnfold" accordion>
                <el-collapse-item :name="value.id" class="objective">
                  <template #title>
                    <div class="headerBox">
                      <p v-if="!value.isUnfold">
                        <span class="analysisColor">展开答案与解析</span>
                      </p>
                      <p v-else>
                        <span class="analysisColor">收起答案与解析</span>
                      </p>
                    </div>
                  </template>
                  <div class="referBox">
                    <span>参考答案：</span>
                    <p
                      v-html="arrayToString(value.answer)"
                      class="ti-2"
                      :class="[
                        'subjectiveBox',
                        value.isUnfold ? 'showText' : 'hideText',
                      ]"
                    ></p>
                  </div>
                  <!-- 解析 -->
                  <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-else class="ti-2">暂无数据</p>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <!-- <div
                v-if="value.questionType == 'shortAnswer'"
                class="subjective subjectiveItem"
              >
                <div class="questionAnalysis">
                  <p class="difficulty">
                  <p class="difficulty" v-if="value.difficulty">
                    <span style="color: #333">难度等级：</span>
                    <el-rate
                      v-model="value.difficulty"
@@ -306,12 +411,10 @@
                    <span class="analysisColor"
                      >{{
                        value.isUnfold ? "收起答案和解析" : "查看答案与解析"
                      }} </span
                    ><el-image :src="!value.isUnfold ? chakanIcon : packIcon" />
                      }}
                    </span>
                  </p>
                </div>
                <!-- :class="['analysisDetailBox', value.isUnfold ? 'open' : 'close'].join(' ') -->
                <!-- :class="['analysisDetailBox', value.isUnfold ? 'cartoon' : 'downCartoon'].join(' ') -->
                <div
                  :class="
                    [
@@ -322,7 +425,6 @@
                >
                  <div class="referBox">
                    <span>参考答案：</span>
                    <!-- <p v-html="arrayToString(value.answer)" class="subjectiveBox"></p> -->
                    <p
                      v-html="arrayToString(value.answer)"
                      :class="[
@@ -345,36 +447,86 @@
                    <p v-else>暂无数据</p>
                  </div>
                </div>
              </div>
              </div> -->
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="bottom-btn" v-if="!loading">
      <el-button>保存</el-button>
      <el-button @click="openAnswers">提交</el-button>
      <el-button @click="redo">重做</el-button>
      <el-button @click="openAnswers">查看答案</el-button>
      <el-button class="examinations-btn-box" @click="saveAnswer"
        >保存</el-button
      >
      <el-button
        @click="handleQuestion"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >提交</el-button
      >
      <el-button @click="redo" class="examinations-btn-box">重做</el-button>
      <el-button
        @click="openAnswers"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >查看答案</el-button
      >
    </div>
  </div>
</template>

<script>
import { getPublicImage } from "@/assets/js/middleGround/tool";
import { Message } from 'element-ui';
export default {
  name: "examination-option",
  props: ["productLinkPath"],
  props: {
    cardList: {
      type: Array,
    },
    primaryColor: {
      type: String,
      default: "#00aeef",
    },
    chapter: {
      type: Number,
    },
    page: {
      type: Number,
    },
    isReal: {
      type: Boolean,
      default: true,
    },
    inputBc: {
      type: String,
      default: "#fff",
    },
  },
  data() {
    return {
      type: "option",
      cardList: [],
      loading: false,
      cardData: [],
      loading: true,
      heart:require("@/assets/images/heart.png"),
      isHeart:require("@/assets/images/heart-check.png"),
    };
  },
  watch: {
    cardList: {
      handler(newVal) {
        this.cardData = this.cardList;
        if (newVal && newVal.length) {
          this.loading = false;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.getIdPathList()
    // this.cardData = this.cardList
    // console.log('this.cardList',this.cardList);
    // console.log('this.cardData',this.cardData);
  },
  methods: {
    // 数组转为字符串方法
@@ -409,291 +561,179 @@
      }
    },
    redo() {
      for (let index = 0; index < this.cardList.length; index++) {
        const item = this.cardList[index];
      for (let index = 0; index < this.cardData.length; index++) {
        const item = this.cardData[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          citem.userAnswer = "";
          citem.isComplete = false;
        }
      }
      // for (let index = 0; index < this.questionList.length; index++) {
      //   const item = this.questionList[index];
      //   item.userAnswer = "";
      //   item.isComplete = false
      // }
    },
    openAnswers() {
      this.$data.loading = true
      for (let index = 0; index < this.cardList.length; index++) {
        const item = this.cardList[index];
      this.$data.loading = true;
      for (let index = 0; index < this.cardData.length; index++) {
        const item = this.cardData[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          citem.isComplete = true;
        }
      }
      this.$data.loading = false
      this.$data.loading = false;
    },
    watchParsing(data) {
      data.isUnfold = !data.isUnfold;
    },
    // 获取试卷下题目类型
    getIdPathList() {
      this.$data.loading = true;
      let query = {
        path: "*",
        queryType: "*",
        productId: this.config.bookId,
        cmsPath: '24080\\63791\\63792\\63807',
        pading: {
          start: 0,
          size: 999,
        },
      };
      this.MG.store.getProductDetail(query).then(async (res) => {
        console.log(this.$props.productLinkPath,res.datas.cmsDatas[0].datas);
        const idPathList = res.datas.cmsDatas[0].datas;
        await this.getQuestionList(idPathList);
      });
    },
    // 获取题库题目
    async getQuestionList(idPathList, oldData) {
      let cardList = [];
      // 清空正确题数记录
      for (let index = 0; index < idPathList.length; index++) {
        const pathitem = idPathList[index];
        const pathList = cardList;
        pathList.push({
          path: pathitem.productLinkPath,
          catalogName: pathitem.name,
          infoList: [],
        });
        cardList = pathList;
        // 获取题目
        let query = {
          path: "*",
          queryType: "*",
          productId: this.config.bookId,
          cmsPath: pathitem.productLinkPath,
          itemFields: {
            Embedded_QuestionBank_Stem: [],
            Embedded_QuestionBank_AnalysisCon: [],
            Embedded_QuestionBank_Answer: [],
            Embedded_QuestionBank_Option: [],
            Embedded_QuestionBank_QuestionType: [],
            Embedded_QuestionBank_StemStyle: [],
            Embedded_QuestionBank_OptionStyle: [],
            Embedded_QuestionBank_KnowledgePoint: [],
            Embedded_QuestionBank_Difficulty: [],
          },
          pading: {
            start: 0,
            size: 999,
          },
        };
        await this.MG.store.getProductDetail(query).then((res) => {
          let oldList;
          if (oldData) {
            // 提交过，存在答题记录
            oldList = oldData.find(
              (item) => item.path == pathitem.productLinkPath
            ).infoList;
            this.setData({
              submitStatus: true,
            });
    // 批改题目  (练习,我的做题,我的收藏模式下)
    handleQuestion() {
      const list = this.cardData;
      for (let index = 0; index < list.length; index++) {
        const item = list[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          citem.isComplete = true;
          // 修改题目状态为完成
          citem.isComplete = true;
          // 批改题目
          if (citem.questionType == "multipleChoice") {
            // 多选题
            if (citem.answer.length == citem.userAnswer.length) {
              const sortedArr1 = citem.answer.slice().sort();
              const sortedArr2 = citem.userAnswer.slice().sort();
              citem.isRight = sortedArr1.every(
                (value, index) => value === sortedArr2[index]
              );
            } else {
              citem.isRight = false;
            }
          } else if (
            citem.questionType == "singleChoice" ||
            citem.questionType == "judge"
          ) {
            if (citem.id == "63825") console.log("i", item);
            citem.isRight = citem.answer == citem.userAnswer;
          } else if (citem.questionType == "shortAnswer") {
            // 简答 翻译
            citem.isRight = null;
          } else if (citem.questionType == "completion") {
            // 填空
            if (typeof citem.answer == "string") {
              citem.isRight = citem.answer == citem.userAnswer[0];
            } else {
              if (citem.answer.length != citem.userAnswer.length) {
                citem.isRight = false;
              } else {
                citem.isRight = citem.answer.every(
                  (value, index) => value === citem.userAnswer[index]
                );
              }
            }
          }
          res.datas.cmsDatas[0].datas.forEach((item, index) => {
            let oldObj = "";
            if (oldList)
              oldObj = oldList.find((oldItem) => oldItem.id == item.id);
            let questionObj = {
              // num: index, // 题号
              id: item.id,
              type: pathitem.name,
              stem:
                item.Embedded_QuestionBank_QuestionType == "completion"
                  ? JSON.parse(item.Embedded_QuestionBank_Stem)
                      .stemTxt.replaceAll("<vacancy>", ",input,")
                      .split(",")
                  : JSON.parse(item.Embedded_QuestionBank_Stem), // 题干
              answer: item.Embedded_QuestionBank_Answer, // 答案
              option: item.Embedded_QuestionBank_Option
                ? JSON.parse(item.Embedded_QuestionBank_Option)
                : "", // 选择题选项
              analysisCon: item.Embedded_QuestionBank_AnalysisCon, // 解析
              questionType: item.Embedded_QuestionBank_QuestionType, // 题型
              optionStyle: item.Embedded_QuestionBank_OptionStyle, // 选项显示类型
              stemStyle: item.Embedded_QuestionBank_StemStyle, // 题干显示类型
              difficulty: item.Embedded_QuestionBank_Difficulty
                ? 4 - item.Embedded_QuestionBank_Difficulty
                : 0, // 难度等级
              userAnswer: oldObj
                ? oldObj.userAnswer
                : item.Embedded_QuestionBank_QuestionType == "completion" ||
                  item.Embedded_QuestionBank_QuestionType == "multipleChoice"
                ? []
                : "",
              isUserAnswer: oldObj
                ? this.isHaveAnswer(oldObj.userAnswer)
                : false,
              isRight: oldObj ? oldObj.isRight : null,
              isComplete: oldObj ? oldObj.isComplete : false,
              isCollect: false,
              isUnfold: "", // 控制解析的折叠面板是否展开
            };
            // 多选和填空答案肯为数组，要转换JSON格式
            if (
              questionObj.questionType == "completion" ||
              questionObj.questionType == "multipleChoice"
            ) {
              try {
                questionObj.answer = JSON.parse(questionObj.answer).toString();
              } catch (error) {
                questionObj.answer = item.Embedded_QuestionBank_Answer;
              }
            }
            // 填空题改造
            if (questionObj.questionType == "completion") {
              let index = 0;
              for (let i = 0; i < questionObj.stem.length; i++) {
                const item = questionObj.stem[i];
                if (item == "input") {
                  questionObj.stem[i] = {
                    num: index,
                    data: "input",
                  };
                  if (!oldObj) questionObj.userAnswer[index] = "";
                  index++;
                }
              }
            }
            // 题干富文本处理
            if (questionObj.stemStyle == "RichText") {
              // questionObj.option.txt = ''
              questionObj.stem.stemTxt = questionObj.stem.stemTxt
                .replace(
                  /\<img/gi,
                  '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" '
                )
                .replace(/\<p/gi, '<p class="stem-rich-p"')
                .replace("../file", app.config.requestCtx + "/file");
            }
            // 选项富文本处理
            if (
              questionObj.optionStyle == "RichText" &&
              (questionObj.questionType == "singleChoice" ||
                questionObj.questionType == "judge" ||
                questionObj.questionType == "multipleChoice")
            ) {
              questionObj.option.forEach((item) => {
                if (item.txt)
                  item.txt = item.txt
                    .replace(/\<img/gi, '<img class="option-rich-img"')
                    .replace(/\<p/gi, '<p class="stem-rich-p"')
                    .replace("../file", app.config.requestCtx + "/file");
              });
            }
            // 解析富文本处理
            if (
              questionObj.analysisCon &&
              typeof questionObj.analysisCon == "string"
            ) {
              questionObj.analysisCon = questionObj.analysisCon.replace(
                /\<img/gi,
                '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" '
              );
            }
            // 听力题修改
            // if (questionObj.questionType == 'singleChoice') {
            //   const src = this.extractSourceSrc(questionObj.stem.stemTxt)
            //   if (src) {
            //     questionObj.src = src
            //     questionObj.stem.stemTxt = this.removeVideoAndAudioTags(questionObj.stem.stemTxt)
            //   }
            // }
            // 获取图片
            if (
              questionObj.stemStyle == "Image" ||
              questionObj.stemStyle == "TxtAndImage"
            ) {
              questionObj.stem.stemImage = getPublicImage(
                questionObj.stem.stemImage,
                150
              );
            }
            if (
              questionObj.optionStyle == "Image" ||
              questionObj.optionStyle == "TxtAndImage"
            ) {
              questionObj.option.forEach((optionItem) => {
                if (optionItem.img)
                  optionItem.img = getPublicImage(optionItem.img, 150);
              });
            }
            // 客观题总分赋值
            if (questionObj.questionType !== "shortAnswer") {
              // this.setData({
              //   subjectiveGrade: this.data.subjectiveGrade + 2,
              // });
            }
            // 旧数据里 题目正确 记录正确数量
            if (questionObj.isRight) {
              // this.setData({
              //   correctNum: this.data.correctNum + 1,
              // });
            }
            if (
              pathitem.name == "判断题" ||
              pathitem.name == "填空题" ||
              pathitem.name == "多选题" ||
              pathitem.name == "单选题" ||
              pathitem.name == "听力题"
            ) {
              if (oldObj) {
                // this.setData({
                //   subjectiveTotal: this.data.subjectiveTotal + 1,
                // });
              }
            }
            // cardList赋值
            let cardIndex = cardList.findIndex(
              (item) => item.path == pathitem.productLinkPath
            );
            let infoList = cardList[cardIndex].infoList;
            infoList.push(questionObj);
            cardList[cardIndex].infoList = infoList;
            let questionList = [];
            const cardUpdatedList = cardList;
            cardUpdatedList.forEach((aitem) => {
              aitem.infoList.forEach((bitem, bindex) => {
                questionList.push(bitem);
                bitem.number = bindex + 1;
                bitem.score = 2;
              });
            });
            cardList = cardUpdatedList;
            this.$data.cardList = cardList;
            this.$data.loading = false;
            // console.log("题目呢", cardList);
            // return cardList
          });
        });
        }
      }
      this.cardData = list;
      console.log(this.cardData);
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    // 保存按钮
    saveAnswer(e) {
      if (e.srcElement) {
        const pageNum = this.getParentWithClass(
          e.srcElement,
          "page-box"
        ).getAttribute("page");
        const oldAnswerData = localStorage.getItem(
          this.config.activeBook.name + "oldAnswerData"
        );
        let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {};
        const asnwerList = [];
        for (let index = 0; index < this.cardData.length; index++) {
          const item = this.cardData[index];
          for (let cindex = 0; cindex < item.infoList.length; cindex++) {
            const citem = item.infoList[cindex];
            asnwerList.push({
              id: citem.id,
              userAnswer: citem.userAnswer,
            });
          }
        }
        if (oldData[pageNum]) {
          oldData[pageNum] = oldData[pageNum].filter(
            (citem) =>
              asnwerList.findIndex((ditem) => ditem.id == citem.id) == -1
          );
          oldData[pageNum].push(...asnwerList);
        } else {
          oldData[pageNum] = asnwerList;
        }
        localStorage.setItem(
          this.config.activeBook.name + "oldAnswerData",
          JSON.stringify(oldData)
        );
        Message.success('保存成功')
      }

      // if(oldData[this.chapter]) {
      //   oldData[this.chapter][this.page] = asnwerList
      // } else {
      //   oldData[this.chapter] = {}
      //   oldData[this.chapter][this.page] = asnwerList
      // }
      // console.log(oldData);
    },
    handleCollect(infoNum,num) {
      console.log(this.cardData[infoNum].infoList[num]      );
      this.cardData[infoNum].infoList[num].isCollect = !this.cardData[infoNum].infoList[num].isCollect
    }
  },
};
</script>

<style lang="less" scoped>
.catalogName {
  color: #00aeef;
  text-indent: 1em !important;
  font-size: 24px;
  font-size: 16px;
}
.examination {
  min-height: 100px;
  ul {
    list-style:none ;
    list-style: none;
  }
  p {
    margin: 0;
  }
}
.examinations-btn-box {
  height: 30px;
  width: 78px;
  padding: 4px 10px;
}
.border-box {
  padding-top: 20px;
  // border: 2px solid #e9e9e9;
}
.ti-2 {
  text-indent: 2em !important;
}
.questionContent {
  // display: flex;
  // justify-content: center;
  text-indent: 0em !important;
  margin-left: 20px;
  /deep/ .el-textarea__inner:focus {
    border-color: #15c0f2;
  }
}
.input {
  /deep/ .el-input__inner {
    height: 26px;
  }
}
p {
@@ -747,9 +787,9 @@
  padding-left: 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-size: 16px;
  .questionText {
    font-size: 14px;
    font-size: 16px;
    color: #000;
  }
  span {
@@ -759,12 +799,14 @@
/** 题干 */
.questionTitle {
  display: flex;
  justify-content: space-between;
  justify-content: center;
  .titleContent {
    width: 95%;
    display: flex;
    align-items: flex-start;
    .questionNum {
      text-indent: 0 !important;
      margin-right: 5px;
      height: 32px;
      line-height: 32px;
      text-align: center;
@@ -774,33 +816,28 @@
    }
    .titleText {
      text-align: left;
      padding: 0 10px 10px 0px;
      // padding: 0 10px 10px 0px;
      min-width: 90%;
      font-size: 14px;
      font-size: 16px;
      line-height: 32px;
      color: #000;
      span {
        display: inline-block;
        font-size: 14px;
        font-size: 16px;
        // line-height: 26px;
        color: #000;
        font-weight: 400;
        margin-top: 6px;
      }
      .el-input {
        width: 150px;
      input {
        width: 140px;
        height: 24px;
        border-top: 0;
        border: 0;
        outline: none; 
        border-bottom: 1px solid #15c0f2;
      }
      /deep/.el-input__wrapper {
        border-top: 0 !important;
      }
      /deep/ .el-input__inner {
        border-top: 0 !important;
        border-left: 0 !important ;
        border-right: 0 !important ;
        border-bottom: 1px solid #000 !important;
        border-radius: 0 !important;
      /deep/ .el-textarea.is-disabled .el-textarea__inner {
        background-color: #fff;
      }
      /deep/ .el-input.is-disabled .el-input__inner {
        background-color: #fff;
@@ -832,11 +869,15 @@
    align-items: center;
    min-width: 45%;
    margin-right: 50px;
    margin-bottom: 6px;
    white-space: pre-wrap !important;
    color: #000;
    /deep/ .el-checkbox__label {
      line-height: 1.5;
    }
  }
  /deep/ .el-radio__inner {
    border-color: #a5a3a3;
  }
  .optionContent {
    margin: 0;
@@ -848,6 +889,8 @@
}
.analysis {
  margin: 20px 0;
  width: 94%;
  // margin-left: 12px;
}
.el-collapse {
  width: 100%;
@@ -858,13 +901,14 @@
    min-height: 48px;
    height: min-content;
    padding: 0 20px;
    font-size: 14px;
    font-size: 16px;
    background-color: #f4f4f4;
    .headerBox {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .headerConent {
        height: 100%;
@@ -901,14 +945,14 @@
        .error {
          display: flex;
          text-align: left;
          width: 180px;
          width: 170px;
          color: #ee1818;
          span {
            height: min-content;
          }
          .errorBox {
            width: 100px;
            height: 48px;
            // height: 48px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
@@ -934,10 +978,10 @@
  color: #333;
}
/deep/ .el-collapse-item__content {
  width: 100%;
  width: 93%;
  padding: 0 20px;
  background-color: #f4f4f4;
  font-size: 14px;
  font-size: 16px;
  color: #333;
}
/deep/ .el-collapse-item__arrow {
@@ -956,7 +1000,7 @@
    background-color: #f4f4f4;
    width: 100%;
    padding: 0 20px;
    font-size: 14px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
@@ -1007,7 +1051,7 @@
      span,
      p {
        text-indent: 0em;
        font-size: 14px;
        font-size: 16px;
        line-height: 20px;
      }
    }
@@ -1148,7 +1192,7 @@
}

.bottom-btn {
  margin-top: 50px;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
@@ -1156,4 +1200,13 @@
    margin-top: 10px;
  }
}
.radio-img {
  width: 200px;
  object-fit: contain;
}
.collect-png {
  cursor: pointer;
  width: 18px;
  object-fit: contain;
}
</style>