index.html 4.8 KB

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