classroom-instruments/src/TUIKit/TUIComponents/container/TUIGroup/style/web.scss

 .TUI-group {
   position: relative;
   width: 100%;
   height: calc(100% - 49px);
   overflow-y: auto;
   box-sizing: border-box;
 }

 .TUI-conversation-list {
   position: absolute;
   width: 100%;
 }

 .TUI-contact-list {
   flex: 1;
   width: 100%;
   list-style: none;
   position: relative;
   width: 100%;
   height: 100%;
   overflow-y: auto;
   box-sizing: border-box;

   &-item {
     margin: 0 6px;
     padding: 12Px 9Px;
     position: relative;
     display: flex;
     align-items: center;
     border-radius: 8px;
     cursor: pointer;

     label {
       font-size: 14Px;
     }

     &:hover {
       background: #F5F6FA;

       .icon-close {
         display: inline-block;
       }
     }

     .left {
       position: relative;
       width: 48Px;
       height: 48Px;
       margin-right: 10px;

       .num {
         position: absolute;
         display: inline-block;
         right: -8Px;
         top: -8Px;
         width: 20Px;
         height: 20Px;
         font-size: 10Px;
         text-align: center;
         line-height: 20Px;
         border-radius: 50%;
       }

       .avatar {
         width: 100%;
         border-radius: 5Px;
         height: 100%;
         object-fit: cover;
       }

       .online-status {
         box-sizing: border-box;
         position: absolute;
         width: 11Px;
         height: 11Px;
         // left: 24Px;
         // top: 22Px;
         right: 0px;
         bottom: 3px;
         border: 2Px solid #ffffff;
         box-shadow: 0Px 0Px 4Px rgba(0, 0, 0, 0.102606);
         border-radius: 50%;

         &-online {
           background: #29cc85;
         }

         &-offline {
           background: #a4a4a4;
         }
       }
     }

     .content {
       flex: 1;
       padding-left: 8Px;
       display: flex;
       justify-content: space-between;
       align-items: center;

       ul {
         flex: 1;
         display: flex;
         flex-direction: column;

         li {
           flex: 1;
           display: flex;
           align-items: center;
           font-size: 14Px;
           line-height: 16Px;

           span {
             flex: 1;
             width: 0;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
           }
         }

         .name {
           padding-bottom: 2Px;
           font-size: 14Px;
           color: #333;
           font-weight: 500;
         }
       }

       .type {
         padding: 0 4Px;
         line-height: 14Px;
         font-size: 12Px;
         border-radius: 1Px;
       }
     }
   }

   .not-aside {
     padding-left: 40Px;
     display: flex;
     justify-content: space-between;
   }
 }

 .reduce {
   position: relative;
   display: inline-block;
   width: 36Px;
   height: 36Px;

   &::before {
     position: absolute;
     content: '';
     width: 50%;
     height: 1Px;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
   }
 }

 .center {
   display: flex;
   justify-content: center;
 }

 .btn {
   padding: 8Px 20Px;
   border-radius: 4Px;
   border: none;
   font-size: 14Px;
   text-align: center;
   line-height: 20Px;
 }

 input {
   box-sizing: border-box;
   border-radius: 5Px;
   padding: 10Px;
 }

 .search {
   flex: 1;
   display: flex;

   &-box {
     flex: 1;
     display: flex;
     align-items: center;

     h1 {
       padding: 2Px 8Px;
       font-size: 14Px;
     }

     .input-box {
       display: flex;
       position: relative;
       flex: 1;

       input {
         flex: 1;
         margin-right: 0;
       }

       .icon {
         position: absolute;
         right: 10Px;
         top: 0;
         bottom: 0;
         margin: auto 0;
       }
     }

     .search-cancel {
       padding-left: 10Px;
       font-size: 12Px;
       line-height: 18Px;
     }
   }
 }

 .content-header {
   flex: 1;
   display: flex;
   flex-direction: column;

   label {
     flex: 1;
     font-size: 14Px;
   }

   .name {
     width: 110Px;
     letter-spacing: 0;
     font-size: 14Px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 }

 .middle-box {
   flex: 1;
   display: flex;
   align-items: center;
   font-weight: 400;
   color: #999999;
   letter-spacing: 0;

   span {
     font-size: 12Px;
   }

   p {
     flex: 1;
     width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-size: 12Px;
     line-height: 16Px;
   }
 }

 .content-footer {
   line-height: 16Px;
   display: flex;
   flex-direction: column;

   .time {
     font-size: 12Px;
     line-height: 16Px;
     display: inline-block;
     max-width: 75Px;
     white-space: nowrap;
     color: #bbbbbb
   }

   img {
     width: 16Px;
     height: 16Px;
     margin-top: 5Px;
     align-self: flex-end;
   }
 }

 .sectionSearch {
   padding: 0 20px 12px;
 }