@import 'gm.less';
@import 'box.less';

ul {
    padding: 0;
}

img {
    object-fit: contain;
}

header {
    background: #fff;
    height: 50px;
    line-height: 50px;

    i {
        font-size: 20px !important;
        position: absolute;
        left: 0;
        top: 14px;
    }

    a {
        color: #fff;
    }
}

.header_white {
    background: #fff;
    position: fixed;
    width: 100%;
    height: 45px !important;
    line-height: 45px;
    z-index: 99999;
    border-bottom: 1px solid #f8f8f8;

    * {
        color: #000 !important;
    }

    i {
        font-size: 25px !important;
        margin-top: -3px;
    }
}

.footer-h {
    .b_l_w;
    height: 70px;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    min-height: 18vw;
    border-top: 1px solid #f5f5f5;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .box;
    font-size: 3.2vw;
    background: #fff;

    a {
        .center;
        padding-top: 10.5vw;
        width: 100%;
        height: 100%;
        position: relative;
        color: #333333;
        .b;

        &:before {
            content: '';
            position: absolute;
            left: calc(~'50% - 5.5vw');
            top: .5vw;
            width: 11vw;
            height: 11vw;
            background: no-repeat;
            background-size: 11vw 22vw;
        }
    }

    .a {
        color: #d0241c;

        &:before {
            background-position: 0% 100%;
        }
    }

    .loop(@num: 1) when(@num <=4) {
        .f@{num} {
            &:before {
                background-image: url("../images/di_@{num}.png");
            }
        }

        .loop(@num + 1);
    }

    .loop;

    span {
        position: absolute;
        .y50;
        right: 25%;
        top: 2vw;
        background: #c0060c;
        color: #fff;
        height: 4vw;
        min-width: 4vw;
        line-height: 4vw;
    }
}

.back {
    position: absolute;
    display: block;
    width: 80/7.5vw;
    .center;
    top: 35/7.5vw;
    left: 0;

    i {
        font-size: 60/7.5vw;
        color: #535353;
    }
}

//登录
.login {
    .b_l_w;
    padding: 0 5.333vw;

    > div {
        .b_l_w;
    }

    .logo {
        .b_l_w;
        .box;
        .box-pack-center;
        margin: 13.333vw 0 12.533vw;

        > img {
            height: 17.333vw;
        }
    }

    .login_fl {
        .b_l_w;
        margin: 5vw 0 0 0;

        .van-tabs__nav {

            > .van-tab {
                &:nth-child(1)::before {
                    content: '';
                    position: absolute;
                    right: 0;
                    top: 13px;
                    width: 1px;
                    height: 23px;
                    background-color: #000;
                    border-radius: 0.133vw;
                }
            }
        }

        .van-tabs__line {
            height: 3px;
            bottom: 3px;
        }

        .van-tab__text {
            font-size: 20px;
        }

        .van-tab--active {

            .van-tab__text {
                .b;
            }
        }

        .van-tabs__nav--line {
            padding-bottom: 0 !important;
        }
    }

    .k {
        background: rgba(0, 0, 0, .35);
        position: relative;
        overflow: hidden;
        border-radius: 4vw;
        padding: 0 9.333vw;
        margin-bottom: 5vw;

        > div {
            .b_l_w;
        }


        .input {
            .b_l_w;
            margin-top: 7.333vw;

            > div {
                .b_l_w;
                margin-bottom: 3.867vw;
                .box;
                .box-align-center;
                padding: 6/7.5vw;
                height: 12.133vw;
                background-color: rgba(255, 255, 255, .8);
                border-radius: 6vw;

                .i {
                    min-width: 5.333vw;
                    height: 5.333vw;
                    margin-left: 4.267vw;
                    .box;
                    .box-middle;

                    > img {
                        height: 100%;
                    }
                }

                input {
                    &::-webkit-input-placeholder {
                        color: rgba(0, 0, 0, .6);
                    }

                    background-color: transparent;
                    min-width: 40%;
                    max-width: 85%;
                    .bs;
                    color: #000;
                    padding-left: 6vw;
                    font-size: 4vw !important;
                    border: 0;
                    height: 100%;

                    &:nth-child(2) {
                        padding-left: 4vw;
                    }
                }

                i {
                    .b_r;
                    margin: 0 4vw 0 auto;
                }

                .hqyzm {
                    .center;
                    border-radius: 3.333vw;
                    min-width: 20vw;
                    height: 5.867vw;
                    line-height: 5.867vw;
                    background: #d0241c;
                    margin: 0 2vw 0 auto;
                    color: #fff;
                    white-space: nowrap;
                    font-size: 3.2vw;
                    border: none;
                }
            }
        }


        .btn {
            margin: 4.667vw 0 9.467vw;
            .center;

            a {
                .b;
                color: #d0241c;
                font-size: 3.733vw;
            }
        }

        > a, .submit {
            .b_l_w;
            .center;
            border-radius: 6.667vw;
            background-color: #d0241c;
            height: 10.667vw;
            line-height: 10.667vw;
            border: 0;
            .bs;
            font-size: 4vw;
            margin-top: 2.667vw;
        }

        .input .van-icon {
            margin-left: auto !important;
            height: 100%;
            .box;
            .box-align-center;
            margin-right: 5.333vw;
        }

        .agreement {
            position: absolute;
            left: 0;
            bottom: 6vw;
            width: 100%;
            .center;
            .box;
            line-height: 1.25em;
            margin-top: 50/7.5vw;

            .van-checkbox__icon {
                display: inline-block !important;
                font-size: inherit !important;
                width: 1.75em;
                height: 1.75em;
                line-height: 1.75em !important;
            }

            .van-checkbox__icon .van-icon {
                border: 1px solid #fff;
                .box;
                .box-align-center;
                justify-content: center;
            }

            .van-checkbox__label {
                color: #fff;
            }

            display: block !important;

            a {
                color: #d0241c;
            }

            * {
                font-size: 22/7.5vw;
            }
        }
    }
}

