202226701051/fashion-app/src/app/post-detail/post-detail.component.scss

.post {
    padding: 10px; /* 设置内边距 */
    background-color: white; /* 背景色 */
   
    border-bottom: grey 1px solid; /* 下边框 */

  }
  
  .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; /* 图片与下一张图片之间的间距 */

  }

  .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; /* 图标与文本之间的间距 */
  }
//关注按钮
  .follow-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px; /* 按钮宽度 */
    height: 30px; /* 按钮高度 */
    border-radius: 20px; /* 椭圆形 */
    background-color: black; /* 初始背景色 */
    color: white; /* 初始字体颜色 */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
  }

  //已关注按钮
  .fan-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px; /* 按钮宽度 */
    height: 30px; /* 按钮高度 */
    border-radius: 20px; /* 椭圆形 */
    background-color:white; /* 初始背景色 */
    color: black; /* 初始字体颜色 */
  }

  //+与关注的距离
  .distance{
    margin-right: 5px;
  }


  .comment-section {
    background-color: white; /* 背景色 */
    border-radius: 8px; /* 圆角效果 */
  }
  
  .comment-title {
    font-size: 20px; /* 标题字体大小 */
    font-weight: bold; /* 加粗 */
    margin-bottom: 15px; /* 标题与评论之间的间距 */
    margin-left: 10px;
  }
  
  .comment {
    margin-bottom: 20px; /* 每条评论之间的间距 */
  }
  
  .comment-box {
    display: flex; /* 使用 Flexbox 布局 */

  }
  
  .comment-left {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    margin-right: 10px; /* 左侧与中间盒子之间的间距 */
    margin-left: 10px;
  }
  
  .comment-middle {
    flex: 1; /* 占用剩余空间 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
  }
  
  .comment-right {
    display: flex;
    margin-left: 10px; /* 右侧与中间盒子之间的间距 */
    padding-right: 15px;
  }
  
  .comment-avatar {
    width: 45px; /* 头像宽度 */
    height: 45px; /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    overflow: hidden; /* 隐藏超出部分 */
    margin-bottom: 5px; 
  }
  
  .comment-avatar-image {
    width: 100%; /* 头像宽度100% */
    height: 100%; /* 头像高度100% */
    object-fit: cover; /* 保持比例填充 */
  }
  
  .floor {
    font-size: 18px; /* 楼数字体大小 */
    color: gray; /* 楼数颜色 */
  }
  
  .comment-username {
    font-weight: bold; /* 加粗用户名 */
    font-size: 17px; /* 用户名字体大小 */
  }
  
  .comment-text {
    font-size: 16px; /* 评论内容字体大小 */
    margin: 3px 0; /* 内容上下间距 */
  }
  
  .time-ago {
    font-size: 16px; /* 时间字体大小 */
    color: gray; /* 时间颜色 */
  }
  
  .like-icon {
    font-size: 25px; /* 点赞图标大小 */
    color: gray; /* 点赞图标颜色 */
    margin-right: 5px; /* 图标与点赞数之间的间距 */
  }
  
  .like-count {
    font-size: 14px; /* 点赞数字体大小 */
    color: black; /* 点赞数颜色 */
    margin-top: 3px; /* 点赞数与评论之间的间距 */
  }


  .comment-input-container {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    
    background-color: #f9f9f9; /* 背景色 */
    border-top: 1px solid #ccc; /* 顶部边框 */
  }
  
  .share-icon {
    margin-left: 5px;
    font-size: 30px; /* 分享按钮大小 */
    color: black; /* 分享按钮颜色 */
    margin-right: 20px; /* 与输入框的间距 */
  }
  
  .comment-input {
    display: flex;
    align-items: center; /* 垂直居中 */
    min-height: 50px; /* 最小高度 */
    margin-right: 5px; /* 与按钮的间距 */
    border-radius: 20px; /* 椭圆形效果 */
    padding: 5px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    height:50px;
    width: 50%;
    
  }

  .comment-input1 {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-right: 5px; /* 与按钮的间距 */
    border-radius: 20px; /* 椭圆形效果 */
    padding: 5px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    height:50px;
    width: 80%;
    position: relative;
    margin-top: 7px;
    margin-bottom: 7px;
  }
  
  .comment-buttons {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
   
  }
  
  .comment-button {
    margin-right: 10px; /* 评论按钮与点赞按钮的间距 */
    color: black; /* 按钮字体颜色 */
    --background: #f9f9f9;
    --background-activated: #f9f9f9;
  }
  
  .like-button {
    font-size: 30px; /* 点赞图标大小 */
    color:black; /* 点赞图标颜色 */
  }

  .send-button {
    height: 25px;
    width: 60px;
    --background: #ccc;
    --background-activated: #ccc;
    color:grey;
    border-radius: 25px;
    font-size: 15px;
  }

  .send-button1 {
    height: 25px;
    width: 60px;
    --background:black;
    --background-activated: #ccc;
    color:white;
    border-radius: 25px;
    font-size: 15px;
  }

  .emoji-button {
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    margin-right: 10px;
  }

  
  /* 表情选择器样式 */
.emoji-picker {
  --background: transparent; /* 去除默认样式 */
  background-color:white; /* 背景颜色 */
  padding: 10px;
  display: flex;
  justify-content: center; /* 水平居中 */
  overflow: hidden; /* 隐藏多余内容 */
}

/* 表情容器用于支持滚动 */
.emoji-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  overflow-y: auto; /* 允许纵向滚动 */
  max-height: 70vh; /* 最大高度，防止超出屏幕 */
  width: 100%; /* 容器宽度 */
}

/* 表情按钮 */
.emoji-buttons {
  margin: 5px; /* 每个表情与顶部的间距 */
  font-size: 28px; /* 字体大小 */
  height: 40px; /* 按钮高度 */
  width: 40px; /* 按钮宽度 */
  display: flex; /* 使用 flexbox 对齐 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  --background: transparent; /* 背景透明 */
  --box-shadow: none; /* 去掉阴影 */
  --outline: none; /* 去掉轮廓 */
  border: none; /* 去掉边框 */
}