日常开发

src/components/OptionWindow/index.vue

@@ -7,51 +7,47 @@
       <div class="optionWindow" v-if="optionWindow.show">
         <div class="box">
           <div class="top">
-            <div @click="close">关闭</div>
+            <div class="close" @click="close"></div>
           </div>
           <div class="content">
-            <div>
-              <div>
-                请选择测试区域、请选择设备组
-                <div @click="getAllArea" :class="{ 'active': chooseAllState }">全选</div>
+            <div class="areaBox">
+              <div class="content-title content-title2">
+                {{ project.key !== 'skiprope' ? '请选择测试区域' : '请选择设备组' }}
               </div>
-              <div style="display: flex;flex-wrap: wrap;">
-                <div style="margin:0 20px;" v-for="(item, index) in areaList"
-                  :class="{ 'select': chooseArea.includes(item.key), 'ing': item.value != '0' }" :key="index" class="li"
+              <div class="testAreaChooseRoll">
+                <div class="li" v-for="(item, index) in areaList"
+                  :class="{ 'select': chooseArea.includes(item.key), 'ing': item.value != '0' }" :key="index"
                   @click="getChooseArea(item)">
                   <div>{{ item.name }}</div>
                 </div>
               </div>
+              <div @click="getAllArea" class="allBtn" :class="{ 'active': chooseAllState }">{{ chooseAllState ? '重 置' :
+      '全 选' }}</div>
             </div>
-            <div>
-              <div>评分标准</div>
-              <div style="display: flex;flex-wrap: wrap;">
-                <div style="margin:0 20px;" v-for="(item, index) in standardList"
-                  :class="{ 'select': optionForm.standard == item.value }" :key="index" class="li"
-                  @click="getChooseStandard(item)">
+            <div class="standardBox">
+              <div class="content-title content-title2">评分标准</div>
+              <div class="standardBoxBtn">
+                <div v-for="(item, index) in standardList" :class="{ 'select': optionForm.standard == item.value }"
+                  :key="index" class="li" @click="getChooseStandard(item)">
                   <div>{{ item.label }}</div>
                 </div>
               </div>
             </div>
-            <div>
-              <div>举手识别</div>
-              <div>
-                <el-switch v-model="optionForm.gesture" :active-value="true" :inactive-value="false" />
+            <div class="switchList">
+              <div class="li">
+                <span>举手识别</span>
+                <el-switch v-model="optionForm.gesture" :active-value="true" :inactive-value="false"
+                  style="--el-switch-on-color: #08FFA9; --el-switch-off-color: #ACACAC" />
               </div>
-            </div>
-
-            <div v-if="['skiprope'].includes(optionForm.project)">
-              <div>接收心率</div>
-              <div>
-                <el-switch v-model="optionForm.hasHB" :active-value="true" :inactive-value="false" />
+              <div class="li">
+                <span>体验模式</span>
+                <el-switch v-model="optionForm.experience" :active-value="true" :inactive-value="false"
+                  style="--el-switch-on-color: #08FFA9; --el-switch-off-color: #ACACAC" />
               </div>
-            </div>
-            <div>
-              <div>时长</div>
-              <div>
-                <el-select v-model="optionForm.time" size="small" :popper-append-to-body="false" placeholder="请选择">
-                  <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
+              <div class="li" v-if="['skiprope'].includes(optionForm.project)">
+                <span>接收心率</span>
+                <el-switch v-model="optionForm.hasHB" :active-value="true" :inactive-value="false"
+                  style="--el-switch-on-color: #08FFA9; --el-switch-off-color: #ACACAC" />
               </div>
             </div>
             <div v-if="['heartbeat'].includes(optionForm.project)">
@@ -59,9 +55,9 @@
               <div>
                 平均心率:
                 <div style="display: flex;">
-                  <el-input v-model="optionForm.standHBL" size="small" />
+                  <el-input v-model="optionForm.standHBL" />
                   ~
-                  <el-input v-model="optionForm.standHBH" size="small" />
+                  <el-input v-model="optionForm.standHBH" />
                 </div>
               </div>
               <div>
@@ -71,19 +67,23 @@
                 </div>
               </div>
             </div>
-            <div>
-              <div>音乐</div>
-              <div>
-                <el-select v-model="optionForm.music" size="small" :popper-append-to-body="false" placeholder="请选择"
-                  clearable>
+            <div class="switchList">
+              <div class="li">
+                <span>时长</span>
+                <el-select v-model="optionForm.time" :popper-append-to-body="false" placeholder="请选择">
+                  <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </div>
+              <div class="li">
+                <span>音乐</span>
+                <el-select v-model="optionForm.music" :popper-append-to-body="false" placeholder="请选择" clearable>
                   <el-option v-for="item in musicList" :key="item.id" :label="item.name" :value="item.url" />
                 </el-select>
               </div>
             </div>
           </div>
           <div class="bottom">
