Authored by biao

update flex box style for QQX5. code review by XWG

... ... @@ -9,23 +9,30 @@
border: 1px solid #eee;
border-radius: 10rem / $pxConvertRem;
padding: (12rem / $pxConvertRem) (20rem / $pxConvertRem);
display: flex;
align-items: center;
margin-bottom: 20rem / $pxConvertRem;
@include flexbox((display: box, box-align: center), $version: 1);
@include flexbox((display: flex, align-items: center));
> div {
min-height: 40rem / $pxConvertRem;
display: flex;
align-items: center;
@include flexbox((box-flex: 1, display: box, bax-align: center), $version: 1);
@include flexbox((display: flex, align-items: center));
}
.icon {
width: 15%;
@include flexbox((flex-basis: 15%));
img {
width: 60rem / $pxConvertRem;
margin: 0;
}
> div {
width: 60rem / $pxConvertRem;
height: 60rem / $pxConvertRem;
... ... @@ -39,19 +46,29 @@
.app {
width: 40%;
@include flexbox((flex-basis: 40%));
font-size: 32rem / $pxConvertRem;
color: #414141;
}
.hint {
width: 40%;
@include flexbox((flex-basis: 40%));
font-size: 24rem / $pxConvertRem;
color: #4b4b4b;
}
.iconfont {
width: 5%;
justify-content: flex-end;
@include flexbox((box-pack: end), $version: 1);
@include flexbox((flex-basis: 5%, justify-content: flex-end));
color: #e0e0e0;
font-size: 28rem / $pxConvertRem;
}
... ...
... ... @@ -33,6 +33,11 @@ $basicBtnC:#eb0313;
line-height: pxToRem(36px);
&.table {
@include flexbox((
display: box,
box-lines: multiple,
box-pack: start
), $version: 1);
@include flexbox((
display: flex,
flex-wrap: wrap,
justify-content: flex-start
... ... @@ -42,11 +47,17 @@ $basicBtnC:#eb0313;
box-sizing: border-box;
//padding: pxToRem(20px) pxToRem(12px);
padding: 4% 3%;
//width: 50%;
width: 49.9%;
border-bottom: pxToRem(4px) solid #fff;
border-right: pxToRem(4px) solid #fff;
font-size: pxToRem(24px);
background-color: $tableCellC;
word-wrap: break-word;
@include flexbox((
box-flex: 1.0,
display: box,
box-align: center
), $version: 1);
@include flexbox((
display: flex,
align-items: center,
... ...
... ... @@ -2,12 +2,7 @@
.goods-desc {
padding-bottom: pxToRem(20px);
padding-top: pxToRem(20px);
&.page-block{
.table{
display: flex;
flex-wrap: wrap;
}
}
.service {
width: pxToRem(494px);
height: pxToRem(28px);
... ... @@ -48,6 +43,10 @@
.material-item{
margin: pxToRem(10px) 0;
@include flexbox((
display: box,
box-align: center
), $version: 1);
@include flexbox((
display: flex,
align-items: center
));
... ... @@ -56,6 +55,12 @@
margin: 0;
}
.material-image {
width: 23%;
@include flexbox((
box-flex: 1.0,
display: box,
box-pack: center
), $version: 1);
@include flexbox((
display: flex,
flex-basis: 23%,
... ... @@ -70,6 +75,12 @@
height: auto;
line-height: pxToRem(38px);
color: #4b4b4b;
word-wrap: break-word;
width: 76.9;
@include flexbox((
box-flex: 1.0,
display: box
), $version: 1);
@include flexbox((
display: flex,
flex-basis: 76.9%
... ...