117 lines
3.8 KiB
HTML
117 lines
3.8 KiB
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>
|