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>