_shop-index-coupon.css 2.46 KB
.coupon-content {
    color: #fff;
    height: 180px;
    overflow: hidden;

    .coupon-big {
        height: 120px;
        width: 580px;
        background: resolve("product/coupon-big.png") no-repeat;
        background-size: 580px 120px;
        margin: 30px;
        position: relative;

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

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

        .coupon-left .coupon-left-price .coupon-sign {
            font-size: 50px;
        }

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

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

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

    .coupon-small {
        height: 120px;
        width: 245px;
        background: resolve("product/coupon-small.png") no-repeat;
        background-size: 245px 120px;
        margin: 30px 0 30px 30px;
        position: relative;
        float: left;
        display: table;

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

        .coupon-left .coupon-left-price {
            width: inherit;
            display: inline-block;
            height: 60px;
        }

        .coupon-left .coupon-left-price .coupon-sign {
            font-size: 42px;
        }

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

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

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