peko-h5/view/peko/modules/h5Income/css/withdrawal.scss

@function px2rem($px, $rem:75) {
    @return $px / $rem+rem;
}

html,
body {
    width: 100%;
    background: #F3F5FA;
}

.back {
    position: fixed;
    z-index: 9;
    width: px2rem(56, );
    height: px2rem(56, );
    left: px2rem(40, );
    top: 0.2rem;
    // display: none;
}

.myInfo {
    width: px2rem(690, );
    height: px2rem(136, );
    margin: px2rem(60, ) auto px2rem(32, );

    img {
        display: block;
        width: px2rem(136, );
        height: px2rem(136, );
        border-radius: 50%;
        float: left;
    }

    div {
        float: left;
        margin-left: px2rem(22, );
        overflow: hidden;

        p {
            color: #1F1B4F;
            font-size: px2rem(36, );
            font-weight: bold;
            margin-bottom: px2rem(12, );
            margin-top: px2rem(30, );
        }

        b {
            color: #8A8CAB;
            font-size: px2rem(24, );
        }
    }
}

.income {
    width: px2rem(686, );
    height: px2rem(216, );
    background: url(../images/withdrawal/bg.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto px2rem(8, );
    position: relative;

    .rule {
        color: #9168FA;
        font-size: px2rem(24, );
        position: absolute;
        right: px2rem(32, );
        top: px2rem(18, );
    }

    img {
        width: px2rem(56, );
        height: px2rem(56, );
        position: absolute;
        left: px2rem(40, );
        top: px2rem(80, );

    }

    span {
        color: #FFFFFF;
        font-size: px2rem(28, );
        position: absolute;
        left: px2rem(40, );
        top: px2rem(32, );
    }

    p {
        color: #FFFFFF;
        font-size: px2rem(48, );
        font-weight: bold;
        position: absolute;
        left: px2rem(104, );
        top: px2rem(88, );
    }
}

.account {
    width: px2rem(686, );
    height: px2rem(120, );
    line-height: px2rem(120, );
    background: #fff;
    border-radius: px2rem(20, );
    margin: 0 auto px2rem(32, );
    position: relative;

    .icon_account {
        position: absolute;
        left: px2rem(40, );
        top: px2rem(40, );
        width: px2rem(40, );
        height: px2rem(40, );
    }

    .arrow_right {
        position: absolute;
        right: px2rem(40, );
        top: px2rem(40, );
        width: px2rem(40, );
        height: px2rem(40, );
    }

    div {
        height: 100%;
        color: #1F1B4F;
        font-size: px2rem(32, );
        font-weight: bold;
        position: absolute;
        top: 0;
        left: px2rem(92, );
    }

    span {
        height: 100%;
        color: #B3B3C3;
        font-size: px2rem(24, );
        position: absolute;
        top: 0;
        right: px2rem(80, );
    }

    .active {
        color: #1F1B4F;
        font-weight: bold;
    }
}

.withdrawal {
    width: px2rem(686, );
    height: px2rem(572, );
    margin: 0 auto px2rem(40, );
    background: #fff;
    border-radius: px2rem(20, );
    position: relative;
    overflow: hidden;

    .gold {
        width: px2rem(40, );
        height: px2rem(40, );
        position: absolute;
        top: px2rem(40, );
        left: px2rem(40, );
    }

    .title {
        margin-top: px2rem(40, );
        margin-left: px2rem(92, );
        font-size: px2rem(32, );
        color: #1F1B4F;
        font-weight: bold;
    }

    input {
        background: transparent;
        border: none;
        outline: none;
        box-sizing: border-box;
        padding: 0 px2rem(40, );
        width: px2rem(606, );
        height: px2rem(96, );
        margin: px2rem(32, ) auto px2rem(48, );
        background: #F3F5FA;
        display: block;
        border-radius: px2rem(16, );

        &::placeholder {
            font-size: px2rem(28, );
            color: #B3B3C3;
        }
    }

    .numBox {
        width: 100%;
        box-sizing: border-box;
        padding: 0 px2rem(40, );
        margin: 0 auto px2rem(56, );

        span {
            color: #1F1B4F;
            font-size: px2rem(32, );
            // float: left;
        }

        b {
            color: #B3B3C3;
            font-size: px2rem(28, );
            float: right;
        }
    }

    p {
        margin-bottom: px2rem(12, );
        color: #8A8CAB;
        font-size: px2rem(24, );
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0 px2rem(40, );

        i {
            font-style: normal;
        }
    }
}

.accountPub {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 99;
    background: rgba(0, 0, 0, .6);
    display: none;

    .accountPub_in {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: px2rem(56, ) px2rem(56, ) 0 0;
        background: #fff;
        overflow: hidden;
        height: px2rem(666, );

        h3 {
            height: px2rem(136, );
            line-height: px2rem(136, );
            border-bottom: px2rem(1, ) solid #EBEEF5;
            width: 100%;
            text-align: center;
            color: #1F1B4F;
            font-size: px2rem(36, );
            font-weight: bold;
        }

        ul {
            width: 100%;
            height: 7rem;
            overflow-y: scroll;

            li {
                width: 100%;
                text-align: center;
                color: #1F1B4F;
                font-size: px2rem(28, );
                height: px2rem(104, );
                line-height: px2rem(104, );
                border-bottom: px2rem(1, ) solid #EBEEF5;
            }

            .active {
                color: #9168FA;
            }
        }
    }
}