fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by Lynnic
Commit 57fccd90390a5a147494be1188790b787852d4ac 1 parent 50edba7f

update

Inline Side-by-side
Showing 9 changed files with 201 additions and 95 deletions
1 $mainFontC:#444444; 1 $mainFontC:#444444;
2 $subFontC:#b0b0b0; 2 $subFontC:#b0b0b0;
3 -$borderC:#b0b0b0; 3 +$borderC:#e0e0e0;
4 $tableCellC:#eee; 4 $tableCellC:#eee;
  5 +$basicBtnC:#eb0313;
5 6
6 7
7 .good-detail-page { 8 .good-detail-page {
@@ -11,41 +12,41 @@ $tableCellC:#eee; @@ -11,41 +12,41 @@ $tableCellC:#eee;
11 box-sizing:border-box; 12 box-sizing:border-box;
12 width: 100%; 13 width: 100%;
13 border-bottom: 2px solid $borderC; 14 border-bottom: 2px solid $borderC;
14 - border-top: 2px solid $borderC; 15 + border-top: 1px solid $borderC;
15 padding: 0 pxToRem(28px); 16 padding: 0 pxToRem(28px);
16 .title{ 17 .title{
17 min-height: pxToRem(88px); 18 min-height: pxToRem(88px);
18 line-height: pxToRem(88px); 19 line-height: pxToRem(88px);
19 color: $mainFontC; 20 color: $mainFontC;
20 font-size : pxToRem(28px); 21 font-size : pxToRem(28px);
21 - border-bottom: 2px solid $borderC; 22 + border-bottom: 1px solid $borderC;
22 23
23 span{ 24 span{
24 - color:#a0a0a0;  
25 - font-size:pxToRem(18px); 25 + color:#a0a0a0;
  26 + font-size:pxToRem(18px);
26 // vertical-align: baseline; 27 // vertical-align: baseline;
27 } 28 }
28 - }  
29 - .detail{  
30 - margin-top: pxToRem(20px);  
31 - margin-bottom: pxToRem(20px);  
32 - font-size: pxToRem(24px);  
33 - line-height: pxToRem(36px);  
34 -  
35 - &.table{  
36 - display: table;  
37 - width: 100%;  
38 - .row{  
39 - display: table-row;  
40 - .column{  
41 - display: table-cell;  
42 - padding: 0.4em 0.8em;  
43 - border:2px solid white;  
44 - font-size: pxToRem(24px);  
45 - background-color: $tableCellC;  
46 - }  
47 - }  
48 } 29 }
  30 + .detail{
  31 + margin-top: pxToRem(20px);
  32 + margin-bottom: pxToRem(20px);
  33 + font-size: pxToRem(24px);
  34 + line-height: pxToRem(36px);
  35 +
  36 + &.table{
  37 + display: table;
  38 + width: 100%;
  39 + .row{
  40 + display: table-row;
  41 + .column{
  42 + display: table-cell;
  43 + padding: 0.4em 0.8em;
  44 + border:1px solid white;
  45 + font-size: pxToRem(24px);
  46 + background-color: $tableCellC;
  47 + }
  48 + }
  49 + }
49 50
50 // table { 51 // table {
51 // width: 100%; 52 // width: 100%;
@@ -134,7 +135,7 @@ $tableCellC:#eee; @@ -134,7 +135,7 @@ $tableCellC:#eee;
134 color:$subFontC; 135 color:$subFontC;
135 padding-left:pxToRem(28px); 136 padding-left:pxToRem(28px);
136 padding-right:pxToRem(28px); 137 padding-right:pxToRem(28px);
137 - border-bottom: 2px solid $borderC; 138 + border-bottom:1px solid $borderC;
138 background-color: #f4f4f4; 139 background-color: #f4f4f4;
139 } 140 }
140 141
@@ -144,7 +145,7 @@ $tableCellC:#eee; @@ -144,7 +145,7 @@ $tableCellC:#eee;
144 min-height: pxToRem(88px); 145 min-height: pxToRem(88px);
145 padding-left:pxToRem(28px); 146 padding-left:pxToRem(28px);
146 padding-right:pxToRem(28px); 147 padding-right:pxToRem(28px);
147 - border-bottom: 2px solid $borderC; 148 + border-bottom: 1px solid $borderC;
148 } 149 }
149 .goodsPrice{ 150 .goodsPrice{
150 float: left; 151 float: left;
@@ -162,9 +163,9 @@ $tableCellC:#eee; @@ -162,9 +163,9 @@ $tableCellC:#eee;
162 } 163 }
163 } 164 }
164 .periodOfMarket{ 165 .periodOfMarket{
165 - font-size: pxToRem(24px);  
166 - float: right;  
167 - h1{ 166 + font-size: pxToRem(24px);
  167 + float: right;
  168 + h1{
168 display: inline-block; 169 display: inline-block;
169 line-height: pxToRem(88px); 170 line-height: pxToRem(88px);
170 } 171 }
@@ -174,11 +175,11 @@ $tableCellC:#eee; @@ -174,11 +175,11 @@ $tableCellC:#eee;
174 // width: 100%; 175 // width: 100%;
175 display:table; 176 display:table;
176 span{ 177 span{
177 - display: table-cell;  
178 - vertical-align: middle;  
179 - }  
180 - }  
181 - .vipLevel { 178 + display: table-cell;
  179 + vertical-align: middle;
  180 + }
  181 + }
  182 + .vipLevel {
182 display: table; 183 display: table;
183 min-height: pxToRem(88px); 184 min-height: pxToRem(88px);
184 padding-left:pxToRem(28px); 185 padding-left:pxToRem(28px);
@@ -186,7 +187,7 @@ $tableCellC:#eee; @@ -186,7 +187,7 @@ $tableCellC:#eee;
186 font-size: pxToRem(22px); 187 font-size: pxToRem(22px);
187 color: #999999; 188 color: #999999;
188 189
189 - border-bottom: 2px solid $borderC; 190 + border-bottom: 1px solid $borderC;
190 span{ 191 span{
191 display: table-cell; 192 display: table-cell;
192 vertical-align: middle; 193 vertical-align: middle;
@@ -212,7 +213,7 @@ $tableCellC:#eee; @@ -212,7 +213,7 @@ $tableCellC:#eee;
212 font-size: pxToRem(28px); 213 font-size: pxToRem(28px);
213 color: $mainFontC; 214 color: $mainFontC;
214 line-height: pxToRem(88px); 215 line-height: pxToRem(88px);
215 - border-bottom: 2px solid $borderC; 216 + border-bottom: 1px solid $borderC;
216 .iconfont{ 217 .iconfont{
217 // padding-right:28rem/$pxConvertRem; 218 // padding-right:28rem/$pxConvertRem;
218 font-size: inherit; 219 font-size: inherit;
@@ -234,8 +235,8 @@ $tableCellC:#eee; @@ -234,8 +235,8 @@ $tableCellC:#eee;
234 height: pxToRem(60px); 235 height: pxToRem(60px);
235 padding: pxToRem(10px) 0; 236 padding: pxToRem(10px) 0;
236 background-color: #fff; 237 background-color: #fff;
237 - border-top: 2px solid $borderC;  
238 - border-bottom: 2px solid $borderC; 238 + border-top: 1px solid $borderC;
  239 + border-bottom: 1px solid $borderC;
239 } 240 }
240 241
241 .comment-nav, .consult-nav { 242 .comment-nav, .consult-nav {
@@ -254,13 +255,13 @@ $tableCellC:#eee; @@ -254,13 +255,13 @@ $tableCellC:#eee;
254 } 255 }
255 256
256 .comment-nav { 257 .comment-nav {
257 - border-right: 2px solid #ccc; 258 + border-right: 1px solid #ccc;
258 } 259 }
259 260
260 .comment-content{ 261 .comment-content{
261 - .comment-content-main{ 262 + .comment-content-main{
262 background-color: #fff; 263 background-color: #fff;
263 - border-bottom: 2px solid $borderC; 264 + border-bottom: 1px solid $borderC;
264 .user-name{ 265 .user-name{
265 font-size: pxToRem(24px); 266 font-size: pxToRem(24px);
266 line-height: pxToRem(62px); 267 line-height: pxToRem(62px);
@@ -296,20 +297,20 @@ $tableCellC:#eee; @@ -296,20 +297,20 @@ $tableCellC:#eee;
296 } 297 }
297 298
298 .comment-content-footer{ 299 .comment-content-footer{
299 - min-height: pxToRem(88px);  
300 - text-align: center;  
301 - background-color: #fff;  
302 -  
303 - border-bottom: 2px solid $borderC;  
304 - line-height: pxToRem(88px);  
305 - font-size: pxToRem(28px);  
306 - a{  
307 - color: #e0e0e0;  
308 - .iconfont{  
309 - font-size: inherit;  
310 - }  
311 - }  
312 - } 300 + min-height: pxToRem(88px);
  301 + text-align: center;
  302 + background-color: #fff;
  303 +
  304 + border-bottom: 1px solid $borderC;
  305 + line-height: pxToRem(88px);
  306 + font-size: pxToRem(28px);
  307 + a{
  308 + color: #e0e0e0;
  309 + .iconfont{
  310 + font-size: inherit;
  311 + }
  312 + }
  313 +}
313 314
314 } 315 }
315 316
@@ -337,39 +338,49 @@ $tableCellC:#eee; @@ -337,39 +338,49 @@ $tableCellC:#eee;
337 margin-right: pxToRem(-25px); 338 margin-right: pxToRem(-25px);
338 } 339 }
339 } 340 }
340 - .store-name{  
341 - font-size: pxToRem(34px);  
342 - color:$mainFontC; 341 +.store-name{
  342 + font-size: pxToRem(34px);
  343 + color:$mainFontC;
  344 +}
  345 +.store-link{
  346 + font-size:pxToRem(28px) ;
  347 + color:$subFontC;
  348 + text-align: right;
  349 + span{
  350 + font-size: inherit;
343 } 351 }
344 - .store-link{  
345 - font-size:pxToRem(28px) ;  
346 - color:$subFontC;  
347 - text-align: right;  
348 - span{  
349 - font-size: inherit; 352 +}
  353 +}
  354 + .goods-desc{
  355 + .service{
  356 + margin-top: pxToRem(22px);
350 } 357 }
351 } 358 }
352 -}  
353 - // .goods-desc{  
354 - // table{  
355 -  
356 - // }  
357 - // } 359 + .tips{
  360 + color:$subFontC;
  361 + font-size: pxToRem(18px);
  362 + margin-top: pxToRem(20px);
  363 + }
