yss-project/src/app/pages/designer/project-detail/components/vertical-nav/vertical-nav-styles.scss

@use '../../../../../shared/styles/_ios-theme.scss' as *;

// 项目人员标签页样式
.members-tab-content {
  .main-content-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: $ios-spacing-lg;
    align-items: start;
  }

  .members-content {
    background: $ios-background;
    border-radius: $ios-radius-lg;
    padding: $ios-spacing-lg;
    box-shadow: $ios-shadow-sm;
  }

  .members-header {
    margin-bottom: $ios-spacing-lg;
    
    h2 {
      color: $ios-text-primary;
      font-size: $ios-font-size-lg;
      font-weight: 600;
      margin: 0 0 $ios-spacing-xs 0;
    }

    .members-count {
      color: $ios-text-secondary;
      font-size: $ios-font-size-sm;
      margin: 0;
    }
  }

  .members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: $ios-spacing-md;
  }

  .member-card {
    background: $ios-background;
    border: 1px solid $ios-border;
    border-radius: $ios-radius-md;
    padding: $ios-spacing-md;
    transition: all 0.2s ease;

    &:hover {
      box-shadow: $ios-shadow-md;
      transform: translateY(-2px);
    }

    .member-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-bottom: $ios-spacing-md;
      object-fit: cover;
      border: 2px solid $ios-border;
    }

    .member-info {
      text-align: center;

      .member-name {
        color: $ios-text-primary;
        font-size: $ios-font-size-md;
        font-weight: 600;
        margin: 0 0 $ios-spacing-xs 0;
      }

      .member-role {
        color: $ios-text-secondary;
        font-size: $ios-font-size-sm;
        margin: 0 0 $ios-spacing-sm 0;
      }

      .member-stats {
        display: flex;
        justify-content: space-between;
        margin-top: $ios-spacing-sm;

        .stat-item {
          text-align: center;
          flex: 1;

          .stat-value {
            color: $ios-text-secondary;
            font-size: $ios-font-size-xs;
            margin: 0;
          }

          .stat-label {
            background: $ios-border;
            color: white;
            font-size: $ios-font-size-xs;
            padding: 2px 6px;
            border-radius: 10px;
            margin-top: 2px;
          }

          &.active .stat-label {
            background: $ios-primary;
          }
        }
      }
    }

    .member-actions {
      margin-top: $ios-spacing-md;
      display: flex;
      gap: $ios-spacing-sm;

      .action-btn {
        flex: 1;
        padding: $ios-spacing-xs $ios-spacing-sm;
        border: none;
        border-radius: $ios-radius-sm;
        font-size: $ios-font-size-xs;
        cursor: pointer;
        transition: all 0.2s ease;

        &.primary {
          background: $ios-primary;
          color: white;

          &:hover {
            opacity: 0.9;
          }
        }

        &.secondary {
          background: $ios-background;
          border: 1px solid $ios-border;
          color: $ios-text-primary;

          &:hover {
            background: $ios-background-secondary;
          }
        }
      }
    }
  }
}

// 垂直导航栏样式
.vertical-nav-container {
  .nav-section {
    margin-bottom: $ios-spacing-md; // 减小节间距

    .section-title {
      color: $ios-text-secondary;
      font-size: 10px; // 减小标题字体
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px; // 减小字母间距
      margin: 0 0 $ios-spacing-xs 0; // 减小下边距
      padding: 0 $ios-spacing-sm; // 减小内边距
    }

    .nav-items {
      list-style: none;
      padding: 0;
      margin: 0;

      .nav-item {
        margin-bottom: 2px; // 减小项间距

        .nav-link {
          display: flex;
          align-items: center;
          padding: $ios-spacing-xs $ios-spacing-sm; // 减小内边距
          color: $ios-text-primary;
          text-decoration: none;
          border-radius: $ios-radius-sm; // 减小圆角
          transition: all 0.2s ease;
          font-size: $ios-font-size-xs; // 减小字体
          line-height: 1.2; // 减小行高

          &:hover {
            background: $ios-background-secondary;
          }

          &.active {
            background: $ios-primary;
            color: white;
            font-weight: 500;

            .nav-icon {
              color: white;
            }
          }

          .nav-icon {
            margin-right: $ios-spacing-xs; // 减小图标间距
            font-size: 12px; // 减小图标尺寸
            width: 12px;
            text-align: center;
            flex-shrink: 0;
          }

          .nav-text {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .nav-badge {
            background: $ios-border;
            color: white;
            font-size: 9px; // 减小徽标字体
            padding: 1px 4px; // 减小徽标内边距
            border-radius: 6px; // 减小徽标圆角
            margin-left: auto;
            min-width: 14px;
            text-align: center;
          }

          &.active .nav-badge {
            background: rgba(255, 255, 255, 0.2);
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .members-tab-content {
    .main-content-layout {
      grid-template-columns: 1fr;
      gap: $ios-spacing-md;
    }

    .members-grid {
      grid-template-columns: 1fr;
    }
  }

  .vertical-nav-container {
    .nav-section {
      .nav-items {
        .nav-item {
          .nav-link {
            padding: $ios-spacing-md;
            font-size: $ios-font-size-md;

            .nav-icon {
              font-size: 18px;
              width: 18px;
            }
          }
        }
      }
    }
  }
}

// 加载状态
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: $ios-text-secondary;
  font-size: $ios-font-size-sm;
}

// 空状态
.empty-state {
  text-align: center;
  padding: $ios-spacing-xxl;
  color: $ios-text-secondary;

  .empty-icon {
    font-size: 48px;
    margin-bottom: $ios-spacing-md;
    opacity: 0.5;
  }

  .empty-title {
    font-size: $ios-font-size-lg;
    font-weight: 600;
    margin: 0 0 $ios-spacing-sm 0;
  }

  .empty-description {
    font-size: $ios-font-size-sm;
    margin: 0;
    line-height: 1.5;
  }
}