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 16:20:51 +08:00
parent 388429a79c
commit e31bbdf78e
2 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/components/untils/Carousel.tsx
View File

@ -31,7 +31,7 @@ export function CarouselDemo() {
}, [api]); }, [api]);
return ( return (
<div className="relative w-full max-w-xs"> <div className="relative w-full max-w-4xl mx-auto">
<Carousel <Carousel
opts={{ opts={{
loop: true, loop: true,
@ -43,15 +43,24 @@ export function CarouselDemo() {
}), }),
]} ]}
setApi={setApi} setApi={setApi}
className="w-full"
> >
<CarouselContent> <CarouselContent className="h-full w-full">
{Array.from({ length: totalSlides }).map((_, index) => ( {Array.from({ length: totalSlides }).map((_, index) => (
<CarouselItem key={index}> <CarouselItem key={index} className="w-full h-full">
<div className="p-1"> <div className="p-1">
<Card> <Card>
<CardContent className="flex aspect-square items-center justify-center p-6"> <CardContent className="flex aspect-square items-center justify-center ">
<span className="text-4xl font-semibold">{index + 1}</span> <div
className="w-full h-full relative"
style={{
backgroundImage: "url('/app/images/header.png')",
backgroundSize: '100% 100%',
}}
>
<div className="absolute top-1 right-1 h-full bg-black">
</div>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

2
app/routes/news.tsx
View File

@ -2,6 +2,7 @@ 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 { Header } from "@/components/header/Header";
import { TopNav } from "@/components/header/TopNav"; import { TopNav } from "@/components/header/TopNav";
import NewsList from "@/components/list/NewsList";
export function meta( ) { export function meta( ) {
@ -17,6 +18,7 @@ export default function Home() {
<Header /> <Header />
<TopNav /> <TopNav />
<CarouselDemo /> <CarouselDemo />
<NewsList/>
</div> </div>
); );
} }