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产物
217 lines
5.9 KiB
HTML
217 lines
5.9 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: 800px; height: 800px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(255,105,0,0.07) 0%, transparent 70%);
|
||
bottom: -300px; left: -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.05) 0%, transparent 70%);
|
||
top: -150px; right: -100px;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 中央结束内容 */
|
||
.end-content {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
width: 900px;
|
||
}
|
||
|
||
.end-badge {
|
||
display: inline-block;
|
||
padding: 6px 20px;
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(255,105,0,0.3);
|
||
color: var(--accent-1);
|
||
font-size: 13px; font-weight: 600;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
.end-title {
|
||
font-size: 44px; font-weight: 800;
|
||
line-height: 1.3;
|
||
margin-bottom: 32px;
|
||
}
|
||
.end-title span {
|
||
color: var(--accent-1);
|
||
}
|
||
|
||
/* 核心要点横排 */
|
||
.highlights {
|
||
display: flex; justify-content: center; gap: 40px;
|
||
margin-bottom: 40px;
|
||
}
|
||
.highlight-item {
|
||
text-align: center;
|
||
}
|
||
.highlight-num {
|
||
font-size: 36px; font-weight: 800;
|
||
color: var(--accent-1);
|
||
line-height: 1;
|
||
}
|
||
.highlight-unit {
|
||
font-size: 14px; color: var(--accent-2);
|
||
}
|
||
.highlight-label {
|
||
font-size: 13px; color: var(--text-secondary);
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* 分隔线 */
|
||
.divider {
|
||
width: 80px; height: 2px;
|
||
background: linear-gradient(90deg, transparent, var(--accent-1), transparent);
|
||
margin: 0 auto 28px;
|
||
}
|
||
|
||
/* 未来展望 */
|
||
.outlook {
|
||
font-size: 16px; color: var(--text-secondary);
|
||
line-height: 1.8;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
.outlook strong { color: var(--accent-1); }
|
||
|
||
/* 产品线标签 */
|
||
.product-line {
|
||
display: flex; justify-content: center; gap: 12px;
|
||
margin-top: 24px;
|
||
}
|
||
.product-tag {
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(255,255,255,0.12);
|
||
font-size: 12px; color: var(--text-secondary);
|
||
background: rgba(255,255,255,0.03);
|
||
}
|
||
.product-tag.active {
|
||
border-color: var(--accent-1);
|
||
color: var(--accent-1);
|
||
background: rgba(255,105,0,0.06);
|
||
}
|
||
|
||
/* 品牌底部 */
|
||
.brand-footer {
|
||
position: absolute; bottom: 30px; left: 0; right: 0;
|
||
text-align: center;
|
||
}
|
||
.brand-logo {
|
||
display: inline-flex; align-items: center; gap: 10px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.brand-logo .logo-box {
|
||
width: 28px; height: 28px;
|
||
border-radius: 6px;
|
||
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.brand-logo .logo-box svg { width: 16px; height: 16px; }
|
||
.brand-logo .logo-text {
|
||
font-size: 14px; font-weight: 600;
|
||
color: var(--text-secondary); letter-spacing: 1px;
|
||
}
|
||
.brand-copyright {
|
||
font-size: 11px; color: rgba(255,255,255,0.25);
|
||
}
|
||
|
||
.footer-page {
|
||
position: absolute; bottom: 16px; right: 40px;
|
||
font-size: 12px; color: rgba(255,255,255,0.3);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="bg-glow"></div>
|
||
<div class="bg-glow-2"></div>
|
||
|
||
<div class="end-content">
|
||
<div class="end-badge">MARKET & OUTLOOK</div>
|
||
<div class="end-title">
|
||
市场热销 <span>未来可期</span>
|
||
</div>
|
||
|
||
<div class="highlights">
|
||
<div class="highlight-item">
|
||
<div class="highlight-num">1.5<span class="highlight-unit">万+</span></div>
|
||
<div class="highlight-label">34分钟锁单量</div>
|
||
</div>
|
||
<div class="highlight-item">
|
||
<div class="highlight-num">55<span class="highlight-unit">万辆</span></div>
|
||
<div class="highlight-label">2026年销量目标</div>
|
||
</div>
|
||
<div class="highlight-item">
|
||
<div class="highlight-num">41<span class="highlight-unit">万辆</span></div>
|
||
<div class="highlight-label">2025年实际交付</div>
|
||
</div>
|
||
<div class="highlight-item">
|
||
<div class="highlight-num">+34<span class="highlight-unit">%</span></div>
|
||
<div class="highlight-label">目标同比增幅</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<p class="outlook">
|
||
2026年小米汽车规划<strong>四款新产品</strong>：新款SU7、SU7行政版、以及两款全新增程式SUV（YU8、YU9），持续扩展产品矩阵，向<strong>年销55万辆</strong>目标全力冲刺。
|
||
</p>
|
||
|
||
<div class="product-line">
|
||
<span class="product-tag active">新款SU7</span>
|
||
<span class="product-tag">SU7行政版</span>
|
||
<span class="product-tag">YU8 (SUV)</span>
|
||
<span class="product-tag">YU9 (SUV)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="brand-footer">
|
||
<div class="brand-logo">
|
||
<div class="logo-box">
|
||
<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="logo-text">XIAOMI AUTO</span>
|
||
</div>
|
||
<div class="brand-copyright">2026 Xiaomi Automobile Technology Co., Ltd.</div>
|
||
</div>
|
||
|
||
<div class="footer-page">05 / 05</div>
|
||
</body>
|
||
</html>
|