编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>外卖红包+生活副业</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
            background: #f5f5f5;
            min-height: 100vh;
            max-width: 430px;
            margin: 0 auto;
            position: relative;
            overflow-x: hidden;
        }
        
        /* 页面容器 */
        .page {
            display: none;
            min-height: calc(100vh - 60px);
            padding-bottom: 70px;
            animation: fadeIn 0.3s ease;
        }
        
        .page.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0.8; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 首页 */
        .home-header {
            background: linear-gradient(135deg, #ff6b35 0%, #ff4757 100%);
            padding: 20px 15px 30px;
            color: white;
        }
        
        .home-title {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .home-title span {
            font-size: 12px;
            background: rgba(255,255,255,0.2);
            padding: 2px 8px;
            border-radius: 10px;
        }
        
        .balance-card {
            background: white;
            border-radius: 12px;
            margin: 15px;
            padding: 20px;
            margin-top: -20px;
            box-shadow: 0 4px 15px rgba(255,107,53,0.15);
        }
        
        .balance-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .balance-label {
            color: #666;
            font-size: 13px;
        }
        
        .balance-value {
            font-size: 32px;
            font-weight: 700;
            color: #333;
        }
        
        .balance-detail {
            display: flex;
            gap: 15px;
        }
        
        .balance-item {
            flex: 1;
            text-align: center;
            padding: 10px;
            background: #f8f8f8;
            border-radius: 8px;
        }
        
        .balance-item-label {
            font-size: 11px;
            color: #999;
            margin-bottom: 4px;
        }
        
        .balance-item-value {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        
        .action-btn {
            background: linear-gradient(135deg, #ff6b35, #ff4757);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 600;
            margin-top: 15px;
            cursor: pointer;
        }
        
        /* 红包模块 */
        .module-section {
            padding: 15px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .coupon-list {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 10px;
            -webkit-overflow-scrolling: touch;
        }
        
        .coupon-list::-webkit-scrollbar {
            display: none;
        }
        
        .coupon-card {
            flex-shrink: 0;
            width: 160px;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .coupon-card:active {
            transform: scale(0.98);
        }
        
        .coupon-header {
            padding: 12px;
            position: relative;
        }
        
        .coupon-meituan .coupon-header {
            background: linear-gradient(135deg, #ff6b35, #ff8c42);
        }
        
        .coupon-ele .coupon-header {
            background: linear-gradient(135deg, #00b5ff, #00d4ff);
        }
        
        .coupon-brand {
            font-size: 14px;
            font-weight: 600;
            color: white;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .coupon-amount {
            font-size: 24px;
            font-weight: 700;
            color: white;
            margin-top: 8px;
        }
        
        .coupon-amount small {
            font-size: 12px;
            font-weight: normal;
        }
        
        .coupon-footer {
            padding: 10px 12px;
            font-size: 12px;
            color: #999;
        }
        
        .coupon-tag {
            display: inline-block;
            background: #fff3e6;
            color: #ff6b35;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
        }
        
        /* 功能入口网格 */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 0 15px;
        }
        
        .feature-item {
            background: white;
            border-radius: 12px;
            padding: 15px 8px;
            text-align: center;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .feature-item:active {
            transform: scale(0.95);
        }
        
        .feature-icon {
            width: 40px;
            height: 40px;
            margin: 0 auto 8px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        
        .feature-name {
            font-size: 12px;
            color: #333;
        }
        
        /* 签到区域 */
        .checkin-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin: 0 15px;
        }
        
        .checkin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .checkin-title {
            font-size: 15px;
            font-weight: 600;
        }
        
        .checkin-btn {
            background: linear-gradient(135deg, #52c41a, #73d13d);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
        }
        
        .checkin-btn.signed {
            background: #ccc;
        }
        
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 8px;
            text-align: center;
        }
        
        .calendar-day {
            font-size: 12px;
            color: #999;
        }
        
        .calendar-day.header {
            font-size: 11px;
            font-weight: 500;
        }
        
        .calendar-day.signed-day {
            background: linear-gradient(135deg, #52c41a, #73d13d);
            color: white;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            line-height: 28px;
            margin: 0 auto;
        }
        
        /* 邀请区域 */
        .invite-banner {
            background: linear-gradient(135deg, #667eea, #764ba2);
            margin: 15px;
            border-radius: 12px;
            padding: 20px;
            color: white;
            cursor: pointer;
        }
        
        .invite-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .invite-desc {
            font-size: 12px;
            opacity: 0.8;
        }
        
        .invite-stat {
            display: flex;
            gap: 20px;
            margin-top: 15px;
        }
        
        .invite-stat-item {
            text-align: center;
        }
        
        .invite-stat-num {
            font-size: 24px;
            font-weight: 700;
        }
        
        .invite-stat-label {
            font-size: 11px;
            opacity: 0.8;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 5px 15px;
            cursor: pointer;
            color: #999;
            transition: color 0.2s;
        }
        
        .nav-item.active {
            color: #ff6b35;
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        .nav-label {
            font-size: 10px;
        }
        
        /* 详情页 */
        .detail-header {
            padding: 15px;
            background: white;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .back-btn {
            font-size: 20px;
            cursor: pointer;
            padding: 5px;
        }
        
        .detail-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .detail-content {
            padding: 15px;
        }
        
        /* 美团饿了么红包列表 */
        .redpacket-list {
            padding: 15px;
        }
        
        .redpacket-item {
            background: white;
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .redpacket-item:active {
            transform: scale(0.98);
        }
        
        .redpacket-header {
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .redpacket-logo {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .redpacket-info {
            flex: 1;
        }
        
        .redpacket-brand {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .redpacket-desc {
            font-size: 12px;
            color: #999;
        }
        
        .redpacket-value {
            text-align: right;
        }
        
        .redpacket-amount {
            font-size: 22px;
            font-weight: 700;
            color: #ff6b35;
        }
        
        .redpacket-amount small {
            font-size: 12px;
        }
        
        .redpacket-footer {
            background: #fff8e6;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .redpacket-condition {
            font-size: 12px;
            color: #ff6b35;
        }
        
        .redpacket-get {
            background: linear-gradient(135deg, #ff6b35, #ff4757);
            color: white;
            border: none;
            padding: 6px 16px;
            border-radius: 15px;
            font-size: 12px;
            cursor: pointer;
        }
        
        /* 电影票等生活服务 */
        .service-list {
            padding: 15px;
        }
        
        .service-item {
            background: white;
            border-radius: 12px;
            margin-bottom: 12px;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .service-item:active {
            transform: scale(0.98);
        }
        
        .service-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
        
        .service-info {
            flex: 1;
        }
        
        .service-name {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .service-desc {
            font-size: 12px;
            color: #999;
        }
        
        .service-arrow {
            color: #ccc;
            font-size: 18px;
        }
        
        /* 邀请海报 */
        .invite-page-content {
            padding: 20px;
            text-align: center;
        }
        
        .poster-preview {
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 12px;
            padding: 30px;
            color: white;
            margin-bottom: 20px;
        }
        
        .poster-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .poster-qr {
            width: 150px;
            height: 150px;
            background: white;
            margin: 20px auto;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 60px;
        }
        
        .share-btn {
            background: linear-gradient(135deg, #ff6b35, #ff4757);
            color: white;
            border: none;
            padding: 12px 40px;
            border-radius: 25px;
            font-size: 15px;
            font-weight: 600;
            margin-top: 15px;
            cursor: pointer;
        }
        
        .invite-record {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-top: 20px;
            text-align: left;
        }
        
        .invite-record-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .record-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        
        /* 个人中心 */
        .profile-header {
            background: linear-gradient(135deg, #ff6b35, #ff4757);
            padding: 30px 20px;
            color: white;
        }
        
        .profile-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }
        
        .profile-name {
            font-size: 18px;
            font-weight: 600;
        }
        
        .profile-phone {
            font-size: 13px;
            opacity: 0.8;
        }
        
        .profile-stats {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }
        
        .profile-stat {
            text-align: center;
            flex: 1;
        }
        
        .profile-stat-num {
            font-size: 20px;
            font-weight: 700;
        }
        
        .profile-stat-label {
            font-size: 12px;
            opacity: 0.8;
        }
        
        .profile-menu {
            padding: 15px;
        }
        
        .menu-group {
            background: white;
            border-radius: 12px;
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 15px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .menu-item:active {
            background: #f5f5f5;
        }
        
        .menu-item:not(:last-child) {
            border-bottom: 1px solid #f5f5f5;
        }
        
        .menu-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }
        
        .menu-text {
            flex: 1;
            font-size: 14px;
            color: #333;
        }
        
        .menu-arrow {
            color: #ccc;
            font-size: 16px;
        }
        
        /* 提现页面 */
        .withdraw-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin: 15px;
        }
        
        .withdraw-amount {
            text-align: center;
            padding: 20px 0;
        }
        
        .withdraw-label {
            font-size: 12px;
            color: #999;
        }
        
        .withdraw-value {
            font-size: 36px;
            font-weight: 700;
            color: #333;
            margin-top: 10px;
        }
        
        .withdraw-input {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px;
            background: #f8f8f8;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .withdraw-input input {
            flex: 1;
            border: none;
            background: none;
            font-size: 24px;
            outline: none;
        }
        
        .withdraw-btn {
            width: 100%;
            background: linear-gradient(135deg, #ff6b35, #ff4757);
            color: white;
            border: none;
            padding: 14px;
            border-radius: 25px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }
        
        /* 签到日历弹窗 */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 200;
            justify-content: center;
            align-items: flex-end;
        }
        
        .modal-overlay.active {
            display: flex;
        }
        
        .modal-content {
            background: white;
            border-radius: 20px 20px 0 0;
            padding: 20px;
            width: 100%;
            max-width: 430px;
            animation: slideUp 0.3s ease;
        }
        
        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .modal-close {
            font-size: 24px;
            color: #999;
            cursor: pointer;
        }
        
        /* 消息通知 */
        .notification-list {
            padding: 15px;
        }
        
        .notification-item {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
            cursor: pointer;
        }
        
        .notification-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .notification-tag {
            background: #fff3e6;
            color: #ff6b35;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
        }
        
        .notification-time {
            font-size: 12px;
            color: #999;
            margin-left: auto;
        }
        
        .notification-title {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .notification-desc {
            font-size: 12px;
            color: #999;
        }
        
        /* 排行榜 */
        .rank-list {
            padding: 15px;
        }
        
        .rank-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background: white;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        
        .rank-num {
            width: 24px;
            font-size: 14px;
            font-weight: 600;
            color: #999;
        }
        
        .rank-num.top1 { color: #ff6b35; }
        .rank-num.top2 { color: #ff9500; }
        .rank-num.top3 { color: #ffcc00; }
        
        .rank-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin: 0 10px;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .rank-name {
            flex: 1;
            font-size: 14px;
        }
        
        .rank-value {
            font-size: 14px;
            color: #ff6b35;
            font-weight: 600;
        }
        
        /* Toast提示 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 300;
            display: none;
        }
        
        .toast.active {
            display: block;
            animation: toastShow 0.3s ease;
        }
        
        @keyframes toastShow {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        
        /* 页面切换动画 */
        .page-transition {
            animation: pageIn 0.3s ease;
        }
        
        @keyframes pageIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="home-page" class="page active">
        <div class="home-header">
            <div class="home-title">
                外卖红包+
                <span>生活副业</span>
            </div>
        </div>
        
        <div class="balance-card">
            <div class="balance-header">
                <div>
                    <div class="balance-label">我的余额</div>
                    <div class="balance-value">¥128.50</div>
                </div>
                <button class="action-btn" onclick="showPage('withdraw-page')">提现</button>
            </div>
            <div class="balance-detail">
                <div class="balance-item">
                    <div class="balance-item-label">累计收益</div>
                    <div class="balance-item-value">¥386.20</div>
                </div>
                <div class="balance-item">
                    <div class="balance-item-label">待到账</div>
                    <div class="balance-item-value">¥12.50</div>
                </div>
            </div>
        </div>
        
        <div class="module-section">
            <div class="section-title">🍔 外卖红包</div>
            <div class="coupon-list">
                <div class="coupon-card coupon-meituan" onclick="showPage('meituan-page')">
                    <div class="coupon-header">
                        <div class="coupon-brand">🍜 美团外卖</div>
                        <div class="coupon-amount"><small>最高</small>¥6</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-tag">限时领取</span>
                    </div>
                </div>
                <div class="coupon-card coupon-ele" onclick="showPage('ele-page')">
                    <div class="coupon-header">
                        <div class="coupon-brand">🛵 饿了么</div>
                        <div class="coupon-amount"><small>最高</small>¥5</div>
                    </div>
                    <div class="coupon-footer">
                        <span class="coupon-tag">天天可领</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="module-section">
            <div class="section-title">🎬 生活服务</div>
            <div class="feature-grid">
                <div class="feature-item" onclick="showPage('movie-page')">
                    <div class="feature-icon" style="background:#fff3e6;">🎬</div>
                    <div class="feature-name">电影票</div>
                </div>
                <div class="feature-item" onclick="showPage('oil-page')">
                    <div class="feature-icon" style="background:#e6f7ff;">⛽</div>
                    <div class="feature-name">加油</div>
                </div>
                <div class="feature-item" onclick="showPage('phone-page')">
                    <div class="feature-icon" style="background:#f6ffed;">📱</div>
                    <div class="feature-name">话费充值</div>
                </div>
                <div class="feature-item" onclick="showPage('shop-page')">
                    <div class="feature-icon" style="background:#fff0f0;">🛒</div>
                    <div class="feature-name">电商返利</div>
                </div>
            </div>
        </div>
        
        <div class="module-section">
            <div class="invite-banner" onclick="showPage('invite-page')">
                <div class="invite-title">🎁 邀请好友赚奖金</div>
                <div class="invite-desc">每邀请1位好友，双方各得5元奖金</div>
<div class="invite-stat">
                    <div class="invite-stat-item">
                        <div class="invite-stat-num">12</div>
                        <div class="invite-stat-label">已邀请</div>
                    </div>
                    <div class="invite-stat-item">
                        <div class="invite-stat-num">¥60</div>
                        <div class="invite-stat-label">邀请奖励</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="module-section">
            <div class="checkin-card">
                <div class="checkin-header">
                    <div class="checkin-title">📅 每日签到</div>
                    <button class="checkin-btn" id="checkin-btn" onclick="doCheckin()">签到</button>
                </div>
                <div class="calendar-grid">
                    <div class="calendar-day header">一</div>
                    <div class="calendar-day header">二</div>
                    <div class="calendar-day header">三</div>
                    <div class="calendar-day header">四</div>
                    <div class="calendar-day header">五</div>
                    <div class="calendar-day header">六</div>
                    <div class="calendar-day header">日</div>
                    <div class="calendar-day"></div>
                    <div class="calendar-day"></div>
                    <div class="calendar-day signed-day">1</div>
                    <div class="calendar-day signed-day">2</div>
                    <div class="calendar-day signed-day">3</div>
                    <div class="calendar-day signed-day">4</div>
                    <div class="calendar-day signed-day">5</div>
                    <div class="calendar-day signed-day">6</div>
                    <div class="calendar-day signed-day">7</div>
                    <div class="calendar-day signed-day">8</div>
                    <div class="calendar-day signed-day">9</div>
                    <div class="calendar-day signed-day">10</div>
                    <div class="calendar-day">11</div>
                    <div class="calendar-day">12</div>
                    <div class="calendar-day">13</div>
                </div>
                <div style="margin-top:10px;font-size:12px;color:#999;">已连续签到10天，明日可领0.3元</div>
            </div>
        </div>
    </div>
    
    <!-- 美团红包页 -->
    <div id="meituan-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('home-page')">←</div>
            <div class="detail-title">美团外卖红包</div>
        </div>
        <div class="redpacket-list">
            <div class="redpacket-item" onclick="showToast('领取成功！')">
                <div class="redpacket-header">
                    <div class="redpacket-logo" style="background:#ff6b35;">🍜</div>
                    <div class="redpacket-info">
                        <div class="redpacket-brand">美团红包-满25减6</div>
                        <div class="redpacket-desc">限美团外卖使用</div>
                    </div>
                    <div class="redpacket-value">
                        <div class="redpacket-amount">¥6</div>
                    </div>
                </div>
                <div class="redpacket-footer">
                    <span class="redpacket-condition">满25元可用</span>
                    <button class="redpacket-get">立即领取</button>
                </div>
            </div>
            <div class="redpacket-item" onclick="showToast('领取成功！')">
                <div class="redpacket-header">
                    <div class="redpacket-logo" style="background:#ff6b35;">🍜</div>
                    <div class="redpacket-info">
                        <div class="redpacket-brand">美团红包-满35减8</div>
                        <div class="redpacket-desc">限美团外卖使用</div>
                    </div>
                    <div class="redpacket-value">
                        <div class="redpacket-amount">¥8</div>
                    </div>
                </div>
                <div class="redpacket-footer">
                    <span class="redpacket-condition">满35元可用</span>
                    <button class="redpacket-get">立即领取</button>
                </div>
            </div>
            <div class="redpacket-item" onclick="showToast('已领取，去下单吧！')">
                <div class="redpacket-header">
                    <div class="redpacket-logo" style="background:#ff6b35;">🍜</div>
                    <div class="redpacket-info">
                        <div class="redpacket-brand">美团红包-满20减3</div>
                        <div class="redpacket-desc">限美团外卖使用</div>
                    </div>
                    <div class="redpacket-value">
                        <div class="redpacket-amount">¥3</div>
                    </div>
                </div>
                <div class="redpacket-footer">
                    <span class="redpacket-condition">满20元可用</span>
                    <button class="redpacket-get" style="background:#ccc;">已领取</button>
                </div>
            </div>
        </div>
        <div style="padding:15px;">
            <div class="notification-item" style="background:#fff3e6;">
                <div style="display:flex;align-items:center;gap:8px;">
                    <span style="font-size:20px;">💡</span>
                    <div>
                        <div style="font-size:13px;font-weight:500;color:#ff6b35;">使用说明</div>
                        <div style="font-size:12px;color:#666;margin-top:4px;">领取后直接跳转美团小程序下单即可自动抵扣</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 饿了么红包页 -->
    <div id="ele-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('home-page')">←</div>
            <div class="detail-title">饿了么外卖红包</div>
        </div>
        <div class="redpacket-list">
            <div class="redpacket-item" onclick="showToast('领取成功！')">
                <div class="redpacket-header">
                    <div class="redpacket-logo" style="background:#00b5ff;">🛵</div>
                    <div class="redpacket-info">
                        <div class="redpacket-brand">饿了么红包-满20减5</div>
                        <div class="redpacket-desc">限饿了么外卖使用</div>
                    </div>
                    <div class="redpacket-value">
                        <div class="redpacket-amount" style="color:#00b5ff;">¥5</div>
                    </div>
                </div>
                <div class="redpacket-footer" style="background:#e6f7ff;">
                    <span class="redpacket-condition" style="color:#00b5ff;">满20元可用</span>
                    <button class="redpacket-get" style="background:linear-gradient(135deg, #00b5ff, #00d4ff);">立即领取</button>
                </div>
            </div>
            <div class="redpacket-item" onclick="showToast('领取成功！')">
                <div class="redpacket-header">
                    <div class="redpacket-logo" style="background:#00b5ff;">🛵</div>
                    <div class="redpacket-info">
                        <div class="redpacket-brand">饿了么红包-满30减7</div>
                        <div class="redpacket-desc">限饿了么外卖使用</div>
                    </div>
                    <div class="redpacket-value">
                        <div class="redpacket-amount" style="color:#00b5ff;">¥7</div>
                    </div>
                </div>
                <div class="redpacket-footer" style="background:#e6f7ff;">
                    <span class="redpacket-condition" style="color:#00b5ff;">满30元可用</span>
                    <button class="redpacket-get" style="background:linear-gradient(135deg, #00b5ff, #00d4ff);">立即领取</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 电影票页 -->
    <div id="movie-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('home-page')">←</div>
            <div class="detail-title">电影票优惠</div>
        </div>
        <div class="service-list">
            <div class="service-item" onclick="showToast('功能开发中')">
                <div class="service-icon" style="background:#fff3e6;">🎬</div>
                <div class="service-info">
                    <div class="service-name">在线选座购票</div>
                    <div class="service-desc">全国影院在线选座，比现场票价更优惠</div>
                </div>
                <div class="service-arrow">›</div>
            </div>
            <div class="service-item" onclick="showToast('功能开发中')">
                <div class="service-icon" style="background:#e6f7ff;">🍿</div>
                <div class="service-info">
                    <div class="service-name">卖品特惠</div>
                    <div class="service-desc">爆米花、饮料特惠套餐</div>
                </div>
                <div class="service-arrow">›</div>
            </div>
        </div>
        <div style="padding:15px;text-align:center;color:#999;font-size:12px;">
            <p>平台通过电影票API对接各大影院</p>
            <p>用户购票后平台赚取佣金差价</p>
        </div>
    </div>
    
    <!-- 加油页 -->
    <div id="oil-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('home-page')">←</div>
            <div class="detail-title">加油优惠</div>
        </div>
        <div class="service-list">
            <div class="service-item" onclick="showToast('功能开发中')">
                <div class="service-icon" style="background:#e6f7ff;">⛽</div>
                <div class="service-info">
                    <div class="service-name">附近加油站</div>
                    <div class="service-desc">查找附近加油站，享受折扣价</div>
                </div>
                <div class="service-arrow">›</div>
            </div>
            <div class="service-item" onclick="showToast('功能开发中')">
                <div class="service-icon" style="background:#fff3e6;">💰</div>
                <div class="service-info">
                    <div class="service-name">油卡充值</div>
                    <div class="service-desc">油卡充值享受额外优惠</div>
                </div>
                <div class="service-arrow">›</div>
            </div>
        </div>
    </div>
    
    <!-- 话费充值页 -->
    <div id="phone-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('home-page')">←</div>
            <div class="detail-title">话费充值</div>
        </div>
        <div class="service-list">
            <div class="service-item" onclick="showToast('功能开发中')">
                <div class="service-icon" style="background:#f6ffed;">📱</div>
                <div class="service-info">
                    <div class="service-name">话费充值</div>
                    <div class="service-desc">充值享受98折优惠</div>
                </div>
                <div class="service-arrow">›</div>
            </div>
            <div class="service-item" onclick="showToast('功能开发中')">
                <div class="service-icon" style="background:#fff0f0;">📶</div>
                <div class="service-info">
                    <div class="service-name">流量充值</div>
                    <div class="service-desc">流量包充值，划算又方便</div>
                </div>
                <div class="service-arrow">›</div>
            </div>
        </div>
    </div>
    
    <!-- 电商返利页 -->
    <div id="shop-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('home-page')">←</div>
            <div class="detail-title">电商返利</div>
        </div>
        <div style="padding:20px;text-align:center;">
            <div style="font-size:60px;margin-bottom:15px;">🛒</div>
            <div style="font-size:16px;font-weight:600;margin-bottom:8px;">淘宝/京东/拼多多</div>
            <div style="font-size:13px;color:#666;margin-bottom:20px;">通过平台链接领券下单，获得现金返利</div>
            <div style="background:#fff3e6;padding:15px;border-radius:10px;text-align:left;">
                <div style="font-size:13px;font-weight:500;color:#ff6b35;margin-bottom:8px;">使用步骤：</div>
                <div style="font-size:12px;color:#666;line-height:1.8;">
                    1. 复制淘宝/京东商品链接<br>
                    2. 粘贴到平台搜索框<br>
                    3. 领取优惠券后跳转购买<br>
                    4. 确认收货后获得返利
                </div>
            </div>
        </div>
    </div>
    
    <!-- 邀请好友页 -->
    <div id="invite-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('home-page')">←</div>
            <div class="detail-title">邀请好友</div>
        </div>
        <div class="invite-page-content">
            <div class="poster-preview">
                <div class="poster-title">外卖红包+生活副业</div>
                <div style="font-size:14px;opacity:0.9;">注册即送红包，下单更优惠</div>
                <div class="poster-qr">📱</div>
                <div style="font-size:12px;">扫码注册立得5元红包</div>
            </div>
            <button class="share-btn" onclick="showToast('请长按保存图片后分享')">生成分享海报</button>
            
            <div class="invite-record">
                <div class="invite-record-title">📊 邀请记录</div>
                <div class="record-item">
                    <span>成功邀请</span>
                    <span style="color:#ff6b35;font-weight:600;">12人</span>
                </div>
                <div class="record-item">
                    <span>累计奖励</span>
                    <span style="color:#ff6b35;font-weight:600;">¥60.00</span>
                </div>
                <div class="record-item">
                    <span>本月邀请</span>
                    <span style="color:#ff6b35;font-weight:600;">3人</span>
                </div>
            </div>
            
            <div style="margin-top:20px;cursor:pointer;" onclick="showPage('rank-page')">
                <div class="invite-record">
                    <div style="display:flex;justify-content:space-between;align-items:center;">
                        <span style="font-size:14px;font-weight:600;">🏆 邀请排行榜</span>
                        <span style="color:#999;font-size:12px;">查看全部 ›</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 邀请排行榜页 -->
    <div id="rank-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('invite-page')">←</div>
            <div class="detail-title">邀请排行榜</div>
        </div>
        <div class="rank-list">
            <div class="rank-item">
                <div class="rank-num top1">🥇</div>
                <div class="rank-avatar">👤</div>
                <div class="rank-name">王小明</div>
                <div class="rank-value">128人</div>
            </div>
            <div class="rank-item">
                <div class="rank-num top2">🥈</div>
                <div class="rank-avatar">👤</div>
                <div class="rank-name">李小红</div>
                <div class="rank-value">95人</div>
            </div>
            <div class="rank-item">
                <div class="rank-num top3">🥉</div>
                <div class="rank-avatar">👤</div>
                <div class="rank-name">张大力</div>
                <div class="rank-value">82人</div>
            </div>
            <div class="rank-item">
                <div class="rank-num">4</div>
                <div class="rank-avatar">👤</div>
                <div class="rank-name">陈美丽</div>
                <div class="rank-value">67人</div>
            </div>
            <div class="rank-item">
                <div class="rank-num">5</div>
                <div class="rank-avatar">👤</div>
                <div class="rank-name">刘帅哥</div>
                <div class="rank-value">45人</div>
            </div>
            <div class="rank-item">
                <div class="rank-num">6</div>
                <div class="rank-avatar">👤</div>
                <div class="rank-name">赵美女</div>
                <div class="rank-value">38人</div>
            </div>
        </div>
    </div>
    
    <!-- 提现页 -->
    <div id="withdraw-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('home-page')">←</div>
            <div class="detail-title">提现</div>
        </div>
        <div class="withdraw-card">
            <div class="withdraw-amount">
                <div class="withdraw-label">可提现金额</div>
                <div class="withdraw-value">¥128.50</div>
            </div>
            <div class="withdraw-input">
                <span style="font-size:20px;">¥</span>
                <input type="number" placeholder="请输入提现金额" value="128.50">
            </div>
            <div style="display:flex;justify-content:space-between;font-size:12px;color:#999;margin-bottom:20px;">
                <span>提现门槛：¥1.00</span>
                <span>提现到账：1-3个工作日</span>
            </div>
            <button class="withdraw-btn" onclick="showToast('提现申请已提交！')">立即提现</button>
        </div>
        
        <div class="invite-record" style="margin:15px;">
            <div class="invite-record-title">💳 提现记录</div>
            <div class="record-item">
                <div>
                    <div style="font-size:13px;">微信零钱</div>
                    <div style="font-size:11px;color:#999;">2024-01-15 14:30</div>
                </div>
                <div style="text-align:right;">
                    <div style="color:#333;font-weight:600;">¥50.00</div>
                    <div style="font-size:11px;color:#52c41a;">已到账</div>
                </div>
            </div>
            <div class="record-item">
                <div>
                    <div style="font-size:13px;">微信零钱</div>
                    <div style="font-size:11px;color:#999;">2024-01-10 09:15</div>
                </div>
                <div style="text-align:right;">
                    <div style="color:#333;font-weight:600;">¥30.00</div>
                    <div style="font-size:11px;color:#52c41a;">已到账</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 个人中心页 -->
    <div id="profile-page" class="page">
        <div class="profile-header">
            <div class="profile-info">
                <div class="avatar">👤</div>
                <div>
                    <div class="profile-name">张三</div>
                    <div class="profile-phone">138****8888</div>
                </div>
            </div>
            <div class="profile-stats">
                <div class="profile-stat">
                    <div class="profile-stat-num">¥386.20</div>
                    <div class="profile-stat-label">累计收益</div>
                </div>
                <div class="profile-stat">
                    <div class="profile-stat-num">12</div>
                    <div class="profile-stat-label">邀请人数</div>
                </div>
                <div class="profile-stat">
                    <div class="profile-stat-num">10</div>
                    <div class="profile-stat-label">连续签到</div>
                </div>
            </div>
        </div>
        
        <div class="profile-menu">
            <div class="menu-group">
                <div class="menu-item" onclick="showPage('profile-edit-page')">
                    <div class="menu-icon" style="background:#e6f7ff;">👤</div>
                    <div class="menu-text">个人信息</div>
                    <div class="menu-arrow">›</div>
                </div>
                <div class="menu-item" onclick="showPage('earnings-page')">
                    <div class="menu-icon" style="background:#fff3e6;">💰</div>
                    <div class="menu-text">收益概览</div>
                    <div class="menu-arrow">›</div>
                </div>
            </div>
            
            <div class="menu-group">
                <div class="menu-item" onclick="showPage('record-page')">
                    <div class="menu-icon" style="background:#f6ffed;">📋</div>
                    <div class="menu-text">红包使用记录</div>
                    <div class="menu-arrow">›</div>
                </div>
                <div class="menu-item" onclick="showPage('notification-page')">
                    <div class="menu-icon" style="background:#fff0f0;">🔔</div>
                    <div class="menu-text">消息通知</div>
                    <div class="menu-arrow">›</div>
                </div>
            </div>
            
            <div class="menu-group">
                <div class="menu-item" onclick="showToast('客服电话：400-888-8888')">
                    <div class="menu-icon" style="background:#f8f8f8;">📞</div>
                    <div class="menu-text">联系客服</div>
                    <div class="menu-arrow">›</div>
                </div>
                <div class="menu-item" onclick="showToast('当前版本：v1.0.0')">
                    <div class="menu-icon" style="background:#f8f8f8;">ℹ️</div>
                    <div class="menu-text">关于我们</div>
                    <div class="menu-arrow">›</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 个人信息页 -->
    <div id="profile-edit-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('profile-page')">←</div>
            <div class="detail-title">个人信息</div>
        </div>
        <div style="padding:15px;">
            <div class="menu-group">
                <div class="menu-item">
                    <div class="menu-icon" style="background:#e6f7ff;">👤</div>
                    <div class="menu-text">头像</div>
                    <span style="font-size:20px;margin-right:5px;">👤</span>
                </div>
                <div class="menu-item">
                    <div class="menu-icon" style="background:#fff3e6;">✏️</div>
                    <div class="menu-text">昵称</div>
                    <span style="color:#999;margin-right:5px;">张三</span>
                </div>
                <div class="menu-item">
                    <div class="menu-icon" style="background:#f6ffed;">📱</div>
                    <div class="menu-text">手机号</div>
                    <span style="color:#999;margin-right:5px;">138****8888</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 收益概览页 -->
    <div id="earnings-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('profile-page')">←</div>
            <div class="detail-title">收益概览</div>
        </div>
        <div style="padding:15px;">
            <div class="invite-record">
                <div class="invite-record-title">📊 收益统计</div>
                <div class="record-item">
                    <span>累计收益</span>
                    <span style="color:#ff6b35;font-weight:600;">¥386.20</span>
                </div>
                <div class="record-item">
                    <span>本月收益</span>
                    <span style="color:#ff6b35;font-weight:600;">¥58.50</span>
                </div>
                <div class="record-item">
                    <span>待到账</span>
                    <span style="color:#ff6b35;font-weight:600;">¥12.50</span>
                </div>
            </div>
            
            <div class="invite-record" style="margin-top:15px;">
                <div class="invite-record-title">💰 收益来源</div>
                <div class="record-item">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <span>🍔 外卖红包</span>
                    </div>
                    <span style="font-weight:600;">¥156.80</span>
                </div>
                <div class="record-item">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <span>🎬 电影票</span>
                    </div>
                    <span style="font-weight:600;">¥45.00</span>
                </div>
                <div class="record-item">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <span>👥 邀请好友</span>
                    </div>
                    <span style="font-weight:600;">¥60.00</span>
                </div>
                <div class="record-item">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <span>📅 签到奖励</span>
                    </div>
                    <span style="font-weight:600;">¥24.40</span>
                </div>
                <div class="record-item" style="border:none;">
                    <div style="display:flex;align-items:center;gap:8px;">
                        <span>🛒 电商返利</span>
                    </div>
                    <span style="font-weight:600;">¥100.00</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 红包使用记录页 -->
    <div id="record-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('profile-page')">←</div>
            <div class="detail-title">红包使用记录</div>
        </div>
        <div class="notification-list">
            <div class="notification-item">
                <div class="notification-header">
                    <span class="notification-tag">美团</span>
                    <span class="notification-time">2024-01-18</span>
                </div>
                <div class="notification-title">领取红包 ¥6</div>
                <div class="notification-desc">满25减6 · 已使用</div>
            </div>
            <div class="notification-item">
                <div class="notification-header">
                    <span class="notification-tag" style="background:#e6f7ff;color:#00b5ff;">饿了么</span>
                    <span class="notification-time">2024-01-16</span>
                </div>
                <div class="notification-title">领取红包 ¥5</div>
                <div class="notification-desc">满20减5 · 已使用</div>
            </div>
            <div class="notification-item">
                <div class="notification-header">
                    <span class="notification-tag">美团</span>
                    <span class="notification-time">2024-01-14</span>
                </div>
                <div class="notification-title">领取红包 ¥8</div>
                <div class="notification-desc">满35减8 · 已使用</div>
            </div>
            <div class="notification-item">
                <div class="notification-header">
                    <span class="notification-tag" style="background:#e6f7ff;color:#00b5ff;">饿了么</span>
                    <span class="notification-time">2024-01-12</span>
                </div>
                <div class="notification-title">领取红包 ¥5</div>
                <div class="notification-desc">满20减5 · 未使用（已过期）</div>
            </div>
        </div>
    </div>
    
    <!-- 消息通知页 -->
    <div id="notification-page" class="page">
        <div class="detail-header">
            <div class="back-btn" onclick="showPage('profile-page')">←</div>
            <div class="detail-title">消息通知</div>
        </div>
        <div class="notification-list">
            <div class="notification-item" onclick="showToast('已阅读')">
                <div class="notification-header">
                    <span class="notification-tag">系统</span>
                    <span class="notification-time">2024-01-18 10:30</span>
                </div>
                <div class="notification-title">恭喜！签到成功，获得0.3元奖励</div>
                <div class="notification-desc">连续签到第10天，明日继续可领0.3元</div>
            </div>
            <div class="notification-item" onclick="showToast('已阅读')">
                <div class="notification-header">
                    <span class="notification-tag">到账</span>
                    <span class="notification-time">2024-01-17 15:20</span>
                </div>
                <div class="notification-title">美团红包返利到账 ¥0.5</div>
                <div class="notification-desc">您于2024-01-16领取的红包已确认使用</div>
            </div>
            <div class="notification-item" onclick="showToast('已阅读')">
                <div class="notification-header">
                    <span class="notification-tag" style="background:#f6ffed;color:#52c41a;">邀请</span>
                    <span class="notification-time">2024-01-15 09:00</span>
                </div>
                <div class="notification-title">您的好友已注册成功</div>
                <div class="notification-desc">恭喜获得邀请奖励5元，已到账</div>
            </div>
            <div class="notification-item" onclick="showToast('已阅读')">
                <div class="notification-header">
                    <span class="notification-tag">活动</span>
                    <span class="notification-time">2024-01-10 12:00</span>
                </div>
                <div class="notification-title">新年活动：邀请好友双倍奖励</div>
                <div class="notification-desc">1月10日-31日，邀请好友双方各得10元</div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item active" onclick="showPage('home-page')">
            <span class="nav-icon">🏠</span>
            <span class="nav-label">首页</span>
        </div>
        <div class="nav-item" onclick="showPage('invite-page')">
            <span class="nav-icon">👥</span>
            <span class="nav-label">邀请</span>
        </div>
        <div class="nav-item" onclick="showPage('profile-page')">
            <span class="nav-icon">👤</span>
            <span class="nav-label">我的</span>
        </div>
    </div>
    
    <!-- Toast提示 -->
    <div class="toast" id="toast"></div>
    
    <script>
        let signedDays = [1,2,3,4,5,6,7,8,9,10];
        
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示目标页面
            const targetPage = document.getElementById(pageId);
            if (targetPage) {
                targetPage.classList.add('active', 'page-transition');
                targetPage.scrollTop = 0;
            }
            
            // 更新底部导航状态
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(item => item.classList.remove('active'));
            
            if (pageId === 'home-page') {
                navItems[0].classList.add('active');
            } else if (pageId === 'invite-page' || pageId === 'rank-page') {
                navItems[1].classList.add('active');
            } else if (pageId === 'profile-page' || pageId === 'profile-edit-page' || 
                       pageId === 'earnings-page' || pageId === 'record-page' || 
                       pageId === 'notification-page') {
                navItems[2].classList.add('active');
            }
        }
        
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('active');
            
            setTimeout(() => {
                toast.classList.remove('active');
            }, 2000);
        }
        
        function doCheckin() {
            const btn = document.getElementById('checkin-btn');
            if (btn.classList.contains('signed')) {
                showToast('今日已签到');
                return;
            }
            
            btn.classList.add('signed');
            btn.textContent = '已签到';
            showToast('签到成功！获得0.3元奖励');
            
            // 更新日历显示
            const calendarDays = document.querySelectorAll('.calendar-day:not(.header)');
            const today = 13;
            calendarDays.forEach(day => {
                if (day.textContent == today && !day.classList.contains('signed-day')) {
                    day.classList.add('signed-day');
                }
            });
        }
    </script>
</body>
</html>