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
@@ -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