leaudit-platform-frontend/app/styles/components/processing-steps.css

/**
 * 处理步骤组件样式
 */

:root {
  --primary-color: var(--color-primary, #00684a);
  --primary-hover: var(--color-primary-hover, #005a40);
  --primary-light: rgba(0, 104, 74, 0.1);
  --success-color: var(--color-success, #52c41a);
  --warning-color: var(--color-warning, #faad14);
  --error-color: var(--color-error, #ff4d4f);
  --text-color: rgba(0, 0, 0, 0.85);
  --text-secondary: rgba(0, 0, 0, 0.45);
  --border-color: #f0f0f0;
  --bg-gray: #f5f5f5;
}

/* 横向步骤样式 */
.steps-container-horizontal {
  @apply my-8 flex justify-between relative;
  padding: 0 8px;
}

.steps-container-horizontal::before {
  content: "";
  @apply absolute top-[14px] left-[30px] right-[30px] h-0.5 bg-gray-200 z-0;
}

.step-item-horizontal {
  @apply relative flex flex-col items-center flex-1 text-center z-[1];
}

.step-icon-horizontal {
  width: 30px;
  height: 30px;
  @apply rounded-full bg-gray-300 flex items-center justify-center mb-2 relative z-[2];
  transition: background-color 0.3s;
}

.step-icon-horizontal i {
  @apply text-white text-base;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.step-icon-horizontal span:not(.loading-spinner) {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  font-weight: 500;
}

.step-item-horizontal.active .step-icon-horizontal {
  @apply bg-[var(--primary-color)];
  box-shadow: 0 0 0 4px rgba(0, 104, 74, 0.1);
}

.step-item-horizontal.active .step-icon-horizontal span:not(.loading-spinner) {
  color: white;
}

.step-item-horizontal.done .step-icon-horizontal {
  @apply bg-[var(--success-color)];
}

.step-item-horizontal.done .step-icon-horizontal i {
  display: block;
}

.step-item-horizontal.error .step-icon-horizontal {
  @apply bg-[var(--error-color)];
}

.step-item-horizontal.error .step-icon-horizontal i {
  display: block;
}

.step-content-horizontal {
  @apply px-2 max-w-[140px];
}

.step-title-horizontal {
  @apply font-medium mb-1 text-sm whitespace-nowrap overflow-hidden text-ellipsis;
  transition: color 0.3s;
}

.step-description-horizontal {
  @apply text-xs text-gray-500 leading-tight mt-1;
}

.step-item-horizontal.active .step-title-horizontal {
  @apply text-[var(--primary-color)];
  font-weight: 500;
}

.step-item-horizontal.done .step-title-horizontal {
  @apply text-[var(--success-color)];
}

.step-item-horizontal.error .step-title-horizontal {
  @apply text-[var(--error-color)];
}

/* 加载动画 */
.loading-spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 50%;
  top: 50%; 
  margin-left: -8px; /* 宽度的一半 */
  margin-top: -8px; /* 高度的一半 */
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--primary-color);
  animation-name: spinner-rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spinner-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式调整 - 只在小屏幕上应用垂直布局 */
@media (max-width: 640px) {
  .steps-container-horizontal {
    @apply flex-col items-start;
  }
  
  .steps-container-horizontal::before {
    @apply hidden;
  }
  
  .step-item-horizontal {
    @apply flex-row items-start mb-5 w-full;
  }
  
  .step-item-horizontal:last-child {
    @apply mb-0;
  }
  
  .step-content-horizontal {
    @apply text-left ml-3 max-w-none;
  }
  
  .step-icon-horizontal {
    @apply mb-0 flex-shrink-0;
  }
  
  .step-title-horizontal {
    @apply text-base;
  }
  
  .step-description-horizontal {
    @apply mt-1 text-sm;
  }
  
  /* 垂直连接线 */
  .step-item-horizontal::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: -20px;
    width: 2px;
    background-color: #e8e8e8;
    display: block;
  }
  
  .step-item-horizontal:last-child::before {
    display: none;
  }
}