init

components/AnnouncementBar.vue

@@ -0,0 +1,32 @@
+<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>