.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: #444444; } } } .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('me/employ/employ.jpg'); background-position: top center; background-repeat:no-repeat; background-size: 100% 100%; color: #fff; position: relative; &.focus { background-image: resolve('me/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('me/employ/employsy.png') right top no-repeat; background-size:auto 100%; } } .null{ width: 100%; height:auto; overflow: hidden; position: absolute; left: 0; top:50%; transform: translateY(-50%); i{ width: 100%; height: 120px; overflow: hidden; display: block; background: resolve('me/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: #444444; color: #fff; text-align: center; margin: 60px auto 0; border-radius: .2rem } } } .none{ display: none; } }