gcb_zc/assets/a.scss

@charset "utf-8";
//font 
$table:98px*0.5;
$a    :0.5;
$z1   :10;
$z2   :50;
$z3   :100;

body {
    // background    : yellow;
    padding-bottom   : $table;
    font-size        : 1.5rem;
    height           : 100%;
    position         : relative;
    max-width        : 500px;
    margin           : auto;

    .table {
        position        : absolute;
        bottom          : 0;
        left            : 0;
        width           : 100%;
        height          : $table;
        margin          : 0;
        background-color: #fff;
        padding     : 5px 0;
        z-index         : 10000;
        max-width       : 500px;

        ul {
            width : 100%;
            height: 100%;

            a:nth-child(1) li {
                background-image: url(../static/img/ztb.png);
            }

            a:nth-child(2) li {
                background-image: url(../static/img/gc.png);
            }

            a:nth-child(3) li {
                background-image: url(../static/img/xm.png);
            }

            a:nth-child(4) li {
                background-image: url(../static/img/me.png);
            }

            a:nth-child(1) li.selected {
                background-image: url(../static/img/ztb1.png);
            }

            a:nth-child(2) li.selected {
                background-image: url(../static/img/gc1.png);
            }

            a:nth-child(3) li.selected {
                background-image: url(../static/img/xm1.png);
            }

            a:nth-child(4) li.selected {
                background-image: url(../static/img/me1.png);
            }

            li {
                width          : 24%;
                height         : 100%;
                display        : inline-block;
                text-align     : center;
                background-size: 22px !important;
                background     : no-repeat center top;
                background-position: center 2px;
                span {
                    margin-top: 24px;
                    display   : inline-block;
                    color     : rgba(175, 175, 175, 1);
                    font-size: 10px;
                }

            }

            li.selected {
                span {
                    color: #ff5c5c;
                }
            }




        }

    }



    .search {
        width     : 100%;
        height    : 44px;
        padding   : 6px 17px;
        background: #fff;
        text-align: center;

        input {
            width              : 73%;
            height             : $a*60px;
            background-color   : rgba(240, 243, 245, 1);
            border-radius      : $a*30px;
            border             : none;
            background-image   : url(../static/img/search.png);
            background-repeat  : no-repeat;
            background-position: 15px center;
            background-size    : 16px;
            padding-left       : 40px;
            color              : rgba(153, 153, 153, 1);
            outline            : none;
        }

        span {
            font-size  : 1.5rem;
            font-family: PingFang-SC-Medium;
            font-weight: 500;
            color      : rgba(255, 92, 92, 1);
            margin-left: 13px;
        }

    }

    .bidlist {
        overflow-y      : auto;
        padding-bottom  : 75px;
        background-color: #f8f9fa;
        height          : 90%;


        li {
            height          : 302px*$a;
            margin-bottom   : 18px*$a;
            background-color: #fff;
            padding         : 35px*$a;

            h2 {
                height     : 31px*$a;
                font-size  : 36px*$a;
                font-family: PingFang-SC-Bold;
                font-weight: bold;
                color      : rgba(32, 32, 32, 1);
                line-height: 31px*$a;
            }

            .p1 {
                margin     : 20px*$a 0;
                font-size  : 28px*$a;
                font-family: PingFang-SC-Medium;
                font-weight: 500;
                color      : rgba(122, 122, 122, 1);
            }

            .time {
                float: right;
            }
        }



    }

    .label {

        background   : rgba(242, 242, 250, 1);
        border-radius: 4px;
        font-size    : 24px*$a;
        font-family  : PingFang-SC-Regular;
        font-weight  : 400;
        color        : rgba(108, 116, 122, 1);
        padding      : 5px;
    }

    .time {
        color: #afafaf;
    }

    * {
        margin : 0;
        padding: 0;
    }
}

* {
    text-decoration: none;
    list-style     : none;
    box-sizing     : border-box;
}

table {
    table-layout: fixed;
    word-break  : break-all;
}

$colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;

