| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link rel="icon" href="/favicon.ico" />
- <title>企业级中后台基础框架</title>
- <style>
- .loading-container {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 18px;
- background:
- radial-gradient(circle at center, rgba(22, 93, 255, 0.08), transparent 34%), rgba(255, 255, 255, 0.86);
- }
- .dark .loading-container {
- background: radial-gradient(circle at center, rgba(64, 128, 255, 0.18), transparent 36%), rgba(15, 23, 42, 0.9);
- color: rgba(255, 255, 255, 0.9);
- }
- .loading-container .loading {
- --size: 1px;
- --loader-color: #165dff;
- width: calc(48 * var(--size));
- height: calc(48 * var(--size));
- background: var(--loader-color);
- border-radius: 10%;
- box-shadow: 0 10px 30px rgba(22, 93, 255, 0.32);
- animation: forge-initial-loader-rotate 1s linear infinite;
- }
- .dark .loading-container .loading {
- --loader-color: #4080ff;
- box-shadow: 0 10px 30px rgba(64, 128, 255, 0.36);
- }
- @keyframes forge-initial-loader-rotate {
- 0% {
- transform: rotate(0deg) scale(0.2);
- border-radius: 10%;
- }
- 50% {
- transform: rotate(180deg) scale(1.5);
- border-radius: 50%;
- }
- 100% {
- transform: rotate(360deg) scale(0.2);
- border-radius: 10%;
- }
- }
- </style>
- </head>
- <body class="dark:text-#e9e9e9 auto-bg">
- <div id="app">
- <div class="loading-container">
- <div class="loading" aria-hidden="true"></div>
- </div>
- </div>
- <script type="module" src="/src/main.js"></script>
- </body>
- </html>
|
