fe / yohobuy-frontend · Commits

Go to a project

Authored by xuqi
Commit 06426eda94ef5b98f17ed32e9f88c081fdb07289 2 parents 27a16f29 673a7134

Merge branch 'feature/plus-star' into develop

Inline Side-by-side
Showing 18 changed files with 640 additions and 7 deletions
@@ -2,6 +2,7 @@ var yohobuyMobile; @@ -2,6 +2,7 @@ var yohobuyMobile;
2 2
3 require('./public/js/saunter'); 3 require('./public/js/saunter');
4 require('./public/js/tag'); 4 require('./public/js/tag');
  5 +require('./public/js/ps');
5 require('./public/js/template'); 6 require('./public/js/template');
6 7
7 module.exports = yohobuyMobile; 8 module.exports = yohobuyMobile;
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 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"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Wed Apr 22 10:17:10 2015 5 +Created by FontForge 20120731 at Wed Apr 22 10:54:24 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -551,7 +551,7 @@ module.exports = function(flag) { @@ -551,7 +551,7 @@ module.exports = function(flag) {
551 '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”', 551 '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”',
552 publishTime: '2月13日 12:34', 552 publishTime: '2月13日 12:34',
553 pageView: 3445, 553 pageView: 3445,
554 - like: true, 554 + like: 80,
555 share: false //不显示share标签 555 share: false //不显示share标签
556 } 556 }
557 }, 557 },
@@ -568,11 +568,165 @@ module.exports = function(flag) { @@ -568,11 +568,165 @@ module.exports = function(flag) {
568 '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”', 568 '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”',
569 publishTime: '2月13日 12:34', 569 publishTime: '2月13日 12:34',
570 pageView: 3445, 570 pageView: 3445,
571 - like: true, 571 + like: 80,
572 share: false 572 share: false
573 } 573 }
574 } 574 }
575 ]; 575 ];
  576 + //plus+star页模拟数据
  577 + case 'ps':
  578 + return {
  579 + banner: 'http://7xidk0.com1.z0.glb.clouddn.com/star-banner.png',
  580 + logo: 'http://7xidk0.com1.z0.glb.clouddn.com/star-brand.png',
  581 + name: 'SSUR',
  582 + isLike: true,
  583 + intro: '纽约地下街头品牌SSUR，由艺术家Russell所成立，近年来以恶搞、讽刺各大' +
  584 + '品牌而闻名，包括了CHANEL、ROLEX、Cartier等等。Ssur的创办人是艺术家' +
  585 + 'Russell, ssur就是其名字反过来写。剩余的位置为了测试文字截取功能是我不' +
  586 + '得以而添加的，呵呵哒',
  587 + newArrival: {
  588 + moreUrl: '',
  589 + naList: [
  590 + {
  591 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  592 + name: 'GAWS DIGI 丛林数码印花拼接卫衣',
  593 + isLike: false,
  594 + price: 1268,
  595 + salePrice: 589,
  596 + isSale: true,
  597 + isFew: true,
  598 + isNew: false,
  599 + url: ''
  600 + },
  601 + {
  602 + thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  603 + name: 'CLOTtee 撞色连帽外套',
  604 + isLike: false,
  605 + price: 488,
  606 + salePrice: 139,
  607 + isSale: true,
  608 + isFew: true,
  609 + isNew: false,
  610 + url: ''
  611 + },
  612 + {
  613 + thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  614 + name: 'HALFGIRL 插肩棒球服短裙套装',
  615 + isLike: true,
  616 + price: 478,
  617 + salePrice: 208,
  618 + isSale: true,
  619 + isFew: true,
  620 + isNew: false,
  621 + url: ''
  622 + },
  623 + {
  624 + thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
  625 + name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
  626 + isLike: false,
  627 + price: 589,
  628 + salePrice: 148,
  629 + isSale: false,
  630 + isFew: false,
  631 + isNew: true,
  632 + url: ''
  633 + }
  634 + ]
  635 + },
  636 + info: [
  637 + {
  638 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  639 + title: '1.副线不知为何总是好看点',
  640 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  641 + 'In England中Panul Smith缔造了一个传奇',
  642 + publishTime: '2月13日 12:34',
  643 + pageView: 3445,
  644 + like: 23,
  645 + share: true,
  646 + url: ''
  647 + },
  648 + {
  649 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  650 + title: '2.副线不知为何总是好看点',
  651 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  652 + 'In England中Panul Smith缔造了一个传奇',
  653 + publishTime: '2月13日 12:34',
  654 + pageView: 3445,
  655 + like: 23,
  656 + share: true,
  657 + url: ''
  658 + }
  659 + ]
  660 + };
  661 + case 'dataInfo':
  662 + return [
  663 + {
  664 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  665 + title: '1.副线不知为何总是好看点',
  666 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  667 + 'In England中Panul Smith缔造了一个传奇',
  668 + publishTime: '2月13日 12:34',
  669 + pageView: 3445,
  670 + like: 23,
  671 + share: true,
  672 + url: ''
  673 + },
  674 + {
  675 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  676 + title: '2.副线不知为何总是好看点',
  677 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  678 + 'In England中Panul Smith缔造了一个传奇',
  679 + publishTime: '2月13日 12:34',
  680 + pageView: 3445,
  681 + like: 23,
  682 + share: true,
  683 + url: ''
  684 + },
  685 + {
  686 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  687 + title: '3.副线不知为何总是好看点',
  688 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  689 + 'In England中Panul Smith缔造了一个传奇',
  690 + publishTime: '2月13日 12:34',
  691 + pageView: 3445,
  692 + like: 23,
  693 + share: true,
  694 + url: ''
  695 + },
  696 + {
  697 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  698 + title: '4.副线不知为何总是好看点',
  699 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  700 + 'In England中Panul Smith缔造了一个传奇',
  701 + publishTime: '2月13日 12:34',
  702 + pageView: 3445,
  703 + like: 23,
  704 + share: true,
  705 + url: ''
  706 + },
  707 + {
  708 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  709 + title: '5.副线不知为何总是好看点',
  710 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  711 + 'In England中Panul Smith缔造了一个传奇',
  712 + publishTime: '2月13日 12:34',
  713 + pageView: 3445,
  714 + like: 23,
  715 + share: true,
  716 + url: ''
  717 + },
  718 + {
  719 + img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
  720 + title: '6.副线不知为何总是好看点',
  721 + content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
  722 + 'In England中Panul Smith缔造了一个传奇',
  723 + publishTime: '2月13日 12:34',
  724 + pageView: 3445,
  725 + like: 23,
  726 + share: true,
  727 + url: ''
  728 + }
  729 + ];
