fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by hf
Commit ddb7d1defbcd7c0a03723c935284c0c27dba2bc8 2 parents b60566bc 1b679de6

Merge branch 'develop' of http://git.dev.yoho.cn/web/yohobuy into develop

Inline Side-by-side
Showing 12 changed files with 149 additions and 68 deletions
@@ -11,6 +11,7 @@ var $ = require('yoho.zepto'), @@ -11,6 +11,7 @@ var $ = require('yoho.zepto'),
11 var swiper; 11 var swiper;
12 12
13 var filter = require('../../plugin/filter'); 13 var filter = require('../../plugin/filter');
  14 +var loading = require('../../plugin/loading');
14 15
15 var $goodsContainer = $('#goods-container'), 16 var $goodsContainer = $('#goods-container'),
16 $ngc = $($goodsContainer.children().get(0)), 17 $ngc = $($goodsContainer.children().get(0)),
@@ -165,6 +166,7 @@ function search(opt) { @@ -165,6 +166,7 @@ function search(opt) {
165 }); 166 });
166 167
167 searching = true; 168 searching = true;
  169 + loading.showLoadingMask();
168 170
169 $.ajax({ 171 $.ajax({
170 type: 'GET', 172 type: 'GET',
@@ -206,6 +208,7 @@ function search(opt) { @@ -206,6 +208,7 @@ function search(opt) {
206 nav.page = page; 208 nav.page = page;
207 209
208 searching = false; 210 searching = false;
  211 + loading.hideLoadingMask();
209 } 212 }
210 }); 213 });
211 214
@@ -214,6 +217,7 @@ function search(opt) { @@ -214,6 +217,7 @@ function search(opt) {
214 lazyLoad($('.lazy')); 217 lazyLoad($('.lazy'));
215 218
216 filter.registerCbFn(search); 219 filter.registerCbFn(search);
  220 +loading.initLoadingMask();
217 221
218 //导航栏点击逻辑说明： 222 //导航栏点击逻辑说明：
219 //1.点击非active项时切换active状态 223 //1.点击非active项时切换active状态
@@ -11,6 +11,7 @@ var $ = require('yoho.zepto'), @@ -11,6 +11,7 @@ var $ = require('yoho.zepto'),
11 var swiper; 11 var swiper;
12 12
13 var filter = require('../../plugin/filter'); 13 var filter = require('../../plugin/filter');
  14 +var loading = require('../../plugin/loading');
14 15
15 var $goodsContainer = $('#goods-container'), 16 var $goodsContainer = $('#goods-container'),
16 $ngc = $($goodsContainer.children().get(0)), 17 $ngc = $($goodsContainer.children().get(0)),
@@ -192,6 +193,7 @@ function search(opt) { @@ -192,6 +193,7 @@ function search(opt) {
192 }); 193 });
193 194
194 searching = true; 195 searching = true;
  196 + loading.showLoadingMask();
