114 lines
2.0 KiB
Vue
114 lines
2.0 KiB
Vue
<template>
|
||
<div class="error">
|
||
<div class="error-flex">
|
||
<div class="left">
|
||
<div class="left-item">
|
||
<div class="left-item-animation left-item-num">404</div>
|
||
<div class="left-item-animation left-item-title">页面不存在</div>
|
||
<div class="left-item-animation left-item-msg">您可以先检查网址，然后重新输入或给我们反馈问题</div>
|
||
<div class="left-item-animation left-item-btn">
|
||
<a-button type="primary" round @click="onGoHome">首页</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<img :src="img" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { useRouter } from 'vue-router';
|
||
import img from '@/assets/404.png'
|
||
export default {
|
||
name: '404',
|
||
setup() {
|
||
const router = useRouter();
|
||
const onGoHome = () => {
|
||
router.push('/');
|
||
};
|
||
return {
|
||
img,
|
||
onGoHome,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@keyframes error-num {
|
||
0% {
|
||
transform: translateY(60px);
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes error-img {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.error {
|
||
height: 100%;
|
||
// background-color: var(--el-color-white);
|
||
display: flex;
|
||
.error-flex {
|
||
margin: auto;
|
||
display: flex;
|
||
height: 350px;
|
||
width: 900px;
|
||
.left {
|
||
flex: 1;
|
||
height: 100%;
|
||
align-items: center;
|
||
display: flex;
|
||
.left-item {
|
||
.left-item-animation {
|
||
opacity: 0;
|
||
animation-name: error-num;
|
||
animation-duration: 0.5s;
|
||
animation-fill-mode: forwards;
|
||
}
|
||
.left-item-num {
|
||
|
||
font-size: 55px;
|
||
}
|
||
.left-item-title {
|
||
font-size: 20px;
|
||
|
||
margin: 15px 0 5px 0;
|
||
animation-delay: 0.1s;
|
||
}
|
||
.left-item-msg {
|
||
|
||
font-size: 12px;
|
||
margin-bottom: 30px;
|
||
animation-delay: 0.2s;
|
||
}
|
||
.left-item-btn {
|
||
animation-delay: 0.2s;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
flex: 1;
|
||
opacity: 0;
|
||
animation-name: error-img;
|
||
animation-duration: 2s;
|
||
animation-fill-mode: forwards;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|