first commit
This commit is contained in:
parent
34b1dda423
commit
f793e1a9e6
283
about.html
Normal file
283
about.html
Normal file
@ -0,0 +1,283 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AWS云服务专家 - 关于我们</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="src/css/styles.css">
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-white">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-[#232F3E] shadow-md fixed w-full z-50">
|
||||||
|
<div class="container mx-auto px-4 py-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<a href="index.html" class="flex items-center text-white">
|
||||||
|
<i class="fas fa-cloud text-2xl mr-2"></i>
|
||||||
|
<span class="text-xl font-bold">云服务专家</span>
|
||||||
|
</a>
|
||||||
|
<!-- 移动端菜单按钮 -->
|
||||||
|
<button class="md:hidden text-white mobile-menu-button" aria-label="打开菜单">
|
||||||
|
<i class="fas fa-bars text-2xl"></i>
|
||||||
|
</button>
|
||||||
|
<!-- 桌面端导航 -->
|
||||||
|
<div class="hidden md:flex space-x-6">
|
||||||
|
<a href="index.html" class="text-white/85 hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 移动端菜单 -->
|
||||||
|
<div class="md:hidden hidden mobile-menu">
|
||||||
|
<div class="flex flex-col space-y-4 mt-4">
|
||||||
|
<a href="index.html" class="text-white/85 hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<section class="relative bg-gradient-to-b from-[#232F3E]/80 to-[#232F3E]/90 text-white py-24 md:py-32">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">关于我们</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">专业的AWS云服务解决方案提供商，助力企业数字化转型</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 公司简介 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-4xl font-bold text-[#333333] mb-8 mt-24">公司简介</h2>
|
||||||
|
<p class="text-gray-600 mb-4 text-lg leading-relaxed">云服务专家成立于2018年，是AWS授权的云服务解决方案提供商。我们致力于为企业提供专业的云计算咨询、迁移、运维和优化服务。</p>
|
||||||
|
<p class="text-gray-600 mb-8 text-lg leading-relaxed">作为AWS高级合作伙伴，我们拥有丰富的云服务实施经验和专业的技术团队，已成功帮助数百家企业完成云上转型。</p>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li class="flex items-center text-lg">
|
||||||
|
<i class="fas fa-check-circle text-green-500 mr-3"></i>
|
||||||
|
<span class="text-gray-700">AWS高级合作伙伴认证</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-lg">
|
||||||
|
<i class="fas fa-check-circle text-green-500 mr-3"></i>
|
||||||
|
<span class="text-gray-700">100+成功案例</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center text-lg">
|
||||||
|
<i class="fas fa-check-circle text-green-500 mr-3"></i>
|
||||||
|
<span class="text-gray-700">50+AWS认证工程师</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 h-80 rounded-lg flex items-center justify-center">
|
||||||
|
<i class="fas fa-building text-8xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 我们的优势 -->
|
||||||
|
<section class="section 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 mt-24">我们的优势</h2>
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">专业技术团队，丰富项目经验</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-4 gap-8">
|
||||||
|
<div 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-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-award text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4">专业认证</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">AWS官方认证的高级合作伙伴，拥有多项专业认证</p>
|
||||||
|
</div>
|
||||||
|
<div 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-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-users text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4">专业团队</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">50+位AWS认证工程师，平均5年以上云服务经验</p>
|
||||||
|
</div>
|
||||||
|
<div 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-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-tools text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4">技术实力</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">掌握AWS全线产品，具备丰富的实施和运维经验</p>
|
||||||
|
</div>
|
||||||
|
<div 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-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-headset text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4">服务保障</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">7x24小时技术支持，确保客户业务稳定运行</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 企业文化 -->
|
||||||
|
<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 mt-24">企业文化</h2>
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">以客户为中心，追求卓越服务</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-bullseye text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">企业使命</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed text-center">助力企业数字化转型，提供专业可靠的云计算服务</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-eye text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">企业愿景</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed text-center">成为中国最值得信赖的云服务解决方案提供商</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-heart text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">核心价值观</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed text-center">专业、创新、诚信、共赢</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 发展历程 -->
|
||||||
|
<section class="section 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 mt-24">发展历程</h2>
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">见证我们的成长与进步</p>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-8">
|
||||||
|
<div class="flex flex-col md:flex-row items-center gap-8">
|
||||||
|
<div class="w-full md:w-1/4 text-right">
|
||||||
|
<h3 class="text-2xl font-semibold text-[#FF9900]">2023年</h3>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-16 bg-[#FF9900] hidden md:block"></div>
|
||||||
|
<div class="w-full md:w-3/4">
|
||||||
|
<p class="text-gray-600 text-lg leading-relaxed">成为AWS高级合作伙伴，服务客户数量突破500家</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col md:flex-row items-center gap-8">
|
||||||
|
<div class="w-full md:w-1/4 text-right">
|
||||||
|
<h3 class="text-2xl font-semibold text-[#FF9900]">2021年</h3>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-16 bg-[#FF9900] hidden md:block"></div>
|
||||||
|
<div class="w-full md:w-3/4">
|
||||||
|
<p class="text-gray-600 text-lg leading-relaxed">获得AWS标准合作伙伴认证，团队规模扩大到50人</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col md:flex-row items-center gap-8">
|
||||||
|
<div class="w-full md:w-1/4 text-right">
|
||||||
|
<h3 class="text-2xl font-semibold text-[#FF9900]">2018年</h3>
|
||||||
|
</div>
|
||||||
|
<div class="w-px h-16 bg-[#FF9900] hidden md:block"></div>
|
||||||
|
<div class="w-full md:w-3/4">
|
||||||
|
<p class="text-gray-600 text-lg leading-relaxed">公司成立，开始提供AWS云服务解决方案</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 联系我们 -->
|
||||||
|
<section class="section bg-[#232F3E] 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">欢迎联系我们，了解更多公司信息和服务详情</p>
|
||||||
|
<a href="contact.html" 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>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="bg-[#232F3E] text-white py-12">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid md:grid-cols-4 gap-8">
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">云服务专家</h5>
|
||||||
|
<p class="text-white/50 mb-4">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weixin"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weibo"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-linkedin"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">AWS产品</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">EC2 云服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">S3 对象存储</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">RDS 数据库服务</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">Lambda 无服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">更多产品...</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">解决方案</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">网站托管</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">企业上云</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">灾备方案</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">大数据分析</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">微服务架构</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">联系我们</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-map-marker-alt mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">北京市朝阳区某某大厦</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-phone mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">400-123-4567</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-envelope mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">contact@example.com</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-white/25 mt-12 pt-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-white/50">© 2023 云服务专家. 保留所有权利</p>
|
||||||
|
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">隐私政策</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">服务条款</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">网站地图</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="src/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
262
cases.html
Normal file
262
cases.html
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AWS云服务专家 - 客户案例</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="src/css/styles.css">
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-white">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-[#232F3E] shadow-md fixed w-full z-50">
|
||||||
|
<div class="container mx-auto px-4 py-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<a href="index.html" class="flex items-center text-white">
|
||||||
|
<i class="fas fa-cloud text-2xl mr-2"></i>
|
||||||
|
<span class="text-xl font-bold">云服务专家</span>
|
||||||
|
</a>
|
||||||
|
<!-- 移动端菜单按钮 -->
|
||||||
|
<button class="md:hidden text-white mobile-menu-button" aria-label="打开菜单">
|
||||||
|
<i class="fas fa-bars text-2xl"></i>
|
||||||
|
</button>
|
||||||
|
<!-- 桌面端导航 -->
|
||||||
|
<div class="hidden md:flex space-x-6">
|
||||||
|
<a href="index.html" class="text-white/85 hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 移动端菜单 -->
|
||||||
|
<div class="md:hidden hidden mobile-menu">
|
||||||
|
<div class="flex flex-col space-y-4 mt-4">
|
||||||
|
<a href="index.html" class="text-white hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<section class="relative bg-gradient-to-b from-[#232F3E]/80 to-[#232F3E]/90 text-white py-24 md:py-32">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">成功案例</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">了解我们的客户如何通过AWS云服务实现业务增长</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 案例筛选 -->
|
||||||
|
<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">精选案例</h2>
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">探索不同行业的成功实践</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap justify-center gap-4 mb-16">
|
||||||
|
<button class="px-6 py-3 rounded-full bg-[#FF9900] text-white hover:bg-[#FF9900]/90 transition-colors duration-300">全部</button>
|
||||||
|
<button class="px-6 py-3 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300">金融</button>
|
||||||
|
<button class="px-6 py-3 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300">电商</button>
|
||||||
|
<button class="px-6 py-3 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300">教育</button>
|
||||||
|
<button class="px-6 py-3 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors duration-300">医疗</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 案例展示 -->
|
||||||
|
<section class="section bg-gray-50">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid md:grid-cols-2 gap-12">
|
||||||
|
<!-- 案例1 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-64 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-building text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<span class="px-4 py-1 bg-[#FF9900]/10 text-[#FF9900] rounded-full text-sm">金融行业</span>
|
||||||
|
<span class="ml-4 text-gray-500">2023年12月</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">某大型银行数字化转型</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">通过AWS云服务实现核心业务系统上云，提升系统性能和安全性，降低运维成本</p>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-6">
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">EC2</span>
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">RDS</span>
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">S3</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
查看详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 案例2 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-64 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-shopping-cart text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<span class="px-4 py-1 bg-[#FF9900]/10 text-[#FF9900] rounded-full text-sm">电商行业</span>
|
||||||
|
<span class="ml-4 text-gray-500">2023年10月</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">某知名电商平台架构优化</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">利用AWS云服务实现弹性扩展，应对大促期间流量高峰，提升用户体验</p>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-6">
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">ECS</span>
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">DynamoDB</span>
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">CloudFront</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
查看详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 案例3 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-64 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-graduation-cap text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<span class="px-4 py-1 bg-[#FF9900]/10 text-[#FF9900] rounded-full text-sm">教育行业</span>
|
||||||
|
<span class="ml-4 text-gray-500">2023年8月</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">某高校在线教育平台建设</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">基于AWS云服务构建在线教育平台，支持大规模在线课程和直播教学</p>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-6">
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Lambda</span>
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">S3</span>
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">CloudFront</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
查看详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 案例4 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-64 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-hospital text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<span class="px-4 py-1 bg-[#FF9900]/10 text-[#FF9900] rounded-full text-sm">医疗行业</span>
|
||||||
|
<span class="ml-4 text-gray-500">2023年6月</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">某三甲医院医疗云平台</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">利用AWS云服务构建医疗云平台，实现医疗数据安全存储和共享</p>
|
||||||
|
<div class="flex flex-wrap gap-2 mb-6">
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">RDS</span>
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">S3</span>
|
||||||
|
<span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">KMS</span>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
查看详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 联系我们 -->
|
||||||
|
<section class="section bg-[#232F3E] 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">联系我们的解决方案专家，获取更多行业案例和定制化方案</p>
|
||||||
|
<a href="contact.html" class="inline-block bg-white text-black px-8 py-4 rounded hover:bg-gray-100 transition-colors duration-300">
|
||||||
|
免费咨询
|
||||||
|
<i class="fas fa-headset ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="bg-[#232F3E] text-white py-12">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid md:grid-cols-4 gap-8">
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">云服务专家</h5>
|
||||||
|
<p class="text-white/50 mb-4">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weixin"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weibo"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-linkedin"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">AWS产品</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">EC2 云服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">S3 对象存储</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">RDS 数据库服务</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">Lambda 无服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">更多产品...</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">解决方案</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">网站托管</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">企业上云</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">灾备方案</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">大数据分析</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">微服务架构</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">联系我们</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-map-marker-alt mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">北京市朝阳区某某大厦</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-phone mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">400-123-4567</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-envelope mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">contact@example.com</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-white/25 mt-12 pt-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-white/50">© 2023 云服务专家. 保留所有权利</p>
|
||||||
|
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">隐私政策</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">服务条款</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">网站地图</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="src/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
361
contact.html
Normal file
361
contact.html
Normal file
@ -0,0 +1,361 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AWS云服务专家 - 联系我们</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="src/css/styles.css">
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=YOUR_AMAP_KEY"></script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-white">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-[#232F3E] shadow-md fixed w-full z-50">
|
||||||
|
<div class="container mx-auto px-4 py-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<a href="index.html" class="flex items-center text-white">
|
||||||
|
<i class="fas fa-cloud text-2xl mr-2"></i>
|
||||||
|
<span class="text-xl font-bold">云服务专家</span>
|
||||||
|
</a>
|
||||||
|
<!-- 移动端菜单按钮 -->
|
||||||
|
<button class="md:hidden text-white mobile-menu-button" aria-label="打开菜单">
|
||||||
|
<i class="fas fa-bars text-2xl"></i>
|
||||||
|
</button>
|
||||||
|
<!-- 桌面端导航 -->
|
||||||
|
<div class="hidden md:flex space-x-6">
|
||||||
|
<a href="index.html" class="text-white/85 hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 移动端菜单 -->
|
||||||
|
<div class="md:hidden hidden mobile-menu">
|
||||||
|
<div class="flex flex-col space-y-4 mt-4">
|
||||||
|
<a href="index.html" class="text-white/85 hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<section class="relative bg-gradient-to-b from-[#232F3E]/80 to-[#232F3E]/90 text-white py-24 md:py-32">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">联系我们</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">随时欢迎您的咨询，我们将为您提供专业的云服务解决方案</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 联系方式 -->
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mb-16">
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-phone text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-center">电话咨询</h3>
|
||||||
|
<p class="text-gray-600 mb-2 text-center">周一至周日 9:00-21:00</p>
|
||||||
|
<p class="text-2xl font-semibold text-[#FF9900] text-center">400-123-4567</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-envelope text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-center">邮件咨询</h3>
|
||||||
|
<p class="text-gray-600 mb-2 text-center">7*24小时邮件支持</p>
|
||||||
|
<p class="text-2xl font-semibold text-[#FF9900] text-center">contact@example.com</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="w-20 h-20 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fab fa-weixin text-[#FF9900] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-center">微信咨询</h3>
|
||||||
|
<p class="text-gray-600 mb-4 text-center">扫描下方二维码</p>
|
||||||
|
<div class="w-32 h-32 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-lg mx-auto flex items-center justify-center">
|
||||||
|
<i class="fas fa-qrcode text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-12">
|
||||||
|
<!-- 联系表单 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg">
|
||||||
|
<h2 class="text-3xl font-bold mb-8 text-center">在线咨询</h2>
|
||||||
|
<form action="#" method="POST" class="space-y-6">
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2" for="name">
|
||||||
|
姓名 <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input type="text" id="name" name="name" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2" for="company">
|
||||||
|
公司名称 <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input type="text" id="company" name="company" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2" for="email">
|
||||||
|
邮箱 <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input type="email" id="email" name="email" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2" for="phone">
|
||||||
|
电话 <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input type="tel" id="phone" name="phone" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2" for="service">
|
||||||
|
咨询服务 <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select id="service" name="service" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300">
|
||||||
|
<option value="">请选择咨询服务</option>
|
||||||
|
<option value="cloud">云服务咨询</option>
|
||||||
|
<option value="migration">上云迁移</option>
|
||||||
|
<option value="solution">解决方案咨询</option>
|
||||||
|
<option value="price">价格咨询</option>
|
||||||
|
<option value="other">其他</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2" for="message">
|
||||||
|
咨询内容 <span class="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<textarea id="message" name="message" rows="4" required
|
||||||
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#FF9900] focus:border-transparent transition-colors duration-300"></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit"
|
||||||
|
class="w-full bg-[#FF9900] text-white py-4 px-6 rounded-lg hover:bg-[#FF9900]/90 transition-colors duration-300 text-lg font-semibold">
|
||||||
|
提交咨询
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 公司地址 -->
|
||||||
|
<div>
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg mb-8">
|
||||||
|
<h2 class="text-3xl font-bold mb-8 text-center">公司地址</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<i class="fas fa-map-marker-alt text-[#FF9900] text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-semibold mb-2">北京总部</h4>
|
||||||
|
<p class="text-gray-600">北京市朝阳区某某大厦10层</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<i class="fas fa-subway text-[#FF9900] text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-semibold mb-2">交通方式</h4>
|
||||||
|
<p class="text-gray-600">地铁6号线某某站A出口步行5分钟</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<i class="far fa-clock text-[#FF9900] text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-xl font-semibold mb-2">办公时间</h4>
|
||||||
|
<p class="text-gray-600">周一至周五: 9:00-18:00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 地图 -->
|
||||||
|
<div id="map-container" class="w-full h-96 rounded-lg shadow-lg overflow-hidden"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 常见问题 -->
|
||||||
|
<section class="section bg-gray-50">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-4xl font-bold text-center mb-6">常见问题</h2>
|
||||||
|
<p class="text-xl text-center text-gray-600 mb-12">解答您最关心的问题</p>
|
||||||
|
<div class="grid md:grid-cols-2 gap-8">
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">如何开始使用AWS云服务？</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">您可以通过我们的咨询服务，获取专业的AWS云服务解决方案建议。我们的团队将根据您的具体需求，为您提供最适合的云服务方案。</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">如何获取技术支持？</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">我们提供7*24小时技术支持服务，您可以通过电话、邮件或在线咨询等方式联系我们的技术支持团队。</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">如何计算使用成本？</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">我们提供详细的成本评估服务，可以根据您的具体使用场景和需求，为您提供准确的成本预估和优化建议。</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">如何申请试用服务？</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">您可以通过在线咨询或直接联系我们的销售团队，申请AWS云服务的试用。我们将为您提供专业的试用方案和技术支持。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="bg-[#232F3E] text-white py-12">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid md:grid-cols-4 gap-8">
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">云服务专家</h5>
|
||||||
|
<p class="text-white/50 mb-4">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weixin"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weibo"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-linkedin"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">AWS产品</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">EC2 云服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">S3 对象存储</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">RDS 数据库服务</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">Lambda 无服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">更多产品...</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">解决方案</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">网站托管</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">企业上云</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">灾备方案</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">大数据分析</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">微服务架构</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">联系我们</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-map-marker-alt mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">北京市朝阳区某某大厦</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-phone mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">400-123-4567</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-envelope mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">contact@example.com</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-white/25 mt-12 pt-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-white/50">© 2023 云服务专家. 保留所有权利</p>
|
||||||
|
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">隐私政策</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">服务条款</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">网站地图</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="src/js/main.js"></script>
|
||||||
|
<script>
|
||||||
|
window.onload = function() {
|
||||||
|
// 初始化地图
|
||||||
|
var map = new AMap.Map('map-container', {
|
||||||
|
zoom: 15,
|
||||||
|
center: [116.397428, 39.90923],
|
||||||
|
viewMode: '3D',
|
||||||
|
mapStyle: 'amap://styles/fresh',
|
||||||
|
pitch: 35
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加控件
|
||||||
|
map.addControl(new AMap.ToolBar({
|
||||||
|
position: 'RB'
|
||||||
|
}));
|
||||||
|
map.addControl(new AMap.Scale());
|
||||||
|
|
||||||
|
// 创建标记
|
||||||
|
var marker = new AMap.Marker({
|
||||||
|
position: [116.397428, 39.90923],
|
||||||
|
animation: 'AMAP_ANIMATION_BOUNCE',
|
||||||
|
title: '我们的办公室'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 创建信息窗体
|
||||||
|
var infoWindow = new AMap.InfoWindow({
|
||||||
|
isCustom: true,
|
||||||
|
content: `
|
||||||
|
<div class="bg-white p-4 rounded-lg shadow-lg">
|
||||||
|
<h3 class="text-xl font-bold mb-2">AWS云服务专家</h3>
|
||||||
|
<p class="text-gray-600 mb-2">
|
||||||
|
<i class="fas fa-map-marker-alt mr-2"></i>
|
||||||
|
北京市朝阳区xxx街道xxx号
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600 mb-2">
|
||||||
|
<i class="fas fa-phone mr-2"></i>
|
||||||
|
010-xxxxxxxx
|
||||||
|
</p>
|
||||||
|
<p class="text-gray-600">
|
||||||
|
<i class="fas fa-envelope mr-2"></i>
|
||||||
|
contact@example.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
offset: new AMap.Pixel(0, -30)
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加标记到地图
|
||||||
|
marker.setMap(map);
|
||||||
|
|
||||||
|
// 点击标记时打开信息窗体
|
||||||
|
marker.on('click', function() {
|
||||||
|
infoWindow.open(map, marker.getPosition());
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加鼠标悬停效果
|
||||||
|
marker.on('mouseover', function() {
|
||||||
|
marker.setAnimation('AMAP_ANIMATION_BOUNCE');
|
||||||
|
});
|
||||||
|
marker.on('mouseout', function() {
|
||||||
|
marker.setAnimation(null);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 自适应缩放
|
||||||
|
map.setFitView();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
356
index.html
Normal file
356
index.html
Normal file
@ -0,0 +1,356 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AWS云服务专家 - 首页</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="src/css/styles.css">
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-white">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-[#232F3E] shadow-md fixed w-full z-50">
|
||||||
|
<div class="container">
|
||||||
|
<div class="flex items-center justify-between h-16">
|
||||||
|
<a href="index.html" class="flex items-center text-white">
|
||||||
|
<i class="fas fa-cloud text-2xl mr-2"></i>
|
||||||
|
<span class="text-xl font-bold">云服务专家</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- 桌面端导航 -->
|
||||||
|
<div class="hidden md:flex items-center space-x-8">
|
||||||
|
<a href="index.html" class="text-white hover:text-[#FF9900] transition-colors duration-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 移动端菜单按钮 -->
|
||||||
|
<button class="md:hidden text-white p-2 rounded-lg hover:bg-white/10 transition-colors duration-300 mobile-menu-button" aria-label="打开菜单">
|
||||||
|
<i class="fas fa-bars text-xl"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 移动端菜单 -->
|
||||||
|
<div class="md:hidden hidden mobile-menu bg-[#232F3E] absolute top-16 left-0 right-0 shadow-lg">
|
||||||
|
<div class="container py-4">
|
||||||
|
<div class="flex flex-col space-y-4">
|
||||||
|
<a href="index.html" class="text-white hover:text-[#FF9900] transition-colors duration-300 py-2">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-[#FF9900] transition-colors duration-300 py-2">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 添加导航栏占位 -->
|
||||||
|
<div class="h-16"></div>
|
||||||
|
|
||||||
|
<!-- 英雄区域 -->
|
||||||
|
<section class="relative bg-gradient-to-b from-[#232F3E]/80 to-[#232F3E]/90 text-white py-24 md:py-32">
|
||||||
|
<div class="container">
|
||||||
|
<div class="max-w-3xl mx-auto text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">AWS云服务器专业代理商</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">为您的企业提供专业的AWS云服务解决方案，助力数字化转型</p>
|
||||||
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||||||
|
<a href="#features" class="btn-primary inline-flex items-center justify-center px-8 py-3 text-lg">了解AWS优势</a>
|
||||||
|
<a href="#contact" class="btn-secondary inline-flex items-center justify-center px-8 py-3 text-lg">联系顾问</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 为什么选择AWS -->
|
||||||
|
<section id="features" class="bg-[#F8F9FA] py-20">
|
||||||
|
<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] mb-6 leading-tight">AWS产品与服务</h2>
|
||||||
|
<p class="text-xl md:text-[20px] font-light text-[#333333] mb-4 leading-relaxed">全面的云计算产品线，满足您的各种业务需求</p>
|
||||||
|
<p class="text-base md:text-[16px] text-[#333333] leading-relaxed">作为AWS授权代理商，我们提供全系列AWS产品和服务，并为您提供专业的咨询<br>和支持，帮助您选择最适合的产品组合。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div 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-[#FF9900]/10 rounded-full flex items-center justify-center mb-6">
|
||||||
|
<i class="fas fa-shield-alt text-[#FF9900] text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4">安全可靠</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">AWS提供业界领先的安全服务，包括加密、防火墙和身份验证，保障您的数据安全</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div 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-[#FF9900]/10 rounded-full flex items-center justify-center mb-6">
|
||||||
|
<i class="fas fa-bolt text-[#FF9900] text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4">高性能</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">全球数据中心网络，低延迟高带宽，确保您的应用程序高效运行</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div 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-[#FF9900]/10 rounded-full flex items-center justify-center mb-6">
|
||||||
|
<i class="fas fa-dollar-sign text-[#FF9900] text-2xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4">成本优化</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">按需付费模式，无需前期投资，降低IT运营成本</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 服务优势 -->
|
||||||
|
<section 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="grid md:grid-cols-2 gap-8">
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="w-12 h-12 bg-[#0D6EFD]/10 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<i class="fas fa-check-circle text-[#0D6EFD] text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">官方授权</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">我们是AWS官方授权的合作伙伴，可提供正规授权和发票</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="w-12 h-12 bg-[#0D6EFD]/10 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<i class="fas fa-percentage text-[#0D6EFD] text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">价格优势</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">相比直接采购，我们能提供更具竞争力的价格和灵活的付款方式</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="w-12 h-12 bg-[#0D6EFD]/10 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<i class="fas fa-headset text-[#0D6EFD] text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">技术支持</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">专业的技术团队提供咨询、部署和运维服务，解决您的技术难题</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="w-12 h-12 bg-[#0D6EFD]/10 rounded-full flex items-center justify-center mr-4">
|
||||||
|
<i class="fas fa-graduation-cap text-[#0D6EFD] text-xl"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-semibold mb-3">培训服务</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">为您的团队提供专业的AWS技术培训，提升技术能力</p>
|
||||||
|
</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">AWS核心产品服务</h2>
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">全面的云服务产品线，满足各种业务需求</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-server text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">EC2 云服务器</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">可扩展的计算能力，适用于各种工作负载，从小型网站到企业级应用</p>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-database text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">S3 对象存储</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">安全、可靠的对象存储服务，适用于备份、归档和数据湖等场景</p>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-network-wired text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">RDS 关系型数据库</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">易于部署和管理的关系型数据库服务，支持多种主流数据库引擎</p>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 text-lg">
|
||||||
|
查看全部AWS产品
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 客户案例 -->
|
||||||
|
<section class="py-16 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-medium text-center mb-4">成功客户案例</h2>
|
||||||
|
<p class="text-xl text-center text-gray-600 mb-12">看看其他企业如何利用AWS云服务提升业务价值</p>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-8">
|
||||||
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
||||||
|
<div class="h-48 bg-gray-200"></div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-2xl font-semibold mb-2">某金融科技公司</h3>
|
||||||
|
<p class="text-gray-600 mb-4">通过迁移到AWS云服务，该公司将应用响应时间缩短了40%，并节省了30%的IT运营成本</p>
|
||||||
|
<a href="#" class="inline-block text-[#FF9900] hover:text-[#FF9900]/90">阅读详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
||||||
|
<div class="h-48 bg-gray-200"></div>
|
||||||
|
<div class="p-6">
|
||||||
|
<h3 class="text-2xl font-semibold mb-2">某大型电商平台</h3>
|
||||||
|
<p class="text-gray-600 mb-4">利用AWS弹性伸缩功能，该平台在促销活动期间轻松应对流量激增，确保了平台稳定性</p>
|
||||||
|
<a href="#" class="inline-block text-[#FF9900] hover:text-[#FF9900]/90">阅读详情</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center mt-8">
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
查看更多客户案例
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 联系我们 -->
|
||||||
|
<section id="contact" class="section bg-[#232F3E] text-white">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h2 class="heading-2 py-6 text-3xl">准备开启您的云计算之旅?</h2>
|
||||||
|
<p class="text-xl mb-8 max-w-2xl mx-auto">联系我们的顾问，获取专业的AWS云服务方案和优惠报价</p>
|
||||||
|
<a href="contact.html" class="inline-block bg-white text-black px-8 py-4 rounded hover:bg-gray-100">
|
||||||
|
免费咨询
|
||||||
|
<i class="fas fa-headset ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="bg-[#232F3E] text-white py-16">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid md:grid-cols-4 gap-12">
|
||||||
|
<div>
|
||||||
|
<h5 class="text-xl font-semibold mb-6">云服务专家</h5>
|
||||||
|
<p class="text-white/70 mb-6 leading-relaxed">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-colors duration-300">
|
||||||
|
<i class="fab fa-weixin text-lg"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-colors duration-300">
|
||||||
|
<i class="fab fa-weibo text-lg"></i>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition-colors duration-300">
|
||||||
|
<i class="fab fa-linkedin text-lg"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h5 class="text-xl font-semibold mb-6">AWS产品</h5>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">EC2 云服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">S3 对象存储</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">RDS 数据库服务</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">Lambda 无服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">更多产品...</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h5 class="text-xl font-semibold mb-6">解决方案</h5>
|
||||||
|
<ul class="space-y-3">
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">网站托管</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">企业上云</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">灾备方案</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">大数据分析</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-[#FF9900] transition-colors duration-300">微服务架构</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h5 class="text-xl font-semibold mb-6">联系我们</h5>
|
||||||
|
<ul class="space-y-4">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-map-marker-alt mt-1 mr-4 text-[#FF9900]"></i>
|
||||||
|
<span class="text-white/70">北京市朝阳区某某大厦</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-phone mt-1 mr-4 text-[#FF9900]"></i>
|
||||||
|
<span class="text-white/70">400-123-4567</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-envelope mt-1 mr-4 text-[#FF9900]"></i>
|
||||||
|
<span class="text-white/70">contact@example.com</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-white/10 mt-12 pt-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-white/50 mb-4 md:mb-0">© 2023 云服务专家. 保留所有权利</p>
|
||||||
|
<div class="flex space-x-6">
|
||||||
|
<a href="#" class="text-white/50 hover:text-[#FF9900] transition-colors duration-300">隐私政策</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-[#FF9900] transition-colors duration-300">服务条款</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-[#FF9900] transition-colors duration-300">网站地图</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="src/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
393
products.html
Normal file
393
products.html
Normal file
@ -0,0 +1,393 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AWS云服务专家 - 产品服务</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="src/css/styles.css">
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-white">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-[#232F3E] shadow-md fixed w-full z-50">
|
||||||
|
<div class="container mx-auto px-4 py-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<a href="index.html" class="flex items-center text-white">
|
||||||
|
<i class="fas fa-cloud text-2xl mr-2"></i>
|
||||||
|
<span class="text-xl font-bold">云服务专家</span>
|
||||||
|
</a>
|
||||||
|
<!-- 移动端菜单按钮 -->
|
||||||
|
<button class="md:hidden text-white mobile-menu-button" aria-label="打开菜单">
|
||||||
|
<i class="fas fa-bars text-2xl"></i>
|
||||||
|
</button>
|
||||||
|
<!-- 桌面端导航 -->
|
||||||
|
<div class="hidden md:flex space-x-6">
|
||||||
|
<a href="index.html" class="text-white/85 hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 移动端菜单 -->
|
||||||
|
<div class="md:hidden hidden mobile-menu">
|
||||||
|
<div class="flex flex-col space-y-4 mt-4">
|
||||||
|
<a href="index.html" class="text-white hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white/85 hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<section class="relative bg-gradient-to-b from-[#232F3E]/80 to-[#232F3E]/90 text-white py-24 md:py-32">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">AWS产品服务</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">全面的AWS云服务产品线，满足您的各种业务需求</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 计算服务 -->
|
||||||
|
<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">计算服务</h2>
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">灵活、可扩展的计算能力，支持各种工作负载</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-server text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">EC2 云服务器</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-4">可扩展的计算能力，适用于各种工作负载，从小型网站到企业级应用</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">多种实例类型选择</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">按需付费模式</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-cube text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">ECS 容器服务</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-4">高度可扩展的容器管理服务，支持Docker容器部署和管理</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">完全托管的容器服务</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">自动扩展和负载均衡</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-bolt text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">Lambda 无服务器</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-4">无需管理服务器即可运行代码，按实际使用量付费</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">自动扩展和负载均衡</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">按使用量计费</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 存储服务 -->
|
||||||
|
<section class="section 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">安全、可靠、可扩展的存储解决方案</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-database text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">S3 对象存储</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-4">安全、可靠的对象存储服务，适用于备份、归档和数据湖等场景</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">99.999999999%的持久性</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">无限扩展的存储空间</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-hdd text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">EBS 块存储</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-4">高性能的块存储服务，为EC2实例提供持久化存储</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">多种存储类型选择</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">支持快照备份</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-archive text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">Glacier 归档存储</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-4">经济高效的归档存储服务，适合长期数据保存</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">极低的存储成本</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">安全的数据归档</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 数据库服务 -->
|
||||||
|
<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">数据库服务</h2>
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">全托管的数据库服务，支持多种数据库引擎</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-network-wired text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">RDS 关系型数据库</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-4">易于部署和管理的关系型数据库服务，支持多种主流数据库引擎</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">支持多种数据库引擎</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">自动备份和恢复</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-database text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">DynamoDB NoSQL数据库</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-4">完全托管的NoSQL数据库服务，提供毫秒级延迟</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">自动扩展和负载均衡</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">毫秒级延迟</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-search text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">Elasticache 缓存服务</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-4">全托管的缓存服务，支持Redis和Memcached</p>
|
||||||
|
<ul class="space-y-2 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">支持Redis和Memcached</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-[#FF9900] mt-1 mr-2"></i>
|
||||||
|
<span class="text-gray-600">自动扩展和备份</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 联系我们 -->
|
||||||
|
<section class="section bg-[#232F3E] text-white">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h2 class="text-4xl font-bold mb-6">需要了解更多AWS产品?</h2>
|
||||||
|
<p class="text-xl mb-8 max-w-2xl mx-auto">联系我们的产品专家，获取专业的AWS产品咨询和方案建议</p>
|
||||||
|
<a href="contact.html" class="inline-block bg-white text-black px-8 py-4 rounded hover:bg-gray-100 transition-colors duration-300">
|
||||||
|
免费咨询
|
||||||
|
<i class="fas fa-headset ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="bg-[#232F3E] text-white py-12">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid md:grid-cols-4 gap-8">
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">云服务专家</h5>
|
||||||
|
<p class="text-white/50 mb-4">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weixin"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weibo"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-linkedin"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">AWS产品</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">EC2 云服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">S3 对象存储</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">RDS 数据库服务</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">Lambda 无服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">更多产品...</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">解决方案</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">网站托管</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">企业上云</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">灾备方案</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">大数据分析</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">微服务架构</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">联系我们</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-map-marker-alt mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">北京市朝阳区某某大厦</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-phone mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">400-123-4567</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-envelope mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">contact@example.com</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-white/25 mt-12 pt-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-white/50">© 2023 云服务专家. 保留所有权利</p>
|
||||||
|
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">隐私政策</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">服务条款</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">网站地图</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="src/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
367
solutions.html
Normal file
367
solutions.html
Normal file
@ -0,0 +1,367 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>AWS云服务专家 - 解决方案</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="src/css/styles.css">
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-white">
|
||||||
|
<!-- 导航栏 -->
|
||||||
|
<nav class="bg-[#232F3E] shadow-md fixed w-full z-50">
|
||||||
|
<div class="container mx-auto px-4 py-4">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<a href="index.html" class="flex items-center text-white">
|
||||||
|
<i class="fas fa-cloud text-2xl mr-2"></i>
|
||||||
|
<span class="text-xl font-bold">云服务专家</span>
|
||||||
|
</a>
|
||||||
|
<!-- 移动端菜单按钮 -->
|
||||||
|
<button class="md:hidden text-white mobile-menu-button" aria-label="打开菜单">
|
||||||
|
<i class="fas fa-bars text-2xl"></i>
|
||||||
|
</button>
|
||||||
|
<!-- 桌面端导航 -->
|
||||||
|
<div class="hidden md:flex space-x-6">
|
||||||
|
<a href="index.html" class="text-white/85 hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 移动端菜单 -->
|
||||||
|
<div class="md:hidden hidden mobile-menu">
|
||||||
|
<div class="flex flex-col space-y-4 mt-4">
|
||||||
|
<a href="index.html" class="text-white hover:text-gray-300">首页</a>
|
||||||
|
<a href="products.html" class="text-white/85 hover:text-gray-300">AWS产品</a>
|
||||||
|
<a href="solutions.html" class="text-white hover:text-gray-300">解决方案</a>
|
||||||
|
<a href="cases.html" class="text-white/85 hover:text-gray-300">客户案例</a>
|
||||||
|
<a href="about.html" class="text-white/85 hover:text-gray-300">关于我们</a>
|
||||||
|
<a href="contact.html" class="text-white/85 hover:text-gray-300">联系我们</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- 页面标题 -->
|
||||||
|
<section class="relative bg-gradient-to-b from-[#232F3E]/80 to-[#232F3E]/90 text-white py-24 md:py-32">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">AWS解决方案</h1>
|
||||||
|
<p class="text-xl md:text-2xl text-white/90 mb-8 leading-relaxed">针对不同行业和业务场景，提供量身定制的AWS云解决方案</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 解决方案列表 -->
|
||||||
|
<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 mt-24">计算服务</h2>
|
||||||
|
<p class="text-xl text-gray-600 leading-relaxed">灵活、可扩展的计算能力，支持各种工作负载</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<!-- 网站托管 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-server text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">网站托管解决方案</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">基于AWS构建高可用、可扩展、安全的网站托管平台，支持静态和动态网站。</p>
|
||||||
|
<ul class="space-y-3 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">高可用架构，保证业务连续性</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">弹性伸缩，轻松应对流量高峰</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">全球CDN加速，提升访问速度</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">WAF防火墙，增强网站安全性</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 企业上云 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-cloud-upload-alt text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">企业上云迁移方案</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">为企业提供平滑、安全的上云迁移服务，包括评估、规划、实施和优化。</p>
|
||||||
|
<ul class="space-y-3 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">全面的迁移评估与规划</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">多种迁移策略选择</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">专业的迁移实施与数据同步</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">迁移后的性能优化与成本管理</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 灾备方案 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-shield-alt text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">云上灾备解决方案</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">利用AWS构建经济高效、可靠的灾难恢复解决方案，保障业务连续性。</p>
|
||||||
|
<ul class="space-y-3 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">多种灾备模式选择</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">低RPO/RTO目标，快速恢复业务</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">跨区域/跨可用区部署</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">自动化灾备演练</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 大数据分析 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-database text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">大数据分析平台</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">基于AWS构建可扩展、高性能的大数据处理与分析平台，挖掘数据价值。</p>
|
||||||
|
<ul class="space-y-3 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">构建数据湖与数据仓库</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">使用EMR进行大数据处理</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">实时数据流处理</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">机器学习与AI服务</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 微服务架构 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/20 to-[#FF9900]/10 flex items-center justify-center">
|
||||||
|
<i class="fas fa-cubes text-6xl text-[#FF9900]"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">微服务架构方案</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">利用AWS容器服务和无服务器构建现代化的微服务架构。</p>
|
||||||
|
<ul class="space-y-3 mb-6">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">容器化部署与编排</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">API网关管理服务接口</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">服务发现与负载均衡</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<i class="fas fa-check text-green-500 mr-3 mt-1"></i>
|
||||||
|
<span class="text-gray-600">DevOps与CI/CD集成</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<a href="#" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
|
||||||
|
了解详情
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 更多解决方案 -->
|
||||||
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border-2 border-dashed border-gray-300">
|
||||||
|
<div class="h-48 bg-gradient-to-br from-[#FF9900]/10 to-[#FF9900]/5 flex items-center justify-center">
|
||||||
|
<i class="fas fa-ellipsis-h text-6xl text-gray-400"></i>
|
||||||
|
</div>
|
||||||
|
<div class="p-8 text-center">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">更多定制化方案</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed mb-6">我们还可根据您的具体需求，提供更多行业的定制化解决方案。</p>
|
||||||
|
<a href="contact.html" class="inline-flex items-center text-[#FF9900] hover:text-[#FF9900]/90 font-semibold">
|
||||||
|
立即咨询
|
||||||
|
<i class="fas fa-arrow-right ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 为什么选择我们 -->
|
||||||
|
<section class="section 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="grid md:grid-cols-3 gap-8">
|
||||||
|
<div 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-20 h-20 bg-gradient-to-br from-[#0D6EFD]/20 to-[#0D6EFD]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-certificate text-[#0D6EFD] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">AWS官方认证</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">拥有多名AWS认证专家，具备深厚的技术实力和项目经验</p>
|
||||||
|
</div>
|
||||||
|
<div 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-20 h-20 bg-gradient-to-br from-[#0D6EFD]/20 to-[#0D6EFD]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-users-cog text-[#0D6EFD] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">客户成功导向</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">深入理解客户业务需求，提供最适合的解决方案，助力客户成功</p>
|
||||||
|
</div>
|
||||||
|
<div 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-20 h-20 bg-gradient-to-br from-[#0D6EFD]/20 to-[#0D6EFD]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<i class="fas fa-handshake text-[#0D6EFD] text-3xl"></i>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-2xl font-semibold mb-4">全程专业服务</h3>
|
||||||
|
<p class="text-gray-600 leading-relaxed">提供从咨询、设计、实施到运维的全生命周期服务支持</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 联系我们 -->
|
||||||
|
<section class="section bg-[#232F3E] 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">立即联系我们的解决方案架构师，获取免费咨询和方案设计</p>
|
||||||
|
<a href="contact.html" 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-headset ml-2"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<footer class="bg-[#232F3E] text-white py-12">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid md:grid-cols-4 gap-8">
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">云服务专家</h5>
|
||||||
|
<p class="text-white/50 mb-4">专业的AWS云服务解决方案提供商，致力于帮助企业实现数字化转型</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weixin"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-weibo"></i></a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white"><i class="fab fa-linkedin"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">AWS产品</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">EC2 云服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">S3 对象存储</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">RDS 数据库服务</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">Lambda 无服务器</a></li>
|
||||||
|
<li><a href="products.html" class="text-white/70 hover:text-white">更多产品...</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">解决方案</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">网站托管</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">企业上云</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">灾备方案</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">大数据分析</a></li>
|
||||||
|
<li><a href="solutions.html" class="text-white/70 hover:text-white">微服务架构</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="text-lg font-semibold mb-4">联系我们</h5>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-map-marker-alt mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">北京市朝阳区某某大厦</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-phone mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">400-123-4567</span>
|
||||||
|
</li>
|
||||||
|
<li class="flex items-center">
|
||||||
|
<i class="fas fa-envelope mr-2 text-white/50"></i>
|
||||||
|
<span class="text-white/50">contact@example.com</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-t border-white/25 mt-12 pt-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<p class="text-white/50">© 2023 云服务专家. 保留所有权利</p>
|
||||||
|
<div class="flex space-x-6 mt-4 md:mt-0">
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">隐私政策</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">服务条款</a>
|
||||||
|
<a href="#" class="text-white/50 hover:text-white">网站地图</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="src/js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
202
src/css/styles.css
Normal file
202
src/css/styles.css
Normal file
@ -0,0 +1,202 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #232F3E;
|
||||||
|
--secondary-color: #FF9900;
|
||||||
|
--accent-color: #0D6EFD;
|
||||||
|
--text-color: #333333;
|
||||||
|
--light-gray: #F8F9FA;
|
||||||
|
--white: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 通用样式 */
|
||||||
|
.container {
|
||||||
|
@apply max-w-7xl mx-auto px-6 lg:px-8;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
@apply py-16;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-1 {
|
||||||
|
@apply text-5xl font-bold mb-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-2 {
|
||||||
|
@apply text-3xl font-medium mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-3 {
|
||||||
|
@apply text-2xl font-medium mb-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply inline-block bg-[#FF9900] text-white px-6 py-3 rounded hover:bg-[#FF9900]/90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply inline-block border border-white text-white px-6 py-3 rounded hover:bg-white/10;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式布局 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
@apply px-4;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-1 {
|
||||||
|
@apply text-4xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-2 {
|
||||||
|
@apply text-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-3 {
|
||||||
|
@apply text-xl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面加载动画 */
|
||||||
|
.page-loader {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 9999;
|
||||||
|
transition: opacity 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader-spinner {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border: 4px solid #f3f3f3;
|
||||||
|
border-top: 4px solid #FF9900;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 导航栏样式 */
|
||||||
|
.nav-scrolled {
|
||||||
|
background-color: rgba(35, 47, 62, 0.95);
|
||||||
|
-webkit-backdrop-filter: blur(8px);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式优化 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading-2 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 3rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单样式优化 */
|
||||||
|
.form-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #FF9900;
|
||||||
|
box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 动画效果 */
|
||||||
|
.hover-scale {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-scale:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片悬浮效果 */
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮动画 */
|
||||||
|
.btn-primary {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
transition: width 0.6s ease, height 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover:after {
|
||||||
|
width: 300%;
|
||||||
|
height: 300%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 地图容器样式 */
|
||||||
|
#map-container {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map-container:hover {
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 信息窗体样式 */
|
||||||
|
.amap-info-content {
|
||||||
|
padding: 1rem !important;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.amap-info-close {
|
||||||
|
color: #4B5563 !important;
|
||||||
|
top: 0.5rem !important;
|
||||||
|
right: 0.5rem !important;
|
||||||
|
}
|
||||||
101
src/js/main.js
Normal file
101
src/js/main.js
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
// 表单提交处理
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const contactForm = document.querySelector('form');
|
||||||
|
if (contactForm) {
|
||||||
|
contactForm.addEventListener('submit', async function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// 显示加载状态
|
||||||
|
const submitButton = this.querySelector('button[type="submit"]');
|
||||||
|
const originalText = submitButton.textContent;
|
||||||
|
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>提交中...';
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// 收集表单数据
|
||||||
|
const formData = new FormData(this);
|
||||||
|
const data = Object.fromEntries(formData.entries());
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 这里替换为您的实际API端点
|
||||||
|
const response = await fetch('/api/contact', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
showNotification('提交成功！我们会尽快与您联系。', 'success');
|
||||||
|
contactForm.reset();
|
||||||
|
} else {
|
||||||
|
throw new Error('提交失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
showNotification('抱歉，提交失败，请稍后重试。', 'error');
|
||||||
|
} finally {
|
||||||
|
submitButton.innerHTML = originalText;
|
||||||
|
submitButton.disabled = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 页面加载动画
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
const loader = document.querySelector('.page-loader');
|
||||||
|
if (loader) {
|
||||||
|
loader.style.opacity = '0';
|
||||||
|
setTimeout(() => {
|
||||||
|
loader.style.display = 'none';
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 导航栏交互
|
||||||
|
const mobileMenuButton = document.querySelector('.mobile-menu-button');
|
||||||
|
const mobileMenu = document.querySelector('.mobile-menu');
|
||||||
|
|
||||||
|
if (mobileMenuButton && mobileMenu) {
|
||||||
|
mobileMenuButton.addEventListener('click', function() {
|
||||||
|
mobileMenu.classList.toggle('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 滚动效果
|
||||||
|
window.addEventListener('scroll', function() {
|
||||||
|
const nav = document.querySelector('nav');
|
||||||
|
if (window.scrollY > 100) {
|
||||||
|
nav.classList.add('nav-scrolled');
|
||||||
|
} else {
|
||||||
|
nav.classList.remove('nav-scrolled');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 通知提示框
|
||||||
|
function showNotification(message, type = 'success') {
|
||||||
|
const notification = document.createElement('div');
|
||||||
|
notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg ${
|
||||||
|
type === 'success' ? 'bg-green-500' : 'bg-red-500'
|
||||||
|
} text-white z-50 transform transition-all duration-300 translate-y-0`;
|
||||||
|
notification.textContent = message;
|
||||||
|
|
||||||
|
document.body.appendChild(notification);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
notification.style.transform = 'translateY(-100%)';
|
||||||
|
setTimeout(() => {
|
||||||
|
document.body.removeChild(notification);
|
||||||
|
}, 300);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 平滑滚动
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user