master

分支 (1)

管理

管理

master

vue3-diverse-admin
/
index.html



1
<!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"/><title>vue-diverse-admin</title><script type="module" crossorigin src="./assets/js/index-ab99b1c4.js"></script><link rel="stylesheet" href="./assets/css/index-1292764c.css"></head><body><div id="app"><style>body,html{padding:0;margin:0;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}.loading-container{box-sizing:border-box;height:100vh;overflow:hidden;padding-top:45vh;background:#191a20}.loading-item{margin:0 auto;height:20px;width:20px;position:relative;animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}.loading-item i{height:20px;width:20px;border-radius:25px;display:block;position:absolute}.loading-item i:after,.loading-item i:before{content:'';display:block;position:absolute;height:inherit;width:inherit;border-radius:inherit}.loading-item i:first-child:before{background:rgba(52,149,221,.9);animation:rotate-top-left 1.5s linear infinite;animation:rotate-top-left 1.5s linear infinite}.loading-item i:first-child:after{background:rgba(225,73,44,.9);animation:rotate-top-right 1.5s linear infinite;animation:rotate-top-right 1.5s linear infinite}.loading-item i:last-child:before{background:rgba(249,206,43,.9);animation:rotate-bottom-left 1.5s linear infinite;animation:rotate-bottom-left 1.5s linear infinite}.loading-item i:last-child:after{background:rgba(0,153,117,.9);animation:rotate-bottom-right 1.5s linear infinite;animation:rotate-bottom-right 1.5s linear infinite}.loading-text{text-align:center;margin-top:30px;color:#fff}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(-180deg)}100%{transform:rotate(-360deg)}}@keyframes rotate-top-right{0%{transform:rotate(0)}50%{transform:rotate(-180deg);transform-origin:20% 20%}100%{transform:rotate(-360deg)}}@keyframes rotate-top-left{0%{transform:rotate(0)}50%{transform:rotate(180deg);transform-origin:80% 20%}100%{transform:rotate(360deg)}}@keyframes rotate-bottom-right{0%{transform:rotate(0)}50%{transform:rotate(-180deg);transform-origin:80% 80%}100%{transform:rotate(-360deg)}}@keyframes rotate-bottom-left{0%{transform:rotate(0)}50%{transform:rotate(180deg);transform-origin:20% 80%}100%{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(-180deg)}100%{transform:rotate(-360deg)}}@keyframes rotate-top-right{0%{transform:rotate(0)}50%{transform:rotate(-180deg);transform-origin:20% 20%}100%{transform:rotate(-360deg)}}@keyframes rotate-top-left{0%{transform:rotate(0)}50%{transform:rotate(180deg);transform-origin:80% 20%}100%{transform:rotate(360deg)}}@keyframes rotate-bottom-right{0%{transform:rotate(0)}50%{transform:rotate(-180deg);transform-origin:80% 80%}100%{transform:rotate(-360deg)}}@keyframes rotate-bottom-left{0%{transform:rotate(0)}50%{transform:rotate(180deg);transform-origin:20% 80%}100%{transform:rotate(360deg)}}</style><div class="loading-container"><div class="loading-item"><i></i><i></i></div><div class="loading-text">Loading...</div></div></div></body></html>