998211c483
- 从服务器拉取完整代码 - 按框架规范整理项目结构 - 配置 Drone CI 测试环境部署 - 包含后端(FastAPI)、前端(Vue3)、管理端 技术栈: Vue3 + TypeScript + FastAPI + MySQL
148 lines
5.0 KiB
HTML
148 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||
<link rel="manifest" href="/manifest.json" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||
<meta name="description" content="<%- description %>" />
|
||
<meta name="keywords" content="考培练,智能学习,在线教育,AI陪练" />
|
||
<meta name="author" content="考培练系统" />
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="<%- title %>" />
|
||
<meta property="og:description" content="<%- description %>" />
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image" />
|
||
<meta property="twitter:title" content="<%- title %>" />
|
||
<meta property="twitter:description" content="<%- description %>" />
|
||
|
||
<!-- 防止页面缩放 -->
|
||
<meta name="format-detection" content="telephone=no" />
|
||
<meta name="msapplication-tap-highlight" content="no" />
|
||
|
||
<!-- PWA 相关 -->
|
||
<meta name="theme-color" content="#667eea" />
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||
<meta name="apple-mobile-web-app-title" content="<%- title %>" />
|
||
|
||
<!-- 内容安全策略：自动升级不安全请求为HTTPS -->
|
||
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
|
||
|
||
<title><%- title %></title>
|
||
|
||
<!-- 预加载关键资源 -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
|
||
<!-- 页面加载动画样式 -->
|
||
<style>
|
||
#loading {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
color: white;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
}
|
||
|
||
.loading-logo {
|
||
width: 80px;
|
||
height: 80px;
|
||
margin-bottom: 20px;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
.loading-text {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||
border-top: 3px solid white;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { transform: scale(1); opacity: 1; }
|
||
50% { transform: scale(1.05); opacity: 0.8; }
|
||
}
|
||
|
||
.fade-out {
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease-out;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 页面加载动画 -->
|
||
<div id="loading">
|
||
<div class="loading-logo">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z" />
|
||
</svg>
|
||
</div>
|
||
<div class="loading-text">考培练系统</div>
|
||
<div class="loading-spinner"></div>
|
||
</div>
|
||
|
||
<!-- 应用容器 -->
|
||
<div id="app"></div>
|
||
|
||
<!-- 不支持 JavaScript 的提示 -->
|
||
<noscript>
|
||
<div style="text-align: center; padding: 50px; font-family: Arial, sans-serif;">
|
||
<h2>需要启用 JavaScript</h2>
|
||
<p>请启用浏览器的 JavaScript 功能以正常使用本系统。</p>
|
||
</div>
|
||
</noscript>
|
||
|
||
<script type="module" src="/src/main.ts"></script>
|
||
|
||
<!-- 隐藏加载动画的脚本 -->
|
||
<script>
|
||
// 页面加载完成后隐藏加载动画
|
||
window.addEventListener('load', function() {
|
||
const loading = document.getElementById('loading');
|
||
if (loading) {
|
||
loading.classList.add('fade-out');
|
||
setTimeout(() => {
|
||
loading.style.display = 'none';
|
||
}, 500);
|
||
}
|
||
});
|
||
|
||
// 如果页面加载时间过长，也要隐藏加载动画
|
||
setTimeout(function() {
|
||
const loading = document.getElementById('loading');
|
||
if (loading && !loading.classList.contains('fade-out')) {
|
||
loading.classList.add('fade-out');
|
||
setTimeout(() => {
|
||
loading.style.display = 'none';
|
||
}, 500);
|
||
}
|
||
}, 10000); // 10秒后强制隐藏
|
||
</script>
|
||
</body>
|
||
</html> |