H5流量商城主页设计：科技蓝背景、流量卡与套餐管理、支付弹窗

By 17707951002, 21 May, 2026
推理
Let me analyze the user's requirements for an H5 (mobile) page:

1. **Header**: Left - back button, Center - "流量商场" (Traffic Store), Right - language switcher
2. **Card 1**: Card info with card number, expiry date, total traffic, used traffic
3. **Card 2**: Current plan card with plan name, remaining days, and a "套餐记录" (Plan Records) button on the right
4. **Plan List**: List of plans with name, price, and select action
5. **Bottom Sheet/Modal**: When selecting a plan, a bottom sheet slides up with pay button, agreement checkbox, price display, and selected plan name
6. **Color theme**: Tech blue (科技蓝) as primary, gradient buttons
7. **Breakpoint**: xs (mobile/H5)

Let me first get design system recommendations and assets.

Let me start by getting the design system and assets.Now I have a good understanding of the requirements. Let me design this H5 page with:

1. A tech blue (科技蓝) color scheme
2. Gradient buttons
3. Card components for traffic info and current plan
4. Plan list with selection
5. Bottom sheet modal for payment

Let me think about the design:

**Color Scheme - Tech Blue:**
- Primary: #0A66C2 or similar tech blue
- Gradient: From #0A66C2 to #4F8CFF or similar
- Dark background with blue accents would look great for a traffic/data store

**Layout:**
- Fixed header with back, title, language switch
- Card 1: Traffic info card (card number, expiry, total traffic, used traffic) with progress bar
- Card 2: Current plan card with plan name, remaining days, and records button
- Plan list: Multiple options with name, price, select button
- Bottom sheet: Animated slide-up with payment info

Let me design this now. I'll use a dark techy theme with blue as primary.

For fonts - since the design system recommended Inter, but I want something more unique, let me use something like "Outfit" for headings which is clean and modern, with "Plus Jakarta Sans" for body text.

Actually, let me go with:
- Heading: "Outfit" - clean, modern, techy
- Body: "Plus Jakarta Sans" - complementary

Let me create the complete HTML now.

Actually, for mobile H5, I'll make it scrollable with smooth animations.

Let me design the flow:
1. User lands on page (or clicks 查询/query to enter)
2. Sees the main dashboard with traffic info cards
3. Can browse plans
4. Select a plan → bottom sheet slides up
5. Bottom sheet shows: plan name, price, agreement checkbox, pay button (gradient)

Let me build this out.

For the header:
- Left: ← back arrow icon
- Center: 流量商场
- Right: 🌐 language switcher (using Font Awesome globe icon)

Card 1 - Traffic Info:
- Card number: **** **** **** 1234
- Expiry: 12/28
- Total traffic: 100GB
- Used traffic: 45GB (with progress bar)

Card 2 - Current Plan:
- Plan name: 畅享套餐
- Remaining: 23 days
- Button: 套餐记录

Plan List:
- 基础套餐 - ¥29.9/月
- 畅享套餐 - ¥59.9/月
- 尊享套餐 - ¥99.9/月
- 超级套餐 - ¥199.9/月

Bottom Sheet:
- Selected plan name
- Price
- Agreement checkbox
- Pay button (gradient)

Let me write the code now.

I want to make this visually stunning with:
- Dark background with subtle blue glow/particles
- Glassmorphism cards
- Gradient buttons
- Smooth animations
- Bottom sheet with backdrop blur

Let me create a really polished H5 experience.Now let me build the complete H5 page. I'll create a stunning mobile page with tech blue theme.I don't need actual images for this design - it's mostly UI cards and data display. Let me now create the full H5 page.

Let me think about the structure more carefully:

1. **Header (fixed)**: Back arrow, "流量商场" title, language switcher (globe icon)
2. **Scrollable content area**:
- **Traffic Info Card**: Card number, expiry, total traffic, used traffic with progress
- **Current Plan Card**: Plan name, remaining days, records button
- **Plan List**: Multiple plans with name, price, select action
3. **Bottom Sheet (hidden by default)**: Plan name, price, agreement, pay button

