diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue index 9078bfa..f4f6e5c 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue @@ -253,8 +253,35 @@ function onAfterLeave(el) { } .collapsible-panel:hover { - border: 2px solid rgba(255, 80, 80, 0.6); /* 柔和的渐变红基色 */ - box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4), - 0 0 35px rgba(255, 0, 0, 0.25); /* 多层柔光渐变效果 */ + cursor: pointer; + border: 2px solid rgba(255, 80, 80, 0.8); + animation: glowPulse 1.6s ease-in-out infinite; + + box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5), + 0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8), + inset 0 0 35px rgba(255, 30, 30, 0.55), inset 0 0 55px rgba(255, 0, 0, 0.4); +} + +/* 闪动动画 */ +@keyframes glowPulse { + 0% { + box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5), + 0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8), + inset 0 0 35px rgba(255, 30, 30, 0.55), + inset 0 0 55px rgba(255, 0, 0, 0.4); + } + + 50% { + box-shadow: 0 0 18px rgba(255, 120, 120, 1), 0 0 35px rgba(255, 40, 40, 0.7), + 0 0 65px rgba(255, 0, 0, 0.45), inset 0 0 25px rgba(255, 80, 80, 1), + inset 0 0 45px rgba(255, 40, 40, 0.7), inset 0 0 75px rgba(255, 0, 0, 0.5); + } + + 100% { + box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5), + 0 0 45px rgba(255, 0, 0, 0.35), inset 0 0 18px rgba(255, 80, 80, 0.8), + inset 0 0 35px rgba(255, 30, 30, 0.55), + inset 0 0 55px rgba(255, 0, 0, 0.4); + } }