Commit 2126f54b9634dc2bd33393e5a98c152213eeed59
1 parent
e371f2dc
404图片地址
Showing
1 changed file
with
49 additions
and
51 deletions
src/views/page404.vue
| 1 | <template> | 1 | <template> |
| 2 | <div class="page404"> | 2 | <div class="page404"> |
| 3 | <div class="i404"> | 3 | <div class="i404"> |
| 4 | - <img src="../assets/img404/i404.png"/> | 4 | + <img src="../assets/images/img404/i404.png" /> |
| 5 | <p>您的访问页面可能被删除或者不存在</p> | 5 | <p>您的访问页面可能被删除或者不存在</p> |
| 6 | <a href="/">返回首页</a> | 6 | <a href="/">返回首页</a> |
| 7 | </div> | 7 | </div> |
| 8 | <div class="sign"> | 8 | <div class="sign"> |
| 9 | - <img src="../assets/img404/sign.png" /> | 9 | + <img src="../assets/images/img404/sign.png" /> |
| 10 | </div> | 10 | </div> |
| 11 | </div> | 11 | </div> |
| 12 | </template> | 12 | </template> |
| @@ -14,59 +14,57 @@ | @@ -14,59 +14,57 @@ | ||
| 14 | <script> | 14 | <script> |
| 15 | export default { | 15 | export default { |
| 16 | name: "page404", | 16 | name: "page404", |
| 17 | - mounted () { | ||
| 18 | - } | ||
| 19 | -} | 17 | + mounted() {}, |
| 18 | +}; | ||
| 20 | </script> | 19 | </script> |
| 21 | 20 | ||
| 22 | -<style lang="scss"> | ||
| 23 | - .page404{ | ||
| 24 | - width: 100%; | 21 | +<style lang="scss" scoped> |
| 22 | +.page404 { | ||
| 23 | + width: 100%; | ||
| 24 | + height: 100%; | ||
| 25 | + background: url("../assets/images/img404/bg404.jpg") no-repeat; | ||
| 26 | + background-size: cover; | ||
| 27 | + overflow: hidden; | ||
| 28 | + & > div { | ||
| 29 | + width: 50%; | ||
| 25 | height: 100%; | 30 | height: 100%; |
| 26 | - background: url("../assets/img404/bg404.jpg") no-repeat; | ||
| 27 | - background-size: cover; | ||
| 28 | - overflow: hidden; | ||
| 29 | - & >div{ | ||
| 30 | - width: 50%; | ||
| 31 | - height: 100%; | ||
| 32 | - } | ||
| 33 | - .i404{ | ||
| 34 | - float: left; | ||
| 35 | - display: flex; | ||
| 36 | - flex-direction: column; | ||
| 37 | - justify-content: center; | ||
| 38 | - align-items: center; | ||
| 39 | - img{ | ||
| 40 | - width: 500px; | ||
| 41 | - height: 200px; | ||
| 42 | - margin-top: -100px; | ||
| 43 | - } | ||
| 44 | - p{ | ||
| 45 | - font-size: 20px; | ||
| 46 | - color: #3d95ff; | ||
| 47 | - margin-top: 2px; | ||
| 48 | - } | ||
| 49 | - a{ | ||
| 50 | - display: block; | ||
| 51 | - width: 150px; | ||
| 52 | - height: 50px; | ||
| 53 | - color: #ffffff; | ||
| 54 | - background: #56a9ff; | ||
| 55 | - margin-top: 35px; | ||
| 56 | - line-height: 50px; | ||
| 57 | - text-align: center; | ||
| 58 | - border-radius: 50px; | ||
| 59 | - font-size: 18px; | ||
| 60 | - } | 31 | + } |
| 32 | + .i404 { | ||
| 33 | + float: left; | ||
| 34 | + display: flex; | ||
| 35 | + flex-direction: column; | ||
| 36 | + justify-content: center; | ||
| 37 | + align-items: center; | ||
| 38 | + img { | ||
| 39 | + width: 500px; | ||
| 40 | + height: 200px; | ||
| 41 | + margin-top: -100px; | ||
| 42 | + } | ||
| 43 | + p { | ||
| 44 | + font-size: 20px; | ||
| 45 | + color: #3d95ff; | ||
| 46 | + margin-top: 2px; | ||
| 61 | } | 47 | } |
| 62 | - .sign{ | ||
| 63 | - float: right; | ||
| 64 | - img{ | ||
| 65 | - width: 600px; | ||
| 66 | - margin-top: 50px; | ||
| 67 | - margin-left: 50px; | ||
| 68 | - } | 48 | + a { |
| 49 | + display: block; | ||
| 50 | + width: 150px; | ||
| 51 | + height: 50px; | ||
| 52 | + color: #ffffff; | ||
| 53 | + background: #56a9ff; | ||
| 54 | + margin-top: 35px; | ||
| 55 | + line-height: 50px; | ||
| 56 | + text-align: center; | ||
| 57 | + border-radius: 50px; | ||
| 58 | + font-size: 18px; | ||
| 69 | } | 59 | } |
| 70 | } | 60 | } |
| 71 | - | 61 | + .sign { |
| 62 | + float: right; | ||
| 63 | + img { | ||
| 64 | + width: 600px; | ||
| 65 | + margin-top: 50px; | ||
| 66 | + margin-left: 50px; | ||
| 67 | + } | ||
| 68 | + } | ||
| 69 | +} | ||
| 72 | </style> | 70 | </style> |