361 lines
21 KiB
HTML
361 lines
21 KiB
HTML
<!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> |