.my-coupon-page { .employ { width: 100%; height: 90px; border-bottom: 1px solid #e0e0e0; position: relative; span { width: 49%; height: 48px; line-height: 48px; overflow: hidden; border-right: 2PX solid #e0e0e0; margin: 21px 0; float: left; text-align: center; font-size: 32px; color: #b0b0b0; &:last-of-type { border: none; } &.active { color: #444; } } } .coupon-list { width: 100%; height: auto; overflow: hidden; .employ-main { display: block; width: 90.625%; height: 180px; overflow: hidden; margin: 30px auto; background-image: resolve("home/employ/employ.jpg"); background-position: top center; background-repeat: no-repeat; background-size: 100% 100%; color: #fff; position: relative; &.focus { background-image: resolve("home/employ/employ-red.jpg"); } span { width: 34.482759%; height: 100%; float: left; text-align: center; line-height: 180px; font-size: 86px; } p { width: 59.517241%; height: auto; margin: 0 12px; float: left; &:first-of-type { margin-top: 30px; font-size: 27.4px; height: auto; min-height: 80px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } i { width: 100%; height: 100%; overflow: hidden; display: block; position: absolute; top: 0; left: 0; background: resolve("home/employ/employsy.png") right top no-repeat; background-size: auto 100%; } } .null { width: 100%; height: auto; overflow: hidden; position: fixed; left: 0; top: 50%; transform: translateY(-50%); i { width: 100%; height: 120px; overflow: hidden; display: block; background: resolve("home/employ/not.png") center top no-repeat; background-size: auto 100%; } p { width: 100%; height: auto; overflow: hidden; padding: 20px 0 0; font-size: 32px; text-align: center; color: #444; } a { width: 73.75%; height: 80px; overflow: hidden; font-size: 36px; line-height: 80px; display: block; background: #444; color: #fff; text-align: center; margin: 60px auto 0; border-radius: 0.2rem; } } } .none { display: none; } }