Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 

290 wiersze
9.1 KiB

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>方案B:双卡片对比</title>
  7. <style>
  8. * { margin: 0; padding: 0; box-sizing: border-box; }
  9. body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; }
  10. .panel {
  11. max-width: 580px;
  12. margin: 40px auto;
  13. background: #fff;
  14. border-radius: 16px;
  15. box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  16. overflow: hidden;
  17. }
  18. .panel-header {
  19. display: flex; align-items: center; gap: 12px;
  20. padding: 20px 24px 16px;
  21. border-bottom: 1px solid #f0f0f0;
  22. }
  23. .model-icon {
  24. width: 48px; height: 48px; border-radius: 12px;
  25. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  26. display: flex; align-items: center; justify-content: center;
  27. color: #fff; font-weight: 700; font-size: 18px;
  28. }
  29. .model-name { font-size: 18px; font-weight: 600; }
  30. .model-desc { font-size: 13px; color: #888; margin-top: 2px; }
  31. .section { padding: 16px 24px; }
  32. .section-title {
  33. display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  34. }
  35. .section-title .icon {
  36. width: 28px; height: 28px; border-radius: 8px;
  37. display: flex; align-items: center; justify-content: center;
  38. font-size: 14px; color: #fff;
  39. }
  40. .section-title .icon.orange { background: #fa8c16; }
  41. .section-title .icon.cyan { background: #13c2c2; }
  42. .section-title h3 { font-size: 15px; font-weight: 600; }
  43. .section-title small { font-size: 12px; color: #999; }
  44. .divider { height: 1px; background: #f0f0f0; margin: 0 24px; }
  45. /* ===== 方案B核心样式:双卡片对比 ===== */
  46. .price-cards {
  47. display: grid;
  48. grid-template-columns: 1fr 1fr;
  49. gap: 12px;
  50. margin-bottom: 12px;
  51. }
  52. .price-card {
  53. border-radius: 12px;
  54. padding: 16px;
  55. position: relative;
  56. overflow: hidden;
  57. }
  58. .price-card.standard {
  59. background: #fafafa;
  60. border: 1px solid #e8e8e8;
  61. }
  62. .price-card.discounted {
  63. background: linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%);
  64. border: 2px solid #52c41a;
  65. }
  66. .price-card .card-label {
  67. font-size: 11px;
  68. text-transform: uppercase;
  69. letter-spacing: 1px;
  70. font-weight: 600;
  71. margin-bottom: 8px;
  72. }
  73. .price-card.standard .card-label { color: #999; }
  74. .price-card.discounted .card-label { color: #389e0d; }
  75. .price-card .card-group {
  76. font-size: 12px;
  77. color: #888;
  78. margin-bottom: 12px;
  79. }
  80. .price-card.discounted .card-group {
  81. color: #389e0d;
  82. }
  83. .price-item {
  84. margin-bottom: 8px;
  85. }
  86. .price-item:last-child { margin-bottom: 0; }
  87. .price-item-label {
  88. font-size: 11px;
  89. color: #999;
  90. margin-bottom: 2px;
  91. }
  92. .price-item-value {
  93. font-weight: 700;
  94. font-size: 18px;
  95. }
  96. .price-card.standard .price-item-value { color: #bbb; }
  97. .price-card.discounted .price-item-value { color: #237804; }
  98. .price-unit {
  99. font-size: 11px;
  100. font-weight: 400;
  101. opacity: 0.6;
  102. }
  103. .savings-banner {
  104. background: linear-gradient(90deg, #52c41a, #73d13d);
  105. color: #fff;
  106. border-radius: 8px;
  107. padding: 8px 16px;
  108. text-align: center;
  109. font-weight: 600;
  110. font-size: 13px;
  111. display: flex;
  112. align-items: center;
  113. justify-content: center;
  114. gap: 8px;
  115. }
  116. .savings-amount {
  117. font-size: 18px;
  118. font-weight: 700;
  119. }
  120. /* 通道表格 */
  121. .channel-table {
  122. width: 100%; border-collapse: collapse; font-size: 13px;
  123. }
  124. .channel-table th {
  125. text-align: left; padding: 8px 0; color: #999;
  126. font-weight: 500; font-size: 12px;
  127. border-bottom: 1px solid #f0f0f0;
  128. }
  129. .channel-table td {
  130. padding: 10px 0; border-bottom: 1px solid #f5f5f5;
  131. }
  132. .channel-table tr:last-child td { border-bottom: none; }
  133. .channel-tag {
  134. display: inline-block; padding: 1px 8px; border-radius: 8px;
  135. font-size: 11px; margin-right: 4px;
  136. }
  137. .channel-tag.cyan { background: #e6fffb; color: #13c2c2; }
  138. .channel-tag.violet { background: #f9f0ff; color: #722ed1; }
  139. .channel-tag.amber { background: #fff7e6; color: #d48806; }
  140. .channel-tag.green { background: #f6ffed; color: #52c41a; }
  141. .price-orange { color: #d4380d; font-weight: 600; }
  142. /* 方案标签 */
  143. .scheme-label {
  144. text-align: center; padding: 12px;
  145. background: #52c41a; color: #fff;
  146. font-weight: 600; font-size: 16px; letter-spacing: 1px;
  147. }
  148. .scheme-sub { font-size: 12px; font-weight: 400; opacity: 0.85; }
  149. /* 节省箭头 */
  150. .arrow-down {
  151. display: flex; justify-content: center; margin: 8px 0;
  152. }
  153. .arrow-down svg { color: #52c41a; }
  154. </style>
  155. </head>
  156. <body>
  157. <div class="scheme-label">
  158. 方案B:双卡片对比
  159. <div class="scheme-sub">标准价格 vs 用户价格 左右对比,突出节省金额</div>
  160. </div>
  161. <div class="panel">
  162. <div class="panel-header">
  163. <div class="model-icon">G4</div>
  164. <div>
  165. <div class="model-name">gpt-4o</div>
  166. <div class="model-desc">OpenAI 最新多模态模型</div>
  167. </div>
  168. </div>
  169. <div class="section">
  170. <div class="section-title">
  171. <div class="icon orange">$</div>
  172. <div>
  173. <h3>分组价格对比</h3>
  174. <small>VIP 分组专属折扣</small>
  175. </div>
  176. </div>
  177. <!-- 输入价格对比 -->
  178. <div style="font-size:12px;color:#888;margin-bottom:6px;">输入价格</div>
  179. <div class="price-cards">
  180. <div class="price-card standard">
  181. <div class="card-label">标准价格</div>
  182. <div class="card-group">default 分组</div>
  183. <div class="price-item">
  184. <div class="price-item-label">每千 tokens</div>
  185. <div class="price-item-value">¥0.0300 <span class="price-unit">/ 1K</span></div>
  186. </div>
  187. </div>
  188. <div class="price-card discounted">
  189. <div class="card-label">您的价格</div>
  190. <div class="card-group">VIP 分组 · 8折</div>
  191. <div class="price-item">
  192. <div class="price-item-label">每千 tokens</div>
  193. <div class="price-item-value">¥0.0240 <span class="price-unit">/ 1K</span></div>
  194. </div>
  195. </div>
  196. </div>
  197. <div class="savings-banner">
  198. <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
  199. 输入节省 <span class="savings-amount">20%</span> · 每千 tokens 省 ¥0.006
  200. </div>
  201. <!-- 输出价格对比 -->
  202. <div style="font-size:12px;color:#888;margin-bottom:6px;margin-top:20px;">输出价格</div>
  203. <div class="price-cards">
  204. <div class="price-card standard">
  205. <div class="card-label">标准价格</div>
  206. <div class="card-group">default 分组</div>
  207. <div class="price-item">
  208. <div class="price-item-label">每千 tokens</div>
  209. <div class="price-item-value">¥0.0600 <span class="price-unit">/ 1K</span></div>
  210. </div>
  211. </div>
  212. <div class="price-card discounted">
  213. <div class="card-label">您的价格</div>
  214. <div class="card-group">VIP 分组 · 8折</div>
  215. <div class="price-item">
  216. <div class="price-item-label">每千 tokens</div>
  217. <div class="price-item-value">¥0.0480 <span class="price-unit">/ 1K</span></div>
  218. </div>
  219. </div>
  220. </div>
  221. <div class="savings-banner">
  222. <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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>
  223. 输出节省 <span class="savings-amount">20%</span> · 每千 tokens 省 ¥0.012
  224. </div>
  225. </div>
  226. <div class="divider"></div>
  227. <div class="section">
  228. <div class="section-title">
  229. <div class="icon cyan">
  230. <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>
  231. </div>
  232. <div>
  233. <h3>通道价格</h3>
  234. <small>所有支持该模型的通道价格</small>
  235. </div>
  236. </div>
  237. <table class="channel-table">
  238. <thead>
  239. <tr><th>通道</th><th>计费类型</th><th>输入价格</th><th>输出价格</th></tr>
  240. </thead>
  241. <tbody>
  242. <tr>
  243. <td><span class="channel-tag cyan">OpenAI 官方</span><span class="channel-tag amber">默认</span></td>
  244. <td><span class="channel-tag violet">按量计费</span></td>
  245. <td class="price-orange">¥0.0240<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  246. <td class="price-orange">¥0.0480<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  247. </tr>
  248. <tr>
  249. <td><span class="channel-tag cyan">Azure 中转</span><span class="channel-tag green">高速</span></td>
  250. <td><span class="channel-tag violet">按量计费</span></td>
  251. <td class="price-orange">¥0.0280<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  252. <td class="price-orange">¥0.0560<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  253. </tr>
  254. </tbody>
  255. </table>
  256. </div>
  257. </div>
  258. </body>
  259. </html>