日常开发

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint src/**/*.{ts,js,vue} --fix",
     "prettier": "prettier --write ."

src/components/MultipleItem/index.vue

@@ -2,14 +2,16 @@
   <div class="li">
     <div class="userInfo" @click="getChooseStudent">
       <div class="userInfo-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>
-          <div class="area">{{ area }}</div>
-          <img src="@/assets/images/test/profilePicture2.png" />
-        </div>
+        <transition :enter-active-class="proxy?.animate.dialog.enter">
+          <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>
+            <div class="area">{{ area }}</div>
+            <img src="@/assets/images/test/profilePicture2.png" />
+          </div>
+        </transition>
         <div class="name" :class="{ 'name2': faceCheckStu.student_id }">
-          {{ faceCheckStu.student_id ? faceCheckStu.name : "虚位以待" }}
+          {{ faceCheckStu.student_id ? faceCheckStu.name : area ? "虚位以待" : "未启用" }}
         </div>
       </div>
     </div>
@@ -256,6 +258,10 @@ const getAgain = async () => {
  * 选择学生
 */
 const getChooseStudent = () => {
+  if (!area) {
+    proxy?.$modal.msgWarning(`未启用`);
+    return false;
+  }
   if (props.examState == 42) {
     proxy?.$modal.msgWarning(`【${area}】正在测试请结束后再操作`);
     return false;

src/components/OptionWindow/index.vue

@@ -387,7 +387,7 @@ defineExpose({
             border: 2px solid #979797;
             color: #ffffff;
             font-size: 1.2rem;
-            margin: 0 5px 10px 5px;
+            margin: 0 6px 12px 6px;
             padding: 5px 8px;
             min-width: 2.5rem;
             border-radius: 4px;

src/views/train/multiple.vue

@@ -2,14 +2,15 @@
   <div>
     <Header @confirmExit="confirmExit"></Header>
     <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 class="time" :class="{ 'time1': styleType == 1, 'time2': styleType == 2, 'time3': styleType == 3 }"
+        v-show="[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': ![0, 3, 40, 41].includes(examState), 'ready': [41].includes(examState) }"
+        <div class="ul" :class="{ 'overlap': ![41, 43].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"
@@ -434,6 +435,23 @@ const getTestRecord = () => {
   }
 };
 
+/**
+ * 自动填补空缺
+*/
+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: i + 1 + myLength
+    }
+    testList.value.push(
+      obj
+    )
+  }
+};
+
 onBeforeMount(() => {
   parameter.value = route.query;
   let project = parameter.value.project;
@@ -450,7 +468,8 @@ onBeforeMount(() => {
   } else {
     parameter.value.gesture = false
   }
-  testList.value = parameter.value.area.split(',').map((item: any, index: number) => {
+  let list = parameter.value.area.split(',');
+  testList.value = list.map((item: any, index: number) => {
     let obj = {
       area: item,
       itemNumber: index + 1
@@ -464,9 +483,13 @@ onBeforeMount(() => {
   //展示样式控制
   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;
@@ -520,6 +543,18 @@ $waiPadding: 6.51rem;
   font-family: 'Saira-BlackItalic';
 }
 
+.time1 {
+  width: 26vh;
+  height: 26vh;
+  line-height: 26vh;
+  font-size: 10vh;
+  right: auto;
+  left: 50%;
+  top: 0vh;
+  margin-left: 8vw;
+  margin-right: auto;
+}
+
 .main {
   width: calc(100% - ($waiPadding * 2));
   height: 78vh;
@@ -556,33 +591,35 @@ $waiPadding: 6.51rem;
   z-index: 999;
 
   .confirmDiaWindow {
-    width: 23.5%;
+    width: 40%;
     height: 43.4%;
     border-radius: 1.6rem;
     opacity: 1;
-    background: rgba(255, 255, 255, 0.01);
     box-sizing: border-box;
-    border: 10px solid #13ED84;
+    border: 0.55rem solid #13ED84;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     position: fixed;
-    background: #ffffff;
+    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: 8.5rem;
-        line-height: 8.5rem;
+        font-size: 10rem;
+        line-height: 1;
         font-family: 'Saira-BlackItalic';
       }
 
-      .lable {
-        font-size: 3.5rem;
-      }
     }
 
   }
@@ -608,7 +645,7 @@ $waiPadding: 6.51rem;
     cursor: pointer;
     margin-left: 10px;
     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);
+    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1874), inset 0px 1px 0px 1px rgba(255, 255, 255, 0.5577);
 
     &:hover {
       background: #8EFFA9;
@@ -650,14 +687,14 @@ $waiPadding: 6.51rem;
 //列表样式写在此父组件里，子组件尽量减少个性化class和style，多样性以父组件控制类型
 ::v-deep(.testBox1) {
   $listMargin: 10vw;
-  $listWidth: calc((100% - $listMargin) / 5);
+  $listWidth: calc((100vw - ($waiPadding * 2) - $listMargin) / 5);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 
   .ul {
     width: 100%;
-    height: 35vh;
+    height: 36vh;
     display: flex;
 
 
@@ -692,8 +729,8 @@ $waiPadding: 6.51rem;
 
         .userInfo-center {
           .pic {
-            width: calc($listWidth - 1vw);
-            height: calc($listWidth - 1vw);
+            width: calc(36vh * 0.62);
+            height: calc(36vh * 0.62);
             border-radius: 50%;
             display: flex;
             justify-content: center;
@@ -704,9 +741,9 @@ $waiPadding: 6.51rem;
 
             .area {
               position: absolute;
-              top: 6vh;
+              top: calc(36vh * 0.18);
               color: #203C52;
-              font-size: 5.2vh;
+              font-size: 5vh;
               line-height: 1;
               font-family: 'Saira-ExtraBold';
               text-align: center;
@@ -731,7 +768,7 @@ $waiPadding: 6.51rem;
           }
 
           .name2 {
-            padding: 0 0.3rem;
+            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);
@@ -745,14 +782,14 @@ $waiPadding: 6.51rem;
         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;
+        background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+        display: none;
 
         &::before {
           content: "";
@@ -781,7 +818,7 @@ $waiPadding: 6.51rem;
     &:nth-child(2) {
       justify-content: space-evenly;
 
-      .list {
+      .li {
         margin-left: calc($listMargin/4);
         margin-right: calc($listMargin/4);
       }
@@ -803,15 +840,11 @@ $waiPadding: 6.51rem;
           background-repeat: no-repeat;
           background-size: 100%;
         }
-
-        .score {
-          display: none;
-        }
       }
     }
 
     &:nth-child(2) {
-      .list {
+      .li {
         &::after {
           content: "";
           position: absolute;
@@ -824,10 +857,6 @@ $waiPadding: 6.51rem;
           background-size: 100%;
           top: -100%;
         }
-
-        .score {
-          display: none;
-        }
       }
     }
   }
@@ -835,6 +864,12 @@ $waiPadding: 6.51rem;
   .overlap.ul {
     transition: all 0.5s;
 
+    .li {
+      .score {
+        display: block;
+      }
+    }
+
     &:nth-child(1) {
       margin-top: 5vh;
 
@@ -1055,7 +1090,7 @@ $waiPadding: 6.51rem;
     width: 100%;
     height: 14vh;
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-around;
     margin-bottom: calc($listMargin / 10);
 
     .li {