yss-project/src/app/pages/team-leader/dashboard/components/smart-match-modal/smart-match-modal.component.scss

@use "sass:color";

// iOS主题变量
$ios-spacing-sm: 8px;
$ios-spacing-md: 12px;
$ios-spacing-lg: 16px;
$ios-spacing-xl: 24px;
$ios-radius-lg: 12px;
$ios-radius-full: 9999px;
$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-medium: 500;
$ios-font-weight-semibold: 600;
$ios-font-weight-bold: 700;
$ios-font-size-sm: 14px;
$ios-font-size-md: 16px;
$ios-font-size-lg: 18px;
$ios-font-size-xl: 20px;
$ios-text-primary: #1f2937;
$ios-text-secondary: #6b7280;
$ios-card-background: #ffffff;
$ios-border: #e5e7eb;
$ios-background: #f9fafb;
$ios-primary: #6366f1;
$ios-primary-light: #818cf8;
$ios-success: #10b981;
$ios-danger: #ef4444;
$ios-warning: #f59e0b;
$ios-info: #3b82f6;

/* ========== 智能推荐弹窗样式 ========== */
.smart-match-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.2s ease;
  }
  
  .modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid $ios-border;
      background: linear-gradient(135deg, #f0f9ff, #ffffff);
      
      h3 {
        font-size: $ios-font-size-xl;
        font-weight: $ios-font-weight-bold;
        color: $ios-text-primary;
        margin: 0;
      }
      
      .btn-close {
        width: 36px;
        height: 36px;
        border: none;
        background: #f3f4f6;
        border-radius: 50%;
        font-size: 24px;
        color: $ios-text-secondary;
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
          background: $ios-border;
          color: $ios-text-primary;
        }
      }
    }
    
    .project-info {
      padding: 16px 20px;
      background: $ios-background;
      border-bottom: 1px solid $ios-border;
      
      h4 {
        font-size: $ios-font-size-lg;
        font-weight: $ios-font-weight-semibold;
        color: $ios-text-primary;
        margin: 0 0 8px 0;
      }
      
      .tags {
        display: flex;
        gap: 8px;
        
        .tag {
          padding: 4px 12px;
          border-radius: 8px;
          font-size: $ios-font-size-sm;
          background: white;
          border: 1px solid $ios-border;
          
          &.urgency {
            &.u-high { background: #fecaca; color: $ios-danger; border-color: $ios-danger; }
            &.u-medium { background: #fed7aa; color: $ios-warning; border-color: $ios-warning; }
            &.u-low { background: #d1fae5; color: $ios-success; border-color: $ios-success; }
          }
        }
      }
    }
    
    .recommendations-list {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      
      .rec-card {
        display: flex;
        gap: 16px;
        padding: 16px;
        background: white;
        border: 1px solid $ios-border;
        border-radius: 12px;
        margin-bottom: 16px;
        transition: all 0.2s ease;
        
        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        .rank {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: $ios-font-size-lg;
          font-weight: $ios-font-weight-bold;
          border-radius: 50%;
          background: #f3f4f6;
          color: $ios-text-secondary;
          flex-shrink: 0;
          
          &.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; }
          &.silver { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: white; }
          &.bronze { background: linear-gradient(135deg, #f97316, #ea580c); color: white; }
        }
        
        .designer-info {
          flex: 1;
          
          h4 {
            font-size: $ios-font-size-md;
            font-weight: $ios-font-weight-semibold;
            color: $ios-text-primary;
            margin: 0 0 8px 0;
          }
          
          .match-score-bar {
            position: relative;
            height: 20px;
            background: #f3f4f6;
            border-radius: 12px;
            overflow: hidden;
            
            .score-fill {
              height: 100%;
              background: linear-gradient(90deg, $ios-info, $ios-primary);
              display: flex;
              align-items: center;
              justify-content: flex-end;
              padding-right: 8px;
              transition: width 0.3s ease;
              
              span {
                font-size: 12px;
                font-weight: $ios-font-weight-semibold;
                color: white;
              }
            }
          }
        }
        
        .details {
          flex: 1;
          font-size: $ios-font-size-sm;
          
          p {
            margin: 4px 0;
            color: $ios-text-secondary;
            
            strong {
              color: $ios-text-primary;
            }
            
            &.reason {
              color: #2563eb;
              font-weight: $ios-font-weight-medium;
            }
          }
        }
        
        .btn-assign {
          align-self: center;
          padding: 8px 20px;
          background: linear-gradient(135deg, $ios-info, $ios-primary);
          color: white;
          border: none;
          border-radius: 8px;
          font-size: $ios-font-size-sm;
          font-weight: $ios-font-weight-semibold;
          cursor: pointer;
          transition: all 0.2s ease;
          
          &:hover {
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
            transform: translateY(-2px);
          }
        }
      }
      
      .empty {
        text-align: center;
        padding: 48px;
        color: $ios-text-secondary;
        
        p {
          margin: 8px 0;
          
          &:first-child {
            font-size: $ios-font-size-lg;
            font-weight: $ios-font-weight-semibold;
            color: $ios-text-primary;
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}