70 lines
3.1 KiB
Vue
70 lines
3.1 KiB
Vue
<script setup>
|
|
defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: "service",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="bg-white py-16 md:py-20">
|
|
<div class="container-gm grid gap-10 lg:grid-cols-[0.75fr_1.25fr]">
|
|
<aside class="lg:sticky lg:top-28 lg:self-start" data-reveal>
|
|
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ type }}</p>
|
|
<h1 class="mt-4 text-balance text-[34px] font-semibold leading-tight text-[#262626] md:text-[42px]">
|
|
{{ item.title }}
|
|
</h1>
|
|
<p class="mt-5 text-base leading-8 text-[#666]">{{ item.summary || item.excerpt }}</p>
|
|
<p v-if="item.path" class="mt-5 font-mono text-xs text-[#999]">
|
|
页面路径 {{ item.path }}
|
|
</p>
|
|
<NuxtLink to="#contact" class="gm-btn gm-btn-primary mt-8">立即免费咨询</NuxtLink>
|
|
</aside>
|
|
|
|
<div class="space-y-6">
|
|
<div v-if="item.image" class="overflow-hidden rounded-lg border border-gm-border" data-reveal>
|
|
<img :src="item.image" :alt="item.title" class="h-[320px] w-full object-cover" data-parallax="24" />
|
|
</div>
|
|
|
|
<div v-if="item.metrics?.length" class="grid gap-4 md:grid-cols-2" data-stagger>
|
|
<div v-for="metric in item.metrics" :key="metric" class="rounded-lg border border-gm-border bg-gm-light p-5" data-stagger-item>
|
|
<p class="text-sm font-medium text-[#262626]">{{ metric }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="item.outcomes?.length" class="grid gap-4 md:grid-cols-2" data-stagger>
|
|
<div v-for="outcome in item.outcomes" :key="outcome" class="rounded-lg border border-gm-border bg-gm-light p-5" data-stagger-item>
|
|
<p class="text-sm font-medium text-[#262626]">{{ outcome }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="item.content?.length" class="rounded-lg border border-gm-border p-6" data-reveal>
|
|
<p v-for="paragraph in item.content" :key="paragraph" class="mb-4 text-base leading-8 text-[#666] last:mb-0">
|
|
{{ paragraph }}
|
|
</p>
|
|
</div>
|
|
|
|
<div v-if="item.challenge || item.solution || item.result" class="grid gap-4" data-stagger>
|
|
<article v-if="item.challenge" class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
|
<h2 class="text-[20px] font-semibold text-[#262626]">项目挑战</h2>
|
|
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.challenge }}</p>
|
|
</article>
|
|
<article v-if="item.solution" class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
|
<h2 class="text-[20px] font-semibold text-[#262626]">解决方案</h2>
|
|
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.solution }}</p>
|
|
</article>
|
|
<article v-if="item.result" class="rounded-lg border border-gm-border p-6" data-stagger-item>
|
|
<h2 class="text-[20px] font-semibold text-[#262626]">落地结果</h2>
|
|
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.result }}</p>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|