280 lines
8.3 KiB
HTML
280 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
|
|
<meta content="webkit" name="renderer">
|
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
|
|
<link href="<%= BASE_URL %>images/<%= process.env.VUE_APP_ICO_URL %>" rel="icon">
|
|
<link href="<%= BASE_URL %>cdn/iconfont/1.0.0/index.css" rel="stylesheet">
|
|
<link href="<%= BASE_URL %>cdn/iconfont/1.0.0/iconfont.css" rel="stylesheet">
|
|
<link href="https://static.drgyen.com/pc/smart-power-ui/font_2506643_9w119og75cs.css" rel="stylesheet">
|
|
|
|
|
|
<link href="https://static.drgyen.com/pc/smart-power-ui/font_2506643_51mhr4b9ys6.css" rel="stylesheet">
|
|
|
|
<script async src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8" type="text/javascript"></script>
|
|
<script src="<%= BASE_URL %>js/config.js"></script>
|
|
|
|
<script async src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8&plugin=AMap.PlaceSearch"></script>
|
|
<script async src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
|
|
<script async src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8&plugin=AMap.Geocoder" type="text/javascript"></script>
|
|
<!-- <script type="text/javascript" src="<%= BASE_URL %>cdn/js/jessibuca/jessibuca.js"></script>-->
|
|
<script async src="<%= BASE_URL %>cdn/js/liveplayer/liveplayer-lib.min.js"></script>
|
|
<title><%= process.env.VUE_APP_SYSTEM_NAME %></title>
|
|
<style>
|
|
html,
|
|
body,
|
|
#app {
|
|
height: 100%;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
#loader-wrapper {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999999;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
background-color: #ddecff;
|
|
font-size: 100%;
|
|
font-family: 'Open Sans';
|
|
font-weight: 900;
|
|
height:100%;
|
|
background-image: url(./images/drgy/loading-box.jpg);
|
|
background-repeat: round;
|
|
}
|
|
.loader {
|
|
height: 100%;
|
|
/*position: absolute;*/
|
|
/*top: 50%;*/
|
|
/*left: 50%;*/
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/*-webkit-transform: translate(-50%, -50%);*/
|
|
/*-moz-transform: translate(-50%, -50%);*/
|
|
/*-mos-transform: translate(-50%, -50%);*/
|
|
/*-o-transform: translate(-50%, -50%);*/
|
|
/*transform: translate(-50%, -50%);*/
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
cursor:default;
|
|
}
|
|
.loader .title{font-family: cursive;font-size: 24px;color: #666;letter-spacing: 4px;}
|
|
.loader .txt{
|
|
display: flex;
|
|
width: 60%;
|
|
justify-content: space-around;
|
|
font-size:7rem;
|
|
font-family: cursive;
|
|
text-transform: uppercase;
|
|
text-shadow: 0 1px 0 #ccc,
|
|
0 2px 0 #c9c9c9,
|
|
0 3px 0 #bbb,
|
|
0 4px 0 #b9b9b9,
|
|
0 5px 0 #aaa,
|
|
0 6px 1px rgba(0,0,0,.1),
|
|
0 0 5px rgba(0,0,0,.1),
|
|
0 1px 3px rgba(0,0,0,.1),
|
|
0 3px 5px rgba(0,0,0,.1),
|
|
0 5px 10px rgba(0,0,0,.1),
|
|
0 10px 10px rgba(0,0,0,.1),
|
|
0 20px 20px rgba(0,0,0,.15);
|
|
white-space: nowrap;
|
|
}
|
|
.loader .txt span{
|
|
-webkit-animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
|
|
-moz-animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
|
|
-moz-animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
|
|
-ms-animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
|
|
-o-animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
|
|
animation: text cubic-bezier(0.750, 0.000, 0.500, 1.000) 1.2s infinite;
|
|
color:#F2F2EF;
|
|
}
|
|
.loader .txt span:nth-child(1){
|
|
-webkit-animation-delay: 0ms;
|
|
-moz-animation-delay: 0ms;
|
|
-ms-animation-delay: 0ms;
|
|
-o-animation-delay: 0ms;
|
|
animation-delay: 0ms;
|
|
}
|
|
|
|
.loader .txt span:nth-child(2){
|
|
-webkit-animation-delay: 100ms;
|
|
-moz-animation-delay: 100ms;
|
|
-ms-animation-delay: 100ms;
|
|
-o-animation-delay: 100ms;
|
|
animation-delay: 100ms;
|
|
}
|
|
|
|
.loader .txt span:nth-child(3){
|
|
-webkit-animation-delay: 200ms;
|
|
-moz-animation-delay: 200ms;
|
|
-ms-animation-delay: 200ms;
|
|
-o-animation-delay: 200ms;
|
|
animation-delay: 200ms;
|
|
}
|
|
|
|
.loader .txt span:nth-child(4){
|
|
-webkit-animation-delay: 300ms;
|
|
-moz-animation-delay: 300ms;
|
|
-ms-animation-delay: 300ms;
|
|
-o-animation-delay: 300ms;
|
|
animation-delay: 300ms;
|
|
}
|
|
|
|
.loader .txt span:nth-child(5){
|
|
-webkit-animation-delay: 400ms;
|
|
-moz-animation-delay: 400ms;
|
|
-ms-animation-delay: 400ms;
|
|
-o-animation-delay: 400ms;
|
|
animation-delay: 400ms;
|
|
}
|
|
|
|
.loader .txt span:nth-child(6){
|
|
-webkit-animation-delay: 500ms;
|
|
-moz-animation-delay: 500ms;
|
|
-ms-animation-delay: 500ms;
|
|
-o-animation-delay: 500ms;
|
|
animation-delay: 500ms;
|
|
}
|
|
|
|
.loader .txt span:nth-child(7){
|
|
-webkit-animation-delay: 600ms;
|
|
-moz-animation-delay: 600ms;
|
|
-ms-animation-delay: 600ms;
|
|
-o-animation-delay: 600ms;
|
|
animation-delay: 600ms;
|
|
}
|
|
.loader .txt span:nth-child(8){
|
|
-webkit-animation-delay: 700ms;
|
|
-moz-animation-delay: 700ms;
|
|
-ms-animation-delay: 700ms;
|
|
-o-animation-delay: 700ms;
|
|
animation-delay: 700ms;
|
|
}
|
|
.loader .txt span:nth-child(9){
|
|
-webkit-animation-delay: 800ms;
|
|
-moz-animation-delay: 800ms;
|
|
-ms-animation-delay: 800ms;
|
|
-o-animation-delay: 800ms;
|
|
animation-delay: 800ms;
|
|
}
|
|
.loader .txt span:nth-child(10){
|
|
-webkit-animation-delay: 900ms;
|
|
-moz-animation-delay: 900ms;
|
|
-ms-animation-delay: 900ms;
|
|
-o-animation-delay: 900ms;
|
|
animation-delay: 900ms;
|
|
}
|
|
|
|
/* animation text */
|
|
@-webkit-keyframes text {
|
|
0% { color:#def6ff; }
|
|
40% { color:#def6ff; }
|
|
70%,100% { color:#46c6c7; }
|
|
}
|
|
@-moz-keyframes text {
|
|
0% { color:#def6ff; }
|
|
40% { color:#def6ff; }
|
|
70%,100% { color:#46c6c7; }
|
|
}
|
|
@-mos-keyframes text {
|
|
0% { color:#def6ff; }
|
|
40% { color:#def6ff; }
|
|
70%,100% { color:#46c6c7; }
|
|
}
|
|
@-o-keyframes text {
|
|
0% { color:#def6ff; }
|
|
40% { color:#def6ff; }
|
|
70%,100% { color:#46c6c7; }
|
|
}
|
|
@keyframes text {
|
|
0% { color:#def6ff; }
|
|
40% { color:#def6ff; }
|
|
70%,100% { color:#46c6c7;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="loader-wrapper">
|
|
<div class="loader">
|
|
<div class="txt">
|
|
<!-- <span>D</span>-->
|
|
<!-- <span>R</span>-->
|
|
<!-- <span>G</span>-->
|
|
<!-- <span>Y</span>-->
|
|
<!-- <span>E</span>-->
|
|
<!-- <span>N</span>-->
|
|
</div>
|
|
<p class="title">正在加载...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<!-- 全局系统配置（区分系统） -->
|
|
<script src="./systenConfig.js"></script>
|
|
<% if (process.env.VUE_APP_ENV === 'drprod' ) { %>
|
|
<script>
|
|
// 获取loader-wrapper元素
|
|
var loaderWrapper = document.querySelector('#loader-wrapper');
|
|
// 修改背景图片地址
|
|
loaderWrapper.style.backgroundColor = '#ddecff'
|
|
loaderWrapper.style.backgroundImage = 'url(./images/dr/loading-box.jpg)';
|
|
|
|
document.querySelector('#loader-wrapper')
|
|
|
|
|
|
|
|
var styleElement = document.createElement('style');
|
|
|
|
// 定义新的关键帧动画规则
|
|
var keyframesRule = ` @keyframes text {
|
|
0% { color:#def6ff; }
|
|
40% { color:#def6ff; }
|
|
70%,100% { color:#0080db; }
|
|
}
|
|
`;
|
|
// 将规则添加到<style>元素中
|
|
if (styleElement.styleSheet) { // IE
|
|
styleElement.styleSheet.cssText = keyframesRule;
|
|
} else { // Others
|
|
styleElement.appendChild(document.createTextNode(keyframesRule));
|
|
}
|
|
// 将<style>元素插入到<head>中
|
|
document.head.appendChild(styleElement);
|
|
|
|
let name = "DS-service".split('');
|
|
// 获取容器元素
|
|
const container = document.querySelector('.txt');
|
|
container.innerHTML = "";
|
|
// 遍历数组并生成 span 元素
|
|
name.forEach(item => {
|
|
// 创建 span 元素
|
|
const span = document.createElement('span');
|
|
// 设置 span 的文本内容
|
|
span.textContent = item;
|
|
// 将 span 添加到容器中
|
|
container.appendChild(span);
|
|
});
|
|
|
|
</script>
|
|
<% } else {%>
|
|
<script>
|
|
|
|
</script>
|
|
<% } %>
|
|
</html>
|