频道选择页面 顶部搜索

@@ -6,6 +6,10 @@
 
 var $ = require('yoho.zepto');
 
+var $searchBox = $('.search-box'),
+    $indexSearch = $('.index-search'),
+    $indexLogo = $('.index-logo');
+
 function downLoadApp() {
     var appUrl = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.yoho&g_f=995445';
     var clickedAt = new Date();
@@ -40,3 +44,42 @@ if (!window.cookie('_float-layer-app')) {
     $('#float-layer-app').hide();
 }
 
+/**
+ * 频道选择页面顶部搜索
+ * @author: bikai<kai.bi@yoho.cn>
+ * @date: 2015/10/28
+ */
+
+$searchBox.find('input').on('focus', function () {
+    $indexLogo.css({
+        width: 0,
+        display: 'none'
+    });
+    $searchBox.css({
+        width: '12.8rem'
+    });
+    $indexSearch.css({
+        width: '15.5rem'
+    });
+    $('.clear-text, .no-search').show();
+}).on('blur', function () {
+    $indexLogo.css({
+        width: '5.4rem',
+        display: 'block'
+    });
+    $searchBox.css({
+        width: '8.8rem'
+    });
+    $indexSearch.css({
+        width: '9.6rem'
+    });
+    $('.clear-text, .no-search').hide();
+});
+
+$searchBox.find('.clear-text').tap(function () {
+    $searchBox.find('input').val('').trigger('focus');
+});
+
+$searchBox.find('.search-icon').tap(function () {
+    $indexSearch.submit();
+});
\ No newline at end of file

@@ -2,7 +2,71 @@
     width: 100%;
     overflow: hidden;
     margin: 0 auto;
+    .index-header {
+        padding: 0 20rem / $pxConvertRem;
+        width: 100%;
+        height: 96rem / $pxConvertRem;
+        line-height: 96rem / $pxConvertRem;
 
+        .index-logo {
+            float: left;
+            font-size: 50rem / $pxConvertRem;
+            width: 216rem / $pxConvertRem;
+            color: #343434;
+        }
+
+        .index-search {
+            float: right;
+            width: 384rem / $pxConvertRem;
+            .search-box {
+                float: left;
+                position: relative;
+                top: 20rem / $pxConvertRem;
+                width: 352rem / $pxConvertRem;
+                height: 56rem / $pxConvertRem;
+                padding-right: 40rem / $pxConvertRem;
+                z-index: 1;
+                transition: width 400ms;
+                box-sizing: border-box;
+                border: 1px solid #ccc;
+                overflow: hidden;
+            }
+            input {
+                float: left;
+                width: 100%;
+                font-size: 28rem / $pxConvertRem;
+                padding: 10rem / $pxConvertRem;
+                color: #999;
+                overflow: hidden;
+                border: none;
+            }
+            .iconfont {
+                position: absolute;
+                top: 8rem / $pxConvertRem;
+                width: 40rem / $pxConvertRem;
+                font-size: 28rem / $pxConvertRem;
+                z-index: 1;
+                line-height: 40rem / $pxConvertRem;
+            }
+            .clear-text {
+                display: none;
+                right: 50rem / $pxConvertRem;
+                color: #ccc;
+            }
+            .search-icon {
+                right: 10rem / $pxConvertRem;
+                color: #e6e6e6;
+            }
+        }
+
+        .no-search {
+            display: none;
+            float: left;
+            margin-right: 10rem / $pxConvertRem;
+            color: #999;
+            font-size: 28rem / $pxConvertRem;
+        }
+    }
     .index-container {
         position: relative;
         @include transition(transform 0.5s);

@@ -3,6 +3,17 @@
 <div class="index-page yoho-page">
    
         <div class="index-container">
+            <div class="index-header clearfix">
+                <div class="iconfont index-logo">&#xe60e;</div>
+                <form action="http://search.m.yohobuy.com" class="index-search">
+                    <a href="javascript:void(0);" class="no-search">取消</a>
+                    <div class="search-box">
+                        <input type="text" name="query" placeholder="搜索">
+                        <span class="iconfont clear-text">&#xe623;</span>
+                        <span class="iconfont search-icon">&#xe60f;</span>
+                    </div>
+                </form>
+            </div>
             
              <div class="index-channel">
                    <img class="img" src="{{background}}" alt="">