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:
jinsir 2025-11-18 17:39:15 +08:00
parent 1201c37eaf 90ccecda1d
commit 858176d3dc
11 changed files with 310 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/untils/Carousel.tsx → app/components/Carousel.tsx
View File

@ -1,4 +1,3 @@
// src/components/CarouselDemo.tsx
import * as React from "react";
import Autoplay from "embla-carousel-autoplay";
@ -11,6 +10,7 @@ import {
CarouselPrevious,
type CarouselApi,
} from "@/ui/carousel";
import FireNewsList from "./FireNewsList";
const imageUrls = [
"/images/carousel-1.jpg",

63
app/components/FireNewsList.tsx Normal file
View File

@ -0,0 +1,63 @@
import React from 'react';
interface NewsItem {
content: string;
}
const FireNewsList: React.FC = () => {
const newsItems: NewsItem[] = [
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
{
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
},
];
return (
<div className="bg-gray-200 p-4 rounded-lg">
{/* 标题栏 */}
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-bold text-gray-800">烽火要闻</h2>
<a className="text-blue-600 hover:text-blue-800 font-medium">
查看更多 {'>'}
</a>
</div>
{/* 新闻列表 */}
<div className="space-y-4">
{newsItems.map((item, index) => (
<div
key={index}
className="flex p-3 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow duration-200"
>
{/* 内容部分 */}
<div className="flex-1 min-w-0">
<p className="text-gray-700 text-sm ">
{item.content}
<a
className="text-red-600 ml-1 font-medium hover:text-red-800"
>
[MORE]
</a>
</p>
</div>
</div>
))}
</div>
</div>
);
};
export default FireNewsList;

103
app/components/body/ImageGridSection.tsx Normal file
View File

@ -0,0 +1,103 @@
import { CarouselDemo } from "@/components/Carousel";
const ImageGridSection = () => {
// 替换为你自己的图片路径
const elements = [
"/images/carousel-1.jpg",
<CarouselDemo />,
"/images/carousel-2.jpg",
"/images/carousel-3.jpg"
];
const listItems = [
'新闻标题一：重要政策发布',
'新闻标题二：经济数据稳步回升',
'新闻标题三：科技创新成果显著',
'新闻标题四：民生工程持续推进',
'新闻标题五：国际交流合作深化'
];
return (
<div style={{
display: 'flex',
gap: '24px',
padding: '20px',
maxWidth: '1200px',
margin: '0 auto',
fontFamily: 'Microsoft YaHei, sans-serif'
}}>
{/* 左侧：3张图片 + 1个轮播图 2x2 网格 */}
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gridTemplateRows: '1fr 1fr',
gap: '16px',
width: '600px',
height: '450px',
border: '1px solid #ddd', // 可选，用于调试边界
boxSizing: 'border-box' // 确保padding和border不会增加元素的实际宽度和高度
}}>
{elements.map((element, index) => (
<div
key={index}
style={{
borderRadius: '8px',
overflow: 'hidden',
boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
display: 'flex',
alignItems: 'stretch' // 确保子元素拉伸填充容器
}}
>
{typeof element === 'string' ? (
<img
src={element}
alt={`图片 ${index + 1}`}
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
display: 'block'
}}
/>
) : (
element // 如果是 React 元素，则直接渲染
)}
</div>
))}
</div>
<div style={{
flex: 1,
minWidth: '300px',
height: '450px', // 设置与左侧相同的高度
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between', // 垂直方向均匀分布内容
background: '#f9f9f9',
borderRadius: '8px',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
padding: '16px',
boxSizing: 'border-box'
}}>
<ul style={{
listStyle: 'none',
padding: 0,
flexGrow: 1, // 让列表尽可能填满可用空间
overflowY: 'auto' // 当内容超出时启用滚动条
}}>
{listItems.map((item, index) => (
<li
key={index}
style={{
marginBottom: '12px',
color: '#333',
fontSize: '16px'
}}
>
<span style={{ color: '#c00', marginRight: '8px' }}>•</span>
{item}
</li>
))}
</ul>
</div>
</div>
);
};
export default ImageGridSection;

0
app/components/body/learn.tsx
View File

54
app/components/news/body/Culturebg.tsx Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
export default function CultureBgPage() {
// 定义logo数据
const logos = [
{ id: 1, src: '/public/logo/1.png', alt: 'Logo 1' },
{ id: 2, src: '/public/logo/1.png', alt: 'Logo 2' },
{ id: 3, src: '/public/logo/1.png', alt: 'Logo 3' },
{ id: 4, src: '/public/logo/1.png', alt: 'Logo 4' },
{ id: 5, src: '/public/logo/1.png', alt: 'Logo 5' },
{ id: 6, src: '/public/logo/1.png', alt: 'Logo 6' },
{ id: 7, src: '/public/logo/1.png', alt: 'Logo 7' },
{ id: 8, src: '/public/logo/1.png', alt: 'Logo 8' },
{ id: 9, src: '/public/logo/1.png', alt: 'Logo 9' },
{ id: 10, src: '/public/logo/1.png', alt: 'Logo 10' },
{ id: 11, src: '/public/logo/1.png', alt: 'Logo 11' },
{ id: 12, src: '/public/logo/1.png', alt: 'Logo 12' },
{ id: 13, src: '/public/logo/1.png', alt: 'Logo 13' },
{ id: 14, src: '/public/logo/1.png', alt: 'Logo 14' },
{ id: 15, src: '/public/logo/1.png', alt: 'Logo 15' },
{ id: 16, src: '/public/logo/1.png', alt: 'Logo 16' },
];
return (
<div className="h-[700px] w-[1550px] mx-auto relative ">
<div
className="h-[200px] w-full bg-cover"
style={{
backgroundImage: 'url(/culture.png)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
}}
/>
<div className="h-[500px] w-full absolute top-30 flex items-center justify-center p-8">
<div className="w-full h-full flex items-center justify-center mb-10">
{/* 两行八列：flex + wrap */}
<div className="flex flex-wrap justify-center gap-x-15 gap-y-16">
{logos.map((logo) => (
<img
key={logo.id}
src={logo.src}
alt={logo.alt}
className="w-[130px] h-[130px] rounded-full object-contain hover:scale-[1.85] transition-transform duration-200 cursor-pointer"
style={{ transformOrigin: 'center' }}
/>
))}
</div>
</div>
</div>
</div>
);
}

