Showing
4 changed files
with
98 additions
and
8 deletions
| @@ -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, |
| @@ -43,7 +56,7 @@ module.exports = function(flag) { | @@ -43,7 +56,7 @@ module.exports = function(flag) { | ||
| 43 | isFew: true, | 56 | isFew: true, |
| 44 | isNew: false, | 57 | isNew: false, |
| 45 | url: '', | 58 | url: '', |
| 46 | - likeUrl: '' | 59 | + likeUrl: '' |
| 47 | }, | 60 | }, |
| 48 | { | 61 | { |
| 49 | id: 2, | 62 | id: 2, |
| @@ -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 | - <div class="good-list clearfix"> | ||
| 5 | - {{# list}} | ||
| 6 | - {{> common/good_info}} | ||
| 7 | - {{/ list}} | ||
| 8 | - </div> | 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 | + {{^}} | ||
| 23 | + <div class="good-list clearfix"> | ||
| 24 | + {{# list}} | ||
| 25 | + {{> common/good_info}} | ||
| 26 | + {{/ list}} | ||
| 27 | + </div> | ||
| 28 | + {{/onlyOne}} | ||
| 9 | </div> | 29 | </div> |
| 10 | {{/ recommendation}} | 30 | {{/ recommendation}} |
-
Please register or login to post a comment