130 lines
3.9 KiB
TypeScript
130 lines
3.9 KiB
TypeScript
import type { CardFaceProps } from "./types";
|
||
|
||
/** 卡面：黑金 VIP — 深黑底色 + 金色光晕与描边，体现尊贵身份 */
|
||
export function VipFace(_: CardFaceProps) {
|
||
return (
|
||
<>
|
||
{/* 完全覆盖底部 palette，建立黑金底色 */}
|
||
<div
|
||
className="absolute inset-0"
|
||
style={{
|
||
background: "linear-gradient(135deg, #0f0f0f 0%, #1a1610 40%, #0d0d0d 100%)",
|
||
}}
|
||
/>
|
||
|
||
{/* 金色主光晕：右上角 */}
|
||
<div
|
||
className="absolute -right-10 -top-10 size-52 rounded-full opacity-30 blur-3xl"
|
||
style={{
|
||
background: "radial-gradient(circle, #d4a843 0%, #9a6f1a 50%, transparent 75%)",
|
||
}}
|
||
/>
|
||
|
||
{/* 金色副光晕：左下角 */}
|
||
<div
|
||
className="absolute -bottom-12 -left-6 size-44 rounded-full opacity-20 blur-3xl"
|
||
style={{
|
||
background: "radial-gradient(circle, #c49b2e 0%, transparent 70%)",
|
||
}}
|
||
/>
|
||
|
||
{/* 中部横向光带 */}
|
||
<div
|
||
className="absolute inset-x-0 top-1/2 h-px -translate-y-1/2 opacity-20"
|
||
style={{
|
||
background:
|
||
"linear-gradient(to right, transparent 0%, #d4a843 30%, #f0d060 50%, #d4a843 70%, transparent 100%)",
|
||
}}
|
||
/>
|
||
|
||
{/* 顶部金色高光边 */}
|
||
<div
|
||
className="absolute inset-x-0 top-0 h-px"
|
||
style={{
|
||
background:
|
||
"linear-gradient(to right, transparent 5%, #c8992a 30%, #f5d060 50%, #c8992a 70%, transparent 95%)",
|
||
}}
|
||
/>
|
||
|
||
{/* 底部深金色压边 */}
|
||
<div
|
||
className="absolute inset-x-0 bottom-0 h-px opacity-50"
|
||
style={{
|
||
background:
|
||
"linear-gradient(to right, transparent 10%, #9a6f1a 40%, #b8881f 60%, transparent 90%)",
|
||
}}
|
||
/>
|
||
|
||
{/* 右侧竖向装饰线 */}
|
||
<div
|
||
className="absolute bottom-4 right-5 top-4 w-px opacity-15"
|
||
style={{
|
||
background:
|
||
"linear-gradient(to bottom, transparent, #d4a843 30%, #f0d060 60%, transparent)",
|
||
}}
|
||
/>
|
||
|
||
{/* 细噪点 SVG filter */}
|
||
<svg className="absolute size-0">
|
||
<filter id="vip-noise">
|
||
<feTurbulence
|
||
type="fractalNoise"
|
||
baseFrequency="0.75"
|
||
numOctaves="4"
|
||
stitchTiles="stitch"
|
||
/>
|
||
<feColorMatrix type="saturate" values="0" />
|
||
<feBlend in="SourceGraphic" mode="overlay" result="blend" />
|
||
<feComposite in="blend" in2="SourceGraphic" operator="in" />
|
||
</filter>
|
||
</svg>
|
||
|
||
{/* 噪点层：增加高端质感 */}
|
||
<div
|
||
className="absolute inset-0 opacity-[0.12] mix-blend-overlay"
|
||
style={{ filter: "url(#vip-noise)" }}
|
||
/>
|
||
|
||
{/* 整体金色微光叠层 */}
|
||
<div
|
||
className="absolute inset-0 opacity-[0.04]"
|
||
style={{
|
||
background: "linear-gradient(120deg, transparent 20%, #d4a843 50%, transparent 80%)",
|
||
}}
|
||
/>
|
||
|
||
{/* 菱形网格纹 */}
|
||
<div
|
||
className="absolute inset-0 opacity-[0.06]"
|
||
style={{
|
||
backgroundImage:
|
||
"repeating-linear-gradient(45deg, #d4a843 0px, #d4a843 1px, transparent 1px, transparent 14px), repeating-linear-gradient(-45deg, #d4a843 0px, #d4a843 1px, transparent 1px, transparent 14px)",
|
||
}}
|
||
/>
|
||
|
||
{/* VIP 大水印文字 */}
|
||
<div
|
||
className="pointer-events-none absolute -bottom-4 -left-2 select-none font-black leading-none tracking-widest opacity-[0.07]"
|
||
style={{
|
||
fontSize: "84px",
|
||
color: "#d4a843",
|
||
fontFamily: "serif",
|
||
letterSpacing: "0.15em",
|
||
}}
|
||
>
|
||
VIP
|
||
</div>
|
||
|
||
{/* 斜向扫光带 */}
|
||
<div
|
||
className="absolute -inset-y-4 w-12 -rotate-12 opacity-[0.08] blur-sm"
|
||
style={{
|
||
left: "38%",
|
||
background:
|
||
"linear-gradient(to bottom, transparent, #f5d060 30%, #fff8dc 50%, #f5d060 70%, transparent)",
|
||
}}
|
||
/>
|
||
</>
|
||
);
|
||
}
|