tropsCode/src/views/train/test.vue

<template>
  <div class="test">
    <Header @confirmExit="confirmExit"></Header>
    <div class="main">
      <div class="main-left">
        <div class="main-left-top">
          <div class="top-left" @click="getChooseStudent">
            <div class="top-left-center">
              <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>
                <img src="@/assets/images/test/profilePicture.png" />
              </div>
              <div class="name" :class="{ 'name2': faceCheckStu.student_id }">
                {{ faceCheckStu.student_id ? faceCheckStu.name : "虚位以待" }}
              </div>
            </div>
          </div>
          <div class="top-right">
            <transition :enter-active-class="proxy?.animate.dialog.enter"
              :leave-active-class="proxy?.animate.dialog.leave">
              <div class="time" v-show="needStart && [42].includes(examState)">{{
                time.countdownNum
                }}</div>
            </transition>
            <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" />
            </div>
            <div class="complete" :class="{ 'complete2': needStart && [42].includes(examState) }"
              v-if="faceCheckStu.student_id && time.ready <= 0 && examState != 43">
              <div class="scoreBox" v-if="['basketballv1'].includes(parameter.project)">
                <div class="score">{{ currentResultObj.count || 0 }}</div>
              </div>
              <div class="scoreBox" v-else>
                <div class="score">{{ currentResultObj.count || 0 }}</div>
                <div class="unit" v-if="currentResultObj.count && !needStart">{{ 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 || 0 }}</div>
                </div>
              </div>
            </div>
            <div class="foulBox" v-if="examState == 42 && backReason.length">
              <transition :enter-active-class="proxy?.animate.mask.enter"
                :leave-active-class="proxy?.animate.mask.leave">
                <div class="foul" v-show="backReasonStr ? true : false">
                  <div class="lable">!</div>
                  <div class="value">{{ backReasonStr }}</div>
                </div>
              </transition>
            </div>

            <div v-if="examState == 43 && time.ready">
              <div class="readyBox">
                <div class="value">{{ time.ready }}</div>
                <div class="lable">倒计时</div>
              </div>
            </div>

            <div v-if="examState == 43 && !time.ready && readyState">
              <div class="readyBoxBefore">
                <div class="item" v-if="parameter.gesture">
                  <div><img src="@/assets/images/test/jushou.png" /></div>
                  <div class="lable">
                    <div>请举手开始</div>
                  </div>
                </div>
                <div class="item" v-else>
                  <div> <img src="@/assets/images/test/bujushou.png" /></div>
                  <div class="lable">
                    <div>请点击开始</div>
                  </div>
                </div>
              </div>
            </div>

            <div class="btn" @click="getReady" v-if="needStart && examState == 43 && !time.ready && readyState">开 始
            </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>
          <i></i>
        </div>
        <div class="main-left-bottom">
          <div class="bottom-left">
            <div class="tips"><img src="/src/assets/images/test/tips.png" /></div>
            <div class="pic"><img :src="'static/images/tips/' + parameter.project + '.png'" /></div>
          </div>
          <div class="bottom-right" v-html="dic.projectNote[parameter.project]">
          </div>
        </div>
      </div>
      <div class="main-right">
        <ReportList ref="reportListRef" :parameter="parameter" :showQRCode="true" />
      </div>
    </div>
    <FaceWindow ref="faceWindowRef" :faceCheckStu="faceCheckStu" :gesture="parameter.gesture" />
    <ChooseStudent ref="chooseStudentRef" @returnData="returnStudent" />
  </div>
</template>

