hot-rank模块

+var $ = require('jquery'),
+    Hammer = require('yoho.hammer'),
+    lazyLoad = require('yoho.lazyload');

+.rank-main {
+    padding: (14rem / $pxConvertRem) 0 0 (30rem / $pxConvertRem);
+    background: #fff;
+
+    li {
+        height: 230rem / $pxConvertRem;
+        overflow: hidden;
+
+        .item-img {
+            float: left;
+            width: 150rem / $pxConvertRem;
+            height: 200rem / $pxConvertRem;
+            padding: (14rem / $pxConvertRem) 0;
+            line-height: 200rem / $pxConvertRem;
+            text-align: center;
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+                vertical-align: middle;
+            }
+        }
+
+        .item-content {
+            float: left;
+            width: 407rem / $pxConvertRem;
+            height: 213rem / $pxConvertRem;
+            margin: 0 0 0 (13rem / $pxConvertRem);
+            padding: (14rem / $pxConvertRem) 0 0 (30rem / $pxConvertRem);
+            border-top: 1px solid #e0e0e0;
+            overflow: hidden;
+
+            .rank-icon {
+                display: block;
+                height: 45rem / $pxConvertRem;
+                width: 50rem / $pxConvertRem;
+                line-height: 50rem / $pxConvertRem;
+                text-align: center;
+                font-size: 22rem / $pxConvertRem;
+                color: #fff;
+                background: image-url("sale-icon/rank.png") no-repeat;
+                background-position: center top;
+                background-size: auto 100%;
+
+                &.top {
+                    background: image-url("sale-icon/rank-t.png") no-repeat;
+                    background-position: center top;
+                    background-size: 100%;
+                    line-height: 58rem / $pxConvertRem;
+                }
+            }
+
+            h2 {
+                margin: (15rem / $pxConvertRem) 0 0 !important;
+                padding: 0 !important;
+                width: 9.5rem;
+                line-height: 36rem / $pxConvertRem;
+                color: #444;
+                font-size: 28rem / $pxConvertRem;
+
+                &.hasActive {
+                    margin: (5rem / $pxConvertRem) 0 0 !important;
+                }
+            }
+
+            p {
+                margin: 0 !important;
+                padding: 0 !important;
+                width: 9.5rem;
+                line-height: 36rem / $pxConvertRem;
+                font-size: 24rem / $pxConvertRem;
+                color: #d0021b;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+
+                span {
+                    text-decoration: line-through;
+                    color: #b0b0b0;
+                    margin-left: 10rem / $pxConvertRem;
+                }
+            }
+        }
+    }
+
+    li:first-child {
+        .item-content {
+            border: none;
+        }
+    }
+}
+.goods-nav {
+    border-bottom: (2rem / $pxConvertRem) solid #e6e6e6;
+    height: 67rem / $pxConvertRem;
+    overflow: hidden;
+
+    li {
+        float: left;
+        width: auto;
+        height: 67rem / $pxConvertRem;
+        line-height: 67rem / $pxConvertRem;
+        width: 145rem / $pxConvertRem;
+        text-align: center;
+        font-size: 28rem / $pxConvertRem;
+
+        a {
+            display: inline-block;
+            padding: 0 (5rem / $pxConvertRem);
+            font-size: 28rem / $pxConvertRem;
+            color: #999;
+            height: 65rem / $pxConvertRem;
+        }
+    }
+
+    li:first-child {
+        margin-left: 30rem / $pxConvertRem;
+    }
+
+    li.focus {
+        a {
+            border-bottom: (4rem / $pxConvertRem) solid #000;
+            color: #000;
+        }
+    }
+}
+
+.s-goods-nav {
+    overflow: hidden;
+
+    li {
+        margin: 0 0 0 (50rem / $pxConvertRem);
+        width: auto;
+
+        a {
+            padding: 0;
+        }
+    }
+
+    li:first-child {
+        margin: 0 0 0 (39rem / $pxConvertRem);
+    }
+}

-@import "new-arrival", "discount", "list", "detail", "suspend-cart";
+@import "new-arrival", "discount", "list", "detail", "suspend-cart", "hot-rank";

@@ -3,51 +3,41 @@
 	{{# headerBanner}}
 	{{# headerBanner}}
 	{{> product/banner_swipe_and_single}}
 	{{> product/banner_swipe_and_single}}
 	{{/ headerBanner}}
 	{{/ headerBanner}}
-
-	<ul id="list-nav" class="list-nav clearfix">
-		<li class="new active">
-			<a href="javascript:void(0);">
-				<span class="spanTest">最新</span>
-				<span class="iconfont cur">&#xe616;</span>
-			</a>
-		</li>
-		<li class="price">
-			<a href="javascript:void(0);">
-				<span class="spanTest">价格</span>
-                <span class="icon">
-                    <i class="iconfont up">&#xe615;</i>
-                    <i class="iconfont down cur">&#xe616;</i>
-                </span>
-			</a>
+	{{# listNav}}
+	<div class="s-goods-nav goods-nav">
+	    <ul class="swiper-wrapper clearfix">
+	        {{# list}}
+	        <li class="swiper-slide nav-item" data-sort="{{sort}}">
+	            <span>{{textCn}}</span>
 	        </li>
 	        </li>
-		<li class="discount">
-			<a href="javascript:void(0);">
-				<span class="spanTest">折扣</span>
-                <span class="icon">
-                    <i class="iconfont up">&#xe615;</i>
-                    <i class="iconfont down cur">&#xe616;</i>
-                </span>
-			</a>
-		</li>
-		<li class="filter">
-			<a href="javascript:void(0);">
-				<span class="spanTest">筛选</span>
-				<span class="iconfont">&#xe613;</span>
+	        {{/ list}}
+	    </ul>
+	</div>
+	{{/ listNav}}
+
+	{{# rankList}}
+    <div class="rank-main">
+        <ul>
+            {{# list}}
+            <li>
+                <a class="clearfix" href="{{url}}">
+                    <div class="item-img">
+                        <img class="lazy" data-original="{{img}}">
+                    </div>
+                    <div class="item-content">
+                        <i class="rank-icon top">{{rank}}</i>
+                        <h2 {{# active}}class="hasActive"{{/ active}}>{{title}}</h2>
+                        {{# active}}
+                        <p>{{.}}</p>
+                        {{/ active}}
+                        <p>{{sPrice}}<span>{{price}}</span></p>
+                    </div>
                 </a>
                 </a>
             </li>
             </li>
+            {{/ list}}
         </ul>
         </ul>
-
-	<div id="goods-container" class="goods-container">
-		<div class="new-goods container clearfix">
-			{{# goods}}
-			{{> good}}
-			{{/ goods}}
-		</div>
-		<div class="price-goods container hide clearfix"></div>
-		<div class="discount-goods container hide clearfix"></div>
-
-		{{> filter}}
     </div>
     </div>
+    {{/ rankList}}
 
 
 	{{#if brand}}
 	{{#if brand}}
 	<input id="brand" type="hidden" value={{brand}}>
 	<input id="brand" type="hidden" value={{brand}}>