fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 6a3519ad63e3431cd62b821aab3765bc33a96d9a 1 parent 9bddadaa

good description & materials

Inline Side-by-side
Showing 3 changed files with 301 additions and 3 deletions
@@ -132,7 +132,7 @@ @@ -132,7 +132,7 @@
132 </div> 132 </div>
133 </div> 133 </div>
134 134
135 - <div class="row clearfix"> 135 + <div class="chose-count row clearfix">
136 <span class="title pull-left">选数量：</span> 136 <span class="title pull-left">选数量：</span>
137 <div class="num-wraper pull-left clearfix"> 137 <div class="num-wraper pull-left clearfix">
138 <span id="num" class="num pull-left">1</span> 138 <span id="num" class="num pull-left">1</span>
@@ -179,6 +179,67 @@ @@ -179,6 +179,67 @@
179 </div> 179 </div>
180 </div> 180 </div>
181 {{/ goodInfo}} 181 {{/ goodInfo}}
  182 +
  183 + <div class="other-infos">
  184 + <div class="description-material info-block">
  185 + <p class="block-title">
  186 + <span class="title cur">商品信息 DESCRIPTION</span>
  187 + <span class="sep">|</span>
  188 + <span class="title">材质洗涤 MATERIALS</span>
  189 + </p>
  190 + <div class="description-content">
  191 + {{# description}}
  192 + <ul class="basic clearfix">
  193 + {{# basic}}
  194 + <li>
  195 + {{key}}: {{value}}
  196 + </li>
  197 + {{/ basic}}
  198 + </ul>
  199 + {{#if comfort}}
  200 + <ul class="comfort clearfix">
  201 + {{# comfort}}
  202 + <li class="pull-left">
  203 + <span class="comfort-title">{{name}}：</span>
  204 + <span class="min-des">{{minDes}}</span>
  205 + {{# blocks}}
  206 + <span class="comfort-block {{#if cur}}cur{{/if}}"></span>
  207 + {{/ blocks}}
  208 + <span class="max-des">{{maxDes}}</span>
  209 + </li>
  210 + {{/ comfort}}
  211 + </ul>
  212 + {{/if}}
  213 + {{/ description}}
  214 + </div>
  215 + <div class="material-content hide">
  216 + {{# material}}
  217 + {{#if detail}}
  218 + <ul class="material-detail clearfix">
  219 + {{# detail}}
  220 + <li>
  221 + <img src="{{img}}">
  222 + <p class="name">{{name}}<br>{{enName}}</p>
  223 + <p class="text">{{text}}</p>
  224 + </li>
  225 + {{/ detail}}
  226 + </ul>
  227 + {{/if}}
  228 +
  229 + {{#if wash}}
  230 + <ul class="wash">
  231 + {{# wash}}
  232 + <li>
  233 + <img class="wash-icon" src="{{img}}">
  234 + <p class="wash-name">{{name}}</p>
  235 + </li>
  236 + {{/ wash}}
  237 + </ul>
  238 + {{/if}}
  239 + {{/ material}}
  240 + </div>
  241 + </div>
  242 + </div>
182 </div> 243 </div>
183 {{/ detail}} 244 {{/ detail}}
184 </div> 245 </div>
@@ -235,6 +235,10 @@ @@ -235,6 +235,10 @@
235 background: image-url('product/size-ruler.jpg'); 235 background: image-url('product/size-ruler.jpg');
236 } 236 }
237 237
  238 + .chose-count .title {
  239 + margin-top: 6px;
  240 + }
  241 +
238 .num { 242 .num {
239 display: block; 243 display: block;
240 width: 38px; 244 width: 38px;
@@ -247,14 +251,15 @@ @@ -247,14 +251,15 @@
247 .minus-plus { 251 .minus-plus {
248 display: block; 252 display: block;
249 width: 14px; 253 width: 14px;
250 - height: 25px; 254 + height: 23px;
251 border: 1px solid #eaeceb; 255 border: 1px solid #eaeceb;
252 border-left: none; 256 border-left: none;
  257 + text-align: center;
253 258
254 i { 259 i {
255 display: block; 260 display: block;
256 width: 13px; 261 width: 13px;
257 - height: 13px; 262 + height: 11px;
258 line-height: 8px; 263 line-height: 8px;
259 font-size: 12px; 264 font-size: 12px;
260 } 265 }
@@ -262,6 +267,7 @@ @@ -262,6 +267,7 @@
262 267
263 .minus { 268 .minus {
264 border-top: 1px solid #eaeceb; 269 border-top: 1px solid #eaeceb;
  270 + font-size: 13px;
265 } 271 }
266 272
267 .add-to-cart { 273 .add-to-cart {
@@ -324,4 +330,115 @@ @@ -324,4 +330,115 @@
324 } 330 }
325 } 331 }
326 } 332 }
  333 +
  334 + .info-block {
  335 + margin-top: 30px;
  336 + color: #999;
  337 + border-top: 2px solid #eaeceb;
  338 + font-size: 12px;
  339 +
  340 + .basic {
  341 + width: 640px;
  342 + margin: 0 auto;
  343 +
  344 + li {
  345 + float: left;
  346 + width: 25%;
  347 + line-height: 20px;
  348 + }
  349 + }
  350 +
  351 + .comfort {
  352 + width: 470px;
  353 + border: 1px solid #eaeceb;
  354 + margin: 17px auto 0;
  355 +
  356 + li {
  357 + margin: 12px 20px 0;
  358 + }
  359 + }
  360 +
  361 + .comfort-block {
  362 + display: inline-block;
  363 + width: 14px;
  364 + height: 10px;
  365 + border: 1px solid #eaeceb;
  366 + margin-right: 2px;
  367 +
  368 + &.cur {
  369 + background: #999;
  370 + border: 1px solid #999;
  371 + }
  372 + }
  373 + }
  374 +
  375 + .block-title {
  376 + margin-bottom: 25px;
  377 + text-align: center;
  378 +
  379 + .title {
  380 + display: inline-block;
  381 + padding-top: 15px;
  382 + font-weight: bold;
  383 + cursor: pointer;
  384 +
  385 + &.cur {
  386 + color: #222;
  387 + border-top: 2px solid #222;
  388 + margin-top: -2px;
  389 + }
  390 + }
  391 +
  392 + .sep {
  393 + display: inline-block;
  394 + margin: 0 30px;
  395 + color: #eaeceb;
  396 + font-size: 14px;
  397 + cursor: default;
  398 + font-weight: bold;
  399 + }
  400 + }
  401 +
  402 + .material-detail {
  403 + width: 860px;
  404 + margin: 0 auto;
  405 + padding-bottom: 20px;
  406 + margin-bottom: 20px;
  407 + border-bottom: 1px dotted #eaeceb;
  408 +
  409 + img {
  410 + float: left;
  411 + width: 125px;
  412 + height: 50px;
  413 + }
  414 +
  415 + .name {
  416 + float: left;
  417 + width: 100px;
  418 + line-height: 25px;
  419 + border-right: 1px dotted #eaeceb;
  420 + color: #666;
  421 + font-weight: bold;
  422 + text-align: center;
  423 + font-size: 14px;
  424 + }
  425 +
  426 + .text {
  427 + float: left;
  428 + width: 614px;
  429 + padding-left: 20px;
  430 + line-height: 18px;
  431 + }
  432 + }
  433 +
  434 + .wash {
  435 + text-align: center;
  436 +
  437 + li {
  438 + display: inline-block;
  439 + padding: 0 20px;
  440 + color: #666;
  441 + border-right: 1px solid #eaeceb;
  442 + }
  443 + }
327 } 444 }
@@ -83,6 +83,126 @@ class ItemController extends AbstractAction @@ -83,6 +83,126 @@ class ItemController extends AbstractAction
83 ) 83 )
84 ) 84 )
85 ) 85 )
  86 + ),
  87 + 'description' => array(
  88 + 'basic' => array(
  89 + array(
  90 + 'key' => '编号',
  91 + 'value' => '51183240'
  92 + ),
  93 + array(
  94 + 'key' => '颜色',
  95 + 'value' => '黑色'
  96 + ),
  97 + array(
  98 + 'key' => '性别',
  99 + 'value' => '通用'
  100 + ),
  101 + array(
  102 + 'key' => '显示方式',
  103 + 'value' => '指针'
  104 + ),
  105 + array(
  106 + 'key' => '款式',
  107 + 'value' => '石英表'
  108 + )
  109 + ),
  110 + 'comfort' => array(
  111 + array(
  112 + 'name' => '弹性',
  113 + 'minDes' => '小',
  114 + 'blocks' => array(
  115 + array(
  116 + ),
  117 + array(
  118 + 'cur' => true
  119 + ),
  120 + array(
  121 + ),
  122 + array(
  123 + ),
  124 + array(
  125 + )
  126 + ),
  127 + 'maxDes' => '大'
  128 + ),
  129 + array(
  130 + 'name' => '厚度',
  131 + 'minDes' => '薄',
  132 + 'blocks' => array(
  133 + array(
  134 + ),
  135 + array(
  136 + ),
  137 + array(
  138 + 'cur' => true
  139 + ),
  140 + array(
  141 + ),
  142 + array(
  143 + )
  144 + ),
  145 + 'maxDes' => '厚'
  146 + ),
  147 + array(
  148 + 'name' => '柔软度',
  149 + 'minDes' => '软',
  150 + 'blocks' => array(
  151 + array(
  152 + ),
  153 + array(
  154 + ),
  155 + array(
  156 + ),
  157 + array(
  158 + ),
  159 + array(
  160 + 'cur' => true
  161 + )
  162 + ),
  163 + 'maxDes' => '硬'
  164 + ),
  165 + array(
  166 + 'name' => '透气性',
  167 + 'minDes' => '弱',
  168 + 'blocks' => array(
  169 + array(
  170 + ),
  171 + array(
  172 + ),
  173 + array(
  174 + ),
  175 + array(
  176 + 'cur' => true
  177 + ),
  178 + array(
  179 + )
  180 + ),
  181 + 'maxDes' => '强'
  182 + )
  183 + )
  184 + ),
  185 + 'material' => array(
  186 + 'detail' => array(
  187 + 'img' => 'http://img10.static.yhbimg.com/material/2012/03/06/20/0176f9410824167f9eca0cea7bd2b3df70.jpg',
  188 + 'name' => '涤纶/聚酯纤维',
  189 + 'enName' => 'Polyester',
  190 + 'text' => '涤纶类的服装可机洗，可手洗，可干洗，可用毛刷刷洗。不可曝晒，不宜烘干。熨烫温度不能超过110度，熨烫时一定要打蒸汽，不能干烫 。在日光下晾晒时，将里面朝外。'
  191 + ),
  192 + 'wash' => array(
  193 + array(
  194 + 'img' => 'http://static.yohobuy.com/images/wash_2.png',
  195 + 'name' => '不可转笼翻转干燥'
  196 + ),
  197 + array(
  198 + 'img' => 'http://static.yohobuy.com/images/wash_4.png',
  199 + 'name' => '不可氯洗'
  200 + ),
  201 + array(
  202 + 'img' => 'http://static.yohobuy.com/images/wash_7.png',
  203 + 'name' => '分色洗涤'
  204 + )
  205 + )
86 ) 206 )
87 ) 207 )
88 ); 208 );