Commit b27126278f124ed3379de0f5cf9b4e67f3b6f9f9

Authored by ww
1 parent 29b360e4

pref: camera manage split scrren has exist scrollbar

@@ -27,8 +27,8 @@ @@ -27,8 +27,8 @@
27 }); 27 });
28 28
29 const options = reactive({ 29 const options = reactive({
30 - width: '800px',  
31 - height: '450px', 30 + width: '200px',
  31 + height: '200px',
32 color: '#409eff', 32 color: '#409eff',
33 muted: false, //静音 33 muted: false, //静音
34 webFullScreen: false, 34 webFullScreen: false,
@@ -39,9 +39,7 @@ @@ -39,9 +39,7 @@
39 ligthOff: false, //关灯模式 39 ligthOff: false, //关灯模式
40 volume: 0.3, //默认音量大小 40 volume: 0.3, //默认音量大小
41 control: true, //是否显示控制器 41 control: true, //是否显示控制器
42 - title: '', //视频名称  
43 type: 'm3u8', 42 type: 'm3u8',
44 - src: '', //视频源  
45 controlBtns: [ 43 controlBtns: [
46 'audioTrack', 44 'audioTrack',
47 'quality', 45 'quality',
@@ -74,6 +72,7 @@ @@ -74,6 +72,7 @@
74 organizationId: unref(organizationId)!, 72 organizationId: unref(organizationId)!,
75 }); 73 });
76 cameraList.value = items; 74 cameraList.value = items;
  75 + console.log({ url: cameraList.value.map((item) => item.videoUrl) });
77 } catch (error) { 76 } catch (error) {
78 } finally { 77 } finally {
79 loading.value = false; 78 loading.value = false;
@@ -168,8 +167,13 @@ @@ -168,8 +167,13 @@
168 :span="getColLayout" 167 :span="getColLayout"
169 > 168 >
170 <div class="box-border w-full h-full p-3"> 169 <div class="box-border w-full h-full p-3">
171 - <div class="bg-yellow-50 w-full h-full overflow-hidden">  
172 - <VideoPlay v-bind="options" :src="item.videoUrl" /> 170 + <div class="bg-yellow-50 w-full h-full overflow-hidden relative">
  171 + <VideoPlay v-bind="options" :src="item.videoUrl" :title="item.name" />
  172 + <div
  173 + class="absolute hidden top-0 left-0 z-50 bg-gray-200 text-lg w-full h-full flex justify-center items-center"
  174 + >
  175 + <span>视频名称</span>
  176 + </div>
173 </div> 177 </div>
174 </div> 178 </div>
175 </Col> 179 </Col>
@@ -203,4 +207,9 @@ @@ -203,4 +207,9 @@
203 .split-screen-mode:deep(.ant-tabs-tab-active) { 207 .split-screen-mode:deep(.ant-tabs-tab-active) {
204 border-bottom: 1px solid #eee; 208 border-bottom: 1px solid #eee;
205 } 209 }
  210 +
  211 + .split-screen-mode:deep(video) {
  212 + position: absolute;
  213 + height: calc(100%) !important;
  214 + }
206 </style> 215 </style>