From 9e7c8f7e4e1ddf9bdf3c415895dbba6dd3df56a2 Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Thu, 20 Nov 2025 12:49:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E6=9B=B4=E6=96=B0=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=9B=91=E8=A7=86=E5=99=A8=E9=A1=B9=E7=9B=AE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将导入引号更改为双引号并在脚本中添加分号
- 调整CSS引号、背景颜色并重新构建视频控件布局
- 进行轻微的模板调整以获得更好的结构
---
 .../RightPanel/VideoMonitorItem.vue           | 189 +++++++++---------
 1 file changed, 94 insertions(+), 95 deletions(-)

diff --git a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
index 2f5e673..5867cdf 100644
--- a/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
+++ b/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/VideoMonitorItem.vue
@@ -12,18 +12,12 @@
 
     <transition name="collapse">
       <div v-show="!isCollapsed" class="video-monitor-item__content">
-      <div class="video-placeholder">
-        <!-- 视频播放器 -->
-        <video
-          :src="monitor.videoSrc"
-          autoplay
-          loop
-          muted
-          playsinline
-        />
-
-        <div class="video-time">{{ currentTime }}</div>
+        <div class="video-placeholder">
+          <!-- 视频播放器 -->
+          <video :src="monitor.videoSrc" autoplay loop muted playsinline />
 
+          <div class="video-time">{{ currentTime }}</div>
+        </div>
         <!-- 控制条：叠加在视频底部 -->
         <div class="video-controls">
           <div
@@ -78,69 +72,71 @@
           </div>
         </div>
       </div>
-    </div>
     </transition>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from "vue";
 
 const props = defineProps({
   monitor: {
     type: Object,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
-defineEmits(['megaphone', 'audio', 'zoom'])
+defineEmits(["megaphone", "audio", "zoom"]);
 
 // 收起/展开状态
-const isCollapsed = ref(false)
+const isCollapsed = ref(false);
 
 /**
  * 切换收起/展开状态
  */
 const toggleCollapse = () => {
-  isCollapsed.value = !isCollapsed.value
-}
+  isCollapsed.value = !isCollapsed.value;
+};
 
-const currentTime = ref('')
+const currentTime = ref("");
 
 const updateTime = () => {
-  const now = new Date()
-  currentTime.value = now.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    hour12: false
-  }).replace(/\//g, '/').replace(',', '')
-}
+  const now = new Date();
+  currentTime.value = now
+    .toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false,
+    })
+    .replace(/\//g, "/")
+    .replace(",", "");
+};
 
