weicw-dshsa
3d3a377221
- CmsSiteInfo 加 websiteFooterLogo 类型 - useSite 新增 siteFooterLogo(websiteFooterLogo 优先，回退 siteLogo)；siteLogo/siteFooterLogo 统一过 ensureFullUrl， 兼容本地存储相对路径(/api/file 代理)与完整 OSS URL - template-01~08/10 共 9 个模板 Footer 的 SiteBrand 改用 siteFooterLogo；template-09 页脚无品牌区保持不变 - 未配置页脚 Logo 时行为与旧版完全一致(回退站点 Logo)
91 lines
4.0 KiB
Vue
91 lines
4.0 KiB
Vue
<template>
|
||
<footer class="bg-[#1a1a1a] border-t border-[#333] py-10">
|
||
<div class="container mx-auto px-4">
|
||
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-8">
|
||
<!-- 品牌 -->
|
||
<div class="max-w-xs">
|
||
<SiteBrand
|
||
link-class="mb-2"
|
||
:logo="siteFooterLogo"
|
||
:icon="siteIcon"
|
||
:name="siteName"
|
||
logo-class="h-8 w-auto max-w-[180px] object-contain"
|
||
icon-class="h-6 w-auto object-contain"
|
||
name-class="font-bold text-[#d4af37] text-lg"
|
||
/>
|
||
<p v-if="slogan" class="text-sm text-gray-400 mb-2">{{ slogan }}</p>
|
||
<p class="text-sm text-gray-400 leading-relaxed">{{ siteInfo?.comments || '专注企业数字化官网建设，提供品牌展示与业务增长一体化解决方案。' }}</p>
|
||
</div>
|
||
|
||
<!-- 快速链接 -->
|
||
<nav class="flex flex-col gap-2">
|
||
<div class="text-sm font-semibold text-[#d4af37] mb-1">快速链接</div>
|
||
<NuxtLink
|
||
v-for="link in quickLinks"
|
||
:key="link.navigationId || link.path"
|
||
:to="getNavLink(link)"
|
||
:target="link.target === '_blank' ? '_blank' : undefined"
|
||
class="text-sm text-gray-300 hover:text-[#d4af37] transition-colors"
|
||
>
|
||
{{ link.title }}
|
||
</NuxtLink>
|
||
</nav>
|
||
|
||
<!-- 联系方式 -->
|
||
<div class="flex flex-col gap-1 text-sm text-gray-300">
|
||
<div class="font-semibold text-[#d4af37] mb-1">联系我们</div>
|
||
<span v-if="phone">电话：{{ phone }}</span>
|
||
<span v-if="email">邮箱：{{ email }}</span>
|
||
<span v-if="address">地址：{{ address }}</span>
|
||
<span v-if="officialWebsite">官网：<a :href="officialWebsiteUrl" target="_blank" rel="nofollow" class="hover:text-[#d4af37] transition-colors">{{ officialWebsite }}</a></span>
|
||
</div>
|
||
|
||
<!-- 关注我们 -->
|
||
<div v-if="wxQrcode || socialLinks.length" class="flex flex-col gap-2">
|
||
<div class="font-semibold text-[#d4af37] mb-1">关注我们</div>
|
||
<img v-if="wxQrcode" :src="wxQrcode" alt="微信二维码" class="w-28 h-28 object-contain border border-[#333] rounded-lg">
|
||
<p v-if="wxQrcode" class="text-xs text-gray-500">{{ siteConfig?.wxQrcodeText || '扫码关注' }}</p>
|
||
<a
|
||
v-for="link in socialLinks"
|
||
:key="link.url"
|
||
:href="link.url"
|
||
target="_blank"
|
||
rel="nofollow"
|
||
class="text-sm text-gray-300 hover:text-[#d4af37] transition-colors"
|
||
>{{ link.name || link.type }}</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-8 pt-6 border-t border-[#333] flex flex-wrap items-center justify-between gap-2 text-xs text-gray-500">
|
||
<span>{{ copyright || '© ' + new Date().getFullYear() + ' ' + (siteName || '企业官网') }}</span>
|
||
<div class="flex items-center gap-3">
|
||
<span v-if="icpNo">{{ icpNo }}</span>
|
||
<span v-if="siteInfo?.policeNo">{{ siteInfo.policeNo }}</span>
|
||
<a
|
||
rel="nofollow"
|
||
href="https://site.websoft.top"
|
||
target="_blank"
|
||
class="hover:text-[#d4af37] transition-colors"
|
||
>Powered by 云·企业官网</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
/**
|
||
* 模板 4 - Footer 组件（深色高端风）
|
||
* 使用 config 与 useSite 的 bottomNavigations（top!==1 的页脚链接）渲染
|
||
*/
|
||
import type { CmsNavigation } from '~/types'
|
||
|
||
const { siteInfo, siteName, siteLogo, siteFooterLogo, siteIcon, siteConfig, bottomNavigations, phone, email, address, copyright, wxQrcode, icpNo, slogan, officialWebsite, officialWebsiteUrl, socialLinks } = useSite()
|
||
|
||
/** 快速链接：取顶级导航中非首页且无子菜单的项 */
|
||
const quickLinks = computed<CmsNavigation[]>(() => {
|
||
const navs = bottomNavigations.value || []
|
||
return navs.filter((nav) => nav.model !== 'index').slice(0, 6)
|
||
})
|
||
</script>
|