fe / YOHOBUYPC · Commits

Go to a project

Authored by unknown
Commit 81ccd868b156b1776d363a22c76766f6485c5beb 1 parent 49503d94

girls前两部分

Inline Side-by-side
Showing 13 changed files with 586 additions and 79 deletions
{{> layout/header}}
<div class="home-page yoho-page">
<div class="home-page yoho-page" data-page="boys">
{{# boy}}
{{! 头部banner}}
{{# slide}}
<div class="slide-container">
<div class="big-slide">
<ul>
{{# bigSlide}}
<li>
<a href="{{href}}">
<img class="lazy" data-original="{{img}}" alt="">
</a>
</li>
{{/ bigSlide}}
</ul>
<div class="slide-switch">
<a class="prev" href="javascript:;">
<span class="iconfont">&#xe60c;</span>
</a>
<a class="next" href="javascript:;">
<span class="iconfont">&#xe60b;</span>
</a>
</div>
</div>
{{#if smallSlide}}
<div class="small-slide">
<ul class="clearfix">
{{# smallSlide}}
<li>
<a href="{{href}}"></a>
<img src="{{img}}" alt="">
</li>
{{/ smallSlide}}
</ul>
</div>
{{/if}}
</div>
{{>index/slide-banner}}
{{/ slide}}
{{! 新品速报}}
... ... @@ -70,7 +37,7 @@
{{/ newReport}}
{{! 优选品牌}}
{{# preferenceBrand}}
{{# preferenceBrands}}
<div class="preference-brand">
{{> index/floor-header}}
<div class="img-brand">
... ... @@ -94,7 +61,7 @@
</div>
<div class="logo-brand"></div>
</div>
{{/ preferenceBrand}}
{{/ preferenceBrands}}
{{! 单品/广告}}
{{# singlehot}}
... ...
{{> layout/header}}
<div class="home-page yoho-page">
girls
<div class="home-page yoho-page" data-page="girls">
{{# girl}}
{{! 头部banner}}
{{# debrisSlider}}
<div class="debris-slider clearfix">
<div class="left-col col">
{{# left}}
<a href="{{href}}">
<img class="lazy" data-original="{{img}}">
</a>
{{/ left}}
</div>
<div class="center-col col">
<ul class="slide-wrapper">
{{# center}}
<li>
<a href="{{href}}">
<img class="lazy" data-original="{{img}}">
</a>
</li>
{{/ center}}
</ul>
<div class="slide-switch">
<a class="prev" href="javascript:;">
<span class="iconfont">&#xe60c;</span>
</a>
<a class="next" href="javascript:;">
<span class="iconfont">&#xe60b;</span>
</a>
</div>
</div>
<div class="right-col col">
{{# right}}
<a href="{{href}}">
<img class="lazy" data-original="{{img}}">
</a>
{{/ right}}
</div>
</div>
{{/ debrisSlider}}
{{! 优选品牌}}
{{# preferenceBrands}}
{{> index/preference-brand}}
{{/ preferenceBrands}}
{{/ girl}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="home-page yoho-page">
kids
<div class="home-page yoho-page" data-page="kids">
{{# kids}}
{{! 头部banner}}
{{# slide}}
{{>index/slide-banner}}
{{/ slide}}
{{/ kids}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> index/floor-header}}
<div class="preference-brand">
<div class="img-slider-wrapper clearfix">
<div class="img-brand-switch">
<a class="prev iconfont" href="javascript:;">&#xe60f;</a>
<a class="next iconfont" href="javascript:;">&#xe60e;</a>
</div>
<div class="img-container-landscape">
<ul class="img-list">
{{# slider}}
<li class="img-item">
<a href="{{href}}"> <img src="{{img}}" alt="{{alt}}"></a>
</li>
{{/ slider}}
</ul>
</div>
</div>
<div class="preference-brand-list clearfix">
{{#list}}
<div class="preference-brand-item">
<a href="{{href}}">
<img class="lazy" data-original="{{img}}"></a>
</div>
{{/list}}
<a class="preference-more" href="{{moreBrands}}">MORE&gt;</a>
</div>
</div>
\ No newline at end of file
... ...
<div class="slide-container">
<div class="slide-wrapper">
<ul>
{{# list}}
<li>
<a href="{{href}}">
<img class="lazy" data-original="{{img}}" alt="">
</a>
</li>
{{/ list}}
</ul>
<div class="slide-switch">
<a class="prev" href="javascript:;">
<span class="iconfont">&#xe60c;</span>
</a>
<a class="next" href="javascript:;">
<span class="iconfont">&#xe60b;</span>
</a>
</div>
</div>
{{#if pagination}}
<div class="thumb-pagination">
<ul class="clearfix">
{{# pagination}}
<li>
<a href="{{href}}"></a>
<img src="{{img}}" alt="">
</li>
{{/ pagination}}
</ul>
</div>
{{/if}}
</div>
\ No newline at end of file
... ...
... ... @@ -2,26 +2,42 @@ var $ = require('yoho.jquery'),
lazyLoad = require('yoho.lazyload');
(function($) {
var LinkageSlider = function(element, options) {
var Slider = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.linkageSlider.defaults, options);
this.bigItem = this.$element.find('.big-slide').find('li');
this.smallItem = this.$element.find('.small-slide').find('li');
this.options = $.extend({}, $.fn.slider.defaults, options);
this.bigItem = this.$element.find('.slide-wrapper').find('li');
this.smallItem = null;
this.len = this.bigItem.size();
this.index = 0;
this.timer = null;
this.init();
};
LinkageSlider.prototype = {
Slider.prototype = {
init: function() {
if (!!this.options.pagination) {
this.smallItem = $(this.options.pagination).find('li');
} else {
this._createPage();
}
this._slideShow();
this._bindEvent();
this._autoplay();
},
_createPage: function() {
var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
'<div class="slide-shade"></div><div class="slide-pagination-last">',
i = 0;
if (this.len <= 1) {
this.$element.find('.slide-switch').hide();
return;
}
this._bindEvent();
this._autoplay();
for (i = 0; i < this.len; i++) {
pageHtml += '<span></span>';
}
pageHtml += '</div></div></div>';
this.$element.append($(pageHtml));
this.smallItem = $('.slide-pagination-inner').find('span');
},
_bindEvent: function() {
var that = this;
... ... @@ -70,6 +86,9 @@ var $ = require('yoho.jquery'),
if ($img.attr('src') !== $img.data('original')) {
lazyLoad($img.trigger('appear'));
}
if (this.len > 1) {
this.$element.find('.slide-switch').addClass('show');
}
this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
this.bigItem.eq(this.index).fadeIn().siblings().fadeOut();
},
... ... @@ -82,22 +101,23 @@ var $ = require('yoho.jquery'),
}, this.options.time);
}
};
$.fn.linkageSlider = function(option) {
$.fn.slider = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('linkageSlider'),
data = $this.data('Slider'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('linkageSlider', (data = new LinkageSlider(this, options)));
$this.data('Slider', (data = new Slider(this, options)));
}
if (typeof option === 'string') {
data[option]();
}
});
};
$.fn.linkageSlider.Constructor = LinkageSlider;
$.fn.linkageSlider.defaults = {
time: 5000
$.fn.slider.Constructor = Slider;
$.fn.slider.defaults = {
time: 5000,
pagination: null
};
})($);
\ No newline at end of file
... ...
... ... @@ -6,11 +6,11 @@
var $ = require('yoho.jquery');
var $yohocookie = require('../plugin/yohocookie');
var $yohocart = require('../plugin/yohocart');
var yohodoT = require('../plugin/yohodoT');
var noticeSuccess = false;
require('../plugin/yohocookie');
require('../plugin/yohocart');
/**
* 获取头部banner的回调函数
* @param {[type]} data [description]
... ... @@ -560,7 +560,7 @@ function loadCartData() {
}
if ($('#miniCartBox .goods-list li').length < 1) {
shoppingInfo = $.cookie('_g');
shoppingData = JSON.parse('(' + shoppingInfo + ')');
shoppingData = eval('(' + shoppingInfo + ')');
if (shoppingData !== null) {
strK = '{"_k":"' + shoppingData._k + '","_nac":0' + ',"_ac":0,"_r":0}';
$.setcookie('_g', strK, {
... ... @@ -588,7 +588,7 @@ function delCartGoods(id, isreduce) {
isreduce: isreduce
}, function(jsonData) {
var shoppingInfo = $.cookie('_g');
var shoppingData = JSON.parse('(' + shoppingInfo + ')');
var shoppingData = eval('(' + shoppingInfo + ')');
var strK = '{"_k":"' + shoppingData._k + '","_nac":' + jsonData.total_goods_num + ',"_ac":0,"_r":0}';
$.setcookie('_g', strK, {
... ... @@ -803,8 +803,6 @@ exports.init = function() {
actionUpdateCartNum(); //更新购物车数量
actionLoopUpdCartNum(); //循环检测购物车数量
actionSearch(); //搜索执行
delCartGoods();
clickMiniCartBox();
$yohocookie();
$yohocart();
};
\ No newline at end of file
... ...
... ... @@ -6,15 +6,26 @@
var $ = require('yoho.jquery'),
Handlebars = require('yoho.handlebars'),
lazyLoad = require('yoho.lazyload');
lazyLoad = require('yoho.lazyload'),
homePage = $('.home-page').data('page');
require('../common/linkage-slider');
require('../common/slider');
require('../common/slider2');
require('../common/new-arrivls');
lazyLoad($('img.lazy'));
$('.slide-container').linkageSlider();
$('.img-brand').slider2();
if (homePage === 'boys') {
$('.slide-container').slider({
pagination: '.thumb-pagination'
});
$('.img-brand').slider2();
} else if (homePage === 'girls') {
$('.center-col').slider();
} else {
$('.slide-container').slider();
}
$('.center-col').slider();
$('.img-slider-wrapper').slider2();
$.ajax({
... ...
var jQuery = require('jquery');
var jQuery = require('yoho.jquery');
var $yohocookie = require('./yohocookie');
(function($) {
... ...
var jQuery = require('jquery');
var jQuery = require('yoho.jquery');
(function($) {
$.extend({
... ...
.home-page {
width: 1150px;
margin: 0 auto;
margin: 10px auto 0;
/*大banner*/
.slide-container {
margin: 10px 0 0;
position: relative;
img {
display: block;
}
}
.big-slide {
/*大banner大图*/
.slide-wrapper {
position: relative;
height: 450px;
overflow: hidden;
... ... @@ -21,7 +23,7 @@
}
&:hover {
.slide-switch {
.slide-switch.show {
display: block;
}
}
... ... @@ -38,7 +40,9 @@
display: block;
}
}
}
/*大图上的左右切换按钮*/
.slide-switch {
display: none;
/* @include opacity(0);
... ... @@ -75,9 +79,9 @@
}
}
}
}
.small-slide {
/*大banner缩略图*/
.thumb-pagination {
margin: 6px 0 0;
padding: 0 0 0 2px;
... ... @@ -115,6 +119,121 @@
}
}
/*大banner圆点*/
.slide-pagination {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
text-align: center;
font-size: 0;
.slide-pagination-inner {
position: relative;
padding: 7px;
@include inline-block;
}
.slide-shade {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
@include opacity(0.3);
@include border-radius(13px);
}
span {
position: relative;
@include inline-block;
margin: 0 7px;
width: 12px;
height: 12px;
background: #fff;
cursor: pointer;
@include opacity(0.6);
@include border-radius(6px);
z-index: 2;
&.focus {
@include opacity(1);
}
}
}
/*女首碎片banner*/
.debris-slider {
width: 100%;
.col {
float: left;
a {
display: block;
}
}
.left-col a,
.right-col a {
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
.right-col img,
.left-col img {
height: 100%;
width: 100%;
}
.left-col {
margin-right: 9px;
a {
width: 240px;
height: 150px;
}
a:first-child {
height: 230px;
}
}
.center-col {
position: relative;
width: 492px;
height: 546px;
margin-right: 9px;
font-size: 0;
&:hover {
.slide-switch.show {
display: block;
}
}
.slide-wrapper {
height: 100%;
}
img {
max-width: 100%;
max-height: 100%;
}
}
.right-col a {
width: 240px;
height: 150px;
}
.right-col a:first-child {
height: 388px;
}
}
/*男首最新速报*/
.new-report {
img {
display: block;
... ... @@ -147,6 +266,99 @@
}
}
/*优选品牌*/
.preference-brand {
overflow: hidden;
}
.preference-brand-list {
margin-top: 8px;
width: 998px;
}
.preference-brand-item {
float: left;
margin-right: 7px;
margin-bottom: 8px;
a {
display: table-cell;
width: 159px;
height: 74px;
text-align: center;
vertical-align: middle;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}
}
.preference-more {
float: left;
width: 159px;
height: 74px;
line-height: 90px;
text-align: center;
color: black;
font-size: 16px;
}
.img-slider-wrapper {
position: relative;
width: 100%;
height: 480px;
background: #8ae6e0;
.img-brand-switch {
display: block;
a {
position: absolute;
top: 50%;
font-size: 36px;
color: #fff;
&.next {
right: 30px;
}
&.prev {
left: 30px;
}
}
}
}
.img-container-landscape {
margin: 73px auto 0;
box-sizing: border-box;
width: 844px;
height: 370px;
overflow: hidden;
.img-list {
width: 1000px;
height: 100%;
}
.img-item {
float: left;
box-sizing: border-box;
width: 275px;
height: 100%;
margin-right: 9px;
img {
width: 100%;
height: 100%;
}
}
}
/*男首优选品牌 图片品牌*/
.img-brand {
position: relative;
width: 100%;
... ... @@ -177,6 +389,8 @@
vertical-align: middle;
}
}
/*图片品牌左右切换按钮*/
.img-brand-switch {
display: none;
a {
... ... @@ -205,6 +419,9 @@
}
}
/*男首优选品牌 logo品牌*/
.logo-brand {
width: 100%;
height: 282px;
... ... @@ -472,6 +689,70 @@
}
@media screen and (min-width: 1150px) {
.debris-slider {
.left-col {
margin-right: 10px;
a {
width: 280px;
height: 176px;
}
a:first-child {
height: 265px;
}
}
.center-col {
width: 570px;
height: 633px;
margin-right: 10px;
}
.right-col {
a {
width: 280px;
height: 176px;
}
a:first-child {
height: 449px;
}
}
}
.img-slider-wrapper {
height: 558px;
}
.img-container-landscape {
margin: 86px auto 0;
width: 982px;
height: 433px;
.img-item {
width: 320px;
margin-right: 10px;
}
}
.preference-brand-list {
width: 1158px;
}
.preference-brand-item {
margin-right: 8px;
a {
width: 185px;
height: 86px;
}
}
.preference-more {
width: 185px;
height: 86px;
line-height: 100px;
}
.floor-header {
margin: 80px 0 40px;
... ...
... ... @@ -261,7 +261,7 @@ class BoysController extends AbstractAction
'boy' => array(
array(
'slide' => array(
'bigSlide' => array(
'list' => array(
array(
'href' => '/?gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/11/26/12/01c3b99f554ad50d9e5a9900719715c94c.jpg'
... ... @@ -295,7 +295,7 @@ class BoysController extends AbstractAction
'img' => 'http://img12.static.yhbimg.com/taobaocms/2015/11/27/09/02a4f1c10e1e81574520e5c0239741a076.jpg'
)
),
'smallSlide' => array(
'pagination' => array(
array(
'href' => 'http://sale.yohobuy.com/?specialsale_id=13&gender=1,3',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/11/26/12/024a810cfa89d67569c6c3bacedba8869a.jpg?imageMogr2/thumbnail/138x54/extent/138x54/background/d2hpdGU=/position/center/quality/90'
... ... @@ -371,7 +371,7 @@ class BoysController extends AbstractAction
)
),
array(
'preferenceBrand' => array(
'preferenceBrands' => array(
'name' => '优选品牌 BRAND',
'imgBrand' => array(
array(
... ...
... ... @@ -216,6 +216,125 @@ class GirlsController extends AbstractAction
'headerdata' => $headerdata,
'boysHomePage' => true,
'girl' => array(
array(
'debrisSlider' => array(
'left' => array(
array(
'href' => '/?gender=1,3',
'img' => 'http://img13.static.yhbimg.com/adpic/2014/07/21/15/0210a3490eae2aad6ef8bf3b8133a49ca9.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/07/03/05/0228d8379c3d1f2fcde8ea01da2bc6c003.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img10.static.yhbimg.com/taobaocms/2015/07/02/16/01b995aa117bd227bca14ccc93743bf4a2.jpg'
)
),
'center' => array(
array(
'href' => '/?gender=1,3',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/12/01/09/017932663fa898878c016ee6f2793e7efc.jpg?imageView/1/w/570/h/633'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img11.static.yhbimg.com/yhb-img01/2015/12/03/06/013fc735bae24cbc92c0e9a98831a187d2.jpg?imageView/1/w/570/h/633'
)
),
'right' => array(
array(
'href' => '/?gender=1,3',
'img' => 'http://img11.static.yhbimg.com/taobaocms/2015/07/05/01/01b677be6bef92f988f04827db5f829488.jpg'
),
array(
'href' => '/?gender=1,3',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/07/03/10/02b8e3e89792b83c0a997a8d3712257f0e.gif'
)
)
)
),
array(
'preferenceBrands' => array(
'name' => '优选品牌 BRAND',
'slider' => array(
array(
'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/0240f288725106b408d8c524b4d0fba4b9.jpg'
),
array(
'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
),
array(
'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
),
array(
'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
),
array(
'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
),
array(
'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
),
array(
'href' => 'http://www.yohobuy.com/special_8585_0618TEEBOY.html',
'img' => 'http://img13.static.yhbimg.com/taobaocms/2015/06/17/07/02934d7696b187d260341d31c084eb93cc.jpg'
),
),
'list' => array(
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
),
array(
'href' => '',
'img' => 'http://img10.static.yhbimg.com/brandLogo/2013/01/14/14/01fe59a9d032ed8a69552209c34948addb.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90'
)
)
)
)
)
);
$this->_view->display('index', $data);
... ...