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 142 additions and 36 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,14 +12,14 @@ $tableCellC:#eee; @@ -11,14 +12,14 @@ $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 color:#a0a0a0;
@@ -40,7 +41,7 @@ $tableCellC:#eee; @@ -40,7 +41,7 @@ $tableCellC:#eee;
40 .column{ 41 .column{
41 display: table-cell; 42 display: table-cell;
42 padding: 0.4em 0.8em; 43 padding: 0.4em 0.8em;
43 - border:2px solid white; 44 + border:1px solid white;
44 font-size: pxToRem(24px); 45 font-size: pxToRem(24px);
45 background-color: $tableCellC; 46 background-color: $tableCellC;
46 } 47 }
@@ -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;
@@ -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);
@@ -300,7 +301,7 @@ $tableCellC:#eee; @@ -300,7 +301,7 @@ $tableCellC:#eee;
300 text-align: center; 301 text-align: center;
301 background-color: #fff; 302 background-color: #fff;
302 303
303 - border-bottom: 2px solid $borderC; 304 + border-bottom: 1px solid $borderC;
304 line-height: pxToRem(88px); 305 line-height: pxToRem(88px);
305 font-size: pxToRem(28px); 306 font-size: pxToRem(28px);
306 a{ 307 a{
@@ -309,7 +310,7 @@ $tableCellC:#eee; @@ -309,7 +310,7 @@ $tableCellC:#eee;
309 font-size: inherit; 310 font-size: inherit;
310 } 311 }
311 } 312 }
312 - } 313 +}
313 314
314 } 315 }
315 316
@@ -337,24 +338,29 @@ $tableCellC:#eee; @@ -337,24 +338,29 @@ $tableCellC:#eee;
337 margin-right: pxToRem(-25px); 338 margin-right: pxToRem(-25px);
338 } 339 }
339 } 340 }
340 - .store-name{ 341 +.store-name{
341 font-size: pxToRem(34px); 342 font-size: pxToRem(34px);
342 color:$mainFontC; 343 color:$mainFontC;
343 - }  
344 - .store-link{ 344 +}
  345 +.store-link{
345 font-size:pxToRem(28px) ; 346 font-size:pxToRem(28px) ;
346 color:$subFontC; 347 color:$subFontC;
347 text-align: right; 348 text-align: right;
348 span{ 349 span{
349 font-size: inherit; 350 font-size: inherit;
350 } 351 }
351 - }  
352 } 352 }
353 - // .goods-desc{  
354 - // table{  
355 -  
356 - // }  
357 - // } 353 +}
  354 + .goods-desc{
  355 + .service{
  356 + margin-top: pxToRem(22px);
  357 + }
  358 + }
  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{
@@ -368,8 +374,13 @@ $tableCellC:#eee; @@ -368,8 +374,13 @@ $tableCellC:#eee;
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,8 +400,8 @@ $tableCellC:#eee; @@ -388,8 +400,8 @@ $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{ 403 + &.cell{
  404 + font-size: pxToRem(24px);
393 background-color: $tableCellC; 405 background-color: $tableCellC;
394 padding:pxToRem(15px) 0; 406 padding:pxToRem(15px) 0;
395 border: 1px solid #fff; 407 border: 1px solid #fff;
@@ -397,4 +409,67 @@ $tableCellC:#eee; @@ -397,4 +409,67 @@ $tableCellC:#eee;
397 } 409 }
398 } 410 }
399 } 411 }
  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
@@ -245,5 +262,14 @@ @@ -245,5 +262,14 @@
245 </div> 262 </div>
246 {{/productDetail}} 263 {{/productDetail}}
247 264
  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,6 +208,10 @@ SHOE BQT KEN BLOCK', @@ -207,6 +208,10 @@ 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'
  211 + ),
  212 +
  213 + 'cartInfo' =>array(
  214 + 'numInCart' => 2
210 ) 215 )
211 216
212 ); 217 );