lisang
/
d2-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新版首页载入样式 

Former-commit-id: e469ecfee4e9c3fe4d21ee3ee9d0c91a2a5a2958 [formerly 1a0640c66512d49a1903237173c3d262e17949b0] [formerly e469ecfee4e9c3fe4d21ee3ee9d0c91a2a5a2958 [formerly 1a0640c66512d49a1903237173c3d262e17949b0] [formerly e469ecfee4e9c3fe4d21ee3ee9d0c91a2a5a2958 [formerly 1a0640c66512d49a1903237173c3d262e17949b0] [formerly 1a0640c66512d49a1903237173c3d262e17949b0 [formerly 6c4aa3fcf442fbf8479f9aed32d3c9eaf1246cff [formerly 54fd4afda552fc2e7128fd1db072a21f73d924f0]]]]]
Former-commit-id: cae83e98e9644388611a229282ef3d2fd10c6045
Former-commit-id: f56a9e5f69e36609be9ac86f3729a11d205678f6
Former-commit-id: c6af5cea2fb153d893097a4ad38782bacfcb645e [formerly 0aa116a0822e73d92bc7214c4f812f1505efc168]
Former-commit-id: 377a51e81339086a718587aa53a33607a949b265
Former-commit-id: 645083e12611d4d93f6c83f5b3fa026a50b46e13
Former-commit-id: 694ab08a02a5b770b97a75268091a64300bd90f5
Former-commit-id: 01269425158df45734a20ba120fe92bd792c01d7
Former-commit-id: 659a181abd0eb4d3c36c755efb6a7fb46fe0d5c2
This commit is contained in:
liyang 2018-10-26 00:20:49 +08:00
parent 75edff2260
commit 810d2eb5a4
2 changed files with 50 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/image/loading/loading-spin.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white">
<path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
<path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
<animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
</path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 422 B

170
public/index.html
View File

@ -12,125 +12,49 @@
margin: 0px;
padding: 0px;
}
.d2-app-loading-group {
.d2-home {
background-color: #303133;
height: 100%;
display: flex;
flex-direction: column;
}
.d2-home__header {
width: 100%;
flex-grow: 0;
}
.d2-home__main {
user-select: none;
width: 100%;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
background-blend-mode: multiply,multiply;
}
.d2-app-loading-title {
color: #FFF;
font-weight: bold;
font-size: 14px;
margin-top: 40px;
margin-bottom: 10px;
letter-spacing: 0.2em;
}
.d2-app-loading-sub-title {
color: #FFF;
font-size: 10px;
margin-bottom: 10px;
}
.d2-app-loading-sub-info {
color: #FFF;
font-size: 10px;
opacity: .8;
margin-bottom: 4px;
}
.d2-app-loading-btn {
text-decoration: none;
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
border-color: #dcdfe6;
color: #606266;
-webkit-appearance: none;
.d2-home__footer {
width: 100%;
flex-grow: 0;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
/* 圆角 */
padding: 7px 15px;
border-radius: 20px;
padding: 1em 0;
}
.d2-home__footer > a {
font-size: 12px;
color: #ABABAB;
text-decoration: none;
}
.d2-app-loading-grid {
width: 30px;
height: 30px;
.d2-home__loading {
height: 32px;
width: 32px;
margin-bottom: 20px;
}
.d2-app-loading-grid .d2-app-loading {
width: 10px;
height: 10px;
background-color: #FFF;
float: left;
-webkit-animation: d2-app-loading-grid-scale-delay 1.3s infinite ease-in-out;
animation: d2-app-loading-grid-scale-delay 1.3s infinite ease-in-out;
}
.d2-app-loading-grid .d2-app-loading1 {
border-top-left-radius: 4px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.d2-app-loading-grid .d2-app-loading2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.d2-app-loading-grid .d2-app-loading3 {
border-top-right-radius: 4px;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.d2-app-loading-grid .d2-app-loading4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.d2-app-loading-grid .d2-app-loading5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
.d2-app-loading-grid .d2-app-loading6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s; }
.d2-app-loading-grid .d2-app-loading7 {
border-bottom-left-radius: 4px;
-webkit-animation-delay: 0s;
animation-delay: 0s; }
.d2-app-loading-grid .d2-app-loading8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s; }
.d2-app-loading-grid .d2-app-loading9 {
border-bottom-right-radius: 4px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s; }
@-webkit-keyframes d2-app-loading-grid-scale-delay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@keyframes d2-app-loading-grid-scale-delay {
0%, 70%, 100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
.d2-home__title {
color: #FFF;
font-size: 14px;
margin-bottom: 10px;
}
.d2-home__sub-title {
color: #ABABAB;
font-size: 12px;
}
</style>
<script>
@ -152,30 +76,24 @@
</head>
<body>
<noscript>
<strong>We're sorry but d2-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>
很抱歉，如果没有 JavaScript 支持，D2Admin 将不能正常工作。请启用浏览器的 JavaScript 然后继续。
</strong>
</noscript>
<div id="app">
<div class="d2-app-loading-group">
<div class="d2-app-loading-grid">
<div class="d2-app-loading d2-app-loading1"></div>
<div class="d2-app-loading d2-app-loading2"></div>
<div class="d2-app-loading d2-app-loading3"></div>
<div class="d2-app-loading d2-app-loading4"></div>
<div class="d2-app-loading d2-app-loading5"></div>
<div class="d2-app-loading d2-app-loading6"></div>
<div class="d2-app-loading d2-app-loading7"></div>
<div class="d2-app-loading d2-app-loading8"></div>
<div class="d2-app-loading d2-app-loading9"></div>
<div class="d2-home">
<div class="d2-home__header"></div>
<div class="d2-home__main">
<img class="d2-home__loading" src="./image/loading/loading-spin.svg" alt="loading">
<div class="d2-home__title">正在加载资源</div>
<div class="d2-home__sub-title">初次加载资源可能较慢 请耐心等待</div>
</div>
<div class="d2-app-loading-title">加载中</div>
<div class="d2-app-loading-sub-title">欢迎使用 D2Admin。初次加载较慢，请耐心等待</div>
<div class="d2-app-loading-sub-info">如果很久很久都没有加载成功，请清空缓存重新加载页面</div>
<div style="margin-top: 10px;">
<a class="d2-app-loading-btn" href="https://github.com/d2-projects/d2-admin" target="blank">Github仓库</a>
<a class="d2-app-loading-btn" href="https://doc.d2admin.fairyever.com/zh/" target="blank">中文文档</a>
<div class="d2-home__footer">
<a href="https://github.com/d2-projects/d2-admin" target="_blank">
https://github.com/d2-projects/d2-admin
</a>
</div>
</div>
</div>
<!-- built files will be auto injected -->
</body>
</html>