95 lines
3.4 KiB
Vue
95 lines
3.4 KiB
Vue
<script setup>
|
|
defineProps({
|
|
service: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-white py-20">
|
|
<div class="container-gm grid gap-12 lg:grid-cols-[0.85fr_1.15fr]">
|
|
<div class="lg:sticky lg:top-28 lg:self-start" data-reveal>
|
|
<p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">{{ service.tier }}</p>
|
|
<h1 class="mt-4 text-balance text-4xl font-semibold leading-tight text-[#262626] md:text-[56px]">
|
|
{{ service.title }}
|
|
</h1>
|
|
<p class="mt-5 text-base leading-8 text-[#777]">{{ service.summary }}</p>
|
|
<NuxtLink :to="service.cta.href" class="gm-btn gm-btn-primary mt-8 px-8">
|
|
{{ service.cta.label }}
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="space-y-8">
|
|
<div class="overflow-hidden rounded-[28px] border border-gm-border" data-reveal>
|
|
<img
|
|
:src="service.image"
|
|
:alt="service.title"
|
|
class="h-[340px] w-full object-cover"
|
|
data-parallax="30"
|
|
/>
|
|
</div>
|
|
|
|
<div class="grid gap-6 md:grid-cols-3" data-stagger>
|
|
<article
|
|
v-for="metric in service.metrics"
|
|
:key="metric.label"
|
|
class="rounded-[24px] border border-gm-border bg-[#f7f8f7] p-6"
|
|
data-stagger-item
|
|
>
|
|
<p class="text-3xl font-semibold text-gm-green">{{ metric.value }}</p>
|
|
<p class="mt-2 text-sm text-[#777]">{{ metric.label }}</p>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="grid gap-6 md:grid-cols-2" data-stagger>
|
|
<article class="rounded-[24px] border border-gm-border p-6" data-stagger-item>
|
|
<h2 class="text-xl font-semibold text-[#262626]">适用场景</h2>
|
|
<ul class="mt-5 space-y-3">
|
|
<li
|
|
v-for="pain in service.pains"
|
|
:key="pain"
|
|
class="flex gap-3 text-sm leading-7 text-[#666]"
|
|
>
|
|
<span class="mt-2 size-1.5 shrink-0 rounded-full bg-gm-green" />
|
|
<span>{{ pain }}</span>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
|
|
<article class="rounded-[24px] border border-gm-border p-6" data-stagger-item>
|
|
<h2 class="text-xl font-semibold text-[#262626]">核心交付物</h2>
|
|
<ul class="mt-5 space-y-3">
|
|
<li
|
|
v-for="item in service.deliverables"
|
|
:key="item"
|
|
class="flex gap-3 text-sm leading-7 text-[#666]"
|
|
>
|
|
<span class="mt-2 size-1.5 shrink-0 rounded-full bg-gm-green" />
|
|
<span>{{ item }}</span>
|
|
</li>
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="rounded-[24px] border border-gm-border bg-white p-6" data-reveal>
|
|
<h2 class="text-xl font-semibold text-[#262626]">常见问题</h2>
|
|
<div class="mt-5 divide-y divide-gm-border">
|
|
<details
|
|
v-for="faq in service.faqs"
|
|
:key="faq.question"
|
|
class="group py-4"
|
|
>
|
|
<summary class="cursor-pointer list-none text-base font-medium text-[#262626]">
|
|
{{ faq.question }}
|
|
</summary>
|
|
<p class="mt-3 text-sm leading-7 text-[#777]">{{ faq.answer }}</p>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|