Merge branch 'feature/detailFix' into 'develop'
Feature/detail fix 样式修复 See merge request !9
Showing
4 changed files
with
33 additions
and
27 deletions
| @@ -38,7 +38,7 @@ $basicBtnC:#eb0313; | @@ -38,7 +38,7 @@ $basicBtnC:#eb0313; | ||
| 38 | .column { | 38 | .column { |
| 39 | box-sizing: border-box; | 39 | box-sizing: border-box; |
| 40 | display: table-cell; | 40 | display: table-cell; |
| 41 | - padding: pxToRem(16px) pxToRem(12px); | 41 | + padding: pxToRem(20px) pxToRem(12px); |
| 42 | width: 50%; | 42 | width: 50%; |
| 43 | border-bottom: 1px solid #fff; | 43 | border-bottom: 1px solid #fff; |
| 44 | border-right: 1px solid #fff; | 44 | border-right: 1px solid #fff; |
| @@ -100,8 +100,10 @@ $basicBtnC:#eb0313; | @@ -100,8 +100,10 @@ $basicBtnC:#eb0313; | ||
| 100 | margin-left: .5px; | 100 | margin-left: .5px; |
| 101 | font-size: pxToRem(18px); | 101 | font-size: pxToRem(18px); |
| 102 | text-align: center; | 102 | text-align: center; |
| 103 | - line-height: pxToRem(30px); | ||
| 104 | - padding: 0 8px; | 103 | + line-height: pxToRem(24px); |
| 104 | + position: relative; | ||
| 105 | + vertical-align: middle; | ||
| 106 | + padding:0 5px; | ||
| 105 | } | 107 | } |
| 106 | .new-tag { | 108 | .new-tag { |
| 107 | background-color: #78dc7e; | 109 | background-color: #78dc7e; |
| @@ -253,6 +255,7 @@ $basicBtnC:#eb0313; | @@ -253,6 +255,7 @@ $basicBtnC:#eb0313; | ||
| 253 | vertical-align: middle; | 255 | vertical-align: middle; |
| 254 | display: inline-block; | 256 | display: inline-block; |
| 255 | line-height: pxToRem(88px); | 257 | line-height: pxToRem(88px); |
| 258 | + padding-left: pxToRem(8px); | ||
| 256 | } | 259 | } |
| 257 | .vip-img { | 260 | .vip-img { |
| 258 | width: pxToRem(53px); | 261 | width: pxToRem(53px); |
| @@ -394,9 +397,10 @@ $basicBtnC:#eb0313; | @@ -394,9 +397,10 @@ $basicBtnC:#eb0313; | ||
| 394 | // .recommend-for-you { | 397 | // .recommend-for-you { |
| 395 | // margin-bottom: pxToRem(30px); | 398 | // margin-bottom: pxToRem(30px); |
| 396 | // } | 399 | // } |
| 400 | + .yoho-tip{ | ||
| 401 | + top:40%; | ||
| 402 | + } | ||
| 397 | } | 403 | } |
| 398 | -.bottom-blank{ | ||
| 399 | - height: pxToRem(120px); | ||
| 400 | -} | 404 | + |
| 401 | @import "comments-consults"; | 405 | @import "comments-consults"; |
| 402 | @import "product-description"; | 406 | @import "product-description"; |
| @@ -44,27 +44,24 @@ | @@ -44,27 +44,24 @@ | ||
| 44 | min-height: pxToRem(136px); | 44 | min-height: pxToRem(136px); |
| 45 | margin: pxToRem(10px) 0; | 45 | margin: pxToRem(10px) 0; |
| 46 | text-align: center; | 46 | text-align: center; |
| 47 | + display: flex; | ||
| 48 | + align-items: center; | ||
| 47 | 49 | ||
| 48 | // width: 100%; | 50 | // width: 100%; |
| 49 | // border-bottom:1px solid $borderC; | 51 | // border-bottom:1px solid $borderC; |
| 50 | img { | 52 | img { |
| 51 | - position:absolute; | ||
| 52 | - top:0; | ||
| 53 | - bottom:0; | ||
| 54 | - left:0; | ||
| 55 | - margin:auto; | 53 | + //position:absolute; |
| 54 | + //top:0; | ||
| 55 | + //bottom:0; | ||
| 56 | + //left:0; | ||
| 57 | + //margin:auto; | ||
| 56 | //width: pxToRem(90px); | 58 | //width: pxToRem(90px); |
| 57 | - height: auto; | ||
| 58 | - padding-right: pxToRem(20px); | 59 | + //height: auto; |
| 60 | + //padding-right: pxToRem(20px); | ||
| 59 | } | 61 | } |
| 60 | .material-image { | 62 | .material-image { |
| 61 | display: inline-block; | 63 | display: inline-block; |
| 62 | width: 23%; | 64 | width: 23%; |
| 63 | - min-height: pxToRem(136px); | ||
| 64 | - float: left; | ||
| 65 | - //background-size: 100%; | ||
| 66 | - background-position-x: center; | ||
| 67 | - background-repeat: no-repeat; | ||
| 68 | } | 65 | } |
| 69 | .material-desc { | 66 | .material-desc { |
| 70 | //padding-left:pxToRem(120px); | 67 | //padding-left:pxToRem(120px); |
| @@ -84,17 +81,17 @@ | @@ -84,17 +81,17 @@ | ||
| 84 | } | 81 | } |
| 85 | } | 82 | } |
| 86 | .wash-tips{ | 83 | .wash-tips{ |
| 87 | - padding-top:pxToRem(18px); | 84 | + padding-top:pxToRem(20px); |
| 88 | &.page-block{ | 85 | &.page-block{ |
| 89 | // border-top: 0px; | 86 | // border-top: 0px; |
| 90 | padding-left: pxToRem(15px); | 87 | padding-left: pxToRem(15px); |
| 91 | padding-right: pxToRem(15px); | 88 | padding-right: pxToRem(15px); |
| 92 | } | 89 | } |
| 93 | - // padding-bottom:pxToRem(18px); | ||
| 94 | .tip{ | 90 | .tip{ |
| 95 | display: inline-block; | 91 | display: inline-block; |
| 96 | width: 16.6%; | 92 | width: 16.6%; |
| 97 | float:left; | 93 | float:left; |
| 94 | + //min-height: pxToRem(120px); | ||
| 98 | // margin-right: pxToRem(24px); | 95 | // margin-right: pxToRem(24px); |
| 99 | img{ | 96 | img{ |
| 100 | width: pxToRem(48px); | 97 | width: pxToRem(48px); |
| @@ -106,7 +103,9 @@ | @@ -106,7 +103,9 @@ | ||
| 106 | padding: 0 pxToRem(13px); | 103 | padding: 0 pxToRem(13px); |
| 107 | font-size: pxToRem(18px); | 104 | font-size: pxToRem(18px); |
| 108 | line-height: pxToRem(22px); | 105 | line-height: pxToRem(22px); |
| 109 | - margin-bottom: pxToRem(18px); | 106 | + //margin-bottom: pxToRem(18px); |
| 107 | + min-height: pxToRem(44px); | ||
| 108 | + text-align:center; | ||
| 110 | } | 109 | } |
| 111 | } | 110 | } |
| 112 | 111 | ||
| @@ -146,11 +145,12 @@ | @@ -146,11 +145,12 @@ | ||
| 146 | width: pxToRem(70px); | 145 | width: pxToRem(70px); |
| 147 | margin-top: pxToRem(66px); | 146 | margin-top: pxToRem(66px); |
| 148 | .avatar { | 147 | .avatar { |
| 149 | - line-height: pxToRem(40px); | 148 | + // line-height: pxToRem(40px); |
| 149 | + display: inline-block; | ||
| 150 | width: pxToRem(40px); | 150 | width: pxToRem(40px); |
| 151 | border-radius: 50%; | 151 | border-radius: 50%; |
| 152 | height: pxToRem(40px); | 152 | height: pxToRem(40px); |
| 153 | - margin: pxToRem(18px) 0; | 153 | + margin: pxToRem(12px) 0; |
| 154 | } | 154 | } |
| 155 | } | 155 | } |
| 156 | } | 156 | } |
| @@ -2,10 +2,10 @@ | @@ -2,10 +2,10 @@ | ||
| 2 | <div class="good-detail-page yoho-page"> | 2 | <div class="good-detail-page yoho-page"> |
| 3 | <div class="banner-container"> | 3 | <div class="banner-container"> |
| 4 | <div class="tag-container"> | 4 | <div class="tag-container"> |
| 5 | - <!-- <p class="good-tag new-tag">NEW</p> --> | 5 | + <p class="good-tag new-tag">NEW</p> |
| 6 | {{# tags}} | 6 | {{# tags}} |
| 7 | {{# is_new}} | 7 | {{# is_new}} |
| 8 | - <p class="good-tag new-tag">NEW</p> | 8 | + <!-- <p class="good-tag new-tag">NEW</p> --> |
| 9 | {{/ is_new}} | 9 | {{/ is_new}} |
| 10 | {{# is_advance}} | 10 | {{# is_advance}} |
| 11 | <p class="good-tag renew-tag">再到着</p> | 11 | <p class="good-tag renew-tag">再到着</p> |
| @@ -56,7 +56,7 @@ | @@ -56,7 +56,7 @@ | ||
| 56 | <ul class="vip-level clearfix"> | 56 | <ul class="vip-level clearfix"> |
| 57 | {{# list}} | 57 | {{# list}} |
| 58 | <li class="icons-item"> | 58 | <li class="icons-item"> |
| 59 | - <span class="vip-img" style="background-size:cover;"> | 59 | + <span class="vip-img" style="background-size:contain;"> |
| 60 | </span> | 60 | </span> |
| 61 | <span class="vip-price">{{text}}</span> | 61 | <span class="vip-price">{{text}}</span> |
| 62 | </li> | 62 | </li> |
| @@ -105,7 +105,9 @@ | @@ -105,7 +105,9 @@ | ||
| 105 | <p class="material-desc"> | 105 | <p class="material-desc"> |
| 106 | {{desc}} | 106 | {{desc}} |
| 107 | </p>--> | 107 | </p>--> |
| 108 | - <div class="material-image" style="background-image:url({{img}})"></div> | 108 | + <div class="material-image"> |
| 109 | + <img src="{{img}}" alt="材质图"> | ||
| 110 | + </div> | ||
| 109 | <div class="material-desc"> | 111 | <div class="material-desc"> |
| 110 | {{desc}} | 112 | {{desc}} |
| 111 | </div> | 113 | </div> |
-
Please register or login to post a comment