103 lines
3.9 KiB
TypeScript
103 lines
3.9 KiB
TypeScript
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; |