<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Layout Demo - 这是一个技术实践分支，仅用于测试使用</title>
<!-- 加载框架样式 -->
<link rel="stylesheet" href="static/plugs/core/vue.element.plus.css">
<!-- 这页面配色还可以
https://microsoftedgewelcome.microsoft.com/zh-cn/update/96?channel=stable&version=96.0.1054.29&form=MT002S
-->
<!-- 加载基础框架组件 -->
<script src="static/plugs/core/vue.min.js"></script>
<script src="static/plugs/core/vue.router.js"></script>
<script src="static/plugs/core/vue.sfc.loader.js"></script>
<script src="static/plugs/core/vue.element.plus.js"></script>
<script src="static/plugs/less/less.min.js"></script>
<!-- 加载基础框架模块 -->
<script type="module" src="static/app.js"></script>
<style>
@keyframes shadow {
0%,
100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
@keyframes loading {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
border-bottom-right-radius: 40px;
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
.think-page-loader {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1999;
position: fixed;
text-align: center;
background-color: #EFEFEF;
}
.think-page-loader .loader {
top: 50%;
width: 50px;
height: 50px;
margin: -35px 0 0 -35px;
z-index: 999999;
display: inline-block;
position: fixed;
background-color: #EFEFEF;
}
.think-page-loader .loader:before {
top: 59px;
left: 0;
width: 50px;
height: 7px;
opacity: 0.1;
content: "";
position: absolute;
border-radius: 50%;
background-color: #000;
animation: shadow .5s linear infinite;
}
.think-page-loader .loader:after {
top: 0;
left: 0;
width: 50px;
height: 50px;
content: "";
position: absolute;
border-radius: 3px;
background-color: #5FB878;
animation: loading .5s linear infinite;
}
</style>
</head>
<body>
<div class="think-page-loader">
<div class="loader"></div>
</div>
<router-view></router-view>
</body>
</html>