Authored by xuqi

pre plus-star

... ... @@ -26,12 +26,6 @@
},
{
isReNew: true //再到着
},
{
isYearEndPromotion: true //年终大促
},
{
isYearMidPromotion: false //年中热促
}
],
isFew: true, //即将售罄
... ... @@ -406,6 +400,7 @@
### PLUS+STAR
{
ps: {
id: 1,
banner: '',
log: '',
... ... @@ -420,9 +415,8 @@
...
]
},
article: {
info: [
{...}, //标签
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
... ...