-            <div @click="close">取消</div>
-            <div @click="confirm">确定</div>
+            <div class="btn" @click="confirm">确 定</div>
           </div>
         </div>
       </div>
@@ -135,6 +135,7 @@ const timeList =
 const data = reactive<any>({
   optionForm: {
     gesture: true,
+    standard: 0
   },
   optionWindow: {
     show: false,
@@ -155,6 +156,7 @@ const open = (data: any) => {
   getClass();
   getMusic();
   project.value = data;
+  chooseArea.value = [];
   optionWindow.value.show = true;
 };
 
@@ -257,12 +259,17 @@ const confirm = (data: any) => {
   console.log("optionForm", optionForm.value);
   if (!optionForm.value.classes) {
     getClass();
-    let message = "没有班级，将重新加载班级请重新操作！";
+    let message = "没有班级，将重新加载班级请重新操作";
     ElMessage({ message: message, type: 'error', duration: 3 * 1000 });
     return false;
   }
   if (!optionForm.value.area) {
-    let message = "没有测试区！";
+    let message = "请选择测试区";
+    ElMessage({ message: message, type: 'error', duration: 3 * 1000 });
+    return false;
+  }
+  if (optionForm.value.standard == null) {
+    let message = "请选择评分标准";
     ElMessage({ message: message, type: 'error', duration: 3 * 1000 });
     return false;
   }
@@ -297,7 +304,7 @@ defineExpose({
   width: 100vw;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.78);
   z-index: 998;
 }
 
@@ -315,36 +322,198 @@ defineExpose({
 
   .box {
     width: 50%;
-    background: #000000;
+    border-radius: 1.6rem;
+    background: linear-gradient(46deg, #092941 -83%, #2A484B 95%);
+    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.2);
 
     .top {
       color: #ffffff;
       display: flex;
-      justify-content: space-around;
+      justify-content: flex-end;
     }
 
     .content {
-      height: 50vh;
-      overflow-y: scroll;
+      max-height: 65vh;
+      margin-bottom: 2vh;
 
-      .select {
-        color: blue;
+      .content-title {
+        font-size: 1.65rem;
+        display: flex;
+        justify-content: center;
       }
 
-      .ing {
-        color: red;
+      .content-title2 {
+        padding: 0 0 2.5vh 0;
       }
+
+      .areaBox {
+        padding-bottom: 2vh;
+        text-align: center;
+
+        .testAreaChooseRoll {
+          width: 100%;
+          max-height: 17vh;
+          overflow-y: scroll;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          padding: 0 20px;
+          box-sizing: border-box;
+          margin-bottom: 5px;
+
+          .li {
+            border: 2px solid #979797;
+            color: #ffffff;
+            font-size: 1.2rem;
+            margin: 0 5px 10px 5px;
+            padding: 5px 8px;
+            min-width: 2.5rem;
+            border-radius: 4px;
+            font-weight: bold;
+            opacity: 0.7;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .select {
+            border: 2px solid #ffffff;
+            color: #ffffff;
+            opacity: 1;
+          }
+
+          .ing {
+            border: 2px solid #ff0000;
+            color: #ff0000;
+            opacity: 1;
+          }
+
+          &::-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);
+          }
+
+        }
+
+        .allBtn {
+          display: inline;
+          margin: 0 auto;
+          cursor: pointer;
+        }
+      }
+
+      .standardBox {
+        padding: 2.5vh 0;
+
+        .standardBoxBtn {
+          display: flex;
+          width: 42%;
+          height: 3.6rem;
+          line-height: 3.6rem;
+          font-size: 1.65rem;
+          margin: 0 auto;
+          border-radius: 1.8rem;
+          font-size: 2rem;
+          text-align: center;
+          color: #1A293A;
+          background: #ACACAC;
+          overflow: hidden;
+
+          .li {
+            width: 50%;
+            text-align: center;
+            cursor: pointer;
+          }
+
+          .select {
+            border-radius: 1.8rem;
+            background: radial-gradient(50% 181% at 163% 0%, #35FFC6 0%, #00FFE8 100%);
+          }
+        }
+      }
+
+
+      .switchList {
+        padding: 2.5vh 0;
+        display: flex;
+        justify-content: center;
+
+        .li {
+          display: flex;
+          align-items: center;
+          margin: 0 2rem;
+
+          span {
+            font-size: 1.65rem;
+            margin-right: 8px;
+            flex-shrink: 0;
+          }
+
+          .el-select {
+            width: 100px;
+          }
+        }
+      }
+
+
     }
 
     .bottom {
-      height: 60px;
+      height: 3.59rem;
+      padding: 2.5rem 0;
       align-items: center;
       color: #ffffff;
       display: flex;
       justify-content: space-around;
+
+      .btn {
+        width: 33%;
+        height: 3.59rem;
+        line-height: 3.59rem;
+        font-size: 2rem;
+        margin: 0 auto;
+        border-radius: 0.83rem;
+        font-size: 2rem;
+        text-align: center;
+        color: #1A293A;
+        background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
+        cursor: pointer;
+      }
     }
   }
 
+  .close {
+    width: 3.2rem;
+    height: 3.2rem;
+    margin: 1.5rem 1.5rem 0 0;
+    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);
+    }
+  }
 }
 </style>

src/layout/index.vue

@@ -18,17 +18,16 @@ const { proxy } = getCurrentInstance() as any;
 }
 </style>
 <style lang="scss">
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
+// ::-webkit-scrollbar {
+//   width: 6px;
+//   height: 6px;
+// }
 
-::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
-}
+// ::-webkit-scrollbar-track {
+//   background-color: #f1f1f1;
+// }
 
-::-webkit-scrollbar-thumb {
-  background-color: #c0c0c0;
-  border-radius: 3px;
-}
-</style>
+// ::-webkit-scrollbar-thumb {
+//   background-color: #c0c0c0;
+//   border-radius: 3px;
+// }</style>

src/utils/dataDictionary.ts

@@ -71,12 +71,12 @@ let data = {
     verticaljump: '纵跳摸高',
     pullup: '引体向上',
     situp: '仰卧起坐',
-    solidball: '实心球',
-    shotput: '铅球',
     trijump: '三级蛙跳',
     sidepullup: '斜身引体',
     jumprope: '跳绳',
     jumpingjack: '开合跳',
+    solidball: '实心球',
+    shotput: '铅球',
     run50: '50米',
     run60: '60米',
     run70: '70米',

src/views/login/index.vue

@@ -168,7 +168,7 @@ $waiPadding: 6.51rem;
         width: 36.7%;
         height: 3.59rem;
         line-height: 3.59rem;
-        border-radius: 15px;
+        border-radius: 0.83rem;
         font-size: 2rem;
         opacity: 1;
         cursor: pointer;

src/views/train/index.vue

@@ -4,15 +4,13 @@
       </img></div>
     <div class="close" @click="getExit"></div>
     <div class="menu">
-
       <swiper :slides-per-view="6" :modules="[Grid]" :grid="{
-      fill: 'row',
+      fill: 'column',
       rows: 2,
-    }" :space-between="20">
+    }" :space-between="20" :slides-per-group="12">
         <swiper-slide
-          :class="{ 'list1': index + 1 <= projectList.length / 2, 'list2': index + 1 > projectList.length / 2 }"
+          :class="{ 'list1': index + 1 <= Math.ceil(projectList.length / 2), 'list2': index + 1 > Math.ceil(projectList.length / 2) }"
           v-for="(item, index) in  projectList " :key="index" @click="getOption(item)">
-
           <div class="li">
             <div class="pic"><img :src="'/src/assets/images/train/' + item.key + '.png'"></div>
             <div class="name">
@@ -20,16 +18,7 @@
             </div>
           </div>
         </swiper-slide>
-
       </swiper>
-
-
-      <!-- <div class="li" v-for="(item, index) in projectList" :key="index" @click="getOption(item)">
-        <div class="pic"><img :src="'/src/assets/images/train/' + item.key + '.png'"></div>
-        <div class="name">
-          {{ item.name }}
-        </div>
-      </div> -->
     </div>
     <OptionWindow ref="optionWindowRef" :projectList="projectList" />
   </div>
@@ -213,24 +202,31 @@ $waiPadding: 6.51rem;
   .swiper-slide {
     border-radius: 1.6rem;
     overflow: hidden;
-  }
 
-  .list1:nth-of-type(odd) {
-    background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
-  }
+    &:nth-of-type(odd) {
+      background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+    }
 
-  .list1:nth-of-type(even) {
-    background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+    &:nth-of-type(even) {
+      background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+    }
   }
 
-  .list2:nth-of-type(odd) {
-    background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
-  }
+  // .list1:nth-of-type(odd) {
+  //   background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+  // }
 
-  .list2:nth-of-type(even) {
-    background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+  // .list1:nth-of-type(even) {
+  //   background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+  // }
 
-  }
+  // .list2:nth-of-type(odd) {
+  //   background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+  // }
+
+  // .list2:nth-of-type(even) {
+  //   background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+  // }
 
 }