.me-coupons-page { font-size: 12px; .coupons > .title { font-size: 14px; font-weight: bold; } .coupons-wrap { width: 776px; border: 1px solid #e6e6e6; margin: 0 auto 10px; .coupons-name { width: 240px; } .coupons-info { width: 388px; .coupons-text { color: #000; padding: 0 25px; text-align: left; } } .coupons-opt { width: 100px; color: #000; } } .coupons-header { height: 25px; padding: 0 20px; line-height: 25px; text-align: center; border-bottom: 1px solid #e6e6e6; background: #efefef; span { display: block; float: left; } } .coupon { display: table; border-bottom: 1px solid #e6e6e6; width: 736px; margin: 0 auto; text-align: center; color: #666; padding: 15px 0; > * { display: table-cell; vertical-align: middle; line-height: 20px; } .coupons-img { border-left: none; } &:last-child { border-bottom: none; } .coupons-card { width: 240px; height: 80px; color: #fff; &.coupons-notuse { background-image: resolve(home/notuse.png); .coupons-dtl { width: 150px; } } &.coupons-use { background-image: resolve(home/use.png); } &.coupons-overtime { background-image: resolve(home/overtime.png); } .coupons-date { padding: 0 10px; } .coupons-num { margin-top: 10px; .coupons-sht { width: 70px; } .coupons-sht .coupons-price { font-size: 20px; line-height: 24px; } .coupons-dtl { width: 100px; height: 45px; margin-left: 5px; line-height: 23px; text-align: left; overflow: hidden; } } } .coupons-opt { .btn { width: 90px; height: 30px; display: inline-block; line-height: 30px; float: left; } .use-btn { border: 1px solid; cursor: pointer; } .overtime-btn { background: #ccc; color: #fff; } } } .coupon .end-soon { color: #e8044f; } .un-use-coupons { .coupons-img { width: 20%; } .value { width: 18%; } .term-of-validity { width: 22%; span { display: none; } } .use-remark { width: 24%; } .status { width: 16%; } .end-soon span { display: inline; padding: 3px 10px; color: #fff; background: #e8044f; } } }