server-error.php 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. <?php
  2. ?>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>七件事网络技术支持</title>
  8. <style>
  9. body {
  10. margin: 0;
  11. padding: 0;
  12. background: #E6EAEB;
  13. font-family: Arial, '微软雅黑', '宋体', sans-serif
  14. }
  15. .alert-box {
  16. display: none;
  17. position: relative;
  18. margin: 96px auto 0;
  19. padding: 180px 85px 22px;
  20. border-radius: 10px 10px 0 0;
  21. background: #FFF;
  22. box-shadow: 5px 9px 17px rgba(102, 102, 102, 0.75);
  23. width: 286px;
  24. color: #FFF;
  25. text-align: center
  26. }
  27. .alert-box p {
  28. margin: 0
  29. }
  30. .alert-circle {
  31. position: absolute;
  32. top: -50px;
  33. left: 111px
  34. }
  35. .alert-sec-circle {
  36. stroke-dashoffset: 0;
  37. stroke-dasharray: 735;
  38. transition: stroke-dashoffset 1s linear
  39. }
  40. .alert-sec-text {
  41. position: absolute;
  42. top: 11px;
  43. left: 190px;
  44. width: 76px;
  45. color: #000;
  46. font-size: 68px
  47. }
  48. .alert-sec-unit {
  49. font-size: 34px
  50. }
  51. .alert-body {
  52. margin: 35px 0 0 0;
  53. padding-top: 40px;
  54. }
  55. .alert-head {
  56. color: #242424;
  57. font-size: 24px
  58. }
  59. .alert-concent {
  60. margin: 25px 0 14px;
  61. color: #7B7B7B;
  62. font-size: 18px
  63. }
  64. .alert-concent p {
  65. line-height: 27px
  66. }
  67. .alert-btn {
  68. display: block;
  69. border-radius: 10px;
  70. background-color: #4AB0F7;
  71. height: 55px;
  72. line-height: 55px;
  73. width: 286px;
  74. color: #FFF;
  75. font-size: 20px;
  76. text-decoration: none;
  77. letter-spacing: 2px
  78. }
  79. .alert-btn:hover {
  80. background-color: #6BC2FF
  81. }
  82. .alert-footer {
  83. margin: 0 auto;
  84. height: 42px;
  85. width: 120px
  86. }
  87. .alert-footer-icon {
  88. float: left
  89. }
  90. .alert-footer-text {
  91. float: left;
  92. border-left: 2px solid #EEE;
  93. padding: 3px 0 0 5px;
  94. height: 40px;
  95. color: #0B85CC;
  96. font-size: 12px;
  97. text-align: left
  98. }
  99. .alert-footer-text p {
  100. color: #7A7A7A;
  101. font-size: 22px;
  102. line-height: 18px
  103. }
  104. </style>
  105. </head>
  106. <body class="ie8">
  107. <div id="js-alert-box" class="alert-box"> <svg class="alert-circle" width="234" height="234">
  108. <circle cx="117" cy="117" r="108" fill="#FFF" stroke="#43AEFA" stroke-width="17"></circle>
  109. <circle id="js-sec-circle" class="alert-sec-circle" cx="117" cy="117" r="108" fill="transparent" stroke="#F4F1F1" stroke-width="18" transform="rotate(-90 117 117)"></circle>
  110. <text class="alert-sec-unit" x="82" y="172" fill="#BDBDBD">secs</text>
  111. </svg>
  112. <div id="js-sec-text" class="alert-sec-text"></div>
  113. <div class="alert-body">
  114. <div id="js-alert-head" class="alert-head" style="color: #FF6347"></div>
  115. <!-- <div style="text-align:center;width:100%;line-height:20px;height:20px;color:#6BC2FF;position:absolute;bottom:0;">七件事网络技术支持</div> -->
  116. <div class="alert-concent">
  117. </div>
  118. <!-- <a id="js-alert-btn" class="alert-btn" href="#">立即前往</a> </div> -->
  119. <div class="alert-footer clearfix">
  120. <!-- <svg width="46px" height="42px" class="alert-footer-icon">
  121. <circle fill-rule="evenodd" clip-rule="evenodd" fill="#7B7B7B" stroke="#DEDFE0" stroke-width="2" stroke-miterlimit="10" cx="21.917" cy="21.25" r="17" />
  122. <path fill="#FFF" d="M22.907,27.83h-1.98l0.3-2.92c-0.37-0.22-0.61-0.63-0.61-1.1c0-0.71,0.58-1.29,1.3-1.29s1.3,0.58,1.3,1.29 c0,0.47-0.24,0.88-0.61,1.1L22.907,27.83z M18.327,17.51c0-1.98,1.61-3.59,3.59-3.59s3.59,1.61,3.59,3.59v2.59h-7.18V17.51z M27.687,20.1v-2.59c0-3.18-2.59-5.76-5.77-5.76s-5.76,2.58-5.76,5.76v2.59h-1.24v10.65h14V20.1H27.687z" />
  123. <circle fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" cx="35.417" cy="10.75" r="6.5" />
  124. <polygon fill="#7B7B7B" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="35.417,12.16 32.797,9.03 31.917,10.07 35.417,14.25 42.917,5.29 42.037,4.25 " />
  125. </svg> -->
  126. </div>
  127. </div>
  128. <script>
  129. function alertSet(e) {
  130. document.getElementById("js-alert-box").style.display = "block",
  131. document.getElementById("js-alert-head").innerHTML = e;
  132. var t = 3,
  133. n = document.getElementById("js-sec-circle");
  134. document.getElementById("js-sec-text").innerHTML = t,
  135. setInterval(function() {
  136. if (0 == t) {
  137. window.history.back(-1);
  138. } else {
  139. t -= 1,
  140. document.getElementById("js-sec-text").innerHTML = t;
  141. var e = Math.round(t / 10 * 735);
  142. n.style.strokeDashoffset = e - 735
  143. }
  144. },
  145. 970);
  146. }
  147. </script>
  148. </body>
  149. </html>
  150. <script>
  151. alertSet('服务出错了,请稍后再试');
  152. </script>