// ion-toolbar {
//   display: flex;
//   justify-content: space-between; // 使内容在两侧分开
//   align-items: center; // 垂直居中对齐
// }


/* 设置搜索框的样式 */
   ion-searchbar {
     padding: 10px; /* 内边距 */
     border-radius: 6px; /* 圆角 */
     font-size: 16px; /* 字体大小 */
    }
    // 设置头像
    ion-avatar {
      border-radius: 50%; // 设置头像圆形
      width: 50px; // 设置头像宽度
      height: 50px; // 设置头像高度
    }



//话题、讨论区
.content-container {
  display: flex;
  justify-content: space-between; /* 在主轴上均匀分配空间 */
  padding: 1px; /* 内边距 */
  background: white;
  align-items: center;
  padding: 15px;
}

ion-segment {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.card-section {
  flex: 1; /* 让每个卡片占据相同的空间 */
  margin: 0 1px; /* 卡片之间的水平间距 */
  min-width: 250px; /* 设置最小宽度，以确保在小屏幕上不会过于拥挤 */
  display: flex;
  float: left;
  flex-direction: column; /* 使卡片内容垂直排列 */
  height: 100%; /* 确保卡片高度相同 */
}

ion-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
}

// .card1{
// background: #036a99;
// }

// .card2{
//   background: #036a99;
// }

.scrollable-content {
  height: 150px; /*高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

ion-card-header {
  background-color: #f8f8f8; /* 卡片头部背景色 */
  border-top-left-radius: 8px; /* 圆角 */
  border-top-right-radius: 8px; /* 圆角 */
}

ion-card-title {
  font-size: 1.2em; /* 标题字体大小 */
  font-weight: bold; /* 加粗 */
}

ion-label h2 {
  margin: 0; /* 去掉默认外边距 */
  font-size: 1.1em; /* 话题标题字体大小 */
}

ion-label p {
  color: #666; /* 文字颜色 */
  font-size: 0.9em; /* 字体大小 */
}

//帖子
.post-item {
  margin-bottom: 16px;
}

.topic {
  color: #888;
  font-size: 0.9em;
}

.post-content {
  margin: 8px 0;
  transition: max-height 0.3s ease;
  // max-height: 1000px; /* 设置最大高度，可以根据需要调整 */
  overflow-y: auto; /* 添加垂直滚动条 */
}

.post-author-avatar{
  display: flex;
  align-items: center;
  padding: 15px;
}

.avatar-container {
  display: flex;
  align-items: center;
  padding: 15px;
}


.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 15px;
}

.user-info {
  flex-grow: 1;
}

.username {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}

.content{
padding-left:20px;

}
.title{
font-size:18px;
font-weight: bold;

}

.post-avatar{
  /* 基本样式 */
max-width: 70%; /* 确保照片不会超过其父容器的宽度 */
height: auto;    /* 保持照片的宽高比 */
border-radius: 8px; /* 可选：给照片添加圆角 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选：给照片添加阴影 */
margin-bottom: 20px; /* 可选：给照片下方添加一些间距 */
display: block; /* 确保照片是块级元素，以便应用margin等属性 */
margin-left: left; /* 水平居中（与margin-right: auto;一起使用） */ 
margin-right: auto;
}


.collapsed {
  overflow: hidden;
  overflow-y: auto; /* 添加垂直滚动条 */
}

.post-actions {
  display: flex;
  margin-top: 8px;
}

ion-button {
  --background:#036a99; // 设置按钮背景色
  --color: white; // 设置按钮文字颜色
  width:50px;
  height: 30px;
  border-radius: 10px;
  float: left;
}

