xufuhan/assetx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大更新

Browse Source
This commit is contained in:
YoRHa
2026-02-04 12:56:06 +08:00
parent 098a91f2ac
commit 4f2ff3f3ba
535 changed files with 11908 additions and 15540 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
components/points/VipCard.tsx Normal file
View File

@@ -0,0 +1,109 @@
import Image from "next/image";
interface VipCardProps {
memberTier: string;
level: number;
currentPoints: number;
totalPoints: number;
nextTier: string;
pointsToNextTier: number;
}
export default function VipCard({
memberTier = "Silver Member",
level = 2,
currentPoints = 2450,
totalPoints = 3000,
nextTier = "Gold",
pointsToNextTier = 550,
}: VipCardProps) {
const progressPercent = (currentPoints / totalPoints) * 100;
const progressBarPercent = Math.min(progressPercent * 0.47, 38.4); // 根据原型调整比例
return (
<div className="w-[340px] h-[198px] relative rounded-xl overflow-hidden" style={{ background: "linear-gradient(180deg, #484848 0%, #1e1e1e 100%)" }}>
{/* Top Left - Member Info */}
<div className="absolute left-6 top-[33px]">
<div className="flex flex-col gap-1">
<span className="text-body-default font-bold text-white leading-[150%]">
{memberTier}
</span>
<span className="text-body-small font-bold text-text-tertiary dark:text-gray-400 leading-[150%]">
Current Tier
</span>
</div>
</div>
{/* Top Right - VIP Badge */}
<div className="absolute right-6 top-[26px]">
<div className="relative w-[55px] h-[28px]">
{/* Badge Layers */}
<div className="absolute left-[0.45px] top-[6px]">
<Image src="/polygon-30.svg" alt="" width={24} height={15} />
</div>
<div className="absolute left-[28.55px] top-[6px]">
<Image src="/polygon-40.svg" alt="" width={24} height={15} />
</div>
<div className="absolute left-[4px] top-[3px]">
<Image src="/polygon-20.svg" alt="" width={21} height={25} />
</div>
<div className="absolute left-[4px] top-[3px]">
<Image src="/mask-group1.svg" alt="" width={21} height={25} />
</div>
{/* Decorative circles */}
<div className="absolute left-[12.84px] top-0 w-[3.32px] h-[3.32px] rounded-full" style={{ background: "linear-gradient(180deg, #ffcd1d 0%, #ff971d 100%)" }} />
<div className="absolute left-0 top-[5.14px] w-[2.72px] h-[2.72px] rounded-full" style={{ background: "linear-gradient(180deg, #ffcd1d 0%, #ff971d 100%)" }} />
<div className="absolute left-[26.2px] top-[5.14px] w-[2.72px] h-[2.72px] rounded-full" style={{ background: "linear-gradient(180deg, #ffcd1d 0%, #ff971d 100%)" }} />
{/* Level Badge */}
<div className="absolute left-[24px] top-[9.62px]">
<Image src="/rectangle-420.svg" alt="" width={31} height={12} />
<span className="absolute left-[9.24px] top-0 text-[8.5px] font-semibold leading-[120%] uppercase" style={{ color: "#a07400" }}>
LV{level}
</span>
</div>
</div>
</div>
{/* Bottom - Progress Section */}
<div className="absolute left-1/2 -translate-x-1/2 top-[107px] w-[280px] flex flex-col gap-1">
{/* Progress Label */}
<div className="flex items-center justify-between">
<span className="text-caption-tiny font-regular leading-[150%] tracking-[0.01em]" style={{ color: "#d1d5db" }}>
Progress
</span>
<span className="text-caption-tiny font-bold text-white leading-[150%] tracking-[0.01em]">
{currentPoints} / {totalPoints}
</span>
</div>
{/* Progress Bar */}
<div className="relative w-full h-1 rounded-[5px]" style={{ background: "#343434" }}>
<div
className="absolute left-0 top-0 h-full rounded-[5px]"
style={{
width: `${progressBarPercent}%`,
background: "linear-gradient(90deg, rgba(255, 255, 255, 1) 95.15%, rgba(255, 255, 255, 0) 100%)"
}}
/>
<div
className="absolute w-[10px] h-[10px] rounded-full bg-white -top-[3px]"
style={{
left: `${Math.max(0, progressBarPercent - 3)}%`,
filter: "blur(3.42px)"
}}
/>
</div>
</div>
{/* Bottom - Next Tier */}
<div className="absolute left-6 top-[163px] flex items-center gap-1">
<span className="text-caption-tiny font-regular text-white leading-[150%] tracking-[0.01em]">
{pointsToNextTier} points to <span className="font-bold">{nextTier}</span>
</span>
<Image src="/icon-arrow-gold.svg" alt="" width={16} height={16} />
</div>
</div>
);
}