358 .materials{ 364 .materials{
359 .detail{ 365 .detail{
360 img{ 366 img{
361 - display: block;  
362 - overflow: hidden;  
363 - width: pxToRem(90px);  
364 - height: pxToRem(120px);  
365 - padding-right: pxToRem(20px);  
366 - float: left;  
367 - } 367 + display: block;
  368 + overflow: hidden;
  369 + width: pxToRem(90px);
  370 + height: pxToRem(120px);
  371 + padding-right: pxToRem(20px);
  372 + float: left;
  373 + }
368 .material-desc{ 374 .material-desc{
369 // float: left; 375 // float: left;
370 font-size: pxToRem(24px); 376 font-size: pxToRem(24px);
  377 +
371 } 378 }
372 } 379 }
  380 + .material-type{
  381 + border-top: 1px solid $borderC;
  382 + padding: pxToRem(17px) 0;
  383 + }
373 } 384 }
374 385
375 .product-detail{ 386 .product-detail{
@@ -380,6 +391,7 @@ $tableCellC:#eee; @@ -380,6 +391,7 @@ $tableCellC:#eee;
380 height: pxToRem(772px); 391 height: pxToRem(772px);
381 } 392 }
382 } 393 }
  394 + margin-bottom: pxToRem(120px);
383 } 395 }
384 396
385 .detail-swiper{ 397 .detail-swiper{
@@ -388,13 +400,76 @@ $tableCellC:#eee; @@ -388,13 +400,76 @@ $tableCellC:#eee;
388 width: pxToRem(114px); 400 width: pxToRem(114px);
389 div{ 401 div{
390 text-align: center; 402 text-align: center;
391 - }  
392 - div.cell{  
393 - background-color: $tableCellC;  
394 - padding:pxToRem(15px) 0;  
395 - border: 1px solid #fff; 403 + &.cell{
  404 + font-size: pxToRem(24px);
  405 + background-color: $tableCellC;
  406 + padding:pxToRem(15px) 0;
  407 + border: 1px solid #fff;
  408 + }
396 } 409 }
397 } 410 }
398 } 411 }
399 } 412 }
  413 +
  414 + #reference-swiper-container{
  415 + .first-group{
  416 + width: pxToRem(58px);
  417 + >div{
  418 + height: pxToRem(67px);
  419 + }
  420 + }
  421 + }
  422 +
  423 + .cart-bar{
  424 + position: relative;
  425 + box-sizing:border-box;
  426 + width: 100%;
  427 + height: pxToRem(120px);
  428 + position:fixed;
  429 + bottom: 0;
  430 + background-color: white;
  431 + z-index: 64;
  432 + padding:pxToRem(20px) pxToRem(28px);
  433 + text-align: center;
  434 +
  435 +
  436 + a{
  437 + display: inline-block;
  438 + &.num-incart{
  439 + width: pxToRem(45px);
  440 + height: pxToRem(45px);
  441 + background: url(../img/product/cart.png) no-repeat;
  442 + }
  443 + &.favorite{
  444 + width: pxToRem(34px);
  445 + height: pxToRem(32px);
  446 + background:url(../img/product/favorite.png) no-repeat;
  447 + }
  448 + &.addto-cart{
  449 + height: pxToRem(80px);
  450 + width: pxToRem(260px);
  451 + margin:0 pxToRem(100px) 0 pxToRem(128px);
  452 + color: #fff;
  453 + background-color: $basicBtnC;
  454 + font-size: pxToRem(40px);
  455 + line-height: pxToRem(80px);
  456 + text-align: center;
  457 + }
  458 + }
  459 + .num-tag{
  460 + position: absolute;
  461 + left:pxToRem(66px);
  462 + height: pxToRem(20px);
  463 + display: block;
  464 + width: pxToRem(36px);
  465 + height: pxToRem(36px);
  466 + background-color: $basicBtnC;
  467 + border-radius: 50%;
  468 + color:white;
  469 + font-size: pxToRem(24px);
  470 + }
  471 +
  472 + }
  473 +
  474 +
