清理: 移除运行时产物，仅保留 png 效果展示图
This commit is contained in:
sunbigfly
4
.gitignore
vendored
4
.gitignore
vendored
@@ -2,3 +2,7 @@ node_modules/
|
|||||||
package-lock.json
|
package-lock.json
|
||||||
package.json
|
package.json
|
||||||
.vscode/
|
.vscode/
|
||||||
|
|
||||||
|
# 运行时产物（png/ 保留用于 README 效果展示）
|
||||||
|
ppt-output/*
|
||||||
|
!ppt-output/png/
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
@@ -1,227 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,256 +0,0 @@
|
|||||||
<!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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 页面标题区 */
|
|
||||||
.page-title {
|
|
||||||
position: absolute; left: 40px; top: 20px;
|
|
||||||
width: 1200px; height: 50px;
|
|
||||||
display: flex; align-items: center; gap: 16px;
|
|
||||||
}
|
|
||||||
.title-accent {
|
|
||||||
width: 4px; height: 28px;
|
|
||||||
background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.page-title h2 {
|
|
||||||
font-size: 26px; font-weight: 700;
|
|
||||||
}
|
|
||||||
.page-title .subtitle {
|
|
||||||
font-size: 14px; color: var(--text-secondary);
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 内容区 -- 三栏等宽 */
|
|
||||||
.content-area {
|
|
||||||
position: absolute;
|
|
||||||
left: 40px; top: 80px;
|
|
||||||
width: 1200px; height: 580px;
|
|
||||||
display: grid;
|
|
||||||
grid-template: 1fr / repeat(3, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.model-card {
|
|
||||||
border-radius: var(--card-radius);
|
|
||||||
background: linear-gradient(180deg, var(--card-bg-from), var(--card-bg-to));
|
|
||||||
border: 1px solid var(--card-border);
|
|
||||||
padding: 28px 24px;
|
|
||||||
display: flex; flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.model-card.featured {
|
|
||||||
border-color: rgba(255,105,0,0.4);
|
|
||||||
box-shadow: 0 0 30px rgba(255,105,0,0.08);
|
|
||||||
}
|
|
||||||
.model-card.featured .badge {
|
|
||||||
position: absolute; top: 16px; right: 16px;
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
|
|
||||||
color: white; font-size: 11px; font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.model-name {
|
|
||||||
font-size: 22px; font-weight: 700;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
.model-price {
|
|
||||||
font-size: 32px; font-weight: 800;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.model-price span {
|
|
||||||
color: var(--accent-1);
|
|
||||||
}
|
|
||||||
.model-price .currency {
|
|
||||||
font-size: 16px; font-weight: 600;
|
|
||||||
color: var(--accent-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spec-list {
|
|
||||||
flex: 1;
|
|
||||||
display: flex; flex-direction: column; gap: 12px;
|
|
||||||
}
|
|
||||||
.spec-item {
|
|
||||||
display: flex; justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
||||||
}
|
|
||||||
.spec-item:last-child { border-bottom: none; }
|
|
||||||
.spec-label {
|
|
||||||
font-size: 13px; color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
.spec-value {
|
|
||||||
font-size: 14px; font-weight: 600;
|
|
||||||
}
|
|
||||||
.spec-value.highlight {
|
|
||||||
color: var(--accent-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 底部对比条 */
|
|
||||||
.compare-bar {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 14px 0 0;
|
|
||||||
border-top: 1px solid rgba(255,255,255,0.08);
|
|
||||||
}
|
|
||||||
.compare-bar .bar-label {
|
|
||||||
font-size: 11px; color: var(--text-secondary);
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.bar-track {
|
|
||||||
width: 100%; height: 6px;
|
|
||||||
background: rgba(255,255,255,0.06);
|
|
||||||
border-radius: 3px; overflow: hidden;
|
|
||||||
}
|
|
||||||
.bar-fill {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 3px;
|
|
||||||
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 页脚 */
|
|
||||||
.footer {
|
|
||||||
position: absolute; bottom: 16px; left: 40px; right: 40px;
|
|
||||||
display: flex; justify-content: space-between;
|
|
||||||
font-size: 12px; color: rgba(255,255,255,0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page-title">
|
|
||||||
<div class="title-accent"></div>
|
|
||||||
<h2>三款车型配置对比</h2>
|
|
||||||
<span class="subtitle">标准版 / Pro / Max -- 全系仅涨价4000元</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-area">
|
|
||||||
<!-- 标准版 -->
|
|
||||||
<div class="model-card">
|
|
||||||
<div class="model-name">标准版</div>
|
|
||||||
<div class="model-price"><span>21.99</span><span class="currency"> 万元</span></div>
|
|
||||||
<div class="spec-list">
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">电机</span>
|
|
||||||
<span class="spec-value">V6s Plus</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">功率</span>
|
|
||||||
<span class="spec-value">320hp</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">电压平台</span>
|
|
||||||
<span class="spec-value">752V</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">CLTC续航</span>
|
|
||||||
<span class="spec-value highlight">720km</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">激光雷达</span>
|
|
||||||
<span class="spec-value highlight">标配</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="compare-bar">
|
|
||||||
<div class="bar-label">续航能力</div>
|
|
||||||
<div class="bar-track"><div class="bar-fill" style="width:80%"></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pro版 -->
|
|
||||||
<div class="model-card featured">
|
|
||||||
<div class="badge">最长续航</div>
|
|
||||||
<div class="model-name">Pro</div>
|
|
||||||
<div class="model-price"><span>24.99</span><span class="currency"> 万元</span></div>
|
|
||||||
<div class="spec-list">
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">电机</span>
|
|
||||||
<span class="spec-value">V6s Plus</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">功率</span>
|
|
||||||
<span class="spec-value">320hp</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">电压平台</span>
|
|
||||||
<span class="spec-value">752V</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">CLTC续航</span>
|
|
||||||
<span class="spec-value highlight">902km</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">空气悬挂</span>
|
|
||||||
<span class="spec-value highlight">标配</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="compare-bar">
|
|
||||||
<div class="bar-label">续航能力</div>
|
|
||||||
<div class="bar-track"><div class="bar-fill" style="width:100%"></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Max版 -->
|
|
||||||
<div class="model-card">
|
|
||||||
<div class="model-name">Max</div>
|
|
||||||
<div class="model-price"><span>30.39</span><span class="currency"> 万元</span></div>
|
|
||||||
<div class="spec-list">
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">电机</span>
|
|
||||||
<span class="spec-value">双电机四驱</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">功率</span>
|
|
||||||
<span class="spec-value highlight">690hp</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">电压平台</span>
|
|
||||||
<span class="spec-value highlight">897V</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">CLTC续航</span>
|
|
||||||
<span class="spec-value">835km</span>
|
|
||||||
</div>
|
|
||||||
<div class="spec-item">
|
|
||||||
<span class="spec-label">零百加速</span>
|
|
||||||
<span class="spec-value highlight">3.08s</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="compare-bar">
|
|
||||||
<div class="bar-label">续航能力</div>
|
|
||||||
<div class="bar-track"><div class="bar-fill" style="width:93%"></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<span>新一代小米SU7 | 三款车型配置对比</span>
|
|
||||||
<span>02 / 05</span>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,258 +0,0 @@
|
|||||||
<!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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
position: absolute; left: 40px; top: 20px;
|
|
||||||
width: 1200px; height: 50px;
|
|
||||||
display: flex; align-items: center; gap: 16px;
|
|
||||||
}
|
|
||||||
.title-accent {
|
|
||||||
width: 4px; height: 28px;
|
|
||||||
background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.page-title h2 { font-size: 26px; font-weight: 700; }
|
|
||||||
.page-title .subtitle {
|
|
||||||
font-size: 14px; color: var(--text-secondary); margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 内容区 -- 主次结合(大+两小) */
|
|
||||||
.content-area {
|
|
||||||
position: absolute;
|
|
||||||
left: 40px; top: 80px;
|
|
||||||
width: 1200px; height: 580px;
|
|
||||||
display: grid;
|
|
||||||
grid-template: 1fr 1fr / 2fr 1fr;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
border-radius: var(--card-radius);
|
|
||||||
background: linear-gradient(180deg, var(--card-bg-from), var(--card-bg-to));
|
|
||||||
border: 1px solid var(--card-border);
|
|
||||||
padding: 28px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 主卡片氛围底图（极低透明度，无需遮罩，SVG/PPTX安全） */
|
|
||||||
.main-card .card-bg-img {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0; right: 0;
|
|
||||||
width: 40%; height: 45%;
|
|
||||||
object-fit: cover;
|
|
||||||
opacity: 0.06;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 0;
|
|
||||||
border-radius: 0 0 var(--card-radius) 0;
|
|
||||||
}
|
|
||||||
.main-card > *:not(.card-bg-img) { position: relative; z-index: 1; }
|
|
||||||
|
|
||||||
/* 主卡片 -- 跨两行 */
|
|
||||||
.main-card {
|
|
||||||
grid-row: 1 / -1;
|
|
||||||
}
|
|
||||||
.main-card h3 {
|
|
||||||
font-size: 20px; font-weight: 700; margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.main-card h3 svg {
|
|
||||||
width: 20px; height: 20px; vertical-align: middle;
|
|
||||||
margin-right: 8px; fill: var(--accent-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 续航对比图 -- SVG柱形图 */
|
|
||||||
.range-chart {
|
|
||||||
width: 100%; height: 340px;
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
.range-chart svg { width: 100%; height: 100%; }
|
|
||||||
.chart-bar { rx: 6; }
|
|
||||||
.chart-label { font-size: 13px; fill: var(--text-secondary); font-family: inherit; }
|
|
||||||
.chart-value { font-size: 16px; fill: var(--text-primary); font-weight: 700; font-family: inherit; }
|
|
||||||
.chart-model { font-size: 14px; fill: var(--text-secondary); font-family: inherit; }
|
|
||||||
|
|
||||||
/* 对比说明 */
|
|
||||||
.compare-note {
|
|
||||||
margin-top: 20px;
|
|
||||||
padding: 14px 18px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: rgba(255,105,0,0.06);
|
|
||||||
border-left: 3px solid var(--accent-1);
|
|
||||||
}
|
|
||||||
.compare-note p {
|
|
||||||
font-size: 13px; color: var(--text-secondary); line-height: 1.7;
|
|
||||||
}
|
|
||||||
.compare-note strong { color: var(--accent-1); font-weight: 600; }
|
|
||||||
|
|
||||||
/* 辅助卡片 */
|
|
||||||
.side-card h3 {
|
|
||||||
font-size: 18px; font-weight: 700; margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.kpi-row {
|
|
||||||
display: flex; align-items: baseline; gap: 4px;
|
|
||||||
}
|
|
||||||
.kpi-number {
|
|
||||||
font-size: 48px; font-weight: 800;
|
|
||||||
color: var(--accent-1);
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.kpi-unit {
|
|
||||||
font-size: 18px; color: var(--accent-2);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.kpi-desc {
|
|
||||||
font-size: 13px; color: var(--text-secondary);
|
|
||||||
margin-top: 10px; line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 快充进度环 -- 纯CSS+内联SVG（兼容管线） */
|
|
||||||
.charge-ring {
|
|
||||||
width: 120px; height: 120px; margin: 12px auto;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.charge-ring svg { width: 100%; height: 100%; }
|
|
||||||
.charge-ring-text {
|
|
||||||
position: absolute; top: 50%; left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.charge-ring-text .ring-val {
|
|
||||||
font-size: 22px; font-weight: 700; color: var(--text-primary);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.charge-ring-text .ring-lbl {
|
|
||||||
font-size: 10px; color: var(--text-secondary);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
position: absolute; bottom: 16px; left: 40px; right: 40px;
|
|
||||||
display: flex; justify-content: space-between;
|
|
||||||
font-size: 12px; color: rgba(255,255,255,0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page-title">
|
|
||||||
<div class="title-accent"></div>
|
|
||||||
<h2>动力与续航全面升级</h2>
|
|
||||||
<span class="subtitle">V6s Plus超级电机 / 高压快充平台</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-area">
|
|
||||||
<!-- 主卡片: 续航对比柱形图 -->
|
|
||||||
<div class="card main-card">
|
|
||||||
<img class="card-bg-img" src="../images/su7_power.png" alt="">
|
|
||||||
<h3>
|
|
||||||
<svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
|
||||||
CLTC续航里程对比 (km)
|
|
||||||
</h3>
|
|
||||||
<div class="range-chart">
|
|
||||||
<svg viewBox="0 0 660 340">
|
|
||||||
<!-- 初代 vs 新款 对比柱 -->
|
|
||||||
<!-- 标准版 -->
|
|
||||||
<text class="chart-model" x="70" y="330" text-anchor="middle">标准版</text>
|
|
||||||
<rect class="chart-bar" x="30" y="102" width="35" height="210" fill="rgba(255,255,255,0.1)"/>
|
|
||||||
<text class="chart-label" x="47" y="95" text-anchor="middle">700</text>
|
|
||||||
<rect class="chart-bar" x="70" y="96" width="35" height="216" fill="url(#barGrad)"/>
|
|
||||||
<text class="chart-value" x="87" y="89" text-anchor="middle">720</text>
|
|
||||||
|
|
||||||
<!-- Pro版 -->
|
|
||||||
<text class="chart-model" x="250" y="330" text-anchor="middle">Pro</text>
|
|
||||||
<rect class="chart-bar" x="210" y="63" width="35" height="249" fill="rgba(255,255,255,0.1)"/>
|
|
||||||
<text class="chart-label" x="227" y="56" text-anchor="middle">830</text>
|
|
||||||
<rect class="chart-bar" x="250" y="41" width="35" height="271" fill="url(#barGrad)"/>
|
|
||||||
<text class="chart-value" x="267" y="34" text-anchor="middle">902</text>
|
|
||||||
|
|
||||||
<!-- Max版 -->
|
|
||||||
<text class="chart-model" x="430" y="330" text-anchor="middle">Max</text>
|
|
||||||
<rect class="chart-bar" x="390" y="72" width="35" height="240" fill="rgba(255,255,255,0.1)"/>
|
|
||||||
<text class="chart-label" x="407" y="65" text-anchor="middle">800</text>
|
|
||||||
<rect class="chart-bar" x="430" y="62" width="35" height="250" fill="url(#barGrad)"/>
|
|
||||||
<text class="chart-value" x="447" y="55" text-anchor="middle">835</text>
|
|
||||||
|
|
||||||
<!-- 图例 -->
|
|
||||||
<rect x="520" y="20" width="14" height="14" rx="3" fill="rgba(255,255,255,0.1)"/>
|
|
||||||
<text class="chart-label" x="540" y="31">初代SU7</text>
|
|
||||||
<rect x="520" y="44" width="14" height="14" rx="3" fill="var(--accent-1)"/>
|
|
||||||
<text class="chart-label" x="540" y="55">新一代SU7</text>
|
|
||||||
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="barGrad" x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop offset="0%" stop-color="#FF6900"/>
|
|
||||||
<stop offset="100%" stop-color="#FF8C00"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="compare-note">
|
|
||||||
<p>Pro版续航从830km跃升至<strong>902km</strong>，提升幅度达8.7%；全系搭载<strong>V6s Plus超级电机</strong>，标准版/Pro版功率提升至320hp。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 辅助卡片1: 0-100加速 -->
|
|
||||||
<div class="card side-card">
|
|
||||||
<h3>Max版零百加速</h3>
|
|
||||||
<div class="kpi-row">
|
|
||||||
<span class="kpi-number">3.08</span>
|
|
||||||
<span class="kpi-unit">s</span>
|
|
||||||
</div>
|
|
||||||
<p class="kpi-desc">双电机四驱系统，897V高压架构，最大功率690hp。前双叉臂+后多连杆悬挂，配备闭式双腔空气弹簧。</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 辅助卡片2: 快充能力 -->
|
|
||||||
<div class="card side-card">
|
|
||||||
<h3>超级快充补能</h3>
|
|
||||||
<div class="charge-ring">
|
|
||||||
<svg viewBox="0 0 120 120">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
|
|
||||||
<stop offset="0%" stop-color="#FF6900"/>
|
|
||||||
<stop offset="100%" stop-color="#FF8C00"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<circle cx="60" cy="60" r="50" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="8"/>
|
|
||||||
<circle cx="60" cy="60" r="50" fill="none" stroke="url(#ringGrad)" stroke-width="8"
|
|
||||||
stroke-linecap="round" stroke-dasharray="235 314"
|
|
||||||
transform="rotate(-90 60 60)"/>
|
|
||||||
</svg>
|
|
||||||
<div class="charge-ring-text">
|
|
||||||
<span class="ring-val">15</span>
|
|
||||||
<span class="ring-lbl">分钟</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="kpi-desc" style="text-align:center">Max版15分钟快充即可补充<strong style="color:var(--accent-1)">670km</strong>续航里程，补能效率行业领先。</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<span>新一代小米SU7 | 动力与续航</span>
|
|
||||||
<span>03 / 05</span>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,240 +0,0 @@
|
|||||||
<!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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
position: absolute; left: 40px; top: 20px;
|
|
||||||
width: 1200px; height: 50px;
|
|
||||||
display: flex; align-items: center; gap: 16px;
|
|
||||||
}
|
|
||||||
.title-accent {
|
|
||||||
width: 4px; height: 28px;
|
|
||||||
background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
.page-title h2 { font-size: 26px; font-weight: 700; }
|
|
||||||
.page-title .subtitle {
|
|
||||||
font-size: 14px; color: var(--text-secondary); margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 英雄式布局: 顶部横 + 下方3列 */
|
|
||||||
.content-area {
|
|
||||||
position: absolute;
|
|
||||||
left: 40px; top: 80px;
|
|
||||||
width: 1200px; height: 580px;
|
|
||||||
display: grid;
|
|
||||||
grid-template: auto 1fr / repeat(3, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
border-radius: var(--card-radius);
|
|
||||||
background: linear-gradient(180deg, var(--card-bg-from), var(--card-bg-to));
|
|
||||||
border: 1px solid var(--card-border);
|
|
||||||
padding: 24px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 英雄卡片 -- 横跨3列 */
|
|
||||||
.hero-card {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
display: flex; align-items: center; gap: 32px;
|
|
||||||
padding: 24px 32px;
|
|
||||||
}
|
|
||||||
.hero-icon {
|
|
||||||
width: 100px; height: 100px; flex-shrink: 0;
|
|
||||||
border-radius: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.hero-icon img {
|
|
||||||
width: 100%; height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
.hero-text h3 {
|
|
||||||
font-size: 20px; font-weight: 700; margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.hero-text p {
|
|
||||||
font-size: 14px; color: var(--text-secondary); line-height: 1.7;
|
|
||||||
}
|
|
||||||
.hero-text strong { color: var(--accent-1); }
|
|
||||||
|
|
||||||
/* 传感器阵列标签 */
|
|
||||||
.sensor-tags {
|
|
||||||
display: flex; flex-wrap: wrap; gap: 8px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.sensor-tag {
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid rgba(255,105,0,0.25);
|
|
||||||
font-size: 12px; color: var(--accent-2);
|
|
||||||
background: rgba(255,105,0,0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 子卡片 */
|
|
||||||
.sub-card h4 {
|
|
||||||
font-size: 16px; font-weight: 700; margin-bottom: 12px;
|
|
||||||
display: flex; align-items: center; gap: 10px;
|
|
||||||
}
|
|
||||||
.sub-card h4 svg {
|
|
||||||
width: 18px; height: 18px; fill: var(--accent-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-list {
|
|
||||||
list-style: none;
|
|
||||||
display: flex; flex-direction: column; gap: 10px;
|
|
||||||
}
|
|
||||||
.feature-list li {
|
|
||||||
font-size: 13px; color: var(--text-secondary);
|
|
||||||
line-height: 1.6;
|
|
||||||
padding-left: 16px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.feature-list li .dot {
|
|
||||||
position: absolute; left: 0; top: 7px;
|
|
||||||
width: 6px; height: 6px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--accent-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 安全数据卡 */
|
|
||||||
.safety-data {
|
|
||||||
display: flex; flex-direction: column; gap: 14px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
.safety-item {
|
|
||||||
display: flex; align-items: center; gap: 12px;
|
|
||||||
}
|
|
||||||
.safety-num {
|
|
||||||
font-size: 28px; font-weight: 800;
|
|
||||||
color: var(--accent-1);
|
|
||||||
min-width: 80px;
|
|
||||||
}
|
|
||||||
.safety-num .unit {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.safety-desc {
|
|
||||||
font-size: 12px; color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
position: absolute; bottom: 16px; left: 40px; right: 40px;
|
|
||||||
display: flex; justify-content: space-between;
|
|
||||||
font-size: 12px; color: rgba(255,255,255,0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="page-title">
|
|
||||||
<div class="title-accent"></div>
|
|
||||||
<h2>智能驾驶与安全配置</h2>
|
|
||||||
<span class="subtitle">全系标配激光雷达 / 700TOPS算力平台</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content-area">
|
|
||||||
<!-- 英雄卡: 智驾总览 -->
|
|
||||||
<div class="card hero-card">
|
|
||||||
<div class="hero-icon">
|
|
||||||
<img src="../images/su7_smart.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="hero-text">
|
|
||||||
<h3>Xiaomi HAD 全场景智能驾驶</h3>
|
|
||||||
<p>全系标配<strong>700 TOPS</strong>高算力智能驾驶芯片，搭载<strong>XLA认知大模型</strong>全新架构，支持端到端全场景智驾。硬件从顶配下放至全系，实现真正的"智驾平权"。</p>
|
|
||||||
<div class="sensor-tags">
|
|
||||||
<span class="sensor-tag">128线激光雷达</span>
|
|
||||||
<span class="sensor-tag">4D毫米波雷达</span>
|
|
||||||
<span class="sensor-tag">11颗高清摄像头</span>
|
|
||||||
<span class="sensor-tag">12颗超声波雷达</span>
|
|
||||||
<span class="sensor-tag">XLA大模型</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 子卡1: 主动安全 -->
|
|
||||||
<div class="card sub-card">
|
|
||||||
<h4>
|
|
||||||
<svg viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/></svg>
|
|
||||||
被动安全
|
|
||||||
</h4>
|
|
||||||
<ul class="feature-list">
|
|
||||||
<li><span class="dot"></span>铠甲笼式钢铝混合车身</li>
|
|
||||||
<li><span class="dot"></span>2200MPa小米超强钢关键部位</li>
|
|
||||||
<li><span class="dot"></span>高强钢+铝合金占比90.3%</li>
|
|
||||||
<li><span class="dot"></span>全系9安全气囊（+后排侧气囊）</li>
|
|
||||||
<li><span class="dot"></span>三重冗余应急开门设计</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 子卡2: 智能安全 -->
|
|
||||||
<div class="card sub-card">
|
|
||||||
<h4>
|
|
||||||
<svg viewBox="0 0 24 24"><path d="M20.57 14.86L22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z"/></svg>
|
|
||||||
主动安全
|
|
||||||
</h4>
|
|
||||||
<ul class="feature-list">
|
|
||||||
<li><span class="dot"></span>MAI 0速起步误加速抑制</li>
|
|
||||||
<li><span class="dot"></span>LAEB 前向低速防碰撞</li>
|
|
||||||
<li><span class="dot"></span>RAEB 后向低速防碰撞</li>
|
|
||||||
<li><span class="dot"></span>全速域主动安全防护</li>
|
|
||||||
<li><span class="dot"></span>智驾保障最高300万保额</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 子卡3: 安全数据 -->
|
|
||||||
<div class="card sub-card">
|
|
||||||
<h4>
|
|
||||||
<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
|
|
||||||
关键安全数据
|
|
||||||
</h4>
|
|
||||||
<div class="safety-data">
|
|
||||||
<div class="safety-item">
|
|
||||||
<span class="safety-num">9<span class="unit">个</span></span>
|
|
||||||
<span class="safety-desc">全系标配安全气囊数</span>
|
|
||||||
</div>
|
|
||||||
<div class="safety-item">
|
|
||||||
<span class="safety-num">2200<span class="unit">MPa</span></span>
|
|
||||||
<span class="safety-desc">超强钢最高强度</span>
|
|
||||||
</div>
|
|
||||||
<div class="safety-item">
|
|
||||||
<span class="safety-num">90.3<span class="unit">%</span></span>
|
|
||||||
<span class="safety-desc">高强度材料占比</span>
|
|
||||||
</div>
|
|
||||||
<div class="safety-item">
|
|
||||||
<span class="safety-num">300<span class="unit">万</span></span>
|
|
||||||
<span class="safety-desc">智驾保障最高保额</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<span>新一代小米SU7 | 智能驾驶与安全</span>
|
|
||||||
<span>04 / 05</span>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,216 +0,0 @@
|
|||||||
<!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>
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 64 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 48 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 155 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 120 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 27 KiB |
Reference in New Issue
Block a user