website-vue/pages/products.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>