- ![404]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -51,20 +83,110 @@ interface Props {
min-block-size: 300px;
padding-block-start: 3rem;
text-align: center;
+ animation: rise-in 0.6s ease both;
}
-/* 图标样式 */
-.icon-wrapper {
+/* ---------- 错误码 ---------- */
+.code-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
- inline-size: 15rem;
- margin-block: 0 1rem;
- margin-inline: auto;
+ gap: 0.06em;
+ margin-block: 0 1.5rem;
+ font-size: clamp(5rem, 16vw, 9rem);
+ font-weight: 800;
+ line-height: 1;
+ letter-spacing: 0.02em;
}
-/* 文字样式 */
+.code-digit {
+ background: linear-gradient(175deg, rgba(var(--v-theme-primary), 1) 12%, rgba(var(--v-theme-primary), 0.45) 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ color: transparent;
+ text-shadow: none;
+}
+
+/* 背景柔光 */
+.code-glow {
+ position: absolute;
+ inset: -30% -10%;
+ z-index: -1;
+ background: radial-gradient(closest-side, rgba(var(--v-theme-primary), 0.16), transparent 70%);
+ animation: breathe 5s ease-in-out infinite;
+}
+
+/* ---------- 胶卷盘 ---------- */
+.reel-holder {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ block-size: 0.92em;
+ inline-size: 0.92em;
+ margin-inline: 0.06em;
+}
+
+.reel {
+ block-size: 100%;
+ inline-size: 100%;
+ animation: reel-spin 24s linear infinite;
+}
+
+.reel-rim {
+ fill: rgba(var(--v-theme-primary), 0.08);
+ stroke: rgba(var(--v-theme-primary), 0.9);
+ stroke-width: 9;
+}
+
+/* 盘面 6 个镂孔：仅用描边，孔内透出背景色 */
+.reel-holes circle {
+ stroke: rgba(var(--v-theme-on-surface), 0.5);
+ stroke-width: 4;
+}
+
+.reel-hub {
+ fill: rgba(var(--v-theme-primary), 0.95);
+}
+
+/* ---------- 漂浮胶片帧 ---------- */
+.film-chip {
+ position: absolute;
+ border: 1.5px solid rgba(var(--v-theme-on-surface), 0.18);
+ border-radius: 4px;
+ /* 上下齿孔用重复渐变模拟 */
+ background-image:
+ repeating-linear-gradient(90deg, transparent 0 6px, rgba(var(--v-theme-on-surface), 0.22) 6px 10px);
+ background-position: center top 3px;
+ background-repeat: repeat-x;
+ background-size: 100% 3px;
+ block-size: 14px;
+ inline-size: 34px;
+ opacity: 0.7;
+}
+
+.chip-a {
+ inset-block-start: -8%;
+ inset-inline-start: 6%;
+ rotate: -18deg;
+ animation: drift 6s ease-in-out infinite;
+}
+
+.chip-b {
+ inset-block-end: -6%;
+ inset-inline-end: 4%;
+ rotate: 14deg;
+ animation: drift 7s ease-in-out 1.2s infinite;
+}
+
+.chip-c {
+ inset-block-start: 12%;
+ inset-inline-end: -6%;
+ rotate: 26deg;
+ animation: drift 8s ease-in-out 2.4s infinite;
+}
+
+/* ---------- 文字 ---------- */
.error-title {
position: relative;
color: rgba(var(--v-theme-on-surface), 0.95);
@@ -81,6 +203,7 @@ interface Props {
block-size: 3px;
content: '';
inline-size: 60px;
+ margin-block-start: 0.5rem;
margin-inline: auto;
}
@@ -91,4 +214,58 @@ interface Props {
margin-inline: auto;
max-inline-size: 80%;
}
+
+/* ---------- 动画 ---------- */
+@keyframes rise-in {
+ from {
+ opacity: 0;
+ transform: translateY(14px);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
+
+@keyframes breathe {
+
+ 0%,
+ 100% {
+ opacity: 0.7;
+ transform: scale(1);
+ }
+
+ 50% {
+ opacity: 1;
+ transform: scale(1.08);
+ }
+}
+
+@keyframes reel-spin {
+ to {
+ rotate: 360deg;
+ }
+}
+
+@keyframes drift {
+
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 50% {
+ transform: translateY(-8px);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .no-data-container,
+ .code-glow,
+ .reel,
+ .film-chip {
+ animation: none;
+ }
+}