fe / YOHOBUYPC · Commits

Go to a project

Authored by hf
Commit 9395da213d4fb6e1e20e63dda082c481fe1b16fb 2 parents 7db38644 7572db77

Merge branch 'develop'

Inline Side-by-side
Showing 8 changed files with 33 additions and 116 deletions
@@ -11,8 +11,6 @@ var $ = require('jquery'), @@ -11,8 +11,6 @@ var $ = require('jquery'),
11 11
12 var swiper, 12 var swiper,
13 $fixTitleBar, 13 $fixTitleBar,
14 - $brandText,  
15 - $brandHref,  
16 $brandList = $('.brand-list'); 14 $brandList = $('.brand-list');
17 var $icon = $('.search-icon'); 15 var $icon = $('.search-icon');
18 16
@@ -21,10 +19,6 @@ var searchH = $('.newbrand-search').outerHeight(), @@ -21,10 +19,6 @@ var searchH = $('.newbrand-search').outerHeight(),
21 brandSwipe = parseInt(searchH) + parseInt(headerH) - 1, 19 brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
22 minBrandListTop, 20 minBrandListTop,
23 searchArray = [], 21 searchArray = [],
24 - clearTextHammer,  
25 - removeHistory,  
26 - searchList,  
27 - yohoHistory,  
28 minBrandListTop; 22 minBrandListTop;
29 23
30 var brandsData, 24 var brandsData,
@@ -118,21 +112,6 @@ function searchResult() { @@ -118,21 +112,6 @@ function searchResult() {
118 112
119 // 插入 dom，绑定事件 113 // 插入 dom，绑定事件
120 $('.search-result').html(html); 114 $('.search-result').html(html);
121 - $('.search-result .brand-list p').each(function (index) {  
122 - searchList = new Hammer($('.search-result .brand-list p').eq(index)[0]);  
123 - searchList.on('tap', function() {  
124 - $brandText = $('.search-result .brand-list p').eq(index).find('a').html();  
125 - $brandHref = $('.search-result .brand-list p').eq(index).find('a').attr('href');  
126 - if (localStorage.getItem('yohoHistory')) {  
127 - yohoHistory = localStorage.getItem('yohoHistory');  
128 - searchArray.push(yohoHistory);  
129 - }  
130 - if (searchArray.toString().split($brandText).length < 2) {  
131 - searchArray.push('{"searchName":"' + $brandText + '","searchHref":"' + $brandText + '"}');  
132 - }  
133 - localStorage.setItem('yohoHistory', searchArray);  
134 - });  
135 - });  
136 } 115 }
137 116
138 if ($('.brand-search-page').length) { 117 if ($('.brand-search-page').length) {
@@ -156,7 +135,6 @@ if ($('.brand-search-page').length) { @@ -156,7 +135,6 @@ if ($('.brand-search-page').length) {
156 clearTextHammer = new Hammer($('.clear-text')[0]); 135 clearTextHammer = new Hammer($('.clear-text')[0]);
157 clearTextHammer.on('tap', function(e) { 136 clearTextHammer.on('tap', function(e) {
158 e.preventDefault(); 137 e.preventDefault();
159 - $('.search-result').html('');  
160 $('#keyword').val('').trigger('input'); 138 $('#keyword').val('').trigger('input');
161 e.srcEvent.stopPropagation(); 139 e.srcEvent.stopPropagation();
162 }); 140 });
@@ -164,20 +142,4 @@ if ($('.brand-search-page').length) { @@ -164,20 +142,4 @@ if ($('.brand-search-page').length) {
164 $('form.search-box').on('submit', function() { 142 $('form.search-box').on('submit', function() {
165 return false; 143 return false;
166 }); 144 });
167 - if (localStorage && localStorage.getItem('yohoHistory')) {  
168 - yohoHistory = $.parseJSON('[' + localStorage.getItem('yohoHistory') + ']');  
169 - if (yohoHistory) {  
170 - $.each(yohoHistory, function(index, content) {  
171 - $('<a href="' + content.searchHref + '">' + content.searchName + '</a>').appendTo('.historyList');  
172 - });  
173 - }  
174 - } else {  
175 - $('.history').css('display', 'none');  
176 - }  
177 -  
178 - removeHistory = new Hammer($('.removeHistory')[0]);  
179 - removeHistory.on('tap', function(e) {  
180 - $('.historyList').html(' ');  
181 - localStorage.clear();  
182 - });  
183 } 145 }
@@ -6,17 +6,18 @@ @@ -6,17 +6,18 @@
6 var $ = require('jquery'); 6 var $ = require('jquery');
7 7
8 var $searchBox = $('.search-box'), 8 var $searchBox = $('.search-box'),
  9 + $box = $('.box'),
9 $indexSearch = $('.index-search'), 10 $indexSearch = $('.index-search'),
10 $indexLogo = $('.index-logo'); 11 $indexLogo = $('.index-logo');
11 12
12 var $search = $searchBox.children('input[type="text"]'), 13 var $search = $searchBox.children('input[type="text"]'),
13 - $cancelSearch = $indexSearch.children('.no-search'), 14 + $cancelSearch = $box.children('.no-search'),
14 $searchIcon = $searchBox.children('.search-icon'); 15 $searchIcon = $searchBox.children('.search-icon');
15 16
16 require('../common'); 17 require('../common');
17 18
18 $search.on('focus', function() { 19 $search.on('focus', function() {
19 - $indexSearch.addClass('action'); 20 + $box.addClass('action');
20 $indexLogo.addClass('action'); 21 $indexLogo.addClass('action');
21 }).on('input', function() { 22 }).on('input', function() {
22 if ($search.val() === '') { 23 if ($search.val() === '') {
@@ -27,7 +28,7 @@ $search.on('focus', function() { @@ -27,7 +28,7 @@ $search.on('focus', function() {
27 }); 28 });
28 29
29 $cancelSearch.on('touchstart', function() { 30 $cancelSearch.on('touchstart', function() {
30 - $indexSearch.removeClass('action'); 31 + $box.removeClass('action');
31 $indexLogo.removeClass('action'); 32 $indexLogo.removeClass('action');
32 33
33 $search.blur(); 34 $search.blur();
@@ -196,50 +196,4 @@ @@ -196,50 +196,4 @@
196 .search-result { 196 .search-result {
197 padding-top: 176rem / $pxConvertRem; 197 padding-top: 176rem / $pxConvertRem;
198 } 198 }
199 - .history{  
200 - width: 100%;  
201 - height: auto;  
202 - overflow: hidden;  
203 - position: absolute;  
204 - left: 0;  
205 - top: 176rem / $pxConvertRem;  
206 - > h6{  
207 - width: 100%;  
208 - height: 88rem / $pxConvertRem;  
209 - line-height: 88rem / $pxConvertRem;  
210 - color: #999;  
211 - text-indent: .6rem;  
212 - font-size: 36em / $pxConvertRem;  
213 - }  
214 - .historyList{  
215 - width: 100%;  
216 - height: auto;  
217 - overflow: hidden;  
218 - display: block;  
219 - > a{  
220 - width: auto;  
221 - height: 58rem / $pxConvertRem;  
222 - overflow: hidden;  
223 - line-height: 58rem / $pxConvertRem;  
224 - margin: 0 0 20rem / $pxConvertRem .6rem;  
225 - padding: 0 20rem / $pxConvertRem;  
226 - float: left;  
227 - background-color:#f8f8f8;  
228 - color: #444;  
229 - }  
230 - }  
231 - > span{  
232 - width: auto;  
233 - height: 68rem / $pxConvertRem;  
234 - overflow: hidden;  
235 - display: inline-block;  
236 - line-height: 68rem / $pxConvertRem;  
237 - border:1px solid #e6e6e6;  
238 - padding: 0 28rem / $pxConvertRem;  
239 - font-size: 48em / $pxConvertRem;  
240 - margin-left: .6rem;  
241 - color: #000;  
242 - }  
243 - }  
244 -  
245 } 199 }
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 overflow: hidden; 3 overflow: hidden;
4 margin: 0 auto; 4 margin: 0 auto;
5 .index-header { 5 .index-header {
  6 + box-sizing: border-box;
6 padding: 0 20rem / $pxConvertRem; 7 padding: 0 20rem / $pxConvertRem;
7 width: 100%; 8 width: 100%;
8 height: 96rem / $pxConvertRem; 9 height: 96rem / $pxConvertRem;
@@ -22,40 +23,39 @@ @@ -22,40 +23,39 @@
22 } 23 }
23 } 24 }
24 25
25 - .index-search {  
26 - position: absolute;  
27 - top: 0;  
28 - right: 0;  
29 - width: 384rem / $pxConvertRem;  
30 - height: 96rem / $pxConvertRem;  
31 - background: #fff; 26 + .box {
  27 + position: relative;
32 overflow: hidden; 28 overflow: hidden;
33 - z-index: 3;  
34 - @include transition(width .4s); 29 + z-index: 1;
35 30
36 &.action { 31 &.action {
37 - width: 620rem / $pxConvertRem;  
38 .no-search, .clear-text { 32 .no-search, .clear-text {
39 display: block; 33 display: block;
40 } 34 }
41 35
42 .search-box { 36 .search-box {
43 - width: 512rem / $pxConvertRem; 37 + margin-left: 80rem / $pxConvertRem;
44 } 38 }
45 } 39 }
  40 + }
  41 +
  42 + .index-search {
  43 + height: 96rem / $pxConvertRem;
  44 + background: #fff;
  45 + overflow: hidden;
  46 + @include transition(width .4s);
46 47
47 .search-box { 48 .search-box {
48 - float: left;  
49 position: relative; 49 position: relative;
50 top: 20rem / $pxConvertRem; 50 top: 20rem / $pxConvertRem;
51 - width: 352rem / $pxConvertRem;  
52 height: 56rem / $pxConvertRem; 51 height: 56rem / $pxConvertRem;
53 padding-right: 80rem / $pxConvertRem; 52 padding-right: 80rem / $pxConvertRem;
54 - z-index: 1;  
55 transition: width 400ms; 53 transition: width 400ms;
56 box-sizing: border-box; 54 box-sizing: border-box;
57 border: 1px solid #ccc; 55 border: 1px solid #ccc;
58 overflow: hidden; 56 overflow: hidden;
  57 +
  58 + @include transition(margin-left 0.4s);
59 } 59 }
60 input { 60 input {
61 float: left; 61 float: left;
@@ -65,6 +65,7 @@ @@ -65,6 +65,7 @@
65 color: #999; 65 color: #999;
66 overflow: hidden; 66 overflow: hidden;
67 border: none; 67 border: none;
  68 + -webkit-appearance: none;
68 } 69 }
69 .iconfont { 70 .iconfont {
70 position: absolute; 71 position: absolute;
@@ -90,11 +91,13 @@ @@ -90,11 +91,13 @@
90 } 91 }
91 92
92 .no-search { 93 .no-search {
  94 + position: absolute;
93 display: none; 95 display: none;
94 float: left; 96 float: left;
95 margin-right: 10rem / $pxConvertRem; 97 margin-right: 10rem / $pxConvertRem;
96 color: #999; 98 color: #999;
97 font-size: 28rem / $pxConvertRem; 99 font-size: 28rem / $pxConvertRem;
  100 + @inlcude transition(display .4s);
98 } 101 }
99 } 102 }
100 .index-container { 103 .index-container {
@@ -32,7 +32,7 @@ @@ -32,7 +32,7 @@
32 } 32 }
33 33
34 .list-nav { 34 .list-nav {
35 - border:1px solid #e6e6e6; 35 + border-bottom:1px solid #e6e6e6;
36 > li { 36 > li {
37 float: left; 37 float: left;
38 width: 25%; 38 width: 25%;
@@ -32,7 +32,7 @@ @@ -32,7 +32,7 @@
32 } 32 }
33 33
34 .list-nav { 34 .list-nav {
35 - border:1px solid #e6e6e6; 35 + border-bottom:1px solid #e6e6e6;
36 > li { 36 > li {
37 float: left; 37 float: left;
38 width: 25%; 38 width: 25%;
@@ -10,11 +10,6 @@ @@ -10,11 +10,6 @@
10 </div> 10 </div>
11 </form> 11 </form>
12 </div> 12 </div>
13 - <div class="history">  
14 - <h6>历史纪录</h6>  
15 - <div class="historyList"></div>  
16 - <span class='removeHistory'>清空搜索历史</span>  
17 - </div>  
18 <div class="search-result"> 13 <div class="search-result">
19 </div> 14 </div>
20 </div> 15 </div>
@@ -3,15 +3,17 @@ @@ -3,15 +3,17 @@
3 <div class="index-container"> 3 <div class="index-container">
4 <div class="index-header clearfix"> 4 <div class="index-header clearfix">
5 <div class="iconfont index-logo">&#xe60e;</div> 5 <div class="iconfont index-logo">&#xe60e;</div>
6 - <form action="{{searchUrl}}" class="index-search"> 6 + <div class="box">
7 <a href="javascript:void(0);" class="no-search">取消</a> 7 <a href="javascript:void(0);" class="no-search">取消</a>
8 - <div class="search-box">  
9 - <input type="hidden" name="from" value="search">  
10 - <input type="text" name="query" placeholder="搜索" autocomplete="off">  
11 - <span class="iconfont clear-text">&#xe623;</span>  
12 - <span class="iconfont search-icon empty">&#xe60f;</span>  
13 - </div>  
14 - </form> 8 + <form action="{{searchUrl}}" class="index-search">
  9 + <div class="search-box">
  10 + <input type="hidden" name="from" value="search">
  11 + <input type="text" name="query" placeholder="搜索" autocomplete="off">
  12 + <span class="iconfont clear-text">&#xe623;</span>
  13 + <span class="iconfont search-icon empty">&#xe60f;</span>
  14 + </div>
  15 + </form>
  16 + </div>
15 </div> 17 </div>
16 <div class="index-channel"> 18 <div class="index-channel">
17 <img class="img" src="{{background}}"> 19 <img class="img" src="{{background}}">