_personal-details.css 1.67 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("me/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("/me/vip/vip-3.png");
                }

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

                .vip-1 {
                    background: url("/me/vip/vip-1.png");
                }
				&:last-of-type{
					color: #b0b0b0;
					text-align: right;
				}
			}
			&:last-of-type{
				border-bottom:none;
			}
		}
	}
}