LINXIVERSE
/
miniprogram-lineforfun


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - LineFunQueue</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="../css/custom.css">
    <style>
        .app-content {
            padding-bottom: 60px; /* 为底部导航栏留出空间 */
        }
        
        .room-item {
            transition: all 0.2s ease;
        }
        
        .room-item:hover {
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="iphone-frame">
        <!-- 引入状态栏 -->
        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
        
        <!-- 导航栏 -->
        <div class="app-navbar">
            <div class="title">个人中心</div>
            <div class="right-button">
                <i class="fas fa-cog text-gray-600"></i>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="app-content">
            <!-- 用户信息 -->
            <div class="bg-white p-4">
                <div class="flex items-center">
                    <div class="w-16 h-16 rounded-full overflow-hidden mr-4 border-2 border-primary">
                        <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&h=80&q=80" class="w-full h-full object-cover" alt="用户头像">
                    </div>
                    <div>
                        <h2 class="text-lg font-bold">林小明</h2>
                        <div class="flex items-center mt-1">
                            <span class="text-xs text-gray-500">玩家ID: 12345678</span>
                        </div>
                    </div>
                </div>
                
                <!-- 个人数据统计 -->
                <div class="flex justify-between mt-4 text-center">
                    <div class="flex-1">
                        <div class="text-lg font-bold">28</div>
                        <div class="text-xs text-gray-500">参与游戏</div>
                    </div>
                    <div class="flex-1 border-l border-r border-gray-200">
                        <div class="text-lg font-bold">12</div>
                        <div class="text-xs text-gray-500">创建房间</div>
                    </div>
                    <div class="flex-1">
                        <div class="text-lg font-bold">92%</div>
                        <div class="text-xs text-gray-500">解谜成功率</div>
                    </div>
                </div>
            </div>
            
            <!-- 我的房间 -->
            <div class="app-card mx-3 my-3">
                <div class="p-3 border-b border-gray-100 flex justify-between items-center">
                    <h3 class="font-medium">我的房间</h3>
                    <span class="text-xs text-primary">查看全部</span>
                </div>
                
                <!-- 有房间的视图 -->
                <div class="p-3">
                    <!-- 房间1 - 正在进行中 -->
                    <a href="room-waiting.html" class="block bg-white border border-gray-200 rounded-lg p-3 mb-2 room-item">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg overflow-hidden mr-3">
                                    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="海龟汤">
                                </div>
                                <div>
                                    <div class="font-medium text-sm">欢乐海龟汤</div>
                                    <div class="text-xs text-gray-500 mt-0.5">房间码: ABC123</div>
                                </div>
                            </div>
                            <div class="flex flex-col items-end">
                                <span class="text-xs bg-green-500 text-white px-1.5 py-0.5 rounded-full mb-1">进行中</span>
                                <span class="text-xs text-gray-500">3/10人</span>
                            </div>
                        </div>
                    </a>
                    
                    <!-- 房间2 - 等待中 -->
                    <a href="room-waiting.html" class="block bg-white border border-gray-200 rounded-lg p-3 room-item">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-lg overflow-hidden mr-3">
                                    <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-1.2.1&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="谁是卧底">
                                </div>
                                <div>
                                    <div class="font-medium text-sm">趣味谁是卧底</div>
                                    <div class="text-xs text-gray-500 mt-0.5">房间码: DEF456</div>
                                </div>
                            </div>
                            <div class="flex flex-col items-end">
                                <span class="text-xs bg-blue-500 text-white px-1.5 py-0.5 rounded-full mb-1">等待中</span>
                                <span class="text-xs text-gray-500">2/8人</span>
                            </div>
                        </div>
                    </a>
                </div>
                
                <!-- 创建/加入按钮 -->
                <div class="p-3 border-t border-gray-100">
                    <div class="flex space-x-2">
                        <a href="room-create.html" class="flex-1 py-2 bg-primary text-white text-sm rounded-md flex items-center justify-center">
                            <i class="fas fa-plus-circle mr-1"></i> 创建房间
                        </a>
                        <a href="room-join.html" class="flex-1 py-2 bg-gray-100 text-gray-700 text-sm rounded-md flex items-center justify-center">
                            <i class="fas fa-sign-in-alt mr-1"></i> 加入房间
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 功能菜单 - 简化版 -->
            <div class="app-card mx-3">
                <a href="#" class="flex items-center justify-between p-3 border-b border-gray-100">
                    <div class="flex items-center">
                        <i class="fas fa-history text-blue-500 w-5"></i>
                        <span class="ml-3 text-sm">游戏历史</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                </a>
                
                <a href="#" class="flex items-center justify-between p-3">
                    <div class="flex items-center">
                        <i class="fas fa-info-circle text-gray-500 w-5"></i>
                        <span class="ml-3 text-sm">关于我们</span>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                </a>
            </div>
            
            <!-- 最近游戏 -->
            <div class="mx-3 mt-3">
                <div class="flex justify-between items-center mb-2">
                    <h3 class="font-medium">历史游戏</h3>
                    <a href="#" class="text-xs text-primary">清空记录</a>
                </div>
                
                <div class="space-y-2">
                    <!-- 游戏记录1 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm">
                        <div class="p-3 flex">
                            <div class="w-12 h-12 rounded-lg overflow-hidden mr-3">
                                <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="海龟汤">
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between">
                                    <div class="font-medium text-sm">神秘的手表</div>
                                    <div class="text-xs bg-green-500 text-white px-1.5 py-0.5 rounded-full">已解谜</div>
                                </div>
                                <div class="text-xs text-gray-500 mt-1">
                                    <span class="mr-2">海龟汤</span>
                                    <span>昨天 15:30</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 游戏记录2 -->
                    <div class="bg-white rounded-lg overflow-hidden shadow-sm">
                        <div class="p-3 flex">
                            <div class="w-12 h-12 rounded-lg overflow-hidden mr-3">
                                <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="谁是卧底">
                            </div>
                            <div class="flex-1">
                                <div class="flex justify-between">
                                    <div class="font-medium text-sm">神秘词语</div>
                                    <div class="text-xs bg-red-500 text-white px-1.5 py-0.5 rounded-full">未完成</div>
                                </div>
                                <div class="text-xs text-gray-500 mt-1">
                                    <span class="mr-2">谁是卧底</span>
                                    <span>前天 20:15</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 版本信息 -->
            <div class="mt-5 text-center text-xs text-gray-400">
                <p>LineFunQueue v1.0</p>
                <p class="mt-1">© 2023 排队游戏小组</p>
            </div>
        </div>
        
        <!-- 引入底部导航栏 -->
        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
    </div>
</body>
</html>