529 lines
18 KiB
Vue
529 lines
18 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 英雄区域 -->
|
||
<HeroBanner
|
||
:titleKey="'home.hero.title'"
|
||
:subtitleKey="'home.hero.subtitle'"
|
||
:descriptionKey="'home.hero.description'"
|
||
bgImage="/images/index/banner.webp"
|
||
>
|
||
<a
|
||
href="#features"
|
||
class="w-full sm:w-auto px-6 py-2.5 bg-primary hover:bg-primary/90 text-white font-medium rounded-md transition-colors duration-300 text-sm text-center shadow-md hover:shadow-lg"
|
||
>{{ $t("home.hero.cta") }}</a
|
||
>
|
||
<a
|
||
href="/contact"
|
||
class="w-full sm:w-auto px-6 py-2.5 bg-transparent hover:bg-white/10 text-white font-medium rounded-md transition-colors duration-300 text-sm border border-white text-center shadow-sm hover:shadow-md"
|
||
>{{ $t("home.hero.contact") }}</a
|
||
>
|
||
</HeroBanner>
|
||
|
||
<Service id="features" />
|
||
|
||
<!-- AWS开通流程 -->
|
||
<Process />
|
||
|
||
<!-- 为什么选择AWS -->
|
||
<section class="bg-light-gray py-20 dark:bg-gray-800">
|
||
<div class="container">
|
||
<div class="max-w-4xl mx-auto text-center mb-16">
|
||
<h2
|
||
class="text-4xl md:text-[40px] font-bold text-[#333333] dark:text-white mb-6 leading-tight"
|
||
>
|
||
{{ $t("home.features.title") }}
|
||
</h2>
|
||
<p
|
||
class="text-xl md:text-[20px] text-[#333333] dark:text-gray-200 mb-4 leading-relaxed"
|
||
>
|
||
{{ $t("home.features.subtitle") }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<!-- 安全可靠 -->
|
||
<div class="bg-white dark:bg-gray-700 p-8 text-center">
|
||
<div
|
||
class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
|
||
>
|
||
<i
|
||
class="fas fa-shield-alt text-[#0066CC] dark:text-[#4da6ff] text-5xl"
|
||
></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
|
||
{{ $t("home.features.items.security.title") }}
|
||
</h3>
|
||
<p
|
||
class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
|
||
>
|
||
{{ $t("home.features.items.security.description") }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 高性能 -->
|
||
<div class="bg-white dark:bg-gray-700 p-8 text-center">
|
||
<div
|
||
class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
|
||
>
|
||
<i
|
||
class="fas fa-chart-line text-[#0066CC] dark:text-[#4da6ff] text-5xl"
|
||
></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
|
||
{{ $t("home.features.items.performance.title") }}
|
||
</h3>
|
||
<p
|
||
class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
|
||
>
|
||
{{ $t("home.features.items.performance.description") }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 成本优化 -->
|
||
<div class="bg-white dark:bg-gray-700 p-8 text-center">
|
||
<div
|
||
class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
|
||
>
|
||
<i
|
||
class="fas fa-dollar-sign text-[#0066CC] dark:text-[#4da6ff] text-5xl"
|
||
></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
|
||
{{ $t("home.features.items.cost.title") }}
|
||
</h3>
|
||
<p
|
||
class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
|
||
>
|
||
{{ $t("home.features.items.cost.description") }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 弹性伸缩 -->
|
||
<div class="bg-white dark:bg-gray-700 p-8 text-center">
|
||
<div
|
||
class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
|
||
>
|
||
<i
|
||
class="fas fa-expand-arrows-alt text-[#0066CC] dark:text-[#4da6ff] text-5xl"
|
||
></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
|
||
{{ $t("home.features.items.elastic.title") }}
|
||
</h3>
|
||
<p
|
||
class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
|
||
>
|
||
{{ $t("home.features.items.elastic.description") }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 丰富工具 -->
|
||
<div class="bg-white dark:bg-gray-700 p-8 text-center">
|
||
<div
|
||
class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
|
||
>
|
||
<i
|
||
class="fas fa-tools text-[#0066CC] dark:text-[#4da6ff] text-5xl"
|
||
></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
|
||
{{ $t("home.features.items.tools.title") }}
|
||
</h3>
|
||
<p
|
||
class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
|
||
>
|
||
{{ $t("home.features.items.tools.description") }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 专业支持 -->
|
||
<div class="bg-white dark:bg-gray-700 p-8 text-center">
|
||
<div
|
||
class="w-20 h-20 flex items-center justify-center mb-6 mx-auto"
|
||
>
|
||
<i
|
||
class="fas fa-headset text-[#0066CC] dark:text-[#4da6ff] text-5xl"
|
||
></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-4 text-center dark:text-white">
|
||
{{ $t("home.features.items.support.title") }}
|
||
</h3>
|
||
<p
|
||
class="text-gray-600 dark:text-gray-300 leading-relaxed text-center"
|
||
>
|
||
{{ $t("home.features.items.support.description") }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心产品 -->
|
||
<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("home.products.title") }}
|
||
</h2>
|
||
<p class="text-xl text-gray-600 dark:text-gray-300 leading-relaxed">
|
||
{{ $t("home.products.subtitle") }}
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8">
|
||
<div
|
||
v-for="(product, key) in productsData"
|
||
:key="key"
|
||
class="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||
>
|
||
<div
|
||
class="h-48 bg-cover bg-center"
|
||
:style="`background-image: url('/images/index/${key}.png')`"
|
||
>
|
||
<div class="h-full w-full flex items-center justify-center">
|
||
<!-- 移除图标 -->
|
||
</div>
|
||
</div>
|
||
<div class="p-8">
|
||
<h3 class="text-2xl font-semibold mb-4 dark:text-white">
|
||
{{ $t(product.titleKey) }}
|
||
</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">
|
||
{{ $t(product.descriptionKey) }}
|
||
</p>
|
||
<NuxtLink
|
||
to="/products"
|
||
class="inline-flex items-center justify-center px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-md transition-colors duration-300"
|
||
>
|
||
{{ $t("home.products.more") }}
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-12">
|
||
<NuxtLink
|
||
to="/products"
|
||
class="inline-flex items-center px-8 py-3 border border-primary text-primary dark:text-[#4da6ff] dark:border-[#4da6ff] hover:bg-primary/5 dark:hover:bg-[#4da6ff]/10 rounded-md transition-colors duration-300"
|
||
>
|
||
{{ $t("home.products.viewAll") }}
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 客户案例 -->
|
||
<section class="py-16 relative dark:bg-gray-800">
|
||
<div
|
||
class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-10"
|
||
style="background-image: url('/images/bg/cases-bg.jpg')"
|
||
></div>
|
||
<div class="container relative z-10">
|
||
<h2 class="text-4xl font-bold text-center mb-4 dark:text-white">
|
||
{{ $t("home.cases.title") }}
|
||
</h2>
|
||
<p class="text-xl text-center text-gray-600 dark:text-gray-300 mb-12">
|
||
{{ $t("home.cases.subtitle") }}
|
||
</p>
|
||
|
||
<div class="flex flex-col space-y-8">
|
||
<div
|
||
v-for="(caseData, index) in casesData"
|
||
:key="index"
|
||
class="flex bg-white dark:bg-gray-700 rounded-lg shadow-md overflow-hidden"
|
||
>
|
||
<div
|
||
class="w-2/5 flex items-center justify-center overflow-hidden"
|
||
:style="` background-size: cover; background-position: center;`"
|
||
>
|
||
<div
|
||
class="w-full h-full flex items-center justify-center backdrop-blur-sm p-4"
|
||
>
|
||
<img
|
||
:src="caseData.image"
|
||
:alt="caseData.title"
|
||
class="w-full h-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="w-3/5 p-6">
|
||
<h3 class="text-2xl font-bold mb-4 dark:text-white">
|
||
{{ $t(caseData.title) }}
|
||
</h3>
|
||
<div class="mb-6">
|
||
<p
|
||
v-for="(highlight, highlightIndex) in caseData.highlights"
|
||
:key="highlightIndex"
|
||
class="text-gray-600 dark:text-gray-300 text-sm flex items-center mb-2"
|
||
>
|
||
<span
|
||
class="w-1 h-1 rounded-full bg-gray-500 dark:bg-gray-400 mr-2"
|
||
></span>
|
||
{{ $t(highlight) }}
|
||
</p>
|
||
</div>
|
||
<a
|
||
:href="caseData.link"
|
||
class="inline-flex items-center text-primary dark:text-[#4da6ff] hover:text-primary/90 bg-white dark:bg-gray-700 border border-primary dark:border-[#4da6ff] px-4 py-2 rounded-md"
|
||
>
|
||
{{ $t(caseData.button) }}
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-12">
|
||
<NuxtLink
|
||
to="/cases"
|
||
class="inline-flex items-center px-8 py-3 border border-primary dark:border-[#4da6ff] text-primary dark:text-[#4da6ff] hover:bg-primary/5 dark:hover:bg-[#4da6ff]/10 rounded-md transition-colors duration-300"
|
||
>
|
||
{{ $t("home.cases.readMore") }}
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AWS资讯 -->
|
||
<section class="py-10 md:py-20 bg-white dark:bg-gray-900">
|
||
<div class="container">
|
||
<h2
|
||
class="text-2xl md:text-4xl font-bold text-center text-[#333333] dark:text-white mb-8 md:mb-16"
|
||
>
|
||
{{ $t("home.awsnews.title") }}
|
||
</h2>
|
||
|
||
<div
|
||
class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 max-w-5xl mx-auto"
|
||
>
|
||
<NuxtLink
|
||
v-for="(item, index) in news"
|
||
:key="index"
|
||
:to="`/awsnews/${item.path.split('/').pop()}`"
|
||
class="group"
|
||
>
|
||
<div
|
||
class="flex flex-col bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 p-4 md:p-6 min-h-[160px] md:h-[200px] border border-gray-100 dark:border-gray-600 hover:border-primary/20 dark:hover:border-[#4da6ff]/20 hover:shadow-lg rounded-lg"
|
||
>
|
||
<h3
|
||
class="text-lg md:text-xl font-medium text-[#333333] dark:text-white group-hover:text-[#0066CC] dark:group-hover:text-[#4da6ff] mb-2 md:mb-3 line-clamp-1 min-h-[2rem] truncate"
|
||
>
|
||
{{ item.title }}
|
||
</h3>
|
||
<p
|
||
class="text-xs md:text-sm text-gray-900 dark:text-gray-300 mb-1 md:mb-2"
|
||
>
|
||
{{ item.date }}
|
||
</p>
|
||
<p class="text-gray-500 dark:text-gray-300 line-clamp-2">
|
||
{{ item.description }}
|
||
</p>
|
||
<div
|
||
class="mt-auto pt-2 md:pt-3 text-primary dark:text-[#4da6ff] text-xs md:text-sm group-hover:translate-x-2 transition-transform duration-300"
|
||
>
|
||
<NuxtLink :to="`/awsnews/${item.path.split('/').pop()}`">
|
||
{{ $t("home.awsnews.readmore") }} →
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 开启云计算之旅 -->
|
||
<section class="py-20 bg-[#0066CC] relative overflow-hidden">
|
||
<div class="container relative z-10">
|
||
<div class="max-w-4xl mx-auto text-center text-white">
|
||
<h2 class="text-4xl font-bold mb-6">
|
||
{{ $t("home.startJourney.title") }}
|
||
</h2>
|
||
<p class="text-xl mb-12">{{ $t("home.startJourney.subtitle") }}</p>
|
||
<NuxtLink
|
||
to="/contact"
|
||
class="inline-flex items-center px-8 py-4 bg-white text-[#0066CC] rounded-lg hover:bg-opacity-90 transition-colors duration-300"
|
||
>
|
||
{{ $t("home.startJourney.button") }}
|
||
<img
|
||
src="/images/index/call.svg"
|
||
alt="contact"
|
||
class="w-6 h-6 mx-2"
|
||
/>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useAsyncData, useHead } from "nuxt/app";
|
||
import { onMounted, ref } from "vue";
|
||
import { useI18n } from "vue-i18n";
|
||
const { t } = useI18n(); // 添加页面元数据
|
||
useHead({
|
||
title: () => t("meta.home.title"),
|
||
meta: [
|
||
{ name: "description", content: () => t("meta.home.description") },
|
||
{ name: "keywords", content: () => t("meta.home.keywords") },
|
||
],
|
||
});
|
||
const news = ref<NewsItem[]>([]);
|
||
|
||
interface NewsItem {
|
||
title: string;
|
||
date: string;
|
||
description: string;
|
||
path: string;
|
||
}
|
||
|
||
// 获取新闻数据
|
||
const getNews = async () => {
|
||
// 使用useAsyncData包装异步获取文章的逻辑
|
||
const { data } = await useAsyncData("newsest-articles", async () => {
|
||
try {
|
||
// 使用Nuxt Content模块的content()函数获取文章
|
||
const articles = await $fetch("/api/_content/query", {
|
||
method: "POST",
|
||
body: {
|
||
where: { _path: { $contains: "newsest" } },
|
||
sort: [{ date: -1 }],
|
||
limit: 4,
|
||
},
|
||
});
|
||
|
||
console.log("获取的最新文章:", articles);
|
||
|
||
if (Array.isArray(articles) && articles.length > 0) {
|
||
// 有文章数据，进行格式化
|
||
return articles.map((article: any) => ({
|
||
title: article.title || "",
|
||
date: article.date || (article.meta && article.meta.date) || "",
|
||
description: article.description || "",
|
||
path: article._path || "",
|
||
}));
|
||
} else {
|
||
// 没有找到文章，使用默认数据
|
||
return getDefaultNews();
|
||
}
|
||
} catch (error) {
|
||
console.error("获取新闻数据错误:", error);
|
||
// 出错时使用默认数据
|
||
return getDefaultNews();
|
||
}
|
||
});
|
||
|
||
// 更新news.value
|
||
if (data.value) {
|
||
news.value = data.value;
|
||
}
|
||
};
|
||
|
||
// 默认新闻数据
|
||
const getDefaultNews = () => {
|
||
return [
|
||
{
|
||
title: "AWS推出新一代EC2计算优化型实例：C7g",
|
||
date: "2025.05.15",
|
||
description:
|
||
"亚马逊云科技推出基于AWS Graviton3处理器的新一代计算优化型EC2实例，为计算密集型工作负载提供更高性能和能效",
|
||
path: "aws-ec2-new-instance-types",
|
||
},
|
||
{
|
||
title: "Amazon Bedrock现已支持Anthropic Claude 3.5 Sonnet模型",
|
||
date: "2024.03.22",
|
||
description:
|
||
"AWS宣布在Amazon Bedrock上推出Anthropic的最新生成式AI模型Claude 3.5 Sonnet，帮助企业构建更智能的AI应用",
|
||
path: "amazon-bedrock-claude-3-5-sonnet",
|
||
},
|
||
{
|
||
title: "AWS Shield Advanced增强功能助力企业应对复杂DDoS攻击",
|
||
date: "2024.06.01",
|
||
description:
|
||
"亚马逊云科技宣布AWS Shield Advanced新增智能威胁检测和自动缓解功能，为企业提供更强大的DDoS防护能力",
|
||
path: "aws-shield-advanced-enhancements",
|
||
},
|
||
{
|
||
title: "RDS数据库服务新增支持MongoDB引擎",
|
||
date: "2024.06.15",
|
||
description:
|
||
"亚马逊云科技宣布RDS数据库服务新增支持MongoDB引擎，为企业提供更灵活的数据库解决方案",
|
||
path: "rds",
|
||
},
|
||
];
|
||
};
|
||
|
||
// 立即调用获取新闻函数，不需要等待组件挂载
|
||
getNews();
|
||
|
||
// 在组件挂载后重新获取一次，以确保在客户端导航时也能正确加载
|
||
onMounted(() => {
|
||
getNews();
|
||
});
|
||
|
||
// AWS特性数据
|
||
const featuresData = {
|
||
security: {
|
||
icon: "fas fa-shield-alt",
|
||
titleKey: "home.features.items.security.title",
|
||
descriptionKey: "home.features.items.security.description",
|
||
},
|
||
performance: {
|
||
icon: "fas fa-bolt",
|
||
titleKey: "home.features.items.performance.title",
|
||
descriptionKey: "home.features.items.performance.description",
|
||
},
|
||
cost: {
|
||
icon: "fas fa-dollar-sign",
|
||
titleKey: "home.features.items.cost.title",
|
||
descriptionKey: "home.features.items.cost.description",
|
||
},
|
||
};
|
||
|
||
// 核心产品数据
|
||
const productsData = {
|
||
ec2: {
|
||
icon: "fas fa-server",
|
||
titleKey: "home.products.items.ec2.title",
|
||
descriptionKey: "home.products.items.ec2.description",
|
||
},
|
||
s3: {
|
||
icon: "fas fa-database",
|
||
titleKey: "home.products.items.s3.title",
|
||
descriptionKey: "home.products.items.s3.description",
|
||
},
|
||
rds: {
|
||
icon: "fas fa-network-wired",
|
||
titleKey: "home.products.items.rds.title",
|
||
descriptionKey: "home.products.items.rds.description",
|
||
},
|
||
};
|
||
|
||
// 客户案例数据（国际化）
|
||
const casesData = [
|
||
{
|
||
image: "/images/index/DBS.svg",
|
||
title: "home.cases.items.case1.title",
|
||
highlights: [
|
||
"home.cases.items.case1.description1",
|
||
"home.cases.items.case1.description2",
|
||
],
|
||
link: "/cases",
|
||
button: "home.cases.readMore",
|
||
},
|
||
{
|
||
image: "/images/index/market.svg",
|
||
title: "home.cases.items.case2.title",
|
||
highlights: [
|
||
"home.cases.items.case2.description1",
|
||
"home.cases.items.case2.description2",
|
||
],
|
||
link: "/cases",
|
||
button: "home.cases.readMore",
|
||
},
|
||
];
|
||
</script>
|