diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue index e164b90..3cd6e3d 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue @@ -73,41 +73,41 @@ const locationInfo = [ min-width: 248px; max-width: 100%; // min-height: 160px; - &:hover { - cursor: pointer; - // border: 2px solid rgba(255, 80, 80, 0.8); - animation: glowPulse 1.6s ease-in-out infinite; + // &:hover { + // 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); - } + // 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); - } + // /* 闪动动画 */ + // @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); - } + // 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); - } - } + // 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); + // } + // } } // 2x2 网格布局 diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue index 6fa052a..8b3719b 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue @@ -77,11 +77,11 @@ const getSourceColor = (source) => { background-size: 100% 100%; padding: 2px; border: 2px solid transparent; - &: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); - } + // &: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); + // } &__header { position: absolute; diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue index beb21db..0a6f023 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue @@ -145,41 +145,41 @@ onUnmounted(() => { transition: all 0.3s ease; border: 2px solid transparent; - &:hover { - cursor: pointer; - // border: 2px solid rgba(255, 80, 80, 0.8); - animation: glowPulse 1.6s ease-in-out infinite; + // &:hover { + // 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); - } + // 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); - } + // /* 闪动动画 */ + // @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); - } + // 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); - } - } + // 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); + // } + // } // 收起状态:只显示标题栏 &.is-collapsed { diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue index a5c237f..e6eeda8 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue @@ -56,45 +56,45 @@ const handleQuickDisposalClick = () => { padding-top: var(--sa-header-height); padding-left: 10px; box-sizing: border-box; - &__content { - &:hover { - cursor: pointer; - // border: 2px solid rgba(255, 80, 80, 0.8); - animation: glowPulse 1.6s ease-in-out infinite; + // &__content { + // &:hover { + // 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); - } + // 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); - } + // /* 闪动动画 */ + // @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); - } + // 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); - } - } - } + // 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); + // } + // } + // } &::-webkit-scrollbar { width: vw(0); diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue index f4f6e5c..8a226f0 100644 --- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue +++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue @@ -252,36 +252,36 @@ function onAfterLeave(el) { } } -.collapsible-panel:hover { - cursor: pointer; - border: 2px solid rgba(255, 80, 80, 0.8); - animation: glowPulse 1.6s ease-in-out infinite; +// .collapsible-panel:hover { +// 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); -} +// 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); - } +// /* 闪动动画 */ +// @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); - } +// 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); - } -} +// 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); +// } +// }