34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
export function Header(){
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentTime(new Date());
|
|
}, 1000); // 每秒更新一次
|
|
|
|
// 清理定时器
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className="relative w-[1280px] h-[704px] bg-cover bg-center left-1/2 transform -translate-x-1/2"
|
|
style={{ backgroundImage: "url('/app/images/header.png')" }}
|
|
>
|
|
{/* 时间显示 */}
|
|
<div className="absolute top-4 right-4 mr-40">
|
|
<div>
|
|
{currentTime.toLocaleString('zh-CN')}
|
|
</div>
|
|
</div>
|
|
<div className="absolute top-4 right-4 mr-20 cursor-pointer">
|
|
<h2 className="text-lg font-bold" onClick={() => console.log('登录')}>登录</h2>
|
|
</div>
|
|
<div className="absolute top-4 right-4 mr-5">
|
|
<h2 className="text-lg font-bold cursor-pointer" onClick={() => console.log('注册')}>注册</h2>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |