Authored by biao

update style for shopping cart

@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 position: absolute; 7 position: absolute;
8 top: 50%; 8 top: 50%;
9 margin-top: -14rem / $pxConvertRem; 9 margin-top: -14rem / $pxConvertRem;
  10 + margin-left: 20rem / $pxConvertRem;
10 font-size: 28rem / $pxConvertRem; 11 font-size: 28rem / $pxConvertRem;
11 color: #f0f0f0; 12 color: #f0f0f0;
12 13
@@ -15,9 +16,40 @@ @@ -15,9 +16,40 @@
15 } 16 }
16 } 17 }
17 18
  19 + .few-tag{
  20 + width: 132rem / $pxConvertRem;
  21 + position: absolute;
  22 + left: 100rem / $pxConvertRem;
  23 + text-align: center;
  24 + top: 75%;
  25 + color: #fff;
  26 + }
  27 +
  28 + .gift-tag {
  29 + background-color: #88BE51;
  30 + }
  31 +
  32 + .plus-tag {
  33 + background-color: #FC1264;
  34 + }
  35 +
  36 + .few-tag-expire {
  37 + position: absolute;
  38 + top: 40%;
  39 + left: 20rem / $pxConvertRem;
  40 + background-color: #7f7f7f;
  41 + display: inline-block;
  42 + color: #fff;
  43 + border-radius: 12rem / $pxConvertRem;
  44 + padding: 4rem / $pxConvertRem;
  45 + font-size: 20rem / $pxConvertRem;
  46 + width: 48rem / $pxConvertRem;
  47 + text-align: center;
  48 + }
  49 +
18 .info { 50 .info {
19 float: left; 51 float: left;
20 - margin-left: 30rem / $pxConvertRem; 52 + margin-left: 60rem / $pxConvertRem;
21 padding: 16rem / $pxConvertRem 0; 53 padding: 16rem / $pxConvertRem 0;
22 padding-right: 20rem / $pxConvertRem; 54 padding-right: 20rem / $pxConvertRem;
23 } 55 }
@@ -32,13 +64,18 @@ @@ -32,13 +64,18 @@
32 64
33 .deps { 65 .deps {
34 margin-left: 173rem / $pxConvertRem; 66 margin-left: 173rem / $pxConvertRem;
35 - padding-bottom: 60rem / $pxConvertRem; 67 + padding-bottom: 72rem / $pxConvertRem;
36 border-bottom: 1px solid #e0e0e0; 68 border-bottom: 1px solid #e0e0e0;
  69 + width: 380rem / $pxConvertRem;
  70 + position: relative;
  71 + min-height: 140rem / $pxConvertRem;
37 } 72 }
38 73
39 .name { 74 .name {
40 font-size: 28rem / $pxConvertRem; 75 font-size: 28rem / $pxConvertRem;
41 color: #5a5a5a; 76 color: #5a5a5a;
  77 + width: 80%;
  78 + display: inline-block;
42 } 79 }
43 80
44 .row:nth-child(2) { 81 .row:nth-child(2) {
@@ -71,9 +108,13 @@ @@ -71,9 +108,13 @@
71 } 108 }
72 109
73 .count { 110 .count {
74 - font-size: 20rem / $pxConvertRem; 111 + font-size: 32rem / $pxConvertRem;
75 color: #999; 112 color: #999;
76 - margin-left: 22rem / $pxConvertRem; 113 + //margin-left: 22rem / $pxConvertRem;
  114 + display: inline-block;
  115 + width: 19%;
  116 + position: absolute;
  117 + text-align: center;
77 } 118 }
78 119
79 .sold-out, .low-stocks { 120 .sold-out, .low-stocks {
@@ -181,15 +222,15 @@ @@ -181,15 +222,15 @@
181 font-size: 40rem / $pxConvertRem; 222 font-size: 40rem / $pxConvertRem;
182 line-height: 60rem / $pxConvertRem; 223 line-height: 60rem / $pxConvertRem;
183 text-align: center; 224 text-align: center;
184 - 225 +
185 } 226 }
186 &:last-child { 227 &:last-child {
187 span{ 228 span{
188 width: 168rem / $pxConvertRem; 229 width: 168rem / $pxConvertRem;
189 overflow: hidden; 230 overflow: hidden;
190 font-size: 48em / $pxConvertRem; 231 font-size: 48em / $pxConvertRem;
191 - text-overflow:ellipsis;  
192 - white-space:nowrap; 232 + text-overflow:ellipsis;
  233 + white-space:nowrap;
193 } 234 }
194 } 235 }
195 } 236 }
@@ -205,7 +246,6 @@ @@ -205,7 +246,6 @@
205 top: 20rem / $pxConvertRem;; 246 top: 20rem / $pxConvertRem;;
206 font-size: 52em / $pxConvertRem; 247 font-size: 52em / $pxConvertRem;
207 } 248 }
208 -  
209 } 249 }
210 } 250 }
211 251
1 <div class="shopping-cart-good clearfix" data-id={{id}}> 1 <div class="shopping-cart-good clearfix" data-id={{id}}>
2 - <span class="checkbox icon-cb-checked iconfont"></span>  
3 - <!-- {{#if isSoldOut}}  
4 -<p class="">失效</p>  
5 - {{^}}  
6 - {{#if isGift}}  
7 - {{^}}  
8 -<span class="checkbox icon-cb-checked iconfont"></span>  
9 - {{/if}} 2 + {{#if isSoldOut}}
  3 + <span class="few-tag-expire">失效</span>
  4 + {{^}}
  5 + <span class="checkbox icon-cb-checked iconfont"></span>
  6 + {{/if}}
10 7
11 - {{/if}}-->  
12 <div class="info"> 8 <div class="info">
13 <img class="thumb lazy" data-original={{thumb}}> 9 <img class="thumb lazy" data-original={{thumb}}>
14 - <!--  
15 - <a class="" href="{{url}}">  
16 - <img class="thumb lazy" data-original="{{thumb}}">  
17 - </a>  
18 {{#if isAdvanceBuy}} 10 {{#if isAdvanceBuy}}
19 - <p class="few-tag">加价购</p> 11 + <p class="few-tag plus-tag">加价购</p>
20 {{^}} 12 {{^}}
21 {{#if isGift}} 13 {{#if isGift}}
22 - <p class="few-tag">赠品</p> 14 + <p class="few-tag gift-tag">赠品</p>
23 {{/if}} 15 {{/if}}
24 {{/if}} 16 {{/if}}
25 - {{#if isSoldOut}}  
26 - <p class="few-tag">失效</p>  
27 - {{/if}}  
28 -  
29 - --> 17 + </a>
30 18
31 <div class="deps show"> 19 <div class="deps show">
32 <p class="name row">{{name}}</p> 20 <p class="name row">{{name}}</p>
  21 + <span class="count">
  22 + ×{{count}}
  23 + </span>
33 <p class="row"> 24 <p class="row">
34 {{#if color}} 25 {{#if color}}
35 <span class="color"> 26 <span class="color">
@@ -48,9 +39,7 @@ @@ -48,9 +39,7 @@
48 <span class="price"> 39 <span class="price">
49 ¥{{price}} 40 ¥{{price}}
50 </span> 41 </span>
51 - <span class="count">  
52 - ×{{count}}  
53 - </span> 42 +
54 {{#if soldOut}} 43 {{#if soldOut}}
55 <span class="sold-out"> 44 <span class="sold-out">
56 已售罄 45 已售罄