errorPage.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <template>
  2. <div class="exception">
  3. <div class="errorpage">
  4. <div class="xiaocao">
  5. <img src="https://s1.pstatp.com/ee/feishu_website/static/img/toy4.635d004af4.svg" alt="">
  6. </div>
  7. <div class="content">
  8. <div class="desc">
  9. <span class="tip">出错啦!</span>
  10. {{desc}}
  11. </div>
  12. <div class="action">
  13. <a-button type="primary" @click="handleToHome" size='large'>返回登录</a-button>
  14. </div>
  15. </div>
  16. <div class="img">
  17. <img class="person" src="https://s0.pstatp.com/ee/feishu_website/static/img/toy6.0df0d49140.png"/>
  18. <img class="shuxian" src="https://s3.pstatp.com/ee/feishu_website/static/img/toy9.8969d3ec2f.svg" alt="">
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. name: "Exception",
  26. // props: {
  27. // type: {
  28. // type: String,
  29. // default: '404'
  30. // }
  31. // },
  32. data() {
  33. return {
  34. title:'',
  35. desc:''
  36. }
  37. },
  38. methods: {
  39. handleToHome() {
  40. this.$router.replace({name: 'login'})
  41. }
  42. },
  43. mounted() {
  44. console.log(this.$route.query);
  45. this.title=this.$route.query.title;
  46. this.desc=this.$route.query.desc;
  47. }
  48. }
  49. </script>
  50. <style lang="scss" scoped>
  51. .exception {
  52. // min-height: 500px;
  53. height: 100%;
  54. align-items: center;
  55. text-align: center;
  56. padding-top: 150px;
  57. box-sizing: border-box;
  58. background-color: #fff;
  59. .errorpage{
  60. position: relative;
  61. width: 50%;
  62. margin: 0 auto;
  63. .xiaocao{
  64. width: 100px;
  65. display: inline-block;
  66. position: absolute;
  67. bottom: 10px;
  68. left: 10px;
  69. }
  70. }
  71. .errorpage:after{
  72. content: '';
  73. display: block;
  74. width: 100%;
  75. height: 2px;
  76. background-color:#000;
  77. position: absolute;
  78. bottom: 10px;
  79. z-index: 0;
  80. }
  81. .img {
  82. display: inline-block;
  83. width: 400px;
  84. zoom: 1;
  85. position: relative;
  86. .person {
  87. width: 62.5%;
  88. display: inline-block;
  89. }
  90. .shuxian{
  91. width: 37.5%;
  92. display: inline-block;
  93. position: absolute;
  94. bottom: 10px;
  95. }
  96. }
  97. .content {
  98. display: inline-block;
  99. flex: auto;
  100. margin-right: 50px;
  101. h1 {
  102. color: #434e59;
  103. font-size: 72px;
  104. font-weight: 600;
  105. line-height: 72px;
  106. margin-bottom: 24px;
  107. }
  108. .desc {
  109. color: #333;
  110. font-size: 16px;
  111. line-height: 28px;
  112. margin-bottom: 16px;
  113. width: 210px;
  114. height: 124px;
  115. padding: 10px 15px;
  116. background-image: url('https://s1.pstatp.com/ee/feishu_website/static/img/toy1.286bfce8d0.svg');
  117. border-radius: 5px;
  118. .tip{
  119. display: block;
  120. text-align: left;
  121. margin-bottom: 5px;
  122. font-size: 20px;
  123. color: #999;
  124. }
  125. }
  126. .action{
  127. margin-top: 20px;
  128. }
  129. }
  130. }
  131. .mobile {
  132. .exception {
  133. margin-top: 30px;
  134. .img {
  135. padding-right: unset;
  136. img {
  137. height: 40%;
  138. max-width: 80%;
  139. }
  140. }
  141. }
  142. }
  143. </style>