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 (
<AnimatePresence>
{open && (
<motion.div
key={r_key}
className="fixed top-1/2 left-1/2 z-50 cursor-grab active:cursor-grabbing"
style={{ transform: 'translate(-50%, -50%)', pointerEvents: 'auto' }}
drag
dragElastic={0.2}
dragMomentum={false}
initial={{ opacity: 0, scale: 0.95, rotate: 0 }}
animate={{
opacity: 1,
...bounceAnimation,
}}
exit={{ opacity: 0, scale: 0.95, rotate: 0 }}
transition={{
duration: 0.6,
ease: [0.19, 1, 0.22, 1],
scale: {
duration: 0.4,
times: [0, 0.3, 0.6, 1]
},
rotate: {
duration: 0.4,
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"
<div className="fixed inset-0 z-50 flex items-center justify-center">
<motion.div
key={r_key}
className="cursor-grab active:cursor-grabbing"
drag
dragElastic={0.2}
dragMomentum={false}
initial={{ opacity: 0, scale: 0.95, rotate: 0 }}
animate={{
opacity: 1,
...bounceAnimation,
}}
exit={{ opacity: 0, scale: 0.95, rotate: 0 }}
transition={{
duration: 0.6,
ease: [0.19, 1, 0.22, 1],
scale: {
duration: 0.4,
times: [0, 0.3, 0.6, 1]
},
rotate: {
duration: 0.4,
times: [0, 0.2, 0.4, 0.6, 1]
}
}}
>
{children}
</div>
</motion.div>
<div
style={{ width }}
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>
);