196 lines
11 KiB
Vue
196 lines
11 KiB
Vue
<template>
|
||
<a-layout-footer class="footer">
|
||
<div class="mx-auto max-w-screen-xl px-4 py-12">
|
||
<!-- 主要内容区域 -->
|
||
<a-row :gutter="[32, 40]">
|
||
<!-- 品牌介绍 -->
|
||
<a-col :xs="24" :md="6">
|
||
<div class="flex items-center gap-2 mb-4">
|
||
<span class="text-2xl">🦞</span>
|
||
<span class="text-lg font-semibold text-white">AI-Native</span>
|
||
</div>
|
||
<p class="text-sm text-gray-400 leading-6 mb-4">
|
||
深度集成 OpenClaw 开源 AI Agent 框架，为企业提供智能客服、知识库问答、自动化工作流等能力。
|
||
</p>
|
||
<div class="flex gap-3">
|
||
<a-tooltip title="GitHub">
|
||
<a href="https://github.com/openclaw" target="_blank" class="text-gray-400 hover:text-white transition-colors">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /></svg>
|
||
</a>
|
||
</a-tooltip>
|
||
<a-tooltip title="微信公众号">
|
||
<span class="text-gray-400 hover:text-white cursor-pointer transition-colors">
|
||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .186-.059l2.114-1.225a.866.866 0 0 1 .58-.091 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 3.952 6.884 3.952.526 0 1.045-.048 1.555-.133-.207-.533-.454-1.05-.768-1.532l-.15.086c-.655.373-1.546.597-2.477.597-.769 0-1.491-.183-2.143-.507a4.226 4.226 0 0 1-1.762-1.399c-.052-.059-.104-.117-.154-.175l-.001.001a4.312 4.312 0 0 1 2.824-1.127c1.513 0 2.75.707 3.534 1.606.505.759.882 1.613 1.105 2.523 1.418-1.215 2.391-2.727 2.797-4.415.458-1.193.412-2.285-.097-3.177-.538-.942-1.391-1.64-2.397-2.086zm-6.115 5.115a.683.683 0 0 0-.683.683.683.683 0 0 0 .683.683.683.683 0 0 0 .683-.683.683.683 0 0 0-.683-.683zm4.524 0a.683.683 0 0 0-.683.683.683.683 0 0 0 .683.683.683.683 0 0 0 .683-.683.683.683 0 0 0-.683-.683z" /></svg>
|
||
</span>
|
||
</a-tooltip>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 产品服务 -->
|
||
<a-col :xs="12" :sm="6" :md="4">
|
||
<div class="text-base font-semibold text-white mb-4">产品服务</div>
|
||
<div class="grid gap-3 text-sm text-gray-400">
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/ai-agent">AI 智能体</NuxtLink>
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/website">云官网</NuxtLink>
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/miniapp">小程序开发</NuxtLink>
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/shop">小程序商城</NuxtLink>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 平台能力 -->
|
||
<a-col :xs="12" :sm="6" :md="4">
|
||
<div class="text-base font-semibold text-white mb-4">平台能力</div>
|
||
<div class="grid gap-3 text-sm text-gray-400">
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/platform">多租户架构</NuxtLink>
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/platform">私有化部署</NuxtLink>
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/market">模板市场</NuxtLink>
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/market">插件市场</NuxtLink>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 快速入口 -->
|
||
<a-col :xs="12" :sm="6" :md="4">
|
||
<div class="text-base font-semibold text-white mb-4">快速入口</div>
|
||
<div class="grid gap-3 text-sm text-gray-400">
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/flow">开通流程</NuxtLink>
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/deploy">部署方案</NuxtLink>
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/contact">联系我们</NuxtLink>
|
||
<NuxtLink class="text-gray-400 hover:text-orange-400 transition-colors" to="/login">立即登录</NuxtLink>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 联系我们 -->
|
||
<a-col :xs="12" :sm="6" :md="6">
|
||
<div class="text-base font-semibold text-white mb-4">联系我们</div>
|
||
<div class="grid gap-3 text-sm text-gray-400">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-gray-500">📱</span>
|
||
<span>0771-5386339</span>
|
||
</div>
|
||
<div class="flex items-start gap-2">
|
||
<span class="text-gray-500">📍</span>
|
||
<span>广西·南宁·良庆区 五象大道401号五象航洋城1226</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 扫码下载 / 关注 -->
|
||
<div class="mt-5">
|
||
<div class="text-xs text-gray-500 mb-3">扫码下载 / 关注</div>
|
||
<div class="flex flex-wrap gap-4">
|
||
<!-- 微信小程序 -->
|
||
<a-tooltip color="#1f2937" placement="top">
|
||
<template #title>
|
||
<div class="flex flex-col items-center gap-1 p-1">
|
||
<img src="/images/qrcode-miniapp.jpg" alt="微信小程序" class="w-28 h-28 rounded" />
|
||
<span class="text-xs text-gray-300">微信小程序</span>
|
||
</div>
|
||
</template>
|
||
<div class="flex flex-col items-center gap-1 cursor-pointer group">
|
||
<div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-green-400/60 transition-colors">
|
||
<img src="/images/qrcode-miniapp.jpg" alt="微信小程序" class="w-full h-full object-cover" />
|
||
</div>
|
||
<span class="text-xs text-gray-500 group-hover:text-green-400 transition-colors">小程序</span>
|
||
</div>
|
||
</a-tooltip>
|
||
|
||
<!-- 微信公众号 -->
|
||
<a-tooltip color="#1f2937" placement="top">
|
||
<template #title>
|
||
<div class="flex flex-col items-center gap-1 p-1">
|
||
<img src="/images/qrcode-mp-official.jpg" alt="微信公众号" class="w-28 h-28 rounded" />
|
||
<span class="text-xs text-gray-300">微信公众号</span>
|
||
</div>
|
||
</template>
|
||
<div class="flex flex-col items-center gap-1 cursor-pointer group">
|
||
<div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-green-400/60 transition-colors">
|
||
<img src="/images/qrcode-mp-official.jpg" alt="微信公众号" class="w-full h-full object-cover" />
|
||
</div>
|
||
<span class="text-xs text-gray-500 group-hover:text-green-400 transition-colors">公众号</span>
|
||
</div>
|
||
</a-tooltip>
|
||
|
||
<!-- APP 下载（Android & iOS 通用） -->
|
||
<a-tooltip color="#1f2937" placement="top">
|
||
<template #title>
|
||
<div class="flex flex-col items-center gap-1 p-1">
|
||
<img src="/images/qrcode-app.jpg" alt="下载 APP" class="w-28 h-28 rounded" />
|
||
<span class="text-xs text-gray-300">扫码下载 APP</span>
|
||
<span class="text-xs text-gray-500">Android & iOS</span>
|
||
</div>
|
||
</template>
|
||
<div class="flex flex-col items-center gap-1 cursor-pointer group">
|
||
<div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 group-hover:border-blue-400/60 transition-colors">
|
||
<img src="/images/qrcode-app.jpg" alt="下载 APP" class="w-full h-full object-cover" />
|
||
</div>
|
||
<span class="text-xs text-gray-500 group-hover:text-blue-400 transition-colors">下载 APP</span>
|
||
</div>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<!-- 底部版权区域 -->
|
||
<div class="mt-10 pt-6 border-t border-white/10">
|
||
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between text-xs text-gray-500">
|
||
<div class="flex items-center gap-2 flex-wrap">
|
||
<img src="/logo.png" alt="websopy" style="height:12px;width:auto;opacity:0.4;" />
|
||
<span>© {{ year }} Websopy. All rights reserved.</span>
|
||
<a
|
||
href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener"
|
||
class="text-gray-500 hover:text-orange-400 transition-colors"
|
||
>{{ icpText }}</a>
|
||
</div>
|
||
<div class="flex items-center gap-2 opacity-80 hover:opacity-90 text-gray-100 text-xs">
|
||
<!-- 切换语言 -->
|
||
<!-- <LangSwitch />-->
|
||
<span class="text-gray-500">Powered by</span>
|
||
<a
|
||
rel="nofollow"
|
||
href="https://site.websoft.top"
|
||
target="_blank"
|
||
>
|
||
<span class="text-gray-500 hover:text-gray-200">云·企业官网</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-layout-footer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { getAppProductFieldByCode } from '@/api/cms/cmsWebsiteField'
|
||
|
||
const siteName = '桂乐淘'
|
||
|
||
const { data: icpField } = useAsyncData('cmsWebsite-field-icpNo', async () => {
|
||
try {
|
||
return await getAppProductFieldByCode('icpNo')
|
||
} catch {
|
||
return null
|
||
}
|
||
})
|
||
|
||
const icpNo = computed(() => {
|
||
const v = icpField.value?.value ?? icpField.value?.defaultValue
|
||
if (typeof v === 'string' && v.trim()) return v.trim()
|
||
return ''
|
||
})
|
||
|
||
const icpText = computed(() => (icpNo.value ? `备案号：${icpNo.value}` : '备案号：桂ICP备13003666号-12'))
|
||
const year = new Date().getFullYear()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.footer {
|
||
background: #111827;
|
||
padding: 0;
|
||
}
|
||
/* 覆盖浏览器默认蓝色链接色 */
|
||
.footer :deep(a) {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
</style>
|