gxwebsoft
2b69686795
- 新增404页面，优化未找到页面体验，避免被搜索引擎索引 - 增加文件代理接口，隐藏真实文件服务器地址，支持文件请求代理 - 实现/article、/case、/product及/page动态路由兼容列表与详情展示 - 添加动态CMS页面兼容入口处理旧式路径，统一路由与SEO设置 - 新增模板1、模板7、模板2、模板3关于我们页面，实现多模板支持 - 模板增强支持CMS单页内容加载及SEO信息动态设置 - 配置环境变量及Git忽略文件规则辅助开发和构建环境管理
91 lines
3.9 KiB
Vue
91 lines
3.9 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="siteLogo"
|
||
: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, 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>
|