fe / YOHO-ACTIVITY-PHP · 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
  1 +var $ = require('jquery'),
  2 + Hammer = require('yoho.hammer'),
  3 + lazyLoad = require('yoho.lazyload');
  1 +.rank-main {
  2 + padding: (14rem / $pxConvertRem) 0 0 (30rem / $pxConvertRem);
  3 + background: #fff;
  4 +
  5 + li {
  6 + height: 230rem / $pxConvertRem;
  7 + overflow: hidden;
  8 +
  9 + .item-img {
  10 + float: left;
  11 + width: 150rem / $pxConvertRem;
  12 + height: 200rem / $pxConvertRem;
  13 + padding: (14rem / $pxConvertRem) 0;
  14 + line-height: 200rem / $pxConvertRem;
  15 + text-align: center;
  16 +
  17 + img {
  18 + max-width: 100%;
  19 + max-height: 100%;
  20 + vertical-align: middle;
  21 + }
  22 + }
  23 +
  24 + .item-content {
  25 + float: left;
  26 + width: 407rem / $pxConvertRem;
  27 + height: 213rem / $pxConvertRem;
  28 + margin: 0 0 0 (13rem / $pxConvertRem);
  29 + padding: (14rem / $pxConvertRem) 0 0 (30rem / $pxConvertRem);
  30 + border-top: 1px solid #e0e0e0;
  31 + overflow: hidden;
  32 +
  33 + .rank-icon {
  34 + display: block;
  35 + height: 45rem / $pxConvertRem;
  36 + width: 50rem / $pxConvertRem;
  37 + line-height: 50rem / $pxConvertRem;
  38 + text-align: center;
  39 + font-size: 22rem / $pxConvertRem;
  40 + color: #fff;
  41 + background: image-url("sale-icon/rank.png") no-repeat;
  42 + background-position: center top;
  43 + background-size: auto 100%;
  44 +
  45 + &.top {
  46 + background: image-url("sale-icon/rank-t.png") no-repeat;
  47 + background-position: center top;
  48 + background-size: 100%;
  49 + line-height: 58rem / $pxConvertRem;
  50 + }
  51 + }
  52 +
  53 + h2 {
  54 + margin: (15rem / $pxConvertRem) 0 0 !important;
  55 + padding: 0 !important;
  56 + width: 9.5rem;
  57 + line-height: 36rem / $pxConvertRem;
  58 + color: #444;
  59 + font-size: 28rem / $pxConvertRem;
  60 +
  61 + &.hasActive {
  62 + margin: (5rem / $pxConvertRem) 0 0 !important;
  63 + }
  64 + }
  65 +
  66 + p {
  67 + margin: 0 !important;
  68 + padding: 0 !important;
  69 + width: 9.5rem;
  70 + line-height: 36rem / $pxConvertRem;
  71 + font-size: 24rem / $pxConvertRem;
  72 + color: #d0021b;
  73 + text-overflow: ellipsis;
  74 + overflow: hidden;
  75 + white-space: nowrap;
  76 +
  77 + span {
  78 + text-decoration: line-through;
  79 + color: #b0b0b0;
  80 + margin-left: 10rem / $pxConvertRem;
  81 + }
  82 + }
  83 + }
  84 + }
  85 +
  86 + li:first-child {
  87 + .item-content {
  88 + border: none;
  89 + }
  90 + }
  91 +}
  92 +.goods-nav {
  93 + border-bottom: (2rem / $pxConvertRem) solid #e6e6e6;
  94 + height: 67rem / $pxConvertRem;
  95 + overflow: hidden;
  96 +
  97 + li {
  98 + float: left;
  99 + width: auto;
  100 + height: 67rem / $pxConvertRem;
  101 + line-height: 67rem / $pxConvertRem;
  102 + width: 145rem / $pxConvertRem;
  103 + text-align: center;
  104 + font-size: 28rem / $pxConvertRem;
  105 +
  106 + a {
  107 + display: inline-block;
  108 + padding: 0 (5rem / $pxConvertRem);
  109 + font-size: 28rem / $pxConvertRem;
  110 + color: #999;
  111 + height: 65rem / $pxConvertRem;
  112 + }
  113 + }
  114 +
  115 + li:first-child {
  116 + margin-left: 30rem / $pxConvertRem;
  117 + }
  118 +
  119 + li.focus {
  120 + a {
  121 + border-bottom: (4rem / $pxConvertRem) solid #000;
  122 + color: #000;
  123 + }
  124 + }
  125 +}
  126 +
  127 +.s-goods-nav {
  128 + overflow: hidden;
  129 +
  130 + li {
  131 + margin: 0 0 0 (50rem / $pxConvertRem);
  132 + width: auto;
  133 +
  134 + a {
  135 + padding: 0;
  136 + }
  137 + }
  138 +
  139 + li:first-child {
  140 + margin: 0 0 0 (39rem / $pxConvertRem);
  141 + }
  142 +}
