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

Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news

This commit is contained in:
qiuchenfan 2025-11-18 16:33:56 +08:00
parent d5a25a56bd 3b6d64df92
commit 8ddc36b5fc
3 changed files with 53 additions and 31 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());
useEffect(() => {
// setInterval是 JavaScript 中的一个全局函数，用于重复执行代码
const timer = setInterval(() => {
setCurrentTime(new Date());
}, 1000); // 每秒更新一次
// 清理定时器
return () => clearInterval(timer);
}, []);
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')" }}
>
{/* 时间显示 */}
{/* 时间显示 只显示日期: "2025/3/15"*/}
<div className="absolute top-4 right-4 mr-40">
<div>
{currentTime.toLocaleString('zh-CN')}
{currentTime.toLocaleDateString('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 className="absolute top-4 right-4 mr-20">
<h2 className="text-lg font-bold cursor-pointer" 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>

53
app/components/list/NewsList.tsx
View File

@ -11,12 +11,13 @@ interface NewsProps {
const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
return (
<div>
<div onClick={() => url && window.open(url)}
className="flex items-center justify-between hover:text-blue-500
cursor-pointer w-96">
<h3 >{title}</h3>
<p >{time}</p>
<div className="mb-4">
<div
onClick={() => url && window.open(url)}
className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
>
<h3 className="text-lg font-semibold text-gray-800">{title}</h3>
<p className="text-sm text-gray-500">{time}</p>
</div>
</div>
);
@ -25,16 +26,40 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
// 使用新闻数据渲染列表
const NewsList: React.FC = () => {
return (
<div>
<ul className="flex flex-col justify-center items-center h-screen">
{mockNewsData.map((news) => (
<NewsItem title={news.title} time={news.time} url={news.url} />
))}
</ul>
<div className="bg-gray-100 p-6 rounded-lg shadow-md">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* 科技新闻 */}
<div className="bg-white p-6 rounded-lg shadow-sm">
<div className="flex items-center justify-between mb-4">
<p className="text-xl font-bold text-gray-900">科技新闻</p>
<button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
更多科技新闻
</button>
</div>
<ul className="space-y-4">
{mockNewsData.map((news, index) => (
<NewsItem key={index} title={news.title} time={news.time} url={news.url} />
))}
</ul>
</div>
{/* 社会新闻 */}
<div className="bg-white p-6 rounded-lg shadow-sm">
<div className="flex items-center justify-between mb-4">
<p className="text-xl font-bold text-gray-900">社会新闻</p>
<button className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
更多社会新闻
</button>
</div>
<ul className="space-y-4">
{mockNewsData.map((news, index) => (
<NewsItem key={index} title={news.title} time={news.time} url={news.url} />
))}
</ul>
</div>
</div>
</div>
);
};
export default NewsList;

12
app/routes/news.tsx
View File

@ -1,14 +1,9 @@
import { CarouselDemo } from "@/components/untils/Carousel";
import type { Route } from "./+types/news";
import { Header } from "@/components/header/Header";
import { TopNav } from "@/components/header/TopNav";
import {Header} from "@/components/header/Header";
import {TopNav} from "@/components/header/TopNav";
import NewsList from "@/components/list/NewsList";
import { C } from "node_modules/react-router/dist/development/index-react-server-client-rcoGPJhU.mjs";
import { Carousel } from "@/ui/carousel";
export function meta({}: Route.MetaArgs) {
export function meta( ) {
return [
{ title: "New React Router App" },
{ name: "description", content: "Welcome to React Router!" },
@ -19,6 +14,7 @@ export default function Home() {
return (
<div>
<CarouselDemo />
<NewsList />
</div>
);
}