.product-container { overflow: hidden; padding: 0 20px 10px; font-size: 22px; &.item3 { padding: 0 20px 10px; font-size: 20px; .feature-product-info { width: 193px; margin-right: 10px; &:nth-of-type(2n) { margin-right: 10px; } &:nth-of-type(3n) { margin-right: 0; } .product-detail-imgbox .product-detail-img { height: 257px; } .product-detail-imgbox .product-detail-img-new { height: 243px; } .price, .vipprice { line-height: 34px; height: 34px; } .sale-price, .vipprice { font-size: 26px; } } .brand-name { margin-left: 2px; line-height: 23px; font-size: 18px !important; } .new-price { > .sale-price { margin-left: 6px; font-size: 24px; font-weight: 700; color: #fff; } > .market-price { margin-left: 6px; font-size: 18px; font-weight: 400; color: #fff; } } .second-part > .new-brand-div { position: absolute; top: -4px; left: 50%; width: 100%; transform: translateX(-50%); } } .product-source { display: block; overflow: hidden; position: relative; } .feature-product-info { float: left; width: 288px; margin-right: 20px; margin-top: 25px; overflow: hidden; &.novisible { visibility: hidden; } &:nth-of-type(2n) { margin-right: 0; } a { display: block; text-decoration: none; } img { display: block; width: 100%; } .first-part { background: #fff; } .product-detail-imgbox { position: relative; .product-detail-img { width: 100%; height: 380px; } } .product-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #444; height: 60px; line-height: 35px; padding: 0 5px; } .leftopimg { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 1; } .rigtopimg { position: absolute; right: 0; top: 0; width: 100%; height: auto; z-index: 1; } .vipprice { line-height: 40px; height: 40px; white-space: nowrap; text-align: center; font-size: 26px; color: #000; } .vip-price-text { margin-right: 10px; font-weight: 500; } .price { font-size: 18px; line-height: 40px; height: 40px; white-space: nowrap; text-align: center; } .sale-price { color: #f73207; font-size: 30px; } .market-price { margin: 0 0 0 3px; color: #bebebe; text-decoration: line-through; } } .second-part { display: block; color: #fff; font-size: 32px; position: relative; .brand-div { position: absolute; top: 4px; left: 50%; width: 100%; height: 60px; transform: translateX(-50%); text-align: center; font-size: 26px; .brand-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .new-brand-div { position: absolute; top: 8px; left: 50%; width: 100%; transform: translateX(-50%); } .brand-img { display: block; margin: 0 auto; } } .new-brand-name { position: absolute; bottom: 0; left: 0; right: 0; background-color: #272829; padding-top: 5px; padding-bottom: 5px; .brand-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-align: center; line-height: 30px; overflow: hidden; font-size: 26px; color: #fff; } } .new-price { margin-left: 5px; height: 40px; line-height: 40px; color: #fff; white-space: nowrap; > .sale-price { margin-left: 10px; font-size: 32px; font-weight: 700; color: #fff; } > .market-price { margin-left: 10px; font-size: 24px; font-weight: 400; color: #fff; } } }