product-list.scss 1.76 KB
/*
 * @Author: Targaryen
 * @Date: 2017-05-03 14:08:52
 * @Last Modified by: Targaryen
 * @Last Modified time: 2017-05-27 14:53:10
 */
.guang-list-page {
    .product-list-box {
        width: 100%;
        margin-top: 40px;
        padding: 0 20px;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-right: 0;
    }

    .product-list {
        height: 138px;
        overflow-y: hidden;
        white-space: nowrap;

        .goods-box {
            width: 320px;
            height: 138px;
            border-radius: 8px;
            display: inline-block;
            margin-right: 20px;
            background-color: #f0f0f0;
        }

        .goods-box > .goods-img {
            width: 106px;
            height: 138px;
            float: left;

            img {
                border-bottom-left-radius: 8px;
                border-top-left-radius: 8px;
                width: 100%;
                height: 100%;
            }
        }

        .goods-box > .goods-info {
            width: 214px;
            height: 138px;
            padding: 16px;
            float: left;

            .title {
                white-space: normal;
                font-size: 22px;
                color: #444;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .price {
                color: #d0021b;
                font-size: 20px;
                margin-top: 20px;
            }
        }

        .goods-box.only {
            width: 600px;
            margin-right: 0;

            .goods-info {
                width: 494px;
            }
        }
    }
}