gcb_zc/assets/select.scss

$h:88px;

.select {
    height       : 44px;
    border-bottom: 1px solid #EFEFEF;
    line-height  : 44px;
    background   : #fff;

    .region {
        height    : 100%;
        width     : 49%;
        display   : inline-block;
        text-align: center;

        img {
            width      : 14px*0.8;
            height     : 8px*0.8;
            margin-left: 3px;
        }
    }

    .bg {
        position  : fixed;
        height    : 100%;
        width     : 100%;
        background: rgba(0, 0, 0, 0.6);
        left      : 0;
        z-index   : 10;
        top       : $h;
    }

    #region {
        position   : fixed;
        height     : 60%;
        line-height: 44px;
        width      : 100%;
        left       : 0;
        top        : $h;
        z-index    : 50;
        overflow   : hidden;

        ul {
            height    : 100%;
            padding   : 15px 0;
            overflow-y: auto;

            li {
                width      : 100%;
                text-align : center;
                height     : 100%*0.145;
                line-height: 380%;
            }
        }

        .left {
            float     : left;
            width     : 35%;
            background: rgba(246, 246, 246, 1);
            box-shadow: 0px -1px 0px 0px rgba(239, 239, 239, 1);
        }

        .right {
            float           : right;
            width           : 65%;
            background-color: #fff;
        }
    }

    #category {
        position        : fixed;
        top             : $h;
        left            : 0;
        height          : 250px;
        width           : 100%;
        background-color: #fff;
        z-index         : 50;

        li {
            height     : 50px;
            line-height: 50px;
            text-align : center;
        }
    }
}

.select2 {
    @extend .select;

    .region {
        width: 32%;

    }

    .categorys {
        @extend #category;
        display                : -webkit-flex;
        justify-content        : space-between;
        -webkit-justify-content: space-between;
        flex-wrap              : wrap;
        justify-content        : inherit;
        padding                : 10px;
        height                 : auto;

        li {
            display    : table-cell;
            border     : 1px solid rgba(223, 223, 223, 1);
            width      : calc(100% / 3 - 5px);
            font-size  : 14px;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            margin     : 0 7px 7px 0;
        }

        li:nth-child(3n) {
            margin: 0;
        }

    }
}