linfeng
/
staff_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rht02250825

This commit is contained in:
Rao 2025-02-25 08:25:59 +08:00
parent 890449ffff
commit 2548fadfee
1 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
apps/web/src/app/main/home/components/HeroSection.tsx
View File

@ -10,6 +10,7 @@ import {
EyeOutlined, EyeOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import type { CarouselRef } from "antd/es/carousel"; import type { CarouselRef } from "antd/es/carousel";
import { useAppConfig } from "@nice/client";
const { Title, Text } = Typography; const { Title, Text } = Typography;
@ -53,7 +54,7 @@ const platformStats: PlatformStat[] = [
const HeroSection = () => { const HeroSection = () => {
const carouselRef = useRef<CarouselRef>(null); const carouselRef = useRef<CarouselRef>(null);
const handlePrev = useCallback(() => { const handlePrev = useCallback(() => {
carouselRef.current?.prev(); carouselRef.current?.prev();
}, []); }, []);
@ -61,7 +62,7 @@ const HeroSection = () => {
const handleNext = useCallback(() => { const handleNext = useCallback(() => {
carouselRef.current?.next(); carouselRef.current?.next();
}, []); }, []);
//const {slides:carouselItems} = useAppConfig()
return ( return (
<section className="relative "> <section className="relative ">
<div className="group"> <div className="group">
@ -73,24 +74,30 @@ const HeroSection = () => {
dots={{ dots={{
className: "carousel-dots !bottom-32 !z-20", className: "carousel-dots !bottom-32 !z-20",
}}> }}>
{carouselItems.map((item, index) => ( {Array.isArray(carouselItems)?
<div key={index} className="relative h-[600px]"> (carouselItems.map((item, index) => (
<div <div key={index} className="relative h-[600px]">
className="absolute inset-0 bg-cover bg-center transform transition-[transform,filter] duration-[2000ms] group-hover:scale-105 group-hover:brightness-110 will-change-[transform,filter]" <div
style={{ className="absolute inset-0 bg-cover bg-center transform transition-[transform,filter] duration-[2000ms] group-hover:scale-105 group-hover:brightness-110 will-change-[transform,filter]"
backgroundImage: `url(${item.image})`, style={{
backfaceVisibility: "hidden", //backgroundImage: `url(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
}} backgroundImage: `url(${item.image})`,
/> backfaceVisibility: "hidden",
<div }}
className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`} />
/> <div
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" /> className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`}
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
{/* Content Container */} {/* Content Container */}
<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div> <div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
</div> </div>
))} )))
:(
<div></div>
)
}
</Carousel> </Carousel>
{/* Navigation Buttons */} {/* Navigation Buttons */}