.hotrank-page { width: 990px; margin: 0 auto; .popular-list { width: 1160px; li { position: relative; float: left; width: 324px; height: 521px; overflow: hidden; list-style: none; margin: 0 8px 0 0; .item-img { width: 100%; height: 434px; line-height: 434px; text-align: center; overflow: hidden; } img { display: block; width: 100%; height: 100%; } .polular-icon { position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 60px; background: #ffc513 image-url('product/hotrank/popular-icon.png') no-repeat center center; text-align: center; color: #ffc513; font-weight: bold; } .item-content { width: 100%; padding: 14px 0 0 0; height: 77px; overflow: hidden; text-align: center; color: #222; line-height: 18px; h2 { max-height: 36px; font-size: 12px; color: #000; line-height: 18px; text-align: center; overflow: hidden; } p { display: inline-block; margin: 3px 0 0 0; font-size: 12px; *zoom: 1; *display: inline; text-align: center; line-height: 20px; color: #000; span { text-decoration: line-through; margin: 0 10px 0 0; color: #999; } } } } .popular-item6, .popular-item7, .popular-item8, .popular-item9 { width: 240px; height: 408px; margin: 0 10px 0 0; overflow: hidden; .item-img { height: 320px; line-height: 320px; } } } .hot-week { position: relative; padding: 0 0 40px; } .hot-cate { height: 45px; background: #f5f7f6; overflow: hidden; li { float: left; height: 45px; line-height: 45px; display: table-cell; a { vertical-align: middle; padding: 0 26px; font-size: 14px; color: #777; line-height: 20px; border-left: 1px solid #999; } } li:first-child { a { border: none; } } li.current { a { font-size: 16px; color: #000; } } } .hot-week-list { width: 1160px; .good-info { width: 240px; height: 408px; margin: 10px 10px 0 0; .tag-container { display: none; } .good-detail-img { height: 320px; line-height: 320px; text-align: center; font-size: 0; img { vertical-align: middle; } } .good-detail-text { height: 77px; overflow: hidden; text-align: center; color: #222; line-height: 18px; a { max-height: 36px; font-size: 12px; color: #000; line-height: 18px; text-align: center; overflow: hidden; } p { display: inline-block; margin: 3px 0 0 0; font-size: 12px; *zoom: 1; *display: inline; text-align: center; line-height: 20px; color: #000; .sale-price { text-decoration: line-through; margin: 0 10px 0 0; color: #999; } } } } } .floatlayer { display: none; position: fixed; top: 50%; left: 50%; margin: 0 0 0 575px; opacity: 0; filter: alpha(opacity = 0); li { width: 42px; height: 42px; border: 2px solid #555; border-top: none; border-bottom-width: 1px; text-align: center; a { position: relative; display: table-cell; width: 42px; height: 42px; vertical-align: middle; color: #555; font-size: 12px; span { display: inline-block; vertical-align: middle; width: 28px; *zoom: 1; *display: inline; word-wrap: break-word; } } } li:first-child { border-top: 1px solid #555; } li.current, li:hover { background: #555; a { color: #fff; } } } } @media screen and (min-width: 1150px) { .hotrank-page { width: 1150px; .popular-list { li { width: 378px; height: 596px; .item-img { height: 506px; line-height: 506px; } } .popular-item6, .popular-item7, .popular-item8, .popular-item9 { width: 280px; height: 464px; .item-img { height: 374px; line-height: 374px; } } } .hot-week-list { .good-info { width: 280px; height: 464px; .good-detail-img { height: 374px; line-height: 374px; } } } } }