master

分支 (1)

管理

管理

master

eu-vue3
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eu-vue3</title>

    <style>
      /* 深色模式 */
      @media (prefers-color-scheme: dark) {
        #loading-wrapper {
          background: #191E32 !important;
        }
        .loading-text {
          color: #8F9BB3 !important;
        }
      }
      #loading-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        background: #f7f8fa;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      #loading-wrapper .loading-text {
        color: #606266;
        font-size: 19px;
        margin-top: 30px;
      }
      #loading-wrapper .loading {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        border: 3px solid;
        border-color: #155bd4 #155bd4 transparent transparent;
        animation: rotation 1s linear infinite;
      }

      #loading-wrapper .loading:after,
      #loading-wrapper .loading:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px solid;
        border-color: transparent transparent #ff3d00 #ff3d00;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        -webkit-animation: rotationBack 0.5s linear infinite;
        animation: rotationBack 0.5s linear infinite;
        transform-origin: center center;
      }

      #loading-wrapper .loading:before {
        width: 60px;
        height: 60px;
        border-color: #155bd4 #155bd4 transparent transparent;
        -webkit-animation: rotation 1.5s linear infinite;
        animation: rotation 1.5s linear infinite;
      }

      @keyframes rotation {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }

      @keyframes rotationBack {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-360deg);
        }
      }
    </style>
  </head>
  <body class="eu-ui">
    <div id="app">
      <div id="loading-wrapper">
        <div class="loading"></div>
        <div class="loading-text">正在加载系统资源，请耐心等待</div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>