_coupons.css 3.5 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: #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('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: #444;
                color: #fff;
                text-align: center;
                margin: 60px auto 0;
                border-radius: 0.2rem
            }
        }
    }

    .none {
        display: none;
    }
}