fe / YOHOBUYPC · Commits

Go to a project

Authored by uedxwg
Commit 39c50e8592342dea885c4864f229a61c4282ee1a 1 parent 727314fb

hot-rank模块

Inline Side-by-side
Showing 4 changed files with 180 additions and 45 deletions
var $ = require('jquery'),
Hammer = require('yoho.hammer'),
lazyLoad = require('yoho.lazyload');
\ No newline at end of file
... ...
.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);
}
}
\ No newline at end of file
... ...
@import "new-arrival", "discount", "list", "detail", "suspend-cart";
\ No newline at end of file
@import "new-arrival", "discount", "list", "detail", "suspend-cart", "hot-rank";
\ No newline at end of file
... ...
... ... @@ -3,51 +3,41 @@
{{# headerBanner}}
{{> product/banner_swipe_and_single}}
{{/ 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>
</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>
</a>
</li>
</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}}
{{# 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>
{{/ 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>
</li>
{{/ list}}
</ul>
</div>
{{/ rankList}}
{{#if brand}}
<input id="brand" type="hidden" value={{brand}}>
... ...