404.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. <!-- setup 无法设置组件名称,组件名称keepAlive必须 -->
  2. <script lang="ts">
  3. export default {
  4. name: "Page404",
  5. };
  6. </script>
  7. <script setup lang="ts">
  8. function message() {
  9. return "The webmaster said that you can not enter this page...";
  10. }
  11. </script>
  12. <template>
  13. <div class="wscn-http404-container">
  14. <div class="wscn-http404">
  15. <div class="pic-404">
  16. <img class="pic-404__parent" src="@/assets/images/404.png" alt="404" />
  17. <img
  18. class="pic-404__child left"
  19. src="@/assets/images/404_cloud.png"
  20. alt="404"
  21. />
  22. <img
  23. class="pic-404__child mid"
  24. src="@/assets/images/404_cloud.png"
  25. alt="404"
  26. />
  27. <img
  28. class="pic-404__child right"
  29. src="@/assets/images/404_cloud.png"
  30. alt="404"
  31. />
  32. </div>
  33. <div class="bullshit">
  34. <div class="bullshit__oops">OOPS!</div>
  35. <!-- <div class="bullshit__info">
  36. All rights reserved
  37. <a
  38. style="color: #20a0ff"
  39. href="https://wallstreetcn.com"
  40. target="_blank"
  41. >wallstreetcn</a
  42. >
  43. </div>-->
  44. <div class="bullshit__headline">{{ message() }}</div>
  45. <div class="bullshit__info">
  46. Please check that the URL you entered is correct, or click the button
  47. below to return to the homepage.
  48. </div>
  49. <router-link class="bullshit__return-home" to="/welcome">
  50. 跳转欢迎页
  51. </router-link>
  52. </div>
  53. </div>
  54. </div>
  55. </template>
  56. <style lang="scss" scoped>
  57. .wscn-http404-container {
  58. position: absolute;
  59. top: 40%;
  60. left: 50%;
  61. transform: translate(-50%, -50%);
  62. }
  63. .wscn-http404 {
  64. position: relative;
  65. width: 1200px;
  66. padding: 0 50px;
  67. overflow: hidden;
  68. .pic-404 {
  69. position: relative;
  70. float: left;
  71. width: 600px;
  72. overflow: hidden;
  73. &__parent {
  74. width: 100%;
  75. }
  76. &__child {
  77. position: absolute;
  78. &.left {
  79. top: 17px;
  80. left: 220px;
  81. width: 80px;
  82. opacity: 0;
  83. animation-name: cloudLeft;
  84. animation-duration: 2s;
  85. animation-timing-function: linear;
  86. animation-delay: 1s;
  87. animation-fill-mode: forwards;
  88. }
  89. &.mid {
  90. top: 10px;
  91. left: 420px;
  92. width: 46px;
  93. opacity: 0;
  94. animation-name: cloudMid;
  95. animation-duration: 2s;
  96. animation-timing-function: linear;
  97. animation-delay: 1.2s;
  98. animation-fill-mode: forwards;
  99. }
  100. &.right {
  101. top: 100px;
  102. left: 500px;
  103. width: 62px;
  104. opacity: 0;
  105. animation-name: cloudRight;
  106. animation-duration: 2s;
  107. animation-timing-function: linear;
  108. animation-delay: 1s;
  109. animation-fill-mode: forwards;
  110. }
  111. @keyframes cloudLeft {
  112. 0% {
  113. top: 17px;
  114. left: 220px;
  115. opacity: 0;
  116. }
  117. 20% {
  118. top: 33px;
  119. left: 188px;
  120. opacity: 1;
  121. }
  122. 80% {
  123. top: 81px;
  124. left: 92px;
  125. opacity: 1;
  126. }
  127. 100% {
  128. top: 97px;
  129. left: 60px;
  130. opacity: 0;
  131. }
  132. }
  133. @keyframes cloudMid {
  134. 0% {
  135. top: 10px;
  136. left: 420px;
  137. opacity: 0;
  138. }
  139. 20% {
  140. top: 40px;
  141. left: 360px;
  142. opacity: 1;
  143. }
  144. 70% {
  145. top: 130px;
  146. left: 180px;
  147. opacity: 1;
  148. }
  149. 100% {
  150. top: 160px;
  151. left: 120px;
  152. opacity: 0;
  153. }
  154. }
  155. @keyframes cloudRight {
  156. 0% {
  157. top: 100px;
  158. left: 500px;
  159. opacity: 0;
  160. }
  161. 20% {
  162. top: 120px;
  163. left: 460px;
  164. opacity: 1;
  165. }
  166. 80% {
  167. top: 180px;
  168. left: 340px;
  169. opacity: 1;
  170. }
  171. 100% {
  172. top: 200px;
  173. left: 300px;
  174. opacity: 0;
  175. }
  176. }
  177. }
  178. }
  179. .bullshit {
  180. position: relative;
  181. float: left;
  182. width: 300px;
  183. padding: 30px 0;
  184. overflow: hidden;
  185. &__oops {
  186. margin-bottom: 20px;
  187. font-size: 32px;
  188. font-weight: bold;
  189. line-height: 40px;
  190. color: #1482f0;
  191. opacity: 0;
  192. animation-name: slideUp;
  193. animation-duration: 0.5s;
  194. animation-fill-mode: forwards;
  195. }
  196. &__headline {
  197. margin-bottom: 10px;
  198. font-size: 20px;
  199. font-weight: bold;
  200. line-height: 24px;
  201. color: #222;
  202. opacity: 0;
  203. animation-name: slideUp;
  204. animation-duration: 0.5s;
  205. animation-delay: 0.1s;
  206. animation-fill-mode: forwards;
  207. }
  208. &__info {
  209. margin-bottom: 30px;
  210. font-size: 13px;
  211. line-height: 21px;
  212. color: grey;
  213. opacity: 0;
  214. animation-name: slideUp;
  215. animation-duration: 0.5s;
  216. animation-delay: 0.2s;
  217. animation-fill-mode: forwards;
  218. }
  219. &__return-home {
  220. display: block;
  221. float: left;
  222. width: 110px;
  223. height: 36px;
  224. font-size: 14px;
  225. line-height: 36px;
  226. color: #fff;
  227. text-align: center;
  228. cursor: pointer;
  229. background: #1482f0;
  230. border-radius: 100px;
  231. opacity: 0;
  232. animation-name: slideUp;
  233. animation-duration: 0.5s;
  234. animation-delay: 0.3s;
  235. animation-fill-mode: forwards;
  236. }
  237. @keyframes slideUp {
  238. 0% {
  239. opacity: 0;
  240. transform: translateY(60px);
  241. }
  242. 100% {
  243. opacity: 1;
  244. transform: translateY(0);
  245. }
  246. }
  247. }
  248. }
  249. </style>