206 lines
10 KiB
Vue
206 lines
10 KiB
Vue
|
<template>
|
||
|
|
<div class="max-w-7xl mx-auto px-4 py-12">
|
||
|
|
<!-- Hero Section -->
|
||
|
|
<div class="text-center mb-16">
|
||
|
|
<h1 class="text-4xl font-bold text-gray-900 mb-4">{{ $t('nav.pricing') }}</h1>
|
||
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
|
|
{{ $t('pricing.subtitle') }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Pricing Cards -->
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||
|
|
<!-- Starter Plan -->
|
||
|
|
<div class="bg-white rounded-lg shadow-md p-8 relative">
|
||
|
|
<div class="text-center">
|
||
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">{{ $t('pricing.starter.name') }}</h3>
|
||
|
|
<p class="text-gray-600 mb-6">{{ $t('pricing.starter.description') }}</p>
|
||
|
|
<div class="mb-6">
|
||
|
|
<span class="text-4xl font-bold text-gray-900">${{ $t('pricing.starter.price') }}</span>
|
||
|
|
<span class="text-gray-600">/{{ $t('pricing.starter.period') }}</span>
|
||
|
|
</div>
|
||
|
|
<ul class="space-y-3 text-left mb-8">
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.starter.features.0') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.starter.features.1') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.starter.features.2') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.starter.features.3') }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<NuxtLink
|
||
|
|
:to="localePath('/contact')"
|
||
|
|
class="w-full bg-gray-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-gray-700 transition-colors block text-center"
|
||
|
|
>
|
||
|
|
{{ $t('pricing.starter.cta') }}
|
||
|
|
</NuxtLink>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Professional Plan -->
|
||
|
|
<div class="bg-white rounded-lg shadow-lg p-8 relative border-2 border-blue-600">
|
||
|
|
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
||
|
|
<span class="bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-semibold">
|
||
|
|
{{ $t('pricing.professional.popular') }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-center">
|
||
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">{{ $t('pricing.professional.name') }}</h3>
|
||
|
|
<p class="text-gray-600 mb-6">{{ $t('pricing.professional.description') }}</p>
|
||
|
|
<div class="mb-6">
|
||
|
|
<span class="text-4xl font-bold text-gray-900">${{ $t('pricing.professional.price') }}</span>
|
||
|
|
<span class="text-gray-600">/{{ $t('pricing.professional.period') }}</span>
|
||
|
|
</div>
|
||
|
|
<ul class="space-y-3 text-left mb-8">
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.professional.features.0') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.professional.features.1') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.professional.features.2') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.professional.features.3') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.professional.features.4') }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<NuxtLink
|
||
|
|
:to="localePath('/contact')"
|
||
|
|
class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-blue-700 transition-colors block text-center"
|
||
|
|
>
|
||
|
|
{{ $t('pricing.professional.cta') }}
|
||
|
|
</NuxtLink>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Enterprise Plan -->
|
||
|
|
<div class="bg-white rounded-lg shadow-md p-8 relative">
|
||
|
|
<div class="text-center">
|
||
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-2">{{ $t('pricing.enterprise.name') }}</h3>
|
||
|
|
<p class="text-gray-600 mb-6">{{ $t('pricing.enterprise.description') }}</p>
|
||
|
|
<div class="mb-6">
|
||
|
|
<span class="text-4xl font-bold text-gray-900">{{ $t('pricing.enterprise.price') }}</span>
|
||
|
|
</div>
|
||
|
|
<ul class="space-y-3 text-left mb-8">
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.enterprise.features.0') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.enterprise.features.1') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.enterprise.features.2') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.enterprise.features.3') }}
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center">
|
||
|
|
<svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||
|
|
</svg>
|
||
|
|
{{ $t('pricing.enterprise.features.4') }}
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<NuxtLink
|
||
|
|
:to="localePath('/contact')"
|
||
|
|
class="w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-semibold hover:bg-purple-700 transition-colors block text-center"
|
||
|
|
>
|
||
|
|
{{ $t('pricing.enterprise.cta') }}
|
||
|
|
</NuxtLink>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- FAQ Section -->
|
||
|
|
<div class="bg-gray-50 rounded-lg p-8">
|
||
|
|
<h2 class="text-3xl font-bold text-center mb-8">{{ $t('pricing.faq.title') }}</h2>
|
||
|
|
<div class="max-w-3xl mx-auto space-y-6">
|
||
|
|
<div v-for="(faq, index) in faqs" :key="index" class="bg-white rounded-lg p-6">
|
||
|
|
<h3 class="text-lg font-semibold mb-2">{{ faq.question }}</h3>
|
||
|
|
<p class="text-gray-600">{{ faq.answer }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const { t } = useI18n()
|
||
|
|
const localePath = useLocalePath()
|
||
|
|
|
||
|
|
const faqs = computed(() => [
|
||
|
|
{
|
||
|
|
question: t('pricing.faq.items.0.question'),
|
||
|
|
answer: t('pricing.faq.items.0.answer')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
question: t('pricing.faq.items.1.question'),
|
||
|
|
answer: t('pricing.faq.items.1.answer')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
question: t('pricing.faq.items.2.question'),
|
||
|
|
answer: t('pricing.faq.items.2.answer')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
question: t('pricing.faq.items.3.question'),
|
||
|
|
answer: t('pricing.faq.items.3.answer')
|
||
|
|
}
|
||
|
|
])
|
||
|
|
|
||
|
|
// SEO设置
|
||
|
|
useSeoMeta({
|
||
|
|
title: () => t('pricing.seo.title'),
|
||
|
|
description: () => t('pricing.seo.description'),
|
||
|
|
ogTitle: () => t('pricing.seo.title'),
|
||
|
|
ogDescription: () => t('pricing.seo.description')
|
||
|
|
})
|
||
|
|
</script>
|