fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 76540d98fa1b11b4fd6cea0b431b2bd9be72fe36 1 parent 452dc701

some-css-modified

Inline Side-by-side
Showing 7 changed files with 363 additions and 403 deletions
@@ -203,14 +203,14 @@ @@ -203,14 +203,14 @@
203 li { 203 li {
204 border-bottom: 1px solid #fff; 204 border-bottom: 1px solid #fff;
205 padding: 0 40px; 205 padding: 0 40px;
  206 + }
206 207
207 - &:last-child {  
208 - border-bottom: none;  
209 - } 208 + li > i {
  209 + float: right;
  210 + }
210 211
211 - i {  
212 - float: right;  
213 - } 212 + li:last-child {
  213 + border-bottom: none;
214 } 214 }
215 215
216 li.dispatch-time-info { 216 li.dispatch-time-info {
@@ -318,9 +318,9 @@ @@ -318,9 +318,9 @@
318 width: 100%; 318 width: 100%;
319 height: 100%; 319 height: 100%;
320 background: #000; 320 background: #000;
321 - filter: alpha(opacity=70); /*IE滤镜，透明度70%*/  
322 - -moz-opacity: 0.7; /*Firefox私有，透明度70%*/  
323 - opacity: 0.7;/*其他，透明度70%*/ 321 + filter: alpha(opacity=70);
  322 + -moz-opacity: 0.7;
  323 + opacity: 0.7;
324 } 324 }
325 325
326 span { 326 span {
@@ -401,7 +401,6 @@ @@ -401,7 +401,6 @@
401 .name { 401 .name {
402 font-size: 32px; 402 font-size: 32px;
403 max-width: 70%; 403 max-width: 70%;
404 - text-overflow: -o-ellipsis-lastline;  
405 overflow: hidden; 404 overflow: hidden;
406 text-overflow: ellipsis; 405 text-overflow: ellipsis;
407 display: -webkit-box; 406 display: -webkit-box;
@@ -51,7 +51,7 @@ body { @@ -51,7 +51,7 @@ body {
51 color: #333; 51 color: #333;
52 text-align: center; 52 text-align: center;
53 font-size: 12px; 53 font-size: 12px;
54 - font-family: helvetica,Arial,黑体; 54 + font-family: helvetica, Arial, 黑体;
55 } 55 }
56 56
57 ul, 57 ul,
@@ -118,7 +118,6 @@ body { @@ -118,7 +118,6 @@ body {
118 display: none; 118 display: none;
119 } 119 }
120 120
121 - /*顶悬浮*/  
122 &.fixnav { 121 &.fixnav {
123 position: fixed; 122 position: fixed;
124 top: 0; 123 top: 0;
@@ -150,33 +149,3 @@ body { @@ -150,33 +149,3 @@ body {
150 height: 100%; 149 height: 100%;
151 } 150 }
152 } 151 }
153 -  
154 -/*弹窗*/  
155 -.tc_box {  
156 - position: fixed;  
157 - width: 100%;  
158 - height: 100%;  
159 - top: 0;  
160 - left: 0;  
161 - margin: 0 auto;  
162 - display: none;  
163 - z-index: 1000;  
164 -}  
165 -  
166 -.tc_bg {  
167 - width: 100%;  
168 - height: 100%;  
169 - background: rgba(0, 0, 0, 0.5);  
170 - margin: 0 auto;  
171 - z-index: 1001;  
172 -}  
173 -  
174 -.tc_con {  
175 - position: fixed;  
176 - top: 50%;  
177 - left: 3.9%;  
178 - width: 92.2%;  
179 - margin-top: -200px;  
180 - z-index: 1000000;  
181 - display: block;  
182 -}  
1 @charset "utf-8"; 1 @charset "utf-8";
2 -/* CSS Document */  
3 2
4 /** 3 /**
5 * Swiper 3.1.7 4 * Swiper 3.1.7
6 * Most modern mobile touch slider and framework with hardware accelerated transitions 5 * Most modern mobile touch slider and framework with hardware accelerated transitions
7 - * 6 + *
8 * http://www.idangero.us/swiper/ 7 * http://www.idangero.us/swiper/
9 - * 8 + *
10 * Copyright 2015, Vladimir Kharlampidi 9 * Copyright 2015, Vladimir Kharlampidi
11 * The iDangero.us 10 * The iDangero.us
12 * http://www.idangero.us/ 11 * http://www.idangero.us/
13 - * 12 + *
14 * Licensed under MIT 13 * Licensed under MIT
15 - * 14 + *
16 * Released on: October 10, 2015 15 * Released on: October 10, 2015
17 */ 16 */
18 .swiper-container { 17 .swiper-container {
19 margin: 0 auto; 18 margin: 0 auto;
20 position: relative; 19 position: relative;
21 overflow: hidden; 20 overflow: hidden;
22 - /*z-index: 1*/  
23 } 21 }
24 22
25 .swiper-container-no-flexbox .swiper-slide { 23 .swiper-container-no-flexbox .swiper-slide {
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 &:link, 27 &:link,
28 &:visited, 28 &:visited,
29 &:hover, 29 &:hover,
30 - &:actived { 30 + &:active {
31 color: #000; 31 color: #000;
32 } 32 }
33 } 33 }
@@ -681,7 +681,6 @@ @@ -681,7 +681,6 @@
681 font-size: 24px; 681 font-size: 24px;
682 text-align: center; 682 text-align: center;
683 line-height: 50px; 683 line-height: 50px;
684 - /*display: none;*/  
685 } 684 }
686 } 685 }
687 686
@@ -808,7 +807,6 @@ @@ -808,7 +807,6 @@
808 807
809 .forward { 808 .forward {
810 width: 40px; 809 width: 40px;
811 - height: 28px;  
812 position: absolute; 810 position: absolute;
813 right: 23px; 811 right: 23px;
814 margin-left: 45px; 812 margin-left: 45px;
@@ -1035,4 +1033,4 @@ @@ -1035,4 +1033,4 @@
1035 } 1033 }
1036 } 1034 }
1037 } 1035 }
1038 -}  
  1036 +}
