e860485ec8
svg2pptx.py: - 修复image opacity不生效（通过OOXML alphaModFix） - 修复环形图stroke渐变url(#id)引用不支持（fallback第一个stop颜色） - 修复viewBox内缩放不传递（g组scale累积到所有子元素） - 修复text baseline偏移（区分text-after-edge和auto） - 修复text-anchor:middle/end的x坐标偏移 - 添加--html-dir参数支持 html2svg.py: - 修复图片相对路径解析（以HTML文件所在目录为基准） - 新增3种CSS兜底预处理（background-clip:text、text-fill-color、mask-image） 新增 references/pipeline-compat.md: - HTML->SVG->PPTX管线兼容性规则文档 - CSS禁止清单、防偏移写法指南、防偏移checklist - 已整合到SKILL.md和prompts.md中引用 prompts.md: - 新增内联SVG防偏移约束（禁SVG text、用HTML叠加） 示例产物: - ppt-output/ 包含SU7示例的完整HTML/SVG/PPTX产物
228 lines
6.1 KiB
HTML
228 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<style>
|
||
:root {
|
||
--bg-primary: #1A1A1A;
|
||
--bg-secondary: #111111;
|
||
--card-bg-from: #2A2A2A;
|
||
--card-bg-to: #1A1A1A;
|
||
--card-border: rgba(255,105,0,0.15);
|
||
--card-radius: 16px;
|
||
--text-primary: #FFFFFF;
|
||
--text-secondary: rgba(255,255,255,0.65);
|
||
--accent-1: #FF6900;
|
||
--accent-2: #FF8C00;
|
||
--accent-3: #FFFFFF;
|
||
--accent-4: #E0E0E0;
|
||
}
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body {
|
||
width: 1280px; height: 720px; overflow: hidden;
|
||
background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
|
||
color: var(--text-primary);
|
||
position: relative;
|
||
}
|
||
|
||
/* 背景装饰 -- 大弧形光晕 */
|
||
.bg-glow {
|
||
position: absolute;
|
||
width: 900px; height: 900px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(255,105,0,0.08) 0%, transparent 70%);
|
||
top: -300px; right: -200px;
|
||
pointer-events: none;
|
||
}
|
||
.bg-glow-2 {
|
||
position: absolute;
|
||
width: 500px; height: 500px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(255,140,0,0.06) 0%, transparent 70%);
|
||
bottom: -150px; left: -100px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 左上角品牌标识区 */
|
||
.brand-area {
|
||
position: absolute; top: 40px; left: 60px;
|
||
display: flex; align-items: center; gap: 14px;
|
||
}
|
||
.brand-logo {
|
||
width: 36px; height: 36px;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.brand-logo svg { width: 20px; height: 20px; }
|
||
.brand-text {
|
||
font-size: 15px; font-weight: 600;
|
||
color: var(--text-secondary); letter-spacing: 2px;
|
||
}
|
||
|
||
/* 中央主标题 */
|
||
.hero {
|
||
position: absolute;
|
||
top: 50%; left: 60px;
|
||
transform: translateY(-55%);
|
||
max-width: 680px;
|
||
}
|
||
.hero-badge {
|
||
display: inline-block;
|
||
padding: 6px 18px;
|
||
border-radius: 20px;
|
||
border: 1px solid var(--accent-1);
|
||
color: var(--accent-1);
|
||
font-size: 13px; font-weight: 600;
|
||
letter-spacing: 1.5px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero h1 {
|
||
font-size: 52px; font-weight: 800;
|
||
line-height: 1.2;
|
||
margin-bottom: 20px;
|
||
}
|
||
.hero h1 span {
|
||
color: var(--accent-1);
|
||
}
|
||
.hero p {
|
||
font-size: 18px;
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
max-width: 560px;
|
||
}
|
||
|
||
/* 右侧数据亮点卡片 */
|
||
.data-strip {
|
||
position: absolute;
|
||
right: 60px; top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex; flex-direction: column; gap: 16px;
|
||
}
|
||
.data-card {
|
||
width: 240px;
|
||
padding: 20px 24px;
|
||
border-radius: var(--card-radius);
|
||
background: linear-gradient(135deg, var(--card-bg-from), var(--card-bg-to));
|
||
border: 1px solid var(--card-border);
|
||
}
|
||
.data-card .number {
|
||
font-size: 36px; font-weight: 800;
|
||
color: var(--accent-1);
|
||
}
|
||
.data-card .unit {
|
||
font-size: 14px; color: var(--accent-1);
|
||
margin-left: 2px;
|
||
}
|
||
.data-card .label {
|
||
font-size: 13px; color: var(--text-secondary);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* 底部信息条 */
|
||
.footer {
|
||
position: absolute; bottom: 30px; left: 60px; right: 60px;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.footer-left {
|
||
font-size: 13px; color: var(--text-secondary);
|
||
}
|
||
.footer-right {
|
||
font-size: 12px; color: rgba(255,255,255,0.35);
|
||
display: flex; gap: 20px;
|
||
}
|
||
|
||
/* 装饰线条 */
|
||
.deco-line {
|
||
position: absolute;
|
||
width: 120px; height: 2px;
|
||
background: linear-gradient(90deg, var(--accent-1), transparent);
|
||
bottom: 80px; left: 60px;
|
||
}
|
||
|
||
/* 配图 -- 渐隐融合（div遮罩实现，SVG安全） */
|
||
.hero-image {
|
||
position: absolute;
|
||
bottom: 0; right: 0;
|
||
width: 55%;
|
||
height: 75%;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
.hero-image img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
opacity: 0.35;
|
||
}
|
||
/* 左侧渐隐遮罩 */
|
||
.hero-image .mask-left {
|
||
position: absolute; top: 0; left: 0;
|
||
width: 70%; height: 100%;
|
||
background: linear-gradient(90deg, var(--bg-primary) 0%, transparent 100%);
|
||
pointer-events: none;
|
||
}
|
||
/* 底部渐隐遮罩 */
|
||
.hero-image .mask-bottom {
|
||
position: absolute; bottom: 0; left: 0;
|
||
width: 100%; height: 50%;
|
||
background: linear-gradient(0deg, var(--bg-primary) 0%, transparent 100%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 确保内容在图片上方 */
|
||
.brand-area, .hero, .data-strip, .footer, .deco-line { z-index: 1; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="bg-glow"></div>
|
||
<div class="bg-glow-2"></div>
|
||
|
||
<div class="hero-image">
|
||
<img src="../images/su7_cover.png" alt="">
|
||
<div class="mask-left"></div>
|
||
<div class="mask-bottom"></div>
|
||
</div>
|
||
|
||
<div class="brand-area">
|
||
<div class="brand-logo">
|
||
<svg viewBox="0 0 24 24" fill="white"><path d="M2 8h20v8H2z" opacity="0.8"/><path d="M6 4h12v16H6z" opacity="0.6"/></svg>
|
||
</div>
|
||
<span class="brand-text">XIAOMI AUTO</span>
|
||
</div>
|
||
|
||
<div class="hero">
|
||
<div class="hero-badge">2026.03.19 NEW LAUNCH</div>
|
||
<h1>新一代<span>小米SU7</span><br>正式发布</h1>
|
||
<p>全系搭载V6s Plus超级电机，全系标配激光雷达，Pro版CLTC续航902km。上市34分钟锁单突破1.5万辆。</p>
|
||
</div>
|
||
|
||
<div class="data-strip">
|
||
<div class="data-card">
|
||
<div><span class="number">21.99</span><span class="unit">万元起</span></div>
|
||
<div class="label">标准版起售价</div>
|
||
</div>
|
||
<div class="data-card">
|
||
<div><span class="number">902</span><span class="unit">km</span></div>
|
||
<div class="label">Pro版CLTC续航</div>
|
||
</div>
|
||
<div class="data-card">
|
||
<div><span class="number">1.5</span><span class="unit">万+</span></div>
|
||
<div class="label">34分钟锁单量</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="deco-line"></div>
|
||
|
||
<div class="footer">
|
||
<div class="footer-left">小米汽车 | 新一代SU7发布会</div>
|
||
<div class="footer-right">
|
||
<span>标准版 / Pro / Max</span>
|
||
<span>01 / 05</span>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|