feat: port cms contact layout into trade-pro (info/form/no-fake-submit)
Task 10f. contact.html rebuilt from contact.astro + LeadForm.astro: PageHero (breadcrumb/cover bg) -> 0.85/1.25 info+form-card grid -> rich body section (body only). No-fake-submit dual form: configured HTTPS form_endpoint renders external form (name/email/message + pro-honeypot, 10b contract); unconfigured renders no <form> at all, guidance card with real mailto when footer_email exists. Contact items render only with real fields (email mailto; no fabricated phone/address), cms map band dropped (no address data source). CSS appended to pro.css with own 900/620 media blocks; new test test_trade_pro_contact_layout_structure covers both shapes. Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
@@ -491,3 +491,43 @@
|
||||
.sf-theme-trade-pro .sf-tp-about-facility figcaption{padding:9px 10px}
|
||||
.sf-theme-trade-pro .sf-tp-about-facility .sf-tp-tag{font-size:10px}
|
||||
}
|
||||
|
||||
/* ── Task 10f:contact 联系页(contact.astro + LeadForm.astro 移植)──
|
||||
源 src/pages/[locale]/contact.astro:联系信息/表单双栏(0.85fr 信息列 +
|
||||
1.25fr 灰底 form-card)+ LeadForm(引导语 + 纵向字段栅格 + 提交按钮)。
|
||||
共享组件复用:sf-tp-page-hero/breadcrumb(10c 内页 hero)、
|
||||
sf-tp-article-body(10d 富文本排版层双挂);表单卡与 10b 询盘表单卡
|
||||
同构(cms 同一 LeadForm 组件),字段样式走 theme.css 元素基线,
|
||||
本块只补 contact 专属布局(双栏比、信息列表、图标实底圆)。 */
|
||||
|
||||
.sf-theme-trade-pro .sf-tp-contact-grid{display:grid;grid-template-columns:0.85fr 1.25fr;gap:calc(var(--sf-tp-space-16) + var(--sf-tp-space-6));align-items:start}
|
||||
.sf-theme-trade-pro .sf-tp-contact-info>p{color:var(--sf-tp-color-text-muted)}
|
||||
/* 信息列表(cms contact-list):图标圆 + 标题/值两列行 */
|
||||
.sf-theme-trade-pro .sf-tp-contact-list{display:grid;gap:var(--sf-tp-space-6);margin-block-start:var(--sf-tp-space-8)}
|
||||
.sf-theme-trade-pro .sf-tp-contact-item{display:grid;grid-template-columns:var(--sf-tp-space-12) 1fr;gap:var(--sf-tp-space-4);align-items:center}
|
||||
/* cms icon-solid:品牌实底圆覆写默认 brand-soft 形态(居中 auto 边距归零) */
|
||||
.sf-theme-trade-pro .sf-tp-contact-item .icon-circle{margin:0;background:var(--sf-tp-color-brand-primary);color:var(--sf-tp-color-text-on-brand)}
|
||||
.sf-theme-trade-pro .sf-tp-contact-item strong{display:block;margin-block-end:var(--sf-tp-space-1)}
|
||||
.sf-theme-trade-pro .sf-tp-contact-item p{margin:0;color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-sm)}
|
||||
.sf-theme-trade-pro .sf-tp-contact-item a{color:inherit;word-break:break-all}
|
||||
.sf-theme-trade-pro .sf-tp-contact-item a:hover{color:var(--sf-tp-color-text-link)}
|
||||
/* 表单卡(cms form-card + lead-text):灰底圆角;两形态共用(外部表单/
|
||||
无表单引导卡),卡内引导语 muted(cms .lead-text 间距) */
|
||||
.sf-theme-trade-pro .sf-tp-contact-form{background:var(--sf-tp-color-surface-muted);padding:calc(var(--sf-tp-space-8) + var(--sf-tp-space-1));border-radius:var(--sf-tp-radius-sm)}
|
||||
.sf-theme-trade-pro .sf-tp-contact-form>p{color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-6)}
|
||||
.sf-theme-trade-pro .sf-tp-contact-form form{display:grid;gap:var(--sf-tp-space-4)}
|
||||
.sf-theme-trade-pro .sf-tp-contact-form .sf-tp-btn{justify-self:start}
|
||||
.sf-theme-trade-pro .sf-tp-contact-form textarea{min-height:110px}
|
||||
.sf-theme-trade-pro .sf-tp-contact-note{font-size:var(--sf-tp-font-size-xs);color:var(--sf-tp-color-text-muted);margin:0}
|
||||
|
||||
/* ── contact 响应式(cms 断点 900/620;767 无 contact 专属规则——内页
|
||||
hero 的 767 竖版由 10c 既有块覆盖。折叠规则收在本任务媒体块内
|
||||
(10c 教训:同特异性按源顺序取胜)── */
|
||||
@media (max-width: 900px){
|
||||
.sf-theme-trade-pro .sf-tp-contact-grid{grid-template-columns:1fr}
|
||||
}
|
||||
@media (max-width: 620px){
|
||||
.sf-theme-trade-pro .sf-tp-contact-list{gap:16px}
|
||||
.sf-theme-trade-pro .sf-tp-contact-item{grid-template-columns:40px 1fr;gap:10px}
|
||||
.sf-theme-trade-pro .sf-tp-contact-form{padding:20px}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user