wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by Lynnic
Commit 7229af7cecf40861c6fb3987c1f38ac3da2faef9 1 parent 2c21a46b

update

Inline Side-by-side
Showing 4 changed files with 129 additions and 95 deletions
1 $mainFontC:#444444; 1 $mainFontC:#444444;
2 $subFontC:#b0b0b0; 2 $subFontC:#b0b0b0;
3 -$borderC:#e0e0e0; 3 +$borderC:#b0b0b0;
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
@@ -13,35 +13,37 @@ $tableCellC:#eee; @@ -13,35 +13,37 @@ $tableCellC:#eee;
13 .page-block{ 13 .page-block{
14 box-sizing:border-box; 14 box-sizing:border-box;
15 width: 100%; 15 width: 100%;
16 - border-bottom: 1px solid $borderC;  
17 - border-top: 1px solid $borderC;  
18 - padding: 0 pxToRem(28); 16 + border-bottom: 2px solid $borderC;
  17 + border-top: 2px solid $borderC;
  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: 2px 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 + font-size: px2rem(24);
  40 + line-height: px2rem(36);
39 table { 41 table {
40 width: 100%; 42 width: 100%;
41 tbody td{ 43 tbody td{
42 padding: 0.4em 0.8em; 44 padding: 0.4em 0.8em;
43 border:3px solid white; 45 border:3px solid white;
44 - font-size: pxToRem(24); 46 + font-size: px2rem(24);
45 background-color: $tableCellC; 47 background-color: $tableCellC;
46 } 48 }
47 } 49 }
@@ -57,15 +59,15 @@ $tableCellC:#eee; @@ -57,15 +59,15 @@ $tableCellC:#eee;
57 // overflow: hidden; 59 // overflow: hidden;
58 .is-new-lable{ 60 .is-new-lable{
59 position: absolute; 61 position: absolute;
60 - left: pxToRem(108);  
61 - top:pxToRem(40);  
62 - height: pxToRem(35);  
63 - width:pxToRem(70); 62 + left: px2rem(108);
  63 + top:px2rem(40);
  64 + height: px2rem(35);
  65 + width:px2rem(70);
64 66
65 color:#fff; 67 color:#fff;
66 text-align: center; 68 text-align: center;
67 - font-size: pxToRem(20);  
68 - line-height: pxToRem(35); 69 + font-size: px2rem(20);
  70 + line-height: px2rem(35);
69 background-color: #7cd881; 71 background-color: #7cd881;
70 z-index: 16; 72 z-index: 16;
71 } 73 }
@@ -78,7 +80,7 @@ $tableCellC:#eee; @@ -78,7 +80,7 @@ $tableCellC:#eee;
78 80
79 .swiper-pagination{ 81 .swiper-pagination{
80 position:absolute; 82 position:absolute;
81 - bottom: pxToRem(40); 83 + bottom: px2rem(40);
82 .swiper-pagination-bullet { 84 .swiper-pagination-bullet {
83 margin-right: 2px; 85 margin-right: 2px;
84 } 86 }
@@ -90,9 +92,9 @@ $tableCellC:#eee; @@ -90,9 +92,9 @@ $tableCellC:#eee;
90 } 92 }
91 93
92 .banner-swiper { 94 .banner-swiper {
93 - min-height: pxToRem(600);  
94 - min-width: pxToRem(448);  
95 - margin: pxToRem(30) pxToRem(96); 95 + min-height: px2rem(600);
  96 + min-width: px2rem(448);
  97 + margin: px2rem(30) px2rem(96);
96 // position: relative; 98 // position: relative;
97 overflow: hidden; 99 overflow: hidden;
98 ul { 100 ul {
@@ -107,55 +109,55 @@ $tableCellC:#eee; @@ -107,55 +109,55 @@ $tableCellC:#eee;
107 109
108 110
109 .goodsName { 111 .goodsName {
110 - min-height: pxToRem(83);  
111 - font-size: pxToRem(28); 112 + min-height: px2rem(83);
  113 + font-size: px2rem(28);
112 color: #fff; 114 color: #fff;
113 - padding-left: pxToRem(25);  
114 - padding-right: pxToRem(25);  
115 - line-height: pxToRem(36); 115 + padding-left: px2rem(25);
  116 + padding-right: px2rem(25);
  117 + line-height: px2rem(36);
116 background-color: #515150; 118 background-color: #515150;
117 } 119 }
118 120
119 .goodsSubtitle{ 121 .goodsSubtitle{
120 - min-height: pxToRem(87);  
121 - font-size: pxToRem(24);  
122 - line-height: pxToRem(36); 122 + min-height: px2rem(87);
  123 + font-size: px2rem(24);
  124 + line-height: px2rem(36);
123 color:$subFontC; 125 color:$subFontC;
124 - padding-left:pxToRem(28);  
125 - padding-right:pxToRem(28);  
126 - border-bottom: 1px solid $borderC; 126 + padding-left:px2rem(28);
  127 + padding-right:px2rem(28);
  128 + border-bottom: 2px solid $borderC;
127 background-color: #f4f4f4; 129 background-color: #f4f4f4;
128 } 130 }
129 131
130 .price-date{ 132 .price-date{
131 // width: 100%; 133 // width: 100%;
132 color:$subFontC; 134 color:$subFontC;
133 - min-height: pxToRem(88);  
134 - padding-left:pxToRem(28);  
135 - padding-right:pxToRem(28);  
136 - border-bottom: 1px solid $borderC; 135 + min-height: px2rem(88);
  136 + padding-left:px2rem(28);
  137 + padding-right:px2rem(28);
  138 + border-bottom: 2px solid $borderC;
137 } 139 }
138 .goodsPrice{ 140 .goodsPrice{
139 float: left; 141 float: left;
140 - font-size: pxToRem(34.59); 142 + font-size: px2rem(34.59);
141 h1{ 143 h1{
142 display: inline-block; 144 display: inline-block;
143 - line-height: pxToRem(88); 145 + line-height: px2rem(88);
144 } 146 }
145 .currentPrice{ 147 .currentPrice{
146 color:red; 148 color:red;
147 - margin-right: pxToRem(10); 149 + margin-right: px2rem(10);
148 } 150 }
149 .previousPrice{ 151 .previousPrice{
150 text-decoration:line-through; 152 text-decoration:line-through;
151 } 153 }
152 } 154 }
153 .periodOfMarket{ 155 .periodOfMarket{
154 - font-size: pxToRem(24); 156 + font-size: px2rem(24);
155 float: right; 157 float: right;
156 h1{ 158 h1{
157 display: inline-block; 159 display: inline-block;
158 - line-height: pxToRem(88); 160 + line-height: px2rem(88);
159 } 161 }
160 } 162 }
161 .goodsName, 163 .goodsName,
@@ -169,39 +171,39 @@ $tableCellC:#eee; @@ -169,39 +171,39 @@ $tableCellC:#eee;
169 } 171 }
170 .vipLevel { 172 .vipLevel {
171 display: table; 173 display: table;
172 - min-height: pxToRem(88);  
173 - padding-left:pxToRem(28);  
174 - padding-right:pxToRem(28);  
175 - font-size: pxToRem(22); 174 + min-height: px2rem(88);
  175 + padding-left:px2rem(28);
  176 + padding-right:px2rem(28);
  177 + font-size: px2rem(22);
176 color: #999999; 178 color: #999999;
177 179
178 - border-bottom: 1px solid $borderC; 180 + border-bottom: 2px solid $borderC;
179 span{ 181 span{
180 display: table-cell; 182 display: table-cell;
181 vertical-align: middle; 183 vertical-align: middle;
182 } 184 }
183 .vip-img{ 185 .vip-img{
184 - padding-right: pxToRem(22); 186 + padding-right: px2rem(22);
185 img{ 187 img{
186 - width: pxToRem(52);  
187 - height: pxToRem(32); 188 + width: px2rem(52);
  189 + height: px2rem(32);
188 } 190 }
189 } 191 }
190 .vip-price{ 192 .vip-price{
191 - padding-right: pxToRem(55); 193 + padding-right: px2rem(55);
192 } 194 }
193 .vip-price:last-child{ 195 .vip-price:last-child{
194 padding-right: 0; 196 padding-right: 0;
195 } 197 }
196 } 198 }
197 .goodsDiscount{ 199 .goodsDiscount{
198 - min-height: pxToRem(88);  
199 - padding-left:pxToRem(28);  
200 - padding-right:pxToRem(28);  
201 - font-size: pxToRem(28); 200 + min-height: px2rem(88);
  201 + padding-left:px2rem(28);
  202 + padding-right:px2rem(28);
  203 + font-size: px2rem(28);
202 color: $mainFontC; 204 color: $mainFontC;
203 - line-height: pxToRem(88);  
204 - border-bottom: 1px solid $borderC; 205 + line-height: px2rem(88);
  206 + border-bottom: 2px solid $borderC;
205 .iconfont{ 207 .iconfont{
206 // padding-right:28rem/$pxConvertRem; 208 // padding-right:28rem/$pxConvertRem;
207 font-size: inherit; 209 font-size: inherit;
@@ -212,7 +214,7 @@ $tableCellC:#eee; @@ -212,7 +214,7 @@ $tableCellC:#eee;
212 } 214 }
213 215
214 .feedback-list-page { 216 .feedback-list-page {
215 - padding-top: pxToRem(30); 217 + padding-top: px2rem(30);
216 background-color: #f0f0f0; 218 background-color: #f0f0f0;
217 219
218 .nav-tab{ 220 .nav-tab{
@@ -220,20 +222,20 @@ $tableCellC:#eee; @@ -220,20 +222,20 @@ $tableCellC:#eee;
220 } 222 }
221 223
222 .nav-tab { 224 .nav-tab {
223 - height: pxToRem(60);  
224 - padding: pxToRem(10) 0; 225 + height: px2rem(60);
  226 + padding: px2rem(10) 0;
225 background-color: #fff; 227 background-color: #fff;
226 - border-top: 1px solid $borderC;  
227 - border-bottom: 1px solid $borderC; 228 + border-top: 2px solid $borderC;
  229 + border-bottom: 2px solid $borderC;
228 } 230 }
229 231
230 .comment-nav, .consult-nav { 232 .comment-nav, .consult-nav {
231 box-sizing: border-box; 233 box-sizing: border-box;
232 float: left; 234 float: left;
233 width: 50%; 235 width: 50%;
234 - height: pxToRem(60);  
235 - line-height: pxToRem(60);  
236 - font-size: pxToRem(28); 236 + height: px2rem(60);
  237 + line-height: px2rem(60);
  238 + font-size: px2rem(28);
237 text-align: center; 239 text-align: center;
238 color: #ccc; 240 color: #ccc;
239 241
@@ -243,28 +245,28 @@ $tableCellC:#eee; @@ -243,28 +245,28 @@ $tableCellC:#eee;
243 } 245 }
244 246
245 .comment-nav { 247 .comment-nav {
246 - border-right: 1px solid #ccc; 248 + border-right: 2px solid #ccc;
247 } 249 }
248 250
249 .comment-content{ 251 .comment-content{
250 .comment-content-main{ 252 .comment-content-main{
251 background-color: #fff; 253 background-color: #fff;
252 - border-bottom: 1px solid $borderC; 254 + border-bottom: 2px solid $borderC;
253 .user-name{ 255 .user-name{
254 - font-size: pxToRem(24);  
255 - line-height: pxToRem(62); 256 + font-size: px2rem(24);
  257 + line-height: px2rem(62);
256 color:$mainFontC; 258 color:$mainFontC;
257 - padding-left: pxToRem(28);  
258 - padding-right: pxToRem(18); 259 + padding-left: px2rem(28);
  260 + padding-right: px2rem(18);
259 } 261 }
260 .goods-spec, 262 .goods-spec,
261 .comment-time{ 263 .comment-time{
262 - font-size: pxToRem(24);  
263 - line-height: pxToRem(62); 264 + font-size: px2rem(24);
  265 + line-height: px2rem(62);
264 } 266 }
265 .detail-content{ 267 .detail-content{
266 - font-size: pxToRem(28);  
267 - line-height: pxToRem(36); 268 + font-size: px2rem(28);
  269 + line-height: px2rem(36);
268 } 270 }
269 .goods-spec, 271 .goods-spec,
270 .detail-content{ 272 .detail-content{
@@ -272,11 +274,11 @@ $tableCellC:#eee; @@ -272,11 +274,11 @@ $tableCellC:#eee;
272 } 274 }
273 .detail-content, 275 .detail-content,
274 .comment-time{ 276 .comment-time{
275 - padding-left: pxToRem(28); 277 + padding-left: px2rem(28);
276 278
277 } 279 }
278 .detail-content{ 280 .detail-content{
279 - padding-right: pxToRem(28); 281 + padding-right: px2rem(28);
280 282
281 } 283 }
282 .comment-time{ 284 .comment-time{
@@ -285,13 +287,13 @@ $tableCellC:#eee; @@ -285,13 +287,13 @@ $tableCellC:#eee;
285 } 287 }
286 288
287 .comment-content-footer{ 289 .comment-content-footer{
288 - min-height: pxToRem(88); 290 + min-height: px2rem(88);
289 text-align: center; 291 text-align: center;
290 background-color: #fff; 292 background-color: #fff;
291 293
292 - border-bottom: 1px solid $borderC;  
293 - line-height: pxToRem(88);  
294 - font-size: pxToRem(28); 294 + border-bottom: 2px solid $borderC;
  295 + line-height: px2rem(88);
  296 + font-size: px2rem(28);
295 a{ 297 a{
296 color: #e0e0e0; 298 color: #e0e0e0;
297 .iconfont{ 299 .iconfont{
@@ -308,7 +310,7 @@ $tableCellC:#eee; @@ -308,7 +310,7 @@ $tableCellC:#eee;
308 } 310 }
309 311
310 .enter-store{ 312 .enter-store{
311 - min-height: pxToRem(100); 313 + min-height: px2rem(100);
312 display: table; 314 display: table;
313 a{ 315 a{
314 display: table-cell; 316 display: table-cell;
@@ -319,19 +321,19 @@ $tableCellC:#eee; @@ -319,19 +321,19 @@ $tableCellC:#eee;
319 // padding-right: 35rem/$pxConvertRem; 321 // padding-right: 35rem/$pxConvertRem;
320 img{ 322 img{
321 323
322 - width: pxToRem(109);  
323 - height: pxToRem(68); 324 + width: px2rem(109);
  325 + height: px2rem(68);
324 326
325 margin-left: 0; 327 margin-left: 0;
326 - margin-right: pxToRem(-25); 328 + margin-right: px2rem(-25);
327 } 329 }
328 } 330 }
329 .store-name{ 331 .store-name{
330 - font-size: pxToRem(34); 332 + font-size: px2rem(34);
331 color:$mainFontC; 333 color:$mainFontC;
332 } 334 }
333 .store-link{ 335 .store-link{
334 - font-size:pxToRem(28) ; 336 + font-size:px2rem(28) ;
335 color:$subFontC; 337 color:$subFontC;
336 text-align: right; 338 text-align: right;
337 span{ 339 span{
@@ -339,9 +341,35 @@ $tableCellC:#eee; @@ -339,9 +341,35 @@ $tableCellC:#eee;
339 } 341 }
340 } 342 }
341 } 343 }
342 - .goods-desc{  
343 - table{ 344 + // .goods-desc{
  345 + // table{
344 346
  347 + // }
  348 + // }
  349 + .materials{
  350 + .detail{
  351 + img{
  352 + display: block;
  353 + overflow: hidden;
  354 + width: px2rem(90);
  355 + height: px2rem(120);
  356 + padding-right: px2rem(20);
  357 + float: left;
  358 + }
  359 + .material-desc{
  360 + // float: left;
  361 + font-size: px2rem(24);
  362 + }
  363 + }
  364 + }
  365 +
  366 + .product-detail{
  367 + .detail{
  368 + img{
  369 + margin-top: px2rem(20);
  370 + width: px2rem(581);
  371 + height: px2rem(772);
  372 + }
345 } 373 }
346 } 374 }
347 } 375 }
@@ -186,6 +186,7 @@ @@ -186,6 +186,7 @@
186 <div class="detail"> 186 <div class="detail">
187 <img src="{{img}}" alt=""> 187 <img src="{{img}}" alt="">
188 <p class="material-desc"> 188 <p class="material-desc">
  189 +
189 {{desc}} 190 {{desc}}
190 </p> 191 </p>
191 </div> 192 </div>
@@ -194,15 +195,18 @@ @@ -194,15 +195,18 @@
194 195
195 <div class="gap-block"></div> 196 <div class="gap-block"></div>
196 197
197 - <div class="size-info page-block"> 198 + {{#productDetail}}
  199 + <div class="product-detail page-block">
198 <h1 class="title"> 200 <h1 class="title">
199 - 商品详情  
200 - <span class="en-title">SIZE INFO</span> 201 + {{title}}
  202 + <span class="en-title">{{enTitle}}</span>
201 </h1> 203 </h1>
202 <div class="detail"> 204 <div class="detail">
203 - 205 + <p>{{desc}}</p>
  206 + <img src="{{img}}" alt="">
204 </div> 207 </div>
205 </div> 208 </div>
  209 + {{/productDetail}}
206 210
207 </div> 211 </div>
208 {{> layout/footer}} 212 {{> layout/footer}}
@@ -173,8 +173,10 @@ SHOE BQT KEN BLOCK', @@ -173,8 +173,10 @@ SHOE BQT KEN BLOCK',
173 ), 173 ),
174 174
175 'productDetail' =>array( 175 'productDetail' =>array(
  176 + 'title' => '商品详情',
  177 + 'enTitle' =>'DETAILS',
176 'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。', 178 'desc' => 'Married to the MOB是由Leah McSweeney创立的女装品牌，一向标榜不羁、大胆的女性streetwear设计。喜欢恶搞的女生们，赶紧入手吧。',
177 - 'img' =>'' 179 + 'img' =>'http://static.dev.yohobuy.com/img/product/product.png'
178 ) 180 )
179 181
180 ); 182 );