-let timer = null
+let timer = null;
 
 onMounted(() => {
-  updateTime()
-  timer = setInterval(updateTime, 1000)
-})
+  updateTime();
+  timer = setInterval(updateTime, 1000);
+});
 
 onUnmounted(() => {
   if (timer) {
-    clearInterval(timer)
+    clearInterval(timer);
   }
-})
+});
 </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 *;
 
 .video-monitor-item {
   // background: rgba(20, 53, 118, 0.3);
-  background: url('../../assets/images/视频面板bg.png') no-repeat center center;
+  background: url("../../assets/images/视频面板bg.png") no-repeat center center;
   background-size: 100% 100%;
   padding: 2px;
   // border-radius: vw(8);
@@ -158,7 +154,8 @@ onUnmounted(() => {
     justify-content: space-between;
     align-items: center;
     padding: vh(10) vw(16);
-    background: rgba(20, 53, 118, 0.5);
+    // background: rgba(20, 53, 118, 0.5);
+    background: rgba(6, 38, 62, 0.8);
     border-bottom: 1px solid var(--border-color);
     transition: all 0.3s ease;
 
@@ -230,7 +227,8 @@ onUnmounted(() => {
         z-index: 2;
         width: clamp(140px, 10.1vw, 194px);
         height: clamp(28px, vh(32), 36px);
-        background: url('../../assets/images/video-time-bg.png') no-repeat center center;
+        background: url("../../assets/images/video-time-bg.png") no-repeat
+          center center;
         background-size: 100% 100%;
         color: var(--text-white);
         font-size: clamp(10px, fs(12), 12px);
@@ -242,65 +240,66 @@ onUnmounted(() => {
         padding: 0 clamp(4px, 1vw, 8px);
         box-sizing: border-box;
       }
-      // 控制条：叠加在视频底部
-      .video-controls {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-        // height: clamp(40px, 8vh, 60px);
-        background: rgba(10, 31, 57, 0.84);
-        display: flex;
+    }
+    // 控制条：叠加在视频底部
+    .video-controls {
+      // position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      // height: clamp(40px, 8vh, 60px);
+      background: rgba(10, 31, 57, 0.84);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 clamp(10px, 2vw, 20px);
+      // gap: clamp(12px, 1.5vw, 20px);
+      box-sizing: border-box;
+
+      .video-control-item {
+        display: inline-flex;
+        flex-direction: row; // 保持左图标右文字布局
         align-items: center;
         justify-content: center;
-        padding: 0 clamp(10px, 2vw, 20px);
-        // gap: clamp(12px, 1.5vw, 20px);
-        box-sizing: border-box;
+        padding: clamp(2px, vh(6), 8px) clamp(3px, vw(6), 6px);
+        background: transparent;
+        // border: 1px solid rgba(135, 206, 250, 0.3);
+        // border-radius: vw(4);
+        color: var(--text-white);
+        font-size: clamp(10px, fs(10), 11px);
+        // font-family: SourceHanSansCN-Regular, sans-serif;
+        cursor: pointer;
+        transition: transform 0.15s ease-out, background 0.2s ease,
+          border-color 0.2s ease;
+        transform-origin: center;
 
-        .video-control-item {
-          display: inline-flex;
-          flex-direction: row; // 保持左图标右文字布局
-          align-items: center;
-          justify-content: center;
-          padding: clamp(2px, vh(6), 8px) clamp(3px, vw(6), 6px);
-          background: transparent;
-          // border: 1px solid rgba(135, 206, 250, 0.3);
-          // border-radius: vw(4);
-          color: var(--text-white);
-          font-size: clamp(10px, fs(10), 11px);
-          // font-family: SourceHanSansCN-Regular, sans-serif;
-          cursor: pointer;
-          transition: transform 0.15s ease-out, background 0.2s ease, border-color 0.2s ease;
-          transform-origin: center;
+        &__icon {
+          width: clamp(12px, vw(14), 18px);
+          height: clamp(12px, vh(14), 18px);
+          margin-right: clamp(4px, vw(6), 8px);
+          flex-shrink: 0;
+          object-fit: contain;
+        }
 
-          &__icon {
-            width: clamp(12px, vw(14), 18px);
-            height: clamp(12px, vh(14), 18px);
-            margin-right: clamp(4px, vw(6), 8px);
-            flex-shrink: 0;
-            object-fit: contain;
-          }
+        &__label {
+          white-space: nowrap;
+          line-height: 1.2;
+        }
 
-          &__label {
-            white-space: nowrap;
-            line-height: 1.2;
-          }
+        &:hover {
+          transform: scale(1.05);
+          background: rgba(135, 206, 250, 0.1);
+          border-color: rgba(135, 206, 250, 0.5);
+        }
 
-          &:hover {
-            transform: scale(1.05);
-            background: rgba(135, 206, 250, 0.1);
-            border-color: rgba(135, 206, 250, 0.5);
-          }
+        &:active {
+          transform: scale(0.95);
+        }
 
-          &:active {
-            transform: scale(0.95);
-          }
-
-          &:focus-visible {
-            outline: 2px solid rgba(135, 206, 250, 0.6);
-            outline-offset: 2px;
-          }
+        &:focus-visible {
+          outline: 2px solid rgba(135, 206, 250, 0.6);
+          outline-offset: 2px;
         }
       }
     }