From 91cc846ad7f1d9c417260837b54fcd4bb0a0d94f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期一, 17 六月 2024 14:51:27 +0800
Subject: [PATCH] 图书优化

---
 src/components/examinations/index.vue |  665 +++++++++++++++++++++++++++++-------------------------
 1 files changed, 359 insertions(+), 306 deletions(-)

diff --git a/src/components/examinations/index.vue b/src/components/examinations/index.vue
index 9adde9f..f2bdffd 100644
--- a/src/components/examinations/index.vue
+++ b/src/components/examinations/index.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="examination" v-loading="loading">
-    <div v-for="(item, nindex) in cardList" :key="nindex">
-      <p class="catalogName">
+    <div
+      v-for="(item, nindex) in cardData"
+      :key="nindex"
+      class="border-box"
+      v-show="item.infoList.length"
+    >
+      <p class="catalogName" :style="{ color: primaryColor }">
         <span v-if="nindex == 0">涓�銆�</span>
         <span v-if="nindex == 1">浜屻��</span>
         <span v-if="nindex == 2">涓夈��</span>
@@ -18,7 +23,13 @@
           <!-- 鏍囬 -->
           <div class="questionTitle">
             <div class="titleContent">
-              <span class="questionNum" :style="{marginTop:value.questionType == 'completion' ? '12px' : '0'}">{{ index + 1 }}銆�</span>
+              <span
+                class="questionNum"
+                :style="{
+                  marginTop: value.questionType == 'completion' ? '12px' : '0',
+                }"
+                >{{ index + 1 }}.
+              </span>
               <!-- 鍚姏杩涘害鏉� -->
               <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '鍚姏棰�'" /> -->
               <!-- 棰樺共 -->
@@ -57,14 +68,18 @@
                   v-for="(itemText, indexText) in value.stem"
                   :key="indexText"
                 >
-                  <span v-if="typeof itemText == 'string'">{{ itemText }}</span>
+                  <span
+                    v-if="typeof itemText == 'string'"
+                    v-html="itemText"
+                  ></span>
                   <!-- &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>
+                      <!-- 姝g‘閿欒鍥炬爣 -->
+                      <span class="mr-10">
+                        <svg
+                        v-if="value.isRight"
+                        t="1716986419862"
+                        class="icon"
+                        viewBox="0 0 1820 1024"
+                        version="1.1"
+                        xmlns="http://www.w3.org/2000/svg"
+                        p-id="18767"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        width="40"
+                        height="20"
+                      >
+                        <path
+                          d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
+                          fill="#1AFA29"
+                          p-id="18768"
+                        ></path>
+                      </svg>
+                      <svg
+                        v-if="value.isRight == false"
+                        t="1716987085767"
+                        class="icon"
+                        viewBox="0 0 1024 1024"
+                        version="1.1"
+                        xmlns="http://www.w3.org/2000/svg"
+                        p-id="25745"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        width="20"
+                        height="20"
+                      >
+                        <path
+                          d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
+                          fill="#d81e06"
+                          p-id="25746"
+                        ></path>
+                      </svg>
+                      </span>
+
                       <div class="headerConent sitgBox">
                         <p v-if="!value.isUnfold">
-                          <span class="analysisColor">鏌ョ湅瑙f瀽</span
-                          ><el-image :src="chakanIcon" />
+                          <span class="analysisColor">灞曞紑瑙f瀽</span
+                          ><el-image />
                         </p>
                         <p v-else>
                           <span class="analysisColor">鏀惰捣瑙f瀽</span
-                          ><el-image :src="packIcon" />
+                          ><el-image />
                         </p>
                       </div>
                     </div>
@@ -287,12 +351,53 @@
                 </el-collapse-item>
                 <!-- 涓昏棰� -->
               </el-collapse>
