日常开发

src/assets/styles/index.scss

@@ -1,8 +1,8 @@
 @import 'animate.css';
 
 @font-face {
-  font-family: "Saira Black";
-  src: url('~@/assets/font/SairaBlack.ttf');
+  font-family: 'Saira-ExtraBold';
+  src: url('../fonts/Saira-ExtraBold.ttf') format('truetype');
 }
 
 :root {

src/views/train/index.vue

@@ -3,10 +3,10 @@
     <div class="logo"> <img src="@/assets/images/logo.png">
       </img></div>
     <div class="close" @click="getExit"></div>
-    <div class="menu">
+    <div class="menu" :class="projectList.length <= 6 ? 'menu1' : 'menu2'">
       <swiper :slides-per-view="6" :modules="[Grid]" :grid="{
-      fill: 'column',
-      rows: 2,
+      fill: projectList.length <= 6 ? 'row' : 'column',
+      rows: projectList.length <= 6 ? 1 : 2,
     }" :space-between="20" :slides-per-group="12">
         <swiper-slide v-for="(item, index) in  projectList " :key="index" @click="getOption(item)">
           <div class="li">
@@ -142,7 +142,6 @@ $waiPadding: 6.51rem;
   height: 72vh;
   padding-top: 10rem;
   margin: 0 auto;
