_personal-details.css 3.16 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;
                }

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

                .grade 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;
                }
            }

            .tip {
                background: url("/home/index/xwf.png");
                background-size: 100%;
                background-repeat: no-repeat;
                width: 74px;
                height: 26px;
                display: inline-block;
                color: #fff;
                position: relative;
                top: -52px;
                left: 205px;
            }

            .command {
                color: #b0b0b0;
            }

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

    .trend-word {
        position: relative;

        .trend-right {
            padding-right: 28px;
        }

        .iconfont {
            position: absolute;
            right: 50px;
        }
    }
}