fe / yohobuy-mobile · Commits

Go to a project

Authored by 2586703@qq.com
Commit f0a37545ce7161cd0a2cefd1a2411dcf589be039 2 parents 325c1dd6 5622fecb

Merge branch 'feature/homePage' of http://git.dev.yoho.cn/web/yohobuy-mobile into feature/homePage 

Conflicts:
	home-page/layouts/layout.html
	home-page/public/sass/pages/_boys.scss
	home-page/router.js
Inline Side-by-side
Showing 36 changed files with 997 additions and 211 deletions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<link rel="stylesheet" href="../css/index.css">
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<link rel="stylesheet" href="../css/index.css">
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) {
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
if (!doc.addEventListener) {
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</head>
<body>
{{{body}}}
</body>
<script src="http://localhost:8000/static/js/sea.js?nowrap"></script>
<script>
seajs.config({
base: 'http://localhost:8000/'
})
</script>
</head>
<body>
{{{body}}}
</body>
<script src="http://localhost:8000/static/js/sea.js?nowrap"></script>
<script>
seajs.config({
base: 'http://localhost:8000/'
})
</script>
<script>
seajs.use('public/js/public');
</script>
{{# module}}
<script type="text/javascript">
seajs.use('public/js/{{../module}}');
<script>
seajs.use('public/js/public');
</script>
{{/ module}}
</html>
\ No newline at end of file
... ...
var $ = require('jquery');
//点击首页汉堡menu图标，滑出侧栏导航
$('.nav-btn').on('click', function(event) {
if (!$(this).hasClass('menu-open')) {
$('.mobile-wrap').addClass('menu-open');
$('.overlay').addClass('show');
}
event.stopPropagation();
});
//点击页面主体，收起侧栏导航
$('.mobile-wrap').on('click', function() {
if ($(this).hasClass('menu-open')) {
$('.mobile-wrap').removeClass('menu-open');
$('.overlay').removeClass('show');
}
});
//点击一级导航，弹出二级导航
$('.side-nav').on('click', 'li', function() {
if ($(this).find('.sub-nav').size() > 0) {
$('.sub-nav').removeClass('show');
$(this).find('.sub-nav').addClass('show');
}
});
//返回一级导航，收起二级导航
$('.sub-nav').each(function() {
$(this).find('li').eq(0).on('click', function() {
$('.sub-nav').removeClass('show');
event.stopPropagation();
});
})
\ No newline at end of file
/**
* lazyload
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/6/25
*/
var $ = require('jquery');
require('lazyload');
/**
* 为指定imgs添加lazyload效果,未指定imgs则为所有img.lazy添加lazyload效果
* @params imgs lazyload的图片
* @params options lazyload效果选项
*/
module.exports = function(imgs, options) {
var setting = {
effect : 'fadeIn',
effect_speed: 10,
placeholder: 'data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==',
skip_invisible: false
}, $imgs, argsLength = arguments.length;
//分解参数
(function seperateOptions() {
switch (argsLength) {
case 0:
$imgs = $('img.lazy');
break;
case 1:
if (imgs instanceof $) {
//img
$imgs = imgs;
} else {
$imgs = $('img.lazy');
$.extend(setting, imgs);
}
break;
case 2:
$imgs = imgs;
setting = $.extend(setting, options);
break;
}
}());
$imgs.lazyload(setting);
};
\ No newline at end of file
... ...
/**
* “你可能喜欢”模块JS
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/7/15
*/
var $ = require('jquery'),
Mustache = require('mustache'),
lazyLoad = require('./lazyload');
var winH = $(window).height(),
loading = false,
end = false,
page = 1,
tpl;
//read good-info template
$.get('/common/goodinfo', function(data) {
tpl = '{{# goods}}' + data + '{{/ goods}}';
Mustache.parse(tpl);
});
var isLogin = 'Y'; //TODO:是否登录，后台提供，区分走Ajax还是页面跳转
//商品收藏
$('.goods-list').delegate('.good-islike', 'touchstart', function(e) {
var $cur, $good, id, url;
if (isLogin === 'Y') {
e.preventDefault(); // 阻止链接跳转改AJAX
$cur = $(e.currentTarget);
$good = $cur.closest('.good-info');
id = $good.data('id');
if ($cur.hasClass('good-like')) {
url = '/goods/cancelprise';
} else {
url = '/goods/prise';
}
$.ajax({
type: 'GET',
url: url,
data: {
product_skn: id
}
}).then(function(data) {
if (data.code === 200) {
$cur.toggleClass('good-like');
} else if (data.code === 400) {
//TODO:提示登录
}
});
}
});
var $maybeLike = $('.maybe-like:last'),
$goodList = $maybeLike.children('.goods-list'),
mblTop = $maybeLike.offset().top; //页面内容固定，可以预先求出高度
//srcoll to load more
$(window).scroll(function() {
var num;
if (end || loading) {
return;
}
if ($(window).scrollTop() + winH < mblTop + $maybeLike.height()) {
return;
}
loading = true;
num = $goodList.children('.good-info').length;
$.ajax({
type: 'GET',
url: '/goods/more',
data: {
gender: 0, //性别
page: page + 1
}
}).then(function(data) {
var res,
i;
if (data.code === 200) {
res = data.data;
if (res.end) {
end = res.end;
}
$goodList.append(Mustache.render(tpl, {
goods: res.goods
}));
//lazyLoad
lazyLoad($goodList.children('.good-info:gt(' + (num - 1) + ')').find('img.lazy'));
loading = false;
page++;
}
});
});
\ No newline at end of file
... ...
... ... @@ -53,10 +53,146 @@ module.exports = {
textCn: '家居',
textEn: 'Life Style'
}],
bannerTop: {
list: [{
content: [{
bannerTop: {
list: [{
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
}]
}
}, {
hotBrands: {
name: '热门品牌',
brands: [{
url: '',
img: 'http://img11.static.yhbimg.com/brandLogo/2014/12/24/17/010c9d590aa72776d6fa9c7b29c0dbf02e.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
name: 'Front Row Shop'
}, {
url: '',
img: 'http://img13.static.yhbimg.com/brandLogo/2014/01/27/11/02760471b3fdea1e82e7abfe9155e8654f.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
name: 'dress lab'
}, {
url: '',
img: 'http://img13.static.yhbimg.com/brandLogo/2014/03/04/15/029db86af0b2902805aabc953627bcbb12.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
name: 'DEVIL NUT'
}, {
url: '',
img: 'http://img11.static.yhbimg.com/brandLogo/2014/11/05/09/0157535787c0ad76cd04756a0351ce5b1f.png?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
name: 'casselini'
}, {
url: '',
img: 'http://img10.static.yhbimg.com/brandLogo/2013/07/10/15/0101726da2fcae86fa101dc63583457f1a.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
name: 'haso'
}, {
url: '',
img: 'http://img13.static.yhbimg.com/brandLogo/2014/01/10/15/02e40864fc98561c2aac569e4affa3445a.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center',
name: 'EVISU'
}]
}
}, {
creativeLife: {
name: '创意生活',
more: '',
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
}]
banner: 'http://img10.static.yhbimg.com/yhb-img01/2015/07/09/18/0119ffceddb0819d36d74b408bd743b4a9.jpg?imageView/2/w/640/h/640',
classify: [{
url: '',
img: 'http://img13.static.yhbimg.com/goodsimg/2015/04/10/05/029bef1041343ea2e31dc0423f2f176589.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '手表'
}, {
url: '',
img: 'http://img12.static.yhbimg.com/goodsimg/2015/07/07/09/02271a775d17649860abec4387b4559e26.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '烛台'
}, {
url: '',
img: 'http://img12.static.yhbimg.com/goodsimg/2015/05/19/07/02a269d20ed44803eee33e255fe88d7873.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '围巾'
}, {
url: '',
img: 'http://img13.static.yhbimg.com/goodsimg/2015/06/01/07/02fe94083352435ce53b5d90812cc5bdbd.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '盘子'
}, {
url: '',
img: 'http://img12.static.yhbimg.com/goodsimg/2015/07/08/07/028db8a2afbe4ecbf37bebc7e98e8e1e80.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '耳机'
}, {
url: '',
img: 'http://img13.static.yhbimg.com/goodsimg/2015/04/22/02/02a1b688b6dafd786f391e0624aea1e93b.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '生活'
}]
}
}, {
plusStar: {
name: 'PLUS 全球优选',
url: '',
img: 'http://img11.static.yhbimg.com/yhb-img01/2015/07/13/15/014f7ba48071160053ac3b8f045b9fc264.jpg?imageView/2/w/640/h/640'
}
}, {
maybeLike: {
goods: [{
id: 1,
thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'GAWS DIGI 丛林数码印花拼接卫衣',
isLike: false,
price: 1268,
salePrice: 589,
isSale: true,
isFew: true,
isNew: false,
url: '',
likeUrl: ''
}, {
id: 2,
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/023d70c59e81ccbfb39404487aaf642da2.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'CLOTtee 撞色连帽外套',
isLike: false,
price: 488,
salePrice: 139,
isSale: true,
isFew: true,
isNew: false,
url: '',
likeUrl: ''
}, {
id: 3,
thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/02/08/02e2d44125e95495e3152aa459fa6b9b0c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'HALFGIRL 插肩棒球服短裙套装',
isLike: true,
price: 478,
salePrice: 208,
isSale: true,
isFew: true,
isNew: false,
url: '',
likeUrl: ''
}, {
id: 4,
thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/03/08/022f25fbe177ee12803c522f04fcce06d0.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: '',
likeUrl: ''
}]
}
}, {
bannerBottom: {
img: 'http://img02.yohoboys.com/staticimg/2015/06/24/16/02ee02f1dd11c9103f7cf7995eafdaa605.jpg',
url: ''
}
}],
footer: {
// 已登录
user: {
name: 'xuqi',
url: '',
signoutUrl: ''
}
// 未登录
// loginUrl: '',
// signupUrl: ''
}
}
\ No newline at end of file
... ...
... ... @@ -69,80 +69,85 @@ module.exports = {
textCn: '家居',
textEn: 'Life Style'
}],
bannerTop: {
list: [{
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
}, {
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/07/08/10/02096990afbb3c1f327dd7e180aee02604.jpg'
}, {
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/06/24/16/02ee02f1dd11c9103f7cf7995eafdaa605.jpg'
}]
},
hotCategory: {
img: 'http://img13.static.yhbimg.com/adpic/2015/05/07/15/020cfde7eb630474916655cc0e290c68e2.jpg?imageView/2/w/640/h/480',
list: [{
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}]
},
hotBrands: {
name: '热门品牌',
list: [{
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
content: [{
bannerTop: {
list: [{
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/06/30/21/02912cd7f0b2c67939404c71ef00e3f513.jpg'
}, {
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/07/08/10/02096990afbb3c1f327dd7e180aee02604.jpg'
}, {
url: '',
img: 'http://img02.yohoboys.com/staticimg/2015/06/24/16/02ee02f1dd11c9103f7cf7995eafdaa605.jpg'
}]
}
}, {
hotCategory: {
img: 'http://img13.static.yhbimg.com/adpic/2015/05/07/15/020cfde7eb630474916655cc0e290c68e2.jpg?imageView/2/w/640/h/480',
list: [{
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: '打底衫',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}]
}
}, {
hotBrands: {
name: '热门品牌',
list: [{
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}, {
textCn: 'Moussy',
img: 'http://img.alicdn.com/imgextra/i1/2086467111/TB2CsqHdXXXXXaDXpXXXXXXXXXX_!!2086467111.jpg',
url: ''
}]
}
}, {
bannerBottom: {
img: 'http://img02.yohoboys.com/staticimg/2015/06/24/16/02ee02f1dd11c9103f7cf7995eafdaa605.jpg',
url: ''
}]
},
bannerBottom: {
img: 'http://img02.yohoboys.com/staticimg/2015/06/24/16/02ee02f1dd11c9103f7cf7995eafdaa605.jpg',
url: ''
}
}
}]
}
\ No newline at end of file
... ...
/**
* 商品信息数据
* @author xuqi(qi.xu@yoho.cn)
* @date 2015/7/15
*/
module.exports = [
{
id: 5,
thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'GAWS DIGI 丛林数码印花拼接卫衣',
isLike: false,
price: 1268,
salePrice: 589,
isSale: true,
isFew: true,
isNew: false,
url: '',
likeUrl: ''
},
{
id: 6,
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/023d70c59e81ccbfb39404487aaf642da2.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'CLOTtee 撞色连帽外套',
isLike: false,
price: 488,
salePrice: 139,
isSale: true,
isFew: true,
isNew: false,
url: '',
likeUrl: ''
},
{
id: 7,
thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/02/08/02e2d44125e95495e3152aa459fa6b9b0c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: 'HALFGIRL 插肩棒球服短裙套装',
isLike: true,
price: 478,
salePrice: 208,
isSale: true,
isFew: true,
isNew: false,
url: '',
likeUrl: ''
},
{
id: 8,
thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/03/08/022f25fbe177ee12803c522f04fcce06d0.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: '',
likeUrl: ''
}
];
\ No newline at end of file
... ...
var $ = require('jquery'),
swiper = require('yoho-idangerous.swiper');
var bannerSwiper,
hotBrandsSwiper;
//热门品牌轮播
hotBrandsSwiper = new swiper('.brands-swiper', {
grabCursor: true,
slidesPerView: 'auto',
wrapperClass: 'brands-list',
slideElement: 'li'
});
\ No newline at end of file
/*
* 首页 JS
* @author xuqi/liuyue
* @date: 2015/7/15
*/
var $ = require('jquery'),
swiper = require('yoho-idangerous.swiper'),
bannerSwiper;
lazyLoad = require('./common/lazyload'),
bannerSwiper,
hotBrandsSwiper;
require('./common/maybe-like');
//点击首页汉堡menu图标，滑出侧栏导航
$('.nav-btn').on('click', function(event) {
... ... @@ -53,6 +63,26 @@ if ($('.banner-swiper').find('li').size() > 1) {
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: 'li',
pagination: '.banner-top .pagination-inner'
pagination: '.banner-top .pagination-inner',
onSlideChangeStart: function() {
lazyLoad($('.banner-swiper .swiper-slide').eq(bannerSwiper.activeIndex).find('img'));
}
});
}
\ No newline at end of file
};
//lazyload
lazyLoad();
//回到顶部
$('.back-to-top').bind('touchstart', function(e) {
e.preventDefault();
$(window).scrollTop(0);
});
//热门品牌轮播
hotBrandsSwiper = new swiper('.brands-swiper', {
grabCursor: true,
slidesPerView: 'auto',
wrapperClass: 'brands-list',
slideElement: 'li'
});
\ No newline at end of file
... ...
.creative-life {
background: #fff;
.banner {
display: block;
img {
width: 100%;
height: 404rem / $pxConvertRem;
}
}
.classify-list > li {
float: left;
width: 212rem / $pxConvertRem;
height: 192rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
}
.classify-logo {
display: table-cell;;
width: 212rem / $pxConvertRem;
height: 140rem/ $pxConvertRem;
vertical-align: middle;
img {
display: block;
max-width: 212rem / $pxConvertRem;
max-height: 140rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
}
}
.classify-name {
line-height: 52rem / $pxConvertRem;
font-size: 26rem / $pxConvertRem;
color: #000;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
}
.classify:nth-child(3n) {
border-right: 0;
}
}
\ No newline at end of file
... ...
.h5-footer {
font-size: 12px;
background-color: #fff;
z-index: 100;
a {
color: #000;
}
.user-name {
text-decoration: underline;
}
.op-row {
position: relative;
padding: 0 30rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
}
.back-to-top {
position: absolute;
right: 20rem / $pxConvertRem;
}
.copyright {
height: 60rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
text-align: center;
color: #666;
border-top: 1px solid #ccc;
background-color: #eee;
}
}
\ No newline at end of file
... ...
.good-info {
float: left;
width: 276rem / $pxConvertRem;
height: 466rem / $pxConvertRem;
margin: 0 (15rem / $pxConvertRem);
}
.good-detail-img {
position: relative;
.good-islike {
position: absolute;
width: 60rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
top: 0rem / $pxConvertRem;
right: 0rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
text-align: center;
color: #b0b0b0;
text-decoration: none;
}
.good-like {
color: #d72928;
}
img {
display: block;
width: 100%;
height: 366rem / $pxConvertRem;
}
}
.good-detail-img .tag-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
.good-tag {
position: relative;
padding: 0 (10rem / $pxConvertRem);
height: 24rem / $pxConvertRem;
line-height: 24rem / $pxConvertRem;
color: #fff;
font-size: 18rem / $pxConvertRem;
span {
position: relative;
z-index: 2;
float: left;
}
em {
position: relative;
z-index: 2;
float: right;
}
}
.new-tag {
background: #86bf4a;
}
.sale-tag {
background: #d62927;
}
.few-tag {
background: #ff9e0d;
}
}
.good-detail-text {
.name a {
display: block;
line-height: 56rem / $pxConvertRem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-decoration: none;
font-size: 22rem / $pxConvertRem;
color: #444;
}
.price {
line-height: 22rem / $pxConvertRem;
font-size: 22rem / $pxConvertRem;
.sale-price {
color: #d62927;
}
.sale-price.no-price {
color: #000;
}
.market-price {
margin: 0 0 0 (5rem / $pxConvertRem);
color: #b0b0b0;
text-decoration: line-through;
}
}
}
\ No newline at end of file
... ...
.hot-brands {
background: #fff;
border-top: 1px solid #e0e0e0;
a {
display: block;
text-decoration: none;
}
.brand {
float: left;
width: 158rem / $pxConvertRem;
height: 174rem / $pxConvertRem;
border-right: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
.brand-logo {
display: table-cell;
width: 158rem / $pxConvertRem;
height: 130rem / $pxConvertRem;
vertical-align: middle;
img {
display: block;
max-width: 158rem / $pxConvertRem;
max-height: 130rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
}
}
.brand-name {
line-height: 44rem / $pxConvertRem;
font-size: 18rem / $pxConvertRem;
color: #babac2;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
}
}
.brand:nth-child(4n) {
border-right: none;
}
.more {
float: left;
width: 317rem / $pxConvertRem;
height: 174rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
a {
display: block;
width: 100%;
height: 100%;
background: image-url('more-brand.png') no-repeat;
background-size: 100% 100%;
}
}
}
\ No newline at end of file
... ...
@import "common/good-info";
.maybe-like {
background: #fff;
padding-left: 15rem / $pxConvertRem;
.title {
height: 104rem / $pxConvertRem;
line-height: 104rem / $pxConvertRem;
text-align: center;
color: #dadada;
}
.icon {
display: inline-block;
height: 31rem / $pxConvertRem;
width: 31rem / $pxConvertRem;
background: image-url('up-icon.png') no-repeat;
background-size: 100% 100%;
}
}
\ No newline at end of file
... ...
.plus-star img {
display: block;
width: 100%;
height: 198rem / $pxConvertRem;
}
\ No newline at end of file
... ...
$pxConvertRem : 40;
@import "compass", "compass/reset";
@import "common/side-nav", "common/header", "common/floor-header", "common/banner-top", "common/banner-bottom";
@import "pages/boys", "pages/girls";
body {
... ...
@import "common/header", "common/banner-top", "common/side-nav", "common/floor-header", "common/banner-top", "common/banner-bottom", "common/hot-brands", "common/creative-life", "common/plus-star", "common/maybe-like", "common/footer";
.mobile-wrap {
position: relative;
z-index: 2;
... ... @@ -26,4 +28,4 @@
.overlay.show {
display: block;
}
\ No newline at end of file
}
... ...
@import "girls/hot-category";
@import "girls/hot-brands";
\ No newline at end of file
@import "common/header", "common/banner-top", "common/side-nav", "common/floor-header", "common/banner-bottom", "girls/hot-category", "girls/hot-brands";
\ No newline at end of file
... ...
... ... @@ -3,10 +3,19 @@
* @author: liuyue(yue.liu@yoho.cn)
* @date: 2015/7/13
*/
var boys = require('./views/controller/boys'),
girls = require('./views/controller/girls');
var controllerPath = './views/controller/',
boys = require(controllerPath + 'boys'),
girls = require(controllerPath + 'girls'),
goods = require(controllerPath + 'goods');
module.exports = function(app) {
app.get('/boys', boys.index); //boys首页
app.get('/girls', girls.index); //boys首页
app.get('/girls', girls.index); //girls首页
app.get('/common/goodinfo', goods.goodTpl); //商品信息模板
app.get('/goods/more', goods.more); //下拉加载更多
app.get('/goods/prise', goods.like); //商品收藏/取消收藏
app.get('/goods/cancelprise', goods.like);
};
\ No newline at end of file
... ...
... ... @@ -10,7 +10,6 @@ var data = require('../../public/js/data/boys'),
exports.index = function(req, res) {
res.render('pages/boys', {
data: data,
layout: layoutPath,
module: 'boys'
layout: layoutPath
});
};
\ No newline at end of file
... ...
... ... @@ -10,7 +10,6 @@ var data = require('../../public/js/data/girls'),
exports.index = function(req, res) {
res.render('pages/girls', {
data: data,
layout: layoutPath,
module: 'girls'
layout: layoutPath
});
};
\ No newline at end of file
... ...
/**
* 商品信息相关路由处理
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/7/15
*/
var fs = require('fs'),
path = require('path'),
tplPath = path.normalize(path.join(__dirname, '../partials/common/good_info.html')),
data = require('../../public/js/data/goods');
exports.goodTpl = function(req, res) {
fs.readFile(tplPath, 'utf8', function(err, data) {
if (err) {
res.send({
success: false
});
}
res.send(data);
});
};
//加载更多商品信息
exports.more = function(req, res) {
res.send({
code: 200,
data: {
end: true,
goods: data
}
});
};
// 收藏、取消收藏
exports.like = function(req, res) {
res.send({
code: 200
});
};
\ No newline at end of file
... ...
{{# data}}
<div class="mobile-wrap boys-wrap">
{{> header}}
{{> common/banner_top}}
<div class="overlay"></div>
</div>
{{> common/side_nav}}
{{/ data}}
\ No newline at end of file
<div class="mobile-wrap boys-wrap">
{{> header}}
{{! 头部banner}}
{{# bannerTop}}
{{> common/banner_top}}
{{/ bannerTop}}
{{! 热门分类}}
{{# hotBrands}}
{{> common/hot_brands}}
{{/ hotBrands}}
{{! 创意生活}}
{{# creativeLife}}
{{> common/creative_life}}
{{/ creativeLife}}
{{! PLUS}}
{{# plusStar}}
{{> common/plus_star}}
{{/ plusStar}}
{{! 可能喜欢}}
{{# maybeLike}}
{{> common/maybe_like}}
{{/ maybeLike}}
{{! 底部banner}}
{{# bannerBottom}}
{{> common/banner_bottom}}
{{/ bannerBottom}}
{{! footer}}
{{# footer}}
{{> footer}}
{{/ footer}}
<div class="overlay"></div>
</div>
{{> common/side_nav}}
{{/ data}}
... ...
{{# data}}
<div class="mobile-wrap girls-wrap">
{{> header}}
{{> common/banner_top}}
{{> girls/hot_category}}
{{> girls/hot_brands}}
{{> common/banner_bottom}}
{{! 头部banner}}
{{# bannerTop}}
{{> common/banner_top}}
{{/ bannerTop}}
{{! 热门分类}}
{{# hotCategory}}
{{> girls/hot_category}}
{{/ hotCategory}}
{{! 热门品牌}}
{{# hotBrands}}
{{> girls/hot_brands}}
{{/ hotBrands}}
{{! 底部banner}}
{{# bannerBottom}}
{{> common/banner_bottom}}
{{/ bannerBottom}}
<div class="overlay"></div>
</div>
{{> common/side_nav}}
... ...
{{# bannerBottom}}
<div class="banner-bottom">
<a href="{{url}}">
<img src="{{img}}" alt="">
<img class="lazy" data-original="{{img}}" alt="">
</a>
</div>
{{/ bannerBottom}}
\ No newline at end of file
</div>
\ No newline at end of file
... ...
{{# bannerTop}}
<div class="banner-top">
<div class="banner-swiper swiper-container">
<ul class="swiper-wrapper">
{{# list}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="lazy" data-original="{{img}}" src="{{img}}" alt="">
<img src="{{img}}" alt="">
</a>
</li>
{{/ list}}
... ... @@ -15,5 +14,4 @@
<div class="pagination-inner">
</div>
</div>
</div>
{{/ bannerTop}}
\ No newline at end of file
</div>
\ No newline at end of file
... ...
{{> common/floor_header_more}}
<div class="creative-life">
<a class="banner" href="{{url}}">
<img class="lazy" data-original="{{banner}}">
</a>
<ul class="classify-list clearfix">
{{# classify}}
<li class="classify">
<a href="{{url}}">
<div class="classify-logo">
<img class="lazy" data-original="{{img}}">
</div>
<p class="classify-name">{{name}}</p>
</a>
</li>
{{/ classify}}
</ul>
</div>
\ No newline at end of file
... ...
<div class="good-info" data-id="{{id}}">
<div class="good-detail-img">
<a class="good-islike {{# isLike}}good-like{{/ isLike}} iconfont" href="{{likeUrl}}">&#xe605;</a>
<a class="good-thumb" href="{{url}}">
<img class="lazy" data-original="{{thumb}}">
</a>
<div class="tag-container">
{{# isNew}}
<div class="good-tag new-tag clearfix">
<span>新品到着</span>
<em>NEW</em>
</div>
{{/ isNew}}
{{# isSale}}
<div class="good-tag sale-tag clearfix">
<span>打折商品</span>
<em>SALE</em>
</div>
{{/ isSale}}
{{# isFew}}
<div class="good-tag few-tag clearfix">
<span>即将售罄</span>
<em>FEW</em>
</div>
{{/ isFew}}
</div>
</div>
<div class="good-detail-text">
<div class="name">
<a href="{{url}}">{{name}}</a>
</div>
<div class="price">
<span class="sale-price {{^price}}no-price{{/price}}">￥{{salePrice}}</span>
{{#price}}
<span class="market-price">￥{{.}}</span>
{{/price}}
</div>
</div>
</div>
\ No newline at end of file
... ...
{{> common/floor_header}}
<ul class="hot-brands clearfix">
{{# brands}}
<li class="brand">
<a href="{{url}}">
<div class="brand-logo">
<img class="lazy" data-original="{{img}}">
</div>
<p class="brand-name">{{name}}</p>
</a>
</li>
{{/ brands}}
<li class="more">
<a href="{{more}}"></a>
</li>
</ul>
\ No newline at end of file
... ...
<div class="maybe-like">
<p class="title">
<i class="icon"></i>
<span>你可能喜欢</span>
</p>
<div class="goods-list clearfix">
{{# goods}}
{{> common/good_info}}
{{/ goods}}
</div>
</div>
\ No newline at end of file
... ...
{{> common/floor_header}}
<div class="plus-star">
<a href="{{url}}">
<img class="lazy" data-original="{{img}}">
</a>
</div>
\ No newline at end of file
... ...
<div class="h5-footer">
<p class="op-row">
{{# user}}
Hi,
<a class="user-name" href="{{url}}">{{name}}</a>
<a href="{{signoutUrl}}">退出</a>
{{^}}
<a href="{{loginUrl}}">登录</a>
<span class="sep-line">|</span>
<a href="{{signupUrl}}">注册</a>
{{/ user}}
<span class="back-to-top">
Back to top
<i class="iconfont">&#xe608;</i>
</span>
</p>
<p class="copyright">
CopyRight©2007-2016 南京新与力文化传播有限公司
</p>
</div>
\ No newline at end of file
... ...
{{# hotBrands}}
<div class="hot-brands">
{{> common/floor_header_more}}
<div class="brands-swiper">
... ... @@ -6,12 +5,11 @@
{{# list}}
<li class="swiper-slide">
<a href="{{url}}">
<img src="{{img}}" alt="">
<img class="lazy" data-original="{{img}}" alt="">
<span class="brands-title">{{textCn}}</span>
</a>
</li>
{{/ list}}
</ul>
</div>
</div>
{{/ hotBrands}}
\ No newline at end of file
</div>
\ No newline at end of file
... ...
{{# hotCategory}}
<div class="hot-category">
<div class="category-banner">
<img src="{{img}}" alt="">
<img class="lazy" data-original="{{img}}" alt="">
</div>
<ul class="category-list clearfix">
{{# list}}
<li>
<a href="{{url}}">
<div class="img-box">
<img src="{{img}}" alt="">
<img class="lazy" data-original="{{img}}" alt="">
</div>
<p class="category-title">{{textCn}}</p>
</a>
</li>
{{/ list}}
</ul>
</div>
{{/ hotCategory}}
\ No newline at end of file
</div>
\ No newline at end of file
... ...