195 197
196 $.ajax({ 198 $.ajax({
197 type: 'GET', 199 type: 'GET',
@@ -233,6 +235,7 @@ function search(opt) { @@ -233,6 +235,7 @@ function search(opt) {
233 nav.page = page; 235 nav.page = page;
234 236
235 searching = false; 237 searching = false;
  238 + loading.hideLoadingMask();
236 } 239 }
237 }); 240 });
238 241
@@ -241,6 +244,7 @@ function search(opt) { @@ -241,6 +244,7 @@ function search(opt) {
241 lazyLoad($('.lazy')); 244 lazyLoad($('.lazy'));
242 245
243 filter.registerCbFn(search); 246 filter.registerCbFn(search);
  247 +loading.initLoadingMask();
244 248
245 //导航栏点击逻辑说明： 249 //导航栏点击逻辑说明：
246 //1.点击非active项时切换active状态 250 //1.点击非active项时切换active状态
@@ -248,6 +252,7 @@ filter.registerCbFn(search); @@ -248,6 +252,7 @@ filter.registerCbFn(search);
248 //3.筛选无active时点击展开筛选面板 252 //3.筛选无active时点击展开筛选面板
249 //4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态 253 //4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
250 //5.当前active为筛选并且点击其他项时，隐藏筛选面板 254 //5.当前active为筛选并且点击其他项时，隐藏筛选面板
  255 +
251 $listNav.delegate('li', 'tap', function() { 256 $listNav.delegate('li', 'tap', function() {
252 var $this = $(this), 257 var $this = $(this),
253 nav, 258 nav,
@@ -27,13 +27,17 @@ @@ -27,13 +27,17 @@
27 } 27 }
28 28
29 .banner-swiper { 29 .banner-swiper {
  30 + position: relative;
30 height: 309rem / $pxConvertRem; 31 height: 309rem / $pxConvertRem;
31 overflow: hidden; 32 overflow: hidden;
  33 +
32 ul { 34 ul {
33 position: relative; 35 position: relative;
34 - height: 100%; 36 + height: 309rem / $pxConvertRem;
  37 +
35 li { 38 li {
36 float: left; 39 float: left;
  40 + width: 100%;
37 height: 100%; 41 height: 100%;
38 img { 42 img {
39 width: 100%; 43 width: 100%;
@@ -3,10 +3,11 @@ @@ -3,10 +3,11 @@
3 3
4 .banner { 4 .banner {
5 display: block; 5 display: block;
6 - 6 + height: 400rem / $pxConvertRem;
  7 + overflow: hidden;
7 img { 8 img {
8 width: 100%; 9 width: 100%;
9 - height: 404rem / $pxConvertRem; 10 + height: 100%;
10 } 11 }
11 } 12 }
12 13
@@ -19,17 +20,13 @@ @@ -19,17 +20,13 @@
19 } 20 }
20 21
21 .classify-logo { 22 .classify-logo {
22 - display: table-cell;;  
23 width: 212rem / $pxConvertRem; 23 width: 212rem / $pxConvertRem;
24 - height: 140rem/ $pxConvertRem;  
25 - vertical-align: middle; 24 + height: 192rem / $pxConvertRem;
26 25
27 img { 26 img {
28 display: block; 27 display: block;
29 - max-width: 212rem / $pxConvertRem;  
30 - max-height: 140rem / $pxConvertRem;  
31 - vertical-align: middle;  
32 - margin: 0 auto; 28 + width: 100%;
  29 + height: 100%;
33 } 30 }
34 } 31 }
35 32
@@ -13,6 +13,7 @@ @@ -13,6 +13,7 @@
13 height: 174rem / $pxConvertRem; 13 height: 174rem / $pxConvertRem;
14 border-right: 1px solid #e0e0e0; 14 border-right: 1px solid #e0e0e0;
15 border-bottom: 1px solid #e0e0e0; 15 border-bottom: 1px solid #e0e0e0;
  16 + overflow: hidden;
16 17
17 .brand-logo { 18 .brand-logo {
18 display: table-cell; 19 display: table-cell;
@@ -37,6 +38,9 @@ @@ -37,6 +38,9 @@
37 text-decoration: none; 38 text-decoration: none;
38 border-bottom: none; 39 border-bottom: none;
39 overflow: hidden; 40 overflow: hidden;
  41 + text-overflow: ellipsis;
  42 + -o-text-overflow: ellipsis;
  43 + white-space: nowrap;
40 } 44 }
41 45
42 } 46 }
@@ -44,4 +48,17 @@ @@ -44,4 +48,17 @@
44 .brand:nth-child(4n) { 48 .brand:nth-child(4n) {
45 border-right: none; 49 border-right: none;
46 } 50 }
  51 +
  52 + .more {
  53 + .brand-logo {
  54 + display: block;
  55 + text-align: center;
  56 + line-height: 150rem / $pxConvertRem;
  57 +
  58 + .iconfont {
  59 + font-size: 48rem / $pxConvertRem;
  60 + color: #333;
  61 + }
  62 + }
  63 + }
47 } 64 }
1 -.floor-header{  
2 - margin: 29rem / $pxConvertRem 30rem / $pxConvertRem 0; 1 +.floor-header {
  2 + margin: (29rem / $pxConvertRem) (30rem / $pxConvertRem) 0;
3 background: #fff; 3 background: #fff;
4 border: 1px solid #e0e0e0; 4 border: 1px solid #e0e0e0;
5 border-bottom: none; 5 border-bottom: none;
@@ -10,22 +10,23 @@ @@ -10,22 +10,23 @@
10 color: #b1b1b1; 10 color: #b1b1b1;
11 } 11 }
12 12
13 -.floor-header-more{ 13 +.floor-header-more {
14 position: relative; 14 position: relative;
15 height: 99rem / $pxConvertRem; 15 height: 99rem / $pxConvertRem;
16 line-height: 99rem / $pxConvertRem; 16 line-height: 99rem / $pxConvertRem;
17 - margin: 29rem / $pxConvertRem 0 0; 17 + margin: (29rem / $pxConvertRem) 0 0;
18 background: #fff; 18 background: #fff;
19 - border-top:1px solid #e0e0e0; 19 + border-top: 1px solid #e0e0e0;
20 text-align: center; 20 text-align: center;
21 font-size: 32rem / $pxConvertRem; 21 font-size: 32rem / $pxConvertRem;
22 color: #444; 22 color: #444;
23 - .more-btn{ 23 +
  24 + .more-btn {
24 position: absolute; 25 position: absolute;
25 - right: 0.75rem; 26 + right: 30rem / $pxConvertRem;
26 top: 0; 27 top: 0;
27 bottom: 0; 28 bottom: 0;
28 color: #b0b0b0; 29 color: #b0b0b0;
29 - font-size: 1.25rem; 30 + font-size: 50rem / $pxConvertRem;
30 } 31 }
31 } 32 }
1 .category-swiper { 1 .category-swiper {
2 position: relative; 2 position: relative;
3 - height: 403rem / $pxConvertRem; 3 + height: 400rem / $pxConvertRem;
4 overflow: hidden; 4 overflow: hidden;
5 ul { 5 ul {
6 li { 6 li {
@@ -37,17 +37,20 @@ @@ -37,17 +37,20 @@
37 } 37 }
38 } 38 }
39 39
  40 +.goods-category {
  41 + background: #fff;
  42 +}
40 .goods-category .category-list { 43 .goods-category .category-list {
41 - background: #f5f7f6;  
42 - height: 383rem / $pxConvertRem; 44 + height: 382rem / $pxConvertRem;
43 border-bottom: 1px solid #e0e0e0; 45 border-bottom: 1px solid #e0e0e0;
  46 + border-top: 1px solid #e0e0e0;
44 overflow: hidden; 47 overflow: hidden;
45 li { 48 li {
46 float: left; 49 float: left;
47 width: 191rem / $pxConvertRem; 50 width: 191rem / $pxConvertRem;
48 height: 191rem / $pxConvertRem; 51 height: 191rem / $pxConvertRem;
49 border-left: 1px solid #e0e0e0; 52 border-left: 1px solid #e0e0e0;
50 - 53 + border-bottom: 1px solid #e0e0e0;
51 .first-show { 54 .first-show {
52 display: none; 55 display: none;
53 } 56 }
@@ -72,5 +75,17 @@ @@ -72,5 +75,17 @@
72 width: 253rem / $pxConvertRem; 75 width: 253rem / $pxConvertRem;
73 height: 382rem / $pxConvertRem; 76 height: 382rem / $pxConvertRem;
74 border-left: none; 77 border-left: none;
  78 + .img-box {
  79 + height: 100%;
  80 + line-height: 100%;
  81 + }
  82 +
  83 + .category-name {
  84 + line-height: 40rem / $pxConvertRem;
  85 + font-size: 22rem / $pxConvertRem;
  86 + }
  87 + }
  88 + li:nth-child(4), li:nth-child(5) {
  89 + border-top: 1px solid #e0e0e0;
75 } 90 }
76 } 91 }
1 .hot-brands { 1 .hot-brands {
2 - background: #fff;  
3 border-bottom: 1px solid #e0e0e0; 2 border-bottom: 1px solid #e0e0e0;
4 3
5 a { 4 a {
@@ -17,15 +16,14 @@ @@ -17,15 +16,14 @@
17 overflow: hidden; 16 overflow: hidden;
18 17
19 .brand-logo { 18 .brand-logo {
20 - display: table-cell;  
21 - width: 3.95rem; 19 + width: 100%;
22 height: 128rem / $pxConvertRem; 20 height: 128rem / $pxConvertRem;
23 line-height: 128rem / $pxConvertRem; 21 line-height: 128rem / $pxConvertRem;
24 text-align: center; 22 text-align: center;
25 font-size: 0; 23 font-size: 0;
26 - vertical-align: middle;  
27 24
28 img { 25 img {
  26 + vertical-align: middle;
29 max-width: 100%; 27 max-width: 100%;
30 max-height: 100%; 28 max-height: 100%;
31 } 29 }
@@ -69,29 +67,28 @@ @@ -69,29 +67,28 @@
69 .brands-swiper { 67 .brands-swiper {
70 background: #fff; 68 background: #fff;
71 width: 100%; 69 width: 100%;
72 - height: 180rem / $pxConvertRem; 70 + height: 140rem / $pxConvertRem;
73 margin-bottom: 28rem / $pxConvertRem; 71 margin-bottom: 28rem / $pxConvertRem;
  72 + border-top: 1px solid #e0e0e0;
74 overflow: hidden; 73 overflow: hidden;
75 74
76 .brands-list { 75 .brands-list {
77 position: relative; 76 position: relative;
78 - height: 180rem / $pxConvertRem; 77 + height: 140rem / $pxConvertRem;
79 78
80 li { 79 li {
81 float: left; 80 float: left;
82 padding-left: 5%; 81 padding-left: 5%;
83 width: 21.875%; 82 width: 21.875%;
84 height: 140rem / $pxConvertRem; 83 height: 140rem / $pxConvertRem;
85 - border-top: 1px solid #e0e0e0;  
86 84
87 a { 85 a {
88 position: relative; 86 position: relative;
89 - display: table-cell; 87 + display: block;
90 width: 100%; 88 width: 100%;
91 - height: 140rem / $pxConvertRem; 89 + height: 100%;
92 line-height: 140rem / $pxConvertRem; 90 line-height: 140rem / $pxConvertRem;
93 font-size: 0; 91 font-size: 0;
94 - vertical-align: middle;  
95 } 92 }
96 93
97 img { 94 img {
@@ -104,8 +101,7 @@ @@ -104,8 +101,7 @@
104 position: absolute; 101 position: absolute;
105 left: 8rem / $pxConvertRem; 102 left: 8rem / $pxConvertRem;
106 right: 8rem / $pxConvertRem; 103 right: 8rem / $pxConvertRem;
107 - bottom: -32rem / $pxConvertRem;  
108 - width: 100%; 104 + bottom: 8rem / $pxConvertRem;
109 height: 28rem / $pxConvertRem; 105 height: 28rem / $pxConvertRem;
110 line-height: 28rem / $pxConvertRem; 106 line-height: 28rem / $pxConvertRem;
111 text-align: center; 107 text-align: center;
1 .hot-category { 1 .hot-category {
2 margin: (30rem / $pxConvertRem) 0 0; 2 margin: (30rem / $pxConvertRem) 0 0;
3 - border-top: 1px solid #e0e0e0; 3 + border-bottom: 1px solid #e0e0e0;
  4 +
4 .category-banner { 5 .category-banner {
5 height: 198rem / $pxConvertRem; 6 height: 198rem / $pxConvertRem;
6 img { 7 img {
@@ -11,26 +12,36 @@ @@ -11,26 +12,36 @@
11 } 12 }
12 .category-list { 13 .category-list {
13 background: #fff; 14 background: #fff;
14 - border-top: 1px solid #e0e0e0; 15 +
15 li { 16 li {
16 float: left; 17 float: left;
17 width: 158rem / $pxConvertRem; 18 width: 158rem / $pxConvertRem;
18 height: 174rem / $pxConvertRem; 19 height: 174rem / $pxConvertRem;
19 - border-bottom: 1px solid #e0e0e0; 20 + border-top: 1px solid #e0e0e0;
20 border-left: 1px solid #e0e0e0; 21 border-left: 1px solid #e0e0e0;
  22 + overflow: hidden;
  23 +
21 .img-box { 24 .img-box {
22 width: 100%; 25 width: 100%;
23 height: 100%; 26 height: 100%;
24 - line-height: 138rem / $pxConvertRem; 27 + line-height: 174rem / $pxConvertRem;
25 text-align: center; 28 text-align: center;
26 - vertical-align: middle; 29 + overflow: hidden;
  30 + font-size: 0;
  31 +
27 img { 32 img {
  33 + vertical-align: middle;
28 max-width: 100%; 34 max-width: 100%;
29 max-height: 100%; 35 max-height: 100%;
30 - vertical-align: middle;  
31 } 36 }
32 } 37 }
33 38
  39 + .category-title {
  40 + line-height: 22rem / $pxConvertRem;
  41 + color: #aaa;
  42 + font-size: 18rem / $pxConvertRem;
  43 + text-align: center;
  44 + }
34 } 45 }
35 } 46 }
36 } 47 }
1 .icons-wrapper { 1 .icons-wrapper {
2 box-sizing: border-box; 2 box-sizing: border-box;
3 - padding: 30rem / $pxConvertRem 0 16rem / $pxConvertRem; 3 + padding: (30rem / $pxConvertRem) 0 (16rem / $pxConvertRem);
4 background: #fff; 4 background: #fff;
5 border-bottom: 1px solid #e0e0e0; 5 border-bottom: 1px solid #e0e0e0;
6 } 6 }
  7 +
7 .icons-item { 8 .icons-item {
8 float: left; 9 float: left;
9 margin-bottom: 10rem / $pxConvertRem; 10 margin-bottom: 10rem / $pxConvertRem;
10 - width:25%; 11 + width: 25%;
11 height: 146rem / $pxConvertRem; 12 height: 146rem / $pxConvertRem;
12 - text-align:center;  
13 - } 13 + text-align: center;
  14 +}
  15 +
14 .imagebar { 16 .imagebar {
15 - margin:0 auto;  
16 - display: flex;  
17 - display: -webkit-flex; 17 + display: block;
  18 + margin: 0 auto;
  19 + text-align: center;
18 width: 98rem / $pxConvertRem; 20 width: 98rem / $pxConvertRem;
19 height: 98rem / $pxConvertRem; 21 height: 98rem / $pxConvertRem;
  22 + line-height: 98rem / $pxConvertRem;
  23 + box-sizing: border-box;
20 overflow: hidden; 24 overflow: hidden;
21 - align-items:center;  
22 - justify-content: center; 25 +
23 img { 26 img {
24 - max-width: 100%;  
25 - max-height: 100%; 27 + width: 100%;
  28 + height: 100%;
26 } 29 }
27 } 30 }
  31 +
28 .linkbar { 32 .linkbar {
29 display: block; 33 display: block;
30 - line-height:44rem / $pxConvertRem;  
31 - font-size:24rem / $pxConvertRem; 34 + line-height: 44rem / $pxConvertRem;
  35 + font-size: 24rem / $pxConvertRem;
  36 + color: #444;
  37 +
  38 + &:visited, &:link, &:active, &:hover {
32 color: #444; 39 color: #444;
  40 + }
33 } 41 }
@@ -6,15 +6,18 @@ @@ -6,15 +6,18 @@
6 position: relative; 6 position: relative;
7 width: 100%; 7 width: 100%;
8 border-bottom: 1px solid #e0e0e0; 8 border-bottom: 1px solid #e0e0e0;
  9 +
9 .swiper-pagination { 10 .swiper-pagination {
10 position: absolute; 11 position: absolute;
11 left: 0; 12 left: 0;
12 right: 0; 13 right: 0;
13 bottom: 22rem / $pxConvertRem; 14 bottom: 22rem / $pxConvertRem;
14 text-align: center; 15 text-align: center;
  16 +
15 .pagination-inner { 17 .pagination-inner {
16 display: inline-block; 18 display: inline-block;
17 } 19 }
  20 +
18 span { 21 span {
19 float: left; 22 float: left;
20 width: 16rem / $pxConvertRem; 23 width: 16rem / $pxConvertRem;
@@ -23,7 +26,8 @@ @@ -23,7 +26,8 @@
23 background: #efefef; 26 background: #efefef;
24 border-radius: 50%; 27 border-radius: 50%;
25 } 28 }
26 - span.swiper-active-switch { 29 +
  30 + span.swiper-pagination-bullet-active {
27 background: #b0b0b0; 31 background: #b0b0b0;
28 } 32 }
29 } 33 }
@@ -32,35 +36,47 @@ @@ -32,35 +36,47 @@
32 .trend-topic-swiper { 36 .trend-topic-swiper {
33 height: 534rem / $pxConvertRem; 37 height: 534rem / $pxConvertRem;
34 overflow: hidden; 38 overflow: hidden;
  39 +
35 ul { 40 ul {
36 position: relative; 41 position: relative;
  42 +
37 li { 43 li {
38 float: left; 44 float: left;
39 height: 534rem / $pxConvertRem; 45 height: 534rem / $pxConvertRem;
  46 +
40 .img-box { 47 .img-box {
41 - display: flex;  
42 - display: -webkit-flex; 48 + margin: 0 auto;
  49 + width: 580rem / $pxConvertRem;
43 height: 360rem / $pxConvertRem; 50 height: 360rem / $pxConvertRem;
44 - margin: 0 (30rem / $pxConvertRem);  
45 - align-items: center;  
46 - justify-content: center; 51 + line-height: 360rem / $pxConvertRem;
  52 + text-align: center;
  53 +
47 img { 54 img {
48 - max-width: 100%;  
49 - max-height: 100%; 55 + vertical-align: middle;
  56 + width: 100%;
  57 + height: 100%;
50 } 58 }
51 } 59 }
  60 +
52 .item-content { 61 .item-content {
53 margin: (20rem / $pxConvertRem) (30rem / $pxConvertRem) 0; 62 margin: (20rem / $pxConvertRem) (30rem / $pxConvertRem) 0;
  63 +
54 .title { 64 .title {
55 line-height: 52rem / $pxConvertRem; 65 line-height: 52rem / $pxConvertRem;
56 font-size: 30rem / $pxConvertRem; 66 font-size: 30rem / $pxConvertRem;
57 color: #000; 67 color: #000;
  68 + overflow: hidden;
  69 + text-overflow: ellipsis;
  70 + -o-text-overflow: ellipsis;
  71 + white-space: nowrap;
58 } 72 }
  73 +
59 .time { 74 .time {
60 margin: (16rem / $pxConvertRem) 0 0; 75 margin: (16rem / $pxConvertRem) 0 0;
61 line-height: 24rem / $pxConvertRem; 76 line-height: 24rem / $pxConvertRem;
62 color: #afafaf; 77 color: #afafaf;
63 font-size: 18rem / $pxConvertRem; 78 font-size: 18rem / $pxConvertRem;
  79 +
64 .time-icon { 80 .time-icon {
65 margin-right: 8rem / $pxConvertRem; 81 margin-right: 8rem / $pxConvertRem;
66 font-size: 14rem / $pxConvertRem; 82 font-size: 14rem / $pxConvertRem;
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 .trend-coll-header { 7 .trend-coll-header {
8 position: relative; 8 position: relative;
9 widows: 100%; 9 widows: 100%;
  10 +
10 .trend-coll-title { 11 .trend-coll-title {
11 width: 100%; 12 width: 100%;
12 height: 100rem / $pxConvertRem; 13 height: 100rem / $pxConvertRem;
@@ -15,6 +16,7 @@ @@ -15,6 +16,7 @@
15 font-size: 34rem / $pxConvertRem; 16 font-size: 34rem / $pxConvertRem;
16 color: #747474; 17 color: #747474;
17 } 18 }
  19 +
18 .more { 20 .more {
19 position: absolute; 21 position: absolute;
20 right: 24rem / $pxConvertRem; 22 right: 24rem / $pxConvertRem;
@@ -23,13 +25,15 @@ @@ -23,13 +25,15 @@
23 } 25 }
24 26
25 .trend-coll-content { 27 .trend-coll-content {
26 - padding: 0 (15rem / $pxConvertRem); 28 + padding: 0 0 0 (15rem / $pxConvertRem);
  29 +
27 .lspan { 30 .lspan {
28 float: left; 31 float: left;
29 margin: 0 (15rem / $pxConvertRem); 32 margin: 0 (15rem / $pxConvertRem);
30 } 33 }
  34 +
31 .rspan { 35 .rspan {
32 - float: right; 36 + float: left;
33 margin: 0 (15rem / $pxConvertRem); 37 margin: 0 (15rem / $pxConvertRem);
34 } 38 }
35 } 39 }
@@ -71,20 +75,23 @@ @@ -71,20 +75,23 @@
71 75
72 .recommend-list { 76 .recommend-list {
73 position: relative; 77 position: relative;
74 - .recommend-item { 78 + height: 100%;
  79 +}
  80 +
  81 +.recommend-list .recommend-item {
75 float: left; 82 float: left;
76 - padding-left: 30rem / $pxConvertRem;  
77 - width: 140rem / $pxConvertRem; 83 + padding-left: 5%;
  84 + width: 21.875%;
78 height: 140rem / $pxConvertRem; 85 height: 140rem / $pxConvertRem;
  86 +
79 a { 87 a {
80 display: block; 88 display: block;
81 width: 100%; 89 width: 100%;
82 height: 100%; 90 height: 100%;
  91 +
83 img { 92 img {
84 width: 100%; 93 width: 100%;
85 height: 100%; 94 height: 100%;
86 } 95 }
87 } 96 }
88 - }  
89 } 97 }
90 -