<script setup name="TrainTest" lang="ts">
import { initSpeech, speckText, speckCancel, chineseNumber } from '@/utils/speech'
import { initWs, examEnds, openOneTest, startFace, stopFace, faceConfirmOnly, startOneTest, finishOneTest, closeOneTest, suspendFaceRecognitionChannels, resumeFaceRecognitionChannels } from '@/utils/ws'
import dayjs from 'dayjs'
import dataDictionary from "@/utils/dataDictionary"
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const faceWindowRef = ref();
const chooseStudentRef = ref();
const reportListRef = ref();
const myInfo: any = localStorage.getItem("userInfo");
const dic: any = dataDictionary;
const data = reactive<any>({
  timerManager: {},//计时器管理
  parameter: {},//参数
  time: {
    testTime: 60,//时长
    countdownNum: 0,//计时
    ready: 0,//预备
  },
  userInfo: {},//用户信息
  examState: 0,//当前状态
  resultId: null,//测试ID
  currentResultObj: {},//成绩
  faceCheckStu: {},//人脸信息
  unit: "",//单位
  backReason: [],//犯规项
  backReasonStr: "",//犯规提示
  needStart: false,//是否需要按钮
  showTestAgain: false,//再测一次按钮
  readyState: true,//倒计时按钮状态
});
const { timerManager, parameter, time, userInfo, examState, resultId, faceCheckStu, currentResultObj, unit, backReason, backReasonStr, needStart, showTestAgain, readyState } = toRefs(data);

/**
 * 接收消息
*/
const getMessage = (e: any) => {
  //console.log("WS响应：", e)
  //实时状态
  if (e.cmd === 'exam_status') {
    examState.value = e.data;
  }
  //工作站状态
  if (e.cmd === 'init_result') {

  }
  //测试违规
  if (e.cmd === 'warning_result') {

  }
  //后端播报语音
  if (e.cmd === 'return_audio_msg') {

  }
  //错误提示
  if (e.cmd === 'info_result') {
    proxy?.$modal.msgError(e.data.message);
  }
  //错误提示
  if (e.cmd === 'error_result') {
    proxy?.$modal.msgError(e.data.message);
  }
  //测试中违规提示
  if (e.cmd === 'warning_notify') {

  }
  //断线状态
  if (e.cmd === 'disconnect_request') {
    let message = e.data.message;
    if (message) {
      proxy?.$modal.msgError(`${message}`);
      speckText(message);
    }
    getExit();
  }
  //状态变更
  if (e.cmd === 'set_exam_state') {
    examState.value = e.data;
    if (e.data === 3) {
      initProject();
    }
    if (e.data === 40) {
      cleanData();
    }
    if (e.data == 41) {
      getFaceWindow(true);
    }
    if (e.data == 43) {
    }
    if (e.data == 42) {
      getClearTimer("readyTimer");
      time.value.ready = 0;
    }
  }
  //新建测试后返回信息，获取result_id
  if (e.cmd === 'open_one_test_ack') {
    resultId.value = e.data.result_id;
  }
  //人脸识别状态
  if (e.cmd === 'face_check_result') {
    let myData = e.data[0] || e.data;
    returnStudent(myData);
  }
  //测试结束结果
  if (e.cmd === 'oneresult') {
    if (e.data.length) {
      let data = e.data[0];
      getAchievement(data)
    }
  }
  //结果生成完成（视频图片）
  if (e.cmd === 'static_urls_finished') {
  }
  //选择学生或测试结束后返回的数据
  if (e.cmd === 'result_info') {
  }
};

/**
 * 开始识别
*/
const getOpenOneTestAndStartFace = async () => {
  if (examState.value > 3) {
    await closeOneTest();
  }
  await openOneTest();
  await startFace();
};

/**
 * 停止人脸识别
*/
const getStopFace = async () => {
  // 旧版识别成功直接43了这里先屏蔽
  // if (examState.value != 41) {
  //   return false;
  // }
  getClearTimer("face");
  if (needStart.value) {
    let txt = parameter.value.gesture === true ? "，请举手开始测试" : "，请准备";
    speckText(faceCheckStu.value.name + txt);
  }
  await stopFace();
  if (faceCheckStu.value.student_id) {
    getFaceConfirmOnly();
  }
};

/**
 * 确定人脸信息
*/
const getFaceConfirmOnly = (data?: any) => {
  if (data) {
    faceCheckStu.value = data;
  }
  faceConfirmOnly({
    result_id: resultId.value,
    student_id: faceCheckStu.value.student_id,
    gender: faceCheckStu.value.gender
  }, () => {
    faceWindowRef.value?.close();
    //不需要按钮的自动进入下一步
    if (needStart.value == false) {
      getStartOneTest();
    }
  });
};

