编辑页面

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;
        }
        
        /* 状态栏 */
        .status-bar {
            height: 44px;
            background: linear-gradient(135deg, #1890ff, #00d4ff);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px;
            color: #fff;
            font-size: 12px;
            position: sticky;
            top: 0;
            z-index: 200;
        }
        
        /* 页面容器 */
        .page { display: none; flex: 1; overflow-y: auto; }
        .page.active { display: block; }
        
        /* 通用头部 */
        .header {
            background: linear-gradient(135deg, #1890ff, #00d4ff);
            color: #fff;
            padding: 16px;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header h1 { font-size: 18px; font-weight: 500; }
        .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, #1890ff, #00d4ff); 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; }
        .login-form { }
        .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: #1890ff; }
        .login-btn { width: 100%; height: 48px; background: linear-gradient(135deg, #1890ff, #00d4ff); 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: #1890ff; text-decoration: none; }
        .face-login { display: flex; align-items: center; justify-content: center; margin-top: 30px; padding: 16px; border: 2px dashed #ddd; border-radius: 8px; cursor: pointer; color: #666; font-size: 14px; }
        .face-login .icon { margin-right: 8px; font-size: 24px; }
        
        /* 首页 */
        .home-header { background: linear-gradient(135deg, #1890ff, #00d4ff); 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, #1890ff, #00d4ff); 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: #1890ff; font-weight: 500; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        
        /* 隐患上报表单 */
        .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; cursor: pointer; }
        .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; }
        .form-row .arrow { color: #ccc; margin-left: 8px; }
        .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; }
        .upload-area p { font-size: 14px; }
        .photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
        .photo-item { width: 80px; height: 80px; background: #f5f5f5; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
        .tag-select { display: flex; flex-wrap: wrap; gap: 8px; }
        .tag-item { padding: 8px 16px; background: #f5f5f5; border-radius: 20px; font-size: 14px; cursor: pointer; }
        .tag-item.active { background: #1890ff; color: #fff; }
        .submit-btn { width: 100%; height: 48px; background: linear-gradient(135deg, #1890ff, #00d4ff); color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 20px; }
        
        /* 工单列表 */
        .order-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; cursor: pointer; }
        .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-pending { background: #fff7e6; color: #fa8c16; }
        .status-processing { background: #e6f7ff; color: #1890ff; }
        .status-done { background: #f6ffed; color: #52c41a; }
        .order-content { font-size: 14px; color: #666; margin-bottom: 8px; }
        .order-info { display: flex; justify-content: space-between; font-size: 12px; color: #999; }
        
        /* 消息列表 */
        .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, #1890ff, #00d4ff); 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, #1890ff, #00d4ff); 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, #1890ff, #00d4ff); 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; }
        
        /* 详情页 */
        .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; }
        
        /* 进度时间线 */
        .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 #1890ff; border-radius: 50%; }
        .timeline-item.done .timeline-dot { background: #1890ff; }
        .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; }
        
        /* 底部导航 */
        .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: #1890ff; }
        .nav-icon { font-size: 22px; margin-bottom: 2px; }
        .nav-text { font-size: 10px; }
        
        /* 评价组件 */
        .rating { display: flex; gap: 4px; }
        .star { font-size: 24px; color: #ddd; cursor: pointer; }
        .star.active { color: #faad14; }
        
        /* 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, #1890ff, #00d4ff); 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, #1890ff, #00d4ff); 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; }
        
        /* 我的车间页 */
        .workshop-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
        .workshop-header { display: flex; align-items: center; margin-bottom: 12px; }
        .workshop-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #1890ff, #00d4ff); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; margin-right: 12px; }
        .workshop-name { font-size: 16px; font-weight: 500; color: #333; }
        .workshop-count { font-size: 12px; color: #999; }
        .workshop-info { font-size: 14px; color: #666; line-height: 1.8; }
        
        /* 修改密码页 */
        .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-item input:focus { border-color: #1890ff; }
        .pwd-tip { font-size: 12px; color: #999; margin-top: 8px; }
        
        /* 关于我们页 */
        .about-header { background: linear-gradient(135deg, #1890ff, #00d4ff); 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; }
        .about-item span:first-child { color: #666; font-size: 14px; }
        .about-item span:last-child { color: #333; font-size: 14px; }
        .about-desc { padding: 16px; font-size: 14px; color: #666; line-height: 1.8; }
    </style>
</head>
<body>
    <div class="phone-frame" style="display: flex; flex-direction: column; height: 812px;">
        <!-- 状态栏 -->
        <div class="status-bar">
            <span>9:41</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="login-form">
                    <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 class="face-login" onclick="faceLogin()">
                    <span class="icon">👤</span>
                    <span>人脸识别快速登录</span>
                </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">3</div>
                        <div class="stat-label">待处理工单</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">12</div>
                        <div class="stat-label">本月隐患</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-num">98%</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('report')">
                            <div class="entry-icon">📱</div>
                            <span>隐患上报</span>
                        </div>
                        <div class="entry-item" onclick="goPage('orders')">
                            <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-report" 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" onclick="showToast('选择位置')">
                        <label>所在车间</label>
                        <span class="value">包装一车间</span>
                        <span class="arrow">›</span>
                    </div>
                    <div class="form-row" onclick="showToast('选择生产线')">
                        <label>生产线</label>
                        <span class="value">选择生产线</span>
                        <span class="arrow">›</span>
                    </div>
                    <div class="form-row" onclick="showToast('选择设备')">
                        <label>设备名称</label>
                        <span class="value">选择设备</span>
                        <span class="arrow">›</span>
                    </div>
                </div>
                
                <div class="form-section">
                    <div class="form-section-title">📝 隐患描述</div>
                    <div class="form-row" onclick="showToast('选择分类')">
                        <label>隐患分类</label>
                        <span class="value">设备故障</span>
                        <span class="arrow">›</span>
                    </div>
                    <div class="form-row">
                        <label style="flex:none;margin-right:12px">详细描述</label>
                        <textarea style="flex:1;border:1px solid #ddd;border-radius:8px;padding:12px;min-height:80px;font-size:14px" placeholder="请详细描述隐患情况...">