refactor(ui): 更新视频监视器项目组件样式和格式

- 将导入引号更改为双引号并在脚本中添加分号
- 调整CSS引号、背景颜色并重新构建视频控件布局
- 进行轻微的模板调整以获得更好的结构

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

@@ -14,16 +14,10 @@
       <div v-show="!isCollapsed" class="video-monitor-item__content">
         <div class="video-placeholder">
           <!-- 视频播放器 -->
-        <video
+          <video :src="monitor.videoSrc" autoplay loop muted playsinline />
-          :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()
+  const now = new Date();
-  currentTime.value = now.toLocaleString('zh-CN', {
+  currentTime.value = now
-    year: 'numeric',
+    .toLocaleString("zh-CN", {
-    month: '2-digit',
+      year: "numeric",
-    day: '2-digit',
+      month: "2-digit",
-    hour: '2-digit',
+      day: "2-digit",
-    minute: '2-digit',
+      hour: "2-digit",
-    second: '2-digit',
+      minute: "2-digit",
-    hour12: false
+      second: "2-digit",
-  }).replace(/\//g, '/').replace(',', '')
+      hour12: false,
-}
+    })
+    .replace(/\//g, "/")
+    .replace(",", "");
+};
 
-let timer = null
+let timer = null;
 
 onMounted(() => {
-  updateTime()
+  updateTime();
-  timer = setInterval(updateTime, 1000)
+  timer = setInterval(updateTime, 1000);
-})
+});
 
 onUnmounted(() => {
   if (timer) {
-    clearInterval(timer)
+    clearInterval(timer);
   }
-})
+});
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/mixins.scss' as *;
+@use "@/styles/mixins.scss" as *;
-@use '../../assets/styles/common.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,9 +240,10 @@ onUnmounted(() => {
         padding: 0 clamp(4px, 1vw, 8px);
         box-sizing: border-box;
       }
+    }
     // 控制条：叠加在视频底部
     .video-controls {
-        position: absolute;
+      // position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
@@ -271,7 +270,8 @@ onUnmounted(() => {
         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;
+        transition: transform 0.15s ease-out, background 0.2s ease,
+          border-color 0.2s ease;
         transform-origin: center;
 
         &__icon {
@@ -304,7 +304,6 @@ onUnmounted(() => {
       }
     }
   }
-  }
 }
 
 // 折叠动画