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>
|