日常开发

src/components/OptionWindow/index.vue

@@ -18,7 +18,7 @@
               <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"
-                  hover-class="li-hover" @click="getChooseArea(item)">
+                  @click="getChooseArea(item)">
                   <div>{{ item.name }}</div>
                 </div>
               </div>
@@ -28,7 +28,7 @@
               <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"
-                  hover-class="li-hover" @click="getChooseStandard(item)">
+                  @click="getChooseStandard(item)">
                   <div>{{ item.label }}</div>
                 </div>
               </div>

src/utils/dataDictionary.ts

@@ -87,7 +87,7 @@ let data = {
     runa800: '脚环800',
     runa1000: '脚环1000',
     run1000: '1000米',
-    skiprope: '智慧跳绳',
+    skiprope: '蓝牙跳绳',
     heartbeat: '心率监测',
     bmi: 'BMI',
     sitforbend: '坐位体前屈',

src/views/train/index.vue

@@ -2,18 +2,15 @@
   <div class="train">
     <div class="logo"> <img src="@/assets/images/logo.png">
       </img></div>
+    <div class="close" @click="getExit"></div>
     <div class="menu">
-      <transition-group :enter-active-class="proxy?.animate.dialog.enter"
-        :leave-active-class="proxy?.animate.dialog.leave">
-        <div v-for="(item, index) in projectList" :key="index" :data-index="index" class="li" hover-class="li-hover"
-          @click="getOption(item)">
-          <div class="name">
-            <div>{{ item.name }}</div>
-          </div>
+      <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>
-      </transition-group>
+      </div>
     </div>
-    <div @click="getExit">返回</div>
     <OptionWindow ref="optionWindowRef" :projectList="projectList" />
   </div>
 </template>
@@ -90,13 +87,106 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+$topPadding: 5.19rem;
+$waiPadding: 6.51rem;
+
 .logo {
   img {
     width: 14.563rem;
   }
 
   position: absolute;
-  left: 6.51rem;
-  top: 5.19rem;
+  left: $waiPadding;
+  top: $topPadding;
+}
+
+.close {
+  width: 3.2rem;
+  height: 3.2rem;
+  position: absolute;
+  right: calc($waiPadding - 3.2rem);
+  top: $topPadding;
+  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);
+  }
+}
+
+.menu {
+  width: calc(100% - ($waiPadding * 2));
+  padding-top: 10rem;
+  margin: 0 auto;
+  display: flex;
+  height: 52vh;
+
+  .li {
+    width: calc((100% / 6) - 1rem + (1rem/6));
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    padding: 2.2vh 0;
+    border-radius: 1.6rem;
+    opacity: 1;
+    box-sizing: border-box;
+    box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.9046), inset 0px 3px 6px 0px rgba(0, 0, 0, 0.0851);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+    transition: all 1s;
+    flex-shrink: 0;
+    cursor: pointer;
+
+    .name {
+      width: 100%;
+      font-size: 2.48rem;
+      color: #1A293A;
+      padding: 0.5rem 0;
+    }
+
+
+    .pic {
+      width: 20.2vh;
+      height: 20.2vh;
+      border-radius: 50%;
+      background: radial-gradient(78% 78% at 53% 50%, #07121A 0%, #2A4256 49%, #5180A9 100%);
+      box-shadow: 0px 0px 2px 2px #FFFFFF;
+      margin-bottom: 2.2vh;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        max-width: 88%;
+        max-height: 88%;
+      }
+    }
+
+
+    &:active {
+      transform: translateY(-0.5rem);
+    }
+  }
+
+
+  .li:nth-of-type(odd) {
+    background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
+  }
+
+  .li:nth-of-type(even) {
+    background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
+  }
+
 }
 </style>