yss-project/src/app/pages/team-leader/dashboard/components/dashboard-metrics/dashboard-metrics.component.scss

@use "sass:color";

// iOS主题变量
$ios-spacing-md: 12px;
$ios-spacing-lg: 16px;
$ios-radius-lg: 12px;
$ios-radius-full: 9999px;
$ios-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$ios-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$ios-font-weight-bold: 700;
$ios-font-size-sm: 14px;
$ios-text-primary: #1f2937;
$ios-text-secondary: #6b7280;
$ios-card-background: #ffffff;
$ios-background: #f9fafb;
$ios-border: #e5e7eb;

:host {
  display: block;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: $ios-spacing-lg;
  margin-top: $ios-spacing-lg;
  
  .metric-card {
    display: flex;
    align-items: center;
    gap: $ios-spacing-md;
    background: linear-gradient(135deg, $ios-card-background, #f8f9fa);
    border-radius: $ios-radius-lg;
    padding: $ios-spacing-lg;
    border: 1px solid $ios-border;
    box-shadow: $ios-shadow-sm;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: $ios-shadow-card;
    }
    
    .metric-icon {
      font-size: 2rem;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: $ios-radius-full;
      background-color: $ios-background;
    }
    
    .metric-icon.warning { background-color: rgba(255, 149, 0, 0.1); }
    .metric-icon.info { background-color: rgba(59, 130, 246, 0.1); }
    .metric-icon.primary { background-color: rgba(124, 58, 237, 0.1); }
    .metric-icon.danger { background-color: rgba(239, 68, 68, 0.1); }
    .metric-icon.success { background-color: rgba(16, 185, 129, 0.1); }
    
    .metric-content { flex: 1; }
    
    .metric-count {
      font-size: 2rem;
      font-weight: $ios-font-weight-bold;
      color: $ios-text-primary;
      line-height: 1.2;
    }
    
    .metric-label {
      font-size: $ios-font-size-sm;
      color: $ios-text-secondary;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  }
}