75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<script setup>
|
|
defineProps({
|
|
eyebrow: {
|
|
type: String,
|
|
default: "Proof",
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
metrics: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
logos: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
routes: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
sectionId: {
|
|
type: String,
|
|
default: "clients",
|
|
},
|
|
});
|
|
</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]">{{ eyebrow }}</p>
|
|
<h2 class="section-title mt-4">{{ title }}</h2>
|
|
<p v-if="description" class="mt-4 text-base leading-8 text-[#666]">
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
<SectionRouteLinks :routes="routes" />
|
|
</div>
|
|
|
|
<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4" data-stagger>
|
|
<AnimatedStat
|
|
v-for="metric in metrics"
|
|
:key="metric.label"
|
|
:label="metric.label"
|
|
:value="metric.value"
|
|
:suffix="metric.suffix"
|
|
data-stagger-item
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="logos.length" class="mt-10">
|
|
<p class="mb-4 text-xs uppercase tracking-[0.28em] text-[#999]">覆盖行业</p>
|
|
<div class="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6" data-stagger>
|
|
<div
|
|
v-for="logo in logos"
|
|
:key="logo"
|
|
class="flex h-12 items-center justify-center rounded border border-gm-border bg-gm-light text-sm text-[#666]"
|
|
data-stagger-item
|
|
>
|
|
{{ logo }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|