33 lines
1.2 KiB
Vue
33 lines
1.2 KiB
Vue
|
<script setup>
|
|||
|
|
import { announcement } from "~/data/navigation";
|
|||
|
|
|
|||
|
|
defineEmits(["close"]);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="fixed inset-x-0 top-0 z-[1000] h-[59px] bg-[url('/images/top-pop-bg.jpg')] bg-cover bg-center text-white max-sm:h-11">
|
|||
|
|
<div class="mx-auto flex h-full max-w-[1440px] items-center justify-center gap-4 px-[5%] text-sm max-sm:gap-2 max-sm:text-xs">
|
|||
|
|
<span class="hidden text-center sm:block">
|
|||
|
|
{{ announcement.text }}
|
|||
|
|
</span>
|
|||
|
|
<NuxtLink
|
|||
|
|
:to="announcement.ctaHref"
|
|||
|
|
class="inline-flex h-9 items-center gap-2 rounded-full bg-white px-5 text-sm font-medium text-gm-green transition-all duration-300 hover:scale-95 hover:bg-gm-green hover:text-white max-sm:h-7 max-sm:px-4 max-sm:text-xs"
|
|||
|
|
>
|
|||
|
|
{{ announcement.ctaLabel }}
|
|||
|
|
<span aria-hidden="true">→</span>
|
|||
|
|
</NuxtLink>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-1 text-sm text-white/80 transition hover:text-white"
|
|||
|
|
aria-label="关闭公告"
|
|||
|
|
@click="$emit('close')"
|
|||
|
|
>
|
|||
|
|
<span class="hidden sm:inline">关闭</span>
|
|||
|
|
<span aria-hidden="true">×</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|