64 lines
2.7 KiB
Vue
64 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
|
||
|
|
<div class="max-w-2xl w-full space-y-8 text-center">
|
||
|
|
<div>
|
||
|
|
<h1 class="text-9xl font-bold text-gray-300 mb-4">404</h1>
|
||
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">{{ $t('errors.404.title') }}</h2>
|
||
|
|
<p class="text-xl text-gray-600 mb-8">{{ $t('errors.404.message') }}</p>
|
||
|
|
|
||
|
|
<!-- 导航链接 -->
|
||
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-8">
|
||
|
|
<NuxtLink
|
||
|
|
:to="localePath('/')"
|
||
|
|
class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors"
|
||
|
|
>
|
||
|
|
{{ $t('errors.404.backHome') }}
|
||
|
|
</NuxtLink>
|
||
|
|
<NuxtLink
|
||
|
|
:to="localePath('/solutions')"
|
||
|
|
class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors"
|
||
|
|
>
|
||
|
|
{{ $t('nav.solutions') }}
|
||
|
|
</NuxtLink>
|
||
|
|
<NuxtLink
|
||
|
|
:to="localePath('/contact')"
|
||
|
|
class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 transition-colors"
|
||
|
|
>
|
||
|
|
{{ $t('nav.contact') }}
|
||
|
|
</NuxtLink>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 搜索建议 -->
|
||
|
|
<div class="bg-white rounded-lg p-6 shadow-sm">
|
||
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">{{ $t('errors.404.searchSuggestions') }}</h3>
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-left">
|
||
|
|
<NuxtLink :to="localePath('/solutions')" class="text-blue-600 hover:text-blue-800">
|
||
|
|
→ {{ $t('errors.404.suggestions.0') }}
|
||
|
|
</NuxtLink>
|
||
|
|
<NuxtLink :to="localePath('/pricing')" class="text-blue-600 hover:text-blue-800">
|
||
|
|
→ {{ $t('errors.404.suggestions.1') }}
|
||
|
|
</NuxtLink>
|
||
|
|
<NuxtLink :to="localePath('/blog')" class="text-blue-600 hover:text-blue-800">
|
||
|
|
→ {{ $t('errors.404.suggestions.2') }}
|
||
|
|
</NuxtLink>
|
||
|
|
<NuxtLink :to="localePath('/contact')" class="text-blue-600 hover:text-blue-800">
|
||
|
|
→ {{ $t('errors.404.suggestions.3') }}
|
||
|
|
</NuxtLink>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const { t } = useI18n()
|
||
|
|
const localePath = useLocalePath()
|
||
|
|
|
||
|
|
// 设置404页面的SEO
|
||
|
|
useSeoMeta({
|
||
|
|
title: () => t('errors.404.title'),
|
||
|
|
description: () => t('errors.404.message'),
|
||
|
|
robots: 'noindex, nofollow'
|
||
|
|
})
|
||
|
|
</script>
|