Compare commits
No commits in common. "8aba8c10d4500c19eee2512444098ff3a277058a" and "bb43c4312e82a161b146f83b7d6d601452f6e924" have entirely different histories.
8aba8c10d4
...
bb43c4312e
|
|
@ -1,53 +1,48 @@
|
||||||
|
// src/components/CarouselDemo.tsx
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import Autoplay from "embla-carousel-autoplay";
|
import Autoplay from "embla-carousel-autoplay";//实现轮播图的自动播放功能
|
||||||
|
|
||||||
import { Card, CardContent } from "@/ui/card";
|
import { Card, CardContent } from "@/ui/card";
|
||||||
import {
|
import {
|
||||||
Carousel,
|
Carousel,//主体
|
||||||
CarouselContent,
|
CarouselContent,//内容容器
|
||||||
CarouselItem,
|
CarouselItem,//单个轮播项
|
||||||
CarouselNext,
|
CarouselNext,
|
||||||
CarouselPrevious,
|
CarouselPrevious,
|
||||||
type CarouselApi,
|
type CarouselApi,
|
||||||
} from "@/ui/carousel";
|
} from "@/ui/carousel";
|
||||||
|
|
||||||
const imageUrls = [
|
|
||||||
"/images/carousel-1.jpg",
|
|
||||||
"/images/carousel-2.jpg",
|
|
||||||
"/images/carousel-3.jpg",
|
|
||||||
"/images/carousel-4.jpg",
|
|
||||||
"/images/carousel-5.jpg",
|
|
||||||
"/images/carousel-6.jpg",
|
|
||||||
];
|
|
||||||
|
|
||||||
export function CarouselDemo() {
|
export function CarouselDemo() {
|
||||||
const [api, setApi] = React.useState<CarouselApi>();
|
const [api, setApi] = React.useState<CarouselApi>();
|
||||||
const [current, setCurrent] = React.useState(0);
|
const [current, setCurrent] = React.useState(0);
|
||||||
const [count, setCount] = React.useState(0);
|
const [count, setCount] = React.useState(0);
|
||||||
|
|
||||||
|
const totalSlides = 6;
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!api) return;
|
if (!api) return;
|
||||||
|
|
||||||
setCount(api.scrollSnapList().length);
|
setCount(api.scrollSnapList().length);
|
||||||
setCurrent(api.selectedScrollSnap());
|
setCurrent(api.selectedScrollSnap());//获取当前选中的轮播项的索引
|
||||||
|
|
||||||
api.on("select", () => {
|
api.on("select", () => {
|
||||||
setCurrent(api.selectedScrollSnap());
|
setCurrent(api.selectedScrollSnap());
|
||||||
});
|
});
|
||||||
}, [api]);
|
}, [api]);//当api改变时，执行此函数 水平居中 循环 自动播放 回传状态
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative w-full h-full">
|
<div className="relative w-full max-w-4xl mx-auto">
|
||||||
<Carousel
|
<Carousel
|
||||||
opts={{ loop: true }}
|
opts={{
|
||||||
|
loop: true,
|
||||||
|
}}
|
||||||
plugins={[
|
plugins={[
|
||||||
Autoplay({
|
Autoplay({
|
||||||
delay: 3000,
|
delay: 3000,
|
||||||
stopOnInteraction: false,
|
stopOnInteraction: false,
|
||||||
}),
|
}),
|
||||||
]}
|
]}
|
||||||
setApi={setApi}
|
setApi={setApi}
|
||||||
className="w-full h-full"
|
|
||||||
>
|
>
|
||||||
<CarouselContent className="h-full w-full">
|
<CarouselContent className="h-full w-full">
|
||||||
{Array.from({ length: totalSlides }).map((_, index) => (
|
{Array.from({ length: totalSlides }).map((_, index) => (
|
||||||
|
|
@ -80,9 +75,8 @@ export function CarouselDemo() {
|
||||||
key={index}
|
key={index}
|
||||||
onClick={() => api?.scrollTo(index)}
|
onClick={() => api?.scrollTo(index)}
|
||||||
className={`h-2 w-2 rounded-full transition-colors ${
|
className={`h-2 w-2 rounded-full transition-colors ${
|
||||||
index === current ? "bg-white" : "bg-white/50"
|
index === current ? "bg-black" : "bg-black/50"
|
||||||
}`}
|
}`}
|
||||||
aria-label={`Go to slide ${index + 1}`}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
// src/components/CarouselDemo.tsx
|
|
||||||
import * as React from "react";
|
|
||||||
import Autoplay from "embla-carousel-autoplay";
|
|
||||||
|
|
||||||
import { Card, CardContent } from "@/ui/card";
|
|
||||||
import {
|
|
||||||
Carousel,
|
|
||||||
CarouselContent,
|
|
||||||
CarouselItem,
|
|
||||||
CarouselNext,
|
|
||||||
CarouselPrevious,
|
|
||||||
} from "@/ui/carousel";
|
|
||||||
|
|
||||||
const imageUrls = [
|
|
||||||
"/images/carousel-1.jpg",
|
|
||||||
"/images/carousel-2.jpg",
|
|
||||||
"/images/carousel-3.jpg",
|
|
||||||
"/images/carousel-4.jpg",
|
|
||||||
"/images/carousel-5.jpg",
|
|
||||||
"/images/carousel-6.jpg",
|
|
||||||
];
|
|
||||||
|
|
||||||
export function AutoCarouselDemo() {
|
|
||||||
return (
|
|
||||||
<div className="relative w-full mx-auto overflow-hidden">
|
|
||||||
{/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
|
|
||||||
<div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
|
|
||||||
<div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
|
|
||||||
{/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
|
|
||||||
<Carousel
|
|
||||||
opts={{
|
|
||||||
loop: true,//循环
|
|
||||||
align: "start",
|
|
||||||
}}
|
|
||||||
plugins={[
|
|
||||||
Autoplay({
|
|
||||||
delay: 3000, // 自动播放
|
|
||||||
stopOnInteraction: false,//不因为鼠标交互停止
|
|
||||||
}),
|
|
||||||
]}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
<CarouselContent className="flex gap-4">
|
|
||||||
{imageUrls.map((src, index) => (
|
|
||||||
<CarouselItem
|
|
||||||
key={index}
|
|
||||||
className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
|
|
||||||
>
|
|
||||||
{/* 基宽 中屏 大屏 防止收缩 相对定位
|
|
||||||
内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
|
|
||||||
隐藏溢出 移除边框 中等阴影
|
|
||||||
弹性布局 正方形 垂直居中 水平居中 内边距0 相对
|
|
||||||
*/}
|
|
||||||
<div
|
|
||||||
className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
|
|
||||||
style={{
|
|
||||||
transform: 'scale(1)',
|
|
||||||
transition: 'all 0.5s ease',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Card className="overflow-hidden border-none shadow-lg">
|
|
||||||
<CardContent className="flex aspect-square items-center justify-center p-0 relative">
|
|
||||||
<img
|
|
||||||
src={src}
|
|
||||||
alt={`Slide ${index + 1}`}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
loading="lazy" // 启用懒加载
|
|
||||||
/>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</CarouselItem>
|
|
||||||
))}
|
|
||||||
</CarouselContent>
|
|
||||||
|
|
||||||
{/* 左右箭头控制 */}
|
|
||||||
<CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-20" />
|
|
||||||
<CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-20" />
|
|
||||||
</Carousel>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
interface NewsItem {
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function FireNewsList() {
|
|
||||||
const newsItems: NewsItem[] = [
|
|
||||||
{
|
|
||||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="bg-gray-200 p-4 rounded-lg h-full">
|
|
||||||
{/* 标题栏 */}
|
|
||||||
<div className="flex justify-between items-center mb-4">
|
|
||||||
<h2 className="text-xl font-bold text-gray-800">烽火要闻</h2>
|
|
||||||
<a className="text-blue-600 hover:text-blue-800 font-medium">
|
|
||||||
查看更多 {'>'}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 新闻列表 */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
{newsItems.map((item, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="flex p-3 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow duration-200"
|
|
||||||
>
|
|
||||||
|
|
||||||
{/* 内容部分 */}
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-gray-700 text-sm ">
|
|
||||||
{item.content}
|
|
||||||
<a
|
|
||||||
className="text-red-600 ml-1 font-medium hover:text-red-800"
|
|
||||||
>
|
|
||||||
[MORE]
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
|
|
||||||
import { CarouselDemo } from "@/components/Carousel";
|
|
||||||
import {FireNewsList} from "./FireNewsList";
|
|
||||||
|
|
||||||
|
|
||||||
export function FhjtPage() {
|
|
||||||
return(
|
|
||||||
<div className=" w-full overflow-hidden flex justify-center">
|
|
||||||
{/* 轮播背景图 */}
|
|
||||||
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
|
||||||
<CarouselDemo />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-100 h-full bg-white relative">
|
|
||||||
{/* 标题部分 */}
|
|
||||||
<div className="relative pt-6 pr-8">
|
|
||||||
<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火讲堂</h2>
|
|
||||||
{/* 蓝色装饰线 */}
|
|
||||||
<div className="h-3 bg-[#005d93]"></div>
|
|
||||||
</div>
|
|
||||||
{/* 列表 */}
|
|
||||||
<div className="mt-4 pr-8">
|
|
||||||
|
|
||||||
<div className="mb-5 justify-end flex">
|
|
||||||
一等奖
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-5 justify-end flex">
|
|
||||||
二等奖
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-5 justify-end flex">
|
|
||||||
三等奖
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
|
|
||||||
import { CarouselDemo } from "@/components/Carousel";
|
|
||||||
import {FireNewsList} from "./FireNewsList";
|
|
||||||
|
|
||||||
|
|
||||||
export function FhrxPage() {
|
|
||||||
return(
|
|
||||||
<div className=" w-full overflow-hidden flex justify-center">
|
|
||||||
{/* 轮播背景图 */}
|
|
||||||
<div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
|
|
||||||
<CarouselDemo />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-100 h-full bg-white relative">
|
|
||||||
{/* 标题部分 */}
|
|
||||||
<div className="relative pt-6 pr-8">
|
|
||||||
<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火热线</h2>
|
|
||||||
{/* 蓝色装饰线 */}
|
|
||||||
<div className="h-3 bg-[#005d93]"></div>
|
|
||||||
</div>
|
|
||||||
{/* 列表 */}
|
|
||||||
<div className="mt-4 pr-8">
|
|
||||||
|
|
||||||
<div className="mb-5 justify-end flex">
|
|
||||||
信箱
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-5 justify-end flex">
|
|
||||||
问答
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-5 justify-end flex">
|
|
||||||
心灵
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
|
|
||||||
import { CarouselDemo } from "@/components/Carousel";
|
|
||||||
import {FireNewsList} from "./FireNewsList";
|
|
||||||
|
|
||||||
|
|
||||||
export function FhwsPage() {
|
|
||||||
return(
|
|
||||||
<div className=" w-full overflow-hidden flex justify-center">
|
|
||||||
<div className="w-100 h-full bg-white relative" >
|
|
||||||
{/* 标题部分 */}
|
|
||||||
<div className="relative pt-6 pr-8">
|
|
||||||
<h2 className=" text-4xl font-bold text-[#005d93] mb-2">烽火微视</h2>
|
|
||||||
{/* 蓝色装饰线 */}
|
|
||||||
<div className="h-3 bg-[#005d93]"></div>
|
|
||||||
</div>
|
|
||||||
{/* 列表 */}
|
|
||||||
<div className="mt-4 pr-8 ">
|
|
||||||
|
|
||||||
<div className="mb-5 justify-start flex">
|
|
||||||
一
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-5 justify-start flex">
|
|
||||||
二
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-5 justify-start flex">
|
|
||||||
三
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* 轮播背景图 */}
|
|
||||||
<div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
|
|
||||||
<CarouselDemo />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
import { CarouselDemo } from "@/components/Carousel";
|
|
||||||
import {FireNewsList} from "./FireNewsList";
|
|
||||||
|
|
||||||
|
|
||||||
export function FhywPage() {
|
|
||||||
return(
|
|
||||||
<div className="relative w-full max-w-4xl mx-auto overflow-hidden aspect-square">
|
|
||||||
{/* 轮播背景图 */}
|
|
||||||
<div className="absolute inset-0 z-0">
|
|
||||||
<CarouselDemo />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 固定的烽火要闻 */}
|
|
||||||
<div className="absolute top-0 right-0 w-1/3 h-full p-1">
|
|
||||||
<FireNewsList />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,102 +1,109 @@
|
||||||
import { CarouselDemo } from '@/components/Carousel';
|
import { CarouselDemo } from "@/components/Carousel";
|
||||||
import React from 'react';
|
const ImageGridSection = () => {
|
||||||
|
|
||||||
const LearnPage = () => {
|
const elements = [
|
||||||
const newsList = [
|
"/images/carousel-1.jpg",
|
||||||
'中华人民共和国监察法',
|
<CarouselDemo />,
|
||||||
'2024年国办印发意见部门工作人员党听全国两...',
|
"/images/carousel-2.jpg",
|
||||||
'十四届全国人大二次会议闭幕贺词',
|
"/images/carousel-3.jpg"
|
||||||
'7天人代会："小片段"折射民主"大全景"',
|
|
||||||
'全国政协十四届二次会议共收到提案5800多件',
|
|
||||||
'两会观察丨从两会八个高频词看中国',
|
|
||||||
'两会"清单"上新这些民生发展温度',
|
|
||||||
'"选择中国"——世界从中国两会读出心动机号',
|
|
||||||
'中国经济信心说丨新玛合信心从哪里来',
|
|
||||||
];
|
];
|
||||||
|
{/* 最外 左右两列间 内边 内容最大宽 水平居 微软雅黑
|
||||||
|
2 列+ 2 行 格子间距 固定宽高
|
||||||
|
*/}
|
||||||
|
|
||||||
|
const listItems = [
|
||||||
|
'新闻标题一：重要政策发布',
|
||||||
|
'新闻标题二：经济数据稳步回升',
|
||||||
|
'新闻标题三：科技创新成果显著',
|
||||||
|
'新闻标题四：民生工程持续推进',
|
||||||
|
'新闻标题五：国际交流合作深化'
|
||||||
|
];
|
||||||
return (
|
return (
|
||||||
<div className="w-4/5 mx-auto px-4 py-6">
|
<div style={{
|
||||||
{/* 顶部 Logo */}
|
display: 'flex',
|
||||||
<div className="flex justify-start mb-4">
|
gap: '24px',
|
||||||
<h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
|
padding: '20px',
|
||||||
</div>
|
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 className="flex flex-col lg:flex-row gap-4 h-[740px]">
|
<div
|
||||||
{/* 左侧图片区 */}
|
key={index}
|
||||||
<div className="lg:w-3/5 rounded-lg overflow-hidden">
|
style={{
|
||||||
<div className="grid grid-cols-3 grid-rows-2 gap-3 h-full w-full">
|
borderRadius: '8px',
|
||||||
{/* 上左：第一张图 */}
|
overflow: 'hidden',
|
||||||
<div className="row-span-1 col-span-1 rounded-lg shadow-sm overflow-hidden">
|
boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'stretch'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{typeof element === 'string' ? (
|
||||||
<img
|
<img
|
||||||
src="/images/carousel-1.jpg"
|
src={element}
|
||||||
alt="Image 1"
|
alt={`图片 ${index + 1}`}
|
||||||
className="w-full h-full object-cover"
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
objectFit: 'cover',
|
||||||
|
display: 'block'
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
) : (
|
||||||
|
element // 占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
|
||||||
{/* 上右：轮播图 */}
|
// 背景色、圆角、阴影、内边距 防撑大
|
||||||
<div className="col-span-2 row-span-1 rounded-lg shadow-sm overflow-hidden">
|
)}
|
||||||
<CarouselDemo />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 下三图 */}
|
|
||||||
{[3, 4, 5].map((i) => (
|
|
||||||
<div key={i} className="rounded-lg shadow-sm overflow-hidden">
|
|
||||||
<img
|
|
||||||
src={`/images/carousel-${i}.jpg`}
|
|
||||||
alt={`Image ${i}`}
|
|
||||||
className="w-full h-full object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
|
</div>
|
||||||
|
<div style={{
|
||||||
{/* 右侧新闻列表 */}
|
flex: 1,
|
||||||
<div className="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex items-center">
|
minWidth: '300px',
|
||||||
<ul className="space-y-8 w-full">
|
height: '450px',
|
||||||
{newsList.map((item, index) => (
|
display: 'flex',
|
||||||
<li
|
flexDirection: 'column',
|
||||||
key={index}
|
justifyContent: 'space-between',
|
||||||
className="flex items-start text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group"
|
background: '#f9f9f9',
|
||||||
>
|
borderRadius: '8px',
|
||||||
<span className="text-red-500 mr-2 mt-0.5">•</span>
|
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
||||||
<span className="group-hover:underline">{item}</span>
|
padding: '16px',
|
||||||
</li>
|
boxSizing: 'border-box'
|
||||||
))}
|
}}>
|
||||||
</ul>
|
<ul style={{
|
||||||
</div>
|
listStyle: 'none',
|
||||||
</div>
|
padding: 0,
|
||||||
<div className="w-[1514px] h-[285px] flex relative">
|
flexGrow: 1,
|
||||||
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
overflowY: 'auto' // 当 内 容超出时启用滚动条 填满剩余 文间
|
||||||
<div
|
}}>
|
||||||
className="w-[169px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center"
|
{listItems.map((item, index) => (
|
||||||
style={{ backgroundImage: 'url(/book1.png)' }}
|
<li
|
||||||
></div>
|
key={index}
|
||||||
{/* 左边容器内容 */}
|
style={{
|
||||||
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
|
marginBottom: '12px',
|
||||||
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
|
color: '#333',
|
||||||
习近平新时代中国特色社会
|
fontSize: '16px'
|
||||||
<br />
|
}}
|
||||||
主义思想专题数据库
|
>
|
||||||
</p>
|
<span style={{ color: '#c00', marginRight: '8px' }}>•</span>
|
||||||
</div>
|
{item}
|
||||||
</div>
|
</li>
|
||||||
<div className="w-[700px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
|
))}
|
||||||
<div
|
</ul>
|
||||||
className="w-[140px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
|
</div>
|
||||||
style={{ backgroundImage: 'url(/book2.png)' }}
|
|
||||||
></div>
|
|
||||||
{/* 右边容器内容 */}
|
|
||||||
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] ">
|
|
||||||
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
export default ImageGridSection;
|
||||||
export default LearnPage;
|
|
||||||
|
|
@ -12,7 +12,6 @@ import { FhjtPage } from "@/components/news/body/FireNews/fhjt";
|
||||||
import { FhwsPage } from "@/components/news/body/FireNews/fhws";
|
import { FhwsPage } from "@/components/news/body/FireNews/fhws";
|
||||||
import { FhrxPage } from "@/components/news/body/FireNews/fhrx";
|
import { FhrxPage } from "@/components/news/body/FireNews/fhrx";
|
||||||
import { AutoCarouselDemo } from "@/components/AutoCarousel";
|
import { AutoCarouselDemo } from "@/components/AutoCarousel";
|
||||||
|
|
||||||
export function meta( ) {
|
export function meta( ) {
|
||||||
return [
|
return [
|
||||||
{ title: "New React Router App" },
|
{ title: "New React Router App" },
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue