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

统一字体 响应式 调整

Browse Source
This commit is contained in:
小潘
2026-06-18 14:41:04 +08:00
parent 68e6e98234
commit 9309e3e76a
9 changed files with 688 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/ContactForm.jsx
+18 -18
View File
@@ -37,7 +37,7 @@ export default function ContactForm() {
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]';
const inputClass = 'w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:border-[#004ec4]/60 transition-shadow placeholder-[#94a3b8] bg-white text-[#334155]';
return (
<>
@@ -46,21 +46,21 @@ export default function ContactForm() {
<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>
<span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
<span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Inquiry</span>
</div>
<h2 className="text-4xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
<h2 className="text-3xl xs:text-4xl sm:text-5xl 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>
<p className="text-[#475569] text-sm sm:text-base md:text-lg lg:text-xl mt-4 md: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" />
style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
<div className="absolute top-0 right-0 w-28 h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />
<div className="absolute bottom-0 left-0 w-16 h-16 border border-[#004ec4]/[0.15] rounded-tr-3xl" />
<div className="relative z-10">
<form onSubmit={handleSubmit} className="space-y-8">
@@ -91,7 +91,7 @@ export default function ContactForm() {
关注产品 <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]">
className="w-full px-4 py-3 border border-gray-200 rounded-xl text-base focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:border-[#004ec4]/60 transition-shadow bg-white text-[#64748b]">
<option value="">请选择关注的产品</option>
{productOptions.map((product) => (
<option key={product} value={product}>{product}</option>
@@ -107,8 +107,8 @@ export default function ContactForm() {
<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)' }}
className="w-full py-4 text-white font-bold rounded-xl text-base transition-all focus:outline-none focus:ring-2 focus:ring-[#004ec4]/30 focus:ring-offset-2 hover:shadow-lg hover:shadow-[#004ec4]/30"
style={{ background: 'linear-gradient(135deg, #004ec4, #0659c7)' }}
>
提交咨询
</button>
@@ -123,8 +123,8 @@ export default function ContactForm() {
<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" />
style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
<div className="absolute top-0 right-0 w-20 h-20 bg-[#004ec4]/[0.06] rounded-bl-full" />
<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">
@@ -132,16 +132,16 @@ export default function ContactForm() {
</button>
<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 className="w-16 h-16 rounded-full bg-[#004ec4]/[0.12] border border-[#004ec4]/20 flex items-center justify-center mx-auto mb-6">
<CheckCircle className="w-8 h-8 text-[#004ec4]" />
</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> 内与您联系
感谢您的咨询！我们将在 <span className="font-bold text-[#004ec4]">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)' }}>
className="w-full py-3.5 text-white font-bold rounded-xl text-base transition-all hover:shadow-lg hover:shadow-[#004ec4]/30"
style={{ background: 'linear-gradient(135deg, #004ec4, #0659c7)' }}>
我知道了
</button>
</div>