91 lines
1.7 KiB
Vue
91 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="aida-404page">
|
||
|
|
<div class="aida-404page-content">
|
||
|
|
<h1 class="aida-404">404</h1>
|
||
|
|
<p class="aida-text">NOT FOUND</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { defineComponent,h,ref} from "vue";
|
||
|
|
export default defineComponent({
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped lang="less">
|
||
|
|
.aida-404page{
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
position: relative;
|
||
|
|
--upgradePageColor:#000;
|
||
|
|
.aida-404page-content{
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%,-50%);
|
||
|
|
.aida-404{
|
||
|
|
font-size: 30vh;
|
||
|
|
font-weight: bold;
|
||
|
|
position: relative;
|
||
|
|
line-height: 1;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.aida-404::after{
|
||
|
|
content: '404';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
color: transparent;
|
||
|
|
background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-size: 400%;
|
||
|
|
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
|
||
|
|
animation: animateTextBackground 10s ease-in-out infinite;
|
||
|
|
@keyframes animateTextBackground {
|
||
|
|
0%{
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
25%{
|
||
|
|
background-position: 100% 0;
|
||
|
|
}
|
||
|
|
50%{
|
||
|
|
background-position: 100% 100%;
|
||
|
|
}
|
||
|
|
75%{
|
||
|
|
background-position: 0 100%;
|
||
|
|
}
|
||
|
|
100%{
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.aida-text{
|
||
|
|
color: #d6d6d6;
|
||
|
|
font-size: 8vh;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: 10vh;
|
||
|
|
max-width: 600px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|