修改imageGridSection右边内容列表跳转功能

This commit is contained in:
Li1304553726 2025-11-20 15:00:19 +08:00
parent b1937c2cfe
commit def56cd861
1 changed files with 55 additions and 13 deletions

View File

@ -1,19 +1,61 @@
import { CarouselDemo } from '@/components/Carousel'; // 导入轮播图组件
import React from 'react';
interface NewsItem {
id:string;
content:string;
url:string;
}
// LearnPage 组件定义
const LearnPage = () => {
// 新闻列表数据,用于显示在右侧新闻列表区
const newsList = [
'中华人民共和国监察法',
'2024年国办印发意见部门工作人员党听全国两...',
'十四届全国人大二次会议闭幕贺词',
'7天人代会"小片段"折射民主"大全景"',
'全国政协十四届二次会议共收到提案5800多件',
'两会观察丨从两会八个高频词看中国',
'两会"清单"上新这些民生发展温度',
'"选择中国"——世界从中国两会读出心动机号',
'中国经济信心说丨新玛合信心从哪里来',
const newsList:NewsItem[] = [
{
id:'1',
content:'中华人民共和国监察法',
url:'https://www.baidu.com',
},
{
id:'2',
content:'2024年国办印发意见部门工作人员党听全国两...',
url:'https://www.baidu.com',
},
{
id:'3',
content:'十四届全国人大二次会议闭幕贺词',
url:'https://www.baidu.com',
},
{
id:'4',
content:'7天人代会"小片段"折射民主"大全景"',
url:'https://www.baidu.com',
},
{
id:'5',
content:'全国政协十四届二次会议共收到提案5800多件',
url:'https://www.baidu.com',
},
{
id:'6',
content:'两会观察丨从两会八个高频词看中国',
url:'https://www.baidu.com',
},
{
id:'7',
content:'两会"清单"上新这些民生发展温度',
url:'https://www.baidu.com',
},
{
id:'8',
content:'"选择中国"——世界从中国两会读出心动机号',
url:'https://www.baidu.com',
},
{
id:'9',
content:'中国经济信心说丨新玛合信心从哪里来',
url:'https://www.baidu.com',
},
];
{/* 弹性 默认纵向 大屏横向 */}
return (
@ -50,10 +92,10 @@ const LearnPage = () => {
{/* 右侧新闻列表占据屏幕剩余2/5的宽度 */}
<div className="lg:w-2/5 bg-white border border-gray-200 shadow-sm p-8 flex items-center">
<ul className="space-y-8 w-full">
{newsList.map((item, index) => (
<li key={index} className="flex items-center text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group">
{newsList.map((item) => (
<li key={item.id} 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>{item}</span>
<span onClick={()=>window.open(item.url, '_blank')}>{item.content}</span>
</li>
))}
</ul>