<!DOCTYPE html>
<html lang="zh_CN" id="htmlRoot">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title><%= title %></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<!-- <link rel="preload" as="script" href="/js/config.js"> -->
<link rel="icon" id="faviconIcon" href="/logo.png" />
<!-- 全局配置 -->
<script src="/js/config.js"></script>
<script src="/js/liveplayer-lib.min.js"></script>
<script src="/js/webrtcstreamer.js"></script>
<script src="/js/adapter.min.js"></script>
<script type="text/javascript" src="http://182.92.126.35:9050/web-apps/apps/api/documents/api.js"></script>
</head>
<body style="background-color: #09172C">
<script>
(() => {
var htmlRoot = document.getElementById('htmlRoot');
var theme = window.localStorage.getItem('__APP__DARK__MODE__');
if (htmlRoot && theme) {
htmlRoot.setAttribute('data-theme', theme);
theme = htmlRoot = null;
}
})();
</script>
<div id="app">
<style>
html[data-theme='dark'] .app-loading {
background-color: #2c344a;
}
html[data-theme='dark'] .app-loading .app-loading-title {
color: rgba(255, 255, 255, 0.85);
}
.app-loading {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
/* background-color: #f4f7f9; */
background-image: url('./src/assets/images/vent/loading-bg.png');
background-size: cover;
background-repeat: no-repeat;
background-color: #09172C;
}
.app-loading .app-loading-wrap {
position: absolute;
top: 50%;
left: 50%;
display: flex;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
justify-content: center;
align-items: center;
flex-direction: column;
}
.app-loading .dots {
display: flex;
padding: 98px;
justify-content: center;
align-items: center;
}
.app-loading .app-loading-title {
display: flex;
margin-top: 30px;
font-size: 30px;
color: rgba(255, 255, 255, 0.85);
justify-content: center;
align-items: center;
}
.app-loading .app-loading-logo {
display: block;
width: 90px;
margin: 0 auto;
margin-bottom: 20px;
}
.dot {
position: relative;
display: inline-block;
width: 48px;
height: 48px;
margin-top: 30px;
font-size: 32px;
transform: rotate(45deg);
box-sizing: border-box;
animation: antRotate 1.2s infinite linear;
}
.dot i {
position: absolute;
display: block;
width: 20px;
height: 20px;
background-color: #0065cc;
border-radius: 100%;
opacity: 0.3;
transform: scale(0.75);
animation: antSpinMove 1s infinite linear alternate;
transform-origin: 50% 50%;
}
.dot i:nth-child(1) {
top: 0;
left: 0;
}
.dot i:nth-child(2) {
top: 0;
right: 0;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.dot i:nth-child(3) {
right: 0;
bottom: 0;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.dot i:nth-child(4) {
bottom: 0;
left: 0;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
@keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@-webkit-keyframes antRotate {
to {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
}
@keyframes antSpinMove {
to {
opacity: 1;
}
}
@-webkit-keyframes antSpinMove {
to {
opacity: 1;
}
}
#cssLoader1.main-wrap .child-common {
width: 8px;
height: 50px;
margin-right: 5px;
/* margin-right: 3px; */
background-color: #3df7ff;
-webkit-animation: animate1 1s infinite;
animation: animate1 1s infinite;
float: left;
}
#cssLoader1.main-wrap .child1 {
margin-right: 5px;
}
#cssLoader1.main-wrap .child10 {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
#cssLoader1.main-wrap .child9 {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#cssLoader1.main-wrap .child8 {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
#cssLoader1.main-wrap .child7 {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#cssLoader1.main-wrap .child6 {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#cssLoader1.main-wrap .child5 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#cssLoader1.main-wrap .child4 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
#cssLoader1.main-wrap .child3 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#cssLoader1.main-wrap .child2 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
@-webkit-keyframes animate1 {
50% {
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@keyframes animate1 {
50% {
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
/*loader1 css ends*/
cssLoader17 {
position: relative;
width: 2.5em;
height: 2.5em;
transform: rotate(165deg);
}
.cssLoader17:before,
.cssLoader17:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
transform: translate(-50%, -50%);
}
.cssLoader17:before {
animation: before 2s infinite;
}
.cssLoader17:after {
animation: after 2s infinite;
}
@keyframes before {
0% {
width: 0.5em;
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}
35% {
width: 2.5em;
box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
}
70% {
width: 0.5em;
box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
}
100% {
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}
}
@keyframes after {
0% {
height: 0.5em;
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}
35% {
height: 2.5em;
box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
}
70% {
height: 0.5em;
box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
}
100% {
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}
}
</style>
<div class="app-loading">
<div class="app-loading-wrap">
<!-- <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" /> -->
<!-- <div class="app-loading-dots">
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
</div> -->
<div id="cssLoader1" class="main-wrap">
<div class="child-common child1"></div>
<div class="child-common child2"></div>
<div class="child-common child3"></div>
<div class="child-common child4"></div>
<div class="child-common child5"></div>
<div class="child-common child6"></div>
<div class="child-common child7"></div>
<div class="child-common child8"></div>
<div class="child-common child9"></div>
<div class="child-common child10"></div>
</div>
<div class="app-loading-title"><%= title %></div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
<!-- <script type="module" src="/src/utils/threejs/main.worker.ts"></script> -->
</body>
</html>