Merge branch 'develop' of http://git.dev.yoho.cn/web/yohobuy into develop
Showing
17 changed files
with
105 additions
and
39 deletions
| @@ -31,7 +31,7 @@ lazyLoad($('img.lazy')); | @@ -31,7 +31,7 @@ lazyLoad($('img.lazy')); | ||
| 31 | $('.nav-btn').on('tap', function (event) { | 31 | $('.nav-btn').on('tap', function (event) { |
| 32 | if (!$(this).hasClass('menu-open')) { | 32 | if (!$(this).hasClass('menu-open')) { |
| 33 | $('.mobile-wrap').addClass('menu-open'); | 33 | $('.mobile-wrap').addClass('menu-open'); |
| 34 | - $('.overlay').addClass('show'); | 34 | + $('.overlay').show().css('opacity', 0.3); |
| 35 | $('.side-nav').addClass('on'); | 35 | $('.side-nav').addClass('on'); |
| 36 | 36 | ||
| 37 | //设置boy高宽，页面不能上下滑动 | 37 | //设置boy高宽，页面不能上下滑动 |
| @@ -48,13 +48,16 @@ $('.nav-btn').on('tap', function (event) { | @@ -48,13 +48,16 @@ $('.nav-btn').on('tap', function (event) { | ||
| 48 | $('.mobile-wrap').on('tap', function () { | 48 | $('.mobile-wrap').on('tap', function () { |
| 49 | if ($(this).hasClass('menu-open')) { | 49 | if ($(this).hasClass('menu-open')) { |
| 50 | $('.mobile-wrap').removeClass('menu-open'); | 50 | $('.mobile-wrap').removeClass('menu-open'); |
| 51 | - $('.overlay').removeClass('show'); | 51 | + $('.overlay').css('opacity', 0); |
| 52 | $('.sub-nav').removeClass('show'); | 52 | $('.sub-nav').removeClass('show'); |
| 53 | $('.side-nav').removeClass('on'); | 53 | $('.side-nav').removeClass('on'); |
| 54 | $('body').css({ | 54 | $('body').css({ |
| 55 | height: 'auto', | 55 | height: 'auto', |
| 56 | overflow: 'auto' | 56 | overflow: 'auto' |
| 57 | }); | 57 | }); |
| 58 | + setTimeout(function() { | ||
| 59 | + $('.overlay').hide(); | ||
| 60 | + }, 300); | ||
| 58 | } | 61 | } |
| 59 | }); | 62 | }); |
| 60 | 63 | ||
| @@ -139,12 +142,6 @@ $('.category-swiper').each(function (i, index) { | @@ -139,12 +142,6 @@ $('.category-swiper').each(function (i, index) { | ||
| 139 | } | 142 | } |
| 140 | }); | 143 | }); |
| 141 | 144 | ||
| 142 | -//关闭头部下载浮层 | ||
| 143 | -$('.header-download').on('tap', '.close-btn', function () { | ||
| 144 | - $(this).parent().remove(); | ||
| 145 | -}); | ||
| 146 | - | ||
| 147 | - | ||
| 148 | //logo动画 | 145 | //logo动画 |
| 149 | requestFrame = (function () { | 146 | requestFrame = (function () { |
| 150 | var tempFunc = null, | 147 | var tempFunc = null, |
| @@ -13,7 +13,7 @@ var winH = $(window).height(), | @@ -13,7 +13,7 @@ var winH = $(window).height(), | ||
| 13 | $goodList = $('#goods-list'), | 13 | $goodList = $('#goods-list'), |
| 14 | loading = false, | 14 | loading = false, |
| 15 | page = 0, | 15 | page = 0, |
| 16 | - gender = $('.mobile-wrap').hasClass('boys-wrap') ? '1,3' : '2,3', | 16 | + gender = null, |
| 17 | kidsType = $('.mobile-wrap').hasClass('kids-wrap') ? true : false, | 17 | kidsType = $('.mobile-wrap').hasClass('kids-wrap') ? true : false, |
| 18 | lifestyleType = $('.mobile-wrap').hasClass('lifestyle-wrap') ? true : false, | 18 | lifestyleType = $('.mobile-wrap').hasClass('lifestyle-wrap') ? true : false, |
| 19 | num, | 19 | num, |
| @@ -29,6 +29,7 @@ if (kidsType) { | @@ -29,6 +29,7 @@ if (kidsType) { | ||
| 29 | } else if (lifestyleType) { | 29 | } else if (lifestyleType) { |
| 30 | url = '/product/recom/maylikelife'; | 30 | url = '/product/recom/maylikelife'; |
| 31 | } else { | 31 | } else { |
| 32 | + gender = $('.mobile-wrap').hasClass('boys-wrap') ? '1,3' : '2,3', | ||
| 32 | url = '/product/recom/maylike?gender=' + gender; | 33 | url = '/product/recom/maylike?gender=' + gender; |
| 33 | } | 34 | } |
| 34 | 35 | ||
| @@ -75,6 +76,25 @@ $(window).scroll(function () { | @@ -75,6 +76,25 @@ $(window).scroll(function () { | ||
| 75 | success: function(data) { | 76 | success: function(data) { |
| 76 | if (data === ' ') { | 77 | if (data === ' ') { |
| 77 | loading = true; | 78 | loading = true; |
| 79 | + if (gender) { | ||
| 80 | + if (gender === '1,3') { | ||
| 81 | + url = '/boys/bottomBanner'; | ||
| 82 | + } else { | ||
| 83 | + url = '/girls/bottomBanner'; | ||
| 84 | + } | ||
| 85 | + $.ajax({ | ||
| 86 | + type: 'GET', | ||
| 87 | + url: url, | ||
| 88 | + success: function(data) { | ||
| 89 | + $('#load-more-img').show(); | ||
| 90 | + $('#load-more-img a').attr('url', data[0].banner[0].url); | ||
| 91 | + $('#load-more-img a > img').attr('src', data[0].banner[0].img); | ||
| 92 | + }, | ||
| 93 | + error: function() { | ||
| 94 | + } | ||
| 95 | + }); | ||
| 96 | + | ||
| 97 | + } | ||
| 78 | return; | 98 | return; |
| 79 | } | 99 | } |
| 80 | $goodList.append(data); | 100 | $goodList.append(data); |
| @@ -18,7 +18,8 @@ var $goodsContainer = $('#goods-container'), | @@ -18,7 +18,8 @@ var $goodsContainer = $('#goods-container'), | ||
| 18 | $pgc = $($goodsContainer.children().get(1)), | 18 | $pgc = $($goodsContainer.children().get(1)), |
| 19 | $dgc = $($goodsContainer.children().get(2)); | 19 | $dgc = $($goodsContainer.children().get(2)); |
| 20 | 20 | ||
| 21 | -var winH = $(window).height(); | 21 | +var winH = $(window).height(), |
| 22 | + noResult = '<p class="no-result">未找到相关搜索结果</p>'; | ||
| 22 | 23 | ||
| 23 | //默认筛选条件 | 24 | //默认筛选条件 |
| 24 | var defaultOpt = { | 25 | var defaultOpt = { |
| @@ -173,8 +174,7 @@ function search(opt) { | @@ -173,8 +174,7 @@ function search(opt) { | ||
| 173 | url: '/product/newsale/selectNewSale', | 174 | url: '/product/newsale/selectNewSale', |
| 174 | data: setting, | 175 | data: setting, |
| 175 | success: function(data) { | 176 | success: function(data) { |
| 176 | - var noResult = '<p class="no-result">未找到相关搜索结果</p>', | ||
| 177 | - $container; | 177 | + var $container; |
| 178 | 178 | ||
| 179 | switch (navType) { | 179 | switch (navType) { |
| 180 | case 'newest': | 180 | case 'newest': |
| @@ -218,6 +218,7 @@ lazyLoad($('.lazy')); | @@ -218,6 +218,7 @@ lazyLoad($('.lazy')); | ||
| 218 | 218 | ||
| 219 | filter.registerCbFn(search); | 219 | filter.registerCbFn(search); |
| 220 | 220 | ||
| 221 | +// loading.initLoadingMask(); | ||
| 221 | //导航栏点击逻辑说明： | 222 | //导航栏点击逻辑说明： |
| 222 | //1.点击非active项时切换active状态 | 223 | //1.点击非active项时切换active状态 |
| 223 | //2.价格和折扣active状态时继续点击切换排序 | 224 | //2.价格和折扣active状态时继续点击切换排序 |
| @@ -18,7 +18,8 @@ var $goodsContainer = $('#goods-container'), | @@ -18,7 +18,8 @@ var $goodsContainer = $('#goods-container'), | ||
| 18 | $pgc = $($goodsContainer.children().get(1)), | 18 | $pgc = $($goodsContainer.children().get(1)), |
| 19 | $dgc = $($goodsContainer.children().get(2)); | 19 | $dgc = $($goodsContainer.children().get(2)); |
| 20 | 20 | ||
| 21 | -var winH = $(window).height(); | 21 | +var winH = $(window).height(), |
| 22 | + noResult = '<p class="no-result">未找到相关搜索结果</p>'; | ||
| 22 | 23 | ||
| 23 | //默认筛选条件 | 24 | //默认筛选条件 |
| 24 | var defaultOpt = { | 25 | var defaultOpt = { |
| @@ -200,8 +201,7 @@ function search(opt) { | @@ -200,8 +201,7 @@ function search(opt) { | ||
| 200 | url: '/product/newsale/selectNewSale', | 201 | url: '/product/newsale/selectNewSale', |
| 201 | data: setting, | 202 | data: setting, |
| 202 | success: function(data) { | 203 | success: function(data) { |
| 203 | - var noResult = '<p class="no-result">未找到相关搜索结果</p>', | ||
| 204 | - $container; | 204 | + var $container; |
| 205 | 205 | ||
| 206 | switch (navType) { | 206 | switch (navType) { |
| 207 | case 'today': | 207 | case 'today': |
| @@ -17,6 +17,7 @@ | @@ -17,6 +17,7 @@ | ||
| 17 | height: 192rem / $pxConvertRem; | 17 | height: 192rem / $pxConvertRem; |
| 18 | border-bottom: 1px solid #e0e0e0; | 18 | border-bottom: 1px solid #e0e0e0; |
| 19 | border-right: 1px solid #e0e0e0; | 19 | border-right: 1px solid #e0e0e0; |
| 20 | + border-top: 1px solid #e0e0e0; | ||
| 20 | } | 21 | } |
| 21 | 22 | ||
| 22 | .classify-logo { | 23 | .classify-logo { |
| @@ -10,12 +10,11 @@ | @@ -10,12 +10,11 @@ | ||
| 10 | position: relative; | 10 | position: relative; |
| 11 | z-index: 2; | 11 | z-index: 2; |
| 12 | background: #f0f0f0; | 12 | background: #f0f0f0; |
| 13 | - @include transition(transform .3s); | 13 | + @include transition(transform .3s ease-out); |
| 14 | } | 14 | } |
| 15 | 15 | ||
| 16 | .mobile-wrap.menu-open { | 16 | .mobile-wrap.menu-open { |
| 17 | @include transform(translateX(540rem / $pxConvertRem)); | 17 | @include transform(translateX(540rem / $pxConvertRem)); |
| 18 | - @include transition(transform .3s); | ||
| 19 | } | 18 | } |
| 20 | 19 | ||
| 21 | 20 | ||
| @@ -27,10 +26,12 @@ | @@ -27,10 +26,12 @@ | ||
| 27 | right: 0; | 26 | right: 0; |
| 28 | bottom: 0; | 27 | bottom: 0; |
| 29 | background: #000; | 28 | background: #000; |
| 30 | - opacity: 0.3; | 29 | + opacity: 0; |
| 31 | z-index: 99; | 30 | z-index: 99; |
| 31 | + @include transition(opacity 1s); | ||
| 32 | } | 32 | } |
| 33 | 33 | ||
| 34 | .overlay.show { | 34 | .overlay.show { |
| 35 | display: block; | 35 | display: block; |
| 36 | + opacity: 0.3; | ||
| 36 | } | 37 | } |
| 1 | .side-nav { | 1 | .side-nav { |
| 2 | - display: none; | 2 | + // display: none; |
| 3 | background: #fff; | 3 | background: #fff; |
| 4 | position: fixed; | 4 | position: fixed; |
| 5 | top: 0; | 5 | top: 0; |
| @@ -8,6 +8,8 @@ | @@ -8,6 +8,8 @@ | ||
| 8 | left: 0; | 8 | left: 0; |
| 9 | z-index: 1; | 9 | z-index: 1; |
| 10 | overflow: hidden; | 10 | overflow: hidden; |
| 11 | + @include transform(translateX(-540rem / $pxConvertRem)); | ||
| 12 | + @include transition(all .3s ease-out); | ||
| 11 | 13 | ||
| 12 | ul { | 14 | ul { |
| 13 | background: #f0f0f0; | 15 | background: #f0f0f0; |
| @@ -103,20 +105,22 @@ | @@ -103,20 +105,22 @@ | ||
| 103 | } | 105 | } |
| 104 | 106 | ||
| 105 | .side-nav.on { | 107 | .side-nav.on { |
| 106 | - display: block; | 108 | + // display: block; |
| 109 | + @include transform(translateX(0rem / $pxConvertRem)); | ||
| 107 | } | 110 | } |
| 108 | 111 | ||
| 109 | .sub-nav { | 112 | .sub-nav { |
| 113 | + // display: none; | ||
| 110 | position: fixed; | 114 | position: fixed; |
| 111 | top: 0; | 115 | top: 0; |
| 112 | right: 100rem / $pxConvertRem; | 116 | right: 100rem / $pxConvertRem; |
| 113 | left: 0; | 117 | left: 0; |
| 114 | bottom: 0; | 118 | bottom: 0; |
| 119 | + width: 100%; | ||
| 115 | background: #fff !important; | 120 | background: #fff !important; |
| 116 | - z-index: 2; | ||
| 117 | - | ||
| 118 | - @include transform(translateX(100%)); | 121 | + // z-index: 2; |
| 119 | 122 | ||
| 123 | + @include transform(translateX(540rem / $pxConvertRem)); | ||
| 120 | @include transition(transform 0.3s); | 124 | @include transition(transform 0.3s); |
| 121 | 125 | ||
| 122 | li { | 126 | li { |
| @@ -15,7 +15,7 @@ | @@ -15,7 +15,7 @@ | ||
| 15 | text-align: center; | 15 | text-align: center; |
| 16 | color: #b0b0b0; | 16 | color: #b0b0b0; |
| 17 | &.current { | 17 | &.current { |
| 18 | - color: #5e4b3c; | 18 | + color: #414141; |
| 19 | } | 19 | } |
| 20 | } | 20 | } |
| 21 | .tab-icon { | 21 | .tab-icon { |
| @@ -27,4 +27,36 @@ | @@ -27,4 +27,36 @@ | ||
| 27 | font-size: 20rem / $pxConvertRem; | 27 | font-size: 20rem / $pxConvertRem; |
| 28 | line-height: 1; | 28 | line-height: 1; |
| 29 | } | 29 | } |
| 30 | +} | ||
| 31 | + | ||
| 32 | +.boys-wrap { | ||
| 33 | + .footer-tab { | ||
| 34 | + .tab-item.current { | ||
| 35 | + color: #414141; | ||
| 36 | + } | ||
| 37 | + } | ||
| 38 | +} | ||
| 39 | + | ||
| 40 | +.girls-wrap { | ||
| 41 | + .footer-tab { | ||
| 42 | + .tab-item.current { | ||
| 43 | + color: #FF88AE; | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | +} | ||
| 47 | + | ||
| 48 | +.kids-wrap { | ||
| 49 | + .footer-tab { | ||
| 50 | + .tab-item.current { | ||
| 51 | + color: #7ad9f9; | ||
| 52 | + } | ||
| 53 | + } | ||
| 54 | +} | ||
| 55 | + | ||
| 56 | +.lifestyle-wrap { | ||
| 57 | + .footer-tab { | ||
| 58 | + .tab-item.current { | ||
| 59 | + color: #4f4138; | ||
| 60 | + } | ||
| 61 | + } | ||
| 30 | } | 62 | } |
| @@ -13,7 +13,7 @@ | @@ -13,7 +13,7 @@ | ||
| 13 | {{/ twoColumnGoods}} | 13 | {{/ twoColumnGoods}} |
| 14 | 14 | ||
| 15 | <div class="overlay"></div> | 15 | <div class="overlay"></div> |
| 16 | + {{> layout/footer_tab}} | ||
| 16 | </div> | 17 | </div> |
| 17 | {{> home/side_nav}} | 18 | {{> home/side_nav}} |
| 18 | -{{> layout/footer_tab}} | ||
| 19 | {{> layout/footer}} | 19 | {{> layout/footer}} |
| @@ -8,7 +8,7 @@ | @@ -8,7 +8,7 @@ | ||
| 8 | {{> home/content}} | 8 | {{> home/content}} |
| 9 | 9 | ||
| 10 | <div class="overlay"></div> | 10 | <div class="overlay"></div> |
| 11 | + {{> layout/footer_tab}} | ||
| 11 | </div> | 12 | </div> |
| 12 | {{> home/side_nav}} | 13 | {{> home/side_nav}} |
| 13 | -{{> layout/footer_tab}} | ||
| 14 | {{> layout/footer}} | 14 | {{> layout/footer}} |
| @@ -19,7 +19,7 @@ | @@ -19,7 +19,7 @@ | ||
| 19 | {{/ bannerBottom}} | 19 | {{/ bannerBottom}} |
| 20 | 20 | ||
| 21 | <div class="overlay"></div> | 21 | <div class="overlay"></div> |
| 22 | + {{> layout/footer_tab}} | ||
| 22 | </div> | 23 | </div> |
| 23 | {{> home/side_nav}} | 24 | {{> home/side_nav}} |
| 24 | -{{> layout/footer_tab}} | ||
| 25 | {{> layout/footer}} | 25 | {{> layout/footer}} |
| @@ -17,7 +17,7 @@ | @@ -17,7 +17,7 @@ | ||
| 17 | {{> home/banner_bottom}} | 17 | {{> home/banner_bottom}} |
| 18 | {{/ bannerBottom}} | 18 | {{/ bannerBottom}} |
| 19 | <div class="overlay"></div> | 19 | <div class="overlay"></div> |
| 20 | + {{> layout/footer_tab}} | ||
| 20 | </div> | 21 | </div> |
| 21 | {{> home/side_nav}} | 22 | {{> home/side_nav}} |
| 22 | -{{> layout/footer_tab}} | ||
| 23 | {{> layout/footer}} | 23 | {{> layout/footer}} |
| @@ -6,7 +6,7 @@ | @@ -6,7 +6,7 @@ | ||
| 6 | {{# list}} | 6 | {{# list}} |
| 7 | <li class="swiper-slide"> | 7 | <li class="swiper-slide"> |
| 8 | <a href="{{url}}"> | 8 | <a href="{{url}}"> |
| 9 | - <img class="lazy" src="{{img}}" alt="{{title}}"> | 9 | + <img class="lazy" data-original="{{img}}" alt="{{title}}"> |
| 10 | </a> | 10 | </a> |
| 11 | </li> | 11 | </li> |
| 12 | {{/ list}} | 12 | {{/ list}} |
| @@ -5,11 +5,10 @@ | @@ -5,11 +5,10 @@ | ||
| 5 | </p> | 5 | </p> |
| 6 | 6 | ||
| 7 | <div id="goods-list" class="goods-list clearfix"></div> | 7 | <div id="goods-list" class="goods-list clearfix"></div> |
| 8 | - | ||
| 9 | - <div id="load-more-info" class="load-more-info"> | ||
| 10 | - <div class="loading status hide"> | ||
| 11 | - 正在加载... | ||
| 12 | - </div> | ||
| 13 | - <span class="no-more status hide">没有更多啦</span> | ||
| 14 | - </div> | ||
| 15 | -</div> | ||
| 8 | + | ||
| 9 | +</div> | ||
| 10 | +<div class="load-more-img hide" id="load-more-img"> | ||
| 11 | + <a href=""> | ||
| 12 | + <img src=""> | ||
| 13 | + </a> | ||
| 14 | +</div> |
-
Please register or login to post a comment