fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 9bddadaa0eaff851136a6645cdbb2c4c6a3a5bac 1 parent f69c07f8

product detail

Inline Side-by-side
Showing 9 changed files with 613 additions and 3 deletions
{{> layout/header}}
<div class="product-detail-page yoho-page">
{{# detail}}
{{# banner}}
<div class="brand-banner" style="background:{{bgColor}}{{#if bgImg}} url({{bgImg}}){{/if}}">
<div class="center-content clearfix">
<a class="pull-left" href="{{homeUrl}}">
<img src="{{logo}}" alt="{{alt}}">
</a>
<div class="opt pull-right">
<a class="home" href="{{homeUrl}}">
<span class="iconfont">&#xe617;</span>
</a>
<span id="brand-favour" class="brand-fav">
<i class="iconfont{{#if coled}} coled{{/if}}">&#xe616;</i>
</span>
</div>
</div>
</div>
{{/ banner}}
<div class="center-content">
{{> layout/path-nav}}
{{# goodInfo}}
<div class="main clearfix">
<div class="pull-left imgs clearfix">
<div class="pull-left img">
<div class="tags clearfix">
{{# tags}}
{{# isNew}}
<span class="good-tag new-tag">NEW</span>
{{/ isNew}}
{{# isReNew}}
<span class="good-tag renew-tag">再到着</span>
{{/ isReNew}}
{{# isSale}}
<span class="good-tag sale-tag">SALE</span>
{{/ isSale}}
{{# isNewFestival}}
<span class="good-tag new-festival-tag">新品节</span>
{{/ isNewFestival}}
{{# isLimit}}
<span class="good-tag limit-tag">限量商品</span>
{{/ isLimit}}
{{# isYearEndPromotion}}
<span class="good-tag yep-tag">年终大促</span>
{{/ isYearEndPromotion}}
{{# isYearMidPromotion}}
<span class="good-tag ymp-tag">年中热促</span>
{{/ isYearMidPromotion}}
{{# isFew}}
<p class="good-tag few-tag">即将售罄</p>
{{/ isFew}}
{{/ tags}}
</div>
<img class="img-show" src="{{img}}">
</div>
<div class="pull-right thumbs">
{{# thumbs}}
<a href="{{url}}">
<img class="thumb" src="{{img}}">
</a>
{{/ thumbs}}
</div>
</div>
<div class="pull-right infos">
<p class="name">
{{name}}
</p>
<a class="brand-name" href="{{brandUrl}}">{{brandName}}</a>
<p class="market-price {{#if salePrice}}with-sale{{/unless}}">
<span class="title">市场价：</span>
<span class="price">￥{{marketPrice}}</span>
</p>
{{#if salePrice}}
<p class="sale-price">
<span class="title">促销价：</span>
<span class="price">￥{{salePrice}}</span>
</p>
{{/if}}
{{#if activity}}
<ul class="activity">
{{#each activity}}
<li>
{{#if sizeImg}}
<a class="img-link" href="{{url}}">
<img src="{{sizeImg}}">
</a>
{{^}}
<span class="ac-type">{{type}}</span>
<span class="ac-des">【{{des}}】</span>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
<div class="chose-color row clearfix">
<span class="title pull-left">选颜色：</span>
<ul class="colors pull-left">
{{#each colors}}
<li class="{{#if focus}}focus{{/if}} {{#if disable}}disable{{/if}}" title="{{title}}">
<img src="{{src}}">
</li>
{{/each}}
</ul>
</div>
<div class="chose-size row clearfix">
<span class="title pull-left">选尺码：</span>
<div class="size-wrapper pull-left">
{{#each colors}}
<ul class="size {{#unless focus}}hide{{/unless}} clearfix">
{{#each size}}
<li {{#if disable}}class="disable"{{/if}} data-title="{{title}}" data-sku="{{sku}}">{{name}}</li>
{{/each}}
</ul>
{{/each}}
<span class="size-ruler"></span>
<span class="size-warn hide">
<i></i>
请选择尺码
</span>
<span class="color-size-tip hide"></span>
</div>
</div>
<div class="row clearfix">
<span class="title pull-left">选数量：</span>
<div class="num-wraper pull-left clearfix">
<span id="num" class="num pull-left">1</span>
<span class="minus-plus pull-left">
<i class="plus iconfont">&#xe610;</i>
<i class="minus iconfont">&#xe600;</i>
</span>
<span class="num-warn hide">
<i></i>
库存不足
</span>
</div>
</div>
<p class="row">
<span id="add-to-cart" class="add-to-cart">
<i class="iconfont">&#xe628;</i>
添加到购物车
</span>
<span id="collect-product" class="collect-product">
{{#if coled}}
<i class="coled iconfont">&#xe616;</i>
已收藏
{{^}}
<i class="iconfont">&#xe616;</i>
收藏商品
{{/if}}
</span>
</p>
<p class="share-row">
<span class="title pull-left">分享商品：</span>
<span class="share-wrapper pull-left clearfix">
<i class="weibo" data-type="weibo" title="分享到新浪微博"></i>
<i class="weixin" data-type="weixin" title="分享到微信朋友圈"></i>
<i class="qweibo" data-type="qweibo" title="分享到腾讯微博"></i>
<i class="qzone" data-type="qzone" title="分享到QQ空间"></i>
<i class="qq" data-type="qq" title="分享到QQ好友"></i>
<i class="renren" data-type="renren" title="分享到人人"></i>
<i class="douban" data-type="douban" class="分享到豆瓣"></i>
</span>
</p>
</div>
</div>
{{/ goodInfo}}
</div>
{{/ detail}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -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 Dec 16 20:00:14 2015
Created by FontForge 20120731 at Thu Dec 17 18:03:02 2015
By Ads
</metadata>
<defs>
... ... @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Wed Dec 16 20:00:14 2015
bbox="0 -214 1172.1 864"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E627"
unicode-range="U+0078-E629"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
... ... @@ -134,5 +134,11 @@ q14 5 23 14.5t12 20.5t3 23t-3.5 22t-8.5 18t-10 11zM0 295v-380q0 -28 20 -48.5t49
<glyph glyph-name="uniE627" unicode="&#xe627;" horiz-adv-x="1025"
d="M512 623q-167 0 -304.5 -89.5t-205.5 -236.5q-4 -9 0 -18q45 -96 121 -169.5t177 -115t212 -41.5q167 0 304.5 89.5t205.5 236.5q1 3 1.5 6t0 6t-1.5 6q-68 147 -205.5 236.5t-304.5 89.5zM512 57q-96 0 -163.5 67.5t-67.5 163.5t67.5 163.5t163.5 67.5t163.5 -67.5
t67.5 -163.5q0 -47 -18.5 -89.5t-49.5 -73.5t-73.5 -49.5t-89.5 -18.5zM364 288q0 -61 43.5 -104.5t104.5 -43.5t104.5 43.5t43.5 104.5t-43.5 104.5t-104.5 43.5t-104.5 -43.5t-43.5 -104.5z" />
<glyph glyph-name="uniE628" unicode="&#xe628;"
d="M482 83q-24 0 -41.5 -17.5t-17.5 -42.5t17.5 -42.5t42 -17.5t42 17.5t17.5 42.5q0 16 -8 30t-21.5 22t-30.5 8zM769 83q-25 0 -42.5 -17.5t-17.5 -42.5q0 -16 8 -30t21.5 -22t30.5 -8q25 0 42.5 17.5t17.5 42.5q0 38 -34 54q-13 6 -26 6zM839 193h-417l-143 425
q-7 18 -29 18h-127q-13 0 -22 -8t-9 -20q0 -4 1 -7t2.5 -6t3.5 -5.5t4.5 -4.5t5.5 -3.5t6.5 -2t7.5 -0.5h105l143 -424q7 -19 29 -19h439q13 0 21.5 8t8.5 20.5t-8.5 20.5t-21.5 8zM904 524l-516 45q-12 1 -18.5 -7t-1.5 -20l90 -270q4 -12 16 -21.5t24 -9.5h377q12 0 22 10
t11 23l23 216q1 8 -2 15.5t-10 12.5t-15 6z" />
<glyph glyph-name="uniE629" unicode="&#xe629;"
d="M154 686v-646h146l-14 -208l240 208h344v646h-716zM752 176h-134v159h-192v-159h-134v382h134v-148h192v148h134v-382z" />
</font>
</defs></svg>
... ...
.product-detail-page {
.brand-banner {
height: 45px;
width: 100%;
img {
display: block;
height: 45px;
}
.opt {
margin-top: 5px;
}
.home, .brand-fav {
display: inline-block;
width: 32px;
height: 32px;
line-height: 32px;
border: 1px solid #fff;
text-align: center;
color: #fff;
}
.home {
margin-right: 5px;
.iconfont {
font-size: 14px;
}
}
.brand-fav .iconfont {
font-size: 12px;
}
.coled {
color: #ee0014;
}
}
.path-nav {
border: none;
margin-bottom: 0;
}
.main {
width: 990px;
margin: 0 auto;
.infos {
width: 465px;
}
.img {
position: relative;
width: 420px;
height: 560px;
}
.img-show {
display: block;
width: 100%;
height: 100%;
}
.tags {
position: absolute;
top: 0;
left: 0;
}
.good-tag {
float: left;
height: 22px;
line-height: 22px;
color: #fff;
padding: 0 7px;
margin-right: 5px;
font-size: 12px;
box-sizing: border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
@each $tag, $bgColor in (new-tag, #78dc7d),
(renew-tag, #78dc7e),
(new-festival-tag, #000000),
(yep-tag, #ff565b),
(ymp-tag, #ff565b),
(sale-tag, #ff565b),
(few-tag, #ffac5b) {
.#{$tag} {
background: $bgColor;
}
}
.limit-tag {
border: 1px solid #4e4e4e;
color: #4e4e4e;
}
.thumbs {
width: 75px;
height: 510px;
overflow: hidden;
}
.thumb {
display: block;
width: 75px;
margin-bottom: 2px;
}
.name {
font-size: 18px;
font-weight: bold;
line-height: 24px;
}
.brand-name {
color: #666;
font-size: 12px;
}
.title {
color: #999;
font-size: 12px;
}
.market-price {
margin-top: 8px;
}
.price {
color: #000;
font-size: 22px;
line-height: 24px;
font-weight: bold;
}
.with-sale .price {
color: #999;
text-decoration: line-through;
font-size: 12px;
}
.activity {
margin-top: 12px;
li {
line-height: 20px;
}
}
.ac-type {
display: inline-block;
width: 43px;
height: 16px;
line-height: 16px;
margin-right: 5px;
text-align: center;
background: #999;
color: #fff;
font-size: 12px;
}
.ac-des {
font-size: 12px;
}
.row {
margin-top: 10px;
}
.chose-color {
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid #eaeceb;
.title {
margin-top: 14px;
}
img {
display: block;
height: 36px;
width: 36px;
border: 2px solid #fff;
}
.focus img {
border-color: #222;
}
}
.chose-size {
font-size: 12px;
.title {
margin-top: 6px;
}
li {
float: left;
display: block;
height: 22px;
line-height: 22px;
width: 38px;
padding-top: 0 5px;
margin-right: 5px;
border: 1px solid #eaeceb;
text-align: center;
&.disable {
opacity: 0.5;
filter: Alpha(opacity=50);
}
&.focus {
color: #fff;
background: #222;
}
}
}
.size {
display: inline-block;
}
.size-ruler {
display: inline-block;
width: 57px;
height: 24px;
background: image-url('product/size-ruler.jpg');
}
.num {
display: block;
width: 38px;
height: 23px;
line-height: 23px;
text-align: center;
border: 1px solid #eaeceb;
}
.minus-plus {
display: block;
width: 14px;
height: 25px;
border: 1px solid #eaeceb;
border-left: none;
i {
display: block;
width: 13px;
height: 13px;
line-height: 8px;
font-size: 12px;
}
}
.minus {
border-top: 1px solid #eaeceb;
}
.add-to-cart {
display: inline-block;
margin-right: 10px;
height: 48px;
line-height: 48px;
width: 197px;
text-align: center;
color: #fff;
background: #e92601;
font-size: 14px;
}
.collect-product {
display: inline-block;
width: 127px;
height: 48px;
text-align: center;
line-height: 48px;
background: #fff;
color: #222;
border: 1px solid #ccc;
font-weight: bold;
font-size: 12px;
.iconfont {
color: #ccc;
font-size: 12px;
}
.coled {
color: #fa5252;
}
}
.share-row {
margin-top: 20px;
.title {
margin-top: 2px;
}
i {
display: block;
float: left;
width: 16px;
height: 16px;
margin-left: 5px;
background: image-url('guang/detail/icon-share.png') no-repeat;
}
$left: 0px;
@each $icon in weibo,qweibo,renren,qzone,qq,douban,weixin {
.#{$icon} {
background-position: 0 $left;
}
$left: $left - 16px;
}
}
}
}
\ No newline at end of file
... ...
@import "search", "list", "filter-box", "sort-pager", "good";
\ No newline at end of file
@import "search", "list", "detail", "filter-box", "sort-pager", "good";
\ No newline at end of file
... ...
<?php
use Action\AbstractAction;
use Plugin\Helpers;
class ItemController extends AbstractAction
{
public function indexAction()
{
$data = array(
'productDetailPage' => true,
'detail' => array(
'banner' => array(
'id' => '',
'bgColor' => '#abab43',
'bgImg' => 'http://img10.static.yhbimg.com/brandBanner/2015/03/20/09/018e4c599a3ca16fe5c67f77ef05cea723.jpg',
'logo' => 'http://img10.static.yhbimg.com/brandLogo/2015/12/04/16/0144f2beb0c06d554d3819394ab974ac45.jpg?imageView/3/w/500/h/45',
'alt' => 'BRISTON',
'homeUrl' => '',
'liked' => true
),
'pathNav' => array(
array(
'href' => '/boys',
'name' => 'BOYS首页'
),
array(
'href' => '/boys?sort=1',
'name' => '服配'
),
array(
'href' => '/boys?sort=1&msort=232',
'name' => '手表'
),
array(
'name' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘 '
)
),
'goodInfo' => array(
'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/420x560/extent/420x560/background/d2hpdGU=/position/center/quality/90',
'tags' => array(
'isNew' => true,
'isLimit' => true,
'isNewFestival' => true
),
'thumbs' => array(
array(
'url' => '',
'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90'
)
),
'name' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘',
'brandUrl' => '',
'brandName' => 'BRISTON',
'marketPrice' => '2180.00',
'activity' => array(
array(
'url' => '',
'sizeImg' => 'http://img11.static.yhbimg.com/productbanner/2015/12/11/00/01ba262a2fbac23b022eeace17cf5c3685.jpg'
),
array(
'type' => '加价购',
'des' => '全场99元加价购'
),
array(
'type' => '加价购',
'des' => '全场59元加价购'
),
array(
'type' => '加价购',
'des' => '全场19元加价购'
)
),
'colors' => array(
array(
'focus' => true,
'title' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘 黑色',
'src' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/40x40/extent/40x40/background/d2hpdGU=/position/center/quality/90',
'size' => array(
array(
'name' => 'F'
)
)
)
)
)
)
);
$this->_view->display('index', $data);
}
}
\ No newline at end of file
... ...