/**
 * 重新识别
*/
const getRetestFace = () => {
  proxy?.$modal.confirm("确定重新识别吗？").then(() => {
    if (needStart.value == false) {
      //自动流程项目重新识别直接返回3
      closeOneTest();
    } else {
      //手动流程项目重新识别43返回41,42返回3
      if (examState.value == 43) {
        cleanData();
        startFace();
      } else {
        closeOneTest();
      }
    }
  }).finally(() => {
  });
};

/**
 * 开始测试
*/
const getStartOneTest = () => {
  if (examState.value != 43 || !faceCheckStu.value.student_id) {
    return false;
  }
  if (!faceCheckStu.value.student_id) {
    proxy?.$modal.msgWarning("请选择人员！");
    return false;
  }
  startOneTest(data == null, () => {
    //显示再测一次按钮
    showTestAgain.value = true;
    //停止播报;
    speckCancel();
    //计时项目才开
    if (needStart.value == true) {
      //时间为0的为正计时，大于0的为倒计时
      if (time.value.testTime == 0) {
        getCounting("+");
      } else {
        getCounting("-");
      }
      speckText("哨声");
    } else {
      speckText(faceCheckStu.value.name + "，请开始测试");
    }
  })
};

/**
 * 再测一次
*/
const getAgain = async () => {
  //预存测试人员
  let student = JSON.parse(JSON.stringify(faceCheckStu.value));
  //测试中
  if (examState.value == 42) {
    await finishOneTest();
  }
  //其他状态
  if (examState.value > 3) {
    await closeOneTest();
  }
  //重新走一次流程
  await openOneTest();
  await startFace();
  await stopFace();
  getFaceConfirmOnly(student);
};

/**
 * 确认退出
*/
const confirmExit = () => {
  proxy?.$modal.confirm("确定退出吗？").then(() => {
    getExit();
  }).finally(() => {
  });
};

/**
 * 退出
*/
const getExit = () => {
  getClearTimer();//清除计时器
  examEnds();//通知工作站关闭
  speckCancel()//停止播报;
  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 getChooseStudent = () => {
  if (examState.value < 41) {
    proxy?.$modal.msgWarning("请等待");
  }
  if (examState.value == 41) {
    chooseStudentRef.value.open();
    //然后定时自动关闭
    setTimeout(() => {
      faceWindowRef.value.close();
    }, 3000)
  }
  if (examState.value == 43) {
    getRetestFace();
  }
};

/**
 * 返回被选学生
*/
const returnStudent = (data: any) => {
  chooseStudentRef.value.close();
  faceCheckStu.value = data;
  faceWindowRef.value.open();
  //然后定时自动关闭
  setTimeout(() => {
    faceWindowRef.value.close();
  }, 1000)
  getStopFace();
};

/**
 * 清除历史记录
*/
const cleanData = () => {
  time.value.countdownNum = time.value.testTime;
  showTestAgain.value = false;
  faceCheckStu.value = {};
  currentResultObj.value = {};
  backReason.value = [];
};

/**
 * 自动初始化项目
*/
const initProject = () => {
  //停止计时
  getClearTimer("countdownTimer");
  //恢复倒计时按钮状态
  readyState.value = true;
  //自动项目定时进入下一步
  let time = 0;
  //控制新建测试的时间，第一次快，之后就慢
  if (!faceCheckStu.value.student_id) {
    time = 1000;
  } else {
    time = 6000;
  }
  setTimeout(() => {
    //再加一个判断以免和再测一次冲突
    if (examState.value == 3) {
      getOpenOneTestAndStartFace();
    }
  }, time)
};

/**
 * 时间转换
*/
// 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 getFaceWindow = (data: boolean) => {
  let txt = parameter.value.gesture === true ? "请举手看摄像头人脸识别" : "请看摄像头进行人脸识别";
  speckText(txt);
  //data=true为弹出框，data=false为不要弹出框
  if (data) {
    faceWindowRef.value.open();
    //然后定时自动关闭
    setTimeout(() => {
      if (examState.value == 41 && faceWindowRef.value?.faceState == true) {
        faceWindowRef.value.close();
      }
    }, 3000)
  }
  //定时检查如果一直停留在人脸识别就提示
  timerManager.value.face = setInterval(() => {
    getClearTimer("face");
    if (examState.value == 41) {
      getFaceWindow(false);
    }
  }, 15000)
};