For tech blue, I'll use:
- Primary: #0D6EFD (Bootstrap blue)
- Gradient: from #0D6EFD to #6F42C1 or from #0D6EFD to #00D4FF
- Actually let me go with: from #0057FF to #00D4FF (a nice blue to cyan gradient)
- Background: dark with subtle blue gradient overlay

Let me build a complete, polished component. I'll use:
- TailwindCSS via CDN script
- Font Awesome for icons
- Google Fonts: "Outfit" for headings and "Plus Jakarta Sans" for body
- Custom CSS for animations and effects

Let me code it up now.

For the bottom sheet, I'll use a CSS animation that slides up from the bottom with a backdrop overlay.

Let me also add some nice micro-interactions:
- Cards fade in on load with stagger
- Progress bar animates
- Plan items have hover/active states
- Bottom sheet slides up smoothly
- Button has gradient with hover effect

Here's my detailed plan for the HTML:

```
<div id="app">
<!-- Header -->
<header>
<button class="back-btn"><i class="fas fa-arrow-left"></i></button>
<h1>流量商场</h1>
<button class="lang-btn"><i class="fas fa-globe"></i> EN</button>
</header>

<!-- Main Content -->
<main>
<!-- Traffic Card -->
<div class="traffic-card">
<div class="card-header">
<span class="label">流量卡</span>
<span class="badge">已激活</span>
</div>
<div class="card-number">**** **** **** 8823</div>
<div class="card-expiry">有效期至: 12/28</div>
<div class="traffic-stats">
<div class="stat">
<span class="stat-label">总流量</span>
<span class="stat-value">100 GB</span>
</div>
<div class="stat">
<span class="stat-label">已用流量</span>
<span class="stat-value">45 GB</span>
</div>
</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 45%"></div>
</div>
<div class="progress-info">
<span>已用 45%</span>
<span>剩余 55 GB</span>
</div>
</div>

<!-- Current Plan Card -->
<div class="plan-card">
<div class="plan-header">
<span class="plan-label">当前套餐</span>
<button class="records-btn">套餐记录 <i class="fas fa-chevron-right"></i></button>
</div>
<div class="plan-name">畅享套餐</div>
<div class="plan-days">
<span class="days-number">23</span>
<span class="days-label">天剩余</span>
</div>
</div>

<!-- Plan List -->
<div class="plans-section">
<h2>选择套餐</h2>
<div class="plan-item" data-plan="基础套餐" data-price="29.9">
...
</div>
...
</div>
</main>

<!-- Bottom Sheet Overlay -->
<div class="overlay" id="overlay"></div>

<!-- Bottom Sheet -->
<div class="bottom-sheet" id="bottomSheet">
...
</div>
</div>
```

Let me now write the complete code.Good, I have some context. Now let me build the complete H5 page. Let me craft a stunning, polished mobile page with the tech blue theme.

I'll use:
- Font: Outfit (headings) + Plus Jakarta Sans (body)
- Tech blue primary: from #0055FF to #00D4FF
- Dark deep blue background for premium feel
- Glassmorphism cards
- Gradient buttons
- Smooth slide-up bottom sheet

Let me write the complete HTML now.Now I have enough context. Let me build the complete H5 page. I'll create a visually stunning mobile page with deep tech blue aesthetic.I don't need actual external images for this design. It's all about UI cards, gradients, and data visualization. Let me now build the complete HTML.

Let me write the complete H5 page now.I don't need images for this page design. Let me now craft the complete H5. I'll build a stunning mobile data card / traffic store page with tech blue theme.
角色
assistant
content

