This commit is contained in:
ky_sunl
2021-04-22 13:37:25 +00:00
parent 575a22954f
commit d1c9e5a71e
699 changed files with 1062425 additions and 40640 deletions

296
Web/src/views/404/index.css Normal file
View File

@@ -0,0 +1,296 @@
@-webkit-keyframes noise-anim {
0% {
clip: rect(32px, 9999px, 16px, 0);
}
5% {
clip: rect(5px, 9999px, 24px, 0);
}
10% {
clip: rect(77px, 9999px, 87px, 0);
}
15% {
clip: rect(91px, 9999px, 95px, 0);
}
20% {
clip: rect(74px, 9999px, 9px, 0);
}
25% {
clip: rect(37px, 9999px, 32px, 0);
}
30% {
clip: rect(56px, 9999px, 27px, 0);
}
35% {
clip: rect(35px, 9999px, 33px, 0);
}
40% {
clip: rect(89px, 9999px, 6px, 0);
}
45% {
clip: rect(81px, 9999px, 77px, 0);
}
50% {
clip: rect(64px, 9999px, 69px, 0);
}
55% {
clip: rect(12px, 9999px, 11px, 0);
}
60% {
clip: rect(59px, 9999px, 11px, 0);
}
65% {
clip: rect(69px, 9999px, 59px, 0);
}
70% {
clip: rect(74px, 9999px, 65px, 0);
}
75% {
clip: rect(56px, 9999px, 79px, 0);
}
80% {
clip: rect(80px, 9999px, 64px, 0);
}
85% {
clip: rect(87px, 9999px, 29px, 0);
}
90% {
clip: rect(16px, 9999px, 21px, 0);
}
95% {
clip: rect(69px, 9999px, 43px, 0);
}
100% {
clip: rect(75px, 9999px, 63px, 0);
}
}
@keyframes noise-anim {
0% {
clip: rect(32px, 9999px, 16px, 0);
}
5% {
clip: rect(5px, 9999px, 24px, 0);
}
10% {
clip: rect(77px, 9999px, 87px, 0);
}
15% {
clip: rect(91px, 9999px, 95px, 0);
}
20% {
clip: rect(74px, 9999px, 9px, 0);
}
25% {
clip: rect(37px, 9999px, 32px, 0);
}
30% {
clip: rect(56px, 9999px, 27px, 0);
}
35% {
clip: rect(35px, 9999px, 33px, 0);
}
40% {
clip: rect(89px, 9999px, 6px, 0);
}
45% {
clip: rect(81px, 9999px, 77px, 0);
}
50% {
clip: rect(64px, 9999px, 69px, 0);
}
55% {
clip: rect(12px, 9999px, 11px, 0);
}
60% {
clip: rect(59px, 9999px, 11px, 0);
}
65% {
clip: rect(69px, 9999px, 59px, 0);
}
70% {
clip: rect(74px, 9999px, 65px, 0);
}
75% {
clip: rect(56px, 9999px, 79px, 0);
}
80% {
clip: rect(80px, 9999px, 64px, 0);
}
85% {
clip: rect(87px, 9999px, 29px, 0);
}
90% {
clip: rect(16px, 9999px, 21px, 0);
}
95% {
clip: rect(69px, 9999px, 43px, 0);
}
100% {
clip: rect(75px, 9999px, 63px, 0);
}
}
@-webkit-keyframes noise-anim-2 {
0% {
clip: rect(12px, 9999px, 52px, 0);
}
5% {
clip: rect(42px, 9999px, 39px, 0);
}
10% {
clip: rect(64px, 9999px, 36px, 0);
}
15% {
clip: rect(52px, 9999px, 15px, 0);
}
20% {
clip: rect(79px, 9999px, 7px, 0);
}
25% {
clip: rect(17px, 9999px, 41px, 0);
}
30% {
clip: rect(15px, 9999px, 20px, 0);
}
35% {
clip: rect(62px, 9999px, 87px, 0);
}
40% {
clip: rect(94px, 9999px, 11px, 0);
}
45% {
clip: rect(49px, 9999px, 10px, 0);
}
50% {
clip: rect(82px, 9999px, 4px, 0);
}
55% {
clip: rect(70px, 9999px, 100px, 0);
}
60% {
clip: rect(62px, 9999px, 23px, 0);
}
65% {
clip: rect(51px, 9999px, 56px, 0);
}
70% {
clip: rect(41px, 9999px, 24px, 0);
}
75% {
clip: rect(6px, 9999px, 85px, 0);
}
80% {
clip: rect(96px, 9999px, 58px, 0);
}
85% {
clip: rect(16px, 9999px, 24px, 0);
}
90% {
clip: rect(40px, 9999px, 31px, 0);
}
95% {
clip: rect(91px, 9999px, 34px, 0);
}
100% {
clip: rect(87px, 9999px, 26px, 0);
}
}
@keyframes noise-anim-2 {
0% {
clip: rect(12px, 9999px, 52px, 0);
}
5% {
clip: rect(42px, 9999px, 39px, 0);
}
10% {
clip: rect(64px, 9999px, 36px, 0);
}
15% {
clip: rect(52px, 9999px, 15px, 0);
}
20% {
clip: rect(79px, 9999px, 7px, 0);
}
25% {
clip: rect(17px, 9999px, 41px, 0);
}
30% {
clip: rect(15px, 9999px, 20px, 0);
}
35% {
clip: rect(62px, 9999px, 87px, 0);
}
40% {
clip: rect(94px, 9999px, 11px, 0);
}
45% {
clip: rect(49px, 9999px, 10px, 0);
}
50% {
clip: rect(82px, 9999px, 4px, 0);
}
55% {
clip: rect(70px, 9999px, 100px, 0);
}
60% {
clip: rect(62px, 9999px, 23px, 0);
}
65% {
clip: rect(51px, 9999px, 56px, 0);
}
70% {
clip: rect(41px, 9999px, 24px, 0);
}
75% {
clip: rect(6px, 9999px, 85px, 0);
}
80% {
clip: rect(96px, 9999px, 58px, 0);
}
85% {
clip: rect(16px, 9999px, 24px, 0);
}
90% {
clip: rect(40px, 9999px, 31px, 0);
}
95% {
clip: rect(91px, 9999px, 34px, 0);
}
100% {
clip: rect(87px, 9999px, 26px, 0);
}
}
.error-result {
padding: 100px;
text-transform: uppercase;
}
.error-result--text {
font-size: 7rem;
line-height: 1;
position: relative;
display: block;
width: 12.5rem;
color: #5a5c69;
}
.error-result--text::after {
position: absolute;
top: 0;
left: 2px;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
content: attr(data-text);
animation: noise-anim 2s infinite linear alternate-reverse;
color: #5a5c69;
background: #f8f9fc;
text-shadow: -1px 0 #e74a3b;
}
.error-result--text::before {
position: absolute;
top: 0;
left: -2px;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
content: attr(data-text);
animation: noise-anim-2 3s infinite linear alternate-reverse;
color: #5a5c69;
background: #f8f9fc;
text-shadow: 1px 0 #4e73df;
}

