fe / yohobuy-node · Commits

Go to a project

Authored by mark
Commit 55fa05db20d28f3ffa03325a2768d9632d5bc384 1 parent 0fa85408

修改商品详情页

Inline Side-by-side
Showing 4 changed files with 192 additions and 137 deletions
... ... @@ -37,9 +37,8 @@
<div class="other-infos">
<div class="description-material info-block">
<p class="block-title">
<span class="title cur">商品信息 DESCRIPTION</span>
<span class="sep">|</span>
<span class="title">材质洗涤 MATERIALS</span>
<span class="title cur">商品信息 Product Info</span>
</p>
<div class="description-content">
{{# description}}
... ... @@ -70,6 +69,14 @@
{{/if}}
{{/ description}}
</div>
</div>
<div class="description-material info-block">
<p class="block-title">
<span class="title cur">材质洗涤 Washing Instructions</span>
</p>
<div class="material-content">
{{# material}}
{{#if materialDetail}}
... ... @@ -97,130 +104,140 @@
{{/ material}}
</div>
</div>
{{#if goodsInfo.virtualGoods}}
<!---虚拟商品-尺码信息没有--->
{{else}}
<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>{{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}}
{{#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 class="{{#if @first}}avatar-col{{/if}}{{#if modelCol}}model-col{{/if}}{{#if remarkCol}}remark-col{{/if}}">{{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="description-material-tab info-block">
<p class="block-title">
<span class="title cur">尺码信息 Size Guide</span>
<span class="sep">|</span>
<span class="title">模特试穿 Model Fitting</span>
</p>
<div class="size-content">
{{#if modelCards}}
<div class="ref-model info-block">
<div class="ref-model">
{{# modelCards}}
<div class="model" style="background: url({{url}}) no-repeat">
<span>试穿尺码: <em>{{size}}</em></span>
</div>
{{/ modelCards}}
</div>
{{#if goodsInfo.virtualGoods}}
<!---虚拟商品-尺码信息没有--->
{{else}}
<div class="size-info info-block">
{{# size}}
<table class="size-table">
<thead>
<tr>
{{# thead}}
<th>{{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}}
</div>
{{/if}}
<div class="model-content">
{{#if fittingReport}}
<div class="fitting-report info-block">
<p class="block-title">
<span class="title cur">试穿报告 FITTING REPORT</span>
</p>
{{# fittingReport}}
{{#if frImg}}
<div class="fr-img-wrap">
<img src="{{frImg}}">
</div>
{{^}}
<table class="fitting-report-table">
<thead>
<tr>
{{# thead}}
<th>{{.}}</th>
{{/ thead}}
</tr>
</thead>
<tbody>
{{# tbody}}
{{#if reference}}
<div class="reference info-block">
{{# reference}}
<table class="reference-table">
<thead>
<tr>
{{#each .}}
<td>{{.}}</td>
{{/each}}
{{# thead}}
<th class="{{#if @first}}avatar-col{{/if}}{{#if modelCol}}model-col{{/if}}{{#if remarkCol}}remark-col{{/if}}">{{name}}</th>
{{/ thead}}
</tr>
{{/ tbody}}
</tbody>
</table>
{{/if}}
{{/ fittingReport}}
</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}}
{{#if modelCards}}
<div class="ref-model info-block">
<div class="ref-model">
{{# modelCards}}
<div class="model" style="background: url({{url}}) no-repeat">
<span>试穿尺码: <em>{{size}}</em></span>
</div>
{{/ modelCards}}
</div>
</div>
{{/if}}
{{#if fittingReport}}
<div class="fitting-report info-block">
<p class="block-title">
<span class="title cur">试穿报告 FITTING REPORT</span>
</p>
{{# fittingReport}}
{{#if frImg}}
<div class="fr-img-wrap">
<img src="{{frImg}}">
</div>
{{^}}
<table class="fitting-report-table">
<thead>
<tr>
{{# thead}}
<th>{{.}}</th>
{{/ thead}}
</tr>
</thead>
<tbody>
{{# tbody}}
<tr>
{{#each .}}
<td>{{.}}</td>
{{/each}}
</tr>
{{/ tbody}}
</tbody>
</table>
{{/if}}
{{/ fittingReport}}
</div>
{{/if}}
</div>
{{/if}}
</div>
<div class="details info-block">
<p class="block-title">
<span class="title cur">商品详情 DETAILS</span>
<span class="title cur">商品详情 Product Description</span>
</p>
<div id="details-html" class="details-html">
<div class="lazy-load-object">
... ... @@ -419,4 +436,3 @@
})();
</script>
{{/statGoodsInfo}}
... ...
... ... @@ -17,11 +17,11 @@ module.exports = {
cookieDomain: '.yohobuy.com',
domains: {
favApi: 'http://192.168.102.31:8092/brower',
api: 'http://api-test3.yohops.com:9999/',
service: 'http://service-test3.yohops.com:9999/',
// api: 'http://api-test3.yohops.com:9999/',
// service: 'http://service-test3.yohops.com:9999/',
//api: 'http://api.yoho.cn/',
//service: 'http://service.yoho.cn/',
api: 'http://api.yoho.cn/',
service: 'http://service.yoho.cn/',
// api: 'http://dev-api.yohops.com:9999/',
// service: 'http://dev-service.yohops.com:9999/',
... ...
... ... @@ -686,12 +686,37 @@ $('#brand-favour').click(function() {
});
// 商品详情/材质洗涤切换
$('.description-material').on('click', '.title', function() {
// $('.description-material').on('click', '.title', function() {
// var $this = $(this),
// index = $this.index();
//
// var $description = $('.description-content'),
// $material = $('.material-content');
//
// if ($this.hasClass('cur')) {
// return;
// }
//
// $this.addClass('cur');
// $this.siblings('.cur').removeClass('cur');
//
// if (index === 0) {
//
// // 商品信息
// $description.slideDown(SLIDETIME);
// $material.slideUp(SLIDETIME);
// } else {
// $description.slideUp(SLIDETIME);
// $material.slideDown(SLIDETIME);
// }
// });
$('.description-material-tab').on('click', '.title', function() {
var $this = $(this),
index = $this.index();
var $description = $('.description-content'),
$material = $('.material-content');
var $sizeContent = $('.size-content'),
$modelContent = $('.model-content');
if ($this.hasClass('cur')) {
return;
... ... @@ -703,11 +728,11 @@ $('.description-material').on('click', '.title', function() {
if (index === 0) {
// 商品信息
$description.slideDown(SLIDETIME);
$material.slideUp(SLIDETIME);
$sizeContent.slideDown(SLIDETIME);
$modelContent.slideUp(SLIDETIME);
} else {
$description.slideUp(SLIDETIME);
$material.slideDown(SLIDETIME);
$sizeContent.slideUp(SLIDETIME);
$modelContent.slideDown(SLIDETIME);
}
});
... ... @@ -1244,4 +1269,3 @@ bindEvent.fire();
// 数据懒加载
dataLazyLoad.init({cls: '.datalazyload', threshold: 0});
... ...
... ... @@ -619,6 +619,8 @@
.other-infos {
padding-bottom: 30px;
border-left: 1px solid #eaeceb;
border-right: 1px solid #eaeceb;
.video-player {
width: 750px;
... ... @@ -644,7 +646,7 @@
li {
float: left;
width: 25%;
width: 155px;
line-height: 20px;
}
}
... ... @@ -683,7 +685,9 @@
padding-top: 15px;
font-weight: bold;
cursor: pointer;
font-size: 20px;
margin-left: auto;
margin-right: auto;
&.cur {
color: #222;
border-top: 2px solid #222;
... ... @@ -706,10 +710,19 @@
}
.material-content {
display: none;
/*display: none;*/
overflow: hidden;
}
.description-material-tab{
.info-block{
color: #999;
font-size: 12px;
margin-top: 0px;
border: none;
}
}
.material-detail li {
width: 860px;
padding-bottom: 20px;
... ... @@ -724,7 +737,7 @@
.name {
float: left;
width: 100px;
width: 120px;
line-height: 25px;
border-right: 1px dotted #eaeceb;
color: #666;
... ... @@ -735,9 +748,10 @@
.text {
float: left;
width: 614px;
width: 460px;
padding-left: 20px;
line-height: 18px;
border-left: 1px solid #eaeceb;
}
}
... ... @@ -1169,10 +1183,11 @@
.after-service-switch {
height: 44px;
line-height: 44px;
background: #eaeceb;
background: #f5f5f5;
text-align: center;
font-size: 12px;
cursor: pointer;
font-weight:bold;
.iconfont {
font-size: 12px;
... ...