82 lines
2.8 KiB
Vue
82 lines
2.8 KiB
Vue
|
<script setup>
|
|||
|
|
import { brand, footerData } from "~/data/navigation";
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<footer id="contact" class="bg-gm-dark text-white">
|
|||
|
|
<div class="container-gm py-14">
|
|||
|
|
<div class="grid gap-12 xl:grid-cols-[1.1fr_1.2fr_1fr]">
|
|||
|
|
<div data-reveal>
|
|||
|
|
<p class="text-[22px] font-semibold text-white">{{ brand.name }}</p>
|
|||
|
|
<p class="mt-5 text-sm text-white/75">{{ footerData.tagline }}</p>
|
|||
|
|
<p class="mt-4 max-w-[360px] text-sm leading-7 text-white/60">
|
|||
|
|
{{ footerData.description }}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4" data-stagger>
|
|||
|
|
<div
|
|||
|
|
v-for="(links, title) in footerData.links"
|
|||
|
|
:key="title"
|
|||
|
|
data-stagger-item
|
|||
|
|
>
|
|||
|
|
<h3 class="text-base font-semibold text-white">{{ title }}</h3>
|
|||
|
|
<ul class="mt-4 space-y-3">
|
|||
|
|
<li v-for="link in links" :key="link.label">
|
|||
|
|
<NuxtLink :to="link.href" class="text-sm text-white/65 transition hover:text-gm-green">
|
|||
|
|
{{ link.label }}
|
|||
|
|
</NuxtLink>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="rounded-lg bg-white/6 p-6" data-reveal>
|
|||
|
|
<p class="text-[22px] font-semibold text-white">
|
|||
|
|
{{ footerData.contact.title }}
|
|||
|
|
</p>
|
|||
|
|
<p class="mt-2 text-sm text-white/65">
|
|||
|
|
{{ footerData.contact.subtitle }}
|
|||
|
|
</p>
|
|||
|
|
<NuxtLink
|
|||
|
|
:to="footerData.contact.href"
|
|||
|
|
class="gm-btn gm-btn-primary mt-6 px-7"
|
|||
|
|
>
|
|||
|
|
{{ footerData.contact.button }}
|
|||
|
|
</NuxtLink>
|
|||
|
|
|
|||
|
|
<div class="mt-8 flex items-start gap-5">
|
|||
|
|
<img
|
|||
|
|
src="/images/footer-qr.png"
|
|||
|
|
alt="新媒体矩阵二维码"
|
|||
|
|
class="w-[110px] rounded-2xl bg-white p-2"
|
|||
|
|
/>
|
|||
|
|
<div class="space-y-3 text-sm text-white/75">
|
|||
|
|
<p>{{ footerData.contact.qrLabel }}</p>
|
|||
|
|
<p>业务咨询：{{ footerData.contact.phone }}</p>
|
|||
|
|
<p>{{ footerData.contact.email }}</p>
|
|||
|
|
<p>{{ footerData.contact.address }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="border-t border-white/10">
|
|||
|
|
<div class="container-gm flex flex-col gap-4 py-5 text-xs text-white/45 md:flex-row md:items-center md:justify-between">
|
|||
|
|
<p>{{ footerData.copyright }}</p>
|
|||
|
|
<div class="flex flex-wrap gap-4">
|
|||
|
|
<NuxtLink
|
|||
|
|
v-for="item in footerData.legal"
|
|||
|
|
:key="item.label"
|
|||
|
|
:to="item.href"
|
|||
|
|
class="transition hover:text-gm-green"
|
|||
|
|
>
|
|||
|
|
{{ item.label }}
|
|||
|
|
</NuxtLink>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</template>
|