page optimization

@@ -6,8 +6,11 @@
  var $ = require('jquery'),
     Swiper = require('yoho.iswiper'),
     lazyLoad = require('yoho.lazyload'),
-    Handlebars = require('yoho.handlebars'),
-    goodsSwiper,
+    Handlebars = require('yoho.handlebars');
+
+var goodsSwiper,
+
+    // winH = $(window).height(),
     sizeSwiper,
     refSwiper,
     handleHelper;
@@ -57,7 +60,9 @@ handleHelper = Handlebars.registerHelper('addOne', function(index) {
     return index + 1;
 });
 
-// $('#iframe').load(function() {
-//     var mainheight = $(this).contents().find('body').height() + 30;
-//     $(this).height(mainheight);
-// });
\ No newline at end of file
+
+//srcoll to load more
+// $(window).scroll(function () {
+//     if ($(window).scrollTop() + winH >= $(document).height() - 50) {
+//     }
+// });

@@ -5,7 +5,7 @@ $tableCellC:#eee;
 $basicBtnC:#eb0313;
 
 .good-detail-page {
-
+overflow: hidden;
 /* basic component */
 .page-block{
     box-sizing:border-box;
@@ -14,7 +14,6 @@ $basicBtnC:#eb0313;
     border-top: 1px solid $borderC;
     padding: 0  pxToRem(28px);
     >.title{
-        min-height: pxToRem(88px);
         line-height: pxToRem(88px);
         color: $mainFontC;
         font-size : pxToRem(28px);           
@@ -23,7 +22,6 @@ $basicBtnC:#eb0313;
         span{
             color:#a0a0a0;
             font-size:pxToRem(18px);
-                // vertical-align: baseline;
             }
         }
         .detail{
@@ -38,26 +36,17 @@ $basicBtnC:#eb0313;
                 .row{
                     display: table-row;
                     .column{
-                     display: table-cell;
-                     padding: 0.4em 0.8em;
-                     border:1px solid white;
-                     font-size: pxToRem(24px);
-                     background-color: $tableCellC;
-                 }
-             }
-         }
-
-        // table {
-        //       width: 100%;
-        //       tbody td{
-        //            padding: 0.4em 0.8em;
-        //            border:3px solid white;
-        //            font-size: pxToRem(24px);
-        //            background-color: $tableCellC;
-        //       }
-        // }
+                       display: table-cell;
+                       padding: 0.4em 0.8em;
+                       border:1px solid #fff;
+                       font-size: pxToRem(24px);
+                       background-color: $tableCellC;
+                   }
+               }
+           }
     }
 }
+
 .gap-block{
     min-height: 30rem/$pxConvertRem;
     background-color: #f0f0f0;
@@ -162,23 +151,25 @@ $basicBtnC:#eb0313;
     }
 }
 .periodOfMarket{
-   font-size: pxToRem(24px);
-   float: right;
-   h1{
-    display: inline-block;
-    line-height: pxToRem(88px);
-}
+     font-size: pxToRem(24px);
+     float: right;
+     h1{
+        display: inline-block;
+        line-height: pxToRem(88px);
+    }
 }
 .goodsName,
 .goodsSubtitle{
         // width: 100%;
         display:table;
         span{
-         display: table-cell;
-         vertical-align: middle;
-     }
+           display: table-cell;
+           vertical-align: middle;
+       }
  }
- .vipLevel {
+   .vipLevel {
+    width: 100%;
+    box-sizing:border-box;
     display: table;
     min-height: pxToRem(88px);
     padding-left:pxToRem(28px);
@@ -213,17 +204,21 @@ $basicBtnC:#eb0313;
     color: $mainFontC;
     line-height: pxToRem(88px);
 
-    border-bottom: 2px solid $borderC;
+    border-bottom: 1px solid $borderC;
 
     .iconfont{
-        // padding-right:28rem/$pxConvertRem;
-        font-size: inherit;
+        display: inline-block;
+        width: pxToRem(35px);
+        font-size: pxToRem(45px);
         float: right;
         color:#e0e0e0;
-        text-align: right;
+        // padding-left:pxToRem(50px);
     }
 }
-
+.goodsSubtitle,
+.goodsDiscount{
+    text-indent: pxToRem(-14px);
+}
 .feedback-list-page {
     padding-top: pxToRem(30px);
     background-color: #f0f0f0;
@@ -254,30 +249,28 @@ $basicBtnC:#eb0313;
             color: #000;
         }
     }
