_new-sale.scss 4.08 KB
.new-sale-page {

    /*Modify by chenglong.wang at 2016/1/18
     *sale列表页面轮播图
     */
    .sale-list-banner {
        width: 100%;
        position: relative;

        ul {
            overflow: hidden;
            width: 100%;
            position: relative;
            z-index: 1;

            li {
                width: 100%;
                height: 100%;
                display: block;
                float: left;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .sale-list-pagation {
            z-index: 2;
            position: absolute;
            left: 0;
            bottom: 50px;
            width: 100%;
            height: 20px;
            text-align: center;

            div {
                display: inline-block;
            }

            span {
                display: block;
                width: 20px;
                height: 20px;
                background: image_url('product/default-normal.png');
                float: left;
                margin: 0 10px;
                cursor: pointer;

                &.active {
                    background: image_url('product/default-active.png');
                }
            }
        }
    }

    .header-title {
        position: relative;
        width: 100%;
        height: 42px;
        margin: 20px 0;
        text-align: center;
        font-size: 20px;

        .count-wrap {
            position: relative;
        }

        .count {
            background: #fff;
            padding: 0 5px;
            color: #999;
            font-size: 12px;
            margin-top: 6px;
        }

        .line-through {
            position: absolute;
            bottom: 9px;
            left: 0;
            right: 0;
            height: 1px;
            border-top: 1px dotted #999;
        }
    }

    .new-banner img {
        display: block;
        width: 100%;
    }

    .new-brands {
        position: relative;
        width: 100%;
        margin-top: 25px;

        > * {
            float: left;
        }

        .pre, .next {
            position: absolute;
            display: block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background: #e0e0e0;
            text-align: center;
            top: 50%;
            margin-top: -20px;
            cursor: pointer;

            opacity: 0.8;
            filter: Alpha(opacity=80);

            &:hover {
                opacity: 0.9;
                filter: Alpha(opacity=90);
            }
        }

        .pre {
            left: 0;
        }

        .next {
            right: 0;
        }

        .brands-wrap {
            position: relative;
            overflow: hidden;
            width: 890px;
            height: 76px;
            margin-left: 40px;
        }

        .brands {
            position: absolute;
            width: auto;
            height: 76px;
        }

        .brands li {
            float: left;
            margin-left: 14px;

            a {
                display: block;
                width: 164px;
                height: 76px;
                line-height: 76px;
                vertical-align: middle;
                text-align: center;
            }

            img {
                vertical-align: middle;
                max-width: 100%;
                max-height: 100%;
                border: none;
            }
        }
    }

    .new-floor-title {
        position: relative;
        margin: 35px auto;
        width: 300px;
        height: 31px;
        line-height: 31px;
        font-size: 18px;
        border: 1px solid #000;

        .date {
            position: absolute;
            left: -1px;
            top: -1px;
            width: 155px;
            height: 33px;
            color: #fff;
            text-align: center;
            background: image-url('product/floor-title.png');
        }

        .title {
            float: right;
            margin-right: 40px;
        }
    }
}

@media (max-width: 1180px) {
    .new-sale-page .new-brands .brands-wrap {
        width: 730px;
    }
}