星潮教室优化

 <div class="star-page yoho-page">
     {{> star/head-tab}}
-    <div class="swiper-num swiper-num1"></div>
-    <div class="swiper-num swiper-num2"></div>
-    <div class="swiper-num swiper-num3"></div>
     <div class="loading-tip">下拉刷新</div>
     <div class="star-main">
         <div class="main-content">

@@ -18,7 +18,9 @@ var $window = $(window),
     $headTab = $('.head-tab'),
     headTabH = $headTab.height(),
     scrollH = $(window).height() - headTabH,
-    $loadingTip = $('.loading-tip');
+    $loadingTip = $('.loading-tip'),
+    u = navigator.userAgent,
+    isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
 
 /*
     $swiperView = $('.swiper-view'),
@@ -33,8 +35,11 @@ var mySwiper;
 var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml,
     $avatarClone, $starArticle, $avatarWrap, starIScroll;
 
-var swiperNum = ($('.swiper-num2').width() - $('.swiper-num1').width()) +
-                ($('.swiper-num3').width() - $('.swiper-num1').width()) / 2;
+var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2;
+
+if ($window.width() === 375 && isiOS) {
+    swiperNum = 32;
+}
 
 require('../common');
 
@@ -101,6 +106,7 @@ function setIndexAction() {
     if (bannerLen > 1) {
         avatarSwiper = new Swiper('.avatar-1', {
             loop: true,
+            initialSlide: 0,
             centeredSlides: true,
             slidesPerView: 'auto',
             loopedSlides: bannerLen,

@@ -147,10 +147,8 @@
             margin-top: 36px;
             background: #000;
 
-            span {
-                display: block;
-                width: 100%;
-                height: 100%;
+            a {
+                border-radius: 5px;
             }
         }
 
@@ -416,18 +414,6 @@
         top: 0;
         z-index: -1;
     }
-
-    .swiper-num1 {
-        width: 110px;
-    }
-
-    .swiper-num2 {
-        width: 130px;
-    }
-
-    .swiper-num3 {
-        width: 180px;
-    }
 }
 
 .star-index-bg {
@@ -438,3 +424,31 @@
         background: #000;
     }
 }
+
+@media screen and (max-width: 375px) and (min-width: 375px) {
+    .star-page {
+        .avatar-wrap {
+            height: 105PX;
+        }
+
+        .avatar-swiper {
+            li {
+                width: 64PX;
+                height: 64PX;
+                margin-top: 20.5PX;
+            }
+
+            .swiper-slide-active {
+                width: 105PX;
+                height: 105PX;
+            }
+
+            .swiper-slide-prev,
+            .swiper-slide-next {
+                width: 76PX;
+                height: 76PX;
+                margin-top: 14.5PX;
+            }
+        }
+    }
+}