202 lines
8.1 KiB
Vue
202 lines
8.1 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 页面标题 -->
|
||
<HeroBanner
|
||
title="AWS产品"
|
||
subtitle="全面的云计算产品线，满足您的各种业务需求"
|
||
/>
|
||
|
||
<!-- 产品分类 -->
|
||
<section class="section">
|
||
<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">覆盖计算、存储、数据库、网络、安全等多个领域</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<div v-for="(category, index) in productCategories" :key="index" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||
<div class="w-16 h-16 bg-secondary/10 rounded-full flex items-center justify-center mb-6">
|
||
<i :class="['text-secondary text-2xl', category.icon]"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-4">{{ category.name }}</h3>
|
||
<p class="text-gray-600 leading-relaxed mb-6">{{ category.description }}</p>
|
||
<a href="#product-list" 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>
|
||
|
||
<!-- 产品列表 -->
|
||
<section id="product-list" 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">AWS核心产品详细介绍</p>
|
||
</div>
|
||
|
||
<div class="space-y-12">
|
||
<div v-for="(product, index) in products" :key="index" class="bg-white rounded-lg shadow-lg overflow-hidden">
|
||
<div class="grid md:grid-cols-3">
|
||
<div class="bg-gradient-to-br from-secondary/20 to-secondary/10 flex items-center justify-center p-8">
|
||
<i :class="['text-8xl text-secondary', product.icon]"></i>
|
||
</div>
|
||
<div class="md:col-span-2 p-8">
|
||
<h3 class="text-2xl font-semibold mb-4">{{ product.name }}</h3>
|
||
<p class="text-gray-600 leading-relaxed mb-6">{{ product.description }}</p>
|
||
<div class="mb-6">
|
||
<h4 class="text-lg font-semibold mb-2">产品优势</h4>
|
||
<ul class="space-y-2">
|
||
<li v-for="(feature, idx) in product.features" :key="idx" class="flex items-start">
|
||
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
|
||
<span class="text-gray-600">{{ feature }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<a href="#contact" class="btn-primary">咨询详情</a>
|
||
<span class="text-gray-500">价格: {{ product.pricing }}</span>
|
||
</div>
|
||
</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">作为AWS授权合作伙伴，我们提供专业的AWS产品咨询和部署服务</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-4 gap-8">
|
||
<div v-for="(advantage, index) in advantages" :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-16 h-16 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<i :class="['text-accent text-2xl', advantage.icon]"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-4">{{ advantage.title }}</h3>
|
||
<p class="text-gray-600 leading-relaxed">{{ advantage.description }}</p>
|
||
</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 productCategories = [
|
||
{
|
||
icon: 'fas fa-server',
|
||
name: '计算服务',
|
||
description: '包括EC2、Lambda等，提供灵活的计算能力'
|
||
},
|
||
{
|
||
icon: 'fas fa-database',
|
||
name: '存储服务',
|
||
description: '包括S3、EBS等，提供可靠的数据存储解决方案'
|
||
},
|
||
{
|
||
icon: 'fas fa-sitemap',
|
||
name: '网络服务',
|
||
description: '包括VPC、Route 53等，提供安全灵活的网络管理'
|
||
},
|
||
{
|
||
icon: 'fas fa-shield-alt',
|
||
name: '安全与身份',
|
||
description: '包括IAM、GuardDuty等，提供全面的安全防护'
|
||
},
|
||
{
|
||
icon: 'fas fa-chart-line',
|
||
name: '监控与管理',
|
||
description: '包括CloudWatch、Systems Manager等，提供全面的监控和管理工具'
|
||
},
|
||
{
|
||
icon: 'fas fa-robot',
|
||
name: '人工智能',
|
||
description: '包括SageMaker、Rekognition等，提供先进的AI服务'
|
||
}
|
||
];
|
||
|
||
// 产品列表
|
||
const products = [
|
||
{
|
||
icon: 'fas fa-server',
|
||
name: 'Amazon EC2',
|
||
description: 'Amazon Elastic Compute Cloud (EC2) 是一种提供可扩展计算能力的网络服务，专为云端计算设计。使用 EC2 可消除前期硬件投资，因此您能够更快地开发和部署应用程序。',
|
||
features: [
|
||
'灵活选择实例类型，适应不同应用场景',
|
||
'按秒计费，降低运营成本',
|
||
'自动扩展，应对业务峰值',
|
||
'高可用性和可靠性保障'
|
||
],
|
||
pricing: '按需付费，起价低至¥0.1/小时'
|
||
},
|
||
{
|
||
icon: 'fas fa-database',
|
||
name: 'Amazon S3',
|
||
description: 'Amazon Simple Storage Service (S3) 是一种对象存储服务，提供行业领先的可扩展性、数据可用性、安全性和性能。这意味着任何规模的企业都可以存储和保护任意数量的数据。',
|
||
features: [
|
||
'无限容量扩展，适合任何规模的数据存储',
|
||
'99.999999999% 的数据持久性',
|
||
'多种存储类别，优化成本',
|
||
'强大的访问控制和加密功能'
|
||
],
|
||
pricing: '按存储量和请求数付费，起价低至¥0.2/GB/月'
|
||
},
|
||
{
|
||
icon: 'fas fa-table',
|
||
name: 'Amazon RDS',
|
||
description: 'Amazon Relational Database Service (RDS) 使在云中设置、操作和扩展关系数据库变得简单。它提供经济高效且可调整容量的容量，同时自动执行耗时的管理任务。',
|
||
features: [
|
||
'支持多种数据库引擎：MySQL、PostgreSQL、Oracle等',
|
||
'自动备份和恢复功能',
|
||
'高可用性主备部署',
|
||
'自动软件更新和维护'
|
||
],
|
||
pricing: '按实例类型计费，起价低至¥0.5/小时'
|
||
}
|
||
];
|
||
|
||
// 服务优势
|
||
const advantages = [
|
||
{
|
||
icon: 'fas fa-tachometer-alt',
|
||
title: '快速部署',
|
||
description: '专业的团队帮助您快速部署AWS产品，缩短上线时间'
|
||
},
|
||
{
|
||
icon: 'fas fa-hand-holding-usd',
|
||
title: '成本优化',
|
||
description: '根据业务需求，为您定制最优成本方案，避免资源浪费'
|
||
},
|
||
{
|
||
icon: 'fas fa-lock',
|
||
title: '安全保障',
|
||
description: '提供全面的安全评估和最佳实践，保障业务安全'
|
||
},
|
||
{
|
||
icon: 'fas fa-headset',
|
||
title: '专业支持',
|
||
description: '7*24小时技术支持，解决您使用过程中的各种问题'
|
||
}
|
||
];
|
||
</script> |