wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by uedxwg
Commit 52bd2172df7e9eab9b43c0001e8917a3d194ff5a 2 parents 24414dc6 7572db77

Merge branch 'develop' of http://git.dev.yoho.cn/web/yohobuy into develop

Inline Side-by-side
Showing 5 changed files with 33 additions and 27 deletions
... ... @@ -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();
... ...
... ... @@ -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%;
... ...
... ... @@ -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}}">
... ...