chore: 并入 iotlcm-admin-ui 历史到 admin-ui/（原提交 f305eab）
This commit is contained in:
MiFaZhan
@@ -0,0 +1,290 @@
|
||||
<style>
|
||||
html {
|
||||
/* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #f4f7f9;
|
||||
transition: background-color 0.4s ease;
|
||||
|
||||
/* transition: all 0.8s ease-out; */
|
||||
}
|
||||
|
||||
.loading.hidden {
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
|
||||
.dark .loading {
|
||||
background: #0d0d10;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 66px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: rgb(0 0 0 / 85%);
|
||||
}
|
||||
|
||||
.dark .title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: relative;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.loader::before {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
width: 48px;
|
||||
height: 5px;
|
||||
content: '';
|
||||
background: hsl(var(--primary, 210 100% 50%) / 50%);
|
||||
border-radius: 50%;
|
||||
animation: shadow-ani 0.5s linear infinite;
|
||||
}
|
||||
|
||||
.loader::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
background: hsl(var(--primary, 210 100% 50%));
|
||||
border-radius: 4px;
|
||||
animation: jump-ani 0.5s linear infinite;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
position: relative;
|
||||
min-width: 420px;
|
||||
min-height: 88px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title,
|
||||
.status-text,
|
||||
.status-subtitle {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translateX(-50%);
|
||||
transition:
|
||||
opacity 0.45s ease,
|
||||
transform 0.45s ease;
|
||||
}
|
||||
|
||||
.title {
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: rgb(0 0 0 / 85%);
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(10px);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
top: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: rgb(0 0 0 / 85%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.status-subtitle {
|
||||
top: 48px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.08em;
|
||||
color: rgb(100 116 139 / 88%);
|
||||
}
|
||||
|
||||
.title-wrap.is-switching .status-text,
|
||||
.title-wrap.is-switching .status-subtitle {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(8px);
|
||||
}
|
||||
|
||||
.loading.app-title-ready .status-text,
|
||||
.loading.app-title-ready .status-subtitle {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-10px);
|
||||
}
|
||||
|
||||
.loading.app-title-ready .title {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.dark .status-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark .status-subtitle {
|
||||
color: rgb(148 163 184 / 78%);
|
||||
}
|
||||
|
||||
@keyframes jump-ani {
|
||||
15% {
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translateY(9px) rotate(22.5deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
border-bottom-right-radius: 40px;
|
||||
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateY(9px) rotate(67.5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0) rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shadow-ani {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.2, 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="loading" id="__app-loading__">
|
||||
<div class="loader" aria-hidden="true"></div>
|
||||
<div class="title-wrap">
|
||||
<div class="status-text" id="__app-loading-status__">正在初始化应用...</div>
|
||||
<div class="status-subtitle" id="__app-loading-subtitle__">
|
||||
请稍候，系统正在准备运行环境
|
||||
</div>
|
||||
<div class="title" id="__app-loading-title__">智联·云</div>
|
||||
</div>
|
||||
</div>
|
||||
<script data-app-loading="runtime-title">
|
||||
(function () {
|
||||
var loadingElement = document.getElementById('__app-loading__');
|
||||
var statusElement = document.getElementById('__app-loading-status__');
|
||||
var subtitleElement = document.getElementById('__app-loading-subtitle__');
|
||||
var titleElement = document.getElementById('__app-loading-title__');
|
||||
var titleWrapElement = titleElement && titleElement.parentElement;
|
||||
var messageTimer = null;
|
||||
var messageIndex = 0;
|
||||
|
||||
var messages = [
|
||||
{
|
||||
status: '正在初始化应用...',
|
||||
subtitle: '请稍候，系统正在准备运行环境',
|
||||
},
|
||||
{
|
||||
status: '正在连接配置中心...',
|
||||
subtitle: '正在读取启动所需的运行时配置',
|
||||
},
|
||||
{
|
||||
status: '正在装载页面资源...',
|
||||
subtitle: '首次加载可能略慢，请稍候片刻',
|
||||
},
|
||||
{
|
||||
status: '正在校准界面状态...',
|
||||
subtitle: '即将进入系统首页',
|
||||
},
|
||||
];
|
||||
|
||||
if (
|
||||
!loadingElement ||
|
||||
!statusElement ||
|
||||
!subtitleElement ||
|
||||
!titleElement ||
|
||||
!titleWrapElement
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
function applyMessage(message) {
|
||||
statusElement.textContent = message.status;
|
||||
subtitleElement.textContent = message.subtitle;
|
||||
}
|
||||
|
||||
function switchMessage(message) {
|
||||
titleWrapElement.classList.add('is-switching');
|
||||
window.setTimeout(function () {
|
||||
applyMessage(message);
|
||||
titleWrapElement.classList.remove('is-switching');
|
||||
}, 220);
|
||||
}
|
||||
|
||||
function startMessageLoop() {
|
||||
statusElement.style.opacity = '';
|
||||
subtitleElement.style.opacity = '';
|
||||
applyMessage(messages[0]);
|
||||
messageTimer = window.setInterval(function () {
|
||||
messageIndex = (messageIndex + 1) % messages.length;
|
||||
switchMessage(messages[messageIndex]);
|
||||
}, 1800);
|
||||
}
|
||||
|
||||
function stopMessageLoop() {
|
||||
if (messageTimer !== null) {
|
||||
window.clearInterval(messageTimer);
|
||||
messageTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function applyTitle(setting) {
|
||||
var appTitle = setting && setting.appTitle;
|
||||
|
||||
if (appTitle) {
|
||||
stopMessageLoop();
|
||||
titleElement.textContent = appTitle;
|
||||
loadingElement.classList.add('app-title-ready');
|
||||
}
|
||||
}
|
||||
|
||||
// 配置已就绪，直接展示标题
|
||||
if (window.__APP_SETTING__) {
|
||||
applyTitle(window.__APP_SETTING__);
|
||||
return;
|
||||
}
|
||||
|
||||
// 配置未就绪，直接展示默认加载文案
|
||||
startMessageLoop();
|
||||
|
||||
// 等待配置返回后，若已启动文案轮播则停止，并展示标题
|
||||
if (window.__APP_SETTING_PROMISE__) {
|
||||
window.__APP_SETTING_PROMISE__
|
||||
.then(function (setting) {
|
||||
applyTitle(setting);
|
||||
})
|
||||
.catch(function () {});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user