add gender nav for brand page. code review by XWG

@@ -13,6 +13,7 @@ var swiper,
     $fixTitleBar,
     $fixTitleBar,
     $brandList = $('.brand-list'),
     $brandList = $('.brand-list'),
     $icon = $('.search-icon'),
     $icon = $('.search-icon'),
+    $genderItem = $('.genderNav li'),
     hotBrandsSwiper;
     hotBrandsSwiper;
 
 
 var searchH = $('.newbrand-search').outerHeight(),
 var searchH = $('.newbrand-search').outerHeight(),
@@ -177,3 +178,10 @@ if ($('.brand-search-page').length) {
     });
     });
 
 
 }
 }
+
+if($genderItem.length > 0) {
+    $genderItem.on('touchstart', function(){
+        $('.genderNav ul .active').removeClass('active');
+        $(this).addClass('active');
+    })
+}

 .brand-page {
 .brand-page {
+    .re-pos-search {
+        top: 170rem / $pxConvertRem !important;
+    }
+    .genderNav {
+        display: block;
+        width: 100%;
+        height: 80rem / $pxConvertRem;
+        line-height: 80rem / $pxConvertRem;
+        overflow: hidden;
+        color: #aeaeae;
+        z-index: 3;
+        position: fixed;
+        top: 90rem / $pxConvertRem;
+        border-bottom: 1px solid #e1e1e1;
+
+        ul{
+            width: 100%;
+            height: 90%;
+            overflow: hidden;
+            li{
+                width: 25%;
+                height: 100%;
+                overflow: hidden;
+                float: left;
+                text-align: center;
+                position: relative;
+                font-size: 28rem / $pxConvertRem;
+                i{
+                    width: 100%;
+                    height: 40%;
+                    overflow: hidden;
+                    display: block;
+                }
+                span:not(.split-border){
+                    width: 100%;
+                    height: auto;
+                    overflow: hidden;
+                    display: block;
+                    //line-height: 40rem / $pxConvertRem;
+                }
+
+                .split-border {
+                    display: inline-block;
+                    width: 2px;
+                    height: 1rem;
+                    background-color: #e1e1e1;
+                    position: absolute;
+                    top: 30%;
+                    right: 0;
+                }
+            }
+
+            li:last-child {
+                .split-border {
+                    display: none;
+                }
+            }
+
+            li.active {
+                color: #444;
+            }
+        }
+    }
     .newbrand-search {
     .newbrand-search {
         width: 93.75%;
         width: 93.75%;
         height: 60rem / $pxConvertRem;
         height: 60rem / $pxConvertRem;

@@ -2,7 +2,9 @@
 <div class="brand-page yoho-page">
 <div class="brand-page yoho-page">
     {{# channel}}
     {{# channel}}
 
 
-    <div class="newbrand-search">
+    {{> home/top_nav}}
+
+    <div class="newbrand-search re-pos-search">
         <div class="search-box clearfix">
         <div class="search-box clearfix">
             <a href="{{searchUrl}}" >
             <a href="{{searchUrl}}" >
                 <input type="text" class="search-input" placeholder="查找品牌" readonly="true">
                 <input type="text" class="search-input" placeholder="查找品牌" readonly="true">

+<div class="genderNav">
+    <ul>
+        <li class="active">
+            <span>Boy</span>
+            <span class="split-border"></span>
+        </li>
+        <li>
+            <span>Girl</span>
+            <span class="split-border"></span>
+        </li>
+        <li>
+            <span>Kid</span>
+            <span class="split-border"></span>
+        </li>
+        <li>
+            <span>Lifestyle</span>
+            <span class="split-border"></span>
+        </li>
+    </ul>
+</div>