<template>
<div class="w404" :style="{height:height}">
<div class="test404">
<div><img src="https://images.cnblogs.com/cnblogs_com/wulicute-TS/1972942/o_210510032940404.png" alt=""></div>
<h2>抱歉，您访问的页面出错了</h2>
<p>您可能输错了网址，或该网页已删除或不存在</p>
<div class="go-1">
<span class="blue" @click="go_index">返回主页</span>
<span class="blue" @click="up_page">返回上一页</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "404",
data() {
return {
height:''
};
},
created() {
this.height = document.documentElement.clientHeight + 'px';
},
methods: {
up_page(){
history.go(-1)
},
go_index(){
window.location.href='/index'
},
},
mounted() {
},
};
</script>
<style scoped>
.w404{
width: 100%;
background: url('https://images.cnblogs.com/cnblogs_com/wulicute-TS/1972942/o_210510032933404.jpg') no-repeat;
background-size: 100% 100%;
}
h2{
font-size: 32px;
color: #fff;
text-align: center;
letter-spacing: 5px;
padding-top: 33px;
padding-bottom: 25px;
}
.test404{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
padding-top: 120px;
}
.test404 img{
display: block;
margin: auto;
}
.test404 p{
font-size: 14px;
color: #fff;
letter-spacing: 1px;
text-align: center;
padding-bottom: 35px;
}
.go-1{
display: flex;
width: 500px;
margin: 0 auto;
}
.test404 span{
display: block;
margin: auto;
width: 220px;
height: 56px;
}
.blue{
display: inline-block;
height: 56px;
line-height: 56px;
text-align: center;
border-radius: 3px;
background: #7caced;
color: #fff;
letter-spacing: 5px;
border: 0;
font-size: 18px;
padding: 0;
text-decoration: none;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-property: background;
transition-property: background;
}
</style>
