291 lines
12 KiB
Vue
291 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 页面标题 -->
|
||
<HeroBanner
|
||
title="解决方案"
|
||
subtitle="针对不同行业和业务场景的专业AWS云服务解决方案"
|
||
/>
|
||
|
||
<!-- 解决方案分类 -->
|
||
<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">AWS云解决方案</h2>
|
||
<p class="text-xl text-gray-600 leading-relaxed">基于AWS云服务，为不同行业提供专业解决方案</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">{{ category.title }}</h3>
|
||
<p class="text-gray-600 leading-relaxed mb-6">{{ category.description }}</p>
|
||
<a :href="'#' + category.id" class="inline-flex items-center text-secondary hover:text-secondary/90">
|
||
查看详情
|
||
<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">{{ solution.title }}</h2>
|
||
<p class="text-gray-600 leading-relaxed mb-6">{{ solution.description }}</p>
|
||
<div class="mb-8">
|
||
<h4 class="text-lg font-semibold mb-4">解决方案优势</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">{{ benefit }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mb-8">
|
||
<h4 class="text-lg font-semibold mb-4">适用行业</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">
|
||
{{ industry }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<a href="#contact" class="btn-primary">咨询方案</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">解决方案实施流程</h2>
|
||
<p class="text-xl text-gray-600 leading-relaxed">专业、高效的项目实施流程，确保方案平稳落地</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">{{ step.title }}</h3>
|
||
<p class="text-gray-600">{{ step.description }}</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">客户成功案例</h2>
|
||
<p class="text-xl text-gray-600 leading-relaxed">我们的解决方案已成功应用于众多行业</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">{{ case_item.title }}</h3>
|
||
<span class="px-3 py-1 bg-secondary/10 text-secondary text-sm rounded-full">{{ case_item.industry }}</span>
|
||
</div>
|
||
<p class="text-gray-600 mb-6">{{ case_item.description }}</p>
|
||
<NuxtLink to="/cases" class="inline-flex items-center text-secondary hover:text-secondary/90">
|
||
查看详情
|
||
<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">需要定制化解决方案?</h2>
|
||
<p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">联系我们的解决方案专家，获取专业的AWS云服务解决方案建议</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">
|
||
联系解决方案专家
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</NuxtLink>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// 解决方案分类
|
||
const solutionCategories = [
|
||
{
|
||
id: 'web-hosting',
|
||
icon: 'fas fa-globe',
|
||
title: '网站托管',
|
||
description: '高性能、高可用的网站托管解决方案，适用于各类网站和Web应用'
|
||
},
|
||
{
|
||
id: 'cloud-migration',
|
||
icon: 'fas fa-cloud-upload-alt',
|
||
title: '企业上云',
|
||
description: '安全、平稳的企业IT系统云迁移方案，最小化业务中断风险'
|
||
},
|
||
{
|
||
id: 'disaster-recovery',
|
||
icon: 'fas fa-shield-alt',
|
||
title: '灾备方案',
|
||
description: '构建可靠的灾难恢复系统，保障业务连续性和数据安全'
|
||
},
|
||
{
|
||
id: 'big-data',
|
||
icon: 'fas fa-chart-pie',
|
||
title: '大数据分析',
|
||
description: '基于AWS大数据服务的数据处理和分析解决方案'
|
||
},
|
||
{
|
||
id: 'microservices',
|
||
icon: 'fas fa-cubes',
|
||
title: '微服务架构',
|
||
description: '基于容器和无服务器技术的现代应用架构解决方案'
|
||
},
|
||
{
|
||
id: 'ai-ml',
|
||
icon: 'fas fa-brain',
|
||
title: 'AI/机器学习',
|
||
description: '利用AWS AI/ML服务快速构建智能应用的解决方案'
|
||
}
|
||
];
|
||
|
||
// 解决方案详情
|
||
const solutions = [
|
||
{
|
||
id: 'web-hosting',
|
||
icon: 'fas fa-globe',
|
||
title: '网站托管解决方案',
|
||
description: '基于AWS云服务的高性能、高可用、安全的网站托管解决方案，适用于企业官网、电子商务网站、内容管理系统等各类Web应用。利用AWS全球基础设施和CDN服务，为全球用户提供低延迟的访问体验。',
|
||
benefits: [
|
||
'高可用性架构，99.99%服务可用性保障',
|
||
'自动扩展能力，应对流量峰值',
|
||
'CDN加速，全球用户低延迟访问',
|
||
'完善的安全防护，包括WAF、DDoS防护等',
|
||
'按需付费，降低运营成本'
|
||
],
|
||
industries: ['电子商务', '媒体', '教育', '企业服务']
|
||
},
|
||
{
|
||
id: 'cloud-migration',
|
||
icon: 'fas fa-cloud-upload-alt',
|
||
title: '企业上云解决方案',
|
||
description: '为传统IT基础设施提供安全、可靠的云迁移路径，帮助企业实现从本地数据中心到AWS云的平稳过渡。我们的解决方案涵盖评估、规划、迁移和优化的全过程，最大限度地减少业务中断和迁移风险。',
|
||
benefits: [
|
||
'专业的迁移评估和规划服务',
|
||
'多种迁移策略：重新托管、重新平台化、重构等',
|
||
'数据安全迁移，确保零数据丢失',
|
||
'迁移过程中的业务连续性保障',
|
||
'迁移后的性能优化和成本控制'
|
||
],
|
||
industries: ['金融', '制造', '零售', '医疗', '政府']
|
||
},
|
||
{
|
||
id: 'disaster-recovery',
|
||
icon: 'fas fa-shield-alt',
|
||
title: '灾备解决方案',
|
||
description: '基于AWS云服务构建可靠的灾难恢复系统，帮助企业应对各种灾难情况下的业务连续性挑战。我们提供从灾备规划到实施、测试和运维的一站式服务，保障企业数据安全和业务连续性。',
|
||
benefits: [
|
||
'多区域架构，提供地理级别的灾难恢复能力',
|
||
'灵活的恢复点目标(RPO)和恢复时间目标(RTO)选项',
|
||
'自动化的灾难恢复流程，减少人为错误',
|
||
'定期的灾备演练和测试服务',
|
||
'成本优化的灾备架构设计'
|
||
],
|
||
industries: ['金融', '医疗', '能源', '电信', '政府']
|
||
},
|
||
{
|
||
id: 'big-data',
|
||
icon: 'fas fa-chart-pie',
|
||
title: '大数据分析解决方案',
|
||
description: '利用AWS丰富的大数据服务，构建高效、可扩展的数据处理和分析平台。我们的解决方案可以帮助企业从海量数据中提取价值，支持数据仓库、实时分析、机器学习等多种大数据应用场景。',
|
||
benefits: [
|
||
'高性能的数据处理能力，处理PB级数据',
|
||
'灵活的存储选项，优化成本和性能',
|
||
'实时数据处理和分析能力',
|
||
'与机器学习服务的无缝集成',
|
||
'可视化的数据分析工具'
|
||
],
|
||
industries: ['金融', '零售', '医疗', '制造', '物流']
|
||
}
|
||
];
|
||
|
||
// 实施流程
|
||
const implementationSteps = [
|
||
{
|
||
title: '需求分析',
|
||
description: '深入了解客户业务需求和技术环境，确定解决方案目标和范围'
|
||
},
|
||
{
|
||
title: '方案设计',
|
||
description: '基于需求分析，设计适合的AWS云服务解决方案架构和实施计划'
|
||
},
|
||
{
|
||
title: '方案实施',
|
||
description: '按照实施计划，部署和配置AWS云服务资源，构建解决方案'
|
||
},
|
||
{
|
||
title: '测试验证',
|
||
description: '对实施的解决方案进行全面测试，确保功能、性能和安全满足要求'
|
||
},
|
||
{
|
||
title: '上线部署',
|
||
description: '解决方案正式上线，确保业务平稳过渡和系统稳定运行'
|
||
},
|
||
{
|
||
title: '运维支持',
|
||
description: '提供持续的技术支持和运维服务，保障解决方案长期稳定运行'
|
||
}
|
||
];
|
||
|
||
// 客户案例
|
||
const caseStudies = [
|
||
{
|
||
title: '某电商平台',
|
||
industry: '电子商务',
|
||
description: '通过AWS云服务解决方案，成功应对销售高峰，提升了网站性能和用户体验，同时降低了运营成本。'
|
||
},
|
||
{
|
||
title: '某金融机构',
|
||
industry: '金融',
|
||
description: '采用AWS灾备解决方案，构建了高可用的业务连续性系统，满足了金融行业严格的监管要求。'
|
||
},
|
||
{
|
||
title: '某制造企业',
|
||
industry: '制造',
|
||
description: '通过企业上云解决方案，成功将IT系统迁移至AWS云平台，提高了系统灵活性，降低了IT维护成本。'
|
||
}
|
||
];
|
||
</script> |