67 lines
4.1 KiB
HTML
67 lines
4.1 KiB
HTML
<h2>视觉风格选择</h2>
|
||
<p class="subtitle">团队汇报的整体视觉基调——哪种感觉最符合你们的场合？</p>
|
||
|
||
<div class="cards">
|
||
|
||
<div class="card" data-choice="a" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:linear-gradient(135deg,#0a0f2e 0%,#1a1040 100%);height:160px;display:flex;align-items:center;justify-content:center;gap:16px;flex-direction:column;">
|
||
<div style="display:flex;gap:8px;align-items:center;">
|
||
<div style="width:4px;height:40px;background:#e20074;border-radius:2px;"></div>
|
||
<div>
|
||
<div style="font-size:15px;font-weight:800;color:#fff;letter-spacing:1px;">AI + 合规智能中枢</div>
|
||
<div style="font-size:11px;color:#e20074;margin-top:4px;letter-spacing:2px;">TEAM PROGRESS REPORT</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:8px;">
|
||
<div style="background:rgba(226,0,116,0.15);border:1px solid rgba(226,0,116,0.4);border-radius:4px;padding:4px 10px;font-size:10px;color:#e20074;">5 模块</div>
|
||
<div style="background:rgba(0,212,170,0.1);border:1px solid rgba(0,212,170,0.3);border-radius:4px;padding:4px 10px;font-size:10px;color:#00d4aa;">17+ API</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>A · 深色科技风（沿用 boss-report 风格）</h3>
|
||
<p>深海蓝 + 品牌洋红，科技感强，与现有 boss-report.pptx 视觉一致。适合 IT 氛围浓的场合。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="b" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:linear-gradient(135deg,#f7f7fa 0%,#f0eef8 100%);height:160px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;border-bottom:1px solid #e0e0ea;">
|
||
<div style="display:flex;gap:8px;align-items:center;">
|
||
<div style="width:4px;height:40px;background:#e20074;border-radius:2px;"></div>
|
||
<div>
|
||
<div style="font-size:15px;font-weight:800;color:#1a1a2e;letter-spacing:0.5px;">AI + 合规智能中枢</div>
|
||
<div style="font-size:11px;color:#e20074;margin-top:4px;letter-spacing:2px;">团队阶段性汇报</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:6px;">
|
||
<div style="background:rgba(226,0,116,0.1);border:1px solid rgba(226,0,116,0.25);border-radius:4px;padding:3px 10px;font-size:10px;color:#be0060;">5 功能模块</div>
|
||
<div style="background:rgba(0,137,106,0.08);border:1px solid rgba(0,137,106,0.2);border-radius:4px;padding:3px 10px;font-size:10px;color:#00896a;">核心链路已通</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>B · 浅色专业风（与 HTML 报告一致）</h3>
|
||
<p>白底 + 洋红 + 深色文字，与 boss-report.html 视觉一致。阅读友好，投影仪效果好，商务感强。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="c" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:linear-gradient(135deg,#1e3a5f 0%,#2d5986 100%);height:160px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;">
|
||
<div style="display:flex;gap:8px;align-items:center;">
|
||
<div style="width:4px;height:40px;background:#4fc3f7;border-radius:2px;"></div>
|
||
<div>
|
||
<div style="font-size:15px;font-weight:800;color:#fff;letter-spacing:0.5px;">AI + 合规智能中枢</div>
|
||
<div style="font-size:11px;color:#4fc3f7;margin-top:4px;letter-spacing:2px;">TEAM REPORT · 2026.05</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:6px;">
|
||
<div style="background:rgba(79,195,247,0.15);border:1px solid rgba(79,195,247,0.35);border-radius:4px;padding:3px 10px;font-size:10px;color:#4fc3f7;">T-Systems Blue</div>
|
||
<div style="background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:4px;padding:3px 10px;font-size:10px;color:#fff;">专业蓝</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>C · 企业蓝风格（T-Systems 主色调）</h3>
|
||
<p>深蓝 + 天蓝点缀，更接近 T-Systems 官方企业蓝调。适合对外正式会议或集团内部跨团队场合。</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|