Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news
This commit is contained in:
commit
4e377d4e8b
|
|
@ -69,7 +69,7 @@ export function FireNewsList() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 文章列表 */}
|
{/* 文章列表 */}
|
||||||
<div className="space-y-1 h-200 overflow-hidden hover:overflow-auto scroll-container">
|
<div className="space-y-5 h-200 overflow-hidden hover:overflow-auto scroll-container">
|
||||||
{articles.map((article, index) => (
|
{articles.map((article, index) => (
|
||||||
<div key={index} className="flex items-center space-x-3 pb-1">
|
<div key={index} className="flex items-center space-x-3 pb-1">
|
||||||
{/* 左侧竖线和日期 */}
|
{/* 左侧竖线和日期 */}
|
||||||
|
|
|
||||||
|
|
@ -16,8 +16,8 @@ export function ImportantNews() {
|
||||||
"/images/carousel-9.jpg",
|
"/images/carousel-9.jpg",
|
||||||
];
|
];
|
||||||
|
|
||||||
// 转换为 slides 格式
|
// 转换为 slides 格式
|
||||||
const slides = carouselImages.map((imageUrl, index) => ({
|
const slides = carouselImages.map((imageUrl, index) => ({
|
||||||
key: `carousel-${index + 1}`,
|
key: `carousel-${index + 1}`,
|
||||||
content: (
|
content: (
|
||||||
<div
|
<div
|
||||||
|
|
@ -31,19 +31,21 @@ export function ImportantNews() {
|
||||||
}));
|
}));
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<div className="relative w-5/6 h-220 mx-auto overflow-hidden ">
|
<div className="relative w-5/6 mx-auto overflow-hidden">
|
||||||
{/* 轮播背景图 - 确保有明确尺寸 */}
|
{/* 轮播背景图 - 使用 aspect-ratio 或固定高度 */}
|
||||||
<div className="absolute top-0 left-0 w-full h-full">
|
<div className="w-full relative" style={{ aspectRatio: '16/9' }}> {/* 或者设置固定高度 */}
|
||||||
<CarouselDemo
|
<div className="absolute top-0 left-0 w-full h-full">
|
||||||
paginationPosition="left"
|
<CarouselDemo
|
||||||
paginationStyle="dot"
|
paginationPosition="left"
|
||||||
/>
|
paginationStyle="dot"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 固定的烽火要闻 */}
|
||||||
|
<div className="absolute top-0 right-0 w-1/3 h-full p-1">
|
||||||
|
<FireNewsList />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 固定的烽火要闻 */}
|
|
||||||
<div className="absolute top-0 right-0 w-1/3 h-220 p-1">
|
|
||||||
<FireNewsList />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -65,11 +65,11 @@ const LearnPage = () => {
|
||||||
{/* 顶部Logo区:使用背景图片方式展示logo,宽70高20 */}
|
{/* 顶部Logo区:使用背景图片方式展示logo,宽70高20 */}
|
||||||
<div className="w-70 h-20 bg-cover bg-no-repeat mb-5" style={{ backgroundImage: "url('images/learn.png')" }}></div>
|
<div className="w-70 h-20 bg-cover bg-no-repeat mb-5" style={{ backgroundImage: "url('images/learn.png')" }}></div>
|
||||||
|
|
||||||
<div className="flex flex-col lg:flex-row ">
|
<div className="flex flex-col lg:flex-row">
|
||||||
{/* 左侧图片区:占据屏幕3/5的宽度 */}
|
{/* 左侧图片区:占据屏幕3/5的宽度 */}
|
||||||
<div className="lg:w-3/5 overflow-hidden">
|
<div className="lg:w-3/5 overflow-hidden">
|
||||||
{/* 使用grid布局来安排图片的位置 */}
|
{/* 使用grid布局来安排图片的位置 */}
|
||||||
<div className="grid grid-cols-3 grid-rows-2 w-full">
|
<div className="grid grid-cols-3 grid-rows-2 w-full">
|
||||||
{/* 上左第一张图 */}
|
{/* 上左第一张图 */}
|
||||||
<div className="row-span-1 col-span-1 shadow-sm overflow-hidden">
|
<div className="row-span-1 col-span-1 shadow-sm overflow-hidden">
|
||||||
<img src="/images/carousel-1.jpg" alt="Image 1" className="w-full h-full object-cover" />
|
<img src="/images/carousel-1.jpg" alt="Image 1" className="w-full h-full object-cover" />
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@ export function TopNav({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// 将组件宽度调整为1514px,并保持居中
|
// 将组件宽度调整为1514px,并保持居中
|
||||||
<div className="h-full w-full mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#1f79bf]">
|
<div className="h-full w-full mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#176cad]">
|
||||||
{/* 搜索框与导航菜单组合 */}
|
{/* 搜索框与导航菜单组合 */}
|
||||||
<div className="flex items-center justify-start gap-30 ml-45 ">
|
<div className="flex items-center justify-start gap-30 ml-45 ">
|
||||||
{/* 导航菜单 */}
|
{/* 导航菜单 */}
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,8 @@ const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
|
||||||
onClick={() => url && window.open(url)} // 点击时打开链接
|
onClick={() => url && window.open(url)} // 点击时打开链接
|
||||||
className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
|
className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
|
||||||
>
|
>
|
||||||
<h3 className="text-lg font-semibold text-gray-600 hover:text-blue-400 transition duration-300 ease-in-out">{title}</h3>
|
<h3 className="text-lg font-semibold text-gray-800 hover:text-blue-400 transition duration-300 ease-in-out">{title}</h3>
|
||||||
<p className="text-sm text-gray-500">{time}</p>
|
<p className="text-sm text-gray-800">{time}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -28,7 +28,7 @@ const NewsList: React.FC = () => {
|
||||||
const educationNews = mockNewsData.filter((news) => news.type === "教育");
|
const educationNews = mockNewsData.filter((news) => news.type === "教育");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className=" p-18 rounded-2xl w-10/11 mx-auto">
|
<div className=" pt-10 pb-10 rounded-2xl w-5/6 mx-auto">
|
||||||
{/* 使用 Flexbox 将两个列表放在一行 */}
|
{/* 使用 Flexbox 将两个列表放在一行 */}
|
||||||
<div className="flex gap-8">
|
<div className="flex gap-8">
|
||||||
{/* 科技新闻 */}
|
{/* 科技新闻 */}
|
||||||
|
|
@ -38,7 +38,7 @@ const NewsList: React.FC = () => {
|
||||||
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
|
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
|
||||||
科技新闻
|
科技新闻
|
||||||
</div>
|
</div>
|
||||||
<button className="text-base text-blue-200 hover:text-blue-400 transition duration-200 pl-6 pr-6">
|
<button className="text-base text-blue-300 hover:text-blue-400 transition duration-200 pl-6 pr-6">
|
||||||
【查看更多】
|
【查看更多】
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -63,7 +63,7 @@ const NewsList: React.FC = () => {
|
||||||
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
|
<div className="bg-[#1c6cab] text-white px-6 py-3 font-bold text-4xl">
|
||||||
教育新闻
|
教育新闻
|
||||||
</div>
|
</div>
|
||||||
<button className="text-base text-blue-200 hover:text-blue-400 transition duration-200 pl-6 pr-6">
|
<button className="text-base text-blue-300 hover:text-blue-400 transition duration-200 pl-6 pr-6">
|
||||||
【查看更多】
|
【查看更多】
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue