314 lines
13 KiB
Vue
314 lines
13 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 页面标题 -->
|
|
<HeroBanner
|
|
:title="$t('solutions.hero.title')"
|
|
:subtitle="$t('solutions.hero.subtitle')"
|
|
/>
|
|
|
|
<!-- 解决方案分类 -->
|
|
<section class="py-20">
|
|
<div class="container">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-[#333333] mb-4">{{ $t('solutions.categories.title') }}</h2>
|
|
<p class="text-xl text-gray-600 leading-relaxed">{{ $t('solutions.categories.subtitle') }}</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div v-for="(category, index) in solutionCategories" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 text-center">
|
|
<div class="w-20 h-20 bg-gradient-to-br from-secondary/20 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<i :class="['text-secondary text-3xl', category.icon]"></i>
|
|
</div>
|
|
<h3 class="text-xl font-semibold mb-4">{{ $t(category.titleKey) }}</h3>
|
|
<p class="text-gray-600 leading-relaxed mb-6">{{ $t(category.descriptionKey) }}</p>
|
|
<a :href="'#' + category.id" class="inline-flex items-center text-secondary hover:text-secondary/90">
|
|
{{ $t('solutions.categories.viewDetails') }}
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 解决方案详情 -->
|
|
<div class="space-y-16">
|
|
<section v-for="(solution, index) in solutions" :key="index" :id="solution.id" class="py-20" :class="index % 2 === 0 ? 'bg-gray-50' : 'bg-white'">
|
|
<div class="container">
|
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
<div :class="index % 2 === 1 ? 'md:order-1' : ''">
|
|
<div class="bg-gradient-to-br from-secondary/20 to-secondary/10 h-80 rounded-lg flex items-center justify-center">
|
|
<i :class="['text-8xl text-secondary', solution.icon]"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-4xl font-bold text-[#333333] mb-6">{{ $t(solution.titleKey) }}</h2>
|
|
<p class="text-gray-600 leading-relaxed mb-6">{{ $t(solution.descriptionKey) }}</p>
|
|
<div class="mb-8">
|
|
<h4 class="text-lg font-semibold mb-4">{{ $t('solutions.solutionDetails.advantages') }}</h4>
|
|
<ul class="space-y-3">
|
|
<li v-for="(benefit, idx) in solution.benefits" :key="idx" class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
|
|
<span class="text-gray-600">{{ $t(benefit) }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mb-8">
|
|
<h4 class="text-lg font-semibold mb-4">{{ $t('solutions.solutionDetails.industries') }}</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span v-for="(industry, idx) in solution.industries" :key="idx" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm">
|
|
{{ $t(industry) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<a href="#contact" class="btn-primary">{{ $t('solutions.solutionDetails.inquiry') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- 实施流程 -->
|
|
<section class="py-20 bg-gray-50">
|
|
<div class="container">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-[#333333] mb-4">{{ $t('solutions.implementation.title') }}</h2>
|
|
<p class="text-xl text-gray-600 leading-relaxed">{{ $t('solutions.implementation.subtitle') }}</p>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<!-- 流程连接线 -->
|
|
<div class="absolute left-1/2 top-8 bottom-8 w-1 bg-secondary/20 -translate-x-1/2 hidden md:block"></div>
|
|
|
|
<div class="space-y-12">
|
|
<div v-for="(step, index) in implementationSteps" :key="index" class="flex flex-col md:flex-row md:items-center relative">
|
|
<!-- 步骤编号 -->
|
|
<div class="md:absolute md:left-1/2 md:-translate-x-1/2 z-10 w-12 h-12 bg-white rounded-full border-4 border-secondary flex items-center justify-center font-bold text-secondary mb-4 md:mb-0 mx-auto md:mx-0">
|
|
{{ index + 1 }}
|
|
</div>
|
|
|
|
<!-- 步骤内容 -->
|
|
<div :class="[
|
|
'bg-white p-6 rounded-lg shadow-md w-full md:w-5/12',
|
|
index % 2 === 0 ? 'md:mr-auto' : 'md:ml-auto'
|
|
]">
|
|
<h3 class="text-xl font-semibold mb-2">{{ $t(step.titleKey) }}</h3>
|
|
<p class="text-gray-600">{{ $t(step.descriptionKey) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 客户案例展示 -->
|
|
<section class="py-20">
|
|
<div class="container">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2 class="text-4xl font-bold text-[#333333] mb-4">{{ $t('solutions.cases.title') }}</h2>
|
|
<p class="text-xl text-gray-600 leading-relaxed">{{ $t('solutions.cases.subtitle') }}</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div v-for="(case_item, index) in caseStudies" :key="index" class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
|
<div class="h-48 bg-gray-200"></div>
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-xl font-semibold">{{ $t(case_item.titleKey) }}</h3>
|
|
<span class="px-3 py-1 bg-secondary/10 text-secondary text-sm rounded-full">{{ $t(case_item.industryKey) }}</span>
|
|
</div>
|
|
<p class="text-gray-600 mb-6">{{ $t(case_item.descriptionKey) }}</p>
|
|
<NuxtLink to="/cases" class="inline-flex items-center text-secondary hover:text-secondary/90">
|
|
{{ $t('solutions.cases.viewDetails') }}
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 联系我们 -->
|
|
<section id="contact" class="py-16 bg-primary text-white">
|
|
<div class="container text-center">
|
|
<h2 class="text-4xl font-bold mb-6">{{ $t('solutions.contact.title') }}</h2>
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">{{ $t('solutions.contact.subtitle') }}</p>
|
|
<NuxtLink to="/contact" class="inline-flex items-center bg-white text-black px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors duration-300 text-lg font-semibold">
|
|
{{ $t('solutions.contact.button') }}
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|
</NuxtLink>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
// 解决方案分类
|
|
const solutionCategories = [
|
|
{
|
|
id: 'web-hosting',
|
|
icon: 'fas fa-globe',
|
|
titleKey: 'solutions.solutionItems.webHosting.title',
|
|
descriptionKey: 'solutions.solutionItems.webHosting.description'
|
|
},
|
|
{
|
|
id: 'cloud-migration',
|
|
icon: 'fas fa-cloud-upload-alt',
|
|
titleKey: 'solutions.solutionItems.cloudMigration.title',
|
|
descriptionKey: 'solutions.solutionItems.cloudMigration.description'
|
|
},
|
|
{
|
|
id: 'disaster-recovery',
|
|
icon: 'fas fa-shield-alt',
|
|
titleKey: 'solutions.solutionItems.disasterRecovery.title',
|
|
descriptionKey: 'solutions.solutionItems.disasterRecovery.description'
|
|
},
|
|
{
|
|
id: 'big-data',
|
|
icon: 'fas fa-chart-pie',
|
|
titleKey: 'solutions.solutionItems.bigData.title',
|
|
descriptionKey: 'solutions.solutionItems.bigData.description'
|
|
},
|
|
{
|
|
id: 'microservices',
|
|
icon: 'fas fa-cubes',
|
|
titleKey: 'solutions.solutionItems.microservices.title',
|
|
descriptionKey: 'solutions.solutionItems.microservices.description'
|
|
},
|
|
{
|
|
id: 'ai-ml',
|
|
icon: 'fas fa-brain',
|
|
titleKey: 'solutions.solutionItems.aiMl.title',
|
|
descriptionKey: 'solutions.solutionItems.aiMl.description'
|
|
}
|
|
];
|
|
|
|
// 解决方案详情
|
|
const solutions = [
|
|
{
|
|
id: 'web-hosting',
|
|
icon: 'fas fa-globe',
|
|
titleKey: 'solutions.solutionDetails.webHosting.title',
|
|
descriptionKey: 'solutions.solutionDetails.webHosting.description',
|
|
benefits: [
|
|
'solutions.solutionDetails.webHosting.benefits[0]',
|
|
'solutions.solutionDetails.webHosting.benefits[1]',
|
|
'solutions.solutionDetails.webHosting.benefits[2]',
|
|
'solutions.solutionDetails.webHosting.benefits[3]',
|
|
'solutions.solutionDetails.webHosting.benefits[4]'
|
|
],
|
|
industries: [
|
|
'solutions.solutionDetails.webHosting.industries[0]',
|
|
'solutions.solutionDetails.webHosting.industries[1]',
|
|
'solutions.solutionDetails.webHosting.industries[2]',
|
|
'solutions.solutionDetails.webHosting.industries[3]'
|
|
]
|
|
},
|
|
{
|
|
id: 'cloud-migration',
|
|
icon: 'fas fa-cloud-upload-alt',
|
|
titleKey: 'solutions.solutionDetails.cloudMigration.title',
|
|
descriptionKey: 'solutions.solutionDetails.cloudMigration.description',
|
|
benefits: [
|
|
'solutions.solutionDetails.cloudMigration.benefits[0]',
|
|
'solutions.solutionDetails.cloudMigration.benefits[1]',
|
|
'solutions.solutionDetails.cloudMigration.benefits[2]',
|
|
'solutions.solutionDetails.cloudMigration.benefits[3]',
|
|
'solutions.solutionDetails.cloudMigration.benefits[4]'
|
|
],
|
|
industries: [
|
|
'solutions.solutionDetails.cloudMigration.industries[0]',
|
|
'solutions.solutionDetails.cloudMigration.industries[1]',
|
|
'solutions.solutionDetails.cloudMigration.industries[2]',
|
|
'solutions.solutionDetails.cloudMigration.industries[3]',
|
|
'solutions.solutionDetails.cloudMigration.industries[4]'
|
|
]
|
|
},
|
|
{
|
|
id: 'disaster-recovery',
|
|
icon: 'fas fa-shield-alt',
|
|
titleKey: 'solutions.solutionDetails.disasterRecovery.title',
|
|
descriptionKey: 'solutions.solutionDetails.disasterRecovery.description',
|
|
benefits: [
|
|
'solutions.solutionDetails.disasterRecovery.benefits[0]',
|
|
'solutions.solutionDetails.disasterRecovery.benefits[1]',
|
|
'solutions.solutionDetails.disasterRecovery.benefits[2]',
|
|
'solutions.solutionDetails.disasterRecovery.benefits[3]',
|
|
'solutions.solutionDetails.disasterRecovery.benefits[4]'
|
|
],
|
|
industries: [
|
|
'solutions.solutionDetails.disasterRecovery.industries[0]',
|
|
'solutions.solutionDetails.disasterRecovery.industries[1]',
|
|
'solutions.solutionDetails.disasterRecovery.industries[2]',
|
|
'solutions.solutionDetails.disasterRecovery.industries[3]',
|
|
'solutions.solutionDetails.disasterRecovery.industries[4]'
|
|
]
|
|
},
|
|
{
|
|
id: 'big-data',
|
|
icon: 'fas fa-chart-pie',
|
|
titleKey: 'solutions.solutionDetails.bigData.title',
|
|
descriptionKey: 'solutions.solutionDetails.bigData.description',
|
|
benefits: [
|
|
'solutions.solutionDetails.bigData.benefits[0]',
|
|
'solutions.solutionDetails.bigData.benefits[1]',
|
|
'solutions.solutionDetails.bigData.benefits[2]',
|
|
'solutions.solutionDetails.bigData.benefits[3]',
|
|
'solutions.solutionDetails.bigData.benefits[4]'
|
|
],
|
|
industries: [
|
|
'solutions.solutionDetails.bigData.industries[0]',
|
|
'solutions.solutionDetails.bigData.industries[1]',
|
|
'solutions.solutionDetails.bigData.industries[2]',
|
|
'solutions.solutionDetails.bigData.industries[3]',
|
|
'solutions.solutionDetails.bigData.industries[4]'
|
|
]
|
|
}
|
|
];
|
|
|
|
// 实施流程
|
|
const implementationSteps = [
|
|
{
|
|
titleKey: 'solutions.implementation.steps.step1.title',
|
|
descriptionKey: 'solutions.implementation.steps.step1.description'
|
|
},
|
|
{
|
|
titleKey: 'solutions.implementation.steps.step2.title',
|
|
descriptionKey: 'solutions.implementation.steps.step2.description'
|
|
},
|
|
{
|
|
titleKey: 'solutions.implementation.steps.step3.title',
|
|
descriptionKey: 'solutions.implementation.steps.step3.description'
|
|
},
|
|
{
|
|
titleKey: 'solutions.implementation.steps.step4.title',
|
|
descriptionKey: 'solutions.implementation.steps.step4.description'
|
|
},
|
|
{
|
|
titleKey: 'solutions.implementation.steps.step5.title',
|
|
descriptionKey: 'solutions.implementation.steps.step5.description'
|
|
}
|
|
];
|
|
|
|
// 客户案例
|
|
const caseStudies = [
|
|
{
|
|
titleKey: 'solutions.cases.ecommerce.title',
|
|
industryKey: 'solutions.cases.ecommerce.industry',
|
|
descriptionKey: 'solutions.cases.ecommerce.description'
|
|
},
|
|
{
|
|
titleKey: 'solutions.cases.finance.title',
|
|
industryKey: 'solutions.cases.finance.industry',
|
|
descriptionKey: 'solutions.cases.finance.description'
|
|
},
|
|
{
|
|
titleKey: 'solutions.cases.manufacturing.title',
|
|
industryKey: 'solutions.cases.manufacturing.industry',
|
|
descriptionKey: 'solutions.cases.manufacturing.description'
|
|
}
|
|
];
|
|
</script> |