484 lines
16 KiB
Vue
484 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<!-- AWS产品与服务 Banner -->
|
||
<section class="bg-white dark:bg-gray-900 py-16">
|
||
<div
|
||
class="container mx-auto flex flex-col md:flex-row items-center justify-center gap-8"
|
||
>
|
||
<div class="md:w-1/2 flex justify-center">
|
||
<img
|
||
src="/public/images/products/product.svg"
|
||
alt="AWS产品与服务"
|
||
class="w-full max-w-md object-contain dark:opacity-90"
|
||
/>
|
||
</div>
|
||
<div class="md:w-1/2">
|
||
<h1 class="text-4xl font-bold text-[#333333] dark:text-white mb-6">
|
||
{{ $t("products.banner.title") }}
|
||
</h1>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 mb-4">
|
||
{{ $t("products.banner.subtitle") }}
|
||
</p>
|
||
<p class="text-gray-500 dark:text-gray-400 leading-relaxed">
|
||
{{ $t("products.banner.desc") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AWS开通流程 -->
|
||
<Process />
|
||
|
||
<!-- 产品分类 -->
|
||
<section class="py-20 dark:bg-gray-900">
|
||
<div class="container">
|
||
<div class="max-w-4xl mx-auto text-center mb-16">
|
||
<h2 class="text-4xl font-bold text-[#333333] dark:text-white mb-4">
|
||
{{ $t("products.categories.title") }}
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
{{ $t("products.categories.subtitle") }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- tab切换 -->
|
||
<div class="flex justify-center space-x-4 mb-8 flex-wrap">
|
||
<button
|
||
v-for="tab in productTabs"
|
||
:key="tab.key"
|
||
:class="[
|
||
'px-8 py-3 rounded-lg font-semibold text-lg m-1',
|
||
activeTab === tab.key
|
||
? 'bg-blue-600 text-white'
|
||
: 'bg-[#F5F8FB] dark:bg-gray-800 text-blue-600 dark:text-blue-400',
|
||
]"
|
||
@click="activeTab = tab.key"
|
||
>
|
||
{{ $t(tab.label) }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 卡片区 -->
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div
|
||
v-for="(card, idx) in getActiveTabCards"
|
||
:key="idx"
|
||
class="bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg flex p-6 shadow-sm min-h-[135px]"
|
||
>
|
||
<div
|
||
class="flex-shrink-0 flex items-center justify-center bg-[#F5F8FB] dark:bg-gray-700 rounded-lg mr-6"
|
||
style="width: 160px; height: 180px"
|
||
>
|
||
<img
|
||
:src="card.img"
|
||
:alt="$t(card.titleKey)"
|
||
class="object-contain dark:opacity-90"
|
||
/>
|
||
</div>
|
||
<div class="flex-1 flex flex-col h-full">
|
||
<h3
|
||
class="text-2xl font-extrabold mb-2 text-left mt-0 dark:text-white"
|
||
>
|
||
{{ $t(card.titleKey) }}
|
||
</h3>
|
||
<p
|
||
class="text-gray-700 dark:text-gray-300 mb-4 text-left text-base leading-relaxed"
|
||
>
|
||
{{ $t(card.descKey) }}
|
||
</p>
|
||
<div class="flex justify-between mt-auto">
|
||
<button
|
||
class="px-4 py-2 bg-blue-600 text-white rounded w-[48%]"
|
||
>
|
||
{{ $t("products.tabCards.detail") }}
|
||
</button>
|
||
<button
|
||
class="px-4 py-2 border border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-500 rounded w-[48%]"
|
||
>
|
||
{{ $t("products.tabCards.price") }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 产品信息tab板块后新增定价与优惠和专家咨询 -->
|
||
<section class="py-20 bg-[#f8f9fa] dark:bg-gray-900">
|
||
<div
|
||
class="container mx-auto flex flex-col md:flex-row items-center justify-between gap-8"
|
||
>
|
||
<div class="md:w-1/2 mb-8 md:mb-0">
|
||
<h2 class="text-2xl font-bold text-[#222] dark:text-white mb-4">
|
||
{{ $t("products.pricing.title") }}
|
||
</h2>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">
|
||
{{ $t("products.pricing.subtitle") }}
|
||
</p>
|
||
<p class="text-gray-500 dark:text-gray-400 mb-8">
|
||
{{ $t("products.pricing.desc") }}
|
||
</p>
|
||
<div class="flex space-x-4">
|
||
<a href="http://calc.buddyscloud.com/awsSearch">
|
||
<button
|
||
class="px-6 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white rounded transition-colors duration-300"
|
||
>
|
||
{{ $t("products.pricing.quoteBtn") }}
|
||
</button></a
|
||
>
|
||
<button
|
||
class="px-6 py-2 border border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-500 hover:bg-blue-50 dark:hover:bg-gray-700 rounded transition-colors duration-300"
|
||
>
|
||
{{ $t("products.pricing.planBtn") }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="md:w-1/2 flex justify-center">
|
||
<div
|
||
class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-md"
|
||
>
|
||
<div
|
||
class="bg-blue-600 dark:bg-blue-700 text-white rounded-t-lg px-6 py-3 text-lg font-bold"
|
||
>
|
||
{{ $t("products.pricing.agentTitle") }}
|
||
</div>
|
||
<ul class="divide-y divide-gray-200 dark:divide-gray-700 px-6 py-4">
|
||
<li
|
||
v-for="(item, idx) in agentBenefits"
|
||
:key="idx"
|
||
class="flex items-center py-2"
|
||
>
|
||
<i class="fas fa-check-circle text-green-500 mr-2"></i>
|
||
<span class="text-gray-700 dark:text-gray-300">{{
|
||
$t(item)
|
||
}}</span>
|
||
</li>
|
||
</ul>
|
||
<div
|
||
class="px-6 pb-3 pt-1 text-xs text-gray-400 dark:text-gray-500"
|
||
>
|
||
{{ $t("products.pricing.agentNote") }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="py-14 bg-blue-600 dark:bg-blue-800">
|
||
<div class="container mx-auto text-center text-white">
|
||
<h2 class="text-3xl font-bold mb-4">
|
||
{{ $t("products.consult.title") }}
|
||
</h2>
|
||
<p class="text-lg mb-8">{{ $t("products.consult.subtitle") }}</p>
|
||
<button
|
||
class="bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 px-8 py-3 rounded-lg font-semibold text-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"
|
||
>
|
||
{{ $t("products.consult.btn") }}
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useI18n } from "vue-i18n";
|
||
import { ref, computed } from "vue";
|
||
import { useHead } from "nuxt/app";
|
||
import Process from "~/components/Process.vue";
|
||
const { t } = useI18n(); // 添加页面元数据
|
||
|
||
// 添加页面元数据
|
||
useHead({
|
||
title: () => t("meta.products.title"),
|
||
meta: [
|
||
{ name: "description", content: () => t("meta.products.description") },
|
||
{ name: "keywords", content: () => t("meta.products.keywords") },
|
||
],
|
||
});
|
||
// 产品分类
|
||
const productCategories = {
|
||
compute: {
|
||
icon: "fas fa-server",
|
||
nameKey: "products.categories.items.compute.name",
|
||
descriptionKey: "products.categories.items.compute.description",
|
||
},
|
||
storage: {
|
||
icon: "fas fa-database",
|
||
nameKey: "products.categories.items.storage.name",
|
||
descriptionKey: "products.categories.items.storage.description",
|
||
},
|
||
network: {
|
||
icon: "fas fa-sitemap",
|
||
nameKey: "products.categories.items.network.name",
|
||
descriptionKey: "products.categories.items.network.description",
|
||
},
|
||
security: {
|
||
icon: "fas fa-shield-alt",
|
||
nameKey: "products.categories.items.security.name",
|
||
descriptionKey: "products.categories.items.security.description",
|
||
},
|
||
database: {
|
||
icon: "fas fa-chart-line",
|
||
nameKey: "products.categories.items.database.name",
|
||
descriptionKey: "products.categories.items.database.description",
|
||
},
|
||
ai: {
|
||
icon: "fas fa-robot",
|
||
nameKey: "products.categories.items.ai.name",
|
||
descriptionKey: "products.categories.items.ai.description",
|
||
},
|
||
};
|
||
|
||
// 产品列表
|
||
const products = {
|
||
ec2: {
|
||
icon: "fas fa-server",
|
||
nameKey: "products.list.items.ec2.name",
|
||
descriptionKey: "products.list.items.ec2.description",
|
||
features: [
|
||
"products.list.items.ec2.features.0",
|
||
"products.list.items.ec2.features.1",
|
||
"products.list.items.ec2.features.2",
|
||
"products.list.items.ec2.features.3",
|
||
],
|
||
pricingKey: "products.list.items.ec2.pricing",
|
||
},
|
||
s3: {
|
||
icon: "fas fa-database",
|
||
nameKey: "products.list.items.s3.name",
|
||
descriptionKey: "products.list.items.s3.description",
|
||
features: [
|
||
"products.list.items.s3.features.0",
|
||
"products.list.items.s3.features.1",
|
||
"products.list.items.s3.features.2",
|
||
"products.list.items.s3.features.3",
|
||
],
|
||
pricingKey: "products.list.items.s3.pricing",
|
||
},
|
||
rds: {
|
||
icon: "fas fa-table",
|
||
nameKey: "products.list.items.rds.name",
|
||
descriptionKey: "products.list.items.rds.description",
|
||
features: [
|
||
"products.list.items.rds.features.0",
|
||
"products.list.items.rds.features.1",
|
||
"products.list.items.rds.features.2",
|
||
"products.list.items.rds.features.3",
|
||
],
|
||
pricingKey: "products.list.items.rds.pricing",
|
||
},
|
||
};
|
||
|
||
// 服务优势
|
||
const advantages = {
|
||
deployment: {
|
||
icon: "fas fa-tachometer-alt",
|
||
titleKey: "products.advantages.items.deployment.title",
|
||
descriptionKey: "products.advantages.items.deployment.description",
|
||
},
|
||
cost: {
|
||
icon: "fas fa-hand-holding-usd",
|
||
titleKey: "products.advantages.items.cost.title",
|
||
descriptionKey: "products.advantages.items.cost.description",
|
||
},
|
||
security: {
|
||
icon: "fas fa-lock",
|
||
titleKey: "products.advantages.items.security.title",
|
||
descriptionKey: "products.advantages.items.security.description",
|
||
},
|
||
support: {
|
||
icon: "fas fa-headset",
|
||
titleKey: "products.advantages.items.support.title",
|
||
descriptionKey: "products.advantages.items.support.description",
|
||
},
|
||
};
|
||
|
||
const productTabs = [
|
||
{ key: "all", label: "products.categories.items.all.name" },
|
||
{ key: "compute", label: "products.categories.items.compute.name" },
|
||
{ key: "storage", label: "products.categories.items.storage.name" },
|
||
{ key: "database", label: "products.categories.items.database.name" },
|
||
{ key: "network", label: "products.categories.items.network.name" },
|
||
{ key: "security", label: "products.categories.items.security.name" },
|
||
{ key: "ai", label: "products.categories.items.ai.name" },
|
||
];
|
||
|
||
// 卡片数据类型声明，适配ts
|
||
interface ProductCard {
|
||
titleKey: string;
|
||
descKey: string;
|
||
img: string;
|
||
}
|
||
|
||
// 先定义computeTab内容
|
||
const computeTab: ProductCard[] = [
|
||
{
|
||
titleKey: "products.tabCards.compute.ec2.title",
|
||
descKey: "products.tabCards.compute.ec2.desc",
|
||
img: "/images/products/ec2.svg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.compute.lambda.title",
|
||
descKey: "products.tabCards.compute.lambda.desc",
|
||
img: "/images/products/lambda.svg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.compute.beanstalk.title",
|
||
descKey: "products.tabCards.compute.beanstalk.desc",
|
||
img: "/images/products/beanstalk.svg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.compute.ecs.title",
|
||
descKey: "products.tabCards.compute.ecs.desc",
|
||
img: "/images/products/ecs.svg",
|
||
},
|
||
];
|
||
|
||
const storageTab: ProductCard[] = [
|
||
{
|
||
titleKey: "products.tabCards.storage.s3.title",
|
||
descKey: "products.tabCards.storage.s3.desc",
|
||
img: "/images/products/s3.svg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.storage.ebs.title",
|
||
descKey: "products.tabCards.storage.ebs.desc",
|
||
img: "/images/products/ebs.svg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.storage.glacier.title",
|
||
descKey: "products.tabCards.storage.glacier.desc",
|
||
img: "/images/products/glacier.svg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.storage.efs.title",
|
||
descKey: "products.tabCards.storage.efs.desc",
|
||
img: "/images/products/efs.svg",
|
||
},
|
||
];
|
||
|
||
const databaseTab: ProductCard[] = [
|
||
{
|
||
titleKey: "products.tabCards.database.rds.title",
|
||
descKey: "products.tabCards.database.rds.desc",
|
||
img: "/images/products/rds.webp",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.database.dynamodb.title",
|
||
descKey: "products.tabCards.database.dynamodb.desc",
|
||
img: "/images/products/dynamodb.png",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.database.aurora.title",
|
||
descKey: "products.tabCards.database.aurora.desc",
|
||
img: "/images/products/aurora.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.database.redshift.title",
|
||
descKey: "products.tabCards.database.redshift.desc",
|
||
img: "/images/products/redshift.jpg",
|
||
},
|
||
];
|
||
|
||
const networkTab: ProductCard[] = [
|
||
{
|
||
titleKey: "products.tabCards.network.vpc.title",
|
||
descKey: "products.tabCards.network.vpc.desc",
|
||
img: "/images/products/vpc.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.network.cloudfront.title",
|
||
descKey: "products.tabCards.network.cloudfront.desc",
|
||
img: "/images/products/cloudfront.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.network.directconnect.title",
|
||
descKey: "products.tabCards.network.directconnect.desc",
|
||
img: "/images/products/aws-direct-connect.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.network.route53.title",
|
||
descKey: "products.tabCards.network.route53.desc",
|
||
img: "/images/products/route-53.jpg",
|
||
},
|
||
];
|
||
|
||
const securityTab: ProductCard[] = [
|
||
{
|
||
titleKey: "products.tabCards.security.iam.title",
|
||
descKey: "products.tabCards.security.iam.desc",
|
||
img: "/images/products/iam.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.security.shield.title",
|
||
descKey: "products.tabCards.security.shield.desc",
|
||
img: "/images/products/shield.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.security.waf.title",
|
||
descKey: "products.tabCards.security.waf.desc",
|
||
img: "/images/products/waf.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.security.kms.title",
|
||
descKey: "products.tabCards.security.kms.desc",
|
||
img: "/images/products/kms.jpg",
|
||
},
|
||
];
|
||
|
||
const aiTab: ProductCard[] = [
|
||
{
|
||
titleKey: "products.tabCards.ai.sagemaker.title",
|
||
descKey: "products.tabCards.ai.sagemaker.desc",
|
||
img: "/images/products/sagemaker.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.ai.rekognition.title",
|
||
descKey: "products.tabCards.ai.rekognition.desc",
|
||
img: "/images/products/rekognition.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.ai.comprehend.title",
|
||
descKey: "products.tabCards.ai.comprehend.desc",
|
||
img: "/images/products/comprehend.jpg",
|
||
},
|
||
{
|
||
titleKey: "products.tabCards.ai.lex.title",
|
||
descKey: "products.tabCards.ai.lex.desc",
|
||
img: "/images/products/lex.jpg",
|
||
},
|
||
];
|
||
|
||
const productTabCards: Record<string, ProductCard[]> = {
|
||
compute: computeTab,
|
||
storage: storageTab,
|
||
database: databaseTab,
|
||
network: networkTab,
|
||
security: securityTab,
|
||
ai: aiTab,
|
||
};
|
||
|
||
const activeTab = ref("all");
|
||
|
||
// 获取当前活动标签的卡片
|
||
const getActiveTabCards = computed(() => {
|
||
if (activeTab.value === "all") {
|
||
// 合并所有标签页的卡片，每个标签页取前2个
|
||
let allCards: ProductCard[] = [];
|
||
Object.values(productTabCards).forEach((cards) => {
|
||
allCards = [...allCards, ...cards];
|
||
});
|
||
return allCards;
|
||
}
|
||
return productTabCards[activeTab.value] || [];
|
||
});
|
||
|
||
const agentBenefits = [
|
||
"products.pricing.agentBenefits.0",
|
||
"products.pricing.agentBenefits.1",
|
||
"products.pricing.agentBenefits.2",
|
||
"products.pricing.agentBenefits.3",
|
||
];
|
||
</script>
|