pre plus-star

@@ -26,12 +26,6 @@
             },
             {
                 isReNew: true //再到着
-            },
-            {
-                isYearEndPromotion: true //年终大促
-            },
-            {
-                isYearMidPromotion: false //年中热促
             }
         ],
         isFew: true, //即将售罄
@@ -406,23 +400,23 @@
 ### PLUS+STAR
 
     {
-        id: 1,
-        banner: '',
-        log: '',
-        name: '',
-        isLike: '',
-        likeUrl: '',
-        intro: '',
-        newArrival: {
-            moreUrl: '',
-            naList: [
-                {...}, //商品信息
-                ...
-            ]
-        },
-        article: {
-            info: [
-                {...}, //标签
+        ps: {
+            id: 1,
+            banner: '',
+            log: '',
+            name: '',
+            isLike: '',
+            likeUrl: '',
+            intro: '',
+            newArrival: {
+                moreUrl: '',
+                naList: [
+                    {...}, //商品信息
+                    ...
+                ]
+            },
+            infos: [
+                {...}, //资讯
                 ...
             ]
         }

 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');
\ No newline at end of file

+.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;
+    .good-islike {
+        position: absolute;
+        width: 60rem / $pxConvertRem;
+        height: 60rem / $pxConvertRem;
+        top: 0rem / $pxConvertRem;
+        right: 0rem / $pxConvertRem;
+        line-height: 60rem / $pxConvertRem;
+        font-size: 30rem / $pxConvertRem;
+        text-align: center;
+        color: #b0b0b0;
+        text-decoration: none;
+    }
+    .good-like {
+        color: #d72928;
+    }
+    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", "good", "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-detail-page {
+    .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;
+            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;
+            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;
+        }
+
+    }
+
+
+    .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,4 @@ a {
     color: #000;
 }
 
-@import "layout/header", "layout/footer", "passport/index";
\ No newline at end of file
+@import "layout/header", "layout/footer", "passport/index", "guang/index";
\ 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">
+                <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>
+                <div id="more-intro" class="more-intro">
+                    <span class="more-intro-text more">more</span>
+                    <span class="more-intro-icon more iconfont down">&#xe609;</span>
+                    <span class="more-intro-icon more iconfont up hide">&#xe608;</span>
+                </div>
+            </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

+<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-islike {{# isLike}}good-like{{/ isLike}} iconfont" href="{{likeUrl}}">&#xe605;</a>
+        <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

+<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

@@ -20,7 +20,151 @@ class PlusstarController extends AbstractAction
      */
     public function detailAction()
     {
-        
+        $data = array(
+            'id' => 1,
+            '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,
+            'likeUrl' => '',
+            'intro' => '纽约地下街头品牌SSUR，由艺术家Russell所成立，近年来以恶搞、讽刺各大' .
+                   '品牌而闻名，包括了CHANEL、ROLEX、Cartier等等。Ssur的创办人是艺术家' .
+                   'Russell, ssur就是其名字反过来写。剩余的位置为了测试文字截取功能是我不' .
+                   '得以而添加的，呵呵哒',
+            'newArrival' => array(
+                'moreUrl' => '',
+                'naList' => array(
+                    array(
+                        'id' => 1,
+                        '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,
+                        'tags' => array(
+                            array(
+                                'isNew' => true
+                            ),
+                            array(
+                                'isLimit' => true
+                            )
+                        ),
+                        'isFew' => true,
+                        'url' => '',
+                        'likeUrl' => ''
+                    ),
+                    array(
+                        'id' => 2,
+                        '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,
+                        'tags' => array(
+                            array(
+                                'isSale' => true
+                            ),
+                            array(
+                                'isReNew' => true
+                            )
+                        ),
+                        'url' => '',
+                        'likeUrl' => ''
+                    ),
+                    array(
+                        'id' => 3,
+                        '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,
+                        'tags' => array(
+                            array(
+                                'isYearEndPromotion' => true
+                            ),
+                            array(
+                                'isNewFestival' => true
+                            )
+                        ),
+                        'url' => '',
+                        'likeUrl' => ''
+                    ),
+                    array(
+                        'id' => 4,
+                        '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,
+                        'tags' => array(
+                            array(
+                                'isYearMidPromotion' => true
+                            ),
+                            array(
+                                'isNew' => true
+                            )
+                        ),
+                        'url' => '',
+                        'likeUrl' => ''
+                    )
+                )
+            ),
+            'infos' => array(
+                array(
+                    'id' => 1,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '1.副线不知为何总是好看点',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => false,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 459,
+                        'isLiked' => true
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => ''
+                ),
+                array(
+                    'id' => 1,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '1.副线不知为何总是好看点',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => false,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 459,
+                        'isLiked' => true
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => ''
+                ),
+                array(
+                    'id' => 2,
+                    'img' => 'http://7xidk0.com1.z0.glb.clouddn.com/bg.png',
+                    'title' => '2.副线不知为何总是好看点测试长度是否会被截取塞真的很恶心啊',
+                    'text' => '具有绅士气质的英伦风格是永走前沿的经典，在众多的Made ' .
+                             'In England中Panul Smith缔造了一个传奇',
+                    'showTags' => false,
+                    'publishTime' => '2月13日 12:34',
+                    'pageView' => 3445,
+                    'like' => array(
+                        'count' => 100,
+                        'isLiked' => false
+                    ),
+                    'share' => true,
+                    'url' => '',
+                    'likeUrl' => ''
+                )
+            )
+        );
+        $this->_view->assign('title', 'PLUS+STAR 详情页');
+        $this->_view->display('detail', array('modulePath' => 'guang/plus-star', 'ps' => $data));
     }
     
 }
\ No newline at end of file