202226701051/fashion-app/src/app/chat-history/chat-history.component.scss

.first-chat {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #e0e0e0; /* 边框样式 */
    border-radius: 8px; /* 圆角 */
    background-color: #fff; /* 背景色 */
    width: 100%; /* 宽度 */
    margin-top: 25px;
  }

.chat-item {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #e0e0e0; /* 边框样式 */
    border-radius: 8px; /* 圆角 */
    margin-bottom: 10px;
    background-color: #fff; /* 背景色 */
    width: 100%; /* 宽度 */
    
  }
  
  .chat-header {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  }
  
  .user-info {
    display: flex; /* 使用户信息水平排列 */
    align-items: center; /* 垂直居中 */
    flex: 1; /* 占据剩余空间 */
  }
  

  
  .avatar-image {
    width: 45px; /* 头像宽度 */
    height: 45px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    margin-right: 12px; /* 头像和用户名之间的间距 */
  }
  
  
  .username {
    font-weight: bold; /* 用户名加粗 */
    font-size: 27px;
  }
  
  .timestamp {
    font-size: 20px; /* 时间字体大小 */
    color: #888; /* 时间颜色 */
  }
  
  .chat-content {
    margin-top: 10px; /* 内容与标题之间的间距 */
  }
  
  .chat-text {
    font-size: 16px; /* 聊天内容字体大小 */
    color: #333; /* 聊天内容颜色 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 省略号 */
    white-space: nowrap; /* 单行显示 */
  }