111 lines
5.4 KiB
Vue
111 lines
5.4 KiB
Vue
<script setup>
|
|
import { useData } from 'vitepress'
|
|
|
|
import {t} from '../locale'
|
|
const { theme, frontmatter, lang } = useData()
|
|
</script>
|
|
|
|
<template>
|
|
<footer v-if="theme.footer && frontmatter.footer != false" :class="{ 'has-sidebar': theme.sidebar && frontmatter.footer != false && frontmatter.layout !== 'home' }">
|
|
<div class="w-full text-sm px-6 sm:px-8 md:px-28 lg:px-20 xl:px-0 max-w-screen-lg mx-auto border-t border-t-solid border-t-[var(--vp-c-gray-3)] pt-6">
|
|
<div class="grid grid-cols-12 gap-8 py-12 text-[var(--vp-c-text-2)] transition-colors duration-150 border-b lt-sm:grid-cols-1 border-border">
|
|
<div class="col-span-4 lt-sm:col-span-1">
|
|
<div class="flex flex-col items-start lt-sm:items-center h-10">
|
|
<div class="flex items-center">
|
|
<CustomLogo />
|
|
<span class="font-bold text-[var(--vp-c-text-1)] text-16px">{{ t(lang, 'title') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-2 lt-sm:col-span-1">
|
|
<ul class="flex flex-col flex-initial md:flex-1">
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">
|
|
<p class="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
|
|
{{ t(lang, 'footer.product') }}
|
|
</p>
|
|
</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.web') }}</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.desktop') }}</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.mobile') }}</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.webplugin') }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-span-2 lt-sm:col-span-1">
|
|
<ul class="flex flex-col flex-initial md:flex-1">
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">
|
|
<p class="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
|
|
{{ t(lang, 'footer.resource') }}
|
|
</p>
|
|
</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.guide') }}</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.origin') }}</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.faq') }}</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.extend') }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-span-2 lt-sm:col-span-1">
|
|
<ul class="flex flex-col flex-initial md:flex-1">
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">
|
|
<p class="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
|
|
{{ t(lang, 'footer.team') }}
|
|
</p>
|
|
</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.aboutus') }}</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.contactus') }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-span-2 lt-sm:col-span-1">
|
|
<ul class="flex flex-col flex-initial md:flex-1">
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">
|
|
<p class="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
|
|
{{ t(lang, 'footer.other') }}
|
|
</p>
|
|
</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.other.ua') }}</li>
|
|
<li class="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.other.pa') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-start items-center flex-wrap lt-sm:justify-center py-4">
|
|
<span class="text-[var(--vp-c-text-2)] text-sm">{{ t(lang, 'footer.desc1') }}</span>
|
|
<a
|
|
class="text-sm [var(--vp-c-text-2)] mx-4px"
|
|
uno-hover="text-primary underline"
|
|
href="https://github.com/vuejs/vitepress"
|
|
target="_blank"
|
|
>
|
|
VitePress
|
|
</a>
|
|
<span class="mr-6px text-[var(--vp-c-text-2)] text-sm">{{ t(lang, 'footer.desc2') }}.</span>
|
|
<span class="text-[var(--vp-c-text-2)] text-sm">
|
|
{{ `© 2023-${new Date().getFullYear()} ${t(lang, 'title')} - ${t(lang, 'company')} ${t(lang, 'footer.desc3')}. ` }}
|
|
</span>
|
|
<span class="inline-flex items-center">
|
|
<img src="/img/site/psf.png" class="inline-block h-14px" />
|
|
<a
|
|
class="text-sm [var(--vp-c-text-2)] mx-4px"
|
|
uno-hover="text-primary underline"
|
|
:href="`http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${theme.footer.psf}`"
|
|
target="_blank"
|
|
>
|
|
京公安{{ theme.footer.psf }}
|
|
</a>
|
|
</span>
|
|
<a
|
|
class="text-sm [var(--vp-c-text-2)] mx-4px"
|
|
uno-hover="text-primary underline"
|
|
href="https://beian.miit.gov.cn/#/Integrated/index"
|
|
target="_blank"
|
|
>
|
|
{{ theme.footer.icp }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.VPFooter.has-sidebar {
|
|
display: none;
|
|
}
|
|
</style> |