This commit is contained in:
qiuchenfan 2025-11-20 10:24:54 +08:00
commit 0812e1110b
4 changed files with 46 additions and 19 deletions

View File

@ -3,6 +3,33 @@ import {FireNewsList} from "./FireNewsList";
import { CarouselPreset } from "@/components/untils/CarouselPreset"; import { CarouselPreset } from "@/components/untils/CarouselPreset";
export function ImportantNews() { export function ImportantNews() {
// 定义所有轮播图片路径
const carouselImages = [
"/images/carousel-1.jpg",
"/images/carousel-2.jpg",
"/images/carousel-3.jpg",
"/images/carousel-4.jpg",
"/images/carousel-5.jpg",
"/images/carousel-6.jpg",
"/images/carousel-7.jpg",
"/images/carousel-8.jpg",
"/images/carousel-9.jpg",
];
// 转换为 slides 格式
const slides = carouselImages.map((imageUrl, index) => ({
key: `carousel-${index + 1}`,
content: (
<div
className="w-full h-full"
style={{
backgroundImage: `url(${imageUrl})`,
backgroundSize: '100% 100%',
}}
/>
),
}));
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 ">
{/* 轮播背景图 - 确保有明确尺寸 */} {/* 轮播背景图 - 确保有明确尺寸 */}

View File

@ -64,10 +64,10 @@ const LearnPage = () => {
{newsList.map((item, index) => ( {newsList.map((item, index) => (
<li <li
key={index} key={index}
className="flex items-start text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group" className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group"
> >
<span className="text-red-500 mr-2 mt-0.5"></span> <span className="text-red-500 mr-2 mt-0.5"></span>
<span className="group-hover:underline">{item}</span> <span >{item}</span>
</li> </li>
))} ))}
</ul> </ul>

View File

@ -8,39 +8,39 @@ const Footer: React.FC = () => {
> >
{/* 主标题 */} {/* 主标题 */}
<div className="mb-8 mt-15"> <div className="mb-8 mt-15">
<p className=" tracking-widest" style={{ fontSize: '32px', color: '#ffffff' }} > <p className=" tracking-widest text-4xl text-white" >
OO情愉悦 OO情愉悦
</p> </p>
</div> </div>
{/* 版权声明 */} {/* 版权声明 */}
<div className="mb-8 text-center space-y-2 "> <div className="mb-8 text-center space-y-2 ">
<p className="text-sm opacity-80" style={{ color: '#818da3' }}> <p className="text-sm opacity-80 text-[#818da3]">
</p> </p>
<p className="text-sm opacity-80 mt-5" style={{ color: '#818da3' }}> <p className="text-sm opacity-80 mt-5 text-[#818da3]">
Copyright©2016-2019 ibaotu.com Copyright©2016-2019 ibaotu.com
</p> </p>
</div> </div>
{/* 导航链接 */} {/* 导航链接 */}
<div className="flex space-x-12 mt-5"> <div className="flex space-x-12 mt-5">
<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}> <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
</a> </a>
<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}> <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
</a> </a>
<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}> <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
</a> </a>
<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}> <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
</a> </a>
<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}> <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]" >
</a> </a>
<a href="#" className="hover:text-blue-300 transition-colors" style={{ color: '#818da3' }}> <a href="#" className="hover:text-blue-300 transition-colors text-[#818da3]">
便 便
</a> </a>
</div> </div>

View File

@ -17,14 +17,14 @@ type Slide = {
} }
type CarouselPresetProps = { type CarouselPresetProps = {
slides: Slide[] slides: Slide[] //传入的轮播项
autoplayDelay?: number autoplayDelay?: number //自动轮播的间隔默认为3000
showControls?: boolean showControls?: boolean //是否显示左右切换按钮
showIndicators?: boolean showIndicators?: boolean //是否显示底部的分页指示器
indicatorVariant?: "dot" | "pill" indicatorVariant?: "dot" | "pill" //分页指示器的样式,默认为"dot"dot圆点pill小胶囊
className?: string className?: string // 作用在最外层容器,用来定制整体尺寸/布局
contentClassName?: string contentClassName?: string //作用在内部的 CarouselContent 容器,可自定义内层排列方式(例如圆角、阴影等)
itemClassName?: string itemClassName?: string //作用在每个 CarouselItem 上,调整单个 slide 的额外样式(比如内边距、宽高)
} }
export function CarouselPreset({ export function CarouselPreset({