57 lines
1.8 KiB
Vue
57 lines
1.8 KiB
Vue
<script setup>
|
|
import { processSteps } from "~/data/home";
|
|
|
|
defineProps({
|
|
steps: {
|
|
type: Array,
|
|
default: () => processSteps,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "5 步标准化交付流程，透明可控效果可追溯",
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: "标准化流程加透明化交付，让服务可控、效果清晰可见。",
|
|
},
|
|
routes: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
sectionId: {
|
|
type: String,
|
|
default: "process",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section :id="sectionId" class="bg-white py-16 md:py-20">
|
|
<div class="container-gm">
|
|
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
|
<div class="max-w-3xl">
|
|
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">Process</p>
|
|
<h2 class="section-title mt-4">{{ title }}</h2>
|
|
<p class="mt-4 text-base leading-8 text-[#666]">{{ description }}</p>
|
|
</div>
|
|
<SectionRouteLinks :routes="routes" />
|
|
</div>
|
|
|
|
<div class="relative mt-10 grid gap-4 md:grid-cols-5" data-stagger data-process-line>
|
|
<div class="absolute left-0 top-8 hidden h-px w-full bg-gm-border md:block" />
|
|
<div class="absolute left-0 top-8 hidden h-px w-0 bg-gm-green md:block" data-flow-line />
|
|
<article
|
|
v-for="step in steps"
|
|
:key="step.step"
|
|
class="relative rounded-lg border border-gm-border bg-white p-5 shadow-sm"
|
|
data-stagger-item
|
|
>
|
|
<p class="text-[24px] font-semibold text-gm-green">{{ step.step }}</p>
|
|
<h3 class="mt-4 text-[18px] font-semibold text-[#262626]">{{ step.title }}</h3>
|
|
<p class="mt-3 text-sm leading-7 text-[#666]">{{ step.text }}</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|