Merge branch 'feature/hotrank' into 'web'
Feature/hotrank hotrank html css js js主要功能: 1.Banner图片轮播 2.品牌列表切换 3.一周热卖点击导航切换商品列表(后端提供接口) 4.一周热卖下拉加载商品列表(后端提供接口) Review by @徐祁 See merge request !69
Showing
1 changed file
with
61 additions
and
24 deletions
1 | -.hotrank-page { | ||
2 | - width: 1150px; | 1 | +.hotrank-page { |
2 | + width: 990px; | ||
3 | margin: 0 auto; | 3 | margin: 0 auto; |
4 | 4 | ||
5 | - .popular-goods { | ||
6 | - .popular-list { | ||
7 | - width: 1160px; | ||
8 | - } | 5 | + .popular-list { |
6 | + width: 1160px; | ||
9 | 7 | ||
10 | li { | 8 | li { |
11 | position: relative; | 9 | position: relative; |
12 | float: left; | 10 | float: left; |
13 | - width: 378px; | ||
14 | - height: 596px; | 11 | + width: 324px; |
12 | + height: 521px; | ||
15 | overflow: hidden; | 13 | overflow: hidden; |
16 | list-style: none; | 14 | list-style: none; |
17 | margin: 0 8px 0 0; | 15 | margin: 0 8px 0 0; |
18 | 16 | ||
19 | .item-img { | 17 | .item-img { |
20 | - width: 378px; | ||
21 | - height: 506px; | ||
22 | - line-height: 506px; | 18 | + width: 100%; |
19 | + height: 434px; | ||
20 | + line-height: 434px; | ||
23 | text-align: center; | 21 | text-align: center; |
24 | overflow: hidden; | 22 | overflow: hidden; |
25 | } | 23 | } |
@@ -44,7 +42,7 @@ | @@ -44,7 +42,7 @@ | ||
44 | } | 42 | } |
45 | 43 | ||
46 | .item-content { | 44 | .item-content { |
47 | - width: 378px; | 45 | + width: 100%; |
48 | padding: 14px 0 0 0; | 46 | padding: 14px 0 0 0; |
49 | height: 77px; | 47 | height: 77px; |
50 | overflow: hidden; | 48 | overflow: hidden; |
@@ -84,20 +82,16 @@ | @@ -84,20 +82,16 @@ | ||
84 | .popular-item7, | 82 | .popular-item7, |
85 | .popular-item8, | 83 | .popular-item8, |
86 | .popular-item9 { | 84 | .popular-item9 { |
87 | - width: 280px; | ||
88 | - height: 464px; | 85 | + width: 240px; |
86 | + height: 408px; | ||
89 | margin: 0 10px 0 0; | 87 | margin: 0 10px 0 0; |
90 | overflow: hidden; | 88 | overflow: hidden; |
91 | 89 | ||
92 | .item-img { | 90 | .item-img { |
93 | - width: 280px; | ||
94 | - height: 374px; | ||
95 | - line-height: 374px; | 91 | + height: 320px; |
92 | + line-height: 320px; | ||
96 | } | 93 | } |
97 | 94 | ||
98 | - .item-content { | ||
99 | - width: 280px; | ||
100 | - } | ||
101 | } | 95 | } |
102 | } | 96 | } |
103 | 97 | ||
@@ -145,8 +139,8 @@ | @@ -145,8 +139,8 @@ | ||
145 | width: 1160px; | 139 | width: 1160px; |
146 | 140 | ||
147 | .good-info { | 141 | .good-info { |
148 | - width: 280px; | ||
149 | - height: 464px; | 142 | + width: 240px; |
143 | + height: 408px; | ||
150 | margin: 10px 10px 0 0; | 144 | margin: 10px 10px 0 0; |
151 | 145 | ||
152 | .tag-container { | 146 | .tag-container { |
@@ -154,8 +148,8 @@ | @@ -154,8 +148,8 @@ | ||
154 | } | 148 | } |
155 | 149 | ||
156 | .good-detail-img { | 150 | .good-detail-img { |
157 | - height: 374px; | ||
158 | - line-height: 374px; | 151 | + height: 320px; |
152 | + line-height: 320px; | ||
159 | text-align: center; | 153 | text-align: center; |
160 | font-size: 0; | 154 | font-size: 0; |
161 | 155 | ||
@@ -250,3 +244,46 @@ | @@ -250,3 +244,46 @@ | ||
250 | } | 244 | } |
251 | } | 245 | } |
252 | } | 246 | } |
247 | + | ||
248 | +@media screen and (min-width: 1150px) { | ||
249 | +.hotrank-page { | ||
250 | + width: 1150px; | ||
251 | + | ||
252 | + .popular-list { | ||
253 | + li { | ||
254 | + width: 378px; | ||
255 | + height: 596px; | ||
256 | + .item-img { | ||
257 | + height: 506px; | ||
258 | + line-height: 506px; | ||
259 | + } | ||
260 | + } | ||
261 | + | ||
262 | + .popular-item6, | ||
263 | + .popular-item7, | ||
264 | + .popular-item8, | ||
265 | + .popular-item9 { | ||
266 | + width: 280px; | ||
267 | + height: 464px; | ||
268 | + | ||
269 | + .item-img { | ||
270 | + height: 374px; | ||
271 | + line-height: 374px; | ||
272 | + } | ||
273 | + | ||
274 | + } | ||
275 | + } | ||
276 | + | ||
277 | + .hot-week-list { | ||
278 | + .good-info { | ||
279 | + width: 280px; | ||
280 | + height: 464px; | ||
281 | + | ||
282 | + .good-detail-img { | ||
283 | + height: 374px; | ||
284 | + line-height: 374px; | ||
285 | + } | ||
286 | + } | ||
287 | + } | ||
288 | +} | ||
289 | +} |
-
Please register or login to post a comment