fe / YOHOBUYPC · Commits

Go to a project

Authored by ccbikai
Commit e26bc95bbbac6425a5f893c6fcb38960a90bebd1 1 parent 2c21a46b

px2rem

Inline Side-by-side
Showing 1 changed file with 75 additions and 75 deletions
@@ -3,7 +3,7 @@ $subFontC:#b0b0b0; @@ -3,7 +3,7 @@ $subFontC:#b0b0b0;
3 $borderC:#e0e0e0; 3 $borderC:#e0e0e0;
4 $tableCellC:#eee; 4 $tableCellC:#eee;
5 5
6 -@function pxToRem($px){ 6 +@function px2rem($px){
7 @return $px*1rem/$pxConvertRem; 7 @return $px*1rem/$pxConvertRem;
8 } 8 }
9 9
@@ -15,33 +15,33 @@ $tableCellC:#eee; @@ -15,33 +15,33 @@ $tableCellC:#eee;
15 width: 100%; 15 width: 100%;
16 border-bottom: 1px solid $borderC; 16 border-bottom: 1px solid $borderC;
17 border-top: 1px solid $borderC; 17 border-top: 1px solid $borderC;
18 - padding: 0 pxToRem(28); 18 + padding: 0 px2rem(28);
19 .title{ 19 .title{
20 - min-height: pxToRem(88);  
21 - line-height: pxToRem(88); 20 + min-height: px2rem(88);
  21 + line-height: px2rem(88);
22 color: $mainFontC; 22 color: $mainFontC;
23 font:{ 23 font:{
24 - size : pxToRem(28); 24 + size : px2rem(28);
25 } 25 }
26 border-bottom: 1px solid $borderC; 26 border-bottom: 1px solid $borderC;
27 27
28 span{ 28 span{
29 color:#a0a0a0; 29 color:#a0a0a0;
30 font:{ 30 font:{
31 - size:pxToRem(18); 31 + size:px2rem(18);
32 } 32 }
33 // vertical-align: baseline; 33 // vertical-align: baseline;
34 } 34 }
35 } 35 }
36 .detail{ 36 .detail{
37 - margin-top: pxToRem(20);  
38 - margin-bottom: pxToRem(20); 37 + margin-top: px2rem(20);
  38 + margin-bottom: px2rem(20);
39 table { 39 table {
40 width: 100%; 40 width: 100%;
41 tbody td{ 41 tbody td{
42 padding: 0.4em 0.8em; 42 padding: 0.4em 0.8em;
43 border:3px solid white; 43 border:3px solid white;
44 - font-size: pxToRem(24); 44 + font-size: px2rem(24);
45 background-color: $tableCellC; 45 background-color: $tableCellC;
46 } 46 }
47 } 47 }
@@ -57,15 +57,15 @@ $tableCellC:#eee; @@ -57,15 +57,15 @@ $tableCellC:#eee;
57 // overflow: hidden; 57 // overflow: hidden;
58 .is-new-lable{ 58 .is-new-lable{
59 position: absolute; 59 position: absolute;
60 - left: pxToRem(108);  
61 - top:pxToRem(40);  
62 - height: pxToRem(35);  
63 - width:pxToRem(70); 60 + left: px2rem(108);
  61 + top:px2rem(40);
  62 + height: px2rem(35);
  63 + width:px2rem(70);
64 64
65 color:#fff; 65 color:#fff;
66 text-align: center; 66 text-align: center;
67 - font-size: pxToRem(20);  
68 - line-height: pxToRem(35); 67 + font-size: px2rem(20);
  68 + line-height: px2rem(35);
69 background-color: #7cd881; 69 background-color: #7cd881;
70 z-index: 16; 70 z-index: 16;
71 } 71 }
@@ -78,7 +78,7 @@ $tableCellC:#eee; @@ -78,7 +78,7 @@ $tableCellC:#eee;
78 78
79 .swiper-pagination{ 79 .swiper-pagination{
80 position:absolute; 80 position:absolute;
81 - bottom: pxToRem(40); 81 + bottom: px2rem(40);
82 .swiper-pagination-bullet { 82 .swiper-pagination-bullet {
83 margin-right: 2px; 83 margin-right: 2px;
84 } 84 }
@@ -90,9 +90,9 @@ $tableCellC:#eee; @@ -90,9 +90,9 @@ $tableCellC:#eee;
90 } 90 }
91 91
92 .banner-swiper { 92 .banner-swiper {
93 - min-height: pxToRem(600);  
94 - min-width: pxToRem(448);  
95 - margin: pxToRem(30) pxToRem(96); 93 + min-height: px2rem(600);
  94 + min-width: px2rem(448);
  95 + margin: px2rem(30) px2rem(96);
96 // position: relative; 96 // position: relative;
97 overflow: hidden; 97 overflow: hidden;
98 ul { 98 ul {
@@ -107,22 +107,22 @@ $tableCellC:#eee; @@ -107,22 +107,22 @@ $tableCellC:#eee;
107 107
108 108
109 .goodsName { 109 .goodsName {
110 - min-height: pxToRem(83);  
111 - font-size: pxToRem(28); 110 + min-height: px2rem(83);
  111 + font-size: px2rem(28);
112 color: #fff; 112 color: #fff;
113 - padding-left: pxToRem(25);  
114 - padding-right: pxToRem(25);  
115 - line-height: pxToRem(36); 113 + padding-left: px2rem(25);
  114 + padding-right: px2rem(25);
  115 + line-height: px2rem(36);
116 background-color: #515150; 116 background-color: #515150;
117 } 117 }
118 118
119 .goodsSubtitle{ 119 .goodsSubtitle{
120 - min-height: pxToRem(87);  
121 - font-size: pxToRem(24);  
122 - line-height: pxToRem(36); 120 + min-height: px2rem(87);
  121 + font-size: px2rem(24);
  122 + line-height: px2rem(36);
123 color:$subFontC; 123 color:$subFontC;
124 - padding-left:pxToRem(28);  
125 - padding-right:pxToRem(28); 124 + padding-left:px2rem(28);
  125 + padding-right:px2rem(28);
126 border-bottom: 1px solid $borderC; 126 border-bottom: 1px solid $borderC;
127 background-color: #f4f4f4; 127 background-color: #f4f4f4;
128 } 128 }
@@ -130,32 +130,32 @@ $tableCellC:#eee; @@ -130,32 +130,32 @@ $tableCellC:#eee;
130 .price-date{ 130 .price-date{
131 // width: 100%; 131 // width: 100%;
132 color:$subFontC; 132 color:$subFontC;
133 - min-height: pxToRem(88);  
134 - padding-left:pxToRem(28);  
135 - padding-right:pxToRem(28); 133 + min-height: px2rem(88);
  134 + padding-left:px2rem(28);
  135 + padding-right:px2rem(28);
136 border-bottom: 1px solid $borderC; 136 border-bottom: 1px solid $borderC;
137 } 137 }
138 .goodsPrice{ 138 .goodsPrice{
139 float: left; 139 float: left;
140 - font-size: pxToRem(34.59); 140 + font-size: px2rem(34.59);
141 h1{ 141 h1{
142 display: inline-block; 142 display: inline-block;
143 - line-height: pxToRem(88); 143 + line-height: px2rem(88);
144 } 144 }
145 .currentPrice{ 145 .currentPrice{
146 color:red; 146 color:red;
147 - margin-right: pxToRem(10); 147 + margin-right: px2rem(10);
148 } 148 }
149 .previousPrice{ 149 .previousPrice{
150 text-decoration:line-through; 150 text-decoration:line-through;
151 } 151 }
152 } 152 }
153 .periodOfMarket{ 153 .periodOfMarket{
154 - font-size: pxToRem(24); 154 + font-size: px2rem(24);
155 float: right; 155 float: right;
156 h1{ 156 h1{
157 display: inline-block; 157 display: inline-block;
158 - line-height: pxToRem(88); 158 + line-height: px2rem(88);
159 } 159 }
160 } 160 }
161 .goodsName, 161 .goodsName,
@@ -169,10 +169,10 @@ $tableCellC:#eee; @@ -169,10 +169,10 @@ $tableCellC:#eee;
169 } 169 }
170 .vipLevel { 170 .vipLevel {
171 display: table; 171 display: table;
172 - min-height: pxToRem(88);  
173 - padding-left:pxToRem(28);  
174 - padding-right:pxToRem(28);  
175 - font-size: pxToRem(22); 172 + min-height: px2rem(88);
  173 + padding-left:px2rem(28);
  174 + padding-right:px2rem(28);
  175 + font-size: px2rem(22);
176 color: #999999; 176 color: #999999;
177 177
178 border-bottom: 1px solid $borderC; 178 border-bottom: 1px solid $borderC;
@@ -181,26 +181,26 @@ $tableCellC:#eee; @@ -181,26 +181,26 @@ $tableCellC:#eee;
181 vertical-align: middle; 181 vertical-align: middle;
182 } 182 }
183 .vip-img{ 183 .vip-img{
184 - padding-right: pxToRem(22); 184 + padding-right: px2rem(22);
185 img{ 185 img{
186 - width: pxToRem(52);  
187 - height: pxToRem(32); 186 + width: px2rem(52);
  187 + height: px2rem(32);
188 } 188 }
189 } 189 }
190 .vip-price{ 190 .vip-price{
191 - padding-right: pxToRem(55); 191 + padding-right: px2rem(55);
192 } 192 }
193 .vip-price:last-child{ 193 .vip-price:last-child{
194 padding-right: 0; 194 padding-right: 0;
195 } 195 }
196 } 196 }
197 .goodsDiscount{ 197 .goodsDiscount{
198 - min-height: pxToRem(88);  
199 - padding-left:pxToRem(28);  
200 - padding-right:pxToRem(28);  
201 - font-size: pxToRem(28); 198 + min-height: px2rem(88);
  199 + padding-left:px2rem(28);
  200 + padding-right:px2rem(28);
  201 + font-size: px2rem(28);
202 color: $mainFontC; 202 color: $mainFontC;
203 - line-height: pxToRem(88); 203 + line-height: px2rem(88);
204 border-bottom: 1px solid $borderC; 204 border-bottom: 1px solid $borderC;
205 .iconfont{ 205 .iconfont{
206 // padding-right:28rem/$pxConvertRem; 206 // padding-right:28rem/$pxConvertRem;
@@ -212,7 +212,7 @@ $tableCellC:#eee; @@ -212,7 +212,7 @@ $tableCellC:#eee;
212 } 212 }
213 213
214 .feedback-list-page { 214 .feedback-list-page {
215 - padding-top: pxToRem(30); 215 + padding-top: px2rem(30);
216 background-color: #f0f0f0; 216 background-color: #f0f0f0;
217 217
218 .nav-tab{ 218 .nav-tab{
@@ -220,8 +220,8 @@ $tableCellC:#eee; @@ -220,8 +220,8 @@ $tableCellC:#eee;
220 } 220 }
221 221
222 .nav-tab { 222 .nav-tab {
223 - height: pxToRem(60);  
224 - padding: pxToRem(10) 0; 223 + height: px2rem(60);
  224 + padding: px2rem(10) 0;
225 background-color: #fff; 225 background-color: #fff;
226 border-top: 1px solid $borderC; 226 border-top: 1px solid $borderC;
227 border-bottom: 1px solid $borderC; 227 border-bottom: 1px solid $borderC;
@@ -231,9 +231,9 @@ $tableCellC:#eee; @@ -231,9 +231,9 @@ $tableCellC:#eee;
231 box-sizing: border-box; 231 box-sizing: border-box;
232 float: left; 232 float: left;
233 width: 50%; 233 width: 50%;
234 - height: pxToRem(60);  
235 - line-height: pxToRem(60);  
236 - font-size: pxToRem(28); 234 + height: px2rem(60);
  235 + line-height: px2rem(60);
  236 + font-size: px2rem(28);
237 text-align: center; 237 text-align: center;
238 color: #ccc; 238 color: #ccc;
239 239
@@ -251,20 +251,20 @@ $tableCellC:#eee; @@ -251,20 +251,20 @@ $tableCellC:#eee;
251 background-color: #fff; 251 background-color: #fff;
252 border-bottom: 1px solid $borderC; 252 border-bottom: 1px solid $borderC;
253 .user-name{ 253 .user-name{
254 - font-size: pxToRem(24);  
255 - line-height: pxToRem(62); 254 + font-size: px2rem(24);
  255 + line-height: px2rem(62);
256 color:$mainFontC; 256 color:$mainFontC;
257 - padding-left: pxToRem(28);  
258 - padding-right: pxToRem(18); 257 + padding-left: px2rem(28);
  258 + padding-right: px2rem(18);
259 } 259 }
260 .goods-spec, 260 .goods-spec,
261 .comment-time{ 261 .comment-time{
262 - font-size: pxToRem(24);  
263 - line-height: pxToRem(62); 262 + font-size: px2rem(24);
  263 + line-height: px2rem(62);
264 } 264 }
265 .detail-content{ 265 .detail-content{
266 - font-size: pxToRem(28);  
267 - line-height: pxToRem(36); 266 + font-size: px2rem(28);
  267 + line-height: px2rem(36);
268 } 268 }
269 .goods-spec, 269 .goods-spec,
270 .detail-content{ 270 .detail-content{
@@ -272,11 +272,11 @@ $tableCellC:#eee; @@ -272,11 +272,11 @@ $tableCellC:#eee;
272 } 272 }
273 .detail-content, 273 .detail-content,
274 .comment-time{ 274 .comment-time{
275 - padding-left: pxToRem(28); 275 + padding-left: px2rem(28);
276 276
277 } 277 }
278 .detail-content{ 278 .detail-content{
279 - padding-right: pxToRem(28); 279 + padding-right: px2rem(28);
280 280
281 } 281 }
282 .comment-time{ 282 .comment-time{
@@ -285,13 +285,13 @@ $tableCellC:#eee; @@ -285,13 +285,13 @@ $tableCellC:#eee;
285 } 285 }
286 286
287 .comment-content-footer{ 287 .comment-content-footer{
288 - min-height: pxToRem(88); 288 + min-height: px2rem(88);
289 text-align: center; 289 text-align: center;
290 background-color: #fff; 290 background-color: #fff;
291 291
292 border-bottom: 1px solid $borderC; 292 border-bottom: 1px solid $borderC;
293 - line-height: pxToRem(88);  
294 - font-size: pxToRem(28); 293 + line-height: px2rem(88);
  294 + font-size: px2rem(28);
295 a{ 295 a{
296 color: #e0e0e0; 296 color: #e0e0e0;
297 .iconfont{ 297 .iconfont{
@@ -308,7 +308,7 @@ $tableCellC:#eee; @@ -308,7 +308,7 @@ $tableCellC:#eee;
308 } 308 }
309 309
310 .enter-store{ 310 .enter-store{
311 - min-height: pxToRem(100); 311 + min-height: px2rem(100);
312 display: table; 312 display: table;
313 a{ 313 a{
314 display: table-cell; 314 display: table-cell;
@@ -319,19 +319,19 @@ $tableCellC:#eee; @@ -319,19 +319,19 @@ $tableCellC:#eee;
319 // padding-right: 35rem/$pxConvertRem; 319 // padding-right: 35rem/$pxConvertRem;
320 img{ 320 img{
321 321
322 - width: pxToRem(109);  
323 - height: pxToRem(68); 322 + width: px2rem(109);
  323 + height: px2rem(68);
324 324
325 margin-left: 0; 325 margin-left: 0;
326 - margin-right: pxToRem(-25); 326 + margin-right: px2rem(-25);
327 } 327 }
328 } 328 }
329 .store-name{ 329 .store-name{
330 - font-size: pxToRem(34); 330 + font-size: px2rem(34);
331 color:$mainFontC; 331 color:$mainFontC;
332 } 332 }
333 .store-link{ 333 .store-link{
334 - font-size:pxToRem(28) ; 334 + font-size:px2rem(28) ;
335 color:$subFontC; 335 color:$subFontC;
336 text-align: right; 336 text-align: right;
337 span{ 337 span{