Authored by biao

fix channel issue

... ... @@ -33,13 +33,13 @@ const getContent = () => {
{
brandsAd: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'GINZA',
des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
btnText: 'shop now'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'STUSSY',
des: '藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场藤原浩于银座停车场',
btnText: 'shop now'
... ... @@ -51,24 +51,24 @@ const getContent = () => {
floorEn: 'NEW ARRIVALS',
newArrivals: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'STUSSY',
link: '/',
smallImg: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'DAILY PAPER',
link: '/',
even: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'BAPE',
link: '/'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'SUPREME',
link: '/',
even: true,
... ... @@ -83,7 +83,7 @@ const getContent = () => {
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
}
],
... ... @@ -102,17 +102,17 @@ const getContent = () => {
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
}
],
... ... @@ -122,17 +122,17 @@ const getContent = () => {
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
}
]
... ... @@ -140,17 +140,17 @@ const getContent = () => {
{
big: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
}
],
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
}
],
... ... @@ -163,28 +163,28 @@ const getContent = () => {
floorEn: 'STYLE ICON',
styleIcon: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'COTE&CIEL',
des: '这都什么时代了?短发女生这都什么时代了?短发女生这都什么时代了?短发女生这都什么时代了?短发女生',
link: '/ ',
btnText: '去看看'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'COTE&CIEL',
des: '这都什么时代了?短发女生这都什么时代了?短发女生这都什么时代了?短发女生这都什么时代了?短发女生',
link: '/ ',
btnText: '去看看'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'COTE&CIEL',
des: '这都什么时代了?短发女生这都什么时代了?短发女生这都什么时代了?短发女生这都什么时代了?短发女生',
link: '/ ',
btnText: '去看看'
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
name: 'COTE&CIEL',
des: '这都什么时代了?短发女生这都什么时代了?短发女生这都什么时代了?短发女生这都什么时代了?短发女生',
link: '/ ',
... ... @@ -194,7 +194,7 @@ const getContent = () => {
},
{
adBanner: {
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
}
},
... ... @@ -203,28 +203,28 @@ const getContent = () => {
floorEn: 'EDITORIAL',
editorial: {
big: {
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
},
small: [
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: '/',
bottomSpace: true,
rightSpace: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: '/',
bottomSpace: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: '/',
rightSpace: true
},
{
img: '//img10.static.yhbimg.com/yhb-img01/2016/06/23/13/01ebff30179db84975c42a4f3c8b1f4d44.jpg?imageView2/1/w/1150/h/450',
img: '//placehold.it/{width}x{height}',
link: ''
}
]
... ...
<div class="home-page">
<div class="top-slider-container">
{{# content}}
{{#if slider}}
{{> slider}}
{{/if}}
{{/ content}}
<div class="main-container">
</div>
<div class="main-container clearfix">
{{# content}}
{{#if brandsAd}}
{{> ad}}
... ...
<div class="ad-banner">
{{#adBanner}}
<img src="{{image img 864 120}}" alt="">
<img class="lazy" data-original="{{image img 864 120}}" alt="">
{{/adBanner}}
</div>
... ...
<div class="ad-container">
<div class="ad-container clearfix">
{{# brandsAd}}
<div class="ad {{#if @first}}first{{/if}}">
<img src="{{image img 165 165}}" alt="">
<img class="lazy" data-original="{{image img 165 165}}" alt="">
{{> brand-text-box}}
</div>
{{/ brandsAd}}
... ...
{{# classicBrands}}
<div class="brand-img-box {{#if right}}right{{/if}} {{#if bottomSpace}}mb10{{/if}}">
{{# big}}
<img class="big-img" src="{{image img 426 250}}" alt="big-img">
<img class="big-img lazy" data-original="{{image img 426 250}}" alt="big-img">
{{/ big}}
{{# small}}
<img class="small-img {{#if @first}}first{{/if}}" src="{{image img 213 213}}" alt="big-img">
<img class="small-img lazy {{#if @first}}first{{/if}}" data-original="{{image img 213 213}}" alt="big-img">
{{/ small}}
</div>
{{/ classicBrands}}
... ...
... ... @@ -4,12 +4,12 @@
{{# editorial}}
<div class="news left">
{{# big}}
<img src="{{image img 288 375}}" alt="">
<img class="lazy" data-original="{{image img 288 375}}" alt="">
{{/ big}}
</div>
<div class="news right">
{{# small}}
<img class="{{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" src="{{image img 260 176}}" alt="">
<img class="lazy {{#if bottomSpace}}bottom-space{{/if}} {{#if rightSpace}}right-space{{/if}}" data-original="{{image img 260 176}}" alt="">
{{/ small}}
</div>
{{/ editorial}}
... ...
... ... @@ -4,7 +4,7 @@
{{# newArrivals}}
<div class="arrival-item {{#if smallImg}}small-img{{/if}} {{#if @last}}last{{^}}normal{{/if}}">
{{#if even}}
<img src="{{image img 245 370}}" alt="">
<img class="lazy" data-original="{{image img 245 370}}" alt="">
<div class="brand-name">
<span class="bottom">{{name}}</span>
</div>
... ... @@ -12,7 +12,7 @@
<div class="brand-name">
<span class="top">{{name}}</span>
</div>
<img src="{{image img 245 370}}" alt="">
<img class="lazy" data-original="{{image img 245 370}}" alt="">
{{/if}}
</div>
{{/ newArrivals}}
... ...
/**
* 频道页
* @author: 赵彪<bill.zhao@yoho.cn>
* @date: 2016/6/24
*/
var lazyLoad = require('yoho-jquery-lazyload');
require('../plugins/slider');
lazyLoad($('img.lazy'));
$('.slide-container').slider();
$('.card').mouseenter(function() {
... ...
... ... @@ -45,8 +45,8 @@ var $ = require('yoho-jquery'),
_createOrient: function() {
var orientHtml = '<div class="slide-switch">' +
'<a class="prev" href="javascript:;"><span class="iconfont">&#xe609;</span></a>' +
'<a class="next" href="javascript:;"><span class="iconfont">&#xe608;</span></a>' +
'<a class="prev" href="javascript:;"><span class="iconfont">&#xe607;</span></a>' +
'<a class="next" href="javascript:;"><span class="iconfont">&#xe606;</span></a>' +
'</div>';
if (this.$element.find('.slide-switch').length > 0) {
... ...
.home-page {
$sliderHeight: 450px;
width: 1150px;
margin: 10px auto 0;
.top-slider-container {
height: $sliderHeight;
}
.slide-container {
position: absolute;
left: 0;
right: 0;
height: 450px;
height: $sliderHeight;
}
.slide-thumb-container {
... ... @@ -485,7 +491,7 @@
.main-container {
position: relative;
top: 390px;
top: -60px;
width: 864px;
margin: 0 auto;
box-sizing: border-box;
... ...
... ... @@ -19,6 +19,7 @@
height: $textHeight;
text-align: center;
font-size: 12px;
font-weight: normal;
span {
@extend .cursor-pointer;
... ...