LINXIVERSE
/
miniprogram-lineforfun


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							<!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; /* 为底部导航栏留出空间 */
        }
        
        /* 游戏卡片更紧凑的样式 */
        .game-card {
            margin-bottom: 10px;
        }
        
        .game-card .game-img {
            height: 20px;
        }
        
        .game-content {
            padding: 8px;
        }
    </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="far fa-bell"></i>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="app-content">
            <!-- 搜索栏 -->
            <div class="p-2 bg-white">
                <div class="relative">
                    <input type="text" class="app-input pl-10 py-1 text-sm" placeholder="搜索游戏...">
                    <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
                </div>
            </div>
            
            <!-- 分类导航 -->
            <div class="app-tabs flex text-sm">
                <div class="tab active">推荐</div>
                <div class="tab">解谜</div>
                <div class="tab">社交</div>
                <div class="tab">冒险</div>
            </div>
            
            <!-- 游戏列表 -->
            <div class="p-2">
                <h2 class="font-semibold mb-2 text-sm">热门游戏</h2>
                
                <!-- 海龟汤游戏卡片 -->
                <a href="game-detail.html" class="bg-white rounded-lg overflow-hidden shadow-sm block mb-2 game-card">
                    <div class="relative h-20">
                        <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=100&q=80" class="w-full h-full object-cover" alt="海龟汤">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-2">
                            <div class="text-white font-bold text-sm">海龟汤</div>
                            <div class="flex items-center text-white/80 text-xs">
                                <span class="mr-2"><i class="fas fa-users mr-1"></i>3-10人</span>
                                <span><i class="fas fa-clock mr-1"></i>30-60分钟</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-2 game-content">
                        <div class="flex items-center justify-between">
                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded">解谜</span>
                            <div class="text-amber-400 text-xs flex items-center">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                                <span class="text-gray-500 ml-1">4.8</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 你画我猜游戏卡片 -->
                <a href="#" class="bg-white rounded-lg overflow-hidden shadow-sm block mb-2 game-card">
                    <div class="relative h-20">
                        <img src="https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=100&q=80" class="w-full h-full object-cover" alt="你画我猜">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-2">
                            <div class="text-white font-bold text-sm">你画我猜</div>
                            <div class="flex items-center text-white/80 text-xs">
                                <span class="mr-2"><i class="fas fa-users mr-1"></i>2-8人</span>
                                <span><i class="fas fa-clock mr-1"></i>15-30分钟</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-2 game-content">
                        <div class="flex items-center justify-between">
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded">社交</span>
                            <div class="text-amber-400 text-xs flex items-center">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                                <span class="text-gray-500 ml-1">4.2</span>
                            </div>
                        </div>
                    </div>
                </a>
                
                <!-- 谁是卧底游戏卡片 -->
                <a href="#" class="bg-white rounded-lg overflow-hidden shadow-sm block mb-2 game-card">
                    <div class="relative h-20">
                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=100&q=80" class="w-full h-full object-cover" alt="谁是卧底">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-2">
                            <div class="text-white font-bold text-sm">谁是卧底</div>
                            <div class="flex items-center text-white/80 text-xs">
                                <span class="mr-2"><i class="fas fa-users mr-1"></i>5-10人</span>
                                <span><i class="fas fa-clock mr-1"></i>20-40分钟</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-2 game-content">
                        <div class="flex items-center justify-between">
                            <span class="bg-orange-100 text-orange-800 text-xs px-2 py-0.5 rounded">推理</span>
                            <div class="text-amber-400 text-xs flex items-center">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <span class="text-gray-500 ml-1">4.9</span>
                            </div>
                        </div>
                    </div>
                </a>
            </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>
    
    <script>
        // 为了演示，添加活跃状态
        document.addEventListener("DOMContentLoaded", function() {
            // 活跃第一个标签
            document.querySelectorAll('.app-tabs .tab').forEach((tab, index) => {
                tab.addEventListener('click', function() {
                    document.querySelectorAll('.app-tabs .tab').forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>