.use-coupon { display: flex; flex-flow: column; height: 100%; background-color: #f5f5f5; .coupons-area { padding: 72px 12px 0px; background: $bg_f5f5f5; flex: 1 1 auto; .empty { min-height: 211px; line-height: 211px; font-size: $font_12; color: $color_666; text-align: center; } .invalid-title { text-align: center; font-size: $font_12; line-height: 52px; color: $color_999; } } .free-coupon-box { position: fixed; width: 100%; top: 0; left: 0; right: 0; bottom: 0; text-align: center; background: rgba(0,0,0,.6); z-index: 11; .free-coupon-content { width: 290px; border-radius: 10px; background-color: #fff; padding: 20px; margin: 150px auto 0 auto; .coures-content-success { height: 30px; line-height: 30px; i { font-size: 34px; color: #09f; } } .coures-content-title { font-size: 15px; color: #333; margin-top: 10px; } .coures-content-img { width: 150px; height: 108px; border-radius: 3px; margin-top: 20px; } .coures-content-tip { color: #FF3131; font-size: 12px; margin-top: 20px; text-align: left; line-height: 15px; height: 30px; i { display: inline-block; color: #FF3131; font-size: 18px; position: relative; top: 6px; } span{ display: inline-block; margin-left: 20px; position: relative; top: -15px; } } .toStudy { display: inline-block; width: 138px; height: 30px; line-height: 30px; background-color: #09f; border-radius: 15px; margin-top: 20px; font-size: 15px; color: #fff; } } .free-coupon-close { margin-top: 30px; i{ font-size: 26px; color: #fff; } } } }