v0.10.13: H13 The Difference Maker(供应商主张条)完成
- IconListWidget 重写为 Elementor 忠实 DOM:ul.elementor-icon-list-items(-inline-items flex wrap + 负边距对冲)、li>a>span.elementor-icon-list-text、text_color 落 span、 is_external→target=_blank;基础 CSS(widget-icon-list.min.css 语义) - 列背景全量:sectionBgStyle 支持 background_size(initial→100% auto,楼体图 bf3d0ba post-18 生成规则取证),ColumnNode 并入 position/repeat/size - H13 scoped:icon-list 悬停主色(globals text_color_hover);描边盒由 custom_css 注入 - 审计取证:text-editor _margin -1rem 的 BFC 折叠(widget h 15.4)双端一致; orig 侧 H12 面板渐进展开致整页 y 漂移,改用节内相对坐标对比 - 相对几何逐项全等,截图目视一致;11 测试全过
This commit is contained in:
bigcode
@@ -46,7 +46,7 @@
|
||||
| H10 | Smart Apartment Gateway 规划模块 | html widget(17.9KB 自包含 HTML+CSS,无 JS) | ✅ v0.10.10（html widget 路径补 localSiteUrl 媒体改写、去掉内层 mb;补 Elementor 全局 figure margin 0(text-editor 例外)与 kit 标题排版(.elementor-kit-15 h1..h6 → Roboto 600/500,h2 38px)——H10 h2 由 kit Roboto 渲染换行点才与原站一致;sec h 674.8 与原站全等,3 图全载 |
|
||||
| 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） |
|
||||
| H13 | Difference Maker 产品卡 ×6 | image-box ×6 | ⬜ |
|
||||
| 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 多次测量间漂移,以节内相对坐标为准） |
|
||||
| H14 | Why Choose Dusun IoT | heading + eael-info-box ×4 | ⬜ |
|
||||
| H15 | Trusted By 世界领先品牌 | heading + image ×11(Logo 墙) | ⬜ |
|
||||
| H16 | Developer Ecosystem | heading ×4+text+button+image+social-icons(左右两卡) | ⬜ |
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dusuniot-rebuild",
|
||||
"version": "0.10.12",
|
||||
"version": "0.10.13",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@@ -206,6 +206,10 @@ function sectionBgStyle(settings: Record<string, unknown>): CSSProperties {
|
||||
style.backgroundPosition = posRaw ? mapBgPosition(posRaw) : "center center";
|
||||
const rep = s(settings.background_repeat);
|
||||
if (rep) style.backgroundRepeat = rep;
|
||||
// 尺寸：initial → 100% auto（H13 楼体大图 bf3d0ba 生成规则实测；
|
||||
// cover/contain/auto 原样输出）
|
||||
const sizeRaw = s(settings.background_size);
|
||||
if (sizeRaw) style.backgroundSize = sizeRaw === "initial" ? "100% auto" : sizeRaw;
|
||||
}
|
||||
} else if (bgType === "gradient") {
|
||||
const c1 = s(settings.background_color) || s(settings.color_a) || "#ffffff";
|
||||
@@ -414,7 +418,8 @@ function ColumnNode({ el, gapPad }: { el: ElElement; gapPad?: string }) {
|
||||
}
|
||||
inner.padding = paddingCss(settings.padding) || gapPad || "10px";
|
||||
const bg = sectionBgStyle(settings);
|
||||
Object.assign(inner, { backgroundColor: bg.backgroundColor, backgroundImage: bg.backgroundImage });
|
||||
// 背景对象整体并入（颜色/图片/位置/平铺/尺寸，H13 楼体图 bottom left + 100% auto 实测）
|
||||
Object.assign(inner, bg);
|
||||
const radius = paddingCss(settings.border_radius);
|
||||
if (radius) inner.borderRadius = radius;
|
||||
if (s(settings.border_border) === "solid") {
|
||||
@@ -1160,19 +1165,43 @@ function ReviewsWidget({ settings }: { settings: Record<string, unknown> }) {
|
||||
);
|
||||
}
|
||||
|
||||
/** # 组件 icon-list widget：仅渲染文字列表，emoji 图标跳过 */
|
||||
/** # 组件 icon-list widget：忠实 Elementor DOM（widget-icon-list.min.css 语义）
|
||||
* view=inline 时 ul.elementor-icon-list-items.elementor-inline-items（flex wrap，
|
||||
* ul 负边距 -8px 与 li 8px 侧边距对冲，实测 H13 链接条）；否则竖排 ul。
|
||||
* li.elementor-icon-list-item(flex 居中) > [a(target=_blank) >] span.elementor-icon-list-text；
|
||||
* 文字色 text_color 落 span（实测 #0D152E，a 本身继承 kit 主色不影响文字），
|
||||
* 悬停色 text_color_hover(globals)由 H13 页面级生成规则注入；custom_css(.ele-supplier-dif
|
||||
* 描边盒) 经 collectCustomCss 注入。
|
||||
*/
|
||||
function IconListWidget({ settings }: { settings: Record<string, unknown> }) {
|
||||
const list = Array.isArray(settings.icon_list) ? (settings.icon_list as { text?: string; selected_icon?: { value?: string } }[]) : [];
|
||||
const items = list.map((it) => s(it.text)).filter(Boolean);
|
||||
const list = Array.isArray(settings.icon_list)
|
||||
? (settings.icon_list as { text?: string; _id?: string; link?: { url?: string; is_external?: string }; selected_icon?: { value?: string } }[])
|
||||
: [];
|
||||
const items = list.filter((it) => s(it.text));
|
||||
if (!items.length) return null;
|
||||
const inline = s(settings.view) === "inline";
|
||||
const color = s(settings.text_color) || undefined;
|
||||
return (
|
||||
<ul className="mb-[18px]" style={{ listStyle: "none", padding: 0, margin: "0 0 18px" }}>
|
||||
{items.map((t, i) => {
|
||||
// 文本本身以 emoji 开头时保留原样输出（内容照原样，只是不做图标渲染处理）
|
||||
<ul className={"elementor-icon-list-items" + (inline ? " elementor-inline-items" : "")}>
|
||||
{items.map((it, i) => {
|
||||
const link = it.link?.url;
|
||||
const external = it.link?.is_external === "on";
|
||||
const text = (
|
||||
<span
|
||||
className="elementor-icon-list-text"
|
||||
style={color ? { color } : undefined}
|
||||
dangerouslySetInnerHTML={{ __html: s(it.text) }}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<li key={i} style={{ marginBottom: 6, paddingLeft: 16, position: "relative" }}>
|
||||
<span style={{ position: "absolute", left: 0, color: "var(--brand)" }}>•</span>
|
||||
{t}
|
||||
<li key={it._id || i} className={"elementor-icon-list-item" + (inline ? " elementor-inline-item" : "")}>
|
||||
{link ? (
|
||||
<a href={link} target={external ? "_blank" : undefined} rel={external ? "noopener" : undefined}>
|
||||
{text}
|
||||
</a>
|
||||
) : (
|
||||
text
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -18,6 +18,10 @@ const SETTING_KEYS = new Set([
|
||||
// section 级背景定位/平铺（H11 底图 bottom center + no-repeat）
|
||||
"background_position",
|
||||
"background_repeat",
|
||||
// 背景尺寸（initial → 100% auto，H13 列背景楼体图）
|
||||
"background_size",
|
||||
// icon-list 视图（inline = 横排链接条，H13）
|
||||
"view",
|
||||
"border_border",
|
||||
"border_color",
|
||||
"border_radius",
|
||||
|
||||
@@ -291,6 +291,15 @@
|
||||
.eael-advance-tabs .eael-tabs-content > div { display: none; opacity: 0; }
|
||||
.eael-advance-tabs .eael-tabs-content > div.active { display: block; width: 100%; opacity: 1; }
|
||||
|
||||
/* ===== Elementor icon-list（widget-icon-list.min.css 语义；H13 链接条实测 2026-11-01）
|
||||
* inline 视图：ul flex wrap + 负边距 -8px 与 li 8px 侧边距对冲（实测 ul margin 0 -8px）；
|
||||
* li/a 均 flex 居中；描边盒（border/padding/margin-bottom 6px）由节点 custom_css
|
||||
* .ele-supplier-dif 注入；文字色 text_color 落 span、悬停主色走 per-widget 规则 */
|
||||
.elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
|
||||
.elementor-icon-list-items.elementor-inline-items { display: flex; flex-wrap: wrap; margin: 0 -8px; }
|
||||
.elementor-icon-list-item { display: flex; align-items: center; margin: 0 8px; }
|
||||
.elementor-icon-list-item a { display: flex; align-items: center; text-decoration: none; }
|
||||
|
||||
/* ===== 首页 H12 adv-tabs 生成规则（post-18.css 对应块；1436 实测 2026-11-01）
|
||||
* li 背景 #F4F5F8 + 文字 #333 + 底边 3px（默认同背景色、active/hover 变 #ED6C00，故 li 高 = 24+16*2+3）；
|
||||
* 内容面板 color #333 + padding 16px 0 0 + 顶边 1px #C7CBDA */
|
||||
@@ -305,6 +314,12 @@
|
||||
color: #333333; padding: 16px 0 0; border-top: 1px solid #C7CBDA;
|
||||
}
|
||||
|
||||
/* ===== 首页 H13 Difference Maker（post-18.css 对应块；1436 实测 2026-11-01）
|
||||
* 楼体大图 = 列 bf3d0ba 背景（bottom left + 100% auto，组件内联输出，post-18 生成规则
|
||||
* background_size initial → 100% auto）；icon-list 悬停主色（globals text_color_hover）；
|
||||
* 描边盒/按钮/列 padding 均设置驱动或 custom_css 注入，无额外规则 */
|
||||
[data-el="002494b"] .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #ED6C00; }
|
||||
|
||||
/* ===== 首页 H2 产品线入口（post-18.css 对应块；1436px 实测 2026-10-31）
|
||||
* 外层 section：白→#F4F5F8 线性渐变（180deg）+ 1360 容器（SectionNode 背景已渲染）；
|
||||
* 中列 0.5rem 内边距；内层 e38a898 六列均分 224px，列内容 wrap padding 10px（高 107）；
|
||||
|
||||
Reference in New Issue
Block a user