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 26 additions and 20 deletions
@@ -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();
@@ -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;
  38 + }
44 } 39 }
45 } 40 }
46 41
  42 + .index-search {
  43 + height: 96rem / $pxConvertRem;
  44 + background: #fff;
  45 + overflow: hidden;
  46 + @include transition(width .4s);
  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%;
@@ -3,8 +3,9 @@ @@ -3,8 +3,9 @@
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 + <form action="{{searchUrl}}" class="index-search">
8 <div class="search-box"> 9 <div class="search-box">
9 <input type="hidden" name="from" value="search"> 10 <input type="hidden" name="from" value="search">
10 <input type="text" name="query" placeholder="搜索" autocomplete="off"> 11 <input type="text" name="query" placeholder="搜索" autocomplete="off">
@@ -13,6 +14,7 @@ @@ -13,6 +14,7 @@
13 </div> 14 </div>
14 </form> 15 </form>
15 </div> 16 </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}}">
18 <div class="index-channel-list"> 20 <div class="index-channel-list">