feat(landing): 首页主图升级 + 补 og:image 社交分享图（用 Agnes Image 生成）
## 主图：906KB 平淡白底照 → 146KB 影棚级产品图 原 `hero-bg.png` 是 1312×736 的产品照，柜子偏在画面右侧、左侧大片死白， 且被 `background-size:100% 100%` 横向拉伸 34%（见上一提交的分栏改造）。 本次用 **Agnes Image 2.5 Flash 图生图**升级： - 输入：原图压缩到 1024 宽（51KB）作 Data URI - 提示词：保持 6×6 共 36 仓的矩阵布局（**产品规格是真的，不能改**）， 柜体居中构图，换成干净现代的商业影棚环境，品牌蓝 #0366e6 轮廓光， 玻璃仓门反光、地面投影与倒影，明亮浅色基调 - 输出 2K 4:3（2304×1728）→ 压到 1800 宽 JPEG q87 = **145.9KB** ## og:image：从缺失到补齐 原页面**完全没有** og/Twitter 元信息 —— 链接被分享到微信/Twitter 时没有预览图。 现补全 `og:type/site_name/title/description/image/url` + `twitter:card=summary_large_image` 等，配图用 2K 16:9 生成后压到标准 1200×630 = 68.6KB。 ## 文件 | 文件 | 变化 | |---|---| | `deploy/landing/hero.jpg` | 新增（145.9KB，1800×1350） | | `deploy/landing/og-image.jpg` | 新增（68.6KB，1200×673） | | `deploy/landing/index.html` | 主图 `hero-bg.png`→`hero.jpg`；补 og/Twitter 元信息 | | `deploy/landing/hero-bg.png` | **删除**（905.9KB，已无人引用） | 首屏图片总体积：905.9KB → **214.5KB**（-76%）。 ## 实测（发布后打真实 URL） ``` 200 145.9KB image/jpeg app.anzhizhichong.com/hero.jpg 200 68.6KB image/jpeg app.anzhizhichong.com/og-image.jpg 200 21.1KB image/svg+xml favicon.svg 200 12.3KB image/svg+xml logo.svg 404 text/html hero-bg.png （文件确已删除） ``` HTML 已确认引用 `hero.jpg` 且含 `og:image` / `twitter:card`。 ## 过程中修掉的 CLI 缺陷 生成时撞到 Windows **进程命令行 32KB 上限**（Data URI base64 走参数直接 `WinError 206`）。 已给两个 CLI 补上本地文件入参：`--image-file`（图像）、 `--image-file`/`--first-frame-file`/`--last-frame-file`/`--audio-file`（视频）， 内部转 Data URI，不再走命令行。 ## 备注 生成按 Agnes 的**串行**要求执行：两个任务一次一个，顺序完成（主图 → og 图）。
This commit is contained in:
12451
parent
318501d6e7
commit
fe5eaa51c4
Binary file not shown.
|
Before Width: | Height: | Size: 906 KiB |
BIN
deploy/landing/hero.jpg
Normal file
BIN
deploy/landing/hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
@ -6,166 +6,238 @@
|
||||
<!-- 全站统一 favicon：与 web 管理端同源（logo/favicon.svg） -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<title>艾动智能 — 智能充电柜矩阵系统</title>
|
||||
<!-- 社交分享（og / Twitter）：此前完全缺失，链接被分享时没有预览图 -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="艾动智能">
|
||||
<meta property="og:title" content="艾动智能 — 为换电场景打造的下一代智能充电">
|
||||
<meta property="og:description" content="36 仓独立直流快充，4G 远程实时管控，多重安全防护体系。从硬件到云端，全栈自研的智能充电解决方案。">
|
||||
<meta property="og:image" content="https://app.anzhizhichong.com/og-image.jpg">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:url" content="https://app.anzhizhichong.com/">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="艾动智能 — 为换电场景打造的下一代智能充电">
|
||||
<meta name="twitter:description" content="36 仓独立直流快充，4G 远程实时管控，多重安全防护体系。从硬件到云端，全栈自研。">
|
||||
<meta name="twitter:image" content="https://app.anzhizhichong.com/og-image.jpg">
|
||||
<style>
|
||||
/* ==========================================================================
|
||||
艾动智能 · 产品介绍页（单屏不滚动 / 明亮浅色）
|
||||
—— 设计口径见 AGENTS.md「操作规则」：偏好明亮浅色、单屏不滚动，⛔ 不做暗色科技风
|
||||
—— 品牌色直接取自 logo：logo/纯色横向.svg 的 .cls-1 = #0366e6
|
||||
========================================================================== */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--brand: #0366e6; /* 取自 logo 的蓝，全站强调色统一用它 */
|
||||
--brand-dark: #0354c4; /* hover 加深 */
|
||||
--brand-soft: #eaf2fe; /* 极浅蓝底，用于标签/弱化背景 */
|
||||
--ink: #0F1419; /* 主标题 */
|
||||
--body: #454B58; /* 正文 */
|
||||
--muted: #8B92A5; /* 辅助文字 */
|
||||
--line: rgba(15,20,25,0.08);
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow: hidden; /* 单屏不滚动（AGENTS.md 口径） */
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
|
||||
color: #1A1C20;
|
||||
color: var(--body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
/* ===== 整体布局：上中下三块 ===== */
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* ===== 整体：上 / 中 / 下 三块，中块自适应 ===== */
|
||||
.layout { display: flex; flex-direction: column; height: 100vh; }
|
||||
|
||||
/* ===== 背景：白底 + 右上角极淡的品牌蓝光晕（保持明亮，不搞暗色）===== */
|
||||
.bg {
|
||||
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
||||
background:
|
||||
radial-gradient(900px 620px at 82% 18%, rgba(3,102,230,0.055), transparent 68%),
|
||||
radial-gradient(700px 480px at 96% 88%, rgba(3,102,230,0.035), transparent 70%);
|
||||
}
|
||||
|
||||
/* ===== TOP: 顶部导航 ===== */
|
||||
.top {
|
||||
position: relative; z-index: 2;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 48px;
|
||||
z-index: 10;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 48px;
|
||||
}
|
||||
.top-brand { display: flex; align-items: center; }
|
||||
/* 横版锁标 1511.75×413.59（≈3.65:1）；48px 高 ⇒ 约 175px 宽 */
|
||||
.logo { height: 46px; width: auto; display: block; }
|
||||
|
||||
.top-brand { display: flex; align-items: center; gap: 8px; }
|
||||
.logo {
|
||||
/* 横版锁标 1511.75x413.59（≈3.65:1）：48px 高 ⇒ 约 175px 宽，
|
||||
锁标内部的"艾动智能"字样约 24px，与页头原有文字观感一致 */
|
||||
height: 48px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-links { display: flex; gap: 8px; }
|
||||
.top-links { display: flex; align-items: center; gap: 6px; }
|
||||
.top-link {
|
||||
font-size: 13px; font-weight: 500;
|
||||
color: #4A5060;
|
||||
padding: 7px 16px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s;
|
||||
font-size: 13px; font-weight: 500; color: var(--body);
|
||||
padding: 8px 16px; border-radius: 8px; transition: all .2s;
|
||||
}
|
||||
.top-link:hover { background: rgba(37,99,235,0.07); color: #2563EB; }
|
||||
.top-link--cta { background: #1A1C20; color: #fff; }
|
||||
.top-link--cta:hover { background: #2D3038; color: #fff; }
|
||||
.top-link:hover { background: var(--brand-soft); color: var(--brand); }
|
||||
.top-link--cta { background: var(--ink); color: #fff; }
|
||||
.top-link--cta:hover { background: #23272F; color: #fff; }
|
||||
|
||||
/* ===== MID: 中部背景图，填满 ===== */
|
||||
/* ===== MID: 左文右图 分栏 ===== */
|
||||
.mid {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
background: url("hero-bg.png") no-repeat right center;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 80px;
|
||||
position: relative; z-index: 1;
|
||||
flex: 1; min-height: 0;
|
||||
display: flex; align-items: center;
|
||||
gap: 40px;
|
||||
padding: 0 64px;
|
||||
}
|
||||
|
||||
/* ===== COPY: 文字区域 ===== */
|
||||
/* ---- 左：文案 ---- */
|
||||
.copy {
|
||||
max-width: 580px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
flex: 1 1 52%;
|
||||
max-width: 620px;
|
||||
display: flex; flex-direction: column; gap: 20px;
|
||||
}
|
||||
|
||||
/* 小标签：品牌蓝 + 呼吸圆点 */
|
||||
.tag {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 5px 14px;
|
||||
border: 1px solid rgba(37,99,235,0.25);
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 6px 14px 6px 12px;
|
||||
background: var(--brand-soft);
|
||||
border: 1px solid rgba(3,102,230,0.16);
|
||||
border-radius: 100px;
|
||||
font-size: 13px; font-weight: 600;
|
||||
color: #2563EB;
|
||||
font-size: 13px; font-weight: 600; color: var(--brand);
|
||||
width: fit-content;
|
||||
}
|
||||
.tag .dot {
|
||||
width: 6px; height: 6px;
|
||||
background: #2563EB;
|
||||
border-radius: 50%;
|
||||
width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--brand);
|
||||
box-shadow: 0 0 0 0 rgba(3,102,230,0.45);
|
||||
animation: pulse 2.4s ease-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(3,102,230,0.40); }
|
||||
70% { box-shadow: 0 0 0 7px rgba(3,102,230,0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(3,102,230,0); }
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(40px, 4.5vw, 60px);
|
||||
font-weight: 900;
|
||||
line-height: 1.15;
|
||||
font-size: clamp(38px, 4.2vw, 58px);
|
||||
font-weight: 800;
|
||||
line-height: 1.18;
|
||||
letter-spacing: -0.02em;
|
||||
color: #1A1C20;
|
||||
color: var(--ink);
|
||||
}
|
||||
h1 .accent { color: #2563EB; }
|
||||
h1 .accent { color: var(--brand); }
|
||||
|
||||
.subhead {
|
||||
font-size: clamp(15px, 1.3vw, 18px);
|
||||
font-weight: 300;
|
||||
color: #4A5060;
|
||||
line-height: 1.75;
|
||||
max-width: 480px;
|
||||
font-size: clamp(15px, 1.25vw, 17px);
|
||||
font-weight: 400;
|
||||
line-height: 1.8;
|
||||
color: var(--body);
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
/* 能力标签：只放 stats 里没有的，避免信息重复 */
|
||||
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.pill {
|
||||
padding: 5px 12px;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
padding: 5px 13px;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 100px;
|
||||
font-size: 13px; font-weight: 500;
|
||||
color: #4A5060;
|
||||
font-size: 13px; font-weight: 500; color: var(--body);
|
||||
box-shadow: 0 1px 2px rgba(15,20,25,0.03);
|
||||
}
|
||||
|
||||
.ctas { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
|
||||
/* 行动按钮（此前只有 CSS、HTML 里从未渲染过）*/
|
||||
.ctas { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 13px 28px;
|
||||
padding: 13px 26px;
|
||||
font-size: 15px; font-weight: 600;
|
||||
border-radius: 10px;
|
||||
transition: all 0.2s;
|
||||
border-radius: 10px; transition: all .2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #1A1C20; color: #fff;
|
||||
box-shadow: 0 4px 24px rgba(26,28,32,0.10);
|
||||
background: var(--brand); color: #fff;
|
||||
box-shadow: 0 6px 20px rgba(3,102,230,0.24);
|
||||
}
|
||||
.btn-primary:hover { background: #2D3038; transform: translateY(-2px); }
|
||||
.btn-ghost {
|
||||
color: #4A5060;
|
||||
border: 1.5px solid rgba(0,0,0,0.12);
|
||||
.btn-primary:hover {
|
||||
background: var(--brand-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 26px rgba(3,102,230,0.30);
|
||||
}
|
||||
.btn-ghost:hover { border-color: #8B92A5; color: #1A1C20; }
|
||||
.btn-ghost { color: var(--body); border: 1.5px solid rgba(15,20,25,0.13); background: #fff; }
|
||||
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
|
||||
.btn .arrow { transition: transform .2s; }
|
||||
.btn-primary:hover .arrow { transform: translateX(3px); }
|
||||
|
||||
/* 数据条 */
|
||||
.stats {
|
||||
display: flex; gap: 32px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(0,0,0,0.08);
|
||||
margin-top: 4px;
|
||||
display: flex; gap: 40px;
|
||||
padding-top: 18px; margin-top: 4px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.stat-num { font-size: 28px; font-weight: 700; color: #1A1C20; line-height: 1.2; }
|
||||
.stat-label { font-size: 12px; font-weight: 500; color: #8B92A5; margin-top: 2px; }
|
||||
.stat-num {
|
||||
font-size: 30px; font-weight: 800; color: var(--ink);
|
||||
line-height: 1.1; letter-spacing: -0.01em;
|
||||
font-variant-numeric: tabular-nums; /* 数字等宽，四个数据对齐 */
|
||||
}
|
||||
.stat-num .unit { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 2px; }
|
||||
.stat-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 5px; }
|
||||
|
||||
/* ===== BOT: 底部 ICP ===== */
|
||||
.bot {
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
padding: 14px;
|
||||
font-size: 12px;
|
||||
color: #6B7280;
|
||||
z-index: 10;
|
||||
/* ---- 右：产品图 ---- */
|
||||
.hero {
|
||||
position: relative;
|
||||
flex: 1 1 48%;
|
||||
height: 100%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.bot a { color: #2563EB; }
|
||||
/* 柜子背后的柔光 + 地面投影，给纯白背景加点纵深（仍是浅色）*/
|
||||
.hero::before {
|
||||
content: ''; position: absolute; z-index: 0;
|
||||
width: 78%; aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(3,102,230,0.10), transparent 62%);
|
||||
}
|
||||
.hero img {
|
||||
position: relative; z-index: 1;
|
||||
/* ⛔ 绝不用 background-size:100% 100%（那会把 1.78 的图横向拉爆）；
|
||||
contain = 保持原始宽高比，永不变形 */
|
||||
max-width: 100%; max-height: 100%;
|
||||
width: auto; height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 26px 44px rgba(15,20,25,0.13));
|
||||
}
|
||||
|
||||
/* ===== BOT: 底部备案 ===== */
|
||||
.bot {
|
||||
position: relative; z-index: 2;
|
||||
flex-shrink: 0;
|
||||
text-align: center; padding: 14px;
|
||||
font-size: 12px; color: var(--muted);
|
||||
}
|
||||
.bot a { color: var(--brand); }
|
||||
.bot a:hover { text-decoration: underline; }
|
||||
|
||||
/* ===== 自适应：窄屏时收紧，保证仍然单屏不滚动 ===== */
|
||||
@media (max-width: 1180px) {
|
||||
.mid { padding: 0 40px; gap: 28px; }
|
||||
.stats { gap: 28px; }
|
||||
.stat-num { font-size: 26px; }
|
||||
}
|
||||
/* 到更窄/更矮时让图片让位给文字，避免文字被挤出屏幕 */
|
||||
@media (max-width: 900px), (max-height: 620px) {
|
||||
.hero { display: none; }
|
||||
.copy { flex-basis: 100%; max-width: 720px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="bg"></div>
|
||||
|
||||
<div class="layout">
|
||||
|
||||
<!-- 上：顶部导航 -->
|
||||
<div class="top">
|
||||
<div class="top-brand">
|
||||
<!-- 横版锁标（图标 + "艾动智能"字样，文字已转为路径、无字体依赖）。
|
||||
与 tab 图标同源：logo/纯色横向.svg → favicon 用其方形变体 -->
|
||||
<!-- 横版锁标（图标 + "艾动智能"字样，文字已转为路径、无字体依赖）-->
|
||||
<img class="logo" src="logo.svg" alt="艾动智能">
|
||||
</div>
|
||||
<div class="top-links">
|
||||
@ -174,32 +246,54 @@ h1 .accent { color: #2563EB; }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中：背景图填满 -->
|
||||
<!-- 中：左文右图 -->
|
||||
<div class="mid">
|
||||
<div class="copy">
|
||||
<div class="tag"><span class="dot"></span>智能充电矩阵系统</div>
|
||||
<h1>为换电场景打造的<br><span class="accent">下一代智能充电</span></h1>
|
||||
<p class="subhead">36仓独立直流快充，4G远程实时管控，多重安全防护体系。从硬件到云端，全栈自研的智能充电解决方案。</p>
|
||||
|
||||
<h1>为换电场景打造的<br><span class="accent">下一代智能充电</span></h1>
|
||||
|
||||
<p class="subhead">
|
||||
36 仓独立直流快充，4G 远程实时管控，多重安全防护体系。<br>
|
||||
从硬件到云端，全栈自研的智能充电解决方案。
|
||||
</p>
|
||||
|
||||
<!-- 只放 stats 未覆盖的能力点，"36仓独立"已由下方数据条表达，不再重复 -->
|
||||
<div class="pills">
|
||||
<span class="pill">36仓独立</span>
|
||||
<span class="pill">多重防护</span>
|
||||
<span class="pill">4G 在线</span>
|
||||
<span class="pill">BMS 适配</span>
|
||||
</div>
|
||||
|
||||
<!-- 首屏行动按钮 -->
|
||||
<div class="ctas">
|
||||
<a href="/pms/" class="btn btn-primary">
|
||||
进入管理后台
|
||||
<svg class="arrow" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14M13 6l6 6-6 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/doc/" class="btn btn-ghost">开发文档</a>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div><div class="stat-num">36</div><div class="stat-label">独立仓体</div></div>
|
||||
<div><div class="stat-num"><0.5s</div><div class="stat-label">指令响应</div></div>
|
||||
<div><div class="stat-num">8000h</div><div class="stat-label">MTBF</div></div>
|
||||
<div><div class="stat-num">99%</div><div class="stat-label">可用率</div></div>
|
||||
</div>
|
||||
<div><div class="stat-num"><0.5<span class="unit">s</span></div><div class="stat-label">指令响应</div></div>
|
||||
<div><div class="stat-num">8000<span class="unit">h</span></div><div class="stat-label">MTBF</div></div>
|
||||
<div><div class="stat-num">99<span class="unit">%</span></div><div class="stat-label">可用率</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下：底部 ICP -->
|
||||
<!-- 产品图：object-fit:contain 保证不变形；窄屏时隐藏让位给文字 -->
|
||||
<div class="hero">
|
||||
<img src="hero.jpg" alt="艾动智能 36 仓智能充电柜">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 下：备案 -->
|
||||
<div class="bot">
|
||||
© 2026 艾动智能 · <a href="https://beian.miit.gov.cn/" target="_blank">苏ICP备2025198376号-1</a>
|
||||
© 2026 艾动智能 · <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">苏ICP备2025198376号-1</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 374 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 471 KiB |
BIN
deploy/landing/og-image.jpg
Normal file
BIN
deploy/landing/og-image.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Loading…
x
Reference in New Issue
Block a user