修改闯关答题样式及新增部分逻辑

src/router/index.js

@@ -22,6 +22,21 @@ let routes = [
     name: "answerRecruitResult",
     component: () => import("@/views/home/answer/page-answer-recruit-result")
   }, // 答题结果页
+  {
+    path: "/through-question-start",
+    name: "throughQuestionStart",
+    component: () => import("@/views/home/answer/through/through-question-start")
+  }, // 开始答题闯关
+  {
+    path: "/through-question-end",
+    name: "throughQuestionEnd",
+    component: () => import("@/views/home/answer/through/through-question-end")
+  }, // 结束答题闯关
+  {
+    path: "/through-question-doing",
+    name: "throughQuestionDoing",
+    component: () => import("@/views/home/answer/through/through-question-doing")
+  }, // 答题闯关中
   {
     path: "/ExamDetail",
     name: "ExamDetail",
@@ -83,22 +98,7 @@ let routes = [
     path: "/exam-point-rule",
     name: "examPointRule",
     component: () => import("@/views/home/person/exam-point-rule")
-  }, // 考试积分规则
-  {
-    path: "/through-question-start",
-    name: "throughQuestionStart",
-    component: () => import("@/views/home/exam/through/through-question-start")
-  }, // 开始答题闯关
-  {
-    path: "/through-question-end",
-    name: "throughQuestionEnd",
-    component: () => import("@/views/home/exam/through/through-question-end")
-  }, // 结束答题闯关
-  {
-    path: "/through-question-doing",
-    name: "throughQuestionDoing",
-    component: () => import("@/views/home/exam/through/through-question-doing")
-  } // 答题闯关中
+  } // 考试积分规则
 ];
 
 export default new Router({

src/store/modules/answer.js

@@ -1,7 +1,8 @@
 const answer = {
   state: {
     answerRecruitId: null, // 竞赛答题的类型ID
-    examItemQuestionsList: [] // 单个考试的试题信息
+    examItemQuestionsList: [], // 单个考试的试题信息
+    answerThroughNumber: 0 // 闯关答题的关数
   },
   mutations: {
     updateAnswerItemStore(state, { field, value }) {

src/views/home/answer/page-answer-recruit.vue

@@ -34,7 +34,7 @@
         <div class="exam-question-describe">
           {{
             examQuestionList[answerIndex].questionContent ||
-            examQuestionList[answerIndex].content
+              examQuestionList[answerIndex].content
           }}
         </div>
         <!-- 答题列表 -->
@@ -42,8 +42,9 @@
         <div
           v-if="
             examQuestionList[answerIndex].type === questionType.TrueOrFalse ||
-            examQuestionList[answerIndex].type === questionType.singleChoice ||
-            examQuestionList[answerIndex].type === questionType.multipleChoice
+              examQuestionList[answerIndex].type ===
+                questionType.singleChoice ||
+              examQuestionList[answerIndex].type === questionType.multipleChoice
           "
           class="exam-question-options"
         >
@@ -54,7 +55,7 @@
               'exam-question-options-item': true,
               'exam-question-options-item-checked': answerValue.includes(item),
               'exam-question-options-false':
-                answerValue.includes(item) && answerStatus === 2,
+                answerValue.includes(item) && answerStatus === 2
             }"
             @click="handleExamQuestionOptionsItemFun(item)"
           >
@@ -98,18 +99,23 @@
               class="exam-question-button"
               type="primary"
               color="#0088e9"
+              :disabled="answerValue.length === 0"
               @click="handleSureFun"
               >确定</van-button
             >
           </div>
           <div class="exam-question-single-button-box">
             <van-button
-              v-if="this.answerIndex < this.examQuestionList.length - 1"
+              v-show="examQuestionList[answerIndex].userAnswer.length"
               class="exam-question-button"
               type="primary"
               color="#0088e9"
               @click="handleNextFun"
-              >下一题</van-button
+              >{{
+                this.examQuestionList.length - 1 > this.answerIndex
+                  ? "下一题"
+                  : "完成"
+              }}</van-button
             >
           </div>
         </div>
@@ -121,6 +127,7 @@
               class="exam-question-button"
               type="primary"
               color="#0088e9"
+              :disabled="answerValue.length === 0"
               @click="handleSureFun"
               >确定</van-button
             >
@@ -132,7 +139,11 @@
               type="primary"
               color="#0088e9"
               @click="handleNextFun"
-              >下一题</van-button
+              >{{
+                this.examQuestionList.length - 1 > this.answerIndex
+                  ? "下一题"
+                  : "完成"
+              }}</van-button
             >
           </div>
         </div>
@@ -474,14 +485,12 @@ export default {
     // 操作：上一题
     handleLastFun() {
       let nextIndex = this.answerIndex - 1;
-      if (nextIndex >= this.examQuestionList.length) {
-        this.examsEndFun(); // 结束考试
-        return;
+      if (nextIndex >= 0) {
+        this.handleExamQuestionItemFun(
+          this.examQuestionList[nextIndex],
+          nextIndex
+        );
       }
-      this.handleExamQuestionItemFun(
-        this.examQuestionList[nextIndex],
-        nextIndex
-      );
     },
     // 方法：结束考试
     examsEndFun() {

src/views/home/exam/through/through-question-doing.vue → src/views/home/answer/through/through-question-doing.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="page-exam-question-box">
+  <div class="page-through-question-box">
     <van-nav-bar title="闯关答题" left-arrow @click-left="handleBackFun" />
     <!-- 题目卡片 -->
-    <div class="exam-question-div">
-      <div v-if="examQuestionList.length > 0" class="exam-question-card">
+    <div v-if="answerThroughNumber" class="through-question-div">
+      <div class="through-question-card">
+        <div class="through-question-number">第{{ answerThroughNumber }}关</div>
+      </div>
+    </div>
+    <!-- 题目卡片 -->
+    <div class="through-question-div">
+      <div v-if="examQuestionList.length > 0" class="through-question-card">
         <!-- 标题、分数、题页 -->
-        <div class="exam-question-head">
-          <div class="exam-question-head-left">
-            <div class="exam-question-head-left-icon"></div>
-            <div class="exam-question-head-left-txt">
+        <div class="through-question-head">
+          <div class="through-question-head-left">
+            <div class="through-question-head-left-icon"></div>
+            <div class="through-question-head-left-txt">
               {{ examQuestionList[answerIndex].typeTxt || "undefind" }}
             </div>
             <van-tag
@@ -19,8 +25,8 @@
               >今日必答</van-tag
             >
           </div>
-          <div class="exam-question-head-right">
-            <span class="exam-question-head-right-now">{{
+          <div class="through-question-head-right">
+            <span class="through-question-head-right-now">{{
               answerIndex + 1
             }}</span>
             <span>/</span>
@@ -28,10 +34,10 @@
           </div>
         </div>
         <!-- 描述 -->
-        <div class="exam-question-describe">
+        <div class="through-question-describe">
           {{
             examQuestionList[answerIndex].questionContent ||
-            examQuestionList[answerIndex].content
+              examQuestionList[answerIndex].content
           }}
         </div>
         <!-- 答题列表 -->
@@ -39,19 +45,22 @@
         <div
           v-if="
             examQuestionList[answerIndex].type === questionType.TrueOrFalse ||
-            examQuestionList[answerIndex].type === questionType.singleChoice ||
-            examQuestionList[answerIndex].type === questionType.multipleChoice
+              examQuestionList[answerIndex].type ===
+                questionType.singleChoice ||
+              examQuestionList[answerIndex].type === questionType.multipleChoice
           "
-          class="exam-question-options"
+          class="through-question-options"
         >
           <div
             v-for="(item, index) in examQuestionList[answerIndex].answers"
             :key="index"
             :class="{
-              'exam-question-options-item': true,
-              'exam-question-options-item-checked': answerValue.includes(item),
-              'exam-question-options-false':
-                answerValue.includes(item) && answerStatus === 2,
+              'through-question-options-item': true,
+              'through-question-options-item-checked': answerValue.includes(
+                item
+              ),
+              'through-question-options-false':
+                answerValue.includes(item) && answerStatus === 2
             }"
             @click="handleExamQuestionOptionsItemFun(item)"
           >
@@ -61,8 +70,8 @@
         <!-- 填空题的答题区域 -->
         <div
           v-if="examQuestionList[answerIndex].type === questionType.gapFilling"
-          class="exam-question-gapFilling"
-          :class="{ 'exam-question-gapFilling-false': answerStatus === 2 }"
+          class="through-question-gapFilling"
+          :class="{ 'through-question-gapFilling-false': answerStatus === 2 }"
         >
           <textarea
             v-for="(item, index) in examQuestionList[answerIndex]
@@ -78,67 +87,67 @@
         </div>
         <div
           v-if="answerRecruitId === 'daily-questions'"
-          class="exam-question-button-box"
+          class="through-question-button-box"
         >
-          <div class="exam-question-single-button-box">
-            <van-button
-              v-if="this.answerIndex !== 0"
-              class="exam-question-button"
-              type="primary"
-              color="#0088e9"
-              @click="handleLastFun"
-              >上一题</van-button
-            >
-          </div>
-          <div class="exam-question-single-button-box">
+          <div class="through-question-single-button-box"></div>
+          <div class="through-question-single-button-box">
             <van-button
-              class="exam-question-button"
+              class="through-question-button"
               type="primary"
               color="#0088e9"
+              :disabled="answerValue.length === 0"
               @click="handleSureFun"
               >确定</van-button
             >
           </div>
-          <div class="exam-question-single-button-box">
+          <div class="through-question-single-button-box">
             <van-button
-              v-if="this.answerIndex < this.examQuestionList.length - 1"
-              class="exam-question-button"
+              v-show="examQuestionList[answerIndex].userAnswer.length"
+              class="through-question-button"
               type="primary"
               color="#0088e9"
               @click="handleNextFun"
-              >下一题</van-button
+              >{{
+                this.examQuestionList.length - 1 > this.answerIndex
+                  ? "下一题"
+                  : "完成"
+              }}</van-button
             >
           </div>
         </div>
-        <div v-else class="exam-question-button-box">
-          <div class="exam-question-single-button-box"></div>
-          <div class="exam-question-single-button-box">
+        <div v-else class="through-question-button-box">
+          <div class="through-question-single-button-box">
             <van-button
               v-show="answerStatus === 0"
-              class="exam-question-button"
+              class="through-question-button"
               type="primary"
               color="#0088e9"
+              :disabled="answerValue.length === 0"
               @click="handleSureFun"
               >确定</van-button
             >
           </div>
-          <div class="exam-question-single-button-box">
+          <div class="through-question-single-button-box">
             <van-button
               v-show="answerStatus === 2"
-              class="exam-question-button"
+              class="through-question-button"
               type="primary"
               color="#0088e9"
               @click="handleNextFun"
-              >下一题</van-button
+              >{{
+                this.examQuestionList.length - 1 > this.answerIndex
+                  ? "下一题"
+                  : "完成"
+              }}</van-button
             >
           </div>
         </div>
       </div>
-      <div v-else class="exam-question-card">
-        <div v-if="isInited" class="exam-question-card-nodata">暂无数据</div>
+      <div v-else class="through-question-card">
+        <div v-if="isInited" class="through-question-card-nodata">暂无数据</div>
         <div
           v-else
-          class="exam-question-card-nodata exam-question-card-loading"
+          class="through-question-card-nodata through-question-card-loading"
         >
           加载中...
         </div>
@@ -148,17 +157,17 @@
     <div
       v-if="examQuestionList.length > 0"
       v-show="answerStatus === 2"
-      class="exam-question-div"
+      class="through-question-div"
     >
-      <div class="exam-question-card">
-        <div class="exam-question-result">
+      <div class="through-question-card">
+        <div class="through-question-result">
           正确答案：{{
             formatQuestionFinalAnswerIndex(
               examQuestionList[answerIndex].finalAnswer
             )
           }}
         </div>
-        <div class="exam-question-analysis">
+        <div class="through-question-analysis">
           答案解析：{{ this.examQuestionList[this.answerIndex].answerAnalysis }}
         </div>
       </div>
@@ -189,7 +198,7 @@ export default {
         startTime: 0,
         endTime: 0
       }, // 答题的开始、结束时间
-      answerStatus: 0 // 当前答题状态： 0未作答 1已做答且正确 2已做答但错误
+      answerStatus: 0 // 当前答题状态： 0未作答 1已做答且正确 2已做答但错误  3已完成当前的所有题目作答
     };
   },
   created() {
@@ -200,7 +209,8 @@ export default {
     ...mapState({
       answerRecruitId: state => state.answer.answerRecruitId,
       userInfo: state => state.user.userInfo,
-      chooseEngneeringWork: state => state.user.chooseEngneeringWork
+      chooseEngneeringWork: state => state.user.chooseEngneeringWork,
+      answerThroughNumber: state => state.answer.answerThroughNumber
     })
   },
   methods: {
@@ -418,6 +428,13 @@ export default {
         : 2;
       if (this.answerStatus === 1) {
         this.handleNextFun();
+      } else if (this.answerStatus === 2) {
+        Dialog.alert({
+          message: "本题答错，闯关失败",
+          theme: "round-button"
+        }).then(() => {
+          this.$router.back();
+        });
       }
     },
     // 方法：判断当前题目是否正确
@@ -468,18 +485,6 @@ export default {
         nextIndex
       );
     },
-    // 操作：上一题
-    handleLastFun() {
-      let nextIndex = this.answerIndex - 1;
-      if (nextIndex >= this.examQuestionList.length) {
-        this.examsEndFun(); // 结束考试
-        return;
-      }
-      this.handleExamQuestionItemFun(
-        this.examQuestionList[nextIndex],
-        nextIndex
-      );
-    },
     // 方法：结束考试
     examsEndFun() {
       let curTime = new Date();
@@ -505,7 +510,7 @@ export default {
         .then(res => {
           this.$store.commit("toggleLoading", false);
           this.$router.replace({
-            name: "answerRecruitResult",
+            name: "throughQuestionEnd",
             params: {
               allQuestionsNum: this.examQuestionList.length,
               grades: grades
@@ -549,20 +554,20 @@ export default {
 
 <style lang="scss" scoped>
 @import "~@/styles/mixin";
-.page-exam-question-box {
+.page-through-question-box {
   width: 100%;
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   font-size: 0.6rem;
-  .exam-question-div {
+  .through-question-div {
     padding: 0.5rem 0.5rem;
-    .exam-question-card {
+    .through-question-card {
       padding: 0.5rem 0.5rem;
       background-color: #fff;
       border-radius: 4px;
       box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-      .exam-question-head {
+      .through-question-head {
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -571,53 +576,53 @@ export default {
         padding-bottom: 0.25rem;
         height: 1.25rem;
         font-size: 0.65rem;
-        .exam-question-head-left {
+        .through-question-head-left {
           display: flex;
           align-items: center;
           flex-wrap: nowrap;
-          .exam-question-head-left-icon {
+          .through-question-head-left-icon {
             width: 0.25rem;
             height: 1rem;
             background-color: #0088e9;
           }
-          .exam-question-head-left-txt {
+          .through-question-head-left-txt {
             margin-left: 0.25rem;
             margin-right: 0.25rem;
             font-weight: bold;
           }
         }
-        .exam-question-head-right {
+        .through-question-head-right {
           span {
             color: #666;
           }
-          .exam-question-head-right-now {
+          .through-question-head-right-now {
             font-weight: bold;
             color: #000;
           }
         }
       }
-      .exam-question-describe {
+      .through-question-describe {
         padding: 0.5rem 0;
         font-size: 0.65rem;
       }
-      .exam-question-options {
-        .exam-question-options-item {
+      .through-question-options {
+        .through-question-options-item {
           width: 100%;
           padding: 0.5rem 0.25rem;
           background-color: #f3f3f3;
           margin-bottom: 0.5rem;
           border: 1px solid transparent;
         }
-        .exam-question-options-item-checked {
+        .through-question-options-item-checked {
           border-color: #0088e9;
           color: #0088e9;
         }
-        .exam-question-options-false {
+        .through-question-options-false {
           border-color: red !important;
           background-color: #fedada !important;
         }
       }
-      .exam-question-gapFilling {
+      .through-question-gapFilling {
         padding-top: 0.5rem;
         textarea {
           width: 100%;
@@ -631,25 +636,25 @@ export default {
           }
         }
       }
-      .exam-question-gapFilling-false {
+      .through-question-gapFilling-false {
         textarea {
           border-color: red !important;
           background-color: #fedada !important;
         }
       }
-      .exam-question-button-box {
+      .through-question-button-box {
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
-        .exam-question-single-button-box {
+        .through-question-single-button-box {
           width: 30%;
           padding: 0.5rem 0.5rem;
           display: flex;
           flex-direction: row;
           justify-content: center;
           align-items: center;
-          .exam-question-button {
+          .through-question-button {
             width: 6rem;
             height: auto;
             padding: 0.5rem 0.5rem;
@@ -658,16 +663,16 @@ export default {
           }
         }
       }
-      .exam-question-result {
+      .through-question-result {
         border-bottom: 1px solid #0088e9;
         padding-bottom: 0.25rem;
         font-size: 0.6rem;
       }
-      .exam-question-analysis {
+      .through-question-analysis {
         padding-top: 0.25rem;
       }
-      .exam-question-card-loading,
-      .exam-question-card-nodata {
+      .through-question-card-loading,
+      .through-question-card-nodata {
         width: 100%;
         height: 5rem;
         color: #333;
@@ -676,9 +681,14 @@ export default {
         justify-content: center;
         align-items: center;
       }
-      .exam-question-card-loading {
+      .through-question-card-loading {
         color: #0088e9;
       }
+      .through-question-number {
+        padding: 0.25rem 0;
+        font-size: 0.7rem;
+        text-align: center;
+      }
     }
   }
 }

src/views/home/answer/through/through-question-end.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="page-through-question-item-result-box">
+    <van-nav-bar title="闯关答题" />
+    <div class="through-question-item-result-div">
+      <div
+        v-if="answerThroughNumber < 5"
+        class="through-question-item-result-title"
+      >
+        第{{ answerThroughNumber }}关闯关成功
+      </div>
+      <div v-else class="through-question-success">
+        <div class="through-question-success-title">恭喜，闯关成功</div>
+        <div class="through-question-success-grades">积分+{{ grades }}</div>
+      </div>
+      <div class="through-question-item-detial-button-box">
+        <van-button
+          :class="{
+            'through-question-item-detial-button': true,
+            'through-question-item-detial-button-row': answerThroughNumber >= 5
+          }"
+          type="primary"
+          color="#0088e9"
+          @click="handleBackFun"
+          >返回</van-button
+        >
+        <van-button
+          class="through-question-item-detial-button"
+          v-if="answerThroughNumber < 5"
+          type="primary"
+          color="#0088e9"
+          @click="handleStartThroughFun"
+          >第{{ answerThroughNumber + 1 }}关</van-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "through-question-end",
+  components: {},
+  data() {
+    return {
+      grades: 5
+    };
+  },
+  created() {},
+  mounted() {},
+  computed: {
+    ...mapState({
+      answerThroughNumber: state => state.answer.answerThroughNumber
+    })
+  },
+  methods: {
+    // 操作：返回
+    handleBackFun() {
+      this.$router.back();
+    },
+    // 操作：继续下一关
+    handleStartThroughFun() {
+      this.$store.commit("updateAnswerItemStore", {
+        field: "answerThroughNumber",
+        value: this.answerThroughNumber + 1
+      });
+      this.$router.replace({
+        name: "throughQuestionDoing"
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin";
+.page-through-question-item-result-box {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 0.6rem;
+  .through-question-item-result-div {
+    margin: 0.5rem 0.5rem;
+    border: 1px solid #e4e8eb;
+    background-color: #fff;
+    border-radius: 4px;
+    padding: 0.5rem 0.5rem 1rem;
+    .through-question-item-result-title {
+      font-size: 0.7rem;
+      text-align: center;
+      font-weight: bold;
+    }
+    .through-question-success {
+      .through-question-success-title {
+        font-size: 0.75rem;
+        color: red;
+        text-align: center;
+      }
+      .through-question-success-grades {
+        font-size: 0.65rem;
+        margin-top: 0.5rem;
+      }
+    }
+    .through-question-item-detial-button-box {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 1rem;
+      .through-question-item-detial-button {
+        width: 48%;
+        height: auto;
+        padding: 0.5rem 0.5rem;
+        font-size: 0.65rem;
+      }
+      .through-question-item-detial-button-row {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/home/answer/through/through-question-start.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="through-question-start-box">
+    <van-nav-bar title="答题闯关" />
+    <div class="through-question-start-body">
+      <div class="through-question-item-detial-div">
+        <div class="through-question-item-detial">
+          <div class="through-question-item-detial-title">
+            {{ throughRule.name }}
+          </div>
+          <div class="through-question-item-detial-describe">
+            <span>{{ throughRule.content }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="through-question-item-detial-button-box">
+        <van-button
+          class="through-question-item-detial-button"
+          type="primary"
+          color="#0088e9"
+          @click="handleBackFun"
+          >返回</van-button
+        >
+        <van-button
+          class="through-question-item-detial-button"
+          type="primary"
+          color="#0088e9"
+          @click="handleStartThroughFun"
+          >开始闯关</van-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "through-question-start",
+  components: {},
+  data() {
+    return {
+      throughRule: {
+        name: "闯关规则",
+        content: "每关10道题，一共5关，答对继续，答错出局"
+      }
+    };
+  },
+  created() {
+    // 初始化闯关数为第一关
+    this.$store.commit("updateAnswerItemStore", {
+      field: "answerThroughNumber",
+      value: 1
+    });
+  },
+  computed: {},
+  methods: {
+    // 操作：返回
+    handleBackFun() {
+      this.$router.back();
+    },
+    // 操作：开始闯关
+    handleStartThroughFun() {
+      this.$store.commit("updateAnswerItemStore", {
+        field: "answerRecruitId",
+        value: "daily-questions" // item.id
+      });
+      this.$router.replace({
+        name: "throughQuestionDoing"
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/mixin";
+.through-question-start-box {
+  width: 100%;
+  height: 100%;
+  .through-question-start-body {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    font-size: 0.6rem;
+    .through-question-item-detial-div {
+      padding: 0.5rem 0.5rem;
+      .through-question-item-detial {
+        padding: 0 0.5rem 0.5rem;
+        margin-bottom: 0.7rem;
+        background-color: #fff;
+        border-radius: 4px;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+        .through-question-item-detial-title {
+          padding: 0.5rem 0;
+          border-bottom: 1px solid #e4e8eb;
+          font-size: 0.7rem;
+          font-weight: bold;
+          color: #000;
+          text-align: center;
+        }
+        .through-question-item-detial-describe {
+          margin-top: 0.5rem;
+          font-size: 0.65rem;
+          span {
+            letter-spacing: 0.2rem;
+          }
+        }
+      }
+    }
+    .through-question-item-detial-button-box {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 0.5rem;
+      .through-question-item-detial-button {
+        width: 48%;
+        height: auto;
+        padding: 0.5rem 0.5rem;
+        font-size: 0.65rem;
+      }
+    }
+  }
+}
+</style>

src/views/home/exam/page-exam-item-detail.vue

@@ -1,37 +1,40 @@
 <template>
   <div class="page-exam-item-detial-box">
     <van-nav-bar title="考试详情" />
-    <div class="exam-item-detial-div">
-      <div class="exam-item-detial">
-        <div class="exam-item-detial-title">{{ examItemData.name }}</div>
-        <div class="exam-item-detial-txt">
-          考试时间：{{
-            formateDateTimeFun(examItemData.startTime) || examItemData.startTime
-          }}
-        </div>
-        <div class="exam-item-detial-txt">
-          考试时长：{{ examItemData.examTimeMinsTxt }}
-        </div>
-        <div class="exam-item-detial-describe">
-          考试描述：<span>{{ examItemData.description }}</span>
+    <div class="page-exam-item-detial-body">
+      <div class="exam-item-detial-div">
+        <div class="exam-item-detial">
+          <div class="exam-item-detial-title">{{ examItemData.name }}</div>
+          <div class="exam-item-detial-txt">
+            考试时间：{{
+              formateDateTimeFun(examItemData.startTime) ||
+                examItemData.startTime
+            }}
+          </div>
+          <div class="exam-item-detial-txt">
+            考试时长：{{ examItemData.examTimeMinsTxt }}
+          </div>
+          <div class="exam-item-detial-describe">
+            考试描述：<span>{{ examItemData.description }}</span>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="exam-item-detial-button-box">
-      <van-button
-        class="exam-item-detial-button"
-        type="primary"
-        color="#0088e9"
-        @click="handleStartExamFun"
-        >开始考试</van-button
-      >
-      <van-button
-        class="exam-item-detial-button"
-        type="primary"
-        color="#0088e9"
-        @click="handleBackFun"
-        >返回</van-button
-      >
+      <div class="exam-item-detial-button-box">
+        <van-button
+          class="exam-item-detial-button"
+          type="primary"
+          color="#0088e9"
+          @click="handleBackFun"
+          >返回</van-button
+        >
+        <van-button
+          class="exam-item-detial-button"
+          type="primary"
+          color="#0088e9"
+          @click="handleStartExamFun"
+          >开始考试</van-button
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -90,47 +93,51 @@ export default {
 .page-exam-item-detial-box {
   width: 100%;
   height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  font-size: 0.6rem;
-  .exam-item-detial-div {
-    padding: 0.5rem 0.5rem;
-    .exam-item-detial {
-      padding: 0 0.5rem 0.5rem;
-      margin-bottom: 0.7rem;
-      background-color: #fff;
-      border-radius: 4px;
-      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-      .exam-item-detial-title {
-        padding: 0.5rem 0;
-        border-bottom: 1px solid #e4e8eb;
-        font-size: 0.7rem;
-        font-weight: bold;
-        color: #000;
-      }
-      .exam-item-detial-txt {
-        margin-top: 0.5rem;
-        font-size: 0.65rem;
-      }
-      .exam-item-detial-describe {
-        margin-top: 0.5rem;
-        font-size: 0.65rem;
-        span {
-          letter-spacing: 0.2rem;
+  .page-exam-item-detial-body {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    font-size: 0.6rem;
+    .exam-item-detial-div {
+      padding: 0.5rem 0.5rem;
+      .exam-item-detial {
+        padding: 0 0.5rem 0.5rem;
+        margin-bottom: 0.7rem;
+        background-color: #fff;
+        border-radius: 4px;
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+        .exam-item-detial-title {
+          padding: 0.5rem 0;
+          border-bottom: 1px solid #e4e8eb;
+          font-size: 0.7rem;
+          font-weight: bold;
+          color: #000;
+        }
+        .exam-item-detial-txt {
+          margin-top: 0.5rem;
+          font-size: 0.65rem;
+        }
+        .exam-item-detial-describe {
+          margin-top: 0.5rem;
+          font-size: 0.65rem;
+          span {
+            letter-spacing: 0.2rem;
+          }
         }
       }
     }
-  }
-  .exam-item-detial-button-box {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 0.5rem;
-    .exam-item-detial-button {
-      width: 48%;
-      height: auto;
-      padding: 0.5rem 0.5rem;
-      font-size: 0.65rem;
+    .exam-item-detial-button-box {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 0.5rem;
+      .exam-item-detial-button {
+        width: 48%;
+        height: auto;
+        padding: 0.5rem 0.5rem;
+        font-size: 0.65rem;
+      }
     }
   }
 }

src/views/home/exam/page-exam-item-doing.vue

@@ -98,6 +98,7 @@
             class="exam-question-button"
             type="primary"
             color="#0088e9"
+            :disabled="answerValue.length === 0"
             @click="handleSureFun"
             >确定</van-button
           >

src/views/home/exam/page-exam-item-result.vue

@@ -53,15 +53,17 @@ export default {
     padding: 0.5rem 0.5rem;
     .exam-item-result-title {
       font-size: 0.7rem;
+      text-align: center;
     }
     .exam-item-result-grade {
       font-size: 1.5rem;
       text-align: center;
-      margin: 0.5rem 0;
+      margin-top: 0.5rem;
     }
     .exam-item-detial-button {
       width: 100%;
       height: auto;
+      margin-top: 0.5rem;
       padding: 0.5rem 0.5rem;
       font-size: 0.65rem;
     }

src/views/home/exam/through/through-question-end.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="page-exam-item-detial-box">
-    <van-nav-bar title="答题闯关" />
-    <div>
-      <div>{{ throughRule.name }}</div>
-      <div>
-        <van-button type="primary" color="#0088e9" @click="back"
-          >返回</van-button
-        >
-        <van-button type="primary" color="#0088e9" @click="startThrough"
-          >第{{ throughNum }}关</van-button
-        >
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "through-question-start",
-  components: {},
-  data() {
-    return {
-      throughTitle: "第一关闯关成功",
-      throughNum: "二"
-    };
-  },
-  created() {},
-  computed: {},
-  methods: {
-    back() {
-      this.$router.back();
-    },
-    startThrough() {}
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import "~@/styles/mixin";
-.through-question-start-box {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  font-size: 0.6rem;
-}
-</style>

src/views/home/exam/through/through-question-start.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="page-exam-item-detial-box">
-    <van-nav-bar title="答题闯关" />
-    <div>
-      <div>{{ throughRule.name }}</div>
-      <div>{{ throughRule.content }}</div>
-      <div>
-        <van-button type="primary" color="#0088e9" @click="back"
-          >返回</van-button
-        >
-        <van-button type="primary" color="#0088e9" @click="startThrough"
-          >开始闯关</van-button
-        >
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "through-question-start",
-  components: {},
-  data() {
-    return {
-      throughRule: {
-        name: "闯关规则",
-        content: "每关10道题，一共5关，答对继续，答错出局"
-      }
-    };
-  },
-  created() {},
-  computed: {},
-  methods: {
-    back() {
-      this.$router.back();
-    },
-    startThrough() {
-      this.$store.commit("updateAnswerItemStore", {
-        field: "answerRecruitId",
-        value: "daily-questions" // item.id
-      });
-      this.$router.push({ name: "answerRecruit" });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import "~@/styles/mixin";
-.through-question-start-box {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  font-size: 0.6rem;
-}
-</style>