.modal-bd{ padding: 24px 0; } .user-top{ display: flex; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5; .user-avatar{ width: 60px; height: 60px; line-height: 60px; border-radius: 4px; margin-right: 12px; position: relative; overflow: hidden; cursor: pointer; img{ width: 100%; height: 60px; border-radius: 4px; vertical-align: middle; } &:hover{ p{ bottom: 0; } } p{ font-size: 12px; text-align: center; color: #ffffff; height: 16px; line-height: 16px; position: absolute; left: 0; right: 0; bottom: -16px; transition: .2s all ease-in; background-color: rgba($color: #000000, $alpha: .4); } } .r-info{ flex: 1; text-align: left; font-size: 14px; color: #333333; } .name{ font-weight: bold; display: block; margin-bottom: 12px; max-width: 210px; @include ellipsis(); } } .account-wrap{ text-align: left; font-size: 14px; color: #333333; padding-top: 10px; .title{ margin-bottom: 16px; } .type{ height: 20px; line-height: 20px; margin-bottom: 10px; } .fr{ float: right; span{ font-size: 12px; color: #999999; display: inline-block; margin-right: 6px; } } strong{ font-weight: bold; } .key{ font-size: 12px; color: #333333; } } .account-item{ margin-bottom: 26px; &:hover{ .open-tips{ visibility: visible; } } } .send-msg-btn{ display: block; width: 100%; outline: none; border: none; height: 34px; line-height: 34px; text-align: center; color: #ffffff; font-size: 14px; border-radius: 4px; background-color: #239af2; &:hover{ opacity: .8; } } .edit-name-input{ height: 20px; line-height: 20px; outline: none; border: none; background-color: #efefef; margin-bottom: 4px; border-radius: 2px; width: 120px; padding-left: 10px; font-size: 12px; color: #333333; } .open-tips{ visibility: hidden; font-size: 12px; display: inline-block; margin-left: 10px; color: #999999; }