Showing
6 changed files
with
33 additions
and
24 deletions
| @@ -121,12 +121,10 @@ if ($ownerInfo.data('changeable') === true) { | @@ -121,12 +121,10 @@ if ($ownerInfo.data('changeable') === true) { | ||
| 121 | 121 | ||
| 122 | $(function() { | 122 | $(function() { |
| 123 | reasonSwiper = new Swiper('.box-main', { | 123 | reasonSwiper = new Swiper('.box-main', { |
| 124 | - paginationClickable: true, | ||
| 125 | - direction: 'vertical', | ||
| 126 | - slidesPerView: 6, | ||
| 127 | - height: 200, | 124 | + initialSlide: 0, |
| 128 | centeredSlides: true, | 125 | centeredSlides: true, |
| 129 | - initialSlide: 3, | 126 | + slidesPerView: 5, |
| 127 | + direction: 'vertical', | ||
| 130 | onSlideChangeStart: function(reasonSwiper) { | 128 | onSlideChangeStart: function(reasonSwiper) { |
| 131 | var activeIndex = reasonSwiper.activeIndex, | 129 | var activeIndex = reasonSwiper.activeIndex, |
| 132 | slides = reasonSwiper.slides, | 130 | slides = reasonSwiper.slides, |
| @@ -247,12 +247,10 @@ getOrders(); | @@ -247,12 +247,10 @@ getOrders(); | ||
| 247 | 247 | ||
| 248 | $(function() { | 248 | $(function() { |
| 249 | reasonSwiper = new Swiper('.box-main', { | 249 | reasonSwiper = new Swiper('.box-main', { |
| 250 | - paginationClickable: true, | ||
| 251 | direction: 'vertical', | 250 | direction: 'vertical', |
| 252 | - slidesPerView: 6, | ||
| 253 | - height: 200, | 251 | + slidesPerView: 5, |
| 254 | centeredSlides: true, | 252 | centeredSlides: true, |
| 255 | - initialSlide: 3, | 253 | + initialSlide: 0, |
| 256 | onSlideChangeStart: function(reasonSwiper) { | 254 | onSlideChangeStart: function(reasonSwiper) { |
| 257 | var activeIndex = reasonSwiper.activeIndex, | 255 | var activeIndex = reasonSwiper.activeIndex, |
| 258 | slides = reasonSwiper.slides, | 256 | slides = reasonSwiper.slides, |
| @@ -203,7 +203,7 @@ | @@ -203,7 +203,7 @@ | ||
| 203 | left: 0; | 203 | left: 0; |
| 204 | top: 0; | 204 | top: 0; |
| 205 | background: rgba(0, 0, 0, .5); | 205 | background: rgba(0, 0, 0, .5); |
| 206 | - z-index: 5; | 206 | + z-index: 1; |
| 207 | visibility: hidden; | 207 | visibility: hidden; |
| 208 | 208 | ||
| 209 | .reason-box { | 209 | .reason-box { |
| @@ -235,6 +235,18 @@ | @@ -235,6 +235,18 @@ | ||
| 235 | background: #FFFFFF; | 235 | background: #FFFFFF; |
| 236 | padding: 20px; | 236 | padding: 20px; |
| 237 | height:480px; | 237 | height:480px; |
| 238 | + | ||
| 239 | + .active-mask { | ||
| 240 | + position: absolute; | ||
| 241 | + top: 50%; | ||
| 242 | + margin-top: -44px; | ||
| 243 | + height: 88px; | ||
| 244 | + z-index: 8; | ||
| 245 | + width: 500px; | ||
| 246 | + background: rgba(255, 255, 255, 0.1); | ||
| 247 | + border-bottom: 1px solid rgb(223,224,224); | ||
| 248 | + border-top: 1px solid rgb(223,224,224); | ||
| 249 | + } | ||
| 238 | } | 250 | } |
| 239 | 251 | ||
| 240 | li { | 252 | li { |
| @@ -247,17 +259,12 @@ | @@ -247,17 +259,12 @@ | ||
| 247 | .swiper-slide-active { | 259 | .swiper-slide-active { |
| 248 | padding-top: 0; | 260 | padding-top: 0; |
| 249 | font-style: normal; | 261 | font-style: normal; |
| 250 | - border-top: 1px solid rgb(223,224,224); | ||
| 251 | - border-bottom: 1px solid rgb(223,224,224); | ||
| 252 | font-size: 38px; | 262 | font-size: 38px; |
| 253 | color: rgb(0,0,0); | 263 | color: rgb(0,0,0); |
| 254 | - height: 78px !important; | ||
| 255 | line-height: 78px; | 264 | line-height: 78px; |
| 256 | } | 265 | } |
| 257 | 266 | ||
| 258 | - .swiper-slide { | ||
| 259 | - line-height: 70px; | ||
| 260 | - } | 267 | + |
| 261 | } | 268 | } |
| 262 | } | 269 | } |
| 263 | } | 270 | } |
| @@ -40,6 +40,18 @@ | @@ -40,6 +40,18 @@ | ||
| 40 | background: #FFFFFF; | 40 | background: #FFFFFF; |
| 41 | padding: 20px; | 41 | padding: 20px; |
| 42 | height:480px; | 42 | height:480px; |
| 43 | + | ||
| 44 | + .active-mask { | ||
| 45 | + position: absolute; | ||
| 46 | + top: 50%; | ||
| 47 | + margin-top: -44px; | ||
| 48 | + height: 88px; | ||
| 49 | + z-index: 8; | ||
| 50 | + width: 500px; | ||
| 51 | + background: rgba(255, 255, 255, 0.1); | ||
| 52 | + border-bottom: 1px solid rgb(223,224,224); | ||
| 53 | + border-top: 1px solid rgb(223,224,224); | ||
| 54 | + } | ||
| 43 | } | 55 | } |
| 44 | 56 | ||
| 45 | li { | 57 | li { |
| @@ -52,17 +64,10 @@ | @@ -52,17 +64,10 @@ | ||
| 52 | .swiper-slide-active { | 64 | .swiper-slide-active { |
| 53 | padding-top: 0; | 65 | padding-top: 0; |
| 54 | font-style: normal; | 66 | font-style: normal; |
| 55 | - border-top: 1px solid rgb(223,224,224); | ||
| 56 | - border-bottom: 1px solid rgb(223,224,224); | ||
| 57 | font-size: 38px; | 67 | font-size: 38px; |
| 58 | color: rgb(0,0,0); | 68 | color: rgb(0,0,0); |
| 59 | - height: 78px !important; | ||
| 60 | line-height: 78px; | 69 | line-height: 78px; |
| 61 | } | 70 | } |
| 62 | - | ||
| 63 | - .swiper-slide { | ||
| 64 | - line-height: 70px; | ||
| 65 | - } | ||
| 66 | } | 71 | } |
| 67 | } | 72 | } |
| 68 | 73 |
| @@ -128,12 +128,12 @@ | @@ -128,12 +128,12 @@ | ||
| 128 | <div class="reason-box" > | 128 | <div class="reason-box" > |
| 129 | <div class="box-head"><span class="box-cmp">完成</span></div> | 129 | <div class="box-head"><span class="box-cmp">完成</span></div> |
| 130 | <div class="swiper-container box-main"> | 130 | <div class="swiper-container box-main"> |
| 131 | - | ||
| 132 | <ul class="swiper-wrapper"> | 131 | <ul class="swiper-wrapper"> |
| 133 | {{#cancelReason}} | 132 | {{#cancelReason}} |
| 134 | <li class="swiper-slide" data-reason-id="{{id}}"><span >{{reason}}</span></li> | 133 | <li class="swiper-slide" data-reason-id="{{id}}"><span >{{reason}}</span></li> |
| 135 | {{/cancelReason}} | 134 | {{/cancelReason}} |
| 136 | </ul> | 135 | </ul> |
| 136 | + <div class="active-mask"></div> | ||
| 137 | </div> | 137 | </div> |
| 138 | </div> | 138 | </div> |
| 139 | </div> | 139 | </div> |
| @@ -25,6 +25,7 @@ | @@ -25,6 +25,7 @@ | ||
| 25 | <li class="swiper-slide" data-reason-id="{{id}}"><span >{{reason}}</span></li> | 25 | <li class="swiper-slide" data-reason-id="{{id}}"><span >{{reason}}</span></li> |
| 26 | {{/cancelReason}} | 26 | {{/cancelReason}} |
| 27 | </ul> | 27 | </ul> |
| 28 | + <div class="active-mask"></div> | ||
| 28 | </div> | 29 | </div> |
| 29 | </div> | 30 | </div> |
| 30 | </div> | 31 | </div> |
-
Please register or login to post a comment