xufuhan/asset-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

打磨细节

Browse Source
This commit is contained in:
xufuhan
2026-01-28 17:55:01 +08:00
parent 08af95116e
commit 0a1bd07492
36 changed files with 1649 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/globals.css
View File

@@ -17,7 +17,7 @@
body {
color: var(--foreground);
background: var(--background);
font-family: var(--font-inter), Arial, Helvetica, sans-serif;
font-family: var(--font-noto-sans-sc), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}
@layer utilities {
@@ -26,6 +26,19 @@ body {
}
}
/* Font family utilities with Chinese support */
.font-inter {
font-family: var(--font-noto-sans-sc), var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}
.font-domine {
font-family: var(--font-noto-serif-sc), var(--font-domine), Georgia, "Noto Serif", serif;
}
.font-jetbrains {
font-family: var(--font-jetbrains), "Courier New", monospace;
}
/* Calculator card wiggle animation */
@keyframes wiggle {
0% { transform: rotate(0deg); }
@@ -37,6 +50,10 @@ body {
100% { transform: rotate(0deg); }
}
.calculator-card-container {
cursor: pointer;
}
.calculator-card-container:hover {
animation: wiggle 2.5s ease-in-out infinite;
}
@@ -69,3 +86,75 @@ body {
.animate-slide-down {
animation: slideDown 0.3s ease-out;
}
@keyframes slideUp {
from {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
to {
opacity: 0;
transform: translateX(-50%) translateY(-10px);
}
}
@keyframes fadeOutFast {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.animate-slide-up {
animation: slideUp 0.3s ease-out forwards;
}
.animate-fade-out-fast {
animation: fadeOutFast 0.3s ease-out forwards;
}
/* Shatter transition animation - 3D effect */
@keyframes shatter {
0%, 20% {
transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
opacity: 1;
}
100% {
transform: translate3d(var(--tx), var(--ty), -200px)
rotateX(var(--rx))
rotateY(var(--ry))
scale(var(--s));
opacity: 0;
}
}
.shatter-fragment {
animation: shatter 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
animation-delay: var(--delay);
will-change: transform, opacity;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.glass-shard {
transform-style: preserve-3d;
transition: all 0.3s ease;
/* 确保在动画开始时完全不透明 */
background-color: rgba(255, 255, 255, 1) !important;
}
/* Fade out animation for background mask */
@keyframes fadeOut {
0%, 30% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.animate-fade-out {
animation: fadeOut 1.5s ease-out forwards;
}

23
app/layout.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import { Inter, JetBrains_Mono, Domine } from "next/font/google";
import { Inter, JetBrains_Mono, Domine, Noto_Sans_SC, Noto_Serif_SC } from "next/font/google";
import "./globals.css";
import Providers from "@/components/Providers";
const inter = Inter({
subsets: ["latin"],
@@ -21,6 +22,20 @@ const domine = Domine({
display: "swap",
});
const notoSansSC = Noto_Sans_SC({
subsets: ["latin"],
variable: "--font-noto-sans-sc",
weight: ["400", "500", "700"],
display: "swap",
});
const notoSerifSC = Noto_Serif_SC({
subsets: ["latin"],
variable: "--font-noto-serif-sc",
weight: ["400", "700"],
display: "swap",
});
export const metadata: Metadata = {
title: "Asset Homepage",
description: "Asset management platform homepage",
@@ -32,9 +47,11 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="zh-CN" className={`${inter.variable} ${jetbrainsMono.variable} ${domine.variable}`}>
<html lang="en" className={`${inter.variable} ${jetbrainsMono.variable} ${domine.variable} ${notoSansSC.variable} ${notoSerifSC.variable}`}>
<body className="antialiased">
{children}
<Providers>
{children}
</Providers>
</body>
</html>
);