.post {
    padding: 10px; /* 设置内边距 */
    background-color: white; /* 背景色 */
    border-radius: 8px; /* 圆角效果 */
    margin-bottom: 20px; /* 帖子之间的间距 */
  }
  
  .post-header {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 10px; /* 标题与用户信息之间的间距 */
  }
  
  .avatar {
    width: 45px; /* 头像宽度 */
    height: 45px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    overflow: hidden; /* 隐藏超出部分 */
    margin-right: 10px; /* 头像与用户名之间的间距 */
    border: black 1px solid; /* 边框 */

  }
  
  .avatar-image {
    width: 100%; /* 头像宽度100% */
    height: 100%; /* 头像高度100% */
    object-fit: cover; /* 保持比例填充 */
  }
  
  .user-info {
    flex: 1; /* 让用户名部分占用剩余空间 */
    display: flex;
    justify-content: space-between; /* 用户名和三个点之间的间距 */
    align-items: center; /* 垂直居中 */
  }
  
  .username {
    font-weight: bold; /* 加粗用户名 */
    font-size: 22px; /* 用户名字体大小 */
  }
  
  .more-icon {
    font-size: 25px; /* 三个点图标大小 */
    color: gray;
    margin-right: 10px;
  }
  
  .post-title {
    font-size: 18px; /* 标题字体大小 */
    margin: 10px 5px; /* 标题上下间距 */
    font-weight: bold;
  }
  
  //标签
.tag-container {
    display: flex;
    justify-content: flex-start; /* 标签靠左对齐 */
    margin-bottom: 10px; /* 将标签容器推到底部 */
  }
  
  .tag {
    background-color: #f0f0f0; // 灰色背景
    color: black; // 黑色字体
    border-radius: 20px; // 椭圆形效果
    padding: 5px 10px; // 标签内边距
    margin-right: 17px; // 标签之间的间距
    font-size: 14px; // 标签字体大小
    display: inline-flex; // 让标签内容居中
    align-items: center; // 垂直居中
  }
  
  .tagpicture{
    margin-left: 5px;
    margin-right: 5px;
  }
  
  .post-content-text {
    font-size: 18px; /* 帖子内容字体大小 */
    margin-bottom: 10px; /* 内容与图片之间的间距 */
  }
  
  .image-gallery {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许换行 */
  }
  
  .post-image {
    width: 32%; /* 每张图片占用32%的宽度 */
    height: auto; /* 高度自适应 */
    border-radius: 5px; /* 图片圆角 */
    margin-bottom: 5px; /* 图片与下一张图片之间的间距 */
    margin-right: 5px; /* 图片与下一张图片之间的间距 */
    overflow: hidden;
  }

  .button-container {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 按钮之间的间距 */
  }
  
  .action-button {
    flex: 1; /* 每个按钮占用相同的空间 */
    font-size: 17px; /* 按钮字体大小 */
    align-items: center; // 垂直居中
    color: black; // 字体颜色
  }
  
  .action-button ion-icon {
    font-size: 20px; /* 图标大小 */
    margin-right: 5px; /* 图标与文本之间的间距 */
  }