.logo-b {
    .b_l_w;
    .center;
    margin: 100px 0 50px 0;
}

/*忘记密码*/
.password {
    width: 610/7.5vw;
    .mx-auto;

    > div {
        .b_l_w;
    }

    input::-webkit-input-placeholder {
        color: #b0b0b0;
    }

    .logo {
        .center;
        padding: 95/7.5vw 0 79/7.5vw 0;

        img {
            width: 383/7.5vw;
        }
    }

    .email {
        .center;
        font-size: 30/7.5vw;
        letter-spacing: 1/7.5vw;
        height: 177/7.5vw;
        line-height: 190/7.5vw;
    }

    .yzm {
        height: 107/7.5vw;
        border-radius: 53/7.5vw;
        border: solid 1/7.5vw #999999;
        overflow: hidden;
        margin-bottom: 77/7.5vw;
        background: #fff;

        .i {
            .b_l;
            margin: 5/7.5vw 6/7.5vw;
            width: 94/7.5vw;
        }

        input {
            .b_l;
            width: 333/7.5vw;
            height: 100%;
            border: 0;
            font-size: 26/7.5vw;
            padding-left: 30/7.5vw;
        }

        a {
            .b_r;
            .center;
            width: 198/7.5vw;
            display: block;
            height: 37/7.5vw;
            line-height: 37/7.5vw;
            border-left: 1/7.5vw solid #D7D7D7;
            color: #b0b0b0;
            font-size: 26/7.5vw;
            letter-spacing: 2/7.5vw;
            margin-top: 33/7.5vw;
        }
    }

    > .k {
        height: 107/7.5vw;
        border-radius: 53/7.5vw;
        border: solid 1/7.5vw #999999;
        overflow: hidden;
        margin-bottom: 47/7.5vw;
        .b_k;

        .i {
            .b_l;
            margin: 5/7.5vw 6/7.5vw;
            width: 94/7.5vw;
        }

        input {
            width: 80%;
            height: 100%;
            border: 0;
            font-size: 26/7.5vw;
            padding-left: 30/7.5vw;
            letter-spacing: 2/7.5vw;
            padding-right: 105/6.4vw;
        }

        .b_r {
            height: 100%;
            margin-top: -107/7.5vw;
            position: relative;

            img {
                width: 45/6.4vw;
            }

            padding: 0 35/6.4vw;
            display: flex;
            align-items: center;
        }
    }

    .btn {
        .b_l_w;
        .center;
        margin: 47/7.5vw 0;
        height: 91/7.5vw;
        line-height: 91/7.5vw;
        display: block;
        background-color: #fff;
        border-radius: 46/7.5vw;
        font-size: 30/6.4vw;
    }

    .btn2 {
        .b_l_w;
        .bs;
        .center;
        margin-bottom: 47/7.5vw;
        height: 91/7.5vw;
        line-height: 91/7.5vw;
        display: block;
        background-color: #c40f0f;
        border-radius: 46/7.5vw;
        font-size: 27/7.5vw;
        letter-spacing: 2/7.5vw;
    }

    .forget {
        .b_l_w;
        margin-top: -2vw;
        .left;
        line-height: 50/7.5vw;
        font-size: 26/7.5vw;
        padding: 0 2vw;
        .bs;
        letter-spacing: 2/7.5vw;

        a {
            .bs;
            .b_r;
        }
    }
}