400 } 475 }
@@ -121,6 +121,7 @@ @@ -121,6 +121,7 @@
121 121
122 {{#goodsDescription}} 122 {{#goodsDescription}}
123 <div class="goods-desc page-block"> 123 <div class="goods-desc page-block">
  124 + <img class="service" src="http://static.dev.yohobuy.com/img/product/service.png" alt="">
124 <h1 class="title"> 125 <h1 class="title">
125 {{title}} 126 {{title}}
126 <span class="en-title">{{enTitle}}</span> 127 <span class="en-title">{{enTitle}}</span>
@@ -169,6 +170,7 @@ @@ -169,6 +170,7 @@
169 {{/list}} 170 {{/list}}
170 </div> 171 </div>
171 </div> 172 </div>
  173 + <p class="tips">提示：左滑查看完整表格信息</p>
172 </div> 174 </div>
173 {{/detail}} 175 {{/detail}}
174 </div> 176 </div>
@@ -199,14 +201,27 @@ @@ -199,14 +201,27 @@
199 <div class="swiper-container detail-swiper" id="reference-swiper-container"> 201 <div class="swiper-container detail-swiper" id="reference-swiper-container">
200 <div class="swiper-wrapper"> 202 <div class="swiper-wrapper">
201 {{#list}} 203 {{#list}}
202 - <div class="swiper-slide blue-slide" >  
203 - <div class="model-name cell">{{name}}</div> 204 + {{#if @first}}
  205 + <div class="swiper-slide first-group" >
  206 + <div class="model-field" >{{fieldName}}</div>
  207 + <div class="first-model">
  208 + <img src="{{firstModel}}" alt="">
  209 + </div>
  210 + <div class="second-model">
  211 + <img src="{{secondModel}}" alt="">
  212 + </div>
  213 + </div>
  214 + {{^}}
  215 + <div class="swiper-slide" >
  216 + <div class="model-field cell">{{fieldName}}</div>
204 <div class="first-model cell">{{firstModel}}</div> 217 <div class="first-model cell">{{firstModel}}</div>
205 <div class="second-model cell">{{secondModel}}</div> 218 <div class="second-model cell">{{secondModel}}</div>
206 </div> 219 </div>
  220 + {{/if}}
207 {{/list}} 221 {{/list}}
208 </div> 222 </div>
209 </div> 223 </div>
  224 + <p class="tips">提示：左滑查看完整表格信息</p>
210 </div> 225 </div>
211 {{/detail}} 226 {{/detail}}
212 </div> 227 </div>
@@ -226,7 +241,9 @@ @@ -226,7 +241,9 @@
226 241
227 {{desc}} 242 {{desc}}
228 </p> 243 </p>
  244 +
229 </div> 245 </div>
  246 + <img src="{{materialType}}" alt="" class="material-type">
230 </div> 247 </div>
231 {{/materials}} 248 {{/materials}}
232 249
@@ -244,6 +261,15 @@ @@ -244,6 +261,15 @@
244 </div> 261 </div>
245 </div> 262 </div>
246 {{/productDetail}} 263 {{/productDetail}}
  264 +
247 265
  266 + {{#cartInfo}}
  267 + <div class="cart-bar">
  268 + <span class="num-tag">{{numInCart}}</span>
  269 + <a href="" class="num-incart"></a>
  270 + <a href="" class="addto-cart">加入购物车</a>
  271 + <a href="" class="favorite"></a>
  272 + </div>
  273 + {{/cartInfo}}
248 </div> 274 </div>
249 {{> layout/footer}} 275 {{> layout/footer}}
@@ -162,32 +162,32 @@ SHOE BQT KEN BLOCK', @@ -162,32 +162,32 @@ SHOE BQT KEN BLOCK',
162 'detail' =>array( 162 'detail' =>array(
163 'list'=>array( 163 'list'=>array(
164 array( 164 array(
165 - 'name'=>'头像',  
166 - 'firstModel'=>'',  
167 - 'secondModel' =>'' 165 + 'fieldName'=>' ',
  166 + 'firstModel'=>'http://static.dev.yohobuy.com/img/product/avatar1.png',
  167 + 'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png'
168 ), 168 ),
169 array( 169 array(
170 - 'name'=>'模特', 170 + 'fieldName'=>'模特',
171 'firstModel'=>'Oliver', 171 'firstModel'=>'Oliver',
172 'secondModel' =>'Jvly' 172 'secondModel' =>'Jvly'
173 ), 173 ),
174 array( 174 array(
175 - 'name'=>'身高', 175 + 'fieldName'=>'身高',
176 'firstModel'=>'175', 176 'firstModel'=>'175',
177 'secondModel' =>'170' 177 'secondModel' =>'170'
178 ), 178 ),
179 array( 179 array(
180 - 'name'=>'体重', 180 + 'fieldName'=>'体重',
181 'firstModel'=>'53', 181 'firstModel'=>'53',
182 'secondModel' =>'59' 182 'secondModel' =>'59'
183 ), 183 ),
184 array( 184 array(
185 - 'name'=>'三围', 185 + 'fieldName'=>'三围',
186 'firstModel'=>'78/70/87', 186 'firstModel'=>'78/70/87',
187 'secondModel' =>'78/70/87' 187 'secondModel' =>'78/70/87'
188 ), 188 ),
189 array( 189 array(
190 - 'name'=>'吊牌尺', 190 + 'fieldName'=>'吊牌尺',
191 'firstModel'=>'S', 191 'firstModel'=>'S',
192 'secondModel' =>'L' 192 'secondModel' =>'L'
193 ) 193 )
@@ -199,7 +199,8 @@ SHOE BQT KEN BLOCK', @@ -199,7 +199,8 @@ SHOE BQT KEN BLOCK',
199 'title' => '商品材质', 199 'title' => '商品材质',
200 'enTitle' =>'MATERIALS', 200 'enTitle' =>'MATERIALS',
201 'img' => 'http://static.dev.yohobuy.com/img/product/material.png', 201 'img' => 'http://static.dev.yohobuy.com/img/product/material.png',
202 - 'desc' =>'用各种洗涤剂，可手洗机洗，但不宜氯漂，宜阴干，避免曝晒，以免深色衣物褪色，在日光下晾晒时，将里面朝外。浸泡时间不能太长，避免褪色，深色与浅色衣服最好请分开洗涤，避免染色。' 202 + 'desc' =>'用各种洗涤剂，可手洗机洗，但不宜氯漂，宜阴干，避免曝晒，以免深色衣物褪色，在日光下晾晒时，将里面朝外。浸泡时间不能太长，避免褪色，深色与浅色衣服最好请分开洗涤，避免染色。',
  203 + 'materialType'=>'http://static.dev.yohobuy.com/img/product/material-type.png'
203 ), 204 ),
204 205
205 'productDetail' =>array( 206 'productDetail' =>array(
@@ -207,7 +208,11 @@ SHOE BQT KEN BLOCK', @@ -207,7 +208,11 @@ SHOE BQT KEN BLOCK',
207 'enTitle' =>'DETAILS', 208 'enTitle' =>'DETAILS',
208 'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。', 209 'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。',
209 'img' =>'http://static.dev.yohobuy.com/img/product/product.png' 210 'img' =>'http://static.dev.yohobuy.com/img/product/product.png'
210 - ) 211 + ),
  212 +
  213 + 'cartInfo' =>array(
  214 + 'numInCart' => 2
  215 + )
211 216
212 ); 217 );
213 218