all-project/mobile/index.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta
            name="viewport"
            content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
        />
        <title>校园管理移动端</title>

        <!-- 针对移动端的优化 -->
        <meta name="format-detection" content="telephone=no" />
        <meta name="format-detection" content="email=no" />
        <meta name="format-detection" content="address=no" />

        <!-- 苹果设备配置 -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta name="apple-mobile-web-app-title" content="校园管理" />

        <!-- 安卓设备配置 -->
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="theme-color" content="#3c9cff" />

        <!-- SEO优化 -->
        <meta name="description" content="校园管理移动端应用" />
        <meta name="keywords" content="校园管理,移动端,uniapp" />
        <meta name="author" content="校园管理系统" />

        <style>
            /* 预加载样式 */
            .loading-container {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                z-index: 9999;
            }

            .loading-logo {
                width: 80px;
                height: 80px;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 16px;
                margin-bottom: 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
                color: #fff;
                font-weight: bold;
            }

            .loading-text {
                color: #fff;
                font-size: 16px;
                margin-bottom: 32px;
            }

            .loading-spinner {
                width: 32px;
                height: 32px;
                border: 3px solid rgba(255, 255, 255, 0.3);
                border-top: 3px solid #fff;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }

            @keyframes spin {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <noscript>
            <strong>很抱歉，校园管理移动端需要启用JavaScript才能正常运行。</strong>
        </noscript>

        <!-- 预加载界面 -->
        <div id="loading" class="loading-container">
            <div class="loading-logo">校</div>
            <div class="loading-text">校园管理移动端</div>
            <div class="loading-spinner"></div>
        </div>

        <div id="app"></div>

        <script>
            // 隐藏预加载界面
            window.addEventListener('load', function () {
                setTimeout(function () {
                    const loading = document.getElementById('loading');
                    if (loading) {
                        loading.style.opacity = '0';
                        loading.style.transition = 'opacity 0.3s ease';
                        setTimeout(function () {
                            loading.style.display = 'none';
                        }, 300);
                    }
                }, 1000);
            });
        </script>
    </body>
</html>