index.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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="apple-mobile-web-app-capable" content="yes" />
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  8. <meta name="format-detection" content="telephone=no" />
  9. <meta name="mobile-web-app-capable" content="yes" />
  10. <meta name="msapplication-tap-highlight" content="no" />
  11. <meta name="fragment" content="!" />
  12. <meta
  13. name="viewport"
  14. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, viewport-fit=cover"
  15. />
  16. <meta
  17. http-equiv="Cache-Control"
  18. content="no-cache, no-store, must-revalidate"
  19. />
  20. <meta http-equiv="Pragma" content="no-cache" />
  21. <meta http-equiv="Expires" content="0" />
  22. <meta http-equiv="Cache" content="no-cache" />
  23. <meta name="description" content="" />
  24. <link rel="icon" href="../../favicon.ico" />
  25. <title>查看协议</title>
  26. <style>
  27. body {
  28. padding: 0;
  29. margin: 0;
  30. height: 100vh;
  31. overflow: hidden;
  32. }
  33. .downloadUrl {
  34. position: fixed;
  35. bottom: 15px;
  36. width: 90%;
  37. background: #01c1b5;
  38. border-radius: 30px;
  39. left: 5%;
  40. text-align: center;
  41. padding: 15px 0;
  42. color: #fff;
  43. font-size: 16px;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <style>
  49. .m-toast {
  50. position: fixed;
  51. top: 50%;
  52. left: 50%;
  53. display: -webkit-box;
  54. display: -webkit-flex;
  55. display: flex;
  56. -webkit-box-orient: vertical;
  57. -webkit-box-direction: normal;
  58. -webkit-flex-direction: column;
  59. flex-direction: column;
  60. -webkit-box-align: center;
  61. -webkit-align-items: center;
  62. align-items: center;
  63. -webkit-box-pack: center;
  64. -webkit-justify-content: center;
  65. justify-content: center;
  66. box-sizing: content-box;
  67. width: 88px;
  68. max-width: 70%;
  69. min-height: 88px;
  70. padding: 16px;
  71. color: #fff;
  72. font-size: 14px;
  73. line-height: 20px;
  74. white-space: pre-wrap;
  75. text-align: center;
  76. word-wrap: break-word;
  77. background-color: rgba(50, 50, 51, 0.88);
  78. border-radius: 4px;
  79. -webkit-transform: translate3d(-50%, -50%, 0);
  80. transform: translate3d(-50%, -50%, 0);
  81. z-index: 2002;
  82. }
  83. .m-loading {
  84. position: relative;
  85. color: #fff;
  86. font-size: 0;
  87. vertical-align: middle;
  88. padding: 4px;
  89. }
  90. .m-loading__spinner {
  91. position: relative;
  92. display: inline-block;
  93. width: 30px;
  94. max-width: 100%;
  95. height: 30px;
  96. max-height: 100%;
  97. vertical-align: middle;
  98. -webkit-animation: m-rotate 0.8s linear infinite;
  99. animation: m-rotate 0.8s linear infinite;
  100. }
  101. .m-loading__spinner--circular {
  102. -webkit-animation-duration: 2s;
  103. animation-duration: 2s;
  104. }
  105. .m-loading__circular {
  106. display: block;
  107. width: 100%;
  108. height: 100%;
  109. }
  110. .m-loading__circular circle {
  111. -webkit-animation: m-circular 1.5s ease-in-out infinite;
  112. animation: m-circular 1.5s ease-in-out infinite;
  113. stroke: currentColor;
  114. stroke-width: 3;
  115. stroke-linecap: round;
  116. }
  117. .m-loading__text {
  118. display: inline-block;
  119. margin-left: 8px;
  120. color: #969799;
  121. font-size: 14px;
  122. vertical-align: middle;
  123. }
  124. .m-loading--vertical {
  125. display: -webkit-box;
  126. display: -webkit-flex;
  127. display: flex;
  128. -webkit-box-orient: vertical;
  129. -webkit-box-direction: normal;
  130. -webkit-flex-direction: column;
  131. flex-direction: column;
  132. -webkit-box-align: center;
  133. -webkit-align-items: center;
  134. align-items: center;
  135. }
  136. .m-loading--vertical .m-loading__text {
  137. margin: 8px 0 0;
  138. }
  139. @-webkit-keyframes m-circular {
  140. 0% {
  141. stroke-dasharray: 1, 200;
  142. stroke-dashoffset: 0;
  143. }
  144. 50% {
  145. stroke-dasharray: 90, 150;
  146. stroke-dashoffset: -40;
  147. }
  148. 100% {
  149. stroke-dasharray: 90, 150;
  150. stroke-dashoffset: -120;
  151. }
  152. }
  153. @keyframes m-circular {
  154. 0% {
  155. stroke-dasharray: 1, 200;
  156. stroke-dashoffset: 0;
  157. }
  158. 50% {
  159. stroke-dasharray: 90, 150;
  160. stroke-dashoffset: -40;
  161. }
  162. 100% {
  163. stroke-dasharray: 90, 150;
  164. stroke-dashoffset: -120;
  165. }
  166. }
  167. .m-toast__text {
  168. margin-top: 8px;
  169. }
  170. </style>
  171. <div
  172. id="m_loading"
  173. class="m-toast m-toast--middle m-toast--loading"
  174. style="z-index: 2001"
  175. >
  176. <div class="m-loading m-loading--circular m-toast__loading">
  177. <span class="m-loading__spinner m-loading__spinner--circular"
  178. ><svg viewBox="25 25 50 50" class="m-loading__circular">
  179. <circle cx="50" cy="50" r="20" fill="none"></circle></svg
  180. ></span>
  181. </div>
  182. <div class="m-toast__text">加载中...</div>
  183. </div>
  184. <div id="app">
  185. <iframe
  186. src=""
  187. id="iframe"
  188. style="border: 0"
  189. width="100%"
  190. height="800"
  191. ></iframe>
  192. <!-- <div class="downloadUrl" onclick="funDownLoadUrl()">下载协议</div> -->
  193. <!-- <van-button color="#01C1B5" round @click="onDownLoad">下载协议</van-button> -->
  194. </div>
  195. <script type="text/javascript" src="../js/utils.js"></script>
  196. <script type="text/javascript">
  197. var downloadUrl = getQueryVariable('downLoadUrl')
  198. var iframe = document.querySelector('#iframe')
  199. iframe.src = './web/viewer.html?file=' + decodeURIComponent(downloadUrl)
  200. function funDownLoadUrl() {
  201. window.location.href = decodeURIComponent(downloadUrl)
  202. }
  203. if (iframe.attachEvent) {
  204. iframe.attachEvent('onload', function () {
  205. // alert("Local iframe is now loaded.");
  206. document.querySelector('#m_loading').style.display = 'none'
  207. })
  208. } else {
  209. iframe.onload = function () {
  210. // alert("Local iframe is now loaded.");
  211. document.querySelector('#m_loading').style.display = 'none'
  212. }
  213. }
  214. setTimeout(function () {
  215. document.querySelector('#m_loading').style.display = 'none'
  216. }, 5000)
  217. </script>
  218. </body>
  219. </html>