-              <div
+              <el-collapse v-else v-model="value.isUnfold" accordion>
+                <el-collapse-item :name="value.id" class="objective">
+                  <template #title>
+                    <div class="headerBox">
+                      <p v-if="!value.isUnfold">
+                        <span class="analysisColor">灞曞紑绛旀涓庤В鏋�</span>
+                      </p>
+                      <p v-else>
+                        <span class="analysisColor">鏀惰捣绛旀涓庤В鏋�</span>
+                      </p>
+                    </div>
+                  </template>
+                  <div class="referBox">
+                    <span>鍙傝�冪瓟妗堬細</span>
+                    <p
+                      v-html="arrayToString(value.answer)"
+                      class="ti-2"
+                      :class="[
+                        'subjectiveBox',
+                        value.isUnfold ? 'showText' : 'hideText',
+                      ]"
+                    ></p>
+                  </div>
+                  <!-- 瑙f瀽 -->
+                  <div class="referBox" v-if="value.analysisCon">
+                    <span>瑙f瀽锛�</span>
+                    <p
+                      v-if="value.analysisCon"
+                      v-html="value.analysisCon"
+                      :class="
+                        [
+                          'subjectiveBox',
+                          'ti-2',
+                          value.isUnfold ? 'yincang' : '',
+                        ].join(' ')
+                      "
+                    ></p>
+                    <p v-else class="ti-2">鏆傛棤鏁版嵁</p>
+                  </div>
+                </el-collapse-item>
+              </el-collapse>
+              <!-- <div
                 v-if="value.questionType == 'shortAnswer'"
                 class="subjective subjectiveItem"
               >
                 <div class="questionAnalysis">
-                  <p class="difficulty">
+                  <p class="difficulty" v-if="value.difficulty">
                     <span style="color: #333">闅惧害绛夌骇锛�</span>
                     <el-rate
                       v-model="value.difficulty"
@@ -306,12 +411,10 @@
                     <span class="analysisColor"
                       >{{
                         value.isUnfold ? "鏀惰捣绛旀鍜岃В鏋�" : "鏌ョ湅绛旀涓庤В鏋�"
-                      }} </span
-                    ><el-image :src="!value.isUnfold ? chakanIcon : packIcon" />
+                      }}
+                    </span>
                   </p>
                 </div>
