Authored by xuqi

good description & materials

... ... @@ -132,7 +132,7 @@
</div>
</div>
<div class="row clearfix">
<div class="chose-count row clearfix">
<span class="title pull-left">选数量:</span>
<div class="num-wraper pull-left clearfix">
<span id="num" class="num pull-left">1</span>
... ... @@ -179,6 +179,67 @@
</div>
</div>
{{/ goodInfo}}
<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>
</p>
<div class="description-content">
{{# description}}
<ul class="basic clearfix">
{{# basic}}
<li>
{{key}}: {{value}}
</li>
{{/ basic}}
</ul>
{{#if comfort}}
<ul class="comfort clearfix">
{{# comfort}}
<li class="pull-left">
<span class="comfort-title">{{name}}:</span>
<span class="min-des">{{minDes}}</span>
{{# blocks}}
<span class="comfort-block {{#if cur}}cur{{/if}}"></span>
{{/ blocks}}
<span class="max-des">{{maxDes}}</span>
</li>
{{/ comfort}}
</ul>
{{/if}}
{{/ description}}
</div>
<div class="material-content hide">
{{# material}}
{{#if detail}}
<ul class="material-detail clearfix">
{{# detail}}
<li>
<img src="{{img}}">
<p class="name">{{name}}<br>{{enName}}</p>
<p class="text">{{text}}</p>
</li>
{{/ detail}}
</ul>
{{/if}}
{{#if wash}}
<ul class="wash">
{{# wash}}
<li>
<img class="wash-icon" src="{{img}}">
<p class="wash-name">{{name}}</p>
</li>
{{/ wash}}
</ul>
{{/if}}
{{/ material}}
</div>
</div>
</div>
</div>
{{/ detail}}
</div>
... ...
... ... @@ -235,6 +235,10 @@
background: image-url('product/size-ruler.jpg');
}
.chose-count .title {
margin-top: 6px;
}
.num {
display: block;
width: 38px;
... ... @@ -247,14 +251,15 @@
.minus-plus {
display: block;
width: 14px;
height: 25px;
height: 23px;
border: 1px solid #eaeceb;
border-left: none;
text-align: center;
i {
display: block;
width: 13px;
height: 13px;
height: 11px;
line-height: 8px;
font-size: 12px;
}
... ... @@ -262,6 +267,7 @@
.minus {
border-top: 1px solid #eaeceb;
font-size: 13px;
}
.add-to-cart {
... ... @@ -324,4 +330,115 @@
}
}
}
.info-block {
margin-top: 30px;
color: #999;
border-top: 2px solid #eaeceb;
font-size: 12px;
.basic {
width: 640px;
margin: 0 auto;
li {
float: left;
width: 25%;
line-height: 20px;
}
}
.comfort {
width: 470px;
border: 1px solid #eaeceb;
margin: 17px auto 0;
li {
margin: 12px 20px 0;
}
}
.comfort-block {
display: inline-block;
width: 14px;
height: 10px;
border: 1px solid #eaeceb;
margin-right: 2px;
&.cur {
background: #999;
border: 1px solid #999;
}
}
}
.block-title {
margin-bottom: 25px;
text-align: center;
.title {
display: inline-block;
padding-top: 15px;
font-weight: bold;
cursor: pointer;
&.cur {
color: #222;
border-top: 2px solid #222;
margin-top: -2px;
}
}
.sep {
display: inline-block;
margin: 0 30px;
color: #eaeceb;
font-size: 14px;
cursor: default;
font-weight: bold;
}
}
.material-detail {
width: 860px;
margin: 0 auto;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px dotted #eaeceb;
img {
float: left;
width: 125px;
height: 50px;
}
.name {
float: left;
width: 100px;
line-height: 25px;
border-right: 1px dotted #eaeceb;
color: #666;
font-weight: bold;
text-align: center;
font-size: 14px;
}
.text {
float: left;
width: 614px;
padding-left: 20px;
line-height: 18px;
}
}
.wash {
text-align: center;
li {
display: inline-block;
padding: 0 20px;
color: #666;
border-right: 1px solid #eaeceb;
}
}
}
\ No newline at end of file
... ...
... ... @@ -83,6 +83,126 @@ class ItemController extends AbstractAction
)
)
)
),
'description' => array(
'basic' => array(
array(
'key' => '编号',
'value' => '51183240'
),
array(
'key' => '颜色',
'value' => '黑色'
),
array(
'key' => '性别',
'value' => '通用'
),
array(
'key' => '显示方式',
'value' => '指针'
),
array(
'key' => '款式',
'value' => '石英表'
)
),
'comfort' => array(
array(
'name' => '弹性',
'minDes' => '小',
'blocks' => array(
array(
),
array(
'cur' => true
),
array(
),
array(
),
array(
)
),
'maxDes' => '大'
),
array(
'name' => '厚度',
'minDes' => '薄',
'blocks' => array(
array(
),
array(
),
array(
'cur' => true
),
array(
),
array(
)
),
'maxDes' => '厚'
),
array(
'name' => '柔软度',
'minDes' => '软',
'blocks' => array(
array(
),
array(
),
array(
),
array(
),
array(
'cur' => true
)
),
'maxDes' => '硬'
),
array(
'name' => '透气性',
'minDes' => '弱',
'blocks' => array(
array(
),
array(
),
array(
),
array(
'cur' => true
),
array(
)
),
'maxDes' => '强'
)
)
),
'material' => array(
'detail' => array(
'img' => 'http://img10.static.yhbimg.com/material/2012/03/06/20/0176f9410824167f9eca0cea7bd2b3df70.jpg',
'name' => '涤纶/聚酯纤维',
'enName' => 'Polyester',
'text' => '涤纶类的服装可机洗,可手洗,可干洗,可用毛刷刷洗。不可曝晒,不宜烘干。熨烫温度不能超过110度,熨烫时一定要打蒸汽,不能干烫 。在日光下晾晒时,将里面朝外。'
),
'wash' => array(
array(
'img' => 'http://static.yohobuy.com/images/wash_2.png',
'name' => '不可转笼翻转干燥'
),
array(
'img' => 'http://static.yohobuy.com/images/wash_4.png',
'name' => '不可氯洗'
),
array(
'img' => 'http://static.yohobuy.com/images/wash_7.png',
'name' => '分色洗涤'
)
)
)
)
);
... ...