index.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>MaxKey单点登录认证系统</title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8. <title id="maxkey_title" name="description">MaxKey-业界领先的IAM身份管理和认证产品</title>
  9. <meta http-equiv="description" content="MaxKey Single Sign-On">
  10. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  11. <title><%= htmlWebpackPlugin.options.title %></title>
  12. <style type="text/css">
  13. #preloader {
  14. position: fixed;
  15. top: 0;
  16. left: 0;
  17. z-index: 9999;
  18. width: 100%;
  19. height: 100%;
  20. overflow: hidden;
  21. background: #49a9ee;
  22. transition: opacity .65s
  23. }
  24. .cs-loader {
  25. position: absolute;
  26. top: 0;
  27. left: 0;
  28. width: 100%;
  29. height: 100%
  30. }
  31. .cs-loader-inner {
  32. position: absolute;
  33. top: 50%;
  34. width: 100%;
  35. color: #fff;
  36. text-align: center;
  37. transform: translateY(-50%)
  38. }
  39. .cs-loader-inner label {
  40. display: inline-block;
  41. font-size: 20px;
  42. opacity: 0
  43. }
  44. @keyframes lol {
  45. 0% {
  46. transform: translateX(-300px);
  47. opacity: 0
  48. }
  49. 33% {
  50. transform: translateX(0);
  51. opacity: 1
  52. }
  53. 66% {
  54. transform: translateX(0);
  55. opacity: 1
  56. }
  57. 100% {
  58. transform: translateX(300px);
  59. opacity: 0
  60. }
  61. }
  62. .cs-loader-inner label:nth-child(6) {
  63. animation: lol 3s infinite ease-in-out
  64. }
  65. .cs-loader-inner label:nth-child(5) {
  66. animation: lol 3s .1s infinite ease-in-out
  67. }
  68. .cs-loader-inner label:nth-child(4) {
  69. animation: lol 3s .2s infinite ease-in-out
  70. }
  71. .cs-loader-inner label:nth-child(3) {
  72. animation: lol 3s .3s infinite ease-in-out
  73. }
  74. .cs-loader-inner label:nth-child(2) {
  75. animation: lol 3s .4s infinite ease-in-out
  76. }
  77. .cs-loader-inner label:nth-child(1) {
  78. animation: lol 3s .5s infinite ease-in-out
  79. }
  80. </style>
  81. </head>
  82. <body>
  83. <noscript>
  84. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  85. </noscript>
  86. <div id="app"></div>
  87. <div id="preloader">
  88. <div class="cs-loader">
  89. <div class="cs-loader-inner">
  90. <label> ●</label>
  91. <label> ●</label>
  92. <label> ●</label>
  93. <label> ●</label>
  94. <label> ●</label>
  95. <label> ●</label>
  96. </div>
  97. </div>
  98. </div>
  99. <!-- built files will be auto injected -->
  100. <script>
  101. const e=document.getElementById("preloader")
  102. setTimeout(()=>{
  103. e.style.display="none"
  104. },3000)
  105. </script>
  106. </body>
  107. </html>