优化进入考试前的检测的提示信息

src/features/OnlineExam/OnlineExamFaceCheckModal.vue

@@ -4,7 +4,11 @@
       <div class="qm-title-text">人脸识别</div>
       <Icon type="ios-close" class="qm-icon-button" size="24" @click="closeModal" />
     </div>
-    <div style="display: grid; grid-template-columns: 200px 400px 1fr; grid-gap: 5px;">
+    <div style="display: grid; grid-template-columns: 200px 400px 1fr; grid-gap: 5px; position: relative">
+      <!-- TODO: 显示子组件的message -->
+      <!-- <div style="position: absolute; top: -16px; left: 0; width: 100%; height: 50px; background-color: #eee; opacity: 0.8; display: grid; ">
+        <div class="qm-title-text" style="width: 100%; text-algin: center; ">msg</div>
+      </div> -->
       <div class="avatar" :style="{ backgroundImage: `url('${userPhoto}')` }">
         <!-- <img :src="userPhoto" width="200px" height="300px" alt="底照" /> -->
         <div class="avatar-info" style="text-align: center; margin-top: 260px; color: white;">

src/features/OnlineExam/OnlineExamList.vue

@@ -30,6 +30,7 @@
       </tbody>
     </table>
 
+    <Spin size="large" fix v-if="spinShow">{{processingMessage}}</Spin>
     <OnlineExamFaceCheckModal :open="faceCheckModalOpen" :course="selectedCourse"></OnlineExamFaceCheckModal>
   </div>
 </template>
@@ -45,7 +46,12 @@ const { mapState, mapMutations } = createNamespacedHelpers("examHomeModule");
 export default {
   name: "EcsOnlineList",
   data() {
-    return { now: new Date(), selectedCourse: null };
+    return {
+      now: new Date(),
+      selectedCourse: null,
+      spinShow: false,
+      processingMessage: ""
+    };
   },
   props: {
     courses: Array
@@ -69,10 +75,14 @@ export default {
       );
     },
     async enterExam(course) {
+      this.spinShow = true;
+      this.processingMessage = "正在检测IP合法性...";
       const ipLimit = (await this.$http.get(
         "/api/ecs_exam_work/exam/ipLimit/" + course.examId
       )).data;
+      // await new Promise(resolve => setTimeout(() => resolve(), 3000));
       if (ipLimit.limited) {
+        this.spinShow = false;
         this.$Message.error("IP受限，请到中心指定地点进行考试！");
         return;
       }
@@ -81,21 +91,25 @@ export default {
       if (course.faceEnable) {
         // if 人脸检测 && 没有底照，提示，并返回
         if (!this.user.photoPath) {
+          this.spinShow = false;
           this.$Message.info(
             "本场考试需要进行人脸检测，但是您没有上传底照，请联系老师！"
           );
           return;
         }
 
+        this.processingMessage = "正在获取考试设置...";
         const faceLiveness = await this.$http.get(
           "/api/ecs_exam_work/exam/examOrgProperty/" +
             course.examId +
             `/IS_FACE_VERIFY`
         );
         if (faceLiveness.data) {
+          this.processingMessage = "正在检测底照是否满足活体检测标准...";
           const checkBasePhoto = (await this.$http.get(
             "/api/ecs_oe_student/examFaceLivenessVerify/checkFaceLiveness"
           )).data;
+          this.spinShow = false;
           if (!checkBasePhoto.success) {
             this.$Message.error(
               "您上传的底照不符合活体检测的要求，请联系老师！"
@@ -103,7 +117,7 @@ export default {
             return;
           }
         }
-
+        this.spinShow = false;
         // open face check modal, then
         // if 人脸识别失败 && 考试开启强制人脸识别 return
         // if 人脸识别失败 && 考试未开启强制人脸识别
@@ -111,6 +125,7 @@ export default {
         this.selectedCourse = course;
         this.toggleFaceCheckModal(true);
       } else {
+        this.spinShow = false;
         this.$router.push(
           `/online-exam/exam/${course.examId}/overview?examStudentId=${
             course.examStudentId

src/features/OnlinePractice/OnlinePracticeRecordList.vue

@@ -8,11 +8,11 @@
 
     <div class="home">
 
-      <div style="display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px">
+      <div style="display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; text-align: left">
         <div>批次: <span></span></div>
         <div>科目: <span></span></div>
-        <div>平均正确率: <span>{{aveAccuracy}}</span></div>
-        <div>最高正确率: <span>{{maxAccuracy}}</span></div>
+        <div>平均正确率: <span>{{aveAccuracy}}%</span></div>
+        <div>最高正确率: <span>{{maxAccuracy}}%</span></div>
       </div>
 
       <div class="list">