Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 

307 linhas
9.2 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>方案A:简洁划线对比</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;
  20. align-items: center;
  21. gap: 12px;
  22. padding: 20px 24px 16px;
  23. border-bottom: 1px solid #f0f0f0;
  24. }
  25. .model-icon {
  26. width: 48px; height: 48px;
  27. border-radius: 12px;
  28. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  29. display: flex; align-items: center; justify-content: center;
  30. color: #fff; font-weight: 700; font-size: 18px;
  31. }
  32. .model-name { font-size: 18px; font-weight: 600; }
  33. .model-desc { font-size: 13px; color: #888; margin-top: 2px; }
  34. .section { padding: 16px 24px; }
  35. .section-title {
  36. display: flex; align-items: center; gap: 8px;
  37. margin-bottom: 12px;
  38. }
  39. .section-title .icon {
  40. width: 28px; height: 28px; border-radius: 8px;
  41. display: flex; align-items: center; justify-content: center;
  42. font-size: 14px; color: #fff;
  43. }
  44. .section-title .icon.orange { background: #fa8c16; }
  45. .section-title .icon.cyan { background: #13c2c2; }
  46. .section-title h3 { font-size: 15px; font-weight: 600; }
  47. .section-title small { font-size: 12px; color: #999; }
  48. /* ===== 方案A核心样式:简洁划线对比 ===== */
  49. .price-comparison {
  50. background: linear-gradient(135deg, #fff7e6 0%, #fff 100%);
  51. border: 1px solid #ffe7ba;
  52. border-radius: 12px;
  53. padding: 16px 20px;
  54. margin-bottom: 12px;
  55. }
  56. .group-tag {
  57. display: inline-flex; align-items: center; gap: 4px;
  58. background: #722ed1; color: #fff;
  59. padding: 2px 10px; border-radius: 10px;
  60. font-size: 12px; font-weight: 500;
  61. margin-bottom: 12px;
  62. }
  63. .price-row {
  64. display: flex;
  65. align-items: baseline;
  66. gap: 12px;
  67. margin-bottom: 8px;
  68. }
  69. .price-label {
  70. font-size: 13px;
  71. color: #666;
  72. min-width: 56px;
  73. }
  74. .original-price {
  75. font-size: 14px;
  76. color: #bbb;
  77. text-decoration: line-through;
  78. text-decoration-color: #d48806;
  79. text-decoration-thickness: 2px;
  80. }
  81. .discount-price {
  82. font-size: 22px;
  83. font-weight: 700;
  84. color: #cf1322;
  85. }
  86. .discount-badge {
  87. display: inline-flex; align-items: center;
  88. background: linear-gradient(135deg, #cf1322, #a8071a);
  89. color: #fff;
  90. padding: 2px 8px;
  91. border-radius: 4px;
  92. font-size: 12px;
  93. font-weight: 600;
  94. margin-left: 8px;
  95. }
  96. .savings-line {
  97. font-size: 12px;
  98. color: #52c41a;
  99. margin-top: 4px;
  100. display: flex; align-items: center; gap: 4px;
  101. }
  102. .price-unit {
  103. font-size: 12px;
  104. color: #999;
  105. margin-left: 4px;
  106. }
  107. .divider {
  108. height: 1px;
  109. background: #f0f0f0;
  110. margin: 0 24px;
  111. }
  112. /* 表格样式 */
  113. .channel-table {
  114. width: 100%;
  115. border-collapse: collapse;
  116. font-size: 13px;
  117. }
  118. .channel-table th {
  119. text-align: left;
  120. padding: 8px 0;
  121. color: #999;
  122. font-weight: 500;
  123. font-size: 12px;
  124. border-bottom: 1px solid #f0f0f0;
  125. }
  126. .channel-table td {
  127. padding: 10px 0;
  128. border-bottom: 1px solid #f5f5f5;
  129. }
  130. .channel-table tr:last-child td { border-bottom: none; }
  131. .channel-tag {
  132. display: inline-block;
  133. padding: 1px 8px;
  134. border-radius: 8px;
  135. font-size: 11px;
  136. margin-right: 4px;
  137. }
  138. .channel-tag.cyan { background: #e6fffb; color: #13c2c2; }
  139. .channel-tag.violet { background: #f9f0ff; color: #722ed1; }
  140. .channel-tag.amber { background: #fff7e6; color: #d48806; }
  141. .channel-tag.green { background: #f6ffed; color: #52c41a; }
  142. .price-orange { color: #d4380d; font-weight: 600; }
  143. /* 方案标签 */
  144. .scheme-label {
  145. text-align: center;
  146. padding: 12px;
  147. background: #667eea;
  148. color: #fff;
  149. font-weight: 600;
  150. font-size: 16px;
  151. letter-spacing: 1px;
  152. }
  153. .scheme-sub {
  154. font-size: 12px;
  155. font-weight: 400;
  156. opacity: 0.85;
  157. }
  158. </style>
  159. </head>
  160. <body>
  161. <div class="scheme-label">
  162. 方案A:简洁划线对比
  163. <div class="scheme-sub">原价划掉 + 折后价突出 + 折扣标签</div>
  164. </div>
  165. <div class="panel">
  166. <!-- 模型头部 -->
  167. <div class="panel-header">
  168. <div class="model-icon">G4</div>
  169. <div>
  170. <div class="model-name">gpt-4o</div>
  171. <div class="model-desc">OpenAI 最新多模态模型,支持文本和视觉</div>
  172. </div>
  173. </div>
  174. <!-- 用户分组价格区域 -->
  175. <div class="section">
  176. <div class="section-title">
  177. <div class="icon orange">$</div>
  178. <div>
  179. <h3>您的分组价格</h3>
  180. <small>基于您所在分组的专属价格</small>
  181. </div>
  182. </div>
  183. <div class="price-comparison">
  184. <div class="group-tag">
  185. <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>
  186. VIP 分组
  187. </div>
  188. <!-- 输入价格 -->
  189. <div class="price-row">
  190. <span class="price-label">输入价格</span>
  191. <span class="original-price">¥0.0300</span>
  192. <span class="discount-price">¥0.0240</span>
  193. <span class="discount-badge">8折</span>
  194. <span class="price-unit">/ 1K tokens</span>
  195. </div>
  196. <div class="savings-line">
  197. <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>
  198. 每千 tokens 节省 ¥0.006
  199. </div>
  200. <!-- 输出价格 -->
  201. <div class="price-row" style="margin-top: 12px;">
  202. <span class="price-label">输出价格</span>
  203. <span class="original-price">¥0.0600</span>
  204. <span class="discount-price">¥0.0480</span>
  205. <span class="discount-badge">8折</span>
  206. <span class="price-unit">/ 1K tokens</span>
  207. </div>
  208. <div class="savings-line">
  209. <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>
  210. 每千 tokens 节省 ¥0.012
  211. </div>
  212. </div>
  213. <!-- 如果是按次计费的模型 -->
  214. <div class="price-comparison" style="background: linear-gradient(135deg, #f0f5ff 0%, #fff 100%); border-color: #adc6ff;">
  215. <div style="font-size: 12px; color: #999; margin-bottom: 8px;">按次计费模型示例</div>
  216. <div class="group-tag" style="background: #1890ff;">
  217. <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>
  218. SVIP 分组
  219. </div>
  220. <div class="price-row">
  221. <span class="price-label">每次调用</span>
  222. <span class="original-price">¥0.0500</span>
  223. <span class="discount-price">¥0.0350</span>
  224. <span class="discount-badge">7折</span>
  225. <span class="price-unit">/ 次</span>
  226. </div>
  227. <div class="savings-line">
  228. <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>
  229. 每次调用节省 ¥0.015
  230. </div>
  231. </div>
  232. </div>
  233. <div class="divider"></div>
  234. <!-- 通道价格 -->
  235. <div class="section">
  236. <div class="section-title">
  237. <div class="icon cyan">
  238. <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>
  239. </div>
  240. <div>
  241. <h3>通道价格</h3>
  242. <small>所有支持该模型的通道价格</small>
  243. </div>
  244. </div>
  245. <table class="channel-table">
  246. <thead>
  247. <tr>
  248. <th>通道</th>
  249. <th>计费类型</th>
  250. <th>输入价格</th>
  251. <th>输出价格</th>
  252. </tr>
  253. </thead>
  254. <tbody>
  255. <tr>
  256. <td>
  257. <span class="channel-tag cyan">OpenAI 官方</span>
  258. <span class="channel-tag amber">默认</span>
  259. </td>
  260. <td><span class="channel-tag violet">按量计费</span></td>
  261. <td class="price-orange">¥0.0240<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  262. <td class="price-orange">¥0.0480<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  263. </tr>
  264. <tr>
  265. <td>
  266. <span class="channel-tag cyan">Azure 中转</span>
  267. <span class="channel-tag green">高速</span>
  268. </td>
  269. <td><span class="channel-tag violet">按量计费</span></td>
  270. <td class="price-orange">¥0.0280<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  271. <td class="price-orange">¥0.0560<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  272. </tr>
  273. </tbody>
  274. </table>
  275. </div>
  276. </div>
  277. </body>
  278. </html>