修改样式

src/views/ranking/index.vue

@@ -6,7 +6,7 @@
         <div class="top-left">
           <div class="title1">{{ pageType == 1 ? "运动风云榜" : pageType == 2 ? currentClass.name : "" }} · {{
             projectObj.title
-            }}</div>
+          }}</div>
           <div class="title2" @click="choiceClassWindow = true">{{ pageType == 1 ? "切换到班级榜" : pageType == 2 ? "切换到班级" :
             "" }}</div>
         </div>
@@ -64,8 +64,12 @@
               </swiper-slide>
             </swiper>
             <!-- 如果需要导航按钮 -->
-            <div class="swiper-button-prev swiper-btn-left" slot="button-prev" @click="getStopPlaying()"></div>
-            <div class="swiper-button-next swiper-btn-right" slot="button-next" @click="getStopPlaying()"></div>
+            <div class="swiper-button-prev swiper-btn swiper-btn-left" slot="button-prev" @click="getStopPlaying()"
+              v-if="gradeData.lengt > 0">
+            </div>
+            <div class="swiper-button-next swiper-btn swiper-btn-right" slot="button-next" @click="getStopPlaying()"
+              v-if="gradeData.lengt > 0">
+            </div>
             <!--年级排名结束-->
           </div>
         </div>
@@ -1330,28 +1334,24 @@ $waiPadding: 6.51rem;
       }
     }
 
-    .swiper-btn-left {
-      width: 1.7rem;
-      height: 2.2rem;
+    .swiper-btn {
+      width: 2.5rem;
+      height: 2.5rem;
       display: block;
-      background: url("@/assets/images/ranking/btn-left.png") left center no-repeat;
-      background-size: 100% 100%;
 
       &::after {
         display: none;
       }
     }
 
+    .swiper-btn-left {
+      background: url("@/assets/images/ranking/btn-left.png") left center no-repeat;
+      background-size: 100% 100%;
+    }
+
     .swiper-btn-right {
-      width: 1.7rem;
-      height: 2.2rem;
-      display: block;
       background: url("@/assets/images/ranking/btn-right.png") left center no-repeat;
       background-size: 100% 100%;
-
-      &::after {
-        display: none;
-      }
     }
 
   }