vue-tony-admin
/
index.html

<!DOCTYPE html>
<html lang="zh" id="htmlRoot">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <title><%= VITE_GLOB_APP_TITLE %></title>
    <link rel="icon" href="/favicon.ico" />
    <style>
    #app,body,html{position:relative;width:100%;height:100%;padding:0;margin:0}
    .app-loading{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:#f4f7f9;flex-direction:column;--loader-text-color:rgba(0, 0, 0, 0.85);--loader-color:#409eff;--loader-size:10px}
    .app-loading .app-loading-wrap{display:flex;justify-content:center;align-items:center;flex-direction:column}
    .app-loading .app-loading-logo{display:block;width:90px;margin:0 auto;margin-bottom:30px}
    .app-loading .app-loading-title{display:flex;justify-content:center;align-items:center;font-size:30px;color:var(--loader-text-color)}
    .app-loading-dot{position:absolute;right:32px;top:16px;transform:scale(1.5)}
    .app-loading-dot>span{display:inline-block;width:8px;height:8px;background:#337ab7;border-radius:50%;animation:dotFx 1s linear 0s infinite;margin-right:2px}
    .app-loading-dot>span:nth-child(2){background:#5bc0de;animation-delay:125ms}
    .app-loading-dot>span:nth-child(3){background:#5cb85c;animation-delay:.25s}
    .app-loading-dot>span:nth-child(4){background:#f0ad4e;animation-delay:375ms}
    @keyframes dotFx{0%{transform:scale(1)}50%{transform:scale(0)}100%{transform:scale(1)}}
    html.dark .app-loading{background-color:#2c344a;--loader-text-color:rgba(255, 255, 255, 0.85);--loader-color:rgba(255, 255, 255, 0.85)}
    </style>
  </head>
  <body>
    <script>
      (() => {
        var htmlRoot = document.getElementById('htmlRoot');
        var theme = window.localStorage.getItem('vueuse-color-scheme');
        if (htmlRoot && theme) {
          htmlRoot.classList.add(theme);
          theme = htmlRoot = null;
        }
      })();
    </script>
    <div id="app">
      <div class="app-loading">
        <div class="app-loading-wrap">
          <img src="/images/logo.png" class="app-loading-logo" alt="Logo" />
          <div class="app-loading-dot"><span></span><span></span><span></span><span></span></div>
          <div class="app-loading-title">
            <%= VITE_GLOB_APP_TITLE %>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>