channel chose

@@ -9,49 +9,27 @@ var $searchBox = $('.search-box'),
     $indexSearch = $('.index-search'),
     $indexLogo = $('.index-logo');
 
+var $search = $searchBox.children('input'),
+    $cancelSearch = $indexSearch.children('.no-search');
+
 require('../common');
 
-function showBigSearch() {
-    $indexLogo.css({
-        opacity: 0
-    });
-    $searchBox.css({
-        width: '12.8rem'
-    });
-    $indexSearch.css({
-        width: '15.5rem'
-    });
-    $('.clear-text, .no-search').show();
-}
-
-function hideBigSearch() {
-    $indexLogo.css({
-        opacity: 1
-    });
-    $searchBox.css({
-        width: '8.8rem'
-    });
-    $indexSearch.css({
-        width: '9.6rem'
-    });
-    $('.clear-text, .no-search').hide();
-}
-
-$searchBox.find('input').on('focus', function() {
-    showBigSearch();
+$search.on('focus', function() {
+    $indexSearch.addClass('action');
+    $indexLogo.addClass('action');
 });
 
-$searchBox.find('.clear-text').on('touchend', function() {
-    $searchBox.find('input').val('');
-});
-$searchBox.find('.search-icon').on('touchend', function() {
-    $indexSearch.submit();
+$cancelSearch.on('touchstart', function() {
+    $indexSearch.removeClass('action');
+    $indexLogo.removeClass('action');
+
+    $search.blur();
 });
 
-$('.no-search').on('touchend', function() {
-    $searchBox.find('input').val('');
-    hideBigSearch();
+$searchBox.children('.clear-text').on('touchstart', function() {
+    $search.val('').focus();
 });
 
-// 底部计算有误
-// window.rePosFooter && window.rePosFooter();
+$searchBox.children('.search-icon').on('touchstart', function() {
+    $indexSearch.submit();
+});

@@ -15,6 +15,11 @@
             color: #343434;
             opacity: 1;
             transition: all 400ms;
+
+            &.action {
+                opacity: 0;
+                width: 0;
+            }
         }
 
         .index-search {
@@ -27,6 +32,18 @@
             overflow: hidden;
             z-index: 3;
             @include transition(width .4s);
+
+            &.action {
+                width: 620rem / $pxConvertRem;
+                .no-search, .clear-text {
+                    display: block;
+                }
+
+                .search-box {
+                    width: 512rem / $pxConvertRem;
+                }
+            }
+
             .search-box {
                 float: left;
                 position: relative;

@@ -14,7 +14,7 @@
             </form>
         </div>
         <div class="index-channel">
-            <img class="img" src="{{background}}" alt="">  
+            <img class="img" src="{{background}}">
             <div class="index-channel-list">
                 <a href="/boys" class="list-item">男生 <span class="lighter">BOYS</span> <span class="iconfont right-icon">&#xe614;</span></a>
                 <a href="/girls" class="list-item">女生 <span class="lighter">GIRLS</span> <span class="iconfont right-icon">&#xe614;</span></a>