.r-view-mgr { position: absolute; z-index: 100; top: 0; bottom: 0; right: 0; width: 250px; transform: translateX(250px); background-color: #eeeeee; box-sizing: border-box; border-left: 1px solid #d6d6d6; overflow: auto; padding-bottom: 20px; transition: 0.4s all ease-in-out; box-sizing: border-box; padding: 20px 12px; overflow-x: hidden; &.move-left { transform: translateX(0); } } .groudMgr-top { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; color: #333333; font-size: 14px; .el-icon-close { cursor: pointer; } .el-icon-arrow-left { display: inline-block; vertical-align: middle; width: 20px; height: 40px; line-height: 40px; cursor: pointer; font-weight: 700; font-size: 12px; } span { flex: 1; } } .groudMgr-admins { padding: 0 10px; cursor: pointer; .admins-add { display: flex; justify-content: space-between; align-items: center; color: #999999; font-size: 14px; line-height: 20px; padding: 18px 0 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); .el-icon-circle-plus-outline { font-size: 20px; margin-right: 6px; } .add-fl { display: flex; align-items: center; } } .admin-list { margin-top: 6px; } } .admin-item { display: flex; padding: 6px 0; text-align: left; align-items: center; &.select-list { cursor: pointer; &:hover { background-color: #eeeeee; } } &.checked { background-color: #d7d7d7; } img.user-avatar { background: #ccc; } .user-avatar { width: 30px; height: 30px; line-height: 30px; border-radius: 2px; margin-right: 10px; font-size: 12px; color: #FFF; img{ width: 100%; height: 100%; display: block; } } .name { flex: 1; font-size: 12px; color: #333333; line-height: 30px; max-width: 115px; @include ellipsis; } i { width: 20px; height: 20px; font-size: 20px; color: #2a9ff6; margin-top: 10px; } .el-icon-circle-close { &:hover { color: #df4949; } } .el-icon-circle-close { color: #d3d3d3; } button { padding: 0 12px; font-size: 12px; height: 24px; } } .ad-wrap{ padding: 20px 0; } .ad-item{ font-size: 14px; color: #999999; margin-bottom: 16px; height: 28px; line-height: 28px; cursor: pointer; &.ext-tele{ color: #333; } .el-icon-arrow-right{ float: right; margin-top: 6px; font-size: 14px; font-weight: bold; } } .view-telegram{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(250px); transition: 0.4s all ease-in-out; background: #eeeeee; box-sizing: border-box; padding: 20px 12px; &.move-left { transform: translateX(0); } p{ font-size: 12px; color: #666; padding: 10px 10px; line-height: 24px; } } .link-guide{ font-size: 12px; color: #2ca0f7; }