Showing
5 changed files
with
154 additions
and
3 deletions
@@ -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; |
static/sass/home/_fresh-only.scss
0 → 100644
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> |
-
Please register or login to post a comment