71 Star 989 Fork 359

GVPHuLaSpark/HuLa

Create your Gitee Account
Explore and code with more than 13.5 million developers,Free private repositories !:)
Sign up
文件
Clone or Download
index.html 3.38 KB
Copy Edit Raw Blame History
Dawn authored 2025-09-02 21:59 +08:00 . feat(mobile): ✨ add and improve mobile (#328)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HuLa</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<!-- 🎯 预加载图片资源(仅移动端) -->
<script>
if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
const preloadImages = ['/Mobile/1.png', '/Mobile/2.png', '/Mobile/3.png', '/Mobile/4.png']
preloadImages.forEach(src => {
const link = document.createElement('link')
link.rel = 'preload'
link.as = 'image'
link.href = src
document.head.appendChild(link)
})
}
</script>
<!-- iconpark图标库 -->
<script async src="/icon.js"></script>
<!-- 🧩 加载页样式 -->
<style id="loading-css">
#loading-page {
position: fixed;
inset: 0;
z-index: 9999;
background-image: url('/Mobile/2.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
transition: opacity 0.4s ease-out;
opacity: 1;
}
.bottom-bar {
position: absolute;
bottom: 40px;
display: flex;
gap: 16px;
align-items: center;
}
.rounded-14px {
border-radius: 14px;
}
.size-50px {
width: 50px;
height: 50px;
}
.w-300px {
width: 300px;
}
.h-200px {
height: 200px;
}
.w-78px {
width: 78px;
}
.h-40px {
height: 40px;
}
.mb-140px {
margin-bottom: 140px;
}
</style>
</head>
<body>
<!-- 🚀 加载页 DOM -->
<div id="loading-page">
<img src="/Mobile/4.png" alt="hula" class="w-300px h-200px mb-140px" />
<div class="bottom-bar">
<img src="/Mobile/3.png" alt="hula" class="size-50px rounded-14px" />
<img src="/Mobile/1.png" alt="hula" class="w-78px h-40px" />
</div>
</div>
<!-- Vue 应用挂载点 -->
<div id="app"></div>
<!-- 🎯 加载页逻辑控制(淡出 + 清理) -->
<script>
function isMobileDevice() {
return /Mobi|Android|iPhone/i.test(navigator.userAgent)
}
if (!isMobileDevice()) {
document.getElementById('loading-page')?.remove()
document.getElementById('loading-css')?.remove()
}
window.addEventListener('DOMContentLoaded', () => {
const interval = setInterval(() => {
const isMounted = document.getElementById('app')?.children.length > 0
if (isMounted) {
const loader = document.getElementById('loading-page')
if (loader) {
loader.style.opacity = '0'
setTimeout(() => {
loader.remove()
document.getElementById('loading-css')?.remove()
}, 450) // 等待 transition 完成后再移除
}
clearInterval(interval)
}
}, 100)
})
</script>
<!-- 🚀 Vue 应用入口 -->
<script type="module" src="/src/main.ts"></script>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
Rust
1
https://gitee.com/HuLaSpark/HuLa.git
git@gitee.com:HuLaSpark/HuLa.git
HuLaSpark
HuLa
HuLa
master

Search