| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 | <!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>Vue admin perfect</title>  </head>  <body>  <div id="app">      <style>          .first-loading-wrp {              display: flex;              flex-direction: column;              align-items: center;              justify-content: center;              height: 90vh;              min-height: 90vh;          }          .first-loading-wrp > h1 {              font-size: 30px;              font-weight: bolder;          }          .first-loading-wrp .loading-wrp {              display: flex;              align-items: center;              justify-content: center;              padding: 98px;          }          .dot {              position: relative;              box-sizing: border-box;              display: inline-block;              width: 64px;              height: 64px;              font-size: 64px;              transform: rotate(45deg);              animation: antRotate 1.2s infinite linear;          }          .dot i {              position: absolute;              display: block;              width: 28px;              height: 28px;              background-color: #1890ff;              border-radius: 100%;              opacity: 0.3;              transform: scale(0.75);              transform-origin: 50% 50%;              animation: antSpinMove 1s infinite linear alternate;          }          .dot i:nth-child(1) {              top: 0;              left: 0;          }          .dot i:nth-child(2) {              top: 0;              right: 0;              -webkit-animation-delay: 0.4s;              animation-delay: 0.4s;          }          .dot i:nth-child(3) {              right: 0;              bottom: 0;              -webkit-animation-delay: 0.8s;              animation-delay: 0.8s;          }          .dot i:nth-child(4) {              bottom: 0;              left: 0;              -webkit-animation-delay: 1.2s;              animation-delay: 1.2s;          }          @keyframes antRotate {              to {                  -webkit-transform: rotate(405deg);                  transform: rotate(405deg);              }          }          @-webkit-keyframes antRotate {              to {                  -webkit-transform: rotate(405deg);                  transform: rotate(405deg);              }          }          @keyframes antSpinMove {              to {                  opacity: 1;              }          }          @-webkit-keyframes antSpinMove {              to {                  opacity: 1;              }          }      </style>      <div id="vue-admin-perfect">          <div class="first-loading-wrp">              <div class="loading-wrp">          <span class="dot dot-spin">            <i></i>            <i></i>            <i></i>            <i></i>          </span>              </div>              <h1>vue-admin-perfect</h1>          </div>      </div>  </div>    <script type="module" src="/src/main.ts"></script>  </body></html>
 |