_coupons.css 3.46 KB
.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;
    }
}