推荐商品数目为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,
@@ -43,7 +56,7 @@ module.exports = function(flag) {
                                         isFew: true,
                                         isNew: false,
                                         url: '',
-                                        likeUrl: ''
+                                        likeUrl: '' 
                                     },
                                     {
                                         id: 2,

@@ -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>
-            <div class="good-list clearfix">
-                {{# list}}
-                    {{> common/good_info}}
-                {{/ list}}
-            </div>
+            {{# 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}}