for_client/src/styles/user/index.scss

.hc-layout-box {
    position: relative;
    height: 100%;
    display: flex;
    .hc-layout-left-box {
        position: relative;
        width: 260px;
        height: 100%;
        color: #1A1A1A;
        border-radius: 10px;
        background-color: #f1f5f8;
        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
        .user-avatar-box {
            position: relative;
            text-align: center;
            padding: 24px;
            .user-avatar {
                position: relative;
                height: 100px;
                width: 100px;
                border-radius: 50%;
                background: #d8d8d8;
                margin: 24px auto auto;
                border: 2px solid #ffffff;
                box-shadow: 7px 7px 8px 0 rgba(54,92,167,0.15), -7px -7px 8px 0 #ffffff, 4px 4px 8px 0 rgba(54,92,167,0.15), -4px -4px 8px 0 #ffffff;
                img {
                    display: block;
                    object-fit: cover;
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;
                }
                .user-avatar-upload {
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #f1f5f8;
                    border-radius: 50%;
                    color: #838791;
                    cursor: pointer;
                    box-shadow: 4px 4px 8px 0 rgba(54,92,167,0.15);
                    transition: color 0.2s;
                    &:hover {
                        color: var(--el-color-primary);
                    }
                }
            }
            .user-name {
                position: relative;
                margin-top: 18px;
                font-weight: bold;
                color: #1a1a1a;
                font-size: 16px;
            }
        }
        .user-menu-box {
            position: relative;
            height: calc(100% - 230px);
        }
    }
    .hc-layout-content-box {
        flex: 1;
        position: relative;
        margin-left: 24px;
        .basic-hight {
            height: calc(100% - 75px);
        }
        .hc-card-foot-box {
            position: absolute;
            height: 80px;
            width: 100%;
            bottom: -24px;
            background: #f1f5f8;
            border-radius: 8px 8px 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 -10px 21px 3px rgba(32,37,50,0.03);
        }
        .foot-recycle {
            position: relative;
            display: flex;
        }
    }
}