);
+ // 原站 .elementor-widget-wrap > .elementor-element { width:100% }:
+ // widget 默认满宽(flex wrap 中独占一行),_element_width=auto 时按内容宽(横排)
+ const widthAuto = s(settings._element_width) === "auto";
const cls = s(settings._css_classes) || undefined;
+ const baseCls = cls ? (widthAuto ? cls + " el-w-auto" : cls) : widthAuto ? "el-w-auto" : undefined;
const hasContainerStyle = Object.keys(style).length > 0;
if (hasContainerStyle) {
return (
-
-
{inner}
+ // 外层也要带 el-w-auto:列内基础规则按 :not(.el-w-auto) 放行 width:auto 的根,
+ // 否则 width-auto widget(如图标)被 width:100% 强推成每行一个(H7 回归根因)
+
);
}
- return
{inner}
;
+ return
{inner}
;
}
/** # 组件 单个 widget 渲染错误边界:异常 widget 降级为空,不拖垮整页 */
diff --git a/src/components/elementor/slim.ts b/src/components/elementor/slim.ts
index 96da4c5e4..b3c790482 100644
--- a/src/components/elementor/slim.ts
+++ b/src/components/elementor/slim.ts
@@ -102,6 +102,8 @@ const SETTING_KEYS = new Set([
"hover_animation",
// widget 高级盒模型(如 eael-info-box 边框卡:_border_* + _padding/_margin)
"_margin",
+ // widget 宽度模式(auto → 按内容宽横排,如 H7 图标行)
+ "_element_width",
// widget 容器背景(如 H4 标题下的橙线图)
"_background_image",
"_background_position",
diff --git a/src/styles/app.css b/src/styles/app.css
index 2e424e2a3..bc2301b41 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -261,7 +261,7 @@
background-repeat: no-repeat;
background-position: center right;
}
- [data-el="e38a898"] > div > [data-el] > div { padding: 10px; }
+ /* 六列的 10px 内边距由列 gap 默认 padding 通用逻辑提供(ColumnNode),此处不再重复 */
[data-el="e38a898"] .el-imagebox-img { width: 30%; }
[data-el="e38a898"] .el-imagebox:hover .el-imagebox-img img {
filter: brightness(90%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
@@ -280,7 +280,8 @@
* text-editor:display flow-root 建立 BFC(子元素 p 的下外距计入容器高度,与原站
* 实测 62.4 = 2 行 48 + p margin 14.4 一致),p 下外距 0.9em(原站 hello 环境 14.4px)。
*/
- .el-col > div > [data-el]:not(:last-child) { margin-bottom: 20px; }
+ .el-col > div > [data-el]:not(.el-w-auto) { width: 100%; }
+ .el-col > div > [data-el]:not(:last-child):not(.el-w-auto) { margin-bottom: 20px; }
.el-texteditor { display: flow-root; }
.el-texteditor p { margin: 0 0 0.9em; }
@@ -298,21 +299,20 @@
.el-anim-shrink { transition-duration: 0.3s; transition-property: transform; }
.el-anim-shrink:hover, .el-anim-shrink:focus, .el-anim-shrink:active { transform: scale(0.9); }
- /* ===== EAEL infobox 基础(info-box.min.css 对应块):
- * 图在左为 flex 行;内容列 padding-left 15px;标题行高 1(margin 由页面级覆盖);
- * 图标列垂直居中。
+ /* ===== EAEL infobox 基础(取证:原站实际加载 uploads/essential-addons-elementor/eael-18.css,
+ * 并未加载 view/info-box.min.css——后者仅在带 content-align--* 修饰类时才给 icon/content 上 flex,
+ * 本站 infobox 只有 icon-on-left 类,故 icon/content 均为默认 block、img 默认 inline 32×32;
+ * 2026-11-01 原站样式表命中探针实测)
+ * box 为 flex 行;内容列 padding-left 15px + flex item;title-section 纵向 flex。
*/
.eael-infobox.icon-on-left { display: flex; position: relative; }
.eael-infobox.icon-on-left .infobox-content { padding-left: 15px; flex: 1 1 auto; min-width: 0; }
- .eael-infobox .infobox-icon {
- display: flex; justify-content: flex-start; align-self: center;
- /* flex 行内拉伸:H4 实测 icon 容器 39px(img 32px + 7px 排版余量),
- * 与 .eael-infobox 盒 42px 对齐 */
- }
.eael-infobox .infobox-icon img { transition: all 300ms ease-in-out 0s; }
- .eael-infobox .infobox-content { display: flex; flex-direction: column; justify-content: center; }
.eael-infobox .infobox-content .infobox-title-section { display: flex; flex-direction: column; }
- .eael-infobox .infobox-content .title { line-height: 1; }
+ .eael-infobox .infobox-content .infobox-title-section .title {
+ width: max-content; max-width: 100%; overflow-wrap: break-word; word-break: break-word;
+ }
+ .eael-infobox.icon-on-left .infobox-content .title { line-height: 1; margin: 0 0 10px 0; }
.eael-infobox .infobox-content p { margin: 0 0 15px; }
/* ===== 首页 H4 硬件与服务系列 ×5(post-18.css 对应块;1436px 实测 2026-11-01)
@@ -329,14 +329,15 @@
[data-el="7c9ceeb"] .infobox-icon, [data-el="9ff518a"] .infobox-icon,
[data-el="2c9eb1c"] .infobox-icon, [data-el="1aa62bd"] .infobox-icon,
[data-el="64432f0"] .infobox-icon, [data-el="2ba29de"] .infobox-icon {
+ align-self: center;
margin: 3px 0 0 0;
height: 39px;
}
- [data-el="314b8d5"] .infobox-content .title, [data-el="8417167"] .infobox-content .title,
- [data-el="9e1009f"] .infobox-content .title, [data-el="2032426"] .infobox-content .title,
- [data-el="7c9ceeb"] .infobox-content .title, [data-el="9ff518a"] .infobox-content .title,
- [data-el="2c9eb1c"] .infobox-content .title, [data-el="1aa62bd"] .infobox-content .title,
- [data-el="64432f0"] .infobox-content .title, [data-el="2ba29de"] .infobox-content .title {
+ [data-el="314b8d5"] .eael-infobox .infobox-content .title, [data-el="8417167"] .eael-infobox .infobox-content .title,
+ [data-el="9e1009f"] .eael-infobox .infobox-content .title, [data-el="2032426"] .eael-infobox .infobox-content .title,
+ [data-el="7c9ceeb"] .eael-infobox .infobox-content .title, [data-el="9ff518a"] .eael-infobox .infobox-content .title,
+ [data-el="2c9eb1c"] .eael-infobox .infobox-content .title, [data-el="1aa62bd"] .eael-infobox .infobox-content .title,
+ [data-el="64432f0"] .eael-infobox .infobox-content .title, [data-el="2ba29de"] .eael-infobox .infobox-content .title {
color: #4d4d4d;
font-size: 14px;
margin: 7px 0 0 -10px;
@@ -358,12 +359,53 @@
}
}
@media (max-width: 767px) {
- [data-el="9ff518a"] .infobox-content .title, [data-el="2c9eb1c"] .infobox-content .title,
- [data-el="1aa62bd"] .infobox-content .title, [data-el="64432f0"] .infobox-content .title,
- [data-el="2ba29de"] .infobox-content .title {
+ [data-el="9ff518a"] .eael-infobox .infobox-content .title, [data-el="2c9eb1c"] .eael-infobox .infobox-content .title,
+ [data-el="1aa62bd"] .eael-infobox .infobox-content .title, [data-el="64432f0"] .eael-infobox .infobox-content .title,
+ [data-el="2ba29de"] .eael-infobox .infobox-content .title {
margin: 7px 0 0 -6px;
}
}
+
+ /* ===== 首页 H6 宣言条(post-18.css 对应块;1436 实测 2026-11-01)
+ * 标题排版(Poppins 24px/600/行高 1,≤767 20px)由 DB typography 内联提供,
+ * 列 59bc2e1 的四向 10px 由 gap 默认 padding 通用逻辑提供;
+ * 此处仅保留 post-18 的 text-align:center 与移动端字号覆盖(需 !important 压过内联 24px)。
+ */
+ [data-el="e50246d"] { text-align: center; }
+ @media (max-width: 767px) {
+ [data-el="e50246d"] .el-heading-title { font-size: 20px !important; }
+ }
+
+ /* ===== 首页 H5 双主张条(post-18.css 对应块;1436 实测 2026-11-01)
+ * 大列 b504916 的 wrap 即视觉条:long-arrow.png(1353×54)居中不重复(settings padding 全 0);
+ * 中列 f158695 与两侧列的 padding 由 settings/gap 默认逻辑提供;列宽 380(structure 30 三列);
+ * 文字 20px/500/#FFF 居中。
+ */
+ [data-el="b504916"] > div {
+ background: url("/uploads/2023/09/long-arrow.png") 50% 50% no-repeat;
+ }
+
+ /* ===== 首页 H7 OS/芯片平台/语言/协议 四列(post-18.css 对应块;1436 实测)
+ * 外卡 66de90a:渐变 #F4F5F9→透明 + 1px #E0E5F9 边框 + 4px 圆角 + padding 8/16/16/0;
+ * 内四列 b99f434/c8bd50b/821fd51 右侧虚线分隔(dashed #E0E5F9),列 padding-top 16px;
+ * ≤767 分隔虚线改下边框,section 左右 padding 1rem。
+ */
+ [data-el="66de90a"] > div {
+ background: linear-gradient(180deg, #F4F5F9 0%, rgba(244, 245, 249, 0) 100%);
+ border: 1px solid #E0E5F9;
+ border-radius: 4px;
+ padding: 8px 16px 16px 0;
+ }
+ [data-el="b99f434"] > div, [data-el="c8bd50b"] > div, [data-el="821fd51"] > div {
+ border-right: 1px dashed #E0E5F9;
+ }
+ @media (max-width: 767px) {
+ [data-el="b99f434"] > div, [data-el="c8bd50b"] > div, [data-el="821fd51"] > div {
+ border-right: 0;
+ border-bottom: 1px dashed #E0E5F9;
+ }
+ [data-el="338fb86"] { padding-inline: 1rem; }
+ }
}
@media (max-width: 900px) {