wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit b2be84d0f4504e23d2e9596676f34c738287562c 1 parent 9c67f7c3

cart style & invalid goods

Inline Side-by-side
Showing 4 changed files with 54 additions and 30 deletions
@@ -54,6 +54,10 @@ @@ -54,6 +54,10 @@
54 padding-right: 20rem / $pxConvertRem; 54 padding-right: 20rem / $pxConvertRem;
55 } 55 }
56 56
  57 + .fixed-height {
  58 + height: 2.7rem;
  59 + }
  60 +
57 .thumb { 61 .thumb {
58 float: left; 62 float: left;
59 width: 180rem / $pxConvertRem; 63 width: 180rem / $pxConvertRem;
@@ -65,54 +69,49 @@ @@ -65,54 +69,49 @@
65 .deps { 69 .deps {
66 position: relative; 70 position: relative;
67 width: 380rem / $pxConvertRem; 71 width: 380rem / $pxConvertRem;
68 - height: 5.3rem;  
69 margin-left: 4.7rem; 72 margin-left: 4.7rem;
70 border-bottom: 1px solid #e0e0e0; 73 border-bottom: 1px solid #e0e0e0;
71 - padding-top: 0.5rem; 74 + padding: 0.5rem 0;
72 } 75 }
73 76
74 .name { 77 .name {
75 - font-size: 18px;  
76 - color: #5a5a5a;  
77 - width: 80%;  
78 display: inline-block; 78 display: inline-block;
  79 + width: 80%;
  80 + color: #5a5a5a;
  81 + font-size: 0.6rem;
79 } 82 }
80 83
81 - .color-size-row {  
82 - margin: 0.2rem 0;  
83 -  
84 - > span { 84 + .color-size-row > span {
85 margin-right: 15rem / $pxConvertRem; 85 margin-right: 15rem / $pxConvertRem;
86 } 86 }
87 - }  
88 87
89 .color, .size { 88 .color, .size {
90 - font-size: 16px; 89 + font-size: 0.6rem;
91 color: #b6b6b6; 90 color: #b6b6b6;
92 } 91 }
93 92
94 .appear-date { 93 .appear-date {
  94 + float: left;
95 color: $cartRed; 95 color: $cartRed;
96 display: block; 96 display: block;
97 - margin-top: 4rem / $pxConvertRem; 97 + font-size: 0.5rem;
98 } 98 }
99 99
100 .price { 100 .price {
101 - font-size: 16px; 101 + font-size: 0.6rem;
102 color: $cartRed; 102 color: $cartRed;
103 } 103 }
104 104
105 .count { 105 .count {
106 font-size: 32rem / $pxConvertRem; 106 font-size: 32rem / $pxConvertRem;
107 color: #999; 107 color: #999;
108 - //margin-left: 22rem / $pxConvertRem;  
109 display: inline-block; 108 display: inline-block;
110 width: 19%; 109 width: 19%;
111 position: absolute; 110 position: absolute;
112 text-align: center; 111 text-align: center;
113 } 112 }
114 113
115 - .sold-out, .low-stocks { 114 + .low-stocks {
116 display: inline-block; 115 display: inline-block;
117 width: 100rem / $pxConvertRem; 116 width: 100rem / $pxConvertRem;
118 height: 30rem / $pxConvertRem; 117 height: 30rem / $pxConvertRem;
@@ -122,20 +121,31 @@ @@ -122,20 +121,31 @@
122 color: #fff; 121 color: #fff;
123 text-align: center; 122 text-align: center;
124 float: right; 123 float: right;
125 - margin-top: 20rem / $pxConvertRem;  
126 margin-right: 16rem / $pxConvertRem; 124 margin-right: 16rem / $pxConvertRem;
127 - border-radius: 20rem / $pxConvertRem;  
128 padding: 4rem / $pxConvertRem; 125 padding: 4rem / $pxConvertRem;
129 - }  
130 126
131 - .sold-out {  
132 - background: #999; 127 + border-radius: 20rem / $pxConvertRem;
133 } 128 }
134 129
135 .low-stocks { 130 .low-stocks {
136 background: #7f7f7f; 131 background: #7f7f7f;
137 } 132 }
138 133
  134 + .vip {
  135 + display: inline-block;
  136 + color: #fff;
  137 + background: #d1021c;
  138 + border: 1px solid #9d0000;
  139 + @include border-radius(0.5rem);
  140 + padding: 4rem / $pxConvertRem 0.5rem;
  141 + margin-left: 0.2rem;
  142 + }
  143 +
  144 + .la-tag {
  145 + margin-top: 0.3rem;
  146 + min-height: 1rem;
  147 + }
  148 +
139 .icon-del, 149 .icon-del,
140 .icon-edit { 150 .icon-edit {
141 position: absolute; 151 position: absolute;
@@ -7,6 +7,11 @@ @@ -7,6 +7,11 @@
7 .shopping-cart-page { 7 .shopping-cart-page {
8 padding-bottom: 120rem / $pxConvertRem; 8 padding-bottom: 120rem / $pxConvertRem;
9 overflow-x: hidden; 9 overflow-x: hidden;
  10 + background: #f0f0f0;
  11 +
  12 + .cart-content > * {
  13 + background: #fff;
  14 + }
10 15
11 .cart-nav { 16 .cart-nav {
12 color: #c6c6c6; 17 color: #c6c6c6;
@@ -117,10 +122,16 @@ @@ -117,10 +122,16 @@
117 } 122 }
118 } 123 }
119 124
  125 + .invalid-goods {
  126 + border-top: 1px solid #e0e0e0;
  127 + border-bottom: 1px solid #e0e0e0;
  128 + margin: 0.75rem 0;
  129 + }
  130 +
120 .freebie-and-advance-buy { 131 .freebie-and-advance-buy {
121 padding: 20rem / $pxConvertRem; 132 padding: 20rem / $pxConvertRem;
122 font-size: 24rem / $pxConvertRem; 133 font-size: 24rem / $pxConvertRem;
123 - //border-bottom: 1px solid #e0e0e0; 134 + border-top: 1px solid #e0e0e0;
124 135
125 > li { 136 > li {
126 box-sizing: border-box; 137 box-sizing: border-box;
@@ -2,12 +2,15 @@ @@ -2,12 +2,15 @@
2 {{# goods}} 2 {{# goods}}
3 {{> cart/good}} 3 {{> cart/good}}
4 {{/ goods}} 4 {{/ goods}}
  5 +</div>
5 6
  7 +{{#if notValidGoods}}
  8 + <div class="invalid-goods">
6 {{# notValidGoods}} 9 {{# notValidGoods}}
7 {{> cart/good}} 10 {{> cart/good}}
8 {{/ notValidGoods}} 11 {{/ notValidGoods}}
9 -  
10 -</div> 12 + </div>
  13 +{{/if}}
11 14
12 {{#if freebieOrAdvanceBuy}} 15 {{#if freebieOrAdvanceBuy}}
13 <ul class="freebie-and-advance-buy"> 16 <ul class="freebie-and-advance-buy">
@@ -19,6 +19,7 @@ @@ -19,6 +19,7 @@
19 {{/if}} 19 {{/if}}
20 20
21 <div class="deps show"> 21 <div class="deps show">
  22 + <div class="fixed-height">
22 <a href="{{link}}" class="name row">{{name}}</a> 23 <a href="{{link}}" class="name row">{{name}}</a>
23 <span class="count"> 24 <span class="count">
24 ×{{count}} 25 ×{{count}}
@@ -37,33 +38,32 @@ @@ -37,33 +38,32 @@
37 {{/if}} 38 {{/if}}
38 39
39 </p> 40 </p>
  41 + </div>
40 <p class="row"> 42 <p class="row">
41 <span class="price"> 43 <span class="price">
42 ¥{{price}} 44 ¥{{price}}
43 </span> 45 </span>
44 46
45 - {{#if soldOut}}  
46 - <span class="sold-out">  
47 - 已售罄 47 + {{#if vip}}
  48 + <span class="vip">
  49 + VIP
48 </span> 50 </span>
49 {{/if}} 51 {{/if}}
50 52
51 <span class="iconfont icon-del" data-count="{{count}}">&#xe621;</span> 53 <span class="iconfont icon-del" data-count="{{count}}">&#xe621;</span>
52 </p> 54 </p>
  55 + <p class="la-tag row clearfix">
53 {{#if lowStocks}} 56 {{#if lowStocks}}
54 - <p class="row">  
55 <span class="low-stocks"> 57 <span class="low-stocks">
56 库存不足 58 库存不足
57 </span> 59 </span>
58 - </p>  
59 {{/if}} 60 {{/if}}
60 {{#if appearDate}} 61 {{#if appearDate}}
61 - <p class="row">  
62 <span class="appear-date"> 62 <span class="appear-date">
63 上市期:{{appearDate}} 63 上市期:{{appearDate}}
64 </span> 64 </span>
65 - </p>  
66 {{/if}} 65 {{/if}}
  66 + </p>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>