-
     .comment-nav {
         border-right: 1px solid #ccc;
     }
-
     .comment-content{
-     .comment-content-main{
+       .comment-content-main{
         background-color: #fff;
         border-bottom: 1px solid $borderC;
         .user-name{
-            font-size: px2rem(24);
-            line-height: px2rem(62);
+            font-size: pxToRem(24px);
+            line-height: pxToRem(62px);
             color:$mainFontC;
-            padding-left: px2rem(28);
-            padding-right: px2rem(18);
+            padding-left: pxToRem(28px);
+            padding-right: pxToRem(18px);
         }
         .goods-spec,
         .comment-time{
-            font-size: px2rem(24);
-            line-height: px2rem(62);
+            font-size: pxToRem(24px);
+            line-height: pxToRem(62px);
         }
         .detail-content{
-            font-size: px2rem(28);
-            line-height: px2rem(36);
+            font-size: pxToRem(28px);
+            line-height: pxToRem(36px);
             font-size: pxToRem(24px);
             line-height: pxToRem(62px);
             color:$mainFontC;
@@ -299,17 +292,15 @@ $basicBtnC:#eb0313;
         }
         .detail-content,
         .comment-time{
-            padding-left: px2rem(28);
+            padding-left: pxToRem(28px);
 
         }
         .detail-content{
-            padding-right: px2rem(28);
+            padding-right: pxToRem(28px);
             padding-left: pxToRem(28px);
-
         }
         .detail-content{
             padding-right: pxToRem(28px);
-
         }
         .comment-time{
             color:#c1c1c1;
@@ -318,21 +309,21 @@ $basicBtnC:#eb0313;
 
     .comment-content-footer{
 
-       min-height: pxToRem(88px);
-       text-align: center;
-       background-color: #fff;
+     min-height: pxToRem(88px);
+     text-align: center;
+     background-color: #fff;
 
-       border-bottom: 2px solid $borderC;
-       line-height: pxToRem(88px);
-       font-size: pxToRem(28px);
+     border-bottom: 1px solid $borderC;
+     line-height: pxToRem(88px);
+     font-size: pxToRem(28px);
 
-       a{
-           color: #e0e0e0;
-           .iconfont{
-             font-size: inherit;
-         }
-     }    
- }
+     a{
+         color: #e0e0e0;
+         .iconfont{
+           font-size: inherit;
+       }
+   }    
+}
 
 
 }
@@ -353,10 +344,8 @@ $basicBtnC:#eb0313;
     .store-logo{
        // padding-right: 35rem/$pxConvertRem;
        img{
-
         width: pxToRem(109px);
         height: pxToRem(68px);
-
         margin-left: 0;
         margin-right: pxToRem(-25px);
     }
@@ -374,33 +363,37 @@ $basicBtnC:#eb0313;
     }
 }
 }
