src/app/user/user.scss

//全局容器样式
.user-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;

  .p-tabview-title {
    font-size: 20px;
  }
}

//个人信息样式
.user-profile-card {
  display: flex;

  .user-avatar {
    height: 200px;
    width: 200px;
    margin: 30px;
  }
  .user-info {
    width: 796px;
    position: relative;
    margin-top: 22px;

    .user-detail-info {
      display: flex;
      justify-content: space-between;

      .name-container {
        width: 750px;
        margin-left: 1rem;
        .name {
          font-size: 43px;
          margin-bottom: 3px;
        }

        .signature {
          margin-top: 0;
          font-size: 20px;
        }
      }

      .stats-container {
        display: flex;
        flex-wrap: wrap; // 允许换行
        margin-top: 60px;

        .stats {
          width: 50%;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-bottom: 16px;

          // 左上角：粉丝
          &:nth-child(1) {
            justify-content: flex-start; // 左对齐
          }

          // 右上角：累计上传量
          &:nth-child(2) {
            justify-content: flex-end; // 右对齐
          }

          // 左下角：关注
          &:nth-child(3) {
            justify-content: flex-start; // 左对齐
          }

          // 右下角：累计被下载量
          &:nth-child(4) {
            justify-content: flex-end; // 右对齐
          }

          .stats-label {
            font-size: 18px;
            color: #666;
            margin-right: 4px;
            white-space: nowrap;
          }

          .stats-value {
            font-size: 20px;
            font-weight: bold;
            color: #333;
          }
        }
      }
    }

    .action-button {
      align-self: flex-end; // 底部对齐
      margin-top: auto; // 自动上边距将其推到底部
      // 固定位置：
      position: absolute;
      right: 0;
      bottom: 10px;
    }
  }
}


//每一模块的首部样式
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

//每个模块中的资源样式
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;

  .resource-card {
    transition: transform 0.2s ease;
    cursor: pointer;
    box-shadow: none !important;

    .p-image {
      img {
        border-radius: 0.5rem 0.5rem 0 0;
        object-fit: cover;
      }
    }

    .p-card-body {
      padding: 0;
    }

    .p-card-content {
      padding: 0;
    }

    &:hover {
      transform: translateY(-4px);
    }

    .card-content {
      display: flex;
      flex-direction: column;
      position: relative;
      margin-left: 16px;
      margin-right: 16px;
      margin-bottom: 16px;

      h3 {
        margin: 1rem 0;
        font-size: 1rem;
        line-height: 1.5;
        color: #2d3748;
      }

      .view-count {
        position: absolute;
        bottom: 0rem;
        right: 0rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #718096;
        font-size: 0.9rem;
      }
    }
  }
}