template-10584/src/components/PaymentCountdown.scss

/* 支付倒计时样式 */

/* 徽章模式样式 */
.payment-countdown-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff4757, #ff3838);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
  margin-left: 8px;

  .countdown-text {
    color: white;
    font-weight: 500;
  }

  /* 紧急状态（少于1小时） */
  &.urgent {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    animation: pulse 2s infinite;
  }

  /* 非常紧急状态（少于10分钟） */
  &.critical {
    background: linear-gradient(135deg, #ff4757, #c44569);
    animation: flash 1s infinite;
  }

  /* 过期状态 */
  &.expired {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    animation: none;
  }
}

/* 纯文本模式样式 */
.payment-countdown-text {
  color: #ff4757;
  font-weight: 500;

  /* 紧急状态 */
  &.urgent {
    color: #ff6b6b;
    animation: textPulse 2s infinite;
  }

  /* 非常紧急状态 */
  &.critical {
    color: #ff4757;
    animation: textFlash 1s infinite;
  }

  /* 过期状态 */
  &.expired {
    color: #95a5a6;
    animation: none;
  }
}

/* 动画效果 */
@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes flash {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  25% {
    opacity: 0.7;
    transform: scale(1.05);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 0.7;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes textPulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes textFlash {
  0% { opacity: 1; }
  25% { opacity: 0.5; }
  50% { opacity: 1; }
  75% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* 响应式调整 */
@media (max-width: 375px) {
  .payment-countdown-badge {
    padding: 3px 6px;

    .countdown-text {
    }
  }

  .payment-countdown-text {
  }
}

/* 详情页专用样式 */
.order-detail-countdown {
  .payment-countdown-badge {
    padding: 6px 12px;
    border-radius: 16px;
    margin: 8px 0;

    .countdown-text {
      font-weight: 600;
    }
  }

  .payment-countdown-text {
    font-weight: 600;
  }
}

/* 列表页专用样式 */
.order-list-countdown {
  .payment-countdown-badge {
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;

    .countdown-text {

    }
  }

  .payment-countdown-text {

  }
}