fix(加载):调整index.html,加载可配置
This commit is contained in:
fhysy
parent
4daa3fffc4
commit
352d6bdebe
|
|
@ -8,6 +8,7 @@
|
|||
"dev": "vue-cli-service serve",
|
||||
"dev:drgy": "vue-cli-service serve --mode drgy",
|
||||
"dev:dr": "vue-cli-service serve --mode dr",
|
||||
"dev:drprod": "vue-cli-service serve --mode drprod",
|
||||
"build:drgyprod": "vue-cli-service build --mode drgyprod",
|
||||
"build:drprod": "vue-cli-service build --mode drprod",
|
||||
"build:prod": "vue-cli-service build",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -1,28 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>images/<%= process.env.VUE_APP_ICO_URL %>">
|
||||
<link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/1.0.0/index.css">
|
||||
<link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/1.0.0/iconfont.css">
|
||||
<link rel="stylesheet" href="//at.alicdn.com/t/font_2506643_9w119og75cs.css">
|
||||
<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="//at.alicdn.com/t/font_2506643_9w119og75cs.css" rel="stylesheet">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_51mhr4b9ys6.css">
|
||||
<link href="//at.alicdn.com/t/c/font_2506643_51mhr4b9ys6.css" rel="stylesheet">
|
||||
|
||||
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8"></script>
|
||||
<script src="<%= BASE_URL %>js/config.js"></script>
|
||||
<script 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 src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8&plugin=AMap.PlaceSearch"></script>
|
||||
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
|
||||
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8&plugin=AMap.Geocoder"></script>
|
||||
<!-- <script type="text/javascript" src="<%= BASE_URL %>cdn/js/jessibuca/jessibuca.js"></script>-->
|
||||
<script src="<%= BASE_URL %>cdn/js/liveplayer/liveplayer-lib.min.js"></script>
|
||||
<title><%= process.env.VUE_APP_SYSTEM_NAME %></title>
|
||||
<style>
|
||||
<script src="https://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8&plugin=AMap.PlaceSearch"></script>
|
||||
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
|
||||
<script 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 src="<%= BASE_URL %>cdn/js/liveplayer/liveplayer-lib.min.js"></script>
|
||||
<title><%= process.env.VUE_APP_SYSTEM_NAME %></title>
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
|
|
@ -38,181 +38,242 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
#loader {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #409eff;
|
||||
-webkit-animation: spin 2s linear infinite;
|
||||
-ms-animation: spin 2s linear infinite;
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
-o-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#loader:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #409eff;
|
||||
-webkit-animation: spin 3s linear infinite;
|
||||
-moz-animation: spin 3s linear infinite;
|
||||
-o-animation: spin 3s linear infinite;
|
||||
-ms-animation: spin 3s linear infinite;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
#loader:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #409eff;
|
||||
-moz-animation: spin 1.5s linear infinite;
|
||||
-o-animation: spin 1.5s linear infinite;
|
||||
-ms-animation: spin 1.5s linear infinite;
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#loader-wrapper .loader-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 51%;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
z-index: 1000;
|
||||
-webkit-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section.section-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#loader-wrapper .loader-section.section-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-left {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-ms-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper .loader-section.section-right {
|
||||
-webkit-transform: translateX(100%);
|
||||
-ms-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
}
|
||||
|
||||
.loaded #loader {
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.loaded #loader-wrapper {
|
||||
visibility: hidden;
|
||||
-webkit-transform: translateY(-100%);
|
||||
-ms-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
-webkit-transition: all 0.3s 1s ease-out;
|
||||
transition: all 0.3s 1s ease-out;
|
||||
}
|
||||
|
||||
.no-js #loader-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-js h1 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
#loader-wrapper .load_title {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
background-color: #ddecff;
|
||||
font-size: 100%;
|
||||
font-family: 'Open Sans';
|
||||
color: #409eff;
|
||||
font-size: 19px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 9999999999999;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
opacity: 1;
|
||||
line-height: 30px;
|
||||
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-wrapper .load_title span {
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-size: 13px;
|
||||
color: #FFF;
|
||||
opacity: 0.5;
|
||||
.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>
|
||||
<!-- 全局系统配置（区分系统） -->
|
||||
<script src="./systenConfig.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="loader-wrapper">
|
||||
<div id="loader"></div>
|
||||
<div class="loader-section section-left"></div>
|
||||
<div class="loader-section section-right"></div>
|
||||
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</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.NODE_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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue