v0.10.12: H12 Industries and Use Cases(eael-adv-tabs)完成 + H11 回归修复

- AdvTabsWidget: 忠实 EAEL DOM(li id/data-tab/aria-controls/aria-expanded)+ React 点击切换,
  active/inactive 类、内容面板 id=<slug>-tab;标题字体 Roboto
- H12 scoped 生成规则: li bg #F4F5F8 + 底边 3px(默认同背景色,active/hover #ED6C00),
  内容面板 color #333 + padding 16px 0 0 + 顶边 1px #C7CBDA(li 高 59 与原站全等)
- image-box 修复: content_vertical_alignment 设置驱动 wrapper align-items(middle→center,
  防 fig 被 flex stretch 拉高 2px);figure 内 <a> 块化消行盒下伸;ec11f3f 图宽 30%
  仅存于 post-18 生成 CSS,DB 无对应键,scoped 补规则
- 审计方法修正: 先滚动全页触发 lazy 图加载再测量(视口外 lazy 图曾致 H11 虚假 -82.2px)
- 实测 H0-H12 全部 section 高度与原站全等,页级漂移 0.8px;截图目视一致;点击切换正常
This commit is contained in:
bigcode
2026-11-01 22:10:59 +08:00
parent 46bd8d7655
commit 1c190d00ca
4 changed files with 95 additions and 20 deletions
+39
View File
@@ -243,6 +243,8 @@
* 水平居中靠 wrapper text-align:center 的 inline-block 排版) */
.el-imagebox-img { display: inline-block; margin: 0; }
.el-imagebox-img img { display: block; max-width: 100%; line-height: 0; }
/* 图外层的 <a> 必须块化:内联 a 的行盒按基线对齐会给 figure 多出 ~2px 下伸部(H11 实测 fig 28 vs 26) */
.el-imagebox-img a { display: block; line-height: 0; }
.el-imagebox-title a { color: inherit; }
.el-imagebox-description { margin: 0; }
.el-imagebox-img img { transition: filter 0.3s ease; }
@@ -262,10 +264,47 @@
[data-el="f43387e"] > div, [data-el="508f31a"] > div, [data-el="2b7b38c"] > div {
width: auto !important;
}
/* ec11f3f 的图宽 30% 只存在于 post-18 生成 CSS(DB settings 已无对应键),
* 其余八个 image-box 的 image_size 设置齐全、由组件内联输出(1436 实测 fig 宽全等) */
[data-el="ec11f3f"] .el-imagebox-img { width: 30%; }
@media (max-width: 767px) {
.el-imagebox-img { margin-inline: auto !important; margin-bottom: 15px; }
}
/* ===== EAEL adv-tabs 基础(eael-18.css 对应块;H12 Industries and Use Cases)
* 横排标签:nav ul flex flex-start;li flex 1 1 auto + 1em/1.5em(实测 16px 24px);
* 内容默认隐藏、.active 显示。竖排/角标箭头规则无实例,不移植。
*/
.eael-advance-tabs { display: block; }
.eael-advance-tabs .eael-tabs-nav > ul {
position: relative; padding: 0; margin: 0; list-style-type: none;
display: flex; justify-content: flex-start; align-items: center; z-index: 1;
}
.eael-advance-tabs .eael-tabs-nav > ul li {
position: relative; padding: 1em 1.5em; flex: 1 1 auto; cursor: pointer;
display: flex; justify-content: center; align-items: center; text-align: center;
background-color: #f1f1f1;
}
.eael-advance-tabs .eael-tabs-nav > ul li .eael-tab-title {
margin: unset; font-size: unset; line-height: unset; font-family: unset; font-weight: unset; color: unset;
}
.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; }
/* ===== 首页 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 */
[data-el="ef0fcd9"] .eael-tabs-nav > ul li {
background-color: #F4F5F8; color: #333333;
border-style: solid; border-width: 0 0 3px; border-color: #F4F5F8;
}
[data-el="ef0fcd9"] .eael-tabs-nav > ul li.active,
[data-el="ef0fcd9"] .eael-tabs-nav > ul li:hover { color: #ED6C00; border-bottom-color: #ED6C00; }
[data-el="ef0fcd9"] .eael-tabs-nav > ul li .eael-tab-title { font-family: "Roboto", sans-serif; }
[data-el="ef0fcd9"] .eael-tab-content-item {
color: #333333; padding: 16px 0 0; border-top: 1px solid #C7CBDA;
}
/* ===== 首页 H2 产品线入口(post-18.css 对应块;1436px 实测 2026-10-31)
* 外层 section:白→#F4F5F8 线性渐变(180deg)+ 1360 容器(SectionNode 背景已渲染);
* 中列 0.5rem 内边距;内层 e38a898 六列均分 224px,列内容 wrap padding 10px(高 107);