.personal-details{ width: 100%; height: auto; overflow: hidden; margin-top: 20rem / $pxConvertRem; background-color:#fff; border-bottom:1px solid #e0e0e0; ul{ width: 95%; height: auto; overflow: hidden; float:right; li{ &:first-of-type{ height: 100rem / $pxConvertRem; line-height:100rem / $pxConvertRem; } height: 80rem / $pxConvertRem; border-bottom: 1px solid #e0e0e0; .user-avatar { width: 100%; height: 100%; background-image: image-url("me/index/user-avatar.png"); background-size: 100%; } >span{ &:first-of-type{ color: #444; } width: 42%; height: 100%; line-height:80rem / $pxConvertRem; font-size: 48em / $pxConvertRem; margin-right: 8%; float: left; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; .head-portrait{ width:90rem / $pxConvertRem; height: 90rem / $pxConvertRem; overflow: hidden; float: right; border-radius:50%; border:1px solid #eee; } .grade{ width: 100%; height: 100%; overflow: hidden; display: block; position: relative; i{ width:72rem / $pxConvertRem; height: 32rem / $pxConvertRem; overflow: hidden; display: block; position: absolute; right: 40rem / $pxConvertRem; top:50%; @include transform(translateY(-50%)); } span{ color: #b0b0b0; } } .vip-3 { @include rem-sprite($vip, vip-3); } .vip-2 { @include rem-sprite($vip, vip-2); } .vip-1 { @include rem-sprite($vip, vip-1); } &:last-of-type{ color: #b0b0b0; text-align: right; } } &:last-of-type{ border-bottom:none; } } } }