yss-project/src/app/pages/designer/project-detail/project-review-styles.scss

/* ==================== 项目复盘模块样式 ==================== */
.project-review-section {
  width: 100%;
  background: white;
  border-radius: 20px;
  padding: 32px;
  margin-top: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  
  .review-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0, 122, 255, 0.1);
    
    .header-left {
      flex: 1;
      
      .section-title {
        font-size: 24px;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0 0 8px 0;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      
      .section-subtitle {
        font-size: 14px;
        color: #666;
        margin: 0;
        line-height: 1.6;
      }
    }
    
    .header-right {
      display: flex;
      gap: 12px;
      
      button {
        padding: 10px 20px;
        border-radius: 10px;
        border: none;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &.generate-review-btn {
          background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
          color: white;
          
          &:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
          }
          
          &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
          }
        }
        
        &.export-review-btn {
          background: #f0f0f0;
          color: #333;
          
          &:hover {
            background: #e0e0e0;
          }
        }
      }
    }
  }
  
  .review-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    border-bottom: 2px solid #f0f0f0;
    
    .review-tab {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 24px;
      border: none;
      background: transparent;
      color: #666;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      
      .tab-icon {
        font-size: 18px;
      }
      
      .tab-label {
        font-weight: 500;
      }
      
      &:hover {
        color: #007aff;
        background: rgba(0, 122, 255, 0.05);
      }
      
      &.active {
        color: #007aff;
        border-bottom-color: #007aff;
        background: rgba(0, 122, 255, 0.08);
      }
    }
  }
  
  .review-content-area {
    min-height: 500px;
    max-height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    
    /* 自定义滚动条 */
    &::-webkit-scrollbar {
      width: 10px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f5f5f5;
      border-radius: 5px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #c0c0c0;
      border-radius: 5px;
      
      &:hover {
        background: #a0a0a0;
      }
    }
  }
}

