fe / YOHOBUYPC · Commits

Go to a project

Authored by biao
Commit 633be66a43c58f0024246a05f1a6b1d20999fe55 1 parent abf85801

update flex box style for QQX5. code review by XWG

Inline Side-by-side
Showing 3 changed files with 51 additions and 12 deletions
@@ -9,23 +9,30 @@ @@ -9,23 +9,30 @@
9 border: 1px solid #eee; 9 border: 1px solid #eee;
10 border-radius: 10rem / $pxConvertRem; 10 border-radius: 10rem / $pxConvertRem;
11 padding: (12rem / $pxConvertRem) (20rem / $pxConvertRem); 11 padding: (12rem / $pxConvertRem) (20rem / $pxConvertRem);
12 - display: flex;  
13 - align-items: center;  
14 margin-bottom: 20rem / $pxConvertRem; 12 margin-bottom: 20rem / $pxConvertRem;
15 13
  14 + @include flexbox((display: box, box-align: center), $version: 1);
  15 +
  16 + @include flexbox((display: flex, align-items: center));
  17 +
16 > div { 18 > div {
17 min-height: 40rem / $pxConvertRem; 19 min-height: 40rem / $pxConvertRem;
18 - display: flex;  
19 - align-items: center; 20 +
  21 + @include flexbox((box-flex: 1, display: box, bax-align: center), $version: 1);
  22 +
  23 + @include flexbox((display: flex, align-items: center));
20 } 24 }
21 25
22 .icon { 26 .icon {
23 width: 15%; 27 width: 15%;
24 28
  29 + @include flexbox((flex-basis: 15%));
  30 +
25 img { 31 img {
26 width: 60rem / $pxConvertRem; 32 width: 60rem / $pxConvertRem;
27 margin: 0; 33 margin: 0;
28 } 34 }
  35 +
29 > div { 36 > div {
30 width: 60rem / $pxConvertRem; 37 width: 60rem / $pxConvertRem;
31 height: 60rem / $pxConvertRem; 38 height: 60rem / $pxConvertRem;
@@ -39,19 +46,29 @@ @@ -39,19 +46,29 @@
39 46
40 .app { 47 .app {
41 width: 40%; 48 width: 40%;
  49 +
  50 + @include flexbox((flex-basis: 40%));
  51 +
42 font-size: 32rem / $pxConvertRem; 52 font-size: 32rem / $pxConvertRem;
43 color: #414141; 53 color: #414141;
44 } 54 }
45 55
46 .hint { 56 .hint {
47 width: 40%; 57 width: 40%;
  58 +
  59 + @include flexbox((flex-basis: 40%));
  60 +
48 font-size: 24rem / $pxConvertRem; 61 font-size: 24rem / $pxConvertRem;
49 color: #4b4b4b; 62 color: #4b4b4b;
50 } 63 }
51 64
52 .iconfont { 65 .iconfont {
53 width: 5%; 66 width: 5%;
54 - justify-content: flex-end; 67 +
  68 + @include flexbox((box-pack: end), $version: 1);
  69 +
  70 + @include flexbox((flex-basis: 5%, justify-content: flex-end));
  71 +
55 color: #e0e0e0; 72 color: #e0e0e0;
56 font-size: 28rem / $pxConvertRem; 73 font-size: 28rem / $pxConvertRem;
57 } 74 }
@@ -33,6 +33,11 @@ $basicBtnC:#eb0313; @@ -33,6 +33,11 @@ $basicBtnC:#eb0313;
33 line-height: pxToRem(36px); 33 line-height: pxToRem(36px);
34 &.table { 34 &.table {
35 @include flexbox(( 35 @include flexbox((
  36 + display: box,
  37 + box-lines: multiple,
  38 + box-pack: start
  39 + ), $version: 1);
  40 + @include flexbox((
36 display: flex, 41 display: flex,
37 flex-wrap: wrap, 42 flex-wrap: wrap,
38 justify-content: flex-start 43 justify-content: flex-start
@@ -42,11 +47,17 @@ $basicBtnC:#eb0313; @@ -42,11 +47,17 @@ $basicBtnC:#eb0313;
42 box-sizing: border-box; 47 box-sizing: border-box;
43 //padding: pxToRem(20px) pxToRem(12px); 48 //padding: pxToRem(20px) pxToRem(12px);
44 padding: 4% 3%; 49 padding: 4% 3%;
45 - //width: 50%; 50 + width: 49.9%;
46 border-bottom: pxToRem(4px) solid #fff; 51 border-bottom: pxToRem(4px) solid #fff;
47 border-right: pxToRem(4px) solid #fff; 52 border-right: pxToRem(4px) solid #fff;
48 font-size: pxToRem(24px); 53 font-size: pxToRem(24px);
49 background-color: $tableCellC; 54 background-color: $tableCellC;
  55 + word-wrap: break-word;
  56 + @include flexbox((
  57 + box-flex: 1.0,
  58 + display: box,
  59 + box-align: center
  60 + ), $version: 1);
50 @include flexbox(( 61 @include flexbox((
51 display: flex, 62 display: flex,
52 align-items: center, 63 align-items: center,
@@ -2,12 +2,7 @@ @@ -2,12 +2,7 @@
2 .goods-desc { 2 .goods-desc {
3 padding-bottom: pxToRem(20px); 3 padding-bottom: pxToRem(20px);
4 padding-top: pxToRem(20px); 4 padding-top: pxToRem(20px);
5 - &.page-block{  
6 - .table{  
7 - display: flex;  
8 - flex-wrap: wrap;  
9 - }  
10 - } 5 +
11 .service { 6 .service {
12 width: pxToRem(494px); 7 width: pxToRem(494px);
13 height: pxToRem(28px); 8 height: pxToRem(28px);
@@ -48,6 +43,10 @@ @@ -48,6 +43,10 @@
48 .material-item{ 43 .material-item{
49 margin: pxToRem(10px) 0; 44 margin: pxToRem(10px) 0;
50 @include flexbox(( 45 @include flexbox((
  46 + display: box,
  47 + box-align: center
  48 + ), $version: 1);
  49 + @include flexbox((
51 display: flex, 50 display: flex,
52 align-items: center 51 align-items: center
53 )); 52 ));
@@ -56,6 +55,12 @@ @@ -56,6 +55,12 @@
56 margin: 0; 55 margin: 0;
57 } 56 }
58 .material-image { 57 .material-image {
  58 + width: 23%;
  59 + @include flexbox((
  60 + box-flex: 1.0,
  61 + display: box,
  62 + box-pack: center
  63 + ), $version: 1);
59 @include flexbox(( 64 @include flexbox((
60 display: flex, 65 display: flex,
61 flex-basis: 23%, 66 flex-basis: 23%,
@@ -70,6 +75,12 @@ @@ -70,6 +75,12 @@
70 height: auto; 75 height: auto;
71 line-height: pxToRem(38px); 76 line-height: pxToRem(38px);
72 color: #4b4b4b; 77 color: #4b4b4b;
  78 + word-wrap: break-word;
  79 + width: 76.9;
  80 + @include flexbox((
  81 + box-flex: 1.0,
  82 + display: box
  83 + ), $version: 1);
73 @include flexbox(( 84 @include flexbox((
74 display: flex, 85 display: flex,
75 flex-basis: 76.9% 86 flex-basis: 76.9%