添加404页面
This commit is contained in:
90
src/views/404.vue
Normal file
90
src/views/404.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<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>
|
||||
@@ -219,7 +219,7 @@
|
||||
</div>
|
||||
|
||||
<div class="login_footer">
|
||||
<div class="login_footer_item"><div class="login_footer_item_text">©2024 CodeCreate</div></div>
|
||||
<div class="login_footer_item"><div class="login_footer_item_text">©2024 Code-Create Limited</div></div>
|
||||
<div class="login_footer_item">
|
||||
<div class="login_footer_item_text footer_item_text_pointer" @click="turnToWindow('https://code-create.com.hk/aida-terms-and-conditions/')">Terms&Conditions</div>
|
||||
<div class="login_footer_line"></div>
|
||||
|
||||
Reference in New Issue
Block a user