47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const { t } = useI18n();
|
|
const visible = ref(false);
|
|
|
|
function onScroll(): void {
|
|
visible.value = window.scrollY > 400;
|
|
}
|
|
|
|
function toTop(): void {
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}
|
|
|
|
onMounted(() => {
|
|
onScroll();
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
});
|
|
onBeforeUnmount(() => window.removeEventListener("scroll", onScroll));
|
|
</script>
|
|
|
|
<template>
|
|
<footer class="bg-surface pt-2 text-center">
|
|
<div class="max-w-mall mx-auto px-4">
|
|
<ul
|
|
class="border-border text-text mx-auto mt-10 flex w-full max-w-[720px] list-none justify-between border-t pt-10 text-sm"
|
|
>
|
|
<li>{{ t("shell.footer.v1") }}</li>
|
|
<li>{{ t("shell.footer.v2") }}</li>
|
|
<li>{{ t("shell.footer.v3") }}</li>
|
|
<li>{{ t("shell.footer.v4") }}</li>
|
|
</ul>
|
|
<div class="text-muted pt-[30px] pb-5 text-[12px] leading-7">
|
|
<p class="m-0">{{ t("shell.footer.copyright") }}</p>
|
|
<p class="m-0">{{ t("shell.footer.icp") }}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
v-show="visible"
|
|
class="border-border bg-surface text-muted hover:border-primary hover:bg-primary fixed right-10 bottom-[60px] z-[800] h-11 w-11 rounded-md border text-lg transition-colors hover:text-white"
|
|
type="button"
|
|
:aria-label="t('shell.backToTop')"
|
|
@click="toTop"
|
|
>
|
|
↑
|
|
</button>
|
|
</footer>
|
|
</template>
|