panhuixia/xunchiProduct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成大部分页面

Browse Source
This commit is contained in:
小潘
2026-05-28 16:58:17 +08:00
parent 0cf72dc47f
commit 49fb1891a3
13 changed files with 694 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/ContactForm.jsx
+114 -67
View File
@@ -1,4 +1,5 @@
import { useState } from 'react';
import { CheckCircle, X } from 'lucide-react';
const productOptions = [
'校企益邦',
@@ -17,6 +18,7 @@ const initialFormState = {
export default function ContactForm() {
const [form, setForm] = useState(initialFormState);
const [showModal, setShowModal] = useState(false);
function handleChange(e) {
const { name, value } = e.target;
@@ -25,82 +27,127 @@ export default function ContactForm() {
function handleSubmit(e) {
e.preventDefault();
alert(
'感谢您的咨询！\n\n' +
'姓名：' + form.name + '\n' +
'联系电话：' + form.phone + '\n' +
'单位名称：' + form.company + '\n' +
'关注产品：' + form.product + '\n' +
'留言内容：' + form.message + '\n\n' +
'我们将在1个工作日内与您联系！'
);
setShowModal(true);
console.log('提交表单', form);
setForm(initialFormState);
}
const inputClass = 'w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#004ec4]/20 focus:border-[#004ec4]/40 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';
function closeModal() {
setShowModal(false);
}
const inputClass = 'w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#043b8f]/20 focus:border-[#043b8f]/40 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';
return (
<section className="py-20 px-4 bg-white">
<div className="max-w-2xl mx-auto">
<div className="text-center mb-12">
<p className="text-xs text-[#004ec4] tracking-[0.25em] uppercase mb-3 font-semibold">Inquiry</p>
<h2 className="text-3xl md:text-4xl font-bold text-[#0f172a] mb-4">在线咨询</h2>
<p className="text-[#64748b] text-base">填写表单，我们将在 1 个工作日内与您联系</p>
<>
<section className="py-24 px-6 bg-[#fafbfc]">
<div className="max-w-5xl mx-auto">
<div className="text-center mb-16">
<div className="flex flex-col items-center">
<div className="inline-flex items-center gap-3 mb-5">
<span className="w-5 h-[2px] rounded-full bg-[#043b8f]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#043b8f]">Inquiry</span>
</div>
<h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
在线咨询
</h2>
<p className="text-[#475569] text-lg md:text-xl mt-5 max-w-xl leading-relaxed">填写表单，我们将在 1 个工作日内与您联系</p>
</div>
</div>
<div className="relative bg-white rounded-2xl p-8 md:p-10 border border-gray-100 overflow-hidden max-w-3xl mx-auto">
<div className="absolute top-0 left-0 right-0 h-[2px] opacity-100"
style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
<div className="absolute top-0 right-0 w-28 h-28 bg-[#043b8f]/[0.02] rounded-bl-full" />
<div className="absolute bottom-0 left-0 w-16 h-16 border border-[#043b8f]/[0.06] rounded-tr-3xl" />
<div className="relative z-10">
<form onSubmit={handleSubmit} className="space-y-8">
<div>
<label htmlFor="name" className="block text-base font-bold text-[#0f172a] mb-2">
姓名 <span className="text-red-400">*</span>
</label>
<input type="text" id="name" name="name" required value={form.name} onChange={handleChange}
placeholder="请输入您的姓名" className={inputClass} />
</div>
<div>
<label htmlFor="phone" className="block text-base font-bold text-[#0f172a] mb-2">
联系电话 <span className="text-red-400">*</span>
</label>
<input type="tel" id="phone" name="phone" required value={form.phone} onChange={handleChange}
placeholder="请输入您的联系电话" className={inputClass} />
</div>
<div>
<label htmlFor="company" className="block text-base font-bold text-[#0f172a] mb-2">单位名称</label>
<input type="text" id="company" name="company" value={form.company} onChange={handleChange}
placeholder="请输入您的单位名称" className={inputClass} />
</div>
<div>
<label htmlFor="product" className="block text-base font-bold text-[#0f172a] mb-2">
关注产品 <span className="text-[#94a3b8] text-sm">(可选)</span>
</label>
<select id="product" name="product" value={form.product} onChange={handleChange}
className="w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#043b8f]/20 focus:border-[#043b8f]/40 transition-shadow bg-white text-[#64748b]">
<option value="">请选择关注的产品</option>
{productOptions.map((product) => (
<option key={product} value={product}>{product}</option>
))}
</select>
</div>
<div>
<label htmlFor="message" className="block text-base font-bold text-[#0f172a] mb-2">留言内容</label>
<textarea id="message" name="message" rows={4} value={form.message} onChange={handleChange}
placeholder="请输入您的留言内容" className={inputClass + ' resize-none'} />
</div>
<button
type="submit"
className="w-full py-4 text-white font-bold rounded-xl text-base transition-all focus:outline-none focus:ring-2 focus:ring-[#043b8f]/20 focus:ring-offset-2 hover:shadow-lg hover:shadow-[#043b8f]/20"
style={{ background: 'linear-gradient(135deg, #043b8f, #0659c7)' }}
>
提交咨询
</button>
</form>
</div>
</div>
</div>
</section>
<div className="bg-[#f8fafc] border border-gray-100 rounded-2xl p-8">
<form onSubmit={handleSubmit} className="space-y-5">
<div>
<label htmlFor="name" className="block text-sm font-medium text-[#334155] mb-1.5">
姓名 <span className="text-red-400">*</span>
</label>
<input type="text" id="name" name="name" required value={form.name} onChange={handleChange}
placeholder="请输入您的姓名" className={inputClass} />
</div>
{showModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={closeModal} />
<div className="relative bg-white rounded-2xl p-8 md:p-10 max-w-md w-full shadow-2xl overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-[2px]"
style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
<div className="absolute top-0 right-0 w-20 h-20 bg-[#043b8f]/[0.02] rounded-bl-full" />
<div>
<label htmlFor="phone" className="block text-sm font-medium text-[#334155] mb-1.5">
联系电话 <span className="text-red-400">*</span>
</label>
<input type="tel" id="phone" name="phone" required value={form.phone} onChange={handleChange}
placeholder="请输入您的联系电话" className={inputClass} />
</div>
<div>
<label htmlFor="company" className="block text-sm font-medium text-[#334155] mb-1.5">单位名称</label>
<input type="text" id="company" name="company" value={form.company} onChange={handleChange}
placeholder="请输入您的单位名称" className={inputClass} />
</div>
<div>
<label htmlFor="product" className="block text-sm font-medium text-[#334155] mb-1.5">
关注产品 <span className="text-[#94a3b8] text-xs">(可选)</span>
</label>
<select id="product" name="product" value={form.product} onChange={handleChange}
className="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#004ec4]/20 focus:border-[#004ec4]/40 transition-shadow bg-white text-[#64748b]">
<option value="">请选择关注的产品</option>
{productOptions.map((product) => (
<option key={product} value={product}>{product}</option>
))}
</select>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-[#334155] mb-1.5">留言内容</label>
<textarea id="message" name="message" rows={4} value={form.message} onChange={handleChange}
placeholder="请输入您的留言内容" className={inputClass + ' resize-none'} />
</div>
<button
type="submit"
className="w-full py-3 text-white font-semibold rounded-xl text-sm transition-all focus:outline-none focus:ring-2 focus:ring-[#004ec4]/20 focus:ring-offset-2 hover:shadow-[0_4px_15px_rgba(0,78,196,0.25)]"
style={{ background: 'linear-gradient(135deg, #0078b8, #004ec4)' }}
>
提交咨询
<button onClick={closeModal}
className="absolute top-4 right-4 w-8 h-8 rounded-full bg-gray-50 flex items-center justify-center hover:bg-gray-100 transition-colors">
<X className="w-4 h-4 text-[#94a3b8]" />
</button>
</form>
<div className="relative z-10 text-center">
<div className="w-16 h-16 rounded-full bg-[#043b8f]/[0.06] border border-[#043b8f]/10 flex items-center justify-center mx-auto mb-6">
<CheckCircle className="w-8 h-8 text-[#043b8f]" />
</div>
<h3 className="text-xl font-bold text-[#0f172a] mb-3">提交成功</h3>
<p className="text-[#64748b] text-base leading-relaxed mb-8">
感谢您的咨询！我们将在 <span className="font-bold text-[#043b8f]">1 个工作日</span> 内与您联系
</p>
<button onClick={closeModal}
className="w-full py-3.5 text-white font-bold rounded-xl text-base transition-all hover:shadow-lg hover:shadow-[#043b8f]/20"
style={{ background: 'linear-gradient(135deg, #043b8f, #0659c7)' }}>
我知道了
</button>
</div>
</div>
</div>
</div>
</section>
)}
</>
);
}