/**
 * 成绩
*/
const getAchievement = (data: any) => {
  //console.log("成绩", data);
  let type = parameter.value.project;
  let count =
    data?.[dic.typeResultKey[type]]?.toFixed(0);
  if (["trijump", "solidball", "shotput", "longjump"].includes(type)) {
    count =
      data?.[dic.typeResultKey[type]]?.toFixed(2);
    count = Math.round(count) / 100;
  }
  if (["basketballv1"].includes(type)) {
    count = proxy?.$utils.runTime(data?.[dic.typeResultKey[type]], true, 1)
  }
  data.count = count || "0";
  data.score = data.score || "0";
  currentResultObj.value = data;
  //违规处理
  let arr = backReason.value;
  if (["situp", "pullup", "sidepullup", "jumprope", "jumpingjack", "jump", "longjump", "verticaljump"]
    .indexOf(type) > -1) {
    if (["pullup", "situp", "jumprope", "jumpingjack"].indexOf(type) > -1) {
      currentResultObj.value.back_num = data?.all_failed_num;
    }
    if (type === "sidepullup") {
      currentResultObj.value.back_num = data?.["0"]?.hip_failed_num;
    }
    if (['jump', 'longjump', 'verticaljump'].includes(type)) {
      if (data?.startline_check == 0) {
        let txt = "踩线违规";
        arr.push(txt)
      }
      if (data?.singleleg_jump_check == 0) {
        let txt = "单脚跳违规";
        arr.push(txt)
      }
      if (data?.outside_check == 0) {
        let txt = "跳出测试区违规";
        arr.push(txt)
      }
    }
    if (
      data?.elbow_check == false
    ) {
      let txt = "肘部违规";
      arr.push(txt);
    }
    if (
      ["situp", "pullup"].indexOf(type) > -1 &&
      data?.knee_check === false
    ) {
      let txt = "腿部违规";
      if (!arr.includes(txt)) {
        arr.push(txt);
      }
    }
    if (["situp"].indexOf(type) > -1 && data?.hand_check === false) {
      let txt = "手部违规";
      if (!arr.includes(txt)) {
        arr.push(txt);
      }
    }
    if (
      ["pullup"].indexOf(type) > -1 &&
      data?.["0"]?.elbow_check === false
    ) {
      let txt = "手部违规";
      if (!arr.includes(txt)) {
        arr.push(txt);
      }
    }
    if (["situp"].indexOf(type) > -1 && data?.["0"]?.back_check === false) {
      let txt = "背部违规";
      if (!arr.includes(txt)) {
        arr.push(txt);
      }
    }
    if (
      ["sidepullup", "situp"].indexOf(type) > -1 &&
      data?.["0"]?.hip_check === false
    ) {
      let txt = "臀部违规";
      if (!arr.includes(txt)) {
        arr.push(txt);
      }
    }
  }
  backReason.value = arr;
  if (data.isfinish) {
    if (['jump'].includes(type) && backReason.value.length) {
      speckText("请重新测试");
      return false;
    }
    if (["basketballv1"].includes(type)) {
      speckText(faceCheckStu?.value.name + "成绩为" + (chineseNumber(proxy?.$utils.runTime(count, false, 0,
        1)) || 0) + "，请下一位准备！" || "");
    } else {
      speckText(faceCheckStu?.value.name + "成绩为" + (chineseNumber(count) || 0) + unit.value + "，请下一位准备！" || "");
    }
    reportListRef.value.getIniReportList();
    faceWindowRef.value.open("right");
    //然后定时自动关闭
    setTimeout(() => {
      faceWindowRef.value.close();
    }, 1000)
  }
};

/**
 * 准备开始
*/
const getReady = () => {
  speckCancel();
  readyState.value = false;
  time.value.ready = 5;
  speckText(time.value.ready);
  timerManager.value.readyTimer = setInterval(() => {
    time.value.ready--;
    speckText(time.value.ready);
    if (time.value.ready == 0) {
      getClearTimer("readyTimer");
      getStartOneTest();
    }
  }, 1000);
};

