频道选择页面顶部搜索优化

@@ -8,7 +8,7 @@ var $searchBox = $('.search-box'),
     $indexSearch = $('.index-search'),
     $indexLogo = $('.index-logo');
 
-$searchBox.find('input').on('focus', function() {
+function showBigSearch() {
     $indexLogo.css({
         width: 0
     });
@@ -19,7 +19,9 @@ $searchBox.find('input').on('focus', function() {
         width: '15.5rem'
     });
     $('.clear-text, .no-search').show();
-}).on('blur', function() {
+}
+
+function hideBigSearch() {
     $indexLogo.css({
         width: '5.4rem'
     });
@@ -30,12 +32,22 @@ $searchBox.find('input').on('focus', function() {
         width: '9.6rem'
     });
     $('.clear-text, .no-search').hide();
+}
+
+$searchBox.find('input').on('focus', function() {
+    showBigSearch();
 });
-$searchBox.find('.clear-text').click(function() {
-    $searchBox.find('input').val('').trigger('focus');
+
+$searchBox.find('.clear-text').on('touchend', function() {
+    $searchBox.find('input').val('');
 });
-$searchBox.find('.search-icon').click(function() {
+$searchBox.find('.search-icon').on('touchend', function() {
     $indexSearch.submit();
 });
 
+$('.no-search').on('touchend', function() {
+    $searchBox.find('input').val('');
+    hideBigSearch();
+});
+
 window.rePosFooter();

@@ -24,7 +24,8 @@
             width: 384rem / $pxConvertRem;
             height: 112rem / $pxConvertRem;
             overflow: hidden;
-            transition: width 400ms;
+            z-index: 3;
+            @include transition(width .4s);
             .search-box {
                 float: left;
                 position: relative;
@@ -96,10 +97,10 @@
            min-height: 800rem / $pxConvertRem;
 
            .index-channel-list {
-                padding-top: 50%;
+                margin-top: -50%;
                 width: 100%;
                 position: absolute;
-                top: -180rem / $pxConvertRem;
+                top: 50%;
 
                 .list-item {
                     display: block;
@@ -114,6 +115,9 @@
                     background: #000;
                     border: 4px solid #fff;
                     font-weight: bold;
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
                 }
                 .lighter {
                     font-weight: lighter;