188-template-177
/
blank
Fork de d8dfun/blank


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人才小程序 - 完整原型</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .mobile-frame {
            width: 375px;
            height: 667px;
            border-radius: 40px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            position: relative;
            background-color: white;
        }
        .status-bar {
            height: 44px;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            font-size: 14px;
            border-bottom: 1px solid #f0f0f0;
        }
        .tab-bar {
            height: 60px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-top: 1px solid #f0f0f0;
        }
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #999;
            cursor: pointer;
        }
        .tab-item.active {
            color: #3b82f6;
        }
        .card {
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
        }
        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
        }
        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .pulse-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #10b981;
            animation: pulse 2s infinite;
        }
        .calendar-day {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 14px;
        }
        .calendar-day.checked {
            background-color: #10b981;
            color: white;
        }
        .calendar-day.weekend {
            color: #999;
        }
        @keyframes pulse {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen p-6">
    <div class="max-w-6xl mx-auto">
        <h1 class="text-3xl font-bold text-center text-gray-800 mb-2">人才小程序 - 完整原型设计</h1>
        <p class="text-center text-gray-600 mb-8">基于数据库结构的完整页面原型展示</p>
        
        <div class="flex flex-wrap justify-center gap-8">
            <!-- 页面1: 登录页 -->
            <div class="flex flex-col items-center">
                <h2 class="text-xl font-semibold text-gray-700 mb-4">登录页</h2>
                <div class="mobile-frame">
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex space-x-1">
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    
                    <div class="h-[calc(100%-44px)] flex flex-col justify-center p-8">
                        <div class="text-center mb-10">
                            <div class="w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-4">
                                <i class="fas fa-user-friends text-blue-500 text-3xl"></i>
                            </div>
                            <h1 class="text-2xl font-bold text-gray-800 mb-2">残疾人就业平台</h1>
                            <p class="text-gray-600">为您提供便捷的就业服务</p>
                        </div>
                        
                        <div class="mb-6">
                            <div class="flex items-center border border-gray-300 rounded-lg px-4 py-3 mb-4">
                                <i class="fas fa-id-card text-gray-400 mr-3"></i>
                                <input type="text" placeholder="身份证号/残疾证号" class="w-full outline-none">
                            </div>
                            <div class="flex items-center border border-gray-300 rounded-lg px-4 py-3">
                                <i class="fas fa-lock text-gray-400 mr-3"></i>
                                <input type="password" placeholder="请输入密码" class="w-full outline-none">
                            </div>
                        </div>
                        
                        <button class="gradient-bg text-white w-full py-3 rounded-lg font-medium mb-4">登录</button>
                        
                        <div class="text-center">
                            <a href="#" class="text-sm text-blue-500">忘记密码？</a>
                        </div>
                        
                        <div class="mt-12 text-center text-gray-500 text-sm">
                            <p>首次使用？<span class="text-blue-500">立即注册</span></p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页面2: 首页/个人主页 -->
            <div class="flex flex-col items-center">
                <h2 class="text-xl font-semibold text-gray-700 mb-4">首页/个人主页</h2>
                <div class="mobile-frame">
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex space-x-1">
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    
                    <div class="h-[calc(100%-104px)] overflow-y-auto p-4">
                        <!-- 顶部个人信息 -->
                        <div class="gradient-bg text-white rounded-2xl p-5 mb-4">
                            <div class="flex justify-between items-start">
                                <div class="flex items-center">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
                                         class="w-16 h-16 rounded-full border-2 border-white mr-4" alt="个人头像">
                                    <div>
                                        <h2 class="text-xl font-bold">张明</h2>
                                        <p class="text-sm opacity-80">肢体残疾 · 三级</p>
                                    </div>
                                </div>
                                <div class="bg-white/20 rounded-full p-2">
                                    <i class="fas fa-qrcode text-white"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex justify-between">
                                <div class="text-center">
                                    <p class="text-2xl font-bold">28</p>
                                    <p class="text-xs opacity-80">本月出勤</p>
                                </div>
                                <div class="text-center">
                                    <p class="text-2xl font-bold">0</p>
                                    <p class="text-xs opacity-80">异常记录</p>
                                </div>
                                <div class="text-center">
                                    <p class="text-2xl font-bold">¥4,800</p>
                                    <p class="text-xs opacity-80">本月薪资</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 打卡模块 -->
                        <div class="card bg-white p-5 mb-4 text-center">
                            <div class="flex items-center justify-center mb-4">
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <p class="text-green-500 font-medium">已打卡</p>
                            </div>
                            <h3 class="text-2xl font-bold text-gray-800 mb-2">09:27</h3>
                            <p class="text-gray-600 mb-4">2023年11月25日 星期六</p>
                            <div class="flex justify-between">
                                <div class="flex-1 text-center">
                                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
                                        <i class="fas fa-sign-in-alt text-blue-500"></i>
                                    </div>
                                    <p class="text-xs text-gray-600">上班打卡</p>
                                    <p class="text-sm font-semibold text-gray-800">08:30</p>
                                </div>
                                <div class="flex-1 text-center">
                                    <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-2">
                                        <i class="fas fa-sign-out-alt text-gray-400"></i>
                                    </div>
                                    <p class="text-xs text-gray-600">下班打卡</p>
                                    <p class="text-sm font-semibold text-gray-400">--:--</p>
                                </div>
                            </div>
                            <button class="w-full bg-blue-500 text-white py-3 rounded-lg font-medium mt-4">
                                <i class="fas fa-camera mr-2"></i>拍照打卡
                            </button>
                        </div>
                        
                        <!-- 功能入口 -->
                        <div class="grid grid-cols-4 gap-3 mb-4">
                            <div class="bg-blue-50 rounded-xl p-3 text-center">
                                <i class="fas fa-user text-blue-500 text-lg mb-1"></i>
                                <p class="text-xs text-gray-700">个人信息</p>
                            </div>
                            <div class="bg-green-50 rounded-xl p-3 text-center">
                                <i class="fas fa-calendar-check text-green-500 text-lg mb-1"></i>
                                <p class="text-xs text-gray-700">考勤记录</p>
                            </div>
                            <div class="bg-purple-50 rounded-xl p-3 text-center">
                                <i class="fas fa-file-invoice-dollar text-purple-500 text-lg mb-1"></i>
                                <p class="text-xs text-gray-700">薪资查询</p>
                            </div>
                            <div class="bg-yellow-50 rounded-xl p-3 text-center">
                                <i class="fas fa-building text-yellow-500 text-lg mb-1"></i>
                                <p class="text-xs text-gray-700">企业信息</p>
                            </div>
                        </div>
                        
                        <!-- 快捷通知 -->
                        <div class="card bg-white p-4">
                            <h3 class="font-semibold text-gray-700 mb-3">最新通知</h3>
                            <div class="space-y-3">
                                <div class="flex items-start">
                                    <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1">
                                        <i class="fas fa-bell text-blue-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-800">薪资发放通知</p>
                                        <p class="text-xs text-gray-500">11月薪资已发放，请查收</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 mt-1">
                                        <i class="fas fa-calendar text-green-500 text-sm"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-800">年度体检安排</p>
                                        <p class="text-xs text-gray-500">公司年度体检将于12月10日举行</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 底部导航 -->
                    <div class="tab-bar">
                        <div class="tab-item active">
                            <i class="fas fa-home text-lg mb-1"></i>
                            <span>首页</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-calendar-alt text-lg mb-1"></i>
                            <span>考勤</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-user text-lg mb-1"></i>
                            <span>我的</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-ellipsis-h text-lg mb-1"></i>
                            <span>更多</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页面3: 考勤记录页 -->
            <div class="flex flex-col items-center">
                <h2 class="text-xl font-semibold text-gray-700 mb-4">考勤记录页</h2>
                <div class="mobile-frame">
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex space-x-1">
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    
                    <div class="h-[calc(100%-104px)] overflow-y-auto p-4">
                        <!-- 月份选择 -->
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-semibold text-gray-700">考勤记录</h3>
                            <div class="flex items-center bg-gray-100 rounded-lg px-3 py-1">
                                <i class="fas fa-chevron-left text-gray-500 mr-2"></i>
                                <span class="text-sm text-gray-700 mr-2">2023年11月</span>
                                <i class="fas fa-chevron-right text-gray-500"></i>
                            </div>
                        </div>
                        
                        <!-- 考勤统计 -->
                        <div class="card bg-white p-4 mb-4">
                            <div class="flex justify-between items-center mb-4">
                                <div>
                                    <p class="text-gray-700">出勤率</p>
                                    <p class="text-2xl font-bold text-gray-800">100%</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-gray-700">正常出勤</p>
                                    <p class="text-2xl font-bold text-gray-800">28天</p>
                                </div>
                            </div>
                            <div class="flex justify-between text-sm text-gray-500">
                                <span>迟到: 0次</span>
                                <span>早退: 0次</span>
                                <span>缺勤: 0次</span>
                            </div>
                        </div>
                        
                        <!-- 日历视图 -->
                        <div class="card bg-white p-4 mb-4">
                            <h3 class="font-semibold text-gray-700 mb-3">考勤日历</h3>
                            <div class="grid grid-cols-7 gap-1 mb-2">
                                <div class="text-center text-xs text-gray-500">日</div>
                                <div class="text-center text-xs text-gray-500">一</div>
                                <div class="text-center text-xs text-gray-500">二</div>
                                <div class="text-center text-xs text-gray-500">三</div>
                                <div class="text-center text-xs text-gray-500">四</div>
                                <div class="text-center text-xs text-gray-500">五</div>
                                <div class="text-center text-xs text-gray-500">六</div>
                            </div>
                            <div class="grid grid-cols-7 gap-1">
                                <!-- 第一周 -->
                                <div class="calendar-day weekend">29</div>
                                <div class="calendar-day weekend">30</div>
                                <div class="calendar-day weekend">31</div>
                                <div class="calendar-day checked">1</div>
                                <div class="calendar-day checked">2</div>
                                <div class="calendar-day checked">3</div>
                                <div class="calendar-day checked weekend">4</div>
                                
                                <!-- 第二周 -->
                                <div class="calendar-day checked weekend">5</div>
                                <div class="calendar-day checked">6</div>
                                <div class="calendar-day checked">7</div>
                                <div class="calendar-day checked">8</div>
                                <div class="calendar-day checked">9</div>
                                <div class="calendar-day checked">10</div>
                                <div class="calendar-day checked weekend">11</div>
                                
                                <!-- 第三周 -->
                                <div class="calendar-day checked weekend">12</div>
                                <div class="calendar-day checked">13</div>
                                <div class="calendar-day checked">14</div>
                                <div class="calendar-day checked">15</div>
                                <div class="calendar-day checked">16</div>
                                <div class="calendar-day checked">17</div>
                                <div class="calendar-day checked weekend">18</div>
                                
                                <!-- 第四周 -->
                                <div class="calendar-day checked weekend">19</div>
                                <div class="calendar-day checked">20</div>
                                <div class="calendar-day checked">21</div>
                                <div class="calendar-day checked">22</div>
                                <div class="calendar-day checked">23</div>
                                <div class="calendar-day checked">24</div>
                                <div class="calendar-day checked weekend">25</div>
                                
                                <!-- 第五周 -->
                                <div class="calendar-day weekend">26</div>
                                <div class="calendar-day">27</div>
                                <div class="calendar-day">28</div>
                                <div class="calendar-day">29</div>
                                <div class="calendar-day">30</div>
                                <div class="calendar-day"></div>
                                <div class="calendar-day"></div>
                            </div>
                        </div>
                        
                        <!-- 打卡明细 -->
                        <div class="card bg-white p-4">
                            <h3 class="font-semibold text-gray-700 mb-3">打卡明细</h3>
                            <div class="space-y-3">
                                <!-- 打卡记录1 -->
                                <div class="flex justify-between items-center p-3 border border-gray-100 rounded-lg">
                                    <div>
                                        <p class="text-sm font-medium text-gray-800">11月25日 星期六</p>
                                        <div class="flex text-xs text-gray-500 mt-1">
                                            <span class="mr-3">上班: 08:30</span>
                                            <span>下班: --:--</span>
                                        </div>
                                    </div>
                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">正常</span>
                                </div>
                                
                                <!-- 打卡记录2 -->
                                <div class="flex justify-between items-center p-3 border border-gray-100 rounded-lg">
                                    <div>
                                        <p class="text-sm font-medium text-gray-800">11月24日 星期五</p>
                                        <div class="flex text-xs text-gray-500 mt-1">
                                            <span class="mr-3">上班: 08:28</span>
                                            <span>下班: 17:35</span>
                                        </div>
                                    </div>
                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">正常</span>
                                </div>
                                
                                <!-- 打卡记录3 -->
                                <div class="flex justify-between items-center p-3 border border-gray-100 rounded-lg">
                                    <div>
                                        <p class="text-sm font-medium text-gray-800">11月23日 星期四</p>
                                        <div class="flex text-xs text-gray-500 mt-1">
                                            <span class="mr-3">上班: 08:45</span>
                                            <span>下班: 17:40</span>
                                        </div>
                                    </div>
                                    <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">迟到</span>
                                </div>
                                
                                <!-- 打卡记录4 -->
                                <div class="flex justify-between items-center p-3 border border-gray-100 rounded-lg">
                                    <div>
                                        <p class="text-sm font-medium text-gray-800">11月22日 星期三</p>
                                        <div class="flex text-xs text-gray-500 mt-1">
                                            <span class="mr-3">上班: 08:25</span>
                                            <span>下班: 17:20</span>
                                        </div>
                                    </div>
                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">正常</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 底部导航 -->
                    <div class="tab-bar">
                        <div class="tab-item">
                            <i class="fas fa-home text-lg mb-1"></i>
                            <span>首页</span>
                        </div>
                        <div class="tab-item active">
                            <i class="fas fa-calendar-alt text-lg mb-1"></i>
                            <span>考勤</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-user text-lg mb-1"></i>
                            <span>我的</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-ellipsis-h text-lg mb-1"></i>
                            <span>更多</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页面4: 个人信息页 -->
            <div class="flex flex-col items-center">
                <h2 class="text-xl font-semibold text-gray-700 mb-4">个人信息页</h2>
                <div class="mobile-frame">
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex space-x-1">
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    
                    <div class="h-[calc(100%-104px)] overflow-y-auto">
                        <!-- 顶部信息 -->
                        <div class="gradient-bg text-white p-5">
                            <div class="flex justify-between items-start">
                                <div class="flex items-center">
                                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
                                         class="w-16 h-16 rounded-full border-2 border-white mr-4" alt="个人头像">
                                    <div>
                                        <h2 class="text-xl font-bold">张明</h2>
                                        <p class="text-sm opacity-80">肢体残疾 · 三级 · 在职</p>
                                    </div>
                                </div>
                                <button class="bg-white/20 rounded-full p-2">
                                    <i class="fas fa-camera text-white"></i>
                                </button>
                            </div>
                        </div>
                        
                        <!-- 详细信息 -->
                        <div class="p-4">
                            <!-- 基本信息 -->
                            <div class="card bg-white p-4 mb-4">
                                <h3 class="font-semibold text-gray-700 mb-3">基本信息</h3>
                                <div class="space-y-3 text-sm">
                                    <div class="flex justify-between">
                                        <p class="text-gray-500">姓名</p>
                                        <p class="text-gray-800">张明</p>
                                    </div>
                                    <div class="flex justify-between">
                                        <p class="text-gray-500">性别</p>
                                        <p class="text-gray-800">男</p>
                                    </div>
                                    <div class="flex justify-between">
                                        <p class="text-gray-500">年龄</p>
                                        <p class="text-gray-800">28岁</p>
                                    </div>
                                    <div class="flex justify-between">
                                        <p class="text-gray-500">身份证号</p>
                                        <p class="text-gray-800">440301********1234</p>
                                    </div>
                                    <div class="flex justify-between">
                                        <p class="text-gray-500">残疾证号</p>
                                        <p class="text-gray-800">CJZ202300123</p>
                                    </div>
                                    <div class="flex justify-between">
                                        <p class="text-gray-500">残疾类型</p>
                                        <p class="text-gray-800">肢体残疾 · 三级</p>
                                    </div>
                                    <div class="flex justify-between">
                                        <p class="text-gray-500">联系电话</p>
                                        <p class="text-gray-800">138****5678</p>
                                    </div>
                                    <div class="flex justify-between items-start">
                                        <p class="text-gray-500">联系地址</p>
                                        <p class="text-gray-800 text-right">广东省深圳市南山区科技园南区</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 银行卡信息 -->
                            <div class="card bg-white p-4 mb-4">
                                <div class="flex justify-between items-center mb-3">
                                    <h3 class="font-semibold text-gray-700">银行卡信息</h3>
                                    <button class="text-blue-500 text-sm">
                                        <i class="fas fa-plus mr-1"></i>添加
                                    </button>
                                </div>
                                <div class="bg-blue-50 rounded-lg p-4">
                                    <div class="flex justify-between items-center mb-2">
                                        <p class="font-medium text-gray-800">中国工商银行</p>
                                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">默认</span>
                                    </div>
                                    <p class="text-sm text-gray-600 mb-1">储蓄卡</p>
                                    <p class="text-lg font-bold text-gray-800">**** **** **** 5678</p>
                                    <p class="text-sm text-gray-600 mt-2">持卡人：张明</p>
                                </div>
                            </div>
                            
                            <!-- 证件照片 -->
                            <div class="card bg-white p-4">
                                <h3 class="font-semibold text-gray-700 mb-3">证件照片</h3>
                                <div class="grid grid-cols-2 gap-3">
                                    <div class="border border-gray-200 rounded-lg p-3 text-center">
                                        <div class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mx-auto mb-2">
                                            <i class="fas fa-id-card text-gray-400"></i>
                                        </div>
                                        <p class="text-xs text-gray-600">身份证正面</p>
                                    </div>
                                    <div class="border border-gray-200 rounded-lg p-3 text-center">
                                        <div class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mx-auto mb-2">
                                            <i class="fas fa-id-card text-gray-400"></i>
                                        </div>
                                        <p class="text-xs text-gray-600">身份证反面</p>
                                    </div>
                                    <div class="border border-gray-200 rounded-lg p-3 text-center">
                                        <div class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mx-auto mb-2">
                                            <i class="fas fa-file-certificate text-gray-400"></i>
                                        </div>
                                        <p class="text-xs text-gray-600">残疾证</p>
                                    </div>
                                    <div class="border border-gray-200 rounded-lg p-3 text-center">
                                        <div class="w-12 h-12 rounded-lg bg-gray-100 flex items-center justify-center mx-auto mb-2">
                                            <i class="fas fa-file-medical text-gray-400"></i>
                                        </div>
                                        <p class="text-xs text-gray-600">体检报告</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 底部导航 -->
                    <div class="tab-bar">
                        <div class="tab-item">
                            <i class="fas fa-home text-lg mb-1"></i>
                            <span>首页</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-calendar-alt text-lg mb-1"></i>
                            <span>考勤</span>
                        </div>
                        <div class="tab-item active">
                            <i class="fas fa-user text-lg mb-1"></i>
                            <span>我的</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-ellipsis-h text-lg mb-1"></i>
                            <span>更多</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页面5: 就业信息页 -->
            <div class="flex flex-col items-center">
                <h2 class="text-xl font-semibold text-gray-700 mb-4">就业信息页</h2>
                <div class="mobile-frame">
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex space-x-1">
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    
                    <div class="h-[calc(100%-104px)] overflow-y-auto p-4">
                        <!-- 当前就业状态 -->
                        <div class="card bg-white p-4 mb-4">
                            <h3 class="font-semibold text-gray-700 mb-3">当前就业状态</h3>
                            <div class="flex items-center mb-4">
                                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                    <i class="fas fa-building text-blue-500"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-800">阿里巴巴集团</p>
                                    <p class="text-sm text-gray-500">数据标注员</p>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 gap-3 text-sm">
                                <div>
                                    <p class="text-gray-500">入职日期</p>
                                    <p class="text-gray-800">2023-08-15</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">工作状态</p>
                                    <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">在职</span>
                                </div>
                                <div>
                                    <p class="text-gray-500">订单编号</p>
                                    <p class="text-gray-800">AL20230815001</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">薪资水平</p>
                                    <p class="text-gray-800">¥4,800/月</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 薪资信息 -->
                        <div class="card bg-white p-4 mb-4">
                            <h3 class="font-semibold text-gray-700 mb-3">薪资信息</h3>
                            <div class="space-y-3 text-sm">
                                <div class="flex justify-between">
                                    <p class="text-gray-500">基本工资</p>
                                    <p class="text-gray-800">¥3,500</p>
                                </div>
                                <div class="flex justify-between">
                                    <p class="text-gray-500">岗位津贴</p>
                                    <p class="text-gray-800">¥800</p>
                                </div>
                                <div class="flex justify-between">
                                    <p class="text-gray-500">绩效奖金</p>
                                    <p class="text-gray-800">¥500</p>
                                </div>
                                <div class="flex justify-between border-t border-gray-200 pt-2">
                                    <p class="text-gray-700 font-medium">实发工资</p>
                                    <p class="text-gray-800 font-bold">¥4,800</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 薪资记录 -->
                        <div class="card bg-white p-4 mb-4">
                            <div class="flex justify-between items-center mb-3">
                                <h3 class="font-semibold text-gray-700">薪资记录</h3>
                                <button class="text-blue-500 text-sm">查看全部</button>
                            </div>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center p-3 border border-gray-100 rounded-lg">
                                    <div>
                                        <p class="text-sm font-medium text-gray-800">2023年11月</p>
                                        <p class="text-xs text-gray-500">发放日期: 2023-12-05</p>
                                    </div>
                                    <p class="text-lg font-bold text-gray-800">¥4,800</p>
                                </div>
                                <div class="flex justify-between items-center p-3 border border-gray-100 rounded-lg">
                                    <div>
                                        <p class="text-sm font-medium text-gray-800">2023年10月</p>
                                        <p class="text-xs text-gray-500">发放日期: 2023-11-05</p>
                                    </div>
                                    <p class="text-lg font-bold text-gray-800">¥4,800</p>
                                </div>
                                <div class="flex justify-between items-center p-3 border border-gray-100 rounded-lg">
                                    <div>
                                        <p class="text-sm font-medium text-gray-800">2023年9月</p>
                                        <p class="text-xs text-gray-500">发放日期: 2023-10-08</p>
                                    </div>
                                    <p class="text-lg font-bold text-gray-800">¥4,650</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 就业历史 -->
                        <div class="card bg-white p-4">
                            <h3 class="font-semibold text-gray-700 mb-3">就业历史</h3>
                            <div class="space-y-4">
                                <div class="flex">
                                    <div class="flex flex-col items-center mr-3">
                                        <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                                        <div class="w-0.5 h-full bg-gray-200 mt-1"></div>
                                    </div>
                                    <div class="flex-1 pb-4">
                                        <p class="font-medium text-gray-800">阿里巴巴集团</p>
                                        <p class="text-sm text-gray-500 mb-1">数据标注员</p>
                                        <p class="text-xs text-gray-500">2023-08-15 至今</p>
                                    </div>
                                </div>
                                <div class="flex">
                                    <div class="flex flex-col items-center mr-3">
                                        <div class="w-3 h-3 rounded-full bg-gray-400"></div>
                                        <div class="w-0.5 h-full bg-gray-200 mt-1"></div>
                                    </div>
                                    <div class="flex-1 pb-4">
                                        <p class="font-medium text-gray-800">腾讯科技</p>
                                        <p class="text-sm text-gray-500 mb-1">内容审核员</p>
                                        <p class="text-xs text-gray-500">2023-03-10 - 2023-07-31</p>
                                    </div>
                                </div>
                                <div class="flex">
                                    <div class="flex flex-col items-center mr-3">
                                        <div class="w-3 h-3 rounded-full bg-gray-400"></div>
                                    </div>
                                    <div class="flex-1">
                                        <p class="font-medium text-gray-800">字节跳动</p>
                                        <p class="text-sm text-gray-500 mb-1">数据录入员</p>
                                        <p class="text-xs text-gray-500">2022-09-01 - 2023-02-28</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 底部导航 -->
                    <div class="tab-bar">
                        <div class="tab-item">
                            <i class="fas fa-home text-lg mb-1"></i>
                            <span>首页</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-calendar-alt text-lg mb-1"></i>
                            <span>考勤</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-user text-lg mb-1"></i>
                            <span>我的</span>
                        </div>
                        <div class="tab-item active">
                            <i class="fas fa-ellipsis-h text-lg mb-1"></i>
                            <span>更多</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 页面6: 设置页 -->
            <div class="flex flex-col items-center">
                <h2 class="text-xl font-semibold text-gray-700 mb-4">设置页</h2>
                <div class="mobile-frame">
                    <div class="status-bar">
                        <span>9:41</span>
                        <div class="flex space-x-1">
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    
                    <div class="h-[calc(100%-104px)] overflow-y-auto">
                        <!-- 个人信息 -->
                        <div class="p-4 border-b border-gray-200">
                            <div class="flex items-center mb-4">
                                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" 
                                     class="w-16 h-16 rounded-full mr-4" alt="个人头像">
                                <div>
                                    <h3 class="font-semibold text-gray-800">张明</h3>
                                    <p class="text-sm text-gray-500">肢体残疾 · 三级</p>
                                </div>
                            </div>
                            <div class="grid grid-cols-3 gap-3 text-center">
                                <div>
                                    <p class="text-xl font-bold text-gray-800">28</p>
                                    <p class="text-xs text-gray-500">本月出勤</p>
                                </div>
                                <div>
                                    <p class="text-xl font-bold text-gray-800">156</p>
                                    <p class="text-xs text-gray-500">累计出勤</p>
                                </div>
                                <div>
                                    <p class="text-xl font-bold text-gray-800">¥4,800</p>
                                    <p class="text-xs text-gray-500">本月薪资</p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 功能列表 -->
                        <div class="p-4">
                            <div class="space-y-1 mb-6">
                                <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                                            <i class="fas fa-user-edit text-blue-500"></i>
                                        </div>
                                        <span class="text-gray-700">修改个人信息</span>
                                    </div>
                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                </div>
                                <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                                            <i class="fas fa-shield-alt text-green-500"></i>
                                        </div>
                                        <span class="text-gray-700">账号与安全</span>
                                    </div>
                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                </div>
                                <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                                            <i class="fas fa-bell text-purple-500"></i>
                                        </div>
                                        <span class="text-gray-700">消息通知设置</span>
                                    </div>
                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-1 mb-6">
                                <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
                                            <i class="fas fa-question-circle text-yellow-500"></i>
                                        </div>
                                        <span class="text-gray-700">帮助中心</span>
                                    </div>
                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                </div>
                                <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                                            <i class="fas fa-file-alt text-indigo-500"></i>
                                        </div>
                                        <span class="text-gray-700">用户协议</span>
                                    </div>
                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                </div>
                                <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3">
                                            <i class="fas fa-lock text-pink-500"></i>
                                        </div>
                                        <span class="text-gray-700">隐私政策</span>
                                    </div>
                                    <i class="fas fa-chevron-right text-gray-400"></i>
                                </div>
                            </div>
                            
                            <div class="space-y-1">
                                <div class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50">
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
                                            <i class="fas fa-sign-out-alt text-red-500"></i>
                                        </div>
                                        <span class="text-gray-700">退出登录</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 底部导航 -->
                    <div class="tab-bar">
                        <div class="tab-item">
                            <i class="fas fa-home text-lg mb-1"></i>
                            <span>首页</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-calendar-alt text-lg mb-1"></i>
                            <span>考勤</span>
                        </div>
                        <div class="tab-item">
                            <i class="fas fa-user text-lg mb-1"></i>
                            <span>我的</span>
                        </div>
                        <div class="tab-item active">
                            <i class="fas fa-ellipsis-h text-lg mb-1"></i>
                            <span>更多</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-12 text-center text-gray-600">
            <p>人才小程序完整原型设计 - 基于数据库表结构设计的所有主要页面</p>
            <p class="mt-2">数据来源: allin_2025-11-25.sql</p>
        </div>
    </div>
</body>
</html>