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; min-width: 248px;
max-width: 100%; max-width: 100%;
// min-height: 160px; // min-height: 160px;
&:hover { // &:hover {
cursor: pointer; // cursor: pointer;
// border: 2px solid rgba(255, 80, 80, 0.8); // // border: 2px solid rgba(255, 80, 80, 0.8);
animation: glowPulse 1.6s ease-in-out infinite; // 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), // 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), // 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 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
/* 闪动动画 */ // /* 闪动动画 */
@keyframes glowPulse { // @keyframes glowPulse {
0% { // 0% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5), // 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), // 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 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
50% { // 50% {
box-shadow: 0 0 18px rgba(255, 120, 120, 1), // 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), // 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 25px rgba(255, 80, 80, 1),
inset 0 0 45px rgba(255, 40, 40, 0.7), // inset 0 0 45px rgba(255, 40, 40, 0.7),
inset 0 0 75px rgba(255, 0, 0, 0.5); // inset 0 0 75px rgba(255, 0, 0, 0.5);
} // }
100% { // 100% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5), // 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), // 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 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
} // }
} }
// 2x2 网格布局 // 2x2 网格布局

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

@ -77,11 +77,11 @@ const getSourceColor = (source) => {
background-size: 100% 100%; background-size: 100% 100%;
padding: 2px; padding: 2px;
border: 2px solid transparent; border: 2px solid transparent;
&:hover { // &:hover {
border: 2px solid rgba(255, 80, 80, 0.6); // 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), // 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); // 0 0 35px rgba(255, 0, 0, 0.25);
} // }
&__header { &__header {
position: absolute; position: absolute;

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

@ -145,41 +145,41 @@ onUnmounted(() => {
transition: all 0.3s ease; transition: all 0.3s ease;
border: 2px solid transparent; border: 2px solid transparent;
&:hover { // &:hover {
cursor: pointer; // cursor: pointer;
// border: 2px solid rgba(255, 80, 80, 0.8); // // border: 2px solid rgba(255, 80, 80, 0.8);
animation: glowPulse 1.6s ease-in-out infinite; // 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), // 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), // 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 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
/* 闪动动画 */ // /* 闪动动画 */
@keyframes glowPulse { // @keyframes glowPulse {
0% { // 0% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5), // 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), // 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 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
50% { // 50% {
box-shadow: 0 0 18px rgba(255, 120, 120, 1), // 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), // 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 25px rgba(255, 80, 80, 1),
inset 0 0 45px rgba(255, 40, 40, 0.7), // inset 0 0 45px rgba(255, 40, 40, 0.7),
inset 0 0 75px rgba(255, 0, 0, 0.5); // inset 0 0 75px rgba(255, 0, 0, 0.5);
} // }
100% { // 100% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5), // 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), // 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 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
} // }
// 收起状态：只显示标题栏 // 收起状态：只显示标题栏
&.is-collapsed { &.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-top: var(--sa-header-height);
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
&__content { // &__content {
&:hover { // &:hover {
cursor: pointer; // cursor: pointer;
// border: 2px solid rgba(255, 80, 80, 0.8); // // border: 2px solid rgba(255, 80, 80, 0.8);
animation: glowPulse 1.6s ease-in-out infinite; // 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), // 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), // 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 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
/* 闪动动画 */ // /* 闪动动画 */
@keyframes glowPulse { // @keyframes glowPulse {
0% { // 0% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), // 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), // 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 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55), // inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
50% { // 50% {
box-shadow: 0 0 18px rgba(255, 120, 120, 1), // 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), // 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 25px rgba(255, 80, 80, 1),
inset 0 0 45px rgba(255, 40, 40, 0.7), // inset 0 0 45px rgba(255, 40, 40, 0.7),
inset 0 0 75px rgba(255, 0, 0, 0.5); // inset 0 0 75px rgba(255, 0, 0, 0.5);
} // }
100% { // 100% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), // 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), // 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 18px rgba(255, 80, 80, 0.8),
inset 0 0 35px rgba(255, 30, 30, 0.55), // inset 0 0 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
} // }
} // }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: vw(0); 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 { // .collapsible-panel:hover {
cursor: pointer; // cursor: pointer;
border: 2px solid rgba(255, 80, 80, 0.8); // border: 2px solid rgba(255, 80, 80, 0.8);
animation: glowPulse 1.6s ease-in-out infinite; // 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), // 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), // 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); // inset 0 0 35px rgba(255, 30, 30, 0.55), inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
/* 闪动动画 */ // /* 闪动动画 */
@keyframes glowPulse { // @keyframes glowPulse {
0% { // 0% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5), // 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), // 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 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
50% { // 50% {
box-shadow: 0 0 18px rgba(255, 120, 120, 1), 0 0 35px rgba(255, 40, 40, 0.7), // 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), // 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); // inset 0 0 45px rgba(255, 40, 40, 0.7), inset 0 0 75px rgba(255, 0, 0, 0.5);
} // }
100% { // 100% {
box-shadow: 0 0 12px rgba(255, 80, 80, 0.8), 0 0 25px rgba(255, 0, 0, 0.5), // 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), // 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 35px rgba(255, 30, 30, 0.55),
inset 0 0 55px rgba(255, 0, 0, 0.4); // inset 0 0 55px rgba(255, 0, 0, 0.4);
} // }
} // }
</style> </style>