goods partial

@@ -36,6 +36,12 @@ const index = (req, res) => {
                 page: pageNum,               // current page: http://host/?page=2
                 page: pageNum,               // current page: http://host/?page=2
                 limit: 10,                // per_page records' number
                 limit: 10,                // per_page records' number
                 totalRows: 100            // total page number
                 totalRows: 100            // total page number
+            },
+            goods: {
+                img: 'http://placehold.it/274x366',
+                link: '',
+                name: 'Fred Perry Bomber jacket',
+                price: '1015.00'
             }
             }
         },
         },
         helpers: {
         helpers: {

 <style>
 <style>
-    p {
+    .title {
         padding: 10px 0;
         padding: 10px 0;
     }
     }
 
 
@@ -13,40 +13,40 @@
 </style>
 </style>
 <div class="demo-page blk-page">
 <div class="demo-page blk-page">
     {{# content}}
     {{# content}}
-        <p>1.复选按钮</p>
+        <p class="title">1.复选按钮</p>
         {{#each checkbox}}
         {{#each checkbox}}
             {{> checkbox}}
             {{> checkbox}}
             <br><br>
             <br><br>
         {{/each}}
         {{/each}}
 
 
-        <p>2.单选按钮</p>
+        <p class="title">2.单选按钮</p>
         {{#each radio}}
         {{#each radio}}
             {{> radio}}
             {{> radio}}
             <br><br>
             <br><br>
         {{/each}}
         {{/each}}
 
 
-        <p>3. 按钮</p>
+        <p class="title">3. 按钮</p>
         <span class="btn">普通按钮</span>
         <span class="btn">普通按钮</span>
         <span class="btn disable">不可点按钮</span>
         <span class="btn disable">不可点按钮</span>
         <span class="btn red">红色按钮</span>
         <span class="btn red">红色按钮</span>
         <span class="btn white">白色按钮</span>
         <span class="btn white">白色按钮</span>
         
         
-        <p>4. 提示文字或者某些链接文字颜色</p>
+        <p class="title">4. 提示文字或者某些链接文字颜色</p>
         <span class="blue">提示文字</span>
         <span class="blue">提示文字</span>
         <a class="blue">Link text</a>
         <a class="blue">Link text</a>
     
     
-        <p>5. input</p>
+        <p class="title">5. input</p>
         <input class="input" type="text">
         <input class="input" type="text">
 
 
-        <p class="bold">6.文字加粗</p>
+        <p class="bold title">6.文字加粗</p>
 
 
-        <p>7. 浮动和clearfix</p>
+        <p class="title">7. 浮动和clearfix</p>
         <div class="clearfix" style="width: 300px;border: 1px solid #000;">
         <div class="clearfix" style="width: 300px;border: 1px solid #000;">
             <p class="left">左浮动</p>
             <p class="left">左浮动</p>
             <p class="right">右浮动</p>
             <p class="right">右浮动</p>
         </div>
         </div>
 
 
-        <p>8. 显示和隐藏</p>
+        <p class="title">8. 显示和隐藏</p>
         <div style="border: 1px solid #000;">
         <div style="border: 1px solid #000;">
             <p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
             <p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
             <p><span class="block">我是block</span></p>
             <p><span class="block">我是block</span></p>
@@ -54,9 +54,14 @@
             <p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
             <p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
         </div>
         </div>
     
     
-        <p>9. 分页组件</p>
+        <p class="title">9. 分页组件</p>
         <div style="border: 1px solid #000; height: 40px; padding: 5px;">
         <div style="border: 1px solid #000; height: 40px; padding: 5px;">
            {{{ pagination paginationOpts }}}
            {{{ pagination paginationOpts }}}
         </div>
         </div>
+
+        <p class="title">10. 商品信息</p>
+        {{# goods}}
+            {{> goods}}
+        {{/ goods}}
     {{/ content}}
     {{/ content}}
 </div>
 </div>

+<div class="goods-info" data-skn="{{skn}}">
+    <a href="{{link}}" target="_blank">
+        <img class="lazy thumb" data-original="{{img}}">
+    </a>
+    <div class="desc">
+        <a class="name" href="{{link}}" target="_blank">{{name}}</a>
+        <p class="price">￥{{price}}</p>
+    </div>
+</div>

+var $ = require('yoho-jquery'),
+    lazyLoad = require('yoho-jquery-lazyload');
+
+lazyLoad($('img.lazy'));

+.goods-info {
+    width: 274px;
+    margin-right: 18px;
+
+    .thumb {
+        width: 100%;
+        height: 366px;
+    }
+
+    .desc {
+        text-align: center;
+    }
+
+    .name {
+        font-size: 14px;
+        line-height: 50px;
+    }
+
+    .price {
+        font-size: 16px;
+        font-weight: bold;
+    }
+}

-@import "pagination";
+@import "pagination"; /* 分页 */
+@import "goods"; /* 商品 */