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-19 22:28:43 +08:00
parent 986b645df1 33d1bd55d4
commit 6bc02c930f
9 changed files with 54 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/news/body/FireNews/fhrx.tsx → app/components/news/body/FireNews/Hotline.tsx
View File

@ -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">

2
app/components/news/body/FireNews/fhyw.tsx → app/components/news/body/FireNews/ImportantNews.tsx
View File

@ -2,7 +2,7 @@ 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-5/6 h-225 mx-auto overflow-hidden ">
{/* 轮播背景图 - 确保有明确尺寸 */}

10
app/components/news/body/FireNews/fhjt.tsx → app/components/news/body/FireNews/LectureHall.tsx
View File

@ -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">
{/* 标题部分 */}

10
app/components/news/body/FireNews/fhws.tsx → app/components/news/body/FireNews/MicroVision.tsx
View File

@ -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>
)

8
app/components/news/body/GrassrootsDynamics.tsx
View File

@ -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>

16
app/components/news/body/ImageGridSection.tsx
View File

@ -15,7 +15,8 @@ const LearnPage = () => {
];
return (
<div className="w-4/5 mx-auto px-4 py-6">
<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-5/6 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>
);
};

11
app/components/news/footer/footer.tsx Normal file
View File

@ -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>
)
}

2
app/components/news/list/NewsList.tsx
View File

@ -28,7 +28,7 @@ const NewsList: React.FC = () => {
const educationNews = mockNewsData.filter((news) => news.type === "教育");
return (
<div className=" p-18 rounded-2xl w-4/5 mx-auto">
<div className=" p-18 rounded-2xl w-10/11 mx-auto">
{/* 使用 Flexbox 将两个列表放在一行 */}
<div className="flex gap-8">
{/* 科技新闻 */}

18
app/routes/news.tsx
View File

@ -7,11 +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 { Footer } from "@/components/news/footer/footer";
export function meta( ) {
return [
@ -26,20 +27,21 @@ 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 />
</div>
<Footer />
</div>
);
}