_personal-details.css 2.54 KB
.personal-details {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 20px;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;

    ul {
        width: 95%;
        height: auto;
        overflow: hidden;
        float: right;

        li {
            &:first-of-type {
                height: 100px;
                line-height: 100px;
            }
            height: 80px;
            border-bottom: 1px solid #e0e0e0;

            .user-avatar {
                width: 100%;
                height: 100%;
                background-image: resolve("home/index/user-avatar.png");
                background-size: 100%;
            }

            > span {
                &:first-of-type {
                    color: #444;
                }
                width: 42%;
                height: 100%;
                line-height: 80px;
                font-size: 32px;
                margin-right: 8%;
                float: left;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;

                .head-portrait {
                    width: 90px;
                    height: 90px;
                    overflow: hidden;
                    float: right;
                    border-radius: 50%;
                    border: 1px solid #eee;
                }

                .grade {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    display: block;
                    position: relative;

                    i {
                        width: 72px;
                        height: 32px;
                        overflow: hidden;
                        display: block;
                        position: absolute;
                        right: 40px;
                        top: 50%;
                        transform: translateY(-50%);
                    }

                    span {
                        color: #b0b0b0;
                    }
                }

                .vip-3 {
                    background: url("/home/vip/vip-3.png");
                }

                .vip-2 {
                    background: url("/home/vip/vip-2.png");
                }

                .vip-1 {
                    background: url("/home/vip/vip-1.png");
                }

                &:last-of-type {
                    color: #b0b0b0;
                    text-align: right;
                }
            }

            &:last-of-type {
                border-bottom: none;
            }
        }
    }
}