@@ -9,32 +9,32 @@ @@ -9,32 +9,32 @@
9 border-bottom: 1px solid #e0e0e0; 9 border-bottom: 1px solid #e0e0e0;
10 color: #b0b0b0; 10 color: #b0b0b0;
11 font-size: 26px; 11 font-size: 26px;
  12 + }
12 13
13 - li {  
14 - width: 50%;  
15 - height: 100%;  
16 - float: left;  
17 - text-align: center; 14 + .fav-tab > li {
  15 + width: 50%;
  16 + height: 100%;
  17 + float: left;
  18 + text-align: center;
18 19
19 - &.active {  
20 - color: #444;  
21 - } 20 + &.active {
  21 + color: #444;
  22 + }
22 23
23 - &:nth-last-of-type(1) {  
24 - float: right;  
25 - position: relative;  
26 -  
27 - &:after {  
28 - content: "";  
29 - display: block;  
30 - width: 1px;  
31 - height: 44px;  
32 - position: absolute;  
33 - left: 0;  
34 - top: 22px;  
35 - background: #b0b0b0;  
36 - }  
37 - } 24 + &:nth-last-of-type(1) {
  25 + float: right;
  26 + position: relative;
  27 + }
  28 +
  29 + &:nth-last-of-type(1):after {
  30 + content: "";
  31 + display: block;
  32 + width: 1px;
  33 + height: 44px;
  34 + position: absolute;
  35 + left: 0;
  36 + top: 22px;
  37 + background: #b0b0b0;
38 } 38 }
39 } 39 }
40 40
@@ -47,24 +47,6 @@ @@ -47,24 +47,6 @@
47 display: block; 47 display: block;
48 } 48 }
49 49
50 - .fav-null {  
51 - font-size: 22px;  
52 - color: #444;  
53 - display: block;  
54 - margin-top: 100px;  
55 - text-align: center;  
56 -  
57 - &:before {  
58 - content: "";  
59 - display: block;  
60 - width: 188px;  
61 - height: 171px;  
62 - background: resolve("home/fav/fav-null.png");  
63 - background-size: 100% 100%;  
64 - margin: 0 auto 45px;  
65 - }  
66 - }  
67 -  
68 .go-shopping { 50 .go-shopping {
69 width: 472px; 51 width: 472px;
70 height: 88px; 52 height: 88px;
@@ -77,252 +59,264 @@ @@ -77,252 +59,264 @@
77 font-size: 26px; 59 font-size: 26px;
78 border-radius: 0.2rem; 60 border-radius: 0.2rem;
79 } 61 }
  62 + }
