样式调整

闫增涛

2024-05-09 47b06c613a82cea4066f323437d1275aa0c7c31d

 src/components/examinations/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="examination" v-loading="loading">
    <div v-for="(item, nindex) in cardList" :key="nindex">
    <div v-for="(item, nindex) in cardList" :key="nindex" class="border-box">
      <p class="catalogName">
        <span v-if="nindex == 0">一、</span>
        <span v-if="nindex == 1">二、</span>
@@ -18,7 +18,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 == '听力题'" /> -->
              <!-- 题干 -->
@@ -269,11 +275,11 @@
                      <div class="headerConent sitgBox">
                        <p v-if="!value.isUnfold">
                          <span class="analysisColor">查看解析</span
                          ><el-image :src="chakanIcon" />
                          ><el-image  />
                        </p>
                        <p v-else>
                          <span class="analysisColor">收起解析</span
                          ><el-image :src="packIcon" />
                          ><el-image  />
                        </p>
                      </div>
                    </div>
@@ -353,10 +359,20 @@
    </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 style="height: 34px; padding: 4px 10px">保存</el-button>
      <el-button
        @click="handleQuestion"
        style="border-color: #1eb9ee; height: 34px; padding: 4px 10px"
        >提交</el-button
      >
      <el-button @click="redo" style="height: 34px; padding: 4px 10px"
        >重做</el-button
      >
      <el-button
        @click="openAnswers"
        style="border-color: #1eb9ee; height: 34px; padding: 4px 10px"
        >查看答案</el-button
      >
    </div>
  </div>
</template>
@@ -374,7 +390,7 @@
    };
  },
  mounted() {
    this.getIdPathList()
    this.getIdPathList();
  },
  methods: {
    // 数组转为字符串方法
@@ -424,7 +440,7 @@
      // }
    },
    openAnswers() {
      this.$data.loading = true
      this.$data.loading = true;
      for (let index = 0; index < this.cardList.length; index++) {
        const item = this.cardList[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
@@ -432,7 +448,7 @@
          citem.isComplete = true;
        }
      }
      this.$data.loading = false
      this.$data.loading = false;
    },
    watchParsing(data) {
      data.isUnfold = !data.isUnfold;
@@ -444,7 +460,7 @@
        path: "*",
        queryType: "*",
        productId: this.config.bookId,
        cmsPath: '24080\\63791\\63792\\63807',
        cmsPath: "24080\\63791\\63792\\63807",
        pading: {
          start: 0,
          size: 999,
@@ -680,6 +696,57 @@
        });
      }
    },
    // 批改题目  (练习,我的做题,我的收藏模式下)
    handleQuestion() {
      const list = this.$data.cardList
      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]
                  );
                }
              }
            }
        }
        
      }
      this.$data.cardList = list
    },
  },
};
</script>
@@ -688,12 +755,29 @@
.catalogName {
  color: #00aeef;
  text-indent: 1em !important;
  font-size: 24px;
  font-size: 16px;
}
.examination {
  min-height: 100px;
  ul {
    list-style:none ;
  }
}
.border-box {
  border: 2px solid #e9e9e9;
  border-top: 0;
}
.border-box:first-child {
  border-top:2px solid #e9e9e9 ;
}
.questionContent {
  // display: flex;
  // justify-content: flex-start;
  margin-left: -36px;
}
.input {
  /deep/ .el-input__inner {
    height: 26px;
  }
}
p {
@@ -747,9 +831,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 {
@@ -776,12 +860,12 @@
      text-align: left;
      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;
@@ -799,7 +883,7 @@
        border-top: 0 !important;
        border-left: 0 !important ;
        border-right: 0 !important ;
        border-bottom: 1px solid #000 !important;
        border-bottom: 1px solid #15c0f2 !important;
        border-radius: 0 !important;
      }
      /deep/ .el-input.is-disabled .el-input__inner {
@@ -858,7 +942,7 @@
    min-height: 48px;
    height: min-content;
    padding: 0 20px;
    font-size: 14px;
    font-size: 16px;
    background-color: #f4f4f4;
    .headerBox {
      width: 100%;
@@ -908,7 +992,7 @@
          }
          .errorBox {
            width: 100px;
            height: 48px;
            // height: 48px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
@@ -937,7 +1021,7 @@
  width: 100%;
  padding: 0 20px;
  background-color: #f4f4f4;
  font-size: 14px;
  font-size: 16px;
  color: #333;
}
/deep/ .el-collapse-item__arrow {
@@ -956,7 +1040,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 +1091,7 @@
      span,
      p {
        text-indent: 0em;
        font-size: 14px;
        font-size: 16px;
        line-height: 20px;
      }
    }
@@ -1148,7 +1232,7 @@
}

.bottom-btn {
  margin-top: 50px;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;