Commit 2126f54b9634dc2bd33393e5a98c152213eeed59
1 parent
e371f2dc
404图片地址
Showing
1 changed file
with
49 additions
and
51 deletions
src/views/page404.vue
| 1 | 1 | <template> |
| 2 | 2 | <div class="page404"> |
| 3 | 3 | <div class="i404"> |
| 4 | - <img src="../assets/img404/i404.png"/> | |
| 4 | + <img src="../assets/images/img404/i404.png" /> | |
| 5 | 5 | <p>您的访问页面可能被删除或者不存在</p> |
| 6 | 6 | <a href="/">返回首页</a> |
| 7 | 7 | </div> |
| 8 | 8 | <div class="sign"> |
| 9 | - <img src="../assets/img404/sign.png" /> | |
| 9 | + <img src="../assets/images/img404/sign.png" /> | |
| 10 | 10 | </div> |
| 11 | 11 | </div> |
| 12 | 12 | </template> |
| ... | ... | @@ -14,59 +14,57 @@ |
| 14 | 14 | <script> |
| 15 | 15 | export default { |
| 16 | 16 | name: "page404", |
| 17 | - mounted () { | |
| 18 | - } | |
| 19 | -} | |
| 17 | + mounted() {}, | |
| 18 | +}; | |
| 20 | 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 | 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 | 70 | </style> | ... | ... |