/**
 * 输出犯规
*/
watch(() => backReason.value.length, (v) => {
  backReasonStr.value = backReason.value[backReason.value.length - 1];
  setTimeout(() => {
    backReasonStr.value = "";
  }, 1500)
}, { immediate: true });

/**
 * 播报时间
*/
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);
  }
}, { immediate: true });

/**
 * 成绩整数播报
*/
watch(() => currentResultObj, (newData: any, oldData: any) => {
  if (examState.value != 42 || newData.count <= 0) {
    return false;
  }
  let project = parameter.value.project;
  //引体向上比较慢所以都播报
  if (
    ["pullup"].includes(project) &&
    newData.count > 0 &&
    oldData.back_num == oldData.back_num
  ) {
    speckText(newData.count);
  }
  if (
    ["situp", "sidepullup", "jumprope", "jumpingjack"].includes(project) &&
    newData.count > 0 &&
    newData.count % 10 == 0 &&
    oldData.back_num == oldData.back_num
  ) {
    speckText(newData.count);
  }
}, { immediate: true });

onBeforeMount(() => {
  parameter.value = route.query;
  let project = parameter.value.project;
  let area = parameter.value.area;
  parameter.value.examId = `${project}_${area}`; //项目+区
  if (parameter.value.time) {
    time.value.testTime = parameter.value.time
  }
  time.value.countdownNum = time.value.testTime;
  userInfo.value = JSON.parse(myInfo);
  unit.value = dic.unit[project];
  if (parameter.value.gesture == 'true') {
    parameter.value.gesture = true
  } else {
    parameter.value.gesture = false
  }
  //需要开始按钮的项目
  if (["jumprope", "skiprope", "jumpingjack", "situp", "basketballv1"].includes(project)) {
    needStart.value = true;
  }
  //加载WS
  initWs({ parameter: parameter.value, testTime: time.value.testTime }, (data: any) => {
    getMessage(data);
  });
  initSpeech();
})

onUnmounted(() => {
  getExit();
})
</script>

<style lang="scss" scoped>
$topPadding: 5.19rem;
$waiPadding: 6.51rem;

