|
|
@@ -11,6 +11,47 @@ body{
|
|
|
color:#e2e8f0;
|
|
|
}
|
|
|
|
|
|
+#loading-mask {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ background: #0f172a;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-dot {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border: 3px solid #475569;
|
|
|
+ border-top-color: #38bdf8;
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: loading-spin 1s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-text {
|
|
|
+ color: #94a3b8;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes loading-spin {
|
|
|
+ from {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ to {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/* 主布局 */
|
|
|
.app{
|
|
|
display:flex;
|