1 -@import "new-arrival", "discount", "list", "detail", "suspend-cart";  
  1 +@import "new-arrival", "discount", "list", "detail", "suspend-cart", "hot-rank";
@@ -3,51 +3,41 @@ @@ -3,51 +3,41 @@
3 {{# headerBanner}} 3 {{# headerBanner}}
4 {{> product/banner_swipe_and_single}} 4 {{> product/banner_swipe_and_single}}
5 {{/ headerBanner}} 5 {{/ headerBanner}}
6 -  
7 - <ul id="list-nav" class="list-nav clearfix">  
8 - <li class="new active">  
9 - <a href="javascript:void(0);">  
10 - <span class="spanTest">最新</span>  
11 - <span class="iconfont cur">&#xe616;</span>  
12 - </a>  
13 - </li>  
14 - <li class="price">  
15 - <a href="javascript:void(0);">  
16 - <span class="spanTest">价格</span>  
17 - <span class="icon">  
18 - <i class="iconfont up">&#xe615;</i>  
19 - <i class="iconfont down cur">&#xe616;</i>  
20 - </span>  
21 - </a>  
22 - </li>  
23 - <li class="discount">  
24 - <a href="javascript:void(0);">  
25 - <span class="spanTest">折扣</span>  
26 - <span class="icon">  
27 - <i class="iconfont up">&#xe615;</i>  
28 - <i class="iconfont down cur">&#xe616;</i>  
29 - </span>  
30 - </a>  
31 - </li>  
32 - <li class="filter">  
33 - <a href="javascript:void(0);">  
34 - <span class="spanTest">筛选</span>  
35 - <span class="iconfont">&#xe613;</span>  
36 - </a>  
37 - </li>  
38 - </ul>  
39 -  
40 - <div id="goods-container" class="goods-container">  
41 - <div class="new-goods container clearfix">  
42 - {{# goods}}  
43 - {{> good}}  
44 - {{/ goods}}  
45 - </div>  
46 - <div class="price-goods container hide clearfix"></div>  
47 - <div class="discount-goods container hide clearfix"></div>  
48 -  
49 - {{> filter}} 6 + {{# listNav}}
  7 + <div class="s-goods-nav goods-nav">
  8 + <ul class="swiper-wrapper clearfix">
  9 + {{# list}}
  10 + <li class="swiper-slide nav-item" data-sort="{{sort}}">
  11 + <span>{{textCn}}</span>
  12 + </li>
  13 + {{/ list}}
  14 + </ul>
50 </div> 15 </div>
  16 + {{/ listNav}}
  17 +
  18 + {{# rankList}}
  19 + <div class="rank-main">
  20 + <ul>
  21 + {{# list}}
  22 + <li>
  23 + <a class="clearfix" href="{{url}}">
  24 + <div class="item-img">
  25 + <img class="lazy" data-original="{{img}}">
  26 + </div>
  27 + <div class="item-content">
  28 + <i class="rank-icon top">{{rank}}</i>
  29 + <h2 {{# active}}class="hasActive"{{/ active}}>{{title}}</h2>
  30 + {{# active}}
  31 + <p>{{.}}</p>
  32 + {{/ active}}
  33 + <p>{{sPrice}}<span>{{price}}</span></p>
  34 + </div>
  35 + </a>
  36 + </li>
  37 + {{/ list}}
  38 + </ul>
  39 + </div>
  40 + {{/ rankList}}
51 41
52 {{#if brand}} 42 {{#if brand}}
53 <input id="brand" type="hidden" value={{brand}}> 43 <input id="brand" type="hidden" value={{brand}}>