qiuchenfan
/
news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
Li1304553726 2025-11-18 15:52:22 +08:00
parent 114c63d6d7
commit 388429a79c
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/header/Header.tsx
View File

@ -4,27 +4,28 @@ export function Header(){
const [currentTime, setCurrentTime] = useState(new Date()); const [currentTime, setCurrentTime] = useState(new Date());
useEffect(() => { useEffect(() => {
// setInterval是 JavaScript 中的一个全局函数，用于重复执行代码
const timer = setInterval(() => { const timer = setInterval(() => {
setCurrentTime(new Date()); setCurrentTime(new Date());
}, 1000); // 每秒更新一次 }, 1000); // 每秒更新一次
// 清理定时器 // 清理定时器
return () => clearInterval(timer); return () => clearInterval(timer);// 只在组件卸载时清理定时器
}, []); }, []); // 只在组件首次挂载时设置定时器
return ( return (
<div <div
className="relative w-[1280px] h-[704px] bg-cover bg-center left-1/2 transform -translate-x-1/2" 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')" }} style={{ backgroundImage: "url('/app/images/header.png')" }}
> >
{/* 时间显示 */} {/* 时间显示 只显示日期: "2025/3/15"*/}
<div className="absolute top-4 right-4 mr-40"> <div className="absolute top-4 right-4 mr-40">
<div> <div>
{currentTime.toLocaleString('zh-CN')} {currentTime.toLocaleDateString('zh-CN')}
</div> </div>
</div> </div>
<div className="absolute top-4 right-4 mr-20 cursor-pointer"> <div className="absolute top-4 right-4 mr-20">
<h2 className="text-lg font-bold" onClick={() => console.log('登录')}>登录</h2> <h2 className="text-lg font-bold cursor-pointer" onClick={() => console.log('登录')}>登录</h2>
</div> </div>
<div className="absolute top-4 right-4 mr-5"> <div className="absolute top-4 right-4 mr-5">
<h2 className="text-lg font-bold cursor-pointer" onClick={() => console.log('注册')}>注册</h2> <h2 className="text-lg font-bold cursor-pointer" onClick={() => console.log('注册')}>注册</h2>

10
app/routes/news.tsx
View File

@ -1,5 +1,7 @@
import { CarouselDemo } from "@/components/untils/Carousel"; import { CarouselDemo } from "@/components/untils/Carousel";
import type { Route } from "./+types/news"; import type { Route } from "./+types/news";
import { Header } from "@/components/header/Header";
import { TopNav } from "@/components/header/TopNav";
export function meta( ) { export function meta( ) {
@ -10,5 +12,11 @@ export function meta( ) {
} }
export default function Home() { export default function Home() {
return <CarouselDemo />; return (
<div>
<Header />
<TopNav />
<CarouselDemo />
</div>
);
} }