Compare commits
No commits in common. "8e87576fccf6fabae228cf913238508b0b17f01b" and "5a74a5a2c7abf06403b0cdd9a8cdd29c80028eb0" have entirely different histories.
8e87576fcc
...
5a74a5a2c7
|
|
@ -0,0 +1,82 @@
|
||||||
|
// 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
|
||||||
|
|
||||||
|
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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue