114 lines
3.4 KiB
Markdown
114 lines
3.4 KiB
Markdown
# 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
|
||
|
||
```html
|
||
<link type="text/css" href="../assets/css/aifo-section-glow.css" rel="stylesheet">
|
||
```
|
||
|
||
或在模块 CSS 中：
|
||
|
||
```css
|
||
@import url("../aifo-section-glow.css");
|
||
```
|
||
|
||
### 2. 区块级 — 光晕只在某个 section 内
|
||
|
||
父级加 `aifo-section-glow-host`，内部放光影 div，正文会自动叠在光晕之上。
|
||
|
||
```html
|
||
<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. 页面级 — 左侧光晕贴整页左上角
|
||
|
||
```html
|
||
<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 变量）
|
||
|
||
```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` 未改动）：
|
||
|
||
```html
|
||
<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`。
|
||
|
||
## 注意事项
|
||
|
||
1. 宿主需 `position: relative`（`.aifo-section-glow-host` 已包含）。
|
||
2. 光晕超出容器时，宿主设 `overflow: visible`（默认已是）。
|
||
3. 右侧光晕 `right: calc((100% - 100vw) / 2)` 可在居中 `max-width` 布局下贴齐视口右缘。
|
||
4. 装饰元素务必加 `aria-hidden="true"`。
|
||
|
||
## 最小示例
|
||
|
||
```html
|
||
<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>
|
||
```
|