zcode/dusuniot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 新增 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
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/app.css
+108
View File
@@ -44,6 +44,8 @@
.fa-facebook::before { content: "\f09a"; }
.fa-facebook-f::before { content: "\f39e"; }
.fa-discord::before { content: "\f392"; }
.fa-tiktok::before { content: "\e07b"; }
.fa-twitter::before { content: "\f099"; }
/* # 字体 Font Awesome Solid / Regular（页脚返回顶部图标 fas fa-chevron-up、
* 询价入口 far fa-comment-dots；文件取自 legacy elementor 插件库） */
@@ -785,3 +787,109 @@
@media (max-width: 767px) {
.elementor-hidden-mobile { display: none !important; }
}
/* ===== # 组件 询价弹窗 InquiryPopup（原站 Elementor popup 1129 + CF7 表单 604）
* 结构与样式取自：Elementor popup.min.css / common.css（.dialog-type-lightbox 遮罩、
* .dialog-widget-content 白底 700px、close 按钮 20/20）、popup 1129 生成 CSS
* （contact form padding 2em 3em 0、字段边框 #C9CEE8、textarea 134px、按钮 #ED6C00
* 圆角 10 hover #FFA11B）、popup 自定义 CSS（p1-4 48% 两列、p5-7 31.3% 三列、p8 100%） */
body.dialog-prevent-scroll { overflow: hidden; }
.ds-inquiry-popup {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
}
.ds-inquiry-popup .dialog-widget-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.8); }
.ds-inquiry-popup .dialog-widget { position: relative; display: flex; max-width: 100vw; max-height: 100vh; }
.ds-inquiry-popup .dialog-widget-content {
position: relative; width: 700px; max-width: 100vw; max-height: 100vh;
background: #fff; box-shadow: none; overflow: hidden;
}
.ds-inquiry-popup .dialog-message { display: flex; max-height: 100vh; overflow: auto; }
.ds-inquiry-popup .dialog-message > .elementor { width: 100%; }
.ds-inquiry-popup .elementor-section { padding: 1rem 0 0; }
.ds-inquiry-popup .elementor-container { max-width: none; margin: 0; display: block; }
.ds-inquiry-popup .elementor-column { width: 100%; }
.ds-inquiry-popup .elementor-widget-wrap { padding: 0; }
.ds-inquiry-popup .dialog-close-button {
position: absolute; top: 20px; right: 20px; z-index: 9; margin: 0; padding: 4px;
border: 0; background: transparent; cursor: pointer; line-height: 1; display: flex;
}
.ds-inquiry-popup .dialog-close-button svg { width: 20px; height: 20px; fill: #1f2124; }
/* 表单卡（EAEL contact form）：白底 + 2em 3em 内边距 + 0 0 12px -4px 阴影 */
.ds-inquiry-popup .eael-contact-form {
background: #fff; padding: 2em 3em 0; border-radius: 0;
box-shadow: 0 0 12px -4px rgba(0, 0, 0, 0.5);
}
.ds-inquiry-popup .eael-contact-form-7-heading { text-align: center; }
.ds-inquiry-popup .eael-contact-form-title {
font-size: 28px; font-weight: 600; line-height: 1.2; margin: 8px 0 10px; text-align: center; color: #333;
}
/* 字段布局（popup 自定义 CSS 原文） */
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p { margin: 0 0 20px; }
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(1),
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(3) {
width: 48%; display: grid; float: left; margin: 0 2% 2% 0;
}
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(2),
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(4) {
width: 48%; display: grid; float: left; margin: 0 0 2% 2%;
}
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(5) {
width: 31.3%; display: grid; float: left; margin: 0 2% 2% 0; clear: left;
}
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(6) {
width: 31.3%; display: grid; float: left; margin: 0 1% 2% 1%;
}
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(7) {
width: 31.3%; display: grid; float: left; margin: 0 0 2% 2%;
}
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(8) { width: 100%; display: grid; margin: 0 0 2%; }
/* 标签与控件 */
.ds-inquiry-popup .wpcf7-form label { display: block; margin-bottom: 0; font-size: 1rem; line-height: 1; color: #333; }
.ds-inquiry-popup .wpcf7-form-control-wrap { display: block; }
.ds-inquiry-popup .wpcf7-form-control.wpcf7-text,
.ds-inquiry-popup .wpcf7-form-control.wpcf7-select,
.ds-inquiry-popup .wpcf7-form-control.wpcf7-textarea {
width: 100%; margin: 0; height: 42px; padding: 8px 16px;
border: 1px solid #C9CEE8; border-radius: 0; background: #fff; color: #000;
font-size: 16px; line-height: 24px; font-family: inherit;
}
.ds-inquiry-popup .wpcf7-form-control.wpcf7-select { padding: 10px 12px 9px; background: #efefef; color: #757575; }
.ds-inquiry-popup .wpcf7-form-control.wpcf7-textarea { height: 134px; line-height: 1.5; resize: vertical; }
.ds-inquiry-popup .wpcf7-form input[type="submit"] {
width: 100%; height: 44px; margin: 0 !important; padding: 10px 20px;
border: 0; border-radius: 10px; background: #ED6C00; color: #fff;
font-size: 16px; line-height: 24px; cursor: pointer; transition: background 0.25s linear;
}
.ds-inquiry-popup .wpcf7-form input[type="submit"]:hover { background: #FFA11B; }
.ds-inquiry-popup .wpcf7-list-item { display: inline-block; margin: 0 !important; }
.ds-inquiry-popup .wpcf7-list-item > label { display: flex; align-items: flex-start; gap: 6px; }
.ds-inquiry-popup .wpcf7-list-item input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.ds-inquiry-popup .wpcf7-list-item-label { color: #9396A1; font-size: 0.875rem; line-height: 1.5; }
.ds-inquiry-popup .wpcf7-list-item-label a { color: #9396A1; text-decoration: underline; }
.ds-inquiry-popup .ds-recaptcha-note { color: #9396A1; font-size: 0.875rem; margin-bottom: 0 !important; }
.ds-inquiry-popup .ds-recaptcha-note a { color: #9396A1; text-decoration: underline; }
.ds-inquiry-popup .wpcf7-response-output { margin: 0 0.5em 2em; padding: 0.2em 1em; border: 2px solid transparent; font-size: 14px; }
.ds-inquiry-popup .wpcf7-response-output.ds-ok { border-color: #46b450; }
.ds-inquiry-popup .wpcf7-response-output.ds-err { border-color: #dc3232; }
.ds-inquiry-popup .wpcf7-response-output[aria-hidden="true"] { display: none; }
/* 弹窗内社交图标（widget 2a08dd3：20px 图标、间距 14、底部 2rem、居中） */
.ds-inquiry-popup .elementor-widget-social-icons .elementor-widget-container { padding: 0 0 2rem; text-align: center; }
.ds-inquiry-popup .elementor-social-icons-wrapper.elementor-grid { display: flex; justify-content: center; column-gap: 14px; }
.ds-inquiry-popup .elementor-social-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 3px; font-size: 20px;
color: #fff; text-decoration: none; transition: all 0.3s;
}
.ds-inquiry-popup .elementor-social-icon i { font-size: 20px; color: #fff; }
.ds-inquiry-popup .elementor-social-icon-tiktok { background-color: #000000; }
.ds-inquiry-popup .elementor-social-icon-twitter { background-color: #1DA1F2; }
@media (max-width: 767px) {
/* 原站 popup 自定义 CSS：移动端 p5/p6 48%、p7 100%，关闭按钮黑色 */
.ds-inquiry-popup .dialog-widget-content { width: 100vw; max-height: 100vh; }
.ds-inquiry-popup .eael-contact-form { padding: 2em 1em 0; }
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(5) { width: 48%; margin: 0 2% 2% 0; }
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(6) { width: 48%; margin: 0 0 2% 2%; }
.ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(7) { width: 100%; margin: 0 0 2%; }
}