88 lines
3.1 KiB
Vue
88 lines
3.1 KiB
Vue
<script setup>
|
||
import { serviceOverview } from "~/data/services";
|
||
|
||
defineProps({
|
||
problem: {
|
||
type: Object,
|
||
default: () => serviceOverview.problem,
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<section
|
||
class="bg-top bg-no-repeat py-6 md:py-16"
|
||
:style="{ backgroundImage: `url(${problem.backgroundImage})` }"
|
||
>
|
||
<div class="container-gm">
|
||
<div class="mx-auto max-w-[760px] text-center" data-reveal>
|
||
<h2 class="section-title text-balance">
|
||
企业的营销数字化面临的
|
||
<span class="text-gm-green">三个问题</span>
|
||
，增长超人将如何帮您解决？
|
||
</h2>
|
||
<div class="mx-auto mt-7 flex size-12 items-center justify-center rounded-full border border-[#b7f7c2] text-gm-green shadow-[0_0_0_8px_rgba(27,214,41,0.08)]">
|
||
↓
|
||
</div>
|
||
</div>
|
||
|
||
<article class="mt-14 grid gap-10 rounded-[20px] bg-white px-6 py-8 shadow-soft lg:mt-[92px] lg:grid-cols-[1.05fr_0.95fr] lg:px-12 lg:py-10" data-stagger>
|
||
<div data-stagger-item>
|
||
<span class="rounded-full bg-gm-green px-4 py-1 text-xs font-medium text-white">
|
||
{{ problem.problemLabel }}
|
||
</span>
|
||
<h3 class="mt-8 text-[24px] font-medium leading-[1.5] text-[#7f7f7f] md:text-[30px]">
|
||
{{ problem.problem }}
|
||
</h3>
|
||
|
||
<p class="mt-9 text-sm text-[#999]">{{ problem.solutionTitle }}</p>
|
||
<p class="mt-4 text-[24px] font-medium leading-[1.5] text-[#8f8f8f] md:text-[30px]">
|
||
{{ problem.solution }}
|
||
</p>
|
||
|
||
<div class="mt-16 space-y-5">
|
||
<p class="text-sm text-[#999]">网站开发服务</p>
|
||
<NuxtLink :to="problem.solutionLink.href" class="inline-flex items-center gap-2 text-sm font-medium text-gm-green">
|
||
{{ problem.solutionLink.label }}
|
||
<span aria-hidden="true">→</span>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div data-stagger-item>
|
||
<p class="mb-5 text-sm text-[#999]">相关案例</p>
|
||
<div class="grid grid-cols-2 border-l border-t border-[#edf0ee] md:grid-cols-3">
|
||
<div
|
||
v-for="item in problem.cases"
|
||
:key="item"
|
||
class="flex min-h-[96px] items-center justify-center border-b border-r border-[#edf0ee] px-3 text-center text-xs leading-relaxed text-[#828282]"
|
||
>
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
|
||
<p class="mb-5 mt-10 text-sm text-[#999]">相关洞察</p>
|
||
<ul class="space-y-3">
|
||
<li
|
||
v-for="(item, index) in problem.insights"
|
||
:key="item"
|
||
class="flex gap-2 text-sm leading-relaxed text-[#555]"
|
||
>
|
||
<span class="mt-2 size-1 shrink-0 rounded-full bg-gm-green" />
|
||
<span>
|
||
{{ item }}
|
||
<span
|
||
v-if="index === 0"
|
||
class="ml-2 rounded-full bg-gm-green px-2 py-0.5 text-[10px] text-white"
|
||
>
|
||
HOT
|
||
</span>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</template>
|