@charset "utf-8";
@import "~yo3/style/lib/fragment/yo-list";

/**
 * yo-list通用或全局扩展
 */

// 通用 yo-list，白色背景，上面边框为 0，中间 item 用线条隔开
@include yo-list(
    $name: common,
    $border-width: 0 0 1px,
    $item-padding: 0 4%,
    $item-border-space: 0
) {
    .item {
        text-align: left;
        height: .6rem;
        color: #212121;
        .name {
            font-size: .16rem;
        }
        .mobile {
            font-size: .16rem;
            padding-left:.1rem;
            color : #666;
        }
        .wrap {
            font-size: .16rem;
        }
        .value {
            @include flexbox;
            @include align-items;
            img {
                width: .38rem;
                margin-right: .03rem;
            }
        }
        &::after {
            border-color: #eee;
        }
    }
    &::after {
        border: none;
    }
    .wrap {
        .desc {
            margin-right: .03rem;
        }
        .yo-ico {
            color: #bdbdbd;
        }
    }
    .actionItem {
        font-size: .16rem;
    }
}

@include yo-list(
    $name:smscode
){
    .item{
        height:.54rem;
        padding:.12rem .1rem;
        .name {
            font-size: .16rem;
        }
        .mobile {
            font-size: .16rem;
            padding-left:.1rem;
            color : #666;
        }
        .value {
            @include flexbox;
            @include align-items;
            img {
                width: .38rem;
                margin-right: .03rem;
            }
        }
    }
    &::after{
        border-color: #ddd;
    }
}

@include yo-list(
    $name: select,
    $border-width: 0 0 1px,
    $border-color: #eee,
    $item-border-color: #eee,
    $item-padding: .16rem .14rem .16rem .2rem,
    $item-font-size: .18rem,
    $item-border-space: 0
) {
    &::after {
        overflow: visible;
    }
    .item {
        .icon {
            width: .24rem;
            height: .24rem;
        }
        .defaultIcon {
            color: #099fde;
            font-size: .24rem;
            width: .24rem;
            height: .24rem;
            line-height: .24rem;
        }
        .desc {
            font-size: .12rem;
        }
        &.disabled {
            opacity: .3;
        }
    }
    .yo-ico {
        font-size: .18rem;
    }
}

 @include yo-list(
    $name: protocolList,
    $border-width: 0 0 1px,
    $item-padding: .12rem,
    $item-font-size: .16rem,
    $item-border-space: 0
) {
    width: 96%;
    margin: .1rem auto .05rem;
    overflow: hidden;
    border-radius: .05rem;
   .item {
        @include justify-content;
    }
    .phonexBar{
        height: .18rem;
        width: 100%;
        background: #fff;
        border: none;
        margin-top: -.01rem;
    }
}

@include yo-list(
    $name: itemize,
    $item-padding: .08rem .15rem,
    $border-width: 0,
    $border-color: transparent,
    $item-border-color: transparent,
    $item-font-size: .14rem
) {
    padding: .15rem 0;
};

@include yo-list(
    $name: tab,
    $item-padding: 0,
    $border-width: 1px 0 0,
    $border-color: #7084e0,
    $item-border-color: #7084e0,
    $item-font-size: .12rem
) {
    @include flexbox;
    justify-content: center;
    background: #4c68d7;
    text-align: center;
    .item {
        @include flex();
        margin: .1rem;
        justify-content: center;
        color: #fff;
        background: #4c68d7;
        @include border(
            $border-width: 0 0 0 1px,
            $border-color: #7084e0,
            $border-style: solid
        );
        .text {
            padding-left: .1rem;
        }
    }
};

@include yo-list(
    $name: detail,
    $item-padding: .18rem .15rem,
    $border-width: 1px,
    $border-color: transparent,
    $item-border-color: #eee
) {
    background: #fff;
    margin-bottom: .1rem;
    .item {
        width: 100%;
        @include flexbox;
        justify-content: space-between;
        font-size: .12rem;
        color: #212121;
        font-weight: normal;
    }
    .main {
        @include flex();
    }
    .title {
        font-size: .18rem;
    }
    .desc {
        color: #9e9e9e;
    }
    .status {
        @include flexbox;
        align-items: center;
        color: #bdbdbd;
        .highlight {
            color: #f40;
        }
    }
    .itemdone {
        color: #bdbdbd;
        background: #fafcfd;
        .title, .desc, .status {
            color: #bdbdbd;
        }
    }
    .itemTitle {
        font-size: .16rem;
    }
};

.yo-list-repaylist {
    /* 左侧的选择框 */
    > li.item {
        height: .8rem;
        padding: 0;

        &::after{
            left: 0;
        }
        .content {
            @include flexbox;
            @include flex;
            height: 100%;
        }
        .main {
            @include align-self(center);
        }
        .status {
            min-width: .6rem;
            height: 100%;
            @include flex-direction(row-reverse);
            .yo-ico {
                padding-right: .15rem;
            }
        }
        .overDue {
            color: #f42;
        }
        .tag {
            min-width: .4rem;
            text-align: right;
        }
        .checkbox {
            height: 100%;
            width: .5rem;

            @include flexbox;
            @include flex-direction(column);
            @include justify-content;
            @include align-items;
        }
    }
}

