Merge branch 'feature/plus-star' into develop

@@ -2,6 +2,7 @@ var yohobuyMobile;
 
 require('./public/js/saunter');
 require('./public/js/tag');
+require('./public/js/ps');
 require('./public/js/template');
 
 module.exports = yohobuyMobile;

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Wed Apr 22 10:17:10 2015
+Created by FontForge 20120731 at Wed Apr 22 10:54:24 2015
  By Ads
 </metadata>
 <defs>

@@ -551,7 +551,7 @@ module.exports = function(flag) {
                               '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”',
                         publishTime: '2月13日 12:34',
                         pageView: 3445,
-                        like: true,
+                        like: 80,
                         share: false //不显示share标签
                     }
                 },
@@ -568,11 +568,165 @@ module.exports = function(flag) {
                               '为获取第一手的东宝特地来到东京并抢到了头排的“赏秀位”',
                         publishTime: '2月13日 12:34',
                         pageView: 3445,
-                        like: true,
+                        like: 80,
                         share: false
                     }
                 }
             ];
+        //plus+star页模拟数据
+        case 'ps':
+            return {
+                banner: 'http://7xidk0.com1.z0.glb.clouddn.com/star-banner.png',
+                logo: 'http://7xidk0.com1.z0.glb.clouddn.com/star-brand.png',
+                name: 'SSUR',
+                isLike: true,
+                intro: '纽约地下街头品牌SSUR，由艺术家Russell所成立，近年来以恶搞、讽刺各大' +
+                       '品牌而闻名，包括了CHANEL、ROLEX、Cartier等等。Ssur的创办人是艺术家' +
+                       'Russell, ssur就是其名字反过来写。剩余的位置为了测试文字截取功能是我不' +
+                       '得以而添加的，呵呵哒',
+                newArrival: {
+                    moreUrl: '',
+                    naList: [
+                        {
+                            thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/02/08/023f696cf1ae78688bc6c8edeccc480c2c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                            name: 'GAWS DIGI 丛林数码印花拼接卫衣',
+                            isLike: false,
+                            price: 1268,
+                            salePrice: 589,
+                            isSale: true,
+                            isFew: true,
+                            isNew: false,
+                            url: ''
+                        },
+                        {
+                            thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/01/08/07/012f23fc2390ccd634082d34cc2982bf4c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                            name: 'CLOTtee 撞色连帽外套',
+                            isLike: false,
+                            price: 488,
+                            salePrice: 139,
+                            isSale: true,
+                            isFew: true,
+                            isNew: false,
+                            url: ''
+                        },
+                        {
+                            thumb: 'http://img13.static.yhbimg.com/goodsimg/2015/03/03/08/0244a127c89c1f77ab47f55891e45be1e6.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                            name: 'HALFGIRL 插肩棒球服短裙套装',
+                            isLike: true,
+                            price: 478,
+                            salePrice: 208,
+                            isSale: true,
+                            isFew: true,
+                            isNew: false,
+                            url: ''
+                        },
+                        {
+                            thumb: 'http://img11.static.yhbimg.com/goodsimg/2015/03/02/09/0139514beb37bf2bf321eafd1a915117f5.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                            name: '黄伟文Wyman X yohood联名商品YYYOHOOD连帽卫衣',
+                            isLike: false,
+                            price: 589,
+                            salePrice: 148,
+                            isSale: false,
+                            isFew: false,
+                            isNew: true,
+                            url: ''
+                        }
+                    ]
+                },
+                info: [
+                    {
+                        img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                        title: '1.副线不知为何总是好看点',
+                        content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
+                                 'In England中Panul Smith缔造了一个传奇',
+                        publishTime: '2月13日 12:34',
+                        pageView: 3445,
+                        like: 23,
+                        share: true,
+                        url: ''
+                    },
+                    {
+                        img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                        title: '2.副线不知为何总是好看点',
+                        content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
+                                 'In England中Panul Smith缔造了一个传奇',
+                        publishTime: '2月13日 12:34',
+                        pageView: 3445,
+                        like: 23,
+                        share: true,
+                        url: ''
+                    }
+                ]
+            };
+        case 'dataInfo':
+            return [
+                {
+                    img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    title: '1.副线不知为何总是好看点',
+                    content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
+                             'In England中Panul Smith缔造了一个传奇',
+                    publishTime: '2月13日 12:34',
+                    pageView: 3445,
+                    like: 23,
+                    share: true,
+                    url: ''
+                },
+                {
+                    img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    title: '2.副线不知为何总是好看点',
+                    content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
+                             'In England中Panul Smith缔造了一个传奇',
+                    publishTime: '2月13日 12:34',
+                    pageView: 3445,
+                    like: 23,
+                    share: true,
+                    url: ''
+                },
+                {
+                    img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    title: '3.副线不知为何总是好看点',
+                    content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
+                             'In England中Panul Smith缔造了一个传奇',
+                    publishTime: '2月13日 12:34',
+                    pageView: 3445,
+                    like: 23,
+                    share: true,
+                    url: ''
+                },
+                {
+                    img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    title: '4.副线不知为何总是好看点',
+                    content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
+                             'In England中Panul Smith缔造了一个传奇',
+                    publishTime: '2月13日 12:34',
+                    pageView: 3445,
+                    like: 23,
+                    share: true,
+                    url: ''
+                },
+                {
+                    img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    title: '5.副线不知为何总是好看点',
+                    content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
+                             'In England中Panul Smith缔造了一个传奇',
+                    publishTime: '2月13日 12:34',
+                    pageView: 3445,
+                    like: 23,
+                    share: true,
+                    url: ''
+                },
+                {
+                    img: 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    title: '6.副线不知为何总是好看点',
+                    content: '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' +
+                             'In England中Panul Smith缔造了一个传奇',
+                    publishTime: '2月13日 12:34',
+                    pageView: 3445,
+                    like: 23,
+                    share: true,
+                    url: ''
+                }
+            ];
         case 'tpl':
             return [
                 {

+/**
+ * plus+star页js
+ * @author: xuqi(qi.xu@yoho.cn)
+ * @date；2015/4/16
+ */
+
+var $ = require('jquery'),
+    Mustache = require('mustache'),
+    ellipsis = require('mlellipsis');
+
+require('lazyload');
+
+/**
+ * 初始化页面功能
+ */
+exports.init = function() {
+    $(function() {
+        var $intro = $('#intro'),
+            $infoContent = $('#info-content'),
+            $loadMore = $('#load-more-info'),
+            $loadStatus = $loadMore.children('.status'),
+            $loading = $loadStatus.filter('.loading'),
+            $noMore = $loadStatus.filter('.no-more'),
+            loadMoreH = $loadMore.height(),
+            winH = $(window).height(),
+            dataEnd = false,
+            canScroll = true,
+            tpl;
+
+        //获取相关资讯模板
+         $.get('/ps/readTpl', function(data) {
+            if (data.success) {
+                tpl = data.data;
+                Mustache.parse(tpl); //pre-compile and cache template
+            }
+        });
+
+        //文字截取
+        ellipsis.init();
+        setTimeout(function() {
+            $intro.mlellipsis(4); //品牌介绍
+            $('.info-block-content').each(function() { //相关文章
+                $(this).mlellipsis(2);
+            });
+        }, 0);
+
+        //lazyload
+        $('img.lazy').lazyload();
+
+        //显示品牌介绍所有文字
+        function showMoreIntro() {
+            var intro = $intro.attr('_title');
+
+            $intro.text(intro);
+
+            $('#more-intro .more').css('visibility', 'hidden');
+        }
+
+        $('#more-intro').delegate('.more', 'touchstart', function(e) {
+            e.preventDefault();
+            showMoreIntro();
+        }).delegate('.more', 'click', function() {
+            showMoreIntro();
+        });
+
+        //下拉加载更多
+        $(window).scroll(function() {
+            var count;
+
+            if (!canScroll) {
+                return;
+            }
+
+            if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH) {
+                //loadData
+                if (!dataEnd) {
+                    count = $infoContent.children('.info-block').length;
+                    canScroll = false;
+                    $.ajax({
+                        type: 'GET',
+                        url: '/ps/loadInfo',
+                        data: {
+                            start: count
+                        }
+                    }).then(function(data) {
+                        var html = '',
+                            res,
+                            i;
+                        if (data.success) {
+                            if (data.end) {
+                                dataEnd = true;
+
+                                $loading.addClass('hide');
+                                $noMore.removeClass('hide');
+                            }
+                            res = data.data;
+                            for (i = 0; i < res.length; i++) {
+                                html += Mustache.render(tpl, res[i]);
+                            }
+                            if (html !== '') {
+                                $infoContent.append(html);
+
+                                //lazyload 不包含src即未加载的图片
+                                $('img.lazy').lazyload({
+                                    container: $infoContent
+                                });
+                            }
+                            canScroll = true;
+                        }
+                    });
+                }
+            }
+        });
+    });
+};
\ No newline at end of file

+seajs.use(['jquery/1.8.3/jquery-debug', 'yohobuy-mobile/1.0.0/public/js/ps-debug'], function($, ps) {
+    $("#container").removeClass('hide');
+
+    if (ps) {
+        ps.init();
+    }
+});
\ No newline at end of file

@@ -156,9 +156,14 @@ exports.init = function() {
                             $container = $svc;
                             break;
                     }
+                    if (len === 0) {
+                        //无返回数据
+                        html = '<p class="search-tip">未找到相关搜索结果</p>';
+                    } else {
                         for (i = 0; i < len; i++) {
                             html += Mustache.render(tpl, goods[i]);
                         }
+                    }
                     if (nav.reload) {
                         $container.html(html);
                     } else {

+@-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%}
\ No newline at end of file

@@ -5,13 +5,22 @@
 
     .iconfont {
         vertical-align: 9%;
-        margin: 0 4px 0 0;
+        margin: 0 4rem / $pxConvertRem 0 0;
         font-size: 24rem / $pxConvertRem;
     }
 
-    .like-btn, .share-btn {
+    .like-share-container {
+        display: inline-block;
         float: right;
+        margin-top: -3rem / $pxConvertRem;
+        
+        .like-btn, .share-btn {
             color: #b0b0b0;
             font-size: 34rem / $pxConvertRem;
         }
+
+        .share-btn {
+            margin-left: 20rem / $pxConvertRem;
+        }
+    }
 }
\ No newline at end of file

+@import "common/common", "common/time-view-like-share", "common/good-info", "common/loader";
+
+.ps-container {
+    .ps-block {
+        margin-bottom: 30rem / $pxConvertRem;
+        border-bottom: 1px solid #e0e0e0;
+        border-top: 1px solid #e0e0e0;
+        background-color: #fff;
+
+        &.header, &.infos {
+            border-top: none;
+        }
+
+        &.infos {
+            margin-bottom: 0;
+            background-color: #f0f0f0;
+        }
+    }
+
+    .header {
+        position: relative;
+
+        .banner {
+            width: 100%;
+            height: 310rem / $pxConvertRem;
+        }
+
+        .logo {
+            position: absolute;
+            border: 1px solid #b5b5b5;
+            height: 168rem / $pxConvertRem;
+            width: 168rem / $pxConvertRem;
+            top: 226rem / $pxConvertRem;
+            left: 50rem / $pxConvertRem;
+        }
+
+        .header-content {
+            padding: 0 30rem / $pxConvertRem;
+        }
+
+        .name-islike-container {
+            padding-left: 248rem / $pxConvertRem;
+            margin-top: 24rem / $pxConvertRem;
+            font-size: 34rem / $pxConvertRem;
+        }
+
+        .name {
+            color: #000;
+            height: 41rem / $pxConvertRem;
+            width: 295rem / $pxConvertRem;
+        }
+
+        .brand-islike {
+            float: right;
+            color: #b0b0b0;
+
+            &.like {
+                color: #f00;
+            }
+        }
+
+        .intro {
+            margin-top: 49rem / $pxConvertRem;
+            font-size: 24rem / $pxConvertRem;
+            color: #444;
+            line-height: 150%;
+        }
+
+        .more-intro {
+            padding: 30rem / $pxConvertRem 0;
+            font-size: 28rem / $pxConvertRem;
+            line-height: 104%;
+            color: #bbb;
+            text-align: right;
+        }
+    }
+
+    .new-arrival {
+        padding-left: 0 30rem / $pxConvertRem;
+
+        .new-arrival-header {
+            padding-left: 222rem / $pxConvertRem;
+            padding-top: 33rem / $pxConvertRem;
+
+            .header-text {
+                font-size: 28rem / $pxConvertRem;
+                color: #000;
+                line-height: 122%;
+                font-weight: bold;
+            }
+        }
+
+        .new-arrival-content {
+            padding: 20rem / $pxConvertRem 14rem / $pxConvertRem;
+        }
+
+        .more-goods-container {
+            height: 90rem / $pxConvertRem;
+            padding: 0 30rem / $pxConvertRem;
+            border-top: 1px solid #e0e0e0;
+            color: #000;
+        }
+
+        .mg-text {
+            height: 100%;
+            line-height: 90rem / $pxConvertRem;
+        }
+
+        .more-prods {
+            float: right;
+            color: #b0b0b0;
+        }
+
+        .new-arrival-header .more-prods {
+            margin-right: 30rem / $pxConvertRem;
+            margin-top: 10rem / $pxConvertRem;
+        }
+
+    }
+
+
+    .info-title {
+        margin: 0 29rem / $pxConvertRem;
+        border: 1px solid #e0e0e0;
+        border-bottom: none;
+        line-height: 72rem / $pxConvertRem;
+        font-size: 30rem / $pxConvertRem;
+        color: #b0b0b0;
+        text-align: center;
+        background-color: #fff;
+    }
+
+    .info-block {
+        width: 100%;
+        border-bottom: 1px solid #e0e0e0;
+        margin-bottom: 30rem / $pxConvertRem;
+        background-color: #fff;
+        padding-bottom: 30rem / $pxConvertRem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        .info-block-img {
+            width: 100%;
+            height: 400rem / $pxConvertRem;
+        }
+
+        .info-eximg-container {
+            padding: 0 30rem / $pxConvertRem;
+            margin-top: 32rem / $pxConvertRem;
+
+            .info-block-title {
+                line-height: 44rem / $pxConvertRem;
+                color: #000;
+                font-size: 40rem / $pxConvertRem;
+                font-weight:bold;
+            }
+
+            .info-block-content {
+                margin: 16rem / $pxConvertRem 0 0 0;
+                line-height: 46rem / $pxConvertRem;
+                font-size: 28rem / $pxConvertRem;
+                color: #444;
+            }
+
+            .time-view-like-share {
+                margin-top: 16rem / $pxConvertRem;
+            }
+        }
+    }
+}
+
+.load-more-info {
+    width: 100%;
+    height: 70rem / $pxConvertRem;
+    line-height: 70rem / $pxConvertRem;
+    text-align: center;
+    font-size: 14px;
+    overflow: hidden;
+
+    .loading {
+        display: inline-block;
+        vertical-align: top;
+
+        .loader-inner {
+            display: inline-block;
+            height: 40rem / $pxConvertRem;
+            width: 40rem / $pxConvertRem;
+            margin-top: 12rem / $pxConvertRem;
+
+            > div {
+                height: 30rem / $pxConvertRem;
+                width: 30rem / $pxConvertRem;
+                border: 2px solid #f00;
+                border-bottom-color: transparent;
+            }
+        }
+    }
+}
\ No newline at end of file

@@ -215,3 +215,11 @@ body {
 .sub-classify li.chosed .chosed-icon {
     display: inline-block;
 }
+
+.search-tip {
+    color: #ccc;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 28rem / $pxConvertRem;
+    margin-top: 5.5rem;
+}
\ No newline at end of file

@@ -5,6 +5,7 @@
  */
 var saunter = require('./views/controller/saunter'),
     tag = require('./views/controller/tag'),
+    ps = require('./views/controller/ps');
     template = require('./views/controller/template');
 
 module.exports = function(app) {
@@ -13,6 +14,10 @@ module.exports = function(app) {
 
     app.get('/tag', tag.show); //标签页
 
+    app.get('/ps', ps.show); //plus + star
+    app.get('/ps/readTpl', ps.readTpl); //获取相关资讯模板
+    app.get('/ps/loadInfo', ps.loadInfo); //加载相关资讯数据
+    
     app.get('/tpl', template.show); //模板页
     app.get('/tpl/readTpl', template.readTpl); //读取模板
     app.get('/tpl/classification', template.readClassification); //读取分类数据

+/**
+ * plus/star页控制器文件
+ * @author: xuqi(qi.xu@yoho.cn)
+ * @date: 2015/4/15
+ */
+var data = require('../../public/js/data')('ps'),
+    dataInfos = require('../../public/js/data')('dataInfo'),
+    path = require('path'),
+    fs = require('fs'),
+    tplPath = path.normalize(path.join(__dirname, '../partials/ps/info-item.html'));
+
+exports.show = function(req, res) {
+    res.render('pages/ps', {
+        data: data,
+        layout: '../layouts/layout',
+        css: '../css/ps.css',
+        usejs: 'ps/footer'
+    });
+};
+
+exports.readTpl = function(req, res) {
+    fs.readFile(tplPath, 'utf8', function(err, data) {
+        if (err) {
+            res.send({success: false});
+        }
+
+        fs.readFile(
+            path.normalize(path.join(__dirname, '../partials/common/time-view-like-share.html')),
+            'utf8', function(err, subData) {
+            if (err) {
+                res.send({success: false});
+            }
+            data = data.replace('{{> common/time_view_like_share}}', subData); //Note: 后端需将partials目录替换为内容
+            res.send({
+                success: true,
+                data: data
+            });
+        });
+    });
+};
+
+exports.loadInfo = function(req, res) {
+    var start = 1 * req.query.start,
+        count = 3,
+        end = false;
+    if (start + count >= dataInfos.length) {
+        end = true;
+    }
+    res.send({
+        success: true,
+        end: end,
+        data: dataInfos.slice(start, start + count)
+    });
+}
\ No newline at end of file

+<div class="ps-container">
+    {{# data}}
+        <div class="header ps-block">
+            <img class="banner lazy" data-original="{{banner}}">
+            <img class="logo lazy" data-original="{{logo}}">
+            <div class="header-content">
+                <p class="name-islike-container">
+                    <span class="name">{{name}}</span>
+                    <a class="brand-islike iconfont {{# isLike}}like{{/ isLike}}" href="javascript:void(0)">
+                        &#xe605;
+                    </a>
+                </p>
+                <p id="intro" class="intro">
+                    {{intro}}
+                </p>
+                <div id="more-intro" class="more-intro">
+                    <span class="more-intro-text more">more</span>
+                    <span class="more-intro-icon more iconfont">&#xe607;</span>
+                </div>
+            </div>
+        </div>
+        <div class="new-arrival ps-block">
+            {{# newArrival}}
+                <div class="new-arrival-header">
+                    <span class="header-text">NEW ARRIVAL</span>
+                    <a class="more-prods iconfont" href="{{moreUrl}}">&#xe606;</a>
+                </div>
+                <div class="new-arrival-content clearfix">
+                        {{# naList}}
+                        {{> common/good_info}}
+                        {{/ naList}}
+                </div>
+                <div class="more-goods-container">
+                    <p class="mg-text">
+                        更多商品
+                        <a class="more-prods iconfont" href="{{moreUrl}}">&#xe604;</a>
+                    </p>
+                </div>
+            {{/ newArrival}}
+        </div>
+        <div class="infos ps-block">
+            <div class="info-title-container">
+                <h2 class="info-title">相关文章</div>
+            </div>
+            <div id="info-content" class="info-content">
+                {{# info}}
+                    {{> ps/info_item}}
+                {{/ info}}
+            </div>
+        </div>
+        <div id="load-more-info" class="load-more-info">
+            <div class="loading status">
+                <div class="loader-inner ball-clip-rotate">
+                    <div></div>
+                </div>
+                正在加载...
+            </div>
+            <span class="no-more status hide">没有更多的资讯</span>
+        </div>
+    {{/ data}}
+</div>
\ No newline at end of file

-<p class="time-view-like-share clearfix">
+<div class="time-view-like-share clearfix">
     <i class="iconfont">&#xe603;</i>
     {{publishTime}}&nbsp;&nbsp;&nbsp;&nbsp;
     <i class="iconfont">&#xe602;</i>
     {{pageView}}
+    <div class="like-share-container">
         {{# like}}
             <a href="javascript:;" class="iconfont like-btn">&#xe601;</a>
+            {{.}}
         {{/ like}}
         {{# share}}
             <a href="javascript:;" class="iconfont share-btn">&#xe600;</a>
         {{/ share}}
-</p>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file

+<div class="info-block">
+    <a href="{{src}}">
+        <img class="info-block-img lazy" data-original="{{img}}">
+    </a>
+    <div class="info-eximg-container">
+        <h2 class="info-block-title">{{title}}</h2>
+        <p class="info-block-content">{{content}}</p>
+        {{> common/time_view_like_share}}
+    </div>
+</div>
\ No newline at end of file