.personal-details { width: 100%; height: auto; overflow: hidden; margin-top: 20px; background-color: #f0f0f0; border-bottom: 1px solid #e0e0e0; ul { width: 100%; height: auto; overflow: hidden; float: right; margin-bottom: 20px; padding-left: 30px; background: #fff; &:last-child { margin-bottom: 0; } &:first-child { li:first-of-type { height: 100px; line-height: 100px; } } li { 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; } } }