109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
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 = [
|
||
'新闻标题一：重要政策发布',
|
||
'新闻标题二：经济数据稳步回升',
|
||
'新闻标题三：科技创新成果显著',
|
||
'新闻标题四：民生工程持续推进',
|
||
'新闻标题五：国际交流合作深化'
|
||
];
|
||
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',
|
||
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 // 占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
|
||
// 背景色、圆角、阴影、内边距 防撑大
|
||
)}
|
||
</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; |