邓文兵
450056ee4a
- 新增关于Qwen3.5登顶中国第一的深度技术解读文章 - 添加LMArena评测机制可视化图表页面 - 添加Qwen3.5 MoE混合专家架构示意图 - 添加综合能力跑分对比图表 - 添加价格对比可视化页面 - 添加使用场景推荐图表 - 更新.gitignore文件添加.playwright-mcp目录忽略规则
65 lines
3.5 KiB
HTML
65 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { width: 1200px; height: 680px; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; display: flex; align-items: center; justify-content: center; color: #fff; }
|
||
.container { width: 1000px; }
|
||
h2 { text-align: center; font-size: 32px; margin-bottom: 48px; background: linear-gradient(90deg, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
.price-grid { display: flex; gap: 24px; justify-content: center; }
|
||
.price-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 32px 28px; width: 220px; text-align: center; position: relative; }
|
||
.price-card.highlight { border-color: #a78bfa; background: rgba(167,139,250,0.1); box-shadow: 0 0 30px rgba(167,139,250,0.15); }
|
||
.price-card.highlight::before { content: "性价比之王"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #7c3aed, #a78bfa); padding: 4px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
|
||
.model-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
|
||
.company { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 24px; }
|
||
.price-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
|
||
.price-value { font-size: 36px; font-weight: 800; margin-bottom: 4px; }
|
||
.price-unit { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 20px; }
|
||
.price-card:nth-child(1) .price-value { color: #34d399; }
|
||
.price-card:nth-child(2) .price-value { color: #fbbf24; }
|
||
.price-card:nth-child(3) .price-value { color: #60a5fa; }
|
||
.price-card:nth-child(4) .price-value { color: #a78bfa; }
|
||
.vs { margin-top: 24px; font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
|
||
.vs strong { color: #fbbf24; }
|
||
.bottom { text-align: center; margin-top: 40px; font-size: 18px; color: #fbbf24; font-weight: 600; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h2>百万 Token 输入价格对比（人民币）</h2>
|
||
<div class="price-grid">
|
||
<div class="price-card">
|
||
<div class="model-name">GPT-5.4</div>
|
||
<div class="company">OpenAI</div>
|
||
<div class="price-label">百万输入 Token</div>
|
||
<div class="price-value">¥15</div>
|
||
<div class="price-unit">百万输出 ≈ ¥60</div>
|
||
</div>
|
||
<div class="price-card">
|
||
<div class="model-name">Claude Opus 4.6</div>
|
||
<div class="company">Anthropic</div>
|
||
<div class="price-label">百万输入 Token</div>
|
||
<div class="price-value">¥15</div>
|
||
<div class="price-unit">百万输出 ≈ ¥75</div>
|
||
</div>
|
||
<div class="price-card">
|
||
<div class="model-name">Gemini 3 Pro</div>
|
||
<div class="company">Google</div>
|
||
<div class="price-label">百万输入 Token</div>
|
||
<div class="price-value">¥14.4</div>
|
||
<div class="price-unit">百万输出 ≈ ¥57.6</div>
|
||
</div>
|
||
<div class="price-card highlight">
|
||
<div class="model-name">Qwen3.5-Plus</div>
|
||
<div class="company">阿里</div>
|
||
<div class="price-label">百万输入 Token</div>
|
||
<div class="price-value">¥0.8</div>
|
||
<div class="price-unit">价格仅为 1/18</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">同等质量下，Qwen3.5-Plus 成本不到国际顶尖模型的 1/18</div>
|
||
</div>
|
||
</body>
|
||
</html>
|