补充第四套样式

src/views/train/multiple.vue

@@ -2,7 +2,7 @@
   <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 }"
+      <div class="time" :class="{ 'time1': styleType == 1, 'time2': styleType == 2, 'time3': styleType == 3, 'time4': styleType == 4, }"
         v-show="(needStart && [42].includes(examState)) || (['jumprope', 'jumpingjack', 'situp'].includes(parameter.project) && [42].includes(examState))">
         {{
           time.countdownNum
@@ -10,7 +10,7 @@
     </Transition>
     <div class="main">
       <div class="testBox"
-        :class="{ 'testBox1': styleType == 1, 'testBox2': styleType == 2, 'testBox3': styleType == 3 }">
+        :class="{ 'testBox1': styleType == 1, 'testBox2': styleType == 2, 'testBox3': styleType == 3, 'testBox4': styleType == 4 }">
         <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">
@@ -99,7 +99,7 @@ const data = reactive<any>({
   showTestAgain: false,//再测一次按钮
   testList: [],//获取区列表
   multipleItemRefList: [],//获取区列表
-  styleType: null,//展示样式1：1-5个，2：6-10个，3：10个以上
+  styleType: null,//展示样式1：1-5个，2：6-10个，3：10个以上，4：1-4个，
   showReportList: false,//显示隐藏测试记录
   exit: 0,//退出响应次数
   sid: null,//WS的id
@@ -548,6 +548,9 @@ const testListArr = computed(() => {
   if (styleType.value == 3) {
     num = 10
   }
+  if (styleType.value == 4) {
+    num = 4
+  }
   let myLength = Math.ceil(testList.value.length / num);
   for (let i = 0; i < myLength; i++) {
     list[i] = [];
@@ -557,6 +560,7 @@ const testListArr = computed(() => {
       }
     }
   }
+  console.log("list",list)
   return list;
 });
 
@@ -816,7 +820,7 @@ onBeforeMount(() => {
   });
 
   //展示样式控制
-  if (testList.value.length <= 5) {
+  if (testList.value.length == 5) {
     styleType.value = 1;
     //填补空缺
     getAddTestList(5)
@@ -829,7 +833,9 @@ onBeforeMount(() => {
   if (testList.value.length > 10) {
     styleType.value = 3;
   }
-
+  if (testList.value.length < 5) {
+    styleType.value = 4;
+  }
   //需要开始按钮的项目
   let myList = ['situp', 'jumprope', 'jumpingjack', 'footballv1', 'basketballv1', 'volleyball', 'pingpong'];
   if (myList.includes(project) && styleType.value == 3) {
@@ -911,7 +917,7 @@ $waiPadding: 6.51rem;
   font-family: 'Saira-BlackItalic';
 }
 
-.time1 {
+.time1,.time4 {
   width: 26vh;
   height: 26vh;
   line-height: 26vh;
@@ -1680,4 +1686,187 @@ $waiPadding: 6.51rem;
     }
   }
 }
+
+::v-deep(.testBox4) {
+  $listMargin: 10vw;
+  $listWidth: calc((100vw - ($waiPadding * 2) - $listMargin) / 5);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  height: 100%;
+  .ul {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 36vh;
+
+    .li {
+      width: $listWidth;
+      height: 100%;
+      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;
+      }
+    }
+  }
+  .overlap.ul {
+    transition: all 0.5s;
+    margin-top: -15vh;
+    .li {
+      .score {
+        display: block;
+      }
+    }
+  }
+}
 </style>