v0.10.14: H13.5 counter 统计条(9084925)完成

- image-box 支持 title_typography_*/description_typography_*(36px/700/#ED6C00 标题、
  18px 描述)、image_space(图标下距 6px)、text_align、title_color 落样式;
  对应键进 slim 白名单
- 六列图标宽 30% 仅存 post-18 生成 CSS(DB 无 image_size),scoped 补规则
  (efe1577/d48a588/46684e1/17330e2/a7cd0a1/e6b1413)
- 双端节内相对几何/计算样式 JSON 逐字节一致:sec h 208→235 与原站全等,
  列边框 #E0E5F9(globals ee1917e)、末列四边;H0-H13.5 全页高度回归零差异
This commit is contained in:
bigcode
2026-11-01 22:55:21 +08:00
parent c1741772cd
commit ce59229801
5 changed files with 49 additions and 5 deletions
+1
View File
@@ -47,6 +47,7 @@
| H11 | Dusun IoT Developer Center 三卡 | heading+text+内嵌 section 三列卡(heading/image/image-box 行/button) | ✅ v0.10.11(heading 40/600、text 20px/_padding 4rem;三列 453.33-margin→443.33(实测原站 populated flex 收缩语义,该三列 scoped width auto);image-box pos-left 行布局(flex 居中/图 18%/间距 15/标题底距 4px);按钮设置驱动(白底橙字/1px 边框/12px 48px/18px+悬停注入);节背景=电路板条图 bottom center+no-repeat+F4F5F8→透明渐变遮罩(.elementor-background-overlay 通用实现,行 relative 防蒙灰);全局:全零 _margin 不覆盖 kit-spacing、0.9rem p 边距、html widget localSiteUrl/去 mb、Elementor figure margin 0(text-editor 例外)、kit 标题 Roboto 600/500(h2 38px)、按钮 collapseBoxValues 边框) | | H11 | Dusun IoT Developer Center 三卡 | heading+text+内嵌 section 三列卡(heading/image/image-box 行/button) | ✅ v0.10.11(heading 40/600、text 20px/_padding 4rem;三列 453.33-margin→443.33(实测原站 populated flex 收缩语义,该三列 scoped width auto);image-box pos-left 行布局(flex 居中/图 18%/间距 15/标题底距 4px);按钮设置驱动(白底橙字/1px 边框/12px 48px/18px+悬停注入);节背景=电路板条图 bottom center+no-repeat+F4F5F8→透明渐变遮罩(.elementor-background-overlay 通用实现,行 relative 防蒙灰);全局:全零 _margin 不覆盖 kit-spacing、0.9rem p 边距、html widget localSiteUrl/去 mb、Elementor figure margin 0(text-editor 例外)、kit 标题 Roboto 600/500(h2 38px)、按钮 collapseBoxValues 边框) |
| H12 | Industries and Use Cases | heading + eael-adv-tabs(6 标签,内容自包含 HTML) + button(ef0fcd9) | ✅ v0.10.12(AdvTabsWidget 忠实 DOM+React 切换(li id/data-tab/aria-controls)、active #ED6C00/文字 #333/bg #F4F5F8/li 底边 3px(默认同背景色,active/hover 变橙,故 li 高 59)、内容面板 padding 16px 0 0+顶边 1px #C7CBDA、id=<slug>-tab;标题 40px Poppins 居中、按钮 8390e24 设置驱动实测全等;随此版块修复:image-box 垂直对齐 content_vertical_alignment(middle→center,防 fig 被拉伸)、figure 内 <a> 块化(消 2px 行盒下伸)、ec11f3f 图宽 30% 仅存 post-18 生成 CSS 的补规则、AdvTabs 标题 Roboto;实测 H0-H12 各 section 高度全等,页级漂移 0.8px) | | H12 | Industries and Use Cases | heading + eael-adv-tabs(6 标签,内容自包含 HTML) + button(ef0fcd9) | ✅ v0.10.12(AdvTabsWidget 忠实 DOM+React 切换(li id/data-tab/aria-controls)、active #ED6C00/文字 #333/bg #F4F5F8/li 底边 3px(默认同背景色,active/hover 变橙,故 li 高 59)、内容面板 padding 16px 0 0+顶边 1px #C7CBDA、id=<slug>-tab;标题 40px Poppins 居中、按钮 8390e24 设置驱动实测全等;随此版块修复:image-box 垂直对齐 content_vertical_alignment(middle→center,防 fig 被拉伸)、figure 内 <a> 块化(消 2px 行盒下伸)、ec11f3f 图宽 30% 仅存 post-18 生成 CSS 的补规则、AdvTabs 标题 Roboto;实测 H0-H12 各 section 高度全等,页级漂移 0.8px) |
| H13 | Difference Maker 供应商主张条 | heading 5706426 + text c83a5d3 + icon-list 002494b(3 描边链接) + 内嵌 section 931e838(左文右空+楼体图) | ✅ v0.10.13(heading 40/600/#000 左对齐;text fs 1.375rem + _margin -1rem 折叠(widget h 15.4 机制与原站一致);icon-list inline 视图 3 描边链接(custom_css .ele-supplier-dif 边框盒/悬停橙,li 213.7/190.4/206.2 全等);楼体大图=列 bf3d0ba 背景 bottom left+100% auto;随此版块落地:IconListWidget 忠实 DOM 重写(inline-items flex 对冲边距)、列背景 background_size(initial→100% auto)/position/repeat 全量并入、icon-list 基础 CSS、悬停主色规则;相对几何逐项全等(183.4/251.4 等),截图目视一致。注意:orig 侧 H12 面板渐进展开致整页 y 多次测量间漂移,以节内相对坐标为准) | | H13 | Difference Maker 供应商主张条 | heading 5706426 + text c83a5d3 + icon-list 002494b(3 描边链接) + 内嵌 section 931e838(左文右空+楼体图) | ✅ v0.10.13(heading 40/600/#000 左对齐;text fs 1.375rem + _margin -1rem 折叠(widget h 15.4 机制与原站一致);icon-list inline 视图 3 描边链接(custom_css .ele-supplier-dif 边框盒/悬停橙,li 213.7/190.4/206.2 全等);楼体大图=列 bf3d0ba 背景 bottom left+100% auto;随此版块落地:IconListWidget 忠实 DOM 重写(inline-items flex 对冲边距)、列背景 background_size(initial→100% auto)/position/repeat 全量并入、icon-list 基础 CSS、悬停主色规则;相对几何逐项全等(183.4/251.4 等),截图目视一致。注意:orig 侧 H12 面板渐进展开致整页 y 多次测量间漂移,以节内相对坐标为准) |
| H13.5 | counter 统计条 ×6 | 9084925:6 列 image-box(图标+数字标题+描述) | ✅ v0.10.14(双端节内相对几何/样式 JSON 逐字节一致:sec h 235、列 226.7×179 padding 20/16/16/36 + 边框 1px 0 1px 1px #E0E5F9(globals ee1917e,末列四边)、图标 30% 宽(仅存 post-18 生成 CSS,scoped 补规则)+image_space 6px、标题 36px/700/#ED6C00/lh54+mb4(㎡ 内联 span 1.5rem)、描述 18px/#333/lh27;随此版块:image-box 支持 title_typography_*/description_typography_*/image_space/text_align(进 slim 白名单)+title_color 落样式) |
| H14 | Why Choose Dusun IoT | heading + eael-info-box ×4 | ⬜ | | H14 | Why Choose Dusun IoT | heading + eael-info-box ×4 | ⬜ |
| H15 | Trusted By 世界领先品牌 | heading + image ×11(Logo 墙) | ⬜ | | H15 | Trusted By 世界领先品牌 | heading + image ×11(Logo 墙) | ⬜ |
| H16 | Developer Ecosystem | heading ×4+text+button+image+social-icons(左右两卡) | ⬜ | | H16 | Developer Ecosystem | heading ×4+text+button+image+social-icons(左右两卡) | ⬜ |
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "dusuniot-rebuild", "name": "dusuniot-rebuild",
"version": "0.10.13", "version": "0.10.14",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
+26 -4
View File
@@ -891,15 +891,31 @@ function ImageBoxWidget({ settings }: { settings: Record<string, unknown> }) {
const isRow = pos === "left" || pos === "right"; const isRow = pos === "left" || pos === "right";
const imgW = sizeCss(settings.image_size); const imgW = sizeCss(settings.image_size);
const titleSpace = sizeCss(settings.title_bottom_space); const titleSpace = sizeCss(settings.title_bottom_space);
// 图与标题间距 image_space(H13.5 counter 条实测 6px,生成规则 margin-bottom:6px)
const imgSpace = sizeCss(settings.image_space);
// 内容垂直对齐(content_vertical_alignment 控件,仅 left/right 行布局生效): // 内容垂直对齐(content_vertical_alignment 控件,仅 left/right 行布局生效):
// 由 per-widget 生成规则输出 align-items(514e513 middle → center 实测;否则 flex 默认 stretch) // 由 per-widget 生成规则输出 align-items(514e513 middle → center 实测;否则 flex 默认 stretch)
const vaMap: Record<string, string> = { top: "flex-start", middle: "center", bottom: "flex-end" }; const vaMap: Record<string, string> = { top: "flex-start", middle: "center", bottom: "flex-end" };
const va = isRow ? vaMap[s(settings.content_vertical_alignment)] : undefined; const va = isRow ? vaMap[s(settings.content_vertical_alignment)] : undefined;
// 文本对齐 text_align(H13.5 counter 条 left)与标题/描述排版
// (title_typography_* / description_typography_* 组合字段,counter 条 36px/700 橙 + 18px 描述)
const textAlign = s(settings.text_align) as CSSProperties["textAlign"] | undefined;
const titleStyle: CSSProperties = {
...(titleSpace ? { marginBottom: titleSpace } : {}),
...typographyCss(settings, "title_typography"),
};
// 标题色 title_color(resolveGlobals 已解析 globals/colors?id=primary → #ED6C00)
if (s(settings.title_color)) titleStyle.color = s(settings.title_color) as string;
const descStyle = typographyCss(settings, "description_typography");
// flex/边距在 app.css 的 .el-imagebox-pos-* 规则(带 768 断点),这里只带 per-widget 图宽与垂直对齐 // flex/边距在 app.css 的 .el-imagebox-pos-* 规则(带 768 断点),这里只带 per-widget 图宽与垂直对齐
const figStyle: CSSProperties | undefined = isRow && imgW ? { width: imgW } : undefined; const figStyle: CSSProperties | undefined = isRow && imgW
? { width: imgW }
: imgSpace
? { marginBottom: imgSpace }
: undefined;
return ( return (
<div className={"el-imagebox" + posCls}> <div className={"el-imagebox" + posCls}>
<div className="el-imagebox-wrapper" style={va ? { alignItems: va } : undefined}> <div className="el-imagebox-wrapper" style={{ ...(va ? { alignItems: va } : {}), ...(textAlign ? { textAlign } : {}) }}>
{url ? ( {url ? (
<figure className="el-imagebox-img" style={figStyle}> <figure className="el-imagebox-img" style={figStyle}>
{link ? ( {link ? (
@@ -912,7 +928,7 @@ function ImageBoxWidget({ settings }: { settings: Record<string, unknown> }) {
{title || desc ? ( {title || desc ? (
<div className="el-imagebox-content"> <div className="el-imagebox-content">
{title ? ( {title ? (
<Tag className="el-imagebox-title" style={titleSpace ? { marginBottom: titleSpace } : undefined}> <Tag className="el-imagebox-title" style={Object.keys(titleStyle).length ? titleStyle : undefined}>
{link ? ( {link ? (
<a {...linkProps} dangerouslySetInnerHTML={{ __html: title }} /> <a {...linkProps} dangerouslySetInnerHTML={{ __html: title }} />
) : ( ) : (
@@ -921,7 +937,13 @@ function ImageBoxWidget({ settings }: { settings: Record<string, unknown> }) {
)} )}
</Tag> </Tag>
) : null} ) : null}
{desc ? <p className="el-imagebox-description" dangerouslySetInnerHTML={{ __html: desc }} /> : null} {desc ? (
<p
className="el-imagebox-description"
style={Object.keys(descStyle).length ? descStyle : undefined}
dangerouslySetInnerHTML={{ __html: desc }}
/>
) : null}
</div> </div>
) : null} ) : null}
</div> </div>
+12
View File
@@ -47,6 +47,18 @@ const SETTING_KEYS = new Set([
"image_size", "image_size",
"title_bottom_space", "title_bottom_space",
"content_vertical_alignment", "content_vertical_alignment",
// image-box 图标间距/文本对齐/标题与描述排版(H13.5 counter 条)
"image_space",
"text_align",
"title_typography_typography",
"title_typography_font_size",
"title_typography_font_size_mobile",
"title_typography_font_size_tablet",
"title_typography_font_weight",
"description_typography_typography",
"description_typography_font_size",
"description_typography_font_size_mobile",
"description_typography_font_size_tablet",
"gradient_angle", "gradient_angle",
"color_a", "color_a",
"color_b", "color_b",
+9
View File
@@ -320,6 +320,15 @@
* 描边盒/按钮/列 padding 均设置驱动或 custom_css 注入,无额外规则 */ * 描边盒/按钮/列 padding 均设置驱动或 custom_css 注入,无额外规则 */
[data-el="002494b"] .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #ED6C00; } [data-el="002494b"] .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #ED6C00; }
/* ===== 首页 H13.5 counter 统计条(post-18.css 对应块;1436 实测 2026-11-01)
* 六列 16% 图标卡:列 padding 20px 16px 16px 36px + 边框 1px 0 1px 1px #E0E5F9
* (globals ee1917e,末列四边)设置驱动;图标宽 30% 仅存 post-18 生成 CSS(DB 无
* image_size 键),与 ec11f3f 同款补规则;标题 36px/700/#ED6C00、描述 18px 走
* title/description_typography 设置(随本版块进白名单) */
[data-el="efe1577"] .el-imagebox-img, [data-el="d48a588"] .el-imagebox-img,
[data-el="46684e1"] .el-imagebox-img, [data-el="17330e2"] .el-imagebox-img,
[data-el="a7cd0a1"] .el-imagebox-img, [data-el="e6b1413"] .el-imagebox-img { width: 30%; }
/* ===== 首页 H2 产品线入口(post-18.css 对应块;1436px 实测 2026-10-31) /* ===== 首页 H2 产品线入口(post-18.css 对应块;1436px 实测 2026-10-31)
* 外层 section:白→#F4F5F8 线性渐变(180deg)+ 1360 容器(SectionNode 背景已渲染); * 外层 section:白→#F4F5F8 线性渐变(180deg)+ 1360 容器(SectionNode 背景已渲染);
* 中列 0.5rem 内边距;内层 e38a898 六列均分 224px,列内容 wrap padding 10px(高 107); * 中列 0.5rem 内边距;内层 e38a898 六列均分 224px,列内容 wrap padding 10px(高 107);