62 lines
1.8 KiB
Vue
62 lines
1.8 KiB
Vue
<script setup>
|
|
import { serviceItems } from "~/data/services";
|
|
|
|
defineProps({
|
|
services: {
|
|
type: Array,
|
|
default: () => serviceItems,
|
|
},
|
|
eyebrow: {
|
|
type: String,
|
|
default: "Method",
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "基于高楼营销法则",
|
|
},
|
|
description: {
|
|
type: String,
|
|
default: "提供全链路增长服务",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-white py-20" id="services">
|
|
<div class="container-gm grid gap-10 lg:grid-cols-[0.95fr_1.05fr]">
|
|
<div class="lg:sticky lg:top-28 lg:self-start" data-reveal>
|
|
<p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">{{ eyebrow }}</p>
|
|
<h2 class="mt-4 text-[34px] font-semibold leading-tight text-[#262626] md:text-[42px]">
|
|
{{ title }}
|
|
</h2>
|
|
<p class="mt-4 text-lg text-[#666]">{{ description }}</p>
|
|
</div>
|
|
|
|
<div class="space-y-8" data-stagger>
|
|
<NuxtLink
|
|
v-for="(service, index) in services"
|
|
:key="service.slug"
|
|
:to="service.href"
|
|
class="block border-b border-gm-border pb-8 last:border-b-0"
|
|
data-stagger-item
|
|
data-hover-card
|
|
>
|
|
<p class="text-[44px] font-semibold leading-none text-gm-green">
|
|
{{ String(index + 1).padStart(2, "0") }}
|
|
</p>
|
|
<h3 class="mt-4 text-[28px] font-semibold text-[#262626]">
|
|
{{ service.title }}
|
|
</h3>
|
|
<p class="mt-2 text-base text-[#666]">{{ service.tier }}</p>
|
|
<p class="mt-4 max-w-2xl text-sm leading-7 text-[#777]">
|
|
{{ service.summary }}
|
|
</p>
|
|
<span class="mt-5 inline-flex items-center gap-2 text-sm font-medium text-gm-green">
|
|
查看服务详情 <span aria-hidden="true">→</span>
|
|
</span>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|