tropsCode/src/views/train/test.vue

<template>
  <div class="test">
    <div class="close" @click="confirmExit"></div>

    <div class="toolList">
      <div class="li">{{ date }}</div>
      <div class="li btn speck" @click="speckCancel"></div>
      <div class="li btn screen" @click="getFullScreen"></div>
    </div>
    <div class="logo"> <img src="@/assets/images/logo.png">
      </img>
      <div class="title"><i></i><span>{{ dic.project[parameter.project] || "" }}</span></div>

    </div>
    <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.logo_url || faceCheckStu.face_pic" /></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">
            <div v-if="needStart && [42, 43].includes(examState)">{{
      countdownNumFormat
    }}</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" />
            </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">
              <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>当前状态：({{ 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="'/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">
            <div class="left">
              <div class="pic"><img :src="item.face_pic || item.logo_url" /></div>
              <div class="txt">
                <div>
                  <div class="name">{{ item.student_name }}</div>
                  <div class="className"></div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="score">{{ item.result }}
              </div>
              <div class="unit">{{ unit }}</div>
            </div>
          </li>
        </ul>
        <div class="erweima"> <img src="@/assets/images/login/erweima.png" />
          <span>扫码查看详情</span>
        </div>
      </div>
    </div>
    <FaceWindow ref="faceWindowRef" :faceCheckStu="faceCheckStu" />
    <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 myInfo: any = localStorage.getItem("userInfo");
const dic: any = dataDictionary;
const data = reactive<any>({
  timerManager: {},//计时器管理
  parameter: {},//参数
  time: {
    testTime: 60,//时长
    countdownNum: 0,//计时
  },
  userInfo: {},//用户信息
  examState: 0,//当前状态
  resultId: null,//测试ID
  currentResultObj: {},//成绩
  faceCheckStu: {},//人脸信息
  unit: "",//单位
  backReason: [],//犯规项
  needStart: false,//是否需要按钮
  showTestAgain: false,//再测一次按钮
  reportList: [],//测试列表
  date: "",//当前时间
});
const { timerManager, parameter, time, userInfo, examState, resultId, faceCheckStu, currentResultObj, unit, backReason, needStart, showTestAgain, reportList, date } = 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') {
    if (e.data.message) {
      speckText(e.data.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) {

    }
  }
  //新建测试后返回信息，获取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");
  speckText(faceCheckStu.value.name + "，请准备");
  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.msgError("请选择人员！");
    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) {
    if (needStart.value) {
      proxy?.$modal.msgError("请点击开始识别");
    } else {
      proxy?.$modal.msgError("请等待");
    }
  }
  if (examState.value == 41) {
    chooseStudentRef.value.open();
    //然后定时自动关闭
    setTimeout(() => {
      faceWindowRef.value.close();
    }, 3000)
  }
  if (examState.value == 43) {
    getRetestFace();
  }
};

/**
 * 返回被选学生
*/
const returnStudent = (data: any) => {
  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");
  //自动项目定时进入下一步

  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 ? "请举手看摄像头人脸识别" : "请看摄像头进行人脸识别";
  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;
  }
  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;
    }
    speckText(faceCheckStu?.value.name + "成绩为" + (chineseNumber(count) || 0) + unit.value + "，请下一位准备！" || "");
    getReportList();
  }
};


/**
 * 当天成绩列表
*/
const getReportList = () => {
  let params: any = {
    start_date: dayjs().format("YYYY-MM-DD"),
    end_date: dayjs().format("YYYY-MM-DD"),
    exam_name: parameter.value.project,

    page: 1,
    per_page: 9000
  };
  proxy?.$http.common.reportList(params).then((res: any) => {
    if (res.data.length > 0) {
      reportList.value = res.data;
    }
  });
};

/**
 * 更新时间
*/
const setDate = () => {
  date.value = proxy?.$utils.getDate();
  setTimeout(setDate, 1000);
};

/**
 * 更新时间
*/
const getFullScreen = () => {
  date.value = proxy?.$utils.fullScreen();
};

