wmp/juip-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

菜单栏下拉层级渲染问题

Browse Source
This commit is contained in:
Eamon
2026-08-24 18:04:44 +08:00
parent 9bf97cab89
commit 9f917a39f9
2 changed files with 7 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/home/header.tsx
View File

@@ -17,16 +17,13 @@ export default function Header() {
() => false, () => false,
) )
// ======================
// 菜单状态 // 菜单状态
// ======================
const [openMenu, setOpenMenu] = useState(false) const [openMenu, setOpenMenu] = useState(false)
const handleEnter = () => setOpenMenu(true) const handleEnter = () => setOpenMenu(true)
const handleLeave = () => setOpenMenu(false) const handleLeave = () => setOpenMenu(false)
return ( return (
<header className={cn("fixed top-0 left-0 w-screen z-10 flex flex-col")}> <header className={cn("fixed top-0 left-0 w-screen z-50 flex flex-col")}>
<div <div
className={cn( className={cn(
`flex-none pointer-events-auto`, `flex-none pointer-events-auto`,
@@ -150,7 +147,7 @@ const MenuItem = ({
<div <div
className={cn( className={cn(
"absolute top-full left-0 pt-3 w-screen max-w-4xl transition-all duration-200", "absolute top-full left-0 pt-3 w-screen max-w-4xl transition-all duration-200 z-50",
isOpen isOpen
? "opacity-100 visible translate-y-0" ? "opacity-100 visible translate-y-0"
: "opacity-0 invisible -translate-y-2 pointer-events-none", : "opacity-0 invisible -translate-y-2 pointer-events-none",
@@ -160,7 +157,7 @@ const MenuItem = ({
transform: `translateX(-7%)`, transform: `translateX(-7%)`,
}} }}
> >
<div className="bg-white rounded-xl shadow-2xl border border-gray-100/80 p-6"> <div className="bg-white rounded-xl shadow-2xl border border-gray-100/80 p-6 overflow-visible">
{children} {children}
</div> </div>
</div> </div>

8
src/home/product/http.tsx
View File

@@ -1086,8 +1086,8 @@ function PrepaidCard({
onPay: (amount: number) => void onPay: (amount: number) => void
}) { }) {
return ( return (
<Card className="relative text-center border-0 shadow-md overflow-visible"> <Card className="relative text-center border-0 shadow-md overflow-visible!">
<Badge className="absolute -top-3 right-4 bg-yellow-400 text-white hover:bg-yellow-400 border-0 text-xs px-3 py-0.5 z-10"> <Badge className="absolute -top-3 right-4 bg-yellow-400 text-white hover:bg-yellow-400 border-0 text-xs px-3 py-0.5 z-10 whitespace-nowrap">
{plan.tag} {plan.tag}
</Badge> </Badge>
<CardContent className="pt-8 space-y-4"> <CardContent className="pt-8 space-y-4">
@@ -1121,8 +1121,8 @@ function PrepaidCardLarge({
onPay: (amount: number) => void onPay: (amount: number) => void
}) { }) {
return ( return (
<Card className="relative text-center border-0 shadow-md bg-white overflow-visible"> <Card className="relative text-center border-0 shadow-md bg-white overflow-visible!">
<Badge className="absolute -top-3 right-4 bg-yellow-400 text-white hover:bg-yellow-400 border-0 text-xs px-3 py-0.5 z-10"> <Badge className="absolute -top-3 right-4 bg-yellow-400 text-white hover:bg-yellow-400 border-0 text-xs px-3 py-0.5 z-10 whitespace-nowrap">
{plan.tag} {plan.tag}
</Badge> </Badge>
<CardContent className="pt-8 pb-6 flex flex-col items-center gap-3"> <CardContent className="pt-8 pb-6 flex flex-col items-center gap-3">