日常开发

src/assets/styles/index.scss

@@ -5,13 +5,18 @@
   src: url('../fonts/Saira-ExtraBold.ttf') format('truetype');
 }
 
+@font-face {
+  font-family: 'Saira-BlackItalic';
+  src: url('../fonts/Saira-BlackItalic.ttf') format('truetype');
+}
+
 :root {
   font-size: calc(100vw / 106);
 }
 
 body {
   margin: 0;
-  background: radial-gradient(87% 87% at 9% -34%, #315F7E 0%, #0F1926 100%);
+  background: radial-gradient(87% 87% at 9% -34%, #315f7e 0%, #0f1926 100%);
   width: 100%;
   height: 100vh;
   overflow: hidden;
@@ -26,4 +31,3 @@ ol {
 ul li {
   list-style: none;
 }
-

src/components/ChooseStudent/index.vue

@@ -26,7 +26,7 @@
                 @row-dblclick="confirm" highlight-current-row>
                 <el-table-column label="头像" width="120">
                   <template #default="scope">
-                    <el-avatar :src="scope.row.face_pic ||scope.row.logo_url" />
+                    <el-avatar :src="scope.row.face_pic || scope.row.logo_url" />
                   </template>
                 </el-table-column>
                 <el-table-column prop="className" label="班级" width="180" />
@@ -140,7 +140,7 @@ const getStudent = () => {
         let classObj = classList.value.find((items: any) => {
           return items.id == item.class_id;
         })
-        item.className = classObj.name;
+        item.className = classObj?.name || "";
         item.genderName = item.gender == 1 ? "男" : "女";
         item.student_id = item.id;
         return item;

src/components/FaceWindow/index.vue

@@ -8,24 +8,17 @@
       :leave-active-class="faceCheckStu.student_id ? proxy?.animate.face.leave : proxy?.animate.face.leave2">
       <div class="confirmDiaBg" v-show="faceState">
         <div class="confirmDiaWindow">
-          <div class="confirmDiaWindow-title">
-            提示
-            <div class="cancelBtn" @click="close"></div>
-          </div>
-          <div class="confirmDiaWindow-prompt">
-            {{
-      faceCheckStu.student_id
-        ? "识别成功"
-        : "请进行人脸识别"
-    }}
-          </div>
           <div class="confirmDiaWindow-con">
-            <div class="pic">
+            <div class="pic" :class="{ 'pic2': faceCheckStu.student_id }" v-if="faceCheckStu.student_id"> <img
+                :src="faceCheckStu.face_pic || faceCheckStu.logo_url" /></div>
+            <div class="pic" v-else>
               <div class="shine">
-                <img src="@/assets/images/shine.png">
-                </img>
+                <img src="@/assets/images/shine.png" />
               </div>
-              <el-avatar :src="faceCheckStu.logo_url || faceCheckStu.face_pic" />
+              <img src="@/assets/images/test/profilePicture.png" />
+            </div>
+            <div class="name" :class="{ 'name2': faceCheckStu.student_id }">
+              {{ faceCheckStu.student_id ? faceCheckStu.name : "请进行人脸识别" }}
             </div>
           </div>
         </div>
@@ -97,83 +90,78 @@ defineExpose({
   z-index: 999;
 
   .confirmDiaWindow {
-    width: 90%;
+    width: 23.5%;
+    height: 43.4%;
+    border-radius: 29px;
+    opacity: 1;
+    background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: fixed;
-    box-sizing: border-box;
-    background: #ffffff;
-    border-radius: 30rpx;
-    overflow: hidden;
-
-    .confirmDiaWindow-title {
-      width: 100%;
-      height: 12vh;
-      line-height: 12vh;
-      color: #009699;
-      font-size: 5vh;
-      text-align: center;
-      position: relative;
-      margin-bottom: 2vh;
-
-      .cancelBtn {
-        width: 12vh;
-        height: 12vh;
-        background: url('@/assets/images/close.png') center center no-repeat;
-        background-size: 50% 50%;
-        position: absolute;
-        right: 0;
-        top: 0;
-        transform: rotate(45deg);
-      }
-    }
-
-    .confirmDiaWindow-prompt {
-      text-align: center;
-      font-size: 4vh;
-      line-height: 1;
-    }
 
     .confirmDiaWindow-con {
-      padding: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 5vh 0 10vh 0;
-
       .pic {
-        width: 19vh;
-        height: 19vh;
-        overflow: hidden;
+        width: 22.3vh;
+        height: 22.3vh;
         border-radius: 50%;
-        border: 4rpx solid #ffffff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
         position: relative;
+        margin: 0 auto 2vh auto;
 
         .shine {
           position: absolute;
-          left: 0;
-          top: -19vh;
-          width: 19vh;
-          height: 19vh;
+          left: -4vh;
+          top: 0;
+          width: 4vh;
+          height: 22.3vh;
           animation: shineani 3s infinite;
           -webkit-animation: shineani 3s infinite;
           z-index: 1;
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
         }
 
-        .image {
+        img {
           width: 100%;
-          height: 100%;
         }
       }
+
+      .pic2 {
+        box-sizing: border-box;
+        border: 0.44rem solid rgba(26, 41, 58, 0.6315);
+      }
+
+      .name {
+        width: 100%;
+        color: #1A293A;
+        font-size: 2.21rem;
+      }
+
+      .name2 {
+        padding: 0 0.3rem;
+        border-radius: 1.1rem;
+        background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
+      }
     }
   }
 }
 
 @keyframes shineani {
   0% {
-    top: -19vh;
+    left: -4vh;
   }
 
   100% {
-    top: 19vh;
+    left: 26.3vh;
   }
 }
 </style>

src/utils/animate.ts

@@ -14,7 +14,7 @@ const dialog = {
 
 const face = {
   enter: animatePrefix + 'animate__fadeIn',
-  leave: animatePrefix + 'animate__fadeOutLeft',
+  leave: animatePrefix + 'animate__zoomOutLeft',
   leave2: animatePrefix + 'animate__fadeOut'
 };
 

src/views/train/test.vue

@@ -28,9 +28,9 @@
             </div>
           </div>
           <div class="top-right">
-            <div v-if="needStart && [42, 43].includes(examState)">{{
-      countdownNumFormat
-    }}</div>
+            <div class="time" v-if="needStart && [42, 43].includes(examState)">{{
+              time.countdownNum
+              }}</div>
             <div class="tips" v-if="examState == 41">
               <img v-if="parameter.gesture" src="@/assets/images/test/ready1.png" />
               <img v-if="!parameter.gesture" src="@/assets/images/test/ready2.png" />
@@ -55,12 +55,13 @@
               <div>违规项</div>
               <div v-for="(item, index) in backReason" :key="index">{{ item }}</div>
             </div>
-            <div v-if="needStart">
-              <!-- <div class="btn" @click="getOpenOneTestAndStartFace" v-if="examState == 3 || examState == 40">开始识别</div> -->
-              <!-- <div class="btn" @click="getStopFace" v-if="examState == 41 && !parameter.gesture">停止人脸识别</div> -->
-              <div class="btn" @click="getStartOneTest" v-if="examState == 43">开始测试</div>
-              <!-- <div @click="getRetestFace" v-if="examState == 43 || examState == 42">重新识别</div> -->
-            </div>
+            <div class="btn" @click="getStartOneTest" v-if="needStart && examState == 43">开始测试</div>
+            <!-- <div v-if="needStart"> -->
+            <!-- <div class="btn" @click="getOpenOneTestAndStartFace" v-if="examState == 3 || examState == 40">开始识别</div> -->
+            <!-- <div class="btn" @click="getStopFace" v-if="examState == 41 && !parameter.gesture">停止人脸识别</div> -->
+            <!-- <div class="btn" @click="getStartOneTest" v-if="examState == 43">开始测试</div> -->
+            <!-- <div @click="getRetestFace" v-if="examState == 43 || examState == 42">重新识别</div> -->
+            <!-- </div> -->
             <!-- <div>当前状态：({{ examState == 3 ? "初始化完成" : examState == 40 ? "创建测试" : examState == 41 ? "正在人脸识别":examState == 43 ? "停止人脸识别" : examState == 42 ? "正在测试" : "请初始化" }})</div> -->
             <!-- <div @click="getAgain" v-if="examState == 42 || showTestAgain">再测一次</div> -->
           </div>
@@ -72,14 +73,13 @@
             <div class="pic"><img :src="'/src/assets/images/test/tips/' + parameter.project + '.png'" /></div>
           </div>
           <div class="bottom-right" v-html="dic.projectNote[parameter.project]">
-
           </div>
         </div>
       </div>
       <div class="main-right">
         <div class="title">测试记录</div>
         <ul>
-          <li v-for="(item, index) in  reportList " :key="index">
+          <li v-for="(item, index) in reportList " :key="index">
             <div class="left">
               <div class="pic"><img :src="item.face_pic || item.logo_url" /></div>
               <div class="txt">
@@ -454,10 +454,10 @@ const initProject = () => {
 /**
  * 时间转换
 */
-const countdownNumFormat = computed(() => {
-  return time.value.countdownNum;
-  //return proxy?.$utils.timeFormat(time.value.countdownNum);
-});
+// const countdownNumFormat = computed(() => {
+//   return time.value.countdownNum;
+//   //return proxy?.$utils.timeFormat(time.value.countdownNum);
+// });
 
 /**
  * 倒计时
@@ -794,14 +794,12 @@ $waiPadding: 6.51rem;
       display: flex;
       justify-content: space-between;
       height: 55.8%;
-      overflow: hidden;
       position: relative;
 
       .top-left {
         width: 37.4%;
         height: 100%;
         border-radius: 29px;
-        opacity: 1;
         background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
         text-align: center;
         display: flex;
@@ -809,39 +807,42 @@ $waiPadding: 6.51rem;
         justify-content: center;
         cursor: pointer;
 
-        .pic {
-          width: 22.3vh;
-          height: 22.3vh;
-          margin-bottom: 2vh;
-          border-radius: 50%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          overflow: hidden;
+        .top-left-center {
+          .pic {
+            width: 22.3vh;
+            height: 22.3vh;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            margin: 0 auto 2vh auto;
 
-          img {
-            width: 100%;
+            img {
+              width: 100%;
+            }
           }
-        }
 
 
-        .pic2 {
-          box-sizing: border-box;
-          border: 0.44rem solid rgba(26, 41, 58, 0.6315);
-        }
+          .pic2 {
+            box-sizing: border-box;
+            border: 0.44rem solid rgba(26, 41, 58, 0.6315);
+          }
 
-        .name {
-          width: 100%;
-          color: #1A293A;
-          font-size: 2.21rem;
-        }
+          .name {
+            width: 100%;
+            color: #1A293A;
+            font-size: 2.21rem;
+          }
 
-        .name2 {
-          padding: 0 0.3rem;
-          border-radius: 1.1rem;
-          background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
-          box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
+          .name2 {
+            padding: 0 0.3rem;
+            border-radius: 1.1rem;
+            background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+            box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
+          }
         }
+
       }
 
       .top-right {
@@ -852,6 +853,29 @@ $waiPadding: 6.51rem;
         background: #ffffff;
         box-sizing: border-box;
         border: 0.55rem solid #13ED84;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        position: relative;
+
+        .time {
+          width: 28vh;
+          height: 28vh;
+          line-height: 28vh;
+          border-radius: 50%;
+          color: #FF9402;
+          font-size: 11vh;
+          text-align: center;
+          background-image: url("@/assets/images/test/time.png");
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          position: absolute;
+          right: -1.5vh;
+          top: -11vh;
+          font-family: 'Saira-BlackItalic';
+        }
 
         .tips {
           display: flex;
@@ -865,15 +889,24 @@ $waiPadding: 6.51rem;
           }
         }
 
+        .complete {
+          padding-top: 5vh;
+          padding-left: 20%;
+          width: 100%;
+        }
+
         .scoreBox {
+
+          height: 10vh;
           color: #1A293A;
           display: flex;
           align-items: center;
+          margin-bottom: 5vh;
 
           .score {
-            font-family: 'Saira-ExtraBold';
             font-size: 7.178rem;
-            font-variation-settings: "opsz" auto;
+            font-family: 'Saira-BlackItalic';
+
           }
 
           .unit {
@@ -883,8 +916,10 @@ $waiPadding: 6.51rem;
         }
 
         .fractionViolation {
+          height: 10vh;
           display: flex;
           align-items: center;
+          margin-bottom: 5vh;
 
           .fraction {
             width: 40%;
@@ -903,10 +938,10 @@ $waiPadding: 6.51rem;
             }
 
             .value {
-              color: #00FFE8;
-              font-family: 'Saira-ExtraBold';
               font-size: 6.62rem;
-              font-variation-settings: "opsz" auto;
+              color: #00FFE8;
+              font-family: 'Saira-BlackItalic';
+
             }
           }
 
@@ -933,10 +968,9 @@ $waiPadding: 6.51rem;
             }
 
             .value {
-              color: #ED7905;
-              font-family: 'Saira-ExtraBold';
               font-size: 3.2rem;
-              font-variation-settings: "opsz" auto;
+              color: #ED7905;
+              font-family: 'Saira-BlackItalic';
             }
           }
         }