feat: 修复合并冲突带来的全局loading
This commit is contained in:
parent
a09461284e
commit
f41789e2b4
117
index.html
117
index.html
@ -6,117 +6,6 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title><%- title %></title>
|
<title><%- title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
<div id="app">
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body,
|
|
||||||
#app {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.loading-box {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.loading-box .loading-wrap {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 98px;
|
|
||||||
}
|
|
||||||
.dot {
|
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: inline-block;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
font-size: 32px;
|
|
||||||
transform: rotate(45deg);
|
|
||||||
animation: ant-rotate 1.2s infinite linear;
|
|
||||||
}
|
|
||||||
.dot i {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
background-color: #409eff;
|
|
||||||
border-radius: 100%;
|
|
||||||
opacity: 0.3;
|
|
||||||
transform: scale(0.75);
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
animation: ant-spin-move 1s infinite linear alternate;
|
|
||||||
}
|
|
||||||
.dot i:nth-child(1) {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.dot i:nth-child(2) {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
animation-delay: 0.4s;
|
|
||||||
}
|
|
||||||
.dot i:nth-child(3) {
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
animation-delay: 0.8s;
|
|
||||||
}
|
|
||||||
.dot i:nth-child(4) {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
animation-delay: 1.2s;
|
|
||||||
}
|
|
||||||
@keyframes ant-rotate {
|
|
||||||
to {
|
|
||||||
transform: rotate(405deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes ant-spin-move {
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="loading-box">
|
|
||||||
<div class="loading-wrap">
|
|
||||||
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
const globalState = JSON.parse(window.localStorage.getItem("GlobalState"));
|
|
||||||
if (globalState) {
|
|
||||||
const color = globalState.themeConfig.primary;
|
|
||||||
const isDark = globalState.themeConfig.isDark;
|
|
||||||
const dot = document.querySelectorAll(".dot i");
|
|
||||||
const html = document.querySelector("html");
|
|
||||||
dot.forEach(item => (item.style.background = color));
|
|
||||||
if (isDark) html.style.background = "#141414";
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script type="module" src="/src/main.ts"></script>
|
|
||||||
<script
|
|
||||||
type="text/javascript"
|
|
||||||
src="<%= BASE_URL %>lib/include-lib.js?time=20210329"
|
|
||||||
libpath="<%= BASE_URL %>lib/"
|
|
||||||
include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,cesium,mars3d,mars3d-widget"
|
|
||||||
></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title><%- title %></title>
|
|
||||||
</head>
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<style>
|
<style>
|
||||||
@ -218,5 +107,11 @@
|
|||||||
<!-- 用于RSA加密 -->
|
<!-- 用于RSA加密 -->
|
||||||
<script src="/jsWebControl-1.0.0.min.js"></script>
|
<script src="/jsWebControl-1.0.0.min.js"></script>
|
||||||
<!-- 用于RSA加密 -->
|
<!-- 用于RSA加密 -->
|
||||||
|
<script
|
||||||
|
type="text/javascript"
|
||||||
|
src="<%= BASE_URL %>lib/include-lib.js?time=20210329"
|
||||||
|
libpath="<%= BASE_URL %>lib/"
|
||||||
|
include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,nprogress,toastr,admui,turf,cesium,mars3d,mars3d-widget"
|
||||||
|
></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -65,7 +65,7 @@ const loginRules = reactive({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const loginForm = reactive<Login.ReqLoginForm>({ account: "admin", showPassword: "123456" });
|
const loginForm = reactive<Login.ReqLoginForm>({ account: "", showPassword: "" });
|
||||||
const login = (formEl: FormInstance | undefined) => {
|
const login = (formEl: FormInstance | undefined) => {
|
||||||
if (!formEl) return;
|
if (!formEl) return;
|
||||||
formEl.validate(async (valid, params) => {
|
formEl.validate(async (valid, params) => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user