From 24e0a7f27847fcca8f46d1a3f7a2606a7111b5fe Mon Sep 17 00:00:00 2001
From: huangchenhao <123673748@qq.com>
Date: Mon, 1 Dec 2025 14:34:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B5=AE=E5=8A=A8=E7=AA=97?=
 =?UTF-8?q?=E7=9A=84hover=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LeftPanel/LocationPanel.vue    | 79 ++++++++++++-------
 .../RightPanel/VideoMonitorItem.vue           | 37 ++++++++-
 .../components/RightPanel/index.vue           | 70 +++++++++++-----
 3 files changed, 136 insertions(+), 50 deletions(-)

diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue
index 11b8088..e164b90 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/LeftPanel/LocationPanel.vue
@@ -14,12 +14,7 @@
           :key="item.label"
           class="info-card"
         >
-          <img
-            class="info-icon"
-            :src="item.icon"
-            alt=""
-            aria-hidden="true"
-          />
+          <img class="info-icon" :src="item.icon" alt="" aria-hidden="true" />
           <div class="info-content">
             <p class="info-label">{{ item.label }}</p>
             <p class="info-value" :title="item.value">{{ item.value }}</p>
@@ -31,11 +26,11 @@
 </template>
 
 <script setup>
-import lineCodeIcon from '../../assets/images/LocationPanel/线路编号icon.png'
-import classNumberIcon from '../../assets/images/LocationPanel/路线桩号icon.png'
-import inspectorIcon from '../../assets/images/LocationPanel/路段巡查员icon.png'
-import phoneIcon from '../../assets/images/LocationPanel/联系电话icon.png'
-import dateIcon from '../../assets/images/LocationPanel/日期icon.png'
+import lineCodeIcon from "../../assets/images/LocationPanel/线路编号icon.png";
+import classNumberIcon from "../../assets/images/LocationPanel/路线桩号icon.png";
+import inspectorIcon from "../../assets/images/LocationPanel/路段巡查员icon.png";
+import phoneIcon from "../../assets/images/LocationPanel/联系电话icon.png";
+import dateIcon from "../../assets/images/LocationPanel/日期icon.png";
 
 defineProps({
   expanded: {
@@ -44,33 +39,33 @@ defineProps({
   },
   panelId: {
     type: String,
-    default: 'location-panel',
+    default: "location-panel",
   },
   labelId: {
     type: String,
-    default: '',
+    default: "",
   },
-})
+});
 
 // 地理位置信息数据
 const locationInfo = [
-  { label: '线路编号', value: 'S204', icon: lineCodeIcon },
-  { label: '灾害桩号', value: 'K130 + 800', icon: classNumberIcon },
-  { label: '路段巡路员', value: '张强', icon: inspectorIcon },
-  { label: '联系电话', value: '13987657892', icon: phoneIcon },
-  { label: '演练日期', value: '2025-11-19', icon: dateIcon },
-
-]
+  { label: "线路编号", value: "S204", icon: lineCodeIcon },
+  { label: "灾害桩号", value: "K130 + 800", icon: classNumberIcon },
+  { label: "路段巡路员", value: "张强", icon: inspectorIcon },
+  { label: "联系电话", value: "13987657892", icon: phoneIcon },
+  { label: "演练日期", value: "2025-11-19", icon: dateIcon },
+];
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/mixins.scss' as *;
-@use '../../assets/styles/common.scss' as *;
+@use "@/styles/mixins.scss" as *;
+@use "../../assets/styles/common.scss" as *;
 
 .location-panel {
   width: 100%;
   padding: clamp(16px, vh(16), 18px) clamp(6px, vw(6), 6px);
-  background: url('../../assets/images/LocationPanel/地理位置展出1.png') no-repeat center center;
+  background: url("../../assets/images/LocationPanel/地理位置展出1.png")
+    no-repeat center center;
   background-size: 100% 100%;
   border-radius: vw(8);
   box-shadow: 0 0 vw(12) rgba(0, 0, 0, 0.35);
@@ -79,9 +74,39 @@ const locationInfo = [
   max-width: 100%;
   // min-height: 160px;
   &: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);
+    }
   }
 }
 
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
index e315931..beb21db 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
@@ -146,10 +146,39 @@ onUnmounted(() => {
   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);
+    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);
+    }
   }
 
   // 收起状态：只显示标题栏
diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue
index 5a210d4..87beb56 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/index.vue
@@ -1,44 +1,44 @@
 <template>
   <div class="right-panel">
     <div class="right-panel__content">
-    <CollapsiblePanel title="快速处置" subtitle="「调度指挥」">
-      <DispatchCommand />
-    </CollapsiblePanel>
+      <CollapsiblePanel title="快速处置" subtitle="「调度指挥」">
+        <DispatchCommand />
+      </CollapsiblePanel>
 
-    <!-- <CollapsiblePanel title="现场监控" subtitle="「实时视频」">
+      <!-- <CollapsiblePanel title="现场监控" subtitle="「实时视频」">
     </CollapsiblePanel> -->
-    <VideoMonitorGrid />
+      <VideoMonitorGrid />
 
-    <!-- 如需启用调度建议面板，可取消下面注释 -->
-    <!--
+      <!-- 如需启用调度建议面板，可取消下面注释 -->
+      <!--
     <CollapsiblePanel title="调度建议" subtitle="「智能推荐」">
       <DispatchSuggestion />
     </CollapsiblePanel>
     -->
 
-    <!-- <CollapsiblePanel title="协同信息" subtitle="「多部门联动」">
+      <!-- <CollapsiblePanel title="协同信息" subtitle="「多部门联动」">
     </CollapsiblePanel> -->
-    <CollaborationInfo />
+      <CollaborationInfo />
     </div>
   </div>
 </template>
 
 <script setup>
-import CollapsiblePanel from '../shared/CollapsiblePanel.vue'
-import DispatchCommand from './DispatchCommand.vue'
-import VideoMonitorGrid from './VideoMonitorGrid.vue'
+import CollapsiblePanel from "../shared/CollapsiblePanel.vue";
+import DispatchCommand from "./DispatchCommand.vue";
+import VideoMonitorGrid from "./VideoMonitorGrid.vue";
 // import DispatchSuggestion from './DispatchSuggestion.vue'
-import CollaborationInfo from './CollaborationInfo.vue'
+import CollaborationInfo from "./CollaborationInfo.vue";
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/mixins.scss' as *;
-@use '../../assets/styles/common.scss' as *;
+@use "@/styles/mixins.scss" as *;
+@use "../../assets/styles/common.scss" as *;
 
 .right-panel {
   // width: vw(486);
   height: 100%;
-  background: url('../../assets/images/框架右边.png') no-repeat;
+  background: url("../../assets/images/框架右边.png") no-repeat;
   background-size: 100% 100%;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -48,9 +48,41 @@ import CollaborationInfo from './CollaborationInfo.vue'
   box-sizing: border-box;
   &__content {
     &: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);
+      }
     }
   }