fix detail table style issue. code review by XWG
Showing
2 changed files
with
20 additions
and
25 deletions
@@ -38,14 +38,14 @@ $basicBtnC:#eb0313; | @@ -38,14 +38,14 @@ $basicBtnC:#eb0313; | ||
38 | .column { | 38 | .column { |
39 | box-sizing: border-box; | 39 | box-sizing: border-box; |
40 | padding: pxToRem(20px) pxToRem(12px); | 40 | padding: pxToRem(20px) pxToRem(12px); |
41 | - width: 50%; | ||
42 | - border-bottom: 1px solid #fff; | ||
43 | - border-right: 1px solid #fff; | 41 | + //width: 50%; |
42 | + border-bottom: pxToRem(4px) solid #fff; | ||
43 | + border-right: pxToRem(4px) solid #fff; | ||
44 | font-size: pxToRem(24px); | 44 | font-size: pxToRem(24px); |
45 | background-color: $tableCellC; | 45 | background-color: $tableCellC; |
46 | - float: left; | ||
47 | display: flex; | 46 | display: flex; |
48 | align-items: center; | 47 | align-items: center; |
48 | + flex-basis: 49.9%; | ||
49 | } | 49 | } |
50 | } | 50 | } |
51 | } | 51 | } |
@@ -40,39 +40,34 @@ | @@ -40,39 +40,34 @@ | ||
40 | } | 40 | } |
41 | .detail { | 41 | .detail { |
42 | .material-item{ | 42 | .material-item{ |
43 | - position: relative; | ||
44 | - min-height: pxToRem(136px); | ||
45 | margin: pxToRem(10px) 0; | 43 | margin: pxToRem(10px) 0; |
46 | - text-align: center; | ||
47 | - display: flex; | ||
48 | - align-items: center; | 44 | + @include flexbox(( |
45 | + display: flex, | ||
46 | + align-items: center | ||
47 | + )); | ||
49 | 48 | ||
50 | - // width: 100%; | ||
51 | - // border-bottom:1px solid $borderC; | ||
52 | img { | 49 | img { |
53 | - //position:absolute; | ||
54 | - //top:0; | ||
55 | - //bottom:0; | ||
56 | - //left:0; | ||
57 | - //margin:auto; | ||
58 | - //width: pxToRem(90px); | ||
59 | - //height: auto; | ||
60 | - //padding-right: pxToRem(20px); | 50 | + margin: 0; |
61 | } | 51 | } |
62 | .material-image { | 52 | .material-image { |
63 | - display: inline-block; | ||
64 | - width: 23%; | 53 | + @include flexbox(( |
54 | + display: flex, | ||
55 | + flex-basis: 23%, | ||
56 | + justify-content: center | ||
57 | + )); | ||
65 | } | 58 | } |
66 | .material-desc { | 59 | .material-desc { |
67 | - //padding-left:pxToRem(120px); | ||
68 | font-size: pxToRem(24px); | 60 | font-size: pxToRem(24px); |
61 | + box-sizing: border-box; | ||
69 | text-align: left; | 62 | text-align: left; |
70 | - display: inline-block; | ||
71 | - width: 75%; | ||
72 | padding-left: 2%; | 63 | padding-left: 2%; |
73 | height: auto; | 64 | height: auto; |
74 | - line-height: pxToRem(40px); | 65 | + line-height: pxToRem(38px); |
75 | color: #4b4b4b; | 66 | color: #4b4b4b; |
67 | + @include flexbox(( | ||
68 | + display: flex, | ||
69 | + flex-basis: 76.9% | ||
70 | + )); | ||
76 | } | 71 | } |
77 | &:last-child{ | 72 | &:last-child{ |
78 | border-bottom: none; | 73 | border-bottom: none; |
-
Please register or login to post a comment