fe / YOHOBUYWAP · Commits

Go to a project

Authored by biao
Commit 39a3a97e621b4ab6edb67553cdcca4270f524b98 2 parents 6e2a33f6 a5df46dc

fix detail table style issue. code review by XWG

Inline Side-by-side
Showing 2 changed files with 21 additions and 26 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;
@@ -146,7 +141,7 @@ @@ -146,7 +141,7 @@
146 width: pxToRem(70px); 141 width: pxToRem(70px);
147 margin-top: pxToRem(55px); 142 margin-top: pxToRem(55px);
148 div{ 143 div{
149 - height: pxToRem(55px); 144 + height: pxToRem(55px);
150 .avatar { 145 .avatar {
151 display: inline-block; 146 display: inline-block;
152 width: pxToRem(40px); 147 width: pxToRem(40px);