website/.vitepress/theme/components/CustomFooter.vue

<script setup>
import { useData } from 'vitepress'
import {t} from '../locale'

const { theme, frontmatter, lang } = useData()
</script>

<template>
  <footer class="w-100% h-20px"></footer>
  <footer v-if="theme.footer && frontmatter.footer !== false">

    <div className="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 className="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 className="col-span-4 lt-sm:col-span-1">
            <div className="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 className="col-span-2 lt-sm:col-span-1">
            <ul className="flex flex-col flex-initial md:flex-1">
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">
                <p className="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
                  {{  t(lang, 'footer.product') }}
                </p>
              </li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.web') }}</li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.desktop') }}</li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.mobile') }}</li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.product.webplugin') }}</li>
            </ul>
          </div>
          <div className="col-span-2 lt-sm:col-span-1">
            <ul className="flex flex-col flex-initial md:flex-1">
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">
                <p className="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
                  {{  t(lang, 'footer.resource') }}
                </p>
              </li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.guide') }}</li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.faq') }}</li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.resource.extend') }}</li>
            </ul>
          </div>
          <div className="col-span-2 lt-sm:col-span-1">
            <ul className="flex flex-col flex-initial md:flex-1">
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">
                <p className="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
                  {{  t(lang, 'footer.team') }}
                </p>
              </li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.aboutus') }}</li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.origin') }}</li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.contactus') }}</li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.team.support') }}</li>
            </ul>
          </div>
          <div className="col-span-2 lt-sm:col-span-1">
            <ul className="flex flex-col flex-initial md:flex-1">
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">
                <p className="font-bold text-[var(--vp-c-text-2)] transition duration-150 ease-in-out">
                  {{  t(lang, 'footer.other') }}
                </p>
              </li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.other.ua') }}</li>
              <li className="py-3 md:py-0 md:pb-4 lt-sm:text-center">{{ t(lang, 'footer.other.pa') }}</li>
            </ul>
          </div>
        </div>
        <div className="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 className="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></style>