2025-04-17 10:14:18 +08:00
|
|
|
|
<!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">
|
2025-05-06 12:09:48 +08:00
|
|
|
|
<meta name="Keywords" content="{dreamer-cms:global name="keywords"/}" />
|
|
|
|
|
|
<meta name="Description" content="{dreamer-cms:global name="describe"/}" />
|
2025-04-17 10:14:18 +08:00
|
|
|
|
<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">
|
2025-04-25 14:14:56 +08:00
|
|
|
|
{dreamer-cms:include file='inc/header.html'/}
|
2025-04-17 10:14:18 +08:00
|
|
|
|
<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>
|
