kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto-save 2026-05-15 16:49 (~4)

Browse Source
This commit is contained in:
kang
2026-05-15 16:49:50 +08:00
parent 6fdcb47666
commit c3a1855b42
4 changed files with 124 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
web/app/globals.css
View File

@@ -129,10 +129,11 @@
============================================================ */
.login-page {
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(135deg, #090a12 0%, #111426 48%, #07080d 100%);
background-size: 44px 44px, 44px 44px, auto;
radial-gradient(circle at 15% 18%, rgba(64, 93, 230, 0.2), transparent 30%),
radial-gradient(circle at 77% 26%, rgba(245, 135, 32, 0.14), transparent 30%),
linear-gradient(115deg, #f6f7f9 0 42%, #16171c 42% 100%);
background-size: auto, auto, auto;
font-family: Roboto, "Geist", "Geist Fallback", sans-serif;
}
.login-page::before {
content: "";
@@ -140,21 +141,26 @@
inset: 0;
pointer-events: none;
background:
linear-gradient(115deg, transparent 0 18%, rgba(108, 63, 245, 0.16) 18% 28%, transparent 28% 52%, rgba(255, 155, 107, 0.12) 52% 60%, transparent 60%),
linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%, rgba(0, 0, 0, 0.36));
linear-gradient(90deg, rgba(40, 40, 40, 0.035) 1px, transparent 1px),
linear-gradient(180deg, rgba(40, 40, 40, 0.035) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 34%, rgba(0, 0, 0, 0.22));
background-size: 48px 48px, 48px 48px, auto;
}
.login-page::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-image:
linear-gradient(114deg, transparent 0 16%, rgba(64, 93, 230, 0.1) 16% 25%, transparent 25% 53%, rgba(245, 135, 32, 0.09) 53% 61%, transparent 61%),
linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 100% 6px;
opacity: 0.45;
opacity: 0.72;
mix-blend-mode: screen;
}
.login-hero {
isolation: isolate;
color: #282828;
}
.login-hero::before {
content: "";
@@ -162,22 +168,91 @@
inset: 0;
z-index: 0;
background:
linear-gradient(145deg, rgba(108, 63, 245, 0.25), transparent 38%),
linear-gradient(20deg, transparent 38%, rgba(45, 45, 45, 0.8) 39% 52%, transparent 53%),
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 45%);
radial-gradient(circle at 75% 18%, rgba(255, 255, 255, 0.95), transparent 26%),
linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(238, 240, 244, 0.72)),
linear-gradient(20deg, transparent 40%, rgba(40, 40, 40, 0.06) 40% 54%, transparent 54%);
}
.login-hero::after {
content: "";
position: absolute;
left: -18%;
top: 10%;
z-index: 0;
width: 88%;
height: 68%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.54), rgba(240, 224, 190, 0.26), transparent);
filter: blur(18px);
transform: rotate(-11deg);
pointer-events: none;
}
.login-brand-mark {
display: inline-flex;
align-items: baseline;
gap: 8px;
color: #282828;
letter-spacing: 0;
}
.login-brand-mark__logo {
font-size: 26px;
font-weight: 700;
line-height: 1;
}
.login-brand-mark__sub {
font-size: 13px;
color: rgba(40, 40, 40, 0.54);
}
.login-store-pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 36px;
border-radius: 999px;
background: #282828;
padding: 0 14px;
color: #fff;
font-size: 13px;
box-shadow: 0 10px 24px rgba(40, 40, 40, 0.18);
}
.login-product-ribbon {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: -12px;
}
.login-product-ribbon span {
border: 1px solid rgba(40, 40, 40, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.74);
padding: 8px 12px;
color: rgba(40, 40, 40, 0.66);
font-size: 12px;
box-shadow: 0 10px 28px rgba(40, 40, 40, 0.06);
}
.login-skg-tile {
border: 1px solid rgba(40, 40, 40, 0.08);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(244, 245, 247, 0.75)),
#f5f5f5;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 16px 34px rgba(40, 40, 40, 0.08);
}
.login-character-stage {
position: relative;
min-height: 320px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid rgba(40, 40, 40, 0.08);
border-radius: 8px;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
rgba(6, 7, 13, 0.68);
background-size: 34px 34px, 34px 34px, auto;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 70px rgba(0, 0, 0, 0.35);
radial-gradient(circle at 82% 28%, rgba(245, 135, 32, 0.14), transparent 24%),
linear-gradient(90deg, rgba(40, 40, 40, 0.04) 1px, transparent 1px),
linear-gradient(180deg, rgba(40, 40, 40, 0.04) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(235, 237, 241, 0.78));
background-size: auto, 34px 34px, 34px 34px, auto;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 30px 70px rgba(40, 40, 40, 0.13);
}
.login-character-stage::after {
content: "";
@@ -186,13 +261,15 @@
right: 0;
bottom: 0;
height: 40%;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
background:
linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.56)),
linear-gradient(90deg, transparent 40%, rgba(40, 40, 40, 0.08) 40% 58%, transparent 58%);
pointer-events: none;
}
.login-stage-grid {
position: absolute;
inset: 26px;
border: 1px dashed rgba(255, 255, 255, 0.1);
border: 1px dashed rgba(40, 40, 40, 0.11);
border-radius: 8px;
}
.login-characters-container {

8
web/app/login/page.tsx
View File

@@ -100,11 +100,11 @@ export default function LoginPage() {
</div>
<div className="mt-5 flex items-center gap-3">
<div className="grid h-11 w-11 place-items-center rounded-[8px] bg-[#282828] text-white">
<Sparkles className="h-5 w-5" />
</div>
<div>
<Sparkles className="h-5 w-5" />
</div>
<div>
<p className="text-sm text-[#666]">SKG Marketing Studio</p>
<h1 className="text-3xl font-semibold leading-tight text-[#111] sm:text-4xl">营销内容工作台</h1>
<h1 className="text-2xl font-semibold leading-tight text-[#111] sm:text-4xl">营销内容工作台</h1>
</div>
</div>
</div>