日常开发

package-lock.json

@@ -18,6 +18,7 @@
         "pinia": "^2.1.7",
         "socket.io-client": "^2.5.0",
         "speak-tts": "^2.0.8",
+        "swiper": "^11.1.4",
         "vue": "^3.4.21",
         "vue-router": "^4.0.13"
       },
@@ -6592,6 +6593,24 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -12345,6 +12364,11 @@
         "stable": "^0.1.8"
       }
     },
+    "swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA=="
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "pinia": "^2.1.7",
     "socket.io-client": "^2.5.0",
     "speak-tts": "^2.0.8",
+    "swiper": "^11.1.4",
     "vue": "^3.4.21",
     "vue-router": "^4.0.13"
   },

src/views/home/index.vue

@@ -9,6 +9,7 @@
       <div class="right">
         <div class="right-top">
           <div class="li" @click="getJump('/test', '测试')"><img src="@/assets/images/home/test.png" />
+            <i></i>
           </div>
           <div class="li" @click="getJump('/ranking', '排行榜')"><img src="@/assets/images/home/ranking.png" />
           </div>
@@ -73,15 +74,22 @@ $waiPadding: 6.51rem;
 
   .li {
     cursor: pointer;
+
+    &:hover {
+
+      img,
+      i {
+        transform: scale(1.06);
+      }
+
+    }
   }
 
   img {
     width: 100%;
     transition: all 0.5s;
 
-    &:hover {
-      transform: scale(1.06);
-    }
+
   }
 
   .left {
@@ -105,6 +113,28 @@ $waiPadding: 6.51rem;
       .li {
         width: calc(50% - $myPadding /2);
       }
+
+      .li:nth-child(1) {
+        position: relative;
+
+        i {
+          width: 4vw;
+          height: 4vw;
+          display: block;
+          position: absolute;
+          top: calc(4vw / -3);
+          left: 50%;
+          margin-left: calc(4vw * -0.5);
+          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;
+        }
+      }
+
     }
 
     .right-bottom {

src/views/train/index.vue

@@ -4,18 +4,43 @@
       </img></div>
     <div class="close" @click="getExit"></div>
     <div class="menu">
-      <div class="li" v-for="(item, index) in projectList" :key="index" @click="getOption(item)">
+
+      <swiper :slides-per-view="6" :modules="[Grid]" :grid="{
+      fill: 'row',
+      rows: 2,
+    }" :space-between="20">
+        <swiper-slide 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">
+              {{ item.name }}
+            </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> -->
     </div>
     <OptionWindow ref="optionWindowRef" :projectList="projectList" />
   </div>
 </template>
 
 <script setup name="TrainIndex" lang="ts">
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Grid } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/grid';
+
+
+
 const router = useRouter();
 const { proxy } = getCurrentInstance() as any;
 const optionWindowRef = ref();
@@ -125,25 +150,26 @@ $waiPadding: 6.51rem;
 
 .menu {
   width: calc(100% - ($waiPadding * 2));
+  height: 72vh;
   padding-top: 10rem;
   margin: 0 auto;
   display: flex;
-  height: 52vh;
 
   .li {
-    width: calc((100% / 6) - 1rem + (1rem/6));
-    margin-right: 1rem;
-    margin-bottom: 1rem;
+    // width: calc((100% / 6) - 1rem + (1rem/6));
+    // margin-right: 1rem;
+    // margin-bottom: 1rem;
+    width: 100%;
+    height: 100%;
     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;
 
@@ -156,37 +182,60 @@ $waiPadding: 6.51rem;
 
 
     .pic {
-      width: 20.2vh;
-      height: 20.2vh;
+      width: 11.36vw;
+      height: 11.36vw;
       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;
+      margin-bottom: 2vh;
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
 
       img {
         max-width: 88%;
         max-height: 88%;
+        transition: all 1s;
       }
     }
 
-
-    &:active {
-      transform: translateY(-0.5rem);
+    &:hover {
+      img {
+        transform: translateY(-0.5vw);
+      }
     }
   }
 
+  .swiper-slide {
+    border-radius: 1.6rem;
+    overflow: hidden;
+  }
 
-  .li:nth-of-type(odd) {
+  .swiper-slide:nth-of-type(odd) {
     background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
   }
 
-  .li:nth-of-type(even) {
+  .swiper-slide:nth-of-type(even) {
     background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
   }
 
 }
+
+@media screen and (max-width: 1450px) {
+  .menu {
+
+    .li {
+      .name {
+        font-size: 1.8rem;
+      }
+
+      .pic {
+        width: 10vw;
+        height: 10vw;
+      }
+    }
+  }
+}
 </style>