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