LINXIVERSE
/
prototype-design


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!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">
</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="left-button" onclick="history.back()">
                <i class="fas fa-chevron-left mr-1"></i> 返回
            </div>
            <div class="title">高级会员</div>
        </div>
        
        <!-- 内容区域 -->
        <div class="app-content">
            <!-- 会员banner -->
            <div class="relative">
                <img src="https://images.unsplash.com/photo-1579621970795-87facc2f976d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=200&q=80" class="w-full h-48 object-cover" alt="高级会员">
                <div class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
                    <h2 class="text-white text-2xl font-bold">LineFun 高级会员</h2>
                    <p class="text-white/80 text-sm mt-1">解锁更多专属游戏功能和特权</p>
                </div>
            </div>
            
            <!-- 会员计划 -->
            <div class="bg-white p-4">
                <h3 class="font-medium text-lg mb-4">选择会员计划</h3>
                
                <!-- 会员选项 -->
                <div class="space-y-4">
                    <!-- 月度计划 -->
                    <div class="border border-secondary-orange rounded-lg p-4 relative">
                        <div class="absolute top-0 right-0 bg-secondary-orange text-white text-xs px-2 py-1 rounded-bl-lg">推荐</div>
                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="font-medium">月度会员</h4>
                                <div class="text-xs text-gray-500 mt-1">每月自动续费，可随时取消</div>
                            </div>
                            <div class="text-right">
                                <div class="text-xl font-bold text-secondary-orange">¥18.00</div>
                                <div class="text-xs text-gray-500">每月</div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="app-button secondary w-full">立即开通</button>
                        </div>
                    </div>
                    
                    <!-- 季度计划 -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="font-medium">季度会员</h4>
                                <div class="text-xs text-gray-500 mt-1">每季度自动续费，可随时取消</div>
                            </div>
                            <div class="text-right">
                                <div class="text-xl font-bold">¥45.00</div>
                                <div class="text-xs text-gray-500">每季度</div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="app-button outline w-full">开通</button>
                        </div>
                    </div>
                    
                    <!-- 年度计划 -->
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex justify-between items-center">
                            <div>
                                <h4 class="font-medium">年度会员</h4>
                                <div class="text-xs text-gray-500 mt-1">一次性支付，尊享12个月高级特权</div>
                            </div>
                            <div class="text-right">
                                <div class="flex items-center">
                                    <div class="text-sm line-through text-gray-400 mr-2">¥216</div>
                                    <div class="text-xl font-bold">¥158.00</div>
                                </div>
                                <div class="text-xs text-green-500">节省 27%</div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button class="app-button outline w-full">开通</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 会员权益 -->
            <div class="app-card mx-4 my-4">
                <div class="p-4">
                    <h3 class="font-medium text-lg mb-4">会员权益</h3>
                    
                    <div class="space-y-4">
                        <!-- 权益1 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-lightbulb text-blue-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">智能提示系统</div>
                                <div class="text-sm text-gray-500 mt-1">解谜游戏中获得AI辅助提示，提高解谜效率</div>
                            </div>
                        </div>
                        
                        <!-- 权益2 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-ad text-green-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">无广告体验</div>
                                <div class="text-sm text-gray-500 mt-1">彻底移除游戏中的所有广告，畅享无打扰体验</div>
                            </div>
                        </div>
                        
                        <!-- 权益3 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-gift text-purple-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">专属游戏道具</div>
                                <div class="text-sm text-gray-500 mt-1">获得专属游戏道具，在各种游戏中获得优势</div>
                            </div>
                        </div>
                        
                        <!-- 权益4 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-gamepad text-yellow-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">高级游戏内容</div>
                                <div class="text-sm text-gray-500 mt-1">解锁更多高级谜题和游戏内容，提前体验新游戏</div>
                            </div>
                        </div>
                        
                        <!-- 权益5 -->
                        <div class="flex">
                            <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-user-shield text-red-500"></i>
                            </div>
                            <div>
                                <div class="font-medium">专属客服支持</div>
                                <div class="text-sm text-gray-500 mt-1">获得优先客服支持，问题解决更快速</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 常见问题 -->
            <div class="app-card mx-4 mb-4">
                <div class="p-4">
                    <h3 class="font-medium text-lg mb-4">常见问题</h3>
                    
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-sm">会员可以在多少设备上使用？</h4>
                            <p class="text-sm text-gray-500 mt-1">会员可以在最多3台设备上同时使用，超过设备数量将自动登出最早的设备。</p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-sm">如何取消自动续费？</h4>
                            <p class="text-sm text-gray-500 mt-1">在个人中心 > 会员管理中可以随时取消自动续费，当前会员有效期内仍可享受会员权益。</p>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-sm">是否支持退款？</h4>
                            <p class="text-sm text-gray-500 mt-1">会员服务开通后不支持退款，建议先试用月度会员再考虑长期订阅。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部购买按钮 -->
            <div class="p-4 sticky bottom-0 bg-white border-t border-gray-200">
                <button class="app-button secondary w-full flex justify-center items-center">
                    <i class="fas fa-crown mr-2"></i>
                    立即开通月度会员 ¥18/月
                </button>
                <div class="text-center text-xs text-gray-500 mt-2">
                    开通即同意<a href="#" class="text-primary">《会员服务协议》</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>