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 17:40:37 +08:00
parent a6ce98bff0
commit 9b6da3fd28
3 changed files with 19 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
app/components/Carousel.tsx
View File

@ -12,21 +12,13 @@ import {
type CarouselApi, type CarouselApi,
} from "@/ui/carousel"; } from "@/ui/carousel";
import FireNewsList from "./FireNewsList"; import FireNewsList from "./FireNewsList";
const imageUrls = [
"/images/carousel-1.jpg",
"/images/carousel-2.jpg",
"/images/carousel-3.jpg",
"/images/carousel-4.jpg",
"/images/carousel-5.jpg",
"/images/carousel-6.jpg",
];
export function CarouselDemo() { export function CarouselDemo() {
const [api, setApi] = React.useState<CarouselApi>(); const [api, setApi] = React.useState<CarouselApi>();
const [current, setCurrent] = React.useState(0); const [current, setCurrent] = React.useState(0);
const [count, setCount] = React.useState(0); const [count, setCount] = React.useState(0);
const totalSlides = imageUrls.length; const totalSlides = 6;
React.useEffect(() => { React.useEffect(() => {
if (!api) return; if (!api) return;
@ -40,7 +32,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,
@ -52,19 +44,21 @@ export function CarouselDemo() {
}), }),
]} ]}
setApi={setApi} setApi={setApi}
className="w-full"
> >
<CarouselContent> <CarouselContent className="h-full w-full">
{imageUrls.map((src, 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 ">
<img <div
src={src} className="w-full h-full"
alt={`Slide ${index + 1}`} style={{
className="w-full h-full object-cover" backgroundImage: "url('/app/images/header.png')",
/> backgroundSize: '100% 100%',
}}
>
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

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

@ -15,7 +15,7 @@ export function Header(){
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-full h-180 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"*/} {/* 时间显示 只显示日期: "2025/3/15"*/}

7
app/routes/news.tsx
View File

@ -1,4 +1,4 @@
import { CarouselDemo } from "@/components/Carousel";
import type { Route } from "./+types/news"; import type { Route } from "./+types/news";
import Integrated from "@/components/news/body/Integrated"; import Integrated from "@/components/news/body/Integrated";
import CultureBgPage from "@/components/news/body/Culturebg"; import CultureBgPage from "@/components/news/body/Culturebg";
@ -6,6 +6,7 @@ import {Header} from "@/components/header/Header";
import {TopNav} from "@/components/header/TopNav"; import {TopNav} from "@/components/header/TopNav";
import NewsList from "@/components/list/NewsList"; import NewsList from "@/components/list/NewsList";
import ImageGridSection from "@/components/body/ImageGridSection"; import ImageGridSection from "@/components/body/ImageGridSection";
import { CarouselDemo } from "@/components/Carousel";
export function meta( ) { export function meta( ) {
return [ return [
{ title: "New React Router App" }, { title: "New React Router App" },
@ -19,10 +20,10 @@ export default function Home() {
<div> <div>
<Header /> <Header />
<TopNav /> <TopNav />
<CarouselDemo />
<NewsList /> <NewsList />
<ImageGridSection /> <ImageGridSection />
<Integrated /> {/* <Integrated /> */}
<CultureBgPage /> <CultureBgPage />
</div> </div>
); );