vue 404、500模板页

1、404模板页

 1 <template>
 2     <div class="err404">
 3         <h4>您访问的页面不见了!</h4>
 4         <h5>
 5             <router-link to="manage" class="go-home">去首页</router-link>
 6         </h5>
 7     </div>
 8 </template>
 9 
10 <script>
11     export default {
12         data() {
13             return {}
14         }
15     }
16 </script>
17 
18 <style>
19     .err404 {
20         width: 280px;
21         margin: 150px auto;
22         height: 255px;
23         padding: 180px 0 0 420px;
24         background: url(../../static/404_bg.png) no-repeat 0 0
25     }
26 
27     .err404 h4 {
28         font-size: 24px;
29         color: #191919;
30         padding-bottom: 16px
31     }
32 
33     .err404 .go-home {
34         width: 130px;
35         height: 38px;
36         background: #c9141d;
37         line-height: 38px;
38         font-size: 16px;
39         color: #fff;
40         text-align: center;
41         display: inline-block;
42         border-radius: 2px
43     }
44 </style>

2、500模板页

  1 <template>
  2     <body class="error-page-wrapper">
  3         <div class="content-container">
  4             <div class="head-line">
  5                 <img src="/static/error.svg" alt="" width="120">
  6             </div>
  7             <div class="subheader">
  8                 HTTP 500- 服务器异常 </div>
  9             <div class="hr"></div>
 10             <div class="context">
 11                 <p>
 12                     您可以返回首页,或联系管理员 </p>
 13             </div>
 14             <div class="buttons-container">
 15                 <router-link to="manage">去首页</router-link>
 16             </div>
 17         </div>
 18     </body>
 19 </template>
 20 
 21 <script>
 22 </script>
 23 
 24 <style>
 25     .clearfix {
 26         clear: both;
 27         zoom: 1;
 28     }
 29 
 30     .clearfix:before,
 31     .clearfix:after {
 32         content: "\0020";
 33         display: block;
 34         height: 0;
 35         visibility: hidden;
 36     }
 37 
 38     .clearfix:after {
 39         clear: both;
 40     }
 41 
 42     body.error-page-wrapper,
 43     .error-page-wrapper.preview {
 44         background-position: center center;
 45         background-repeat: no-repeat;
 46         background-size: cover;
 47         position: relative;
 48     }
 49 
 50     .error-page-wrapper .content-container {
 51         border-radius: 2px;
 52         text-align: center;
 53         padding: 50px;
 54         background-color: #fff;
 55         width: 100%;
 56         max-width: 560px;
 57         position: absolute;
 58         left: 50%;
 59         top: 50%;
 60         margin-top: -220px;
 61         margin-left: -280px;
 62     }
 63 
 64     .error-page-wrapper .content-container.in {
 65         left: 0px;
 66         opacity: 1;
 67     }
 68 
 69     .error-page-wrapper .head-line {
 70         transition: color .2s linear;
 71         font-size: 40px;
 72         line-height: 60px;
 73         letter-spacing: -1px;
 74         margin-bottom: 20px;
 75         color: #777;
 76     }
 77 
 78     .error-page-wrapper .subheader {
 79         transition: color .2s linear;
 80         font-size: 32px;
 81         line-height: 46px;
 82         color: #494949;
 83     }
 84 
 85     .error-page-wrapper .hr {
 86         height: 1px;
 87         background-color: #eee;
 88         width: 80%;
 89         max-width: 350px;
 90         margin: 25px auto;
 91     }
 92 
 93     .error-page-wrapper .context {
 94         transition: color .2s linear;
 95         font-size: 16px;
 96         line-height: 27px;
 97         color: #aaa;
 98     }
 99 
100     .error-page-wrapper .context p {
101         margin: 0;
102     }
103 
104     .error-page-wrapper .context p:nth-child(n+2) {
105         margin-top: 16px;
106     }
107 
108     .error-page-wrapper .buttons-container {
109         margin-top: 35px;
110         overflow: hidden;
111     }
112 
113     .error-page-wrapper .buttons-container a {
114         transition: text-indent .2s ease-out, color .2s linear, background-color .2s linear;
115         text-indent: 0px;
116         font-size: 14px;
117         text-transform: uppercase;
118         text-decoration: none;
119         color: #fff;
120         background-color: #2ecc71;
121         border-radius: 99px;
122         padding: 8px 0 8px;
123         text-align: center;
124         display: inline-block;
125         overflow: hidden;
126         position: relative;
127         width: 45%;
128     }
129 
130     .error-page-wrapper .buttons-container a:hover {
131         text-indent: 15px;
132     }
133 
134     .error-page-wrapper .buttons-container a:nth-child(1) {
135         float: center;
136     }
137 
138     .error-page-wrapper .buttons-container a:nth-child(2) {
139         float: right;
140     }
141 
142     @media screen and (max-width:580px) {
143         .error-page-wrapper {
144             padding: 30px 5%;
145         }
146 
147         .error-page-wrapper .content-container {
148             padding: 37px;
149             position: static;
150             left: 0;
151             margin-top: 0;
152             margin-left: 0;
153         }
154 
155         .error-page-wrapper .head-line {
156             font-size: 36px;
157         }
158 
159         .error-page-wrapper .subheader {
160             font-size: 27px;
161             line-height: 37px;
162         }
163 
164         .error-page-wrapper .hr {
165             margin: 30px auto;
166             width: 215px;
167         }
168     }
169 
170     @media screen and (max-width:450px) {
171         .error-page-wrapper {
172             padding: 30px;
173         }
174 
175         .error-page-wrapper .head-line {
176             font-size: 32px;
177         }
178 
179         .error-page-wrapper .hr {
180             margin: 25px auto;
181             width: 180px;
182         }
183 
184         .error-page-wrapper .context {
185             font-size: 15px;
186             line-height: 22px;
187         }
188 
189         .error-page-wrapper .context p:nth-child(n+2) {
190             margin-top: 10px;
191         }
192 
193         .error-page-wrapper .buttons-container {
194             margin-top: 29px;
195         }
196 
197         .error-page-wrapper .buttons-container a {
198             float: none !important;
199             width: 65%;
200             margin: 0 auto;
201             font-size: 13px;
202             padding: 9px 0;
203         }
204 
205         .error-page-wrapper .buttons-container a:nth-child(2) {
206             margin-top: 12px;
207         }
208     }
209 </style>

 

posted @ 2020-07-22 11:47  每天进步1''  阅读(2725)  评论(0)    收藏  举报