.top-coupon-wrap { width: 100%; height: 80px; margin-bottom: 20px; font-size: 0; position: relative; user-select: none; > * { cursor: default; } .coupon-title { width: 164px; height: 100%; background: #fff resolve("product/coupon-title.png") no-repeat left center; float: left; } .coupon-list { width: 800px; height: 100%; float: right; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .coupon-item { width: 230px; height: 100%; margin: 0 11px; color: #fff; background: #d0021b; display: inline-block; vertical-align: top; position: relative; &:before { content: ""; display: block; width: 6px; height: 100%; background: url("/product/coupon-left.png"); position: absolute; top: 0; left: -4px; } &:after { content: ""; display: block; width: 6px; height: 100%; background: url("/product/coupon-right.png"); position: absolute; top: 0; right: -4px; } } .cp-info { width: 130px; padding: 12px 0 0 16px; float: left; > p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .price { font-size: 36px; font-weight: 500; display: block; margin-bottom: 4px; } .term { border-top: 1px dashed #ea808a; display: none; } } .pick-btn { width: 40px; height: 40px; font-size: 20px; text-align: center; float: right; border-left: 1px solid #ea808a; margin: 10px 0; cursor: pointer; white-space: pre-line; padding: 10px 20px; } .picked { width: 60px; padding: 10px; line-height: 40px; } &.num1 { .coupon-title { width: 230px; background-image: resolve("product/coupon-title-large.png"); } .coupon-list { width: 738px; } .coupon-item { width: 724px; } .cp-info { width: 252px; padding-left: 294px; padding-top: 0; .price { width: 250px; line-height: 80px; font-size: 40px; position: absolute; margin-left: -270px; margin-bottom: 0; } > p { font-size: 16px; line-height: 1.5; } .limit-text { margin-top: 16px; } .term { display: block; } } .picked, .pick-btn { width: 100px; line-height: 40px; padding: 10px 20px; white-space: nowrap; } } &.num2 { .coupon-item { width: 380px; } .cp-info { width: 224px; padding: 12px 16px 0; .price { margin-bottom: 0; } .limit-text { text-align: right; margin-top: -20px; padding-left: 100px; } .term { margin-top: 6px; line-height: 1.5; display: block; } } .picked, .pick-btn { width: 80px; line-height: 40px; padding: 10px 20px; white-space: nowrap; } } &.num3 .coupon-item { width: 244px; } .coupon-btn { height: 80px; background: #fff; padding-left: 2px; text-align: center; position: absolute; right: 0; > * { width: 36px; height: 36px; line-height: 36px; font-size: 24px; color: #fff; background: #d0021b; display: block; cursor: pointer; } .next-btn { margin-top: 8px; } .btn-end { background: #b5b5b5; } } } .min-screen .top-coupon-wrap { .coupon-list { width: 644px; } .coupon-item { width: 178px; .cp-info { width: 94px; .price { font-size: 20px; line-height: 32px; } } .pick-btn { padding: 10px 12px; } } &.num1 { .coupon-list { width: 580px; } .coupon-item { width: 566px; .cp-info { width: 246px; padding-left: 170px; } .price { line-height: 80px; font-size: 40px; margin-left: -150px; } } } &.num2 .coupon-item { width: 302px; .cp-info { width: 186px; .limit-text { padding-left: 64px; } } .pick-btn { width: 40px; line-height: 1; padding: 10px 20px; white-space: pre-line; } } &.num3 .coupon-item { width: 192px; .cp-info { width: 94px; } } } .top-coupon-dialog { > .close .iconfont { font-size: 28px; } .content { font-size: 22px; font-weight: 600; color: #444; margin: 10px 0 20px; .iconfont { font-size: 28px; vertical-align: middle; color: #d1061e; font-weight: normal; margin-right: 14px; } } .sub-content { font-size: 14px; line-height: 1.5; text-align: center; color: #555; .price { font-size: 30px; color: #d1061e; line-height: 1; margin-bottom: 16px; display: inline-block; } } .btns { margin-top: 20px; .btn { width: 128px; height: 30px; line-height: 30px; margin-left: 0; font-size: 14px; } .btn:first-child { margin-right: -1px; } .black { background: #000; color: #fff; } } }