fe / yoho-blk · Commits

Go to a project

Authored by xuqi
Commit a03216ff934680603874b7dc0774ec45e46fa873 1 parent 852db8da

goods partial

Inline Side-by-side
Showing 6 changed files with 59 additions and 11 deletions
... ... @@ -36,6 +36,12 @@ const index = (req, res) => {
page: pageNum, // current page: http://host/?page=2
limit: 10, // per_page records' number
totalRows: 100 // total page number
},
goods: {
img: 'http://placehold.it/274x366',
link: '',
name: 'Fred Perry Bomber jacket',
price: '1015.00'
}
},
helpers: {
... ...
<style>
p {
.title {
padding: 10px 0;
}
... ... @@ -13,40 +13,40 @@
</style>
<div class="demo-page blk-page">
{{# content}}
<p>1.复选按钮</p>
<p class="title">1.复选按钮</p>
{{#each checkbox}}
{{> checkbox}}
<br><br>
{{/each}}
<p>2.单选按钮</p>
<p class="title">2.单选按钮</p>
{{#each radio}}
{{> radio}}
<br><br>
{{/each}}
<p>3. 按钮</p>
<p class="title">3. 按钮</p>
<span class="btn">普通按钮</span>
<span class="btn disable">不可点按钮</span>
<span class="btn red">红色按钮</span>
<span class="btn white">白色按钮</span>
<p>4. 提示文字或者某些链接文字颜色</p>
<p class="title">4. 提示文字或者某些链接文字颜色</p>
<span class="blue">提示文字</span>
<a class="blue">Link text</a>
<p>5. input</p>
<p class="title">5. input</p>
<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;">
<p class="left">左浮动</p>
<p class="right">右浮动</p>
</div>
<p>8. 显示和隐藏</p>
<p class="title">8. 显示和隐藏</p>
<div style="border: 1px solid #000;">
<p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
<p><span class="block">我是block</span></p>
... ... @@ -54,9 +54,14 @@
<p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
</div>
<p>9. 分页组件</p>
<p class="title">9. 分页组件</p>
<div style="border: 1px solid #000; height: 40px; padding: 5px;">
{{{ pagination paginationOpts }}}
</div>
<p class="title">10. 商品信息</p>
{{# goods}}
{{> goods}}
{{/ goods}}
{{/ content}}
</div>
\ No newline at end of file
... ...
<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>
\ No newline at end of file
... ...
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"; /* 商品 */
... ...