ali_ai_learn_web/src/pages/Home/SectionWhatIsWorkflow.vue

<template>
  <section class="section-what-is relative overflow-hidden py-20">
    <!-- 背景 -->
    <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(180deg, rgba(245,243,255,0) 0%, rgba(237,233,254,0.5) 50%, rgba(245,243,255,0) 100%);"></div>

    <div class="relative z-10 max-w-6xl mx-auto px-6">
      <!-- 标题 -->
      <div class="text-center mb-14 observe-fade">
        <span class="inline-flex items-center gap-2 bg-violet-100 border border-violet-200 text-violet-700 text-xs font-bold px-4 py-1.5 rounded-full mb-5 uppercase tracking-wide">
          <span class="w-1.5 h-1.5 bg-violet-500 rounded-full animate-pulse"></span>
          {{$t('whatIsWorkflow.guideTitle')}}
        </span>
        <h2 class="text-3xl lg:text-4xl font-black text-gray-900 mb-3">
          {{$t('whatIsWorkflow.title')}} <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">{{$t('whatIsWorkflow.aiWorkflow')}}</span>？
        </h2>
        <p class="text-gray-500 text-base max-w-xl mx-auto">{{$t('whatIsWorkflow.subtitle')}}</p>
      </div>

      <!-- 3 步说明 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
        <div v-for="(step, idx) in steps" :key="step.title"
          class="step-card observe-fade group"
          :style="{ transitionDelay: idx * 120 + 'ms' }">
          <!-- 步骤号 -->
          <div class="step-number">{{ idx + 1 }}</div>
          <!-- 图标 -->
          <div class="step-icon-wrap" :style="{ background: step.iconBg }">
            <span class="text-3xl">{{ step.icon }}</span>
          </div>
          <!-- 内容 -->
          <h3 class="text-gray-900 font-bold text-lg mb-2">{{ step.title }}</h3>
          <p class="text-gray-500 text-sm leading-relaxed">{{ step.desc }}</p>
          <!-- 示例标签 -->
          <div class="mt-4 flex flex-wrap gap-2">
            <span v-for="tag in step.examples" :key="tag"
              class="text-xs px-2.5 py-1 rounded-full font-medium"
              :style="{ background: step.tagBg, color: step.tagColor }">
              {{ tag }}
            </span>
          </div>
          <!-- 连接箭头（非最后一个） -->
          <div v-if="idx < steps.length - 1" class="step-arrow">→</div>
        </div>
      </div>

      <!-- 底部 CTA -->
      <div class="text-center observe-fade">
        <p class="text-gray-400 text-sm mb-4" v-html="$t('whatIsWorkflow.userCount', { count: '50,000+' })"></p>
        <button class="inline-flex items-center gap-2 bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-bold px-8 py-3.5 rounded-2xl shadow-lg shadow-violet-200 hover:shadow-violet-300 hover:-translate-y-0.5 transition-all duration-300" style="cursor: pointer;"
                @click.stop.prevent="goWorkflowMarket">
          <span>{{$t('whatIsWorkflow.ctaButton')}}</span>
          <span class="text-lg">→</span>
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import {useRouter} from "vue-router";
const router = useRouter();
const { t } = useI18n()
const steps = [
{
    icon: '🎯',
    title: t('whatIsWorkflow.steps.step1.title'),
    desc: t('whatIsWorkflow.steps.step1.desc'),
    iconBg: 'linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.1))',
    examples: [t('whatIsWorkflow.steps.step1.examples.0'), t('whatIsWorkflow.steps.step1.examples.1'), t('whatIsWorkflow.steps.step1.examples.2'), t('whatIsWorkflow.steps.step1.examples.3')],
    tagBg: 'rgba(139,92,246,0.1)',
    tagColor: '#7c3aed'
  },
  {
    icon: '⚡',
    title: t('whatIsWorkflow.steps.step2.title'),
    desc: t('whatIsWorkflow.steps.step2.desc'),
    iconBg: 'linear-gradient(135deg, rgba(245,158,11,0.15), rgba(251,191,36,0.1))',
    examples: [t('whatIsWorkflow.steps.step2.examples.0'), t('whatIsWorkflow.steps.step2.examples.1'), t('whatIsWorkflow.steps.step2.examples.2'), t('whatIsWorkflow.steps.step2.examples.3')],
    tagBg: 'rgba(245,158,11,0.1)',
    tagColor: '#d97706'
  },
  {
    icon: '🚀',
    title: t('whatIsWorkflow.steps.step3.title'),
    desc: t('whatIsWorkflow.steps.step3.desc'),
    iconBg: 'linear-gradient(135deg, rgba(34,197,94,0.15), rgba(16,185,129,0.1))',
    examples: [t('whatIsWorkflow.steps.step3.examples.0'), t('whatIsWorkflow.steps.step3.examples.1'), t('whatIsWorkflow.steps.step3.examples.2'), t('whatIsWorkflow.steps.step3.examples.3')],
    tagBg: 'rgba(34,197,94,0.1)',
    tagColor: '#059669'
  }
]
const goWorkflowMarket = () => { router.push({ path: '/workflow-trade' }); };
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in-view')
      }
    })
  }, { threshold: 0.15 })
  document.querySelectorAll('.section-what-is .observe-fade').forEach(el => observer.observe(el))
})
</script>

<style scoped>
.section-what-is {
  background: #fff;
}

/* 步骤卡片 */
.step-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: 24px;
  padding: 32px 28px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.step-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(139, 92, 246, 0.12);
}
.step-number {
  position: absolute;
  top: -14px;
  left: 28px;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}
.step-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}
.step-card:hover .step-icon-wrap {
  transform: scale(1.08) rotate(-3deg);
}
.step-arrow {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: rgba(139, 92, 246, 0.4);
  z-index: 10;
  display: none;
}

@media (min-width: 768px) {
  .step-arrow {
    display: block;
  }
}

/* 滚动入场动画 */
.observe-fade {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.observe-fade.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 响应式 */
.section-what-is h2 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}
@media (max-width: 768px) {
  .section-what-is { padding-top: 3rem; padding-bottom: 3rem; }
  .step-card { padding: 24px 20px; }
  .step-icon-wrap { width: 56px; height: 56px; }
}
@media (max-width: 480px) {
  .section-what-is { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .step-card { padding: 20px 16px; }
}
</style>