Merge branch 'develop/wap' of git.dev.yoho.cn:web/yohobuy into develop/wap
Showing
2 changed files
with
41 additions
and
37 deletions
@@ -49,18 +49,13 @@ $('.overlay').on('touchstart', function(e) { | @@ -49,18 +49,13 @@ $('.overlay').on('touchstart', function(e) { | ||
49 | return false; | 49 | return false; |
50 | }); | 50 | }); |
51 | 51 | ||
52 | -//禁止在侧边栏可以上下滚动 | ||
53 | -$('.side-nav').on('touchmove', function() { | ||
54 | - return false; | ||
55 | -}); | ||
56 | - | ||
57 | //点击一级导航,弹出二级导航 | 52 | //点击一级导航,弹出二级导航 |
58 | $sideNav.on('touchstart', 'li', function(e) { | 53 | $sideNav.on('touchstart', 'li', function(e) { |
59 | if ($(this).find('.sub-nav').size() > 0) { | 54 | if ($(this).find('.sub-nav').size() > 0) { |
60 | $('.sub-nav').removeClass('show'); | 55 | $('.sub-nav').removeClass('show'); |
61 | $(this).find('.sub-nav').addClass('show'); | 56 | $(this).find('.sub-nav').addClass('show'); |
62 | } | 57 | } |
63 | - e.stopPropagation(); | 58 | + |
64 | if (e.target.pathname === location.pathname) { | 59 | if (e.target.pathname === location.pathname) { |
65 | hideSideBar(); | 60 | hideSideBar(); |
66 | return false; | 61 | return false; |
@@ -69,9 +64,8 @@ $sideNav.on('touchstart', 'li', function(e) { | @@ -69,9 +64,8 @@ $sideNav.on('touchstart', 'li', function(e) { | ||
69 | 64 | ||
70 | //返回一级导航,收起二级导航 | 65 | //返回一级导航,收起二级导航 |
71 | $subNav.each(function() { | 66 | $subNav.each(function() { |
72 | - $(this).find('li').eq(0).on('touchstart', function(e) { | 67 | + $(this).find('li').eq(0).on('touchstart', function() { |
73 | $('.sub-nav').removeClass('show'); | 68 | $('.sub-nav').removeClass('show'); |
74 | - e.stopPropagation(); | ||
75 | return false; | 69 | return false; |
76 | }); | 70 | }); |
77 | }).on('touchstart', function(e) { | 71 | }).on('touchstart', function(e) { |
@@ -81,12 +75,16 @@ $subNav.each(function() { | @@ -81,12 +75,16 @@ $subNav.each(function() { | ||
81 | }); | 75 | }); |
82 | 76 | ||
83 | // 侧边栏点击背景色变化 | 77 | // 侧边栏点击背景色变化 |
84 | -$sideNav.children('ul').children('li').on('touchstart', function() { | ||
85 | - $sideNav.children('ul').children('li').css('background', '#fff'); | ||
86 | - $(this).css('background', '#eee'); | ||
87 | -}).on('touchend touchcancel', function() { | ||
88 | - $(this).css('background', '#fff'); | ||
89 | -}); | 78 | +function highlight($elem) { |
79 | + $elem.find('li').on('touchstart', function() { | ||
80 | + $(this).addClass('highlight'); | ||
81 | + }).on('touchend touchcancel', function() { | ||
82 | + $(this).removeClass('highlight'); | ||
83 | + }); | ||
84 | +} | ||
85 | +highlight($sideNav); | ||
86 | +highlight($subNav); | ||
87 | + | ||
90 | 88 | ||
91 | //头部banner轮播 | 89 | //头部banner轮播 |
92 | if ($('.banner-swiper').find('li').size() > 1) { | 90 | if ($('.banner-swiper').find('li').size() > 1) { |
@@ -8,6 +8,7 @@ | @@ -8,6 +8,7 @@ | ||
8 | right: 100rem / $pxConvertRem; | 8 | right: 100rem / $pxConvertRem; |
9 | width: 540rem / $pxConvertRem; | 9 | width: 540rem / $pxConvertRem; |
10 | background: #f0f0f0; | 10 | background: #f0f0f0; |
11 | + z-index: 4; | ||
11 | overflow: hidden; | 12 | overflow: hidden; |
12 | overflow-y: auto; | 13 | overflow-y: auto; |
13 | @include transition(all .3s); | 14 | @include transition(all .3s); |
@@ -46,25 +47,28 @@ | @@ -46,25 +47,28 @@ | ||
46 | height: 100%; | 47 | height: 100%; |
47 | padding-left: 110rem / $pxConvertRem; | 48 | padding-left: 110rem / $pxConvertRem; |
48 | color: #444; | 49 | color: #444; |
49 | - font-size: 24rem / $pxConvertRem; | 50 | + } |
51 | + | ||
52 | + em { | ||
53 | + font-weight: bold; | ||
54 | + font-size: 26rem / $pxConvertRem; | ||
50 | } | 55 | } |
51 | 56 | ||
52 | .title { | 57 | .title { |
53 | display: inline-block; | 58 | display: inline-block; |
54 | - padding-left: 10rem / $pxConvertRem; | ||
55 | - font-size: 30rem / $pxConvertRem; | ||
56 | - vertical-align: baseline; | 59 | + font-size: 36rem / $pxConvertRem; |
60 | + vertical-align: bottom; | ||
57 | // 此处字体小于 12px, 先扩大,再scale缩小 | 61 | // 此处字体小于 12px, 先扩大,再scale缩小 |
58 | - @include transform(scale(0.75)); | 62 | + @include transform(scale(0.5)); |
59 | } | 63 | } |
60 | 64 | ||
61 | .nav-icon, .nav-img { | 65 | .nav-icon, .nav-img { |
62 | position: absolute; | 66 | position: absolute; |
63 | - width: 60rem / $pxConvertRem; | ||
64 | - height: 60rem / $pxConvertRem; | 67 | + width: 48rem / $pxConvertRem; |
68 | + height: 48rem / $pxConvertRem; | ||
65 | top: 50%; | 69 | top: 50%; |
66 | - margin-top: -30rem / $pxConvertRem; | ||
67 | - left: 24rem / $pxConvertRem; | 70 | + margin-top: -24rem / $pxConvertRem; |
71 | + left: 30rem / $pxConvertRem; | ||
68 | background: no-repeat left center; | 72 | background: no-repeat left center; |
69 | background-size: 100% 100%; | 73 | background-size: 100% 100%; |
70 | } | 74 | } |
@@ -79,10 +83,10 @@ | @@ -79,10 +83,10 @@ | ||
79 | font-weight: lighter; | 83 | font-weight: lighter; |
80 | } | 84 | } |
81 | 85 | ||
82 | - em { | ||
83 | - font-weight: bold; | ||
84 | - font-size: 30rem / $pxConvertRem; | 86 | + &.highlight { |
87 | + background: #eee; | ||
85 | } | 88 | } |
89 | + | ||
86 | } | 90 | } |
87 | 91 | ||
88 | .first { | 92 | .first { |
@@ -100,17 +104,15 @@ | @@ -100,17 +104,15 @@ | ||
100 | content: none; | 104 | content: none; |
101 | } | 105 | } |
102 | 106 | ||
103 | - a { | ||
104 | - font-size: 40rem / $pxConvertRem; | ||
105 | - } | ||
106 | - | ||
107 | em { | 107 | em { |
108 | - font-size: 40rem / $pxConvertRem; | 108 | + font-size: 36rem / $pxConvertRem; |
109 | } | 109 | } |
110 | 110 | ||
111 | - .title { | ||
112 | - font-size: 24rem / $pxConvertRem; | ||
113 | - @include transform(scale(1)); | 111 | + } |
112 | + | ||
113 | + .sub-nav { | ||
114 | + li { | ||
115 | + border-bottom: 1px solid #e0e0e0; | ||
114 | } | 116 | } |
115 | } | 117 | } |
116 | } | 118 | } |
@@ -181,8 +183,8 @@ | @@ -181,8 +183,8 @@ | ||
181 | @include transition(transform 0.3s); | 183 | @include transition(transform 0.3s); |
182 | 184 | ||
183 | li { | 185 | li { |
184 | - height: 80rem / $pxConvertRem; | ||
185 | - line-height: 80rem / $pxConvertRem; | 186 | + height: 80rem / $pxConvertRem !important; |
187 | + line-height: 80rem / $pxConvertRem !important; | ||
186 | border: none; | 188 | border: none; |
187 | border-bottom: 1px solid #e0e0e0; | 189 | border-bottom: 1px solid #e0e0e0; |
188 | 190 | ||
@@ -215,9 +217,13 @@ | @@ -215,9 +217,13 @@ | ||
215 | color: #f0f0f0; | 217 | color: #f0f0f0; |
216 | } | 218 | } |
217 | 219 | ||
220 | + &.highlight { | ||
221 | + background: #eee; | ||
222 | + } | ||
223 | + | ||
218 | em { | 224 | em { |
219 | font-weight: normal; | 225 | font-weight: normal; |
220 | - font-size: 30rem / $pxConvertRem; | 226 | + font-size: 30rem / $pxConvertRem !important; |
221 | } | 227 | } |
222 | } | 228 | } |
223 | 229 |
-
Please register or login to post a comment