331 lines
15 KiB
HTML
331 lines
15 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>{dreamer-cms:category field="typenamecn" /}_{dreamer-cms:global name="title"/}</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<meta name="Keywords" content="{dreamer-cms:global name=" keywords"/}" />
|
||
<meta name="Description" content="{dreamer-cms:global name=" describe"/}" />
|
||
<link rel="stylesheet" href="{dreamer-cms:template /}css/iconfont/iconfont.css">
|
||
<link rel="stylesheet" href="{dreamer-cms:template /}css/reset.css">
|
||
<link rel="stylesheet" href="{dreamer-cms:template /}css/animate.css">
|
||
<link rel="stylesheet" href="{dreamer-cms:template /}css/style.css">
|
||
<link rel="stylesheet" href="{dreamer-cms:template /}scripts/theme/default/layer.css">
|
||
<script src="{dreamer-cms:template /}scripts/jquery-1.11.3.min.js"></script>
|
||
<script src="{dreamer-cms:template /}scripts/jquery.SuperSlide.2.1.1.js"></script>
|
||
<script src="{dreamer-cms:template /}scripts/js.js"></script>
|
||
<script src="{dreamer-cms:template /}scripts/layer.js"></script>
|
||
<style>
|
||
.headerBg1 {
|
||
background:url("{dreamer-cms:template /}images/aboutBg2.jpg") center 0 no-repeat;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
height: 380px;
|
||
}
|
||
.contact-card {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.contact-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.social-icon {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.social-icon:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.contact-form-input:focus {
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
.captcha-container {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.captcha-code {
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 1.5rem;
|
||
letter-spacing: 3px;
|
||
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
|
||
padding: 8px 15px;
|
||
border-radius: 5px;
|
||
user-select: none;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.refresh-captcha {
|
||
cursor: pointer;
|
||
color: #3b82f6;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.refresh-captcha:hover {
|
||
transform: rotate(90deg);
|
||
color: #2563eb;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="bg-gray-50 font-sans">
|
||
{dreamer-cms:include file='inc/header1.html'/}
|
||
<div class="publicHeader min_wrapper_1200">
|
||
<div class="headerBg1"></div>
|
||
<div class="text wrapper_1200">
|
||
<!-- <div class="title">我们期待与您详细沟通!</div>
|
||
<div class="infor">您可以通过以下方式联系我们</div> -->
|
||
<!-- <div class="img"><a href="https://qm.qq.com/cgi-bin/qm/qr?k=Ba41Hjymx8sei97Y9EwcREEsgww0oYG4&jump_from=webapi&authKey=ddiBUR6Dopdxifg3KDh4B1oGblfyuWebDqFWj0KLYAZFTBqXLoAMmd7jnWrN6xxp" target="_blank">加入交流群</a></div> -->
|
||
</div>
|
||
</div>
|
||
<!-- 主要内容 -->
|
||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||
<!-- 联系信息 -->
|
||
<div class="mb-12">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-6">联系方式</h2>
|
||
|
||
<!-- 联系卡片 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||
<div class="contact-card bg-white p-6 rounded-xl shadow-md border border-gray-100">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-blue-100 p-3 rounded-full">
|
||
<i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
|
||
</div>
|
||
<h3 class="ml-3 font-semibold text-gray-800">公司地址</h3>
|
||
</div>
|
||
<p class="text-gray-600">山东省青岛市黄岛区珠江路600号天相国际五号楼五楼
|
||
</p>
|
||
</div>
|
||
|
||
<div class="contact-card bg-white p-6 rounded-xl shadow-md border border-gray-100">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-blue-100 p-3 rounded-full">
|
||
<i class="fas fa-phone-alt text-blue-600 text-xl"></i>
|
||
</div>
|
||
<h3 class="ml-3 font-semibold text-gray-800">联系电话</h3>
|
||
</div>
|
||
<p class="text-gray-600">
|
||
18063388133
|
||
</p>
|
||
</div>
|
||
|
||
<div class="contact-card bg-white p-6 rounded-xl shadow-md border border-gray-100">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-blue-100 p-3 rounded-full">
|
||
<i class="fas fa-envelope text-blue-600 text-xl"></i>
|
||
</div>
|
||
<h3 class="ml-3 font-semibold text-gray-800">电子邮箱</h3>
|
||
</div>
|
||
<p class="text-gray-600">
|
||
longxiangsd@126.com
|
||
</p>
|
||
</div>
|
||
|
||
<div class="contact-card bg-white p-6 rounded-xl shadow-md border border-gray-100">
|
||
<div class="flex items-center mb-4">
|
||
<div class="bg-blue-100 p-3 rounded-full">
|
||
<i class="fas fa-clock text-blue-600 text-xl"></i>
|
||
</div>
|
||
<h3 class="ml-3 font-semibold text-gray-800">工作时间</h3>
|
||
</div>
|
||
<p class="text-gray-600">
|
||
周一至周五: 8:30 - 17:30<br>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 社交媒体 -->
|
||
<!-- <div class="mb-8">
|
||
<h3 class="text-lg font-semibold text-gray-800 mb-4">关注我们</h3>
|
||
<div class="flex space-x-4">
|
||
<a href="#" class="social-icon bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700">
|
||
<i class="fab fa-weixin text-xl"></i>
|
||
</a>
|
||
<a href="#" class="social-icon bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600">
|
||
<i class="fab fa-weibo text-xl"></i>
|
||
</a>
|
||
<a href="#" class="social-icon bg-red-600 text-white p-3 rounded-full hover:bg-red-700">
|
||
<i class="fab fa-youtube text-xl"></i>
|
||
</a>
|
||
<a href="#" class="social-icon bg-gray-800 text-white p-3 rounded-full hover:bg-gray-900">
|
||
<i class="fab fa-linkedin-in text-xl"></i>
|
||
</a>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
|
||
<!-- 联系表单 -->
|
||
<div class="bg-white rounded-xl shadow-md p-8">
|
||
<h2 class="text-2xl font-bold text-gray-800 mb-6">在线留言</h2>
|
||
<form id="myForm">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="md:col-span-2">
|
||
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
|
||
<input type="text" id="name"
|
||
class="contact-form-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<div>
|
||
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
|
||
<input type="email" id="email" class="contact-form-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<div>
|
||
<label for="tel" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
|
||
<input type="text" id="tel"
|
||
class="contact-form-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<div class="md:col-span-2">
|
||
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
|
||
<input type="text" id="subject"
|
||
class="contact-form-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||
</div>
|
||
<div class="md:col-span-2">
|
||
<label for="comments" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
|
||
<textarea id="comments" rows="5"
|
||
class="contact-form-input w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"></textarea>
|
||
</div>
|
||
</div>
|
||
<!-- 验证码部分 -->
|
||
<div class="md:col-span-2">
|
||
<label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
|
||
<div class="flex items-center space-x-4">
|
||
<div class="captcha-container">
|
||
<div id="captchaCode" class="captcha-code"></div>
|
||
<i id="refreshCaptcha" class="fas fa-sync-alt refresh-captcha text-xl"></i>
|
||
</div>
|
||
<input type="text" id="captchaInput"
|
||
class="contact-form-input flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
||
placeholder="请输入验证码" required>
|
||
</div>
|
||
<p id="captchaError" class="mt-1 text-sm text-red-600 hidden">验证码不正确</p>
|
||
</div>
|
||
<div class="mt-6">
|
||
<button type="submit"
|
||
class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 transform hover:scale-105">
|
||
发送消息
|
||
</button>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 生成随机验证码
|
||
function generateCaptcha() {
|
||
const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||
let captcha = '';
|
||
for (let i = 0; i < 6; i++) {
|
||
captcha += chars.charAt(Math.floor(Math.random() * chars.length));
|
||
}
|
||
return captcha;
|
||
}
|
||
|
||
// 初始化验证码
|
||
let currentCaptcha = generateCaptcha();
|
||
document.getElementById('captchaCode').textContent = currentCaptcha;
|
||
|
||
// 刷新验证码
|
||
document.getElementById('refreshCaptcha').addEventListener('click', function () {
|
||
currentCaptcha = generateCaptcha();
|
||
document.getElementById('captchaCode').textContent = currentCaptcha;
|
||
document.getElementById('captchaInput').value = '';
|
||
document.getElementById('captchaError').classList.add('hidden');
|
||
});
|
||
// 社交媒体图标悬停效果
|
||
document.querySelectorAll('.social-icon').forEach(icon => {
|
||
icon.addEventListener('mouseenter', function () {
|
||
this.style.transform = 'scale(1.1)';
|
||
});
|
||
icon.addEventListener('mouseleave', function () {
|
||
this.style.transform = 'scale(1)';
|
||
});
|
||
});
|
||
const form = document.getElementById('myForm');
|
||
// 表单提交验证
|
||
form.addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
|
||
const userInput = document.getElementById('captchaInput').value.toUpperCase();
|
||
const captchaError = document.getElementById('captchaError');
|
||
|
||
if (userInput !== currentCaptcha) {
|
||
captchaError.classList.remove('hidden');
|
||
return;
|
||
}
|
||
|
||
captchaError.classList.add('hidden');
|
||
|
||
// 这里可以添加表单提交的逻辑
|
||
// alert('表单验证通过，即将提交！');
|
||
|
||
// 提交后刷新验证码
|
||
currentCaptcha = generateCaptcha();
|
||
document.getElementById('captchaCode').textContent = currentCaptcha;
|
||
document.getElementById('captchaInput').value = '';
|
||
e.preventDefault();
|
||
|
||
// 1. 收集数据（假设需要发送 JSON）
|
||
const data = {
|
||
name: form.name.value,
|
||
tel: form.tel.value,
|
||
email: form.email.value,
|
||
subject: form.subject.value,
|
||
comments: form.comments.value
|
||
};
|
||
|
||
// 实际应用中这里应该是AJAX提交表单
|
||
try {
|
||
// 2. 使用 Fetch 发送请求
|
||
const response = await fetch('/inputComment', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json' // 明确指定 JSON 格式
|
||
},
|
||
body: JSON.stringify(data) // 将对象转为 JSON 字符串
|
||
});
|
||
|
||
// 3. 检查 HTTP 状态码
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP 错误! 状态码: ${response.status}`);
|
||
}
|
||
|
||
// 4. 解析 JSON 响应
|
||
const result = await response.json();
|
||
|
||
if (result.code==200) {
|
||
alert('提交成功！感谢您的留言');
|
||
form.reset();
|
||
} else {
|
||
alert(`失败: ${result.msg}`, 'error');
|
||
}
|
||
} catch (error) {
|
||
alert(`请求失败: ${error.msg}`, 'error');
|
||
}
|
||
});
|
||
|
||
// 表单输入动画效果
|
||
// document.querySelectorAll('.contact-form-input').forEach(input => {
|
||
// input.addEventListener('focus', function () {
|
||
// this.parentElement.classList.add('ring-2', 'ring-blue-200');
|
||
// });
|
||
// input.addEventListener('blur', function () {
|
||
// this.parentElement.classList.remove('ring-2', 'ring-blue-200');
|
||
// });
|
||
// });
|
||
</script>
|
||
<!-- 页脚 -->
|
||
{dreamer-cms:include file='inc/footer.html'/}
|
||
{dreamer-cms:include file="inc/service.html" /}
|
||
</body>
|
||
|
||
</html> |