//充值
.recharge {
    .mx-auto;
    width: 660/7.5vw;

    > .input {
        .b_l_w;
        .mt30;
        padding-bottom: 20px*.512;
        border-bottom: 1px solid #F8F8F8;
        .box;

        b {
            font-size: 50px*.512;
        }

        input {
            width: 100%;
            border: 0;
            font-size: 50px*.512;
        }
    }

    > p {
        margin-top: 75px*.512;
    }

    > span {
        .mt10;
        .b_l_w;
        .f13;
        color: #ff2828;
    }

    > .btn {
        .bs;
        .center;
        .b_l_w;
        .f18;
        margin-top: 65px*.512;
        height: 90px*.512;
        line-height: 90px*.512;
        background-color: #ff2828;
        border-radius: 45px*.512;
        letter-spacing: 1px;
    }

    .van-popup {
        background: transparent;
    }

    .tips {
        .b_k;
        width: 660/7.5vw;
        min-height: 650/7.5vw;
        border-radius: 10/7.5vw;

        > div {
            .b_l_w;
        }

        .t {
            .center;
            font-size: 40/7.5vw;
            margin: 50/7.5vw 0;
        }

        .c {
            padding: 0 30/7.5vw;
            font-size: 36/7.5vw;
            .center;

            span {
                color: #ff0000;
            }
        }

        .f {
            margin: 50/7.5vw 0;
            padding: 0 78/7.5vw;
            font-size: 32/7.5vw;
            line-height: 45/7.5vw;
        }

        .btn {
            margin: 50/7.5vw 0;
            padding: 0 60/7.5vw;

            a {
                .center;
                display: block;
                width: 250/7.5vw;
                height: 80/7.5vw;
                line-height: 80/7.5vw;
                border-radius: 40/7.5vw;
                letter-spacing: 1px;
            }

            .confirm {
                .b_l;
                border: solid 1px #f5392f;
                font-size: 34/7.5vw;
                color: #f5392f;
            }

            .modify {
                .b_r;
                .bs;
                background-color: #f5392f;
                font-size: 34/7.5vw;
            }
        }
    }
}


#order-billing, #order-mdetail {
    [class*=van-hairline]::after {
        border: 0 !important
    }

    .order-address {
        padding: 10px !important;
    }

    .order-address::after {
        border-bottom: 0 !important;
    }


    .cart-dec {
        width: 6.4rem;
        height: .03rem;
        background-image: url("/images/cart-bag.png");
        background-repeat: repeat-x;
        background-size: .61rem .03rem;
    }


    .order-details {
        border-bottom: solid 5px #f8f8f8;
        padding: 0 10px;

        .van-cell {
            padding: 5px 0 !important;
        }

        .van-cell::after {
            left: 0 !important;
            right: 0 !important;
        }

        .goods-detail {
            display: flex;
            flex-direction: row;
            border-bottom: solid 1px #f8f8f8;

            .img {
                margin: 10px;
                box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
            }

            .detail {
                display: flex;
                flex-direction: column;
                margin-left: auto;
                padding: 10px 10px 0 0;
                font-size: 14px;
                width: calc(~'100% - 110px');

                > b {
                    color: #000;
                    line-height: 20px;
                    max-height: 40px;
                    overflow: hidden;
                }

                > p {
                    font-size: 12px;
                    line-height: 20px;
                    color: #9d9d9d;
                }

                .item {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                }
            }
        }

        .van-field__label {
            width: auto !important;
        }
    }

    .order-details::after {
        border-bottom: 0 !important;
    }


    .order-discount {
        padding: 10px !important;
        align-items: center;
        border-bottom: solid 5px #f8f8f8;

        .van-cell__title span {
            color: #b0afaf;
            font-size: 12px;
        }

        .van-cell__value {
            text-align: right !important;

            .van-checkbox {
                justify-content: flex-end;

                .van-checkbox__icon--checked .van-icon {
                    background-color: #ee0a24;
                    border-color: #ee0a24;
                }
            }
        }
    }

    .order-discount::after {
        border-bottom: 0 !important;
    }


    .order-total {
        .van-cell {
            padding: 10px !important;
        }

        .van-cell::after {
            left: 10px !important;
            right: 10px !important;
        }
    }


    .van-cell__value {
        color: #000;
    }

    .red {
        color: #b92410;
    }


    .van-submit-bar__bar {
        padding-right: 0 !important;
        border-top: 1px solid #f1f1f1;
    }

    .van-submit-bar__button {
        width: 60% !important;
        height: 100% !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
}