@import '@mobile/assets/themes/base/mixin.less';

.mine {
    @backgroundImage: linear-gradient(var(--navbar-background), var(--navbar-background) 3rem, transparent 3rem);

    .app-navbar {
        background-image: @backgroundImage;

        &__wrapper {
            color: #fff;
            background-color: transparent;
        }
    }

    &-header {
        color: #000;
        background-color: #fff;
        background-image: @backgroundImage;
        padding: 0 .36rem;

        &__wrapper {
            background-color: #fff;
            border-top-left-radius: .2rem;
            border-top-right-radius: .2rem;
            padding: .24rem;
        }

        .profile {
            display: flex;

            &-user {
                flex: 1;
                display: flex;
                align-items: center;

                .g-image--avatar {
                    width: .8rem;
                    height: .8rem;
                    border-radius: 50%;
                    font-size: 0;
                    margin-right: .16rem;
                }

                &__info {
                    flex: 1;
                    padding-right: .32rem;

                    .top {
                        display: flex;
                        align-items: center;
                        font-size: .24rem;
                        color: #A1B1C5;

                        span {
                            .mixin-text-overflow()
                        }

                        .van-icon {
                            line-height: normal;
                            margin-left: .04rem;
                        }
                    }

                    .bottom {
                        line-height: .4rem;
                        font-size: .3rem;
                        font-weight: bold;
                    }
                }
            }

            &-account {
                display: flex;
                flex-direction: column;
                justify-content: center;

                span {
                    line-height: .4rem;

                    &:first-child {
                        font-size: .24rem;
                        color: #46D63C;

                        &::before {
                            content: '资金账户';
                            color: #A1B1C5;
                            margin-right: .12rem;
                        }
                    }

                    &:last-child {
                        font-size: .3rem;
                        font-weight: bold;
                    }
                }
            }
        }

        .bank {
            display: flex;
            justify-content: space-around;
            padding: .36rem 0;

            ul {
                li {
                    display: flex;
                    flex-direction: column;
                    padding-bottom: .1rem;

                    span {
                        line-height: .4rem;

                        &:first-child {
                            font-size: .24rem;
                            color: #A1B1C5;
                        }

                        &:last-child {
                            font-size: .3rem;
                            font-weight: bold;
                        }
                    }
                }
            }
        }

        .button {
            display: flex;
            justify-content: space-around;

            .van-button {
                width: 2.8rem;
                box-shadow: 0 .06rem .14rem 0 #e0e2e8;
            }
        }
    }

    &-iconbar {
        ul {
            display: flex;
            background-color: #fff;
            padding: .24rem;

            li {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;

                .g-icon {
                    font-size: .56rem;
                    margin-bottom: .04rem;
                }
            }
        }
    }

    &-footer {
        text-align: center;
        padding: .2rem 0;

        .button-logout {
            width: 50%;
            border: 0;
        }
    }
}