fe / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit c982608c65ed9fcc9328a44cc16ec4180084d7d1 1 parent 6a3519ad

good detail page

Inline Side-by-side
Showing 10 changed files with 584 additions and 2 deletions
... ... @@ -239,6 +239,213 @@
{{/ material}}
</div>
</div>
<div class="size-info info-block">
<p class="block-title">
<span class="title cur">尺码信息 SIZE INFO</span>
</p>
{{# size}}
<table class="size-table">
<thead>
<tr>
{{# thead}}
<th width="{{width}}">{{name}}</th>
{{/ thead}}
</tr>
</thead>
<tbody>
{{# tbody}}
<tr>
{{#each .}}
<td>{{.}}</td>
{{/each}}
</tr>
{{/ tbody}}
</tbody>
</table>
<p class="size-tip">
※ 以上尺寸为实物人工测量，因测量方式不同会有1-2CM误差，相关数据仅作参考，以收到实物为准。 单位：CM
</p>
<p class="size-tip">
※ 参考尺码因衣服版型、剪裁不同会有误差，仅供参考
</p>
{{#if sizeImg}}
<img class="size-img" src="{{sizeImg}}">
{{/if}}
{{/ size}}
</div>
{{#if reference}}
<div class="reference info-block">
<p class="block-title">
<span class="title cur">模特试穿 REFERENCE</span>
</p>
{{# reference}}
<table class="reference-table">
<thead>
<tr>
{{# thead}}
<th width="{{width}}">{{name}}</th>
{{/ thead}}
</tr>
</thead>
<tbody>
{{# tbody}}
<tr>
{{#each .}}
<td>
{{#if @first}}
<img class="avatar" src="{{.}}">
{{^}}
{{.}}
{{/if}}
</td>
{{/each}}
</tr>
{{/ tbody}}
</tbody>
</table>
{{/ reference}}
<p class="size-tip">
※ 模特试穿中身高单位：CM，体重单位：KG，三围单位：CM
</p>
</div>
{{/if}}
<div class="details info-block">
<p class="block-title">
<span class="title cur">商品详情 DETAILS</span>
</p>
<div class="details-html">
{{{details}}}
</div>
</div>
{{# consultComment}}
<div class="consult-comment info-block">
<p class="block-title">
<span class="title">顾客咨询（{{consultNum}}）</span>
<span class="sep">|</span>
<span class="title cur">购买评价（{{commentNum}}）</span>
</p>
<div class="comments content">
<h2>购买评价（{{commentNum}}）</h2>
<ul id="comments-ul">
{{# comments}}
<li>
<div class="user-info clearfix">
<img class="user-avatar pull-left" src="{{avatar}}">
<p>
<span class="name">{{userName}} </span>
购买了{{color}}/{{size}}
<br>
<span class="date">{{date}}</span>
</p>
</div>
<p class="comment">{{comment}}</p>
</li>
{{/ comments}}
</ul>
<p class="more-wrap">
<span id="load-more-comments" class="load-more">
加载更多
<i class="iconfont">&#xe61d;</i>
</span>
</p>
<p class="btn-wrap">
<span id="comment-btn" class="btn">
<i class="iconfont">&#xe62a;</i>
我要评论
</span>
</p>
</div>
<div class="consults content hide">
<h2>顾客咨询（{{consultNum}}）</h2>
<ul id="consult-ul">
{{# consults}}
<li>
<div class="user-info clearfix">
<img class="user-avatar" src="{{avatar}}">
<p>
<span class="question">{{question}}</span>
<br>
<span class="date">{{date}}</span>
</p>
</div>
<p class="consult">{{answer}}</p>
</li>
{{/ consults}}
</ul>
<p class="more-wrap">
<span id="load-more-consults" class="load-more">
加载更多
<i class="iconfont">&#xe61d;</i>
</span>
</p>
<p class="btn-wrap">
<span id="consults-btn" class="btn">
<i class="iconfont">&#xe62a;</i>
我要咨询
</span>
</p>
</div>
</div>
{{/ consultComment}}
<div class="after-service">
<p id="after-service-switch" class="after-service-switch">
<span class="iconfont">&#xe62b;</span>
售后服务
<span class="iconfont triangle">&#xe604;</span>
</p>
<div class="after-service-content info-block">
<div class="block-title">
<span class="title cur">售后服务 AFTER SERVICE</span>
</div>
<div class="img-1"></div>
<div class="img-2"></div>
<div class="text">
<h4>退换货承诺</h4>
<p>自您签收商品7日内可以退货，15日内可以换货，在商品不影响二次销售的情况下，YOHO！有货将为您办理退换货服务，请在网站提交"退换货"申请。需要说明的是：非质量问题的退换货，来回运费由您承担。</p>
<h4>退换货方式</h4>
<p>
针对国内大中型城市，YOHO!有货开通了<span class="orange">"上门换货"</span>服务，上门服务区域及费用请联系客服中心；若您所在的区域不在上门换货范围内，请您选择普通快递将商品、内包装、赠品及发货单等一并寄回。质量问题的退换货，目前不支持运费到付款业务，请您先垫付运费寄回。如需退换货，请致电客服电话：400-889-9646。
</p>
<h4>退换货邮寄地址</h4>
<p>
南京市江宁区江宁经济技术开发区苏源大道87号YOHO!有货物流中心东一楼 收件人：YOHO！有货 邮编：211106
<br>
YOHO！有货客服热线：400-889-9646　　客服邮箱：<a href="mailto:service@yoho.cn">service@yoho.cn</a>
<br>
有疑问请联系我们，我们将为您提供最优质的产品和服务。
</p>
</div>
</div>
</div>
<div class="service"></div>
<div class="info-block">
<p class="block-title">
<span class="title cur">最近浏览 RECENT REVIEW</span>
</p>
<ul class="recent-view clearfix">
{{# recentView}}
<li>
<a href="{{url}}">
<img src="{{img}}">
</a>
<a class="name" href="{{url}}">{{name}}</a>
<p class="price">
<span class="market-price {{#if salePrice}}has-sale{{/if}}">￥{{marketPrice}}</span>
{{#if salePrice}}
<span class="sale-price">￥{{salePrice}}</span>
{{/if}}
</p>
</li>
{{/ recentView}}
</ul>
</div>
</div>
</div>
{{/ detail}}
... ...
... ... @@ -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 Thu Dec 17 18:03:02 2015
Created by FontForge 20120731 at Mon Dec 21 21:30:54 2015
By Ads
</metadata>
<defs>
... ... @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Dec 17 18:03:02 2015
bbox="0 -214 1172.1 864"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E629"
unicode-range="U+0078-E62B"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
... ... @@ -140,5 +140,15 @@ 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
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" />
<glyph glyph-name="uniE62A" unicode="&#xe62a;"
d="M328 -66q-3 0 -5.5 0.5t-5.5 2.5q-14 6 -14 22v128h-193q-10 0 -17.5 7t-7.5 18v549q0 10 7.5 17.5t17.5 7.5h804q7 0 13 -3.5t9 -9t3 -12.5v-549q0 -11 -7 -18t-18 -7h-401l-169 -146q-7 -7 -16 -7zM171 172h188q10 0 17.5 -7.5t7.5 -17.5v-73l103 92q7 6 17 6h350v426
h-683v-426zM739 485h-454q-5 0 -9.5 2t-8 5t-5.5 8t-2 10q0 10 7.5 17.5t17.5 7.5h454q3 0 5.5 -0.5t4.5 -1.5t4 -2.5t3.5 -3t3 -3.5t2.5 -4.5t1.5 -5t0.5 -4.5q0 -11 -7 -18t-18 -7zM739 362h-454q-4 0 -8 1t-7 3.5t-5.5 5.5t-3.5 7t-1 8t1 8t3.5 7t5.5 5t7 3.5t8 1.5h454
q10 0 17.5 -7.5t7.5 -18t-7 -17.5t-18 -7zM549 239h-264q-10 0 -17.5 7t-7.5 17.5t7.5 18t17.5 7.5h264q10 0 17.5 -7.5t7.5 -17.5q0 -7 -3.5 -12.5t-9 -9t-12.5 -3.5z" />
<glyph glyph-name="uniE62B" unicode="&#xe62b;"
d="M511 -144q-73 0 -141 22.5t-123 64t-96.5 96.5t-64 123t-22.5 141q0 60 16 118t45 107t70 90t90 70t107 45t119 16q90 0 173 -35.5t142.5 -95.5t95 -142.5t35.5 -172.5q0 -46 -9 -90.5t-26 -84t-41.5 -75.5t-54.5 -66t-66 -54.5t-75.5 -41.5t-84 -26t-89.5 -9zM511 703
q-82 0 -156 -32t-127.5 -85.5t-85.5 -127.5t-32 -155q0 -109 54 -201.5t146 -146t200.5 -53.5t201 53.5t146 146t53.5 201.5q0 165 -117.5 282.5t-282.5 117.5zM465 164v29q0 9 1 17.5t2 15.5l2 10q1 5 3 9.5t4 8.5q1 2 2 4.5t2 4.5t2.5 4t2.5 4t2.5 4.5t3.5 4.5
q10 12 24 26l35 33q15 13 25.5 29.5t10.5 39.5q0 15 -5 27.5t-14 23.5q-5 5 -10.5 8.5t-12.5 6.5t-14.5 4t-16.5 1q-18 0 -32 -6q-5 -3 -9 -5.5t-8 -5.5t-8 -7q-1 -2 -2.5 -3.5t-3 -3.5t-2.5 -3.5t-2 -3.5l-2 -4l-2 -4l-2 -4q-1 -5 -2.5 -10t-2.5 -10t-1 -10l-95 8
q5 37 20 66t39 49q12 10 25.5 18t29.5 13q31 10 66 10q33 0 63 -9.5t53 -28.5q6 -5 11 -10t9.5 -11t8 -12.5t7.5 -13.5q13 -27 13 -64q0 -12 -1.5 -23t-3.5 -20q-2 -4 -3 -7.5t-3 -7.5l-2 -6q-2 -4 -4 -7l-4 -6q-10 -16 -24 -30q-5 -5 -10 -9.5t-11 -10t-11 -10.5
q-16 -13 -25.5 -23t-15.5 -20t-8 -22q-1 -5 -1.5 -12.5t-0.5 -15.5v-20h-92zM450 56q0 25 18 43t44 18q24 0 43 -17q18 -18 19 -42q0 -13 -5 -23.5t-14 -19.5q-18 -17 -43 -17q-12 0 -23.5 4.5t-20.5 12.5q-8 7 -13 18t-5 23z" />
</font>
</defs></svg>
... ...
... ... @@ -331,6 +331,10 @@
}
}
.other-infos {
padding-bottom: 30px;
}
.info-block {
margin-top: 30px;
color: #999;
... ... @@ -352,6 +356,7 @@
width: 470px;
border: 1px solid #eaeceb;
margin: 17px auto 0;
padding-bottom: 15px;
li {
margin: 12px 20px 0;
... ... @@ -441,4 +446,257 @@
border-right: 1px solid #eaeceb;
}
}
.size-info {
text-align: center;
}
.size-table, .reference-table {
text-align: center;
margin: 0 auto;
td,th {
width: 110px;
text-align: center;
}
tr {
height: 30px;
}
thead {
background: #f5f7f6;
color: #999;
}
tbody {
color: #222;
}
.avatar {
width: 26px;
height: 26px;
border-radius: 50px;
}
}
.size-tip {
color: #999;
margin-top: 15px;
text-align: center;
}
.details {
text-align: center;
font-size: 12px;
color: #999;
line-height: 18px;
}
.details-html {
width: 640px;
margin: 0 auto;
b {
font-weight: bold;
}
i {
font-style: italic;
}
}
.consult-comment .title {
color: #666;
&.cur {
color: #666;
}
}
.consult-comment .content {
background: #f5f7f6;
padding: 20px 20px 0 20px;
font-size: 12px;
h2 {
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;
color: #000;
}
li {
border-top: 1px solid #eaeceb;
padding: 20px 0;
}
.user-info {
color: #999;
line-height: 16px;
> * {
float: left;
}
.name {
color: #666;
}
.date {
color: #bbb;
}
.question {
color: #222;
}
}
.user-avatar {
width: 30px;
height: 30px;
margin-right: 5px;
}
.more-wrap {
text-align: center;
color: #666;
border-top: 1px solid #eaeceb;
padding: 20px 0;
font-size: 14px;
font-weight: bold;
color: #666;
}
.btn-wrap {
padding: 20px 0;
border-top: 1px solid #eaeceb;
}
.btn {
display: block;
width: 140px;
height: 32px;
line-height: 32px;
color: #fff;
background: #222;
text-align: center;
font-size: 12px;
margin: 0 auto;
.iconfont {
font-size: 14px;
}
}
.comment, .consult {
margin-top: 10px;
}
}
.after-service {
text-align: center;
margin-top: 30px;
.after-service-switch {
height: 44px;
line-height: 44px;
background: #eaeceb;
text-align: center;
font-size: 12px;
.iconfont {
font-size: 12px;
}
}
.text {
padding: 20px 15px;
color: #666;
background: #f5f7f6;
text-align: left;
color: #666;
line-height: 18px;
}
.orange {
color: #f9761a;
}
h4 {
font-weight: bold;
font-size: 14px;
line-height: 24px;
color: #222;
margin-top: 10px;
&:first-child {
margin-top: 0;
}
}
.img-1 {
width: 715px;
height: 259px;
margin: 0 auto;
background: image-url('product/after-service-1.png');
}
.img-2 {
width: 715px;
height: 230px;
margin: 0 auto;
background: image-url('product/after-service-2.png');
}
a {
color: #666;
}
}
.service {
width: 323px;
height: 30px;
margin: 45px auto 0;
background: image-url('product/service.png');
}
.recent-view {
width: 1010px;
margin: 0 auto;
li {
float: left;
width: 180px;
margin-right: 22px;
}
img {
height: 240px;
width: 180px;
display: block;
}
.name {
display: block;
margin-top: 5px;
color: #222;
line-height: 16px;
}
.price {
color: #222;
font-weight: bold;
margin-top: 5px;
}
.market-price {
margin-right: 5px;
}
.has-sale {
text-decoration: line-through;
color: #999;
}
}
}
\ No newline at end of file
... ...
... ... @@ -203,6 +203,113 @@ class ItemController extends AbstractAction
'name' => '分色洗涤'
)
)
),
'size' => array(
'thead' => array(
array(
'width' => 110,
'name' => '吊牌尺码'
),
array(
'width' => 110,
'name' => '表带长'
),
array(
'width' => 110,
'name' => '表盘厚度'
),
array(
'width' => 110,
'name' => '表盘直径'
)
),
'tbody' => array(
array(
'F', '20', '1', '4'
)
),
'sizeImg' => 'http://static.yohobuy.com/images/1.jpg'
),
'reference' => array(
'thead' => array(
array(
'width' => 26,
'name' => ''
),
array(
'width' => 90,
'name' => '模特'
),
array(
'width' => 110,
'name' => '身高'
),
array(
'width' => 110,
'name' => '体重'
),
array(
'width' => 110,
'name' => '三围'
),
array(
'width' => 110,
'name' => '吊牌尺码'
),
array(
'width' => 110,
'name' => '试穿描述'
)
),
'tbody' => array(
array(
'http://img11.static.yhbimg.com/modelCard/2015/07/18/01/011c7aa0035212351482ec01a41afb1fd2.jpg',
'Oliver',
'175',
'51',
'78/70/87',
'M',
'合适'
)
)
),
'details' => '精致细腻的剪裁，搭配假拉链装饰，摒弃棉衣的臃肿，十分有型。中长款设计，内里夹棉，足够帮你抵御冬天的严寒。<br><br><p><img border="0" src="http://img02.static.yohobuy.com/product/2015/11/16/15/02b665cffb4ab07dbfacf922e7e7697134.jpg"></p>',
'consultComment' => array(
'consultNum' => 125,
'commentNum' => 122,
'comments' => array(
array(
'avatar' => 'http://static.yohobuy.com/images/v3/boy.jpg',
'userName' => '哦嚯',
'color' => '绿色',
'size' => 'L',
'date' => '2015-12-19 16:44:02',
'comment' => '好看'
)
),
'consults' => array(
array(
'avatar' => 'http://static.yohobuy.com/images/v3/boy.jpg',
'question' => '黑色其他型号 L 不会再出了吗？',
'date' => '2015-12-19 16:44:02',
'answer' => '该款商品补货时间暂时无法确定，绿色目前是有货的。您还可以“收藏”该商品同时“关注”该品牌，实时关注并登录“MY有货”点击查看“收藏商品”，补货到仓后可直接购买,感谢您对Yoho!Buy有货的支持，祝您购物愉快！'
)
)
),
'recentView' => array(
array(
'url' => '',
'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/12/08/06/013ded7a84dbd3087594553e4333c92f80.jpg?imageMogr2/thumbnail/195x260/extent/195x260/background/d2hpdGU=/position/center/quality/90',
'name' => 'BRISTON 手表Clubmaster CHRONO black Silver - Black dial基本系列黑盘 ',
'marketPrice' => '2180'
),
array(
'url' => '',
'img' => 'http://img11.static.yhbimg.com/goodsimg/2015/10/14/06/017fc64072bb2acb5dfa6b4d33e812afd5.jpg?imageMogr2/thumbnail/195x260/extent/195x260/background/d2hpdGU=/position/center/quality/90',
'name' => 'GAWS 街头风金属拉链装饰棉服',
'marketPrice' => '639',
'salePrice' => '419'
)
)
)
);
... ...