gcb_zc/assets/new.scss

@charset "utf-8";
//font 

$bg                :#f8f9fa; // 全局背景色
$tag-bg            :#f2f2fa; // 标签背景色
$highlight-color   : #f0f0f0; // 弱线分割
$grey-color        : #efefef; // 列表分隔
$grey-border-bottom: 1px solid $highlight-color; // 列表底部分隔线
$red               :#ff5c5c; // 品牌色
$black202020       :#202020; // 大黑
$black7a7a7a       :#7a7a7a; // 中黑
$blackafafaf       :#afafaf; // 灰
$efefef            :#efefef;
$f0f0f0            :#f0f0f0;



// 我的界面嵌套样式css

// 头部个人消息
.top_info {
    width           : 100%;
    background-color: #fff;
    background-image: url('../static/img/bg-me.png');

    background-repeat: no-repeat;
    background-size  : 100%;
    margin-bottom    : 1rem;
    height           : auto;

    .user_info {
        padding     : 1rem 0.5rem;
        padding-left: 2rem;
        padding-top : 5rem;

        h2 {
            width        : 7.2rem;
            height       : 7.2rem;
            border-radius: 50%;
            float        : left;
            margin-right : 1rem;
            display      : flex;
            align-items  : center;
        }

        h2 img {
            width: 100%;
        }

        div {
            float       : left;
            //   display:flex;
            align-items : center;
            margin-top  : 10px;

            p {
                display: block;
                color  : #fff;
            }
        }
    }

    // end：头像姓名结束

    // 会员尊享
    .verify {
        border-radius   : 0.8rem;
        padding         : 0 1rem;
        margin          : 0 1.5rem;
        box-shadow      : 0 4px 20px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        height          : 7.2rem;
        line-height     : 7.2rem;
        position        : relative;
        margin-top      : 2rem;

        p {
            color       : #d4ae5b;
            font-size   : 1.8rem;
            font-weight : bold;
            padding-left: 3rem;

            &::after {
                content          : '';
                display          : block;
                position         : absolute;
                width            : 2.2rem;
                height           : 2.2rem;
                left             : 1rem;
                top              : 50%;
                margin-top       : -1.1rem;
                background-image : url('../static/img/icon_V.png');
                background-repeat: no-repeat;
                background-size  : 100%;
            }
        }

        a {
            padding      : 0 0.8rem;
            border-radius: 0.5rem;
            color        : #fff;
            font-weight  : bold;
            height       : 3rem;
            line-height  : 3rem;
            position     : absolute;
            top          : 50%;
            right        : 2rem;
            margin-top   : -1.5rem;
            font-size    : 1.5rem;
        }

    }

    // end：会员尊享结束

    .real_name {
        padding-left    : 1.5rem;
        background-color: #fff;
    }
}

// end:我的界面嵌套样式css

