_shop-index-coupon.css 2.93 KB
.shop-coupon {
    overflow: auto;
    width: 100%;
    color: #fff;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    .coupon-big {
        height: 140px;
        width: 680px;
        background: resolve("product/coupon-big.png") no-repeat;
        background-size: contain;
        margin: 35px;
        position: relative;
        display: inline-block;
        white-space: normal;

        .coupon-left {
            position: absolute;
            margin: 11px 0;
        }

        .coupon-left .coupon-left-price {
            margin: 0 58px;
            float: left;
        }

        .coupon-left .coupon-left-price .coupon-sign {
            font-size: 50px;
            float: left;
            margin-top: 25px;
            width: 35px;
        }

        .coupon-left .coupon-left-price .coupon-price {
            font-size: 72px;
            float: left;
        }

        .coupon-left .coupon-left-name {
            font-size: 22px;
            width: 322px;
            height: 117px;
            float: left;
            align-items: center;
            display: flex;
        }

        .coupon-right {
            width: 20px;
            font-size: 22px;
            right: 37px;
            position: absolute;
            height: inherit;
            line-height: 1.2em;
            align-items: center;
            display: flex;
        }
    }

    .coupon-small {
        height: 140px;
        width: 287px;
        background: resolve("product/coupon-small.png") no-repeat;
        background-size: contain;
        margin: 35px 0 35px 35px;
        position: relative;
        display: inline-block;
        white-space: normal;

        &:last-child {
            margin-right: 35px;
        }

        .coupon-left {
            position: absolute;
            width: 185px;
            overflow: hidden;
            margin: 0 0 0 35px;
            height: inherit;
        }

        .coupon-left .coupon-left-price {
            width: inherit;
            height: 64px;
            overflow: hidden;
            float: left;
        }

        .coupon-left .coupon-left-price .coupon-sign {
            font-size: 42px;
            float: left;
            width: 33px;
            margin-top: 15px;
        }

        .coupon-left .coupon-left-price .coupon-price {
            font-size: 52px;
            float: left;
            width: 100px;
            overflow: hidden;
        }

        .coupon-left .coupon-left-name {
            font-size: 16px;
            overflow: hidden;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            float: left;
        }

        .coupon-right {
            width: 23px;
            font-size: 18px;
            right: 22px;
            position: absolute;
            height: inherit;
            line-height: 1.2em;
            align-items: center;
            display: flex;
        }
    }
}