jit-detail.page.scss 1.72 KB

@import "~scss/layout/swiper";

$swiper-container-height: 233px;

.jit-detail-page {
    background-color: #f0f0f0;

    .top,
    .middle,
    .bottom {
        background-color: #fff;
    }

    .top,
    .bottom {
        line-height: 40px;
        color: #444;
        padding: 0 20px;
    }

    .top {
        padding-top: 4px;
        padding-bottom: 4px;
        margin-bottom: 1PX;
        font-size: 26px;
    }

    .middle {
        padding-bottom: 40px;
    }

    .bottom {
        font-size: 28px;
        margin-bottom: 28px;
        padding-bottom: 8px;
    }

    .swiper-container {
        padding: 30px 0 0;
        width: 100%;
        height: $swiper-container-height;
        overflow-y: hidden;

        .swiper-wrapper-jit {
            height: $swiper-container-height;
        }

        .swiper-slide {
            margin: 0 10px;
            float: left;
            width: 156px;
            position: relative;

            &:first-child {
                margin-left: 30px;
            }

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

            img {
                width: 152px;
                height: 204px;
            }

            .tag {
                display: inline-block;
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 0.8rem;
                line-height: 0.8rem;
                color: #fff;
                text-align: center;
                font-size: 12PX;

                &.add {
                    background: #eb76aa;
                }

                &.gift {
                    background: #a1ce4e;
                }
            }
        }
    }
}