.c-panel{ position: relative; width: 350px; height: 100%; background: #34363c; } .c-panel-header{ position: relative; z-index: 2; width: 66px; height: 100%; float: left; background: #2d2f34; .avatar-wrap{ width: 50px; height: 50px; border-radius: 3px; overflow: hidden; margin: 10px auto 20px; cursor: pointer; &:hover{ opacity: 0.8; } img{ width: 100%; display: block; overflow: hidden; } } .user-avatar{ width: 50px; height: 50px; line-height: 50px; } } .panel-ctrls{ li{ color: #73849f; height: 50px; line-height: 50px; text-align: center; font-size: 20px; cursor: pointer; position: relative; &.current{ color: #2982c7; background: #212328; cursor: default; &:after{ content: ""; position: absolute; left: 0; height: 10px; width: 2px; background: #2982c7; top: 50%; margin-top: -5px; } .mee-icon-chat{ background: url('../../assets/chat-icon-active.png') } .friend-icon-chat{ background: url('../../assets/friend-icon-active.png') } } } } .c-panel-nav{ position: relative; z-index: 1; margin-left: 66px; height: 100%; @include webkitbox(2); } .panel-searbar{ position: relative; margin: 0 20px 20px; padding-top: 30px; @include webkitbox(1); .input-con{ background: #2c2e34; color: #656b77; height: 30px; position: relative; @include flex(1); } input{ font-size: 12px; color: #b1c0d8; line-height: 30px; background: none; margin: 0; border: none; outline: none; padding: 0 0 0 30px; display: block; width: 100%; box-sizing: border-box; } .el-icon-search{ font-size: 20px; position: absolute; text-align: center; top: 0; left: 0; width: 30px; height: 30px; line-height: 30px; } .el-icon-plus{ font-size: 16px; width: 30px; height: 30px; line-height: 30px; border-radius: 3px; background: #444750; color: #ffffff; text-align: center; margin-left: 10px; display: block; cursor: pointer; &:hover{ opacity: 0.6; } } } .chat-list{ overflow-y: auto; @include flex(1); } .mee-icon-chat{ display: inline-block; vertical-align: middle; background: url('../../assets/chat-icon.png') center center no-repeat; width: 25px; height: 22px; } .friend-icon-chat{ display: inline-block; vertical-align: middle; background: url('../../assets/friend-icon.png') center center no-repeat; width: 25px; height: 21px; } .group-recommand{ height: 40px; line-height: 40px; padding: 6px 13px 20px 19px; color: #ffffff; cursor: pointer; border-bottom: 1px solid #3e4046; margin-bottom: 10px; .group-icon{ float: left; vertical-align: middle; height: 40px; width: 40px; border-radius: 4px; line-height: 40px; background: url('../../assets/group-icon.png') center center no-repeat; background-color: #2ca0f7; margin-right: 10px; } .title{ margin-left: 50px; font-size: 14px; i{ float: right; margin-top: 14px; } } } .ext{ position: absolute; width: 24px; height: 24px; border-radius: 50%; background-color: #2398f1; line-height: 24px; font-size: 12px; text-align: center; color: #ffffff; right: 4px; top: 12px; } .panel-nav-icon{ position: absolute; left: 0; right: 0; bottom: 0; height: 60px; text-align: center; line-height: 60px; cursor: pointer; &:hover{ background-color: #222325; } &::after{ content: ''; display: inline-block; background: url('../../assets/panel-nav-icon.png') no-repeat; background-size: 100%; width: 20px; height: 18px; } .menu{ display: none; position: absolute; left: 66px; bottom: 0; z-index: 99; color: #7c8ca5; font-size: 14px; border-radius: 4px; overflow: hidden; &.active{ display: block; } .item{ cursor: pointer; width: 120px; height: 36px; line-height: 36px; background-color: #222325; } .exit-icon{ display: inline-block; vertical-align: middle; margin-right: 10px; background: url('../../assets/login-out-icon.png') no-repeat; width: 14px; height: 16px; background-size: 100%; } } }