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

1

This commit is contained in:
Li1304553726 2025-11-19 22:03:10 +08:00
parent 8f5c092d06
commit f1cb856d66
8 changed files with 33 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"; import {FireNewsList} from "./FireNewsList";
export function FhrxPage() { export function Hotline() {
return( 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="relative"> <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 /> <CarouselDemo />
</div> </div>
<div className='w-200 bg-white h-full'></div> <div className='top-0 right-0 bg-white h-full'></div>
</div> </div>
<div className="w-120 h-full bg-white relative"> <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

@ -1,7 +1,7 @@
import { CarouselDemo } from "@/components/Carousel"; import { CarouselDemo } from "@/components/Carousel";
import {FireNewsList} from "./FireNewsList"; import {FireNewsList} from "./FireNewsList";
export function FhywPage() { export function ImportantNews() {
return( return(
<div className="relative w-5/6 h-225 mx-auto overflow-hidden "> <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"; import {FireNewsList} from "./FireNewsList";
export function FhjtPage() { export function LectureHall() {
return( 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="relative"> <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 /> <CarouselDemo />
</div> </div>
<div className='w-200 bg-white h-full'></div> <div className='top-0 right-0 bg-white h-full'></div>
</div> </div>
<div className="w-120 h-full bg-white relative"> <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"; import {FireNewsList} from "./FireNewsList";
export function FhwsPage() { export function MicroVision() {
return( 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="w-120 h-full bg-white relative" >
{/* 标题部分 */} {/* 标题部分 */}
<div className="relative pt-6 pl-8"> <div className="relative pt-6 pl-8">
@ -28,12 +28,12 @@ export function FhwsPage() {
</div> </div>
</div> </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 /> <CarouselDemo />
</div> </div>
<div className='w-200 bg-white h-full'></div> <div className='w-full bg-white h-full'></div>
</div> </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() { export default function GrassrootsDynamics() {
return ( return (
<div className="flex rounded-2xl mx-auto w-4/5 h-140 pt-20 mb-20 "> <div className="flex rounded-2xl mx-auto w-5/6 h-140 pt-20 mb-20 ">
<div className="w-2/5 p-6 flex flex-col items-center justify-center relative"> <div className="w-full flex items-center justify-center relative">
<div className="w-140 "> <div className="w-full ">
<img <img
src="/images/carousel-1.jpg" src="/images/carousel-1.jpg"
alt="基层动态" alt="基层动态"
@ -17,7 +17,7 @@ export default function GrassrootsDynamics() {
</div> </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 /> <List />
</div> </div>

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

@ -15,7 +15,7 @@ const LearnPage = () => {
]; ];
return ( return (
<div className="w-4/5 mx-auto px-4 py-6"> <div className="w-5/6 mx-auto px-4 py-6">
{/* 顶部 Logo */} {/* 顶部 Logo */}
<div className="flex justify-start mb-4"> <div className="flex justify-start mb-4">
<h1 className="text-3xl font-bold text-red-600">学习进行时</h1> <h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
@ -69,7 +69,7 @@ const LearnPage = () => {
</ul> </ul>
</div> </div>
</div> </div>
<div className="w-[1514px] h-[285px] flex relative"> <div className="w-[1560px] h-[285px] flex relative">
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}> <div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
<div <div
className="w-[169px] 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"
@ -84,9 +84,9 @@ const LearnPage = () => {
</p> </p>
</div> </div>
</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 <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')"}} style={{ backgroundImage: "url('/public/images/book2.png')"}}
></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 === "教育"); const educationNews = mockNewsData.filter((news) => news.type === "教育");
return ( return (
<div className=" p-18 rounded-2xl w-4/5 mx-auto"> <div className=" p-18 rounded-2xl w-10/11 mx-auto">
{/* 使用 Flexbox 将两个列表放在一行 */} {/* 使用 Flexbox 将两个列表放在一行 */}
<div className="flex gap-8"> <div className="flex gap-8">
{/* 科技新闻 */} {/* 科技新闻 */}

16
app/routes/news.tsx
View File

@ -7,10 +7,10 @@ import {TopNav} from "@/components/news/header/TopNav";
import NewsList from "@/components/news/list/NewsList"; import NewsList from "@/components/news/list/NewsList";
import ImageGridSection from "@/components/news/body/ImageGridSection"; import ImageGridSection from "@/components/news/body/ImageGridSection";
import GrassrootsDynamics from "@/components/news/body/GrassrootsDynamics"; import GrassrootsDynamics from "@/components/news/body/GrassrootsDynamics";
import { FhywPage } from "@/components/news/body/FireNews/fhyw"; import { ImportantNews } from "@/components/news/body/FireNews/ImportantNews";
import { FhjtPage } from "@/components/news/body/FireNews/fhjt"; import { LectureHall } from "@/components/news/body/FireNews/LectureHall";
import { FhwsPage } from "@/components/news/body/FireNews/fhws"; import { MicroVision } from "@/components/news/body/FireNews/MicroVision";
import { FhrxPage } from "@/components/news/body/FireNews/fhrx"; import { Hotline } from "@/components/news/body/FireNews/Hotline";
import { AutoCarouselDemo } from "@/components/AutoCarousel"; import { AutoCarouselDemo } from "@/components/AutoCarousel";
export function meta( ) { export function meta( ) {
@ -26,16 +26,16 @@ export default function Home() {
<div> <div>
<Header /> <Header />
<TopNav /> <TopNav />
<FhywPage /> <ImportantNews />
<NewsList /> <NewsList />
<ImageGridSection /> <ImageGridSection />
<div <div
style={{backgroundImage: "url('/public/images/jcdt.png')"}} style={{backgroundImage: "url('/public/images/jcdt.png')"}}
> >
<GrassrootsDynamics /> <GrassrootsDynamics />
<FhjtPage/> <LectureHall />
<FhwsPage/> <MicroVision />
<FhrxPage /> <Hotline />
<AutoCarouselDemo /> <AutoCarouselDemo />
<CultureBgPage /> <CultureBgPage />
<Integrated /> <Integrated />