View File

@@ -0,0 +1,308 @@
@import (reference) '~ant-design-vue/dist/antd.less';
@-webkit-keyframes noise-anim-after {
0% {
clip: rect(32px, 9999px, 16px, 0);
}
5% {
clip: rect(5px, 9999px, 24px, 0);
}
10% {
clip: rect(77px, 9999px, 87px, 0);
}
15% {
clip: rect(91px, 9999px, 95px, 0);
}
20% {
clip: rect(74px, 9999px, 9px, 0);
}
25% {
clip: rect(37px, 9999px, 32px, 0);
}
30% {
clip: rect(56px, 9999px, 27px, 0);
}
35% {
clip: rect(35px, 9999px, 33px, 0);
}
40% {
clip: rect(89px, 9999px, 6px, 0);
}
45% {
clip: rect(81px, 9999px, 77px, 0);
}
50% {
clip: rect(64px, 9999px, 69px, 0);
}
55% {
clip: rect(12px, 9999px, 11px, 0);
}
60% {
clip: rect(59px, 9999px, 11px, 0);
}
65% {
clip: rect(69px, 9999px, 59px, 0);
}
70% {
clip: rect(74px, 9999px, 65px, 0);
}
75% {
clip: rect(56px, 9999px, 79px, 0);
}
80% {
clip: rect(80px, 9999px, 64px, 0);
}
85% {
clip: rect(87px, 9999px, 29px, 0);
}
90% {
clip: rect(16px, 9999px, 21px, 0);
}
95% {
clip: rect(69px, 9999px, 43px, 0);
}
100% {
clip: rect(75px, 9999px, 63px, 0);
}
}
@keyframes noise-anim-after {
0% {
clip: rect(32px, 9999px, 16px, 0);
}
5% {
clip: rect(5px, 9999px, 24px, 0);
}
10% {
clip: rect(77px, 9999px, 87px, 0);
}
15% {
clip: rect(91px, 9999px, 95px, 0);
}
20% {
clip: rect(74px, 9999px, 9px, 0);
}
25% {
clip: rect(37px, 9999px, 32px, 0);
}
30% {
clip: rect(56px, 9999px, 27px, 0);
}
35% {
clip: rect(35px, 9999px, 33px, 0);
}
40% {
clip: rect(89px, 9999px, 6px, 0);
}
45% {
clip: rect(81px, 9999px, 77px, 0);
}
50% {
clip: rect(64px, 9999px, 69px, 0);
}
55% {
clip: rect(12px, 9999px, 11px, 0);
}
60% {
clip: rect(59px, 9999px, 11px, 0);
}
65% {
clip: rect(69px, 9999px, 59px, 0);
}
70% {
clip: rect(74px, 9999px, 65px, 0);
}
75% {
clip: rect(56px, 9999px, 79px, 0);
}
80% {
clip: rect(80px, 9999px, 64px, 0);
}
85% {
clip: rect(87px, 9999px, 29px, 0);
}
90% {
clip: rect(16px, 9999px, 21px, 0);
}
95% {
clip: rect(69px, 9999px, 43px, 0);
}
100% {
clip: rect(75px, 9999px, 63px, 0);
}
}
@-webkit-keyframes noise-anim-before {
0% {
clip: rect(12px, 9999px, 52px, 0);
}
5% {
clip: rect(42px, 9999px, 39px, 0);
}
10% {
clip: rect(64px, 9999px, 36px, 0);
}
15% {
clip: rect(52px, 9999px, 15px, 0);
}
20% {
clip: rect(79px, 9999px, 7px, 0);
}
25% {
clip: rect(17px, 9999px, 41px, 0);
}
30% {
clip: rect(15px, 9999px, 20px, 0);
}
35% {
clip: rect(62px, 9999px, 87px, 0);
}
40% {
clip: rect(94px, 9999px, 11px, 0);
}
45% {
clip: rect(49px, 9999px, 10px, 0);
}
50% {
clip: rect(82px, 9999px, 4px, 0);
}
55% {
clip: rect(70px, 9999px, 100px, 0);
}
60% {
clip: rect(62px, 9999px, 23px, 0);
}
65% {
clip: rect(51px, 9999px, 56px, 0);
}
70% {
clip: rect(41px, 9999px, 24px, 0);
}
75% {
clip: rect(6px, 9999px, 85px, 0);
}
80% {
clip: rect(96px, 9999px, 58px, 0);
}
85% {
clip: rect(16px, 9999px, 24px, 0);
}
90% {
clip: rect(40px, 9999px, 31px, 0);
}
95% {
clip: rect(91px, 9999px, 34px, 0);
}
100% {
clip: rect(87px, 9999px, 26px, 0);
}
}
@keyframes noise-anim-before {
0% {
clip: rect(12px, 9999px, 52px, 0);
}
5% {
clip: rect(42px, 9999px, 39px, 0);
}
10% {
clip: rect(64px, 9999px, 36px, 0);
}
15% {
clip: rect(52px, 9999px, 15px, 0);
}
20% {
clip: rect(79px, 9999px, 7px, 0);
}
25% {
clip: rect(17px, 9999px, 41px, 0);
}
30% {
clip: rect(15px, 9999px, 20px, 0);
}
35% {
clip: rect(62px, 9999px, 87px, 0);
}
40% {
clip: rect(94px, 9999px, 11px, 0);
}
45% {
clip: rect(49px, 9999px, 10px, 0);
}
50% {
clip: rect(82px, 9999px, 4px, 0);
}
55% {
clip: rect(70px, 9999px, 100px, 0);
}
60% {
clip: rect(62px, 9999px, 23px, 0);
}
65% {
clip: rect(51px, 9999px, 56px, 0);
}
70% {
clip: rect(41px, 9999px, 24px, 0);
}
75% {
clip: rect(6px, 9999px, 85px, 0);
}
80% {
clip: rect(96px, 9999px, 58px, 0);
}
85% {
clip: rect(16px, 9999px, 24px, 0);
}
90% {
clip: rect(40px, 9999px, 31px, 0);
}
95% {
clip: rect(91px, 9999px, 34px, 0);
}
100% {
clip: rect(87px, 9999px, 26px, 0);
}
}
.error-result {
padding: 100px;
text-transform: uppercase;
&--text {
font-size: @font-size-base * 8;
line-height: 1;
position: relative;
display: block;
width: 12.5rem;
color: #5a5c69;
&::after {
position: absolute;
top: 0;
left: 2px;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
content: attr(data-text);
animation: noise-anim-after 2s infinite linear alternate-reverse;
color: #5a5c69;
background: @layout-body-background;
text-shadow: -1px 0 #e74a3b;
}
&::before {
position: absolute;
top: 0;
left: -2px;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
content: attr(data-text);
animation: noise-anim-before 3s infinite linear alternate-reverse;
color: #5a5c69;
background: @layout-body-background;
text-shadow: 1px 0 #4e73df;
}
}
}

View File

@@ -0,0 +1,14 @@
<template>
<container>
<div class="error-result">
<div class="error-result--code">
<span class="error-result--text" data-text="404">404</span>
</div>
<p>not found</p>
</div>
</container>
</template>
<style lang="less" scope>
@import './index.less';
</style>