Compare commits
2 Commits
c8f3bfc74d
...
7c0f74ab4f
| Author | SHA1 | Date |
|---|---|---|
|
|
7c0f74ab4f | |
|
|
4d1105d1db |
|
|
@ -3,6 +3,33 @@ import {FireNewsList} from "./FireNewsList";
|
|||
import { CarouselPreset } from "@/components/untils/CarouselPreset";
|
||||
|
||||
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(
|
||||
<div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
|
||||
{/* 轮播背景图 - 确保有明确尺寸 */}
|
||||
|
|
|
|||
|
|
@ -17,14 +17,14 @@ type Slide = {
|
|||
}
|
||||
|
||||
type CarouselPresetProps = {
|
||||
slides: Slide[]
|
||||
autoplayDelay?: number
|
||||
showControls?: boolean
|
||||
showIndicators?: boolean
|
||||
indicatorVariant?: "dot" | "pill"
|
||||
className?: string
|
||||
contentClassName?: string
|
||||
itemClassName?: string
|
||||
slides: Slide[] //传入的轮播项
|
||||
autoplayDelay?: number //自动轮播的间隔,默认为3000
|
||||
showControls?: boolean //是否显示左右切换按钮
|
||||
showIndicators?: boolean //是否显示底部的分页指示器
|
||||
indicatorVariant?: "dot" | "pill" //分页指示器的样式,默认为"dot",dot圆点,pill小胶囊
|
||||
className?: string // 作用在最外层容器,用来定制整体尺寸/布局
|
||||
contentClassName?: string //作用在内部的 CarouselContent 容器,可自定义内层排列方式(例如圆角、阴影等)
|
||||
itemClassName?: string //作用在每个 CarouselItem 上,调整单个 slide 的额外样式(比如内边距、宽高)
|
||||
}
|
||||
|
||||
export function CarouselPreset({
|
||||
|
|
|
|||
Loading…
Reference in New Issue