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

html {
    --red: #e03224;
}

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;
    min-height: 70px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.dipiao {
    .b_k;
    min-height: 60px;
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    z-index: 999;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .w-20, .w-25, .w-50, .w33 {
        text-align: center;
        font-size: 13px;
        line-height: 14px;
    }

    a {
        color: #666;
        width: 60px;
        height: 60px;
        display: block;
        line-height: 10px;
        text-align: center;
    }
}

.affairFoot {
    background: url(/images/affair-foot-bg.jpg) no-repeat;
    background-size: 100% auto;
}

.f1, .f2, .f3, .f4, .f5, .f6, .f7, .f8 , .f9 {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: 0% -0%;
    background-size: 40px 80px;
}

.f1 {
    background-image: url("../images/di_1.png");
}

.f2 {
    background-image: url("../images/di_2.png");
}

.f3 {
    background-image: url("../images/di_3.png");
}

.f4 {
    background-image: url("../images/di_4.png");
}

.f5 {
    background-image: url("../images/di_5.png");
}

.f6 {
    background-image: url("../images/di_6.png");
}

.f7 {
    background-image: url("../images/di_7.png");
}

.f8 {
    background-image: url("../images/di_8.png");
}

.f9 {
    background-image: url("../images/di_9.png");
}

.f_h {
    .mx-auto {
        background-position: 0% 100%;
    }
    color: #ff9302!important;
}

.f_h2 {
    .mx-auto {
        background-position: 0 100%;
    }

    color: #29b5f6 !important;
}

#di_bottom {
    .w-20 {
        position: relative;
    }

    .w-25 {
        position: relative;
    }

    .position-absolute {
        right: 20%;
        top: 5px;
        border-radius: 50%;
        background: #c0060c;
        color: #fff;
        font-size: 12px;
        height: 16px;
        min-width: 16px;
        line-height: 16px;
    }
}



.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: 16.267vw 6.667vw 8vw;

    > div {
        .b_l_w;
    }

    .logo {
        .box;
        .box-pack-center;

        img {
            width: 40.933vw;
        }
    }

    .k {
        margin-top: 12.533vw;
        background: rgba(255,255,255,.6);
        border: solid 1px #ffecb3;
        border-radius: 4vw;
        padding: 0 4.667vw;
        position: relative;

        > div {
            .b_l_w;
        }

        .van-tabs {
            margin: 6vw 0 8vw;

            .van-tabs__wrap {
                height: 6.133vw;
            }

            .van-tabs__nav--line.van-tabs__nav--complete {
                padding: 0;
            }

            .van-tab__text {
                font-size: 5.333vw;
            }

            .van-tab--active {
                .van-tab__text {
                    .b;
                }
            }

            .van-tabs__nav {
                > div {
                    width: 50%;
                }

                > div:nth-child(1) {
                    border-right: 1px solid rgba(0,0,0,.5);
                    padding-right: 12vw;
                }

                > div:nth-child(2) {
                    padding-left: 12vw;
                }
            }
        }

        .input {
            height: 15.333vw;
            .box;
            .box-align-center;
            position: relative;
            border-bottom: 1px solid #ffca28;
            padding-top: 4vw;

            .i {
                min-width: 8.667vw;
                height: 100%;
                .box;
                .box-center-center;
                padding-right: 1vw;

                img {
                    height: 4.667vw;
                }
            }

            input {
                .b_l;
                width: 40vw;
                border: 0;
                font-size: 3.733vw;
                height: 100%;
                background: transparent;

                &::-webkit-input-placeholder {
                    color: #b5b5b5;
                }
            }


            .hqyzm {
                background: #ffca28;
                border: 0;
                height: 5.867vw;
                white-space: nowrap;
                position: absolute;
                right: 2.667vw;
                width: 20vw;
                font-size: 3.2vw;
                border-radius: 2.933vw;
            }
        }

        .btn {
            margin: 3.333vw 0 0;
            .box;
            .box-pack-between;
            .box-rl;

            a {
                letter-spacing: 0.32vw;
                color: #ff9302;
            }
        }

        > a, .submit {
            .b_l_w;
            .center;
            height: 13.333vw;
            background-color: #ffca28;
            border-radius: 2vw;
            line-height: 13.333vw;
            border: 0;
            font-size: 4.8vw;
            letter-spacing: 0.48vw;
            color: #1b1b1b;
            margin-top: 6.8vw;
            .b;
        }

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

        .agreement {
            width: 100%;
            .center;
            .box;
            .box-align-center;
            .box-pack-center;
            margin-top: 4.667vw;

            .van-checkbox__icon {
                .box;
                .box-align-center;
                margin-right:1.2vw;
            }

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

            .van-checkbox__label {
                color: #000;
                margin-left: 0;
            }

            * {
                font-size: 3vw;
            }

            a {
                color: #ff9302;
            }
        }

        .go {
            .center;
            margin: 10vw 0 5.6vw;

            a {
                color: #ff9302;
                font-size: 4vw;
                .b;
            }
        }
    }
}

/*忘记密码*/
.password {
    --pwd-color: #ffca28;
    .b_l_w;
    padding:10vw 10vw 0;

    &::before {
        content: '';
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0;
        background: linear-gradient(to bottom, #F7F4EE, #F2EBD6);
    }

    > div {
        .b_l_w;
        position: relative;
        z-index: 1;
    }

    .van-cell::after {
        content: none;
    }

    > .van-cell {
        height: 12vw;
        border-radius: 6vw;
        margin-bottom: 8vw;

        .van-field__left-icon {
            .box;
            .box-align-center;
            margin-right: 3vw;

            .van-icon__image {
                width: 4.667vw;
                height: auto;
            }
        }

        .van-field__right-icon {
            color: #000;

            .van-icon {
                font-size: 6vw;
            }

            .van-icon__image {
                width: 4vw;
                height: auto;
            }
        }

        .van-field__button {
            .box;
            .box-align-center;

            .van-button {
                height: 6.667vw;
                background: var(--pwd-color);
                border: none;
                padding: 0 3.333vw;
                font-size: 3.2vw;
                color: #0d0d0d;
            }
        }
    }

    > .van-button {
        .b_l;
        background: var(--pwd-color);
        .b;
        height: 12vw;
        font-size: 4.667vw;
        color: #0d0d0d;
        margin: 8vw 0;
    }
}

//充值
.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: 20px 0 !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 10px 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;
    }
}