深蓝主调科技风页面设计优化方案

By 17707951002, 21 May, 2026

推理

The user wants me to adjust the color scheme to be a deep blue (深蓝色调) instead of the very dark/near-black background. Let me update the CSS variables and backgrounds to use a deep blue color palette while keeping the tech-blue accent.

角色

assistant

content

```json
{
"summary": "将整体色调从极深黑底调整为深蓝主调，背景改为深蓝（#0a1628），卡片背景使用半透明蓝，头尾渐变蓝色光晕，保留科技蓝点缀色，整体更通透有层次。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover\">\n <title>流量商场</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.c…\">\n <link href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;70…\" rel=\"stylesheet\">\n <style>\n :root {\n --tech-blue-50: #eef5ff;\n --tech-blue-100: #d9e8ff;\n --tech-blue-200: #bbd5ff;\n --tech-blue-300: #8cb9ff;\n --tech-blue-400: #5593ff;\n --tech-blue-500: #2b7aff;\n --tech-blue-600: #0057ff;\n --tech-blue-700: #0045cc;\n --tech-blue-800: #0037a3;\n --tech-blue-900: #002475;\n --gradient-start: #0057ff;\n --gradient-mid: #4f7cff;\n --gradient-end: #7c5cfc;\n --bg-deep: #0a1628;\n --bg-card: rgba(12, 28, 58, 0.7);\n --text-primary: #f0f4ff;\n --text-secondary: rgba(160, 188, 240, 0.7);\n --glow-blue: rgba(0, 87, 255, 0.2);\n --glow-purple: rgba(124, 92, 252, 0.12);\n }\n\n * {\n -webkit-tap-highlight-color: transparent;\n }\n\n html, body {\n margin: 0;\n padding: 0;\n font-family: 'Plus Jakarta Sans', sans-serif;\n background: var(--bg-deep);\n color: var(--text-primary);\n overflow-x: hidden;\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n }\n\n .font-heading {\n font-family: 'Outfit', sans-serif;\n }\n\n /* ─── 背景网格 ─── */\n .bg-grid {\n position: fixed;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n background-image:\n linear-gradient(rgba(0, 87, 255, 0.04) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 87, 255, 0.04) 1px, transparent 1px);\n background-size: 40px 40px;\n }\n\n .bg-glow {\n position: fixed;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n }\n .bg-glow::before {\n content: '';\n position: absolute;\n top: -15%;\n left: -10%;\n width: 70%;\n height: 55%;\n background: radial-gradient(ellipse at 30% 20%, rgba(0, 87, 255, 0.15) 0%, transparent 70%);\n animation: glowPulse 7s ease-in-out infinite;\n }\n .bg-glow::after {\n content: '';\n position: absolute;\n bottom: -10%;\n right: -10%;\n width: 60%;\n height: 50%;\n background: radial-gradient(ellipse at 70% 80%, rgba(124, 92, 252, 0.1) 0%, transparent 70%);\n animation: glowPulse 9s ease-in-out infinite reverse;\n }\n\n @keyframes glowPulse {\n 0%, 100% { opacity: 0.6; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.05); }\n }\n\n /* ─── 浮动粒子 ─── */\n .particles {\n position: fixed;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n overflow: hidden;\n }\n .particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: rgba(43, 122, 255, 0.25);\n border-radius: 50%;\n animation: floatUp linear infinite;\n }\n .particle:nth-child(1) { left: 10%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 0s; }\n .particle:nth-child(2) { left: 25%; width: 4px; height: 4px; animation-duration: 17s; animation-delay: 1s; }\n .particle:nth-child(3) { left: 40%; width: 2px; height: 2px; animation-duration: 15s; animation-delay: 2s; }\n .particle:nth-child(4) { left: 55%; width: 3px; height: 3px; animation-duration: 19s; animation-delay: 0.5s; }\n .particle:nth-child(5) { left: 70%; width: 2px; height: 2px; animation-duration: 14s; animation-delay: 3s; }\n .particle:nth-child(6) { left: 85%; width: 4px; height: 4px; animation-duration: 16s; animation-delay: 1.5s; }\n .particle:nth-child(7) { left: 50%; width: 3px; height: 3px; animation-duration: 18s; animation-delay: 4s; }\n .particle:nth-child(8) { left: 15%; width: 2px; height: 2px; animation-duration: 12s; animation-delay: 2.5s; }\n\n @keyframes floatUp {\n 0% { transform: translateY(100vh) scale(0); opacity: 0; }\n 10% { opacity: 0.6; }\n 90% { opacity: 0.4; }\n 100% { transform: translateY(-10vh) scale(1); opacity: 0; }\n }\n\n /* ─── Header ─── */\n .header {\n position: sticky;\n top: 0;\n z-index: 50;\n backdrop-filter: blur(20px) saturate(1.3);\n -webkit-backdrop-filter: blur(20px) saturate(1.3);\n background: rgba(10, 22, 40, 0.75);\n border-bottom: 1px solid rgba(43, 122, 255, 0.1);\n }\n\n .header-btn {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n background: rgba(43, 122, 255, 0.1);\n border: 1px solid rgba(43, 122, 255, 0.12);\n color: var(--text-primary);\n font-size: 16px;\n transition: all 0.25s ease;\n cursor: pointer;\n }\n .header-btn:active {\n transform: scale(0.92);\n background: rgba(43, 122, 255, 0.2);\n }\n\n .lang-btn {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 14px;\n border-radius: 20px;\n background: rgba(43, 122, 255, 0.1);\n border: 1px solid rgba(43, 122, 255, 0.12);\n color: var(--text-primary);\n font-size: 12px;\n font-weight: 500;\n font-family: 'Outfit', sans-serif;\n cursor: pointer;\n transition: all 0.25s ease;\n }\n .lang-btn:active {\n transform: scale(0.94);\n background: rgba(43, 122, 255, 0.2);\n }\n\n /* ─── 主容器 ─── */\n #app {\n position: relative;\n z-index: 1;\n max-width: 430px;\n margin: 0 auto;\n min-height: 100vh;\n padding-bottom: 40px;\n }\n\n /* ─── 流量卡 ─── */\n .traffic-card {\n background: linear-gradient(145deg, rgba(12, 35, 75, 0.6), rgba(8, 20, 45, 0.7));\n border: 1px solid rgba(43, 122, 255, 0.12);\n border-radius: 20px;\n padding: 20px;\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(8px);\n transition: all 0.3s ease;\n box-shadow: 0 4px 30px rgba(0, 87, 255, 0.06);\n }\n .traffic-card::before {\n content: '';\n position: absolute;\n top: -40%;\n right: -20%;\n width: 70%;\n height: 110%;\n background: radial-gradient(ellipse at center, rgba(43, 122, 255, 0.06) 0%, transparent 70%);\n pointer-events: none;\n }\n .traffic-card::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--gradient-start), var(--gradient-end), transparent);\n opacity: 0.5;\n }\n\n .card-chip {\n width: 36px;\n height: 26px;\n background: linear-gradient(135deg, #ffd700, #f0c000);\n border-radius: 4px;\n position: relative;\n overflow: hidden;\n }\n .card-chip::after {\n content: '';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 14px;\n height: 10px;\n border: 1px solid rgba(0,0,0,0.2);\n border-radius: 2px;\n }\n\n .card-number-text {\n font-family: 'Outfit', monospace;\n font-weight: 600;\n font-size: 20px;\n letter-spacing: 3px;\n color: #fff;\n text-shadow: 0 0 20px rgba(43, 122, 255, 0.2);\n }\n\n .progress-track {\n width: 100%;\n height: 6px;\n background: rgba(43, 122, 255, 0.08);\n border-radius: 3px;\n overflow: hidden;\n position: relative;\n }\n .progress-fill {\n height: 100%;\n border-radius: 3px;\n background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));\n position: relative;\n transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .progress-fill::after {\n content: '';\n position: absolute;\n right: 0;\n top: 0;\n width: 12px;\n height: 100%;\n background: rgba(255, 255, 255, 0.35);\n border-radius: 3px;\n filter: blur(3px);\n animation: progressGlow 2s ease-in-out infinite;\n }\n @keyframes progressGlow {\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 1; }\n }\n\n /* ─── 当前套餐卡 ─── */\n .plan-current-card {\n background: rgba(12, 30, 60, 0.55);\n border: 1px solid rgba(43, 122, 255, 0.1);\n border-radius: 20px;\n padding: 20px;\n backdrop-filter: blur(8px);\n transition: all 0.3s ease;\n box-shadow: 0 4px 24px rgba(0, 87, 255, 0.04);\n }\n\n .records-btn {\n padding: 8px 16px;\n border-radius: 20px;\n background: rgba(43, 122, 255, 0.1);\n border: 1px solid rgba(43, 122, 255, 0.12);\n color: rgba(180, 210, 255, 0.85);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.25s ease;\n display: flex;\n align-items: center;\n gap: 4px;\n white-space: nowrap;\n }\n .records-btn:active {\n transform: scale(0.95);\n background: rgba(43, 122, 255, 0.2);\n }\n\n .days-ring {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n background: conic-gradient(from 0deg, var(--gradient-start) 0deg, var(--gradient-end) 270deg, rgba(43, 122, 255, 0.08) 270deg, rgba(43, 122, 255, 0.08) 360deg);\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n flex-shrink: 0;\n }\n .days-ring::before {\n content: '';\n position: absolute;\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background: rgba(10, 22, 40, 0.85);\n }\n .days-ring-inner {\n position: relative;\n z-index: 1;\n text-align: center;\n }\n\n /* ─── 套餐列表 ─── */\n .plan-item {\n background: rgba(12, 28, 58, 0.45);\n border: 1px solid rgba(43, 122, 255, 0.06);\n border-radius: 16px;\n padding: 16px 18px;\n transition: all 0.3s ease;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n }\n .plan-item:active {\n transform: scale(0.97);\n }\n .plan-item.selected {\n border-color: var(--gradient-start);\n background: rgba(0, 87, 255, 0.06);\n box-shadow: 0 0 30px rgba(0, 87, 255, 0.06);\n }\n .plan-item.selected::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: 16px;\n padding: 1px;\n background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n pointer-events: none;\n }\n\n .plan-check {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n border: 2px solid rgba(43, 122, 255, 0.18);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n flex-shrink: 0;\n }\n .plan-item.selected .plan-check {\n border-color: var(--gradient-start);\n background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));\n box-shadow: 0 0 12px rgba(0, 87, 255, 0.2);\n }\n .plan-check i {\n font-size: 10px;\n color: #fff;\n opacity: 0;\n transform: scale(0);\n transition: all 0.3s ease;\n }\n .plan-item.selected .plan-check i {\n opacity: 1;\n transform: scale(1);\n }\n\n .price-tag {\n font-family: 'Outfit', sans-serif;\n font-weight: 700;\n background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .plan-badge {\n font-size: 10px;\n padding: 2px 10px;\n border-radius: 20px;\n background: rgba(43, 122, 255, 0.1);\n color: rgba(160, 188, 240, 0.75);\n border: 1px solid rgba(43, 122, 255, 0.08);\n }\n\n .plan-item.popular .plan-badge {\n background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));\n color: #fff;\n border: none;\n }\n\n /* ─── 遮罩层 ─── */\n .overlay {\n position: fixed;\n inset: 0;\n z-index: 100;\n background: rgba(2, 8, 20, 0.6);\n backdrop-filter: blur(6px);\n -webkit-backdrop-filter: blur(6px);\n opacity: 0;\n visibility: hidden;\n transition: all 0.35s ease;\n }\n .overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n /* ─── 上拉弹窗 ─── */\n .bottom-sheet {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 101;\n background: linear-gradient(180deg, rgba(10, 28, 55, 0.98), rgba(8, 18, 38, 0.99));\n border-radius: 24px 24px 0 0;\n border: 1px solid rgba(43, 122, 255, 0.08);\n border-bottom: none;\n padding: 24px 24px max(24px, env(safe-area-inset-bottom));\n transform: translateY(100%);\n transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n max-height: 85vh;\n overflow-y: auto;\n }\n .bottom-sheet.active {\n transform: translateY(0);\n }\n\n .sheet-handle {\n width: 36px;\n height: 4px;\n border-radius: 2px;\n background: rgba(43, 122, 255, 0.12);\n margin: 0 auto 20px;\n }\n\n /* ─── 支付按钮 ─── */\n .pay-btn {\n width: 100%;\n padding: 16px;\n border: none;\n border-radius: 16px;\n background: linear-gradient(135deg, var(--gradient-start), #4f7cff, var(--gradient-end));\n background-size: 200% 200%;\n color: #fff;\n font-family: 'Outfit', sans-serif;\n font-weight: 700;\n font-size: 17px;\n cursor: pointer;\n transition: all 0.35s ease;\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 24px rgba(0, 87, 255, 0.2);\n }\n .pay-btn:active {\n transform: scale(0.97);\n box-shadow: 0 2px 12px rgba(0, 87, 255, 0.15);\n }\n .pay-btn::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, transparent, rgba(255,255,255,0.06), transparent);\n transform: translateX(-100%);\n transition: transform 0.6s ease;\n }\n .pay-btn:active::before {\n transform: translateX(100%);\n }\n\n @keyframes shimmer {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n .shimmer-bg {\n background: linear-gradient(135deg, var(--gradient-start), #4f7cff, var(--gradient-end), #4f7cff, var(--gradient-start));\n background-size: 400% 400%;\n animation: shimmer 4s ease infinite;\n }\n\n /* ─── 自定义复选框 ─── */\n .custom-checkbox {\n width: 20px;\n height: 20px;\n border-radius: 6px;\n border: 2px solid rgba(43, 122, 255, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.25s ease;\n flex-shrink: 0;\n background: transparent;\n }\n .custom-checkbox.checked {\n background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));\n border-color: var(--gradient-start);\n box-shadow: 0 0 12px rgba(0, 87, 255, 0.15);\n }\n .custom-checkbox i {\n font-size: 10px;\n color: #fff;\n opacity: 0;\n transform: scale(0);\n transition: all 0.25s ease;\n }\n .custom-checkbox.checked i {\n opacity: 1;\n transform: scale(1);\n }\n\n /* ─── 入场动画 ─── */\n .fade-up {\n opacity: 0;\n transform: translateY(24px);\n animation: fadeUp 0.6s ease forwards;\n }\n .fade-up-d1 { animation-delay: 0.1s; }\n .fade-up-d2 { animation-delay: 0.2s; }\n .fade-up-d3 { animation-delay: 0.3s; }\n .fade-up-d4 { animation-delay: 0.4s; }\n .fade-up-d5 { animation-delay: 0.5s; }\n\n @keyframes fadeUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* ─── 滚动条美化 ─── */\n ::-webkit-scrollbar {\n width: 3px;\n }\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n ::-webkit-scrollbar-thumb {\n background: rgba(43, 122, 255, 0.15);\n border-radius: 3px;\n }\n\n /* ─── 安全区域 ─── */\n .safe-bottom {\n padding-bottom: env(safe-area-inset-bottom, 0px);\n }\n </style>\n</head>\n<body>\n\n \n <div class=\"bg-grid\"></div>\n <div class=\"bg-glow\"></div>\n <div class=\"particles\">\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n <div class=\"particle\"></div>\n </div>\n\n \n <div id=\"app\">\n\n \n <header class=\"header px-4 py-3 flex items-center justify-between\">\n <button class=\"header-btn\" id=\"backBtn\" aria-label=\"返回\">\n <i class=\"fas fa-arrow-left\"></i>\n </button>\n <h1 class=\"font-heading text-lg font-bold tracking-wide\" style=\"color: var(--text-primary);\">\n 流量商场\n </h1>\n <div class=\"flex items-center gap-2\">\n <button class=\"lang-btn\" id=\"langBtn\">\n <i class=\"fas fa-globe mr-1 text-xs\"></i>\n <span>EN</span>\n </button>\n </div>\n </header>\n\n \n <main class=\"px-4 pt-3 pb-6 space-y-4\">\n\n \n <div class=\"traffic-card fade-up fade-up-d1\">\n <div class=\"flex items-center justify-between mb-4\">\n <div class=\"flex items-center gap-3\">\n <div class=\"card-chip\"></div>\n <span class=\"text-xs font-medium\" style=\"color: rgba(160,188,240,0.6); letter-spacing: 1px;\">IoT·SIM</span>\n </div>\n <span class=\"text-[10px] px-3 py-1 rounded-full border\" style=\"border-color: rgba(0,200,160,0.15); color: rgba(0,200,160,0.65); background: rgba(0,200,160,0.05);\">\n <i class=\"fas fa-check-circle text-[8px] mr-1\"></i>已激活\n </span>\n </div>\n\n <div class=\"card-number-text mb-3\">\n **** **** **** 8823\n </div>\n\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">有效期至 12/28</span>\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">\n <i class=\"far fa-credit-card mr-1\"></i>标准卡\n </span>\n </div>\n\n <div class=\"grid grid-cols-2 gap-3 mb-3\">\n <div class=\"rounded-xl p-3\" style=\"background: rgba(43,122,255,0.04); border: 1px solid rgba(43,122,255,0.06);\">\n <span class=\"text-[11px] block mb-1\" style=\"color: var(--text-secondary);\">总流量</span>\n <span class=\"font-heading text-xl font-bold\">100 <span class=\"text-xs font-normal\" style=\"color: var(--text-secondary);\">GB</span></span>\n </div>\n <div class=\"rounded-xl p-3\" style=\"background: rgba(124,92,252,0.04); border: 1px solid rgba(124,92,252,0.06);\">\n <span class=\"text-[11px] block mb-1\" style=\"color: var(--text-secondary);\">已用流量</span>\n <span class=\"font-heading text-xl font-bold\" style=\"color: #a78bfa;\">45 <span class=\"text-xs font-normal\" style=\"color: var(--text-secondary);\">GB</span></span>\n </div>\n </div>\n\n <div class=\"flex items-center justify-between mb-2\">\n <span class=\"text-xs font-medium\" style=\"color: var(--text-secondary);\">使用进度</span>\n <span class=\"text-xs font-medium\" style=\"color: rgba(160,188,240,0.7);\">45%</span>\n </div>\n <div class=\"progress-track\">\n <div class=\"progress-fill\" style=\"width: 45%;\"></div>\n </div>\n <div class=\"flex justify-between mt-1.5\">\n <span class=\"text-[10px]\" style=\"color: var(--text-secondary);\">已用 45 GB</span>\n <span class=\"text-[10px]\" style=\"color: var(--text-secondary);\">剩余 55 GB</span>\n </div>\n </div>\n\n \n <div class=\"plan-current-card fade-up fade-up-d2\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"text-sm font-medium flex items-center gap-2\">\n <i class=\"fas fa-box-open text-xs\" style=\"color: var(--gradient-start);\"></i>\n 当前套餐\n </span>\n <button class=\"records-btn\" id=\"recordsBtn\">\n 套餐记录 <i class=\"fas fa-chevron-right text-[10px]\"></i>\n </button>\n </div>\n\n <div class=\"flex items-center justify-between\">\n <div>\n <h3 class=\"font-heading text-xl font-bold mb-1\">畅享套餐 Pro</h3>\n <div class=\"flex items-center gap-3\">\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">\n <i class=\"fas fa-wifi mr-1\"></i>高速流量 100GB\n </span>\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">\n <i class=\"fas fa-bolt mr-1\"></i>5G 极速\n </span>\n </div>\n </div>\n <div class=\"days-ring\">\n <div class=\"days-ring-inner\">\n <span class=\"font-heading text-lg font-bold block leading-none\" style=\"color: #fff;\">23</span>\n <span class=\"text-[9px]\" style=\"color: var(--text-secondary);\">天</span>\n </div>\n </div>\n </div>\n </div>\n\n \n <div class=\"fade-up fade-up-d3\">\n <div class=\"flex items-center justify-between mb-3\">\n <h2 class=\"font-heading text-base font-bold\">选择套餐</h2>\n <span class=\"text-[11px]\" style=\"color: var(--text-secondary);\">全部含高速流量</span>\n </div>\n\n <div class=\"space-y-3\">\n \n <div class=\"plan-item\" data-plan=\"基础套餐\" data-price=\"29.9\" data-traffic=\"30GB\" data-days=\"30\">\n <div class=\"flex items-center gap-4\">\n <div class=\"plan-check\">\n <i class=\"fas fa-check\"></i>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-0.5\">\n <span class=\"font-heading font-semibold text-sm\">基础套餐</span>\n <span class=\"plan-badge\">30天</span>\n </div>\n <div class=\"flex items-center gap-3 text-xs\" style=\"color: var(--text-secondary);\">\n <span><i class=\"fas fa-wifi mr-1\"></i>30GB</span>\n <span><i class=\"fas fa-clock mr-1\"></i>30天有效</span>\n </div>\n </div>\n <div class=\"text-right\">\n <div class=\"price-tag text-lg\">¥29.9</div>\n <div class=\"text-[10px]\" style=\"color: var(--text-secondary);\">/月</div>\n </div>\n </div>\n </div>\n\n \n <div class=\"plan-item popular selected\" data-plan=\"畅享套餐\" data-price=\"59.9\" data-traffic=\"100GB\" data-days=\"30\">\n <div class=\"flex items-center gap-4\">\n <div class=\"plan-check\">\n <i class=\"fas fa-check\"></i>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-0.5\">\n <span class=\"font-heading font-semibold text-sm\">畅享套餐</span>\n <span class=\"plan-badge\" style=\"background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); color: #fff; border: none;\">推荐</span>\n </div>\n <div class=\"flex items-center gap-3 text-xs\" style=\"color: var(--text-secondary);\">\n <span><i class=\"fas fa-wifi mr-1\"></i>100GB</span>\n <span><i class=\"fas fa-bolt mr-1\"></i>5G极速</span>\n <span><i class=\"fas fa-clock mr-1\"></i>30天</span>\n </div>\n </div>\n <div class=\"text-right\">\n <div class=\"price-tag text-lg\">¥59.9</div>\n <div class=\"text-[10px]\" style=\"color: var(--text-secondary);\">/月</div>\n </div>\n </div>\n </div>\n\n \n <div class=\"plan-item\" data-plan=\"尊享套餐\" data-price=\"99.9\" data-traffic=\"200GB\" data-days=\"30\">\n <div class=\"flex items-center gap-4\">\n <div class=\"plan-check\">\n <i class=\"fas fa-check\"></i>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-0.5\">\n <span class=\"font-heading font-semibold text-sm\">尊享套餐</span>\n <span class=\"plan-badge\">30天</span>\n </div>\n <div class=\"flex items-center gap-3 text-xs\" style=\"color: var(--text-secondary);\">\n <span><i class=\"fas fa-wifi mr-1\"></i>200GB</span>\n <span><i class=\"fas fa-bolt mr-1\"></i>5G极速</span>\n <span><i class=\"fas fa-clock mr-1\"></i>30天</span>\n </div>\n </div>\n <div class=\"text-right\">\n <div class=\"price-tag text-lg\">¥99.9</div>\n <div class=\"text-[10px]\" style=\"color: var(--text-secondary);\">/月</div>\n </div>\n </div>\n </div>\n\n \n <div class=\"plan-item\" data-plan=\"超级套餐\" data-price=\"199.9\" data-traffic=\"500GB\" data-days=\"60\">\n <div class=\"flex items-center gap-4\">\n <div class=\"plan-check\">\n <i class=\"fas fa-check\"></i>\n </div>\n <div class=\"flex-1 min-w-0\">\n <div class=\"flex items-center gap-2 mb-0.5\">\n <span class=\"font-heading font-semibold text-sm\">超级套餐</span>\n <span class=\"plan-badge\">60天</span>\n </div>\n <div class=\"flex items-center gap-3 text-xs\" style=\"color: var(--text-secondary);\">\n <span><i class=\"fas fa-wifi mr-1\"></i>500GB</span>\n <span><i class=\"fas fa-bolt mr-1\"></i>5G极速</span>\n <span><i class=\"fas fa-clock mr-1\"></i>60天</span>\n </div>\n </div>\n <div class=\"text-right\">\n <div class=\"price-tag text-lg\">¥199.9</div>\n <div class=\"text-[10px]\" style=\"color: var(--text-secondary);\">/月</div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </main>\n </div>\n\n \n <div class=\"overlay\" id=\"overlay\"></div>\n\n \n <div class=\"bottom-sheet\" id=\"bottomSheet\">\n <div class=\"sheet-handle\"></div>\n\n <div class=\"text-center mb-6\">\n <div class=\"inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-3\" style=\"background: rgba(43,122,255,0.08); border: 1px solid rgba(43,122,255,0.08);\">\n <i class=\"fas fa-shopping-cart text-xl\" style=\"color: var(--gradient-start);\"></i>\n </div>\n <h3 class=\"font-heading text-lg font-bold\">确认订单</h3>\n <p class=\"text-xs mt-1\" style=\"color: var(--text-secondary);\">请确认套餐信息后完成支付</p>\n </div>\n\n \n <div class=\"rounded-2xl p-4 mb-5\" style=\"background: rgba(43,122,255,0.04); border: 1px solid rgba(43,122,255,0.06);\">\n <div class=\"flex items-center justify-between mb-3\">\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">已选套餐</span>\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\" id=\"sheetTraffic\">100GB · 30天</span>\n </div>\n <div class=\"flex items-center justify-between\">\n <span class=\"font-heading text-lg font-bold\" id=\"sheetPlanName\">畅享套餐</span>\n <span class=\"font-heading text-2xl font-bold price-tag\" id=\"sheetPrice\">¥59.9</span>\n </div>\n </div>\n\n \n <div class=\"space-y-2 mb-5\">\n <div class=\"flex justify-between text-xs\">\n <span style=\"color: var(--text-secondary);\">套餐费用</span>\n <span id=\"sheetSubtotal\">¥59.9</span>\n </div>\n <div class=\"flex justify-between text-xs\">\n <span style=\"color: var(--text-secondary);\">优惠券</span>\n <span style=\"color: #34d399;\">-¥5.0</span>\n </div>\n <div class=\"border-t pt-2 mt-2 flex justify-between text-sm font-semibold\" style=\"border-color: rgba(43,122,255,0.08);\">\n <span>合计</span>\n <span class=\"price-tag font-bold\" id=\"sheetTotal\">¥54.9</span>\n </div>\n </div>\n\n \n <div class=\"flex items-center gap-3 mb-5\">\n <div class=\"custom-checkbox checked\" id=\"agreeCheck\">\n <i class=\"fas fa-check\"></i>\n </div>\n <span class=\"text-xs\" style=\"color: var(--text-secondary);\">\n 我已阅读并同意\n <a href=\"#\" style=\"color: var(--gradient-start); text-decoration: none;\" onclick=\"event.preventDefault()\">《服务协议》</a>\n 和\n <a href=\"#\" style=\"color: var(--gradient-start); text-decoration: none;\" onclick=\"event.preventDefault()\">《隐私政策》</a>\n </span>\n </div>\n\n \n <button class=\"pay-btn shimmer-bg\" id=\"payBtn\">\n <i class=\"fas fa-lock mr-2 text-xs\"></i>\n 立即支付\n </button>\n <p class=\"text-center text-[10px] mt-2\" style=\"color: var(--text-secondary);\">\n <i class=\"fas fa-shield-alt mr-1\"></i>支付安全 · 极速到账\n </p>\n </div>\n\n <script>\n (function() {\n 'use strict';\n\n // ─── 套餐选择 ───\n const planItems = document.querySelectorAll('.plan-item');\n const overlay = document.getElementById('overlay');\n const bottomSheet = document.getElementById('bottomSheet');\n const agreeCheck = document.getElementById('agreeCheck');\n const payBtn = document.getElementById('payBtn');\n\n // Sheet 显示元素\n const sheetPlanName = document.getElementById('sheetPlanName');\n const sheetPrice = document.getElementById('sheetPrice');\n const sheetTraffic = document.getElementById('sheetTraffic');\n const sheetSubtotal = document.getElementById('sheetSubtotal');\n const sheetTotal = document.getElementById('sheetTotal');\n\n let selectedPlan = null;\n let isAgreed = true;\n\n // 选择套餐\n planItems.forEach(function(item) {\n item.addEventListener('click', function(e) {\n // 更新选中状态\n planItems.forEach(function(p) { p.classList.remove('selected'); });\n this.classList.add('selected');\n\n // 获取套餐信息\n const planName = this.dataset.plan;\n const price = this.dataset.price;\n const traffic = this.dataset.traffic;\n const days = this.dataset.days;\n\n selectedPlan = { name: planName, price: price, traffic: traffic, days: days };\n\n // 更新弹窗内容\n updateSheetContent(planName, price, traffic, days);\n\n // 打开弹窗\n openSheet();\n });\n });\n\n function updateSheetContent(name, price, traffic, days) {\n sheetPlanName.textContent = name;\n sheetPrice.textContent = '¥' + price;\n sheetTraffic.textContent = traffic + ' · ' + days + '天';\n sheetSubtotal.textContent = '¥' + price;\n const total = (parseFloat(price) - 5).toFixed(1);\n sheetTotal.textContent = '¥' + total;\n }\n\n // ─── 打开弹窗 ───\n function openSheet() {\n overlay.classList.add('active');\n bottomSheet.classList.add('active');\n document.body.style.overflow = 'hidden';\n }\n\n // ─── 关闭弹窗 ───\n function closeSheet() {\n overlay.classList.remove('active');\n bottomSheet.classList.remove('active');\n document.body.style.overflow = '';\n }\n\n // ─── 点击遮罩关闭 ───\n overlay.addEventListener('click', closeSheet);\n\n // ─── 拖动关闭（简单版本） ───\n let startY = 0;\n let currentY = 0;\n let isDragging = false;\n\n bottomSheet.addEventListener('touchstart', function(e) {\n if (e.target.closest('.pay-btn') || e.target.closest('.custom-checkbox') || e.target.closest('a')) return;\n startY = e.touches[0].clientY;\n isDragging = true;\n bottomSheet.style.transition = 'none';\n }, { passive: true });\n\n bottomSheet.addEventListener('touchmove', function(e) {\n if (!isDragging) return;\n currentY = e.touches[0].clientY;\n const diff = currentY - startY;\n if (diff > 0) {\n bottomSheet.style.transform = 'translateY(' + diff + 'px)';\n }\n }, { passive: true });\n\n bottomSheet.addEventListener('touchend', function(e) {\n if (!isDragging) return;\n isDragging = false;\n bottomSheet.style.transition = 'transform 0.35s cubic-bezier(0.22, 1, 0.36, 1)';\n const diff = currentY - startY;\n if (diff > 80) {\n closeSheet();\n } else {\n bottomSheet.style.transform = '';\n }\n startY = 0;\n currentY = 0;\n }, { passive: true });\n\n // ─── 同意协议切换 ───\n agreeCheck.addEventListener('click', function() {\n isAgreed = !isAgreed;\n this.classList.toggle('checked', isAgreed);\n });\n\n // ─── 支付按钮 ───\n payBtn.addEventListener('click', function() {\n if (!isAgreed) {\n this.style.animation = 'none';\n this.offsetHeight;\n this.style.animation = 'shake 0.4s ease';\n return;\n }\n // 模拟支付成功\n this.innerHTML = '<i class=\"fas fa-spinner fa-spin mr-2\"></i> 处理中...';\n this.disabled = true;\n this.style.opacity = '0.8';\n\n setTimeout(function() {\n payBtn.innerHTML = '<i class=\"fas fa-check-circle mr-2\"></i> 支付成功';\n payBtn.style.background = 'linear-gradient(135deg, #059669, #10b981)';\n payBtn.style.boxShadow = '0 4px 24px rgba(5, 150, 105, 0.3)';\n\n setTimeout(function() {\n closeSheet();\n setTimeout(function() {\n payBtn.innerHTML = '<i class=\"fas fa-lock mr-2 text-xs\"></i> 立即支付';\n payBtn.style.background = '';\n payBtn.style.boxShadow = '';\n payBtn.style.opacity = '1';\n payBtn.disabled = false;\n }, 500);\n }, 1200);\n }, 1500);\n });\n\n // ─── 语言切换 ───\n const langBtn = document.getElementById('langBtn');\n let isCN = true;\n langBtn.addEventListener('click', function() {\n isCN = !isCN;\n const span = this.querySelector('span');\n span.textContent = isCN ? 'EN' : '中文';\n // 简单提示\n const toast = document.createElement('div');\n toast.className = 'fixed top-20 left-1/2 -translate-x-1/2 z-[200] px-5 py-2.5 rounded-xl text-sm font-medium';\n toast.style.cssText = 'background: rgba(43,122,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(43,122,255,0.1); color: #f0f4ff; pointer-events: none; animation: toastAnim 1.8s ease forwards;';\n toast.textContent = isCN ? '切换到英文模式' : '切换到中文模式';\n document.body.appendChild(toast);\n setTimeout(function() { toast.remove(); }, 2000);\n });\n\n // ─── Toast动画 ───\n const styleSheet = document.createElement('style');\n styleSheet.textContent = `\n @keyframes toastAnim {\n 0% { opacity: 0; transform: translate(-50%, -10px); }\n 15% { opacity: 1; transform: translate(-50%, 0); }\n 75% { opacity: 1; transform: translate(-50%, 0); }\n 100% { opacity: 0; transform: translate(-50%, -10px); }\n }\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 20% { transform: translateX(-6px); }\n 40% { transform: translateX(6px); }\n 60% { transform: translateX(-4px); }\n 80% { transform: translateX(4px); }\n }\n `;\n document.head.appendChild(styleSheet);\n\n // ─── 返回按钮 ───\n document.getElementById('backBtn').addEventListener('click', function() {\n if (bottomSheet.classList.contains('active')) {\n closeSheet();\n } else {\n const toast = document.createElement('div');\n toast.className = 'fixed top-20 left-1/2 -translate-x-1/2 z-[200] px-5 py-2.5 rounded-xl text-sm font-medium';\n toast.style.cssText = 'background: rgba(43,122,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(43,122,255,0.1); color: #f0f4ff; pointer-events: none; animation: toastAnim 1.8s ease forwards;';\n toast.textContent = '返回上一页';\n document.body.appendChild(toast);\n setTimeout(function() { toast.remove(); }, 2000);\n }\n });\n\n // ─── 套餐记录按钮 ───\n document.getElementById('recordsBtn').addEventListener('click', function() {\n const toast = document.createElement('div');\n toast.className = 'fixed top-20 left-1/2 -translate-x-1/2 z-[200] px-5 py-2.5 rounded-xl text-sm font-medium';\n toast.style.cssText = 'background: rgba(43,122,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(43,122,255,0.1); color: #f0f4ff; pointer-events: none; animation: toastAnim 1.8s ease forwards;';\n toast.textContent = '查看套餐记录';\n document.body.appendChild(toast);\n setTimeout(function() { toast.remove(); }, 2000);\n });\n\n })();\n </script>\n\n</body>\n</html>"
},
"next": ["支付倒计时交互", "流量走势图表", "套餐对比弹窗", "多语言文案国际化", "3D充值卡展示"],
"breakpoint": "xs"
}
```

total_tokens

29851

summary

将整体色调从极深黑底调整为深蓝主调，背景改为深蓝（#0a1628），卡片背景使用半透明蓝，头尾渐变蓝色光晕，保留科技蓝点缀色，整体更通透有层次。

uiParsing

关闭