78 lines
2.0 KiB
HTML
78 lines
2.0 KiB
HTML
<style data-app-loading="inject-css">
|
||
html {
|
||
/* 与 ant-design-vue/dist/reset.css 一致，避免标题行高跳动 */
|
||
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;
|
||
}
|
||
|
||
.loading.hidden {
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transition: all 0.8s ease-out;
|
||
}
|
||
|
||
.dark .loading {
|
||
background: #0d0d10;
|
||
}
|
||
|
||
/* BuildFlow 品牌 logo：在加载阶段用内联 SVG，避免额外网络请求，
|
||
保证首屏（JS 未执行前）即可见。蓝色圆角方块 + 白色立方体，与 /logo.svg 一致。 */
|
||
.logo {
|
||
width: 56px;
|
||
height: 56px;
|
||
animation: pulse-ani 1.4s ease-in-out infinite;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 20px;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: rgb(0 0 0 / 85%);
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.dark .title {
|
||
color: #fff;
|
||
}
|
||
|
||
/* 品牌色脉冲：替代 Vben 默认的跳动方块，呼吸式动效更稳重 */
|
||
@keyframes pulse-ani {
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
transform: scale(0.88);
|
||
opacity: 0.65;
|
||
}
|
||
}
|
||
</style>
|
||
<div class="loading" id="__app-loading__">
|
||
<!-- BuildFlow 品牌 logo（内联，首屏零依赖可见） -->
|
||
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
|
||
<rect width="64" height="64" rx="14" fill="#007aff" />
|
||
<g fill="none" stroke="#ffffff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" transform="translate(14 14) scale(1.5)">
|
||
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
|
||
<path d="m3.3 7 8.7 5 8.7-5" />
|
||
<path d="M12 22V12" />
|
||
</g>
|
||
</svg>
|
||
<div class="title">%VITE_APP_TITLE%</div>
|
||
</div>
|