pref: camera manage split scrren has exist scrollbar

@@ -27,8 +27,8 @@
   });
 
   const options = reactive({
-    width: '800px',
-    height: '450px',
+    width: '200px',
+    height: '200px',
     color: '#409eff',
     muted: false, //静音
     webFullScreen: false,
@@ -39,9 +39,7 @@
     ligthOff: false, //关灯模式
     volume: 0.3, //默认音量大小
     control: true, //是否显示控制器
-    title: '', //视频名称
     type: 'm3u8',
-    src: '', //视频源
     controlBtns: [
       'audioTrack',
       'quality',
@@ -74,6 +72,7 @@
         organizationId: unref(organizationId)!,
       });
       cameraList.value = items;
+      console.log({ url: cameraList.value.map((item) => item.videoUrl) });
     } catch (error) {
     } finally {
       loading.value = false;
@@ -168,8 +167,13 @@
                 :span="getColLayout"
               >
                 <div class="box-border w-full h-full p-3">
-                  <div class="bg-yellow-50 w-full h-full overflow-hidden">
-                    <VideoPlay v-bind="options" :src="item.videoUrl" />
+                  <div class="bg-yellow-50 w-full h-full overflow-hidden relative">
+                    <VideoPlay v-bind="options" :src="item.videoUrl" :title="item.name" />
+                    <div
+                      class="absolute hidden top-0 left-0 z-50 bg-gray-200 text-lg w-full h-full flex justify-center items-center"
+                    >
+                      <span>视频名称</span>
+                    </div>
                   </div>
                 </div>
               </Col>
@@ -203,4 +207,9 @@
   .split-screen-mode:deep(.ant-tabs-tab-active) {
     border-bottom: 1px solid #eee;
   }
+
+  .split-screen-mode:deep(video) {
+    position: absolute;
+    height: calc(100%) !important;
+  }
 </style>