fe / YOHOBUYPC · Commits

Go to a project

Authored by ccbikai
Commit e26bc95bbbac6425a5f893c6fcb38960a90bebd1 1 parent 2c21a46b

px2rem

Inline Side-by-side
Showing 1 changed file with 75 additions and 75 deletions
... ... @@ -3,7 +3,7 @@ $subFontC:#b0b0b0;
$borderC:#e0e0e0;
$tableCellC:#eee;
@function pxToRem($px){
@function px2rem($px){
@return $px*1rem/$pxConvertRem;
}
... ... @@ -15,33 +15,33 @@ $tableCellC:#eee;
width: 100%;
border-bottom: 1px solid $borderC;
border-top: 1px solid $borderC;
padding: 0 pxToRem(28);
padding: 0 px2rem(28);
.title{
min-height: pxToRem(88);
line-height: pxToRem(88);
min-height: px2rem(88);
line-height: px2rem(88);
color: $mainFontC;
font:{
size : pxToRem(28);
size : px2rem(28);
}
border-bottom: 1px solid $borderC;
span{
color:#a0a0a0;
font:{
size:pxToRem(18);
size:px2rem(18);
}
// vertical-align: baseline;
}
}
.detail{
margin-top: pxToRem(20);
margin-bottom: pxToRem(20);
margin-top: px2rem(20);
margin-bottom: px2rem(20);
table {
width: 100%;
tbody td{
padding: 0.4em 0.8em;
border:3px solid white;
font-size: pxToRem(24);
font-size: px2rem(24);
background-color: $tableCellC;
}
}
... ... @@ -57,15 +57,15 @@ $tableCellC:#eee;
// overflow: hidden;
.is-new-lable{
position: absolute;
left: pxToRem(108);
top:pxToRem(40);
height: pxToRem(35);
width:pxToRem(70);
left: px2rem(108);
top:px2rem(40);
height: px2rem(35);
width:px2rem(70);
color:#fff;
text-align: center;
font-size: pxToRem(20);
line-height: pxToRem(35);
font-size: px2rem(20);
line-height: px2rem(35);
background-color: #7cd881;
z-index: 16;
}
... ... @@ -78,7 +78,7 @@ $tableCellC:#eee;
.swiper-pagination{
position:absolute;
bottom: pxToRem(40);
bottom: px2rem(40);
.swiper-pagination-bullet {
margin-right: 2px;
}
... ... @@ -90,9 +90,9 @@ $tableCellC:#eee;
}
.banner-swiper {
min-height: pxToRem(600);
min-width: pxToRem(448);
margin: pxToRem(30) pxToRem(96);
min-height: px2rem(600);
min-width: px2rem(448);
margin: px2rem(30) px2rem(96);
// position: relative;
overflow: hidden;
ul {
... ... @@ -107,22 +107,22 @@ $tableCellC:#eee;
.goodsName {
min-height: pxToRem(83);
font-size: pxToRem(28);
min-height: px2rem(83);
font-size: px2rem(28);
color: #fff;
padding-left: pxToRem(25);
padding-right: pxToRem(25);
line-height: pxToRem(36);
padding-left: px2rem(25);
padding-right: px2rem(25);
line-height: px2rem(36);
background-color: #515150;
}
.goodsSubtitle{
min-height: pxToRem(87);
font-size: pxToRem(24);
line-height: pxToRem(36);
min-height: px2rem(87);
font-size: px2rem(24);
line-height: px2rem(36);
color:$subFontC;
padding-left:pxToRem(28);
padding-right:pxToRem(28);
padding-left:px2rem(28);
padding-right:px2rem(28);
border-bottom: 1px solid $borderC;
background-color: #f4f4f4;
}
... ... @@ -130,32 +130,32 @@ $tableCellC:#eee;
.price-date{
// width: 100%;
color:$subFontC;
min-height: pxToRem(88);
padding-left:pxToRem(28);
padding-right:pxToRem(28);
min-height: px2rem(88);
padding-left:px2rem(28);
padding-right:px2rem(28);
border-bottom: 1px solid $borderC;
}
.goodsPrice{
float: left;
font-size: pxToRem(34.59);
font-size: px2rem(34.59);
h1{
display: inline-block;
line-height: pxToRem(88);
line-height: px2rem(88);
}
.currentPrice{
color:red;
margin-right: pxToRem(10);
margin-right: px2rem(10);
}
.previousPrice{
text-decoration:line-through;
}
}
.periodOfMarket{
font-size: pxToRem(24);
font-size: px2rem(24);
float: right;
h1{
display: inline-block;
line-height: pxToRem(88);
line-height: px2rem(88);
}
}
.goodsName,
... ... @@ -169,10 +169,10 @@ $tableCellC:#eee;
}
.vipLevel {
display: table;
min-height: pxToRem(88);
padding-left:pxToRem(28);
padding-right:pxToRem(28);
font-size: pxToRem(22);
min-height: px2rem(88);
padding-left:px2rem(28);
padding-right:px2rem(28);
font-size: px2rem(22);
color: #999999;
border-bottom: 1px solid $borderC;
... ... @@ -181,26 +181,26 @@ $tableCellC:#eee;
vertical-align: middle;
}
.vip-img{
padding-right: pxToRem(22);
padding-right: px2rem(22);
img{
width: pxToRem(52);
height: pxToRem(32);
width: px2rem(52);
height: px2rem(32);
}
}
.vip-price{
padding-right: pxToRem(55);
padding-right: px2rem(55);
}
.vip-price:last-child{
padding-right: 0;
}
}
.goodsDiscount{
min-height: pxToRem(88);
padding-left:pxToRem(28);
padding-right:pxToRem(28);
font-size: pxToRem(28);
min-height: px2rem(88);
padding-left:px2rem(28);
padding-right:px2rem(28);
font-size: px2rem(28);
color: $mainFontC;
line-height: pxToRem(88);
line-height: px2rem(88);
border-bottom: 1px solid $borderC;
.iconfont{
// padding-right:28rem/$pxConvertRem;
... ... @@ -212,7 +212,7 @@ $tableCellC:#eee;
}
.feedback-list-page {
padding-top: pxToRem(30);
padding-top: px2rem(30);
background-color: #f0f0f0;
.nav-tab{
... ... @@ -220,8 +220,8 @@ $tableCellC:#eee;
}
.nav-tab {
height: pxToRem(60);
padding: pxToRem(10) 0;
height: px2rem(60);
padding: px2rem(10) 0;
background-color: #fff;
border-top: 1px solid $borderC;
border-bottom: 1px solid $borderC;
... ... @@ -231,9 +231,9 @@ $tableCellC:#eee;
box-sizing: border-box;
float: left;
width: 50%;
height: pxToRem(60);
line-height: pxToRem(60);
font-size: pxToRem(28);
height: px2rem(60);
line-height: px2rem(60);
font-size: px2rem(28);
text-align: center;
color: #ccc;
... ... @@ -251,20 +251,20 @@ $tableCellC:#eee;
background-color: #fff;
border-bottom: 1px solid $borderC;
.user-name{
font-size: pxToRem(24);
line-height: pxToRem(62);
font-size: px2rem(24);
line-height: px2rem(62);
color:$mainFontC;
padding-left: pxToRem(28);
padding-right: pxToRem(18);
padding-left: px2rem(28);
padding-right: px2rem(18);
}
.goods-spec,
.comment-time{
font-size: pxToRem(24);
line-height: pxToRem(62);
font-size: px2rem(24);
line-height: px2rem(62);
}
.detail-content{
font-size: pxToRem(28);
line-height: pxToRem(36);
font-size: px2rem(28);
line-height: px2rem(36);
}
.goods-spec,
.detail-content{
... ... @@ -272,11 +272,11 @@ $tableCellC:#eee;
}
.detail-content,
.comment-time{
padding-left: pxToRem(28);
padding-left: px2rem(28);
}
.detail-content{
padding-right: pxToRem(28);
padding-right: px2rem(28);
}
.comment-time{
... ... @@ -285,13 +285,13 @@ $tableCellC:#eee;
}
.comment-content-footer{
min-height: pxToRem(88);
min-height: px2rem(88);
text-align: center;
background-color: #fff;
border-bottom: 1px solid $borderC;
line-height: pxToRem(88);
font-size: pxToRem(28);
line-height: px2rem(88);
font-size: px2rem(28);
a{
color: #e0e0e0;
.iconfont{
... ... @@ -308,7 +308,7 @@ $tableCellC:#eee;
}
.enter-store{
min-height: pxToRem(100);
min-height: px2rem(100);
display: table;
a{
display: table-cell;
... ... @@ -319,19 +319,19 @@ $tableCellC:#eee;
// padding-right: 35rem/$pxConvertRem;
img{
width: pxToRem(109);
height: pxToRem(68);
width: px2rem(109);
height: px2rem(68);
margin-left: 0;
margin-right: pxToRem(-25);
margin-right: px2rem(-25);
}
}
.store-name{
font-size: pxToRem(34);
font-size: px2rem(34);
color:$mainFontC;
}
.store-link{
font-size:pxToRem(28) ;
font-size:px2rem(28) ;
color:$subFontC;
text-align: right;
span{
... ...