编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵活用工平台</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}
        .phone{width:375px;height:812px;background:#1a1a2e;border-radius:50px;padding:12px;box-shadow:0 25px 80px rgba(0,0,0,0.5);position:relative}
        .screen{width:100%;height:100%;background:#f5f5f7;border-radius:40px;overflow:hidden;position:relative}
        .notch{width:150px;height:30px;background:#000;border-radius:20px;position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:100}
        .status-bar{height:44px;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font-size:14px;font-weight:600}
        .page{display:none;flex-direction:column;height:calc(100% - 44px);position:relative}
        .page.active{display:flex}
        .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
        .scroll::-webkit-scrollbar{display:none}
        
        /* 登录页 */
        .login-bg{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:60px 30px 40px;color:#fff;flex:1;display:flex;flex-direction:column}
        .login-logo{font-size:48px;margin-bottom:16px}
        .login-title{font-size:28px;font-weight:700;margin-bottom:8px}
        .login-sub{opacity:0.9;font-size:14px;margin-bottom:40px}
        .login-form{flex:1}
        .form-group{margin-bottom:16px}
        .form-group label{font-size:13px;color:rgba(255,255,255,0.8);margin-bottom:8px;display:block}
        .form-input{width:100%;padding:14px 16px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:12px;color:#fff;font-size:16px;outline:none}
        .form-input::placeholder{color:rgba(255,255,255,0.5)}
        .code-row{display:flex;gap:10px}
        .code-row input{flex:1}
        .code-btn{padding:14px 16px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);border-radius:12px;color:#fff;cursor:pointer;font-size:14px}
        .login-btn{width:100%;padding:16px;background:#fff;color:#667eea;border:none;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer;margin-top:20px}
        .login-btn:active{transform:scale(0.98)}
        .login-agree{font-size:12px;color:rgba(255,255,255,0.7);text-align:center;margin-top:20px}
        .login-agree a{color:#fff;text-decoration:underline}
        
        /* 身份切换 */
        .role-switch{margin-bottom:30px}
        .role-tabs{display:flex;background:rgba(255,255,255,0.1);border-radius:25px;padding:4px;gap:4px}
        .role-tab{flex:1;padding:10px 8px;text-align:center;border-radius:20px;font-size:13px;color:rgba(255,255,255,0.8);cursor:pointer;transition:all 0.3s;border:none;background:transparent}
        .role-tab.active{background:#fff;color:#667eea;font-weight:600}
        .role-icon{font-size:18px;margin-bottom:4px;display:block}
        .role-name{font-size:12px}
        
        /* 首页 */
        .home-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:50px 20px 30px;color:#fff}
        .home-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
        .user-info{display:flex;align-items:center;gap:12px}
        .avatar{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:24px}
        .user-name{font-size:18px;font-weight:600}
        .user-tag{font-size:12px;opacity:0.8;background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:10px;margin-top:4px;display:inline-block}
        .msg-btn{width:40px;height:40px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;position:relative}
        .msg-badge{position:absolute;top:-2px;right:-2px;width:18px;height:18px;background:#ff4757;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center}
        .stats-card{background:rgba(255,255,255,0.15);border-radius:16px;padding:16px;display:flex;justify-content:space-around}
        .stat-item{text-align:center}
        .stat-val{font-size:22px;font-weight:700}
        .stat-label{font-size:12px;opacity:0.8;margin-top:4px}
        .stat-item:not(:last-child){border-right:1px solid rgba(255,255,255,0.2);padding-right:20px}
        
        /* 功能入口 */
        .quick-section{padding:20px}
        .section-title{font-size:16px;font-weight:600;color:#333;margin-bottom:14px}
        .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
        .quick-item{background:#fff;border-radius:12px;padding:14px 8px;text-align:center;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
        .quick-item:active{transform:scale(0.95);background:#f0f0f0}
        .quick-icon{font-size:26px;margin-bottom:6px}
        .quick-name{font-size:12px;color:#333}
        
        /* 订单列表 */
        .order-section{padding:0 20px 20px}
        .tab-row{display:flex;gap:8px;margin-bottom:14px}
        .tab{ padding:8px 16px;background:#fff;border-radius:20px;font-size:13px;color:#666;cursor:pointer;border:none}
        .tab.active{background:#667eea;color:#fff}
        .order-card{background:#fff;border-radius:16px;padding:16px;margin-bottom:12px;cursor:pointer}
        .order-card:active{background:#f8f8fa}
        .order-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
        .order-title{font-size:15px;font-weight:600;color:#333}
        .order-status{padding:4px 10px;border-radius:12px;font-size:12px}
        .status-new{background:#fff3e0;color:#ff9800}
        .status-ing{background:#e3f2fd;color:#2196f3}
        .status-done{background:#e8f5e9;color:#4caf50}
        .status-pay{background:#fce4ec;color:#e91e63}
        .order-middle{display:flex;gap:16px;font-size:13px;color:#666;margin-bottom:10px}
        .order-bottom{display:flex;justify-content:space-between;align-items:center}
        .order-price{font-size:18px;font-weight:700;color:#f12711}
        .order-unit{font-size:12px;color:#999}
        .order-btn{padding:8px 16px;background:#667eea;color:#fff;border-radius:20px;font-size:13px;border:none;cursor:pointer}
        .order-btn:active{opacity:0.8}
        
        /* 详情页通用 */
        .detail-header{background:#fff;padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #eee}
        .back-btn{width:32px;height:32px;background:#f5f5f7;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}
        .detail-title{font-size:16px;font-weight:600;flex:1}
        
        /* 接单中心页 */
        .filter-bar{display:flex;gap:8px;padding:12px 20px;background:#fff;overflow-x:auto}
        .filter-btn{padding:8px 14px;background:#f5f5f7;border-radius:16px;font-size:13px;color:#666;white-space:nowrap;border:none;cursor:pointer}
        .filter-btn.active{background:#667eea;color:#fff}
        .job-card{background:#fff;margin:12px 20px;border-radius:16px;padding:16px}
        .job-card:active{background:#f8f8fa}
        .job-header{display:flex;justify-content:space-between;margin-bottom:10px}
        .job-title{font-size:15px;font-weight:600}
        .job-salary{color:#f12711;font-weight:700;font-size:18px}
        .job-tags{display:flex;gap:6px;margin-bottom:10px}
        .job-tag{padding:4px 8px;background:#f0f0f5;border-radius:6px;font-size:11px;color:#666}
        .job-info{display:flex;gap:16px;font-size:13px;color:#999}
        .job-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #f0f0f0}
        .employer{display:flex;align-items:center;gap:8px}
        .emp-avatar{width:28px;height:28px;background:#ddd;border-radius:50%}
        .emp-name{font-size:13px;color:#666}
        .take-btn{padding:8px 20px;background:#667eea;color:#fff;border-radius:20px;border:none;font-size:13px;cursor:pointer}
        
        /* 订单详情页 */
        .order-detail-content{padding:20px}
        .detail-card{background:#fff;border-radius:16px;padding:16px;margin-bottom:16px}
        .detail-card-title{font-size:14px;color:#999;margin-bottom:8px}
        .detail-card-value{font-size:16px;color:#333;font-weight:500}
        .address-row{display:flex;gap:10px;align-items:flex-start}
        .address-icon{font-size:20px}
        .address-text{font-size:14px;color:#333;line-height:1.5}
        .action-btns{display:flex;gap:12px;margin-top:16px}
        .action-btn{flex:1;padding:14px;border-radius:12px;border:none;font-size:15px;font-weight:500;cursor:pointer}
        .btn-primary{background:#667eea;color:#fff}
        .btn-secondary{background:#f5f5f5;color:#666}
        
        /* 收入页 */
        .balance-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);margin:20px;border-radius:20px;padding:24px;color:#fff}
        .balance-label{font-size:14px;opacity:0.9;margin-bottom:8px}
        .balance-amount{font-size:36px;font-weight:700;margin-bottom:20px}
        .balance-amount small{font-size:16px}
        .balance-btns{display:flex;gap:12px}
        .balance-btn{flex:1;padding:12px;background:rgba(255,255,255,0.2);border-radius:12px;text-align:center;border:none;color:#fff;cursor:pointer}
        .balance-btn:active{background:rgba(255,255,255,0.3)}
        .income-list{padding:0 20px 20px}
        .income-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #f0f0f0}
        .income-left{display:flex;flex-direction:column;gap:4px}
        .income-title{font-size:14px;color:#333}
        .income-time{font-size:12px;color:#999}
        .income-amount{font-size:16px;color:#333;font-weight:500}
        .income-plus{color:#4caf50}
        .income-minus{color:#f12711}
        
        /* 消息页 */
        .msg-item{display:flex;gap:12px;padding:16px 20px;background:#fff;border-bottom:1px solid #f0f0f0;cursor:pointer}
        .msg-item:active{background:#f8f8fa}
        .msg-item.unread{background:#f0f4ff}
        .msg-avatar{width:48px;height:48px;background:#667eea;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff}
        .msg-content{flex:1}
        .msg-sender{font-size:15px;font-weight:600;color:#333;margin-bottom:4px}
        .msg-text{font-size:13px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .msg-meta{text-align:right;flex-shrink:0}
        .msg-time{font-size:12px;color:#999;margin-bottom:4px}
        .msg-dot{width:8px;height:8px;background:#ff4757;border-radius:50%;display:inline-block}
        
        /* 个人中心页 */
        .profile-header{background:#fff;padding:20px;display:flex;gap:16px;align-items:center}
        .profile-avatar{width:64px;height:64px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px}
        .profile-info{flex:1}
        .profile-name{font-size:18px;font-weight:600;color:#333;margin-bottom:6px}
        .profile-tags{display:flex;gap:6px}
        .profile-tag{padding:4px 8px;background:#e8f4ff;border-radius:6px;font-size:11px;color:#667eea}
        .vip-tag{background:linear-gradient(135deg,#f5af19,#f12711);color:#fff}
        .menu-section{padding:20px}
        .menu-group{background:#fff;border-radius:16px;overflow:hidden;margin-bottom:12px}
        .menu-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;cursor:pointer}
        .menu-item:last-child{border-bottom:none}
        .menu-item:active{background:#f8f8fa}
        .menu-left{display:flex;align-items:center;gap:10px}
        .menu-icon{font-size:20px}
        .menu-name{font-size:15px;color:#333}
        .menu-arrow{color:#ccc;font-size:18px}
        
        /* 模态框 */
        .modal{position:absolute;inset:0;background:rgba(0,0,0,0.5);display:none;justify-content:center;align-items:flex-end;z-index:200}
        .modal.active{display:flex}
        .modal-content{background:#fff;border-radius:24px 24px 0 0;width:100%;max-height:80%;animation:slideUp 0.3s ease}
        @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
        .modal-header{padding:16px 20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
        .modal-title{font-size:16px;font-weight:600}
        .modal-close{width:28px;height:28px;background:#f5f5f5;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
        .modal-body{padding:20px;max-height:400px;overflow-y:auto}
        
        /* Toast */
        .toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.8);color:#fff;padding:14px 28px;border-radius:12px;font-size:14px;z-index:300;display:none}
        .toast.show{display:block;animation:fadeIn 0.3s ease}
        @keyframes fadeIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
        
        /* 底部导航 */
        .bottom-nav{position:absolute;bottom:0;left:0;right:0;height:84px;background:#fff;display:flex;justify-content:space-around;padding-top:8px;border-top:1px solid #eee;z-index:50}
        .nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;cursor:pointer;transition:all 0.2s}
        .nav-item:active{transform:scale(0.9)}
        .nav-icon{font-size:22px}
        .nav-label{font-size:10px;color:#999}
        .nav-item.active .nav-label{color:#667eea}
        
        /* 商品卡片 */
        .goods-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 20px 20px}
        .goods-card{background:#fff;border-radius:12px;overflow:hidden;cursor:pointer}
        .goods-card:active{transform:scale(0.98)}
        .goods-img{height:120px;background:#f0f0f5;display:flex;align-items:center;justify-content:center;font-size:40px}
        .goods-info{padding:10px}
        .goods-name{font-size:14px;color:#333;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .goods-price{color:#f12711;font-weight:600;font-size:16px}
        .goods-price small{font-size:12px}
        .goods-sales{font-size:11px;color:#999;margin-top:4px}
        
        /* 社区页 */
        .community-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);padding:16px 20px;color:#fff}
        .community-search{display:flex;gap:10px;align-items:center}
        .search-input{flex:1;padding:10px 14px;background:rgba(255,255,255,0.2);border:none;border-radius:20px;color:#fff;font-size:14px;outline:none}
        .search-input::placeholder{color:rgba(255,255,255,0.6)}
        .search-btn{padding:10px 14px;background:rgba(255,255,255,0.2);border:none;border-radius:20px;color:#fff;font-size:14px;cursor:pointer}
        .community-tabs{display:flex;gap:0;padding:0 20px;background:#fff;border-bottom:1px solid #f0f0f0}
        .community-tab{flex:1;padding:14px 0;text-align:center;font-size:14px;color:#666;cursor:pointer;border-bottom:2px solid transparent}
        .community-tab.active{color:#667eea;border-bottom-color:#667eea}
        .post-card{background:#fff;margin:12px 20px;border-radius:16px;padding:16px}
        .post-card:active{background:#f8f8fa}
        .post-header{display:flex;gap:12px;margin-bottom:12px}
        .post-avatar{width:40px;height:40px;background:#667eea;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
        .post-user{flex:1}
        .post-username{font-size:14px;font-weight:600;color:#333;margin-bottom:4px}
        .post-time{font-size:12px;color:#999}
        .post-title{font-size:16px;font-weight:600;color:#333;margin-bottom:8px;line-height:1.4}
        .post-content{font-size:14px;color:#666;line-height:1.6;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
        .post-images{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
        .post-img{width:80px;height:80px;background:#f0f0f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px}
        .post-footer{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid #f0f0f0}
        .post-action{display:flex;align-items:center;gap:6px;font-size:13px;color:#999}
        .post-action span{font-size:16px}
        .post-tag{padding:4px 10px;background:#e8f4ff;border-radius:12px;font-size:12px;color:#667eea;margin-right:8px}
        .fab-btn{position:absolute;bottom:100px;right:30px;width:50px;height:50px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:0 4px 16px rgba(102,126,234,0.4);cursor:pointer;z-index:60}
        .fab-btn:active{transform:scale(0.9)}
    </style>
</head>
<body>
    <div class="phone">
        <div class="screen">
            <div class="notch"></div>
            <div class="status-bar"><span>9:41</span><span>📶 📡 🔋</span></div>
            
            <!-- 登录页 -->
            <div class="page active" id="page-login">
                <div class="login-bg">
                    <div class="login-logo">🛠️</div>
                    <div class="login-title">灵活用工平台</div>
                    <div class="login-sub">随时接单，轻松赚钱</div>
                                       <div class="login-form">
                        <div class="role-switch">
                            <div class="role-tabs">
                                <button class="role-tab active" onclick="switchRole('user',this)">
                                    <span class="role-icon">👤</span>
                                    <span class="role-name">用户</span>
                                </button>
                                <button class="role-tab" onclick="switchRole('factory',this)">
                                    <span class="role-icon">🏭</span>
                                    <span class="role-name">厂家</span>
                                </button>
                                <button class="role-tab" onclick="switchRole('agent',this)">
                                    <span class="role-icon">🤝</span>
                                    <span class="role-name">中介</span>
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>手机号</label>
                            <input type="tel" class="form-input" placeholder="请输入手机号" value="138****8888">
                        </div>
                        <div class="form-group">
                            <label>验证码</label>
                            <div class="code-row">
                                <input type="text" class="form-input" placeholder="请输入验证码" value="8888">
                                <button class="code-btn" onclick="sendCode()">获取验证码</button>
                            </div>
                        </div>
                        <button class="login-btn" onclick="doLogin()">登录 / 注册</button>
                        <div class="login-agree">登录即表示同意<a href="#">《用户协议》</a>和<a href="#">《隐私政策》</a></div>
                    </div>
                </div>
            </div>
            
            <!-- 首页 -->
            <div class="page" id="page-home">
                <div class="home-header">
                    <div class="home-top">
                        <div class="user-info">
                            <div class="avatar">👨‍🔧</div>
                            <div>
                                <div class="user-name">张师傅</div>
                                <div class="user-tag">已实名 · 水电专家</div>
                            </div>
                        </div>
                        <div class="msg-btn" onclick="goPage('message')">🔔<span class="msg-badge">3</span></div>
                    </div>
                    <div class="stats-card">
                        <div class="stat-item" onclick="goPage('wallet')">
                            <div class="stat-val" id="stat-balance">2,568</div>
                            <div class="stat-label">账户余额(元)</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-val" id="stat-month">8,520</div>
                            <div class="stat-label">本月收入(元)</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-val" id="stat-orders">156</div>
                            <div class="stat-label">完成订单</div>
                        </div>
                    </div>
                </div>
                
                <div class="scroll">
                    <div class="quick-section">
                        <div class="section-title">快捷服务</div>
                        <div class="quick-grid">
                            <div class="quick-item" onclick="goPage('jobs')"><div class="quick-icon">📋</div><div class="quick-name">接单中心</div></div>
                            <div class="quick-item" onclick="goPage('orders')"><div class="quick-icon">📦</div><div class="quick-name">我的订单</div></div>
                            <div class="quick-item" onclick="goPage('wallet')"><div class="quick-icon">💰</div><div class="quick-name">我的钱包</div></div>
                            <div class="quick-item" onclick="goPage('mall')"><div class="quick-icon">🛒</div><div class="quick-name">工具商城</div></div>
                            <div class="quick-item" onclick="goPage('vip')"><div class="quick-icon">👑</div><div class="quick-name">会员中心</div></div>
                            <div class="quick-item" onclick="goPage('insurance')"><div class="quick-icon">🏥</div><div class="quick-name">保险服务</div></div>
                            <div class="quick-item" onclick="goPage('map')"><div class="quick-icon">🗺️</div><div class="quick-name">地图找活</div></div>
                            <div class="quick-item" onclick="goPage('profile')"><div class="quick-icon">👤</div><div class="quick-name">个人中心</div></div>
                        </div>
                    </div>
                    
                    <div class="order-section">
                        <div class="section-title">推荐岗位</div>
                        <div class="tab-row">
                            <button class="tab active" onclick="filterOrders('all',this)">全部</button>
                            <button class="tab" onclick="filterOrders('new',this)">新岗位</button>
                            <button class="tab" onclick="filterOrders('ing',this)">服务中</button>
                            <button class="tab" onclick="filterOrders('done',this)">已完成</button>
                        </div>
                        <div id="orderList"></div>
                    </div>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item active" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 接单中心页 -->
            <div class="page" id="page-jobs">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">接单中心</div></div>
                <div class="filter-bar">
                    <button class="filter-btn active">全部</button>
                    <button class="filter-btn">水电维修</button>
                    <button class="filter-btn">安装服务</button>
                    <button class="filter-btn">搬家配送</button>
                    <button class="filter-btn">保洁清洗</button>
                </div>
                <div class="scroll">
                    <div class="job-card" onclick="showJobDetail(0)">
                        <div class="job-header"><span class="job-title">家庭水电维修</span><span class="job-salary">¥300-500</span></div>
                        <div class="job-tags"><span class="job-tag">急招</span><span class="job-tag">附近</span><span class="job-tag">日结</span></div>
                        <div class="job-info"><span>📍 距您2.5km</span><span>⏰ 今日14:00</span><span>🕐 约2小时</span></div>
                        <div class="job-bottom">
                            <div class="employer"><div class="emp-avatar">🏠</div><span class="emp-name">李先生</span></div>
                            <button class="take-btn" onclick="event.stopPropagation();takeOrder(0)">立即接单</button>
                        </div>
                    </div>
                    <div class="job-card" onclick="showJobDetail(1)">
                        <div class="job-header"><span class="job-title">办公室网络布线</span><span class="job-salary">¥600-800</span></div>
                        <div class="job-tags"><span class="job-tag">长期</span><span class="job-tag">包材料</span></div>
                        <div class="job-info"><span>📍 距您5.8km</span><span>⏰ 明日09:00</span><span>🕐 约4小时</span></div>
                        <div class="job-bottom">
                            <div class="employer"><div class="emp-avatar">🏢</div><span class="emp-name">华创科技公司</span></div>
                            <button class="take-btn" onclick="event.stopPropagation();takeOrder(1)">立即接单</button>
                        </div>
                    </div>
                    <div class="job-card" onclick="showJobDetail(2)">
                        <div class="job-header"><span class="job-title">商铺灯具更换</span><span class="job-salary">¥150-200</span></div>
                        <div class="job-tags"><span class="job-tag">简单</span><span class="job-tag">随时</span></div>
                        <div class="job-info"><span>📍 距您1.2km</span><span>⏰ 随时</span><span>🕐 约1小时</span></div>
                        <div class="job-bottom">
                            <div class="employer"><div class="emp-avatar">🏪</div><span class="emp-name">好又多超市</span></div>
                            <button class="take-btn" onclick="event.stopPropagation();takeOrder(2)">立即接单</button>
                        </div>
                    </div>
                    <div class="job-card" onclick="showJobDetail(3)">
                        <div class="job-header"><span class="job-title">新房装修监工</span><span class="job-salary">¥800/天</span></div>
                        <div class="job-tags"><span class="job-tag">包餐</span><span class="job-tag">周结</span></div>
                        <div class="job-info"><span>📍 距您8.3km</span><span>⏰ 长期</span><span>🕐 每天8小时</span></div>
                        <div class="job-bottom">
                            <div class="employer"><div class="emp-avatar">🏗️</div><span class="emp-name">业主王先生</span></div>
                            <button class="take-btn" onclick="event.stopPropagation();takeOrder(3)">立即接单</button>
                        </div>
                    </div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item active" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 订单管理页 -->
            <div class="page" id="page-orders">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">我的订单</div></div>
                <div class="filter-bar">
                    <button class="filter-btn active">全部</button>
                    <button class="filter-btn">待接单</button>
                    <button class="filter-btn">服务中</button>
                    <button class="filter-btn">待支付</button>
                    <button class="filter-btn">已完成</button>
                </div>
                <div class="scroll">
                    <div class="order-list" id="myOrders"></div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item active" onclick="goPage('orders')"><span class="nav-icon">📦</span><span class="nav-label">订单</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 钱包页 -->
            <div class="page" id="page-wallet">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">我的钱包</div></div>
                <div class="scroll">
                    <div class="balance-card">
                        <div class="balance-label">账户余额（元）</div>
                        <div class="balance-amount">¥<span id="wallet-balance">2,568.00</span></div>
                        <div class="balance-btns">
                            <button class="balance-btn" onclick="showWithdraw()">💰 提现</button>
                            <button class="balance-btn" onclick="showRecharge()">💳 充值</button>
                        </div>
                    </div>
                    <div class="menu-section" style="padding-top:0">
                        <div class="section-title">收入明细</div>
                        <div id="incomeList"></div>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item active" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 消息页 -->
            <div class="page" id="page-message">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">消息通知</div></div>
                <div class="scroll">
                    <div id="msgList"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 个人中心页 -->
            <div class="page" id="page-profile">
                <div class="scroll">
                    <div class="profile-header">
                        <div class="profile-avatar">👨‍🔧</div>
                        <div class="profile-info">
                            <div class="profile-name">张师傅</div>
                            <div class="profile-tags">
                                <span class="profile-tag">已实名</span>
                                <span class="profile-tag">水电维修</span>
                                <span class="profile-tag vip-tag">黄金会员</span>
                            </div>
                        </div>
                    </div>
                    <div class="menu-section">
                        <div class="menu-group">
                            <div class="menu-item" onclick="showModal('实名认证','您的实名认证已通过审核<br>认证时间：2024-03-15')"><span class="menu-icon">📋</span><span class="menu-name">实名认证</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="showModal('技能设置','当前技能：水电路维修、安装服务<br>可添加更多技能标签提升接单率')"><span class="menu-icon">🏷️</span><span class="menu-name">技能标签</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="showModal('工作简历','在线简历已生成<br>可前往查看和编辑')"><span class="menu-icon">📄</span><span class="menu-name">求职简历</span><span class="menu-arrow">›</span></div>
                        </div>
                        <div class="menu-group">
                            <div class="menu-item" onclick="goPage('orders')"><span class="menu-icon">📦</span><span class="menu-name">我的订单</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="goPage('wallet')"><span class="menu-icon">💰</span><span class="menu-name">我的钱包</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="goPage('vip')"><span class="menu-icon">👑</span><span class="menu-name">会员中心</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="goPage('mall')"><span class="menu-icon">🛒</span><span class="menu-name">工具商城</span><span class="menu-arrow">›</span></div>
                        </div>
                        <div class="menu-group">
                            <div class="menu-item" onclick="goPage('insurance')"><span class="menu-icon">🏥</span><span class="menu-name">保险服务</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="showModal('地址管理','已保存地址：3个<br>可管理常用服务地址')"><span class="menu-icon">📍</span><span class="menu-name">常用地址</span><span class="menu-arrow">›</span></div>
                            <div class="menu-item" onclick="showModal('设置','账号设置、通知设置、隐私设置等')"><span class="menu-icon">⚙️</span><span class="menu-name">设置</span><span class="menu-arrow">›</span></div>
                        </div>
                        <button class="action-btn btn-secondary" style="width:100%;margin-top:20px" onclick="logout()">退出登录</button>
                    </div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item active" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 文库技术交流社区页 -->
            <div class="page" id="page-community">
                <div class="community-header">
                    <div class="community-search">
                        <input type="text" class="search-input" placeholder="搜索话题、技术文章...">
                        <button class="search-btn">🔍</button>
                    </div>
                </div>
                <div class="community-tabs">
                    <div class="community-tab active" onclick="switchCommunityTab(this,'recommend')">推荐</div>
                    <div class="community-tab" onclick="switchCommunityTab(this,'hot')">热门</div>
                    <div class="community-tab" onclick="switchCommunityTab(this,'tech')">技术</div>
                    <div class="community-tab" onclick="switchCommunityTab(this,'qa')">问答</div>
                </div>
                <div class="scroll">
                    <div id="postList"></div>
                    <div style="height:100px"></div>
                </div>
                <div class="fab-btn" onclick="showPostModal()">✏️</div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item active" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 商城页 -->
            <div class="page" id="page-mall">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">工具商城</div></div>
                <div class="filter-bar">
                    <button class="filter-btn active">全部</button>
                    <button class="filter-btn">工具套装</button>
                    <button class="filter-btn">防护用品</button>
                    <button class="filter-btn">维修配件</button>
                </div>
                <div class="scroll">
                    <div class="goods-grid" id="goodsList"></div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 会员页 -->
            <div class="page" id="page-vip">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">会员中心</div></div>
                <div class="scroll" style="padding:20px">
                    <div style="background:linear-gradient(135deg,#f5af19,#f12711);border-radius:20px;padding:24px;color:#fff;text-align:center;margin-bottom:20px">
                        <div style="font-size:48px;margin-bottom:10px">👑</div>
                        <div style="font-size:20px;font-weight:700;margin-bottom:8px">黄金会员</div>
                        <div style="font-size:14px;opacity:0.9;margin-bottom:16px">有效期至 2025-12-31</div>
                        <div style="display:flex;justify-content:center;gap:8px;flex-wrap:wrap">
                            <span style="background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:20px;font-size:12px">接单不限量</span>
                            <span style="background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:20px;font-size:12px">排名加权</span>
                            <span style="background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:20px;font-size:12px">优先派单</span>
                            <span style="background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:20px;font-size:12px">电话直显</span>
                        </div>
                    </div>
                    <div class="section-title">升级套餐</div>
                    <div id="vipPackages"></div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 保险页 -->
            <div class="page" id="page-insurance">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">保险服务</div></div>
                <div class="scroll" style="padding:20px">
                    <div class="section-title">我的保单</div>
                    <div class="detail-card">
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
                            <span style="font-size:16px;font-weight:600">意外伤害险</span>
                            <span class="order-status status-done">生效中</span>
                        </div>
                        <div style="font-size:14px;color:#666;margin-bottom:8px">保单号：BX20240315001</div>
                        <div style="font-size:14px;color:#666;margin-bottom:8px">保障期限：2024-03-15 至 2025-03-14</div>
                        <div style="font-size:14px;color:#666">保费：¥199/年</div>
                        <button class="take-btn" style="margin-top:12px" onclick="showToast('理赔申请已提交')">申请理赔</button>
                    </div>
                    <div class="section-title">保险产品</div>
                    <div id="insuranceList"></div>
                    <div style="height:20px"></div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 地图页 -->
            <div class="page" id="page-map">
                <div class="detail-header"><div class="back-btn" onclick="goPage('home')">←</div><div class="detail-title">地图找活</div></div>
                <div style="flex:1;background:#e5e5e5;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666">
                    <div style="font-size:60px;margin-bottom:16px">🗺️</div>
                    <div style="font-size:16px;margin-bottom:8px">附近岗位地图</div>
                    <div style="font-size:14px">共有 <span style="color:#667eea;font-weight:600">12</span> 个岗位在您周围</div>
                    <div style="margin-top:20px;display:flex;gap:10px">
                        <span style="background:#667eea;color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;cursor:pointer" onclick="goPage('jobs')">查看岗位列表</span>
                        <span style="background:#4caf50;color:#fff;padding:10px 20px;border-radius:20px;font-size:14px;cursor:pointer" onclick="showToast('正在为您导航...')">导航上门</span>
                    </div>
                </div>
                <div class="bottom-nav">
                    <div class="nav-item" onclick="goPage('home')"><span class="nav-icon">🏠</span><span class="nav-label">首页</span></div>
                    <div class="nav-item" onclick="goPage('jobs')"><span class="nav-icon">📋</span><span class="nav-label">接单</span></div>
                    <div class="nav-item" onclick="goPage('community')"><span class="nav-icon">💬</span><span class="nav-label">社区</span></div>
                    <div class="nav-item" onclick="goPage('wallet')"><span class="nav-icon">💼</span><span class="nav-label">钱包</span></div>
                    <div class="nav-item" onclick="goPage('profile')"><span class="nav-icon">👤</span><span class="nav-label">我的</span></div>
                </div>
            </div>
            
            <!-- 社区发帖弹窗 -->
            <div class="modal" id="postModal">
                <div class="modal-content">
                    <div class="modal-header">
                        <span class="modal-title">发布帖子</span>
                        <div class="modal-close" onclick="closePostModal()">×</div>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>标题</label>
                            <input type="text" class="form-input" placeholder="请输入帖子标题" style="background:#fff;color:#333;border:1px solid #ddd">
                        </div>
                        <div class="form-group">
                            <label>内容</label>
                            <textarea class="form-input" placeholder="分享您的技术心得、经验或问题..." style="background:#fff;color:#333;border:1px solid #ddd;height:120px;resize:none">