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
$mainFontC:#444444;
$subFontC:#b0b0b0;
$borderC:#b0b0b0;
$borderC:#e0e0e0;
$tableCellC:#eee;
$basicBtnC:#eb0313;
.good-detail-page {
... ... @@ -11,41 +12,41 @@ $tableCellC:#eee;
box-sizing:border-box;
width: 100%;
border-bottom: 2px solid $borderC;
border-top: 2px solid $borderC;
border-top: 1px solid $borderC;
padding: 0 pxToRem(28px);
.title{
min-height: pxToRem(88px);
line-height: pxToRem(88px);
color: $mainFontC;
font-size : pxToRem(28px);
border-bottom: 2px solid $borderC;
border-bottom: 1px solid $borderC;
span{
color:#a0a0a0;
font-size:pxToRem(18px);
color:#a0a0a0;
font-size:pxToRem(18px);
// vertical-align: baseline;
}
}
.detail{
margin-top: pxToRem(20px);
margin-bottom: pxToRem(20px);
font-size: pxToRem(24px);
line-height: pxToRem(36px);
&.table{
display: table;
width: 100%;
.row{
display: table-row;
.column{
display: table-cell;
padding: 0.4em 0.8em;
border:2px solid white;
font-size: pxToRem(24px);
background-color: $tableCellC;
}
}
}
.detail{
margin-top: pxToRem(20px);
margin-bottom: pxToRem(20px);
font-size: pxToRem(24px);
line-height: pxToRem(36px);
&.table{
display: table;
width: 100%;
.row{
display: table-row;
.column{
display: table-cell;
padding: 0.4em 0.8em;
border:1px solid white;
font-size: pxToRem(24px);
background-color: $tableCellC;
}
}
}
// table {
// width: 100%;
... ... @@ -134,7 +135,7 @@ $tableCellC:#eee;
color:$subFontC;
padding-left:pxToRem(28px);
padding-right:pxToRem(28px);
border-bottom: 2px solid $borderC;
border-bottom:1px solid $borderC;
background-color: #f4f4f4;
}
... ... @@ -144,7 +145,7 @@ $tableCellC:#eee;
min-height: pxToRem(88px);
padding-left:pxToRem(28px);
padding-right:pxToRem(28px);
border-bottom: 2px solid $borderC;
border-bottom: 1px solid $borderC;
}
.goodsPrice{
float: left;
... ... @@ -162,9 +163,9 @@ $tableCellC:#eee;
}
}
.periodOfMarket{
font-size: pxToRem(24px);
float: right;
h1{
font-size: pxToRem(24px);
float: right;
h1{
display: inline-block;
line-height: pxToRem(88px);
}
... ... @@ -174,11 +175,11 @@ $tableCellC:#eee;
// width: 100%;
display:table;
span{
display: table-cell;
vertical-align: middle;
}
}
.vipLevel {
display: table-cell;
vertical-align: middle;
}
}
.vipLevel {
display: table;
min-height: pxToRem(88px);
padding-left:pxToRem(28px);
... ... @@ -186,7 +187,7 @@ $tableCellC:#eee;
font-size: pxToRem(22px);
color: #999999;
border-bottom: 2px solid $borderC;
border-bottom: 1px solid $borderC;
span{
display: table-cell;
vertical-align: middle;
... ... @@ -212,7 +213,7 @@ $tableCellC:#eee;
font-size: pxToRem(28px);
color: $mainFontC;
line-height: pxToRem(88px);
border-bottom: 2px solid $borderC;
border-bottom: 1px solid $borderC;
.iconfont{
// padding-right:28rem/$pxConvertRem;
font-size: inherit;
... ... @@ -234,8 +235,8 @@ $tableCellC:#eee;
height: pxToRem(60px);
padding: pxToRem(10px) 0;
background-color: #fff;
border-top: 2px solid $borderC;
border-bottom: 2px solid $borderC;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
}
.comment-nav, .consult-nav {
... ... @@ -254,13 +255,13 @@ $tableCellC:#eee;
}
.comment-nav {
border-right: 2px solid #ccc;
border-right: 1px solid #ccc;
}
.comment-content{
.comment-content-main{
.comment-content-main{
background-color: #fff;
border-bottom: 2px solid $borderC;
border-bottom: 1px solid $borderC;
.user-name{
font-size: pxToRem(24px);
line-height: pxToRem(62px);
... ... @@ -296,20 +297,20 @@ $tableCellC:#eee;
}
.comment-content-footer{
min-height: pxToRem(88px);
text-align: center;
background-color: #fff;
border-bottom: 2px solid $borderC;
line-height: pxToRem(88px);
font-size: pxToRem(28px);
a{
color: #e0e0e0;
.iconfont{
font-size: inherit;
}
}
}
min-height: pxToRem(88px);
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: pxToRem(88px);
font-size: pxToRem(28px);
a{
color: #e0e0e0;
.iconfont{
font-size: inherit;
}
}
}
}
... ... @@ -337,39 +338,49 @@ $tableCellC:#eee;
margin-right: pxToRem(-25px);
}
}
.store-name{
font-size: pxToRem(34px);
color:$mainFontC;
.store-name{
font-size: pxToRem(34px);
color:$mainFontC;
}
.store-link{
font-size:pxToRem(28px) ;
color:$subFontC;
text-align: right;
span{
font-size: inherit;
}
.store-link{
font-size:pxToRem(28px) ;
color:$subFontC;
text-align: right;
span{
font-size: inherit;
}
}
.goods-desc{
.service{
margin-top: pxToRem(22px);
}
}
}
// .goods-desc{
// table{
// }
// }
.tips{
color:$subFontC;
font-size: pxToRem(18px);
margin-top: pxToRem(20px);
}
.materials{
.detail{
img{
display: block;
overflow: hidden;
width: pxToRem(90px);
height: pxToRem(120px);
padding-right: pxToRem(20px);
float: left;
}
display: block;
overflow: hidden;
width: pxToRem(90px);
height: pxToRem(120px);
padding-right: pxToRem(20px);
float: left;
}
.material-desc{
// float: left;
font-size: pxToRem(24px);
}
}
.material-type{
border-top: 1px solid $borderC;
padding: pxToRem(17px) 0;
}
}
.product-detail{
... ... @@ -380,6 +391,7 @@ $tableCellC:#eee;
height: pxToRem(772px);
}
}
margin-bottom: pxToRem(120px);
}
.detail-swiper{
... ... @@ -388,13 +400,76 @@ $tableCellC:#eee;
width: pxToRem(114px);
div{
text-align: center;
}
div.cell{
background-color: $tableCellC;
padding:pxToRem(15px) 0;
border: 1px solid #fff;
&.cell{
font-size: pxToRem(24px);
background-color: $tableCellC;
padding:pxToRem(15px) 0;
border: 1px solid #fff;
}
}
}
}
}
#reference-swiper-container{
.first-group{
width: pxToRem(58px);
>div{
height: pxToRem(67px);
}
}
}
.cart-bar{
position: relative;
box-sizing:border-box;
width: 100%;
height: pxToRem(120px);
position:fixed;
bottom: 0;
background-color: white;
z-index: 64;
padding:pxToRem(20px) pxToRem(28px);
text-align: center;
a{
display: inline-block;
&.num-incart{
width: pxToRem(45px);
height: pxToRem(45px);
background: url(../img/product/cart.png) no-repeat;
}
&.favorite{
width: pxToRem(34px);
height: pxToRem(32px);
background:url(../img/product/favorite.png) no-repeat;
}
&.addto-cart{
height: pxToRem(80px);
width: pxToRem(260px);
margin:0 pxToRem(100px) 0 pxToRem(128px);
color: #fff;
background-color: $basicBtnC;
font-size: pxToRem(40px);
line-height: pxToRem(80px);
text-align: center;
}
}
.num-tag{
position: absolute;
left:pxToRem(66px);
height: pxToRem(20px);
display: block;
width: pxToRem(36px);
height: pxToRem(36px);
background-color: $basicBtnC;
border-radius: 50%;
color:white;
font-size: pxToRem(24px);
}
}
}
... ...
... ... @@ -121,6 +121,7 @@
{{#goodsDescription}}
<div class="goods-desc page-block">
<img class="service" src="http://static.dev.yohobuy.com/img/product/service.png" alt="">
<h1 class="title">
{{title}}
<span class="en-title">{{enTitle}}</span>
... ... @@ -169,6 +170,7 @@
{{/list}}
</div>
</div>
<p class="tips">提示：左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
... ... @@ -199,14 +201,27 @@
<div class="swiper-container detail-swiper" id="reference-swiper-container">
<div class="swiper-wrapper">
{{#list}}
<div class="swiper-slide blue-slide" >
<div class="model-name cell">{{name}}</div>
{{#if @first}}
<div class="swiper-slide first-group" >
<div class="model-field" >{{fieldName}}</div>
<div class="first-model">
<img src="{{firstModel}}" alt="">
</div>
<div class="second-model">
<img src="{{secondModel}}" alt="">
</div>
</div>
{{^}}
<div class="swiper-slide" >
<div class="model-field cell">{{fieldName}}</div>
<div class="first-model cell">{{firstModel}}</div>
<div class="second-model cell">{{secondModel}}</div>
</div>
{{/if}}
{{/list}}
</div>
</div>
<p class="tips">提示：左滑查看完整表格信息</p>
</div>
{{/detail}}
</div>
... ... @@ -226,7 +241,9 @@
{{desc}}
</p>
</div>
<img src="{{materialType}}" alt="" class="material-type">
</div>
{{/materials}}
... ... @@ -244,6 +261,15 @@
</div>
</div>
{{/productDetail}}
{{#cartInfo}}
<div class="cart-bar">
<span class="num-tag">{{numInCart}}</span>
<a href="" class="num-incart"></a>
<a href="" class="addto-cart">加入购物车</a>
<a href="" class="favorite"></a>
</div>
{{/cartInfo}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -162,32 +162,32 @@ SHOE BQT KEN BLOCK',
'detail' =>array(
'list'=>array(
array(
'name'=>'头像',
'firstModel'=>'',
'secondModel' =>''
'fieldName'=>' ',
'firstModel'=>'http://static.dev.yohobuy.com/img/product/avatar1.png',
'secondModel' =>'http://static.dev.yohobuy.com/img/product/avatar2.png'
),
array(
'name'=>'模特',
'fieldName'=>'模特',
'firstModel'=>'Oliver',
'secondModel' =>'Jvly'
),
array(
'name'=>'身高',
'fieldName'=>'身高',
'firstModel'=>'175',
'secondModel' =>'170'
),
array(
'name'=>'体重',
'fieldName'=>'体重',
'firstModel'=>'53',
'secondModel' =>'59'
),
array(
'name'=>'三围',
'fieldName'=>'三围',
'firstModel'=>'78/70/87',
'secondModel' =>'78/70/87'
),
array(
'name'=>'吊牌尺',
'fieldName'=>'吊牌尺',
'firstModel'=>'S',
'secondModel' =>'L'
)
... ... @@ -199,7 +199,8 @@ SHOE BQT KEN BLOCK',
'title' => '商品材质',
'enTitle' =>'MATERIALS',
'img' => 'http://static.dev.yohobuy.com/img/product/material.png',
'desc' =>'用各种洗涤剂，可手洗机洗，但不宜氯漂，宜阴干，避免曝晒，以免深色衣物褪色，在日光下晾晒时，将里面朝外。浸泡时间不能太长，避免褪色，深色与浅色衣服最好请分开洗涤，避免染色。'
'desc' =>'用各种洗涤剂，可手洗机洗，但不宜氯漂，宜阴干，避免曝晒，以免深色衣物褪色，在日光下晾晒时，将里面朝外。浸泡时间不能太长，避免褪色，深色与浅色衣服最好请分开洗涤，避免染色。',
'materialType'=>'http://static.dev.yohobuy.com/img/product/material-type.png'
),
'productDetail' =>array(
... ... @@ -207,7 +208,11 @@ SHOE BQT KEN BLOCK',
'enTitle' =>'DETAILS',
'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。',
'img' =>'http://static.dev.yohobuy.com/img/product/product.png'
)
),
'cartInfo' =>array(
'numInCart' => 2
)
);
... ...