xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

调整弹窗定位问题

Browse Source
This commit is contained in:
北枳 2025-07-29 22:54:03 +08:00
parent 12e9aeb88e
commit d710b8701f
1 changed files with 41 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/ui/FloatingGlassPanel.tsx
View File

@ -21,39 +21,48 @@ export default function FloatingGlassPanel({ open, onClose, children, width = '3
return ( return (
<AnimatePresence> <AnimatePresence>
{open && ( {open && (
<motion.div <div className="fixed inset-0 z-50 flex items-center justify-center">
key={r_key} <motion.div
className="fixed top-1/2 left-1/2 z-50 cursor-grab active:cursor-grabbing" key={r_key}
style={{ transform: 'translate(-50%, -50%)', pointerEvents: 'auto' }} className="cursor-grab active:cursor-grabbing"
drag drag
dragElastic={0.2} dragElastic={0.2}
dragMomentum={false} dragMomentum={false}
initial={{ opacity: 0, scale: 0.95, rotate: 0 }} initial={{ opacity: 0, scale: 0.95, rotate: 0 }}
animate={{ animate={{
opacity: 1, opacity: 1,
...bounceAnimation, ...bounceAnimation,
}} }}
exit={{ opacity: 0, scale: 0.95, rotate: 0 }} exit={{ opacity: 0, scale: 0.95, rotate: 0 }}
transition={{ transition={{
duration: 0.6, duration: 0.6,
ease: [0.19, 1, 0.22, 1], ease: [0.19, 1, 0.22, 1],
scale: { scale: {
duration: 0.4, duration: 0.4,
times: [0, 0.3, 0.6, 1] times: [0, 0.3, 0.6, 1]
}, },
rotate: { rotate: {
duration: 0.4, duration: 0.4,
times: [0, 0.2, 0.4, 0.6, 1] times: [0, 0.2, 0.4, 0.6, 1]
} }
}} }}
>
<div
style={{ width }}
className="rounded-xl backdrop-blur-md bg-white/10 border border-white/20 shadow-xl text-white p-4"
> >
{children} <div
</div> style={{ width }}
</motion.div> className="rounded-xl backdrop-blur-md bg-white/10 border border-white/20 shadow-xl text-white p-4"
>
{children}
</div>
</motion.div>
{/* 添加遮罩层，点击时关闭面板 */}
<motion.div
className="fixed inset-0 bg-black/20 backdrop-blur-sm -z-10"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={onClose}
/>
</div>
)} )}
</AnimatePresence> </AnimatePresence>
); );