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

13
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;
@ -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,11 +74,13 @@ 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)?
(carouselItems.map((item, index) => (
<div key={index} className="relative h-[600px]"> <div key={index} className="relative h-[600px]">
<div <div
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]" 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]"
style={{ style={{
//backgroundImage: `url(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
backgroundImage: `url(${item.image})`, backgroundImage: `url(${item.image})`,
backfaceVisibility: "hidden", backfaceVisibility: "hidden",
}} }}
@ -90,7 +93,11 @@ const HeroSection = () => {
{/* 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 */}