Newer
Older
DH_Apicture / src / views / error / 404.vue
@zhangqy zhangqy on 29 Nov 5 KB first commit
  1. <template>
  2. <div class="wscn-http404-container">
  3. <div class="wscn-http404">
  4. <div class="pic-404">
  5. <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
  6. <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
  7. <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
  8. <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
  9. </div>
  10. <div class="bullshit">
  11. <div class="bullshit__oops">
  12. 404错误!
  13. </div>
  14. <div class="bullshit__headline">
  15. {{ message }}
  16. </div>
  17. <div class="bullshit__info">
  18. 对不起,您正在寻找的页面不存在。尝试检查URL的错误,然后按浏览器上的刷新按钮或尝试在我们的应用程序中找到其他内容。
  19. </div>
  20. <router-link to="/index" class="bullshit__return-home">
  21. 返回首页
  22. </router-link>
  23. </div>
  24. </div>
  25. </div>
  26. </template>
  27.  
  28. <script setup>
  29. let message = computed(() => {
  30. return '找不到网页!'
  31. })
  32. </script>
  33.  
  34. <style lang="scss" scoped>
  35. .wscn-http404-container{
  36. transform: translate(-50%,-50%);
  37. position: absolute;
  38. top: 40%;
  39. left: 50%;
  40. }
  41. .wscn-http404 {
  42. position: relative;
  43. width: 1200px;
  44. padding: 0 50px;
  45. overflow: hidden;
  46. .pic-404 {
  47. position: relative;
  48. float: left;
  49. width: 600px;
  50. overflow: hidden;
  51. &__parent {
  52. width: 100%;
  53. }
  54. &__child {
  55. position: absolute;
  56. &.left {
  57. width: 80px;
  58. top: 17px;
  59. left: 220px;
  60. opacity: 0;
  61. animation-name: cloudLeft;
  62. animation-duration: 2s;
  63. animation-timing-function: linear;
  64. animation-fill-mode: forwards;
  65. animation-delay: 1s;
  66. }
  67. &.mid {
  68. width: 46px;
  69. top: 10px;
  70. left: 420px;
  71. opacity: 0;
  72. animation-name: cloudMid;
  73. animation-duration: 2s;
  74. animation-timing-function: linear;
  75. animation-fill-mode: forwards;
  76. animation-delay: 1.2s;
  77. }
  78. &.right {
  79. width: 62px;
  80. top: 100px;
  81. left: 500px;
  82. opacity: 0;
  83. animation-name: cloudRight;
  84. animation-duration: 2s;
  85. animation-timing-function: linear;
  86. animation-fill-mode: forwards;
  87. animation-delay: 1s;
  88. }
  89. @keyframes cloudLeft {
  90. 0% {
  91. top: 17px;
  92. left: 220px;
  93. opacity: 0;
  94. }
  95. 20% {
  96. top: 33px;
  97. left: 188px;
  98. opacity: 1;
  99. }
  100. 80% {
  101. top: 81px;
  102. left: 92px;
  103. opacity: 1;
  104. }
  105. 100% {
  106. top: 97px;
  107. left: 60px;
  108. opacity: 0;
  109. }
  110. }
  111. @keyframes cloudMid {
  112. 0% {
  113. top: 10px;
  114. left: 420px;
  115. opacity: 0;
  116. }
  117. 20% {
  118. top: 40px;
  119. left: 360px;
  120. opacity: 1;
  121. }
  122. 70% {
  123. top: 130px;
  124. left: 180px;
  125. opacity: 1;
  126. }
  127. 100% {
  128. top: 160px;
  129. left: 120px;
  130. opacity: 0;
  131. }
  132. }
  133. @keyframes cloudRight {
  134. 0% {
  135. top: 100px;
  136. left: 500px;
  137. opacity: 0;
  138. }
  139. 20% {
  140. top: 120px;
  141. left: 460px;
  142. opacity: 1;
  143. }
  144. 80% {
  145. top: 180px;
  146. left: 340px;
  147. opacity: 1;
  148. }
  149. 100% {
  150. top: 200px;
  151. left: 300px;
  152. opacity: 0;
  153. }
  154. }
  155. }
  156. }
  157. .bullshit {
  158. position: relative;
  159. float: left;
  160. width: 300px;
  161. padding: 30px 0;
  162. overflow: hidden;
  163. &__oops {
  164. font-size: 32px;
  165. font-weight: bold;
  166. line-height: 40px;
  167. color: #1482f0;
  168. opacity: 0;
  169. margin-bottom: 20px;
  170. animation-name: slideUp;
  171. animation-duration: 0.5s;
  172. animation-fill-mode: forwards;
  173. }
  174. &__headline {
  175. font-size: 20px;
  176. line-height: 24px;
  177. color: #222;
  178. font-weight: bold;
  179. opacity: 0;
  180. margin-bottom: 10px;
  181. animation-name: slideUp;
  182. animation-duration: 0.5s;
  183. animation-delay: 0.1s;
  184. animation-fill-mode: forwards;
  185. }
  186. &__info {
  187. font-size: 13px;
  188. line-height: 21px;
  189. color: grey;
  190. opacity: 0;
  191. margin-bottom: 30px;
  192. animation-name: slideUp;
  193. animation-duration: 0.5s;
  194. animation-delay: 0.2s;
  195. animation-fill-mode: forwards;
  196. }
  197. &__return-home {
  198. display: block;
  199. float: left;
  200. width: 110px;
  201. height: 36px;
  202. background: #1482f0;
  203. border-radius: 100px;
  204. text-align: center;
  205. color: #ffffff;
  206. opacity: 0;
  207. font-size: 14px;
  208. line-height: 36px;
  209. cursor: pointer;
  210. animation-name: slideUp;
  211. animation-duration: 0.5s;
  212. animation-delay: 0.3s;
  213. animation-fill-mode: forwards;
  214. }
  215. @keyframes slideUp {
  216. 0% {
  217. transform: translateY(60px);
  218. opacity: 0;
  219. }
  220. 100% {
  221. transform: translateY(0);
  222. opacity: 1;
  223. }
  224. }
  225. }
  226. }
  227. </style>