Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
SG
/
pigx-wx-ui38
4
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

:sparkles: Introducing new features.Add loading animation

萌萌哒SAKURA酱 6 vuotta sitten
vanhempi
723c23b721
commit
9f60ac6e43
2 muutettua tiedostoa jossa 79 lisäystä ja 1 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 73 1
      public/index.html
  2. 6 0
      public/svg/loading-spin.svg

+ 73 - 1
public/index.html
Näytä tiedosto 

@@ -14,13 +14,85 @@
 
     <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/1.0.0/index.css">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <title>PigX微服务快速开发框架</title>
 
+    <style>
 
+        html,
 
+        body,
 
+        #app {
 
+            height: 100%;
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+
 
+        .avue-home {
 
+            background-color: #303133;
 
+            height: 100%;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+
 
+        .avue-home__main {
 
+            user-select: none;
 
+            width: 100%;
 
+            flex-grow: 1;
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            flex-direction: column;
 
+        }
 
+
 
+        .avue-home__footer {
 
+            width: 100%;
 
+            flex-grow: 0;
 
+            text-align: center;
 
+            padding: 1em 0;
 
+        }
 
+
 
+        .avue-home__footer>a {
 
+            font-size: 12px;
 
+            color: #ABABAB;
 
+            text-decoration: none;
 
+        }
 
+
 
+        .avue-home__loading {
 
+            height: 32px;
 
+            width: 32px;
 
+            margin-bottom: 20px;
 
+        }
 
+
 
+        .avue-home__title {
 
+            color: #FFF;
 
+            font-size: 14px;
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .avue-home__sub-title {
 
+            color: #ABABAB;
 
+            font-size: 12px;
 
+        }
 
+    </style>
 
 </head>
 
 
 <body>
 
     <noscript>
 
       <strong>很抱歉，如果没有 JavaScript 支持，网站将不能正常工作。请启用浏览器的 JavaScript 然后继续。</strong>
 
     </noscript>
 
-    <div id="app"></div>
 
+    <div id="app">
 
+        <div class="avue-home">
 
+            <div class="avue-home__main">
 
+                <img class="avue-home__loading" src="./svg/loading-spin.svg" alt="loading">
 
+                <div class="avue-home__title">
 
+                    正在加载资源
 
+                </div>
 
+                <div class="avue-home__sub-title">
 
+                    初次加载资源可能需要较多时间 请耐心等待
 
+                </div>
 
+            </div>
 
+            <div class="avue-home__footer">
 
+                <a href="https://pig4cloud.com/zh-cn" target="_blank">
 
+                    https://pig4cloud.com/zh-cn </a>
 
+            </div>
 
+        </div>
 
+    </div>
 
     <!-- built files will be auto injected -->
 
     <script src="<%= BASE_URL %>util/aes.js" charset="utf-8"></script>
 
     <script src="<%= BASE_URL %>util/aes.js" charset="utf-8"></script>

+ 6 - 0
public/svg/loading-spin.svg
Näytä tiedosto 

@@ -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>