编辑页面

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', Roboto, sans-serif; background: #f5f5f5; color: #333; }
        
        /* 手机模拟器容器 */
        .phone-frame {
            width: 375px;
            min-height: 812px;
            margin: 20px auto;
            background: #fff;
            border-radius: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 812px;
        }
        
        /* 状态栏 */
        .status-bar {
            height: 44px;
            background: linear-gradient(135deg, #52c41a, #73d13d);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px;
            color: #fff;
            font-size: 12px;
            flex-shrink: 0;
        }
        
        /* 页面容器 */
        .page { display: none; flex: 1; overflow-y: auto; }
        .page.active { display: block; }
        
        /* 通用头部 */
        .header {
            background: linear-gradient(135deg, #52c41a, #73d13d);
            color: #fff;
            padding: 16px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header-bar { display: flex; justify-content: space-between; align-items: center; }
        .back-btn { font-size: 14px; cursor: pointer; }
        .header-title { font-size: 18px; font-weight: 500; }
        
        /* 登录页 */
        .login-container { padding: 40px 30px; }
        .login-logo { text-align: center; margin-bottom: 40px; }
        .login-logo .icon { width: 80px; height: 80px; background: linear-gradient(135deg, #52c41a, #73d13d); border-radius: 20px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
        .login-logo h2 { font-size: 20px; color: #333; }
        .login-logo p { font-size: 12px; color: #999; margin-top: 4px; }
        .form-item { margin-bottom: 20px; }
        .form-item label { display: block; font-size: 14px; color: #666; margin-bottom: 8px; }
        .form-item input { width: 100%; height: 48px; border: 1px solid #ddd; border-radius: 8px; padding: 0 16px; font-size: 16px; outline: none; }
        .form-item input:focus { border-color: #52c41a; }
        .login-btn { width: 100%; height: 48px; background: linear-gradient(135deg, #52c41a, #73d13d); color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
        .login-actions { display: flex; justify-content: space-between; margin-top: 16px; font-size: 14px; }
        .login-actions a { color: #52c41a; text-decoration: none; }
        
        /* 首页 */
        .home-header { background: linear-gradient(135deg, #52c41a, #73d13d); padding: 20px 16px 40px; color: #fff; }
        .user-info { display: flex; align-items: center; margin-bottom: 20px; }
        .user-avatar { width: 60px; height: 60px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-right: 12px; }
        .user-detail h3 { font-size: 18px; font-weight: 500; }
        .user-detail p { font-size: 12px; opacity: 0.8; margin-top: 4px; }
        .home-stats { display: flex; background: rgba(255,255,255,0.2); border-radius: 12px; padding: 16px; }
        .stat-item { flex: 1; text-align: center; }
        .stat-item:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.3); }
        .stat-num { font-size: 28px; font-weight: 600; }
        .stat-label { font-size: 12px; opacity: 0.9; margin-top: 4px; }
        
        .home-content { margin-top: -20px; padding: 0 16px; }
        .quick-entry { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .quick-entry h3 { font-size: 16px; margin-bottom: 16px; }
        .entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .entry-item { text-align: center; cursor: pointer; }
        .entry-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #52c41a, #73d13d); border-radius: 12px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        .entry-item span { font-size: 12px; color: #666; }
        
        /* 任务列表 */
        .list-container { padding: 16px; }
        .list-tabs { display: flex; background: #f5f5f5; border-radius: 8px; padding: 4px; margin-bottom: 16px; }
        .list-tab { flex: 1; text-align: center; padding: 10px; font-size: 14px; border-radius: 6px; cursor: pointer; color: #666; }
        .list-tab.active { background: #fff; color: #52c41a; font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        
        /* 工单卡片 */
        .order-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; cursor: pointer; border-left: 4px solid #52c41a; }
        .order-card.urgent { border-left-color: #ff4d4f; }
        .order-card.processing { border-left-color: #1890ff; }
        .order-header { display: flex; justify-content: space-between; margin-bottom: 12px; }
        .order-id { font-size: 14px; color: #333; font-weight: 500; }
        .order-status { font-size: 12px; padding: 4px 12px; border-radius: 12px; }
        .status-new { background: #fff7e6; color: #fa8c16; }
        .status-accepted { background: #e6f7ff; color: #1890ff; }
        .status-processing { background: #f6ffed; color: #52c41a; }
        .status-done { background: #f5f5f5; color: #999; }
        .order-content { font-size: 14px; color: #666; margin-bottom: 8px; }
        .order-location { font-size: 12px; color: #999; margin-bottom: 8px; display: flex; align-items: center; }
        .order-info { display: flex; justify-content: space-between; font-size: 12px; color: #999; }
        .accept-btn { width: 100%; height: 40px; background: #52c41a; color: #fff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; margin-top: 12px; }
        
        /* 维修工单详情 */
        .detail-section { background: #fff; padding: 16px; margin-bottom: 12px; }
        .detail-title { font-size: 14px; color: #999; margin-bottom: 8px; }
        .detail-content { font-size: 14px; color: #333; }
        .detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
        .detail-row:last-child { border-bottom: none; }
        .photo-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; }
        .gallery-item { width: 100px; height: 100px; background: #f5f5f5; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 32px; }
        
        /* 进度时间线 */
        .timeline { padding: 16px; }
        .timeline-item { display: flex; position: relative; padding-left: 30px; padding-bottom: 24px; }
        .timeline-item::before { content: ''; position: absolute; left: 8px; top: 24px; bottom: 0; width: 2px; background: #e8e8e8; }
        .timeline-item:last-child::before { display: none; }
        .timeline-dot { position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: #fff; border: 3px solid #52c41a; border-radius: 50%; }
        .timeline-item.done .timeline-dot { background: #52c41a; }
        .timeline-time { font-size: 12px; color: #999; margin-bottom: 4px; }
        .timeline-title { font-size: 14px; color: #333; font-weight: 500; }
        .timeline-desc { font-size: 12px; color: #999; margin-top: 4px; }
        
        /* 表单样式 */
        .form-container { padding: 16px; }
        .form-section { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
        .form-section-title { font-size: 16px; font-weight: 500; margin-bottom: 16px; color: #333; }
        .form-row { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .form-row:last-child { border-bottom: none; }
        .form-row label { flex: 0 0 100px; font-size: 14px; color: #666; }
        .form-row .value { flex: 1; font-size: 14px; color: #333; text-align: right; }
        textarea { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 12px; min-height: 100px; font-size: 14px; outline: none; }
        .upload-area { border: 2px dashed #ddd; border-radius: 12px; padding: 30px; text-align: center; cursor: pointer; color: #999; }
        .upload-area .icon { font-size: 40px; margin-bottom: 8px; }
        .submit-btn { width: 100%; height: 48px; background: linear-gradient(135deg, #52c41a, #73d13d); color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 20px; }
        
        /* 消息列表 */
        .msg-item { display: flex; padding: 16px; background: #fff; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
        .msg-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #52c41a, #73d13d); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 12px; color: #fff; }
        .msg-content { flex: 1; }
        .msg-title { font-size: 14px; color: #333; margin-bottom: 4px; }
        .msg-desc { font-size: 12px; color: #999; }
        .msg-time { font-size: 12px; color: #ccc; margin-left: 12px; }
        
        /* 个人中心 */
        .profile-header { background: linear-gradient(135deg, #52c41a, #73d13d); padding: 30px 16px; color: #fff; text-align: center; }
        .profile-avatar { width: 80px; height: 80px; background: #fff; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
        .profile-name { font-size: 18px; font-weight: 500; }
        .profile-dept { font-size: 12px; opacity: 0.8; margin-top: 4px; }
        .profile-menu { padding: 16px; }
        .menu-item { display: flex; align-items: center; padding: 16px; background: #fff; border-radius: 12px; margin-bottom: 12px; cursor: pointer; }
        .menu-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #52c41a, #73d13d); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-right: 12px; color: #fff; }
        .menu-text { flex: 1; font-size: 14px; color: #333; }
        .menu-arrow { color: #ccc; }
        
        /* 评价组件 */
        .rating { display: flex; gap: 4px; justify-content: center; }
        .star { font-size: 28px; color: #ddd; cursor: pointer; }
        .star.active { color: #faad14; }
        .rating-label { text-align: center; font-size: 14px; color: #666; margin-bottom: 8px; }
        
        /* 底部导航 */
        .bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: #fff; display: flex; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1000; }
        .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #999; padding: 8px 0; }
        .nav-item:active { background: #f5f5f5; }
        .nav-item.active { color: #52c41a; }
        .nav-icon { font-size: 22px; margin-bottom: 2px; }
        .nav-text { font-size: 10px; }
        
        /* Toast提示 */
        .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 16px 32px; border-radius: 8px; font-size: 14px; z-index: 9999; display: none; }
        .toast.show { display: block; animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
        
        /* 页面切换动画 */
        .page { animation: slideIn 0.3s; }
        @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
        
        /* 二级页面通用样式 */
        .sub-page-header { background: linear-gradient(135deg, #52c41a, #73d13d); color: #fff; padding: 16px; display: flex; align-items: center; justify-content: space-between; }
        .sub-back-btn { font-size: 14px; cursor: pointer; }
        .sub-page-title { font-size: 18px; font-weight: 500; }
        .sub-page-content { padding: 16px; }
        
        /* 个人信息页 */
        .info-card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px; text-align: center; }
        .info-avatar { width: 80px; height: 80px; background: linear-gradient(135deg, #52c41a, #73d13d); border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff; }
        .info-name { font-size: 20px; font-weight: 500; color: #333; margin-bottom: 4px; }
        .info-role { font-size: 14px; color: #999; }
        .info-list { background: #fff; border-radius: 12px; }
        .info-item { display: flex; padding: 16px; border-bottom: 1px solid #f0f0f0; }
        .info-item:last-child { border-bottom: none; }
        .info-item .label { flex: 0 0 100px; font-size: 14px; color: #999; }
        .info-item .value { flex: 1; font-size: 14px; color: #333; }
        
        /* 评分统计页 */
        .score-card { background: #fff; border-radius: 12px; padding: 20px; text-align: center; margin-bottom: 16px; }
        .score-num { font-size: 48px; font-weight: 600; color: #faad14; }
        .score-label { font-size: 14px; color: #999; margin-top: 8px; }
        .score-stars { display: flex; justify-content: center; gap: 4px; margin: 12px 0; }
        .score-stars span { font-size: 24px; color: #faad14; }
        .score-detail { background: #fff; border-radius: 12px; padding: 16px; }
        .score-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .score-row:last-child { border-bottom: none; }
        
        /* 修改密码页 */
        .pwd-form { background: #fff; border-radius: 12px; padding: 20px; }
        .pwd-item { margin-bottom: 20px; }
        .pwd-item label { display: block; font-size: 14px; color: #666; margin-bottom: 8px; }
        .pwd-item input { width: 100%; height: 48px; border: 1px solid #ddd; border-radius: 8px; padding: 0 16px; font-size: 16px; outline: none; }
        .pwd-tip { font-size: 12px; color: #999; margin-top: 8px; }
        
        /* 关于我们页 */
        .about-header { background: linear-gradient(135deg, #52c41a, #73d13d); padding: 40px 20px; text-align: center; color: #fff; }
        .about-logo { width: 80px; height: 80px; background: #fff; border-radius: 20px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 40px; }
        .about-name { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
        .about-version { font-size: 12px; opacity: 0.8; }
        .about-content { background: #fff; border-radius: 12px; margin: 16px; padding: 20px; }
        .about-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
        .about-item:last-child { border-bottom: none; }
        
        /* 工作打卡 */
        .checkin-card { background: #fff; border-radius: 12px; padding: 20px; margin-bottom: 16px; text-align: center; }
        .checkin-time { font-size: 32px; font-weight: 600; color: #333; margin-bottom: 8px; }
        .checkin-date { font-size: 14px; color: #999; margin-bottom: 20px; }
        .checkin-btn { width: 100%; height: 48px; background: linear-gradient(135deg, #52c41a, #73d13d); color: #fff; border: none; border-radius: 24px; font-size: 16px; cursor: pointer; }
        .checkin-btn.off { background: #ff4d4f; }
        .checkin-record { background: #fff; border-radius: 12px; padding: 16px; }
        .record-title { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 12px; }
        .record-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; font-size: 14px; }
        .record-item:last-child { border-bottom: none; }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span>10:39</span>
            <span>信号 Wi-Fi 电池</span>
        </div>
        
        <!-- 登录页 -->
        <div id="page-login" class="page active">
            <div class="login-container">
                <div class="login-logo">
                    <div class="icon">🔧</div>
                    <h2>工程师端</h2>
                    <p>隐患排查维修系统</p>
                </div>
                <div class="form-item">
                    <label>工号</label>
                    <input type="text" placeholder="请输入工程师工号" id="login-account">
                </div>
                <div class="form-item">
                    <label>密码</label>
                    <input type="password" placeholder="请输入密码" id="login-pwd">
                </div>
                <button class="login-btn" onclick="login()">登录</button>
                <div class="login-actions">
                    <a href="javascript:void(0)" onclick="showToast('验证码登录开发中')">验证码登录</a>
                    <a href="javascript:void(0)" onclick="showToast('请联系管理员')">忘记密码</a>
                </div>
            </div>
        </div>
        
        <!-- 首页 -->
        <div id="page-home" class="page">
            <div class="home-header">
                <div class="user-info">
                    <div class="user-avatar">👨‍🔧</div>
                    <div class="user-detail">
                        <h3>李明</h3>
                        <p>维修工程师 · 设备维修组</p>
                    </div>
                </div>
                <div class="home-stats">
                    <div class="stat-item">
                        <div class="stat-num">5</div>
                        <div class="stat-label">待接单</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">2</div>
                        <div class="stat-label">处理中</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">156</div>
                        <div class="stat-label">已完成</div>
                    </div>
                </div>
            </div>
            <div class="home-content">
                <div class="quick-entry">
                    <h3>快捷入口</h3>
                    <div class="entry-grid">
                        <div class="entry-item" onclick="goPage('tasks')">
                            <div class="entry-icon">📋</div>
                            <span>任务列表</span>
                        </div>
                        <div class="entry-item" onclick="goPage('record')">
                            <div class="entry-icon">📊</div>
                            <span>维修记录</span>
                        </div>
                        <div class="entry-item" onclick="goPage('messages')">
                            <div class="entry-icon">🔔</div>
                            <span>消息通知</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 任务列表页 -->
        <div id="page-tasks" class="page">
            <div class="header">
                <div class="header-bar">
                    <span class="back-btn" onclick="goBack()">← 返回</span>
                    <span class="header-title">任务列表</span>
                    <span style="width:50px"></span>
                </div>
            </div>
            <div class="list-container">
                <div class="list-tabs">
                    <div class="list-tab active">待接单</div>
                    <div class="list-tab">处理中</div>
                    <div class="list-tab">已完成</div>
                </div>
                
                <div class="order-card urgent" onclick="goPage('task-detail')">
                    <div class="order-header">
                        <span class="order-id">工单 #20260428003</span>
                        <span class="order-status status-new">新工单</span>
                    </div>
                    <div class="order-content">印刷机传送带发现裂纹，存在安全隐患</div>
                    <div class="order-location">📍 包装一车间 · 2号生产线 · 印刷机 #01</div>
                    <div class="order-info">
                        <span>2024-04-28 09:30</span>
                        <span style="color:#ff4d4f">非常紧急</span>
                    </div>
                    <button class="accept-btn" onclick="event.stopPropagation(); acceptOrder(this)">立即接单</button>
                </div>
                
                <div class="order-card" onclick="goPage('task-detail')">
                    <div class="order-header">
                        <span class="order-id">工单 #20260428002</span>
                        <span class="order-status status-new">新工单</span>
                    </div>
                    <div class="order-content">打包机电机异常响声</div>
                    <div class="order-location">📍 包装一车间 · 3号生产线 · 打包机 #02</div>
                    <div class="order-info">
                        <span>2024-04-28 08:15</span>
                        <span style="color:#fa8c16">紧急</span>
                    </div>
                    <button class="accept-btn" onclick="event.stopPropagation(); acceptOrder(this)">立即接单</button>
                </div>
                
                <div class="order-card processing" onclick="goPage('task-detail')">
                    <div class="order-header">
                        <span class="order-id">工单 #20260427003</span>
                        <span class="order-status status-processing">处理中</span>
                    </div>
                    <div class="order-content">贴标机传感器故障，已更换传感器</div>
                    <div class="order-location">📍 包装二车间 · 1号生产线 · 贴标机 #03</div>
                    <div class="order-info">
                        <span>2024-04-27 16:00</span>
                        <span>进行中</span>
                    </div>
                </div>
                
                <div class="order-card" onclick="goPage('task-detail')">
                    <div class="order-header">
                        <span class="order-id">工单 #20260428004</span>
                        <span class="order-status status-new">新工单</span>
                    </div>
                    <div class="order-content">叉车警示灯不亮</div>
                    <div class="order-location">📍 仓储区 · 叉车 #05</div>
                    <div class="order-info">
                        <span>2024-04-28 10:20</span>
                        <span style="color:#fa8c16">紧急</span>
                    </div>
                    <button class="accept-btn" onclick="event.stopPropagation(); acceptOrder(this)">立即接单</button>
                </div>
            </div>
        </div>
        
        <!-- 任务详情页 -->
        <div id="page-task-detail" class="page">
            <div class="header">
                <div class="header-bar">
                    <span class="back-btn" onclick="goBack()">← 返回</span>
                    <span class="header-title">工单详情</span>
                    <span style="width:50px"></span>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">工单状态</div>
                <div class="detail-content">
                    <span class="order-status status-accepted" style="margin-right:12px">待处理</span>
                    上报人：赵伟（班组负责人）
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">基本信息</div>
                <div class="detail-row">
                    <span>工单编号</span>
                    <span>#20260428003</span>
                </div>
                <div class="detail-row">
                    <span>隐患分类</span>
                    <span>设备故障</span>
                </div>
                <div class="detail-row">
                    <span>紧急程度</span>
                    <span style="color:#ff4d4f">非常紧急</span>
                </div>
                <div class="detail-row">
                    <span>上报时间</span>
                    <span>2024-04-28 09:30</span>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">隐患位置</div>
                <div class="detail-content">
                    包装一车间 · 2号生产线 · 印刷机 #01
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">隐患描述</div>
                <div class="detail-content">
                    印刷机传送带发现裂纹，存在安全隐患，需要立即检修并更换传送带。
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">现场照片</div>
                <div class="photo-gallery">
                    <div class="gallery-item">📷</div>
                    <div class="gallery-item">📷</div>
                    <div class="gallery-item">📷</div>
                </div>
            </div>
            
            <div class="detail-section">
                <div class="detail-title">处理进度</div>
            </div>
            <div class="timeline">
                <div class="timeline-item done">
                    <div class="timeline-dot"></div>
                    <div class="timeline-time">04-28 09:30</div>
                    <div class="timeline-title">隐患上报</div>
                    <div class="timeline-desc">赵伟 提交了隐患工单</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-time">待接单</div>
                    <div class="timeline-title">工程师接单</div>
                    <div class="timeline-desc">等待工程师接单处理</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-time">-</div>
                    <div class="timeline-title">开始维修</div>
                    <div class="timeline-desc">前往现场进行维修</div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-time">-</div>
                    <div class="timeline-title">维修完成</div>
                    <div class="timeline-desc">上传维修记录，等待验收</div>
                </div>
            </div>
            
            <div style="padding: 0 16px 16px;">
                <button class="submit-btn" onclick="acceptAndProcess()">接单并处理</button>
            </div>
        </div>
        
        <!-- 维修处理页 -->
        <div id="page-process" class="page">
            <div class="header">
                <div class="header-bar">
                    <span class="back-btn" onclick="goBack()">← 返回</span>
                    <span class="header-title">维修处理</span>
                    <span style="width:50px"></span>
                </div>
            </div>
            <div class="form-container">
                <div class="form-section">
                    <div class="form-section-title">📋 维修信息</div>
                    <div class="form-row">
                        <label>工单编号</label>
                        <span class="value">#20260428003</span>
                    </div>
                    <div class="form-row">
                        <label>设备名称</label>
                        <span class="value">印刷机 #01</span>
                    </div>
                    <div class="form-row">
                        <label>维修类型</label>
                        <span class="value">设备维修</span>
                    </div>
                </div>
                
                <div class="form-section">
                    <div class="form-section-title">🔧 维修结果</div>
                    <div style="margin-bottom:16px">
                        <div style="font-size:14px;color:#666;margin-bottom:8px">维修结果</div>
                        <div style="display:flex;gap:12px">
                            <label style="display:flex;align-items:center;cursor:pointer">
                                <input type="radio" name="result" value="fixed" checked style="margin-right:6px"> 已修复
                            </label>
                            <label style="display:flex;align-items:center;cursor:pointer">
                                <input type="radio" name="result" value="replaced" style="margin-right:6px"> 已更换配件
                            </label>
                            <label style="display:flex;align-items:center;cursor:pointer">
                                <input type="radio" name="result" value="pending" style="margin-right:6px"> 待跟进
                            </label>
                        </div>
                    </div>
                    <div style="font-size:14px;color:#666;margin-bottom:8px">维修说明</div>
                    <textarea placeholder="请详细描述维修过程和结果...">