fe / yohobuy-mobile · Commits

Go to a project

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

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

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