dm-web-react
Version:
The DM web client with React.
200 lines (175 loc) • 4.39 kB
HTML
<html lang="en">
<head>
<title>DM-WEB-CLIENT-PRELOADING</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #252525;
}
#root {
background-image: url("https://cdn.innodealing.com/common/images/preloadingBg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#content {
width: 100%;
height: 100%;
display: table;
}
#content-body {
display: table-cell;
vertical-align: middle;
}
#header-logo {
display: block;
margin-left: auto;
margin-right: auto;
}
#progress-bar {
background-color: #666666;
width: 600px;
height: 10px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
#progress-bar-inner {
background-color: #33A5FD;
height: 10px;
border-radius: 5px;
width: 1%;
}
#log {
margin-top: 100px;
color: #8D8D8D;
text-align: center;
}
#dialog-error {
background-color: white;
width: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
padding: 20px 30px 40px 30px;
}
#dialog-error-header {
color: #2D2D2D;
position: relative;
}
#dialog-error-header h3 {
display: inline-block;
margin-left: 50px;
}
#dialog-error-contract {
color: #7D7E82;
}
#warning-icon {
position: absolute;
top: 15px;
}
#refresh-button {
color: white;
background-color: #F52C44;
border: 0;
padding: 8px 20px;
border-radius: 5px;
cursor: pointer;
float: right;
margin-top: 20px;
}
#refresh-button:hover{
background-color: #FD566A;
}
#dialog-error-detail{
margin-top: 20px;
}
#dialog-error{
display: none;
}
#dialog-error-log{
border: 1px solid #E2E2E2;
border-radius: 3px;
padding: 5px;
overflow: auto;
}
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid #F0B80A;
}
.warning {
position: relative;
display: inline-block;
width: 40px;
height: 30px;
}
.warning .arrow-up {
position: absolute;
}
.warning .icon {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -40%);
border-radius: 10px;
color: white;
font-weight: bolder;
}
</style>
</head>
<body>
<div id="root">
<div id="content">
<div id="content-body">
<img id="header-logo" src="https://cdn.innodealing.com/common/images/preloadingHeader.png">
<div id="log">开始加载...</div>
<div id="progress-bar">
<div id="progress-bar-inner"></div>
</div>
</div>
</div>
<div id="dialog-error">
<div id="dialog-error-header">
<span id="warning-icon" class="warning"><span class="arrow-up"></span><span class="icon">!</span></span>
<h3>同步数据出错</h3>
</div>
<div id="dialog-error-contract">
如有疑问请联系：4000-918-000
</div>
<div id="dialog-error-detail">
<a id="show-error-detail" href="#">查看详情</a>
<div id="dialog-error-log"></div>
</div>
<div>
<input id="refresh-button" type="button" value="重新加载">
</div>
</div>
</div>
<script src="https://cdn.innodealing.com/common/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdn.innodealing.com/common/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>