日常开发

src/views/train/index.vue

@@ -9,7 +9,9 @@
       fill: 'row',
       rows: 2,
     }" :space-between="20">
-        <swiper-slide v-for="(item, index) in projectList" :key="index" @click="getOption(item)">
+        <swiper-slide
+          :class="{ 'list1': index + 1 <= projectList.length / 2, 'list2': index + 1 > 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>
@@ -213,14 +215,23 @@ $waiPadding: 6.51rem;
     overflow: hidden;
   }
 
-  .swiper-slide:nth-of-type(odd) {
+  .list1:nth-of-type(odd) {
     background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
   }
 
-  .swiper-slide:nth-of-type(even) {
+  .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) {