tropsCode/src/views/train/multiple.vue

<template>
  <div>
    <Header @confirmExit="confirmExit"></Header>
    <div class="main">
      <transition :enter-active-class="proxy?.animate.dialog.enter" :leave-active-class="proxy?.animate.dialog.leave">
        <div class="time" v-show="[42].includes(examState)">{{
          time.countdownNum
        }}</div>
      </transition>
      <div class="testBox"
        :class="{ 'testBox1': styleType == 1, 'testBox2': styleType == 2, 'testBox3': styleType == 3 }">
        <div class="ul" :class="{ 'overlap': ![0, 3, 40, 41].includes(examState), 'ready': [41].includes(examState) }"
          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"
            :itemNumber="item.itemNumber" @returnData="returnData" :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="getStartOneTest" v-if="examState == 43">开始测试</div>
      </template>
      <template v-else>
        <div class="btn startBtn" @click="getReady" v-if="examState == 43">开始测试</div>
      </template>
    </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="confirmDiaWindow-con">
              <div class="readyBox">
                <div class="value">{{ time.ready }}</div>
                <div class="lable">倒计时</div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <!--倒计时结束-->
  </div>
</template>

<script setup name="Multiple" 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'
const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const data = reactive<any>({
  timerManager: {},//计时器管理
  parameter: {},//参数
  time: {
    testTime: 60,//时长
    countdownNum: 0,//计时
    ready: 0,//预备
  },
  userInfo: {},//用户信息
  examState: 0,//当前状态
  needStart: false,//是否需要按钮
  showTestAgain: false,//再测一次按钮
  testList: [],//获取区列表
  multipleItemRefList: [],//获取区列表
  styleType: null,//展示样式1：1-5个，2：6-10个，3：10个以上
});
const { timerManager, parameter, time, userInfo, examState, needStart, showTestAgain, testList, multipleItemRefList, styleType } = toRefs(data);

/**
 * 创建组件实例
*/
const multipleItemRef = (el: any, index: number, area: any) => {
  multipleItemRefList.value[index - 1] = el;
}

/**
 * 开始识别
*/
const getOpenOneTestAndStartFace = () => {
  cleanData();
  examState.value = 41;
  for (let i = 0; i < multipleItemRefList.value.length; i++) {
    multipleItemRefList.value[i].getOpenOneTestAndStartFace()
  }
};

/**
 * 停止人脸识别
*/
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 = 0; i < multipleItemRefList.value.length; i++) {
    multipleItemRefList.value[i].getStopFace()
  }
};

/**
 * 开始测试
*/
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 = 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()
    }
  }
  speckText("哨声");
  //显示再测一次按钮
  showTestAgain.value = true;
  //时间为0的为正计时，大于0的为倒计时
  if (time.value.testTime == 0) {
    getCounting("+");
  } else {
    getCounting("-");
  }
};

/**
 * 再测一次
*/
const getAgain = async () => {
  cleanData();
  examState.value = 43;
  for (let i = 0; i < multipleItemRefList.value.length; i++) {
    multipleItemRefList.value[i].getAgain()
  }
};

/**
 * 确认退出
*/
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 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 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 (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);
    }
  }

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

  //测试完成后回退状态
  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 = () => {
  //停止播报;
  speckCancel()
  //正在识别的停止识别
  for (let i = 0; i < multipleItemRefList.value.length; i++) {
    if (testList.value[i].examState == 41) {
      multipleItemRefList.value[i].getStopFace()
    }
  }
  time.value.ready = 5;
  speckText(time.value.ready);
  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;
});

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;
  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
  }
  testList.value = parameter.value.area.split(',').map((item: any, index: number) => {
    let obj = {
      area: item,
      itemNumber: index + 1
    }
    return obj;
  });
  //需要开始按钮的项目
  if (testList.value.length > 10) {
    needStart.value = true;
  }
  //展示样式控制
  if (testList.value.length <= 5) {
    styleType.value = 1;
  }
  if (testList.value.length > 5 && testList.value.length <= 10) {
    styleType.value = 2;
  }
  if (testList.value.length > 10) {
    styleType.value = 3;
  }
})


onMounted(() => {
  //加载WS
  let project = parameter.value.project;
  initWs({ parameter: parameter.value, testTime: time.value.testTime, version: "v2" }, (data: any) => {
    let index = testList.value.findIndex((item: any) => {
      let examId = `${project}_${item.area}`;
      return examId == data.exam_id;
    })
    multipleItemRefList.value[index]?.getMessage(data);
  });
  initSpeech();
  setTimeout(() => {
    //10秒还在0状态就算超时
    if (examState.value == 0) {
      getExit();
    }
  }, 10000);
})

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

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

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

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

.mask {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 998;
}

.confirmDiaBg {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;

  .confirmDiaWindow {
    width: 23.5%;
    height: 43.4%;
    border-radius: 29px;
    opacity: 1;
    background: radial-gradient(122% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;

    .confirmDiaWindow-con {
      .pic {
        width: 22.3vh;
        height: 22.3vh;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        margin: 0 auto 2vh auto;

        .shine {
          position: absolute;
          left: -5vh;
          top: 0;
          width: 5vh;
          height: 22.3vh;
          animation: shineani 3s infinite;
          -webkit-animation: shineani 3s infinite;
          z-index: 1;

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

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


.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;
    background: radial-gradient(159% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
    box-shadow: 3px 6px 4px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);

    &: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.5577);

    &:hover {
      background: #F99F02;
    }
  }
}

//列表样式写在此父组件里，子组件尽量减少个性化class和style，多样性以父组件控制类型
::v-deep(.testBox1) {
  $listMargin: 10vw;
  $listWidth: calc((100% - $listMargin) / 5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .ul {
    width: 100%;
    height: 35vh;
    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($listWidth - 1vw);
            height: calc($listWidth - 1vw);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            margin: 0 auto 2vh auto;
            position: relative;

            .area {
              position: absolute;
              top: 6vh;
              color: #203C52;
              font-size: 5.2vh;
              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 {
            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);
          }
        }

      }

      .score {
        height: 18vh;
        line-height: 18vh;
        font-size: 12vh;
        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;

        &::before {
          content: "";
          width: 2vw;
          height: 2vw;
          display: block;
          position: absolute;
          top: -1.5vw;
          left: 50%;
          margin-left: -1vw;
          background-image: url("@/assets/images/home/test_icon.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border-radius: 50%;
          flex-shrink: 0;
          transition: all 0.5s;
        }
      }
    }

    &:nth-child(1) {
      justify-content: space-between;
    }

    &:nth-child(2) {
      justify-content: space-evenly;

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

        .score {
          display: none;
        }
      }
    }

    &:nth-child(2) {
      .list {
        &::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%;
        }

        .score {
          display: none;
        }
      }
    }
  }

  .overlap.ul {
    transition: all 0.5s;

    &: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;

        .userInfo-center {

          .pic {
            width: 12vw;
            height: 12vw;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            margin: 0 auto 2vh auto;
            position: relative;

            .area {
              position: absolute;
              top: 6vh;
              color: #203C52;
              font-size: 5.2vh;
              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;
          }
        }
      }

      .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/home/test_icon.png");
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          border-radius: 50%;
          flex-shrink: 0;
          transition: all 0.5s;
        }
      }
    }
  }

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

      }

      .score {
        font-size: 3rem;
        font-family: 'Saira-BlackItalic';
        text-align: center;
        color: #1A293A;
        line-height: 1;
      }
    }
  }
}
</style>