Startseite Erkunden Hilfe
Registrieren Anmelden
YFKJ_EmbeddedSoftwareTeam
/
rtu_linux_services
2
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

新增页面加载等待页面, 网速过慢时, 加载首页和资源出现等待字样

niujiuru vor 4 Tagen
Ursprung
de810f80fa
Commit
284f77d197
4 geänderte Dateien mit 56 neuen und 2 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 6 0
      web-ui.service/web/app.html
  2. 2 2
      web-ui.service/web/pages/page6.html
  3. 41 0
      web-ui.service/web/static/css/app.css
  4. 7 0
      web-ui.service/web/static/js/app.js

+ 6 - 0
web-ui.service/web/app.html
Datei anzeigen 

@@ -10,6 +10,12 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
+<div id="loading-mask">
 
+  <div class="loading-box">
 
+    <div class="loading-dot"></div>
 
+    <div class="loading-text">页面加载中，请稍微...</div>
 
+  </div>
 
+</div>
 
 <div class="app">
 
 <div class="app">
 
    <header class="topbar">
 
    <header class="topbar">
 
     <div class="device">
 
     <div class="device">

+ 2 - 2
web-ui.service/web/pages/page6.html
Datei anzeigen 

@@ -54,8 +54,8 @@
 
               <span class="value" id="bvar2">--</span>
 
               <span class="value" id="bvar2">--</span>
 
             </div>
 
             </div>
 
             <div class="app-info">
 
             <div class="app-info">
 
-              <span class="label">文件哈希:</span>
 
-              <span class="value" id="bvar3">--</span>
 
+              <span class="label" title="安装包文件的MD5校验值">文件哈希:</span>
 
+              <span class="value" title="安装包文件的MD5校验值" id="bvar3">--</span>
 
             </div>
 
             </div>
 
             <div class="app-info">
 
             <div class="app-info">
 
               <span class="label">上传时间:</span>
 
               <span class="label">上传时间:</span>

+ 41 - 0
web-ui.service/web/static/css/app.css
Datei anzeigen 

@@ -11,6 +11,47 @@ body{
 
     color:#e2e8f0;
 
     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{
 
 .app{
 
     display:flex;
 
     display:flex;

+ 7 - 0
web-ui.service/web/static/js/app.js
Datei anzeigen 

@@ -114,3 +114,10 @@ function loadIMEI() {
 
 }
 
 }
 
 
 
 loadIMEI();
 
 loadIMEI();
 
+
 
+window.onload = function() {
 
+  const mask = document.getElementById("loading-mask");
 
+  if (mask) {
 
+    mask.style.display = "none";
 
+  }
 
+};