-                <!-- :class="['analysisDetailBox', value.isUnfold ? 'open' : 'close'].join(' ') -->
-                <!-- :class="['analysisDetailBox', value.isUnfold ? 'cartoon' : 'downCartoon'].join(' ') -->
                 <div
                   :class="
                     [
@@ -322,7 +425,6 @@
                 >
                   <div class="referBox">
                     <span>鍙傝�冪瓟妗堬細</span>
-                    <!-- <p v-html="arrayToString(value.answer)" class="subjectiveBox"></p> -->
                     <p
                       v-html="arrayToString(value.answer)"
                       :class="[
@@ -345,36 +447,86 @@
                     <p v-else>鏆傛棤鏁版嵁</p>
                   </div>
                 </div>
-              </div>
+              </div> -->
             </div>
           </div>
         </li>
       </ul>
     </div>
-
     <div class="bottom-btn" v-if="!loading">
-      <el-button>淇濆瓨</el-button>
-      <el-button @click="openAnswers">鎻愪氦</el-button>
-      <el-button @click="redo">閲嶅仛</el-button>
-      <el-button @click="openAnswers">鏌ョ湅绛旀</el-button>
+      <el-button class="examinations-btn-box" @click="saveAnswer"
+        >淇濆瓨</el-button
+      >
+      <el-button
+        @click="handleQuestion"
+        class="examinations-btn-box"
+        :style="{ borderColor: primaryColor }"
+        >鎻愪氦</el-button
+      >
+      <el-button @click="redo" class="examinations-btn-box">閲嶅仛</el-button>
+      <el-button
+        @click="openAnswers"
+        class="examinations-btn-box"
+        :style="{ borderColor: primaryColor }"
+        >鏌ョ湅绛旀</el-button
+      >
     </div>
   </div>
 </template>
 
 <script>
-import { getPublicImage } from "@/assets/js/middleGround/tool";
+import { Message } from 'element-ui';
 export default {
   name: "examination-option",
-  props: ["productLinkPath"],
+  props: {
+    cardList: {
+      type: Array,
+    },
+    primaryColor: {
+      type: String,
+      default: "#00aeef",
+    },
+    chapter: {
+      type: Number,
+    },
+    page: {
+      type: Number,
+    },
+    isReal: {
+      type: Boolean,
+      default: true,
+    },
+    inputBc: {
+      type: String,
+      default: "#fff",
+    },
+  },
   data() {
     return {
       type: "option",
-      cardList: [],
       loading: false,
+      cardData: [],
+      loading: true,
+      heart:require("@/assets/images/heart.png"),
+      isHeart:require("@/assets/images/heart-check.png"),
     };
   },
+  watch: {
+    cardList: {
+      handler(newVal) {
+        this.cardData = this.cardList;
+        if (newVal && newVal.length) {
+          this.loading = false;
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   mounted() {
-    this.getIdPathList()
+    // this.cardData = this.cardList
+    // console.log('this.cardList',this.cardList);
+    // console.log('this.cardData',this.cardData);
   },
   methods: {
     // 鏁扮粍杞负瀛楃涓叉柟娉�
@@ -409,291 +561,179 @@
       }
     },
     redo() {
-      for (let index = 0; index < this.cardList.length; index++) {
-        const item = this.cardList[index];
+      for (let index = 0; index < this.cardData.length; index++) {
+        const item = this.cardData[index];
         for (let cindex = 0; cindex < item.infoList.length; cindex++) {
           const citem = item.infoList[cindex];
           citem.userAnswer = "";
           citem.isComplete = false;
         }
       }
-      // for (let index = 0; index < this.questionList.length; index++) {
-      //   const item = this.questionList[index];
-      //   item.userAnswer = "";
-      //   item.isComplete = false
-      // }
     },
     openAnswers() {
-      this.$data.loading = true
-      for (let index = 0; index < this.cardList.length; index++) {
-        const item = this.cardList[index];
+      this.$data.loading = true;
+      for (let index = 0; index < this.cardData.length; index++) {
+        const item = this.cardData[index];
         for (let cindex = 0; cindex < item.infoList.length; cindex++) {
           const citem = item.infoList[cindex];
           citem.isComplete = true;
         }
       }
-      this.$data.loading = false
+      this.$data.loading = false;
     },
     watchParsing(data) {
       data.isUnfold = !data.isUnfold;
     },
-    // 鑾峰彇璇曞嵎涓嬮鐩被鍨�
-    getIdPathList() {
-      this.$data.loading = true;
-      let query = {
-        path: "*",
-        queryType: "*",
-        productId: this.config.bookId,
-        cmsPath: '24080\\63791\\63792\\63807',
-        pading: {
-          start: 0,
-          size: 999,
-        },
-      };
-      this.MG.store.getProductDetail(query).then(async (res) => {
-        console.log(this.$props.productLinkPath,res.datas.cmsDatas[0].datas);
-        const idPathList = res.datas.cmsDatas[0].datas;
-        await this.getQuestionList(idPathList);
-      });
-    },
-    // 鑾峰彇棰樺簱棰樼洰
-    async getQuestionList(idPathList, oldData) {
-      let cardList = [];
-      // 娓呯┖姝g‘棰樻暟璁板綍
-      for (let index = 0; index < idPathList.length; index++) {
-        const pathitem = idPathList[index];
-        const pathList = cardList;
-        pathList.push({
-          path: pathitem.productLinkPath,
-          catalogName: pathitem.name,
-          infoList: [],
-        });
-        cardList = pathList;
-        // 鑾峰彇棰樼洰
-        let query = {
-          path: "*",
-          queryType: "*",
-          productId: this.config.bookId,
-          cmsPath: pathitem.productLinkPath,
-          itemFields: {
-            Embedded_QuestionBank_Stem: [],
-            Embedded_QuestionBank_AnalysisCon: [],
-            Embedded_QuestionBank_Answer: [],
-            Embedded_QuestionBank_Option: [],
-            Embedded_QuestionBank_QuestionType: [],
-            Embedded_QuestionBank_StemStyle: [],
-            Embedded_QuestionBank_OptionStyle: [],
-            Embedded_QuestionBank_KnowledgePoint: [],
-            Embedded_QuestionBank_Difficulty: [],
-          },
-          pading: {
-            start: 0,
-            size: 999,
-          },
-        };
-        await this.MG.store.getProductDetail(query).then((res) => {
-          let oldList;
-          if (oldData) {
-            // 鎻愪氦杩囷紝瀛樺湪绛旈璁板綍
-            oldList = oldData.find(
-              (item) => item.path == pathitem.productLinkPath
-            ).infoList;
-            this.setData({
-              submitStatus: true,
-            });
+    // 鎵规敼棰樼洰  (缁冧範,鎴戠殑鍋氶,鎴戠殑鏀惰棌妯″紡涓�)
+    handleQuestion() {
+      const list = this.cardData;
+      for (let index = 0; index < list.length; index++) {
+        const item = list[index];
+        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
+          const citem = item.infoList[cindex];
+          citem.isComplete = true;
+          // 淇敼棰樼洰鐘舵�佷负瀹屾垚
+          citem.isComplete = true;
+          // 鎵规敼棰樼洰
+          if (citem.questionType == "multipleChoice") {
+            // 澶氶�夐
+            if (citem.answer.length == citem.userAnswer.length) {
+              const sortedArr1 = citem.answer.slice().sort();
+              const sortedArr2 = citem.userAnswer.slice().sort();
+              citem.isRight = sortedArr1.every(
+                (value, index) => value === sortedArr2[index]
+              );
+            } else {
+              citem.isRight = false;
+            }
+          } else if (
+            citem.questionType == "singleChoice" ||
+            citem.questionType == "judge"
+          ) {
+            if (citem.id == "63825") console.log("i", item);
+            citem.isRight = citem.answer == citem.userAnswer;
+          } else if (citem.questionType == "shortAnswer") {
+            // 绠�绛� 缈昏瘧
+            citem.isRight = null;
+          } else if (citem.questionType == "completion") {
+            // 濉┖
+            if (typeof citem.answer == "string") {
+              citem.isRight = citem.answer == citem.userAnswer[0];
+            } else {
+              if (citem.answer.length != citem.userAnswer.length) {
+                citem.isRight = false;
+              } else {
+                citem.isRight = citem.answer.every(
+                  (value, index) => value === citem.userAnswer[index]
+                );
+              }
+            }
           }
-          res.datas.cmsDatas[0].datas.forEach((item, index) => {
-            let oldObj = "";
-            if (oldList)
-              oldObj = oldList.find((oldItem) => oldItem.id == item.id);
-            let questionObj = {
-              // num: index, // 棰樺彿
-              id: item.id,
-              type: pathitem.name,
-              stem:
-                item.Embedded_QuestionBank_QuestionType == "completion"
-                  ? JSON.parse(item.Embedded_QuestionBank_Stem)
-                      .stemTxt.replaceAll("<vacancy>", ",input,")
-                      .split(",")
-                  : JSON.parse(item.Embedded_QuestionBank_Stem), // 棰樺共
-              answer: item.Embedded_QuestionBank_Answer, // 绛旀
-              option: item.Embedded_QuestionBank_Option
-                ? JSON.parse(item.Embedded_QuestionBank_Option)
-                : "", // 閫夋嫨棰橀�夐」
-              analysisCon: item.Embedded_QuestionBank_AnalysisCon, // 瑙f瀽
-              questionType: item.Embedded_QuestionBank_QuestionType, // 棰樺瀷
-              optionStyle: item.Embedded_QuestionBank_OptionStyle, // 閫夐」鏄剧ず绫诲瀷
-              stemStyle: item.Embedded_QuestionBank_StemStyle, // 棰樺共鏄剧ず绫诲瀷
-              difficulty: item.Embedded_QuestionBank_Difficulty
-                ? 4 - item.Embedded_QuestionBank_Difficulty
-                : 0, // 闅惧害绛夌骇
-              userAnswer: oldObj
-                ? oldObj.userAnswer
-                : item.Embedded_QuestionBank_QuestionType == "completion" ||
-                  item.Embedded_QuestionBank_QuestionType == "multipleChoice"
-                ? []
-                : "",
-              isUserAnswer: oldObj
-                ? this.isHaveAnswer(oldObj.userAnswer)
-                : false,
-              isRight: oldObj ? oldObj.isRight : null,
-              isComplete: oldObj ? oldObj.isComplete : false,
-              isCollect: false,
-              isUnfold: "", // 鎺у埗瑙f瀽鐨勬姌鍙犻潰鏉挎槸鍚﹀睍寮�
-            };
-            // 澶氶�夊拰濉┖绛旀鑲负鏁扮粍锛岃杞崲JSON鏍煎紡
-            if (
-              questionObj.questionType == "completion" ||
-              questionObj.questionType == "multipleChoice"
-            ) {
-              try {
-                questionObj.answer = JSON.parse(questionObj.answer).toString();
-              } catch (error) {
-                questionObj.answer = item.Embedded_QuestionBank_Answer;
-              }
-            }
-            // 濉┖棰樻敼閫�
-            if (questionObj.questionType == "completion") {
-              let index = 0;
-              for (let i = 0; i < questionObj.stem.length; i++) {
-                const item = questionObj.stem[i];
-                if (item == "input") {
-                  questionObj.stem[i] = {
-                    num: index,
-                    data: "input",
-                  };
-                  if (!oldObj) questionObj.userAnswer[index] = "";
-                  index++;
-                }
-              }
-            }
-            // 棰樺共瀵屾枃鏈鐞�
-            if (questionObj.stemStyle == "RichText") {
-              // questionObj.option.txt = ''
-              questionObj.stem.stemTxt = questionObj.stem.stemTxt
-                .replace(
-                  /\<img/gi,
-                  '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" '
-                )
-                .replace(/\<p/gi, '<p class="stem-rich-p"')
-                .replace("../file", app.config.requestCtx + "/file");
-            }
-            // 閫夐」瀵屾枃鏈鐞�
-            if (
-              questionObj.optionStyle == "RichText" &&
-              (questionObj.questionType == "singleChoice" ||
-                questionObj.questionType == "judge" ||
-                questionObj.questionType == "multipleChoice")
-            ) {
-              questionObj.option.forEach((item) => {
-                if (item.txt)
-                  item.txt = item.txt
-                    .replace(/\<img/gi, '<img class="option-rich-img"')
-                    .replace(/\<p/gi, '<p class="stem-rich-p"')
-                    .replace("../file", app.config.requestCtx + "/file");
-              });
-            }
-            // 瑙f瀽瀵屾枃鏈鐞�
-            if (
-              questionObj.analysisCon &&
-              typeof questionObj.analysisCon == "string"
-            ) {
-              questionObj.analysisCon = questionObj.analysisCon.replace(
-                /\<img/gi,
-                '<img style="max-width: 300rpx !important;object-fit: contain;" class="stem-rich-img" '
-              );
-            }
-            // 鍚姏棰樹慨鏀�
-            // if (questionObj.questionType == 'singleChoice') {
-            //   const src = this.extractSourceSrc(questionObj.stem.stemTxt)
-            //   if (src) {
-            //     questionObj.src = src
-            //     questionObj.stem.stemTxt = this.removeVideoAndAudioTags(questionObj.stem.stemTxt)
-            //   }
-            // }
-            // 鑾峰彇鍥剧墖
-            if (
-              questionObj.stemStyle == "Image" ||
-              questionObj.stemStyle == "TxtAndImage"
-            ) {
-              questionObj.stem.stemImage = getPublicImage(
-                questionObj.stem.stemImage,
-                150
-              );
-            }
-            if (
-              questionObj.optionStyle == "Image" ||
-              questionObj.optionStyle == "TxtAndImage"
-            ) {
-              questionObj.option.forEach((optionItem) => {
-                if (optionItem.img)
-                  optionItem.img = getPublicImage(optionItem.img, 150);
-              });
-            }
-            // 瀹㈣棰樻�诲垎璧嬪��
-            if (questionObj.questionType !== "shortAnswer") {
-              // this.setData({
-              //   subjectiveGrade: this.data.subjectiveGrade + 2,
-              // });
-            }
-            // 鏃ф暟鎹噷 棰樼洰姝g‘ 璁板綍姝g‘鏁伴噺
-            if (questionObj.isRight) {
-              // this.setData({
-              //   correctNum: this.data.correctNum + 1,
-              // });
-            }
-            if (
-              pathitem.name == "鍒ゆ柇棰�" ||
-              pathitem.name == "濉┖棰�" ||
-              pathitem.name == "澶氶�夐" ||
-              pathitem.name == "鍗曢�夐" ||
-              pathitem.name == "鍚姏棰�"
-            ) {
-              if (oldObj) {
-                // this.setData({
-                //   subjectiveTotal: this.data.subjectiveTotal + 1,
-                // });
-              }
-            }
-            // cardList璧嬪��
-            let cardIndex = cardList.findIndex(
-              (item) => item.path == pathitem.productLinkPath
-            );
-            let infoList = cardList[cardIndex].infoList;
-            infoList.push(questionObj);
-            cardList[cardIndex].infoList = infoList;
-            let questionList = [];
-            const cardUpdatedList = cardList;
-            cardUpdatedList.forEach((aitem) => {
-              aitem.infoList.forEach((bitem, bindex) => {
-                questionList.push(bitem);
-                bitem.number = bindex + 1;
-                bitem.score = 2;
-              });
-            });
-            cardList = cardUpdatedList;
-            this.$data.cardList = cardList;
-            this.$data.loading = false;
-            // console.log("棰樼洰鍛�", cardList);
-            // return cardList
-          });
-        });
+        }
+      }
+      this.cardData = list;
+      console.log(this.cardData);
+    },
+    getParentWithClass(element, className) {
+      while (element.parentElement) {
+        element = element.parentElement;
+        if (element.classList.contains(className)) {
+          return element;
+        }
       }
     },
+    // 淇濆瓨鎸夐挳
+    saveAnswer(e) {
+      if (e.srcElement) {
+        const pageNum = this.getParentWithClass(
+          e.srcElement,
+          "page-box"
+        ).getAttribute("page");
+        const oldAnswerData = localStorage.getItem(
+          this.config.activeBook.name + "oldAnswerData"
+        );
+        let oldData = oldAnswerData ? JSON.parse(oldAnswerData) : {};
+        const asnwerList = [];
+        for (let index = 0; index < this.cardData.length; index++) {
+          const item = this.cardData[index];
+          for (let cindex = 0; cindex < item.infoList.length; cindex++) {
+            const citem = item.infoList[cindex];
+            asnwerList.push({
+              id: citem.id,
+              userAnswer: citem.userAnswer,
+            });
+          }
+        }
+        if (oldData[pageNum]) {
+          oldData[pageNum] = oldData[pageNum].filter(
+            (citem) =>
+              asnwerList.findIndex((ditem) => ditem.id == citem.id) == -1
+          );
+          oldData[pageNum].push(...asnwerList);
+        } else {
+          oldData[pageNum] = asnwerList;
+        }
+        localStorage.setItem(
+          this.config.activeBook.name + "oldAnswerData",
+          JSON.stringify(oldData)
+        );
+        Message.success('淇濆瓨鎴愬姛')
+      }
+
+      // if(oldData[this.chapter]) {
+      //   oldData[this.chapter][this.page] = asnwerList
+      // } else {
+      //   oldData[this.chapter] = {}
+      //   oldData[this.chapter][this.page] = asnwerList
+      // }
+      // console.log(oldData);
+    },
+    handleCollect(infoNum,num) {
+      console.log(this.cardData[infoNum].infoList[num]      );
+      this.cardData[infoNum].infoList[num].isCollect = !this.cardData[infoNum].infoList[num].isCollect
+    }
   },
 };
 </script>
 
 <style lang="less" scoped>
 .catalogName {
-  color: #00aeef;
   text-indent: 1em !important;
-  font-size: 24px;
+  font-size: 16px;
 }
 .examination {
   min-height: 100px;
   ul {
-    list-style:none ;
+    list-style: none;
+  }
+  p {
+    margin: 0;
+  }
+}
+.examinations-btn-box {
+  height: 30px;
+  width: 78px;
+  padding: 4px 10px;
+}
+.border-box {
+  padding-top: 20px;
+  // border: 2px solid #e9e9e9;
+}
+.ti-2 {
+  text-indent: 2em !important;
+}
+.questionContent {
+  // display: flex;
+  // justify-content: center;
+  text-indent: 0em !important;
+  margin-left: 20px;
+  /deep/ .el-textarea__inner:focus {
+    border-color: #15c0f2;
+  }
+}
+.input {
+  /deep/ .el-input__inner {
+    height: 26px;
   }
 }
 p {
@@ -747,9 +787,9 @@
   padding-left: 12px;
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: 16px;
   .questionText {
-    font-size: 14px;
+    font-size: 16px;
     color: #000;
   }
   span {
@@ -759,12 +799,14 @@
 /** 棰樺共 */
 .questionTitle {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   .titleContent {
     width: 95%;
     display: flex;
     align-items: flex-start;
     .questionNum {
+      text-indent: 0 !important;
+      margin-right: 5px;
       height: 32px;
       line-height: 32px;
       text-align: center;
@@ -774,33 +816,28 @@
     }
     .titleText {
       text-align: left;
-      padding: 0 10px 10px 0px;
+      // padding: 0 10px 10px 0px;
       min-width: 90%;
-      font-size: 14px;
+      font-size: 16px;
       line-height: 32px;
       color: #000;
       span {
         display: inline-block;
-        font-size: 14px;
+        font-size: 16px;
         // line-height: 26px;
         color: #000;
         font-weight: 400;
         margin-top: 6px;
       }
-      .el-input {
-        width: 150px;
+      input {
+        width: 140px;
         height: 24px;
-        border-top: 0;
+        border: 0;
+        outline: none; 
+        border-bottom: 1px solid #15c0f2;
       }
-      /deep/.el-input__wrapper {
-        border-top: 0 !important;
-      }
-      /deep/ .el-input__inner {
-        border-top: 0 !important;
-        border-left: 0 !important ;
-        border-right: 0 !important ;
-        border-bottom: 1px solid #000 !important;
-        border-radius: 0 !important;
+      /deep/ .el-textarea.is-disabled .el-textarea__inner {
+        background-color: #fff;
       }
       /deep/ .el-input.is-disabled .el-input__inner {
         background-color: #fff;
@@ -832,11 +869,15 @@
     align-items: center;
     min-width: 45%;
     margin-right: 50px;
+    margin-bottom: 6px;
     white-space: pre-wrap !important;
     color: #000;
     /deep/ .el-checkbox__label {
       line-height: 1.5;
     }
+  }
+  /deep/ .el-radio__inner {
+    border-color: #a5a3a3;
   }
   .optionContent {
     margin: 0;
@@ -848,6 +889,8 @@
 }
 .analysis {
   margin: 20px 0;
+  width: 94%;
+  // margin-left: 12px;
 }
 .el-collapse {
   width: 100%;
@@ -858,13 +901,14 @@
     min-height: 48px;
     height: min-content;
     padding: 0 20px;
-    font-size: 14px;
+    font-size: 16px;
     background-color: #f4f4f4;
     .headerBox {
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: space-between;
+      align-items: center;
       flex-wrap: wrap;
       .headerConent {
         height: 100%;
@@ -901,14 +945,14 @@
         .error {
           display: flex;
           text-align: left;
-          width: 180px;
+          width: 170px;
           color: #ee1818;
           span {
             height: min-content;
           }
           .errorBox {
             width: 100px;
-            height: 48px;
+            // height: 48px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
@@ -934,10 +978,10 @@
   color: #333;
 }
 /deep/ .el-collapse-item__content {
-  width: 100%;
+  width: 93%;
   padding: 0 20px;
   background-color: #f4f4f4;
-  font-size: 14px;
+  font-size: 16px;
   color: #333;
 }
 /deep/ .el-collapse-item__arrow {
@@ -956,7 +1000,7 @@
     background-color: #f4f4f4;
     width: 100%;
     padding: 0 20px;
-    font-size: 14px;
+    font-size: 16px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -1007,7 +1051,7 @@
       span,
       p {
         text-indent: 0em;
-        font-size: 14px;
+        font-size: 16px;
         line-height: 20px;
       }
     }
@@ -1148,7 +1192,7 @@
 }
 
 .bottom-btn {
-  margin-top: 50px;
+  margin-top: 25px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
@@ -1156,4 +1200,13 @@
     margin-top: 10px;
   }
 }
+.radio-img {
+  width: 200px;
+  object-fit: contain;
+}
+.collect-png {
+  cursor: pointer;
+  width: 18px;
+  object-fit: contain;
+}
 </style>

--
Gitblit v1.9.1