@include yo-list(
    $name: advanceList,
    $item-padding: .06rem .15rem,
    $border-width: 1px,
    $border-color: transparent,
    $item-border-color: #eee
) {
    background: transparent;
    margin-bottom: .1rem;
    .item {
        width: 100%;
        height: 0.64rem;
        @include flexbox;
        @include border($border-width: 0 0 0 0);
        margin-top: 0.1rem;
        justify-content: space-between;
        font-size: .12rem;
        color: #212121;
        font-weight: normal;
        .content {
            @include flexbox;
            @include flex;
            height: 100%;
        }
        .status {
            min-width: .6rem;
            height: 100%;
            @include flex-direction(row-reverse);
            .yo-ico {
                height: 0.18rem;
                width: 0.18rem;
                line-height: 0.18rem;
                font-size: 0.18rem;
                color: #e0e0e0;
            }
        }
        .main {
            @include align-self(center);
            padding-left: 0.15rem;
        }
        .checkbox {
             height: 100%;
             width: .24rem;
             @include flexbox;
             @include flex-direction(column);
             @include justify-content;
             @include align-items;
        }
        .tag {
            min-width: .4rem;
            text-align: right;
            padding-right: 0.02rem;
            color: #616161;
        }
    }

    .disable-item {
        color: #bdbdbd;
        .status {
            .yo-ico {
                color: #bdbdbd;
            }
        }
        .tag {
            color: #bdbdbd;
        }
        .main {
            .desc {
                color: #bdbdbd;
            }
        }
    }
};

@include yo-list(
    $name: allRepay,
    $item-padding: .18rem .15rem,
    $border-width: 1px,
    $border-color: transparent,
    $item-border-color: #eee
) {
    background: #fff;
    margin-bottom: .1rem;
    .item {
        width: 100%;
        @include flexbox;
        justify-content: space-between;
        font-size: .12rem;
        color: #212121;
        font-weight: normal;

        &::after{
            left: 0;
        }

        &-main{
            @include flexbox;
            @include align-items;
            .title {
                margin: .05rem;
                font-size: .18rem;
            }
        }

        &-side{
            @include flexbox;
            @include align-items;
            .sideInfo{
                margin-right: .05rem;
                text-align: right;
                font-size: .18rem;
                .subDesc{
                    font-size: .12rem;
                    color: #9e9e9e;
                }
            }
            .yo-ico{
                font-size: .14rem;
                color: #bdbdbd;
            }
        }
    }

    .desc {
        color: #9e9e9e;
    }
};

@include yo-list(
    $name: record,
    $item-padding: 0,
    $border-width: 0,
    $border-color: transparent,
    $item-border-color: transparent
) {
    ::after {
        border: none;
    }
    .item {
        width: 100%;
        padding: 0;
        margin-top: .1rem;
        @include border(
            $border-width: 0
        );
    }
    .item-wrap {
        width: 100%;
        padding: .1rem .15rem;
        @include flexbox;
        justify-content: space-between;
        font-size: .12rem;
        color: #212121;
    }
    .main {
        @include flex();
    }
    .title {
        font-size: .2rem;
        color: #212121;
    }
    .desc {
        color: #9e9e9e;
    }
    .status {
        @include flexbox;
        align-items: center;
        .yo-ico {
            color: #999;
            font-size: .12rem;
        }
    }
    .item-disable {
        color: #bdbdbd;
        .title, .desc, .status{
            color: #bdbdbd;
        }
    }
};

@include yo-list(
    $name: repayinfo,
    $border-width: 1px,
    $border-color: #eee,
    $item-border-color: #eee,
    $item-border-space: 0,
    $item-padding: .08rem .15rem
) {
    padding: .1rem 0;
    .item::after {
        border: none;
    }
    .info-title {
        color: #919191;
    }
}

@include yo-list(
    $name: card,
    $margin: 0 0 .34rem 0,
    $border-width: 1px,
    $border-color: #eee,
    $item-padding: 0.1rem 4% .1rem 0.2rem,
    $item-border-color: #eee,
    $item-border-space: .2rem
);

@include yo-list(
    $name: faq,
    $border-width: 1px 0,
    $border-color: #eee,
    $item-padding: 0.1rem 0.1rem 0.11rem .15rem,
    $item-border-color: #eee,
    $item-border-space: .15rem
) {
    .title {
        flex: 1;
        font-size: .16rem;
    }
    .ico {
        color: #e0e0e0 !important;
        line-height: 100%;
    }
}

@include yo-list (
    $name: catefaq,
    $border-color: #eee,
    $border-width: 0 0 1px 0,
    $item-padding: .11rem .1rem .12rem 0,
    $item-border-color: #eee,
    $item-border-space: 0
) {
    margin-left: .16rem;
    font-size: .16rem;
};

@include yo-list(
    $name: personInfo,
    $border-color: #eee
) {
    background-color: #fff;
    .item-wrap {
        @include border(
            $border-width: 0 0 1px 0,
            $border-color: #eee
        );
        &:last-child {
            &::after {
                border-width: 0;
            }
        }
        &:after {
            left: .15rem;
        }
    }
    .item {
        padding: 0 .15rem;
        width: 100%;
        height: .62rem;
        font-size: .16rem;
        @include flexbox;
        @include flex-direction(row);
        @include align-items(center);
        .name {
            @include flex;
            padding-left: .05rem;
            font-weight: 500;
        }
        .desc {
            color: #bdbdbd;
        }
        .yo-ico {
            color: #bdbdbd;
            font-size: .14rem;
        }
        .flex {
            @include flex;
        }
        // &.done {
        //     .desc {
        //         color: #212121
        //     }
        // }
    }
    .wrap {
        @include flexbox;
        @include align-items(center);
    }
    .task-img {
        //width: 100%;
        padding: 0 .15rem .2rem;
        @include flexbox;
        .idcard-img {
            img {
                width: 100%;
            }
            &:first-child {
                margin-right: .13rem;
            }
        }
    }
}