取消订单swiper样式修改

@@ -123,10 +123,35 @@ $(function() {
     reasonSwiper = new Swiper('.box-main', {
         paginationClickable: true,
         direction: 'vertical',
-        slidesPerView: 4,
-        effect: 'coverflow',
+        slidesPerView: 6,
+        height: 200,
         centeredSlides: true,
-        initialSlide: 2
+        initialSlide: 3,
+        onSlideChangeStart: function(reasonSwiper) {
+            var activeIndex = reasonSwiper.activeIndex,
+                slides = reasonSwiper.slides,
+                i = 0;
+
+            if (slides.length !== 1) {
+                if (activeIndex === 0) {
+                    for (i = 1; i < slides.length; i++) {
+                        $(slides[i]).css('transform', '');
+                    }
+                } else if (activeIndex === slides.length - 1) {
+                    for (i = 0; i < activeIndex; i++) {
+                        $(slides[i]).css('transform', 'rotateX(' + (30 + (activeIndex - i) * 12) + 'deg)');
+                    }
+                } else {
+                    for (i = 0; i < activeIndex; i++) {
+                        $(slides[i]).css('transform', 'rotateX(' + (30 + (activeIndex - i) * 12) + 'deg)');
+                    }
+                    for (i = activeIndex + 1; i < slides.length; i++) {
+                        $(slides[i]).css('transform', '');
+                    }
+                }
+            }
+            $(slides[activeIndex]).css('transform', '');
+        }
     });
 });
 

@@ -249,10 +249,35 @@ $(function() {
     reasonSwiper = new Swiper('.box-main', {
         paginationClickable: true,
         direction: 'vertical',
-        slidesPerView: 4,
-        effect: 'coverflow',
+        slidesPerView: 6,
+        height: 200,
         centeredSlides: true,
-        initialSlide: 2
+        initialSlide: 3,
+        onSlideChangeStart: function(reasonSwiper) {
+            var activeIndex = reasonSwiper.activeIndex,
+                slides = reasonSwiper.slides,
+                i = 0;
+
+            if (slides.length !== 1) {
+                if (activeIndex === 0) {
+                    for (i = 1; i < slides.length; i++) {
+                        $(slides[i]).css('transform', '');
+                    }
+                } else if (activeIndex === slides.length - 1) {
+                    for (i = 0; i < activeIndex; i++) {
+                        $(slides[i]).css('transform', 'rotateX(' + (30 + (activeIndex - i) * 12) + 'deg)');
+                    }
+                } else {
+                    for (i = 0; i < activeIndex; i++) {
+                        $(slides[i]).css('transform', 'rotateX(' + (30 + (activeIndex - i) * 12) + 'deg)');
+                    }
+                    for (i = activeIndex + 1; i < slides.length; i++) {
+                        $(slides[i]).css('transform', '');
+                    }
+                }
+            }
+            $(slides[activeIndex]).css('transform', '');
+        }
     });
 });
 

@@ -218,6 +218,7 @@
             color: #444;
             background: #fff;
             border-radius: 10px;
+            padding-bottom: 20px;
 
             .box-head {
                 height: 60px;
@@ -232,23 +233,28 @@
                 background: #FFFFFF;
                 padding: 20px;
                 height:480px;
-                margin-top: 40px;
             }
 
             li {
                 text-align: center;
-                height: 36px;
-                font-size: 24px;
-                line-height: 36px;
                 background: #FFF;
                 color: rgba(0, 0, 0, .5);
+                font-size: 38px;
             }
 
             .swiper-slide-active {
-                font-size: 36px;
+                padding-top: 0;
+                font-style: normal;
+                border-top: 1px solid rgb(223,224,224);
+                border-bottom: 1px solid rgb(223,224,224);
+                font-size: 38px;
                 color: rgb(0,0,0);
-                height: 48px;
-                line-height: 96px;
+                height: 78px !important;
+                line-height: 78px;
+            }
+
+            .swiper-slide {
+                line-height: 70px;
             }
         }
     }

@@ -25,6 +25,7 @@
             color: #444;
             background: #fff;
             border-radius: 10px;
+            padding-bottom: 20px;
 
             .box-head {
                 height: 60px;
@@ -39,23 +40,28 @@
                 background: #FFFFFF;
                 padding: 20px;
                 height:480px;
-                margin-top: 40px;
             }
 
             li {
                 text-align: center;
-                height: 36px;
-                font-size: 24px;
-                line-height: 36px;
                 background: #FFF;
                 color: rgba(0, 0, 0, .5);
+                font-size: 38px;
             }
 
             .swiper-slide-active {
-                font-size: 36px;
+                padding-top: 0;
+                font-style: normal;
+                border-top: 1px solid rgb(223,224,224);
+                border-bottom: 1px solid rgb(223,224,224);
+                font-size: 38px;
                 color: rgb(0,0,0);
-                height: 48px;
-                line-height: 96px;
+                height: 78px !important;
+                line-height: 78px;
+            }
+
+            .swiper-slide {
+                line-height: 70px;
             }
         }
     }