// //组件---支付弹窗
.payment {

    position             : fixed;
    width                : 100%;
    left                 : 0;
    top                  : 0;
    height               : 100%;
    background-color     : rgba(0, 0, 0, .5);
    background-position-x: 20px;
    background-size      : 50%;

    div {
        height: auto;
    }

    >div {
        position        : absolute;
        bottom          : 0;
        left            : 0;
        background-color: #fff;
        padding         : 20px 0;
        width           : 100%;
        max-height      : 360px;

        >p {
            margin-bottom: 20px;
            font-size    : 16px;
            font-family  : PingFang-SC-Bold;
            font-weight  : bold;
            color        : rgba(32, 32, 32, 1);
            padding      : 0 15px;
        }

        .auto {

            overflow-x: scroll;
            border-top: .5px solid #f0f0f0;
            border-bottom: .5px solid #f0f0f0;
            ul {
                text-align: center;
                padding: 20px 0;
                overflow-x: auto;
                width     : 390px;
                // border-top: .5px solid #afafaf;

                li {
                    width       : 107px;
                    text-align  : center;
                    display     : inline-block;
                    margin-right: 10px;

                    p {
                        line-height  : 58px;
                        width        : 100%;
                        height       : 64px;
                        text-align   : center;
                        display      : inline-block;
                        background   : rgba(255, 255, 255, 1);
                        border       : 2px solid #f0f0f0;
                        border-radius: 16px;
                        color        : red;


                        span {
                            font-size  : 18px;
                            font-family: PingFang-SC-Bold;
                            font-weight: bold;

                            i {
                                font-size : 14px;
                                font-style: normal;
                            }
                        }
                    }

                    >span {
                        font-size  : 22px*0.5;
                        font-family: PingFang-SC-Medium;
                        font-weight: 500;
                        color      : rgba(175, 175, 175, 1);
                    }

                }

                .discount {
                    p {
                        line-height: normal;
                        padding-top: 8px;
                    }


                    .del {
                        display        : block;
                        font-size      : 26px*0.5;
                        font-family    : PingFang-SC-Medium;
                        font-weight    : 500;
                        text-decoration: line-through;
                        color          : rgba(204, 204, 204, 1);
                    }
                }
            }
        }

        .confirm {
           
            padding: 20px 15px 0 15px;
            width  : 100%;

            button {
                width        : 90%;
                height       : 40px;
                background   : rgba(255, 92, 92, 1);
                border-radius: 8px;
                border       : none;
                margin       : auto;
                display      : block;
                color        : #fff;
                font-size    : 16px;
                font-family  : PingFang-SC-Medium;
                font-weight  : 500;
            }

            p {
                font-size  : 29px*0.5;
                font-family: PingFang-SC-Medium;
                font-weight: 500;
                color      : rgba(175, 175, 175, 1);
                text-align : center;
                margin-top : 10px;

                span {
                    color: red;
                }
            }
        }

    }

}

//组件---标题
.head {
    padding   : 10px 10px;
    text-align: center;

    img {
        height: 20px;
    }

    img:last-child {
        margin-left: 10px;
    }

    span {
        display     : inline-block;
        width       : calc(100% - 80px);
        padding-left: 40px;
        font-size   : 18px;
        font-family : PingFang-SC-Bold;
        font-weight : bold;
        color       : rgba(32, 32, 32, 1);
    }
}

.sub {
    .add {
        padding-left: 15px;
        border-top  : 1px solid #f0f0f0;
        li {
            padding: 35px*0.5 0;
            position: relative;
            &::after{
                position: absolute;
                content: '';
                display: block;
                width: 100%;
                height: 1px;
                left: 0;
                bottom: 0;
                right: 0;
                // margin-left: -1.5rem;
                // margin-right: -1.5rem;
                padding-right: 1.5rem;
                background-color: #f0f0f0;
            }
            .title {
                font-size  : 16px;
                font-family: PingFang-SC-Medium;
                font-weight: 500;
                color      : rgba(32, 32, 32, 1);
            }

            .name {
                font-size    : 28px*0.5;
                font-family  : PingFang-SC-Medium;
                font-weight  : 500;
                color        : rgba(175, 175, 175, 1);
                float        : right;
                padding-right: 15px;

                img {
                    width         : 8px;
                    vertical-align: sub;
                    margin-left   : 5px;
                }
            }
        }
    }

    button {
        width      : 100%;
        height     : 50px;
        position   : absolute;
        bottom     : 0;
        left       : 0;
        border     : none;
        background : rgba(255, 92, 92, 1);
        font-size  : 18px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color      : rgba(255, 255, 255, 1);
    }
}