client-app/style/my/index.scss

.hc-user-page {
    :deep(.user-nav-bar) {
        background: rgba(85, 77, 132, 0);
        transition: background .2s;
        color: white;
    }
    :deep(.hc-nav-bar) {
        display: flex;
        align-items: center;
        padding: .6rem .9rem;
        justify-content: flex-end;
        font-size: 46rpx;
    }
    .user-nav-bg {
        position: fixed;
        top: 0;
        width: 100%;
        background: rgb(85, 77, 132);
        border-radius: 0 0 40rpx 40rpx;
        height: calc(var(--status-bar-height) + 280rpx);
        background-image: url(/static/image/bg-2.jpg);
        background-position: center;
        background-size: 100%;
    }
    .hc-user-content-box {
        position: relative;
        margin: 0 28rpx;
        z-index: 22;
    }
    .user-nav-h {
        position: relative;
        height: 86rpx;
    }
    .user-info-card {
        position: relative;
        background: white;
        z-index: 4;
        border-radius: 14rpx;
        box-shadow: 0 4rpx 5rpx 0 rgba(16, 16, 16, .1);
        .name-avatar-bar {
            position: relative;
            padding: 38rpx;
            .name {
                font-size: 32rpx;
                padding-right: 240rpx;
            }
            .avatar {
                position: absolute;
                right: 44rpx;
                top: -60rpx;
                display: inline-flex;
                background: white;
                border: 8rpx solid white;
                border-radius: 50%;
                .avatar-img {
                    border-radius: 50%;
                }
            }
        }
        .user-auth-bar {
            position: relative;
            padding: 0 38rpx;
            display: flex;
            align-items: center;
            .auth-tag {
                position: relative;
                display: flex;
                align-items: center;
                border-radius: 120rpx;
                background: #AF52DE;
                color: white;
                font-size: 22rpx;
                padding: 6rpx 22rpx;
            }
            .auth-tag.visit {
                background: #AF52DE;
                .name {
                    margin-left: 10rpx;
                }
            }
            .auth-tag.approve {
                position: relative;
                background: #7F83F7;
                .name {
                    margin-right: 30rpx;
                }
                .check-icon, .close-icon {
                    position: absolute;
                    font-size: 44rpx;
                    right: 0;
                }
                .check-icon {
                    color: #A2EF4D;
                }
                .close-icon {
                    color: #e5e5e5;
                }
            }
            .auth-tag + .auth-tag {
                margin-left: 20rpx;
            }
        }
        .info-num-bar {
            position: relative;
            padding: 24rpx 0;
            margin-top: 24rpx;
            .col-bar {
                text-align: center;
                font-size: 25rpx;
                color: grey;
                .num {
                    color: black;
                }
                .text {
                    margin-top: 10rpx;
                }
            }
        }
        &.is-animation {
            animation-name: user-info-card-animation;
        }
    }
    .common-operation-box {
        position: relative;
        margin-top: 50rpx;
        z-index: 4;
        .title {
            color: #333333;
        }
        .handle-row-bar {
            margin-top: 20rpx;
            .col-item-card {
                position: relative;
                background: white;
                border-radius: 8rpx;
                padding: 20rpx;
                font-size: 26rpx;
            }
        }
        .handle-row-bar .col-item-card {
            display: flex;
            align-items: center;
            .content {
                position: relative;
                flex: 1;
                .title {
                    font-size: 26rpx;
                    font-weight: bold;
                }
                .text {
                    margin-top: 6rpx;
                    font-size: 25rpx;
                    color: grey;
                }
            }
            .icon-bar {
                position: relative;
                font-size: 50rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #1f1f1f;
            }
            &.in-left {
                animation-name: user-handle-card-left-animation;
            }
            &.in-right {
                animation-name: user-handle-card-right-animation;
            }
        }
    }
    .news-dynamics-box {
        position: relative;
        margin-top: 60rpx;
        z-index: 4;
        color: white;
        background: rgb(85, 77, 132);
        border-radius: 12rpx;
        padding: 22rpx;
        background-image: url(/static/image/bg-3.jpg);
        background-position: center;
        background-size: 100%;
        .title-bar {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22rpx 0;
            .name {
                margin-left: 12rpx;
            }
        }
        &.is-animation {
            animation-name: user-info-card-animation;
        }
    }
    .exit-button-bar {
        position: relative;
        margin-top: 50rpx;
        margin-bottom: 30rpx;
        z-index: 4;
        .exit-button {
            background: white;
            color: #F96654;
            font-size: 27rpx;
            border-radius: 8rpx;
            border: none;
            height: 74rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            padding: 0;
            &:after {
                display: none;
            }
        }
        &.is-animation {
            .exit-button {
                animation-name: user-exit-btn-animation;
            }
        }
    }

    // 动画
    @keyframes user-info-card-animation {
        0% {
            transform: translatez(100px) perspective(600rpx) rotate3d(1, 0, 0, 90deg);
            animation-timing-function: ease-in;
            opacity: 0;
        }
        40% {
            transform:translatez(100px) perspective(600rpx) rotate3d(1, 0, 0, -20deg);
            animation-timing-function: ease-in;
        }
        60% {
            transform:translatez(100px) perspective(600rpx) rotate3d(1, 0, 0, 10deg);
            opacity: 1;
        }
        80% {
            transform:translatez(100px) perspective(600rpx) rotate3d(1, 0, 0, -5deg);
        }
        100% {
            transform:translatez(100px) perspective(600rpx);
        }
    }
    // 动画
    @keyframes user-handle-card-left-animation {
        0%, 60%, 75%, 90%, 100% {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
            opacity: 0;
            transform: translate3d(-3000px, 0px, 0px);
        }
        60% {
            opacity: 1;
            transform: translate3d(25px, 0px, 0px);
        }
        75% {
            transform: translate3d(-10px, 0px, 0px);
        }
        90% {
            transform: translate3d(5px, 0px, 0px);
        }
        100% {
            transform: none;
        }
    }
    // 动画
    @keyframes user-handle-card-right-animation {
        0%, 60%, 75%, 90%, 100% {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
            opacity: 0;
            transform: translate3d(3000px, 0px, 0px);
        }
        60% {
            opacity: 1;
            transform: translate3d(-25px, 0px, 0px);
        }
        75% {
            transform: translate3d(10px, 0px, 0px);
        }
        90% {
            transform: translate3d(-5px, 0px, 0px);
        }
        100% {
            transform: none;
        }
    }
    //动画
    @keyframes user-exit-btn-animation {
        0%, 60%, 75%, 90%, 100% {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
            opacity: 0;
            transform: translate3d(0px, 3000px, 0px);
        }
        60% {
            opacity: 1;
            transform: translate3d(0px, -20px, 0px);
        }
        75% {
            transform: translate3d(0px, 10px, 0px);
        }
        90% {
            transform: translate3d(0px, -5px, 0px);
        }
        100% {
            transform: translate3d(0px, 0px, 0px);
        }
    }
}