12451
|
8e7435005e
|
refactor(landing): 改为全屏主视觉 + 毛玻璃文案面板（消除"贴图硬边"）
## 问题
分栏布局里，产品图是 4:3 矩形、自带浅灰蓝背景，贴在页面白底上有一道
**明显的竖直硬边**；上一提交用径向遮罩缓解了，但本质上"图在盒子里"这个
结构仍会让人觉得过渡生硬（用户指出，并建议：做成一张全图，左边没内容或
少量内容，或者左边用毛玻璃、背后能稍微看到内容）。
## 方案（按用户建议）
**一张全图做底 + 左侧毛玻璃面板**，从结构上消除"过渡"这件事：
1. **重新生成主视觉图**（Agnes Image 图生图，2K 16:9）：
- 柜子置于画面**右侧约四成**，左侧约六成是**纯净负空间**（无物体/阴影/文字）
- ⛔ 明确声明画面内**不出现任何文字、数字、字母、水印、logo**
（v1 的教训：提示词里写了十六进制色值和"36"，模型把它们**当文字画进了图里**，
左侧出现"36 智能充电电柜 / #0366e6"。故颜色只描述为"品牌蓝"，绝不写 hex）
2. **全屏背景**：`.bg` 用 `background-size: cover` 铺满视口（保持宽高比、永不变形）
3. **左侧白纱**：`.bg::after` 叠一层从左到右渐淡的白色轻纱，保证文字对比度
4. **毛玻璃面板**（核心）：
```css
background: rgba(255,255,255,0.58);
backdrop-filter: blur(26px) saturate(1.5);
border: 1px solid rgba(255,255,255,0.72);
border-radius: 22px;
box-shadow: 0 24px 60px rgba(15,20,25,0.10), inset 0 1px 0 rgba(255,255,255,0.85);
```
背后的柜子与渐变会**隐约透出**，边界从"贴图的硬边"变成"玻璃的质感"。
## 清理
- 删除 `deploy/landing/hero.jpg`（分栏布局废弃，146KB）
- 删除 `.hero` / `.hero::before` / `.hero img` 全部 CSS 与 HTML（含此前的 mask 方案）
- 媒体查询改为：窄屏收紧面板宽度、减弱白纱让图更多露出
## 文件
| 文件 | 变化 |
|---|---|
| `deploy/landing/hero-full.jpg` | 新增（1920×1077，114.7KB） |
| `deploy/landing/index.html` | 全屏背景 + 毛玻璃面板；删 hero 相关 |
| `deploy/landing/hero.jpg` | **删除** |
## 实测（发布后打真实 URL）
```
200 114.7KB image/jpeg hero-full.jpg
200 68.6KB image/jpeg og-image.jpg
200 21.1KB image/svg+xml favicon.svg
200 12.3KB image/svg+xml logo.svg
404 text/html hero.jpg （已删）
```
HTML 已确认含 `background: url("hero-full.jpg")`、两条 `backdrop-filter`、
`<div class="copy">`，且不再有 `class="hero"` / `mask-image`。
## 备注
生成按 Agnes **串行**要求执行：全程一次一个任务（v1 失败 → v2 成功）。
|
2026-09-21 03:09:26 +08:00 |
|