-  display: flex;
 
   .li {
     // width: calc((100% / 6) - 1rem + (1rem/6));
@@ -200,6 +199,25 @@ $waiPadding: 6.51rem;
   .swiper-slide {
     border-radius: 1.6rem;
     overflow: hidden;
+  }
+}
+
+.menu1 {
+
+  .swiper-slide:nth-child(odd) {
+    background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+  }
+
+  .swiper-slide:nth-child(even) {
+    background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+  }
+
+}
+
+.menu2 {
+  display: flex;
+
+  .swiper-slide {
 
     &:nth-child(1),
     &:nth-child(4),

src/views/train/test.vue

@@ -34,16 +34,20 @@
             <div class="tips" v-if="examState == 41">
               <img v-if="parameter.gesture" src="@/assets/images/test/ready.png" />
             </div>
-            <div v-if="examState == 43">
-              <div @click="getRetestFace" v-if="examState == 43 || examState == 42">重新识别</div>
-            </div>
-            <div v-if="faceCheckStu.student_id">
-              <div class="chengji">成绩：{{ currentResultObj.count }} {{ unit }}</div>
-              <div>得分：{{ currentResultObj.score }}</div>
-              <div>
-                <div v-if="['jumprope'].includes(parameter.project)">中断</div>
-                <div v-else>犯规</div>
-                <div>{{ currentResultObj.back_num }}</div>
+            <div class="complete" v-if="faceCheckStu.student_id">
+              <div class="scoreBox">
+                <div class="score">{{ currentResultObj.count }}</div>
+                <!-- <div class="unit" v-if="currentResultObj.count">{{ unit }}</div> -->
+              </div>
+              <div class="fractionViolation">
+                <div class="fraction">
+                  <div class="lable">得分：</div>
+                  <div class="value">{{ currentResultObj.score }}</div>
+                </div>
+                <div class="violation">
+                  <div class="lable">{{ ['jumprope'].includes(parameter.project) ? '中断' : '犯规' }}</div>
+                  <div class="value">{{ currentResultObj.back_num }}</div>
+                </div>
               </div>
             </div>
             <div v-if="examState == 42 && backReason.length">
@@ -51,9 +55,10 @@
               <div v-for="(item, index) in backReason" :key="index">{{ item }}</div>
             </div>
             <div v-if="needStart">
-              <div @click="getOpenOneTestAndStartFace" v-if="examState == 3 || examState == 40">开始识别</div>
-              <div @click="getStopFace" v-if="examState == 41">停止人脸识别</div>
-              <div @click="getStartOneTest" v-if="examState == 43">开始测试</div>
+              <!-- <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> -->
@@ -79,7 +84,7 @@
               <div class="txt">
                 <div>
                   <div class="name">{{ item.student_name }}</div>
-                  <div class="className">5年级</div>
+                  <div class="className"></div>
                 </div>
               </div>
             </div>
@@ -235,6 +240,7 @@ const getStopFace = async () => {
   // if (examState.value != 41) {
   //   return false;
   // }
+  speckText(faceCheckStu.value.name + "，请准备");
   await stopFace();
   if (faceCheckStu.value.student_id) {
     getFaceConfirmOnly();
@@ -426,21 +432,20 @@ const initProject = () => {
   //停止计时
   getClearTimer("countdownTimer");
   //自动项目定时进入下一步
-  if (needStart.value == false) {
-    let time = 0;
-    //控制新建测试的时间，第一次快，之后就慢
-    if (!faceCheckStu.value.student_id) {
-      time = 1000;
-    } else {
-      time = 6000;
-    }
-    setTimeout(() => {
-      //再加一个判断以免和再测一次冲突
-      if (examState.value == 3) {
-        getOpenOneTestAndStartFace();
-      }
-    }, time)
+
+  let time = 0;
+  //控制新建测试的时间，第一次快，之后就慢
+  if (!faceCheckStu.value.student_id) {
+    time = 1000;
+  } else {
+    time = 6000;
   }
+  setTimeout(() => {
+    //再加一个判断以免和再测一次冲突
+    if (examState.value == 3) {
+      getOpenOneTestAndStartFace();
+    }
+  }, time)
 };
 
 /**
@@ -811,7 +816,7 @@ $waiPadding: 6.51rem;
           overflow: hidden;
 
           img {
-            height: 100%;
+            width: 100%;
           }
         }
 
@@ -825,8 +830,6 @@ $waiPadding: 6.51rem;
           width: 100%;
           color: #1A293A;
           font-size: 2.21rem;
-
-
         }
 
         .name2 {
@@ -857,6 +860,97 @@ $waiPadding: 6.51rem;
             max-height: 80%;
           }
         }
+
+        .scoreBox {
+          color: #1A293A;
+          display: flex;
+          align-items: center;
+
+          .score {
+            font-family: 'Saira-ExtraBold';
+            font-size: 7.178rem;
+            font-variation-settings: "opsz" auto;
+          }
+
+          .unit {
+            font-size: 2rem;
+            margin-left: 10px;
+          }
+        }
+
+        .fractionViolation {
+          display: flex;
+          align-items: center;
+
+          .fraction {
+            width: 40%;
+            height: 11vh;
+            line-height: 11vh;
+            border-radius: 5.5vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(138deg, #38536C 21%, #1A293A 75%);
+            box-shadow: inset 0px 1px 13px 0px rgba(255, 255, 255, 0.9452);
+
+            .lable {
+              font-size: 1.93rem;
+              color: #13ED84;
+            }
+
+            .value {
+              color: #00FFE8;
+              font-family: 'Saira-ExtraBold';
+              font-size: 6.62rem;
+              font-variation-settings: "opsz" auto;
+            }
+          }
+
+          .violation {
+            height: 8vh;
+            line-height: 8vh;
+            border-radius: 4vh;
+            box-sizing: border-box;
+            border: 0.25rem solid #ED7905;
+            display: flex;
+            align-items: center;
+            margin-left: 11px;
+
+            .lable {
+              font-size: 1.2rem;
+              color: #ffffff;
+              width: 6vh;
+              height: 6vh;
+              line-height: 6vh;
+              background: #ED7905;
+              border-radius: 50%;
+              margin: 0 1vh;
+              text-align: center;
+            }
+
+            .value {
+              color: #ED7905;
+              font-family: 'Saira-ExtraBold';
+              font-size: 3.2rem;
+              font-variation-settings: "opsz" auto;
+            }
+          }
+        }
+
+
+        .btn {
+          font-size: 2.21rem;
+          color: #FFFFFF;
+          text-align: center;
+          width: 50%;
+          line-height: 8vh;
+          line-height: 8vh;
+          border-radius: 15px;
+          opacity: 1;
+          background: radial-gradient(159% 126% at 5% 93%, #F99F02 0%, #ED7905 100%);
+          box-shadow: 3px 6px 4px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
+          cursor: pointer;
+        }
       }
 
       i {
@@ -972,6 +1066,11 @@ $waiPadding: 6.51rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        cursor: pointer;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.4);
+        }
 
         .left {
           display: flex;
@@ -989,7 +1088,7 @@ $waiPadding: 6.51rem;
             margin-right: 13px;
 
             img {
-              height: 100%;
+              width: 100%;
             }
           }
 
@@ -1018,7 +1117,7 @@ $waiPadding: 6.51rem;
           .score {
             color: #ffffff;
             font-size: 1.1rem;
-
+            font-family: 'Saira-ExtraBold';
           }
 
           .unit {