Merge branch 'feature/plus-star' into develop

Conflicts:
	yohobuy/m.yohobuy.com/application/modules/Guang/controllers/Plusstar.php

@@ -26,17 +26,9 @@
             },
             {
                 isReNew: true //再到着
-            },
-            {
-                isYearEndPromotion: true //年终大促
-            },
-            {
-                isYearMidPromotion: false //年中热促
             }
         ],
-        isFew: true, //即将售罄
-        isLike: false, //是否显示收藏
-        likeUrl: '' //收藏的URL
+        isFew: true //即将售罄
     }
 
 ### 侧栏导航
@@ -405,24 +397,49 @@
 
 ### PLUS+STAR
 
+    //列表页
     {
-        id: 1,
-        banner: '',
-        log: '',
-        name: '',
-        isLike: '',
-        likeUrl: '',
-        intro: '',
-        newArrival: {
-            moreUrl: '',
-            naList: [
-                {...}, //商品信息
+        ps: {
+            star: [
+                {
+                    deps: '',
+                    //情况1：一张图
+                    url: '',
+                    img: '',
+                    //情况2：多张图
+                    imgs: [
+                        {
+                            url: '',
+                            img: ''
+                        },
+                        ...
+                    ]
+                }
+            ],
+            plus: [
                 ...
             ]
-        },
-        article: {
-            info: [
-                {...}, //标签
+        }
+    }
+    //详情页
+    {
+        ps: {
+            id: 1,
+            banner: '',
+            log: '',
+            name: '',
+            isLike: '',
+            likeUrl: '',
+            intro: '',
+            newArrival: {
+                moreUrl: '',
+                naList: [
+                    {...}, //商品信息
+                    ...
+                ]
+            },
+            infos: [
+                {...}, //资讯
                 ...
             ]
         }

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+Created by FontForge 20120731 at Wed Apr 22 10:54:24 2015
+ By Ads
+</metadata>
+<defs>
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face 
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    panose-1="2 0 6 3 0 0 0 0 0 0"
+    ascent="812"
+    descent="-212"
+    x-height="792"
+    bbox="0 -224 5637 800"
+    underline-thickness="50"
+    underline-position="-100"
+    unicode-range="U+0078-E60A"
+  />
+<missing-glyph horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".notdef" horiz-adv-x="374" 
+d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
+    <glyph glyph-name=".null" horiz-adv-x="0" 
+ />
+    <glyph glyph-name="nonmarkingreturn" horiz-adv-x="341" 
+ />
+    <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" 
+d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
+t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
+t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
+    <glyph glyph-name="uniE600" unicode="&#xe600;" horiz-adv-x="1463" 
+d="M798 -160q0 -46 25 -58t61 16l537 420q36 28 36 68t-36 68l-537 424q-36 29 -61 16.5t-25 -57.5v-238q-138 0 -252.5 -24.5t-192 -63.5t-137.5 -94t-94.5 -109t-57.5 -117t-31.5 -109.5t-11 -94t-1.5 -63.5t2 -25q47 62 87 104t90 78t103.5 57.5t127 36.5t161.5 21t207 6
+v-262z" />
+    <glyph glyph-name="uniE601" unicode="&#xe601;" 
+d="M281 372q-9 -6 -16.5 -14.5t-11.5 -18t-4 -18.5v-7v-483h1q4 -15 13.5 -28t24 -20t30.5 -7h582q28 0 48.5 20t20.5 49t-20.5 49t-48.5 20h41q35 0 59 24.5t24 58.5t-24 58.5t-59 24.5q35 0 59 24t24 59q0 16 -6.5 31.5t-17.5 26.5t-26.5 17.5t-32.5 6.5h-48q21 0 38 10.5
+t27.5 27.5t10.5 38v-13q0 31 -22.5 54t-53.5 24q-125 6 -259 9q40 148 16 278q-4 25 -13.5 44.5t-22 31.5t-27 19.5t-29.5 8t-29.5 -2.5t-27.5 -12t-23 -21t-15.5 -30t-5.5 -38q-3 -19 -4.5 -36.5t-2.5 -28.5v-22q-1 -11 -2 -18.5t-2 -16t-3 -16.5t-5.5 -18t-8.5 -23
+q-24 -60 -133 -115q-4 -1 -7 -2.5t-6 -3.5l-2 -1v0zM60 356q-25 0 -42.5 -17.5t-17.5 -42.5v-405q0 -25 17.5 -42.5t42.5 -17.5h134v525h-134z" />
+    <glyph glyph-name="uniE602" unicode="&#xe602;" horiz-adv-x="1323" 
+d="M643 472q0 -68 -47.5 -116t-113.5 -48q0 -68 47 -116t113.5 -48t113.5 48t47 116t-47 116t-113 48zM643 800q-68 0 -139.5 -21.5t-133 -57t-119 -80.5t-102.5 -93t-79 -94t-52 -84t-18 -62q0 -28 25 -75t68 -102t105 -111t131 -101.5t152 -74.5t161.5 -29t161.5 29
+t152 74.5t131 101.5t105 111t68 102t25 75t-25 75t-68 101.5t-105 110.5t-131 102t-152 74.5t-161 28.5zM643 -21q-88 0 -162 44t-117 120t-43 165q0 66 25.5 127t68.5 105t102.5 70t125.5 26q131 0 225 -94q94 -99 96 -234q0 -30 -5.5 -59t-15 -55.5t-23.5 -51.5t-32 -46
+t-38.5 -39.5t-44.5 -32.5t-50 -24t-54.5 -15.5t-57.5 -5.5z" />
+    <glyph glyph-name="uniE603" unicode="&#xe603;" 
+d="M512 286v343h85v-426h-81v-2h-256v85h252zM512 -224q139 0 257 68.5t186.5 186.5t68.5 257t-68.5 257t-186.5 186.5t-257 68.5t-257 -68.5t-186.5 -186.5t-68.5 -257t68.5 -257t186.5 -186.5t257 -68.5z" />
+    <glyph glyph-name="uniE604" unicode="&#xe604;" 
+d="M774 324q6 -9 9.5 -19t2.5 -20.5t-5.5 -20.5t-12.5 -18l-1 -1l-427 -428q-18 -17 -42.5 -17t-41.5 17q-12 12 -16 27t0 30.5t15 26.5l387 387l-387 387q-17 17 -17 41.5t17.5 42t42 17.5t42.5 -17l427 -428q1 0 1 -1q2 -1 3.5 -2.5t2.5 -3.5z" />
+    <glyph glyph-name="uniE605" unicode="&#xe605;" 
+d="M707 748q-55 0 -105 -20.5t-90 -56.5q-40 36 -90 56.5t-105 20.5q-34 0 -67 -8t-62 -23t-54.5 -35.5t-45.5 -46.5t-34.5 -55.5t-22 -63t-7.5 -68.5q0 -110 69 -194l2 -2l344 -391q30 -33 73 -33t73 33l344 391q0 1 1 2h1q22 27 37.5 58.5t23.5 66t8 69.5q0 49 -14.5 94.5
+t-42 82.5t-63.5 64.5t-80.5 43t-92.5 15.5z" />
+    <glyph glyph-name="uniE606" unicode="&#xe606;" horiz-adv-x="5632" 
+d="M4316.5 156q54.5 0 93 38.5t38.5 93.5t-38.5 93.5t-93 38.5t-93.5 -38.5t-39 -93.5t39 -93.5t93.5 -38.5zM4910 156q27 0 51.5 10.5t42.5 28t28 42t10 51.5q0 55 -38.5 93.5t-93 38.5t-93.5 -38.5t-39 -93.5t39 -93.5t93 -38.5zM5504.5 156q54.5 0 93.5 38.5t39 93.5
+t-39 93.5t-93.5 38.5t-93 -38.5t-38.5 -93.5t38.5 -93.5t93 -38.5z" />
+    <glyph glyph-name="uniE607" unicode="&#xe607;" horiz-adv-x="1643" 
+d="M547 190h-1l45 -46l248 239l-45 46l-201 -194l-195 201l-46 -44z" />
+    <glyph glyph-name="uniE608" unicode="&#xe608;" horiz-adv-x="1821" 
+d="M930 135q-14 -13 -33.5 -13t-33.5 13l-252 242q-14 13 -14 32t14 32t34 13t34 -13l251 -242q6 -5 9.5 -11.5t4.5 -13.5t0 -14t-4.5 -13.5t-9.5 -11.5zM360 135q-14 13 -14 32t14 32l251 242q14 13 34 13t34 -13q6 -6 9.5 -15t3.5 -17.5t-3.5 -17t-9.5 -14.5l-252 -242
+q-14 -13 -33.5 -13t-33.5 13z" />
+    <glyph glyph-name="uniE609" unicode="&#xe609;" horiz-adv-x="1821" 
+d="M930 377l-251 -242q-14 -13 -34 -13t-34 13q-9 9 -12 20.5t0 23.5t12 20l252 242q14 13 33.5 13t33.5 -13t14 -32t-14 -32zM427 441l252 -242q9 -8 12 -20t0 -23.5t-12 -20.5q-14 -13 -34 -13t-34 13l-251 242q-14 13 -14 32t14 32q6 7 15 10.5t18 3.5t18 -3.5t16 -10.5z
+" />
+    <glyph glyph-name="uniE60A" unicode="&#xe60a;" 
+d="M1024 288q0 -139 -68.5 -257t-186.5 -186.5t-257 -68.5t-257 68.5t-186.5 186.5t-68.5 257t68.5 257t186.5 186.5t257 68.5t257 -68.5t186.5 -186.5t68.5 -257zM801 498l-365 -366l-156 156l-37 -37l193 -193l403 403z" />
+  </font>
+</defs></svg>

 var yohobuy;
 
 require('./js/passport/index');
+require('./js/guang/index');
 
 module.exports = yohobuy;

+/**
+ * 逛打包入口
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/9
+ */
+
+require('./plus-star/list');
+require('./plus-star/detail');
\ No newline at end of file

+/**
+ * 资讯相关API
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/10
+ */
+
+var $ = require('yoho.zepto'),
+    ellipsis = require('mlellipsis'),
+    lazyLoad = require('yoho.lazyload');
+
+var tip = require('../plugin/tip');
+
+ellipsis.init();
+
+/**
+ * 初始化资讯列表事件绑定
+ * @params $container 逛资讯列表容器
+ */
+function initInfosEvt($container) {
+    $container.delegate('.like-btn', 'touchstart', function(e) {
+        var $likeBtn = $(e.currentTarget),
+            $info = $likeBtn.closest('.guang-info');
+
+        $.ajax({
+            type: 'GET',
+            url: '/guang/info/prise', //TODO:cancelPrise
+            data: {
+                id: $info.data('id')
+            }
+        }).then(function(data) {
+            var code = data.code;
+
+            if (code === 200) {
+                $likeBtn.next('.like-count').text(data.data);
+            } else if (code === 400) {
+                tip.show('未登录');
+            }
+        }, function() {
+            tip.show('网络断开连接了~');
+        });
+    });
+}
+
+/**
+ * 设置指定资讯项的Lazyload和文字截取
+ * @params $infos 资讯项
+ */
+function setLazyLoadAndMellipsis($infos) {
+    lazyLoad($infos.find('img.lazy'));
+
+    $infos.each(function() {
+        var $this = $(this);
+
+        $this.find('.info-title')[0].mlellipsis(2);
+        $this.find('.info-text')[0].mlellipsis(2);
+    });
+}
+
+exports.initInfosEvt = initInfosEvt;
+exports.setLazyLoadAndMellipsis = setLazyLoadAndMellipsis;
\ No newline at end of file

+/**
+ * PLUS+STAR详情页
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/10
+ */
+
+var $ = require('yoho.zepto'),
+    ellipsis = require('mlellipsis'),
+    lazyLoad = require('yoho.lazyload');
+
+var $intro = $('#intro'),
+    $imt = $('#intro-more-txt'),
+    $infosContainer = $('#related-infos-container');
+
+var info = require('../info');
+
+var mIntro, aIntro;
+
+ellipsis.init();
+
+//Init LazyLoad
+lazyLoad($('img.lazy'));
+
+//文字介绍文字截取
+$intro[0].mlellipsis(3);
+
+//获取截取文字和完整文字
+setTimeout(function() {
+    mIntro = $intro.text();
+    aIntro = $intro.attr('title');
+});
+
+info.initInfosEvt($infosContainer);
+info.setLazyLoadAndMellipsis($infosContainer.find('.guang-info'));
+
+//文字介绍收起与展开
+$('#more-intro').bind('touchstart', function() {
+    var $this = $(this);
+
+    $this.toggleClass('spread');
+
+    if ($this.hasClass('spread')) {
+
+        //显示
+        $intro.text(aIntro);
+        $imt.text('收起');
+    } else {
+
+        //隐藏
+        $intro.text(mIntro);
+        $imt.text('more');
+    }
+});
+
+//品牌收藏
+$('#brand-like').bind('touchstart', function(e) {
+    e.preventDefault();
+});
\ No newline at end of file

+/**
+ * PLUS+STAR列表页
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/10
+ */
+
+var $ = require('yoho.zepto'),
+    lazyLoad = require('yoho.lazyload'),
+    Swiper = require('yoho.iswiper');
+
+var $navs = $('#nav-tab > li'),
+    $contents = $('#ps-content > .content');
+
+var mySwiper;
+
+lazyLoad($('img.lazy'));
+
+mySwiper = new Swiper('.swiper-container', {
+    lazyLoading: true,
+    pagination: '.swiper-pagination'
+});
+
+$('#nav-tab').delegate('li', 'touchstart', function() {
+    if ($(this).hasClass('focus')) {
+        return;
+    }
+    $navs.toggleClass('focus');
+    $contents.toggleClass('hide');
+});
\ No newline at end of file

@@ -25,46 +25,6 @@ var phoneRegx = {
     '+61': /^[0-9]{11}$/
 };
 
-//错误验证
-var $errTip,
-    tipTime;
-
-/**
- * 初始化错误提示
- */
-function initErrTip() {
-    var errTipHtml = '<div id="err-tip" class="err-tip"></div>';
-
-    //插入错误提示HTML
-    $('.passport-page').append(errTipHtml);
-
-    $errTip = $('#err-tip');
-    $errTip.on('touchstart', function() {
-        $errTip.fadeOut();
-
-        //清除Timeout
-        clearTimeout(tipTime);
-    });
-}
-
-/**
- * 显示错误提示
- */
-function showErrTip(content) {
-    if (typeof $errTip === 'undefined') {
-        return;
-    }
-
-    $errTip.text(content).show();
-
-    //若2秒内未点击则自动消失
-    tipTime = setTimeout(function() {
-        if ($errTip.css('display') === 'block') {
-            $errTip.fadeOut();
-        }
-    }, 2000);
-}
-
 //密码显示隐藏
 function bindEyesEvt() {
     var $hasEye = $('.has-eye'),
@@ -161,8 +121,6 @@ function selectCssHack($countrySelect) {
 module.exports = {
     emailRegx: emailRegx,
     phoneRegx: phoneRegx,
-    initErrTip: initErrTip,
-    showErrTip: showErrTip,
     bindEyesEvt: bindEyesEvt,
     bindClearEvt: bindClearEvt,
     pwdValidate: pwdValidate,

@@ -8,10 +8,8 @@ var $ = require('yoho.zepto');
 
 var $resend = $('#resend');
 
-var api = require('../api'),
-    showErrTip = api.showErrTip;
-
-api.initErrTip();
+var tip = require('../../plugin/tip'),
+    showErrTip = tip.show;
 
 $resend.on('touchstart', function(e) {
     e.preventDefault();

@@ -9,11 +9,10 @@ var $email = $('#email'),
     $btnSure = $('#btn-sure');
 
 var api = require('../api');
+var tip = require('../../plugin/tip');
 
 var trim = $.trim;
-var showErrTip = api.showErrTip;
-
-api.initErrTip();
+var showErrTip = tip.show;
 
 api.bindClearEvt();
 

@@ -11,11 +11,10 @@ var $phoneNum = $('#phone-num'),
     $btnNext = $('#btn-next');
 
 var api = require('../api');
+var tip = require('../../plugin/tip');
 
 var trim = $.trim;
-var showErrTip = api.showErrTip;
-
-api.initErrTip();
+var showErrTip = tip.show;
 
 api.bindClearEvt();
 

@@ -9,11 +9,10 @@ var $pwd = $('#pwd'),
     $btnOk = $('#btn-ok');
 
 var api = require('../api');
+var tip = require('../../plugin/tip');
 
 var trim = $.trim;
-var showErrTip = api.showErrTip;
-
-api.initErrTip();
+var showErrTip = tip.show;
 
 api.bindEyesEvt();
 

@@ -11,9 +11,10 @@ module.exports = function(useInRegister) {
         $captchaTip = $('#captcha-tip');
 
     var api = require('./api');
+    var tip = require('../plugin/tip');
 
     var trim = $.trim;
-    var showErrTip = api.showErrTip;
+    var showErrTip = tip.show;
 
     var urlMid = useInRegister ? 'register' : 'back';
 
@@ -31,8 +32,6 @@ module.exports = function(useInRegister) {
         }, 1000);
     }
 
-    api.initErrTip();
-
     api.bindClearEvt();
 
     $captcha.bind('input', function() {

@@ -15,9 +15,10 @@ var $phoneNum = $('#phone-num'),
     pwdPass = false;
 
 var api = require('../api');
+var tip = require('../../plugin/tip');
 
 var trim = $.trim;
-var showErrTip = api.showErrTip;
+var showErrTip = tip.show;
 
 //登录按钮状态切换
 function switchLoginBtnStatus() {
@@ -31,9 +32,6 @@ function switchLoginBtnStatus() {
 //Android-UC下显示select的direction:rtl无效的临时解决办法
 api.selectCssHack($countrySelect);
 
-//初始化ErrTip
-api.initErrTip();
-
 //显示隐藏密码
 api.bindEyesEvt();
 

@@ -16,9 +16,10 @@ var $account = $('#account'),
     pwdPass = false;
 
 var api = require('../api');
+var tip = require('../../plugin/tip');
 
 var trim = $.trim;
-var showErrTip = api.showErrTip;
+var showErrTip = tip.show;
 
 //登录按钮状态切换
 function switchLoginBtnStatus() {
@@ -41,9 +42,6 @@ function hideRetrivePanel() {
     $ways.slideUp();
 }
 
-//初始化ErrTip
-api.initErrTip();
-
 //密码显示与隐藏
 api.bindEyesEvt();
 

@@ -9,11 +9,10 @@ var $pwd = $('#pwd'),
     $btnSure = $('#btn-sure');
 
 var api = require('../api');
+var tip = require('../../plugin/tip');
 
 var trim = $.trim;
-var showErrTip = api.showErrTip;
-
-api.initErrTip();
+var showErrTip = tip.show;
 
 api.bindEyesEvt();
 

@@ -11,11 +11,10 @@ var $phoneNum = $('#phone-num'),
     $btnNext = $('#btn-next');
 
 var api = require('../api');
+var tip = require('../../plugin/tip');
 
 var trim = $.trim;
-var showErrTip = api.showErrTip;
-
-api.initErrTip();
+var showErrTip = tip.show;
 
 api.bindClearEvt();
 

+/**
+ * 弹框提示
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/10
+ */
+var $ = require('yoho.zepto');
+
+var $tip, tipItime;
+
+/**
+ * 初始化提示框
+ */
+(function() {
+    var tipHtml = '<div id="yoho-tip" class="yoho-tip"></div>';
+
+    //插入提示HTML
+    $('.yoho-page').append(tipHtml);
+
+    $tip = $('#yoho-tip');
+    $tip.on('touchstart', function() {
+        $tip.hide();
+
+        //清除Timeout
+        clearTimeout(tipItime);
+    });
+}());
+
+/**
+ * 显示提示
+ */
+function show(con, dur) {
+    var content, duration;
+
+    if (typeof con === 'undefined') {
+        return;
+    }
+
+    content = con.toString();
+    duration = (dur && dur > 0) ? dur : 2000;
+
+    $tip.text(content).show();
+
+    tipItime = setTimeout(function() {
+        if ($tip.css('display') === 'block') {
+            $tip.hide();
+        }
+    }, duration);
+}
+
+exports.show = show;
\ No newline at end of file

@@ -17,7 +17,10 @@
     "main": "index.js",
     "dependencies": {
       "yoho.zepto": "1.1.60",
-      "yoho.jquery": "1.8.3"
+      "yoho.jquery": "1.8.3",
+      "yoho.lazyload": "1.1.0",
+      "mlellipsis": "0.0.6",
+      "yoho.iswiper": "3.0.1"
     },
     "devDependencies": {
       "expect.js": "0.3.1"

+.good-info {
+    float: left;
+    width: 276rem / $pxConvertRem;
+    height: 486rem / $pxConvertRem;
+    margin: 28rem / $pxConvertRem (15rem / $pxConvertRem) 0;
+
+
+    .tag-container {
+        height: 28rem / $pxConvertRem;
+        width: 100%;
+
+        .good-tag {
+            display: block;
+            float: left;
+            height: 28rem / $pxConvertRem;
+            font-size: 18rem / $pxConvertRem;
+            text-align: center;
+            line-height: 32rem / $pxConvertRem;
+            margin-right: 4rem / $pxConvertRem;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+        .new-tag {
+            width: 60rem / $pxConvertRem;
+            background-color: #78dc7e;
+            color: #fff;
+        }
+        .renew-tag {
+            width: 90rem / $pxConvertRem;
+            background-color: #78dc7e;
+            color: #fff;
+        }
+        .sale-tag {
+            width: 60rem / $pxConvertRem;
+            background-color: #ff575c;
+            color: #fff;
+        }
+        .new-festival-tag {
+            width: 90rem / $pxConvertRem;
+            background-color: #000;
+            color: #fff;
+        }
+        .limit-tag {
+            box-sizing: border-box;
+            width: 90rem / $pxConvertRem;
+            border: 1px solid #000;
+            color: #000;
+            line-height: 24rem / $pxConvertRem;
+        }
+    }
+}
+
+.good-detail-img {
+    position: relative;
+    img {
+        display: block;
+        width: 100%;
+        height: 366rem / $pxConvertRem;
+    }
+
+    .few-tag {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 28rem / $pxConvertRem;
+        background: #ffac5b;
+        font-size: 18rem / $pxConvertRem;
+        color: #fff;
+        line-height: 28rem / $pxConvertRem;
+        text-align: center;
+    }
+}
+
+.good-detail-text {
+    .name a {
+        display: block;
+        line-height: 56rem / $pxConvertRem;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-decoration: none;
+        font-size: 22rem / $pxConvertRem;
+        color: #444;
+    }
+    .price {
+        line-height: 22rem / $pxConvertRem;
+        font-size: 22rem / $pxConvertRem;
+        .sale-price {
+            color: #d62927;
+        }
+        .sale-price.no-price {
+            color: #000;
+        }
+        .market-price {
+            margin: 0 0 0 (5rem / $pxConvertRem);
+            color: #b0b0b0;
+            text-decoration: line-through;
+        }
+    }
+}
\ No newline at end of file

+@import "tvls", "info", "plus-star";
\ No newline at end of file

+.guang-info {
+    margin: 30rem / $pxConvertRem 0 0 0;
+    padding: 0 0 24rem / $pxConvertRem 0;
+    border-top: 1px solid #e0e0e0;
+    border-bottom: 1px solid #e0e0e0;
+    background: #fff;
+
+    .info-img {
+        position: relative;
+        width: 100%;
+
+        img {
+            display: block;
+            width: 100%;
+        }
+    }
+
+    .info-match {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 130rem / $pxConvertRem;
+        height: 50rem / $pxConvertRem;
+        line-height: 50rem / $pxConvertRem;
+        font-size: 28rem / $pxConvertRem;
+        color: #fff;
+        background: #000;
+        text-align: center;
+        text-decoration: none;
+    }   
+
+    .tag-tag {
+        position: absolute;
+        top: 0;
+        left: 105rem / $pxConvertRem;
+        height: 50rem / $pxConvertRem;
+        width: 50rem / $pxConvertRem;
+
+        &.collocation {
+            background: image-url('guang/info/collocation.png');
+            background-size: 100% 100%;
+        }
+
+        &.fashion-good {
+            background: image-url('guang/info/fashion-good.png');
+            background-size: 100% 100%;
+        }
+
+        &.fashion-man {
+            background: image-url('guang/info/fashion-man.png');
+            background-size: 100% 100%;
+        }
+
+        &.tip {
+            background: image-url('guang/info/tip.png');
+            background-size: 100% 100%;
+        }
+
+        &.topic {
+            background: image-url('guang/info/topic.png');
+            background-size: 100% 100%;
+        }
+    }
+
+    .info-deps {
+        margin: 32rem / $pxConvertRem 0 0 0;
+        padding: 0 40rem / $pxConvertRem 0 30rem / $pxConvertRem;
+        
+        .info-title-container {
+            text-decoration: none;
+            color: #000;
+        }
+        
+        .info-title{
+            line-height: 44rem / $pxConvertRem;
+            color: #000;
+            font-size: 40rem / $pxConvertRem;
+            font-weight:bold;
+
+        }
+
+        .info-text {
+            margin: 16rem / $pxConvertRem 0 0 0;
+            line-height: 46rem / $pxConvertRem;
+            font-size: 28rem / $pxConvertRem;
+            color: #444;
+        }
+
+        .time-view-like-share {
+            margin-top: 16rem / $pxConvertRem;
+        }
+    }
+}
\ No newline at end of file

+.ps-list-page {
+    background-color: #f0f0f0;
+
+    .nav-tab, .ps-content {
+        width: 100%;
+    }
+
+    .nav-tab {
+        height: 60rem / $pxConvertRem;
+        padding: 10rem / $pxConvertRem 0;
+        background-color: #fff;
+    }
+
+    .star-nav, .plus-nav {
+        box-sizing: border-box;
+        float: left;
+        width: 50%;
+        height: 60rem / $pxConvertRem;
+        line-height: 60rem / $pxConvertRem;
+        font-size: 16px;
+        text-align: center;
+        color: #ccc;
+
+        &.focus {
+            color: #000;
+        }
+    }
+
+    .star-nav {
+        border-right: 1px solid #ccc;
+    }
+
+    .plus-star-row {
+        margin-bottom: 10rem / $pxConvertRem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .content.hide {
+        display: none;
+    }
+
+    .swiper-container {
+        height: 310rem / $pxConvertRem;
+    }
+
+    .swiper-pagination-bullet-active {
+        background: #fff;
+    }
+
+    .brand-deps {
+        height: 40rem / $pxConvertRem;
+        line-height: 40rem / $pxConvertRem;
+        padding-left: 10rem / $pxConvertRem;
+        font-size: 14px;
+        background: #fff;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+.ps-detail-page {
+    background-color: #f0f0f0;
+
+    .ps-block {
+        margin-bottom: 30rem / $pxConvertRem;
+        border-bottom: 1px solid #e0e0e0;
+        border-top: 1px solid #e0e0e0;
+        background-color: #fff;
+
+        &.header, &.related-infos {
+            border-top: none;
+        }
+
+        &.related-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 {
+            position: relative;
+            float: right;
+            color: #b0b0b0;
+            height: 1.5rem;
+            width: 1.5rem;
+            line-height: 1.5rem;
+            text-align: center;
+            top: -0.25rem;
+            left: -0.25rem;
+
+            &.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;
+        float: right;
+
+        .icon {
+            -webkit-transition: -webkit-transform .1s ease-in;
+            -moz-transition: -moz-transform .1s ease-in;
+            -ms-transition: -ms-transform .1s ease-in;
+            -o-transition: -o-transform .1s ease-in;
+            transition: transform .1s ease-in;
+        }
+
+        &.spread .icon {
+            -webkit-transform: scale(0.83) rotate(-180deg);
+            -moz-transform: scale(0.83) rotate(-180deg);
+            -ms-transform: scale(0.83) rotate(-180deg);
+            -o-transform: scale(0.83) rotate(-180deg);
+            transform: scale(0.83) rotate(-180deg);
+        }
+    }
+
+    .new-arrival {
+        padding-left: 0 30rem / $pxConvertRem;
+
+        .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;
+            color: #000;
+            text-decoration: none;
+            display: block;
+            font-size: 16px;
+        }
+
+        .more-prods {
+            float: right;
+            color: #b0b0b0;
+        }
+
+        .new-arrival-header .more-prods {
+            margin-right: 30rem / $pxConvertRem;
+            margin-top: 10rem / $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;
+        }
+    }
+
+
+    .related-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;
+    }
+
+    .related-infos-container .guang-info:first-child {
+        margin-top: 0;
+    }
+}
\ No newline at end of file

+.time-view-like-share {
+    color: #b0b0b0;
+    line-height: 38rem / $pxConvertRem;
+    height: 38rem / $pxConvertRem;
+    font-size: 24rem / $pxConvertRem;
+
+    .iconfont {
+        vertical-align: 9%;
+        margin-right: 4rem / $pxConvertRem;
+        font-size: 24rem / $pxConvertRem;
+    }
+
+    .like-share-container {
+        display: inline-block;
+        float: right;
+        
+        > * {
+            float: left;
+        }
+        
+        .like-btn, .share-btn {
+            position: relative;
+            height: 60rem / $pxConvertRem;
+            line-height: 60rem / $pxConvertRem;
+            display: inline-block;
+            
+            color: #b0b0b0;
+            width: 60rem / $pxConvertRem;
+            top: -14rem / $pxConvertRem;
+            font-size: 34rem / $pxConvertRem;
+            text-align: center;
+            margin-right: 0;
+            outline: none;
+        }
+        
+        .share-btn {
+            margin-left: 20rem / $pxConvertRem;
+        }
+        
+        .like-btn.like {
+            color: #444;
+        }
+    }
+}
\ No newline at end of file

@@ -47,4 +47,41 @@ a {
     color: #000;
 }
 
-@import "layout/header", "layout/footer", "passport/index";
\ No newline at end of file
+@font-face {
+    font-family: "iconfont";
+    src: font-url('iconfont.eot'); /* IE9*/
+    src: font-url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         font-url('iconfont.woff') format('woff'), /* chrome、firefox */
+         font-url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+         font-url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    text-decoration: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke-width: 0.2px;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.yoho-tip {
+    position: absolute;
+    display: none;
+    text-align: center;
+    width: 70%;
+    padding: 34px 0;
+    top: 50%;
+    left: 50%;
+    margin-left: -35%;
+    margin-top: -45px;
+    background-color: #000;
+    opacity: 0.7;
+    color: #fff;
+    font-size: 18px;
+    border: none;
+    @include border-radius(10px);
+}
+
+@import "layout/header", "layout/footer", "good", "passport/index", "guang/index";
\ No newline at end of file

@@ -159,22 +159,4 @@ body.passport-body {
     .row {
         margin-bottom: 10px;
     }
-
-    .err-tip {
-        position: absolute;
-        display: none;
-        text-align: center;
-        width: 70%;
-        padding: 34px 0;
-        top: 50%;
-        left: 50%;
-        margin-left: -35%;
-        margin-top: -45px;
-        background-color: #000;
-        opacity: 0.7;
-        color: #fff;
-        font-size: 18px;
-        border: none;
-        @include border-radius(10px);
-    }
 }
\ No newline at end of file

+{{>layout/header}}
+<div class="ps-detail-page ps-page yoho-page">
+    {{# ps}}
+        <div class="header brand-info ps-block" data-id="{{id}}">
+            <img class="banner lazy" data-original="{{banner}}">
+            <img class="logo lazy" data-original="{{logo}}">
+            <div class="header-content clearfix">
+                <p class="name-islike-container">
+                    <span class="name">{{name}}</span>
+                    <a id="brand-like" class="brand-islike iconfont {{# isLike}}like{{/ isLike}}" href="{{likeUrl}}">
+                        &#xe605;
+                    </a>
+                </p>
+                <p id="intro" class="intro">
+                    {{intro}}
+                </p>
+                <span id="more-intro" class="more-intro">
+                    <span id="intro-more-txt">more</span>
+                    <i class="icon iconfont">&#xe609;</i>
+                </span>
+            </div>
+        </div>
+        {{# newArrival}}
+            <div class="new-arrival ps-block">
+                <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}}
+                        {{> good}}
+                    {{/ naList}}
+                </div>
+                <div class="more-goods-container">
+                    <a class="mg-text" href="{{moreUrl}}">
+                        更多商品
+                        <span class="more-prods iconfont">&#xe604;</span>
+                    </a>
+                </div>
+            </div>
+        {{/ newArrival}}
+        {{#if infos}}
+            <div class="related-infos ps-block">
+                <div>
+                    <h2 class="related-info-title">相关资讯</h2>
+                </div>
+                <div id="related-infos-container" class="related-infos-container">
+                    {{# infos}}
+                        {{> guang/info}}
+                    {{/ infos}}
+                </div>
+            </div>
+        {{/if}}
+    {{/ ps}}
+</div>
+{{>layout/footer}}
\ No newline at end of file

 {{>layout/header}}
-
-This is a test {{test}}
-
+<div class="ps-list-page ps-page yoho-page">
+    {{# ps}}
+        <ul id="nav-tab" class="nav-tab clearfix">
+            <li class="star-nav focus">明星潮品</li>
+            <li class="plus-nav">原创潮牌</li>
+        </ul>
+        <div id="ps-content" class="ps-content">
+            <ul class="star-content content">
+                {{# star}}
+                    {{> guang/ps_item}}
+                {{/ star}}
+            </ul>
+            <ul class="plus-content content">
+                {{# plus}}
+                    {{> guang/ps_item}}
+                {{/ plus}}
+            </ul>
+        </div>
+    {{/ ps}}
+</div>
 {{>layout/footer}}
\ No newline at end of file

+<div class="good-info" data-id="{{id}}">
+    <div class="tag-container clearfix">
+        {{# tags}}
+            {{# isNew}}
+                <p class="good-tag new-tag">NEW</p>
+            {{/ isNew}}
+            {{# isReNew}}
+                <p class="good-tag renew-tag">再到着</p>
+            {{/ isReNew}}
+            {{# isSale}}
+                <p class="good-tag sale-tag">SALE</p>
+            {{/ isSale}}
+            {{# isNewFestival}}
+                <p class="good-tag new-festival-tag">新品节</p>
+            {{/ isNewFestival}}
+            {{# isLimit}}
+                <p class="good-tag limit-tag">限量商品</p>
+            {{/ isLimit}}
+        {{/ tags}}
+    </div>
+    <div class="good-detail-img">
+        <a class="good-thumb" href="{{url}}">
+            <img class="lazy" data-original="{{thumb}}">
+        </a>
+        {{# isFew}}
+            <p class="few-tag">即将售罄</p>
+        {{/ isFew}}
+    </div>
+    <div class="good-detail-text">
+        <div class="name">
+            <a href="{{url}}">{{name}}</a>
+        </div>
+        <div class="price">
+            <span class="sale-price {{^price}}no-price{{/price}}">￥{{salePrice}}</span>
+            {{#price}}
+                <span class="market-price">￥{{.}}</span>
+            {{/price}}
+        </div>
+    </div>
+</div>
\ No newline at end of file

+<div class="guang-info" data-id="{{id}}">
+    <div class="info-img">
+        {{#if showTags}}
+            <a href="javascript:;" class="info-match">
+                {{# isTip}}
+                    小贴士
+                    <div class="info-tag tip"></div>
+                {{/ isTip}}
+                {{# isCollocation}}
+                    搭配
+                    <div class="info-tag collocation"></div>
+                {{/ isCollocation}}
+                {{# isFashionMan}}
+                    潮人
+                    <div class="info-tag fashion-man"></div>
+                {{/ isFashionMan}}
+                {{# isFashionGood}}
+                    潮品
+                    <div class="info-tag fashion-good"></div>
+                {{/ isFashionGood}}
+                {{# isTopic}}
+                    话题
+                    <div class="info-tag topic"></div>
+                {{/ isTopic}}
+            </a>
+        {{/if}}
+        <a href="{{url}}">
+            <img class="lazy" data-original="{{img}}" alt="{{alt}}">
+        </a>
+    </div>
+
+    <div class="info-deps">
+        <a class="info-title-container" href="{{url}}">
+            <h2 class="info-title">{{title}}</h2>
+        </a>
+        <p class="info-text">{{text}}</p>
+        {{> guang/tvls}}
+    </div>
+</div>
\ No newline at end of file

+<li class="plus-star-row">
+    {{#if imgs}}
+        <div class="swiper-container">
+            <div class="swiper-wrapper">
+                {{# imgs}}
+                    <div class="swiper-slide">
+                        <a href={{url}}>
+                            <img class="swiper-lazy" data-src={{img}}>
+                        </a>
+                    </div>
+                {{/ imgs}}
+            </div>
+            <div class="swiper-pagination"></div>
+        </div>
+    {{^}}
+        <a href={{url}}>
+            <img class="lazy" data-original={{img}}>
+        </a>
+    {{/if}}
+    {{# deps}}
+        <p class="brand-deps">{{.}}</p>
+    {{/ deps}}
+</li>
\ No newline at end of file

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

@@ -13,6 +13,29 @@ class PlusstarController extends AbstractAction
      */
     public function listAction()
     {
+        $data = array(
+            'star' => array(
+                array(
+                    'imgs' => array(
+                        array(
+                            'url' => 'http://stussy.m.yohobuy.com',
+                            'img' => 'http://ad.yoho.cn/yohobuy/newfestival/img/brandsmap/6KTZ_01.jpg'
+                        ),
+                        array(
+                            'url' => 'http://stussy.m.yohobuy.com',
+                            'img' =>'http://ad.yoho.cn/yohobuy/newfestival/img/brandsmap/5HUF_01.jpg'
+                        )
+                    )
+                ),
+                array(
+                    'url' => 'http://stussy.m.yohobuy.com',
+                    'img' => 'http://ad.yoho.cn/yohobuy/newfestival/img/brandsmap/4STAYREAL_02.jpg',
+                    'deps' => '优秀的自助品牌，高瞻远瞩的建设性意见来测试文字溢出后的处理问题'
+                )
+            ),
+            'plus' => array(
+            )
+        );
         $this->_view->assign('title', 'YOHO!有货');
         $this->_view->display('list', array('test' => 'hello world'));