.coupon-content { color: #fff; height: 180px; overflow: hidden; .coupon-big { height: 120px; width: 580px; background: resolve("product/coupon-big.png") no-repeat; background-size: 580px 120px; margin: 30px; position: relative; .coupon-left { position: absolute; margin: 10px 0; } .coupon-left .coupon-left-price { margin: 0 25px; float: left; } .coupon-left .coupon-left-price .coupon-sign { font-size: 50px; } .coupon-left .coupon-left-price .coupon-price { font-size: 72px; } .coupon-left .coupon-left-name { font-size: 22px; width: 250px; height: 100px; float: left; align-items: center; display: flex; } .coupon-right { width: 20px; font-size: 22px; right: 5%; position: absolute; height: inherit; line-height: 1.2em; align-items: center; display: flex; } } .coupon-small { height: 120px; width: 245px; background: resolve("product/coupon-small.png") no-repeat; background-size: 245px 120px; margin: 30px 0 30px 30px; position: relative; float: left; display: table; .coupon-left { position: absolute; width: 165px; overflow: hidden; margin: 0 30px; height: inherit; } .coupon-left .coupon-left-price { width: inherit; display: inline-block; height: 60px; } .coupon-left .coupon-left-price .coupon-sign { font-size: 42px; } .coupon-left .coupon-left-price .coupon-price { font-size: 52px; } .coupon-left .coupon-left-name { font-size: 16px; width: 150px; overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .coupon-right { width: 20px; font-size: 18px; right: 7.5%; position: absolute; height: inherit; line-height: 1.2em; align-items: center; display: flex; } } }