fix channel issue

@@ -33,13 +33,13 @@ const getContent = () => {
             {
                 brandsAd: [
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'GINZA',
                         des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
                         btnText: 'shop now'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'STUSSY',
                         des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
                         btnText: 'shop now'
@@ -51,24 +51,24 @@ const getContent = () => {
                 floorEn: 'NEW ARRIVALS',
                 newArrivals: [
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'STUSSY',
                         link: '/',
                         smallImg: true
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'DAILY PAPER',
                         link: '/',
                         even: true
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'BAPE',
                         link: '/'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'SUPREME',
                         link: '/',
                         even: true,
@@ -83,7 +83,7 @@ const getContent = () => {
                     {
                         big: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
@@ -102,17 +102,17 @@ const getContent = () => {
                     {
                         big: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
                         small: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             },
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
@@ -122,17 +122,17 @@ const getContent = () => {
                     {
                         big: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
                         small: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             },
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ]
@@ -140,17 +140,17 @@ const getContent = () => {
                     {
                         big: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
                         small: [
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             },
                             {
-                                img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                                img: '//placehold.it/{width}x{height}',
                                 link: ''
                             }
                         ],
@@ -163,28 +163,28 @@ const getContent = () => {
                 floorEn: 'STYLE ICON',
                 styleIcon: [
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'COTE&CIEL',
                         des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
                         link: '/ ',
                         btnText: '去看看'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'COTE&CIEL',
                         des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
                         link: '/ ',
                         btnText: '去看看'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'COTE&CIEL',
                         des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
                         link: '/ ',
                         btnText: '去看看'
                     },
                     {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         name: 'COTE&CIEL',
                         des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
                         link: '/ ',
@@ -194,7 +194,7 @@ const getContent = () => {
             },
             {
                 adBanner: {
-                    img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                    img: '//placehold.it/{width}x{height}',
                     link: ''
                 }
             },
@@ -203,28 +203,28 @@ const getContent = () => {
                 floorEn: 'EDITORIAL',
                 editorial: {
                     big: {
-                        img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                        img: '//placehold.it/{width}x{height}',
                         link: ''
                     },
                     small: [
                         {
-                            img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                            img: '//placehold.it/{width}x{height}',
                             link: '/',
                             bottomSpace: true,
                             rightSpace: true
                         },
                         {
-                            img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                            img: '//placehold.it/{width}x{height}',
                             link: '/',
                             bottomSpace: true
                         },
                         {
-                            img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                            img: '//placehold.it/{width}x{height}',
                             link: '/',
                             rightSpace: true
                         },
                         {
-                            img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
+                            img: '//placehold.it/{width}x{height}',
                             link: ''
                         }
                     ]

 <div class="home-page">
+    <div class="top-slider-container">
     {{# content}}
         {{#if slider}}
         {{> slider}}
         {{/if}}
     {{/ content}}
-    <div class="main-container">
+    </div>
+    <div class="main-container clearfix">
         {{# content}}
             {{#if brandsAd}}
             {{> ad}}

 <div class="ad-banner">
     {{#adBanner}}
-    <img src="{{image img 864 120}}" alt="">
+    <img class="lazy" data-original="{{image img 864 120}}" alt="">
     {{/adBanner}}
 </div>

-<div class="ad-container">
+<div class="ad-container clearfix">
     {{# brandsAd}}
         <div class="ad {{#if @first}}first{{/if}}">
-        <img src="{{image img 165 165}}" alt="">
+        <img class="lazy" data-original="{{image img 165 165}}" alt="">
         {{> brand-text-box}}
     </div>
     {{/ brandsAd}}

 {{# classicBrands}}
     <div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
         {{# big}}
-            <img class="big-img" src="{{image img 426 250}}" alt="big-img">
+            <img class="big-img lazy" data-original="{{image img 426 250}}" alt="big-img">
         {{/ big}}
         {{# small}}
-            <img class="small-img {{#if @first}}first{{/if}}" src="{{image img 213 213}}" alt="big-img">
+            <img class="small-img lazy {{#if @first}}first{{/if}}" data-original="{{image img 213 213}}" alt="big-img">
         {{/ small}}
 </div>
 {{/ classicBrands}}

@@ -4,12 +4,12 @@
     {{# editorial}}
         <div class="news left">
             {{# big}}
-                <img src="{{image img 288 375}}" alt="">
+                <img class="lazy" data-original="{{image img 288 375}}" alt="">
             {{/ big}}
         </div>
         <div class="news right">
             {{# small}}
-                <img class="{{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" src="{{image img 260 176}}" alt="">
+                <img class="lazy {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image img 260 176}}" alt="">
             {{/ small}}
         </div>
     {{/ editorial}}

@@ -4,7 +4,7 @@
         {{# newArrivals}}
         <div class="arrival-item {{#if smallImg}}small-img{{/if}} {{#if @last}}last{{^}}normal{{/if}}">
             {{#if even}}
-            <img src="{{image img 245 370}}" alt="">
+            <img class="lazy" data-original="{{image img 245 370}}" alt="">
             <div class="brand-name">
                 <span class="bottom">{{name}}</span>
             </div>
@@ -12,7 +12,7 @@
             <div class="brand-name">
                 <span class="top">{{name}}</span>
             </div>
-            <img src="{{image img 245 370}}" alt="">
+            <img class="lazy" data-original="{{image img 245 370}}" alt="">
             {{/if}}
         </div>
         {{/ newArrivals}}

+/**
+ * 频道页
+ * @author: 赵彪<bill.zhao@yoho.cn>
+ * @date: 2016/6/24
+ */
+
+var lazyLoad = require('yoho-jquery-lazyload');
+
 require('../plugins/slider');
+
+lazyLoad($('img.lazy'));
+
 $('.slide-container').slider();
 
 $('.card').mouseenter(function() {

@@ -45,8 +45,8 @@ var $ = require('yoho-jquery'),
         _createOrient: function() {
 
             var orientHtml = '<div class="slide-switch">' +
-                    '<a class="prev" href="javascript:;"><span class="iconfont">&#xe609;</span></a>' +
-                    '<a class="next" href="javascript:;"><span class="iconfont">&#xe608;</span></a>' +
+                    '<a class="prev" href="javascript:;"><span class="iconfont">&#xe607;</span></a>' +
+                    '<a class="next" href="javascript:;"><span class="iconfont">&#xe606;</span></a>' +
                 '</div>';
 
             if (this.$element.find('.slide-switch').length > 0) {

 .home-page {
+    $sliderHeight: 450px;
+
     width: 1150px;
     margin: 10px auto 0;
 
+    .top-slider-container {
+        height: $sliderHeight;
+    }
+
     .slide-container {
         position: absolute;
         left: 0;
         right: 0;
-        height: 450px;
+        height: $sliderHeight;
     }
 
     .slide-thumb-container {
@@ -485,7 +491,7 @@
 
     .main-container {
         position: relative;
-        top: 390px;
+        top: -60px;
         width: 864px;
         margin: 0 auto;
         box-sizing: border-box;

@@ -19,6 +19,7 @@
             height: $textHeight;
             text-align: center;
             font-size: 12px;
+            font-weight: normal;
 
             span {
                 @extend .cursor-pointer;