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-20 09:58:22 +08:00
parent 4d1105d1db c8f3bfc74d
commit 7c0f74ab4f
10 changed files with 165 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/AutoCarousel.tsx
View File

@ -6,7 +6,7 @@ import {
Carousel,
CarouselContent,
CarouselItem,
} from "@/ui/carousel"; // 注意这里也移除了未使用的导入
} from "@/ui/carousel";
const imageUrls = [
"/images/carousel-1.jpg",
@ -22,7 +22,7 @@ const imageUrls = [
export function AutoCarouselDemo() {
return (
<div className="relative w-full mx-auto">
<div className="relative w-full mx-auto mt-30 mb-20">
<Carousel
@ -51,7 +51,7 @@ export function AutoCarouselDemo() {
transition: 'all 0.5s ease',
}}
>
<div className="overflow-hidden border-none shadow-lg h-120">
<div className="overflow-hidden border-none h-120">
<CardContent className="relative w-full h-full">
<img
src={src}

116
app/components/Carousel.tsx
View File

@ -1,16 +1,23 @@
// 引入 React 核心库
import * as React from "react";
// 引入 Embla Carousel 的自动播放插件
import Autoplay from "embla-carousel-autoplay";
// 引入自定义 UI 组件：Card 和 CardContent（通常用于内容容器）
import { Card, CardContent } from "@/ui/card";
// 引入自定义轮播组件及其子组件和类型定义
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
type CarouselApi,
type CarouselApi, // Embla 轮播实例的类型定义
} from "@/ui/carousel";
// 定义轮播图使用的图片资源路径数组
const imageUrls = [
"/images/carousel-1.jpg",
"/images/carousel-2.jpg",
@ -20,69 +27,122 @@ const imageUrls = [
"/images/carousel-6.jpg",
];
export function CarouselDemo() {
// 定义组件接收的 props 接口，提供类型安全
export interface CarouselDemoProps {
// 分页指示器位置：'left' 表示左下角，'right' 表示右下角，默认为 'right'
paginationPosition?: 'left' | 'right';
// 分页指示器样式：'dot' 为圆形小点，'bar' 为横向小条，默认为 'dot'
paginationStyle?: 'dot' | 'bar';
}
// 导出 CarouselDemo 组件，接收两个可选 props，并设置默认值
export function CarouselDemo({
paginationPosition = 'right', // 默认右下角
paginationStyle = 'dot', // 默认圆形指示器
}: CarouselDemoProps) {
// 存储 Embla 轮播实例的引用，用于控制滚动等操作
const [api, setApi] = React.useState<CarouselApi>();
// 当前激活的幻灯片索引（从 0 开始）
const [current, setCurrent] = React.useState(0);
// 总共的幻灯片数量（由 Embla API 动态获取）
const [count, setCount] = React.useState(0);
// 图片总数（用于渲染轮播项）
const totalSlides = imageUrls.length;
const [isDotPagination, setIsDotPagination] = React.useState(true); // 控制分页指示器类型
// 副作用：监听 api 变化，初始化轮播状态并绑定 select 事件
React.useEffect(() => {
if (!api) return;
if (!api) return; // 如果 api 尚未就绪，直接返回
// 获取所有 snap 点的数量（即幻灯片总数）
setCount(api.scrollSnapList().length);
// 设置当前选中的 snap 索引
setCurrent(api.selectedScrollSnap());
// 监听轮播切换事件（用户手动滑动或自动播放时触发）
api.on("select", () => {
setCurrent(api.selectedScrollSnap());
setCurrent(api.selectedScrollSnap()); // 更新当前激活项
});
}, [api]);
}, [api]); // 仅当 api 发生变化时重新执行
// 渲染组件
return (
// 外层容器：相对定位，占满父容器宽高
<div className="relative w-full h-full">
{/* 轮播主容器 */}
<Carousel
opts={{ loop: true }}
opts={{
loop: true, // 启用循环播放（最后一张后回到第一张）
}}
plugins={[
// 配置自动播放插件：每 3 秒切换一次，且用户交互时不暂停
Autoplay({
delay: 3000,
stopOnInteraction: false,
}),
]}
setApi={setApi}
className="w-full h-full"
setApi={setApi} // 将 Embla 实例保存到 state 中
className="w-full h-full" // 占满容器
>
{/* 轮播内容区域 */}
<CarouselContent className="h-full w-full -ml-0">
{Array.from({ length: totalSlides }).map((_, index) => (
<CarouselItem key={index} className="w-full h-full pl-0">
{/* 遍历图片数组，为每张图创建一个轮播项 */}
{imageUrls.map((src, index) => (
<CarouselItem
key={index}
className="w-full h-full pl-0" // 移除默认内边距
>
{/* 内部包裹层：无内边距，占满 */}
<div className="p-0 w-full h-full">
<CardContent className="flex aspect-square items-center justify-center p-0 w-full h-full m-0">
<div
className="w-full h-full"
style={{
backgroundImage: "url('/public/images/header.png')",//背景图片可修改
backgroundSize: '100% 100%',
}}
>
</div>
{/* 使用 CardContent 包裹图片，移除默认间距 */}
<CardContent className="flex items-center justify-center p-0 w-full h-full m-0">
{/* 图片元素：自动填充容器，保持比例裁剪 */}
<img
src={src}
alt={`Slide ${index + 1}`} // 无障碍访问描述
className="w-full h-full object-fill" // 关键：使图片覆盖整个区域
loading="lazy" // 懒加载优化性能
/>
</CardContent>
</div>
</CarouselItem>
))}
</CarouselContent>
<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" />
{/* 上一张按钮（左箭头） */}
{/* <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>
{/* 分页指示器 - 右下角 */}
<div className="absolute bottom-4 right-4 flex gap-2 z-10">
{/* 分页指示器容器：绝对定位在底部 */}
<div
className={`absolute bottom-4 ${
paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
} flex gap-2 z-10`} // 水平排列，间距 0.5rem，置于轮播图上方
>
{/* 动态生成指示器按钮 */}
{Array.from({ length: count }).map((_, index) => (
<button
key={index}
onClick={() => api?.scrollTo(index)}
onClick={() => api?.scrollTo(index)} // 点击跳转到对应幻灯片
className={`transition-colors ${
isDotPagination ? "h-2 w-2 rounded-full" : "h-2 w-8 rounded"
} ${index === current ? "bg-white" : "bg-white/50"}`}
aria-label={`Go to slide ${index + 1}`}
// 根据 paginationStyle 决定形状
paginationStyle === 'dot'
? 'h-2 w-2 rounded-full' // 圆形：宽高相等 + 全圆角
: 'h-2 w-8 rounded' // 块状：宽 2rem，高 0.5rem，带圆角
} ${
index === current
? 'bg-white' // 当前项为纯白色
: 'bg-white/50' // 非当前项为半透明白色
}`}
aria-label={`Go to slide ${index + 1}`} // 无障碍支持
/>
))}
</div>

7
app/components/news/body/FireNews/Hotline.tsx
View File

@ -7,8 +7,11 @@ export function Hotline() {
<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-full absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
<CarouselDemo />
<div className="w-full h-full absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
<CarouselDemo
paginationPosition="left"
paginationStyle="dot"
/>
</div>
<div className='top-0 right-0 bg-white h-full'></div>
</div>

7
app/components/news/body/FireNews/ImportantNews.tsx
View File

@ -33,8 +33,11 @@ export function ImportantNews() {
return(
<div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
{/* 轮播背景图 - 确保有明确尺寸 */}
<div className="absolute top-0 left-0 w-full h-225">
<CarouselPreset slides={slides} showControls={false} autoplayDelay={2000}/>
<div className="absolute top-0 left-0 w-full h-full">
<CarouselDemo
paginationPosition="left"
paginationStyle="dot"
/>
</div>
{/* 固定的烽火要闻 */}

7
app/components/news/body/FireNews/LectureHall.tsx
View File

@ -7,8 +7,11 @@ export function LectureHall() {
<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-full absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
<CarouselDemo />
<div className="w-full h-full absolute" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
<CarouselDemo
paginationPosition="left"
paginationStyle="dot"
/>
</div>
<div className='top-0 right-0 bg-white h-full'></div>
</div>

7
app/components/news/body/FireNews/MicroVision.tsx
View File

@ -30,8 +30,11 @@ export function MicroVision() {
</div>
<div className="relative w-full h-full">
{/* 轮播背景图 */}
<div className="w-full absolute" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
<CarouselDemo />
<div className="w-full h-full absolute" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
<CarouselDemo
paginationPosition="right"
paginationStyle="dot"
/>
</div>
<div className='w-full bg-white h-full'></div>
</div>

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

@ -38,7 +38,10 @@ const LearnPage = () => {
{/* 上右：轮播图 */}
<div className="col-span-2 row-span-1 rounded-lg shadow-sm overflow-hidden">
<CarouselDemo />
<CarouselDemo
paginationPosition="right"
paginationStyle="bar"
/>
</div>
{/* 下三图 */}
@ -98,7 +101,7 @@ const LearnPage = () => {
</div>
</div>
<div className='flex'>
<div className='w-5/6 bg-[#0082e9] h-20'
<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>

54
app/components/news/footer/footer.tsx
View File

@ -1,11 +1,51 @@
export function Footer() {
import React from 'react';
const Footer: React.FC = () => {
return (
<div className='w-full h-190 bg-[#0082e9] flex items-center justify-center'
style={{backgroundImage: "url('/public/images/carousel-4.jpg')"}}
<div
className=" flex flex-col items-center justify-center relative bottom-0 overflow-y-auto overflow-x-auto left-1/2 transform -translate-x-1/2 w-[1920px] h-[758px] bg-cover bg-center"
style={{ backgroundImage: `url('/images/footer.png')` }}
>
<div className='text-white text-2xl'>
春风拂面花开满园心情愉悦
{/* 主标题 */}
<div className="mb-8 mt-15">
<p className=" tracking-widest text-4xl text-white" >
春风拂面花开满园心OO情愉悦
</p>
</div>
{/* 版权声明 */}
<div className="mb-8 text-center space-y-2 ">
<p className="text-sm opacity-80 text-[#818da3]">
免责声明：免责条款的提出必须是明示的，不允许以默示方式作出，也不允许法官推定免责条款的存在。
</p>
<p className="text-sm opacity-80 mt-5 text-[#818da3]">
版权所有：Copyright©2016-2019 包图网ibaotu.com 版权所有
</p>
</div>
{/* 导航链接 */}
<div className="flex space-x-12 mt-5">
<a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
首页
</a>
<a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
关于我们
</a>
<a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
新闻中心
</a>
<a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
政务公开
</a>
<a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]" >
交流互动
</a>
<a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
便民服务
</a>
</div>
</div>
)
}
);
};
export default Footer;

3
app/routes/news.tsx
View File

@ -12,7 +12,8 @@ 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";
import Footer from "@/components/news/footer/footer";
import { CarouselDemo } from "@/components/Carousel";
export function meta( ) {
return [

BIN
public/images/footer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB