Authored by xuqi

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

@@ -31,6 +31,19 @@ module.exports = function(flag) { @@ -31,6 +31,19 @@ module.exports = function(flag) {
31 }, 31 },
32 { 32 {
33 recommendation: { 33 recommendation: {
  34 + onlyOne: {
  35 + id: 1,
  36 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  37 + name: 'GAWS DIGI 丛林数码印花拼接卫衣看看两行文字以上能不能切字啦,样式应该不会乱的吧',
  38 + isLike: false,
  39 + price: 1268,
  40 + salePrice: 589,
  41 + isSale: true,
  42 + isFew: true,
  43 + isNew: false,
  44 + url: '',
  45 + likeUrl: ''
  46 + },
34 list: [ 47 list: [
35 { 48 {
36 id: 1, 49 id: 1,
@@ -63,7 +63,7 @@ exports.initAndroid = function() { @@ -63,7 +63,7 @@ exports.initAndroid = function() {
63 $('#wrapper').removeClass('no-android'); 63 $('#wrapper').removeClass('no-android');
64 //相关文章截取文字 64 //相关文章截取文字
65 ellipsis.init(); 65 ellipsis.init();
66 - $('.post-list').find('span').each(function() { 66 + $('.post-list span, .one-good .reco-name').each(function() {
67 this.mlellipsis(2); 67 this.mlellipsis(2);
68 }); 68 });
69 $('.brand-name').each(function() { 69 $('.brand-name').each(function() {
@@ -216,7 +216,7 @@ exports.initOther = function() { @@ -216,7 +216,7 @@ exports.initOther = function() {
216 216
217 //相关文章截取文字 217 //相关文章截取文字
218 ellipsis.init(); 218 ellipsis.init();
219 - $('.post-list').find('span').each(function() { 219 + $('.post-list span, .one-good .reco-name').each(function() {
220 this.mlellipsis(2); 220 this.mlellipsis(2);
221 }); 221 });
222 $('.brand-name').each(function() { 222 $('.brand-name').each(function() {
@@ -11,4 +11,61 @@ @@ -11,4 +11,61 @@
11 color: #b0b0b0; 11 color: #b0b0b0;
12 text-align: center; 12 text-align: center;
13 } 13 }
  14 +
  15 + .one-good {
  16 + padding-left: 15rem / $pxConvertRem;
  17 + padding-right: 30rem / $pxConvertRem;
  18 + .thumb {
  19 + height: 134rem / $pxConvertRem;
  20 + width: 96rem / $pxConvertRem;
  21 + float: left;
  22 + }
  23 +
  24 + .content-container {
  25 + height: 134rem / $pxConvertRem;
  26 + line-height: 1;
  27 + font-size: 24rem / $pxConvertRem;
  28 + padding-left: 120rem / $pxConvertRem;
  29 +
  30 + > p {
  31 + height: 50%;
  32 + line-height: 94rem / $pxConvertRem;
  33 + }
  34 +
  35 + span {
  36 + display: inline-block;
  37 + line-height: 24rem / $pxConvertRem;
  38 + }
  39 +
  40 + .price {
  41 + line-height: 47rem / $pxConvertRem;
  42 + }
  43 + }
  44 +
  45 + .sale-price {
  46 + color: #d62927;
  47 + line-height: 1.5;
  48 + }
  49 +
  50 + .sale-price.no-price {
  51 + color: #000;
  52 + }
  53 +
  54 + .market-price {
  55 + margin-left: 5rem / $pxConvertRem;
  56 + color: #b0b0b0;
  57 + text-decoration: line-through;
  58 + line-height: 1.5;
  59 + }
  60 +
  61 + .detail {
  62 + display: inline-block;
  63 + color: #000;
  64 + border: 1px solid;
  65 + border-radius: 2px;
  66 + float: right;
  67 + padding: 0 5px;
  68 + line-height: 1.5;
  69 + }
  70 + }
14 } 71 }
1 {{# recommendation}} 1 {{# recommendation}}
2 <div class="article-type-five clearfix"> 2 <div class="article-type-five clearfix">
3 <h2>相关推荐</h2> 3 <h2>相关推荐</h2>
  4 + {{# onlyOne}}
  5 + <div class="one-good">
  6 + <img class="lazy thumb" data-original="{{thumb}}" alt="">
  7 + <div class="content-container clearfix">
  8 + <p>
  9 + <span class="reco-name">{{name}}</span>
  10 + </p>
  11 + <p class="price">
  12 + <span class="sale-price {{^price}}no-price{{/price}}">¥{{salePrice}}</span>
  13 + {{#price}}
  14 + <span class="market-price">¥{{.}}</span>
  15 + {{/price}}
  16 + <a class="detail" href="{{url}}">
  17 + 查看详情
  18 + </a>
  19 + </p>
  20 + </div>
  21 + </div>
  22 + {{^}}
4 <div class="good-list clearfix"> 23 <div class="good-list clearfix">
5 {{# list}} 24 {{# list}}
6 {{> common/good_info}} 25 {{> common/good_info}}
7 {{/ list}} 26 {{/ list}}
8 </div> 27 </div>
  28 + {{/onlyOne}}
9 </div> 29 </div>
10 {{/ recommendation}} 30 {{/ recommendation}}