-    .goods-desc{
-        .service{
-            margin-top: pxToRem(22px);
-        }
+.goods-desc{
+    .service{
+        width: pxToRem(489px);
+        height: pxToRem(28px);
+        margin-top: pxToRem(22px);
     }
-    .tips{
-            color:$subFontC;
-            font-size: pxToRem(18px);   
-            margin-top: pxToRem(20px); 
-    }
-    .materials{
-        .detail{
-            img{
-                display: block;
-                overflow: hidden;
-                width: pxToRem(90px);
-                height: pxToRem(120px);
-                padding-right: pxToRem(20px);
-                float: left;
-            }
-            .material-desc{
-                // float: left;
+}
+.tips{
+    color:$subFontC;
+    font-size: pxToRem(18px);   
+    margin-top: pxToRem(20px); 
+}
+.materials{
+    .detail{
+        img{
+            display: block;
+            overflow: hidden;
+            width: pxToRem(90px);
+            height: pxToRem(120px);
+            padding-right: pxToRem(20px);
+            float: left;
+        }
+        .material-desc{
                 font-size: pxToRem(24px);
-
+                overflow: hidden;
+                
             }
         }
         .material-type{
+            width: pxToRem(581px);
+            height: pxToRem(99px);
             border-top: 1px solid $borderC;
             padding: pxToRem(17px) 0;
         }
@@ -435,10 +428,15 @@ $basicBtnC:#eb0313;
     }
 
     #reference-swiper-container{
+
         .first-group{
-            width: pxToRem(58px);
-            >div{
-                height: pxToRem(67px);
+            width: pxToRem(70px);
+            margin-top: pxToRem(66px);
+            .avatar{
+                        line-height: pxToRem(40px);
+                        width: pxToRem(40px);
+                        height: pxToRem(40px);
+                        margin: pxToRem(18px) 0;
             }
         }
     }
@@ -446,103 +444,96 @@ $basicBtnC:#eb0313;
     .measurement-method{
         .detail{
             width: 100%;
-            height: pxToRem(300px);
+            // height: pxToRem(300px);
             img{
-               float:left;
-               width: pxToRem(270px);
-               height: pxToRem(239px);
-               margin-top: pxToRem(18px);
-               margin-right: pxToRem(28px);
+             float:left;
+             width: pxToRem(270px);
+             height: pxToRem(239px);
+             margin-top: pxToRem(18px);
+             margin-right: pxToRem(28px);
+         }
+         .right-part{
+            overflow: hidden;
+            .title{
+               >h1{
+                margin-top: pxToRem(10px);
+                display: inline-block;
+                padding-right: pxToRem(10px);
+                border-right: 1px solid $borderC;
+                line-height: 100%;
             }
-            .right-part{
-                float:left;
-               .title{
-                     >h1{
-                        margin-top: pxToRem(10px);
-                        display: inline-block;
-                        padding-right: pxToRem(10px);
-                        border-right: 1px solid $borderC;
-                        line-height: 100%;
-                    }
-                    >span{
-                        font-size: pxToRem(12px);
-                    }
-               }
-                ul.items{
-                    margin-top: pxToRem(20px);
-                    padding: 0;
-                    line-height: pxToRem(30px);
-                    font-size: pxToRem(13px);
-                    li{
-                        span{
-                           display: inline-block;
-                           width: pxToRem(15px);
-                           height: pxToRem(15px);
-                           background-color: $basicBtnC;
-                           border-radius: 50%;
-                           color:white;
-                           text-align: center;
-                           line-height: pxToRem(15px);
-                           font-size: pxToRem(13px);
-                           margin-right: pxToRem(12px);
-                           vertical-align: text-bottom;
-                        }
-                    }
-                }
+            >span{
+                font-size: pxToRem(12px);
             }
-            clear:both;
         }
-    }
-    .cart-bar{ 
-        position: relative;
-        box-sizing:border-box;
-        width: 100%;
-        height: pxToRem(120px);
-        position:fixed;
-        bottom: 0;
-        background-color: white;
-        z-index: 64;
-        padding:pxToRem(20px) pxToRem(28px);
-        text-align: center;
-        
-
-        a{
-            display: inline-block;
-            &.num-incart{
-                width: pxToRem(45px);
-                height: pxToRem(45px);
-                background: url(../img/product/cart.png) no-repeat;
-            }
-            &.favorite{
-                width: pxToRem(34px);
-                height: pxToRem(32px);
-                background:url(../img/product/favorite.png) no-repeat;
-            }
-            &.addto-cart{
-                height: pxToRem(80px);
-                width: pxToRem(260px);
-                margin:0  pxToRem(100px) 0 pxToRem(128px);
-                color: #fff;
-                background-color: $basicBtnC;  
-                font-size: pxToRem(40px);
-                line-height: pxToRem(80px);
-                text-align: center;
-            }
+        ul.items{
+            margin-top: pxToRem(20px);
+            padding: 0;
+            line-height: pxToRem(30px);
+            font-size: pxToRem(13px);
+            li{
+                span{
+                 display: inline-block;
+                 width: pxToRem(15px);
+                 height: pxToRem(15px);
+                 background-color: $basicBtnC;
+                 border-radius: 50%;
+                 color:#fff;
+                 text-align: center;
+                 line-height: pxToRem(15px);
+                 font-size: pxToRem(13px);
+                 margin-right: pxToRem(12px);
+                 vertical-align: text-bottom;
+             }
+         }
+     }
+ }
+ clear:both;
+}
+}
+.cart-bar{ 
+    position: relative;
+    box-sizing:border-box;
+    width: 100%;
+    height: pxToRem(120px);
+    position:fixed;
+    bottom: 0;
+    background-color: #fff;
+    z-index: 64;
+    padding:pxToRem(20px) pxToRem(28px);
+    text-align: center;
+    a{
+        display: inline-block;
+        &.num-incart{
+            font-size: pxToRem(47px);
+            color:#444;
         }
-        .num-tag{
-            position: absolute;
-            left:pxToRem(66px);
-            height: pxToRem(20px);
-            display: block;
-            width: pxToRem(36px);
-            height: pxToRem(36px);
-            background-color: $basicBtnC;
-            border-radius: 50%;
-            color:white;
-            font-size: pxToRem(24px);
+        &.favorite{
+            font-size: pxToRem(34px);
+            color:$basicBtnC;
+        }
+        &.addto-cart{
+            height: pxToRem(80px);
+            width: pxToRem(260px);
+            margin:0  pxToRem(100px) 0 pxToRem(115px);
+            color: #fff;
+            background-color: $basicBtnC;  
+            font-size: pxToRem(40px);
+            line-height: pxToRem(80px);
+            text-align: center;
         }
-        
     }
-
-    
+    .num-tag{
+        position: absolute;
+        left:pxToRem(66px);
+        height: pxToRem(20px);
+        display: block;
+        width: pxToRem(36px);
+        height: pxToRem(36px);
+        background-color: $basicBtnC;
+        border-radius: 50%;
+        color:#fff;
+        font-size: pxToRem(24px);
+    }
+}
 }

-
 {{> layout/header}}
 <div class="good-detail-page yoho-page">
-
     <div class="banner-container">
-
         <h1 class="is-new-lable">NEW</h1>
         {{# bannerTop}}
         {{> product/banner_swiper_arrow}}
         {{/ bannerTop}}
     </div>
 
-    
-
-
     {{# goodsName}}
     <h2 class="goodsName"><span>{{.}}</span></h2>
     {{/ goodsName}}
@@ -21,272 +15,249 @@
     <h1 class="goodsSubtitle"><span>{{.}}</span></h1>
     {{/ goodsSubtitle}}
 
- <!--     {{# goodsTitle}}
-        <h1 class="goodsTitle">{{.}}</h1>
-        {{/ goodsTitle}} -->
-
-        <div class="price-date">
-           {{#goodsPrice}}
-           <div class="goodsPrice">
-            <h1 class="currentPrice">{{currentPrice}}</h1>
-            <h1 class="previousPrice">{{previousPrice}}</h1>
-        </div>
-        {{/goodsPrice}}
-
-        {{#periodOfMarket}}
-        <div class="periodOfMarket">
-            <h1>上市期：</h1>
-            <h1 >{{.}}</h1>
-        </div>
-        {{/periodOfMarket}}
+    <div class="price-date">
+     {{#goodsPrice}}
+     <div class="goodsPrice">
+        <h1 class="currentPrice">{{currentPrice}}</h1>
+        <h1 class="previousPrice">{{previousPrice}}</h1>
     </div>
-    
- <!--      {{# vipLevel}}
-        <div class="vipLevel">
-             {{# list}}
-             {{#if @last}}
-                <span>{{text}}</span>
-                {{^}}
-                <span>{{text}}</span> |
-             {{/if}}
-             {{/ list}}           
-         </div>
-         {{/ vipLevel}} -->
-
-         {{# vipLevel}}
-         <div class="vipLevel">
-           {{# list}}
-           <span class="vip-img"><img src="{{img}}" alt=""></span>
-           <span class="vip-price">{{text}}</span>
-           {{/ list}}           
-       </div>
-       {{/ vipLevel}}
-
-       {{#goodsDiscount}}
-       <div class="goodsDiscount">
-        <h1>{{.}}<span class="iconfont">&#xe609;</span></h1>
+    {{/goodsPrice}}
+    {{#periodOfMarket}}
+    <div class="periodOfMarket">
+        <h1>上市期：</h1>
+        <h1 >{{.}}</h1>
     </div>
-    {{/goodsDiscount}}
+    {{/periodOfMarket}}
+</div>
 
+{{# vipLevel}}
+<div class="vipLevel">
+ {{# list}}
+<span class="vip-img">
+    <img class="lazy" data-original="{{img}}" alt="">
+</span>
+ <span class="vip-price">{{text}}</span>
+ {{/ list}}           
+</div>
+{{/ vipLevel}}
 
-    <div class="feedback-list-page ">
-        {{# feedbacks}}
-        <ul id="nav-tab" class="nav-tab clearfix">
-            <li class="comment-nav focus">{{commentName}}</li>
-            <li class="consult-nav">{{consultName}}</li>
-        </ul>
-        <div id="feedback-content" >
-            <div class="comment-content content ">
-                <div class="comment-content-main">
-                    {{# comments}}
-                    <span class="user-name">
-                        {{userName}}
-                    </span>
-                    <span class="goods-spec">
-                        {{desc}}
-                    </span>
-                    <p class="detail-content">
-                        {{content}}
-                    </p>
-                    <span class="comment-time">
-                        {{time}}
-                    </span>
-                    {{/ comments}}
-                </div>
-                <div class="comment-content-footer">
-                    <a href="{{moreComments}}">查看更多 <span class="iconfont">&#xe604;</span></a> 
-                </div>
+{{#goodsDiscount}}
+<div class="goodsDiscount">
+    <h1>{{.}}<span class="iconfont">&#xe609;</span></h1>
+</div>
+{{/goodsDiscount}}
+
+<div class="feedback-list-page ">
+    {{# feedbacks}}
+    <ul id="nav-tab" class="nav-tab clearfix">
+        <li class="comment-nav focus">{{commentName}}</li>
+        <li class="consult-nav">{{consultName}}</li>
+    </ul>
+    <div id="feedback-content" >
+        <div class="comment-content content ">
+            <div class="comment-content-main">
+                {{# comments}}
+                <span class="user-name">
+                    {{userName}}
+                </span>
+                <span class="goods-spec">
+                    {{desc}}
+                </span>
+                <p class="detail-content">
+                    {{content}}
+                </p>
+                <span class="comment-time">
+                    {{time}}
+                </span>
+                {{/ comments}}
             </div>
-            <div class="consult-content content hide">
-                {{# consults}}
-                <!-- {{> guang/ps_item}} -->
-                {{/ consults}}
+            <div class="comment-content-footer">
+                <a href="{{moreComments}}">查看更多 <span class="iconfont">&#xe604;</span></a> 
             </div>
         </div>
-        {{/ feedbacks}}
+        <div class="consult-content content hide">
+            {{# consults}}
+            <!-- {{> guang/ps_item}} -->
+            {{/ consults}}
+        </div>
     </div>
-    <div class="gap-block"></div>
+    {{/ feedbacks}}
+</div>
+
+<div class="gap-block"></div>
+
+{{# enterStore}}       
+<div class="enter-store page-block">
+    <a class="store-logo" href="{{url}}" style="">
+        <img class="lazy" data-original="{{img}}" alt="{{storeName}}">
+    </a>
+    <a class="store-name" href="{{url}}">{{storeName}}</a>
+    <a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>
+</div> 
+{{/ enterStore}}
 
-    {{# enterStore}}       
-    <div class="enter-store page-block">
-        <a class="store-logo" href="{{url}}" style="">
-            <img src="{{img}}" alt="{{storeName}}">
-        </a>
-        <a class="store-name" href="{{url}}">{{storeName}}</a>
-        <a class="store-link" href="{{url}}">进入店铺<span class="iconfont">&#xe604;</span></a>
+<div class="gap-block"></div>
+
+{{#goodsDescription}}
+<div class="goods-desc  page-block">
+ <img class="service lazy" data-original="http://static.dev.yohobuy.com/img/product/service.png" alt="">
+ <h1 class="title">
+    {{title}}
+    <span class="en-title">{{enTitle}}</span>
+</h1>
+{{#detail}}
+<div class="detail table">
+    <div class="row">
+        <div class="column">编号：{{nubmer}}</div>
+        <div class="column">帽型：{{hatType}}</div>
+    </div>
+    <div class="row">
+        <div class="column">颜色：{{color}}</div>
+        <div class="column">帽檐：{{bongrace}}</div>
     </div> 
-    {{/ enterStore}}
-    <div class="gap-block"></div>
-    <!--   <iframe src="http://www.baidu.com" id="main" width="320" height="300" frameborder="0" scrolling="auto"></iframe> -->
+    <div class="row">
+        <div class="column">类型：{{type}}</div>
+        <div class="column">细节：{{goodsDetail}}</div>
+    </div> 
+    <div class="row">
+        <div class="column">性别：{{gender}}</div>
+        <div class="column">风格：{{style}}</div>
+    </div> 
+</div>
+{{/detail}}
+</div>
+{{/goodsDescription}}
 
-     {{#goodsDescription}}
-     <div class="goods-desc  page-block">
-         <img class="service" src="http://static.dev.yohobuy.com/img/product/service.png" alt="">
-         <h1 class="title">
-            {{title}}
-            <span class="en-title">{{enTitle}}</span>
-        </h1>
-        {{#detail}}
-        <div class="detail table">
-            <div class="row">
-                <div class="column">编号：{{nubmer}}</div>
-                <div class="column">帽型：{{hatType}}</div>
-            </div>
-            <div class="row">
-                <div class="column">颜色：{{color}}</div>
-                <div class="column">帽檐：{{bongrace}}</div>
-            </div> 
-            <div class="row">
-                <div class="column">类型：{{type}}</div>
-                <div class="column">细节：{{goodsDetail}}</div>
-            </div> 
-            <div class="row">
-                <div class="column">性别：{{gender}}</div>
-                <div class="column">风格：{{style}}</div>
-            </div> 
+<div class="gap-block"></div>
+
+{{#sizeInfo}}
+<div class="size-info  page-block">
+ <h1 class="title">
+    {{title}}
+    <span class="en-title">{{enTitle}}</span>
+</h1>
+{{#detail}}
+<div class="detail">
+  <div class="swiper-container detail-swiper" id="size-swiper-container">
+    <div class="swiper-wrapper">
+        {{#list}}
+        <div class="swiper-slide blue-slide" >
+            <div class="size-name cell">{{name}}</div>
+            <div class="size-m cell">{{sizem}}</div>
+            <div class="size-xl cell">{{sizexl}}</div>
         </div>
-        {{/detail}}
-     </div>
-     {{/goodsDescription}}
+        {{/list}}
+    </div>
+</div>
+<p class="tips">提示：左滑查看完整表格信息</p>
+</div>
+{{/detail}}
+</div>
+{{/sizeInfo}}
 
-    <div class="gap-block"></div>
+<div class="gap-block"></div>
 
-    {{#sizeInfo}}
-     <div class="size-info  page-block">
-         <h1 class="title">
-            {{title}}
-            <span class="en-title">{{enTitle}}</span>
-        </h1>
-        {{#detail}}
-        <div class="detail">
-              <div class="swiper-container detail-swiper" id="size-swiper-container">
-                <div class="swiper-wrapper">
-                    {{#list}}
-                    <div class="swiper-slide blue-slide" >
-                        <div class="size-name cell">{{name}}</div>
-                        <div class="size-m cell">{{sizem}}</div>
-                        <div class="size-xl cell">{{sizexl}}</div>
-                    </div>
-                    {{/list}}
-                </div>
+{{#measurementMethod}}
+<div class="measurement-method  page-block">
+    <h1 class="title">
+        {{title}}
+        <span class="en-title">{{enTitle}}</span>
+    </h1>
+    {{#detail}}
+    <div class="detail" style="width:100%">
+        <img class="lazy" data-original="{{img}}" alt="">
+        <div class="right-part">
+            <div class="title">
+                <h1 >{{sort}}</h1>
+                <span>{{enSort}}</span>
             </div>
-            <p class="tips">提示：左滑查看完整表格信息</p>
-         </div>
-         {{/detail}}
-     </div>
-     {{/sizeInfo}}
-
-     <div class="gap-block"></div>
-
-    {{#measurementMethod}}
-     <div class="measurement-method  page-block">
-         <h1 class="title">
-            {{title}}
-            <span class="en-title">{{enTitle}}</span>
-        </h1>
-        {{#detail}}
-        <div class="detail" style="width:100%">
-            <img src="{{img}}" alt="">
-            <div class="right-part">
-                <div class="title">
-                    <h1 >{{sort}}</h1>
-                    <span>{{enSort}}</span>
-                </div>
-                <ul class="items">
-                        {{#each items}}
-                        <li>
-                            <span>{{@index}}</span>
-                            {{this}}</li>
-                        {{/items}}
+            <ul class="items">
+                {{#each items}}
+                <li>
+                    <span>{{@index}}</span>
+                    {{this}}</li>
+                    {{/items}}
                 </ul>
             </div>
         </div>
         {{/detail}}
-     </div>
-     {{/measurementMethod}}
+    </div>
+    {{/measurementMethod}}
 
-     <div class="gap-block"></div>
+    <div class="gap-block"></div>
 
-     {{#reference}}
-     <div class="size-info  page-block">
-         <h1 class="title">
+    {{#reference}}
+    <div class="size-info  page-block">
+        <h1 class="title">
             {{title}}
             <span class="en-title">{{enTitle}}</span>
         </h1>
         {{#detail}}
         <div class="detail">
-              <div class="swiper-container detail-swiper" id="reference-swiper-container">
-                <div class="swiper-wrapper">
-                    {{#list}}
-                    {{#if @first}}
-                    <div class="swiper-slide first-group" >
-                        <div class="model-field" >{{fieldName}}</div>
-                        <div class="first-model">
-                            <img src="{{firstModel}}" alt="">
-                        </div>
-                        <div class="second-model">
-                            <img src="{{secondModel}}" alt="">
-                        </div>
-                    </div>
-                    {{^}}
-                    <div class="swiper-slide" >
-                        <div class="model-field cell">{{fieldName}}</div>
-                        <div class="first-model cell">{{firstModel}}</div>
-                        <div class="second-model cell">{{secondModel}}</div>
-                    </div>
-                    {{/if}}
-                    {{/list}}
+          <div class="swiper-container detail-swiper" id="reference-swiper-container">
+            <div class="swiper-wrapper">
+                {{#list}}
+                {{#if @first}}
+                <div class="swiper-slide first-group" >
+                        <img class="lazy avatar" data-original="{{firstModel}}"  alt="">
+                        <img class="lazy avatar" data-original="{{secondModel}}" alt="">
                 </div>
+                {{^}}
+                <div class="swiper-slide" >
+                    <div class="model-field cell">{{fieldName}}</div>
+                    <div class="first-model cell">{{firstModel}}</div>
+                    <div class="second-model cell">{{secondModel}}</div>
+                </div>
+                {{/if}}
+                {{/list}}
             </div>
-            <p class="tips">提示:左滑查看完整表格信息</p>
-         </div>
-         {{/detail}}
-     </div>
-     {{/reference}}
-
-     <div class="gap-block"></div>
-     
-     {{#materials}}
-     <div class="materials  page-block">
-         <h1 class="title">
-            {{title}}
-            <span class="en-title">{{enTitle}}</span>
-        </h1>
-        <div class="detail">
-            <img src="{{img}}" alt="">
-            <p class="material-desc">
+        </div>
+        <p class="tips">提示:左滑查看完整表格信息</p>
+    </div>
+    {{/detail}}
+</div>
+{{/reference}}
 
-                {{desc}}
-            </p>
+<div class="gap-block"></div>
 
-        </div>
-        <img src="{{materialType}}" alt="" class="material-type">
-     </div>
-     {{/materials}}
+{{#materials}}
+<div class="materials  page-block">
+ <h1 class="title">
+    {{title}}
+    <span class="en-title">{{enTitle}}</span>
+</h1>
+<div class="detail">
+    <img class="lazy" data-original="{{img}}" alt="">
+    <p class="material-desc">
+        {{desc}}
+    </p>
+</div>
+<img class="lazy material-type" data-original="{{materialType}}"  alt="" >
+</div>
+{{/materials}}
 
-    <div class="gap-block"></div>
+<div class="gap-block"></div>
 
-    {{#productDetail}}
-     <div class="product-detail page-block">
-         <h1 class="title">
-            {{title}}
-            <span class="en-title">{{enTitle}}</span>
-        </h1>
-        <div class="detail">
-            <p>{{desc}}</p>
-            <img src="{{img}}" alt="">
-        </div>
-     </div>
-    {{/productDetail}}
-    
+{{#productDetail}}
+<div class="product-detail page-block">
+ <h1 class="title">
+    {{title}}
+    <span class="en-title">{{enTitle}}</span>
+</h1>
+<div class="detail">
+    <p>{{desc}}</p>
+    <img class="lazy" data-original="{{img}}" alt="">
+</div>
+</div>
+{{/productDetail}}
 
-    {{#cartInfo}}
-    <div class="cart-bar">
-        <span class="num-tag">{{numInCart}}</span>
-        <a href="" class="num-incart"></a>
-        <a href="" class="addto-cart">加入购物车</a>
-        <a href="" class="favorite"></a>
-    </div>
-    {{/cartInfo}}
+{{#cartInfo}}
+<div class="cart-bar">
+    <span class="num-tag">{{numInCart}}</span>
+    <a href="" class="num-incart iconfont">&#xe62c;</a>
+    <a href="" class="addto-cart ">加入购物车</a>
+    <a href="" class="favorite iconfont">&#xe605;</a>
+</div>
+{{/cartInfo}}
 </div>
 {{> layout/footer}}
\ No newline at end of file

@@ -105,7 +105,7 @@ SHOE BQT KEN BLOCK',
 
             'sizeInfo'=>array(
                   'title' => '尺码信息',
-                  'enTitle' =>'SIZE INFO',
+                  'enTitle' =>'xSIZE INFO',
 
                   'detail' =>array(
                      'list'=>array(
@@ -169,7 +169,7 @@ SHOE BQT KEN BLOCK',
                   'detail' =>array(
                      'list'=>array(
                          array(
-                             'fieldName'=>' ',
+                             'fieldName'=>'1 ',
                              'firstModel'=>'http://static.dev.yohobuy.com/img/product/avatar1.png',
                              'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png'
                           ),