日常开发

src/components/MultipleItem/index.vue

@@ -494,6 +494,13 @@ watch(() => faceCheckStu.value, (newVal, oldVal) => {
   emit('returnData', { faceCheckStu: faceCheckStu.value, area: area });
 }, { deep: true });
 
+/**
+ * 测试ID抛给父组件
+*/
+watch(() => resultId.value, (newVal, oldVal) => {
+  emit('returnData', { resultId: resultId.value, area: area });
+}, { deep: true });
+
 /**
  * 如果总流程结束了个别区仍然在43就重新执行一次，用于没有开的区自动复位
 */

src/views/train/multiple copy.vue

@@ -0,0 +1,1833 @@
+<template>
+  <div>
+    <Header @confirmExit="confirmExit"></Header>
+    <Transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
+      <div class="time" :class="{ 'time1': styleType == 1, 'time2': styleType == 2, 'time3': styleType == 3 }"
+        v-show="needStart && [42].includes(examState)">{{
+          time.countdownNum
+        }}</div>
+    </Transition>
+    <div class="main">
+      <div class="testBox"
+        :class="{ 'testBox1': styleType == 1, 'testBox2': styleType == 2, 'testBox3': styleType == 3 }">
+        <div class="ul"
+          :class="{ 'overlap': (examState == 43 && time.ready) || [42].includes(examState) || (showTestAgain && ![41].includes(examState)), 'ready': [41].includes(examState), 'hands': parameter.gesture }"
+          v-for="(items, indexs) in testListArr " :key="indexs">
+          <MultipleItem :ref="(el: any) => { multipleItemRef(el, item.itemNumber, item.area) }"
+            v-for="(item, index) in items" :query="parameter" :area="item.area" :key="index" @returnData="returnData"
+            @getChooseStudent="getChooseStudent" :examState="examState" :needStart="needStart" :styleType="styleType" />
+        </div>
+      </div>
+    </div>
+    <div class="footerBtn">
+      <template v-if="needStart">
+        <div class="btn" @click="getAgain" v-if="examState == 42 || showTestAgain">再测一次</div>
+        <div class="btn" @click="getOpenOneTestAndStartFace" v-if="examState < 41">开始识别</div>
+        <div class="btn" @click="getStopFace" v-if="examState == 41">停止人脸识别</div>
+        <div class="btn startBtn" @click="getReady" v-if="examState == 43">开始测试</div>
+        <div class="btn" @click="getAllRetestFace" v-if="examState == 43 || examState == 42">重新识别</div>
+      </template>
+      <template v-else>
+        <div class="btn startBtn" @click="getReady" v-if="examState == 43">开始测试</div>
+      </template>
+      <div class="btn" :class="{ testRecordBtn: showReportList }" @click="getTestRecord"
+        v-if="![43, 42].includes(examState)">
+        {{ showReportList ? '关闭记录' : '测试记录' }}
+      </div>
+      <!--测试记录开始-->
+      <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+        <div class="mask mask2" v-show="showReportList" @click="getTestRecord"></div>
+      </Transition>
+      <Transition :enter-active-class="proxy?.animate.report.enter" :leave-active-class="proxy?.animate.report.leave">
+        <div class="main-right" v-show="showReportList">
+          <ReportList ref="reportListRef" :parameter="parameter" :showQRCode="true" />
+        </div>
+      </Transition>
+      <!--测试记录结束-->
+    </div>
+    <!--倒计时开始-->
+    <div>
+      <Transition :enter-active-class="proxy?.animate.mask.enter" :leave-active-class="proxy?.animate.mask.leave">
+        <div class="mask" v-show="examState == 43 && time.ready"></div>
+      </Transition>
+      <Transition :enter-active-class="proxy?.animate.face.enter" :leave-active-class="proxy?.animate.face.leave2">
+        <div class="confirmDiaBg" v-show="examState == 43 && time.ready">
+          <div class="confirmDiaWindow">
+            <div class="readyBox">
+              <div class="lable">倒计时</div>
+              <div class="value" :class="{ 'transparent': time.ready > 5 }">{{ time.ready }}</div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </div>
+    <!--倒计时结束-->
+    <ChooseStudent ref="chooseStudentRef" @returnData="returnStudent" />
+  </div>
+</template>
+
+<script setup name="Multiple" lang="ts">
+import { useWs } from '@/utils/trainWs';
+// import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
+import { initSpeech, speckText, playMusic, controlMusic, speckCancel, chineseNumber } from '@/utils/speech'
+import { useWebSocket } from '@/utils/handWs';
+const { handWs, startDevice, startHand, stateHand } = useWebSocket();
+const { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } = useWs();
+const { proxy } = getCurrentInstance() as any;
+const router = useRouter();
+const route = useRoute();
+const reportListRef = ref();
+const chooseStudentRef = ref();
+const data = reactive<any>({
+  timerManager: {},//计时器管理
+  parameter: {},//参数
+  time: {
+    testTime: 60,//时长
+    countdownNum: 0,//计时
+    ready: 0,//预备
+    exit: 0,//退出倒计时
+  },
+  userInfo: {},//用户信息
+  examState: 0,//当前状态
+  needStart: false,//是否需要按钮
+  showTestAgain: false,//再测一次按钮
+  testList: [],//获取区列表
+  multipleItemRefList: [],//获取区列表
+  styleType: null,//展示样式1：1-5个，2：6-10个，3：10个以上
+  showReportList: false,//显示隐藏测试记录
+  exit: 0,//退出响应次数
+  sid: null,//WS的id
+  chooseStudentArea: '',//弹出手动选择对应的区号
+  device_info: {},//设备信息
+});
+const { timerManager, parameter, time, userInfo, examState, needStart, showTestAgain, testList, multipleItemRefList, styleType, showReportList, exit, sid, chooseStudentArea, device_info } = toRefs(data);
+
+/**
+ * 创建组件实例
+*/
+const multipleItemRef = (el: any, index: number, area: any) => {
+  el.area = area;
+  multipleItemRefList.value[index - 1] = el;
+}
+
+/**
+ * 开始识别
+*/
+const getOpenOneTestAndStartFace = () => {
+  cleanData();
+  examState.value = 41;
+  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
+  //   multipleItemRefList.value[i].getOpenOneTestAndStartFace()
+  // }
+  for (let i: any = 0; i < testList.value.length; i++) {
+    getOpenOneTestAndStartFaceList(testList.value[i])
+  }
+};
+
+/**
+ * 开始识别
+*/
+const getOpenOneTestAndStartFaceList = async (data: any) => {
+  let project: any = parameter.value.project;
+  let area: any = data.area;
+  let examId: string = `${project}_${area}`; //项目+区
+  if (area == null || area == "") {
+    return false;
+  }
+  console.log("examId", examId)
+  if (examState.value > 3) {
+    await closeOneTest(examId);
+  }
+  await openOneTest(examId);
+  await startFace(examId);
+};
+
+/**
+ * 停止人脸识别
+*/
+const getStopFace = async () => {
+  let flag = false;
+  for (let i = 0; i < testList.value.length; i++) {
+    if (testList.value[i] && testList.value[i].faceCheckStu?.student_id) {
+      flag = true;
+    }
+  }
+  if (!flag) {
+    proxy?.$modal.msgWarning("请选择人员！");
+    return false;
+  }
+  examState.value = 43;
+  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
+  //   multipleItemRefList.value[i].getStopFace()
+  // }
+  for (let i: any = 0; i < testList.value.length; i++) {
+    getStopFaceList(testList.value[i])
+  }
+};
+
+/**
+ * 停止人脸识别
+*/
+const getStopFaceList = async (data: any) => {
+  let project: any = parameter.value.project;
+  let area: any = data.area;
+  let examId: string = `${project}_${area}`; //项目+区
+  if (area == null || area == "") {
+    return false;
+  }
+  // 旧版识别成功直接43了这里先屏蔽
+  // if (examState.value != 41) {
+  //   return false;
+  // }
+  if (data.examState == 41) {
+    await stopFace(examId);
+  }
+  if (data.faceCheckStu.student_id) {
+    getFaceConfirmOnlyList(data);
+  }
+};
+
+/**
+ * 确定人脸信息
+*/
+const getFaceConfirmOnlyList = (data?: any) => {
+  let project: any = parameter.value.project;
+  let area: any = data.area;
+  let examId: string = `${project}_${area}`; //项目+区
+  if (area == null || area == "") {
+    return false;
+  }
+  faceConfirmOnly({
+    exam_id: examId,
+    result_id: data.resultId,
+    student_id: data.faceCheckStu.student_id,
+    gender: data.faceCheckStu.gender
+  }, () => {
+  });
+};
+
+/**
+ * 开始测试
+*/
+const getStartOneTest = () => {
+  if (examState.value != 43) {
+    return false;
+  }
+  let flag = false;
+  for (let i = 0; i < testList.value.length; i++) {
+    if (testList.value[i] && testList.value[i].faceCheckStu?.student_id) {
+      flag = true;
+    }
+  }
+  if (!flag) {
+    proxy?.$modal.msgWarning("请选择人员！");
+    return false;
+  }
+  getClearTimer("readyTimer");
+  time.value.ready = 0;
+  examState.value = 42;
+  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
+  //   if (testList.value[i].examState == 41) {
+  //     //正在识别的停止识别
+  //     multipleItemRefList.value[i].getStopFace()
+  //   }
+  //   if (testList.value[i].examState == 43) {
+  //     multipleItemRefList.value[i].getStartOneTest()
+  //   }
+  // }
+  for (let i: any = 0; i < testList.value.length; i++) {
+    if (testList.value[i].examState == 41) {
+      //正在识别的停止识别
+      getStopFaceList(testList.value[i])
+    }
+    if (testList.value[i].examState == 43) {
+      getStartOneTestList(testList.value[i])
+    }
+  }
+  speckText("哨声");
+  if (parameter.value.music) {
+    playMusic(parameter.value.music);
+  }
+  //显示再测一次按钮
+  showTestAgain.value = true;
+  //时间为0的为正计时，大于0的为倒计时
+  if (time.value.testTime == 0) {
+    getCounting("+");
+  } else {
+    getCounting("-");
+  }
+};
+
+/**
+ * 开始测试
+*/
+const getStartOneTestList = (data?:any) => {
+  let project: any = parameter.value.project;
+  let area: any = data.area;
+  let examId: string = `${project}_${area}`; //项目+区
+  if (area == null || area == "") {
+    return false;
+  }
+  if (data.examState != 43 || !data.faceCheckStu.student_id) {
+    return false;
+  }
+  startOneTest(examId, () => { })
+};
+
+/**
+ * 再测一次
+*/
+const getAgain = () => {
+  let loading = ElLoading.service({ text: '请稍等...', background: 'rgba(0, 0, 0, 0.8)', customClass: `sports ${parameter.value.project}` });
+  cleanData();
+  examState.value = 41;
+  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
+  //   multipleItemRefList.value[i].getAgain()
+  // }
+  for (let i: any = 0; i < testList.value.length; i++) {
+    getAgainList()
+  }
+  timerManager.value.againTimer = setInterval(() => {
+    if (examState.value == 43) {
+      getClearTimer("againTimer");
+      loading?.close();
+    }
+  }, 300);
+  let loadingTime = setTimeout(() => {
+    if (examState.value <= 41) {
+      loading?.close();
+      clearTimeout(loadingTime);
+      getClearTimer("againTimer");
+    }
+  }, 10000);
+};
+
+/**
+ * 再测一次
+*/
+const getAgainList = async (data?:any) => {
+  let project: any = parameter.value.project;
+  let area: any = data.area;
+  let examId: string = `${project}_${area}`; //项目+区
+  if (area == null || area == "") {
+    return false;
+  }
+  //预存测试人员
+  let student = JSON.parse(JSON.stringify(data.faceCheckStu));
+  //测试中
+  if (data.examState == 42) {
+    await finishOneTest(examId);
+  }
+  //其他状态
+  if (data.examState > 3) {
+    await closeOneTest(examId);
+  }
+  //重新走一次流程
+  await openOneTest(examId);
+  await startFace(examId);
+  await stopFace(examId);
+  let index = testList.value.findIndex((item: any) => {
+    return area == item.area;
+  })
+  multipleItemRefList.value[index]?.returnStudent(student);
+  if (student.student_id) {
+    getFaceConfirmOnlyList(data);
+  }
+};
+
+/**
+ * 重新识别
+*/
+const getAllRetestFace = async () => {
+  let loading = ElLoading.service({ text: '请稍等...', background: 'rgba(0, 0, 0, 0.8)', customClass: `sports ${parameter.value.project}` });
+  showTestAgain.value = false;
+  examState.value = 3;
+  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
+  //   multipleItemRefList.value[i].getAllRetestFace()
+  // }
+  for (let i: any = 0; i < testList.value.length; i++) {
+    getAllRetestFaceList(data)
+  }
+  timerManager.value.allRetestFaceTimer = setInterval(() => {
+    if (examState.value == 41) {
+      getClearTimer("allRetestFaceTimer");
+      loading?.close();
+    }
+  }, 300);
+  let loadingTime = setTimeout(() => {
+    if (examState.value <= 3) {
+      loading?.close();
+      clearTimeout(loadingTime);
+      getClearTimer("allRetestFaceTimer");
+    }
+  }, 10000);
+};
+
+/**
+ * 重新识别
+*/
+const getAllRetestFaceList = async (data?:any) => {
+  let project: any = parameter.value.project;
+  let area: any = data.area;
+  let examId: string = `${project}_${area}`; //项目+区
+  if (area == null || area == "") {
+    return false;
+  }
+  //测试中
+  if (data.examState == 42) {
+    await finishOneTest(examId);
+  }
+  //其他状态
+  if (data.examState > 3) {
+    await closeOneTest(examId);
+  }
+  //重新走一次流程
+  await getOpenOneTestAndStartFace();
+};
+
+/**
+ * 确认退出
+*/
+const confirmExit = () => {
+  let handcontroller_id = parameter.value.handcontroller;
+  proxy?.$modal.confirm(handcontroller_id ? `请举左手确认退出` : `确定退出吗？`).then(() => {
+    getExit();
+  }).finally(() => {
+  });
+};
+
+/**
+ * 退出
+*/
+const getExit = () => {
+  getClearTimer();//清除计时器
+  examEnds();//通知工作站关闭
+  speckCancel();//停止播报
+  window.onbeforeunload = null;//移除事件处理器
+  let handcontroller_id = parameter.value.handcontroller;
+  if (handcontroller_id) {
+    router.push({ path: '/gesture' });//跳转
+  } else {
+    router.push({ path: '/' });//跳转
+  }
+};
+
+/**
+ * 清空定时任务
+*/
+const getClearTimer = (data?: any) => {
+  if (data) {
+    //清除指定
+    clearInterval(timerManager.value[data])
+    timerManager.value[data] = null;
+  } else {
+    //清除全部
+    for (let key in timerManager.value) {
+      if (timerManager.value.hasOwnProperty(key)) {
+        clearInterval(timerManager.value[key])
+        timerManager.value[key] = null;
+      }
+    }
+  }
+};
+
+/**
+ * 清除历史记录
+*/
+const cleanData = () => {
+  getClearTimer("countdownTimer");
+  time.value.countdownNum = time.value.testTime;
+  showTestAgain.value = false;
+};
+
+/**
+ * 时间转换
+*/
+// const countdownNumFormat = computed(() => {
+//   return time.value.countdownNum;
+//   //return proxy?.$utils.timeFormat(time.value.countdownNum);
+// });
+
+/**
+ * 倒计时
+*/
+const getCounting = (type: string) => {
+  timerManager.value.countdownTimer = setInterval(() => {
+    //正计时
+    if (type == "+") {
+      time.value.countdownNum++;
+    }
+    //倒计时
+    if (type == "-") {
+      if (time.value.countdownNum <= 0) {
+        getClearTimer("countdownTimer");
+      } else {
+        time.value.countdownNum--;
+      }
+    }
+  }, 1000);
+};
+
+/**
+ * 子组件选择学生
+*/
+const getChooseStudent = (data: any) => {
+  console.log("data", data)
+  chooseStudentArea.value = data;
+  chooseStudentRef.value.open();
+}
+
+/**
+ * 返回被选学生
+*/
+const returnStudent = (data: any) => {
+  console.log("data", data)
+  let area = chooseStudentArea.value.area;
+  let index = testList.value.findIndex((item: any) => {
+    return area == item.area;
+  })
+  // console.log("index", index)
+  multipleItemRefList.value[index]?.returnStudent(data);
+};
+
+/**
+ * 子组件返回数据
+*/
+const returnData = (data: any) => {
+  let index = testList.value.findIndex((item: any) => {
+    return item.area == data.area;
+  });
+  let obj = Object.assign(testList.value[index], data);
+  testList.value[index] = JSON.parse(JSON.stringify(obj));
+  console.log("testList.value", testList.value)
+
+  if (examState.value == 0) {
+    let flag = false;
+    //只监听人脸识别的区
+    let newList = testList.value;
+    for (let i = 0; i < newList.length; i++) {
+      if (newList[i] && newList[i].examState == 3) {
+        flag = true;
+      }
+    }
+    if (flag) {
+      console.log("变更状态：", 3)
+      examState.value = 3;
+      if (needStart.value) {
+        let handcontroller = parameter.value.handcontroller;
+        let ctrl = parameter.value.ctrl;
+        if (handcontroller && ctrl) {
+          speckText(`请${ctrl}区举左手开始识别`);
+        } else {
+          proxy?.$modal.msgWarning(`请点击右下角的【开始识别】`);
+        }
+      }
+    }
+  }
+
+  if (examState.value == 3) {
+    let flag = false;
+    //只监听人脸识别的区
+    let newList = testList.value;
+    for (let i = 0; i < newList.length; i++) {
+      if (newList[i] && newList[i].examState == 40) {
+        flag = true;
+      }
+    }
+    if (flag) {
+      console.log("变更状态：", 40)
+      examState.value = 40;
+    }
+  }
+
+  if (examState.value == 40) {
+    let flag = false;
+    //只监听人脸识别的区
+    let newList = testList.value;
+    for (let i = 0; i < newList.length; i++) {
+      if (newList[i] && newList[i].examState == 41) {
+        flag = true;
+      }
+    }
+    if (flag) {
+      console.log("变更状态：", 41)
+      examState.value = 41;
+      let txt = parameter.value.gesture ? "请举右手看摄像头人脸识别" : "请看摄像头进行人脸识别";
+      speckText(txt);
+      //如果过段时候后仍在识别中就提示停止识别
+      // setTimeout(() => {
+      //   if (examState.value == 41) {
+      //     let handcontroller = parameter.value.handcontroller;
+      //     let ctrl = parameter.value.ctrl;
+      //     if (handcontroller && ctrl) {
+      //       speckText(`各就位后请${ctrl}区举左手停止识别`);
+      //     } else {
+      //       proxy?.$modal.msgWarning(`各就位后请点击右下角的【停止人脸识别】`);
+      //     }
+      //   }
+      // }, 15000)
+    }
+  }
+
+  if (examState.value == 41) {
+    let flag = false;
+    //只监听人脸识别的区
+    let newList = testList.value.filter((item: any) => {
+      return item?.faceCheckStu?.student_id;
+    })
+    for (let i = 0; i < newList.length; i++) {
+      if (newList[i] && newList[i].faceCheckStu?.student_id && newList[i].examState == 43) {
+        flag = true;
+      }
+    }
+    if (flag) {
+      console.log("变更状态：", 43)
+      examState.value = 43;
+      cleanData();
+      //如果过段时候后仍在识别中就提示停止识别
+      // setTimeout(() => {
+      //   if (examState.value == 43) {
+      //     let handcontroller = parameter.value.handcontroller;
+      //     let ctrl = parameter.value.ctrl;
+      //     if (handcontroller && ctrl) {
+      //       speckText(`请${ctrl}区举左手开始测试`);
+      //     } else {
+      //       proxy?.$modal.msgWarning(`请点击右下角的【开始测试】`);
+      //     }
+      //   }
+      // }, 10000)
+    }
+  }
+
+  //测试完成后回退状态
+  if (examState.value == 42) {
+    let flag = false;
+    //只监听人脸识别的区
+    let newList = testList.value.filter((item: any) => {
+      return item?.faceCheckStu?.student_id;
+    })
+    for (let i = 0; i < newList.length; i++) {
+      if (newList[i] && newList[i].faceCheckStu?.student_id && newList[i].examState == 3) {
+        flag = true;
+      } else {
+        return false;
+      }
+    }
+    if (flag) {
+      console.log("变更状态：", 3)
+      examState.value = 3;
+    }
+  }
+
+  //如果全部状态为0就退出
+  if (examState.value >= 0) {
+    let flag = false;
+    //只监听人脸识别的区
+    let newList = testList.value;
+    for (let i = 0; i < newList.length; i++) {
+      if (newList[i] && newList[i].examState == 0) {
+        flag = true;
+      } else {
+        return false;
+      }
+    }
+    if (flag) {
+      examState.value = 0;
+      getExit();
+    }
+  }
+};
+
+
+/**
+ * 准备开始
+*/
+const getReady = () => {
+  if (examState.value != 43) {
+    return false;
+  }
+  if (time.value.ready) {
+    return false;
+  }
+  let flag = false;
+  for (let i = 0; i < testList.value.length; i++) {
+    if (testList.value[i] && testList.value[i].faceCheckStu?.student_id) {
+      flag = true;
+    }
+  }
+  if (!flag) {
+    proxy?.$modal.msgWarning("请选择人员！");
+    return false;
+  }
+  //停止播报;
+  speckCancel()
+  //正在识别的停止识别
+  // for (let i: any = 0; i < multipleItemRefList.value.length; i++) {
+  //   if (testList.value[i].examState == 41) {
+  //     multipleItemRefList.value[i].getStopFace()
+  //   }
+  // }
+  for (let i: any = 0; i < testList.value.length; i++) {
+    if (testList.value[i].examState == 41) {
+      getStopFaceList((testList.value[i]))
+    }
+  }
+  time.value.ready = 6;
+  timerManager.value.readyTimer = setInterval(() => {
+    time.value.ready--;
+    if (time.value.ready <= 0) {
+      getClearTimer("readyTimer");
+      getStartOneTest();
+    } else {
+      speckText(time.value.ready);
+    }
+  }, 1000);
+};
+
+/**
+ * 将测试列表转为多行
+*/
+const testListArr = computed(() => {
+  let list: any = [];
+  let num = 0;
+  if (styleType.value == 1) {
+    num = 3
+  }
+  if (styleType.value == 2) {
+    num = 5
+  }
+  if (styleType.value == 3) {
+    num = 10
+  }
+  let myLength = Math.ceil(testList.value.length / num);
+  for (let i = 0; i < myLength; i++) {
+    list[i] = [];
+    for (let j = 0; j < testList.value.length; j++) {
+      if (j >= i * num && j < (i + 1) * num) {
+        list[i].push(testList.value[j])
+      }
+    }
+  }
+  return list;
+});
+
+/**
+ * 将测试列表转为多行
+*/
+const getTestRecord = () => {
+  if (showReportList.value) {
+    showReportList.value = false;
+  } else {
+    reportListRef.value.getIniReportList();
+    showReportList.value = true;
+  }
+};
+
+/**
+ * 自动填补空缺
+*/
+const getAddTestList = (num: number) => {
+  let list = parameter.value.area.split(',');
+  let myLength = num - list.length;
+  for (let i = 0; i < myLength; i++) {
+    let obj = {
+      area: "",
+      itemNumber: list.length + (i + 1)
+    }
+    testList.value.push(
+      obj
+    )
+  }
+};
+
+/**
+ * 获取设备项目
+*/
+const getDevice = async () => {
+  let deviceid = localStorage.getItem("deviceid") || '';
+  if (deviceid) {
+    startDevice({ deviceid: deviceid })
+  } else {
+    proxy?.$modal.msgError(`缺少设备信息请重新登录！`);
+    await proxy?.$http.common.logout({}).then((res: any) => {
+    });
+    proxy?.$modal?.closeLoading()
+    //清空缓存
+    localStorage.clear();
+    //跳转
+    router.push({ path: '/login/qrcode' });
+  }
+};
+
+/**
+ * 加载手势WS
+*/
+const initHand = () => {
+  handWs((e: any) => {
+    if (router.currentRoute.value.path != '/train/multiple' || parameter.value.handcontroller == undefined) {
+      return false;
+    }
+    console.log("eeeee", e)
+    if (e?.wksid) {
+      //获取设备项目
+      getDevice()
+    }
+    //接收设备信息
+    if (e?.device_info) {
+      device_info.value = e.device_info;
+      let handcontroller_id = device_info.value.handcontroller_id;
+      stateHand(handcontroller_id);
+    }
+    //获取手势状态
+    if (e?.cmd == 'get_handcontroller_state' && e?.state == 0) {
+      let handcontroller_id = device_info.value.handcontroller_id;
+      startHand(handcontroller_id);
+    }
+    //刷新
+    if (e?.data?.result == "refresh") {
+      getExit();
+      //刷新
+      window.location.reload()
+    }
+    //没初始化完成不监听手势动作
+    if (examState.value == 0) {
+      return false;
+    }
+    //左滑动
+    if (e?.data?.result == "next_item") {
+    }
+    //举左手
+    if (e?.data?.result == "left_hand") {
+      //举左手确认退出
+      // if (exit.value) {
+      //   exit.value = 0;
+      //   //确认退出
+      //   let keyEvent: any = null;
+      //   keyEvent = new KeyboardEvent('keydown', {
+      //     key: 'Enter', // 键值
+      //     code: 'Enter', // 键盘代码
+      //     keyCode: 13, // 旧的键盘代码
+      //     which: 13, // 新的键盘代码
+      //     shiftKey: false, // 是否按下Shift键
+      //     ctrlKey: false, // 是否按下Ctrl键
+      //     metaKey: false, // 是否按下Meta键（Win键或Command键）
+      //     bubbles: true, // 事件是否冒泡
+      //     cancelable: true // 是否可以取消事件的默认行为
+      //   });
+      //   document.activeElement?.dispatchEvent(keyEvent);
+      //   return false;
+      // }
+      //开始识别
+      if (needStart.value && examState.value < 41) {
+        getOpenOneTestAndStartFace();
+        return false;
+      }
+      //停止人脸识别
+      if (needStart.value && examState.value == 41) {
+        getStopFace();
+        return false;
+      }
+      //开始测试
+      if (examState.value == 43) {
+        getReady()
+        return false;
+      }
+    }
+    //退出
+    if (e?.data?.result == "exit") {
+      // console.log("exit.value", exit.value)
+      if (exit.value == 0) {
+        speckText("请保持两秒确认退出");
+        //第一次才弹出
+        confirmExit();
+        setTimeout(() => {
+          let keyEvent: any = null;
+          let myKey = null;
+          //如果交叉手两秒后返回超过4次就确认退出
+          if (exit.value >= 4) {
+            myKey = 'Enter';
+          } else {
+            myKey = 'Esc';
+            exit.value = 0;
+          }
+          if (myKey == 'Esc') {
+            keyEvent = new KeyboardEvent('keydown', {
+              key: 'Escape', // 键值
+              code: 'Escape', // 键盘代码
+              keyCode: 27, // 旧的键盘代码
+              which: 27, // 新的键盘代码
+              shiftKey: false, // 是否按下Shift键
+              ctrlKey: false, // 是否按下Ctrl键
+              metaKey: false, // 是否按下Meta键（Win键或Command键）
+              bubbles: true, // 事件是否冒泡
+              cancelable: true // 是否可以取消事件的默认行为
+            });
+          }
+          if (myKey == 'Enter') {
+            keyEvent = new KeyboardEvent('keydown', {
+              key: 'Enter', // 键值
+              code: 'Enter', // 键盘代码
+              keyCode: 13, // 旧的键盘代码
+              which: 13, // 新的键盘代码
+              shiftKey: false, // 是否按下Shift键
+              ctrlKey: false, // 是否按下Ctrl键
+              metaKey: false, // 是否按下Meta键（Win键或Command键）
+              bubbles: true, // 事件是否冒泡
+              cancelable: true // 是否可以取消事件的默认行为
+            });
+          }
+          document.activeElement?.dispatchEvent(keyEvent);
+        }, 2500)
+      }
+      exit.value = exit.value + 1
+    }
+    // if (e?.data?.result == "exit") {
+    //   console.log("exit.value", exit.value)
+    //   if (exit.value == 0) {
+    //     exit.value = 1
+    //     speckText("请5秒内举左手确认退出");
+    //     //第一次才弹出
+    //     confirmExit();
+    //     time.value.exit = 6;
+    //     timerManager.value.exitTimer = setInterval(() => {
+    //       time.value.exit--;
+    //       console.log("取消倒计时", time.value.exit)
+    //       proxy?.$modal.msgWarning(`取消倒计时：${time.value.exit}`)
+    //       if (time.value.exit == 0) {
+    //         exit.value = 0;
+    //         getClearTimer("exitTimer");
+    //         let keyEvent: any = null;
+    //         keyEvent = new KeyboardEvent('keydown', {
+    //           key: 'Escape', // 键值
+    //           code: 'Escape', // 键盘代码
+    //           keyCode: 27, // 旧的键盘代码
+    //           which: 27, // 新的键盘代码
+    //           shiftKey: false, // 是否按下Shift键
+    //           ctrlKey: false, // 是否按下Ctrl键
+    //           metaKey: false, // 是否按下Meta键（Win键或Command键）
+    //           bubbles: true, // 事件是否冒泡
+    //           cancelable: true // 是否可以取消事件的默认行为
+    //         });
+    //         document.activeElement?.dispatchEvent(keyEvent);
+    //       }
+    //     }, 1000);
+    //   }
+    // }
+  });
+};
+
+/**
+ * 播报时间
+*/
+watch(() => time.value.countdownNum, (newData) => {
+  if (examState.value != 42) {
+    return false;
+  }
+  if (newData >= 30) {
+    if (newData % 30 == 0) {
+      speckText(
+        `还有${newData}秒`
+      );
+    }
+  }
+  if (newData == 10) {
+    speckText("还有10秒");
+  }
+  if (newData <= 5) {
+    speckText(newData);
+  }
+  if (newData == 0) {
+    speckText("哨声");
+  }
+}, { immediate: true });
+
+onBeforeMount(() => {
+  parameter.value = route.query;
+  let project = parameter.value.project;
+  let area = parameter.value.area;
+  if (parameter.value.time) {
+    time.value.testTime = parameter.value.time
+  }
+  time.value.countdownNum = time.value.testTime;
+  let myInfo: any = localStorage.getItem("userInfo");
+  userInfo.value = JSON.parse(myInfo);
+  if (parameter.value.gesture == 'true') {
+    parameter.value.gesture = true
+  } else {
+    parameter.value.gesture = false
+  }
+  let list = area.split(',');
+  testList.value = list.map((item: any, index: number) => {
+    let obj = {
+      area: item,
+      itemNumber: index + 1
+    }
+    return obj;
+  });
+
+  //展示样式控制
+  if (testList.value.length <= 5) {
+    styleType.value = 1;
+    //填补空缺
+    getAddTestList(5)
+  }
+  if (testList.value.length > 5 && testList.value.length <= 10) {
+    styleType.value = 2;
+    //填补空缺
+    getAddTestList(10)
+  }
+  if (testList.value.length > 10) {
+    styleType.value = 3;
+  }
+
+  //需要开始按钮的项目
+  let myList = ['situp', 'jumprope', 'jumpingjack', 'footballv1', 'basketballv1', 'volleyball', 'pingpong'];
+  if (myList.includes(project) && styleType.value == 3) {
+    needStart.value = true;
+  }
+})
+
+onMounted(() => {
+  //加载WS
+  let project = parameter.value.project;
+  initWs({ parameter: parameter.value, testTime: time.value.testTime, version: "v2" }, (data: any) => {
+    //获取sid
+    if (data.cmd === 'mySid') {
+      console.log("data.data.sid", data.data.sid)
+      sid.value = data.data.sid;
+    }
+    let index = testList.value.findIndex((item: any) => {
+      let examId = `${project}_${item.area}`;
+      return examId == data.exam_id;
+    })
+    multipleItemRefList.value[index]?.getMessage(data);
+  });
+  //初始化语音
+  initSpeech();
+  //初始化手势
+  initHand();
+  setTimeout(() => {
+    //10秒还在0状态就算超时
+    if (examState.value == 0) {
+      getExit();
+    }
+  }, 10000);
+  //刷新关闭
+  window.onbeforeunload = function (e) {
+    var confirmationMessage = "刷新/关闭页面将会关闭页面,是否确认退出页面?";
+    (e || window.event).returnValue = confirmationMessage; // 兼容 Gecko + IE
+
+    testList.value.forEach((item: any) => {
+      let examId = item.exam_id;
+      let bUrl = import.meta.env.VITE_APP_BASE_API;
+      let classId = parameter.value.classes;
+      let mySid = sid.value;
+      let token: any = localStorage.getItem("token")
+      let formData = new FormData();
+      formData.append("exam_id", examId);
+      formData.append("class_id", classId);
+      formData.append("token", token);
+      formData.append("sid", mySid);
+      navigator.sendBeacon(bUrl + "/exam/close_exam", formData)
+    })
+    return confirmationMessage; // 兼容 Gecko + Webkit, Safari, Chrome
+  };
+})
+
+onBeforeUnmount(() => {
+  getExit();
+})
+</script>
+
+<style scoped lang="scss">
+$waiPadding: 6.51rem;
+
+.time {
+  width: 20vh;
+  height: 20vh;
+  line-height: 20vh;
+  border-radius: 50%;
+  color: #FF9402;
+  font-size: 8vh;
+  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: 50%;
+  top: -4vh;
+  margin-right: -10vh;
+  font-family: 'Saira-BlackItalic';
+}
+
+.time1 {
+  width: 26vh;
+  height: 26vh;
+  line-height: 26vh;
+  font-size: 10.3vh;
+  right: auto;
+  left: 50%;
+  top: 0vh;
+  margin-left: 8vw;
+  margin-right: auto;
+}
+
+.main {
+  width: calc(100% - ($waiPadding * 2));
+  height: 78vh;
+  padding-top: 10rem;
+  margin: 0 auto;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.mask {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 998;
+}
+
+.mask2 {
+  background: rgba(0, 0, 0, 0.68);
+}
+
+.confirmDiaBg {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+
+  .confirmDiaWindow {
+    width: 40%;
+    height: 43.4%;
+    border-radius: 1.6rem;
+    opacity: 1;
+    box-sizing: border-box;
+    border: 0.55rem solid #13ED84;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+
+    .readyBox {
+      text-align: center;
+      color: #1A293A;
+
+      .lable {
+        font-size: 4.3rem;
+        line-height: 1;
+        margin-bottom: 1.5rem;
+      }
+
+
+      .value {
+        font-size: 10rem;
+        line-height: 1;
+        font-family: 'Saira-BlackItalic';
+      }
+
+      .transparent {
+        opacity: 0;
+      }
+
+    }
+
+  }
+}
+
+.footerBtn {
+  width: 100%;
+  padding: 0 calc(13.02rem /2);
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 3vh;
+  display: flex;
+  justify-content: end;
+
+  .btn {
+    width: 14.6vw;
+    height: 6.1vh;
+    line-height: 6.1vh;
+    font-size: 3vh;
+    color: #1A293A;
+    text-align: center;
+    border-radius: 1vh;
+    cursor: pointer;
+    margin-left: 10px;
+    background: radial-gradient(159% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.3);
+
+    &:hover {
+      background: #8EFFA9;
+    }
+  }
+
+  .startBtn {
+    color: #ffffff;
+    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.3);
+
+    &:hover {
+      background: #F99F02;
+    }
+  }
+
+  .testRecordBtn {
+    position: relative;
+    z-index: 999;
+  }
+}
+
+.main-right {
+  width: 22.7%;
+  height: 80vh;
+  border-radius: 1.6rem;
+  // background: linear-gradient(29deg, #092941 -82%, #2A484B 94%);
+  background-color: rgba(9, 41, 65, 0.8);
+  box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.4);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: absolute;
+  z-index: 999;
+  bottom: 6.5vh;
+  right: calc(13.02rem /2);
+}
+
+//列表样式写在此父组件里，子组件尽量减少个性化class和style，多样性以父组件控制类型
+::v-deep(.testBox1) {
+  $listMargin: 10vw;
+  $listWidth: calc((100vw - ($waiPadding * 2) - $listMargin) / 5);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  .ul {
+    width: 100%;
+    height: 36vh;
+    display: flex;
+
+
+    .li {
+      width: $listWidth;
+      position: relative;
+
+      .ready {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-items: center;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .userInfo {
+        width: 100%;
+        height: 100%;
+        border-radius: 1.6rem;
+        background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        margin-bottom: 3px;
+
+        .userInfo-center {
+          .pic {
+            width: calc(36vh * 0.62);
+            height: calc(36vh * 0.62);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            margin: 0 auto 2vh auto;
+            position: relative;
+
+            .area {
+              position: absolute;
+              top: calc(36vh * 0.18);
+              color: #203C52;
+              font-size: 5vh;
+              line-height: 1;
+              font-family: 'Saira-ExtraBold';
+              text-align: center;
+
+            }
+
+            img {
+              width: 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 {
+            box-sizing: border-box;
+            padding: 0.1rem 0.4rem;
+            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);
+          }
+
+          .ctrlBox {
+            position: absolute;
+            left: 0;
+            top: 0;
+            border: 5px solid #ffffff;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            border-radius: 1.6rem;
+
+            img {
+              max-width: 100%;
+              max-height: 70%;
+              margin: 10% 0 5% 0;
+            }
+
+            .lable {
+              text-align: center;
+              font-size: 2rem;
+              color: #ffffff
+            }
+          }
+        }
+      }
+
+      .score {
+        height: 18vh;
+        line-height: 18vh;
+        font-size: 12vh;
+        font-family: 'Saira-BlackItalic';
+        border: 0.55rem solid #13ED84;
+        text-align: center;
+        border-radius: 1.6rem;
+        box-sizing: content-box;
+        color: #1A293A;
+        position: relative;
+        background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+        display: none;
+
+        &::before {
+          content: "";
+          width: 2vw;
+          height: 2vw;
+          display: block;
+          position: absolute;
+          top: -1.5vw;
+          left: 50%;
+          margin-left: -1vw;
+          background-image: url("@/assets/images/test/yuan.png");
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          border-radius: 50%;
+          flex-shrink: 0;
+          transition: all 0.5s;
+        }
+      }
+    }
+
+    .disable {
+
+      .userInfo,
+      .score {
+        opacity: 0.5;
+      }
+    }
+
+    .wait {
+
+      .userInfo,
+      .score {
+        opacity: 0.5;
+      }
+    }
+
+
+    &:nth-child(1) {
+      justify-content: space-between;
+    }
+
+    &:nth-child(2) {
+      justify-content: space-evenly;
+
+      .li {
+        margin-left: calc($listMargin/4);
+        margin-right: calc($listMargin/4);
+      }
+    }
+  }
+
+  .ready.ul {
+
+    &:nth-child(1) {
+      .li:nth-child(2) {
+        &::after {
+          content: "";
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          display: block;
+          background-image: url("@/assets/images/test/ready3.png");
+          background-position: center center;
+          background-repeat: no-repeat;
+          background-size: 100%;
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      .li {
+        &::after {
+          content: "";
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          display: block;
+          background-image: url("@/assets/images/test/ready3.png");
+          background-position: center center;
+          background-repeat: no-repeat;
+          background-size: 100%;
+          top: -100%;
+        }
+      }
+    }
+  }
+
+  .hands.ul {
+
+    &:nth-child(1) {
+      .li:nth-child(2) {
+        &::after {
+          background-image: url("@/assets/images/test/ready4.png");
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      .li {
+        &::after {
+          background-image: url("@/assets/images/test/ready4.png");
+        }
+      }
+    }
+  }
+
+  .overlap.ul {
+    transition: all 0.5s;
+
+    .li {
+      .score {
+        display: block;
+      }
+    }
+
+    &:nth-child(1) {
+      margin-top: 5vh;
+
+      .li {
+        &::before {
+          display: none
+        }
+
+        &::after {
+          display: none
+        }
+      }
+    }
+
+    &:nth-child(2) {
+      margin-top: -20vh;
+
+      .li {
+        &::before {
+          display: none
+        }
+
+        &::after {
+          display: none
+        }
+      }
+    }
+  }
+}
+
+::v-deep(.testBox2) {
+  $listMargin: 10vw;
+  $listWidth: calc((100% - $listMargin) / 5);
+
+  .ul {
+    width: 100%;
+    height: 34vh;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 4vh;
+
+    .li {
+      width: $listWidth;
+      position: relative;
+      height: 100%;
+      border-radius: 3vh;
+      padding: 0.6vw;
+      background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      box-sizing: border-box;
+
+      .userInfo {
+        width: 100%;
+        height: 100%;
+        border-radius: 1.6rem;
+        background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        position: relative;
+
+        .userInfo-center {
+          .pic {
+            width: calc(36vh * 0.62);
+            height: calc(36vh * 0.62);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            margin: 0 auto 2vh auto;
+            position: relative;
+
+            .area {
+              position: absolute;
+              top: calc(36vh * 0.18);
+              color: #203C52;
+              font-size: 5vh;
+              line-height: 1;
+              font-family: 'Saira-ExtraBold';
+              text-align: center;
+
+            }
+
+            img {
+              width: 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;
+          }
+
+          .ctrlBox {
+            position: absolute;
+            left: 0;
+            top: 0;
+            border: 5px solid #ffffff;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            border-radius: 1.6rem;
+
+            img {
+              max-width: 100%;
+              max-height: 70%;
+              margin: 10% 0 5% 0;
+            }
+
+            .lable {
+              text-align: center;
+              font-size: 2rem;
+              color: #ffffff
+            }
+          }
+        }
+      }
+
+      .score {
+        height: 14vh;
+        line-height: 14vh;
+        font-size: 9vh;
+        font-family: 'Saira-BlackItalic';
+        background: #ffffff;
+        box-sizing: border-box;
+        border: 0.55rem solid #13ED84;
+        text-align: center;
+        border-radius: 1.6rem;
+        box-sizing: content-box;
+        color: #1A293A;
+        position: relative;
+        display: none;
+
+        &::before {
+          content: "";
+          width: 2vw;
+          height: 2vw;
+          display: block;
+          position: absolute;
+          top: -1.3vw;
+          left: 50%;
+          margin-left: -1vw;
+          background-image: url("@/assets/images/test/yuan.png");
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          border-radius: 50%;
+          flex-shrink: 0;
+          transition: all 0.5s;
+        }
+      }
+    }
+
+    .disable {
+      opacity: 0.5;
+    }
+
+    .wait {
+      opacity: 0.5;
+    }
+  }
+
+  .overlap {
+    .li {
+      .userInfo {
+        height: 6.2vw;
+
+        .userInfo-center {
+          width: 100%;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+
+          .pic {
+            width: 6.2vw;
+            height: 6.2vw;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            position: relative;
+            flex-shrink: 0;
+            margin: 0;
+
+            .area {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              line-height: 6.2vw;
+              color: #ffffff;
+              font-size: 2.5vw;
+              font-family: 'Saira-ExtraBold';
+              text-align: center;
+              background: rgba(#000000, 0.4)
+            }
+
+            img {
+              width: 100%;
+            }
+          }
+
+
+          .pic2 {
+            box-sizing: border-box;
+            border: 2px solid rgba(26, 41, 58, 0.6315);
+          }
+
+          .name {
+            width: 100%;
+            color: #1A293A;
+            font-size: 1.8rem;
+            border-radius: 2vw;
+            padding: 0.5rem 0;
+            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);
+          }
+        }
+
+      }
+
+      .score {
+        display: block;
+      }
+    }
+  }
+}
+
+::v-deep(.testBox3) {
+  $listMargin: 5vw;
+  $listWidth: calc((100% - $listMargin) / 10);
+
+  .ul {
+    width: 100%;
+    height: 14vh;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: calc($listMargin / 10);
+
+    .li {
+      width: $listWidth;
+      position: relative;
+      height: 100%;
+      border-radius: 5vh;
+      background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+
+      .userInfo {
+        padding: 2vh 0.6vw 0 0.6vw;
+        margin-bottom: 0.8vh;
+
+        .userInfo-center {
+          text-align: center;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 1.3vw;
+          height: 2.6vw;
+          background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6571) 100%);
+          border: 1px solid #FFFFFF;
+
+          .pic {
+            width: 2.6vw;
+            height: 2.6vw;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+            position: relative;
+            flex-shrink: 0;
+
+            .area {
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              line-height: 2.6vw;
+              color: #ffffff;
+              font-size: 1.4vw;
+              font-family: 'Saira-ExtraBold';
+              text-align: center;
+              background: rgba(#000000, 0.4)
+            }
+
+            img {
+              width: 100%;
+            }
+          }
+
+
+          .pic2 {
+            box-sizing: border-box;
+            border: 2px solid rgba(26, 41, 58, 0.6315);
+          }
+
+          .name {
+            color: #1A293A;
+            font-size: 1rem;
+            margin-left: 0.5vw;
+          }
+
+          .ctrlBox {
+            position: absolute;
+            left: 0;
+            top: 0;
+            border: 5px solid #ffffff;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 2;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            border-radius: 5vh;
+
+            img {
+              max-width: 100%;
+              max-height: 60%;
+              margin: 5% 0 5% 0;
+            }
+
+            .lable {
+              text-align: center;
+              font-size: 1rem;
+              color: #ffffff
+            }
+          }
+        }
+      }
+
+      .score {
+        font-size: 3rem;
+        font-family: 'Saira-BlackItalic';
+        text-align: center;
+        color: #1A293A;
+        line-height: 1;
+      }
+    }
+
+    .disable {
+      opacity: 0.5;
+    }
+
+    .wait {
+      opacity: 0.75;
+    }
+
+    .startedAlready {
+      background: #15ef96;
+    }
+  }
+}
+</style>