fe / yohobuy-frontend · Commits

Go to a project

Authored by xuqi
Commit 81178402b17db569c57bc3d8d81d88c208f5fa2d 2 parents a3aaf8e1 dfee1e8c

Merge branch 'feature/h5detail' into develop

Inline Side-by-side
Showing 62 changed files with 1767 additions and 20 deletions
/**
* Node服务端入口文件
* author: xuqi(qi.xu@yoho.cn)
* date: 2015/3/27
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/3/27
*/
var express = require('express'),
path = require('path'),
... ...
... ... @@ -10,12 +10,13 @@ javascripts_dir = "./public/js"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
... ... @@ -23,4 +24,5 @@ line_comments = false
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
Encoding.default_external = "utf-8";
\ No newline at end of file
Encoding.default_external = "utf-8"
\ No newline at end of file
... ...
... ... @@ -54,12 +54,12 @@ gulp.task('build', function() {
gulp.task('build-debug', function() {
gulp.src(['public/lib/sea.js', 'dist/yohobuy-mobile/1.0.0/index-debug.js'])
.pipe(concat('all-debug.js'))
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('public/dist'))
});
//generate all.js for production ENV
gulp.task('build-production', function() {
gulp.src(['public/lib/sea.js', 'dist/yohobuy-mobile/1.0.0/index.js'])
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(gulp.dest('public/dist'))
});
\ No newline at end of file
... ...
var yohobuyMobile;
require('./public/js/article-type-three');
require('./public/js/article-type-three-optimize');
require('./public/js/detail');
module.exports = yohobuyMobile;
... ...
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
<meta content="telephone=no" name="format-detection">
<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);
</script>
<link rel="stylesheet" href="../css/detail.css">
</head>
<body>
<div id="detail-container" class="detail-container" style="display:none">
{{{body}}}
</div>
</body>
<script src="//localhost:5000/dist/all-debug.js"></script>
<script type="text/javascript">
seajs.use(['jquery/1.8.3/jquery-debug',
'yohobuy-mobile/1.0.0/public/js/article-type-three-optimize-debug',
'yohobuy-mobile/1.0.0/public/js/detail-debug'], function($, article, detail) {
if (article) {
article.init();
}
if(detail) {
detail.init();
}
$(".detail-container").show();
});
</script>
</html>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
<meta content="telephone=no" name="format-detection">
<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);
</script>
<link rel="stylesheet" href="../css/detail.css">
</head>
<body>
<div id="detail-container" class="detail-container" style="display:none">
{{{body}}}
</div>
</body>
<script src="//localhost:5000/dist/all-debug.js"></script>
<script type="text/javascript">
seajs.use(['jquery/1.8.3/jquery-debug',
'yohobuy-mobile/1.0.0/public/js/article-type-three-debug',
'yohobuy-mobile/1.0.0/public/js/detail-debug'], function($, article, detail) {
$(".detail-container").show();
if (article) {
article.init();
}
if(detail) {
detail.init();
}
});
</script>
</html>
\ No newline at end of file
... ...
... ... @@ -13,8 +13,11 @@
"spm": {
"main": "index.js",
"dependencies": {
"jquery": "2.1.3",
"jquery-pjax": "1.0.1"
"jquery": "1.8.3",
"jquery-pjax": "1.0.1",
"mlellipsis": "0.0.2",
"lazyload": "1.9.5",
"iscroll": "5.1.2"
},
"devDependencies": {
"expect.js": "0.3.1"
... ...
No preview for this file type
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Mon Mar 30 15:46:04 2015
By Ads
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
panose-1="2 0 6 3 0 0 0 0 0 0"
ascent="812"
descent="-212"
x-height="792"
bbox="0 -224 1285 800"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E612"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
<glyph glyph-name=".notdef" horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
<glyph glyph-name=".null" horiz-adv-x="0"
/>
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"
/>
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
<glyph glyph-name="uniE60C" unicode="&#xe60c;" horiz-adv-x="1323"
d="M643 472q0 -68 -47.5 -116t-113.5 -48q0 -68 47 -116t113.5 -48t113.5 48t47 116t-47 116t-113 48zM643 800q-68 0 -139.5 -21.5t-133 -57t-119 -80.5t-102.5 -93t-79 -94t-52 -84t-18 -62q0 -28 25 -75t68 -102t105 -111t131 -101.5t152 -74.5t161.5 -29t161.5 29
t152 74.5t131 101.5t105 111t68 102t25 75t-25 75t-68 101.5t-105 110.5t-131 102t-152 74.5t-161 28.5zM643 -21q-88 0 -162 44t-117 120t-43 165q0 66 25.5 127t68.5 105t102.5 70t125.5 26q131 0 225 -94q94 -99 96 -234q0 -30 -5.5 -59t-15 -55.5t-23.5 -51.5t-32 -46
t-38.5 -39.5t-44.5 -32.5t-50 -24t-54.5 -15.5t-57.5 -5.5z" />
<glyph glyph-name="uniE60D" unicode="&#xe60d;"
d="M512 286v343h85v-426h-81v-2h-256v85h252zM512 -224q139 0 257 68.5t186.5 186.5t68.5 257t-68.5 257t-186.5 186.5t-257 68.5t-257 -68.5t-186.5 -186.5t-68.5 -257t68.5 -257t186.5 -186.5t257 -68.5z" />
<glyph glyph-name="uniE60F" unicode="&#xe60f;"
d="M707 748q-55 0 -105 -20.5t-90 -56.5q-40 36 -90 56.5t-105 20.5q-34 0 -67 -8t-62 -23t-54.5 -35.5t-45.5 -46.5t-34.5 -55.5t-22 -63t-7.5 -68.5q0 -110 69 -194l2 -2l344 -391q30 -33 73 -33t73 33l344 391q0 1 1 2h1q22 27 37.5 58.5t23.5 66t8 69.5q0 49 -14.5 94.5
t-42 82.5t-63.5 64.5t-80.5 43t-92.5 15.5z" />
<glyph glyph-name="uniE612" unicode="&#xe612;"
d="M774 336q4 -6 7 -12.5t4 -13.5t0.5 -14t-2.5 -13.5t-5.5 -13t-9.5 -11.5q0 -1 -1 -1l-427 -428q-28 -28 -65 -13q-11 5 -19 13q-18 18 -18 42.5t17 41.5l387 387l-387 387q-17 17 -17 41.5t17.5 42t42 17.5t42.5 -17l427 -428q1 0 1 -1z" />
</font>
</defs></svg>
... ...
No preview for this file type
No preview for this file type
/**
* 类型3文章(Note: article-type-three在一个页面中只能出现一次（业务注意点），代码实现按照只有一个类型3实现)
* @author: xuqi(qi.xu@yoho.cn)
* @date；2015/3/30
*/
var $ = require('jquery'),
IScroll = require('iscroll/iscroll-probe');
require('lazyload');
/**
* 初始化$事件并默认选中列表第一项
*/
exports.init = function() {
var container,
thumbContainer,
fixedThumbContainer,
prodList,
myscroll;
$(function() {
var isInit = true,
scrollToEl = document.querySelector('#wrapper .article-type-three'),
thumbs;
container = $('.article-type-three');
thumbContainer = container.find('.thumb-container');
prodList = container.find('.prod-list');
fixedThumbContainer = $('#wrapper')
.after(thumbContainer.clone().addClass('fixed-thumb-container fixed-bottom')) //append fixed-thumb-container after #wrapper
.next('.thumb-container');
thumbs = $('.thumb');
/**
* 计算小箭头位置函数
* @param index(类型为number,调用函数li的index)
*/
arrowPosition = function (element,index) {
//640为设计图尺寸，也就是font-size为40下的1rem，所以数值都参照640定
var container = element,
item = container.find('li'),
len = item.size(), //获取一共多少li
midNum = Math.ceil(len / 2), //获取中间li的index+1
documentFont = parseInt($("html").css("fontSize")), //获取html的font-size
itemMarginRight = parseInt(item.css('marginRight'))/ documentFont * 40, //获取li的margin-right在640下数值
itemWidth = item.width() / documentFont * 40, //获取li的widtht在640下数值
surPlusValue = (parseInt(container.css('padding-left'))/ documentFont * 40 - itemMarginRight)/2, //获取container的padding-left与itemMarginRight相减后除以2在640下数值
backgroundLeft; //container背景图片左偏移的位置
/**
* 320为640分辨率下中间值
* index-midNum为偏移中间li的数值
* (index - midNum) * (itemWidth + itemMarginRight)当前li偏移中间li的距离
* - surPlusValue 减去container的padding与li的margin-right差值的一半
* 除以40，由640下的px变为rem
*/
backgroundLeft = -(320 - (index - midNum) * (itemWidth + itemMarginRight) - surPlusValue)/40 + 'rem';
container.css({"backgroundPosition":backgroundLeft + " bottom"});
};
/**
* 分类的点击事件句柄
*/
function thumbClickEvt(e) {
var that = $(e.currentTarget),
index = that.index(),
other;
if (that.closest('.fixed-thumb-container').length > 0) {
other = thumbContainer.find('.thumb:eq(' + index + ')');
} else {
other = fixedThumbContainer.find('.thumb:eq(' + index + ')');
}
//set status of that & other synchronous
thumbs.find('.thumb').removeClass('focus');
that.addClass('focus');
other.addClass('focus');
arrowPosition(thumbContainer, index + 1);
arrowPosition(fixedThumbContainer, index + 1);
prodList.find('.prod')
.addClass('hide')
.eq(index)
.removeClass('hide');
//图片懒加载
$("img.lazy").lazyload({
placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
});
if (!isInit) {
if (myscroll) {
myscroll.scrollToElement(scrollToEl, 400);
}
} else {
isInit = false;
}
}
//点击分类，显示分类下推荐商品列表
thumbs.click(thumbClickEvt);
//默认选中第一个
thumbContainer.find('.thumb:first-child').click();
});
window.onload = function() {
var tContainerH = thumbContainer.outerHeight(), //thumber-container高度
containerH = container.height(), //article-type-three高度
containerTop = container.offset().top, //article-type-three offset top
wH = $(window).height();
myscroll = new IScroll('#wrapper', {
probeType: 3,
mouseWheel: true,
click: true
});
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
/**
* scroll前重置container状态
*/
function resetStatus() {
fixedThumbContainer.removeClass('fixed-top fixed-bottom absolute hide').css('top', '');
}
myscroll.on('scroll', function() {
var sTop = -this.y;
resetStatus();
if (sTop <= containerTop - wH + tContainerH) {
fixedThumbContainer
.addClass('fixed-bottom');
} else if (sTop <= containerTop) {
fixedThumbContainer
.addClass('hide');
} else if (sTop <= containerTop + containerH - tContainerH) {
fixedThumbContainer
.addClass('fixed-top');
} else if (sTop <= containerTop + containerH) {
fixedThumbContainer
.addClass('absolute')
.css({
top: containerTop + containerH - tContainerH - sTop
});
} else if (sTop > containerTop + containerH) {
fixedThumbContainer
.addClass('hide');
}
});
};
};
... ...
/**
* 类型3文章(Note: article-type-three在一个页面中只能出现一次（业务注意点），代码实现按照只有一个类型3实现)
* @author: xuqi(qi.xu@yoho.cn)
* @date；2015/3/30
*/
var $ = require('jquery');
require('lazyload');
/**
* 初始化$事件并默认选中列表第一项
*/
exports.init = function() {
$(function() {
var container = $('.article-type-three'),
thumbContainer = container.find('.thumb-container'),
prodList = container.find('.prod-list'),
wH = $(window).height(),
isInit = true,
tContainerH,
containerH,
containerTop;
/**
* 计算小箭头位置函数
* @param index(类型为number,调用函数li的index)
*/
arrowPosition = function (element,index) {
//640为设计图尺寸，也就是font-size为40下的1rem，所以数值都参照640定
var container = element,
item = container.find('li'),
len = item.size(), //获取一共多少li
midNum = Math.ceil(len / 2), //获取中间li的index+1
documentFont = parseInt($("html").css("fontSize")), //获取html的font-size
itemMarginRight = parseInt(item.css('marginRight'))/ documentFont * 40, //获取li的margin-right在640下数值
itemWidth = item.width() / documentFont * 40, //获取li的widtht在640下数值
surPlusValue = (parseInt(container.css('padding-left'))/ documentFont * 40 - itemMarginRight)/2, //获取container的padding-left与itemMarginRight相减后除以2在640下数值
backgroundLeft; //container背景图片左偏移的位置
/**
* 320为640分辨率下中间值
* index-midNum为偏移中间li的数值
* (index - midNum) * (itemWidth + itemMarginRight)当前li偏移中间li的距离
* - surPlusValue 减去container的padding与li的margin-right差值的一半
* 除以40，由640下的px变为rem
*/
backgroundLeft = -(320 - (index - midNum) * (itemWidth + itemMarginRight) - surPlusValue)/40 + 'rem';
container.css({"backgroundPosition":backgroundLeft + " bottom"});
};
//点击分类，显示分类下推荐商品列表
thumbContainer.delegate('.thumb', 'click', function() {
var curItem,
index;
curItem = $(this);
index = curItem.index();
thumbContainer.find('.thumb').removeClass('focus')
curItem.addClass('focus');
arrowPosition(thumbContainer,index + 1);
prodList.find('.prod')
.addClass('hide')
.eq(index)
.removeClass('hide');
//图片懒加载
$("img.lazy").lazyload({
placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
});
//scroll to top
if (!isInit) {
$('body').animate({
scrollTop: container.offset().top - (thumbContainer.hasClass('static') ? 0 : thumbContainer.outerHeight())
}, 400);
} else {
isInit = false;
}
});
//默认选中第一个
thumbContainer.find('.thumb:first-child').click();
tContainerH = thumbContainer.outerHeight(); //thumber-container高度
containerH = container.height(); //article-type-three高度
containerTop = container.offset().top; //article-type-three offset top
function resetStatus() {
thumbContainer.removeClass('static fixed-top fixed-bottom absolute').css('top', '');
prodList.css('margin-top', '');
}
//scroll时控制列表的位置
$(document).scroll(function() {
var sTop = $(this).scrollTop();
resetStatus();
//Tip: removeClass只用移除相邻状态即可
if (sTop <= containerTop - wH + tContainerH) {
thumbContainer
.addClass('fixed-bottom');
prodList.css({
'margin-top': tContainerH
});
} else if (sTop <= containerTop) {
thumbContainer
.addClass('static');
} else if (sTop <= containerTop + containerH - tContainerH) {
thumbContainer
.addClass('fixed-top');
prodList.css({
'margin-top': tContainerH
});
} else if (sTop <= containerTop + containerH) {
thumbContainer
.addClass('absolute')
.css({
top: containerTop + containerH - tContainerH
});
prodList.css({
'margin-top': tContainerH
});
} else if (sTop > containerTop + containerH) {
thumbContainer
.addClass('static');
}
});
//初始执行scroll从而初始化分类信息的位置（非0时默认会执行scroll）
if ($(document).scrollTop() === 0) {
$(document).scroll();
}
});
};
\ No newline at end of file
... ...
/**
* 模拟数据
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/3/30
*/
module.exports = function() {
return {
author: {
avatar: 'http://7xidk0.com1.z0.glb.clouddn.com/avater.png',
name: '山本耀司',
intro: '日本设计界一代宗师'
},
article: {
title: 'Skin Art Series INN 2015新品',
publishTime: '2月13日 12:34',
pageView: 3445,
content: [
{
bigImage: {
src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
alt: '复古风'
}
},
{
smallImage: {
imgs: [
{
src: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
alt: '复古fashion'
},
{
src: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
alt: '复古fashion'
}
]
}
},
{
text: {
deps: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka也动作频频'
}
},
{
recommendation: {
list: [
{
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: ''
},
{
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: ''
},
{
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: ''
},
{
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,
price: 589,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: ''
}
],
moreProds: ''
}
},
{
bigImage: {
src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
alt: '复古风'
}
},
{
text: {
deps: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka Tiger鬼冢' +
'虎也动作频频，于北京时间3.14日在东京发布其与意大利设计师AndreaPompilio合作的' +
'第2波--ONITSUKATIGER X ANDEREAPOMPILIO 2015秋冬新品便是其中之一。Yoho！Boy也' +
'为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”'
}
},
{
bigImage: {
src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
alt: '复古风'
}
},
{
smallImage: {
imgs: [
{
src: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
alt: '复古fashion'
},
{
src: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
alt: '复古fashion'
}
]
}
},
{
smallImage: {
imgs: [
{
src: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
alt: '复古fashion'
},
{
src: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
alt: '复古fashion'
}
]
}
},
{
bigImage: {
src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
alt: '复古风'
}
},
{
recommendation: {
list: [
{
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: ''
},
{
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: ''
},
{
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: ''
},
{
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,
price: 589,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: ''
}
],
moreProds: ''
}
},
{
bigImage: {
src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
alt: '复古风'
}
},
{
text: {
deps: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka Tiger鬼冢' +
'虎也动作频频，于北京时间3.14日在东京发布其与意大利设计师AndreaPompilio合作的' +
'第2波--ONITSUKATIGER X ANDEREAPOMPILIO 2015秋冬新品便是其中之一。Yoho！Boy也' +
'为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”'
}
},
{
collocation: {
list: [
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
type: 'shoe',
products: [
{
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: ''
},
{
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.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: ''
},
{
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: 'HALFGIRL 插肩棒球服短裙套装',
isLike: true,
price: 478,
salePrice: 208,
isSale: true,
isFew: true,
isNew: false,
url: ''
},
{
thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
price: 589,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: ''
}
]
},
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
type: 'lamp',
products: [
{
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.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: ''
},
{
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: 'CLOTtee 撞色连帽外套',
isLike: false,
price: 488,
salePrice: 139,
isSale: true,
isFew: true,
isNew: false,
url: ''
},
{
thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.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: ''
},
{
thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
price: 589,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: ''
}
]
},
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
type: 'dress',
products: [
{
thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.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: ''
},
{
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.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: ''
},
{
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: 'HALFGIRL 插肩棒球服短裙套装',
isLike: true,
price: 478,
salePrice: 208,
isSale: true,
isFew: true,
isNew: false,
url: ''
},
{
thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
price: 589,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: ''
}
]
},
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
type: 'watch',
products: [
{
thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.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: ''
},
{
thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.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: ''
},
{
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.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: ''
},
{
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: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
price: 589,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: ''
}
]
},
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
type: 'pent',
products: [
{
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.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: ''
},
{
thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.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: ''
},
{
thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.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: ''
},
{
thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
isLike: false,
price: 589,
salePrice: 148,
isSale: false,
isFew: false,
isNew: true,
url: ''
}
]
}
]
}
}
]
},
brands: [
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
name: 'HALFGIRL',
url: ''
},
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
name: '黄伟文Wyman',
url: ''
},
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
name: 'HIPANDA',
url: ''
},
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
name: 'holymoly',
url: ''
}
],
tags: [
{
name: '棒球服',
url: ''
},
{
name: '卫衣',
url: ''
},
{
name: '印花卫衣',
url: ''
},
{
name: '针织衫',
url: ''
},
{
name: '工装裤',
url: ''
},
],
otherArticle: [
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/pant.png',
title: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka',
url: ''
},
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/pant.png',
title: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka',
url: ''
},
{
thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/pant.png',
title: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka',
url: ''
}
]
};
};
\ No newline at end of file
... ...
/**
* detail相关js
* @author: yue.liu@yoho.cn
* @date；2015/3/31
*/
var $ = require('jquery'),
ellipsis = require('mlellipsis'),
timer = null;
require('lazyload');
/**
* 初始化页面加载时的文字截取和图片懒加载功能
*/
exports.init = function() {
//相关文章截取文字
ellipsis.init();
$(".post-list").find("span").each(function(){
$(this).mlellipsis(2);
});
//图片懒加载
clearTimeout(timer);
timer = setTimeout(function() {
$("img.lazy").lazyload({
placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
});
$("img.lazy").lazyload({
placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==",
event : "load",
container : $(".thumb-container")
});
}, 0)
};
\ No newline at end of file
... ...
/*! Sea.js 2.3.0 | seajs.org/LICENSE.md */
!function(a,b){function c(a){return function(b){return{}.toString.call(b)=="[object "+a+"]"}}function d(){return z++}function e(a){return a.match(C)[0]}function f(a){for(a=a.replace(D,"/"),a=a.replace(F,"$1/");a.match(E);)a=a.replace(E,"/");return a}function g(a){var b=a.length-1,c=a.charAt(b);return"#"===c?a.substring(0,b):".js"===a.substring(b-2)||a.indexOf("?")>0||"/"===c?a:a+".js"}function h(a){var b=u.alias;return b&&w(b[a])?b[a]:a}function i(a){var b=u.paths,c;return b&&(c=a.match(G))&&w(b[c[1]])&&(a=b[c[1]]+c[2]),a}function j(a){var b=u.vars;return b&&a.indexOf("{")>-1&&(a=a.replace(H,function(a,c){return w(b[c])?b[c]:a})),a}function k(a){var b=u.map,c=a;if(b)for(var d=0,e=b.length;e>d;d++){var f=b[d];if(c=y(f)?f(a)||a:a.replace(f[0],f[1]),c!==a)break}return c}function l(a,b){var c,d=a.charAt(0);if(I.test(a))c=a;else if("."===d)c=f((b?e(b):u.cwd)+a);else if("/"===d){var g=u.cwd.match(J);c=g?g[0]+a.substring(1):a}else c=u.base+a;return 0===c.indexOf("//")&&(c=location.protocol+c),c}function m(a,b){if(!a)return"";a=h(a),a=i(a),a=j(a),a=g(a);var c=l(a,b);return c=k(c)}function n(a){return a.hasAttribute?a.src:a.getAttribute("src",4)}function o(a,b,c){var d=K.createElement("script");if(c){var e=y(c)?c(a):c;e&&(d.charset=e)}p(d,b,a),d.async=!0,d.src=a,R=d,Q?P.insertBefore(d,Q):P.appendChild(d),R=null}function p(a,b,c){function d(){a.onload=a.onerror=a.onreadystatechange=null,u.debug||P.removeChild(a),a=null,b()}var e="onload"in a;e?(a.onload=d,a.onerror=function(){B("error",{uri:c,node:a}),d()}):a.onreadystatechange=function(){/loaded|complete/.test(a.readyState)&&d()}}function q(){if(R)return R;if(S&&"interactive"===S.readyState)return S;for(var a=P.getElementsByTagName("script"),b=a.length-1;b>=0;b--){var c=a[b];if("interactive"===c.readyState)return S=c}}function r(a){var b=[];return a.replace(U,"").replace(T,function(a,c,d){d&&b.push(d)}),b}function s(a,b){this.uri=a,this.dependencies=b||[],this.exports=null,this.status=0,this._waitings={},this._remain=0}if(!a.seajs){var t=a.seajs={version:"2.3.0"},u=t.data={},v=c("Object"),w=c("String"),x=Array.isArray||c("Array"),y=c("Function"),z=0,A=u.events={};t.on=function(a,b){var c=A[a]||(A[a]=[]);return c.push(b),t},t.off=function(a,b){if(!a&&!b)return A=u.events={},t;var c=A[a];if(c)if(b)for(var d=c.length-1;d>=0;d--)c[d]===b&&c.splice(d,1);else delete A[a];return t};var B=t.emit=function(a,b){var c=A[a],d;if(c){c=c.slice();for(var e=0,f=c.length;f>e;e++)c[e](b)}return t},C=/[^?#]*\//,D=/\/\.\//g,E=/\/[^/]+\/\.\.\//,F=/([^:/])\/+\//g,G=/^([^/:]+)(\/.+)$/,H=/{([^{]+)}/g,I=/^\/\/.|:\//,J=/^.*?\/\/.*?\//,K=document,L=location.href&&0!==location.href.indexOf("about:")?e(location.href):"",M=K.scripts,N=K.getElementById("seajsnode")||M[M.length-1],O=e(n(N)||L);t.resolve=m;var P=K.head||K.getElementsByTagName("head")[0]||K.documentElement,Q=P.getElementsByTagName("base")[0],R,S;t.request=o;var T=/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*\(\s*(["'])(.+?)\1\s*\)/g,U=/\\\\/g,V=t.cache={},W,X={},Y={},Z={},$=s.STATUS={FETCHING:1,SAVED:2,LOADING:3,LOADED:4,EXECUTING:5,EXECUTED:6};s.prototype.resolve=function(){for(var a=this,b=a.dependencies,c=[],d=0,e=b.length;e>d;d++)c[d]=s.resolve(b[d],a.uri);return c},s.prototype.load=function(){var a=this;if(!(a.status>=$.LOADING)){a.status=$.LOADING;var c=a.resolve();B("load",c);for(var d=a._remain=c.length,e,f=0;d>f;f++)e=s.get(c[f]),e.status<$.LOADED?e._waitings[a.uri]=(e._waitings[a.uri]||0)+1:a._remain--;if(0===a._remain)return a.onload(),b;var g={};for(f=0;d>f;f++)e=V[c[f]],e.status<$.FETCHING?e.fetch(g):e.status===$.SAVED&&e.load();for(var h in g)g.hasOwnProperty(h)&&g[h]()}},s.prototype.onload=function(){var a=this;a.status=$.LOADED,a.callback&&a.callback();var b=a._waitings,c,d;for(c in b)b.hasOwnProperty(c)&&(d=V[c],d._remain-=b[c],0===d._remain&&d.onload());delete a._waitings,delete a._remain},s.prototype.fetch=function(a){function c(){t.request(g.requestUri,g.onRequest,g.charset)}function d(){delete X[h],Y[h]=!0,W&&(s.save(f,W),W=null);var a,b=Z[h];for(delete Z[h];a=b.shift();)a.load()}var e=this,f=e.uri;e.status=$.FETCHING;var g={uri:f};B("fetch",g);var h=g.requestUri||f;return!h||Y[h]?(e.load(),b):X[h]?(Z[h].push(e),b):(X[h]=!0,Z[h]=[e],B("request",g={uri:f,requestUri:h,onRequest:d,charset:u.charset}),g.requested||(a?a[g.requestUri]=c:c()),b)},s.prototype.exec=function(){function a(b){return s.get(a.resolve(b)).exec()}var c=this;if(c.status>=$.EXECUTING)return c.exports;c.status=$.EXECUTING;var e=c.uri;a.resolve=function(a){return s.resolve(a,e)},a.async=function(b,c){return s.use(b,c,e+"_async_"+d()),a};var f=c.factory,g=y(f)?f(a,c.exports={},c):f;return g===b&&(g=c.exports),delete c.factory,c.exports=g,c.status=$.EXECUTED,B("exec",c),g},s.resolve=function(a,b){var c={id:a,refUri:b};return B("resolve",c),c.uri||t.resolve(c.id,b)},s.define=function(a,c,d){var e=arguments.length;1===e?(d=a,a=b):2===e&&(d=c,x(a)?(c=a,a=b):c=b),!x(c)&&y(d)&&(c=r(""+d));var f={id:a,uri:s.resolve(a),deps:c,factory:d};if(!f.uri&&K.attachEvent){var g=q();g&&(f.uri=g.src)}B("define",f),f.uri?s.save(f.uri,f):W=f},s.save=function(a,b){var c=s.get(a);c.status<$.SAVED&&(c.id=b.id||a,c.dependencies=b.deps||[],c.factory=b.factory,c.status=$.SAVED,B("save",c))},s.get=function(a,b){return V[a]||(V[a]=new s(a,b))},s.use=function(b,c,d){var e=s.get(d,x(b)?b:[b]);e.callback=function(){for(var b=[],d=e.resolve(),f=0,g=d.length;g>f;f++)b[f]=V[d[f]].exec();c&&c.apply(a,b),delete e.callback},e.load()},t.use=function(a,b){return s.use(a,b,u.cwd+"_use_"+d()),t},s.define.cmd={},a.define=s.define,t.Module=s,u.fetchedList=Y,u.cid=d,t.require=function(a){var b=s.get(s.resolve(a));return b.status<$.EXECUTING&&(b.onload(),b.exec()),b.exports},u.base=O,u.dir=O,u.cwd=L,u.charset="utf-8",t.config=function(a){for(var b in a){var c=a[b],d=u[b];if(d&&v(d))for(var e in c)d[e]=c[e];else x(d)?c=d.concat(c):"base"===b&&("/"!==c.slice(-1)&&(c+="/"),c=l(c)),u[b]=c}return B("config",a),t}}}(this);
;seajs.config({
base: 'localhost:5000/dist'
});
\ No newline at end of file
... ...
@import "compass/css3";
.article-author {
height: 88rem / $pxConvertRem;
line-height: 88rem / $pxConvertRem;
border-bottom: 1px solid #e0e0e0;
background: #fff;
> * {
margin-left: 30rem / $pxConvertRem;
}
.avatar {
float: left;
position: relative;
top: 50%;
margin-top: -25rem / $pxConvertRem;
width: 50rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
vertical-align: middle;
@include border-radius(50rem / $pxConvertRem);
}
.name {
float: left;
font-size: 28rem / $pxConvertRem;
color: #000;
}
.intro {
float: left;
font-size: 28rem / $pxConvertRem;
color: #b0b0b0;
}
}
\ No newline at end of file
... ...
.detail-tag {
margin: 28rem / $pxConvertRem 0 0 0;
padding: 0 0 30rem / $pxConvertRem 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
li {
float: left;
margin: 31rem / $pxConvertRem 0 0 31rem / $pxConvertRem;
a {
display: block;
padding: 0 36rem / $pxConvertRem;
height: 50rem / $pxConvertRem;
line-height: 50rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #fff;
background: #000;
text-decoration: none;
}
}
}
\ No newline at end of file
... ...
.article-title {
padding: 16rem / $pxConvertRem 0 26rem / $pxConvertRem 30rem / $pxConvertRem;
background: #fff;
.title {
line-height: 60rem / $pxConvertRem;
color: #000;
font-size: 40rem / $pxConvertRem;
font-weight:bold;
}
.date-pageview {
color: #b0b0b0;
line-height: 38rem / $pxConvertRem;
font-size: 24rem / $pxConvertRem;
.iconfont {
margin: 0 4px 0 0;
vertical-align: 9%;
font-size: 24rem / $pxConvertRem;
}
}
}
\ No newline at end of file
... ...
.article-type-five {
background: #fff;
padding: 0 0 0 15rem / $pxConvertRem;
margin: 0 0 30rem / $pxConvertRem 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
h2 {
margin: 0 0 0 -15rem / $pxConvertRem;
line-height: 104rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #b0b0b0;
text-align: center;
}
.more-good {
padding: 0 0 0 30rem / $pxConvertRem;
margin: 0 0 0 -15rem / $pxConvertRem;
line-height: 88rem / $pxConvertRem;
border-top: 1px solid #e0e0e0;
a {
text-decoration: none;
color: #444;
font-size: 30rem / $pxConvertRem;
}
i {
float: right;
margin: 0 30rem / $pxConvertRem 0 0;
font-size: 28rem / $pxConvertRem;
color: #b0b0b0
}
}
}
.good-info {
float: left;
width: 276rem / $pxConvertRem;
height: 466rem / $pxConvertRem;
margin: 0 15rem / $pxConvertRem;
}
.good-detail-img {
position: relative;
.good-islike {
position: absolute;
top: 10rem / $pxConvertRem;
right: 10rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
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;
}
.market-price{
margin: 0 0 0 5rem / $pxConvertRem;
color: #b0b0b0;
text-decoration:line-through;
}
}
}
\ No newline at end of file
... ...
.article-type-four {
padding: 0 0 8rem / $pxConvertRem 0;
background: #fff;
img {
float: right;
width: 315rem / $pxConvertRem;
height: 420rem / $pxConvertRem;
}
img:first-child {
float: left;
}
}
\ No newline at end of file
... ...
$pxConvertRem : 40;
.article-type-one {
padding: 0 0 5rem / $pxConvertRem 0;
background: #fff;
}
.article-type-one .img {
width: 100%;
height: 640rem / $pxConvertRem;
}
\ No newline at end of file
... ...
@import "clothes-type/*.png";
$pxConvertRem : 40;
.thumb-container {
font-size: 0;
padding: 30rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
z-index: 10;
background-color: transparent;
background-image: url('../img/thumb-container-bg.png');
background-repeat: no-repeat;
background-size: 200% 100%;
&.fixed-top {
position: fixed;
left: 0;
right: 0;
top: 0;
}
&.fixed-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #fff;
.thumb.focus .arrow {
display: none;
}
}
&.absolute {
position: absolute;
left: 0;
right: 0;
}
&.static {
position: static;
}
.thumb {
display: inline-block;
position: relative;
margin-right: 22rem / $pxConvertRem;
padding-bottom: 30rem / $pxConvertRem;
&:last-child {
margin-right: 0;
}
&.focus {
.thumb-img {
border-color: #000;
}
.arrow {
display: block;
position: absolute;
width: 25rem / $pxConvertRem;
height: 14rem / $pxConvertRem;
bottom: -1px;
left: 50%;
margin: 0 0 0 -16rem / $pxConvertRem;
z-index: 12;
background: url('../img/arrow.png') no-repeat;
background-size: 100% 100%;
}
}
.thumb-img {
height: 134rem / $pxConvertRem;
width: 96rem / $pxConvertRem;
border: 1px solid transparent;
}
}
}
.article-type-three {
background: #fff;
.prod-list {
padding: 28rem / $pxConvertRem 0 0 15rem / $pxConvertRem;
}
.clothe-type {
position: absolute;
right: 6rem / $pxConvertRem;
bottom: 34rem / $pxConvertRem;
background: url('../img/clothes-type-s77e599c373.png') no-repeat;
width: 20px;
height: 20px;
background-size: 100%;
&.bag {
background-position: 0 0;
}
&.cloth {
background-position: 0 -47px * (20/47);
}
&.dress {
background-position: 0 -94px * (20/47);
}
&.headset {
background-position: 0 -141px * (20/47);
}
&.lamp {
background-position: 0 -188px * (20/47);
}
&.pent {
background-position: 0 -233px * (20/47);
}
&.shoe {
background-position: 0 -280px * (20/47);
}
&.watch {
background-position: 0 -327px * (20/47);
}
}
}
\ No newline at end of file
... ...
.article-type-two {
background: #fff;
padding: 20rem / $pxConvertRem 30rem / $pxConvertRem;
line-height: 46rem / $pxConvertRem;
font-size: 28rem / $pxConvertRem;
color: #444;
}
\ No newline at end of file
... ...
@import "article-title", "article-type-one", "article-type-two",
"article-type-three", "article-type-four", "article-type-five";
\ No newline at end of file
... ...
@mixin relatedTitle {
margin: 0 29rem / $pxConvertRem;
background: #fff;
border: 1px solid #e0e0e0;
border-bottom: none;
line-height: 72rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
color: #b0b0b0;
text-align: center;
}
.related-brand {
margin: 30rem / $pxConvertRem 0 0 0;
h2 {
@include relatedTitle;
}
.brand-list {
padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;
background: #fff;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
li {
float: left;
width: 158rem / $pxConvertRem;
height: 120rem / $pxConvertRem;
border-left: 1px solid #e0e0e0;
a {
display: block;
text-decoration: none;
}
.brand-logo {
display: table-cell;
width: 158rem / $pxConvertRem;
height: 94rem / $pxConvertRem;
vertical-align:middle;
img {
display: block;
max-width: 158rem / $pxConvertRem;
max-height: 94rem / $pxConvertRem;
vertical-align: middle;
margin: 0 auto;
}
}
.brand-name {
margin: 10rem / $pxConvertRem 0 0 0;
line-height: 24rem / $pxConvertRem;
font-size: 18rem / $pxConvertRem;
color: #babac2;
text-align: center;
text-decoration: none;
border-bottom: none;
overflow: hidden;
}
}
li:first-child {
border-left: none;
}
}
}
\ No newline at end of file
... ...
$hack_safair_begin:'[;';
$hack_safair_end:';]';
.related-post {
margin: 30rem / $pxConvertRem 0 0 0;
h2 {
@include relatedTitle;
}
.post-list {
background: #fff;
padding: 0 0 30rem / $pxConvertRem 0;
border-top: 1px solid #e0e0e0;
li {
padding: 30rem / $pxConvertRem 0 0 0;
margin: 0 0 10rem / $pxConvertRem 0;
a {
display: block;
}
img {
float: left;
margin: 0 0 0 30rem / $pxConvertRem;
width: 182rem / $pxConvertRem;
height: 162rem / $pxConvertRem;
}
span {
float: left;
width: 360rem / $pxConvertRem;
#{$hack_safair_begin}width: 360rem / $pxConvertRem#{$hack_safair_end};
margin: 20rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
line-height: 45rem / $pxConvertRem;
color: #444;
font-size: 28rem / $pxConvertRem;
}
}
}
}
\ No newline at end of file
... ...
$pxConvertRem : 40;
@import "compass";
@include global-reset();
@import "article-author", "article", "related-brand", "article-tag", "related-post";
body {
font-family: helvetica,Arial,"黑体";
background: #f0f0f0;
}
.hide {
display: none;
}
/**
* 闭合浮动
* @Doc: http://nicolasgallagher.com/micro-clearfix-hack/
*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* IE6-7 触发 hasLayout */
}
/**
* 字体图标样式
*/
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont.eot'); /* IE9*/
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-sharedviewicon:before { content: "\e60c"; }
.icon-sharedtimeicon:before { content: "\e60d"; }
.icon-sharedlikebuttomhighlighted:before { content: "\e60f"; }
.icon-sharedenterbuttomnormal:before { content: "\e612"; }
#wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
\ No newline at end of file
... ...
/**
* 路由处理文件
* author: xuqi(qi.xu@yoho.cn)
* date: 2015/3/27
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/3/27
*/
var page = require('./views/controller/page');
var detail = require('./views/controller/detail');
module.exports = function(app) {
app.get('/', page.show);
app.get('/', detail.show);
app.get('/optimize', detail.optimize)
};
\ No newline at end of file
... ...
/**
* detail页控制器文件
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/3/27
*/
var data = require('../../public/js/data.js')();
exports.show = function(req, res) {
res.render('detail', {
detail: data,
layout: '../layouts/layout'
});
};
exports.optimize = function(req, res) {
res.render('detail-optimize', {
detail: data,
layout: '../layouts/layout-optimize'
});
}
\ No newline at end of file
... ...
exports.show = function(req, res) {
res.render('index', {
layout: '../layouts/layout'
});
}
\ No newline at end of file
<div id="wrapper">
<div id="scroller">
{{# detail}}
{{> article_author}}
{{> article}}
{{> related_brand}}
{{> article_tag}}
{{> related_post}}
{{/ detail}}
</div>
</div>
\ No newline at end of file
... ...
{{# detail}}
{{> article_author}}
{{> article}}
{{> related_brand}}
{{> article_tag}}
{{> related_post}}
{{/ detail}}
\ No newline at end of file
... ...
Hello, success
\ No newline at end of file
{{# author}}
<div class="article-author partial clearfix">
<img class="avatar" src="{{avatar}}">
<span class="name">{{name}}</span>
<span class="intro">{{intro}}</span>
</div>
{{/ author}}
\ No newline at end of file
... ...
<div class="detail-tag">
<ul class="tag-list clearfix">
{{# tags}}
<li>
<a href="{{url}}">{{name}}</a>
</li>
{{/ tags}}
</ul>
</div>
... ...
<div class="article-title partial">
<p class="title">{{title}}</p>
<p class="date-pageview">
<i class="iconfont">&#xe60d;</i>
{{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp;
<i class="iconfont">&#xe60c;</i>
{{pageView}}
</p>
</div>
\ No newline at end of file
... ...
{{# recommendation}}
<div class="article-type-five clearfix">
<h2>相关推荐</h2>
<div class="good-list clearfix">
{{# list}}
{{> good_info}}
{{/ list}}
</div>
<div class="more-good clearfix">
<a href="{{moreProds}}">
更多商品
<i class="iconfont">&#xe612;</i>
</a>
</div>
</div>
{{/ recommendation}}
... ...
{{# smallImage}}
<div class="article-type-four clearfix">
{{# imgs}}
<img class="lazy" data-original="{{src}}" alt="">
{{/ imgs}}
</div>
{{/ smallImage}}
\ No newline at end of file
... ...
{{# bigImage}}
<div class="article-type-one">
<img class="img lazy" data-original="{{src}}" alt="">
</div>
{{/ bigImage}}
\ No newline at end of file
... ...
{{# collocation}}
<div class="article-type-three">
<ul class="thumb-container clearfix">
{{# list}}
<li class="thumb">
<img class="thumb-img lazy" data-original="{{thumb}}">
<span class="clothe-type {{type}}"></span>
</li>
{{/ list}}
</ul>
<div class="prod-list clearfix">
{{# list}}
<div class="prod hide">
{{# products}}
{{> good_info}}
{{/ products}}
</div>
{{/ list}}
</div>
</div>
{{/ collocation}}
... ...
{{# text}}
<div class="article-type-two">
{{deps}}
</div>
{{/ text}}
\ No newline at end of file
... ...
{{# article}}
{{> article_title}}
{{# content}}
{{> article_type_one}}
{{> article_type_two}}
{{> article_type_three}}
{{> article_type_four}}
{{> article_type_five}}
{{/ content}}
{{/ article}}
\ No newline at end of file
... ...
<div class="detail-author clearfix">
<div class="detail-avater"></div>
</div>
\ No newline at end of file
... ...
<div class="good-info">
<div class="good-detail-img">
<a class="good-islike {{# isLike}}good-like{{/ isLike}} iconfont" href="javascript:;">&#xe60f;</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">￥{{salePrice}}</span>
<span class="market-price">￥{{price}}</span>
</div>
</div>
</div>
\ No newline at end of file
... ...
<div class="related-brand">
<h2>相关品牌</h2>
<ul class="brand-list clearfix">
{{# brands}}
<li>
<a href="{{url}}">
<div class="brand-logo">
<img class="lazy" data-original="{{thumb}}" alt="">
</div>
<p class="brand-name">{{name}}</p>
</a>
</li>
{{/ brands}}
</ul>
</div>
\ No newline at end of file
... ...
<div class="related-post">
<h2>相关文章</h2>
<ul class="post-list">
{{# otherArticle}}
<li>
<a class="clearfix" href="{{url}}">
<img class="lazy" data-original="{{thumb}}" alt="">
<span>{{title}}</span>
</a>
</li>
{{/ otherArticle}}
</ul>
</div>
\ No newline at end of file
... ...