327 lines
13 KiB
Vue
327 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<section class="relative overflow-hidden bg-gradient-to-b from-gray-950 to-gray-900 text-white">
|
|
<div class="pointer-events-none absolute left-1/2 top-[-140px] h-[420px] w-[900px] -translate-x-1/2 rounded-full bg-green-500/20 blur-3xl" />
|
|
<div class="mx-auto max-w-screen-xl px-4 py-16 sm:py-24 relative">
|
|
<a-tag color="orange" class="mb-6">
|
|
<span class="flex items-center gap-1">
|
|
<span class="text-lg">🦞</span>
|
|
{{ $t('home.heroTag') }}
|
|
</span>
|
|
</a-tag>
|
|
|
|
<a-typography-title :level="1" class="!text-white !mb-4">
|
|
{{ $t('home.heroTitle') }}
|
|
</a-typography-title>
|
|
<a-typography-paragraph class="!text-gray-300 !text-lg !mb-8">
|
|
{{ $t('home.heroDesc') }}
|
|
</a-typography-paragraph>
|
|
|
|
<a-space size="middle" wrap>
|
|
<a-button type="primary" size="large" @click="navigateTo('/contact')">{{ $t('home.bookDemo') }}</a-button>
|
|
<a-button size="large" @click="navigateTo('/flow')">{{ $t('home.viewFlow') }}</a-button>
|
|
<a-button size="large" @click="navigateTo('/deploy')">{{ $t('home.deploy') }}</a-button>
|
|
</a-space>
|
|
|
|
<a-row class="mt-10" :gutter="[16, 16]">
|
|
<a-col :xs="12" :md="6">
|
|
<!-- <a-statistic title="平台定位" value="SaaS" />-->
|
|
</a-col>
|
|
<a-col :xs="12" :md="6">
|
|
<!-- <a-statistic title="交付模式" value="私有化" />-->
|
|
</a-col>
|
|
<a-col :xs="12" :md="6">
|
|
<!-- <a-statistic title="能力" value="模板/插件" />-->
|
|
</a-col>
|
|
<a-col :xs="12" :md="6">
|
|
<!-- <a-statistic title="开通" value="自动化" />-->
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 平台介绍视频 -->
|
|
<div class="mt-12 rounded-2xl overflow-hidden shadow-2xl border border-gray-700/50 bg-gray-900/50">
|
|
<ClientOnly>
|
|
<video
|
|
class="w-full aspect-video"
|
|
:src="videoSrc"
|
|
poster="/images/video-poster.jpg"
|
|
controls
|
|
preload="metadata"
|
|
playsinline
|
|
@error="handleVideoError"
|
|
>
|
|
<p class="text-white text-center py-8">{{ $t('home.videoNotSupported') }}</p>
|
|
</video>
|
|
<template #fallback>
|
|
<div class="w-full aspect-video bg-gray-800 flex items-center justify-center">
|
|
<span class="text-gray-400">{{ $t('common.loading') }}</span>
|
|
</div>
|
|
</template>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- OpenClaw AI 智能体生态 -->
|
|
<section class="relative overflow-hidden bg-gradient-to-r from-orange-50 via-orange-100/50 to-orange-50">
|
|
<div class="pointer-events-none absolute left-1/4 top-0 h-[300px] w-[300px] rounded-full bg-orange-200/50 blur-3xl" />
|
|
<div class="pointer-events-none absolute right-1/4 bottom-0 h-[200px] w-[250px] rounded-full bg-red-200/50 blur-3xl" />
|
|
<div class="mx-auto max-w-screen-xl px-4 py-16 relative">
|
|
<div class="text-center mb-10">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 bg-orange-500 rounded-full text-white text-sm font-medium mb-4">
|
|
<span class="text-xl">🦞</span>
|
|
{{ $t('home.openclawTitle') }}
|
|
</div>
|
|
<a-typography-title :level="2" class="!text-gray-900 !mb-2">
|
|
{{ $t('home.openclawSubtitle') }}
|
|
</a-typography-title>
|
|
<a-typography-paragraph class="!text-gray-600 !mb-0 !text-base">
|
|
{{ $t('home.openclawDesc') }}
|
|
</a-typography-paragraph>
|
|
</div>
|
|
|
|
<a-row :gutter="[24, 24]" class="px-4">
|
|
<a-col :xs="24" :md="8">
|
|
<div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
|
|
<div class="text-4xl mb-4">🔗</div>
|
|
<div class="text-gray-900 font-semibold mb-2">{{ $t('home.multiPlatform') }}</div>
|
|
<div class="text-gray-600 text-sm">{{ $t('home.multiPlatformDesc') }}</div>
|
|
</div>
|
|
</a-col>
|
|
<a-col :xs="24" :md="8">
|
|
<div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
|
|
<div class="text-4xl mb-4">🧠</div>
|
|
<div class="text-gray-900 font-semibold mb-2">{{ $t('home.multiModel') }}</div>
|
|
<div class="text-gray-600 text-sm">{{ $t('home.multiModelDesc') }}</div>
|
|
</div>
|
|
</a-col>
|
|
<a-col :xs="24" :md="8">
|
|
<div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
|
|
<div class="text-4xl mb-4">⚡</div>
|
|
<div class="text-gray-900 font-semibold mb-2">{{ $t('home.autoWorkflow') }}</div>
|
|
<div class="text-gray-600 text-sm">{{ $t('home.autoWorkflowDesc') }}</div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<div class="text-center mt-10">
|
|
<a-space size="middle">
|
|
<a-button type="primary" @click="navigateTo('/ai-agent')">
|
|
<span class="flex items-center gap-2">
|
|
<span>🦞</span> {{ $t('home.experienceAI') }}
|
|
</span>
|
|
</a-button>
|
|
<a-button @click="navigateTo('/openclaw')">{{ $t('common.learnMore') }}</a-button>
|
|
</a-space>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="mx-auto max-w-screen-xl px-4 py-14">
|
|
<a-typography-title :level="2" class="!mb-2">{{ $t('home.productMatrix') }}</a-typography-title>
|
|
<a-typography-paragraph class="!text-gray-500 !mb-8">
|
|
{{ $t('home.productMatrixDesc') }}
|
|
</a-typography-paragraph>
|
|
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col v-for="p in products" :key="p.title" :xs="24" :md="12" :lg="8">
|
|
<a-card :title="p.title">
|
|
<template #extra>
|
|
<a-tag v-if="p.recommend" color="green">{{ $t('home.recommend') }}</a-tag>
|
|
</template>
|
|
<a-typography-paragraph class="!text-gray-600">
|
|
{{ p.desc }}
|
|
</a-typography-paragraph>
|
|
<div class="flex flex-wrap gap-2">
|
|
<a-tag v-for="t in p.tags" :key="t">{{ t }}</a-tag>
|
|
</div>
|
|
<div class="mt-5 flex justify-between items-center">
|
|
<a-tag color="green">{{ p.domain }}</a-tag>
|
|
<a-button type="primary" @click="go(p.adminUrl)">{{ $t('common.goNow') }}</a-button>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<div class="mt-6">
|
|
<a-button @click="navigateTo('/products')">{{ $t('home.viewAll') || $t('common.viewAll') }}</a-button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-gray-50">
|
|
<div class="mx-auto max-w-screen-xl px-4 py-14">
|
|
<a-typography-title :level="2" class="!mb-2">{{ $t('home.coreCapabilities') }}</a-typography-title>
|
|
<a-typography-paragraph class="!text-gray-500 !mb-8">
|
|
{{ $t('home.coreCapabilitiesDesc') }}
|
|
</a-typography-paragraph>
|
|
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col v-for="item in capabilities" :key="item.title" :xs="24" :md="12" :lg="8">
|
|
<a-card :title="item.title">
|
|
<template #extra>
|
|
<a-tag color="green">{{ item.badge }}</a-tag>
|
|
</template>
|
|
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
|
{{ item.desc }}
|
|
</a-typography-paragraph>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="mx-auto max-w-screen-xl px-4 py-14">
|
|
<a-row :gutter="[24, 24]">
|
|
<a-col :xs="24" :lg="12">
|
|
<a-typography-title :level="2" class="!mb-2">{{ $t('home.payToActivate') }}</a-typography-title>
|
|
<a-typography-paragraph class="!text-gray-600 !mb-6">
|
|
{{ $t('home.payToActivateDesc') }}
|
|
</a-typography-paragraph>
|
|
<a-button type="primary" @click="navigateTo('/flow')">{{ $t('home.viewFullFlow') }}</a-button>
|
|
</a-col>
|
|
<a-col :xs="24" :lg="12">
|
|
<a-card>
|
|
<a-steps direction="vertical" :current="-1" size="small">
|
|
<a-step :title="$t('home.selectProduct')" :description="$t('home.selectProductDesc')" />
|
|
<a-step :title="$t('home.placeOrder')" :description="$t('home.placeOrderDesc')" />
|
|
<a-step :title="$t('home.createTenant')" :description="$t('home.createTenantDesc')" />
|
|
<a-step :title="$t('home.initModules')" :description="$t('home.initModulesDesc')" />
|
|
<a-step :title="$t('home.deliverOnline')" :description="$t('home.deliverOnlineDesc')" />
|
|
</a-steps>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-gray-50">
|
|
<div class="mx-auto max-w-screen-xl px-4 py-14">
|
|
<a-typography-title :level="2" class="!mb-2">{{ $t('home.templatePluginEcosystem') }}</a-typography-title>
|
|
<a-typography-paragraph class="!text-gray-500 !mb-8">
|
|
{{ $t('home.templatePluginDesc') }}
|
|
</a-typography-paragraph>
|
|
|
|
<a-tabs>
|
|
<a-tab-pane key="template" :tab="$t('home.template')">
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :xs="24" :md="12">
|
|
<a-card :title="$t('home.industryTemplate')">
|
|
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
|
{{ $t('home.industryTemplateDesc') }}
|
|
</a-typography-paragraph>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-card :title="$t('home.deliveryStandard')">
|
|
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
|
{{ $t('home.deliveryStandardDesc') }}
|
|
</a-typography-paragraph>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="plugin" :tab="$t('home.plugin')">
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :xs="24" :md="12">
|
|
<a-card :title="$t('home.capabilityExtend')">
|
|
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
|
{{ $t('home.capabilityExtendDesc') }}
|
|
</a-typography-paragraph>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-card :title="$t('home.upgradeAuth')">
|
|
<a-typography-paragraph class="!mb-0 !text-gray-600">
|
|
{{ $t('home.upgradeAuthDesc') }}
|
|
</a-typography-paragraph>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
|
|
<div class="mt-6">
|
|
<a-button @click="navigateTo('/market')">{{ $t('home.exploreMarket') }}</a-button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-white">
|
|
<div class="mx-auto max-w-screen-xl px-4 py-12 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<div class="text-xl font-semibold">{{ $t('home.ctaTitle') }}</div>
|
|
<div class="mt-1 text-gray-500">{{ $t('home.ctaDesc') }}</div>
|
|
</div>
|
|
<a-space>
|
|
<a-button size="large" @click="navigateTo('/products')">{{ $t('home.viewProducts') }}</a-button>
|
|
<a-button type="primary" size="large" @click="navigateTo('/contact')">{{ $t('home.contactNow') }}</a-button>
|
|
</a-space>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { usePageSeo } from '@/composables/usePageSeo'
|
|
import { productMatrix } from '@/config/products'
|
|
const { t } = useI18n()
|
|
|
|
// 视频路径（使用 public 目录，可直接通过 URL 访问）
|
|
const videoSrc = '/videos/websopy-intro.mp4'
|
|
|
|
usePageSeo({
|
|
title: t('pageTitle.homeTitle'),
|
|
description: t('pageTitle.homeDescription')
|
|
})
|
|
|
|
const go = (url?: string) => {
|
|
if (!url) return
|
|
if (/^https?:\/\//i.test(url)) {
|
|
if (import.meta.client) window.open(url, '_blank', 'noopener,noreferrer')
|
|
return
|
|
}
|
|
return navigateTo(url)
|
|
}
|
|
|
|
// 视频加载错误处理
|
|
const handleVideoError = (e: Event) => {
|
|
console.error('视频加载失败:', e)
|
|
}
|
|
|
|
const products = productMatrix
|
|
|
|
const capabilities = [
|
|
{
|
|
title: t('home.openclawAI'),
|
|
badge: 'NEW',
|
|
desc: t('home.openclawAIDesc')
|
|
},
|
|
{
|
|
title: t('home.ragKnowledge'),
|
|
badge: 'AI',
|
|
desc: t('home.ragKnowledgeDesc')
|
|
},
|
|
{
|
|
title: t('home.saasMultiTenant'),
|
|
badge: '核心',
|
|
desc: t('home.saasMultiTenantDesc')
|
|
},
|
|
{
|
|
title: t('home.privateDeploy'),
|
|
badge: '可选',
|
|
desc: t('home.privateDeployDesc')
|
|
},
|
|
{
|
|
title: t('home.templateMarket'),
|
|
badge: '生态',
|
|
desc: t('home.templateMarketDesc')
|
|
},
|
|
{
|
|
title: t('home.autoActivate'),
|
|
badge: '交付',
|
|
desc: t('home.autoActivateDesc')
|
|
}
|
|
]
|
|
</script>
|