first commit
This commit is contained in:
101
王凯私活/TsxVueClassApi/bin/start-page.html
Normal file
101
王凯私活/TsxVueClassApi/bin/start-page.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!--
|
||||
~ Copyright (c) 2024. bmy
|
||||
~ Email:2271608011@qq.com
|
||||
~ Github:https://github.com/helpcode
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>启动页面</title>
|
||||
<meta id="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||||
name="viewport">
|
||||
<script src="https://at.alicdn.com/t/c/font_4318577_uqa853deiz.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: -150px;
|
||||
}
|
||||
|
||||
.main .icon {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.main p {
|
||||
font-size: 20px;
|
||||
font-weight: bolder;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.main .pg {
|
||||
height: 15px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
border-radius: 10px;
|
||||
background: #34495e;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
border-radius: 10px;
|
||||
background: #41b883;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main">
|
||||
<svg aria-hidden="true" class="icon">
|
||||
<use xlink:href="#json-Vue"></use>
|
||||
</svg>
|
||||
<p class="title">..</p>
|
||||
<progress class="pg" max="100" value="0"></progress>
|
||||
</div>
|
||||
<script>
|
||||
const pro = $('.pg');
|
||||
const title = $('.title');
|
||||
|
||||
async function getProgress() {
|
||||
return await fetch('/__progress').then(res => res.json());
|
||||
}
|
||||
|
||||
async function freshProgress() {
|
||||
let {progress} = await getProgress()
|
||||
let intProgress = ~~(progress * 100)
|
||||
pro.value = intProgress;
|
||||
title.innerText = `${intProgress}%`;
|
||||
if (progress < 1) {
|
||||
setTimeout(freshProgress, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function $(className) {
|
||||
return document.querySelector(className);
|
||||
}
|
||||
|
||||
freshProgress();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user