120 lines
7.7 KiB
HTML
120 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VI 设计系统 - 完整指南</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 40px 20px; line-height: 1.6; color: #333; }
|
||
.container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); overflow: hidden; }
|
||
header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 60px 40px; text-align: center; }
|
||
header h1 { font-size: 48px; margin-bottom: 10px; font-weight: 700; }
|
||
.content { padding: 60px 40px; }
|
||
.section { margin-bottom: 80px; }
|
||
.section h2 { font-size: 32px; color: #667eea; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 3px solid #667eea; }
|
||
table { width: 100%; border-collapse: collapse; margin-bottom: 30px; font-size: 14px; }
|
||
table th { background: #f5f5f5; padding: 15px; text-align: left; font-weight: 600; color: #333; border-bottom: 2px solid #ddd; }
|
||
table td { padding: 15px; border-bottom: 1px solid #eee; }
|
||
.badge { display: inline-block; background: #667eea; color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
|
||
.color-code { font-family: monospace; background: #f0f0f0; padding: 4px 8px; border-radius: 4px; font-size: 12px; color: #d63384; }
|
||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; }
|
||
.color-box { border-radius: 8px; padding: 15px; color: white; text-align: center; font-size: 12px; }
|
||
footer { background: #f5f5f5; padding: 30px 40px; text-align: center; font-size: 13px; color: #999; border-top: 1px solid #eee; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>🎨 VI 设计系统 - 完整指南</h1>
|
||
<p>台球门店小程序前端设计系统</p>
|
||
</header>
|
||
<div class="content">
|
||
<div class="section">
|
||
<h2>1️⃣ 任务分类配色</h2>
|
||
<table>
|
||
<tr><th>任务类型</th><th>边框色</th><th>渐变</th><th>触发条件</th></tr>
|
||
<tr><td><span class="badge" style="background: #dc2626;">高优先召回</span></td><td><code class="color-code">#dc2626</code></td><td>#b91c1c → #dc2626</td><td>max(WBI,NCI) > 7</td></tr>
|
||
<tr><td><span class="badge" style="background: #f97316;">优先召回</span></td><td><code class="color-code">#f97316</code></td><td>#ea580c → #f97316</td><td>max(WBI,NCI) > 5</td></tr>
|
||
<tr><td><span class="badge" style="background: #14b8a6;">客户回访</span></td><td><code class="color-code">#14b8a6</code></td><td>#0d9488 → #14b8a6</td><td>完成召回后未备注</td></tr>
|
||
<tr><td><span class="badge" style="background: #f472b6;">关系构建</span></td><td><code class="color-code">#f472b6</code></td><td>#ec4899 → #f472b6</td><td>RS < 6</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="section">
|
||
<h2>2️⃣ 客户标签配色（6种）</h2>
|
||
<table>
|
||
<tr><th>标签</th><th>字体色</th><th>背景色</th><th>心理学</th></tr>
|
||
<tr><td>客户基础</td><td><code class="color-code">#0052d9</code></td><td>#ecf2fe</td><td>蓝色-信任</td></tr>
|
||
<tr><td>消费习惯</td><td><code class="color-code">#00a870</code></td><td>#e6f7f0</td><td>绿色-增长</td></tr>
|
||
<tr><td>玩法偏好</td><td><code class="color-code">#ed7b2f</code></td><td>#fff3e6</td><td>橙色-活力</td></tr>
|
||
<tr><td>促销偏好</td><td><code class="color-code">#d4a017</code></td><td>#fffbeb</td><td>金色-价值</td></tr>
|
||
<tr><td>社交关系</td><td><code class="color-code">#764ba2</code></td><td>#f3e8ff</td><td>紫色-社交</td></tr>
|
||
<tr><td>重要反馈</td><td><code class="color-code">#e34d59</code></td><td>#ffe6e8</td><td>红色-警示</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="section">
|
||
<h2>3️⃣ 关系等级配色</h2>
|
||
<table>
|
||
<tr><th>等级</th><th>Icon</th><th>分数</th><th>渐变</th></tr>
|
||
<tr><td>很好</td><td>💖</td><td>> 8.5</td><td>#e91e63 → #f472b6</td></tr>
|
||
<tr><td>良好</td><td>🧡</td><td>6-8.5</td><td>#ea580c → #fb923c</td></tr>
|
||
<tr><td>一般</td><td>💛</td><td>3.5-6</td><td>#eab308 → #fbbf24</td></tr>
|
||
<tr><td>待发展</td><td>💙</td><td>< 3.5</td><td>#64748b → #94a3b8</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="section">
|
||
<h2>4️⃣ 置顶/放弃状态</h2>
|
||
<table>
|
||
<tr><th>状态</th><th>边框色</th><th>文字色</th><th>透明度</th></tr>
|
||
<tr><td>✨ 置顶</td><td>#f59e0b</td><td>-</td><td>金色光晕</td></tr>
|
||
<tr><td>❌ 放弃</td><td>#d1d5db</td><td>#9ca3af</td><td>55%</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="section">
|
||
<h2>5️⃣ 助教等级配色（4级+星级）</h2>
|
||
<table>
|
||
<tr><th>等级</th><th>字体色</th><th>背景色</th><th>说明</th></tr>
|
||
<tr><td>初级</td><td><code class="color-code">#0052d9</code></td><td>#ecf2fe</td><td>蓝色-基础</td></tr>
|
||
<tr><td>中级</td><td><code class="color-code">#ed7b2f</code></td><td>#fff3e6</td><td>橙色-进阶</td></tr>
|
||
<tr><td>高级</td><td><code class="color-code">#e91e63</code></td><td>#ffe6e8</td><td>粉色-资深</td></tr>
|
||
<tr><td>⭐ 星级</td><td><code class="color-code">#fbbf24</code></td><td>#fffef0</td><td>金黄-顶级</td></tr>
|
||
</table>
|
||
</div>
|
||
<div class="section">
|
||
<h2>6️⃣ AI 图标配色系统</h2>
|
||
<h3>标准组件</h3>
|
||
<table>
|
||
<tr><th>组件</th><th>用途</th><th>路径</th></tr>
|
||
<tr><td>ai-inline-icon</td><td>卡片行首小图标</td><td>/components/ai-inline-icon/</td></tr>
|
||
<tr><td>ai-title-badge</td><td>标题行徽章</td><td>/components/ai-title-badge/</td></tr>
|
||
</table>
|
||
<h3>六种配色</h3>
|
||
<div class="grid">
|
||
<div class="color-box" style="background: linear-gradient(135deg, #e74c3c, #f39c9c);">Red<br>#e74c3c</div>
|
||
<div class="color-box" style="background: linear-gradient(135deg, #e67e22, #f5c77e);">Orange<br>#e67e22</div>
|
||
<div class="color-box" style="background: linear-gradient(135deg, #d4a017, #f7dc6f);">Yellow<br>#d4a017</div>
|
||
<div class="color-box" style="background: linear-gradient(135deg, #2980b9, #7ec8e3);">Blue<br>#2980b9</div>
|
||
<div class="color-box" style="background: linear-gradient(135deg, #667eea, #a78bfa);">Indigo<br>#667eea</div>
|
||
<div class="color-box" style="background: linear-gradient(135deg, #764ba2, #c084fc);">Purple<br>#764ba2</div>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<h2>7️⃣ 全局颜色变量</h2>
|
||
<h3>主色系</h3>
|
||
<div class="grid">
|
||
<div class="color-box" style="background: #0052d9;">Primary<br>#0052d9</div>
|
||
<div class="color-box" style="background: #00a870;">Success<br>#00a870</div>
|
||
<div class="color-box" style="background: #ed7b2f;">Warning<br>#ed7b2f</div>
|
||
<div class="color-box" style="background: #e34d59;">Error<br>#e34d59</div>
|
||
<div class="color-box" style="background: #ecf2fe; color: #0052d9;">Primary Light<br>#ecf2fe</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer>
|
||
<p>VI 设计系统 | 完整指南 | 最后更新：2026-03-17</p>
|
||
<p style="margin-top: 10px;">📄 <a href="VI-DESIGN-SYSTEM.md" style="color: #667eea; text-decoration: none;">查看完整文档</a></p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|