576 case 'tpl': 730 case 'tpl':
577 return [ 731 return [
578 { 732 {
  1 +/**
  2 + * plus+star页js
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date；2015/4/16
  5 + */
  6 +
  7 +var $ = require('jquery'),
  8 + Mustache = require('mustache'),
  9 + ellipsis = require('mlellipsis');
  10 +
  11 +require('lazyload');
  12 +
  13 +/**
  14 + * 初始化页面功能
  15 + */
  16 +exports.init = function() {
  17 + $(function() {
  18 + var $intro = $('#intro'),
  19 + $infoContent = $('#info-content'),
  20 + $loadMore = $('#load-more-info'),
  21 + $loadStatus = $loadMore.children('.status'),
  22 + $loading = $loadStatus.filter('.loading'),
  23 + $noMore = $loadStatus.filter('.no-more'),
  24 + loadMoreH = $loadMore.height(),
  25 + winH = $(window).height(),
  26 + dataEnd = false,
  27 + canScroll = true,
  28 + tpl;
  29 +
  30 + //获取相关资讯模板
  31 + $.get('/ps/readTpl', function(data) {
  32 + if (data.success) {
  33 + tpl = data.data;
  34 + Mustache.parse(tpl); //pre-compile and cache template
  35 + }
  36 + });
  37 +
  38 + //文字截取
  39 + ellipsis.init();
  40 + setTimeout(function() {
  41 + $intro.mlellipsis(4); //品牌介绍
  42 + $('.info-block-content').each(function() { //相关文章
  43 + $(this).mlellipsis(2);
  44 + });
  45 + }, 0);
  46 +
  47 + //lazyload
  48 + $('img.lazy').lazyload();
  49 +
  50 + //显示品牌介绍所有文字
  51 + function showMoreIntro() {
  52 + var intro = $intro.attr('_title');
  53 +
  54 + $intro.text(intro);
  55 +
  56 + $('#more-intro .more').css('visibility', 'hidden');
  57 + }
  58 +
  59 + $('#more-intro').delegate('.more', 'touchstart', function(e) {
  60 + e.preventDefault();
  61 + showMoreIntro();
  62 + }).delegate('.more', 'click', function() {
  63 + showMoreIntro();
  64 + });
  65 +
  66 + //下拉加载更多
  67 + $(window).scroll(function() {
  68 + var count;
  69 +
  70 + if (!canScroll) {
  71 + return;
  72 + }
  73 +
  74 + if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH) {
  75 + //loadData
  76 + if (!dataEnd) {
  77 + count = $infoContent.children('.info-block').length;
  78 + canScroll = false;
  79 + $.ajax({
  80 + type: 'GET',
  81 + url: '/ps/loadInfo',
  82 + data: {
  83 + start: count
  84 + }
  85 + }).then(function(data) {
  86 + var html = '',
  87 + res,
  88 + i;
  89 + if (data.success) {
  90 + if (data.end) {
  91 + dataEnd = true;
  92 +
  93 + $loading.addClass('hide');
  94 + $noMore.removeClass('hide');
  95 + }
  96 + res = data.data;
  97 + for (i = 0; i < res.length; i++) {
  98 + html += Mustache.render(tpl, res[i]);
  99 + }
  100 + if (html !== '') {
  101 + $infoContent.append(html);
  102 +
  103 + //lazyload 不包含src即未加载的图片
  104 + $('img.lazy').lazyload({
  105 + container: $infoContent
  106 + });
  107 + }
  108 + canScroll = true;
  109 + }
  110 + });
  111 + }
  112 + }
  113 + });
  114 + });
  115 +};
  1 +seajs.use(['jquery/1.8.3/jquery-debug', 'yohobuy-mobile/1.0.0/public/js/ps-debug'], function($, ps) {
  2 + $("#container").removeClass('hide');
  3 +
  4 + if (ps) {
  5 + ps.init();
  6 + }
  7 +});
@@ -156,9 +156,14 @@ exports.init = function() { @@ -156,9 +156,14 @@ exports.init = function() {
156 $container = $svc; 156 $container = $svc;
157 break; 157 break;
158 } 158 }
  159 + if (len === 0) {
  160 + //无返回数据
  161 + html = '<p class="search-tip">未找到相关搜索结果</p>';
  162 + } else {
159 for (i = 0; i < len; i++) { 163 for (i = 0; i < len; i++) {
160 html += Mustache.render(tpl, goods[i]); 164 html += Mustache.render(tpl, goods[i]);
161 } 165 }
  166 + }
162 if (nav.reload) { 167 if (nav.reload) {
163 $container.html(html); 168 $container.html(html);
164 } else { 169 } else {
  1 +@-webkit-keyframes scale{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:.7}80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}45%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:.7}80%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.ball-pulse>div:nth-child(0){-webkit-animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s 0s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(1){-webkit-animation:scale .75s .12s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s .12s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(2){-webkit-animation:scale .75s .24s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s .24s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div:nth-child(3){-webkit-animation:scale .75s .36s infinite cubic-bezier(.2,.68,.18,1.08);animation:scale .75s .36s infinite cubic-bezier(.2,.68,.18,1.08)}.ball-pulse>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}@-webkit-keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px)}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}.ball-pulse-sync>div:nth-child(0){-webkit-animation:ball-pulse-sync .6s 0s infinite ease-in-out;animation:ball-pulse-sync .6s 0s infinite ease-in-out}.ball-pulse-sync>div:nth-child(1){-webkit-animation:ball-pulse-sync .6s .07s infinite ease-in-out;animation:ball-pulse-sync .6s .07s infinite ease-in-out}.ball-pulse-sync>div:nth-child(2){-webkit-animation:ball-pulse-sync .6s .14s infinite ease-in-out;animation:ball-pulse-sync .6s .14s infinite ease-in-out}.ball-pulse-sync>div:nth-child(3){-webkit-animation:ball-pulse-sync .6s .21s infinite ease-in-out;animation:ball-pulse-sync .6s .21s infinite ease-in-out}.ball-pulse-sync>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}@-webkit-keyframes ball-scale{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale>div{background-color:#fff;border-radius:100%;margin:2px;display:inline-block;height:60px;width:60px;-webkit-animation:ball-scale 1s 0s ease-in-out infinite;animation:ball-scale 1s 0s ease-in-out infinite}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ball-rotate{position:relative}.ball-rotate>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:relative}.ball-rotate>div:first-child{-webkit-animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;animation:rotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite}.ball-rotate>div:after,.ball-rotate>div:before{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;content:"";position:absolute;opacity:.8}.ball-rotate>div:before{top:0;left:-28px}.ball-rotate>div:after{top:0;left:25px}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(0.6);transform:rotate(180deg) scale(0.6)}100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}.ball-clip-rotate>div{border-radius:100%;margin:2px;border:2px solid #fff;border-bottom-color:transparent;height:25px;width:25px;background:0 0!important;display:inline-block;-webkit-animation:rotate .75s 0s linear infinite;animation:rotate .75s 0s linear infinite}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(0.6);transform:rotate(180deg) scale(0.6)}100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}@keyframes scale{30%{-webkit-transform:scale(0.3);transform:scale(0.3)}100%{-webkit-transform:scale(1);transform:scale(1)}}.ball-clip-rotate-pulse{position:relative;-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}.ball-clip-rotate-pulse>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;top:0;left:0;border-radius:100%}.ball-clip-rotate-pulse>div:first-child{background:#fff;height:16px;width:16px;top:9px;left:9px;-webkit-animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:scale 1s 0s cubic-bezier(.09,.57,.49,.9) infinite}.ball-clip-rotate-pulse>div:last-child{position:absolute;width:30px;height:30px;background:0 0;border:2px solid;border-color:#fff transparent;-webkit-animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:rotate 1s 0s cubic-bezier(.09,.57,.49,.9) infinite;-webkit-animation-duration:1s;animation-duration:1s}@keyframes rotate{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(0.6);transform:rotate(180deg) scale(0.6)}100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}.ball-clip-rotate-multiple{position:relative}.ball-clip-rotate-multiple>div{position:absolute;left:0;top:0;border:2px solid #fff;border-bottom-color:transparent;border-top-color:transparent;border-radius:100%;height:35px;width:35px;-webkit-animation:rotate 1s 0s ease-in-out infinite;animation:rotate 1s 0s ease-in-out infinite}.ball-clip-rotate-multiple>div:last-child{display:inline-block;top:10px;left:10px;width:15px;height:15px;-webkit-animation-duration:.5s;animation-duration:.5s;border-color:#fff transparent;-webkit-animation-direction:reverse;animation-direction:reverse}@-webkit-keyframes ball-scale-ripple{0%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@keyframes ball-scale-ripple{0%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}.ball-scale-ripple>div{height:50px;width:50px;border-radius:100%;border:2px solid #fff;-webkit-animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple 1s 0s infinite cubic-bezier(.21,.53,.56,.8)}@-webkit-keyframes ball-scale-ripple-multiple{0%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}@keyframes ball-scale-ripple-multiple{0%{-webkit-transform:scale(0.1);transform:scale(0.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}.ball-scale-ripple-multiple{position:relative;-webkit-transform:translateY(-25px);-ms-transform:translateY(-25px);transform:translateY(-25px)}.ball-scale-ripple-multiple>div:nth-child(0){-webkit-animation-delay:-.2s;animation-delay:-.2s}.ball-scale-ripple-multiple>div:nth-child(1){-webkit-animation-delay:0s;animation-delay:0s}.ball-scale-ripple-multiple>div:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s}.ball-scale-ripple-multiple>div:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}.ball-scale-ripple-multiple>div{position:absolute;top:0;left:0;width:50px;height:50px;border-radius:100%;border:2px solid #fff;-webkit-animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple-multiple 1.25s 0s infinite cubic-bezier(.21,.53,.56,.8)}@-webkit-keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.ball-beat>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;display:inline-block;-webkit-animation:ball-beat .7s 0s infinite linear;animation:ball-beat .7s 0s infinite linear}.ball-beat>div:nth-child(2n-1){-webkit-animation-delay:.35s!important;animation-delay:.35s!important}@-webkit-keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale-multiple{position:relative;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}.ball-scale-multiple>div:nth-child(2){-webkit-animation-delay:.2s;animation-delay:.2s}.ball-scale-multiple>div:nth-child(3){-webkit-animation-delay:.4s;animation-delay:.4s}.ball-scale-multiple>div{background-color:#fff;border-radius:100%;position:absolute;left:0;top:0;opacity:0;margin:0;width:60px;height:60px;-webkit-animation:ball-scale-multiple 1s 0s linear infinite;animation:ball-scale-multiple 1s 0s linear infinite}@-webkit-keyframes ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px)}66%{-webkit-transform:translate(50px,0);transform:translate(50px,0)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}@keyframes ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px)}66%{-webkit-transform:translate(50px,0);transform:translate(50px,0)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}@-webkit-keyframes ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px)}66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}@keyframes ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px)}66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}@-webkit-keyframes ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}@keyframes ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px)}100%{-webkit-transform:translate(0px,0);transform:translate(0px,0)}}.ball-triangle-path{position:relative;-webkit-transform:translate(-25px,-25px);-ms-transform:translate(-25px,-25px);transform:translate(-25px,-25px)}.ball-triangle-path>div:nth-child(1){-webkit-animation-name:ball-triangle-path-1;animation-name:ball-triangle-path-1;-webkit-animation-delay:0;animation-delay:0;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.ball-triangle-path>div:nth-child(2){-webkit-animation-name:ball-triangle-path-2;animation-name:ball-triangle-path-2;-webkit-animation-delay:0;animation-delay:0;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.ball-triangle-path>div:nth-child(3){-webkit-animation-name:ball-triangle-path-3;animation-name:ball-triangle-path-3;-webkit-animation-delay:0;animation-delay:0;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.ball-triangle-path>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:10px;height:10px;border-radius:100%;border:1px solid #fff}.ball-triangle-path>div:nth-of-type(1){top:50px}.ball-triangle-path>div:nth-of-type(2){left:25px}.ball-triangle-path>div:nth-of-type(3){top:50px;left:50px}@-webkit-keyframes ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}25%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}50%{-webkit-transform:scale(0.4);transform:scale(0.4)}75%{-webkit-transform:translateY(30px);transform:translateY(30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(1);transform:scale(1)}}@keyframes ball-pulse-rise-even{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}25%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}50%{-webkit-transform:scale(0.4);transform:scale(0.4)}75%{-webkit-transform:translateY(30px);transform:translateY(30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes ball-pulse-rise-odd{0%{-webkit-transform:scale(0.4);transform:scale(0.4)}25%{-webkit-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(0.75);transform:scale(0.75)}}@keyframes ball-pulse-rise-odd{0%{-webkit-transform:scale(0.4);transform:scale(0.4)}25%{-webkit-transform:translateY(30px);transform:translateY(30px)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}75%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-transform:scale(0.75);transform:scale(0.75)}}.ball-pulse-rise>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:cubic-bezier(.15,.46,.9,.6);animation-timing-function:cubic-bezier(.15,.46,.9,.6);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}.ball-pulse-rise>div:nth-child(2n){-webkit-animation-name:ball-pulse-rise-even;animation-name:ball-pulse-rise-even}.ball-pulse-rise>div:nth-child(2n-1){-webkit-animation-name:ball-pulse-rise-odd;animation-name:ball-pulse-rise-odd}@-webkit-keyframes ball-grid-beat{50%{opacity:.7}100%{opacity:1}}@keyframes ball-grid-beat{50%{opacity:.7}100%{opacity:1}}.ball-grid-beat{width:57px}.ball-grid-beat>div:nth-child(1){-webkit-animation-delay:.36s;animation-delay:.36s;-webkit-animation-duration:.96s;animation-duration:.96s}.ball-grid-beat>div:nth-child(2){-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-duration:.93s;animation-duration:.93s}.ball-grid-beat>div:nth-child(3){-webkit-animation-delay:.68s;animation-delay:.68s;-webkit-animation-duration:1.19s;animation-duration:1.19s}.ball-grid-beat>div:nth-child(4){-webkit-animation-delay:.41s;animation-delay:.41s;-webkit-animation-duration:1.13s;animation-duration:1.13s}.ball-grid-beat>div:nth-child(5){-webkit-animation-delay:.71s;animation-delay:.71s;-webkit-animation-duration:1.34s;animation-duration:1.34s}.ball-grid-beat>div:nth-child(6){-webkit-animation-delay:-.15s;animation-delay:-.15s;-webkit-animation-duration:.94s;animation-duration:.94s}.ball-grid-beat>div:nth-child(7){-webkit-animation-delay:-.12s;animation-delay:-.12s;-webkit-animation-duration:1.2s;animation-duration:1.2s}.ball-grid-beat>div:nth-child(8){-webkit-animation-delay:.01s;animation-delay:.01s;-webkit-animation-duration:.82s;animation-duration:.82s}.ball-grid-beat>div:nth-child(9){-webkit-animation-delay:.32s;animation-delay:.32s;-webkit-animation-duration:1.19s;animation-duration:1.19s}.ball-grid-beat>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;float:left;-webkit-animation-name:ball-grid-beat;animation-name:ball-grid-beat;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}@-webkit-keyframes ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.5);transform:scale(0.5);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.5);transform:scale(0.5);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.ball-grid-pulse{width:57px}.ball-grid-pulse>div:nth-child(1){-webkit-animation-delay:-.06s;animation-delay:-.06s;-webkit-animation-duration:.72s;animation-duration:.72s}.ball-grid-pulse>div:nth-child(2){-webkit-animation-delay:.25s;animation-delay:.25s;-webkit-animation-duration:1.02s;animation-duration:1.02s}.ball-grid-pulse>div:nth-child(3){-webkit-animation-delay:-.17s;animation-delay:-.17s;-webkit-animation-duration:1.28s;animation-duration:1.28s}.ball-grid-pulse>div:nth-child(4){-webkit-animation-delay:.48s;animation-delay:.48s;-webkit-animation-duration:1.42s;animation-duration:1.42s}.ball-grid-pulse>div:nth-child(5){-webkit-animation-delay:.31s;animation-delay:.31s;-webkit-animation-duration:1.45s;animation-duration:1.45s}.ball-grid-pulse>div:nth-child(6){-webkit-animation-delay:.03s;animation-delay:.03s;-webkit-animation-duration:1.18s;animation-duration:1.18s}.ball-grid-pulse>div:nth-child(7){-webkit-animation-delay:.46s;animation-delay:.46s;-webkit-animation-duration:.87s;animation-duration:.87s}.ball-grid-pulse>div:nth-child(8){-webkit-animation-delay:.78s;animation-delay:.78s;-webkit-animation-duration:1.45s;animation-duration:1.45s}.ball-grid-pulse>div:nth-child(9){-webkit-animation-delay:.45s;animation-delay:.45s;-webkit-animation-duration:1.06s;animation-duration:1.06s}.ball-grid-pulse>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;float:left;-webkit-animation-name:ball-grid-pulse;animation-name:ball-grid-pulse;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}@-webkit-keyframes ball-spin-fade-loader{50%{opacity:.3;-webkit-transform:scale(0.4);transform:scale(0.4)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes ball-spin-fade-loader{50%{opacity:.3;-webkit-transform:scale(0.4);transform:scale(0.4)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.ball-spin-fade-loader{position:relative}.ball-spin-fade-loader>div:nth-child(1){top:25px;left:0;-webkit-animation:ball-spin-fade-loader 1s 0s infinite linear;animation:ball-spin-fade-loader 1s 0s infinite linear}.ball-spin-fade-loader>div:nth-child(2){top:17.05px;left:17.05px;-webkit-animation:ball-spin-fade-loader 1s .12s infinite linear;animation:ball-spin-fade-loader 1s .12s infinite linear}.ball-spin-fade-loader>div:nth-child(3){top:0;left:25px;-webkit-animation:ball-spin-fade-loader 1s .24s infinite linear;animation:ball-spin-fade-loader 1s .24s infinite linear}.ball-spin-fade-loader>div:nth-child(4){top:-17.05px;left:17.05px;-webkit-animation:ball-spin-fade-loader 1s .36s infinite linear;animation:ball-spin-fade-loader 1s .36s infinite linear}.ball-spin-fade-loader>div:nth-child(5){top:-25px;left:0;-webkit-animation:ball-spin-fade-loader 1s .48s infinite linear;animation:ball-spin-fade-loader 1s .48s infinite linear}.ball-spin-fade-loader>div:nth-child(6){top:-17.05px;left:-17.05px;-webkit-animation:ball-spin-fade-loader 1s .6s infinite linear;animation:ball-spin-fade-loader 1s .6s infinite linear}.ball-spin-fade-loader>div:nth-child(7){top:0;left:-25px;-webkit-animation:ball-spin-fade-loader 1s .72s infinite linear;animation:ball-spin-fade-loader 1s .72s infinite linear}.ball-spin-fade-loader>div:nth-child(8){top:17.05px;left:-17.05px;-webkit-animation:ball-spin-fade-loader 1s .84s infinite linear;animation:ball-spin-fade-loader 1s .84s infinite linear}.ball-spin-fade-loader>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute}@-webkit-keyframes ball-spin-loader{75%{opacity:.2}100%{opacity:1}}@keyframes ball-spin-loader{75%{opacity:.2}100%{opacity:1}}.ball-spin-loader{position:relative}.ball-spin-loader>span:nth-child(1){top:45px;left:0;-webkit-animation:ball-spin-loader 2s .9s infinite linear;animation:ball-spin-loader 2s .9s infinite linear}.ball-spin-loader>span:nth-child(2){top:30.68px;left:30.68px;-webkit-animation:ball-spin-loader 2s 1.8s infinite linear;animation:ball-spin-loader 2s 1.8s infinite linear}.ball-spin-loader>span:nth-child(3){top:0;left:45px;-webkit-animation:ball-spin-loader 2s 2.7s infinite linear;animation:ball-spin-loader 2s 2.7s infinite linear}.ball-spin-loader>span:nth-child(4){top:-30.68px;left:30.68px;-webkit-animation:ball-spin-loader 2s 3.6s infinite linear;animation:ball-spin-loader 2s 3.6s infinite linear}.ball-spin-loader>span:nth-child(5){top:-45px;left:0;-webkit-animation:ball-spin-loader 2s 4.5s infinite linear;animation:ball-spin-loader 2s 4.5s infinite linear}.ball-spin-loader>span:nth-child(6){top:-30.68px;left:-30.68px;-webkit-animation:ball-spin-loader 2s 5.4s infinite linear;animation:ball-spin-loader 2s 5.4s infinite linear}.ball-spin-loader>span:nth-child(7){top:0;left:-45px;-webkit-animation:ball-spin-loader 2s 6.3s infinite linear;animation:ball-spin-loader 2s 6.3s infinite linear}.ball-spin-loader>span:nth-child(8){top:30.68px;left:-30.68px;-webkit-animation:ball-spin-loader 2s 7.2s infinite linear;animation:ball-spin-loader 2s 7.2s infinite linear}.ball-spin-loader>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:15px;height:15px;border-radius:100%;background:green}@-webkit-keyframes ball-zig{33%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zig{33%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}66%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ball-zag{33%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zag{33%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}66%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.ball-zig-zag{position:relative;-webkit-transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);transform:translate(-15px,-15px)}.ball-zig-zag>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px 2px 2px 15px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;top:30px;left:30px}.ball-zig-zag>div:first-child{-webkit-animation:ball-zig .7s 0s infinite linear;animation:ball-zig .7s 0s infinite linear}.ball-zig-zag>div:last-child{-webkit-animation:ball-zag .7s 0s infinite linear;animation:ball-zag .7s 0s infinite linear}@-webkit-keyframes ball-zig-deflect{17%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}50%{-webkit-transform:translate(0,0);transform:translate(0,0)}67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zig-deflect{17%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}50%{-webkit-transform:translate(0,0);transform:translate(0,0)}67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes ball-zag-deflect{17%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}34%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}50%{-webkit-transform:translate(0,0);transform:translate(0,0)}67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball-zag-deflect{17%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}34%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}50%{-webkit-transform:translate(0,0);transform:translate(0,0)}67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.ball-zig-zag-deflect{position:relative;-webkit-transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);transform:translate(-15px,-15px)}.ball-zig-zag-deflect>div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px 2px 2px 15px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;top:30px;left:30px}.ball-zig-zag-deflect>div:first-child{-webkit-animation:ball-zig-deflect 1.5s 0s infinite linear;animation:ball-zig-deflect 1.5s 0s infinite linear}.ball-zig-zag-deflect>div:last-child{-webkit-animation:ball-zag-deflect 1.5s 0s infinite linear;animation:ball-zag-deflect 1.5s 0s infinite linear}@-webkit-keyframes line-scale{0%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(0.4);transform:scaley(0.4)}100%{-webkit-transform:scaley(1);transform:scaley(1)}}@keyframes line-scale{0%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(0.4);transform:scaley(0.4)}100%{-webkit-transform:scaley(1);transform:scaley(1)}}.line-scale>div:nth-child(1){-webkit-animation:line-scale 1s .1s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .1s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(2){-webkit-animation:line-scale 1s .2s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .2s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(3){-webkit-animation:line-scale 1s .3s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .3s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(4){-webkit-animation:line-scale 1s .4s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .4s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div:nth-child(5){-webkit-animation:line-scale 1s .5s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .5s infinite cubic-bezier(.2,.68,.18,1.08)}.line-scale>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}@-webkit-keyframes line-scale-party{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes line-scale-party{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.5);transform:scale(0.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}.line-scale-party>div:nth-child(1){-webkit-animation-delay:.77s;animation-delay:.77s;-webkit-animation-duration:1.26s;animation-duration:1.26s}.line-scale-party>div:nth-child(2){-webkit-animation-delay:.29s;animation-delay:.29s;-webkit-animation-duration:.43s;animation-duration:.43s}.line-scale-party>div:nth-child(3){-webkit-animation-delay:.28s;animation-delay:.28s;-webkit-animation-duration:1.01s;animation-duration:1.01s}.line-scale-party>div:nth-child(4){-webkit-animation-delay:.74s;animation-delay:.74s;-webkit-animation-duration:.73s;animation-duration:.73s}.line-scale-party>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;-webkit-animation-name:line-scale-party;animation-name:line-scale-party;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}@-webkit-keyframes line-scale-pulse-out{0%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(0.4);transform:scaley(0.4)}100%{-webkit-transform:scaley(1);transform:scaley(1)}}@keyframes line-scale-pulse-out{0%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(0.4);transform:scaley(0.4)}100%{-webkit-transform:scaley(1);transform:scaley(1)}}.line-scale-pulse-out>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;display:inline-block;-webkit-animation:line-scale-pulse-out .9s 0s infinite cubic-bezier(.85,.25,.37,.85);animation:line-scale-pulse-out .9s 0s infinite cubic-bezier(.85,.25,.37,.85)}.line-scale-pulse-out>div:nth-child(2),.line-scale-pulse-out>div:nth-child(4){-webkit-animation-delay:.2s!important;animation-delay:.2s!important}.line-scale-pulse-out>div:nth-child(1),.line-scale-pulse-out>div:nth-child(5){-webkit-animation-delay:.4s!important;animation-delay:.4s!important}@-webkit-keyframes line-scale-pulse-out-rapid{0%{-webkit-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(0.3);transform:scaley(0.3)}90%{-webkit-transform:scaley(1);transform:scaley(1)}}@keyframes line-scale-pulse-out-rapid{0%{-webkit-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(0.3);transform:scaley(0.3)}90%{-webkit-transform:scaley(1);transform:scaley(1)}}.line-scale-pulse-out-rapid>div{background-color:#fff;width:4px;height:35px;border-radius:2px;margin:2px;display:inline-block;-webkit-animation:line-scale-pulse-out-rapid .9s 0s infinite cubic-bezier(.11,.49,.38,.78);animation:line-scale-pulse-out-rapid .9s 0s infinite cubic-bezier(.11,.49,.38,.78)}.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){-webkit-animation-delay:.25s!important;animation-delay:.25s!important}.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5){-webkit-animation-delay:.5s!important;animation-delay:.5s!important}@-webkit-keyframes line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}@keyframes line-spin-fade-loader{50%{opacity:.3}100%{opacity:1}}.line-spin-fade-loader{position:relative}.line-spin-fade-loader>div:nth-child(1){top:20px;left:0;-webkit-animation:line-spin-fade-loader 1.2s .12s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .12s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(2){top:13.64px;left:13.64px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:line-spin-fade-loader 1.2s .24s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .24s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(3){top:0;left:20px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:line-spin-fade-loader 1.2s .36s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .36s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(4){top:-13.64px;left:13.64px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:line-spin-fade-loader 1.2s .48s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .48s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(5){top:-20px;left:0;-webkit-animation:line-spin-fade-loader 1.2s .6s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .6s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(6){top:-13.64px;left:-13.64px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:line-spin-fade-loader 1.2s .72s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .72s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(7){top:0;left:-20px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);-webkit-animation:line-spin-fade-loader 1.2s .84s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .84s infinite ease-in-out}.line-spin-fade-loader>div:nth-child(8){top:13.64px;left:-13.64px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:line-spin-fade-loader 1.2s .96s infinite ease-in-out;animation:line-spin-fade-loader 1.2s .96s infinite ease-in-out}.line-spin-fade-loader>div{background-color:#fff;border-radius:2px;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:5px;height:15px}@-webkit-keyframes triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes triangle-skew-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.triangle-skew-spin>div{width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #fff;-webkit-animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:triangle-skew-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}@-webkit-keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.square-spin>div{width:50px;height:50px;background:#fff;border:1px solid red;-webkit-animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}@-webkit-keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes pacman-balls{75%{opacity:.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@keyframes pacman-balls{75%{opacity:.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}.pacman{position:relative}.pacman>div:nth-child(3){-webkit-animation:pacman-balls 1s .33s infinite linear;animation:pacman-balls 1s .33s infinite linear}.pacman>div:nth-child(4){-webkit-animation:pacman-balls 1s .66s infinite linear;animation:pacman-balls 1s .66s infinite linear}.pacman>div:nth-child(5){-webkit-animation:pacman-balls 1s .99s infinite linear;animation:pacman-balls 1s .99s infinite linear}.pacman>div:first-of-type{width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_up .5s 0s infinite;animation:rotate_pacman_half_up .5s 0s infinite}.pacman>div:nth-child(2){width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_down .5s 0s infinite;animation:rotate_pacman_half_down .5s 0s infinite;margin-top:-50px}.pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5),.pacman>div:nth-child(6){background-color:#fff;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;-webkit-transform:translate(0,-6.25px);-ms-transform:translate(0,-6.25px);transform:translate(0,-6.25px);top:25px;left:100px}@-webkit-keyframes cube-transition{25%{-webkit-transform:translateX(50px) scale(0.5) rotate(-90deg);transform:translateX(50px) scale(0.5) rotate(-90deg)}50%{-webkit-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-webkit-transform:translateY(50px) scale(0.5) rotate(-270deg);transform:translateY(50px) scale(0.5) rotate(-270deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}@keyframes cube-transition{25%{-webkit-transform:translateX(50px) scale(0.5) rotate(-90deg);transform:translateX(50px) scale(0.5) rotate(-90deg)}50%{-webkit-transform:translate(50px,50px) rotate(-180deg);transform:translate(50px,50px) rotate(-180deg)}75%{-webkit-transform:translateY(50px) scale(0.5) rotate(-270deg);transform:translateY(50px) scale(0.5) rotate(-270deg)}100%{-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}}.cube-transition{position:relative;-webkit-transform:translate(-25px,-25px);-ms-transform:translate(-25px,-25px);transform:translate(-25px,-25px)}.cube-transition>div{width:10px;height:10px;position:absolute;top:0;left:0;background-color:#fff;-webkit-animation:cube-transition 1.6s 0s infinite ease-in-out;animation:cube-transition 1.6s 0s infinite ease-in-out}.cube-transition>div:last-child{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes spin-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.semi-circle-spin{position:relative;width:35px;height:35px;overflow:hidden}.semi-circle-spin>div{position:absolute;border-width:0;border-radius:100%;-webkit-animation:spin-rotate .6s 0s infinite linear;animation:spin-rotate .6s 0s infinite linear;background-image:-webkit-linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);background-image:linear-gradient(transparent 0,transparent 70%,#fff 30%,#fff 100%);width:100%;height:100%}
@@ -5,13 +5,22 @@ @@ -5,13 +5,22 @@
5 5
6 .iconfont { 6 .iconfont {
7 vertical-align: 9%; 7 vertical-align: 9%;
8 - margin: 0 4px 0 0; 8 + margin: 0 4rem / $pxConvertRem 0 0;
9 font-size: 24rem / $pxConvertRem; 9 font-size: 24rem / $pxConvertRem;
10 } 10 }
11 11
12 - .like-btn, .share-btn { 12 + .like-share-container {
  13 + display: inline-block;
13 float: right; 14 float: right;
  15 + margin-top: -3rem / $pxConvertRem;
  16 +
  17 + .like-btn, .share-btn {
14 color: #b0b0b0; 18 color: #b0b0b0;
15 font-size: 34rem / $pxConvertRem; 19 font-size: 34rem / $pxConvertRem;
16 } 20 }
  21 +
  22 + .share-btn {
  23 + margin-left: 20rem / $pxConvertRem;
  24 + }
  25 + }
17 } 26 }
  1 +@import "common/common", "common/time-view-like-share", "common/good-info", "common/loader";
  2 +
  3 +.ps-container {
  4 + .ps-block {
  5 + margin-bottom: 30rem / $pxConvertRem;
  6 + border-bottom: 1px solid #e0e0e0;
  7 + border-top: 1px solid #e0e0e0;
  8 + background-color: #fff;
  9 +
  10 + &.header, &.infos {
  11 + border-top: none;
  12 + }
  13 +
  14 + &.infos {
  15 + margin-bottom: 0;
  16 + background-color: #f0f0f0;
  17 + }
  18 + }
  19 +
  20 + .header {
  21 + position: relative;
  22 +
  23 + .banner {
  24 + width: 100%;
  25 + height: 310rem / $pxConvertRem;
  26 + }
  27 +
  28 + .logo {
  29 + position: absolute;
  30 + border: 1px solid #b5b5b5;
  31 + height: 168rem / $pxConvertRem;
  32 + width: 168rem / $pxConvertRem;
  33 + top: 226rem / $pxConvertRem;
  34 + left: 50rem / $pxConvertRem;
  35 + }
  36 +
  37 + .header-content {
  38 + padding: 0 30rem / $pxConvertRem;
  39 + }
  40 +
  41 + .name-islike-container {
  42 + padding-left: 248rem / $pxConvertRem;
  43 + margin-top: 24rem / $pxConvertRem;
  44 + font-size: 34rem / $pxConvertRem;
  45 + }
  46 +
  47 + .name {
  48 + color: #000;
  49 + height: 41rem / $pxConvertRem;
  50 + width: 295rem / $pxConvertRem;
  51 + }
  52 +
  53 + .brand-islike {
  54 + float: right;
  55 + color: #b0b0b0;
  56 +
  57 + &.like {
  58 + color: #f00;
  59 + }
  60 + }
  61 +
  62 + .intro {
  63 + margin-top: 49rem / $pxConvertRem;
  64 + font-size: 24rem / $pxConvertRem;
  65 + color: #444;
  66 + line-height: 150%;
  67 + }
  68 +
  69 + .more-intro {
  70 + padding: 30rem / $pxConvertRem 0;
  71 + font-size: 28rem / $pxConvertRem;
  72 + line-height: 104%;
  73 + color: #bbb;
  74 + text-align: right;
  75 + }
  76 + }
  77 +
  78 + .new-arrival {
  79 + padding-left: 0 30rem / $pxConvertRem;
  80 +
  81 + .new-arrival-header {
  82 + padding-left: 222rem / $pxConvertRem;
  83 + padding-top: 33rem / $pxConvertRem;
  84 +
  85 + .header-text {
  86 + font-size: 28rem / $pxConvertRem;
  87 + color: #000;
  88 + line-height: 122%;
  89 + font-weight: bold;
  90 + }
  91 + }
  92 +
  93 + .new-arrival-content {
  94 + padding: 20rem / $pxConvertRem 14rem / $pxConvertRem;
  95 + }
  96 +
  97 + .more-goods-container {
  98 + height: 90rem / $pxConvertRem;
  99 + padding: 0 30rem / $pxConvertRem;
  100 + border-top: 1px solid #e0e0e0;
  101 + color: #000;
  102 + }
  103 +
  104 + .mg-text {
  105 + height: 100%;
  106 + line-height: 90rem / $pxConvertRem;
  107 + }
  108 +
  109 + .more-prods {
  110 + float: right;
  111 + color: #b0b0b0;
  112 + }
  113 +
  114 + .new-arrival-header .more-prods {
  115 + margin-right: 30rem / $pxConvertRem;
  116 + margin-top: 10rem / $pxConvertRem;
  117 + }
  118 +
  119 + }
  120 +
  121 +
  122 + .info-title {
  123 + margin: 0 29rem / $pxConvertRem;
  124 + border: 1px solid #e0e0e0;
  125 + border-bottom: none;
  126 + line-height: 72rem / $pxConvertRem;
  127 + font-size: 30rem / $pxConvertRem;
  128 + color: #b0b0b0;
  129 + text-align: center;
  130 + background-color: #fff;
  131 + }
  132 +
  133 + .info-block {
  134 + width: 100%;
  135 + border-bottom: 1px solid #e0e0e0;
  136 + margin-bottom: 30rem / $pxConvertRem;
  137 + background-color: #fff;
  138 + padding-bottom: 30rem / $pxConvertRem;
  139 +
  140 + &:last-child {
  141 + margin-bottom: 0;
  142 + }
  143 +
  144 + .info-block-img {
  145 + width: 100%;
  146 + height: 400rem / $pxConvertRem;
  147 + }
  148 +
  149 + .info-eximg-container {
  150 + padding: 0 30rem / $pxConvertRem;
  151 + margin-top: 32rem / $pxConvertRem;
  152 +
  153 + .info-block-title {
  154 + line-height: 44rem / $pxConvertRem;
  155 + color: #000;
  156 + font-size: 40rem / $pxConvertRem;
  157 + font-weight:bold;
  158 + }
  159 +
  160 + .info-block-content {
  161 + margin: 16rem / $pxConvertRem 0 0 0;
  162 + line-height: 46rem / $pxConvertRem;
  163 + font-size: 28rem / $pxConvertRem;
  164 + color: #444;
  165 + }
  166 +
  167 + .time-view-like-share {
  168 + margin-top: 16rem / $pxConvertRem;
  169 + }
  170 + }
  171 + }
  172 +}
  173 +
  174 +.load-more-info {
  175 + width: 100%;
  176 + height: 70rem / $pxConvertRem;
  177 + line-height: 70rem / $pxConvertRem;
  178 + text-align: center;
  179 + font-size: 14px;
  180 + overflow: hidden;
  181 +
  182 + .loading {
  183 + display: inline-block;
  184 + vertical-align: top;
  185 +
  186 + .loader-inner {
  187 + display: inline-block;
  188 + height: 40rem / $pxConvertRem;
  189 + width: 40rem / $pxConvertRem;
  190 + margin-top: 12rem / $pxConvertRem;
  191 +
  192 + > div {
  193 + height: 30rem / $pxConvertRem;
  194 + width: 30rem / $pxConvertRem;
  195 + border: 2px solid #f00;
  196 + border-bottom-color: transparent;
  197 + }
  198 + }
  199 + }
  200 +}
@@ -215,3 +215,11 @@ body { @@ -215,3 +215,11 @@ body {
215 .sub-classify li.chosed .chosed-icon { 215 .sub-classify li.chosed .chosed-icon {
216 display: inline-block; 216 display: inline-block;
217 } 217 }
  218 +
  219 +.search-tip {
  220 + color: #ccc;
  221 + text-align: center;
  222 + vertical-align: middle;
  223 + font-size: 28rem / $pxConvertRem;
  224 + margin-top: 5.5rem;
  225 +}
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 */ 5 */
6 var saunter = require('./views/controller/saunter'), 6 var saunter = require('./views/controller/saunter'),
7 tag = require('./views/controller/tag'), 7 tag = require('./views/controller/tag'),
  8 + ps = require('./views/controller/ps');
8 template = require('./views/controller/template'); 9 template = require('./views/controller/template');
9 10
10 module.exports = function(app) { 11 module.exports = function(app) {
@@ -13,6 +14,10 @@ module.exports = function(app) { @@ -13,6 +14,10 @@ module.exports = function(app) {
13 14
14 app.get('/tag', tag.show); //标签页 15 app.get('/tag', tag.show); //标签页
15 16
  17 + app.get('/ps', ps.show); //plus + star
  18 + app.get('/ps/readTpl', ps.readTpl); //获取相关资讯模板
  19 + app.get('/ps/loadInfo', ps.loadInfo); //加载相关资讯数据
  20 +
16 app.get('/tpl', template.show); //模板页 21 app.get('/tpl', template.show); //模板页
17 app.get('/tpl/readTpl', template.readTpl); //读取模板 22 app.get('/tpl/readTpl', template.readTpl); //读取模板
18 app.get('/tpl/classification', template.readClassification); //读取分类数据 23 app.get('/tpl/classification', template.readClassification); //读取分类数据
  1 +/**
  2 + * plus/star页控制器文件
  3 + * @author: xuqi(qi.xu@yoho.cn)
  4 + * @date: 2015/4/15
  5 + */
  6 +var data = require('../../public/js/data')('ps'),
  7 + dataInfos = require('../../public/js/data')('dataInfo'),
  8 + path = require('path'),
  9 + fs = require('fs'),
  10 + tplPath = path.normalize(path.join(__dirname, '../partials/ps/info-item.html'));
  11 +
  12 +exports.show = function(req, res) {
  13 + res.render('pages/ps', {
  14 + data: data,
  15 + layout: '../layouts/layout',
  16 + css: '../css/ps.css',
  17 + usejs: 'ps/footer'
  18 + });
  19 +};
  20 +
  21 +exports.readTpl = function(req, res) {
  22 + fs.readFile(tplPath, 'utf8', function(err, data) {
  23 + if (err) {
  24 + res.send({success: false});
  25 + }
  26 +
  27 + fs.readFile(
  28 + path.normalize(path.join(__dirname, '../partials/common/time-view-like-share.html')),
  29 + 'utf8', function(err, subData) {
  30 + if (err) {
  31 + res.send({success: false});
  32 + }
  33 + data = data.replace('{{> common/time_view_like_share}}', subData); //Note: 后端需将partials目录替换为内容
  34 + res.send({
  35 + success: true,
  36 + data: data
  37 + });
  38 + });
  39 + });
  40 +};
  41 +
  42 +exports.loadInfo = function(req, res) {
  43 + var start = 1 * req.query.start,
  44 + count = 3,
  45 + end = false;
  46 + if (start + count >= dataInfos.length) {
  47 + end = true;
  48 + }
  49 + res.send({
  50 + success: true,
  51 + end: end,
  52 + data: dataInfos.slice(start, start + count)
  53 + });
  54 +}
  1 +<div class="ps-container">
  2 + {{# data}}
  3 + <div class="header ps-block">
  4 + <img class="banner lazy" data-original="{{banner}}">
  5 + <img class="logo lazy" data-original="{{logo}}">
  6 + <div class="header-content">
  7 + <p class="name-islike-container">
  8 + <span class="name">{{name}}</span>
  9 + <a class="brand-islike iconfont {{# isLike}}like{{/ isLike}}" href="javascript:void(0)">
  10 + &#xe605;
  11 + </a>
  12 + </p>
  13 + <p id="intro" class="intro">
  14 + {{intro}}
  15 + </p>
  16 + <div id="more-intro" class="more-intro">
  17 + <span class="more-intro-text more">more</span>
  18 + <span class="more-intro-icon more iconfont">&#xe607;</span>
  19 + </div>
  20 + </div>
  21 + </div>
  22 + <div class="new-arrival ps-block">
  23 + {{# newArrival}}
  24 + <div class="new-arrival-header">
  25 + <span class="header-text">NEW ARRIVAL</span>
  26 + <a class="more-prods iconfont" href="{{moreUrl}}">&#xe606;</a>
  27 + </div>
  28 + <div class="new-arrival-content clearfix">
  29 + {{# naList}}
  30 + {{> common/good_info}}
  31 + {{/ naList}}
  32 + </div>
  33 + <div class="more-goods-container">
  34 + <p class="mg-text">
  35 + 更多商品
  36 + <a class="more-prods iconfont" href="{{moreUrl}}">&#xe604;</a>
  37 + </p>
  38 + </div>
  39 + {{/ newArrival}}
  40 + </div>
  41 + <div class="infos ps-block">
  42 + <div class="info-title-container">
  43 + <h2 class="info-title">相关文章</div>
  44 + </div>
  45 + <div id="info-content" class="info-content">
  46 + {{# info}}
  47 + {{> ps/info_item}}
  48 + {{/ info}}
  49 + </div>
  50 + </div>
  51 + <div id="load-more-info" class="load-more-info">
  52 + <div class="loading status">
  53 + <div class="loader-inner ball-clip-rotate">
  54 + <div></div>
  55 + </div>
  56 + 正在加载...
  57 + </div>
  58 + <span class="no-more status hide">没有更多的资讯</span>
  59 + </div>
  60 + {{/ data}}
  61 +</div>
1 -<p class="time-view-like-share clearfix"> 1 +<div class="time-view-like-share clearfix">
2 <i class="iconfont">&#xe603;</i> 2 <i class="iconfont">&#xe603;</i>
3 {{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp; 3 {{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp;
4 <i class="iconfont">&#xe602;</i> 4 <i class="iconfont">&#xe602;</i>
5 {{pageView}} 5 {{pageView}}
  6 + <div class="like-share-container">
6 {{# like}} 7 {{# like}}
7 <a href="javascript:;" class="iconfont like-btn">&#xe601;</a> 8 <a href="javascript:;" class="iconfont like-btn">&#xe601;</a>
  9 + {{.}}
8 {{/ like}} 10 {{/ like}}
9 {{# share}} 11 {{# share}}
10 <a href="javascript:;" class="iconfont share-btn">&#xe600;</a> 12 <a href="javascript:;" class="iconfont share-btn">&#xe600;</a>
11 {{/ share}} 13 {{/ share}}
12 -</p>  
  14 + </div>
  15 +</div>
  1 +<div class="info-block">
  2 + <a href="{{src}}">
  3 + <img class="info-block-img lazy" data-original="{{img}}">
  4 + </a>
  5 + <div class="info-eximg-container">
  6 + <h2 class="info-block-title">{{title}}</h2>
  7 + <p class="info-block-content">{{content}}</p>
  8 + {{> common/time_view_like_share}}
  9 + </div>
  10 +</div>