.main {
  width: calc(100% - ($waiPadding * 2));
  height: 78vh;
  padding-top: 10rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  overflow: hidden;

  .main-left {
    width: 71.5%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .main-left-top {
      display: flex;
      justify-content: space-between;
      height: 55.8%;
      position: relative;

      .top-left {
        width: 37.4%;
        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;

        .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%;
            }
          }


          .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);
          }
        }

      }

      .top-right {
        width: 62%;
        height: 100%;
        border-radius: 1.6rem;
        opacity: 1;
        background: #ffffff;
        box-sizing: border-box;
        border: 0.55rem solid #13ED84;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        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;
          justify-content: center;
          align-items: center;
          height: 100%;

          img {
            max-height: 80%;
            max-height: 80%;
          }
        }

        .complete {
          width: 100%;
          display: flex;
          justify-content: center;
          flex-direction: column;

          .scoreBox {
            height: 10vh;
            color: #1A293A;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 5vh;

            .score {
              font-size: 8.5rem;
              line-height: 8.5rem;
              font-family: 'Saira-BlackItalic';
            }

            .unit {
              font-size: 2rem;
              margin-left: 10px;
            }
          }

          .fractionViolation {
            height: 10vh;
            display: flex;
            align-items: center;
            justify-content: center;

            .fraction {
              height: 10vh;
              line-height: 10vh;
              border-radius: 5vh;
              display: flex;
              align-items: center;
              padding: 0 6%;
              background: linear-gradient(138deg, #38536C 21%, #1A293A 75%);
              box-shadow: inset 0px 1px 13px 0px rgba(255, 255, 255, 0.9452);

              .lable {
                font-size: 4vh;
                color: #13ED84;
              }

              .value {
                font-size: 7vh;
                color: #00FFE8;
                font-family: 'Saira-BlackItalic';
                min-width: 7vh;
              }
            }

            .violation {
              height: 6.1vh;
              line-height: 6.1vh;
              border-radius: 4vh;
              border: 0.25rem solid #ED7905;
              display: flex;
              align-items: center;
              margin-left: 11px;
              padding: 3px;
              box-sizing: content-box;

              .lable {
                font-size: 1.2rem;
                color: #ffffff;
                width: 6.1vh;
                height: 6.1vh;
                line-height: 6.1vh;
                background: #ED7905;
                border-radius: 50%;

                text-align: center;
              }

              .value {
                margin-left: 1.5vh;
                font-size: 3.2rem;
                color: #ED7905;
                font-family: 'Saira-BlackItalic';
                min-width: 6vh;
              }
            }
          }
        }

        .complete2 {
          padding-left: 20%;
          padding-top: 5vh;

          .scoreBox {
            margin-bottom: 3vh;
            justify-content: left;
          }

          .fractionViolation {
            justify-content: left;

            .fraction {
              padding: 0 8%;
            }
          }
        }

        .foulBox {
          height: calc(4.2vh + 0.5rem + 6px);
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-top: 3vh;

          .foul {
            height: 4.2vh;
            line-height: 4.2vh;
            border-radius: 3vh;
            border: 0.25rem solid #ED7905;
            display: flex;
            align-items: center;
            margin-left: 11px;
            padding: 3px;
            box-sizing: content-box;

            .lable {
              font-size: 2rem;
              color: #ffffff;
              width: 4.2vh;
              height: 4.2vh;
              line-height: 4.2vh;
              background: #ED7905;
              border-radius: 50%;
              text-align: center;
            }

            .value {
              margin-left: 1.5vh;
              font-size: 2rem;
              color: #ED7905;
              font-family: 'Saira-BlackItalic';
              min-width: 6vh;
              padding: 0 10px;
            }
          }
        }

        .readyBoxBefore {
          display: flex;
          justify-content: center;
          font-size: 2.5rem;
          color: #1A293A;
          padding-top: 4vh;
          line-height: 0;
          margin-bottom: 2vh;

          .item {
            display: flex;
            justify-content: center;

            .lable {
              display: flex;
              align-items: center;
              margin-left: 10px;
            }
          }

          img {
            height: 20vh;
          }
        }

        .readyBox {
          text-align: center;
          color: #1A293A;

          .value {
            font-size: 8.5rem;
            line-height: 8.5rem;
            font-family: 'Saira-BlackItalic';
          }

          .lable {
            font-size: 3.5rem;
          }
        }

        .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 {
        width: 4vw;
        height: 4vw;
        display: block;
        position: absolute;
        top: 50%;
        left: 37.5%;
        margin-top: calc(4vw * -0.5);
        margin-left: calc(4vw * -0.5);
        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;
      }
    }

    .main-left-bottom {
      display: flex;
      justify-content: space-between;
      height: calc(100% - 55.8% - 3vh);
      overflow: hidden;

      .bottom-left {
        width: 58%;
        padding-right: 1rem;
        display: flex;
        flex-direction: column;

        .tips {
          height: 2.8vh;

          img {
            height: 100%;
          }
        }

        .pic {
          text-align: center;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          overflow: hidden;

          img {
            max-width: 100%;
            max-height: 100%;
          }

        }
      }

      .bottom-right {
        width: 41%;
        height: 100%;
        overflow-y: scroll;
        color: #F9F9F9;
        font-size: 1.1rem;
        line-height: 1.6rem;

        &::-webkit-scrollbar {
          width: 10px;
        }

        &::-webkit-scrollbar-thumb {
          border-width: 2px;
          border-radius: 4px;
          border-style: dashed;
          border-color: transparent;
          background-color: rgba(26, 62, 78, 0.9);
          background-clip: padding-box;
        }

        &::-webkit-scrollbar-button:hover {
          border-radius: 6px;
          background: rgba(26, 62, 78, 1);
        }
      }
    }
  }

  .main-right {
    width: 27%;
    border-radius: 1.6rem;
    background: linear-gradient(29deg, #092941 -82%, #2A484B 94%);
    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
</style>