|
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>方案A:简洁划线对比</title>
- <style>
- * { margin: 0; padding: 0; box-sizing: border-box; }
- body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; }
-
- .panel {
- max-width: 580px;
- margin: 40px auto;
- background: #fff;
- border-radius: 16px;
- box-shadow: 0 2px 12px rgba(0,0,0,0.08);
- overflow: hidden;
- }
-
- .panel-header {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 20px 24px 16px;
- border-bottom: 1px solid #f0f0f0;
- }
-
- .model-icon {
- width: 48px; height: 48px;
- border-radius: 12px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- display: flex; align-items: center; justify-content: center;
- color: #fff; font-weight: 700; font-size: 18px;
- }
-
- .model-name { font-size: 18px; font-weight: 600; }
- .model-desc { font-size: 13px; color: #888; margin-top: 2px; }
-
- .section { padding: 16px 24px; }
- .section-title {
- display: flex; align-items: center; gap: 8px;
- margin-bottom: 12px;
- }
- .section-title .icon {
- width: 28px; height: 28px; border-radius: 8px;
- display: flex; align-items: center; justify-content: center;
- font-size: 14px; color: #fff;
- }
- .section-title .icon.orange { background: #fa8c16; }
- .section-title .icon.cyan { background: #13c2c2; }
- .section-title h3 { font-size: 15px; font-weight: 600; }
- .section-title small { font-size: 12px; color: #999; }
-
- /* ===== 方案A核心样式:简洁划线对比 ===== */
- .price-comparison {
- background: linear-gradient(135deg, #fff7e6 0%, #fff 100%);
- border: 1px solid #ffe7ba;
- border-radius: 12px;
- padding: 16px 20px;
- margin-bottom: 12px;
- }
-
- .group-tag {
- display: inline-flex; align-items: center; gap: 4px;
- background: #722ed1; color: #fff;
- padding: 2px 10px; border-radius: 10px;
- font-size: 12px; font-weight: 500;
- margin-bottom: 12px;
- }
-
- .price-row {
- display: flex;
- align-items: baseline;
- gap: 12px;
- margin-bottom: 8px;
- }
-
- .price-label {
- font-size: 13px;
- color: #666;
- min-width: 56px;
- }
-
- .original-price {
- font-size: 14px;
- color: #bbb;
- text-decoration: line-through;
- text-decoration-color: #d48806;
- text-decoration-thickness: 2px;
- }
-
- .discount-price {
- font-size: 22px;
- font-weight: 700;
- color: #cf1322;
- }
-
- .discount-badge {
- display: inline-flex; align-items: center;
- background: linear-gradient(135deg, #cf1322, #a8071a);
- color: #fff;
- padding: 2px 8px;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 600;
- margin-left: 8px;
- }
-
- .savings-line {
- font-size: 12px;
- color: #52c41a;
- margin-top: 4px;
- display: flex; align-items: center; gap: 4px;
- }
-
- .price-unit {
- font-size: 12px;
- color: #999;
- margin-left: 4px;
- }
-
- .divider {
- height: 1px;
- background: #f0f0f0;
- margin: 0 24px;
- }
-
- /* 表格样式 */
- .channel-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 13px;
- }
- .channel-table th {
- text-align: left;
- padding: 8px 0;
- color: #999;
- font-weight: 500;
- font-size: 12px;
- border-bottom: 1px solid #f0f0f0;
- }
- .channel-table td {
- padding: 10px 0;
- border-bottom: 1px solid #f5f5f5;
- }
- .channel-table tr:last-child td { border-bottom: none; }
- .channel-tag {
- display: inline-block;
- padding: 1px 8px;
- border-radius: 8px;
- font-size: 11px;
- margin-right: 4px;
- }
- .channel-tag.cyan { background: #e6fffb; color: #13c2c2; }
- .channel-tag.violet { background: #f9f0ff; color: #722ed1; }
- .channel-tag.amber { background: #fff7e6; color: #d48806; }
- .channel-tag.green { background: #f6ffed; color: #52c41a; }
- .price-orange { color: #d4380d; font-weight: 600; }
-
- /* 方案标签 */
- .scheme-label {
- text-align: center;
- padding: 12px;
- background: #667eea;
- color: #fff;
- font-weight: 600;
- font-size: 16px;
- letter-spacing: 1px;
- }
- .scheme-sub {
- font-size: 12px;
- font-weight: 400;
- opacity: 0.85;
- }
- </style>
- </head>
- <body>
-
- <div class="scheme-label">
- 方案A:简洁划线对比
- <div class="scheme-sub">原价划掉 + 折后价突出 + 折扣标签</div>
- </div>
-
- <div class="panel">
- <!-- 模型头部 -->
- <div class="panel-header">
- <div class="model-icon">G4</div>
- <div>
- <div class="model-name">gpt-4o</div>
- <div class="model-desc">OpenAI 最新多模态模型,支持文本和视觉</div>
- </div>
- </div>
-
- <!-- 用户分组价格区域 -->
- <div class="section">
- <div class="section-title">
- <div class="icon orange">$</div>
- <div>
- <h3>您的分组价格</h3>
- <small>基于您所在分组的专属价格</small>
- </div>
- </div>
-
- <div class="price-comparison">
- <div class="group-tag">
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
- VIP 分组
- </div>
-
- <!-- 输入价格 -->
- <div class="price-row">
- <span class="price-label">输入价格</span>
- <span class="original-price">¥0.0300</span>
- <span class="discount-price">¥0.0240</span>
- <span class="discount-badge">8折</span>
- <span class="price-unit">/ 1K tokens</span>
- </div>
- <div class="savings-line">
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#52c41a" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
- 每千 tokens 节省 ¥0.006
- </div>
-
- <!-- 输出价格 -->
- <div class="price-row" style="margin-top: 12px;">
- <span class="price-label">输出价格</span>
- <span class="original-price">¥0.0600</span>
- <span class="discount-price">¥0.0480</span>
- <span class="discount-badge">8折</span>
- <span class="price-unit">/ 1K tokens</span>
- </div>
- <div class="savings-line">
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#52c41a" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
- 每千 tokens 节省 ¥0.012
- </div>
- </div>
-
- <!-- 如果是按次计费的模型 -->
- <div class="price-comparison" style="background: linear-gradient(135deg, #f0f5ff 0%, #fff 100%); border-color: #adc6ff;">
- <div style="font-size: 12px; color: #999; margin-bottom: 8px;">按次计费模型示例</div>
- <div class="group-tag" style="background: #1890ff;">
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
- SVIP 分组
- </div>
- <div class="price-row">
- <span class="price-label">每次调用</span>
- <span class="original-price">¥0.0500</span>
- <span class="discount-price">¥0.0350</span>
- <span class="discount-badge">7折</span>
- <span class="price-unit">/ 次</span>
- </div>
- <div class="savings-line">
- <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#52c41a" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
- 每次调用节省 ¥0.015
- </div>
- </div>
- </div>
-
- <div class="divider"></div>
-
- <!-- 通道价格 -->
- <div class="section">
- <div class="section-title">
- <div class="icon cyan">
- <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
- </div>
- <div>
- <h3>通道价格</h3>
- <small>所有支持该模型的通道价格</small>
- </div>
- </div>
-
- <table class="channel-table">
- <thead>
- <tr>
- <th>通道</th>
- <th>计费类型</th>
- <th>输入价格</th>
- <th>输出价格</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
- <span class="channel-tag cyan">OpenAI 官方</span>
- <span class="channel-tag amber">默认</span>
- </td>
- <td><span class="channel-tag violet">按量计费</span></td>
- <td class="price-orange">¥0.0240<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
- <td class="price-orange">¥0.0480<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
- </tr>
- <tr>
- <td>
- <span class="channel-tag cyan">Azure 中转</span>
- <span class="channel-tag green">高速</span>
- </td>
- <td><span class="channel-tag violet">按量计费</span></td>
- <td class="price-orange">¥0.0280<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
- <td class="price-orange">¥0.0560<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
-
- </body>
- </html>
|