cloudfile-ui/src/assets/styles/my-common.scss

.spill{
    display: -webkit-box; /*弹性伸缩盒子模型显示*/
    -webkit-box-orient: vertical; /*排列方式*/
    -webkit-line-clamp: 1; /*显示文本行数*/
    overflow: hidden; /*溢出隐藏*/
}
.flex-buju{
    display: flex;
    align-items: center;
    justify-content: center;
}

.main {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    .left-main,
    .right-main {
      background: #fff;
      border-radius: 4px;
    }
    //左侧板块
    .left-main {
      // width: 312px;
      width: 20.1%;
      margin-right: 8px;
      .left-top {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 48px;
        background: #ebeff6;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
      }
    }
    //右侧板块
    .right-main {
      width: 100%;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      .right-header {
        background-color: #ebeff6;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
      }
      .right-container {
        // flex: 1;
        height: 300px !important;
        overflow: auto;
        border-bottom: 1px solid #c1cce3;
      }
      .right-footer {
        display: flex;
        align-items: center;
        :deep .el-input__wrapper {
          background: #f5f7f9 !important;
          border-radius: 16px;
        }
        .w-50 {
          margin: 0 16px;
          flex: 1;
        }
        .send-info {
          width: 40px;
          height: 40px;
          border-radius: 16px;
        }
        .send-info-file {
          width: 28px;
          height: 28px;
        }
        :deep .el-input {
          width: 80%;
          height: 40px;
          border-radius: 16px;
          --el-input-border-color: #c9d2e6;
        }
      }
    }
  }
  //搜索
  .search {
    .w-50,
    :deep .el-input {
      width: 80%;
      height: 32px;
      border-radius: 4px;
      --el-input-border-color: #c9d2e6;
    }
  }
  //聊天头像
  .head-sculpture {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin: 0 8px 0 12px;
      vertical-align: middle;
    }
  
  //左侧聊天列表展示
  .left-container {
    height: 80px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c1cce3;
    position: relative;
    & > div:last-child {
      vertical-align: middle;
      margin-right: 10px;
      display: flex;
      height: 40px;
      justify-content: space-between;
      flex-direction: column;
      .person-name {
        font-family: "Inter-Medium";
        color: #000;
        font-size: 16px;
      }
      .person-cont {
        color: #505870;
        font-size: 14px;

      }
    }
    .del-chat{
      position: absolute;
      right: 8px;
      bottom: -8px;
      width: 88px;
      height: 38px;
      box-shadow: 0px 2px 8px 1px rgba(199,203,216,0.5);
      background: rgba(255,255,255,0.9);
      border-radius: 4px;
      border: none;
    }
  }
  //点击时列表的背景色
  .activ-left-container {
    background: #f5f7f9;
  }
  .cebian {
    height: 100%;
    width: 4px;
    position: absolute;
    left: 0;
  }
  //聊天
  .message-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;

  }
  
  .message-left {
    margin-right: 40%;   
    justify-content: flex-start;
    .left-back{
      background: #EBEFF6;
    border-radius: 20px 20px 20px 0px;
    padding: 8px 16px;
    }

  }
  
  .message-right {
    // width: 80%;
    margin-left: 40%;
    justify-content: flex-end;
    .right-back{
      padding: 8px 16px;
      background: #2E6BC8;
    border-radius: 20px 20px 0px 20px;
    }
  }
  .time-text{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }