Authored by xuqi

推荐商品数目为1时的独立演示

... ... @@ -31,6 +31,19 @@ module.exports = function(flag) {
},
{
recommendation: {
onlyOne: {
id: 1,
thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'GAWS DIGI 丛林数码印花拼接卫衣看看两行文字以上能不能切字啦,样式应该不会乱的吧',
isLike: false,
price: 1268,
salePrice: 589,
isSale: true,
isFew: true,
isNew: false,
url: '',
likeUrl: ''
},
list: [
{
id: 1,
... ...
... ... @@ -63,7 +63,7 @@ exports.initAndroid = function() {
$('#wrapper').removeClass('no-android');
//相关文章截取文字
ellipsis.init();
$('.post-list').find('span').each(function() {
$('.post-list span, .one-good .reco-name').each(function() {
this.mlellipsis(2);
});
$('.brand-name').each(function() {
... ... @@ -216,7 +216,7 @@ exports.initOther = function() {
//相关文章截取文字
ellipsis.init();
$('.post-list').find('span').each(function() {
$('.post-list span, .one-good .reco-name').each(function() {
this.mlellipsis(2);
});
$('.brand-name').each(function() {
... ...
... ... @@ -11,4 +11,61 @@
color: #b0b0b0;
text-align: center;
}
.one-good {
padding-left: 15rem / $pxConvertRem;
padding-right: 30rem / $pxConvertRem;
.thumb {
height: 134rem / $pxConvertRem;
width: 96rem / $pxConvertRem;
float: left;
}
.content-container {
height: 134rem / $pxConvertRem;
line-height: 1;
font-size: 24rem / $pxConvertRem;
padding-left: 120rem / $pxConvertRem;
> p {
height: 50%;
line-height: 94rem / $pxConvertRem;
}
span {
display: inline-block;
line-height: 24rem / $pxConvertRem;
}
.price {
line-height: 47rem / $pxConvertRem;
}
}
.sale-price {
color: #d62927;
line-height: 1.5;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin-left: 5rem / $pxConvertRem;
color: #b0b0b0;
text-decoration: line-through;
line-height: 1.5;
}
.detail {
display: inline-block;
color: #000;
border: 1px solid;
border-radius: 2px;
float: right;
padding: 0 5px;
line-height: 1.5;
}
}
}
\ No newline at end of file
... ...
{{# recommendation}}
<div class="article-type-five clearfix">
<h2>相关推荐</h2>
{{# onlyOne}}
<div class="one-good">
<img class="lazy thumb" data-original="{{thumb}}" alt="">
<div class="content-container clearfix">
<p>
<span class="reco-name">{{name}}</span>
</p>
<p class="price">
<span class="sale-price {{^price}}no-price{{/price}}">¥{{salePrice}}</span>
{{#price}}
<span class="market-price">¥{{.}}</span>
{{/price}}
<a class="detail" href="{{url}}">
查看详情
</a>
</p>
</div>
</div>
{{^}}
<div class="good-list clearfix">
{{# list}}
{{> common/good_info}}
{{/ list}}
</div>
{{/onlyOne}}
</div>
{{/ recommendation}}
... ...