/* SOP执行数据样式 */
.sop-data-content {
  .sop-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    
    .metric-card {
      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
      border: 1px solid #e0e0e0;
      border-radius: 16px;
      padding: 24px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-color: #007aff;
      }
      
      .metric-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        
        .metric-icon {
          font-size: 24px;
        }
        
        .metric-title {
          font-size: 14px;
          font-weight: 600;
          color: #666;
          margin: 0;
        }
      }
      
      .metric-value-large {
        font-size: 36px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 12px;
        
        .unit {
          font-size: 18px;
          font-weight: 400;
          color: #999;
          margin-left: 4px;
        }
      }
      
      .metric-footer {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 13px;
        
        .metric-label {
          color: #999;
        }
        
        .metric-benchmark {
          color: #666;
          font-weight: 500;
        }
        
        .metric-status {
          padding: 4px 10px;
          border-radius: 6px;
          font-weight: 600;
          font-size: 12px;
          
          &.good {
            background: #e7f4e4;
            color: #34c759;
          }
          
          &.warning {
            background: #fff3cd;
            color: #ff9500;
          }
        }
        
        .satisfaction-stars {
          display: flex;
          gap: 4px;
          
          .star {
            font-size: 16px;
            color: #e0e0e0;
            
            &.filled {
              color: #ffc107;
            }
          }
        }
      }
    }
  }
  
  .sop-stages-section {
    margin-bottom: 40px;
    
    .subsection-title {
      font-size: 18px;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0 0 24px 0;
      padding-bottom: 12px;
      border-bottom: 2px solid #f0f0f0;
    }
    
    .stages-timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
      
      .stage-timeline-item {
        display: flex;
        gap: 20px;
        position: relative;
        
        .stage-indicator {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-top: 8px;
          
          .stage-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #e0e0e0;
            border: 3px solid #fff;
            box-shadow: 0 0 0 2px #e0e0e0;
            flex-shrink: 0;
            z-index: 1;
          }
          
          .stage-line {
            width: 2px;
            flex: 1;
            background: #e0e0e0;
            min-height: 40px;
          }
        }
        
        &.completed .stage-indicator .stage-dot {
          background: #34c759;
          box-shadow: 0 0 0 2px #34c759;
        }
        
        &.ongoing .stage-indicator .stage-dot {
          background: #007aff;
          box-shadow: 0 0 0 2px #007aff;
          animation: pulse 2s infinite;
        }
        
        &.delayed .stage-indicator .stage-dot {
          background: #ff9500;
          box-shadow: 0 0 0 2px #ff9500;
        }
        
        .stage-content-card {
          flex: 1;
          background: white;
          border: 1px solid #e0e0e0;
          border-radius: 12px;
          padding: 20px;
          margin-bottom: 20px;
          transition: all 0.3s ease;
          
          &:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            border-color: #007aff;
          }
          
          .stage-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            
            .stage-name {
              font-size: 16px;
              font-weight: 700;
              color: #1a1a1a;
              margin: 0;
            }
            
            .stage-status-badge {
              padding: 6px 14px;
              border-radius: 20px;
              font-size: 12px;
              font-weight: 600;
              
              &.completed {
                background: #e7f4e4;
                color: #34c759;
              }
              
              &.ongoing {
                background: #e3f2fd;
                color: #007aff;
              }
              
              &.delayed {
                background: #fff3cd;
                color: #ff9500;
              }
            }
          }
          
          .stage-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 16px;
            margin-bottom: 12px;
            
            .stage-metric-item {
              display: flex;
              flex-direction: column;
              
              .label {
                font-size: 13px;
                color: #999;
                margin-bottom: 4px;
              }
              
              .value {
                font-size: 16px;
                font-weight: 600;
                color: #1a1a1a;
                
                &.warning {
                  color: #ff9500;
                }
                
                &.score {
                  &.excellent {
                    color: #34c759;
                  }
                  
                  &.good {
                    color: #007aff;
                  }
                  
                  &.fair {
                    color: #ff9500;
                  }
                  
                  &.poor {
                    color: #ff3b30;
                  }
                }
              }
            }
          }
          
          .stage-issues {
            background: #fff3cd;
            border-left: 4px solid #ff9500;
            padding: 12px;
            border-radius: 8px;
            
            .issues-label {
              font-weight: 600;
              color: #ff9500;
              margin-right: 8px;
            }
            
            .issues-text {
              font-size: 14px;
              color: #666;
            }
          }
        }
      }
    }
  }
  
  .sop-charts-section {
    .charts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      gap: 24px;
      
      .chart-card {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 16px;
        padding: 24px;
        
        .chart-title {
          font-size: 16px;
          font-weight: 700;
          color: #1a1a1a;
          margin: 0 0 20px 0;
        }
        
        .chart-placeholder {
          .bar-chart {
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            gap: 16px;
            height: 260px;
            padding: 20px 10px 0;
            border-left: 2px solid #e0e0e0;
            border-bottom: 2px solid #e0e0e0;
            position: relative;
            
            .bar-group {
              flex: 1;
              display: flex;
              flex-direction: column-reverse;
              align-items: center;
              gap: 8px;
              height: 100%;
              position: relative;
              
              .bar-label {
                font-size: 12px;
                font-weight: 600;
                color: #666;
                text-align: center;
                word-wrap: break-word;
                max-width: 100%;
                margin-top: 8px;
              }
              
              .bars {
                display: flex;
                gap: 6px;
                align-items: flex-end;
                height: calc(100% - 40px);
                width: 100%;
                justify-content: center;
                
                .bar {
                  flex: 1;
                  max-width: 32px;
                  min-width: 24px;
                  min-height: 30px;
                  border-radius: 8px 8px 0 0;
                  position: relative;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: center;
                  padding-top: 8px;
                  transition: all 0.3s ease;
                  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                  
                  &.planned {
                    background: linear-gradient(to top, #4caf50 0%, #66bb6a 100%);
                  }
                  
                  &.actual {
                    background: linear-gradient(to top, #2196f3 0%, #42a5f5 100%);
                  }
                  
                  .bar-value {
                    font-size: 12px;
                    font-weight: 700;
                    color: white;
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                  }
                  
                  &:hover {
                    transform: scaleY(1.05) scaleX(1.1);
                    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
                    z-index: 10;
                  }
                }
              }
            }
          }
          
          .chart-legend {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-top: 20px;
            
            .legend-item {
              display: flex;
              align-items: center;
              gap: 8px;
              font-size: 13px;
              color: #666;
              
              .legend-color {
                width: 16px;
                height: 16px;
                border-radius: 4px;
                
                &.planned {
                  background: linear-gradient(to bottom, #4caf50, #81c784);
                }
                
                &.actual {
                  background: linear-gradient(to bottom, #2196f3, #64b5f6);
                }
              }
            }
          }
          
          &.radar-chart {
            min-height: 260px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border-radius: 12px;
            padding: 20px;
            
            .radar-info {
              width: 100%;
              
              p {
                font-size: 16px;
                color: #666;
                margin-bottom: 20px;
                text-align: center;
                
                strong {
                  font-size: 24px;
                  font-weight: 700;
                  color: #007aff;
                  display: block;
                  margin-top: 8px;
                }
              }
              
              .score-items {
                display: flex;
                flex-direction: column;
                gap: 12px;
                background: white;
                padding: 16px;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                
                .score-item {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  font-size: 14px;
                  padding: 8px 12px;
                  border-radius: 6px;
                  background: #f8f9fa;
                  transition: all 0.3s ease;
                  
                  &:hover {
                    background: #e9ecef;
                    transform: translateX(4px);
                  }
                  
                  .stage-label {
                    color: #666;
                    font-weight: 500;
                  }
                  
                  .stage-score {
                    font-weight: 700;
                    font-size: 16px;
                    padding: 6px 14px;
                    border-radius: 8px;
                    color: white !important; // 强制白色文字确保可读性
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); // 添加文字阴影增强可读性
                    
                    &.excellent { 
                      background: linear-gradient(135deg, #34c759 0%, #28a745 100%);
                      box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
                    }
                    &.good { 
                      background: linear-gradient(135deg, #007aff 0%, #0051d5 100%);
                      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
                    }
                    &.average { 
                      background: linear-gradient(135deg, #ff9500 0%, #e68600 100%);
                      box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3);
                    }
                    &.poor { 
                      background: linear-gradient(135deg, #ff3b30 0%, #d32f2f 100%);
                      box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}