index.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8. <title>
  9. <%= VUE_APP_TITLE %>
  10. </title>
  11. <script type="text/javascript">
  12. document.write("<script src='<%= BASE_URL %>config.js?" + new Date().getTime() + "'><\/script>");
  13. </script>
  14. </head>
  15. <body data-layout="header">
  16. <noscript>
  17. <strong>We're sorry but <%= VUE_APP_TITLE %> doesn't work properly without JavaScript
  18. enabled. Please enable it to continue.</strong>
  19. </noscript>
  20. <script type="text/javascript">
  21. localStorage.getItem("APP_DARK") && document.documentElement.classList.add("dark");
  22. </script>
  23. <div id="app" class="aminui">
  24. <div class="app-loading">
  25. <div class="app-loading__logo">
  26. <img src="<%= BASE_URL %>img/logo.png" />
  27. </div>
  28. <div class="app-loading__loader"></div>
  29. <div class="app-loading__title">
  30. <%= VUE_APP_TITLE %>
  31. </div>
  32. </div>
  33. <style>
  34. .app-loading {
  35. position: absolute;
  36. top: 0px;
  37. left: 0px;
  38. right: 0px;
  39. bottom: 0px;
  40. display: flex;
  41. justify-content: center;
  42. align-items: center;
  43. flex-direction: column;
  44. background: #fff;
  45. }
  46. .app-loading__logo {
  47. margin-bottom: 30px;
  48. }
  49. .app-loading__logo img {
  50. width: 90px;
  51. vertical-align: bottom;
  52. }
  53. .app-loading__loader {
  54. box-sizing: border-box;
  55. width: 35px;
  56. height: 35px;
  57. border: 5px solid transparent;
  58. border-top-color: #000;
  59. border-radius: 50%;
  60. animation: .5s loader linear infinite;
  61. position: relative;
  62. }
  63. .app-loading__loader:before {
  64. box-sizing: border-box;
  65. content: "";
  66. display: block;
  67. width: inherit;
  68. height: inherit;
  69. position: absolute;
  70. top: -5px;
  71. left: -5px;
  72. border: 5px solid #ccc;
  73. border-radius: 50%;
  74. opacity: .5;
  75. }
  76. .app-loading__title {
  77. font-size: 24px;
  78. color: #333;
  79. margin-top: 30px;
  80. }
  81. .dark .app-loading {
  82. background: #222225;
  83. }
  84. .dark .app-loading__loader {
  85. border-top-color: #fff;
  86. }
  87. .dark .app-loading__title {
  88. color: #d0d0d0;
  89. }
  90. @keyframes loader {
  91. 0% {
  92. transform: rotate(0deg);
  93. }
  94. 100% {
  95. transform: rotate(360deg);
  96. }
  97. }
  98. </style>
  99. </div>
  100. <!-- built files will be auto injected -->
  101. </body>
  102. <div id="versionCheck"
  103. style="display: none;position: absolute;z-index: 99;top:0;left:0;right:0;bottom:0;padding:40px;background:rgba(255,255,255,0.9);color: #333;">
  104. <h2 style="line-height: 1;margin: 0;font-size: 24px;">当前使用的浏览器内核版本过低 :(</h2>
  105. <p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 20px;opacity: 0.8;">当前版本:<span
  106. id="versionCheck-type">--</span> <span id="versionCheck-version">--</span></p>
  107. <p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 10px;opacity: 0.8;">最低版本要求:Chrome 71+、Firefox
  108. 65+、Safari 12+、Edge 97+。</p>
  109. <p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 10px;opacity: 0.8;">
  110. 请升级浏览器版本,或更换现代浏览器,如果你使用的是双核浏览器,请切换到极速/高速模式。</p>
  111. </div>
  112. <script type="text/javascript">
  113. function getBrowerInfo() {
  114. var userAgent = window.navigator.userAgent;
  115. var browerInfo = {
  116. type: "unknown",
  117. version: "unknown",
  118. userAgent: userAgent
  119. };
  120. if (document.documentMode) {
  121. browerInfo.type = "IE";
  122. browerInfo.version = document.documentMode + "";
  123. } else if (indexOf(userAgent, "Firefox")) {
  124. browerInfo.type = "Firefox";
  125. browerInfo.version = userAgent.match(/Firefox\/([\d.]+)/)[1];
  126. } else if (indexOf(userAgent, "Opera")) {
  127. browerInfo.type = "Opera";
  128. browerInfo.version = userAgent.match(/Opera\/([\d.]+)/)[1];
  129. } else if (indexOf(userAgent, "Edg")) {
  130. browerInfo.type = "Edg";
  131. browerInfo.version = userAgent.match(/Edg\/([\d.]+)/)[1];
  132. } else if (indexOf(userAgent, "Chrome")) {
  133. browerInfo.type = "Chrome";
  134. browerInfo.version = userAgent.match(/Chrome\/([\d.]+)/)[1];
  135. } else if (indexOf(userAgent, "Safari")) {
  136. browerInfo.type = "Safari";
  137. browerInfo.version = userAgent.match(/Safari\/([\d.]+)/)[1];
  138. }
  139. return browerInfo;
  140. }
  141. function indexOf(userAgent, brower) {
  142. return userAgent.indexOf(brower) > -1;
  143. }
  144. function isSatisfyBrower() {
  145. var minVer = {
  146. "Chrome": 71,
  147. "Firefox": 65,
  148. "Safari": 12,
  149. "Edg": 97,
  150. "IE": 999
  151. }
  152. var browerInfo = getBrowerInfo();
  153. var materVer = browerInfo.version.split(".")[0];
  154. return materVer >= minVer[browerInfo.type];
  155. }
  156. if (!isSatisfyBrower()) {
  157. document.getElementById("versionCheck").style.display = "block";
  158. document.getElementById("versionCheck-type").innerHTML = getBrowerInfo().type;
  159. document.getElementById("versionCheck-version").innerHTML = getBrowerInfo().version;
  160. }
  161. </script>
  162. </html>