bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

注释掉红色阴影动画hover效果

Browse Source
This commit is contained in:
huangchenhao 2025-12-19 09:52:11 +08:00
parent 4f9778108f
commit 5860320f90
5 changed files with 130 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue
View File

@ -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 网格布局

10
packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/CollaborationInfo.vue
View File

@ -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;

62
packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
View File

@ -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 {

70
packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue
View File

@ -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);

56
packages/screen/src/views/3DSituationalAwarenessRefactor/components/shared/CollapsiblePanel.vue
View File

@ -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);
// }
// }
</style>