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)
83 lines
4.5 KiB
Vue
83 lines
4.5 KiB
Vue
<template>
|
||
<footer class="bg-[#1B2233] text-[#C7CEDB]">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
|
||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
|
||
<!-- 公司信息 -->
|
||
<div class="sm:col-span-2 lg:col-span-1">
|
||
<SiteBrand
|
||
link-class="mb-4"
|
||
:logo="siteFooterLogo"
|
||
:icon="siteIcon"
|
||
:name="siteName"
|
||
logo-class="h-9 w-auto max-w-[200px] object-contain"
|
||
icon-class="h-6 w-auto object-contain"
|
||
name-class="text-lg font-bold text-white"
|
||
>
|
||
<template #fallback-icon>
|
||
<div class="w-9 h-9 rounded-lg bg-[#CF1313] flex items-center justify-center">
|
||
<svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L3 7v10l9 5 9-5V7l-9-5zm0 2.3L18.5 8 12 11.7 5.5 8 12 4.3zM5 9.6l6 3.3v6.8l-6-3.3V9.6zm14 0v6.8l-6 3.3V12.9l6-3.3z" /></svg>
|
||
</div>
|
||
</template>
|
||
</SiteBrand>
|
||
<p v-if="slogan" class="text-sm text-[#9AA3B5] mb-3">{{ slogan }}</p>
|
||
<p class="text-sm text-[#9AA3B5] leading-relaxed">{{ siteInfo?.comments || siteInfo?.content || '以技术驱动企业数字化升级，为客户提供专业、可靠的软件产品与解决方案。' }}</p>
|
||
</div>
|
||
|
||
<!-- 快捷链接 -->
|
||
<div>
|
||
<h4 class="text-white font-semibold mb-4">快捷导航</h4>
|
||
<ul class="space-y-2">
|
||
<li v-for="item in quickLinks" :key="item.navigationId">
|
||
<NuxtLink :to="getNavLink(item)" :target="item.target === '_blank' ? '_blank' : undefined" class="text-sm text-[#9AA3B5] hover:text-[#FF6B6B] transition-colors">{{ item.title }}</NuxtLink>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 联系方式 -->
|
||
<div>
|
||
<h4 class="text-white font-semibold mb-4">联系我们</h4>
|
||
<ul class="space-y-2 text-sm text-[#9AA3B5]">
|
||
<li v-if="phone"><span class="text-[#6B7488]">电话：</span>{{ phone }}</li>
|
||
<li v-if="email"><span class="text-[#6B7488]">邮箱：</span>{{ email }}</li>
|
||
<li v-if="address" class="leading-relaxed"><span class="text-[#6B7488]">地址：</span>{{ address }}</li>
|
||
<li v-if="officialWebsite"><span class="text-[#6B7488]">官网：</span><a :href="officialWebsiteUrl" target="_blank" rel="nofollow" class="hover:text-[#FF6B6B] transition-colors">{{ officialWebsite }}</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 关注我们 -->
|
||
<div v-if="wxQrcode || socialLinks.length">
|
||
<h4 class="text-white font-semibold mb-4">关注我们</h4>
|
||
<div v-if="wxQrcode" class="bg-white rounded-xl p-3 inline-block">
|
||
<img :src="wxQrcode" alt="微信二维码" class="w-32 h-32 object-contain">
|
||
</div>
|
||
<p v-if="wxQrcode" class="text-xs text-[#6B7488] mt-2">{{ siteConfig?.wxQrcodeText || '扫码关注' }}</p>
|
||
<div v-if="socialLinks.length" class="mt-3 flex flex-col gap-1">
|
||
<a v-for="link in socialLinks" :key="link.url" :href="link.url" target="_blank" rel="nofollow" class="text-sm text-[#9AA3B5] hover:text-[#FF6B6B] transition-colors">{{ link.name || link.type }}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-[#2C3548] mt-12 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||
<p class="text-sm text-[#6B7488]">{{ copyright || `© ${new Date().getFullYear()} ${siteName || '企业官网'} 版权所有` }}</p>
|
||
<div class="flex items-center gap-4">
|
||
<p v-if="icpNo" class="text-sm text-[#6B7488]">{{ icpNo }}</p>
|
||
<p v-if="siteInfo?.policeNo" class="text-sm text-[#6B7488]">{{ siteInfo.policeNo }}</p>
|
||
<div class="flex items-center gap-2 text-xs">
|
||
<span class="text-[#6B7488]">Powered by</span>
|
||
<a rel="nofollow" href="https://site.websoft.top" target="_blank" class="text-[#6B7488] hover:text-[#FF6B6B] transition-colors">云·企业官网</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { CmsNavigation } from '~/types'
|
||
const { siteInfo, siteName, siteLogo, siteFooterLogo, siteIcon, siteConfig, bottomNavigations, phone, email, address, icpNo, copyright, wxQrcode, slogan, officialWebsite, officialWebsiteUrl, socialLinks } = useSite()
|
||
const quickLinks = computed<CmsNavigation[]>(() => {
|
||
const navs = bottomNavigations.value || []
|
||
return navs.filter((nav) => nav.model !== 'index').slice(0, 6)
|
||
})
|
||
</script>
|