日常开发

src/views/train/index.vue

@@ -8,9 +8,7 @@
       fill: 'column',
       rows: 2,
     }" :space-between="20" :slides-per-group="12">
-        <swiper-slide
-          :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)">
+        <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">
@@ -203,31 +201,56 @@ $waiPadding: 6.51rem;
     border-radius: 1.6rem;
     overflow: hidden;
 
-    &:nth-of-type(odd) {
+    &:nth-child(1),
+    &:nth-child(4),
+    &:nth-child(5),
+    &:nth-child(8),
+    &:nth-child(9),
+    &:nth-child(12),
+    &:nth-child(13),
+    &:nth-child(16),
+    &:nth-child(17),
+    &:nth-child(20),
+    &:nth-child(21),
+    &:nth-child(24),
+    &:nth-child(25),
+    &:nth-child(28),
+    &:nth-child(29),
+    &:nth-child(32),
+    &:nth-child(33),
+    &:nth-child(36),
+    &:nth-child(37),
+    &:nth-child(40),
+    &:nth-child(41),
+    &:nth-child(44) {
       background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
     }
 
-    &:nth-of-type(even) {
+    &:nth-child(2),
+    &:nth-child(3),
+    &:nth-child(6),
+    &:nth-child(7),
+    &:nth-child(10),
+    &:nth-child(11),
+    &:nth-child(14),
+    &:nth-child(15),
+    &:nth-child(18),
+    &:nth-child(19),
+    &:nth-child(22),
+    &:nth-child(23),
+    &:nth-child(26),
+    &:nth-child(27),
+    &:nth-child(30),
+    &:nth-child(31),
+    &:nth-child(34),
+    &:nth-child(35),
+    &:nth-child(38),
+    &:nth-child(39),
+    &:nth-child(42),
+    &:nth-child(43) {
       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%);
-  // }
-
-  // .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%);
-  // }
-
 }
 
 @media screen and (max-width: 1450px) {