AIFO 区块光影（Section Glow）

从 special-offer-50 复制出的公共左右光晕模块，供新页面/区块复用。

注意：special-offer-50.html / special-offer-50.css 保持原样，仍使用页面内自带的 .so-welcome__glow 与 #special-offer-50::before，无需改原页。

文件

文件	说明
`assets/css/aifo-section-glow.css`	光影样式（新页面必引）
`pages/modules/aifo-section-glow.fragment.html`	HTML 片段参考

图片资源

变量	默认图片	用途
`--aifo-glow-right-image`	`assets/images/backgrounds/new-user-promo-welcome-side-glow.png`	右侧竖条光晕（同 `.so-welcome__glow`）
`--aifo-glow-left-image`	`assets/images/backgrounds/new-user-promo-corner-glow.png`	左上角光晕（同 `#special-offer-50::before`）

快速使用

1. 引入 CSS

<link type="text/css" href="../assets/css/aifo-section-glow.css" rel="stylesheet">

或在模块 CSS 中：

@import url("../aifo-section-glow.css");

2. 区块级 — 光晕只在某个 section 内

父级加 aifo-section-glow-host，内部放光影 div，正文会自动叠在光晕之上。

<section class="my-section aifo-section-glow-host">
  <!-- 右侧（可选） -->
  <div class="aifo-glow-right" aria-hidden="true"></div>

  <!-- 左侧（可选） -->
  <div class="left_bg_light" aria-hidden="true"></div>

  <h2>标题</h2>
  <p>正文...</p>
</section>

3. 页面级 — 左侧光晕贴整页左上角

<main class="aifo-page-glow-host">
  <div class="left_bg_light" aria-hidden="true"></div>
  <section>...</section>
</main>

类名对照（与 special-offer-50 原实现）

公共类名	原 special-offer-50	说明
`.aifo-glow-right`	`.so-welcome__glow`	右侧全高竖条光，`mix-blend-mode: screen`
`.left_bg_light`	`#special-offer-50::before`	左上角光晕
`.aifo-section-glow-host`	`.so-welcome` 等相对定位容器	区块宿主
`.aifo-page-glow-host`	页面根 `main`	整页宿主

自定义（CSS 变量）

#my-page .my-section {
  --aifo-glow-right-width: 640px;
  --aifo-glow-left-top: 80px;
  --aifo-glow-left-offset: -1vw;
  --aifo-glow-right-image: url("../images/custom/right-glow.png");
  --aifo-glow-left-image: url("../images/custom/left-glow.png");
}

已接入示例

`promo-compare.section.html`

对比表区块使用右侧光晕（原 special-offer-50 未改动）：

<section class="promo-section promo-section--compare aifo-section-glow-host">
  <div class="aifo-glow-right" aria-hidden="true"></div>
  ...
</section>

引入 promo-compare.css 时会自动 @import aifo-section-glow.css。

注意事项

宿主需 position: relative（.aifo-section-glow-host 已包含）。
光晕超出容器时，宿主设 overflow: visible（默认已是）。
右侧光晕 right: calc((100% - 100vw) / 2) 可在居中 max-width 布局下贴齐视口右缘。
装饰元素务必加 aria-hidden="true"。

最小示例

<link href="../assets/css/aifo-section-glow.css" rel="stylesheet">

<section class="aifo-section-glow-host" style="min-height:60vh;background:#080808;color:#fff;padding:80px 24px;">
  <div class="aifo-glow-right" aria-hidden="true"></div>
  <h2 style="text-align:center;">Demo</h2>
</section>

3.4 KiB Raw Permalink Blame History Unescape Escape