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
1 /** 1 /**
2 * Node服务端入口文件 2 * Node服务端入口文件
3 - * author: xuqi(qi.xu@yoho.cn)  
4 - * date: 2015/3/27 3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date: 2015/3/27
5 */ 5 */
6 var express = require('express'), 6 var express = require('express'),
7 path = require('path'), 7 path = require('path'),
@@ -10,12 +10,13 @@ javascripts_dir = "./public/js" @@ -10,12 +10,13 @@ javascripts_dir = "./public/js"
10 10
11 # You can select your preferred output style here (can be overridden via the command line): 11 # You can select your preferred output style here (can be overridden via the command line):
12 # output_style = :expanded or :nested or :compact or :compressed 12 # output_style = :expanded or :nested or :compact or :compressed
  13 + output_style = :compressed
13 14
14 # To enable relative paths to assets via compass helper functions. Uncomment: 15 # To enable relative paths to assets via compass helper functions. Uncomment:
15 -relative_assets = true 16 + relative_assets = true
16 17
17 # To disable debugging comments that display the original location of your selectors. Uncomment: 18 # To disable debugging comments that display the original location of your selectors. Uncomment:
18 -line_comments = false 19 + line_comments = false
19 20
20 21
21 # If you prefer the indented syntax, you might want to regenerate this 22 # If you prefer the indented syntax, you might want to regenerate this
@@ -23,4 +24,5 @@ line_comments = false @@ -23,4 +24,5 @@ line_comments = false
23 # preferred_syntax = :sass 24 # preferred_syntax = :sass
24 # and then run: 25 # and then run:
25 # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
26 -Encoding.default_external = "utf-8";  
  27 +
  28 +Encoding.default_external = "utf-8"
