位置调整

This commit is contained in:
2025-12-20 22:02:29 +08:00
parent f609fcfcd3
commit afab936d70

View File

@@ -34,9 +34,24 @@ const Clock: React.FC<ClockProps> = ({ showSeconds = true, use24HourFormat = tru
const minutesStr = rawMinutes.toString().padStart(2, '0'); const minutesStr = rawMinutes.toString().padStart(2, '0');
const secondsStr = rawSeconds.toString().padStart(2, '0'); const secondsStr = rawSeconds.toString().padStart(2, '0');
const weekday = time.toLocaleDateString('en-US', { weekday: 'short' }).toUpperCase();
const month = (time.getMonth() + 1).toString().padStart(2, '0');
const day = time.getDate().toString().padStart(2, '0');
const datePart = `${month}/${day}`;
return ( return (
<div className="flex flex-col items-center select-none text-white drop-shadow-2xl"> <div className="flex flex-col items-center select-none text-white drop-shadow-2xl">
<div className="flex items-baseline font-light tracking-tight"> <div className="flex items-baseline font-light tracking-tight">
{/* Short Date (Left side, stacked) */}
<div className="relative mr-2 md:mr-3">
<span className="absolute bottom-full right-0 mb-1 text-xs md:text-sm font-light text-white/60 tracking-widest uppercase whitespace-nowrap">
{weekday}
</span>
<span className="text-base md:text-xl font-light text-white/80 tracking-widest leading-none">
{datePart}
</span>
</div>
{/* Hours */} {/* Hours */}
<span className="text-5xl md:text-6xl lg:text-7xl font-sans font-extralight tracking-tighter tabular-nums text-white/95"> <span className="text-5xl md:text-6xl lg:text-7xl font-sans font-extralight tracking-tighter tabular-nums text-white/95">
{hoursStr} {hoursStr}
@@ -67,9 +82,9 @@ const Clock: React.FC<ClockProps> = ({ showSeconds = true, use24HourFormat = tru
)} )}
</div> </div>
{/* Date Display */} {/* Motto */}
<div className="mt-4 text-lg md:text-xl font-light text-white/70 tracking-widest uppercase"> <div className="mt-4 text-lg md:text-xl font-light text-white/70 tracking-widest uppercase">
{time.toLocaleDateString(language === 'zh' ? 'zh-CN' : 'en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
</div> </div>
</div> </div>
); );