80 63
81 - .fav-product-list {  
82 - list-style: none;  
83 - margin-left: 30px; 64 + .fav-content .fav-null {
  65 + font-size: 22px;
  66 + color: #444;
  67 + display: block;
  68 + margin-top: 100px;
  69 + text-align: center;
84 70
85 - li {  
86 - height: auto;  
87 - overflow: hidden;  
88 - margin-top: 20px;  
89 - } 71 + &:before {
  72 + content: "";
  73 + display: block;
  74 + width: 188px;
  75 + height: 171px;
  76 + background: resolve("home/fav/fav-null.png");
  77 + background-size: 100% 100%;
  78 + margin: 0 auto 45px;
  79 + }
  80 + }
90 81
91 - .fav-img-box {  
92 - width: 90px;  
93 - height: 120px;  
94 - float: left;  
95 - margin-right: 24px;  
96 -  
97 - img {  
98 - display: block;  
99 - overflow: hidden;  
100 - width: 100%;  
101 - height: 100%;  
102 - }  
103 - } 82 + .fav-content .fav-product-list {
  83 + list-style: none;
  84 + margin-left: 30px;
104 85
105 - .fav-info-list {  
106 - color: #444;  
107 - font-size: 24px;  
108 - border-bottom: 1px solid #e0e0e0;  
109 - padding-bottom: 20px;  
110 - height: 140px;  
111 - overflow: hidden;  
112 - position: relative; 86 + li {
  87 + height: auto;
  88 + overflow: hidden;
  89 + margin-top: 20px;
  90 + }
113 91
114 - h2 {  
115 - width: 430px;  
116 - text-overflow: ellipsis;  
117 - } 92 + .fav-img-box {
  93 + width: 90px;
  94 + height: 120px;
  95 + float: left;
  96 + margin-right: 24px;
  97 + }
118 98
119 - .fav-price {  
120 - .new-price {  
121 - color: #d1021c;  
122 - } 99 + .fav-img-box img {
  100 + display: block;
  101 + overflow: hidden;
  102 + width: 100%;
  103 + height: 100%;
  104 + }
123 105
124 - .price-underline {  
125 - text-decoration: line-through;  
126 - margin-left: 15px;  
127 - color: #b0b0b0;  
128 - }  
129 - } 106 + .fav-info-list {
  107 + color: #444;
  108 + font-size: 24px;
  109 + border-bottom: 1px solid #e0e0e0;
  110 + padding-bottom: 20px;
  111 + height: 140px;
  112 + overflow: hidden;
  113 + position: relative;
  114 + }
130 115
131 - .save-price {  
132 - position: absolute;  
133 - bottom: 20px;  
134 - left: 0;  
135 - width: 100%;  
136 - min-height: 24px;  
137 -  
138 - &.save-price-number {  
139 - text-indent: 42px;  
140 - color: #b0b0b0;  
141 - padding-top: 3px;  
142 -  
143 - &:before {  
144 - content: "";  
145 - display: block;  
146 - background: url("/home/fav/save-price.png");  
147 - width: 32px;  
148 - height: 32px;  
149 - position: absolute;  
150 - top: 50%;  
151 - left: 0;  
152 - margin-top: -16px;  
153 - }  
154 -  
155 - span {  
156 - margin-left: 15px;  
157 - }  
158 -  
159 - .del-fav {  
160 - text-indent: 0;  
161 - margin-left: 0;  
162 - }  
163 - }  
164 -  
165 - span {  
166 - color: #d1021c;  
167 -  
168 - &.sell-out {  
169 - padding: 5px 18px;  
170 - color: #fffefe;  
171 - border-radius: 20px;  
172 - background: #7f7f7f;  
173 - font-size: 22px;  
174 - }  
175 -  
176 - &.del-fav {  
177 - width: 2rem;  
178 - height: 1.5rem;  
179 - line-height: 1.5rem;  
180 - position: absolute;  
181 - top: 50%;  
182 - margin-top: -0.75rem;  
183 - right: 0;  
184 - color: #999;  
185 - padding-right: 0.75rem;  
186 - text-align: right;  
187 - }  
188 - }  
189 - }  
190 - } 116 + .fav-info-list h2 {
  117 + width: 430px;
  118 + text-overflow: ellipsis;
  119 + }
  120 +
  121 + .fav-info-list .fav-price .new-price {
  122 + color: #d1021c;
191 } 123 }
192 124
193 - /*品牌收藏*/ 125 + .fav-info-list .fav-price .price-underline {
  126 + text-decoration: line-through;
  127 + margin-left: 15px;
  128 + color: #b0b0b0;
  129 + }
  130 +
  131 + .fav-info-list .save-price {
  132 + position: absolute;
  133 + bottom: 20px;
  134 + left: 0;
  135 + width: 100%;
  136 + min-height: 24px;
  137 + }
  138 +
  139 + .fav-info-list .save-price span {
  140 + color: #d1021c;
  141 + }
  142 +
  143 + .fav-info-list .save-price .sell-out {
  144 + padding: 5px 18px;
  145 + color: #fffefe;
  146 + border-radius: 20px;
  147 + background: #7f7f7f;
  148 + font-size: 22px;
  149 + }
194 150
195 - .fav-brand-swiper { 151 + .fav-info-list .save-price .del-fav {
  152 + width: 2rem;
  153 + height: 1.5rem;
  154 + line-height: 1.5rem;
  155 + position: absolute;
  156 + top: 50%;
  157 + margin-top: -0.75rem;
  158 + right: 0;
  159 + color: #999;
  160 + padding-right: 0.75rem;
  161 + text-align: right;
  162 + }
  163 +
  164 + .fav-info-list .save-price-number {
  165 + text-indent: 42px;
  166 + color: #b0b0b0;
  167 + padding-top: 3px;
  168 + }
  169 +
  170 + .fav-info-list .save-price-number:before {
  171 + content: "";
  172 + display: block;
  173 + background: url("/home/fav/save-price.png");
  174 + width: 32px;
  175 + height: 32px;
  176 + position: absolute;
  177 + top: 50%;
  178 + left: 0;
  179 + margin-top: -16px;
  180 + }
  181 +
  182 + .fav-info-list .save-price-number span {
  183 + margin-left: 15px;
  184 + }
  185 +
  186 + .fav-info-list .save-price-number .del-fav {
  187 + text-indent: 0;
  188 + margin-left: 0;
  189 + }
  190 + }
  191 +
  192 + .fav-content .fav-brand-swiper {
  193 + border-top: 1px solid #e0e0e0;
  194 + border-bottom: 28px solid #f0f0f0;
  195 + position: relative;
  196 +
  197 + &:nth-of-type(1) {
  198 + border-top: 0;
  199 + }
  200 +
  201 + &:after {
  202 + content: "";
  203 + position: absolute;
  204 + left: 0;
  205 + bottom: -2px;
196 border-top: 1px solid #e0e0e0; 206 border-top: 1px solid #e0e0e0;
197 - border-bottom: 28px solid #f0f0f0;  
198 - position: relative; 207 + display: block;
  208 + width: 100%;
  209 + height: 1px;
  210 + }
  211 + }
199 212
200 - &:nth-of-type(1) {  
201 - border-top: 0;  
202 - } 213 + .fav-content .fav-brand-swiper .swiper-header {
  214 + height: 100px;
  215 + padding: 20px 30px;
  216 + display: inline-block;
  217 + position: relative;
  218 + width: 100%;
  219 + box-sizing: border-box;
203 220
204 - &:after {  
205 - content: "";  
206 - position: absolute;  
207 - left: 0;  
208 - bottom: -2px;  
209 - border-top: 1px solid #e0e0e0;  
210 - display: block;  
211 - width: 100%;  
212 - height: 1px; 221 + .swiper-logo {
  222 + height: 100%;
  223 + display: inline-block;
  224 + float: left;
  225 + margin-right: 45px;
  226 + }
  227 +
  228 + .swiper-logo > img {
  229 + max-height: 100%;
  230 + vertical-align: middle;
  231 + }
  232 +
  233 + .brand-info {
  234 + float: left;
  235 +
  236 + .brand-name {
  237 + font-size: 28px;
  238 +
  239 + b {
  240 + color: #b0b0b0;
  241 + font-weight: normal;
  242 + }
213 } 243 }
214 244
215 - .swiper-header {  
216 - height: 100px;  
217 - padding: 20px 30px;  
218 - display: inline-block;  
219 - position: relative;  
220 - width: 100%;  
221 - box-sizing: border-box;  
222 -  
223 - .swiper-logo {  
224 - height: 100%;  
225 - display: inline-block;  
226 - float: left;  
227 - margin-right: 45px;  
228 -  
229 - > img {  
230 - max-height: 100%;  
231 - vertical-align: middle;  
232 - } 245 + .brand-update {
  246 + font-size: 22px;
  247 +
  248 + b {
  249 + color: #b0b0b0;
  250 + font-weight: normal;
233 } 251 }
234 252
235 - .brand-info {  
236 - float: left; 253 + .brand-new {
  254 + color: #86bf4a;
  255 + margin-right: 24px;
  256 + }
237 257
238 - .brand-name {  
239 - font-size: 28px; 258 + .brand-discount {
  259 + color: #d1021c;
  260 + }
  261 + }
  262 + }
  263 +
  264 + .fav-more {
  265 + width: 2.5rem;
  266 + height: 2.5rem;
  267 + position: absolute;
  268 + top: 0;
  269 + right: 0;
  270 +
  271 + &:after {
  272 + background: url("/home/fav/fav-more.png");
  273 + width: 18px;
  274 + height: 29px;
  275 + position: absolute;
  276 + top: 50%;
  277 + right: 30px;
  278 + margin-top: -15px;
  279 + content: "";
  280 + }
  281 + }
  282 + }
240 283
241 - b {  
242 - color: #b0b0b0;  
243 - font-weight: normal;  
244 - }  
245 - } 284 + .fav-content .fav-brand-swiper .swiper-container {
  285 + height: 365px;
  286 + margin: 0 30px;
246 287
247 - .brand-update {  
248 - font-size: 22px; 288 + .swiper-slide {
  289 + width: 255px;
  290 + height: 100%;
  291 + float: left;
  292 + padding-right: 30px;
249 293
250 - b {  
251 - color: #b0b0b0;  
252 - font-weight: normal;  
253 - } 294 + &:nth-last-of-type(1) {
  295 + padding-right: 0;
  296 + }
254 297
255 - .brand-new {  
256 - color: #86bf4a;  
257 - margin-right: 24px;  
258 - } 298 + img {
  299 + display: block;
  300 + width: 100%;
  301 + height: 300px;
  302 + overflow: hidden;
  303 + }
259 304
260 - .brand-discount {  
261 - color: #d1021c;  
262 - }  
263 - }  
264 - } 305 + .brand-product {
  306 + height: 65px;
  307 + line-height: 65px;
  308 + text-align: center;
  309 + font-size: 22px;
265 310
266 - .fav-more {  
267 - width: 2.5rem;  
268 - height: 2.5rem;  
269 - position: absolute;  
270 - top: 0;  
271 - right: 0;  
272 -  
273 - &:after {  
274 - background: url("/home/fav/fav-more.png");  
275 - width: 18px;  
276 - height: 29px;  
277 - position: absolute;  
278 - top: 50%;  
279 - right: 30px;  
280 - margin-top: -15px;  
281 - content: "";  
282 - } 311 + .price-discount span {
  312 + color: #d1021c;
283 } 313 }
284 - }  
285 314
286 - .swiper-container {  
287 - height: 365px;  
288 - margin: 0 30px;  
289 -  
290 - .swiper-slide {  
291 - width: 255px;  
292 - height: 100%;  
293 - float: left;  
294 - padding-right: 30px;  
295 -  
296 - &:nth-last-of-type(1) {  
297 - padding-right: 0;  
298 - }  
299 -  
300 - img {  
301 - display: block;  
302 - width: 100%;  
303 - height: 300px;  
304 - overflow: hidden;  
305 - }  
306 -  
307 - .brand-product {  
308 - height: 65px;  
309 - line-height: 65px;  
310 - text-align: center;  
311 - font-size: 22px;  
312 -  
313 - .price-discount {  
314 - span {  
315 - color: #d1021c;  
316 - }  
317 -  
318 - b {  
319 - color: #b0b0b0;  
320 - text-decoration: line-through;  
321 - font-weight: normal;  
322 - margin-left: 13px;  
323 - }  
324 - }  
325 - } 315 + .price-discount b {
  316 + color: #b0b0b0;
  317 + text-decoration: line-through;
  318 + font-weight: normal;
  319 + margin-left: 13px;
326 } 320 }
327 } 321 }
328 } 322 }
@@ -30,38 +30,38 @@ @@ -30,38 +30,38 @@
30 30
31 .ticket-btn { 31 .ticket-btn {
32 width: 580px; 32 width: 580px;
  33 + }
33 34
34 - .ticket-btn-c {  
35 - width: 420px;  
36 - border-top: solid 1px #e0e0e0;  
37 - clear: both;  
38 - margin: 55px auto 0; 35 + .ticket-btn .ticket-btn-c {
  36 + width: 420px;
  37 + border-top: solid 1px #e0e0e0;
  38 + clear: both;
  39 + margin: 55px auto 0;
  40 +
  41 + div {
  42 + width: 200px;
  43 + margin: -25px auto 0;
  44 + height: 54px;
  45 + background-color: #fff;
  46 +
  47 + a {
  48 + width: 152px;
  49 + height: 50px;
  50 + border: solid 2px #d0021b;
  51 + color: #fff;
  52 + font-size: 24px;
  53 + display: block;
  54 + text-align: center;
  55 + line-height: 50px;
  56 + border-radius: 25px;
  57 + margin: 0 auto;
  58 + background-color: #d0021b;
  59 + }
39 60
40 - div {  
41 - width: 200px;  
42 - margin: -25px auto 0;  
43 - height: 54px;  
44 - background-color: #fff;  
45 -  
46 - a {  
47 - width: 152px;  
48 - height: 50px;  
49 - border: solid 2px #d0021b;  
50 - color: #fff;  
51 - font-size: 24px;  
52 - display: block;  
53 - text-align: center;  
54 - line-height: 50px;  
55 - border-radius: 25px;  
56 - margin: 0 auto;  
57 - background-color: #d0021b;  
58 - }  
59 -  
60 - .disable {  
61 - background-color: #b0b0b0;  
62 - color: #fff;  
63 - border-color: #b0b0b0;  
64 - } 61 + .disable {
  62 + background-color: #b0b0b0;
  63 + color: #fff;
  64 + border-color: #b0b0b0;
65 } 65 }
66 } 66 }
67 } 67 }
@@ -174,65 +174,65 @@ @@ -174,65 +174,65 @@
174 174
175 .ticket-list { 175 .ticket-list {
176 padding-top: 30px; 176 padding-top: 30px;
  177 + }
177 178
178 - .ticket {  
179 - margin-bottom: 30px;  
180 - width: 580px; 179 + .ticket-list .ticket {
  180 + margin-bottom: 30px;
  181 + width: 580px;
  182 + height: 168px;
  183 + background-image: resolve("home/employ/employ2.png");
  184 + background-position: top center;
  185 + background-repeat: no-repeat;
  186 + background-size: 100% 100%;
  187 +
  188 + .left {
  189 + width: 200px;
181 height: 168px; 190 height: 168px;
182 - background-image: resolve("home/employ/employ2.png");  
183 - background-position: top center;  
184 - background-repeat: no-repeat;  
185 - background-size: 100% 100%;  
186 -  
187 - .left {  
188 - width: 200px;  
189 - height: 168px;  
190 - color: #fff;  
191 - font-size: 90px;  
192 - line-height: 168px;  
193 - text-align: center;  
194 - float: left;  
195 - overflow: hidden; 191 + color: #fff;
  192 + font-size: 90px;
  193 + line-height: 168px;
  194 + text-align: center;
  195 + float: left;
  196 + overflow: hidden;
196 197
197 - span {  
198 - float: left;  
199 - margin-left: 10px;  
200 - font-size: 50px;  
201 - } 198 + span {
  199 + float: left;
  200 + margin-left: 10px;
  201 + font-size: 50px;
  202 + }
202 203
203 - div {  
204 - overflow: hidden;  
205 - } 204 + div {
  205 + overflow: hidden;
206 } 206 }
  207 + }
207 208
208 - .right {  
209 - width: 270px;  
210 - padding: 30px 0;  
211 - height: 168px;  
212 - float: left; 209 + .right {
  210 + width: 270px;
  211 + padding: 30px 0;
  212 + height: 168px;
  213 + float: left;
213 214
214 - .first {  
215 - width: 240px;  
216 - overflow: hidden;  
217 - font-size: 26px;  
218 - line-height: 40px;  
219 - height: 80px;  
220 - }  
221 -  
222 - p {  
223 - font-size: 18px;  
224 - color: #fff;  
225 - line-height: 30px;  
226 - } 215 + .first {
  216 + width: 240px;
  217 + overflow: hidden;
  218 + font-size: 26px;
  219 + line-height: 40px;
  220 + height: 80px;
227 } 221 }
228 222
229 - .btn {  
230 - width: 110px;  
231 - height: 168px;  
232 - float: left;  
233 - display: block; 223 + p {
  224 + font-size: 18px;
  225 + color: #fff;
  226 + line-height: 30px;
234 } 227 }
235 } 228 }
  229 +
  230 + .btn {
  231 + width: 110px;
  232 + height: 168px;
  233 + float: left;
  234 + display: block;
  235 + }
236 } 236 }
237 } 237 }
238 } 238 }
@@ -17,6 +17,7 @@ @@ -17,6 +17,7 @@
17 height: 100px; 17 height: 100px;
18 line-height: 100px; 18 line-height: 100px;
19 } 19 }
  20 +
