fe / yoho-blk · Commits

Go to a project

Authored by biao
Commit ea3c4d72ad25e040f2f29c6b438cb81af837401d 1 parent 86e9c08b

fix channel issue

Inline Side-by-side
Showing 11 changed files with 60 additions and 40 deletions
@@ -33,13 +33,13 @@ const getContent = () => { @@ -33,13 +33,13 @@ const getContent = () => {
33 { 33 {
34 brandsAd: [ 34 brandsAd: [
35 { 35 {
36 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 36 + img: '//placehold.it/{width}x{height}',
37 name: 'GINZA', 37 name: 'GINZA',
38 des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场', 38 des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
39 btnText: 'shop now' 39 btnText: 'shop now'
40 }, 40 },
41 { 41 {
42 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 42 + img: '//placehold.it/{width}x{height}',
43 name: 'STUSSY', 43 name: 'STUSSY',
44 des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场', 44 des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
45 btnText: 'shop now' 45 btnText: 'shop now'
@@ -51,24 +51,24 @@ const getContent = () => { @@ -51,24 +51,24 @@ const getContent = () => {
51 floorEn: 'NEW ARRIVALS', 51 floorEn: 'NEW ARRIVALS',
52 newArrivals: [ 52 newArrivals: [
53 { 53 {
54 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 54 + img: '//placehold.it/{width}x{height}',
55 name: 'STUSSY', 55 name: 'STUSSY',
56 link: '/', 56 link: '/',
57 smallImg: true 57 smallImg: true
58 }, 58 },
59 { 59 {
60 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 60 + img: '//placehold.it/{width}x{height}',
61 name: 'DAILY PAPER', 61 name: 'DAILY PAPER',
62 link: '/', 62 link: '/',
63 even: true 63 even: true
64 }, 64 },
65 { 65 {
66 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 66 + img: '//placehold.it/{width}x{height}',
67 name: 'BAPE', 67 name: 'BAPE',
68 link: '/' 68 link: '/'
69 }, 69 },
70 { 70 {
71 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 71 + img: '//placehold.it/{width}x{height}',
72 name: 'SUPREME', 72 name: 'SUPREME',
73 link: '/', 73 link: '/',
74 even: true, 74 even: true,
@@ -83,7 +83,7 @@ const getContent = () => { @@ -83,7 +83,7 @@ const getContent = () => {
83 { 83 {
84 big: [ 84 big: [
85 { 85 {
86 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 86 + img: '//placehold.it/{width}x{height}',
87 link: '' 87 link: ''
88 } 88 }
89 ], 89 ],
@@ -102,17 +102,17 @@ const getContent = () => { @@ -102,17 +102,17 @@ const getContent = () => {
102 { 102 {
103 big: [ 103 big: [
104 { 104 {
105 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 105 + img: '//placehold.it/{width}x{height}',
106 link: '' 106 link: ''
107 } 107 }
108 ], 108 ],
109 small: [ 109 small: [
110 { 110 {
111 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 111 + img: '//placehold.it/{width}x{height}',
112 link: '' 112 link: ''
113 }, 113 },
114 { 114 {
115 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 115 + img: '//placehold.it/{width}x{height}',
116 link: '' 116 link: ''
117 } 117 }
118 ], 118 ],
@@ -122,17 +122,17 @@ const getContent = () => { @@ -122,17 +122,17 @@ const getContent = () => {
122 { 122 {
123 big: [ 123 big: [
124 { 124 {
125 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 125 + img: '//placehold.it/{width}x{height}',
126 link: '' 126 link: ''
127 } 127 }
128 ], 128 ],
129 small: [ 129 small: [
130 { 130 {
131 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 131 + img: '//placehold.it/{width}x{height}',
132 link: '' 132 link: ''
133 }, 133 },
134 { 134 {
135 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 135 + img: '//placehold.it/{width}x{height}',
136 link: '' 136 link: ''
137 } 137 }
138 ] 138 ]
@@ -140,17 +140,17 @@ const getContent = () => { @@ -140,17 +140,17 @@ const getContent = () => {
140 { 140 {
141 big: [ 141 big: [
142 { 142 {
143 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 143 + img: '//placehold.it/{width}x{height}',
144 link: '' 144 link: ''
145 } 145 }
146 ], 146 ],
147 small: [ 147 small: [
148 { 148 {
149 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 149 + img: '//placehold.it/{width}x{height}',
150 link: '' 150 link: ''
151 }, 151 },
152 { 152 {
153 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 153 + img: '//placehold.it/{width}x{height}',
154 link: '' 154 link: ''
155 } 155 }
156 ], 156 ],
@@ -163,28 +163,28 @@ const getContent = () => { @@ -163,28 +163,28 @@ const getContent = () => {
163 floorEn: 'STYLE ICON', 163 floorEn: 'STYLE ICON',
164 styleIcon: [ 164 styleIcon: [
165 { 165 {
166 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 166 + img: '//placehold.it/{width}x{height}',
167 name: 'COTE&CIEL', 167 name: 'COTE&CIEL',
168 des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生', 168 des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
169 link: '/ ', 169 link: '/ ',
170 btnText: '去看看' 170 btnText: '去看看'
171 }, 171 },
172 { 172 {
173 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 173 + img: '//placehold.it/{width}x{height}',
174 name: 'COTE&CIEL', 174 name: 'COTE&CIEL',
175 des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生', 175 des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
176 link: '/ ', 176 link: '/ ',
177 btnText: '去看看' 177 btnText: '去看看'
178 }, 178 },
179 { 179 {
180 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 180 + img: '//placehold.it/{width}x{height}',
181 name: 'COTE&CIEL', 181 name: 'COTE&CIEL',
182 des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生', 182 des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
183 link: '/ ', 183 link: '/ ',
184 btnText: '去看看' 184 btnText: '去看看'
185 }, 185 },
186 { 186 {
187 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 187 + img: '//placehold.it/{width}x{height}',
188 name: 'COTE&CIEL', 188 name: 'COTE&CIEL',
189 des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生', 189 des: '这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生这都什么时代了？短发女生',
190 link: '/ ', 190 link: '/ ',
@@ -194,7 +194,7 @@ const getContent = () => { @@ -194,7 +194,7 @@ const getContent = () => {
194 }, 194 },
195 { 195 {
196 adBanner: { 196 adBanner: {
197 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 197 + img: '//placehold.it/{width}x{height}',
198 link: '' 198 link: ''
199 } 199 }
200 }, 200 },
@@ -203,28 +203,28 @@ const getContent = () => { @@ -203,28 +203,28 @@ const getContent = () => {
203 floorEn: 'EDITORIAL', 203 floorEn: 'EDITORIAL',
204 editorial: { 204 editorial: {
205 big: { 205 big: {
206 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 206 + img: '//placehold.it/{width}x{height}',
207 link: '' 207 link: ''
208 }, 208 },
209 small: [ 209 small: [
210 { 210 {
211 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 211 + img: '//placehold.it/{width}x{height}',
212 link: '/', 212 link: '/',
213 bottomSpace: true, 213 bottomSpace: true,
214 rightSpace: true 214 rightSpace: true
215 }, 215 },
216 { 216 {
217 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 217 + img: '//placehold.it/{width}x{height}',
218 link: '/', 218 link: '/',
219 bottomSpace: true 219 bottomSpace: true
220 }, 220 },
221 { 221 {
222 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 222 + img: '//placehold.it/{width}x{height}',
223 link: '/', 223 link: '/',
224 rightSpace: true 224 rightSpace: true
225 }, 225 },
226 { 226 {
227 - img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450', 227 + img: '//placehold.it/{width}x{height}',
228 link: '' 228 link: ''
229 } 229 }
230 ] 230 ]
1 <div class="home-page"> 1 <div class="home-page">
  2 + <div class="top-slider-container">
2 {{# content}} 3 {{# content}}
3 {{#if slider}} 4 {{#if slider}}
4 {{> slider}} 5 {{> slider}}
5 {{/if}} 6 {{/if}}
6 {{/ content}} 7 {{/ content}}
7 - <div class="main-container"> 8 + </div>
  9 + <div class="main-container clearfix">
8 {{# content}} 10 {{# content}}
9 {{#if brandsAd}} 11 {{#if brandsAd}}
10 {{> ad}} 12 {{> ad}}
1 <div class="ad-banner"> 1 <div class="ad-banner">
2 {{#adBanner}} 2 {{#adBanner}}
3 - <img src="{{image img 864 120}}" alt=""> 3 + <img class="lazy" data-original="{{image img 864 120}}" alt="">
4 {{/adBanner}} 4 {{/adBanner}}
5 </div> 5 </div>
1 -<div class="ad-container"> 1 +<div class="ad-container clearfix">
2 {{# brandsAd}} 2 {{# brandsAd}}
3 <div class="ad {{#if @first}}first{{/if}}"> 3 <div class="ad {{#if @first}}first{{/if}}">
4 - <img src="{{image img 165 165}}" alt=""> 4 + <img class="lazy" data-original="{{image img 165 165}}" alt="">
5 {{> brand-text-box}} 5 {{> brand-text-box}}
6 </div> 6 </div>
7 {{/ brandsAd}} 7 {{/ brandsAd}}
1 {{# classicBrands}} 1 {{# classicBrands}}
2 <div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}"> 2 <div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
3 {{# big}} 3 {{# big}}
4 - <img class="big-img" src="{{image img 426 250}}" alt="big-img"> 4 + <img class="big-img lazy" data-original="{{image img 426 250}}" alt="big-img">
5 {{/ big}} 5 {{/ big}}
6 {{# small}} 6 {{# small}}
7 - <img class="small-img {{#if @first}}first{{/if}}" src="{{image img 213 213}}" alt="big-img"> 7 + <img class="small-img lazy {{#if @first}}first{{/if}}" data-original="{{image img 213 213}}" alt="big-img">
8 {{/ small}} 8 {{/ small}}
9 </div> 9 </div>
10 {{/ classicBrands}} 10 {{/ classicBrands}}
@@ -4,12 +4,12 @@ @@ -4,12 +4,12 @@
4 {{# editorial}} 4 {{# editorial}}
5 <div class="news left"> 5 <div class="news left">
6 {{# big}} 6 {{# big}}
7 - <img src="{{image img 288 375}}" alt=""> 7 + <img class="lazy" data-original="{{image img 288 375}}" alt="">
8 {{/ big}} 8 {{/ big}}
9 </div> 9 </div>
10 <div class="news right"> 10 <div class="news right">
11 {{# small}} 11 {{# small}}
12 - <img class="{{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" src="{{image img 260 176}}" alt=""> 12 + <img class="lazy {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image img 260 176}}" alt="">
13 {{/ small}} 13 {{/ small}}
14 </div> 14 </div>
15 {{/ editorial}} 15 {{/ editorial}}
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 {{# newArrivals}} 4 {{# newArrivals}}
5 <div class="arrival-item {{#if smallImg}}small-img{{/if}} {{#if @last}}last{{^}}normal{{/if}}"> 5 <div class="arrival-item {{#if smallImg}}small-img{{/if}} {{#if @last}}last{{^}}normal{{/if}}">
6 {{#if even}} 6 {{#if even}}
7 - <img src="{{image img 245 370}}" alt=""> 7 + <img class="lazy" data-original="{{image img 245 370}}" alt="">
8 <div class="brand-name"> 8 <div class="brand-name">
9 <span class="bottom">{{name}}</span> 9 <span class="bottom">{{name}}</span>
10 </div> 10 </div>
@@ -12,7 +12,7 @@ @@ -12,7 +12,7 @@
12 <div class="brand-name"> 12 <div class="brand-name">
13 <span class="top">{{name}}</span> 13 <span class="top">{{name}}</span>
14 </div> 14 </div>
15 - <img src="{{image img 245 370}}" alt=""> 15 + <img class="lazy" data-original="{{image img 245 370}}" alt="">
16 {{/if}} 16 {{/if}}
17 </div> 17 </div>
18 {{/ newArrivals}} 18 {{/ newArrivals}}
  1 +/**
  2 + * 频道页
  3 + * @author: 赵彪<bill.zhao@yoho.cn>
  4 + * @date: 2016/6/24
  5 + */
  6 +
  7 +var lazyLoad = require('yoho-jquery-lazyload');
  8 +
1 require('../plugins/slider'); 9 require('../plugins/slider');
  10 +
  11 +lazyLoad($('img.lazy'));
  12 +
2 $('.slide-container').slider(); 13 $('.slide-container').slider();
3 14
4 $('.card').mouseenter(function() { 15 $('.card').mouseenter(function() {
@@ -45,8 +45,8 @@ var $ = require('yoho-jquery'), @@ -45,8 +45,8 @@ var $ = require('yoho-jquery'),
45 _createOrient: function() { 45 _createOrient: function() {
46 46
47 var orientHtml = '<div class="slide-switch">' + 47 var orientHtml = '<div class="slide-switch">' +
48 - '<a class="prev" href="javascript:;"><span class="iconfont">&#xe609;</span></a>' +  
49 - '<a class="next" href="javascript:;"><span class="iconfont">&#xe608;</span></a>' + 48 + '<a class="prev" href="javascript:;"><span class="iconfont">&#xe607;</span></a>' +
  49 + '<a class="next" href="javascript:;"><span class="iconfont">&#xe606;</span></a>' +
50 '</div>'; 50 '</div>';
51 51
52 if (this.$element.find('.slide-switch').length > 0) { 52 if (this.$element.find('.slide-switch').length > 0) {
1 .home-page { 1 .home-page {
  2 + $sliderHeight: 450px;
  3 +
2 width: 1150px; 4 width: 1150px;
3 margin: 10px auto 0; 5 margin: 10px auto 0;
4 6
  7 + .top-slider-container {
  8 + height: $sliderHeight;
  9 + }
  10 +
5 .slide-container { 11 .slide-container {
6 position: absolute; 12 position: absolute;
7 left: 0; 13 left: 0;
8 right: 0; 14 right: 0;
9 - height: 450px; 15 + height: $sliderHeight;
10 } 16 }
11 17
12 .slide-thumb-container { 18 .slide-thumb-container {
@@ -485,7 +491,7 @@ @@ -485,7 +491,7 @@
485 491
486 .main-container { 492 .main-container {
487 position: relative; 493 position: relative;
488 - top: 390px; 494 + top: -60px;
489 width: 864px; 495 width: 864px;
490 margin: 0 auto; 496 margin: 0 auto;
491 box-sizing: border-box; 497 box-sizing: border-box;
@@ -19,6 +19,7 @@ @@ -19,6 +19,7 @@
19 height: $textHeight; 19 height: $textHeight;
20 text-align: center; 20 text-align: center;
21 font-size: 12px; 21 font-size: 12px;
  22 + font-weight: normal;
22 23
23 span { 24 span {
24 @extend .cursor-pointer; 25 @extend .cursor-pointer;