90 lines
3.1 KiB
Vue
90 lines
3.1 KiB
Vue
<script setup>
|
|
defineProps({
|
|
mapping: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
routes: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
sectionId: {
|
|
type: String,
|
|
default: "solution-mapping",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section :id="sectionId" class="bg-white py-16 md:py-20">
|
|
<div class="container-gm">
|
|
<div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
|
|
<div class="max-w-3xl">
|
|
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">{{ mapping.eyebrow }}</p>
|
|
<h2 class="section-title mt-4">{{ mapping.title }}</h2>
|
|
<p class="mt-4 text-base leading-8 text-[#666]">{{ mapping.description }}</p>
|
|
</div>
|
|
<SectionRouteLinks :routes="routes" />
|
|
</div>
|
|
|
|
<div class="mt-10 grid gap-5 md:grid-cols-2" data-stagger>
|
|
<article
|
|
v-for="item in mapping.items"
|
|
:key="item.industry"
|
|
class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6"
|
|
data-stagger-item
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p class="text-xs uppercase tracking-[0.28em] text-gm-green">Industry</p>
|
|
<h3 class="mt-3 text-[22px] font-semibold text-[#262626]">{{ item.industry }}</h3>
|
|
</div>
|
|
<div class="flex flex-wrap justify-end gap-2">
|
|
<span
|
|
v-for="tag in item.tags"
|
|
:key="tag"
|
|
class="rounded-full border border-gm-border bg-white px-3 py-1 text-xs text-[#666]"
|
|
>
|
|
{{ tag }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 space-y-4 text-sm leading-7">
|
|
<div>
|
|
<p class="font-medium text-[#262626]">行业痛点</p>
|
|
<p class="mt-1 text-[#666]">{{ item.pain }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-[#262626]">对应方案</p>
|
|
<p class="mt-1 text-[#666]">{{ item.plan }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex flex-wrap gap-3">
|
|
<NuxtLink
|
|
:to="item.solutionHref"
|
|
class="inline-flex items-center gap-2 rounded-full border border-gm-green px-4 py-2 text-sm font-medium text-gm-green transition hover:bg-gm-green hover:text-white"
|
|
>
|
|
查看行业方案
|
|
<span aria-hidden="true">→</span>
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
:to="item.caseHref"
|
|
class="inline-flex items-center gap-2 rounded-full border border-gm-border bg-white px-4 py-2 text-sm text-[#555] transition hover:border-gm-green hover:text-gm-green"
|
|
>
|
|
查看对应案例
|
|
<span aria-hidden="true">→</span>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="mt-5 space-y-2 font-mono text-[11px] text-[#999]">
|
|
<p>方案路径 {{ item.solutionPath }}</p>
|
|
<p>案例路径 {{ item.casePath }}</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|