No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 

363 líneas
11 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>方案C:进度条式折扣可视化</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; margin: 40px auto; background: #fff;
  12. border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow: hidden;
  13. }
  14. .panel-header {
  15. display: flex; align-items: center; gap: 12px;
  16. padding: 20px 24px 16px; border-bottom: 1px solid #f0f0f0;
  17. }
  18. .model-icon {
  19. width: 48px; height: 48px; border-radius: 12px;
  20. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  21. display: flex; align-items: center; justify-content: center;
  22. color: #fff; font-weight: 700; font-size: 18px;
  23. }
  24. .model-name { font-size: 18px; font-weight: 600; }
  25. .model-desc { font-size: 13px; color: #888; margin-top: 2px; }
  26. .section { padding: 16px 24px; }
  27. .section-title {
  28. display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  29. }
  30. .section-title .icon {
  31. width: 28px; height: 28px; border-radius: 8px;
  32. display: flex; align-items: center; justify-content: center;
  33. font-size: 14px; color: #fff;
  34. }
  35. .section-title .icon.orange { background: #fa8c16; }
  36. .section-title .icon.cyan { background: #13c2c2; }
  37. .section-title h3 { font-size: 15px; font-weight: 600; }
  38. .section-title small { font-size: 12px; color: #999; }
  39. .divider { height: 1px; background: #f0f0f0; margin: 0 24px; }
  40. /* ===== 方案C核心样式:进度条式折扣可视化 ===== */
  41. .discount-card {
  42. background: #fff;
  43. border: 1px solid #f0f0f0;
  44. border-radius: 12px;
  45. padding: 16px 20px;
  46. margin-bottom: 12px;
  47. position: relative;
  48. }
  49. .discount-card-header {
  50. display: flex;
  51. justify-content: space-between;
  52. align-items: center;
  53. margin-bottom: 12px;
  54. }
  55. .discount-big-number {
  56. font-size: 36px;
  57. font-weight: 800;
  58. background: linear-gradient(135deg, #ff4d4f, #cf1322);
  59. -webkit-background-clip: text;
  60. -webkit-text-fill-color: transparent;
  61. background-clip: text;
  62. line-height: 1;
  63. }
  64. .discount-percent {
  65. font-size: 14px;
  66. font-weight: 600;
  67. color: #cf1322;
  68. }
  69. .group-badge {
  70. display: inline-flex; align-items: center; gap: 4px;
  71. padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500;
  72. }
  73. .group-badge.vip { background: #f9f0ff; color: #722ed1; border: 1px solid #d3adf7; }
  74. .group-badge.svip { background: #fff7e6; color: #d48806; border: 1px solid #ffe58f; }
  75. /* 进度条 */
  76. .bar-container {
  77. position: relative;
  78. height: 32px;
  79. background: #f5f5f5;
  80. border-radius: 6px;
  81. overflow: hidden;
  82. margin-bottom: 8px;
  83. }
  84. .bar-full {
  85. position: absolute;
  86. top: 0; left: 0;
  87. height: 100%;
  88. background: #e8e8e8;
  89. border-radius: 6px;
  90. display: flex; align-items: center; justify-content: flex-end;
  91. padding-right: 8px;
  92. font-size: 11px; color: #999; font-weight: 500;
  93. transition: width 0.5s ease;
  94. }
  95. .bar-discount {
  96. position: absolute;
  97. top: 0; left: 0;
  98. height: 100%;
  99. border-radius: 6px;
  100. display: flex; align-items: center;
  101. padding-left: 10px;
  102. font-size: 12px; color: #fff; font-weight: 600;
  103. transition: width 0.5s ease;
  104. }
  105. .bar-discount.green { background: linear-gradient(90deg, #52c41a, #73d13d); }
  106. .bar-discount.blue { background: linear-gradient(90deg, #1890ff, #40a9ff); }
  107. .bar-discount.orange { background: linear-gradient(90deg, #fa8c16, #ffa940); }
  108. .bar-labels {
  109. display: flex;
  110. justify-content: space-between;
  111. font-size: 11px;
  112. color: #bbb;
  113. margin-bottom: 16px;
  114. }
  115. /* 价格明细 */
  116. .price-details {
  117. display: grid;
  118. grid-template-columns: 1fr 1fr;
  119. gap: 12px;
  120. }
  121. .price-detail-item {
  122. background: #fafafa;
  123. border-radius: 8px;
  124. padding: 10px 12px;
  125. }
  126. .price-detail-label {
  127. font-size: 11px;
  128. color: #999;
  129. margin-bottom: 4px;
  130. }
  131. .price-detail-row {
  132. display: flex;
  133. align-items: baseline;
  134. gap: 6px;
  135. }
  136. .price-old {
  137. font-size: 13px;
  138. color: #ccc;
  139. text-decoration: line-through;
  140. }
  141. .price-new {
  142. font-size: 16px;
  143. font-weight: 700;
  144. color: #237804;
  145. }
  146. .price-new.red { color: #cf1322; }
  147. .price-detail-unit {
  148. font-size: 10px;
  149. color: #bbb;
  150. }
  151. /* 通道表格 */
  152. .channel-table {
  153. width: 100%; border-collapse: collapse; font-size: 13px;
  154. }
  155. .channel-table th {
  156. text-align: left; padding: 8px 0; color: #999;
  157. font-weight: 500; font-size: 12px;
  158. border-bottom: 1px solid #f0f0f0;
  159. }
  160. .channel-table td {
  161. padding: 10px 0; border-bottom: 1px solid #f5f5f5;
  162. }
  163. .channel-table tr:last-child td { border-bottom: none; }
  164. .channel-tag {
  165. display: inline-block; padding: 1px 8px; border-radius: 8px;
  166. font-size: 11px; margin-right: 4px;
  167. }
  168. .channel-tag.cyan { background: #e6fffb; color: #13c2c2; }
  169. .channel-tag.violet { background: #f9f0ff; color: #722ed1; }
  170. .channel-tag.amber { background: #fff7e6; color: #d48806; }
  171. .channel-tag.green { background: #f6ffed; color: #52c41a; }
  172. .price-orange { color: #d4380d; font-weight: 600; }
  173. .scheme-label {
  174. text-align: center; padding: 12px;
  175. background: #722ed1; color: #fff;
  176. font-weight: 600; font-size: 16px; letter-spacing: 1px;
  177. }
  178. .scheme-sub { font-size: 12px; font-weight: 400; opacity: 0.85; }
  179. </style>
  180. </head>
  181. <body>
  182. <div class="scheme-label">
  183. 方案C:进度条式折扣可视化
  184. <div class="scheme-sub">用进度条直观展示折扣力度 + 价格明细</div>
  185. </div>
  186. <div class="panel">
  187. <div class="panel-header">
  188. <div class="model-icon">G4</div>
  189. <div>
  190. <div class="model-name">gpt-4o</div>
  191. <div class="model-desc">OpenAI 最新多模态模型</div>
  192. </div>
  193. </div>
  194. <div class="section">
  195. <div class="section-title">
  196. <div class="icon orange">$</div>
  197. <div>
  198. <h3>您的分组价格</h3>
  199. <small>VIP 分组专属折扣</small>
  200. </div>
  201. </div>
  202. <!-- 折扣大卡片 -->
  203. <div class="discount-card">
  204. <div class="discount-card-header">
  205. <div>
  206. <span class="group-badge vip">
  207. <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>
  208. VIP 分组
  209. </span>
  210. </div>
  211. <div style="text-align:right;">
  212. <div class="discount-big-number">8折</div>
  213. <div class="discount-percent">节省 20%</div>
  214. </div>
  215. </div>
  216. <!-- 输入价格进度条 -->
  217. <div style="font-size:12px;color:#888;margin-bottom:4px;">输入价格</div>
  218. <div class="bar-container">
  219. <div class="bar-full" style="width: 100%;">
  220. ¥0.0300
  221. </div>
  222. <div class="bar-discount green" style="width: 80%;">
  223. ¥0.0240
  224. </div>
  225. </div>
  226. <div class="bar-labels">
  227. <span>default 分组基准价</span>
  228. <span style="color:#52c41a;font-weight:500;">VIP 折扣价</span>
  229. </div>
  230. <!-- 输出价格进度条 -->
  231. <div style="font-size:12px;color:#888;margin-bottom:4px;">输出价格</div>
  232. <div class="bar-container">
  233. <div class="bar-full" style="width: 100%;">
  234. ¥0.0600
  235. </div>
  236. <div class="bar-discount blue" style="width: 80%;">
  237. ¥0.0480
  238. </div>
  239. </div>
  240. <div class="bar-labels">
  241. <span>default 分组基准价</span>
  242. <span style="color:#1890ff;font-weight:500;">VIP 折扣价</span>
  243. </div>
  244. <!-- 价格明细网格 -->
  245. <div class="price-details">
  246. <div class="price-detail-item">
  247. <div class="price-detail-label">输入价格</div>
  248. <div class="price-detail-row">
  249. <span class="price-old">¥0.0300</span>
  250. <span class="price-new">¥0.0240</span>
  251. </div>
  252. <div class="price-detail-unit">/ 1K tokens</div>
  253. </div>
  254. <div class="price-detail-item">
  255. <div class="price-detail-label">输出价格</div>
  256. <div class="price-detail-row">
  257. <span class="price-old">¥0.0600</span>
  258. <span class="price-new">¥0.0480</span>
  259. </div>
  260. <div class="price-detail-unit">/ 1K tokens</div>
  261. </div>
  262. </div>
  263. </div>
  264. <!-- 按次计费示例 -->
  265. <div class="discount-card" style="border-color:#e6f7ff;">
  266. <div class="discount-card-header">
  267. <div>
  268. <span class="group-badge svip">
  269. <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
  270. SVIP 分组
  271. </span>
  272. <span style="font-size:11px;color:#999;margin-left:4px;">按次计费示例</span>
  273. </div>
  274. <div style="text-align:right;">
  275. <div class="discount-big-number" style="background:linear-gradient(135deg, #d48806, #ad6800);-webkit-background-clip:text;background-clip:text;">7折</div>
  276. <div class="discount-percent" style="color:#d48806;">节省 30%</div>
  277. </div>
  278. </div>
  279. <div style="font-size:12px;color:#888;margin-bottom:4px;">每次调用价格</div>
  280. <div class="bar-container">
  281. <div class="bar-full" style="width: 100%;">
  282. ¥0.0500
  283. </div>
  284. <div class="bar-discount orange" style="width: 70%;">
  285. ¥0.0350
  286. </div>
  287. </div>
  288. <div class="bar-labels">
  289. <span>default 分组基准价</span>
  290. <span style="color:#fa8c16;font-weight:500;">SVIP 折扣价</span>
  291. </div>
  292. </div>
  293. </div>
  294. <div class="divider"></div>
  295. <div class="section">
  296. <div class="section-title">
  297. <div class="icon cyan">
  298. <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>
  299. </div>
  300. <div>
  301. <h3>通道价格</h3>
  302. <small>所有支持该模型的通道价格</small>
  303. </div>
  304. </div>
  305. <table class="channel-table">
  306. <thead>
  307. <tr><th>通道</th><th>计费类型</th><th>输入价格</th><th>输出价格</th></tr>
  308. </thead>
  309. <tbody>
  310. <tr>
  311. <td><span class="channel-tag cyan">OpenAI 官方</span><span class="channel-tag amber">默认</span></td>
  312. <td><span class="channel-tag violet">按量计费</span></td>
  313. <td class="price-orange">¥0.0240<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  314. <td class="price-orange">¥0.0480<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  315. </tr>
  316. <tr>
  317. <td><span class="channel-tag cyan">Azure 中转</span><span class="channel-tag green">高速</span></td>
  318. <td><span class="channel-tag violet">按量计费</span></td>
  319. <td class="price-orange">¥0.0280<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  320. <td class="price-orange">¥0.0560<br><span style="font-size:11px;color:#999">/ 1K tokens</span></td>
  321. </tr>
  322. </tbody>
  323. </table>
  324. </div>
  325. </div>
  326. </body>
  327. </html>