index.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <link rel="icon" href="/favicon.ico" />
  6. <link rel="stylesheet" href="/iconfont.css" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <title>后台管理系统</title>
  9. <script src="/sortable.min.js"></script>
  10. <script type="module">
  11. import process from "process";
  12. window.process = process;
  13. </script>
  14. </head>
  15. <body>
  16. <div id="app">
  17. <style>
  18. * {
  19. margin: 0;
  20. padding: 0;
  21. }
  22. html,
  23. body {
  24. width: 100%;
  25. height: 100%;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. background: #000;
  30. overflow: hidden;
  31. font-family: "Reggae One", cursive;
  32. }
  33. p {
  34. font-size: 8vw;
  35. overflow: hidden;
  36. -webkit-text-stroke: 3px #7272a5;
  37. }
  38. span {
  39. display: block;
  40. font-size: 20px;
  41. overflow: hidden;
  42. color: green;
  43. text-align: center;
  44. }
  45. p::before {
  46. content: " ";
  47. width: 100%;
  48. height: 100%;
  49. position: absolute;
  50. left: 0;
  51. top: 0;
  52. background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
  53. mix-blend-mode: multiply;
  54. }
  55. p::after {
  56. content: "";
  57. background: radial-gradient(circle, #fff, #000 50%);
  58. background-size: 25% 25%;
  59. position: absolute;
  60. top: -100%;
  61. left: -100%;
  62. right: 0;
  63. bottom: 0;
  64. mix-blend-mode: color-dodge;
  65. animation: mix 2s linear infinite;
  66. }
  67. @keyframes mix {
  68. to {
  69. transform: translate(50%, 50%);
  70. }
  71. }
  72. </style>
  73. <div class="g-container">
  74. <p>Pure-Admin</p>
  75. <span class="_develop"></span>
  76. </div>
  77. </div>
  78. <script>
  79. // 此代码仅用于开发环境的友好提示,项目打包前请去掉这段js代码 This code is only used as a friendly reminder of the development environment, please remove this js code before packaging the project
  80. window.onload = function () {
  81. (function () {
  82. const ua = navigator.userAgent.toLowerCase();
  83. const re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
  84. const m = ua.match(re);
  85. const Sys = {
  86. browser: m[1].replace(/version/, "'safari"),
  87. version: m[2]
  88. };
  89. const browser = Array.of("chrome", "firefox").includes(Sys.browser);
  90. const version = parseFloat(Sys.version);
  91. const el = document.querySelector("._develop");
  92. if (el) {
  93. if (browser && version >= 90) {
  94. let success =
  95. document.createTextNode("当前浏览器版本很适合开发!!! 😃");
  96. el.appendChild(success);
  97. } else {
  98. let warn = document.createTextNode(
  99. "当前浏览器版本不适合开发,建议使用最新版本的谷歌或者火狐浏览器!!!😯"
  100. );
  101. el.appendChild(warn);
  102. el.style.color = "red";
  103. }
  104. }
  105. return Sys;
  106. })();
  107. };
  108. </script>
  109. <script type="module" src="/src/main.ts"></script>
  110. </body>
  111. </html>