Showing
3 changed files
with
31 additions
and
25 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; |
| 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 { |
| @@ -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"></div> | 5 | <div class="iconfont index-logo"></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"></span> | ||
| 12 | - <span class="iconfont search-icon empty"></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"></span> | ||
| 13 | + <span class="iconfont search-icon empty"></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}}"> |
-
Please register or login to post a comment