fix(contact): 修复提交表单宽度异常
FadeUp 组件缺少 lg:col-span-3 导致在 grid-cols-5 布局中仅占 1 列(153px), 添加后正确占据 3 列(605px)
This commit was merged in pull request #18.
This commit is contained in:
@@ -10,8 +10,7 @@ import { Toast } from '@/components/ui/toast';
|
||||
import { Mail, MapPin, Send, Loader2, Clock, HeadphonesIcon, CheckCircle2 } from 'lucide-react';
|
||||
import { COMPANY_INFO } from '@/lib/constants';
|
||||
import { trackContactForm, trackConversion } from '@/lib/analytics';
|
||||
import { InkReveal, StaggerContainer, StaggerItem } from '@/lib/animations';
|
||||
import { ScrollReveal } from '@/components/ui/scroll-animations';
|
||||
import { InkReveal, StaggerContainer, StaggerItem, FadeUp } from '@/lib/animations';
|
||||
|
||||
const contactFormSchema = z.object({
|
||||
name: z.string().min(2, '姓名至少需要2个字符'),
|
||||
@@ -165,7 +164,7 @@ function ContactFormContent() {
|
||||
{/* 标题区 - InkReveal */}
|
||||
<InkReveal className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-8 h-px bg-linear-to-r from-[#1C1C1C] to-[var(--color-brand-primary)]" />
|
||||
<div className="w-8 h-px bg-gradient-to-r from-[#1C1C1C] to-[var(--color-brand-primary)]" />
|
||||
<span className="text-sm text-[#5C5C5C] tracking-wide" data-testid="page-badge">联系我们</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-[#1C1C1C] mb-4">
|
||||
@@ -247,9 +246,9 @@ function ContactFormContent() {
|
||||
</StaggerItem>
|
||||
</StaggerContainer>
|
||||
|
||||
{/* 右侧表单 - ScrollReveal */}
|
||||
<ScrollReveal delay={0.15}>
|
||||
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0] flex-1 flex flex-col">
|
||||
{/* 右侧表单 - FadeUp */}
|
||||
<FadeUp delay={0.15} className="lg:col-span-3">
|
||||
<div className="bg-[#F5F7FA] p-6 sm:p-8 rounded-lg border border-[#E2E8F0]">
|
||||
<h2 className="text-lg font-semibold text-[#1A1A2E] mb-6">发送消息</h2>
|
||||
|
||||
{isSubmitted ? (
|
||||
@@ -261,7 +260,7 @@ function ContactFormContent() {
|
||||
<p className="text-[#718096]">感谢您的留言,我们会尽快与您联系!</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-5 flex-1 flex flex-col">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<input type="text" name="website" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Input
|
||||
@@ -332,7 +331,7 @@ function ContactFormContent() {
|
||||
type="submit"
|
||||
data-testid="submit-button"
|
||||
size="lg"
|
||||
className="w-full group mt-auto min-h-13 md:min-h-0"
|
||||
className="w-full group"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
@@ -350,7 +349,7 @@ function ContactFormContent() {
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</FadeUp>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user