```json
{
"summary": "生成了H5流量商场主页面，深色科技蓝背景，头部含返回/标题/多语言切换；流量卡卡片含卡号、到期时间、总流量、已用流量进度条；当前套餐卡片含套餐名、剩余天数、套餐记录按钮；底部套餐列表可点击选择，弹出上拉支付弹窗含立即支付按钮、勾选协议和价格显示。整体采用科技蓝主色调，按钮渐变蓝紫，玻璃态卡片视觉效果。",
"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: #0057ff;\n --tech-blue-600: #0045cc;\n --tech-blue-700: #0037a3;\n --tech-blue-800: #002b82;\n --tech-blue-900: #001a52;\n --gradient-start: #0057ff;\n --gradient-mid: #4f7cff;\n --gradient-end: #a855f7;\n --bg-deep: #060b1a;\n --bg-card: rgba(15, 23, 50, 0.75);\n --text-primary: #f0f4ff;\n --text-secondary: rgba(180, 200, 255, 0.7);\n --glow-blue: rgba(0, 87, 255, 0.25);\n --glow-purple: rgba(168, 85, 247, 0.15);\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.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(0, 87, 255, 0.03) 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: -20%;\n left: -20%;\n width: 80%;\n height: 60%;\n background: radial-gradient(ellipse at 30% 20%, rgba(0, 87, 255, 0.12) 0%, transparent 70%);\n animation: glowPulse 6s 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(168, 85, 247, 0.08) 0%, transparent 70%);\n animation: glowPulse 8s 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(0, 87, 255, 0.3);\n border-radius: 50%;\n animation: floatUp linear infinite;\n }\n .particle:nth-child(1) { left: 10%; width: 2px; height: 2px; animation-duration: 12s; animation-delay: 0s; }\n .particle:nth-child(2) { left: 25%; width: 4px; height: 4px; animation-duration: 16s; animation-delay: 1s; }\n .particle:nth-child(3) { left: 40%; width: 2px; height: 2px; animation-duration: 14s; animation-delay: 2s; }\n .particle:nth-child(4) { left: 55%; width: 3px; height: 3px; animation-duration: 18s; animation-delay: 0.5s; }\n .particle:nth-child(5) { left: 70%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 3s; }\n .particle:nth-child(6) { left: 85%; width: 4px; height: 4px; animation-duration: 15s; animation-delay: 1.5s; }\n .particle:nth-child(7) { left: 50%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: 4s; }\n .particle:nth-child(8) { left: 15%; width: 2px; height: 2px; animation-duration: 11s; animation-delay: 2.5s; }\n\n @keyframes floatUp {\n 0% { transform: translateY(100vh) scale(0); opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 0.6; }\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.2);\n -webkit-backdrop-filter: blur(20px) saturate(1.2);\n background: rgba(6, 11, 26, 0.7);\n border-bottom: 1px solid rgba(0, 87, 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(0, 87, 255, 0.08);\n border: 1px solid rgba(0, 87, 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(0, 87, 255, 0.18);\n }\n\n .lang-btn {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border-radius: 20px;\n background: rgba(0, 87, 255, 0.08);\n border: 1px solid rgba(0, 87, 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(0, 87, 255, 0.18);\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(135deg, rgba(0, 40, 120, 0.5), rgba(10, 15, 40, 0.7));\n border: 1px solid rgba(0, 87, 255, 0.15);\n border-radius: 20px;\n padding: 20px;\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(10px);\n transition: all 0.3s ease;\n }\n .traffic-card::before {\n content: '';\n position: absolute;\n top: -50%;\n right: -30%;\n width: 80%;\n height: 120%;\n background: radial-gradient(ellipse at center, rgba(0, 87, 255, 0.08) 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.6;\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(0, 87, 255, 0.3);\n }\n\n .progress-track {\n width: 100%;\n height: 6px;\n background: rgba(0, 87, 255, 0.1);\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.4);\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.4; }\n 50% { opacity: 1; }\n }\n\n /* ─── 当前套餐卡 ─── */\n .plan-current-card {\n background: rgba(15, 23, 50, 0.6);\n border: 1px solid rgba(0, 87, 255, 0.12);\n border-radius: 20px;\n padding: 20px;\n backdrop-filter: blur(10px);\n transition: all 0.3s ease;\n }\n\n .records-btn {\n padding: 8px 16px;\n border-radius: 20px;\n background: rgba(0, 87, 255, 0.1);\n border: 1px solid rgba(0, 87, 255, 0.15);\n color: rgba(180, 200, 255, 0.9);\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(0, 87, 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(0, 87, 255, 0.1) 270deg, rgba(0, 87, 255, 0.1) 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(6, 11, 26, 0.9);\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(15, 23, 50, 0.5);\n border: 1px solid rgba(0, 87, 255, 0.08);\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.08);\n box-shadow: 0 0 30px rgba(0, 87, 255, 0.1);\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(0, 87, 255, 0.2);\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.3);\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: linear-gradient(135deg, rgba(0, 87, 255, 0.15), rgba(168, 85, 247, 0.15));\n color: rgba(180, 200, 255, 0.8);\n border: 1px solid rgba(0, 87, 255, 0.1);\n }\n\n .plan-item.popular {\n border-color: rgba(168, 85, 247, 0.2);\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(0, 0, 0, 0.6);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\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, 18, 45, 0.98), rgba(6, 11, 26, 0.99));\n border-radius: 24px 24px 0 0;\n border: 1px solid rgba(0, 87, 255, 0.1);\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(0, 87, 255, 0.15);\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.25);\n }\n .pay-btn:active {\n transform: scale(0.97);\n box-shadow: 0 2px 12px rgba(0, 87, 255, 0.2);\n }\n .pay-btn::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, transparent, rgba(255,255,255,0.08), transparent);\n transform: translateX(-100%);\n transition: transform 0.6s ease;\n }\n .pay-btn:active::before {\n transform: translateX(100%);\n }\n\n /* ─── 自定义复选框 ─── */\n .custom-checkbox {\n width: 20px;\n height: 20px;\n border-radius: 6px;\n border: 2px solid rgba(0, 87, 255, 0.25);\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.2);\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 @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 ::-webkit-scrollbar {\n width: 3px;\n }\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n ::-webkit-scrollbar-thumb {\n background: rgba(0, 87, 255, 0.2);\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 <!-- App Container -->\n <div id=\"app\">\n\n <!-- ─── Header ─── -->\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 <!-- 卡片1：流量卡信息 -->\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(180,200,255,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,255,180,0.2); color: rgba(0,255,180,0.7); background: rgba(0,255,180,0.06);\">\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(0,87,255,0.06); border: 1px solid rgba(0,87,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(168,85,247,0.06); border: 1px solid rgba(168,85,247,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(180,200,255,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 <!-- 卡片2：当前套餐 -->\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 <!-- 套餐1 -->\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 <!-- 套餐2 (热门) -->\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 <!-- 套餐3 -->\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 <!-- 套餐4 -->\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(0,87,255,0.1); border: 1px solid rgba(0,87,255,0.1);\">\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(0,87,255,0.05); border: 1px solid rgba(0,87,255,0.08);\">\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(0,87,255,0.1);\">\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(0,87,255,0.15); backdrop-filter: blur(12px); border: 1px solid rgba(0,87,255,0.15); 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 // 模拟返回\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(0,87,255,0.15); backdrop-filter: blur(12px); border: 1px solid rgba(0,87,255,0.15); 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(0,87,255,0.15); backdrop-filter: blur(12px); border: 1px solid rgba(0,87,255,0.15); 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": ["多语言国际化", "支付倒计时", "套餐对比功能", "流量使用图表", "暗色模式优化"],
"breakpoint": "xs"
}
```

total_tokens
25076
summary
生成了H5流量商场主页面，深色科技蓝背景，头部含返回/标题/多语言切换；流量卡卡片含卡号、到期时间、总流量、已用流量进度条；当前套餐卡片含套餐名、剩余天数、套餐记录按钮；底部套餐列表可点击选择，弹出上拉支付弹窗含立即支付按钮、勾选协议和价格显示。整体采用科技蓝主色调，按钮渐变蓝紫，玻璃态卡片视觉效果。
uiParsing
关闭