编辑页面

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; -webkit-tap-highlight-color: transparent; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5; max-width: 414px; margin: 0 auto; min-height: 100vh; position: relative; overflow-x: hidden;
        }
        .page { display: none; min-height: 100vh; padding-bottom: 70px; background: #f5f5f5; animation: fadeIn 0.3s ease; }
        .page.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
        .home-header { display: none; }
        .hero-banner {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #2d1b4e 100%);
            border-radius: 0 0 24px 24px;
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .hero-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,107,107,0.15) 0%, transparent 50%);
            animation: heroGlow 8s ease-in-out infinite;
        }
        .hero-banner::after {
            content: '☯';
            position: absolute;
            font-size: 200px;
            opacity: 0.05;
            right: -30px;
            top: 50%;
            transform: translateY(-50%);
        }
        @keyframes heroGlow {
            0%, 100% { transform: translate(0, 0); }
            50% { transform: translate(10%, 10%); }
        }
        .hero-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
            position: relative;
            z-index: 1;
        }
        .hero-subtitle {
            font-size: 14px;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }
        .hero-tags {
            display: flex;
            gap: 12px;
            margin-top: 15px;
            position: relative;
            z-index: 1;
        }
        .hero-tag {
            padding: 6px 14px;
            background: rgba(255,107,107,0.3);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 20px;
            font-size: 12px;
        }
        .service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 20px; background: #fff; margin: -15px 15px 15px; border-radius: 12px; position: relative; z-index: 1; }
        .service-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.2s; }
        .service-item:active { transform: scale(0.95); }
        .service-icon { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .service-icon.company { background: linear-gradient(135deg, #667eea, #764ba2); }
        .service-icon.phone { background: linear-gradient(135deg, #f093fb, #f5576c); }
        .service-icon.destiny { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .service-icon.naming { background: linear-gradient(135deg, #43e97b, #38f9d7); }
        .service-label { font-size: 12px; color: #333; }
        .hot-section { padding: 15px; }
        .section-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
        .section-title::before { content: ''; width: 3px; height: 16px; background: #ff6b6b; border-radius: 2px; margin-right: 8px; }
        .more-link { font-size: 13px; color: #999; font-weight: normal; cursor: pointer; }
        .more-link::after { content: ' ›'; font-size: 16px; }
        .master-preview-list { display: flex; flex-direction: column; gap: 12px; }
        .master-preview-card { background: #fff; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; }
        .master-preview-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #ddd, #bbb); flex-shrink: 0; }
        .master-preview-info { flex: 1; }
        .master-preview-name { font-size: 14px; color: #333; font-weight: 600; margin-bottom: 4px; }
        .master-preview-tags { display: flex; gap: 4px; }
        .master-preview-tag { padding: 1px 6px; background: #fff5f5; color: #ff6b6b; border-radius: 3px; font-size: 10px; }
        .master-preview-meta { font-size: 11px; color: #999; margin-top: 3px; }
        .master-preview-price { font-size: 14px; color: #ff6b6b; font-weight: 600; }
        .hot-list { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 10px; }
        .hot-item { min-width: 120px; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .hot-item-img { width: 100%; height: 80px; background: linear-gradient(135deg, #ddd, #eee); border-radius: 8px; margin-bottom: 8px; }
        .hot-item-title { font-size: 13px; color: #333; margin-bottom: 4px; }
        .hot-item-price { font-size: 12px; color: #ff6b6b; }
        .tab-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 414px; background: #fff; display: flex; justify-content: space-around; padding: 8px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100; }
        .tab-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 5px 15px; }
        .tab-icon { font-size: 22px; }
        .tab-label { font-size: 11px; color: #999; }
        .tab-item.active .tab-label { color: #ff6b6b; }
        .page-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); padding: 35px 20px 15px; display: flex; align-items: center; color: #fff; }
        .back-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
        .page-title { flex: 1; text-align: center; font-size: 17px; font-weight: 500; margin-right: 30px; }
        .form-section { background: #fff; margin: 15px; border-radius: 12px; padding: 20px; }
        .form-item { margin-bottom: 20px; }
        .form-label { font-size: 14px; color: #333; margin-bottom: 8px; display: flex; align-items: center; }
        .form-label .required { color: #ff6b6b; margin-left: 4px; }
        .form-input { width: 100%; padding: 12px 15px; border: 1px solid #eee; border-radius: 8px; font-size: 14px; outline: none; transition: border-color 0.2s; }
        .form-input:focus { border-color: #ff6b6b; }
        .form-input::placeholder { color: #ccc; }
        .form-row { display: flex; gap: 12px; }
        .form-row .form-item { flex: 1; margin-bottom: 0; }
        .btn-primary { width: 100%; padding: 14px; background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff; border: none; border-radius: 25px; font-size: 16px; cursor: pointer; margin-top: 20px; }
        .btn-primary:active { opacity: 0.8; }
        .btn-secondary { background: #fff; color: #ff6b6b; border: 1px solid #ff6b6b; }
        .select-cards { display: flex; gap: 12px; }
        .select-card { flex: 1; padding: 20px; border: 2px solid #eee; border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.2s; }
        .select-card.selected { border-color: #ff6b6b; background: #fff5f5; }
        .select-card-icon { font-size: 30px; margin-bottom: 8px; }
        .select-card-title { font-size: 14px; color: #333; margin-bottom: 4px; }
        .select-card-desc { font-size: 12px; color: #999; }
        .result-card { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); margin: 15px; border-radius: 16px; padding: 25px; color: #fff; text-align: center; }
        .result-score { font-size: 60px; font-weight: 700; background: linear-gradient(135deg, #ffd700, #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; }
        .result-label { font-size: 16px; margin-bottom: 20px; color: rgba(255,255,255,0.9); }
        .result-tags { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
        .result-tag { padding: 6px 15px; background: rgba(255,255,255,0.15); border-radius: 20px; font-size: 12px; }
        .analysis-list { background: #fff; margin: 15px; border-radius: 12px; padding: 20px; }
        .analysis-item { padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
        .analysis-item:last-child { border-bottom: none; }
        .analysis-title { font-size: 15px; color: #333; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
        .analysis-title::before { content: ''; width: 4px; height: 4px; background: #ff6b6b; border-radius: 50%; }
        .analysis-desc { font-size: 13px; color: #666; line-height: 1.6; }
        .master-list { padding: 15px; }
        .master-card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; display: flex; gap: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .master-avatar { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #ddd, #bbb); flex-shrink: 0; }
        .master-info { flex: 1; }
        .master-name { font-size: 16px; color: #333; font-weight: 600; margin-bottom: 5px; }
        .master-tags { display: flex; gap: 6px; margin-bottom: 8px; }
        .master-tag { padding: 2px 8px; background: #f0f0f0; border-radius: 4px; font-size: 11px; color: #666; }
        .master-tag.expert { background: #fff5f5; color: #ff6b6b; }
        .master-meta { display: flex; gap: 15px; font-size: 12px; color: #999; }
        .master-price { font-size: 16px; color: #ff6b6b; font-weight: 600; }
        .master-price span { font-size: 12px; font-weight: normal; }
        .profile-header { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); padding: 50px 20px 30px; color: #fff; display: flex; align-items: center; gap: 20px; }
        .profile-avatar { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, #ffd700, #ff6b6b); display: flex; align-items: center; justify-content: center; font-size: 30px; }
        .profile-info { flex: 1; }
        .profile-name { font-size: 18px; font-weight: 600; margin-bottom: 5px; }
        .profile-level { display: inline-block; padding: 3px 10px; background: linear-gradient(135deg, #ffd700, #ff6b6b); border-radius: 10px; font-size: 11px; color: #fff; }
        .stat-item { text-align: center; }
        .stat-value { font-size: 18px; font-weight: 600; }
        .stat-label { font-size: 11px; opacity: 0.8; }
        .menu-section { background: #fff; margin: 15px; border-radius: 12px; overflow: hidden; }
        .menu-item { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .menu-item:last-child { border-bottom: none; }
        .menu-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; }
        .menu-icon.history { background: linear-gradient(135deg, #667eea, #764ba2); }
        .menu-icon.favorite { background: linear-gradient(135deg, #f093fb, #f5576c); }
        .menu-icon.order { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .menu-icon.coupon { background: linear-gradient(135deg, #43e97b, #38f9d7); }
        .menu-icon.share { background: linear-gradient(135deg, #fa709a, #fee140); }
        .menu-icon.settings { background: linear-gradient(135deg, #a8edea, #fed6e3); }
        .menu-icon.help { background: linear-gradient(135deg, #d299c2, #fef9d7); }
        .menu-text { flex: 1; font-size: 14px; color: #333; }
        .menu-arrow { color: #ccc; font-size: 14px; }
        .name-list { padding: 15px; }
        .name-card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .name-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .name-text { font-size: 22px; font-weight: 700; color: #333; }
        .name-score { padding: 5px 12px; background: linear-gradient(135deg, #ffd700, #ff6b6b); border-radius: 15px; font-size: 12px; color: #fff; }
        .name-info { display: flex; gap: 15px; flex-wrap: wrap; }
        .name-info-item { font-size: 12px; color: #666; }
        .name-info-item span { color: #333; font-weight: 500; }
        .name-actions { display: flex; gap: 10px; margin-top: 12px; }
        .name-btn { flex: 1; padding: 10px; border-radius: 20px; font-size: 13px; text-align: center; cursor: pointer; }
        .name-btn.detail { background: #fff5f5; color: #ff6b6b; border: 1px solid #ff6b6b; }
        .name-btn.collect { background: #fff; color: #666; border: 1px solid #ddd; }
        .name-btn.compare { background: #fff; color: #4facfe; border: 1px solid #4facfe; }
        .date-selector { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; }
        .date-item { min-width: 60px; padding: 10px; text-align: center; border-radius: 8px; background: #f5f5f5; cursor: pointer; }
        .date-item.selected { background: #ff6b6b; color: #fff; }
        .date-day { font-size: 12px; margin-bottom: 4px; }
        .date-num { font-size: 18px; font-weight: 600; }
        .time-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
        .time-slot { padding: 12px; text-align: center; border: 1px solid #eee; border-radius: 8px; font-size: 13px; cursor: pointer; }
        .time-slot.selected { border-color: #ff6b6b; background: #fff5f5; color: #ff6b6b; }
        .time-slot.disabled { color: #ccc; background: #f5f5f5; }
        .wuxing-chart { display: flex; justify-content: center; align-items: flex-end; gap: 15px; padding: 30px 20px; background: #fff; margin: 15px; border-radius: 12px; }
        .wuxing-bar { display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .wuxing-icon { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .wuxing-bar .bar { width: 30px; border-radius: 4px 4px 0 0; transition: height 0.5s ease; }
        .wuxing-bar .value { font-size: 12px; color: #666; }
        .bar.jin { background: #ffd700; }
        .bar.mu { background: #43e97b; }
        .bar.shui { background: #4facfe; }
        .bar.huo { background: #f5576c; }
        .bar.tu { background: #fa709a; }
        .wuxing-icon.jin { background: #fff8e1; }
        .wuxing-icon.mu { background: #e8f5e9; }
        .wuxing-icon.shui { background: #e3f2fd; }
        .wuxing-icon.huo { background: #ffebee; }
        .wuxing-icon.tu { background: #fce4ec; }
        .modal-content { width: 100%; max-width: 414px; background: #fff; border-radius: 16px 16px 0 0; padding: 20px; animation: slideUp 0.3s ease; }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .pay-methods { border-top: 1px solid #f0f0f0; padding-top: 20px; }
        .pay-method { display: flex; align-items: center; padding: 15px 0; cursor: pointer; }
        .pay-method-icon { width: 40px; height: 40px; border-radius: 8px; background: #07c160; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; }
        .pay-method-text { flex: 1; }
        .pay-method-name { font-size: 14px; color: #333; }
        .pay-method-desc { font-size: 12px; color: #999; }
        .pay-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ff6b6b; display: flex; align-items: center; justify-content: center; }
        .pay-radio.selected { background: #ff6b6b; }
        .pay-radio.selected::after { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%; }
        .pay-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #07c160, #06ad50); color: #fff; border: none; border-radius: 25px; font-size: 16px; margin-top: 20px; }
        .history-section { padding: 15px; }
        .history-card { background: #fff; border-radius: 12px; padding: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
        .history-icon { width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .history-info { flex: 1; }
        .history-title { font-size: 14px; color: #333; margin-bottom: 4px; }
        .history-date { font-size: 12px; color: #999; }
        .history-action { color: #ff6b6b; font-size: 13px; }
        .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.95); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 300; }
        .loading-overlay.active { display: flex; }
        .loading-spinner { width: 50px; height: 50px; border: 3px solid #f0f0f0; border-top-color: #ff6b6b; border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .loading-text { margin-top: 15px; font-size: 14px; color: #666; }
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.75); color: #fff; padding: 15px 25px; border-radius: 8px; font-size: 14px; z-index: 400; display: none; }
        .toast.active { display: block; animation: toastIn 0.3s ease; }
        @keyframes toastIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="page-home" class="page active">
        <div class="hero-banner">
            <div class="hero-title">命理测算</div>
            <div class="hero-subtitle">洞悉天机 · 趋吉避凶</div>
            <div class="hero-tags">
                <span class="hero-tag">八字精批</span>
                <span class="hero-tag">五行分析</span>
                <span class="hero-tag">运势解读</span>
            </div>
        </div>
        <div class="service-grid" style="margin-top: -20px;">
            <div class="service-item" onclick="showPage('company')">
                <div class="service-icon company">🏢</div>
                <span class="service-label">公司测名</span>
            </div>
            <div class="service-item" onclick="showPage('phone')">
                <div class="service-icon phone">📱</div>
                <span class="service-label">电话测试</span>
            </div>
            <div class="service-item" onclick="showPage('destiny')">
                <div class="service-icon destiny">🔮</div>
                <span class="service-label">命理测算</span>
            </div>
            <div class="service-item" onclick="showPage('naming')">
                <div class="service-icon naming">✍️</div>
                <span class="service-label">起名字</span>
            </div>
        </div>
        <div class="hot-section">
            <div class="section-title">热门推荐<span class="more-link" onclick="showToast('更多推荐')">查看更多</span></div>
            <div class="hot-list">
                <div class="hot-item">
                    <div class="hot-item-img"></div>
                    <div class="hot-item-title">八字精批</div>
                    <div class="hot-item-price">¥99起</div>
                </div>
                <div class="hot-item">
                    <div class="hot-item-img"></div>
                    <div class="hot-item-title">姓名解析</div>
                    <div class="hot-item-price">¥29起</div>
                </div>
                <div class="hot-item">
                    <div class="hot-item-img"></div>
                    <div class="hot-item-title">姻缘测算</div>
                    <div class="hot-item-price">¥66起</div>
                </div>
                <div class="hot-item">
                    <div class="hot-item-img"></div>
                    <div class="hot-item-title">事业财运</div>
                    <div class="hot-item-price">¥88起</div>
                </div>
            </div>
        </div>
        <div class="hot-section">
            <div class="section-title">师傅推荐<span class="more-link" onclick="showPage('reserve')">查看更多</span></div>
            <div class="master-preview-list">
                <div class="master-preview-card" onclick="showPage('reserve-detail')">
                    <div class="master-preview-avatar"></div>
                    <div class="master-preview-info">
                        <div class="master-preview-name">李玄清</div>
                        <div class="master-preview-tags">
                            <span class="master-preview-tag">八字</span>
                            <span class="master-preview-tag">风水</span>
                        </div>
                        <div class="master-preview-meta">⭐4.9 · 已服务1286人</div>
                    </div>
                    <div class="master-preview-price">¥199</div>
                </div>
                <div class="master-preview-card">
                    <div class="master-preview-avatar"></div>
                    <div class="master-preview-info">
                        <div class="master-preview-name">张天师</div>
                        <div class="master-preview-tags">
                            <span class="master-preview-tag">六爻</span>
                            <span class="master-preview-tag">梅花</span>
                        </div>
                        <div class="master-preview-meta">⭐4.8 · 已服务968人</div>
                    </div>
                    <div class="master-preview-price">¥168</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 公司测名 -->
    <div id="page-company" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div class="page-title">公司测名</div>
        </div>
        <div class="form-section">
            <div class="form-item">
                <div class="form-label">公司名称 <span class="required">*</span></div>
                <input type="text" class="form-input" placeholder="请输入公司全称" id="company-name">
            </div>
            <div class="form-item">
                <div class="form-label">测算方式</div>
                <div class="select-cards">
                    <div class="select-card selected" onclick="selectCard(this)">
                        <div class="select-card-icon">🤖</div>
                        <div class="select-card-title">AI智能测算</div>
                        <div class="select-card-desc">快速精准</div>
                    </div>
                    <div class="select-card" onclick="selectCard(this)">
                        <div class="select-card-icon">👨‍💼</div>
                        <div class="select-card-title">人工预约</div>
                        <div class="select-card-desc">专家解读</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 0 15px;">
            <button class="btn-primary" onclick="startCalculate('company')">开始测算</button>
        </div>
    </div>

    <!-- 公司测名结果 -->
    <div id="page-company-result" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div class="page-title">测算结果</div>
        </div>
        <div class="result-card">
            <div class="result-score">98</div>
            <div class="result-label">大吉</div>
            <div class="result-tags">
                <div class="result-tag">五行属金</div>
                <div class="result-tag">财运旺盛</div>
                <div class="result-tag">利于发展</div>
            </div>
        </div>
        <div class="analysis-list">
            <div class="analysis-item">
                <div class="analysis-title">五行分析</div>
                <div class="analysis-desc">公司名称五行属金，金主义，利于团队凝聚和执行力，能为企业发展带来坚定基础。</div>
            </div>
            <div class="analysis-item">
                <div class="analysis-title">数理分析</div>
                <div class="analysis-desc">公司名称数理为24画，三才配置极佳，具有领导能力，能带来成功与繁荣。</div>
            </div>
            <div class="analysis-item">
                <div class="analysis-title">吉祥指数</div>
                <div class="analysis-desc">综合评分98分，五行、数理、卦象均为上吉，是非常理想的公司命名。</div>
            </div>
        </div>
        <div style="padding: 0 15px; display: flex; gap: 12px;">
            <button class="btn-primary" style="flex: 1;" onclick="showToast('已分享到剪贴板')">分享结果</button>
            <button class="btn-primary btn-secondary" style="flex: 1;" onclick="showPage('home')">返回首页</button>
        </div>
    </div>

    <!-- 电话号码测试 -->
    <div id="page-phone" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div class="page-title">电话号码测试</div>
        </div>
        <div class="form-section">
            <div class="form-item">
                <div class="form-label">手机号码 <span class="required">*</span></div>
                <input type="tel" class="form-input" placeholder="请输入11位手机号码" id="phone-num" maxlength="11">
            </div>
            <div class="form-item">
                <div class="form-label">测算方式</div>
                <div class="select-cards">
                    <div class="select-card selected" onclick="selectCard(this)">
                        <div class="select-card-icon">🤖</div>
                        <div class="select-card-title">AI智能测算</div>
                        <div class="select-card-desc">快速精准</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 0 15px;">
            <button class="btn-primary" onclick="startCalculate('phone')">开始测算</button>
        </div>
    </div>

    <!-- 电话号码测试结果 -->
    <div id="page-phone-result" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div class="page-title">号码分析结果</div>
        </div>
        <div class="result-card">
            <div class="result-score">85</div>
            <div class="result-label">吉</div>
            <div class="result-tags">
                <div class="result-tag">事业助力</div>
                <div class="result-tag">财运平稳</div>
                <div class="result-tag">人缘不错</div>
            </div>
        </div>
        <div class="analysis-list">
            <div class="analysis-item">
                <div class="analysis-title">数理分析</div>
                <div class="analysis-desc">该号码数理为85，代表勤勉奋斗、脚踏实地之人，适合事业发展。</div>
            </div>
            <div class="analysis-item">
                <div class="analysis-title">组合分析</div>
                <div class="analysis-desc">号码组合中含有多组吉利数字，能带来贵人运，有助于人际关系的拓展。</div>
            </div>
            <div class="analysis-item">
                <div class="analysis-title">运势影响</div>
                <div class="analysis-desc">此号码对事业和财运有积极影响，但需注意感情方面的沟通与表达。</div>
            </div>
        </div>
        <div style="padding: 0 15px;">
            <button class="btn-primary" onclick="showPage('home')">返回首页</button>
        </div>
    </div>

    <!-- 命理测算 -->
    <div id="page-destiny" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div class="page-title">命理测算</div>
        </div>
        <div class="form-section">
            <div class="form-item">
                <div class="form-label">出生日期 <span class="required">*</span></div>
                <div class="form-row">
                    <div class="form-item">
                        <input type="date" class="form-input" id="birth-date">
                    </div>
                    <div class="form-item">
                        <input type="time" class="form-input" id="birth-time" placeholder="时辰">
                    </div>
                </div>
            </div>
            <div class="form-item">
                <div class="form-label">性别 <span class="required">*</span></div>
                <div class="select-cards">
                    <div class="select-card selected" onclick="selectCard(this)">
                        <div class="select-card-icon">👨</div>
                        <div class="select-card-title">男</div>
                    </div>
                    <div class="select-card" onclick="selectCard(this)">
                        <div class="select-card-icon">👩</div>
                        <div class="select-card-title">女</div>
                    </div>
                </div>
            </div>
            <div class="form-item">
                <div class="form-label">出生地</div>
                <input type="text" class="form-input" placeholder="请输入出生地区">
            </div>
            <div class="form-item">
                <div class="form-label">历法</div>
                <div class="select-cards">
                    <div class="select-card selected" onclick="selectCard(this)">
                        <div class="select-card-title">公历</div>
                    </div>
                    <div class="select-card" onclick="selectCard(this)">
                        <div class="select-card-title">农历</div>
                    </div>
                </div>
            </div>
            <div class="form-item">
                <div class="form-label">测算方式</div>
                <div class="select-cards">
                    <div class="select-card selected" onclick="selectCard(this)">
                        <div class="select-card-icon">🤖</div>
                        <div class="select-card-title">AI智能测算</div>
                        <div class="select-card-desc">¥66</div>
                    </div>
                    <div class="select-card" onclick="selectCard(this)">
                        <div class="select-card-icon">👨‍💼</div>
                        <div class="select-card-title">人工预约</div>
                        <div class="select-card-desc">¥199起</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 0 15px;">
            <button class="btn-primary" onclick="startCalculate('destiny')">开始测算</button>
        </div>
    </div>

    <!-- 命理测算结果 -->
    <div id="page-destiny-result" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div class="page-title">命理报告</div>
        </div>
        <div class="result-card" style="padding: 20px;">
            <div style="font-size: 14px; opacity: 0.8; margin-bottom: 10px;">您的八字</div>
            <div style="font-size: 28px; font-weight: 700; margin-bottom: 15px;">壬子 庚戌 乙卯 丁丑</div>
            <div style="font-size: 14px; opacity: 0.8;">日主身强，五行缺火</div>
        </div>
        <div class="wuxing-chart">
            <div class="wuxing-bar">
                <div class="wuxing-icon jin">金</div>
                <div class="bar jin" style="height: 60px;"></div>
                <div class="value">20%</div>
            </div>
            <div class="wuxing-bar">
                <div class="wuxing-icon mu">木</div>
                <div class="bar mu" style="height: 40px;"></div>
                <div class="value">15%</div>
            </div>
            <div class="wuxing-bar">
                <div class="wuxing-icon shui">水</div>
                <div class="bar shui" style="height: 100px;"></div>
                <div class="value">35%</div>
            </div>
            <div class="wuxing-bar">
                <div class="wuxing-icon huo">火</div>
                <div class="bar huo" style="height: 20px;"></div>
                <div class="value">10%</div>
            </div>
            <div class="wuxing-bar">
                <div class="wuxing-icon tu">土</div>
                <div class="bar tu" style="height: 50px;"></div>
                <div class="value">20%</div>
            </div>
        </div>
        <div class="analysis-list">
            <div class="analysis-item">
                <div class="analysis-title">事业运势</div>
                <div class="analysis-desc">今年事业运势较好，有升职加薪的机会。适合从事水属性或金属性的行业。</div>
            </div>
            <div class="analysis-item">
                <div class="analysis-title">感情运势</div>
                <div class="analysis-desc">感情上需多沟通，单身者今年桃花运不错，已婚者需注意第三者干扰。</div>
            </div>
            <div class="analysis-item">
                <div class="analysis-title">财运分析</div>
                <div class="analysis-desc">财运平稳，适合稳健投资。正财运势佳，偏财需谨慎。</div>
            </div>
        </div>
        <div style="padding: 0 15px;">
            <button class="btn-primary" onclick="showPage('home')">返回首页</button>
        </div>
    </div>

    <!-- 起名字 -->
    <div id="page-naming" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div class="page-title">智能起名</div>
        </div>
        <div class="form-section">
            <div class="form-item">
                <div class="form-label">起名类型</div>
                <div class="select-cards">
                    <div class="select-card selected" onclick="selectCard(this)">
                        <div class="select-card-icon">👤</div>
                        <div class="select-card-title">个人起名</div>
                    </div>
                    <div class="select-card" onclick="selectCard(this)">
                        <div class="select-card-icon">🏢</div>
                        <div class="select-card-title">公司起名</div>
                    </div>
                </div>
            </div>
            <div class="form-item">
                <div class="form-label">姓氏 <span class="required">*</span></div>
                <input type="text" class="form-input" placeholder="请输入姓氏">
            </div>
            <div class="form-item">
                <div class="form-label">出生日期</div>
                <input type="date" class="form-input">
            </div>
            <div class="form-item">
                <div class="form-label">性别</div>
                <div class="select-cards">
                    <div class="select-card selected" onclick="selectCard(this)">
                        <div class="select-card-title">男</div>
                    </div>
                    <div class="select-card" onclick="selectCard(this)">
                        <div class="select-card-title">女</div>
                    </div>
                </div>
            </div>
            <div class="form-item">
                <div class="form-label">起名偏好</div>
                <div class="select-cards">
                    <div class="select-card selected" onclick="selectCard(this)">
                        <div class="select-card-icon">🤖</div>
                        <div class="select-card-title">AI智能起名</div>
                        <div class="select-card-desc">¥29</div>
                    </div>
                </div>
            </div>
        </div>
        <div style="padding: 0 15px;">
            <button class="btn-primary" onclick="startCalculate('naming')">开始起名</button>
        </div>
    </div>

    <!-- 起名结果 -->
    <div id="page-naming-result" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div class="page-title">推荐名字</div>
        </div>
        <div class="name-list">
            <div class="name-card">
                <div class="name-header">
                    <div class="name-text">浩然</div>
                    <div class="name-score">98分</div>
                </div>
                <div class="name-info">
                    <div class="name-info-item">五行：<span>水</span></div>
                    <div class="name-info-item">笔画：<span>11画</span></div>
                    <div class="name-info-item">音律：<span>平声-阳平</span></div>
                </div>
                <div class="name-actions">
                    <div class="name-btn detail" onclick="showPage('naming-detail')">查看详情</div>
                    <div class="name-btn collect" onclick="collectName(this)">收藏</div>
                    <div class="name-btn compare">对比</div>
                </div>
            </div>
            <div class="name-card">
                <div class="name-header">
                    <div class="name-text">子轩</div>
                    <div class="name-score">95分</div>
                </div>
                <div class="name-info">
                    <div class="name-info-item">五行：<span>木</span></div>
                    <div class="name-info-item">笔画：<span>9画</span></div>
                    <div class="name-info-item">音律：<span>上声-阴平</span></div>
                </div>
                <div class="name-actions">
                    <div class="name-btn detail" onclick="showPage('naming-detail')">查看详情</div>
                    <div class="name-btn collect" onclick="collectName(this)">收藏</div>
                    <div class="name-btn compare">对比</div>
                </div>
            </div>
            <div class="name-card">
                <div class="name-header">
                    <div class="name-text">宇轩</div>
                    <div class="name-score">92分</div>
                </div>
                <div class="name-info">
                    <div class="name-info-item">五行：<span>土</span></div>
                    <div class="name-info-item">笔画：<span>11画</span></div>
                    <div class="name-info-item">音律：<span>上声-阴平</span></div>
                </div>
                <div class="name-actions">
                    <div class="name-btn detail" onclick="showPage('naming-detail')">查看详情</div>
                    <div class="name-btn collect" onclick="collectName(this)">收藏</div>
                    <div class="name-btn compare">对比</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 名字详情 -->
    <div id="page-naming-detail" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('naming-result')">←</div>
            <div class="page-title">名字解析</div>
        </div>
        <div class="result-card" style="padding: 30px;">
            <div style="font-size: 40px; font-weight: 700; margin-bottom: 10px;">浩然</div>
            <div style="font-size: 18px; color: rgba(255,255,255,0.9);">综合评分：98分</div>
        </div>
        <div class="analysis-list">
            <div class="analysis-item">
                <div class="analysis-title">字义解析</div>
                <div class="analysis-desc">浩：盛大、众多之意，寓意胸怀宽广、志向远大；然：如此、这般之意，寓意从容淡定、处之泰然。</div>
            </div>
            <div class="analysis-item">
                <div class="analysis-title">五行属性</div>
                <div class="analysis-desc">浩然二字五行均属水，水主智慧、灵动，寓意聪明伶俐、思维敏捷，适合喜水之人使用。</div>
            </div>
            <div class="analysis-item">
                <div class="analysis-title">音韵分析</div>
                <div class="analysis-desc">音律为平声-阳平，读来朗朗上口，声调搭配协调，给人以稳重而不失活力的感觉。</div>
            </div>
            <div class="analysis-item">
                <div class="analysis-title">笔画数理</div>
                <div class="analysis-desc">总笔画11画，三才配置为水-水-水，寓意聪明智慧、财运亨通，对事业发展极为有利。</div>
            </div>
        </div>
        <div style="padding: 0 15px;">
            <button class="btn-primary" onclick="showPage('home')">返回首页</button>
        </div>
    </div>

    <!-- 人工预约 -->
    <div id="page-reserve" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('home')">←</div>
            <div class="page-title">人工预约</div>
        </div>
        <div class="master-list">
            <div class="section-title">选择师傅</div>
            <div class="master-card" onclick="showPage('reserve-detail')">
                <div class="master-avatar"></div>
                <div class="master-info">
                    <div class="master-name">李玄清</div>
                    <div class="master-tags">
                        <span class="master-tag expert">八字</span>
                        <span class="master-tag">风水</span>
                        <span class="master-tag">取名</span>
                    </div>
                    <div class="master-meta">
                        <span>⭐ 4.9</span>
                        <span>已服务 1286 人</span>
                    </div>
                </div>
                <div class="master-price">¥199<span>/次</span></div>
            </div>
            <div class="master-card">
                <div class="master-avatar"></div>
                <div class="master-info">
                    <div class="master-name">张天师</div>
                    <div class="master-tags">
                        <span class="master-tag expert">六爻</span>
                        <span class="master-tag">梅花</span>
                    </div>
                    <div class="master-meta">
                        <span>⭐ 4.8</span>
                        <span>已服务 968 人</span>
                    </div>
                </div>
                <div class="master-price">¥168<span>/次</span></div>
            </div>
            <div class="master-card">
                <div class="master-avatar"></div>
                <div class="master-info">
                    <div class="master-name">王明道</div>
                    <div class="master-tags">
                        <span class="master-tag expert">奇门</span>
                        <span class="master-tag">大六壬</span>
                    </div>
                    <div class="master-meta">
                        <span>⭐ 4.9</span>
                        <span>已服务 1532 人</span>
                    </div>
                </div>
                <div class="master-price">¥299<span>/次</span></div>
            </div>
        </div>
    </div>

    <!-- 师傅详情 -->
    <div id="page-reserve-detail" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('reserve')">←</div>
            <div class="page-title">师傅详情</div>
        </div>
        <div style="padding: 20px; background: #fff;">
            <div style="display: flex; gap: 15px; margin-bottom: 20px;">
                <div class="master-avatar" style="width: 80px; height: 80px;"></div>
                <div class="master-info">
                    <div class="master-name" style="font-size: 20px;">李玄清</div>
                    <div class="master-tags" style="margin: 10px 0;">
                        <span class="master-tag expert">八字</span>
                        <span class="master-tag">风水</span>
                        <span class="master-tag">取名</span>
                    </div>
                    <div class="master-meta">
                        <span>⭐ 4.9</span>
                        <span>已服务 1286 人</span>
                    </div>
                </div>
            </div>
            <div class="analysis-list" style="margin: 0;">
                <div class="analysis-item">
                    <div class="analysis-title">个人简介</div>
                    <div class="analysis-desc">自幼研习易经八卦，精通八字命理、风水堪舆，从业十余年，为数千位缘主排忧解难。</div>
                </div>
                <div class="analysis-item">
                    <div class="analysis-title">擅长领域</div>
                    <div class="analysis-desc">八字精批、命盘合婚、风水布局、公司起名、个人取名等。</div>
                </div>
            </div>
        </div>
        <div class="form-section">
            <div class="section-title" style="margin-bottom: 15px;">选择日期</div>
            <div class="date-selector">
                <div class="date-item" onclick="selectDate(this)">
                    <div class="date-day">今天</div>
                    <div class="date-num">13</div>
                </div>
                <div class="date-item selected" onclick="selectDate(this)">
                    <div class="date-day">明天</div>
                    <div class="date-num">14</div>
                </div>
                <div class="date-item" onclick="selectDate(this)">
                    <div class="date-day">周五</div>
                    <div class="date-num">15</div>
                </div>
                <div class="date-item" onclick="selectDate(this)">
                    <div class="date-day">周六</div>
                    <div class="date-num">16</div>
                </div>
                <div class="date-item" onclick="selectDate(this)">
                    <div class="date-day">周日</div>
                    <div class="date-num">17</div>
                </div>
            </div>
            <div class="section-title" style="margin-bottom: 15px; margin-top: 15px;">选择时间</div>
            <div class="time-slots">
                <div class="time-slot" onclick="selectTime(this)">09:00</div>
                <div class="time-slot selected" onclick="selectTime(this)">10:00</div>
                <div class="time-slot" onclick="selectTime(this)">11:00</div>
                <div class="time-slot" onclick="selectTime(this)">14:00</div>
                <div class="time-slot" onclick="selectTime(this)">15:00</div>
                <div class="time-slot disabled">16:00</div>
            </div>
        </div>
        <div style="padding: 0 15px;">
            <button class="btn-primary" onclick="showPage('reserve-confirm')">确认预约</button>
        </div>
    </div>

    <!-- 预约确认 -->
    <div id="page-reserve-confirm" class="page">
        <div class="page-header">
            <div class="back-btn" onclick="showPage('reserve-detail')">←</div>
            <div class="page-title">确认订单</div>
        </div>
        <div class="form-section">
            <div style="display: flex; gap: 15px; align-items: center; margin-bottom: 20px;">
                <div class="master-avatar" style="width: 50px; height: 50px;"></div>
                <div>
                    <div style="font-size: 16px; font-weight: 600;">李玄清</div>
                    <div style="font-size: 12px; color: #999;">八字精批</div>
                </div>
            </div>
            <div class="form-item">
                <div class="form-label">预约时间</div>
                <div style="padding: 12px; background: #f5f5f5; border-radius: 8px; font-size: 14px;">2026-05-14 10:00</div>
            </div>
            <div class="form-item">
                <div class="form-label">测算类型</div>
                <select class="form-input" style="padding: 12px;">
                    <option>八字精批</option>
                    <option>命盘合婚</option>
                    <option>风水布局</option>
                </select>
            </div>
            <div class="form-item">
                <div class="form-label">补充信息</div>
                <textarea class="form-input" rows="3" placeholder="请描述您的测算需求...">