考试中人脸识别UI

src/components/FaceRecognition/FaceRecognition.vue

@@ -2,7 +2,7 @@
   <div>
     <video id="video" ref="video" :width="width" :height="height" autoplay>
     </video>
-    <div style="position: absolute; width: 400px; text-align: center; margin-top: -50px; color: #232323;">
+    <div v-if="showRecognizeButton" style="position: absolute; width: 400px; text-align: center; margin-top: -50px; color: #232323;">
       <span class="verify-button" @click="snap">开始识别</span>
     </div>
   </div>
@@ -25,6 +25,7 @@ export default {
   props: {
     width: String,
     height: String,
+    showRecognizeButton: Boolean,
     closeCamera: Boolean // optional
   },
   async mounted() {

src/features/OnlineExam/Examing/ExamingHome.vue

@@ -15,7 +15,7 @@
         <QuestionNavView :paperStruct="paperStruct" :validQuestions="validQuestions" />
       </div>
       <div class="camera">
-        camera
+        <!-- <FaceRecognition width="100%" height="100%" :showRecognizeButton="false" /> -->
       </div>
     </div>
   </div>
@@ -28,6 +28,7 @@ import QuestionFilters from "./QuestionFilters.vue";
 import QuestionView from "./QuestionView.vue";
 import ArrowNavView from "./ArrowNavView.vue";
 import QuestionNavView from "./QuestionNavView.vue";
+import FaceRecognition from "../../../components/FaceRecognition/FaceRecognition";
 
 export default {
   name: "ExamingHome",
@@ -113,7 +114,8 @@ export default {
       this.nextExamQuestion = this.validQuestions[this.examQuestion.orders];
     },
     async submitPaper() {
-      const res = await this.$http.get("/api/exam_control/submit");
+      //FIXME: submit precondition
+      await this.$http.get("/api/exam_control/submit");
       this.$router.push("/");
     }
   },
@@ -123,7 +125,8 @@ export default {
     QuestionFilters,
     QuestionView,
     ArrowNavView,
-    QuestionNavView
+    QuestionNavView,
+    FaceRecognition
   }
 };
 </script>
@@ -137,10 +140,11 @@ export default {
     "header header"
     "main side";
   grid-template-rows: 80px 1fr;
-  grid-template-columns: 1fr 300px;
+  grid-template-columns: 1fr 400px;
 
   height: 100vh;
 }
+
 .header {
   /* display: flex;
   flex-direction: row; */
@@ -166,6 +170,26 @@ export default {
   display: grid;
 
   grid-area: side;
+
+  grid-template-rows: 1fr 300px;
+
   background-color: #f5f5f5;
 }
+
+.camera {
+  align-self: flex-end;
+  justify-self: flex-end;
+}
+
+@media screen and (max-height: 768px) {
+  .container {
+    grid-template-rows: 50px 1fr;
+  }
+  .header {
+    height: 50px;
+  }
+  .side {
+    grid-template-rows: 1fr 200px;
+  }
+}
 </style>

src/features/OnlineExam/Examing/FillBlankQuestionView.vue

@@ -18,7 +18,19 @@
 export default {
   name: "FillBlankQuestionView",
   data() {
+    return {
+      questionNumber: 0,
+      questionBody: "",
+      stuAnswer: ""
+    };
+  },
+  props: {
+    question: Object,
+    examQuestion: Object
+  },
+  created() {
     const questionNumber = this.question.body.split(/_{5,}/).length - 1;
+    console.log(questionNumber);
 
     const answers = this.examQuestion.stuAnswer
       ? this.examQuestion.stuAnswer.split("##")
@@ -30,15 +42,11 @@ export default {
         (answers.shift() || questionNumber - answers.length) +
         "</span>"
     );
-    return {
-      questionNumber,
-      questionBody,
-      stuAnswer: this.examQuestion.stuAnswer || "##".repeat(questionNumber - 1)
-    };
-  },
-  props: {
-    question: Object,
-    examQuestion: Object
+    this.stuAnswer =
+      this.examQuestion.stuAnswer || "##".repeat(questionNumber - 1);
+
+    this.questionNumber = questionNumber;
+    this.questionBody = questionBody;
   },
   methods: {
     answerQuestion: function(examQuestionId, stuAnswer) {

src/features/OnlineExam/Examing/QuestionNavView.vue

@@ -83,6 +83,8 @@ export default {
 <style scoped>
 .container {
   display: grid;
+  max-height: calc(100vh - 300px - 50px);
+  overflow: scroll;
 }
 .section {
   display: grid;
@@ -114,7 +116,7 @@ export default {
   color: white;
 }
 .current-question {
-  background-color: white;
+  box-shadow: 0 0 15px;
 }
 .current-question > a {
   color: black;
@@ -125,4 +127,16 @@ export default {
 .star-question > a {
   color: white;
 }
+
+@media screen and (max-height: 768px) {
+  .section {
+    margin-bottom: 10px;
+  }
+}
+
+@media screen and (max-height: 720px) {
+  .section {
+    margin-bottom: 5px;
+  }
+}
 </style>

src/features/OnlineExam/Examing/QuestionView.vue

@@ -2,7 +2,7 @@
   <div v-if="question && examQuestion" class="question-view">
     <div class="sign-button">
       <!-- <i-button :icon="examQuestion.isSign ? 'ios-star':'ios-star-outline'" style="color: yellow" size="large" @click="toggleSign"></i-button> -->
-      <Icon :type="examQuestion.isSign ? 'ios-star':'ios-star-outline'" :style="{color: examQuestion.isSign ? '#ffcc00' : 'black'}" class="star" @click="toggleSign" />
+      <Icon :type="examQuestion.isSign ? 'ios-star':'ios-star-outline'" :style="{color: '#ffcc00'}" class="star" @click="toggleSign" />
     </div>
     <template v-if="question.questionType === 'SINGLE_ANSWER_QUESTION'">
       <single-question-view :question="question" :examQuestion="examQuestion" />

src/features/OnlineExam/OnlineExamFaceCheckModal.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <div class="camera">
-        <FaceRecognition v-if="faceCheckModalOpen" width="400" height="300" :close-camera="closeCamera" @on-recognize-result="getFaceRecognitionResult">
+        <FaceRecognition v-if="faceCheckModalOpen" width="400" height="300" :showRecognizeButton="true" :close-camera="closeCamera" @on-recognize-result="getFaceRecognitionResult">
         </FaceRecognition>
       </div>
       <div class="verify-desc qm-primary-text">

tests/vue/child.vue

@@ -0,0 +1,14 @@
+<template>
+  <button @click="$emit('countChange', counte++)">emit value</button>
+</template>
+
+<script>
+export default {
+  name: "child",
+  data() {
+    return {
+      counte: 0
+    };
+  }
+};
+</script>

tests/vue/event.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    test - {{name}}
+
+    <div>
+      <Child @countChange="childListener" />
+      <div>
+        {{globalCount}}
+      </div>
+    </div>
+
+    <div>
+      选择你的理想：(use v-model, :model doesn't work)
+      <input type="checkbox" v-model="dreams" value="sleep"> sleeep
+      <input type="checkbox" v-model="dreams" value="eat"> eeat
+    </div>
+
+    <div>
+      你有多高？
+      <input type="radio" name="height" v-model="height" value="-1.7cm"> 低于一米七
+      <input type="radio" name="height" v-model="height" value="+1.7cm"> 高于一米七
+    </div>
+
+  </div>
+</template>
+
+<script>
+import Child from "./child";
+export default {
+  data() {
+    return {
+      name: "michael",
+      globalCount: 0,
+      dreams: [],
+      height: ""
+    };
+  },
+  methods: {
+    childListener(v) {
+      console.log(v);
+      this.globalCount++;
+    }
+  },
+  components: {
+    Child
+  }
+};
+</script>
+