Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news
This commit is contained in:
commit
f7c5c0a544
|
|
@ -57,7 +57,7 @@ export function FireNewsList() {
|
|||
return (
|
||||
<div>
|
||||
{/* 文章列表 */}
|
||||
<div className=" bg-[rgba(0,0,0,0.51)] shadow-lg ml-4 mr-2 p-1 absolute right-0 ">
|
||||
<div className=" bg-[rgba(0,0,0,0.51)] shadow-lg h-full top-0 absolute right-0 ">
|
||||
{/* 标题栏 */}
|
||||
<div className="flex justify-between items-center mb-6 border-b-3 border-white">
|
||||
<h2 className="text-white text-3xl font-bold ml-6 mt-2 mb-2">烽火要闻</h2>
|
||||
|
|
@ -71,7 +71,7 @@ export function FireNewsList() {
|
|||
{/* 文章列表 */}
|
||||
<div className="space-y-1 h-200 overflow-hidden hover:overflow-auto scroll-container">
|
||||
{articles.map((article, index) => (
|
||||
<div key={index} className="flex items-center space-x-3 pb-4">
|
||||
<div key={index} className="flex items-center space-x-3 pb-1">
|
||||
{/* 左侧竖线和日期 */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-1 h-13 bg-white ml-3"></div>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@ import { CarouselDemo } from "@/components/Carousel";
|
|||
import {FireNewsList} from "./FireNewsList";
|
||||
|
||||
|
||||
export function FhrxPage() {
|
||||
export function Hotline() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center h-148 mb-10">
|
||||
<div className="relative">
|
||||
<div className=" w-5/6 overflow-hidden flex justify-center h-148 mb-10 mx-auto">
|
||||
<div className="relative left-0 top-0 w-full h-full">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200 absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<div className="w-full absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className='w-200 bg-white h-full'></div>
|
||||
<div className='top-0 right-0 bg-white h-full'></div>
|
||||
</div>
|
||||
|
||||
<div className="w-120 h-full bg-white relative">
|
||||
|
|
@ -1,16 +1,17 @@
|
|||
import { CarouselDemo } from "@/components/Carousel";
|
||||
import {FireNewsList} from "./FireNewsList";
|
||||
import { CarouselPreset } from "@/components/untils/CarouselPreset";
|
||||
|
||||
export function FhywPage() {
|
||||
export function ImportantNews() {
|
||||
return(
|
||||
<div className="relative w-350 h-225 mx-auto overflow-hidden bg-sky-700">
|
||||
<div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
|
||||
{/* 轮播背景图 - 确保有明确尺寸 */}
|
||||
<div className="absolute top-0 left-0 w-full h-full">
|
||||
<div className="absolute top-0 left-0 w-full h-225">
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
|
||||
{/* 固定的烽火要闻 */}
|
||||
<div className="absolute top-0 right-0 w-1/3 h-200 p-1">
|
||||
<div className="absolute top-0 right-0 w-1/3 h-225 p-1">
|
||||
<FireNewsList />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,15 +2,15 @@ import { CarouselDemo } from "@/components/Carousel";
|
|||
import {FireNewsList} from "./FireNewsList";
|
||||
|
||||
|
||||
export function FhjtPage() {
|
||||
export function LectureHall() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center h-148 mb-10">
|
||||
<div className="relative">
|
||||
<div className="w-5/6 overflow-hidden flex justify-center h-148 mb-10 mx-auto">
|
||||
<div className="relative left-0 top-0 w-full h-full">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200 absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<div className="w-full absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className='w-200 bg-white h-full'></div>
|
||||
<div className='top-0 right-0 bg-white h-full'></div>
|
||||
</div>
|
||||
<div className="w-120 h-full bg-white relative">
|
||||
{/* 标题部分 */}
|
||||
|
|
@ -2,9 +2,9 @@ import { CarouselDemo } from "@/components/Carousel";
|
|||
import {FireNewsList} from "./FireNewsList";
|
||||
|
||||
|
||||
export function FhwsPage() {
|
||||
export function MicroVision() {
|
||||
return(
|
||||
<div className=" w-full overflow-hidden flex justify-center h-148 mb-10">
|
||||
<div className=" w-5/6 overflow-hidden flex justify-center h-148 mb-10 mx-auto">
|
||||
<div className="w-120 h-full bg-white relative" >
|
||||
{/* 标题部分 */}
|
||||
<div className="relative pt-6 pl-8">
|
||||
|
|
@ -28,12 +28,12 @@ export function FhwsPage() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<div className="relative w-full h-full">
|
||||
{/* 轮播背景图 */}
|
||||
<div className="w-200 absolute" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
|
||||
<div className="w-full absolute" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<div className='w-200 bg-white h-full'></div>
|
||||
<div className='w-full bg-white h-full'></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -5,9 +5,9 @@ import List from '@/components/news/list/List';
|
|||
|
||||
export default function GrassrootsDynamics() {
|
||||
return (
|
||||
<div className="flex rounded-2xl mx-auto w-4/5 h-140 pt-20 mb-20 ">
|
||||
<div className="w-2/5 p-6 flex flex-col items-center justify-center relative">
|
||||
<div className="w-140 ">
|
||||
<div className="flex rounded-2xl mx-auto w-5/6 h-140 pt-20 mb-20 ">
|
||||
<div className="w-full flex items-center justify-center relative">
|
||||
<div className="w-full ">
|
||||
<img
|
||||
src="/images/carousel-1.jpg"
|
||||
alt="基层动态"
|
||||
|
|
@ -17,7 +17,7 @@ export default function GrassrootsDynamics() {
|
|||
</div>
|
||||
|
||||
{/* 右边列表 */}
|
||||
<div className="w-3/5 p-6 flex flex-col bg-[#0e93df] rounded-2xl h-130
|
||||
<div className="w-full p-6 flex flex-col bg-[#0e93df] rounded-2xl h-130
|
||||
">
|
||||
<List />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@ const LearnPage = () => {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="w-4/5 mx-auto px-4 py-6 mt-20 mb-20">
|
||||
<div>
|
||||
<div className="w-5/6 mx-auto ">
|
||||
{/* 顶部 Logo */}
|
||||
<div className="flex justify-start mb-4">
|
||||
<h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
|
||||
|
|
@ -69,7 +70,7 @@ const LearnPage = () => {
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[1514px] h-[285px] flex relative">
|
||||
<div className="w-[1590px] h-[285px] flex relative mb-10">
|
||||
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||||
<div
|
||||
className="w-[169px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center"
|
||||
|
|
@ -84,9 +85,9 @@ const LearnPage = () => {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[700px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||||
<div className="w-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
||||
<div
|
||||
className="w-[140px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
|
||||
className="w-[169px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
|
||||
style={{ backgroundImage: "url('/public/images/book2.png')"}}
|
||||
></div>
|
||||
{/* 右边容器内容 */}
|
||||
|
|
@ -96,6 +97,13 @@ const LearnPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<div className='w-4/5 bg-[#0082e9] h-20'
|
||||
style={{clipPath: 'polygon(0 0, calc(100% - 150px) 0%, calc(100% - 20px) 100%, 0% 100%)'}}
|
||||
></div>
|
||||
<div className='items-center justify-center flex font-bold text-sky-900 text-5xl'>烽火动态</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
export function Footer() {
|
||||
return (
|
||||
<div className='w-full h-190 bg-[#0082e9] flex items-center justify-center'
|
||||
style={{backgroundImage: "url('/public/images/carousel-4.jpg')"}}
|
||||
>
|
||||
<div className='text-white text-2xl'>
|
||||
春风拂面花开满园心情愉悦
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@ export function TopNav({
|
|||
|
||||
return (
|
||||
// 将组件宽度调整为1514px，并保持居中
|
||||
<div className="h-20 w-[1514px] mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]">
|
||||
<div className="h-20 w-5/6 mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]">
|
||||
{/* 搜索框与导航菜单组合 */}
|
||||
<div className="flex items-center justify-start w-full gap-5">
|
||||
{/* 搜索框 */}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const NewsList: React.FC = () => {
|
|||
const educationNews = mockNewsData.filter((news) => news.type === "教育");
|
||||
|
||||
return (
|
||||
<div className=" p-8 rounded-2xl w-4/5 mx-auto">
|
||||
<div className=" p-18 rounded-2xl w-10/11 mx-auto">
|
||||
{/* 使用 Flexbox 将两个列表放在一行 */}
|
||||
<div className="flex gap-8">
|
||||
{/* 科技新闻 */}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
import * as React from "react"
|
||||
import Autoplay from "embla-carousel-autoplay"
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
type CarouselApi,
|
||||
} from "@/ui/carousel"
|
||||
import { CardContent } from "@/ui/card"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type Slide = {
|
||||
key?: React.Key
|
||||
content: React.ReactNode
|
||||
}
|
||||
|
||||
type CarouselPresetProps = {
|
||||
slides: Slide[]
|
||||
autoplayDelay?: number
|
||||
showControls?: boolean
|
||||
showIndicators?: boolean
|
||||
indicatorVariant?: "dot" | "pill"
|
||||
className?: string
|
||||
contentClassName?: string
|
||||
itemClassName?: string
|
||||
}
|
||||
|
||||
export function CarouselPreset({
|
||||
slides,
|
||||
autoplayDelay = 3000,
|
||||
showControls = true,
|
||||
showIndicators = true,
|
||||
indicatorVariant = "dot",
|
||||
className,
|
||||
contentClassName,
|
||||
itemClassName,
|
||||
}: CarouselPresetProps) {
|
||||
const [api, setApi] = React.useState<CarouselApi>()
|
||||
const [current, setCurrent] = React.useState(0)
|
||||
const [count, setCount] = React.useState(0)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) return
|
||||
setCount(api.scrollSnapList().length)
|
||||
setCurrent(api.selectedScrollSnap())
|
||||
api.on("select", () => setCurrent(api.selectedScrollSnap()))
|
||||
}, [api])
|
||||
|
||||
return (
|
||||
<div className={cn("relative w-full h-full", className)}>
|
||||
<Carousel
|
||||
opts={{ loop: true }}
|
||||
plugins={[Autoplay({ delay: autoplayDelay, stopOnInteraction: false })]}
|
||||
setApi={setApi}
|
||||
className="w-full h-full"
|
||||
>
|
||||
<CarouselContent className={cn("h-full w-full -ml-0", contentClassName)}>
|
||||
{slides.map((slide, index) => (
|
||||
<CarouselItem
|
||||
key={slide.key ?? index}
|
||||
className={cn("w-full h-full pl-0", itemClassName)}
|
||||
>
|
||||
<CardContent className="p-0 w-full h-full m-0">{slide.content}</CardContent>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
|
||||
{showControls && (
|
||||
<>
|
||||
<CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-10" />
|
||||
<CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-10" />
|
||||
</>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
{showIndicators && (
|
||||
<div className="absolute bottom-4 right-4 flex gap-2 z-10">
|
||||
{Array.from({ length: count }).map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => api?.scrollTo(index)}
|
||||
className={cn(
|
||||
"transition-colors bg-white/50 hover:bg-white",
|
||||
indicatorVariant === "dot" ? "h-2 w-2 rounded-full" : "h-2 w-8 rounded",
|
||||
index === current && "bg-white"
|
||||
)}
|
||||
aria-label={`第 ${index + 1} 张`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -7,13 +7,12 @@ import {TopNav} from "@/components/news/header/TopNav";
|
|||
import NewsList from "@/components/news/list/NewsList";
|
||||
import ImageGridSection from "@/components/news/body/ImageGridSection";
|
||||
import GrassrootsDynamics from "@/components/news/body/GrassrootsDynamics";
|
||||
import { FhywPage } from "@/components/news/body/FireNews/fhyw";
|
||||
import { FhjtPage } from "@/components/news/body/FireNews/fhjt";
|
||||
import { FhwsPage } from "@/components/news/body/FireNews/fhws";
|
||||
import { FhrxPage } from "@/components/news/body/FireNews/fhrx";
|
||||
import { ImportantNews } from "@/components/news/body/FireNews/ImportantNews";
|
||||
import { LectureHall } from "@/components/news/body/FireNews/LectureHall";
|
||||
import { MicroVision } from "@/components/news/body/FireNews/MicroVision";
|
||||
import { Hotline } from "@/components/news/body/FireNews/Hotline";
|
||||
import { AutoCarouselDemo } from "@/components/AutoCarousel";
|
||||
import { Carousel } from "@/ui/carousel";
|
||||
import { CarouselDemo } from "@/components/Carousel";
|
||||
import { Footer } from "@/components/news/footer/footer";
|
||||
|
||||
export function meta( ) {
|
||||
return [
|
||||
|
|
@ -28,21 +27,22 @@ export default function Home() {
|
|||
<div>
|
||||
<Header />
|
||||
<TopNav />
|
||||
<FhywPage />
|
||||
<ImportantNews />
|
||||
<NewsList />
|
||||
<ImageGridSection />
|
||||
<div
|
||||
style={{backgroundImage: "url('/public/images/jcdt.png')"}}
|
||||
>
|
||||
<GrassrootsDynamics />
|
||||
<FhjtPage/>
|
||||
<FhwsPage/>
|
||||
<FhrxPage />
|
||||
<LectureHall />
|
||||
<MicroVision />
|
||||
<Hotline />
|
||||
<AutoCarouselDemo />
|
||||
<CultureBgPage />
|
||||
<Integrated />
|
||||
<CarouselDemo />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue