.hot-brands { border-bottom: 1px solid #e0e0e0; background: #fff; .floor-header { width: 100%; background: #f0f0f0; padding: 0 30px; margin: 0; border: 0; h2 { border: 1px solid #e0e0e0; background: #fff; border-bottom: 0; } } a { display: block; text-decoration: none; height: 100%; } .brand { float: left; background-color: #e0e0e0; width: 160px; height: 160px; overflow: hidden; padding: 1PX 1PX 0 0; &:nth-child(4n + 1) { padding: 1PX 0 0; } .brand-logo { width: 100%; height: 100%; text-align: center; font-size: 0; vertical-align: middle; img { width: 100%; height: 100%; } } .brand-name { line-height: 44px; font-size: 18px; color: #babac2; text-align: center; text-decoration: none; border-bottom: none; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } } .brand:nth-child(5n) { border-right: none; } .more { float: left; width: 320px; height: 160px; overflow: hidden; a { display: block; width: 100%; height: 100%; &.default { background: url("img/channel/more-brand.png") no-repeat; background-size: 100% 100%; } } } } .brands-swiper { background: #fff; width: 100%; height: 160px; border-top: 1px solid #e0e0e0; overflow: hidden; .brands-list { position: relative; height: 160px; li { float: left; padding-left: 5%; padding-bottom: 5%; width: 21.875%; height: 140px; position: relative; a { position: relative; display: block; width: 100%; height: 100%; line-height: 140px; font-size: 0; } img { display: inline-block; max-width: 100%; max-height: 100%; } .brands-title { position: absolute; left: 0; right: 8px; bottom: -5px; height: 28px; line-height: 28px; text-align: center; font-size: 18px; color: #444; background: rgba(255, 255, 255, 0.5); overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; } } } }