.good-info { margin-bottom: 35px; width: 222px; margin-right: 10px; float: left; .good-detail-img { width: 100%; height: 315px; position: relative; .good-thumb, img.lazy { display: block; overflow: hidden; width: 100%; height: 100%; } .few-tag { width: 100%; position: absolute; left: 0; height: 16px; line-height: 16px; background: #ffac5b; color: #fff; font-size: 12px; text-align: center; bottom: 0; } .sale-out { width: 100%; position: absolute; left: 0; height: 16px; line-height: 16px; background: #bebebe; color: #fff; font-size: 12px; text-align: center; bottom: 0; } } .good-detail-text { height: 80px; color: #222; font-size: 12px; text-align: left; overflow: hidden; > a { margin-top: 16px; line-height: 1.5; display: block; @mixin ellipsis ; } > .price { margin-top: 5px; line-height: 22px; } .brand { a { color: #666; line-height: 1.5; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .market-price { text-decoration: line-through; color: #999; margin-right: 15px; } .discount { font-size: 12px; color: #fff; padding: 0 6px 0 16px; background: resolve("product/discount-tag.png") no-repeat; display: inline-block; } } .col-btn { position: absolute; top: 15px; right: 15px; color: #ccc; font-size: 12px; &.coled { color: #f95b4f; } } .tag-container { font-size: 12px; height: 22px; line-height: 22px; .good-tag { float: left; box-sizing: border-box; display: block; height: 22px; padding: 0 7px; margin-right: 3px; color: #fff; &:nth-last-of-type(1) { margin-right: 0; } } .global-tag { background-color: #482d3d; font-weight: 300; &:before { content: ""; width: 16px; height: 14px; margin-right: 2px; background-image: url("/product/airplane-tag.png"); display: inline-block; vertical-align: sub; } } .new-tag { background: #78dc7d; } .renew-tag { background: #78dc7e; } .new-festival-tag { width: 72px; text-align: center; background-image: resolve("product/newPro-icon.png"); color: #000; padding: 0; } .yep-tag, .ymp-tag, .sale-tag { background: #ff565b; } .limit-tag { color: #4e4e4e; border: 1px solid #4e4e4e; } .presell-tag { background: #000; } } } @keyframes slideRight { from { max-width: 0; } to { max-width: 150px; } } .good-item-wrapper { border: 1px solid #ddd; padding-left: 20px; padding-top: 18px; padding-right: 20px; position: absolute; background: #fff; display: none; .good-info-main { float: left; } .col-btn { display: block; &:hover { cursor: pointer; } } .good-select-color { float: left; margin-top: 22px; overflow: hidden; animation: slideRight 600ms 1; ul { display: block; float: left; margin-left: 15px; } li { width: 50px; margin-bottom: 15px; a, img { display: block; overflow: hidden; width: 100%; } } } .good-info { margin-right: 10px; } } .block-next-page { width: 222px; height: 297px; padding-top: 22px; margin-bottom: 35px; margin-right: 10px; float: left; cursor: pointer; a { display: block; img { width: 100%; height: 100%; display: block; overflow: hidden; } } }