index.example 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title></title>
  7. </head>
  8. <body>
  9. <div id="loadding">
  10. <div class="loader">
  11. <div class="horizontal">
  12. <div class="circlesup">
  13. <div class="circle"></div>
  14. <div class="circle"></div>
  15. <div class="circle"></div>
  16. <div class="circle"></div>
  17. <div class="circle"></div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </body>
  23. <style type="text/css">
  24. /* Start the loader code, first, let's align it the center of screen */
  25. .loader {
  26. position: fixed;
  27. top: 50%;
  28. left: 50%;
  29. transform: translate(-50%, -50%);
  30. text-align: center;
  31. /* disable selection and cursor changes */
  32. -webkit-touch-callout: none;
  33. -webkit-user-select: none;
  34. -khtml-user-select: none;
  35. -moz-user-select: none;
  36. -ms-user-select: none;
  37. user-select: none;
  38. cursor: default;
  39. z-index: 2000;
  40. }
  41. /* Text align it the center of screen and connect the looped animation for 2 seconds */
  42. .text {
  43. position: fixed;
  44. left: -2.1rem;
  45. top: -1.7rem;
  46. -webkit-animation: text 2s infinite;
  47. -moz-animation: text 2s infinite;
  48. -moz-animation: text 2s infinite;
  49. -ms-animation: text 2s infinite;
  50. -o-animation: text 2s infinite;
  51. animation: text 2s infinite;
  52. }
  53. /* Set for the second layer horizontal position */
  54. .horizontal {
  55. position: fixed;
  56. top: -2.5rem;
  57. left: -2rem;
  58. -webkit-transform: rotate(0deg);
  59. -moz-transform: rotate(0deg);
  60. -ms-transform: rotate(0deg);
  61. -o-transform: rotate(0deg);
  62. transform: rotate(0deg);
  63. }
  64. /* The next two classes do mirror for animation */
  65. .circlesup {
  66. position: fixed;
  67. top: 50%;
  68. left: 50%;
  69. transform: translate(-50%, -50%);
  70. }
  71. /* Create a container for our circles, rotate it 45 degrees and set animation*/
  72. .circle {
  73. position: fixed;
  74. width: 3rem;
  75. height: 3rem;
  76. -webkit-transform: rotate(45deg);
  77. -moz-transform: rotate(45deg);
  78. -ms-transform: rotate(45deg);
  79. -o-transform: rotate(45deg);
  80. transform: rotate(45deg);
  81. -webkit-animation: orbit 2s infinite;
  82. -moz-animation: orbit 2s infinite;
  83. -moz-animation: orbit 2s infinite;
  84. -ms-animation: orbit 2s infinite;
  85. -o-animation: orbit 2s infinite;
  86. animation: orbit 2s infinite;
  87. z-index: 5;
  88. }
  89. /* Style's of our circles */
  90. .circle:after {
  91. content: "";
  92. position: fixed;
  93. width: 15px;
  94. height: 15px;
  95. -webkit-border-radius: 100%;
  96. -moz-border-radius: 100%;
  97. -ms-border-radius: 100%;
  98. -o-border-radius: 100%;
  99. border-radius: 100%;
  100. background: #d33047; /* Pick a color 1*/
  101. }
  102. .circle:nth-child(2) {
  103. -webkit-animation-delay: 100ms;
  104. -moz-animation-delay: 100ms;
  105. -ms-animation-delay: 100ms;
  106. -o-animation-delay: 100ms;
  107. animation-delay: 100ms;
  108. z-index: 4;
  109. }
  110. .circle:nth-child(2):after {
  111. background: #ff3d38; /* Pick a color 2*/
  112. -webkit-transform: scale(0.8, 0.8);
  113. -moz-transform: scale(0.8, 0.8);
  114. -ms-transform: scale(0.8, 0.8);
  115. -o-transform: scale(0.8, 0.8);
  116. transform: scale(0.8, 0.8);
  117. }
  118. .circle:nth-child(3) {
  119. -webkit-animation-delay: 225ms;
  120. -moz-animation-delay: 225ms;
  121. -ms-animation-delay: 225ms;
  122. -o-animation-delay: 225ms;
  123. animation-delay: 225ms;
  124. z-index: 3;
  125. }
  126. .circle:nth-child(3):after {
  127. background: #ffa489; /* Pick a color 3*/
  128. -webkit-transform: scale(0.6, 0.6);
  129. -moz-transform: scale(0.6, 0.6);
  130. -ms-transform: scale(0.6, 0.6);
  131. -o-transform: scale(0.6, 0.6);
  132. transform: scale(0.6, 0.6);
  133. }
  134. .circle:nth-child(4) {
  135. -webkit-animation-delay: 350ms;
  136. -moz-animation-delay: 350ms;
  137. -ms-animation-delay: 350ms;
  138. -o-animation-delay: 350ms;
  139. animation-delay: 350ms;
  140. z-index: 2;
  141. }
  142. .circle:nth-child(4):after {
  143. background: #ff6d37; /* Pick a color 4*/
  144. -webkit-transform: scale(0.4, 0.4);
  145. -moz-transform: scale(0.4, 0.4);
  146. -ms-transform: scale(0.4, 0.4);
  147. -o-transform: scale(0.4, 0.4);
  148. transform: scale(0.4, 0.4);
  149. }
  150. .circle:nth-child(5) {
  151. -webkit-animation-delay: 475ms;
  152. -moz-animation-delay: 475ms;
  153. -ms-animation-delay: 475ms;
  154. -o-animation-delay: 475ms;
  155. animation-delay: 475ms;
  156. z-index: 1;
  157. }
  158. .circle:nth-child(5):after {
  159. background: #db2f00; /* Pick a color 5*/
  160. -webkit-transform: scale(0.2, 0.2);
  161. -moz-transform: scale(0.2, 0.2);
  162. -ms-transform: scale(0.2, 0.2);
  163. -o-transform: scale(0.2, 0.2);
  164. transform: scale(0.2, 0.2);
  165. }
  166. /* Animation keys */
  167. @-webkit-keyframes orbit {
  168. 0% {
  169. -webkit-transform: rotate(45deg);
  170. }
  171. 5% {
  172. -webkit-transform: rotate(45deg);
  173. -webkit-animation-timing-function: ease-out;
  174. }
  175. 70% {
  176. -webkit-transform: rotate(405deg);
  177. -webkit-animation-timing-function: ease-in;
  178. }
  179. 100% {
  180. -webkit-transform: rotate(405deg);
  181. }
  182. }
  183. @keyframes orbit {
  184. 0% {
  185. transform: rotate(45deg);
  186. }
  187. 5% {
  188. transform: rotate(45deg);
  189. animation-timing-function: ease-out;
  190. }
  191. 70% {
  192. transform: rotate(405deg);
  193. animation-timing-function: ease-in;
  194. }
  195. 100% {
  196. transform: rotate(405deg);
  197. }
  198. }
  199. @-webkit-keyframes text {
  200. 0% {
  201. -webkit-transform: scale(0.2, 0.2);
  202. -webkit-animation-timing-function: ease-out;
  203. }
  204. 40%,
  205. 60% {
  206. -webkit-transform: scale(1, 1);
  207. -webkit-animation-timing-function: ease-out;
  208. }
  209. 70%,
  210. 100% {
  211. -webkit-transform: scale(0.2, 0.2);
  212. }
  213. }
  214. @-moz-keyframes text {
  215. 0% {
  216. -moz-transform: scale(0.2, 0.2);
  217. -moz-animation-timing-function: ease-out;
  218. }
  219. 50% {
  220. -moz-transform: scale(1, 1);
  221. -moz-animation-timing-function: ease-out;
  222. }
  223. 60% {
  224. -moz-transform: scale(1, 1);
  225. -moz-animation-timing-function: ease-out;
  226. }
  227. 100% {
  228. -moz-transform: scale(0.2, 0.2);
  229. }
  230. }
  231. @keyframes text {
  232. 0% {
  233. transform: scale(0.2, 0.2);
  234. animation-timing-function: ease-out;
  235. }
  236. 50% {
  237. transform: scale(1, 1);
  238. animation-timing-function: ease-out;
  239. }
  240. 60% {
  241. transform: scale(1, 1);
  242. animation-timing-function: ease-out;
  243. }
  244. 100% {
  245. transform: scale(0.2, 0.2);
  246. }
  247. }
  248. </style>
  249. <script type="text/javascript">
  250. // 常用工具函数
  251. var tools = {
  252. formatParams: function(data) {
  253.     var arr = [];
  254.     for (var name in data) {
  255.         arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
  256.     }
  257.     return arr.join("&");
  258. },
  259. /* ajax请求get
  260. * @param url string 请求的路径
  261. * @param query object 请求的参数query
  262. * @param succCb function 请求成功之后的回调
  263. * @param failCb function 请求失败的回调
  264. * @param isJson boolean true: 解析json false:文本请求 默认值true
  265. */
  266. ajaxGet: function (url, query, succCb, failCb, isJson) {
  267. // 拼接url加query
  268. if (query) {
  269. var parms = tools.formatParams(query);
  270. url += '&' + parms;
  271. // console.log('-------------',url);
  272. }
  273. // 1、创建对象
  274. var ajax = new XMLHttpRequest();
  275. // 2、建立连接
  276. // true:请求为异步 false:同步
  277. ajax.open("GET", url, true);
  278. // ajax.setRequestHeader("Origin",STATIC_PATH);
  279. // ajax.setRequestHeader("Access-Control-Allow-Origin","*");
  280. // // 响应类型
  281. // ajax.setRequestHeader('Access-Control-Allow-Methods', '*');
  282. // // 响应头设置
  283. // ajax.setRequestHeader('Access-Control-Allow-Headers', 'x-requested-with,content-type');
  284. // ajax.withCredentials = true;
  285. // 3、发送请求
  286. ajax.send(null);
  287. // 4、监听状态的改变
  288. ajax.onreadystatechange = function () {
  289. if (ajax.readyState === 4) {
  290. if (ajax.status === 200) {
  291. // 用户传了回调才执行
  292. // isJson默认值为true,要解析json
  293. if (isJson === undefined) {
  294. isJson = true;
  295. }
  296. var res = isJson ? JSON.parse(ajax.responseText == "" ? '{}' : ajax.responseText) : ajax.responseText;
  297. succCb && succCb(res);
  298. } else {
  299. // 请求失败
  300. failCb && failCb();
  301. }
  302. }
  303. }
  304. },
  305. /* ajax请求post
  306. * @param url string 请求的路径
  307. * @param data object 请求的参数query
  308. * @param succCb function 请求成功之后的回调
  309. * @param failCb function 请求失败的回调
  310. * @param isJson boolean true: 解析json false:文本请求 默认值true
  311. */
  312. ajaxPost: function (url, data, succCb, failCb, isJson) {
  313. var formData = new FormData();
  314. for (var i in data) {
  315. formData.append(i, data[i]);
  316. }
  317. //得到xhr对象
  318. var xhr = null;
  319. if (XMLHttpRequest) {
  320. xhr = new XMLHttpRequest();
  321. } else {
  322. xhr = new ActiveXObject("Microsoft.XMLHTTP");
  323. }
  324. xhr.open("post", url, true);
  325. // 设置请求头 需在open后send前
  326. // 这里的CSRF需自己取后端获取,下面给出获取代码
  327. // xhr.setRequestHeader("X-CSRFToken", CSRF);
  328. xhr.send(formData);
  329. xhr.onreadystatechange = function () {
  330. if (xhr.readyState === 4) {
  331. if (xhr.status === 200) {
  332. // 判断isJson是否传进来了
  333. isJson = isJson === undefined ? true : isJson;
  334. succCb && succCb(isJson ? JSON.parse(xhr.responseText) : xhr.responseText);
  335. }
  336. }
  337. }
  338. },
  339. getSiteRoot: function () {
  340. return document.location.protocol + '//' + window.location.host;
  341. },
  342. }
  343. // 调用
  344. // 接口地址
  345. let url = tools.getSiteRoot()+"/admin/center";
  346. // 传输数据 为object
  347. // let data = {}
  348. tools.ajaxGet(url,'', function(res){
  349. if(res.result === 1) {
  350. if(res.data.is_open == 2){
  351. window.location.href = res.data.url;
  352. }else {
  353. window.location.href = tools.getSiteRoot()+'/admin.html';
  354. }
  355. }else {
  356. window.location.href = tools.getSiteRoot()+'/admin.html';
  357. }
  358. })
  359. </script>
  360. </html>