v0.10.20: G3 询价弹窗/表单(原站 Elementor popup 1129 + CF7 604)

- 新增 InquiryPopup:全局委托拦截 #elementor-action:popup:open 链接(全站 24 处,id 1129),
  按 Elementor 弹窗 DOM 渲染(遮罩 rgba(0,0,0,.8)、700px 白卡、关闭按钮 20/20、Esc/遮罩关闭、
  打开时锁定页面滚动)
- 表单按 CF7 表单 604 重建:Name/Company/Business email/Phone/Product/Interest/Annual Demand/
  Message + consent 勾选 + reCAPTCHA 声明;样式取 popup 生成 CSS(padding 2em 3em、
  48%/31.3% 两列三列、#C9CEE8 边框、textarea 134px、按钮 #ED6C00→#FFA11B 圆角 10)
- 提交走 submitInquiry(form_key contact-form-1),字段映射 + interest/annualdemand/consent
  extra;成功显示 CF7 原文提示;弹窗内 5 个社交图标(20px/间距 14/品牌色)
- app.css 补弹窗样式与 FA tiktok/twitter 码位;Layout 全局挂载
- 实测 1436:700×737 居中、两列 289.9/三列 189、消息 604×153;390:全宽、移动端三列退化两列;
  首页与 landing 页触发器均生效,提交入库验证后清理测试数据;bun test 11 pass
- 版本 0.10.20
This commit is contained in:
bigcode
2026-11-02 11:37:28 +08:00
parent a7614e5485
commit 5ff5f9d477
5 changed files with 425 additions and 2 deletions
+3
View File
@@ -6,6 +6,7 @@
import "../../styles/app.css";
import { Header } from "./Header";
import { Footer, type FooterCategory } from "./Footer";
import { InquiryPopup } from "./InquiryPopup";
import { createServerFn } from "@tanstack/react-start";
import { getFooterTemplate, getMenuTree, getProductCategoryTree, type MenuNode } from "~/server/data";
import type { ElElement } from "~/components/elementor/Renderer";
@@ -45,6 +46,8 @@ export function Layout(props: { layout: LayoutData; children: React.ReactNode })
<Header menu={props.layout.menu} />
<main>{props.children}</main>
<Footer categories={props.layout.categories} menu={props.layout.footerMenu} doc={props.layout.footerDoc} />
{/* 全局询价弹窗:接管页面内所有 Elementor popup 1129 链接(Make an Inquiry / 按钮) */}
<InquiryPopup />
</>
);
}