72
app/components/news/body/Integrated.tsx Normal file
View File

@ -0,0 +1,72 @@
import type { IconType } from 'react-icons';
import {
FaUserGraduate,
FaUserShield,
FaLaptopCode,
FaMicrophoneLines,
FaEnvelopeOpenText,
FaWrench,
FaRegFileLines,
FaSpellCheck,
FaChartPie,
FaGlobe,
FaBookOpenReader,
FaPenRuler,
} from 'react-icons/fa6';
type ServiceItem = {
icon: IconType;
label: string;
href: string;
};
const services: ServiceItem[] = [
{ icon: FaUserGraduate, label: '警队自考', href: '/study' },
{ icon: FaUserShield, label: '警队教育', href: '/scholarship' },
{ icon: FaLaptopCode, label: '常用软件', href: '/software' },
{ icon: FaMicrophoneLines, label: '智能语音', href: '/voice' },
{ icon: FaEnvelopeOpenText, label: '蓝天邮局', href: '/mail' },
{ icon: FaWrench, label: '策划工具', href: '/plan' },
{ icon: FaRegFileLines, label: '办公模板', href: '/office' },
{ icon: FaSpellCheck, label: '智能校对', href: '/ai-check' },
{ icon: FaChartPie, label: '警情调研', href: '/survey' },
{ icon: FaGlobe, label: '上网助手', href: '/net' },
{ icon: FaBookOpenReader, label: '考试平台', href: '/exam' },
{ icon: FaPenRuler, label: '学习平台', href: '/study' },
];
const columns = Array.from({ length: 3 }, (_, colIndex) =>
services.slice(colIndex * 4, colIndex * 4 + 4)
);
export default function Integrated() {
return (
<div className="w-[1514px] h-[573px] mx-auto ">
<div className="w-full h-[488px]">
<div className="w-full h-[82px] flex items-center pt-30 ml-10">
<div className="w-3 h-15 bg-[#005d93] mr-3" />
<h2 className="text-4xl font-bold text-[#005d93]">综合服务</h2>
</div>
<div className="flex gap-45 h-full px-8 py-6 pb-20 pt-15">
{columns.map((group, colIdx) => (
<div key={colIdx} className="flex-1 grid grid-cols-2 gap-x-8 gap-y-6">
{group.map((service) => (
<a
key={service.label}
href={service.href}
className="flex flex-col items-center text-[#0f172a] transition hover:text-[#005d93]"
>
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-[#005d93]/10 text-[#005d93] mb-2">
<service.icon className="w-8 h-8" aria-hidden />
</div>
<span className="text-base font-semibold text-center">{service.label}</span>
</a>
))}
</div>
))}
</div>
</div>
</div>
);
}

6
app/routes/news.tsx
View File

@ -1,5 +1,7 @@
import { CarouselDemo } from "@/components/untils/Carousel";
import { CarouselDemo } from "@/components/Carousel";
import type { Route } from "./+types/news";
import Integrated from "@/components/news/body/Integrated";
import CultureBgPage from "@/components/news/body/Culturebg";
import {Header} from "@/components/header/Header";
import {TopNav} from "@/components/header/TopNav";
import NewsList from "@/components/list/NewsList";
@ -12,13 +14,13 @@ export function meta( ) {
}
export default function Home() {
return (
<div>
<Header />
<TopNav />
<CarouselDemo />
<NewsList />
<GrassrootsDynamics />
</div>
);
}

1
package.json
View File

@ -27,6 +27,7 @@
"lucide-react": "^0.553.0",
"next-themes": "^0.4.6",
"react": "^19.1.1",
"react-icons": "^5.5.0",
"react-dom": "^19.1.1",
"react-router": "^7.9.2",
"shadcn": "^3.5.0",

12
pnpm-lock.yaml
View File

@ -65,6 +65,9 @@ importers:
react-dom:
specifier: ^19.1.1
version: 19.2.0(react@19.2.0)
react-icons:
specifier: ^5.5.0
version: 5.5.0(react@19.2.0)
react-router:
specifier: ^7.9.2
version: 7.9.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@ -2382,6 +2385,11 @@ packages:
peerDependencies:
react: ^19.2.0
react-icons@5.5.0:
resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
peerDependencies:
react: '*'
react-refresh@0.14.2:
resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
engines: {node: '>=0.10.0'}
@ -5082,6 +5090,10 @@ snapshots:
react: 19.2.0
scheduler: 0.27.0
react-icons@5.5.0(react@19.2.0):
dependencies:
react: 19.2.0
react-refresh@0.14.2: {}
react-remove-scroll-bar@2.3.8(@types/react@19.2.6)(react@19.2.0):

BIN
public/culture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/logo/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 MiB