Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news
This commit is contained in:
commit
e0d60feb08
|
|
@ -23,19 +23,19 @@ const imageUrls = [
|
|||
export function AutoCarouselDemo() {
|
||||
return (
|
||||
<div className="relative w-full mx-auto overflow-hidden">
|
||||
{/* 左右渐隐遮罩 */}
|
||||
{/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
|
||||
<div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
|
||||
<div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
|
||||
|
||||
{/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
|
||||
<Carousel
|
||||
opts={{
|
||||
loop: true,
|
||||
loop: true,//循环
|
||||
align: "start",
|
||||
}}
|
||||
plugins={[
|
||||
Autoplay({
|
||||
delay: 3000,
|
||||
stopOnInteraction: false,
|
||||
delay: 3000, // 自动播放
|
||||
stopOnInteraction: false,//不因为鼠标交互停止
|
||||
}),
|
||||
]}
|
||||
className="w-full"
|
||||
|
|
@ -46,7 +46,11 @@ export function AutoCarouselDemo() {
|
|||
key={index}
|
||||
className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
|
||||
>
|
||||
{/* 悬停放大容器 */}
|
||||
{/* 基宽 中屏 大屏 防止收缩 相对定位
|
||||
内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
|
||||
隐藏溢出 移除边框 中等阴影
|
||||
弹性布局 正方形 垂直居中 水平居中 内边距0 相对
|
||||
*/}
|
||||
<div
|
||||
className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
// src/components/CarouselDemo.tsx
|
||||
import * as React from "react";
|
||||
import Autoplay from "embla-carousel-autoplay";
|
||||
import Autoplay from "embla-carousel-autoplay";//实现轮播图的自动播放功能
|
||||
|
||||
import { Card, CardContent } from "@/ui/card";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
Carousel,//主体
|
||||
CarouselContent,//内容容器
|
||||
CarouselItem,//单个轮播项
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
type CarouselApi,
|
||||
|
|
@ -24,12 +24,11 @@ export function CarouselDemo() {
|
|||
if (!api) return;
|
||||
|
||||
setCount(api.scrollSnapList().length);
|
||||
setCurrent(api.selectedScrollSnap());
|
||||
|
||||
setCurrent(api.selectedScrollSnap());//获取当前选中的轮播项的索引
|
||||
api.on("select", () => {
|
||||
setCurrent(api.selectedScrollSnap());
|
||||
});
|
||||
}, [api]);
|
||||
}, [api]);//当api改变时，执行此函数 水平居中 循环 自动播放 回传状态
|
||||
|
||||
return (
|
||||
<div className="relative w-full max-w-4xl mx-auto">
|
||||
|
|
@ -54,7 +53,7 @@ export function CarouselDemo() {
|
|||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
backgroundImage: "url('/app/images/header.png')",
|
||||
backgroundImage: "url('/app/images/header.png')",//背景图片可修改
|
||||
backgroundSize: '100% 100%',
|
||||
}}
|
||||
>
|
||||
|
|
@ -78,7 +77,6 @@ export function CarouselDemo() {
|
|||
className={`h-2 w-2 rounded-full transition-colors ${
|
||||
index === current ? "bg-black" : "bg-black/50"
|
||||
}`}
|
||||
aria-label={`Go to slide ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,16 @@
|
|||
import { CarouselDemo } from "@/components/Carousel";
|
||||
const ImageGridSection = () => {
|
||||
// 替换为你自己的图片路径
|
||||
|
||||
const elements = [
|
||||
"/images/carousel-1.jpg",
|
||||
<CarouselDemo />,
|
||||
"/images/carousel-2.jpg",
|
||||
"/images/carousel-3.jpg"
|
||||
];
|
||||
{/* 最外 左右两列间 内边 内容最大宽 水平居 微软雅黑
|
||||
2 列+ 2 行 格子间距 固定宽高
|
||||
*/}
|
||||
|
||||
const listItems = [
|
||||
'新闻标题一：重要政策发布',
|
||||
'新闻标题二：经济数据稳步回升',
|
||||
|
|
@ -23,8 +27,9 @@ const ImageGridSection = () => {
|
|||
margin: '0 auto',
|
||||
fontFamily: 'Microsoft YaHei, sans-serif'
|
||||
}}>
|
||||
|
||||
{/* 左侧：3张图片 + 1个轮播图 2x2 网格 */}
|
||||
|
||||
{/* 左侧：3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满
|
||||
保持比例填充 消除底部空白*/}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
|
|
@ -32,9 +37,9 @@ const ImageGridSection = () => {
|
|||
gap: '16px',
|
||||
width: '600px',
|
||||
height: '450px',
|
||||
border: '1px solid #ddd', // 可选，用于调试边界
|
||||
boxSizing: 'border-box' // 确保padding和border不会增加元素的实际宽度和高度
|
||||
}}>
|
||||
|
||||
{elements.map((element, index) => (
|
||||
<div
|
||||
key={index}
|
||||
|
|
@ -43,7 +48,7 @@ const ImageGridSection = () => {
|
|||
overflow: 'hidden',
|
||||
boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'stretch' // 确保子元素拉伸填充容器
|
||||
alignItems: 'stretch'
|
||||
}}
|
||||
>
|
||||
{typeof element === 'string' ? (
|
||||
|
|
@ -58,7 +63,8 @@ const ImageGridSection = () => {
|
|||
}}
|
||||
/>
|
||||
) : (
|
||||
element // 如果是 React 元素，则直接渲染
|
||||
element // 占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
|
||||
// 背景色、圆角、阴影、内边距 防撑大
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -66,10 +72,10 @@ const ImageGridSection = () => {
|
|||
<div style={{
|
||||
flex: 1,
|
||||
minWidth: '300px',
|
||||
height: '450px', // 设置与左侧相同的高度
|
||||
height: '450px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between', // 垂直方向均匀分布内容
|
||||
justifyContent: 'space-between',
|
||||
background: '#f9f9f9',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
||||
|
|
@ -79,8 +85,8 @@ const ImageGridSection = () => {
|
|||
<ul style={{
|
||||
listStyle: 'none',
|
||||
padding: 0,
|
||||
flexGrow: 1, // 让列表尽可能填满可用空间
|
||||
overflowY: 'auto' // 当内容超出时启用滚动条
|
||||
flexGrow: 1,
|
||||
overflowY: 'auto' // 当 内 容超出时启用滚动条 填满剩余 文间
|
||||
}}>
|
||||
{listItems.map((item, index) => (
|
||||
<li
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export default function Home() {
|
|||
<FhjtPage/>
|
||||
<FhwsPage/>
|
||||
<FhrxPage />
|
||||
<AutoCarouselDemo />
|
||||
<CultureBgPage />
|
||||
<AutoCarouselDemo />
|
||||
<Integrated />
|
||||
|
|
|
|||
Loading…
Reference in New Issue