//   菜单列表
.menu-list {
    margin-bottom   : 1rem;
    background-color: #fff;

    li {
        position    : relative;
        height      : 5.5rem;
        line-height : 5.5rem;
        z-index     : 99;
        padding-left: 1.5rem;

        &:last-child::after {
            height: 0;
        }

        &::after {
            content         : '';
            display         : block;
            background-color: $efefef;
            position        : relative;
            height          : 0.05rem;
            left            : 0;
            right           : 0;
        }

        img {
            width     : 1.6rem;
            height    : 1.6rem;
            position  : absolute;
            top       : 50%;
            margin-top: -0.8rem;
        }

        a {
            position        : absolute;
            top             : 0;
            left            : 0;
            right           : 0;
            bottom          : 0;
            background-color: rgba($color: #000000, $alpha: 0);
            z-index         : 100;
        }

        p {
            padding-left: 3rem;

            // &::before{
            //     content         : '';
            //     display         : block;
            //     background-color: pink;
            //     position        : absolute;
            //     width           : 2.2rem;
            //     height          : 2.2rem;
            //     left            : 0;
            //     top             : 50%;
            //     margin-top      : -1.1rem;
            // }
            &::after {
                content          : '';
                display          : block;
                position         : absolute;
                width            : 0.6rem;
                height           : 1.2rem;
                right            : 1.5rem;
                top              : 50%;
                margin-top       : -0.6px;
                background-image : url('../static/img/arr_back_next.png');
                background-repeat: no-repeat;
                background-size  : 100%;

            }
        }
    }
}

//  end:菜单列表


// 身份认证
.page_identity {
    height          : auto;
    background-color: $bg;

    form {
        height: 100%;

        .info_basic {
            padding-left    : 1.5rem;
            margin-bottom   : 1rem;
            background-color: #fff;

            .item_form {
                background-color: #fff;
                height          : 5rem;
                line-height     : 5rem;

                label {
                    float  : left;
                    display: block;
                }

                .form_input {
                    margin-left: 5rem;

                    input {
                        border       : 0;
                        text-align   : left;
                        width        : 100%;
                        padding-right: 1.5rem;
                        padding-left : 1rem;
                        outline      : none;
                    }
                }
            }
        }
    }
}

// 身份证上传
.img_upload {
    padding         : 1rem 1.5rem;
    background-color: #fff;

    // padding-bottom: 1rem;
    .upload_box {
        position: relative;

        input {
            width   : 100%;
            height  : 16rem;
            padding : 0 2rem;
            opacity : 0;
            z-index : 100;
            position: relative;
        }

        &::after {
            content            : '';
            display            : block;
            position           : absolute;
            width              : 100%;
            height             : 100%;
            right              : 0;
            top                : 0;
            bottom             : 0;
            left               : 0;
            margin-top         : -0.6px;
            background-image   : url('../static/img/icon_card.png');
            background-repeat  : no-repeat;
            background-size    : 80%;
            background-position: center;
            z-index            : 10;
        }
    }

    .require {
        text-align: center;
        font-size : 1.6rem;

        span {
            font-size: 1rem;
            color    : $blackafafaf;
        }
    }
}

.notice {
    font-size    : 1rem;
    color        : $blackafafaf;
    height       : 3rem;
    line-height  : 3rem;
    padding-left : 1.5rem;
    margin-bottom: 2rem;
}

// 我的会员VIP页面
.page_vip {
    height  : 16rem;
    position: relative;

    .vip_nav {
        width: 100%;

        p {
            width      : 50%;
            float      : left;
            height     : 5rem;
            line-height: 5rem;
            text-align : center;
            font-size  : 1.5rem;
            color      : #ccc;
            transition : .1s;
        }
    }

    // 会员切换
    .vip_content {
        position: absolute;
        top     : 10rem;
        width   : 100%;
        height  : auto;

        .slide_box {
            background-color: rgba($color: #000000, $alpha: 0);
            width           : 200%;
            overflow        : hidden;
            margin          : 0 auto;
            // margin-left     : -100%;
            transform       : .2s;

            .vip_item {
                float           : left;
                width           : 50%;
                background-color: rgba($color: #000000, $alpha: 0);
                padding         : 0 1.5rem;
                padding-bottom  : 40px;

                .vip_card {
                    width              : 100%;
                    background-color   : #765d45;
                    border-radius      : 0.8rem;
                    padding            : 1.5rem;
                    height             : 14rem;
                    color              : #fff;
                    background-image   : url('../static/img/bg_vip-card.png');
                    background-repeat  : no-repeat;
                    background-size    : cover;
                    background-position: center;
                    position           : relative;

                    h4 {
                        font-weight: bold;
                        font-size  : 2rem;
                        padding-top: 1rem;
                    }

                    div {
                        position: absolute;
                        height  : auto;
                        bottom  : 2rem;

                        p {
                            margin-bottom: 0.5rem;

                            i {
                                padding-right: 1rem;
                                color        : #FFD6D6;
                                font-size    : 1rem,
                            }
                        }
                    }

                    .pay_more {
                        padding         : 0 1.6rem;
                        border-radius   : 5rem;
                        color           : #A17046;
                        background-color: #F9F0E8;
                        font-weight     : bold;
                        height          : 3rem;
                        line-height     : 3rem;
                        position        : absolute;
                        top             : 50%;
                        right           : 2rem;
                        margin-top      : -1.5rem;
                        font-size       : 1.5rem;
                    }
                }

                .options {
                    div {
                        margin-top: 25px;

                        h3 {
                            font-weight  : bold;
                            font-size    : 1.8rem;
                            height       : 36px;
                            line-height  : 36px;
                            margin-bottom: 10px;
                        }

                        ul {
                            li {
                                display         : inline-block;
                                margin-right    : 15px;
                                border-radius   : 8px;
                                padding         : 0 12px;
                                background-color: #f0ebeb;
                                height          : 36px;
                                line-height     : 36px;
                                position        : relative;

                                i {
                                    display            : inline-block;
                                    width              : 20px;
                                    height             : 20px;
                                    background-image   : url('../static/img/icon_delete.png');
                                    background-repeat  : no-repeat;
                                    background-size    : 60%;
                                    margin-left        : 4px;
                                    vertical-align     : middle;
                                    background-position: center;
                                }

                                &.add {
                                    border          : 1px solid $red;
                                    background-color: #fff;
                                    color           : $red;
                                }
                            }
                        }
                    }

                    // 套餐价格
                    .opt_price {
                        h3 {
                            margin-bottom: 0;
                        }

                        i {
                            color        : #afafaf;
                            font-style   : normal;
                            font-size    : 12px;
                            display      : block;
                            margin-bottom: 20px;
                        }

                        .opt_buy {
                            width: 100%;

                            li {
                                width           : 25%;
                                margin          : 0;
                                background-color: rgba($color: #000000, $alpha: 0);
                                height          : 11rem;
                                float           : left;
                                padding         : 0 4px;

                                .to_buy {
                                    background-color: #fff;
                                    box-shadow      : 0 4px 20px rgba(0, 0, 0, 0.1);
                                    border-radius   : 16px;
                                    text-align      : center;
                                    padding         : 20px 0;
                                    width           : 100%;
                                    height          : 100%;
                                    margin          : 0;
                                    position        : relative;

                                    p {
                                        line-height: 0;
                                        margin     : 10px 0;
                                    }

                                    .tag_yh {
                                        position                  : absolute;
                                        top                       : 0;
                                        left                      : 50%;
                                        width                     : 70%;
                                        height                    : 20px;
                                        margin-left               : -35%;
                                        margin-top                : -2px;
                                        line-height               : 20px;
                                        color                     : #fff;
                                        background-color          : $red;
                                        font-size                 : 10px;
                                        border-bottom-left-radius : 8px;
                                        border-bottom-right-radius: 8px;

                                        &::before {
                                            content      : '';
                                            display      : block;
                                            width        : 6px;
                                            height       : 6px;
                                            position     : absolute;
                                            top          : 0;
                                            left         : 0;
                                            margin-left  : -4px;
                                            margin-top   : 2px;
                                            border-top   : 4px solid rgba($color: #000000, $alpha: 0);
                                            border-bottom: 4px solid rgba($color: #000000, $alpha: 0);
                                            border-left  : 4px solid rgba($color: #000000, $alpha: 0);
                                            border-right : 4px solid rgba($color: #cd2b25, $alpha: 1);
                                            transform    : rotate(-135deg);
                                        }

                                        &::after {
                                            content      : '';
                                            display      : block;
                                            width        : 6px;
                                            height       : 6px;
                                            position     : absolute;
                                            top          : 0;
                                            right        : 0;
                                            margin-right : -4px;
                                            margin-top   : 2px;
                                            border-top   : 4px solid rgba($color: #000000, $alpha: 0);
                                            border-bottom: 4px solid rgba($color: #000000, $alpha: 0);
                                            border-left  : 4px solid rgba($color: #000000, $alpha: 0);
                                            border-right : 4px solid rgba($color: #cd2b25, $alpha: 1);
                                            transform    : rotate(-45deg);
                                        }
                                    }

                                    .buy_month {
                                        font-weight: bold;
                                        color      : #7B5839;
                                        margin-top : 16px;
                                    }

                                    .buy_price {
                                        font-weight: bold;
                                        color      : $red;
                                        margin-top : 30px;
                                        font-size  : 18px;

                                        span {
                                            font-size: 10px;
                                        }
                                    }

                                    del {
                                        color          : #ccc;
                                        text-decoration: line-through;
                                        font-size      : 14px;
                                    }

                                    a {
                                        padding      : 0 0.8rem;
                                        border-radius: 10rem;
                                        color        : #fff;
                                        font-weight  : bold;
                                        height       : 2.4rem;
                                        line-height  : 2.4rem;
                                        position     : absolute;
                                        width        : 4rem;
                                        margin-left  : -2rem;
                                        bottom       : 0;
                                        left         : 50%;
                                        margin-bottom: -1.2rem;
                                        font-size    : 1.2rem;
                                    }
                                }
                            }
                        }

                        .all_buy {
                            margin-top: 40px;

                            .to_buy {
                                background-color: #fff;
                                box-shadow      : 0 4px 20px rgba(0, 0, 0, 0.1);
                                border-radius   : 16px;
                                padding         : 20px 0;
                                width           : 100%;
                                height          : 80px;
                                margin          : 0;
                                position        : relative;
                                padding-left    : 1.5rem;
                                padding-right   : 1.5rem;

                                p {
                                    line-height: 0;
                                    margin     : 10px 0;
                                    display    : inline-block;
                                }

                                .tag_yh {
                                    position                  : absolute;
                                    top                       : 0;
                                    left                      : 20px;
                                    width                     : 100px;
                                    height                    : 20px;
                                    margin-top                : -6px;
                                    line-height               : 20px;
                                    color                     : #fff;
                                    background-color          : $red;
                                    font-size                 : 10px;
                                    border-top-left-radius    : 10px;
                                    border-bottom-right-radius: 10px;
                                    text-align                : center;
                                }

                                .buy_month {
                                    font-weight : bold;
                                    color       : #7B5839;
                                    line-height : 40px;
                                    margin      : 0;
                                    text-align  : left;
                                    margin-right: 20px;
                                }

                                .buy_price {
                                    font-weight: bold;
                                    color      : $red;
                                    line-height: 40px;
                                    margin     : 0;
                                    text-align : left;
                                    font-size  : 18px;

                                    span {
                                        font-size: 10px;

                                    }
                                }

                                del {
                                    color          : #ccc;
                                    text-decoration: line-through;
                                    font-size      : 14px;
                                }

                                a {
                                    padding      : 0 0.8rem;
                                    border-radius: 10rem;
                                    color        : #fff;
                                    font-weight  : bold;
                                    height       : 2.4rem;
                                    line-height  : 2.4rem;
                                    position     : absolute;
                                    width        : 4rem;
                                    top          : 50%;
                                    right        : 20px;
                                    margin-top   : -1.2rem;
                                    font-size    : 1.2rem;
                                    text-align   : center;
                                }
                            }
                        }

                    }
                }
            }

            .vip_ztb {

                border: 2px solid red;
            }

            .vip_gcxm {

                border: 2px solid green;
            }
        }
    }

}

.priv {
    width     : 100%;
    margin-top: 30px;

    h4 {
        font-weight: bold;
        position   : relative;
        height     : 40px;
        line-height: 40px;
        text-align : center;
        font-size  : 18px;

        &::before {
            content         : '';
            position        : absolute;
            width           : 16px;
            height          : 4px;
            background-color: $red;
            top             : 50%;
            margin-top      : -2px;
            left            : 50%;
            margin-left     : -150px;
            border-radius   : 5px;
        }

        &::after {
            content         : '';
            position        : absolute;
            width           : 16px;
            height          : 4px;
            background-color: $red;
            top             : 50%;
            margin-top      : -2px;
            right           : 50%;
            margin-right    : -150px;
            border-radius   : 5px;
        }
    }

    ul {
        width: 100%;

        li {
            padding : 15px 0;
            position: relative;

            &::after {
                content         : '';
                position        : absolute;
                left            : 0;
                right           : 0;
                bottom          : 0;
                height          : 1px;
                background-color: $f0f0f0;
            }

            p {
                font-weight: bold;
                font-size  : 16px;
            }

            span {
                color        : $blackafafaf;
                margin-bottom: 10px;
                font-size    : 14px;
            }

        }
    }
}


.explain {
    width         : 100%;
    margin-top    : 20px;
    font-size     : 12px;
    padding-bottom: 40px;

    p {
        color        : $blackafafaf;
        margin-bottom: 10px;
    }

    ul {
        li {
            color      : $blackafafaf;
            line-height: 20px;
        }
    }
}

// 我的账户
.page_account {
    height  : 16rem;
    position: relative;

    // 顶部切换
    .account_nav {
        width: 100%;

        p {
            width      : 50%;
            float      : left;
            height     : 5rem;
            line-height: 5rem;
            text-align : center;
            font-size  : 1.5rem;
            color      : $black7a7a7a;
            transition : .1s;
        }
    }

    // 账号内容切换
    .account_content {
        position: absolute;
        top     : 10rem;
        width   : 100%;
        height  : auto;

        .slide_box {
            background-color : rgba(0, 0, 0, 0);
            width            : 200%;
            overflow         : hidden;
            margin           : 0 auto;
            // margin-left      : -100%;
            -webkit-transform: .2s;
            transform        : .2s;

            .account_item {
                float           : left;
                width           : 50%;
                background-color: rgba(0, 0, 0, 0);
                padding         : 0 1.5rem;
                padding-bottom  : 40px;

                .account_card {
                    width              : 100%;
                    background-color   : $red;
                    border-radius      : 0.8rem;
                    padding            : 0 1.5rem;
                    // height          : 14rem;
                    color              : #fff;
                    background-image   : url('../static/img/bg_vip-card.png');
                    background-repeat  : no-repeat;
                    background-size    : cover;
                    background-position: center;
                    position           : relative;

                    div {
                        &:not(:last-child) {
                            border-bottom: 1px solid rgba($color: #fff, $alpha: 0.3);
                        }

                        padding : 2.2rem 0;
                        position: relative;

                        h4 {
                            font-weight   : bold;
                            font-size     : 2rem;
                            padding-bottom: 1rem;
                        }

                        p {
                            i {
                                padding-right: 1rem;
                                color        : #FFD6D6;
                                font-size    : 1rem;
                            }
                        }

                        a {
                            padding         : 0 1.2rem;
                            border-radius   : 5rem;
                            color           : #A17046;
                            background-color: #F9F0E8;
                            font-weight     : bold;
                            height          : 3rem;
                            line-height     : 3rem;
                            position        : absolute;
                            top             : 50%;
                            right           : 0;
                            margin-top      : -1.5rem;
                            font-size       : 1.5rem;
                            // width        : 6rem;
                            // text-align   : center;
                        }
                    }
                }

                .shiming {
                    width           : 100%;
                    height          : 32px;
                    line-height     : 32px;
                    border-radius   : 50px;
                    background-color: #F2E0BD;
                    color           : #fff;
                    margin-top      : 10px;

                    i {
                        border-radius   : 50%;
                        background-color: #F84C45;
                        width           : 16px;
                        height          : 16px;
                        color           : #fff;
                        display         : inline-block;
                        text-align      : center;
                        line-height     : 16px;
                        margin-left     : 10px;
                    }

                    p {
                        display  : inline-block;
                        color    : #B76012;
                        font-size: 14px;
                    }

                    span {
                        float       : right;
                        margin-right: 10px;
                        color       : #765D45;
                        font-size   : 14px;
                    }
                }


            }
        }
    }
}

// 公用泪飙头部
.title_dy {
    height     : 4rem;
    line-height: 4rem;
    margin-top : 2rem;
    position   : relative;

    &::after {
        content         : '';
        position        : absolute;
        height          : 1px;
        background-color: #f0f0f0;
        left            : 0;
        right           : 0;
        bottom          : 0;
        margin-left     : -1.5rem;
        margin-right    : -1.5rem;
    }

    h3 {
        font-weight: bold;
        display    : inline-block;
    }

    a {
        float    : right;
        color    : $black202020;
        font-size: 1.5rem;
    }
}

// 账户详情
.account_detail {
    .detail_list {
        li {
            height     : 5rem;
            line-height: 5rem;
            position   : relative;

            &::after {
                position        : absolute;
                content         : '';
                display         : block;
                height          : 1px;
                left            : 0;
                bottom          : 0;
                right           : 0;
                background-color: $f0f0f0;
                margin-right    : -1.5rem;
            }

            a {
                color: $black202020;

                // font-size: 1.8rem;
                span {
                    color      : $red;
                    font-weight: bold;
                }

                i {
                    float        : right;
                    color        : $blackafafaf;
                    position     : relative;
                    padding-right: 2rem;
                    font-size    : 1.5rem;

                    &::after {
                        position           : absolute;
                        content            : '';
                        display            : block;
                        width              : 1.2rem;
                        height             : 1.2rem;
                        top                : 50%;
                        right              : 0;
                        margin-top         : -0.6rem;
                        background-image   : url('../static/img/to.png');
                        background-size    : 60%;
                        background-position: center;
                        background-repeat  : no-repeat;
                    }
                }
            }
        }
    }
}

// 一条交易详情
.one_detail {
    padding: 0 1.5rem;

    .detail_money {
        text-align: center;
        position  : relative;
        height    : auto;
        padding   : 3rem 0;

        &::after {
            position        : absolute;
            content         : '';
            display         : block;
            height          : 1px;
            left            : 0;
            bottom          : 0;
            right           : 0;
            background-color: $f0f0f0;
        }

        p {
            font-size       : 4rem;
            // margin-bottom: 1rem;
        }

        span {
            color: $blackafafaf;
        }
    }

    .detail_content {
        margin-top: 1rem;

        li {
            line-height: 4rem;

            span {
                color: $blackafafaf;
            }

            p {
                float: right;
            }
        }
    }
}

.my-swiper {
    height: 300px;
    width : 100%;

    .swiper-slide {
        text-align      : center;
        font-size       : 38px;
        font-weight     : 700;
        background-color: #eee;
        display         : flex;
        justify-content : center;
        align-items     : center;
    }

    .swiper-pagination {
        >.swiper-pagination-bullet {
            background-color: red;
        }
    }
}