onMounted(() => {
  setDate();
  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"].includes(project)) {
    needStart.value = true;
  }
  //加载WS
  initWs({ parameter: parameter.value, testTime: time.value.testTime }, (data: any) => {
    getMessage(data);
  });
  initSpeech();
  getReportList();
})

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

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

.logo {


  position: absolute;
  left: $waiPadding;
  top: $topPadding;
  display: flex;
  align-items: center;

  img {
    width: 14.563rem;
  }

  .title {
    width: auto;
    padding: 0 1.2rem 0 0.7rem;
    height: 3rem;
    line-height: 3rem;
    border-radius: 1.5rem;
    color: #ffffff;
    font-size: 1.7rem;
    margin-left: 1rem;
    background: linear-gradient(180deg, #FFB200 0%, #ED7905 72%);
    box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;

    i {
      width: 2.5rem;
      height: 2.1rem;
      margin-right: 0.8rem;
      background-image: url("@/assets/images/test/ai.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}

.close {
  width: 3.2rem;
  height: 3.2rem;
  position: absolute;
  right: calc($waiPadding - 3.2rem);
  top: calc($topPadding / 2 - 3.2rem/4);
  box-sizing: border-box;
  border: 1px solid #979797;
  background-image: url("@/assets/images/common/close.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 45% 45%;
  background-color: rgba(216, 216, 216, 0.8);
  border-radius: 50%;
  transition: all 0.5s;
  cursor: pointer;

  &:hover {
    transform: rotate(180deg);
    background-color: rgba(216, 216, 216, 1);
  }
}

.toolList {

  position: absolute;
  right: $waiPadding;
  top: calc($topPadding / 2);
  color: #00FFE8;
  font-size: 1.1rem;
  display: flex;

  .li {
    margin-right: 3rem;



  }

  .btn {
    width: 1.1rem;
    height: 1.1rem;

    display: block;
    cursor: pointer;
  }

  .speck {
    background-image: url("@/assets/images/common/speck.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  .screen {
    background-image: url("@/assets/images/common/screen.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
}

.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%;
      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;
        align-items: center;
        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;

          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: 29px;
        opacity: 1;
        background: #ffffff;
        box-sizing: border-box;
        border: 0.55rem solid #13ED84;

        .tips {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;

          img {
            max-height: 80%;
            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 {
        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;

    .title {
      height: 7.05vh;
      line-height: 7.05vh;
      width: 100%;
      text-align: center;
      color: #1A293A;
      font-size: 1.65rem;
      background: radial-gradient(120% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
    }

    ul {
      height: 100%;
      overflow-y: scroll;

      li {
        border-bottom: 1px solid #48677E;
        padding: 8px 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        &:hover {
          background: rgba(255, 255, 255, 0.4);
        }

        .left {
          display: flex;

          .pic {
            width: 7.5vh;
            height: 7.5vh;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0.5);
            margin-right: 13px;

            img {
              width: 100%;
            }
          }

          .txt {
            display: flex;
            align-items: center;

            .name {
              color: #F9F9F9;
              font-size: 1.38rem;
            }

            .className {
              color: #13ED84;
              font-size: 1.1rem;
            }
          }

        }

        .right {
          display: flex;
          font-weight: bold;
          align-items: center;

          .score {
            color: #ffffff;
            font-size: 1.1rem;
            font-family: 'Saira-ExtraBold';
          }

          .unit {
            color: #ffffff;
            font-size: 0.8rem;
            margin-left: 2px;
          }
        }

      }

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

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

      &::-webkit-scrollbar-button:hover {
        border-radius: 6px;
        background: rgba(216, 216, 216, 0.8);
      }
    }

    .erweima {
      text-align: center;
      padding: 1vh 0;

      img {
        width: 5rem;
      }

      span {
        display: block;
        color: #FFFFFF;
        font-size: 1.1rem;
        padding-top: 3px;
      }
    }
  }


}

.chengji {
  font-family: "Saira Black";
}
</style>