20 height: 80px; 21 height: 80px;
21 border-bottom: 1px solid #e0e0e0; 22 border-bottom: 1px solid #e0e0e0;
22 23
@@ -31,6 +32,7 @@ @@ -31,6 +32,7 @@
31 &:first-of-type { 32 &:first-of-type {
32 color: #444; 33 color: #444;
33 } 34 }
  35 +
34 width: 42%; 36 width: 42%;
35 height: 100%; 37 height: 100%;
36 line-height: 80px; 38 line-height: 80px;
@@ -56,21 +58,21 @@ @@ -56,21 +58,21 @@
56 overflow: hidden; 58 overflow: hidden;
57 display: block; 59 display: block;
58 position: relative; 60 position: relative;
  61 + }
59 62
60 - i {  
61 - width: 72px;  
62 - height: 32px;  
63 - overflow: hidden;  
64 - display: block;  
65 - position: absolute;  
66 - right: 40px;  
67 - top: 50%;  
68 - transform: translateY(-50%);  
69 - } 63 + .grade i {
  64 + width: 72px;
  65 + height: 32px;
  66 + overflow: hidden;
  67 + display: block;
  68 + position: absolute;
  69 + right: 40px;
  70 + top: 50%;
  71 + transform: translateY(-50%);
  72 + }
70 73
71 - span {  
72 - color: #b0b0b0;  
73 - } 74 + .grade span {
  75 + color: #b0b0b0;
74 } 76 }
75 77
76 .vip-3 { 78 .vip-3 {