79 lines
4.2 KiB
HTML
79 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<!-- 移动端视口设置（适配企微 WebView） -->
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||
|
|
<!-- CSP 由 nginx HTTP 头统一管理（移除 meta CSP 避免双 CSP 冲突导致企微 WebView 脚本加载失败） -->
|
||
|
|
<!-- 企微 JS-SDK（静态引入，确保在 Vue 应用加载前 window.wx 就绪；比动态创建 script 更可靠） -->
|
||
|
|
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
|
||
|
|
<!-- 页面标题 -->
|
||
|
|
<title>智能IT服务</title>
|
||
|
|
<!-- 首屏骨架屏样式 v0.5.2 强化版 -->
|
||
|
|
<style>
|
||
|
|
html, body { margin: 0; padding: 0; height: 100%; background: #f7f8fa; }
|
||
|
|
#app-skeleton {
|
||
|
|
position: fixed; inset: 0;
|
||
|
|
display: flex; flex-direction: column;
|
||
|
|
align-items: center; justify-content: center;
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
|
||
|
|
color: #969799;
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
#app-skeleton .logo {
|
||
|
|
width: 48px; height: 48px; border-radius: 10px;
|
||
|
|
background: linear-gradient(135deg, #07C160 0%, #07C160 100%);
|
||
|
|
margin-bottom: 20px;
|
||
|
|
box-shadow: 0 4px 16px rgba(7, 193, 96, 0.25);
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -1px;
|
||
|
|
animation: pulse 1.5s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
#app-skeleton .title {
|
||
|
|
font-size: 20px; font-weight: 700; margin-bottom: 8px;
|
||
|
|
background: linear-gradient(135deg, #07C160, #07C160);
|
||
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
#app-skeleton .subtitle { font-size: 14px; color: #969799; margin-bottom: 28px; }
|
||
|
|
#app-skeleton .spinner {
|
||
|
|
width: 28px; height: 28px;
|
||
|
|
border: 3px solid #ebedf0;
|
||
|
|
border-top-color: #07C160;
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: spin 0.8s linear infinite;
|
||
|
|
}
|
||
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
|
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } }
|
||
|
|
/* v0.5.2 强化:不再依赖 :empty 选择器(部分浏览器/Vue mount 太快会失效) */
|
||
|
|
/* 改用 body.app-loaded 类名,由 main.ts 挂载后主动添加 */
|
||
|
|
body.app-loaded #app-skeleton { display: none !important; }
|
||
|
|
</style>
|
||
|
|
<script type="module" crossorigin src="/h5/assets/index-XIkjm-GD.js"></script>
|
||
|
|
<link rel="stylesheet" crossorigin href="/h5/assets/index-apG55QSk.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- 非企微环境拦截 -->
|
||
|
|
<script>
|
||
|
|
(function(){
|
||
|
|
var _ok = /^(localhost|127\.0\.0\.1)(:\d+)?$/.test(location.hostname) || navigator.userAgent.toLowerCase().indexOf('wxwork') > -1
|
||
|
|
if (!_ok) {
|
||
|
|
document.open()
|
||
|
|
document.write('<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>仅限企业微信访问</title><style>*{margin:0;padding:0;box-sizing:border-box}body{background:#f7f8fa;display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,sans-serif;text-align:center;padding:40px}.icon{font-size:60px;margin-bottom:24px}.title{font-size:20px;font-weight:600;color:#323233;margin-bottom:12px}.desc{font-size:14px;color:#969799;line-height:1.8}</style></head><body><div><div class="icon">🔒</div><div class="title">仅限企业微信访问</div><div class="desc">请在<strong>企业微信工作台</strong>中打开<br>「智能IT服务」访问此页面</div></div></body></html>')
|
||
|
|
document.close()
|
||
|
|
}
|
||
|
|
})()
|
||
|
|
</script>
|
||
|
|
<!-- Vue 应用挂载点 -->
|
||
|
|
<div id="app"></div>
|
||
|
|
<!-- 首屏骨架屏(JS 加载期间显示,挂载后自动隐藏) v0.5.2 -->
|
||
|
|
<div id="app-skeleton">
|
||
|
|
<div class="logo">IT</div>
|
||
|
|
<div class="title">智能IT服务</div>
|
||
|
|
<div class="subtitle">正在加载...</div>
|
||
|
|
<div class="spinner"></div>
|
||
|
|
</div>
|
||
|
|
<!-- 入口脚本 -->
|
||
|
|
</body>
|
||
|
|
</html>
|