index.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="renderer" content="webkit">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  9. <meta name="format-detection" content="telephone=no">
  10. <link rel="icon" href="<%= BASE_URL %>favicon.png">
  11. <title>中国人民武装警察部队新疆生产建设兵团总队史馆门户网站</title>
  12. <style>
  13. .broswertips {
  14. position: fixed;
  15. top: 50%;
  16. left: 50%;
  17. transform: translate(-50%, -50%);
  18. z-index: 99999999;
  19. width: 100%;
  20. height: 100%;
  21. overflow: hidden;
  22. display: none;
  23. }
  24. .broswertips>img {
  25. width: 100%;
  26. }
  27. .broswertips>.alert {
  28. position: absolute;
  29. top: 50%;
  30. left: 50%;
  31. transform: translate(-50%, -50%);
  32. width: 988px;
  33. margin: 0 auto;
  34. height: 500px;
  35. z-index: 99;
  36. color: #fff;
  37. padding: 30px 36px 0;
  38. border-top: 6px solid #D32424;
  39. background: rgba(228, 173, 100, 0.7);
  40. border-bottom: 6px solid #D32424;
  41. }
  42. .broswertips>.alert>.qtitle {
  43. margin-top: 6px;
  44. text-align: center;
  45. font-size: 28px;
  46. font-weight: bold;
  47. line-height: 38px;
  48. color: #fff;
  49. }
  50. .broswertips>.alert>.qline {
  51. width: 50%;
  52. height: 1px;
  53. margin: 26px auto;
  54. position: relative;
  55. background: linear-gradient(90deg,
  56. rgba(255, 255, 255, 0) 0%,
  57. #ffffff 48%,
  58. rgba(255, 255, 255, 0) 100%);
  59. }
  60. .broswertips>.alert>.qline>img {
  61. position: absolute;
  62. left: 50%;
  63. width: 32px;
  64. transform: translateX(-50%);
  65. top: -12px;
  66. }
  67. .broswertips>.alert>.dati {
  68. width: 100%;
  69. height: 50%;
  70. overflow-y: auto;
  71. margin: 0 auto;
  72. background-color: rgba(255, 255, 255, 0.7);
  73. color: #626260;
  74. display: flex;
  75. justify-content: center;
  76. align-items: center;
  77. text-align: justify;
  78. text-indent: 40px;
  79. line-height: 2;
  80. font-size: 18px;
  81. padding: 0 66px;
  82. max-width: 916px;
  83. }
  84. .broswertips>.alert>.dati_btn {
  85. text-align: center;
  86. }
  87. .broswertips>.alert>.dati_btn>a {
  88. display: inline-block;
  89. font-size: 16px;
  90. line-height: 36px;
  91. height: 36px;
  92. cursor: pointer;
  93. text-align: center;
  94. width: 180px;
  95. margin: 48px 20px;
  96. border: 1px solid #D32424;
  97. color: #fff;
  98. background: #D32424;
  99. }
  100. </style>
  101. </head>
  102. <body>
  103. <div class="broswertips" id="broswertips">
  104. <img src="./tip_bg.jpg" alt="">
  105. <div class="alert">
  106. <p class="qtitle">访客须知</p>
  107. <div class="qline">
  108. <img src="./star.png" alt="">
  109. </div>
  110. <div class="dati">
  111. 浏览器内核版本过低无法正常浏览网页,谷歌80.0、360安全浏览器13.0(极速模式)、火狐浏览器97以上版本浏览器浏览。
  112. </div>
  113. <div class="dati_btn">
  114. <a target="_blank" href="/browser/Chrome.exe" >下载谷歌浏览器</a>
  115. <a target="_blank" href="/browser/360.exe">下载360安全浏览器</a>
  116. <a target="_blank" href="/browser/Firefox.exe">下载火狐浏览器</a>
  117. </div>
  118. </div>
  119. </div>
  120. <script>
  121. function versions() {
  122. var u = window.navigator.userAgent
  123. var uLowCase = u.toLowerCase()
  124. return {
  125. userAgent: u,
  126. // IE内核
  127. trident: u.indexOf('Trident') > -1,
  128. // opera内核
  129. presto: u.indexOf('Presto') > -1,
  130. // 苹果、谷歌内核
  131. webKit: u.indexOf('AppleWebKit') > -1,
  132. // 火狐内核
  133. gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,
  134. // 是否为移动终端 / Tablets use desktop version
  135. mobile: (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) && !(/Tablet|iPad/i.test(navigator.userAgent)),
  136. // ios终端
  137. ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  138. // android终端或者uc浏览器
  139. android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
  140. // 是否为iPhone或者安卓QQ浏览器
  141. iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
  142. // 是否为iPad
  143. iPad: u.indexOf('iPad') > -1,
  144. // 是否为web应用程序,没有头部与底部
  145. webApp: u.indexOf('Safari') === -1,
  146. // 是否为微信浏览器
  147. weixin: ~u.indexOf('MicroMessenger'),
  148. // 火狐内核版本
  149. firefoxCore: uLowCase.match(/firefox\/([\d.]+)/),
  150. // chrome内核版本
  151. chromeCore: uLowCase.match(/chrome\/([\d.]+)/),
  152. // webkit内核版本
  153. webkitCore: uLowCase.match(/applewebkit\/([\d.]+)/),
  154. }
  155. }
  156. var broswer = versions()
  157. var dommmm = document.getElementById('broswertips')
  158. if (broswer.trident) {
  159. dommmm.style.display = 'block'
  160. }
  161. // 火狐
  162. else if (broswer.gecko) {
  163. var version = broswer.firefoxCore[1].split(".")[0]
  164. if (Number(version) < 80) {
  165. dommmm.style.display = 'block'
  166. }
  167. }
  168. // 谷歌
  169. else if (broswer.webKit) {
  170. var version = broswer.chromeCore[1].split(".")[0]
  171. if (Number(version) < 69) {
  172. dommmm.style.display = 'block'
  173. }
  174. }
  175. </script>
  176. <div id="app"></div>
  177. </body>
  178. </html>