Authored by xuqi

Merge branch 'feature/hotrank' into 'web'

Feature/hotrank

hotrank html css js
js主要功能: 1.Banner图片轮播 2.品牌列表切换 3.一周热卖点击导航切换商品列表(后端提供接口) 4.一周热卖下拉加载商品列表(后端提供接口)
Review by @徐祁

See merge request !69
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 +}