优化Hero组件背景图片实现方式确保手机端不会横向溢出

This commit is contained in:
jingrow 2025-06-18 23:54:37 +08:00
parent 5e748005a1
commit acf88d1758

View File

@ -43,21 +43,18 @@ export default function Hero() {
return (
<div className="container pt-36 xl:py-[12.5rem] lg:py-[12.5rem] md:py-[12.5rem] !text-center !relative">
<div
className="absolute"
className="absolute left-0 top-0 w-full h-full"
style={{
top: "-15%",
left: "50%",
transform: "translateX(-50%)",
zIndex: 0,
minHeight: "300px",
maxWidth: "100vw",
overflow: "hidden",
backgroundImage: `url(${bgImage})`,
backgroundSize: "cover",
backgroundPosition: "center",
pointerEvents: "none",
}}
>
<Image
className="!rounded-[0.8rem]"
alt="image"
src={bgImage}
width={1400}
height={1080}
/>
</div>
/>
<div className="flex flex-wrap mx-[-15px] !relative">
<div className="lg:w-8/12 xl:w-8/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
<div