Authored by 王水玲

首页新人专享模块添加

@@ -14,12 +14,13 @@ var $ = require('jquery'), @@ -14,12 +14,13 @@ var $ = require('jquery'),
14 recommendSwiper, 14 recommendSwiper,
15 hotBrandsSwiper, 15 hotBrandsSwiper,
16 trendTopicSwiper, 16 trendTopicSwiper,
17 - goodsSwiper; 17 + goodsSwiper,
  18 + freshSwiper;
18 19
19 var start = 0, 20 var start = 0,
20 swiperClass, 21 swiperClass,
21 $logotrans = $('.home-header .logo'), 22 $logotrans = $('.home-header .logo'),
22 - $choseArea = $('.side-nav ul'), 23 + $choseArea = $('.side-nav ul'),
23 openSideNav = false, 24 openSideNav = false,
24 isen = true; 25 isen = true;
25 26
@@ -145,6 +146,15 @@ if ($('.trend-topic-swiper').find('li').size() > 1) { @@ -145,6 +146,15 @@ if ($('.trend-topic-swiper').find('li').size() > 1) {
145 }); 146 });
146 } 147 }
147 148
  149 +// 新人专享轮播
  150 +if ($('.fresh-list-swiper').find('li').size() > 1) {
  151 + freshSwiper = new Swiper('.fresh-list-swiper', {
  152 + grabCursor: true,
  153 + slidesPerView: 'auto',
  154 + slideElement: 'li'
  155 + });
  156 +}
  157 +
148 // 潮流上装/经典裤装等轮播 158 // 潮流上装/经典裤装等轮播
149 $('.category-swiper').each(function(i, index) { 159 $('.category-swiper').each(function(i, index) {
150 swiperClass = 'category-swiper' + i; 160 swiperClass = 'category-swiper' + i;
  1 +.fresh-swiper {
  2 + position: relative;
  3 + height: 200rem / $pxConvertRem;
  4 + overflow: hidden;
  5 + ul {
  6 + li {
  7 + float: left;
  8 + width: 100%;
  9 + a, img {
  10 + display: block;
  11 + width: 100%;
  12 + height: 100%;
  13 + }
  14 + }
  15 + }
  16 + .swiper-pagination {
  17 + position: absolute;
  18 + left: 0;
  19 + right: 0;
  20 + bottom: 20rem / $pxConvertRem;
  21 + text-align: center;
  22 + .pagination-inner {
  23 + display: inline-block;
  24 + span {
  25 + display: inline-block;
  26 + width: 14rem / $pxConvertRem;
  27 + height: 14rem / $pxConvertRem;
  28 + background: #fff;
  29 + opacity: 0.5;
  30 + margin: 0 (9rem / $pxConvertRem);
  31 + border-radius: 50%;
  32 + }
  33 + span.swiper-active-switch {
  34 + opacity: 1;
  35 + }
  36 + }
  37 + }
  38 +}
  39 +
  40 +.fresh-list-swiper {
  41 + overflow: hidden;
  42 +
  43 + ul {
  44 + box-sizing: border-box;
  45 + }
  46 +
  47 + li {
  48 + float:left;
  49 + width:240rem / $pxConvertRem;
  50 + margin: (20rem / $pxConvertRem) (10rem / $pxConvertRem) 0 (10rem / $pxConvertRem);
  51 +
  52 + &:first-child {
  53 + margin-left: 20rem / $pxConvertRem;
  54 + }
  55 +
  56 + &:last-child {
  57 + margin-right: 20rem / $pxConvertRem;
  58 + }
  59 +
  60 + .img-box {
  61 + height: 100%;
  62 + height:320rem / $pxConvertRem;
  63 + text-align: center;
  64 + img {
  65 + width: 100%;
  66 + height: 100%;
  67 + vertical-align: middle;
  68 + }
  69 + }
  70 +
  71 + .fresh-info {
  72 + font-size: 22px / $pxConvertRem;
  73 +
  74 + .fresh-name a{
  75 + display:block;
  76 + overflow: hidden;
  77 + text-overflow: ellipsis;
  78 + width: 100%;
  79 + white-space: nowrap;
  80 + color: #444;
  81 + line-height: 48rem / $pxConvertRem;
  82 +
  83 + }
  84 +
  85 + .cur-price {
  86 + color: #d62927;
  87 + }
  88 +
  89 + .old-price {
  90 + margin: 0 0 0 (10rem / $pxConvertRem);
  91 + color: #b0b0b0;
  92 + text-decoration: line-through;
  93 + }
  94 +
  95 + .fresh-icon {
  96 + background: #d62927;
  97 + width: 100rem / $pxConvertRem;
  98 + height: 33 / $pxConvertRem;
  99 + display: block;
  100 + margin: (8rem / $pxConvertRem) auto 0 auto;
  101 + color: #fff;
  102 + text-align: center;
  103 + border-radius: 40rem / $pxConvertRem;
  104 + line-height: 37rem / $pxConvertRem;
  105 + }
  106 + }
  107 + }
  108 +}
1 @import "header-download", "banner-top","banner-center","banner-bottom", "side-nav", "floor-header", "hot-brands", "fine-brands", "creative-life", "plus-star", "maybe-like", 1 @import "header-download", "banner-top","banner-center","banner-bottom", "side-nav", "floor-header", "hot-brands", "fine-brands", "creative-life", "plus-star", "maybe-like",
2 "icons-enter","trendsetter-collocation", 2 "icons-enter","trendsetter-collocation",
3 -"trend-topics","goods-category","hot-brands", "hot-category", "home-header", "thumb-row"; 3 +"trend-topics","goods-category","hot-brands", "hot-category", "home-header", "thumb-row", "fresh-only";
4 4
5 .mobile-container{ 5 .mobile-container{
6 width: 100%; 6 width: 100%;
@@ -39,6 +39,10 @@ @@ -39,6 +39,10 @@
39 {{# goodsCategory}} 39 {{# goodsCategory}}
40 {{> home/goods_category}} 40 {{> home/goods_category}}
41 {{/ goodsCategory}} 41 {{/ goodsCategory}}
  42 + {{! 新人专享}}
  43 + {{# freshOnly}}
  44 + {{> home/fresh_only}}
  45 + {{/ freshOnly}}
42 {{! 新入住品牌/品味生活/创意生活}} 46 {{! 新入住品牌/品味生活/创意生活}}
43 {{# creativeLife}} 47 {{# creativeLife}}
44 {{> home/creative_life}} 48 {{> home/creative_life}}
  1 +{{> home/floor_header_more}}
  2 +<div class="fresh-only">
  3 + {{# big_image}}
  4 + <div class="fresh-swiper">
  5 + <a href="{{url}}">
  6 + <img class="lazy" data-original="{{img}}" alt="{{title}}">
  7 + </a>
  8 + </div>
  9 + {{/ big_image}}
  10 + <div class="fresh-list-swiper">
  11 + <ul class="clearfix swiper-wrapper">
  12 + {{# list}}
  13 + <li class="swiper-slide">
  14 + <div class="img-box">
  15 + <a href="{{url}}">
  16 + <img class="lazy" data-original="{{img}}" alt="">
  17 + </a>
  18 + </div>
  19 + <div class="fresh-info">
  20 + <p class="fresh-name"><a href="{{url}}">{{title}}</a></p>
  21 + <p class="price"><span class="cur-price">{{curPrice}}</span><span class="old-price">{{oldPrice}}<span></p>
  22 + <span class="fresh-icon">新人价</span>
  23 + </div>
  24 + </li>
  25 + {{/ list}}
  26 + </ul>
  27 + </div>
  28 +
  29 +</div>