@@ -54,12 +54,12 @@ gulp.task('build', function() { @@ -54,12 +54,12 @@ gulp.task('build', function() {
54 gulp.task('build-debug', function() { 54 gulp.task('build-debug', function() {
55 gulp.src(['public/lib/sea.js', 'dist/yohobuy-mobile/1.0.0/index-debug.js']) 55 gulp.src(['public/lib/sea.js', 'dist/yohobuy-mobile/1.0.0/index-debug.js'])
56 .pipe(concat('all-debug.js')) 56 .pipe(concat('all-debug.js'))
57 - .pipe(gulp.dest('dist')) 57 + .pipe(gulp.dest('public/dist'))
58 }); 58 });
59 59
60 //generate all.js for production ENV 60 //generate all.js for production ENV
61 gulp.task('build-production', function() { 61 gulp.task('build-production', function() {
62 gulp.src(['public/lib/sea.js', 'dist/yohobuy-mobile/1.0.0/index.js']) 62 gulp.src(['public/lib/sea.js', 'dist/yohobuy-mobile/1.0.0/index.js'])
63 .pipe(concat('all.js')) 63 .pipe(concat('all.js'))
64 - .pipe(gulp.dest('dist')) 64 + .pipe(gulp.dest('public/dist'))
65 }); 65 });
1 var yohobuyMobile; 1 var yohobuyMobile;
2 2
  3 +require('./public/js/article-type-three');
  4 +require('./public/js/article-type-three-optimize');
  5 +require('./public/js/detail');
  6 +
3 module.exports = yohobuyMobile; 7 module.exports = yohobuyMobile;
  1 +<!DOCTYPE html>
  2 +<html>
  3 + <head>
  4 + <title></title>
  5 + <meta name="apple-mobile-web-app-capable" content="yes">
  6 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
  7 + <meta content="telephone=no" name="format-detection">
  8 + <script type="text/javascript">
  9 + (function (doc, win) {
  10 + var docEl = doc.documentElement,
  11 + resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  12 + recalc = function () {
  13 + var clientWidth = docEl.clientWidth;
  14 + if (!clientWidth) {
  15 + return;
  16 + }
  17 + docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  18 + };
  19 +
  20 + if (!doc.addEventListener) {
  21 + return;
  22 + }
  23 + win.addEventListener(resizeEvt, recalc, false);
  24 + doc.addEventListener('DOMContentLoaded', recalc, false);
  25 + })(document, window);
  26 + </script>
  27 + <link rel="stylesheet" href="../css/detail.css">
  28 + </head>
  29 + <body>
  30 + <div id="detail-container" class="detail-container" style="display:none">
  31 + {{{body}}}
  32 + </div>
  33 + </body>
  34 + <script src="//localhost:5000/dist/all-debug.js"></script>
  35 + <script type="text/javascript">
  36 + seajs.use(['jquery/1.8.3/jquery-debug',
  37 + 'yohobuy-mobile/1.0.0/public/js/article-type-three-optimize-debug',
  38 + 'yohobuy-mobile/1.0.0/public/js/detail-debug'], function($, article, detail) {
  39 + if (article) {
  40 + article.init();
  41 + }
  42 +
  43 + if(detail) {
  44 + detail.init();
  45 + }
  46 +
  47 + $(".detail-container").show();
  48 + });
  49 + </script>
  50 +</html>
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 - <title>Hello</title> 4 + <title></title>
  5 + <meta name="apple-mobile-web-app-capable" content="yes">
  6 + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
  7 + <meta content="telephone=no" name="format-detection">
  8 + <script type="text/javascript">
  9 + (function (doc, win) {
  10 + var docEl = doc.documentElement,
  11 + resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  12 + recalc = function () {
  13 + var clientWidth = docEl.clientWidth;
  14 + if (!clientWidth) {
  15 + return;
  16 + }
  17 + docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
  18 + };
  19 +
  20 + if (!doc.addEventListener) {
  21 + return;
  22 + }
  23 + win.addEventListener(resizeEvt, recalc, false);
  24 + doc.addEventListener('DOMContentLoaded', recalc, false);
  25 + })(document, window);
  26 + </script>
  27 + <link rel="stylesheet" href="../css/detail.css">
5 </head> 28 </head>
6 <body> 29 <body>
  30 + <div id="detail-container" class="detail-container" style="display:none">
7 {{{body}}} 31 {{{body}}}
  32 + </div>
8 </body> 33 </body>
  34 + <script src="//localhost:5000/dist/all-debug.js"></script>
  35 + <script type="text/javascript">
  36 + seajs.use(['jquery/1.8.3/jquery-debug',
  37 + 'yohobuy-mobile/1.0.0/public/js/article-type-three-debug',
  38 + 'yohobuy-mobile/1.0.0/public/js/detail-debug'], function($, article, detail) {
  39 + $(".detail-container").show();
  40 + if (article) {
  41 + article.init();
  42 + }
  43 +
  44 + if(detail) {
  45 + detail.init();
  46 + }
  47 + });
  48 + </script>
9 </html> 49 </html>
@@ -13,8 +13,11 @@ @@ -13,8 +13,11 @@
13 "spm": { 13 "spm": {
14 "main": "index.js", 14 "main": "index.js",
15 "dependencies": { 15 "dependencies": {
16 - "jquery": "2.1.3",  
17 - "jquery-pjax": "1.0.1" 16 + "jquery": "1.8.3",
  17 + "jquery-pjax": "1.0.1",
  18 + "mlellipsis": "0.0.2",
  19 + "lazyload": "1.9.5",
  20 + "iscroll": "5.1.2"
18 }, 21 },
19 "devDependencies": { 22 "devDependencies": {
20 "expect.js": "0.3.1" 23 "expect.js": "0.3.1"
No preview for this file type
  1 +<?xml version="1.0" standalone="no"?>
  2 +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
  3 +<svg xmlns="http://www.w3.org/2000/svg">
  4 +<metadata>
  5 +Created by FontForge 20120731 at Mon Mar 30 15:46:04 2015
  6 + By Ads
  7 +</metadata>
  8 +<defs>
  9 +<font id="iconfont" horiz-adv-x="1024" >
  10 + <font-face
  11 + font-family="iconfont"
  12 + font-weight="500"
  13 + font-stretch="normal"
  14 + units-per-em="1024"
  15 + panose-1="2 0 6 3 0 0 0 0 0 0"
  16 + ascent="812"
  17 + descent="-212"
  18 + x-height="792"
  19 + bbox="0 -224 1285 800"
  20 + underline-thickness="50"
  21 + underline-position="-100"
  22 + unicode-range="U+0078-E612"
  23 + />
  24 +<missing-glyph horiz-adv-x="374"
  25 +d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
  26 + <glyph glyph-name=".notdef" horiz-adv-x="374"
  27 +d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
  28 + <glyph glyph-name=".null" horiz-adv-x="0"
  29 + />
  30 + <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"
  31 + />
  32 + <glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
  33 +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
  34 +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
  35 +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" />
  36 + <glyph glyph-name="uniE60C" unicode="&#xe60c;" horiz-adv-x="1323"
  37 +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
  38 +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
  39 +t-38.5 -39.5t-44.5 -32.5t-50 -24t-54.5 -15.5t-57.5 -5.5z" />
  40 + <glyph glyph-name="uniE60D" unicode="&#xe60d;"
  41 +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" />
  42 + <glyph glyph-name="uniE60F" unicode="&#xe60f;"
  43 +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
  44 +t-42 82.5t-63.5 64.5t-80.5 43t-92.5 15.5z" />
  45 + <glyph glyph-name="uniE612" unicode="&#xe612;"
  46 +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" />
  47 + </font>
  48 +</defs></svg>
No preview for this file type
No preview for this file type
  1 +/**
  2 + * 类型3文章(Note: article-type-three在一个页面中只能出现一次（业务注意点），代码实现按照只有一个类型3实现)
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date；2015/3/30
  5 + */
  6 +var $ = require('jquery'),
  7 + IScroll = require('iscroll/iscroll-probe');
  8 +require('lazyload');
  9 +
  10 +/**
  11 + * 初始化$事件并默认选中列表第一项
  12 + */
  13 +exports.init = function() {
  14 + var container,
  15 + thumbContainer,
  16 + fixedThumbContainer,
  17 + prodList,
  18 + myscroll;
  19 +
  20 + $(function() {
  21 + var isInit = true,
  22 + scrollToEl = document.querySelector('#wrapper .article-type-three'),
  23 + thumbs;
  24 +
  25 + container = $('.article-type-three');
  26 + thumbContainer = container.find('.thumb-container');
  27 + prodList = container.find('.prod-list');
  28 +
  29 + fixedThumbContainer = $('#wrapper')
  30 + .after(thumbContainer.clone().addClass('fixed-thumb-container fixed-bottom')) //append fixed-thumb-container after #wrapper
  31 + .next('.thumb-container');
  32 +
  33 + thumbs = $('.thumb');
  34 + /**
  35 + * 计算小箭头位置函数
  36 + * @param index(类型为number,调用函数li的index)
  37 + */
  38 + arrowPosition = function (element,index) {
  39 + //640为设计图尺寸，也就是font-size为40下的1rem，所以数值都参照640定
  40 + var container = element,
  41 + item = container.find('li'),
  42 + len = item.size(), //获取一共多少li
  43 + midNum = Math.ceil(len / 2), //获取中间li的index+1
  44 + documentFont = parseInt($("html").css("fontSize")), //获取html的font-size
  45 + itemMarginRight = parseInt(item.css('marginRight'))/ documentFont * 40, //获取li的margin-right在640下数值
  46 + itemWidth = item.width() / documentFont * 40, //获取li的widtht在640下数值
  47 + surPlusValue = (parseInt(container.css('padding-left'))/ documentFont * 40 - itemMarginRight)/2, //获取container的padding-left与itemMarginRight相减后除以2在640下数值
  48 + backgroundLeft; //container背景图片左偏移的位置
  49 +
  50 + /**
  51 + * 320为640分辨率下中间值
  52 + * index-midNum为偏移中间li的数值
  53 + * (index - midNum) * (itemWidth + itemMarginRight)当前li偏移中间li的距离
  54 + * - surPlusValue 减去container的padding与li的margin-right差值的一半
  55 + * 除以40，由640下的px变为rem
  56 + */
  57 + backgroundLeft = -(320 - (index - midNum) * (itemWidth + itemMarginRight) - surPlusValue)/40 + 'rem';
  58 + container.css({"backgroundPosition":backgroundLeft + " bottom"});
  59 + };
  60 +
  61 + /**
  62 + * 分类的点击事件句柄
  63 + */
  64 + function thumbClickEvt(e) {
  65 + var that = $(e.currentTarget),
  66 + index = that.index(),
  67 + other;
  68 +
  69 + if (that.closest('.fixed-thumb-container').length > 0) {
  70 + other = thumbContainer.find('.thumb:eq(' + index + ')');
  71 + } else {
  72 + other = fixedThumbContainer.find('.thumb:eq(' + index + ')');
  73 + }
  74 +
  75 + //set status of that & other synchronous
  76 + thumbs.find('.thumb').removeClass('focus');
  77 +
  78 + that.addClass('focus');
  79 + other.addClass('focus');
  80 +
  81 + arrowPosition(thumbContainer, index + 1);
  82 + arrowPosition(fixedThumbContainer, index + 1);
  83 +
  84 + prodList.find('.prod')
  85 + .addClass('hide')
  86 + .eq(index)
  87 + .removeClass('hide');
  88 +
  89 + //图片懒加载
  90 + $("img.lazy").lazyload({
  91 + placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
  92 + });
  93 +
  94 + if (!isInit) {
  95 + if (myscroll) {
  96 + myscroll.scrollToElement(scrollToEl, 400);
  97 + }
  98 + } else {
  99 + isInit = false;
  100 + }
  101 + }
  102 + //点击分类，显示分类下推荐商品列表
  103 + thumbs.click(thumbClickEvt);
  104 + //默认选中第一个
  105 + thumbContainer.find('.thumb:first-child').click();
  106 + });
  107 +
  108 + window.onload = function() {
  109 + var tContainerH = thumbContainer.outerHeight(), //thumber-container高度
  110 + containerH = container.height(), //article-type-three高度
  111 + containerTop = container.offset().top, //article-type-three offset top
  112 + wH = $(window).height();
  113 +
  114 + myscroll = new IScroll('#wrapper', {
  115 + probeType: 3,
  116 + mouseWheel: true,
  117 + click: true
  118 + });
  119 +
  120 + document.addEventListener('touchmove', function (e) {
  121 + e.preventDefault();
  122 + }, false);
  123 +
  124 + /**
  125 + * scroll前重置container状态
  126 + */
  127 + function resetStatus() {
  128 + fixedThumbContainer.removeClass('fixed-top fixed-bottom absolute hide').css('top', '');
  129 + }
  130 +
  131 + myscroll.on('scroll', function() {
  132 + var sTop = -this.y;
  133 +
  134 + resetStatus();
  135 +
  136 + if (sTop <= containerTop - wH + tContainerH) {
  137 + fixedThumbContainer
  138 + .addClass('fixed-bottom');
  139 + } else if (sTop <= containerTop) {
  140 + fixedThumbContainer
  141 + .addClass('hide');
  142 + } else if (sTop <= containerTop + containerH - tContainerH) {
  143 + fixedThumbContainer
  144 + .addClass('fixed-top');
  145 + } else if (sTop <= containerTop + containerH) {
  146 + fixedThumbContainer
  147 + .addClass('absolute')
  148 + .css({
  149 + top: containerTop + containerH - tContainerH - sTop
  150 + });
  151 + } else if (sTop > containerTop + containerH) {
  152 + fixedThumbContainer
  153 + .addClass('hide');
  154 + }
  155 + });
  156 + };
  157 +};
  1 +/**
  2 + * 类型3文章(Note: article-type-three在一个页面中只能出现一次（业务注意点），代码实现按照只有一个类型3实现)
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date；2015/3/30
  5 + */
  6 +var $ = require('jquery');
  7 +require('lazyload');
  8 +
  9 +/**
  10 + * 初始化$事件并默认选中列表第一项
  11 + */
  12 +exports.init = function() {
  13 + $(function() {
  14 + var container = $('.article-type-three'),
  15 + thumbContainer = container.find('.thumb-container'),
  16 + prodList = container.find('.prod-list'),
  17 + wH = $(window).height(),
  18 + isInit = true,
  19 + tContainerH,
  20 + containerH,
  21 + containerTop;
  22 +
  23 + /**
  24 + * 计算小箭头位置函数
  25 + * @param index(类型为number,调用函数li的index)
  26 + */
  27 + arrowPosition = function (element,index) {
  28 + //640为设计图尺寸，也就是font-size为40下的1rem，所以数值都参照640定
  29 + var container = element,
  30 + item = container.find('li'),
  31 + len = item.size(), //获取一共多少li
  32 + midNum = Math.ceil(len / 2), //获取中间li的index+1
  33 + documentFont = parseInt($("html").css("fontSize")), //获取html的font-size
  34 + itemMarginRight = parseInt(item.css('marginRight'))/ documentFont * 40, //获取li的margin-right在640下数值
  35 + itemWidth = item.width() / documentFont * 40, //获取li的widtht在640下数值
  36 + surPlusValue = (parseInt(container.css('padding-left'))/ documentFont * 40 - itemMarginRight)/2, //获取container的padding-left与itemMarginRight相减后除以2在640下数值
  37 + backgroundLeft; //container背景图片左偏移的位置
  38 +
  39 + /**
  40 + * 320为640分辨率下中间值
  41 + * index-midNum为偏移中间li的数值
  42 + * (index - midNum) * (itemWidth + itemMarginRight)当前li偏移中间li的距离
  43 + * - surPlusValue 减去container的padding与li的margin-right差值的一半
  44 + * 除以40，由640下的px变为rem
  45 + */
  46 + backgroundLeft = -(320 - (index - midNum) * (itemWidth + itemMarginRight) - surPlusValue)/40 + 'rem';
  47 + container.css({"backgroundPosition":backgroundLeft + " bottom"});
  48 + };
  49 +
  50 + //点击分类，显示分类下推荐商品列表
  51 + thumbContainer.delegate('.thumb', 'click', function() {
  52 + var curItem,
  53 + index;
  54 + curItem = $(this);
  55 +
  56 + index = curItem.index();
  57 + thumbContainer.find('.thumb').removeClass('focus')
  58 + curItem.addClass('focus');
  59 + arrowPosition(thumbContainer,index + 1);
  60 +
  61 + prodList.find('.prod')
  62 + .addClass('hide')
  63 + .eq(index)
  64 + .removeClass('hide');
  65 +
  66 + //图片懒加载
  67 + $("img.lazy").lazyload({
  68 + placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
  69 + });
  70 +
  71 + //scroll to top
  72 + if (!isInit) {
  73 + $('body').animate({
  74 + scrollTop: container.offset().top - (thumbContainer.hasClass('static') ? 0 : thumbContainer.outerHeight())
  75 + }, 400);
  76 + } else {
  77 + isInit = false;
  78 + }
  79 + });
  80 +
  81 + //默认选中第一个
  82 + thumbContainer.find('.thumb:first-child').click();
  83 +
  84 + tContainerH = thumbContainer.outerHeight(); //thumber-container高度
  85 + containerH = container.height(); //article-type-three高度
  86 + containerTop = container.offset().top; //article-type-three offset top
  87 +
  88 + function resetStatus() {
  89 + thumbContainer.removeClass('static fixed-top fixed-bottom absolute').css('top', '');
  90 + prodList.css('margin-top', '');
  91 + }
  92 +
  93 + //scroll时控制列表的位置
  94 + $(document).scroll(function() {
  95 + var sTop = $(this).scrollTop();
  96 + resetStatus();
  97 + //Tip: removeClass只用移除相邻状态即可
  98 + if (sTop <= containerTop - wH + tContainerH) {
  99 + thumbContainer
  100 + .addClass('fixed-bottom');
  101 + prodList.css({
  102 + 'margin-top': tContainerH
  103 + });
  104 + } else if (sTop <= containerTop) {
  105 + thumbContainer
  106 + .addClass('static');
  107 + } else if (sTop <= containerTop + containerH - tContainerH) {
  108 + thumbContainer
  109 + .addClass('fixed-top');
  110 + prodList.css({
  111 + 'margin-top': tContainerH
  112 + });
  113 + } else if (sTop <= containerTop + containerH) {
  114 + thumbContainer
  115 + .addClass('absolute')
  116 + .css({
  117 + top: containerTop + containerH - tContainerH
  118 + });
  119 + prodList.css({
  120 + 'margin-top': tContainerH
  121 + });
  122 + } else if (sTop > containerTop + containerH) {
  123 + thumbContainer
  124 + .addClass('static');
  125 + }
  126 + });
  127 +
  128 + //初始执行scroll从而初始化分类信息的位置（非0时默认会执行scroll）
  129 + if ($(document).scrollTop() === 0) {
  130 + $(document).scroll();
  131 + }
  132 +
  133 + });
  134 +};
  1 +/**
  2 + * 模拟数据
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date: 2015/3/30
  5 + */
  6 +module.exports = function() {
  7 + return {
  8 + author: {
  9 + avatar: 'http://7xidk0.com1.z0.glb.clouddn.com/avater.png',
  10 + name: '山本耀司',
  11 + intro: '日本设计界一代宗师'
  12 + },
  13 + article: {
  14 + title: 'Skin Art Series INN 2015新品',
  15 + publishTime: '2月13日 12:34',
  16 + pageView: 3445,
  17 + content: [
  18 + {
  19 + bigImage: {
  20 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  21 + alt: '复古风'
  22 + }
  23 + },
  24 + {
  25 + smallImage: {
  26 + imgs: [
  27 + {
  28 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
  29 + alt: '复古fashion'
  30 + },
  31 + {
  32 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
  33 + alt: '复古fashion'
  34 + }
  35 + ]
  36 + }
  37 + },
  38 + {
  39 + text: {
  40 + deps: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka也动作频频'
  41 + }
  42 + },
  43 + {
  44 + recommendation: {
  45 + list: [
  46 + {
  47 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  48 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  49 + isLike: false,
  50 + price: 1268,
  51 + salePrice: 589,
  52 + isSale: true,
  53 + isFew: true,
  54 + isNew: false,
  55 + url: ''
  56 + },
  57 + {
  58 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/023d70c59e81ccbfb39404487aaf642da2.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  59 + name: 'CLOTtee 撞色连帽外套',
  60 + isLike: false,
  61 + price: 488,
  62 + salePrice: 139,
  63 + isSale: true,
  64 + isFew: true,
  65 + isNew: false,
  66 + url: ''
  67 + },
  68 + {
  69 + thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/02/08/02e2d44125e95495e3152aa459fa6b9b0c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  70 + name: 'HALFGIRL 插肩棒球服短裙套装',
  71 + isLike: true,
  72 + price: 478,
  73 + salePrice: 208,
  74 + isSale: true,
  75 + isFew: true,
  76 + isNew: false,
  77 + url: ''
  78 + },
  79 + {
  80 + thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/03/08/022f25fbe177ee12803c522f04fcce06d0.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  81 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  82 + isLike: false,
  83 + price: 589,
  84 + salePrice: 148,
  85 + isSale: false,
  86 + isFew: false,
  87 + isNew: true,
  88 + url: ''
  89 + }
  90 + ],
  91 + moreProds: ''
  92 + }
  93 + },
  94 + {
  95 + bigImage: {
  96 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  97 + alt: '复古风'
  98 + }
  99 + },
  100 + {
  101 + text: {
  102 + deps: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka Tiger鬼冢' +
  103 + '虎也动作频频，于北京时间3.14日在东京发布其与意大利设计师AndreaPompilio合作的' +
  104 + '第2波--ONITSUKATIGER X ANDEREAPOMPILIO 2015秋冬新品便是其中之一。Yoho！Boy也' +
  105 + '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”'
  106 + }
  107 + },
  108 + {
  109 + bigImage: {
  110 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  111 + alt: '复古风'
  112 + }
  113 + },
  114 + {
  115 + smallImage: {
  116 + imgs: [
  117 + {
  118 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
  119 + alt: '复古fashion'
  120 + },
  121 + {
  122 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
  123 + alt: '复古fashion'
  124 + }
  125 + ]
  126 + }
  127 + },
  128 + {
  129 + smallImage: {
  130 + imgs: [
  131 + {
  132 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
  133 + alt: '复古fashion'
  134 + },
  135 + {
  136 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
  137 + alt: '复古fashion'
  138 + }
  139 + ]
  140 + }
  141 + },
  142 + {
  143 + bigImage: {
  144 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  145 + alt: '复古风'
  146 + }
  147 + },
  148 + {
  149 + recommendation: {
  150 + list: [
  151 + {
  152 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  153 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  154 + isLike: false,
  155 + price: 1268,
  156 + salePrice: 589,
  157 + isSale: true,
  158 + isFew: true,
  159 + isNew: false,
  160 + url: ''
  161 + },
  162 + {
  163 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/023d70c59e81ccbfb39404487aaf642da2.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  164 + name: 'CLOTtee 撞色连帽外套',
  165 + isLike: false,
  166 + price: 488,
  167 + salePrice: 139,
  168 + isSale: true,
  169 + isFew: true,
  170 + isNew: false,
  171 + url: ''
  172 + },
  173 + {
  174 + thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/02/08/02e2d44125e95495e3152aa459fa6b9b0c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  175 + name: 'HALFGIRL 插肩棒球服短裙套装',
  176 + isLike: true,
  177 + price: 478,
  178 + salePrice: 208,
  179 + isSale: true,
  180 + isFew: true,
  181 + isNew: false,
  182 + url: ''
  183 + },
  184 + {
  185 + thumb: 'http://img12.static.yhbimg.com/goodsimg/2015/03/03/08/022f25fbe177ee12803c522f04fcce06d0.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  186 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  187 + isLike: false,
  188 + price: 589,
  189 + salePrice: 148,
  190 + isSale: false,
  191 + isFew: false,
  192 + isNew: true,
  193 + url: ''
  194 + }
  195 + ],
  196 + moreProds: ''
  197 + }
  198 + },
  199 + {
  200 + bigImage: {
  201 + src: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  202 + alt: '复古风'
  203 + }
  204 + },
  205 + {
  206 + text: {
  207 + deps: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka Tiger鬼冢' +
  208 + '虎也动作频频，于北京时间3.14日在东京发布其与意大利设计师AndreaPompilio合作的' +
  209 + '第2波--ONITSUKATIGER X ANDEREAPOMPILIO 2015秋冬新品便是其中之一。Yoho！Boy也' +
  210 + '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”'
  211 + }
  212 + },
  213 + {
  214 + collocation: {
  215 + list: [
  216 + {
  217 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
  218 + type: 'shoe',
  219 + products: [
  220 + {
  221 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  222 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  223 + isLike: false,
  224 + price: 1268,
  225 + salePrice: 589,
  226 + isSale: true,
  227 + isFew: true,
  228 + isNew: false,
  229 + url: ''
  230 + },
  231 + {
  232 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  233 + name: 'CLOTtee 撞色连帽外套',
  234 + isLike: false,
  235 + price: 488,
  236 + salePrice: 139,
  237 + isSale: true,
  238 + isFew: true,
  239 + isNew: false,
  240 + url: ''
  241 + },
  242 + {
  243 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  244 + name: 'HALFGIRL 插肩棒球服短裙套装',
  245 + isLike: true,
  246 + price: 478,
  247 + salePrice: 208,
  248 + isSale: true,
  249 + isFew: true,
  250 + isNew: false,
  251 + url: ''
  252 + },
  253 + {
  254 + thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  255 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  256 + isLike: false,
  257 + price: 589,
  258 + salePrice: 148,
  259 + isSale: false,
  260 + isFew: false,
  261 + isNew: true,
  262 + url: ''
  263 + }
  264 + ]
  265 + },
  266 + {
  267 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
  268 + type: 'lamp',
  269 + products: [
  270 + {
  271 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  272 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  273 + isLike: false,
  274 + price: 1268,
  275 + salePrice: 589,
  276 + isSale: true,
  277 + isFew: true,
  278 + isNew: false,
  279 + url: ''
  280 + },
  281 + {
  282 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  283 + name: 'CLOTtee 撞色连帽外套',
  284 + isLike: false,
  285 + price: 488,
  286 + salePrice: 139,
  287 + isSale: true,
  288 + isFew: true,
  289 + isNew: false,
  290 + url: ''
  291 + },
  292 + {
  293 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  294 + name: 'HALFGIRL 插肩棒球服短裙套装',
  295 + isLike: true,
  296 + price: 478,
  297 + salePrice: 208,
  298 + isSale: true,
  299 + isFew: true,
  300 + isNew: false,
  301 + url: ''
  302 + },
  303 + {
  304 + thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  305 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  306 + isLike: false,
  307 + price: 589,
  308 + salePrice: 148,
  309 + isSale: false,
  310 + isFew: false,
  311 + isNew: true,
  312 + url: ''
  313 + }
  314 + ]
  315 + },
  316 + {
  317 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
  318 + type: 'dress',
  319 + products: [
  320 + {
  321 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  322 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  323 + isLike: false,
  324 + price: 1268,
  325 + salePrice: 589,
  326 + isSale: true,
  327 + isFew: true,
  328 + isNew: false,
  329 + url: ''
  330 + },
  331 + {
  332 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  333 + name: 'CLOTtee 撞色连帽外套',
  334 + isLike: false,
  335 + price: 488,
  336 + salePrice: 139,
  337 + isSale: true,
  338 + isFew: true,
  339 + isNew: false,
  340 + url: ''
  341 + },
  342 + {
  343 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  344 + name: 'HALFGIRL 插肩棒球服短裙套装',
  345 + isLike: true,
  346 + price: 478,
  347 + salePrice: 208,
  348 + isSale: true,
  349 + isFew: true,
  350 + isNew: false,
  351 + url: ''
  352 + },
  353 + {
  354 + thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  355 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  356 + isLike: false,
  357 + price: 589,
  358 + salePrice: 148,
  359 + isSale: false,
  360 + isFew: false,
  361 + isNew: true,
  362 + url: ''
  363 + }
  364 + ]
  365 + },
  366 + {
  367 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/sm.png',
  368 + type: 'watch',
  369 + products: [
  370 + {
  371 + thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  372 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  373 + isLike: false,
  374 + price: 1268,
  375 + salePrice: 589,
  376 + isSale: true,
  377 + isFew: true,
  378 + isNew: false,
  379 + url: ''
  380 + },
  381 + {
  382 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  383 + name: 'CLOTtee 撞色连帽外套',
  384 + isLike: false,
  385 + price: 488,
  386 + salePrice: 139,
  387 + isSale: true,
  388 + isFew: true,
  389 + isNew: false,
  390 + url: ''
  391 + },
  392 + {
  393 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  394 + name: 'HALFGIRL 插肩棒球服短裙套装',
  395 + isLike: true,
  396 + price: 478,
  397 + salePrice: 208,
  398 + isSale: true,
  399 + isFew: true,
  400 + isNew: false,
  401 + url: ''
  402 + },
  403 + {
  404 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/07/01ebfb219e22770ffb0c2c3a2cbb2b4bef.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  405 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  406 + isLike: false,
  407 + price: 589,
  408 + salePrice: 148,
  409 + isSale: false,
  410 + isFew: false,
  411 + isNew: true,
  412 + url: ''
  413 + }
  414 + ]
  415 + },
  416 + {
  417 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/clothe.png',
  418 + type: 'pent',
  419 + products: [
  420 + {
  421 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  422 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  423 + isLike: false,
  424 + price: 1268,
  425 + salePrice: 589,
  426 + isSale: true,
  427 + isFew: true,
  428 + isNew: false,
  429 + url: ''
  430 + },
  431 + {
  432 + thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  433 + name: 'CLOTtee 撞色连帽外套',
  434 + isLike: false,
  435 + price: 488,
  436 + salePrice: 139,
  437 + isSale: true,
  438 + isFew: true,
  439 + isNew: false,
  440 + url: ''
  441 + },
  442 + {
  443 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  444 + name: 'HALFGIRL 插肩棒球服短裙套装',
  445 + isLike: true,
  446 + price: 478,
  447 + salePrice: 208,
  448 + isSale: true,
  449 + isFew: true,
  450 + isNew: false,
  451 + url: ''
  452 + },
  453 + {
  454 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  455 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  456 + isLike: false,
  457 + price: 589,
  458 + salePrice: 148,
  459 + isSale: false,
  460 + isFew: false,
  461 + isNew: true,
  462 + url: ''
  463 + }
  464 + ]
  465 + }
  466 + ]
  467 + }
  468 + }
  469 + ]
  470 + },
  471 + brands: [
  472 + {
  473 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  474 + name: 'HALFGIRL',
  475 + url: ''
  476 + },
  477 + {
  478 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  479 + name: '黄伟文Wyman',
  480 + url: ''
  481 + },
  482 + {
  483 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  484 + name: 'HIPANDA',
  485 + url: ''
  486 + },
  487 + {
  488 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/logo.png',
  489 + name: 'holymoly',
  490 + url: ''
  491 + }
  492 + ],
  493 + tags: [
  494 + {
  495 + name: '棒球服',
  496 + url: ''
  497 + },
  498 + {
  499 + name: '卫衣',
  500 + url: ''
  501 + },
  502 + {
  503 + name: '印花卫衣',
  504 + url: ''
  505 + },
  506 + {
  507 + name: '针织衫',
  508 + url: ''
  509 + },
  510 + {
  511 + name: '工装裤',
  512 + url: ''
  513 + },
  514 + ],
  515 + otherArticle: [
  516 + {
  517 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/pant.png',
  518 + title: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka',
  519 + url: ''
  520 + },
  521 + {
  522 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/pant.png',
  523 + title: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka',
  524 + url: ''
  525 + },
  526 + {
  527 + thumb: 'http://7xidk0.com1.z0.glb.clouddn.com/pant.png',
  528 + title: '复古风劲吹，在各路复古跑鞋嚣张跋扈的当下，历史悠久的Onitsuka',
  529 + url: ''
  530 + }
  531 + ]
  532 + };
  533 +};
  1 +/**
  2 + * detail相关js
  3 + * @author: yue.liu@yoho.cn
  4 + * @date；2015/3/31
  5 + */
  6 +
  7 +var $ = require('jquery'),
  8 + ellipsis = require('mlellipsis'),
  9 + timer = null;
  10 +
  11 +require('lazyload');
  12 +
  13 +/**
  14 + * 初始化页面加载时的文字截取和图片懒加载功能
  15 + */
  16 +exports.init = function() {
  17 + //相关文章截取文字
  18 + ellipsis.init();
  19 + $(".post-list").find("span").each(function(){
  20 + $(this).mlellipsis(2);
  21 + });
  22 +
  23 + //图片懒加载
  24 + clearTimeout(timer);
  25 + timer = setTimeout(function() {
  26 + $("img.lazy").lazyload({
  27 + placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
  28 + });
  29 +
  30 + $("img.lazy").lazyload({
  31 + placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw==",
  32 + event : "load",
  33 + container : $(".thumb-container")
  34 + });
  35 + }, 0)
  36 +};
1 /*! Sea.js 2.3.0 | seajs.org/LICENSE.md */ 1 /*! Sea.js 2.3.0 | seajs.org/LICENSE.md */
2 !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); 2 !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);
  3 +;seajs.config({
  4 + base: 'localhost:5000/dist'
  5 +});
  1 +@import "compass/css3";
  2 +
  3 +.article-author {
  4 + height: 88rem / $pxConvertRem;
  5 + line-height: 88rem / $pxConvertRem;
  6 + border-bottom: 1px solid #e0e0e0;
  7 + background: #fff;
  8 +
  9 + > * {
  10 + margin-left: 30rem / $pxConvertRem;
  11 + }
  12 +
  13 + .avatar {
  14 + float: left;
  15 + position: relative;
  16 + top: 50%;
  17 + margin-top: -25rem / $pxConvertRem;
  18 + width: 50rem / $pxConvertRem;
  19 + height: 50rem / $pxConvertRem;
  20 + vertical-align: middle;
  21 + @include border-radius(50rem / $pxConvertRem);
  22 + }
  23 +
  24 + .name {
  25 + float: left;
  26 + font-size: 28rem / $pxConvertRem;
  27 + color: #000;
  28 + }
  29 +
  30 + .intro {
  31 + float: left;
  32 + font-size: 28rem / $pxConvertRem;
  33 + color: #b0b0b0;
  34 + }
  35 +}
  1 +.detail-tag {
  2 + margin: 28rem / $pxConvertRem 0 0 0;
  3 + padding: 0 0 30rem / $pxConvertRem 0;
  4 + border-top: 1px solid #e0e0e0;
  5 + border-bottom: 1px solid #e0e0e0;
  6 + background: #fff;
  7 +
  8 + li {
  9 + float: left;
  10 + margin: 31rem / $pxConvertRem 0 0 31rem / $pxConvertRem;
  11 +
  12 + a {
  13 + display: block;
  14 + padding: 0 36rem / $pxConvertRem;
  15 + height: 50rem / $pxConvertRem;
  16 + line-height: 50rem / $pxConvertRem;
  17 + font-size: 30rem / $pxConvertRem;
  18 + color: #fff;
  19 + background: #000;
  20 + text-decoration: none;
  21 + }
  22 + }
  23 +}
  1 +.article-title {
  2 + padding: 16rem / $pxConvertRem 0 26rem / $pxConvertRem 30rem / $pxConvertRem;
  3 + background: #fff;
  4 +
  5 + .title {
  6 + line-height: 60rem / $pxConvertRem;
  7 + color: #000;
  8 + font-size: 40rem / $pxConvertRem;
  9 + font-weight:bold;
  10 + }
  11 +
  12 + .date-pageview {
  13 + color: #b0b0b0;
  14 + line-height: 38rem / $pxConvertRem;
  15 + font-size: 24rem / $pxConvertRem;
  16 +
  17 + .iconfont {
  18 + margin: 0 4px 0 0;
  19 + vertical-align: 9%;
  20 + font-size: 24rem / $pxConvertRem;
  21 + }
  22 + }
  23 +}
  1 +.article-type-five {
  2 + background: #fff;
  3 + padding: 0 0 0 15rem / $pxConvertRem;
  4 + margin: 0 0 30rem / $pxConvertRem 0;
  5 + border-top: 1px solid #e0e0e0;
  6 + border-bottom: 1px solid #e0e0e0;
  7 +
  8 + h2 {
  9 + margin: 0 0 0 -15rem / $pxConvertRem;
  10 + line-height: 104rem / $pxConvertRem;
  11 + font-size: 30rem / $pxConvertRem;
  12 + color: #b0b0b0;
  13 + text-align: center;
  14 + }
  15 +
  16 + .more-good {
  17 + padding: 0 0 0 30rem / $pxConvertRem;
  18 + margin: 0 0 0 -15rem / $pxConvertRem;
  19 + line-height: 88rem / $pxConvertRem;
  20 + border-top: 1px solid #e0e0e0;
  21 +
  22 + a {
  23 + text-decoration: none;
  24 + color: #444;
  25 + font-size: 30rem / $pxConvertRem;
  26 + }
  27 +
  28 + i {
  29 + float: right;
  30 + margin: 0 30rem / $pxConvertRem 0 0;
  31 + font-size: 28rem / $pxConvertRem;
  32 + color: #b0b0b0
  33 + }
  34 + }
  35 +}
  36 +
  37 +.good-info {
  38 + float: left;
  39 + width: 276rem / $pxConvertRem;
  40 + height: 466rem / $pxConvertRem;
  41 + margin: 0 15rem / $pxConvertRem;
  42 +}
  43 +
  44 +.good-detail-img {
  45 + position: relative;
  46 +
  47 + .good-islike {
  48 + position: absolute;
  49 + top: 10rem / $pxConvertRem;
  50 + right: 10rem / $pxConvertRem;
  51 + font-size: 30rem / $pxConvertRem;
  52 + color: #b0b0b0;
  53 + text-decoration: none;
  54 + }
  55 +
  56 + .good-like {
  57 + color: #d72928;
  58 + }
  59 +
  60 + img {
  61 + display: block;
  62 + width: 100%;
  63 + height: 366rem / $pxConvertRem;
  64 + }
  65 +
  66 +}
  67 +
  68 +.good-detail-img .tag-container {
  69 + position: absolute;
  70 + bottom: 0;
  71 + left: 0;
  72 + right: 0;
  73 +
  74 + .good-tag {
  75 + position: relative;
  76 + padding: 0 10rem / $pxConvertRem;
  77 + height: 24rem / $pxConvertRem;
  78 + line-height: 24rem / $pxConvertRem;
  79 + color: #fff;
  80 + font-size: 18rem / $pxConvertRem;
  81 +
  82 + span {
  83 + position: relative;
  84 + z-index: 2;
  85 + float: left;
  86 + }
  87 +
  88 + em {
  89 + position: relative;
  90 + z-index: 2;
  91 + float: right;
  92 + }
  93 + }
  94 +
  95 + .new-tag {
  96 + background: #86bf4a;
  97 + }
  98 +
  99 + .sale-tag {
  100 + background: #d62927;
  101 + }
  102 +
  103 + .few-tag {
  104 + background: #ff9e0d;
  105 + }
  106 +}
  107 +
  108 +.good-detail-text {
  109 +
  110 + .name a{
  111 + display: block;
  112 + line-height: 56rem / $pxConvertRem;
  113 + overflow: hidden;
  114 + white-space: nowrap;
  115 + text-overflow: ellipsis;
  116 + text-decoration: none;
  117 + font-size: 22rem / $pxConvertRem;
  118 + color: #444;
  119 + }
  120 +
  121 + .price{
  122 + line-height: 22rem / $pxConvertRem;
  123 + font-size: 22rem / $pxConvertRem;
  124 +
  125 + .sale-price{
  126 + color: #d62927;
  127 + }
  128 +
  129 + .market-price{
  130 + margin: 0 0 0 5rem / $pxConvertRem;
  131 + color: #b0b0b0;
  132 + text-decoration:line-through;
  133 + }
  134 + }
  135 +}
  1 +.article-type-four {
  2 + padding: 0 0 8rem / $pxConvertRem 0;
  3 + background: #fff;
  4 +
  5 + img {
  6 + float: right;
  7 + width: 315rem / $pxConvertRem;
  8 + height: 420rem / $pxConvertRem;
  9 + }
  10 +
  11 + img:first-child {
  12 + float: left;
  13 + }
  14 +}
  1 +$pxConvertRem : 40;
  2 +
  3 +.article-type-one {
  4 + padding: 0 0 5rem / $pxConvertRem 0;
  5 + background: #fff;
  6 +}
  7 +.article-type-one .img {
  8 + width: 100%;
  9 + height: 640rem / $pxConvertRem;
  10 +}
  1 +@import "clothes-type/*.png";
  2 +$pxConvertRem : 40;
  3 +
  4 +.thumb-container {
  5 + font-size: 0;
  6 + padding: 30rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
  7 + z-index: 10;
  8 + background-color: transparent;
  9 + background-image: url('../img/thumb-container-bg.png');
  10 + background-repeat: no-repeat;
  11 + background-size: 200% 100%;
  12 +
  13 + &.fixed-top {
  14 + position: fixed;
  15 + left: 0;
  16 + right: 0;
  17 + top: 0;
  18 + }
  19 +
  20 + &.fixed-bottom {
  21 + position: fixed;
  22 + left: 0;
  23 + right: 0;
  24 + bottom: 0;
  25 + background: #fff;
  26 +
  27 + .thumb.focus .arrow {
  28 + display: none;
  29 + }
  30 + }
  31 +
  32 + &.absolute {
  33 + position: absolute;
  34 + left: 0;
  35 + right: 0;
  36 + }
  37 +
  38 + &.static {
  39 + position: static;
  40 + }
  41 +
  42 + .thumb {
  43 + display: inline-block;
  44 + position: relative;
  45 + margin-right: 22rem / $pxConvertRem;
  46 + padding-bottom: 30rem / $pxConvertRem;
  47 +
  48 + &:last-child {
  49 + margin-right: 0;
  50 + }
  51 +
  52 + &.focus {
  53 + .thumb-img {
  54 + border-color: #000;
  55 + }
  56 +
  57 + .arrow {
  58 + display: block;
  59 + position: absolute;
  60 + width: 25rem / $pxConvertRem;
  61 + height: 14rem / $pxConvertRem;
  62 + bottom: -1px;
  63 + left: 50%;
  64 + margin: 0 0 0 -16rem / $pxConvertRem;
  65 + z-index: 12;
  66 + background: url('../img/arrow.png') no-repeat;
  67 + background-size: 100% 100%;
  68 + }
  69 + }
  70 +
  71 + .thumb-img {
  72 + height: 134rem / $pxConvertRem;
  73 + width: 96rem / $pxConvertRem;
  74 + border: 1px solid transparent;
  75 + }
  76 + }
  77 +
  78 +}
  79 +
  80 +.article-type-three {
  81 + background: #fff;
  82 +
  83 + .prod-list {
  84 + padding: 28rem / $pxConvertRem 0 0 15rem / $pxConvertRem;
  85 + }
  86 +
  87 + .clothe-type {
  88 + position: absolute;
  89 + right: 6rem / $pxConvertRem;
  90 + bottom: 34rem / $pxConvertRem;
  91 + background: url('../img/clothes-type-s77e599c373.png') no-repeat;
  92 + width: 20px;
  93 + height: 20px;
  94 + background-size: 100%;
  95 +
  96 + &.bag {
  97 + background-position: 0 0;
  98 + }
  99 + &.cloth {
  100 + background-position: 0 -47px * (20/47);
  101 + }
  102 + &.dress {
  103 + background-position: 0 -94px * (20/47);
  104 + }
  105 + &.headset {
  106 + background-position: 0 -141px * (20/47);
  107 + }
  108 + &.lamp {
  109 + background-position: 0 -188px * (20/47);
  110 + }
  111 + &.pent {
  112 + background-position: 0 -233px * (20/47);
  113 + }
  114 + &.shoe {
  115 + background-position: 0 -280px * (20/47);
  116 + }
  117 + &.watch {
  118 + background-position: 0 -327px * (20/47);
  119 + }
  120 + }
  121 +}
  1 +.article-type-two {
  2 + background: #fff;
  3 + padding: 20rem / $pxConvertRem 30rem / $pxConvertRem;
  4 + line-height: 46rem / $pxConvertRem;
  5 + font-size: 28rem / $pxConvertRem;
  6 + color: #444;
  7 +}
  1 +@import "article-title", "article-type-one", "article-type-two",
  2 +"article-type-three", "article-type-four", "article-type-five";
  1 +@mixin relatedTitle {
  2 + margin: 0 29rem / $pxConvertRem;
  3 + background: #fff;
  4 + border: 1px solid #e0e0e0;
  5 + border-bottom: none;
  6 + line-height: 72rem / $pxConvertRem;
  7 + font-size: 30rem / $pxConvertRem;
  8 + color: #b0b0b0;
  9 + text-align: center;
  10 +}
  11 +
  12 +.related-brand {
  13 + margin: 30rem / $pxConvertRem 0 0 0;
  14 +
  15 + h2 {
  16 + @include relatedTitle;
  17 + }
  18 +
  19 + .brand-list {
  20 + padding: 30rem / $pxConvertRem 0 30rem / $pxConvertRem;
  21 + background: #fff;
  22 + border-top: 1px solid #e0e0e0;
  23 + border-bottom: 1px solid #e0e0e0;
  24 +
  25 + li {
  26 + float: left;
  27 + width: 158rem / $pxConvertRem;
  28 + height: 120rem / $pxConvertRem;
  29 + border-left: 1px solid #e0e0e0;
  30 +
  31 + a {
  32 + display: block;
  33 + text-decoration: none;
  34 + }
  35 +
  36 + .brand-logo {
  37 + display: table-cell;
  38 + width: 158rem / $pxConvertRem;
  39 + height: 94rem / $pxConvertRem;
  40 + vertical-align:middle;
  41 +
  42 + img {
  43 + display: block;
  44 + max-width: 158rem / $pxConvertRem;
  45 + max-height: 94rem / $pxConvertRem;
  46 + vertical-align: middle;
  47 + margin: 0 auto;
  48 + }
  49 + }
  50 +
  51 + .brand-name {
  52 + margin: 10rem / $pxConvertRem 0 0 0;
  53 + line-height: 24rem / $pxConvertRem;
  54 + font-size: 18rem / $pxConvertRem;
  55 + color: #babac2;
  56 + text-align: center;
  57 + text-decoration: none;
  58 + border-bottom: none;
  59 + overflow: hidden;
  60 + }
  61 +
  62 + }
  63 +
  64 + li:first-child {
  65 + border-left: none;
  66 + }
  67 + }
  68 +}
  1 +$hack_safair_begin:'[;';
  2 +$hack_safair_end:';]';
  3 +.related-post {
  4 + margin: 30rem / $pxConvertRem 0 0 0;
  5 +
  6 + h2 {
  7 + @include relatedTitle;
  8 + }
  9 +
  10 + .post-list {
  11 + background: #fff;
  12 + padding: 0 0 30rem / $pxConvertRem 0;
  13 + border-top: 1px solid #e0e0e0;
  14 +
  15 + li {
  16 + padding: 30rem / $pxConvertRem 0 0 0;
  17 + margin: 0 0 10rem / $pxConvertRem 0;
  18 +
  19 + a {
  20 + display: block;
  21 + }
  22 +
  23 + img {
  24 + float: left;
  25 + margin: 0 0 0 30rem / $pxConvertRem;
  26 + width: 182rem / $pxConvertRem;
  27 + height: 162rem / $pxConvertRem;
  28 + }
  29 +
  30 + span {
  31 + float: left;
  32 + width: 360rem / $pxConvertRem;
  33 + #{$hack_safair_begin}width: 360rem / $pxConvertRem#{$hack_safair_end};
  34 + margin: 20rem / $pxConvertRem 0 0 30rem / $pxConvertRem;
  35 + line-height: 45rem / $pxConvertRem;
  36 + color: #444;
  37 + font-size: 28rem / $pxConvertRem;
  38 +
  39 + }
  40 + }
  41 + }
  42 +}
  1 +$pxConvertRem : 40;
  2 +@import "compass";
  3 +@include global-reset();
  4 +@import "article-author", "article", "related-brand", "article-tag", "related-post";
  5 +
  6 +
  7 +body {
  8 + font-family: helvetica,Arial,"黑体";
  9 + background: #f0f0f0;
  10 +}
  11 +
  12 +.hide {
  13 + display: none;
  14 +}
  15 +
  16 +/**
  17 +* 闭合浮动
  18 +* @Doc: http://nicolasgallagher.com/micro-clearfix-hack/
  19 +*/
  20 +
  21 +.clearfix:before,
  22 +.clearfix:after {
  23 + content: "";
  24 + display: table;
  25 +}
  26 +
  27 +.clearfix:after {
  28 + clear: both;
  29 +}
  30 +
  31 +.clearfix {
  32 + *zoom: 1; /* IE6-7 触发 hasLayout */
  33 +}
  34 +
  35 +
  36 +/**
  37 + * 字体图标样式
  38 + */
  39 +@font-face {font-family: "iconfont";
  40 + src: url('../fonts/iconfont.eot'); /* IE9*/
  41 + src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  42 + url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
  43 + url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  44 + url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
  45 +}
  46 +
  47 +.iconfont {
  48 + font-family: "iconfont" !important;
  49 + font-size: 16px;
  50 + font-style: normal;
  51 + -webkit-font-smoothing: antialiased;
  52 + -webkit-text-stroke-width: 0.2px;
  53 + -moz-osx-font-smoothing: grayscale;
  54 +}
  55 +.icon-sharedviewicon:before { content: "\e60c"; }
  56 +.icon-sharedtimeicon:before { content: "\e60d"; }
  57 +.icon-sharedlikebuttomhighlighted:before { content: "\e60f"; }
  58 +.icon-sharedenterbuttomnormal:before { content: "\e612"; }
  59 +
  60 +#wrapper {
  61 + position: absolute;
  62 + top: 0;
  63 + bottom: 0;
  64 + left: 0;
  65 + overflow: hidden;
  66 +}
1 /** 1 /**
2 * 路由处理文件 2 * 路由处理文件
3 - * author: xuqi(qi.xu@yoho.cn)  
4 - * date: 2015/3/27 3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date: 2015/3/27
5 */ 5 */
6 -var page = require('./views/controller/page'); 6 +var detail = require('./views/controller/detail');
7 7
8 module.exports = function(app) { 8 module.exports = function(app) {
9 - app.get('/', page.show); 9 + app.get('/', detail.show);
  10 + app.get('/optimize', detail.optimize)
10 }; 11 };
  1 +/**
  2 + * detail页控制器文件
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date: 2015/3/27
  5 + */
  6 +var data = require('../../public/js/data.js')();
  7 +
  8 +exports.show = function(req, res) {
  9 + res.render('detail', {
  10 + detail: data,
  11 + layout: '../layouts/layout'
  12 + });
  13 +};
  14 +
  15 +exports.optimize = function(req, res) {
  16 + res.render('detail-optimize', {
  17 + detail: data,
  18 + layout: '../layouts/layout-optimize'
  19 + });
  20 +}
1 -exports.show = function(req, res) {  
2 - res.render('index', {  
3 - layout: '../layouts/layout'  
4 - });  
5 -}  
  1 +<div id="wrapper">
  2 + <div id="scroller">
  3 + {{# detail}}
  4 + {{> article_author}}
  5 + {{> article}}
  6 + {{> related_brand}}
  7 + {{> article_tag}}
  8 + {{> related_post}}
  9 + {{/ detail}}
  10 + </div>
  11 +</div>
  1 +{{# detail}}
  2 + {{> article_author}}
  3 + {{> article}}
  4 + {{> related_brand}}
  5 + {{> article_tag}}
  6 + {{> related_post}}
  7 +{{/ detail}}
  1 +{{# author}}
  2 + <div class="article-author partial clearfix">
  3 + <img class="avatar" src="{{avatar}}">
  4 + <span class="name">{{name}}</span>
  5 + <span class="intro">{{intro}}</span>
  6 + </div>
  7 +{{/ author}}
  1 +<div class="detail-tag">
  2 + <ul class="tag-list clearfix">
  3 + {{# tags}}
  4 + <li>
  5 + <a href="{{url}}">{{name}}</a>
  6 + </li>
  7 + {{/ tags}}
  8 + </ul>
  9 +</div>
  10 +
  1 +<div class="article-title partial">
  2 + <p class="title">{{title}}</p>
  3 + <p class="date-pageview">
  4 + <i class="iconfont">&#xe60d;</i>
  5 + {{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp;
  6 + <i class="iconfont">&#xe60c;</i>
  7 + {{pageView}}
  8 + </p>
  9 +</div>
  1 +{{# recommendation}}
  2 + <div class="article-type-five clearfix">
  3 + <h2>相关推荐</h2>
  4 + <div class="good-list clearfix">
  5 + {{# list}}
  6 + {{> good_info}}
  7 + {{/ list}}
  8 + </div>
  9 + <div class="more-good clearfix">
  10 + <a href="{{moreProds}}">
  11 + 更多商品
  12 + <i class="iconfont">&#xe612;</i>
  13 + </a>
  14 + </div>
  15 + </div>
  16 +{{/ recommendation}}
  1 +{{# smallImage}}
  2 + <div class="article-type-four clearfix">
  3 + {{# imgs}}
  4 + <img class="lazy" data-original="{{src}}" alt="">
  5 + {{/ imgs}}
  6 + </div>
  7 +{{/ smallImage}}
  1 +{{# bigImage}}
  2 + <div class="article-type-one">
  3 + <img class="img lazy" data-original="{{src}}" alt="">
  4 + </div>
  5 +{{/ bigImage}}
  1 +{{# collocation}}
  2 + <div class="article-type-three">
  3 + <ul class="thumb-container clearfix">
  4 + {{# list}}
  5 + <li class="thumb">
  6 + <img class="thumb-img lazy" data-original="{{thumb}}">
  7 + <span class="clothe-type {{type}}"></span>
  8 + </li>
  9 + {{/ list}}
  10 + </ul>
  11 + <div class="prod-list clearfix">
  12 + {{# list}}
  13 + <div class="prod hide">
  14 + {{# products}}
  15 + {{> good_info}}
  16 + {{/ products}}
  17 + </div>
  18 + {{/ list}}
  19 + </div>
  20 + </div>
  21 +{{/ collocation}}
  1 +{{# text}}
  2 + <div class="article-type-two">
  3 + {{deps}}
  4 + </div>
  5 +{{/ text}}
  1 +{{# article}}
  2 + {{> article_title}}
  3 + {{# content}}
  4 + {{> article_type_one}}
  5 + {{> article_type_two}}
  6 + {{> article_type_three}}
  7 + {{> article_type_four}}
  8 + {{> article_type_five}}
  9 + {{/ content}}
  10 +{{/ article}}
  1 +<div class="detail-author clearfix">
  2 + <div class="detail-avater"></div>
  3 +</div>
  1 +<div class="good-info">
  2 + <div class="good-detail-img">
  3 + <a class="good-islike {{# isLike}}good-like{{/ isLike}} iconfont" href="javascript:;">&#xe60f;</a>
  4 + <a class="good-thumb" href="{{url}}">
  5 + <img class="lazy" data-original="{{thumb}}">
  6 + </a>
  7 + <div class="tag-container">
  8 + {{# isNew}}
  9 + <div class="good-tag new-tag clearfix">
  10 + <span>新品到着</span>
  11 + <em>NEW</em>
  12 + </div>
  13 + {{/ isNew}}
  14 + {{# isSale}}
  15 + <div class="good-tag sale-tag clearfix">
  16 + <span>打折商品</span>
  17 + <em>SALE</em>
  18 + </div>
  19 + {{/ isSale}}
  20 + {{# isFew}}
  21 + <div class="good-tag few-tag clearfix">
  22 + <span>即将售罄</span>
  23 + <em>FEW</em>
  24 + </div>
  25 + {{/ isFew}}
  26 + </div>
  27 + </div>
  28 + <div class="good-detail-text">
  29 + <div class="name">
  30 + <a href="{{url}}">{{name}}</a>
  31 + </div>
  32 + <div class="price">
  33 + <span class="sale-price">￥{{salePrice}}</span>
  34 + <span class="market-price">￥{{price}}</span>
  35 + </div>
  36 + </div>
  37 +</div>
  1 +<div class="related-brand">
  2 + <h2>相关品牌</h2>
  3 + <ul class="brand-list clearfix">
  4 + {{# brands}}
  5 + <li>
  6 + <a href="{{url}}">
  7 + <div class="brand-logo">
  8 + <img class="lazy" data-original="{{thumb}}" alt="">
  9 + </div>
  10 + <p class="brand-name">{{name}}</p>
  11 + </a>
  12 + </li>
  13 + {{/ brands}}
  14 + </ul>
  15 +</div>
  1 +<div class="related-post">
  2 + <h2>相关文章</h2>
  3 + <ul class="post-list">
  4 + {{# otherArticle}}
  5 + <li>
  6 + <a class="clearfix" href="{{url}}">
  7 + <img class="lazy" data-original="{{thumb}}" alt="">
  8 + <span>{{title}}</span>
  9 + </a>
  10 + </li>
  11 + {{/ otherArticle}}
  12 + </ul>
  13 +</div>