262 lines
8.7 KiB
TypeScript
262 lines
8.7 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import Autoplay from 'embla-carousel-autoplay';
|
|
import {
|
|
Carousel,
|
|
CarouselApi,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from '@repo/ui/components/carousel';
|
|
import CarouselComponent from './CarouselComponent';
|
|
|
|
|
|
const LbbzPage: React.FC = () => {
|
|
// const plugin = useRef(Autoplay({ delay: 1000, stopOnInteraction: true }));
|
|
// const [currentIndex, setCurrentIndex] = useState(0);
|
|
// const [carouselAPI, setCarouselAPI] = useState<CarouselApi | null>(null);
|
|
// 模拟舆情数据
|
|
const mockYuqingData = [
|
|
{ id: 1, title: '开源舆情2025第2期', date: '20250113' },
|
|
{ id: 2, title: '开源舆情2025第1期', date: '20250107' },
|
|
{ id: 3, title: '开源舆情2024第52期', date: '20241220' },
|
|
{ id: 4, title: '开源舆情2024第51期', date: '20241211' },
|
|
{ id: 5, title: '开源舆情2024第50期', date: '20241127' },
|
|
{ id: 6, title: '开源舆情2024第49期', date: '20241116' },
|
|
{ id: 7, title: '开源舆情2024第48期', date: '20241020' },
|
|
{ id: 8, title: '开源舆情2024第47期', date: '20241016' },
|
|
{ id: 9, title: '开源舆情2025第2期', date: '20250113' },
|
|
{ id: 10, title: '开源舆情2025第1期', date: '20250107' },
|
|
{ id: 11, title: '开源舆情2024第52期', date: '20241220' },
|
|
{ id: 12, title: '开源舆情2024第51期', date: '20241211' },
|
|
{ id: 13, title: '开源舆情2024第50期', date: '20241127' },
|
|
{ id: 14, title: '开源舆情2024第49期', date: '20241116' },
|
|
{ id: 15, title: '开源舆情2024第48期', date: '20241020' },
|
|
{ id: 16, title: '开源舆情2024第47期', date: '20241016' },
|
|
];
|
|
const carouselData1= [
|
|
{
|
|
id: 1,
|
|
image: '/header.png',
|
|
title: '军事风云第一期',
|
|
},
|
|
{
|
|
id: 2,
|
|
image: '/book1.png',
|
|
title: '军事风云第二期 ',
|
|
},
|
|
{
|
|
id: 3,
|
|
image: '/book2.png',
|
|
title: '军事风云第三期',
|
|
},
|
|
{
|
|
id: 4,
|
|
image: '/x1.png',
|
|
title: '军事风云第三期',
|
|
},
|
|
{
|
|
id: 5,
|
|
image: '/x2.png',
|
|
title: '军事风云第三期',
|
|
},
|
|
];
|
|
|
|
// // 监听幻灯片变化
|
|
// useEffect(() => {
|
|
// if (!carouselAPI) return;
|
|
|
|
// const updateCurrentIndex = () => {
|
|
// setCurrentIndex(carouselAPI.selectedScrollSnap());
|
|
// };
|
|
|
|
// carouselAPI.on('select', updateCurrentIndex);
|
|
|
|
// return () => {
|
|
// carouselAPI.off('select', updateCurrentIndex);
|
|
// };
|
|
// }, [carouselAPI]);
|
|
|
|
// 滚动到指定索引
|
|
// const scrollToIndex = (index: number) => {
|
|
// if (carouselAPI) {
|
|
// carouselAPI.scrollTo(index);
|
|
// setCurrentIndex(index); // 更新当前索引
|
|
// }
|
|
// };
|
|
|
|
// 将数据分成两列
|
|
const leftColumnData = mockYuqingData.slice(0, 8);
|
|
const rightColumnData = mockYuqingData.slice(8, 16);
|
|
|
|
return (
|
|
<>
|
|
<div className="h-[677px] w-[1514px] mx-auto relative">
|
|
{/* 上部容器 */}
|
|
<div className="h-[60px] w-full relative">
|
|
<p className="h-full w-full text-4xl font-bold text-[#005d93] italic absolute left-0 mt-2">练兵备战</p>
|
|
</div>
|
|
|
|
{/* 下部容器 */}
|
|
<div className="h-[607px] w-[1300px] bg-[#082b69] flex flex-col">
|
|
{/* 上半部分 - 三个并排的容器 */}
|
|
<div className="flex">
|
|
<div className="h-[305px] w-[400px] ml-5 mt-5">
|
|
<CarouselComponent carouselData={carouselData1} />
|
|
|
|
<div className="h-[50px] w-[400px] text-white font-medium flex items-center justify-center text-3xl mt-3">
|
|
军事风云
|
|
</div>
|
|
</div>
|
|
<div className="h-[305px] w-[400px] ml-5 mt-5">
|
|
<CarouselComponent carouselData={carouselData1} />
|
|
<div className="h-[50px] w-[400px] text-white font-medium flex items-center justify-center text-3xl mt-3">
|
|
演训聚焦
|
|
</div>
|
|
</div>
|
|
<div className="h-[305px] w-[400px] ml-5 mt-5">
|
|
<div className="h-[255px] w-[400px] ">1</div>
|
|
<div className="h-[50px] w-[400px] text-white font-medium flex items-center justify-center text-3xl mt-3">
|
|
开源舆情
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 下方新增的容器 */}
|
|
<div className="h-[280px] w-[1280px] ml-5 mt-8 flex">
|
|
{/* 左侧 */}
|
|
<div className="flex-1 mr-[-80px] ">
|
|
{/* 环球IOS标题 */}
|
|
<div className="text-white text-3xl flex items-center ml-[10px]">
|
|
<span
|
|
style={{ writingMode: 'vertical-lr', textOrientation: 'mixed' }}
|
|
className="text-white text-3xl mb-35"
|
|
>
|
|
环球70S
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 中间 - */}
|
|
<div className=" flex space-x-1 mb-8 ml-[100px]">
|
|
<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1">
|
|
<div
|
|
className="h-[130px] w-[262px] bg-cover bg-center"
|
|
style={{ backgroundImage: 'url(/header.png)' }}
|
|
></div>
|
|
<div className="p-3 text-center relative">
|
|
<div className="absolute top-1 left-0 bg-red-500 text-white px-2 py-1 text-sm rounded-sm">
|
|
2024年40期
|
|
</div>
|
|
<p className=" font-medium mt-8 ">巴格多格拉空军基地</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 宣布亚空军基地 */}
|
|
<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1">
|
|
<div
|
|
className="h-[130px] w-[262px] bg-gray-400 bg-cover bg-center"
|
|
style={{ backgroundImage: 'url(/header.png)' }}
|
|
></div>
|
|
<div className="p-3 text-center relative">
|
|
<div className="absolute top-1 left-0 bg-blue-500 text-white px-2 py-1 text-sm rounded-sm">
|
|
2024年39期
|
|
</div>
|
|
<p className="font-medium mt-8">宣布亚空军基地</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右侧 - 形势战备 */}
|
|
<div className="flex-1">
|
|
{/* 形势战备标题 */}
|
|
<div className="text-white text-3xl ml-[10px] h-full flex items-center">
|
|
<span
|
|
style={{ writingMode: 'vertical-lr', textOrientation: 'mixed' }}
|
|
className="text-white text-3xl mb-35"
|
|
>
|
|
形势战备
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右侧卡片区域 */}
|
|
<div className="flex space-x-1 mb-8 mr-[100px] ml-[10px]">
|
|
{/* 形势战备教育2024年第13期 */}
|
|
<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1">
|
|
<div
|
|
className="h-[130px] w-[262px] bg-cover bg-center"
|
|
style={{ backgroundImage: 'url(/header.png)' }}
|
|
></div>
|
|
<div className="p-3 text-center relative">
|
|
<div className="absolute top-1 left-0 bg-orange-500 text-white px-2 py-1 text-sm rounded-sm">
|
|
2024年第13期
|
|
</div>
|
|
<p className="text-gray-800 font-medium mt-8">形势战备教育2024年第13期</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 形势战备教育2024年第12期 */}
|
|
<div className="bg-white rounded-lg overflow-hidden shadow-lg flex-1 mr-[20px]">
|
|
<div
|
|
className="h-[130px] w-[262px] bg-cover bg-center"
|
|
style={{ backgroundImage: 'url(/header.png)' }}
|
|
></div>
|
|
<div className="p-3 text-center relative">
|
|
<div className="absolute top-1 left-0 bg-green-600 text-white px-2 py-1 text-sm rounded-sm">
|
|
2024年第12期
|
|
</div>
|
|
<p className="text-gray-800 font-medium mt-8">形势战备教育2024年第12期</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 舆情区域 - 两列布局 */}
|
|
<div className="h-[335px] w-[705px] bg-[#ffffff] absolute right-35 transform translate-y-[-677px] p-6">
|
|
<div className="flex h-full">
|
|
{/* 左列 */}
|
|
<div className="flex-1 pr-4">
|
|
{leftColumnData.map((item) => (
|
|
<div key={item.id} className="flex items-center justify-between py-1 mt-1">
|
|
{/* 左侧钻石图标和标题 */}
|
|
<div className="flex items-center flex-1">
|
|
<div
|
|
className="w-3 h-3 bg-black mr-2 flex-shrink-0"
|
|
style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}
|
|
></div>
|
|
<p className="text-[16px] flex-1">{item.title}</p>
|
|
</div>
|
|
{/* 右侧日期 */}
|
|
<span className="text-[14px] ml-2">{item.date}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 右列 */}
|
|
<div className="flex-1 pl-4 ">
|
|
{rightColumnData.map((item) => (
|
|
<div key={item.id} className="flex items-center justify-between py-1 mt-1">
|
|
{/* 左侧钻石图标和标题 */}
|
|
<div className="flex items-center flex-1">
|
|
<div
|
|
className="w-3 h-3 bg-black mr-2 flex-shrink-0"
|
|
style={{ clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' }}
|
|
></div>
|
|
<p className="text-[16px] flex-1">{item.title}</p>
|
|
</div>
|
|
{/* 右侧日期 */}
|
|
<span className="text-[14px] ml-2">{item.date}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LbbzPage;
|