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:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user