<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 优化viewport设置，禁用缩放，最大宽度设备宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>百度排名数据报表 - 冠一软件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        [v-cloak] {
            display: none;
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        /* 移动端自适应高度计算 */
        .report-container {
            height: calc(100vh - 180px);
            min-height: 500px;
        }
        
        @media (max-width: 768px) {
            .report-container {
                height: calc(100vh - 420px);
                min-height: 400px;
            }
        }
        
        @media (max-width: 640px) {
            .report-container {
                height: calc(100vh - 480px);
                min-height: 350px;
            }
        }
        
        .iframe-wrapper {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            background: white;
        }
        
        /* 移动端iframe优化 */
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        @media (max-width: 640px) {
            iframe {
                border-radius: 0;
            }
        }
        
        .logo-container {
            animation: fadeInDown 0.8s ease-out;
        }
        
        .content-wrapper {
            animation: fadeInUp 0.8s ease-out;
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .status-badge {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }
        
        .loading-spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 移动端文字大小优化 */
        @media (max-width: 640px) {
            .mobile-text-sm {
                font-size: 0.875rem;
            }
            .mobile-text-base {
                font-size: 1rem;
            }
            .mobile-text-lg {
                font-size: 1.125rem;
            }
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app" v-cloak>
        <!-- Header Section -->
        <header class="gradient-bg text-white shadow-lg">
            <!-- 移动端padding优化 -->
            <div class="container mx-auto px-3 sm:px-4 py-4 sm:py-6">
                <!-- 移动端flex布局优化，小屏幕垂直排列 -->
                <div class="logo-container flex flex-col sm:flex-row items-center justify-between gap-3 sm:gap-0">
                    <div class="flex items-center space-x-2 sm:space-x-4 w-full sm:w-auto">
                        <!-- 移动端logo尺寸调整 -->
                        <img 
                            :src="logoUrl" 
                            alt="冠一软件" 
                            class="h-8 sm:h-12 w-auto filter drop-shadow-lg"
                            @error="handleLogoError"
                        >
                        <div class="flex-1">
                            <!-- 移动端标题字体大小响应式 -->
                            <h1 class="text-lg sm:text-2xl font-bold mobile-text-lg">百度排名数据报表</h1>
                            <p class="text-xs sm:text-sm text-purple-100 mt-1 mobile-text-sm">实时监控 · 数据分析 · 专业报告</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2 status-badge">
                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
                        <span class="text-xs sm:text-sm mobile-text-sm">实时在线</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <!-- 移除容器宽度限制，让iframe可以全宽显示 -->
        <main class="w-full px-3 sm:px-4 py-4 sm:py-8">
            <div class="content-wrapper">
                <!-- Info Cards -->
                <!-- 移动端卡片间距优化 -->
                <div class="container mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4 mb-4 sm:mb-8">
                        <!-- 移动端卡片padding优化 -->
                        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6 border-l-4 border-blue-500">
                            <div class="flex items-center">
                                <!-- 移动端图标尺寸调整 -->
                                <svg class="w-6 h-6 sm:w-8 sm:h-8 text-blue-500 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                </svg>
                                <div>
                                    <p class="text-gray-600 text-xs sm:text-sm mobile-text-sm">数据更新</p>
                                    <p class="text-base sm:text-xl font-bold text-gray-800 mobile-text-base">{{ currentTime }}</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6 border-l-4 border-green-500">
                            <div class="flex items-center">
                                <svg class="w-6 h-6 sm:w-8 sm:h-8 text-green-500 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                                </svg>
                                <div>
                                    <p class="text-gray-600 text-xs sm:text-sm mobile-text-sm">报表状态</p>
                                    <p class="text-base sm:text-xl font-bold text-green-600 mobile-text-base">{{ reportStatus }}</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-lg shadow-md p-4 sm:p-6 border-l-4 border-purple-500">
                            <div class="flex items-center">
                                <svg class="w-6 h-6 sm:w-8 sm:h-8 text-purple-500 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <div>
                                    <p class="text-gray-600 text-xs sm:text-sm mobile-text-sm">数据来源</p>
                                    <p class="text-base sm:text-xl font-bold text-gray-800 mobile-text-base">百度统计</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Report Frame -->
                <!-- 报表容器全宽显示，不受最大宽度限制 -->
                <div class="w-full bg-white rounded-lg shadow-lg p-3 sm:p-6">
                    <!-- 移动端按钮布局优化，小屏幕垂直排列 -->
                    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-3 sm:mb-4 gap-3 sm:gap-0">
                        <h2 class="text-base sm:text-xl font-bold text-gray-800 flex items-center mobile-text-base">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"></path>
                            </svg>
                            排名数据详情
                        </h2>
                        <!-- 移动端按钮全宽显示 -->
                        <button 
                            @click="refreshReport"
                            class="flex items-center justify-center w-full sm:w-auto px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors duration-200 shadow-md text-sm sm:text-base"
                            :disabled="isRefreshing"
                        >
                            <svg 
                                class="w-4 h-4 mr-2" 
                                :class="{ 'animate-spin': isRefreshing }"
                                fill="none" 
                                stroke="currentColor" 
                                viewBox="0 0 24 24"
                            >
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            {{ isRefreshing ? '刷新中...' : '刷新报表' }}
                        </button>
                    </div>
                    
                    <div class="report-container iframe-wrapper relative">
                        <div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-gray-100 z-10">
                            <div class="text-center">
                                <div class="loading-spinner mx-auto mb-4"></div>
                                <p class="text-gray-600 text-sm sm:text-base mobile-text-sm">正在加载报表数据...</p>
                            </div>
                        </div>
                        <iframe 
                            :src="reportUrl"
                            @load="handleIframeLoad"
                            title="百度排名报表"
                            allowfullscreen
                        ></iframe>
                    </div>
                </div>
            </div>
        </main>

        <!-- Footer -->
        <!-- 移动端footer padding优化 -->
        <footer class="bg-white border-t mt-6 sm:mt-12 py-4 sm:py-6">
            <div class="container mx-auto px-3 sm:px-4 text-center text-gray-600">
                <p class="text-xs sm:text-sm mobile-text-sm">
                    © {{ currentYear }} 冠一软件 | 专业的数据分析与报表服务
                </p>
                <p class="text-xs mt-2 text-gray-500">
                    数据实时更新 · 安全可靠 · 专业服务
                </p>
            </div>
        </footer>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    logoUrl: 'https://www.guan1.com/wp-content/uploads/2025/12/%E5%86%A0%E4%B8%80%E8%BD%AF%E4%BB%B6.svg',
                    reportUrl: 'https://zmt.e-baixing.com/data?code=WZD6J08B8R',
                    currentTime: '',
                    currentYear: new Date().getFullYear(),
                    reportStatus: '正常运行',
                    loading: true,
                    isRefreshing: false
                }
            },
            mounted() {
                this.updateTime();
                setInterval(this.updateTime, 1000);
            },
            methods: {
                updateTime() {
                    const now = new Date();
                    const year = now.getFullYear();
                    const month = String(now.getMonth() + 1).padStart(2, '0');
                    const day = String(now.getDate()).padStart(2, '0');
                    const hours = String(now.getHours()).padStart(2, '0');
                    const minutes = String(now.getMinutes()).padStart(2, '0');
                    const seconds = String(now.getSeconds()).padStart(2, '0');
                    this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                },
                handleIframeLoad() {
                    this.loading = false;
                    this.isRefreshing = false;
                },
                handleLogoError() {
                    console.error('Logo加载失败');
                },
                refreshReport() {
                    this.isRefreshing = true;
                    this.loading = true;
                    const iframe = document.querySelector('iframe');
                    iframe.src = iframe.src;
                }
            }
        }).mount('#app');
    </script>
</body>
</html>
