49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<script setup>
|
|
defineProps({
|
|
steps: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "交付流程",
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: "从诊断到上线，再到持续复盘，把增长动作落到可执行的节奏里。",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-white py-20">
|
|
<div class="container-gm">
|
|
<div class="max-w-2xl" data-reveal>
|
|
<p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">Process</p>
|
|
<h2 class="section-title mt-4">{{ title }}</h2>
|
|
<p class="mt-4 text-base leading-8 text-[#777]">{{ description }}</p>
|
|
</div>
|
|
|
|
<div class="mt-12 grid gap-5 md:grid-cols-2 xl:grid-cols-4" data-stagger>
|
|
<article
|
|
v-for="step in steps"
|
|
:key="step.step || step"
|
|
class="rounded-[24px] border border-gm-border bg-white p-6 shadow-sm"
|
|
data-stagger-item
|
|
data-hover-card
|
|
>
|
|
<p class="text-[42px] font-semibold leading-none text-gm-green">
|
|
{{ step.step || String(steps.indexOf(step) + 1).padStart(2, "0") }}
|
|
</p>
|
|
<h3 class="mt-5 text-xl font-semibold text-[#262626]">
|
|
{{ step.title || step }}
|
|
</h3>
|
|
<p v-if="step.text" class="mt-3 text-sm leading-7 text-[#777]">
|
|
{{ step.text }}
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|