xinkeaboard/xinkeaboard-web/assets/style/coupon.scss

.sld_my_coupon {
    width: 1007px;
    margin-left: 10px;
    float: left;
    .my_coupon_con {
        border: 1px solid #eeeeee;
        background: #ffffff;
        .nav_list {
            background-color: white;
            .con {
                border-bottom: 1px solid#EEEEEE;
                height: 42px;

                .nav_item {
                    width: 145px;
                    height: 42px;
                    line-height: 42px;
                    text-align: center;
                    color: #444444;
                    font-size: 14px;
                    border: 1px solid #eeeeee;
                    border-bottom: none;
                    border-top: none;

                    &:not(:first-child) {
                        border-left: none;
                    }

                    &.active {
                        color: $colorMain2;
                        border: none;
                        border-right: 1px solid #eeeeee;
                        background: #ffffff;
                        font-weight: 600;
                    }
                    &:hover {
                        color: $colorMain2;
                    }
                }
            }
        }

        .coupon_container {
            width: 100%;
            flex-wrap: wrap;
            .coupon_item {
                width: 228px;
                height: 268px;
                background-size: cover;
                position: relative;
                text-align: center;
                padding-top: 22px;
                margin: 20px 10px 0px 12px;
                .out_logo {
                    width: 86px;
                    height: 64px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .price {
                    color: white;
                    line-height: 1;
                    span:nth-child(1) {
                        font-size: 18px;
                    }

                    span:nth-child(2) {
                        font-size: 36px;
                    }

                    span:nth-child(3) {
                        font-size: 25px;
                    }
                }

                .content {
                    margin-top: 16px;
                    font-size: 14px;
                    color: white;
                    line-height: 1;
                }

                .time {
                    margin-top: 13px;
                    color: white;
                    line-height: 1;
                }
                .type {
                    margin-top: 31px;
                    color: $colorMain;
                    font-size: 14px;
                    text-align: left;
                    padding-left: 14px;
                    &.used {
                        color: #878787;
                    }
                }
                .rules {
                    color: #333333;
                    width: 205px;
                    text-align: left;
                    padding-left: 14px;
                    height: 30px;
                    margin-top: 20px;
                    line-height: 14px;
                    .title {
                        color: #999999;
                    }
                }
                .btn {
                    color: #878787;
                    .normal {
                        color: $colorMain2;
                    }
                    position: absolute;
                    bottom: 17px;
                    width: 100%;
                }
            }
        }
        .el-pagination {
            margin: 20px;
        }
    }
}