263 lines
9.8 KiB
Vue
263 lines
9.8 KiB
Vue
<template>
|
||
<div class="py-16 bg-white dark:bg-gray-900 min-h-screen flex items-stretch">
|
||
<div class="container w-full">
|
||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-gray-900 p-8 w-full" v-if="product">
|
||
<h1 class="text-3xl font-bold text-primary dark:text-blue-400 mb-4">{{ product.title }}</h1>
|
||
<div class="mb-4">
|
||
<span
|
||
class="inline-block bg-primary/10 dark:bg-blue-500/20 text-primary dark:text-blue-300 px-3 py-1 rounded-full text-sm mr-2"
|
||
v-for="tag in product.tags"
|
||
:key="tag"
|
||
>{{ tag }}</span>
|
||
</div>
|
||
<p class="text-gray-700 dark:text-gray-300 text-lg mb-6">{{ product.description }}</p>
|
||
<div class="mb-6">
|
||
<h2 class="text-xl font-semibold mb-2 text-primary dark:text-blue-400">产品用途</h2>
|
||
<ul class="list-disc pl-6 text-gray-600 dark:text-gray-400">
|
||
<li v-for="use in product.uses" :key="use">{{ use }}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="mb-6">
|
||
<h2 class="text-xl font-semibold mb-2 text-primary dark:text-blue-400">产品价格</h2>
|
||
<p class="text-gray-700 dark:text-gray-300 mb-2">{{ product.price }}</p>
|
||
<NuxtLink
|
||
:to="product.priceUrl"
|
||
target="_blank"
|
||
class="inline-block mt-2 px-4 py-2 bg-primary dark:bg-blue-600 text-white rounded hover:bg-primary/90 dark:hover:bg-blue-700 transition"
|
||
>
|
||
产品价格查询
|
||
</NuxtLink>
|
||
</div>
|
||
<!-- Nuxt Content 板块：产品详细介绍 -->
|
||
<div class="mt-10">
|
||
<ContentDoc :path="`tag/${tag}`" class="prose dark:prose-invert max-w-none" />
|
||
</div>
|
||
<NuxtLink to="/contact" class="inline-block mt-8 px-6 py-2 bg-primary dark:bg-blue-600 text-white rounded hover:bg-primary/90 dark:hover:bg-blue-700 transition">立即咨询</NuxtLink>
|
||
</div>
|
||
<div v-else class="text-center text-gray-500 dark:text-gray-400 text-xl py-20">未找到该产品</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useRoute } from 'vue-router'
|
||
import { computed } from 'vue'
|
||
const route = useRoute()
|
||
const tag = computed(() => {
|
||
const t = route.params.tag
|
||
return Array.isArray(t) ? t[0] : t
|
||
})
|
||
|
||
const products: Record<string, any> = {
|
||
ec2: {
|
||
title: 'EC2 云服务器',
|
||
description: 'EC2 云服务器为企业和开发者提供高性能、弹性可扩展的计算资源，支持多种操作系统和实例类型，满足不同业务需求。',
|
||
tags: ['云服务器', '弹性伸缩', '安全'],
|
||
uses: [
|
||
'网站和应用托管',
|
||
'高性能计算任务',
|
||
'弹性扩展的业务系统',
|
||
'大数据分析与处理'
|
||
],
|
||
price: '按需计费，最低￥0.05/小时，支持包年包月和预留实例优惠',
|
||
priceUrl: 'https://aws.amazon.com/cn/ec2/pricing/'
|
||
},
|
||
s3: {
|
||
title: 'S3 对象存储',
|
||
description: 'S3 对象存储为企业提供安全、可靠、可扩展的数据存储服务，适用于备份、归档、静态网站托管等多种场景。',
|
||
tags: ['对象存储', '安全', '大数据'],
|
||
uses: [
|
||
'数据备份与归档',
|
||
'静态网站托管',
|
||
'大数据分析',
|
||
'多媒体内容分发'
|
||
],
|
||
price: '按存储量计费，低至￥0.12/GB/月',
|
||
priceUrl: 'https://aws.amazon.com/cn/s3/pricing/'
|
||
},
|
||
rds: {
|
||
title: 'RDS 数据库服务',
|
||
description: 'RDS 提供高可用、可扩展的关系型数据库服务，支持多种主流数据库引擎，简化数据库运维。',
|
||
tags: ['数据库', '高可用', '自动备份'],
|
||
uses: [
|
||
'企业级数据库托管',
|
||
'弹性扩展的业务系统',
|
||
'自动备份与恢复',
|
||
'高可用架构'
|
||
],
|
||
price: '按实例规格和存储量计费，支持包年包月和按需付费',
|
||
priceUrl: 'https://aws.amazon.com/cn/rds/pricing/'
|
||
},
|
||
lambda: {
|
||
title: 'Lambda 无服务器计算',
|
||
description: 'Lambda 让你无需管理服务器即可运行代码，按实际消耗资源计费，适合事件驱动和自动化场景。',
|
||
tags: ['无服务器', '自动扩展', '事件驱动'],
|
||
uses: [
|
||
'自动化任务处理',
|
||
'API 后端服务',
|
||
'实时数据处理',
|
||
'事件驱动架构'
|
||
],
|
||
price: '按请求次数和运行时间计费，免费额度友好',
|
||
priceUrl: 'https://aws.amazon.com/cn/lambda/pricing/'
|
||
},
|
||
emr: {
|
||
title: 'EMR 大数据平台',
|
||
description: 'EMR 提供基于云的 Hadoop、Spark 等大数据处理平台，弹性伸缩，适合大规模数据分析。',
|
||
tags: ['大数据', '数据分析', '弹性伸缩'],
|
||
uses: [
|
||
'大规模数据处理',
|
||
'数据仓库',
|
||
'机器学习数据预处理',
|
||
'日志分析'
|
||
],
|
||
price: '按集群资源和使用时长计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/emr/pricing/'
|
||
},
|
||
sagemaker: {
|
||
title: 'SageMaker AI 平台',
|
||
description: 'SageMaker 提供一站式机器学习开发、训练和部署平台，助力企业快速构建 AI 应用。',
|
||
tags: ['AI', '机器学习', '自动化'],
|
||
uses: [
|
||
'模型训练与部署',
|
||
'自动化机器学习',
|
||
'大数据智能分析',
|
||
'AI 应用开发'
|
||
],
|
||
price: '按实例类型和使用时长计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/sagemaker/pricing/'
|
||
},
|
||
waf: {
|
||
title: 'WAF 云防火墙',
|
||
description: 'WAF 提供强大的 Web 应用防护能力，抵御常见攻击，保障网站和 API 安全。',
|
||
tags: ['安全', '防护', 'DDoS'],
|
||
uses: [
|
||
'Web 应用安全防护',
|
||
'API 安全加固',
|
||
'防止 SQL 注入和 XSS',
|
||
'DDoS 攻击防护'
|
||
],
|
||
price: '按规则数和请求量计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/waf/pricing/'
|
||
},
|
||
autoscaling: {
|
||
title: 'Auto Scaling 弹性伸缩',
|
||
description: 'Auto Scaling 根据业务负载自动调整计算资源，提升可用性并优化成本。',
|
||
tags: ['弹性伸缩', '自动扩展', '高可用'],
|
||
uses: [
|
||
'自动扩容与缩容',
|
||
'高可用架构',
|
||
'应对流量高峰',
|
||
'成本优化'
|
||
],
|
||
price: '按实际使用的资源计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/autoscaling/pricing/'
|
||
},
|
||
cloudfront: {
|
||
title: 'CloudFront 内容分发网络',
|
||
description: 'CloudFront 为全球用户提供快速、安全的内容分发服务，支持静态和动态内容加速。',
|
||
tags: ['CDN', '加速', '安全'],
|
||
uses: [
|
||
'网站内容加速',
|
||
'视频点播与直播',
|
||
'API 加速',
|
||
'安全内容分发'
|
||
],
|
||
price: '按流量和请求次数计费，全球节点覆盖',
|
||
priceUrl: 'https://aws.amazon.com/cn/cloudfront/pricing/'
|
||
},
|
||
dynamodb: {
|
||
title: 'DynamoDB NoSQL 数据库',
|
||
description: 'DynamoDB 是高性能、无服务器的 NoSQL 数据库，适合大规模应用和实时数据处理。',
|
||
tags: ['NoSQL', '高性能', '无服务器'],
|
||
uses: [
|
||
'实时数据存储',
|
||
'高并发应用',
|
||
'物联网数据管理',
|
||
'游戏后端'
|
||
],
|
||
price: '按读写容量和存储量计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/dynamodb/pricing/'
|
||
},
|
||
cloudwatch: {
|
||
title: 'CloudWatch 监控与告警',
|
||
description: 'CloudWatch 提供全面的云资源监控、日志收集和自动告警，助力运维自动化。',
|
||
tags: ['监控', '日志', '自动化'],
|
||
uses: [
|
||
'云资源监控',
|
||
'日志分析',
|
||
'自动化告警',
|
||
'性能优化'
|
||
],
|
||
price: '按监控项和日志量计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/cloudwatch/pricing/'
|
||
},
|
||
sns: {
|
||
title: 'SNS 消息推送服务',
|
||
description: 'SNS 支持高可用的消息推送和通知，适合分布式系统和移动应用。',
|
||
tags: ['消息推送', '通知', '分布式'],
|
||
uses: [
|
||
'系统通知',
|
||
'移动推送',
|
||
'事件驱动架构',
|
||
'跨服务消息分发'
|
||
],
|
||
price: '按推送次数和消息量计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/sns/pricing/'
|
||
},
|
||
sqs: {
|
||
title: 'SQS 消息队列服务',
|
||
description: 'SQS 提供可靠的消息队列，解耦微服务和分布式系统，提升系统弹性。',
|
||
tags: ['消息队列', '解耦', '分布式'],
|
||
uses: [
|
||
'微服务解耦',
|
||
'异步任务处理',
|
||
'高并发消息传递',
|
||
'事件驱动架构'
|
||
],
|
||
price: '按请求次数计费，免费额度友好',
|
||
priceUrl: 'https://aws.amazon.com/cn/sqs/pricing/'
|
||
},
|
||
route53: {
|
||
title: 'Route 53 域名解析',
|
||
description: 'Route 53 提供高可用、可扩展的 DNS 服务，支持域名注册和智能流量调度。',
|
||
tags: ['DNS', '域名解析', '高可用'],
|
||
uses: [
|
||
'域名解析',
|
||
'智能流量调度',
|
||
'全球负载均衡',
|
||
'健康检查'
|
||
],
|
||
price: '按域名和查询量计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/route53/pricing/'
|
||
},
|
||
elasticache: {
|
||
title: 'ElastiCache 内存数据库',
|
||
description: 'ElastiCache 支持 Redis 和 Memcached，提升应用性能，适合缓存和会话管理。',
|
||
tags: ['缓存', '高性能', '数据库'],
|
||
uses: [
|
||
'数据缓存',
|
||
'会话管理',
|
||
'排行榜',
|
||
'高并发应用'
|
||
],
|
||
price: '按节点规格和使用时长计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/elasticache/pricing/'
|
||
},
|
||
redshift: {
|
||
title: 'Redshift 数据仓库',
|
||
description: 'Redshift 是高性能、可扩展的数据仓库服务，适合大数据分析和商业智能。',
|
||
tags: ['数据仓库', '大数据', '分析'],
|
||
uses: [
|
||
'大数据分析',
|
||
'商业智能',
|
||
'数据集市',
|
||
'报表生成'
|
||
],
|
||
price: '按节点类型和存储量计费',
|
||
priceUrl: 'https://aws.amazon.com/cn/redshift/pricing/'
|
||
}
|
||
}
|
||
|
||
const product = computed(() => products[tag.value] || null)
|
||
</script> |