
.post-list .fade-leave-active {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.post-list .fade-leave-to /* 离开完成后状态 */
{ 
  transform: translateX(100%) scale(0.5); /* 离开时从右边滑出并缩小 */
}



.communitybase {
  position: relative;
  height: 93.5vh;
  background-image: url("../../pictures/communityback.png");
  background-size: cover;  /* 适应整个屏幕 */
  background-attachment: fixed;  /* 背景固定 */
  background-position: center;  /* 背景居中 */
  z-index: 3;
  overflow: hidden;  /* 防止滚动时内容溢出 */
}
.touxiang
{
  position: absolute;
  top:12%;
  left:5%;
  border-radius: 10px;
  width: 50px;
  height:50px;
 
}
.leftinfo
{
      background-color: rgba(255,255,255,0.8);
      width: 14%;
      position: fixed;
      left:0%;
      /* border: 3px solid  orchid; */
      height:100%;
        
}
.rightheat
{

    background-color: rgba(255,255,255,0.8);
    position: fixed;
    right:0%;
    width: 15%;
    /* border: 3px solid  orchid; */
    height:100%;
    
}
.familytitle
{
  position: absolute;
  top:8%;
  left:35%;
  font-size: 14px;
  font-weight: bold; 

}
.familycontent
{
  width: 50%;
  height: 50%; 
  position: absolute;
  bottom:12%;
  left:35%;
  font-size: 13px;
  overflow: hidden; /* 隐藏超出部分 */
}
.Hotsearchnum{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.middle
{
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  width: 65%;
  height:100%;
  z-index:1;
  height: 100%;  /* 占据父容器高度 */
  overflow-y: auto;  /* 允许垂直滚动 */
}
/* 隐藏滚动条 */
/* .middle::-webkit-scrollbar {
  width: 0px;  
  height: 0px; 
} */
.follows {
  cursor: pointer;
  transition: background-color 0.3s ease;  
}

.follows:hover {
  background-color: #FEB2D7;  
}
.follows.selected {
  background-color:rgba(255, 225, 240, 0.7);  
  font-weight: bold;  
 
}
.alldongtai:hover{
  background-color: #d0d0d0;  
  cursor: pointer;
}


.refresh-btn {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.refresh-btn .refresh-icon {
  fill: #FE4E96; /* 设置箭头颜色 */
  transition: transform 0.3s ease-in-out;
}

/* 点击按钮时的动画效果 */
.refresh-btn.clicked .refresh-icon {
  transform: rotate(360deg); /* 旋转动画 */
}

.refresh-btn.clicked {
  transform: scale(0.9); /* 按钮缩小 */
}
.post-list {
   
  }
