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'),
var swiper,
$fixTitleBar,
$brandText,
$brandHref,
$brandList = $('.brand-list');
var $icon = $('.search-icon');
... ... @@ -21,10 +19,6 @@ var searchH = $('.newbrand-search').outerHeight(),
brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
minBrandListTop,
searchArray = [],
clearTextHammer,
removeHistory,
searchList,
yohoHistory,
minBrandListTop;
var brandsData,
... ... @@ -118,21 +112,6 @@ function searchResult() {
// 插入 dom，绑定事件
$('.search-result').html(html);
$('.search-result .brand-list p').each(function (index) {
searchList = new Hammer($('.search-result .brand-list p').eq(index)[0]);
searchList.on('tap', function() {
$brandText = $('.search-result .brand-list p').eq(index).find('a').html();
$brandHref = $('.search-result .brand-list p').eq(index).find('a').attr('href');
if (localStorage.getItem('yohoHistory')) {
yohoHistory = localStorage.getItem('yohoHistory');
searchArray.push(yohoHistory);
}
if (searchArray.toString().split($brandText).length < 2) {
searchArray.push('{"searchName":"' + $brandText + '","searchHref":"' + $brandText + '"}');
}
localStorage.setItem('yohoHistory', searchArray);
});
});
}
if ($('.brand-search-page').length) {
... ... @@ -156,7 +135,6 @@ if ($('.brand-search-page').length) {
clearTextHammer = new Hammer($('.clear-text')[0]);
clearTextHammer.on('tap', function(e) {
e.preventDefault();
$('.search-result').html('');
$('#keyword').val('').trigger('input');
e.srcEvent.stopPropagation();
});
... ... @@ -164,20 +142,4 @@ if ($('.brand-search-page').length) {
$('form.search-box').on('submit', function() {
return false;
});
if (localStorage && localStorage.getItem('yohoHistory')) {
yohoHistory = $.parseJSON('[' + localStorage.getItem('yohoHistory') + ']');
if (yohoHistory) {
$.each(yohoHistory, function(index, content) {
$('<a href="' + content.searchHref + '">' + content.searchName + '</a>').appendTo('.historyList');
});
}
} else {
$('.history').css('display', 'none');
}
removeHistory = new Hammer($('.removeHistory')[0]);
removeHistory.on('tap', function(e) {
$('.historyList').html(' ');
localStorage.clear();
});
}
... ...
... ... @@ -6,17 +6,18 @@
var $ = require('jquery');
var $searchBox = $('.search-box'),
$box = $('.box'),
$indexSearch = $('.index-search'),
$indexLogo = $('.index-logo');
var $search = $searchBox.children('input[type="text"]'),
$cancelSearch = $indexSearch.children('.no-search'),
$cancelSearch = $box.children('.no-search'),
$searchIcon = $searchBox.children('.search-icon');
require('../common');
$search.on('focus', function() {
$indexSearch.addClass('action');
$box.addClass('action');
$indexLogo.addClass('action');
}).on('input', function() {
if ($search.val() === '') {
... ... @@ -27,7 +28,7 @@ $search.on('focus', function() {
});
$cancelSearch.on('touchstart', function() {
$indexSearch.removeClass('action');
$box.removeClass('action');
$indexLogo.removeClass('action');
$search.blur();
... ...
... ... @@ -196,50 +196,4 @@
.search-result {
padding-top: 176rem / $pxConvertRem;
}
.history{
width: 100%;
height: auto;
overflow: hidden;
position: absolute;
left: 0;
top: 176rem / $pxConvertRem;
> h6{
width: 100%;
height: 88rem / $pxConvertRem;
line-height: 88rem / $pxConvertRem;
color: #999;
text-indent: .6rem;
font-size: 36em / $pxConvertRem;
}
.historyList{
width: 100%;
height: auto;
overflow: hidden;
display: block;
> a{
width: auto;
height: 58rem / $pxConvertRem;
overflow: hidden;
line-height: 58rem / $pxConvertRem;
margin: 0 0 20rem / $pxConvertRem .6rem;
padding: 0 20rem / $pxConvertRem;
float: left;
background-color:#f8f8f8;
color: #444;
}
}
> span{
width: auto;
height: 68rem / $pxConvertRem;
overflow: hidden;
display: inline-block;
line-height: 68rem / $pxConvertRem;
border:1px solid #e6e6e6;
padding: 0 28rem / $pxConvertRem;
font-size: 48em / $pxConvertRem;
margin-left: .6rem;
color: #000;
}
}
}
... ...
... ... @@ -3,6 +3,7 @@
overflow: hidden;
margin: 0 auto;
.index-header {
box-sizing: border-box;
padding: 0 20rem / $pxConvertRem;
width: 100%;
height: 96rem / $pxConvertRem;
... ... @@ -22,40 +23,39 @@
}
}
.index-search {
position: absolute;
top: 0;
right: 0;
width: 384rem / $pxConvertRem;
height: 96rem / $pxConvertRem;
background: #fff;
.box {
position: relative;
overflow: hidden;
z-index: 3;
@include transition(width .4s);
z-index: 1;
&.action {
width: 620rem / $pxConvertRem;
.no-search, .clear-text {
display: block;
}
.search-box {
width: 512rem / $pxConvertRem;
margin-left: 80rem / $pxConvertRem;
}
}
}
.index-search {
height: 96rem / $pxConvertRem;
background: #fff;
overflow: hidden;
@include transition(width .4s);
.search-box {
float: left;
position: relative;
top: 20rem / $pxConvertRem;
width: 352rem / $pxConvertRem;
height: 56rem / $pxConvertRem;
padding-right: 80rem / $pxConvertRem;
z-index: 1;
transition: width 400ms;
box-sizing: border-box;
border: 1px solid #ccc;
overflow: hidden;
@include transition(margin-left 0.4s);
}
input {
float: left;
... ... @@ -65,6 +65,7 @@
color: #999;
overflow: hidden;
border: none;
-webkit-appearance: none;
}
.iconfont {
position: absolute;
... ... @@ -90,11 +91,13 @@
}
.no-search {
position: absolute;
display: none;
float: left;
margin-right: 10rem / $pxConvertRem;
color: #999;
font-size: 28rem / $pxConvertRem;
@inlcude transition(display .4s);
}
}
.index-container {
... ...
... ... @@ -32,7 +32,7 @@
}
.list-nav {
border:1px solid #e6e6e6;
border-bottom:1px solid #e6e6e6;
> li {
float: left;
width: 25%;
... ...
... ... @@ -32,7 +32,7 @@
}
.list-nav {
border:1px solid #e6e6e6;
border-bottom:1px solid #e6e6e6;
> li {
float: left;
width: 25%;
... ...
... ... @@ -10,11 +10,6 @@
</div>
</form>
</div>
<div class="history">
<h6>历史纪录</h6>
<div class="historyList"></div>
<span class='removeHistory'>清空搜索历史</span>
</div>
<div class="search-result">
</div>
</div>
... ...
... ... @@ -3,15 +3,17 @@
<div class="index-container">
<div class="index-header clearfix">
<div class="iconfont index-logo">&#xe60e;</div>
<form action="{{searchUrl}}" class="index-search">
<div class="box">
<a href="javascript:void(0);" class="no-search">取消</a>
<div class="search-box">
<input type="hidden" name="from" value="search">
<input type="text" name="query" placeholder="搜索" autocomplete="off">
<span class="iconfont clear-text">&#xe623;</span>
<span class="iconfont search-icon empty">&#xe60f;</span>
</div>
</form>
<form action="{{searchUrl}}" class="index-search">
<div class="search-box">
<input type="hidden" name="from" value="search">
<input type="text" name="query" placeholder="搜索" autocomplete="off">
<span class="iconfont clear-text">&#xe623;</span>
<span class="iconfont search-icon empty">&#xe60f;</span>
</div>
</form>
</div>
</div>
<div class="index-channel">
<img class="img" src="{{background}}">
... ...