Commit e4a8319f71f46d9b2632cba82e0cfe5bdcbde89c

Authored by ww
1 parent a462b23c

perf: camera manage show video name on hover video component

@@ -185,7 +185,7 @@ @@ -185,7 +185,7 @@
185 :span="getColLayout" 185 :span="getColLayout"
186 > 186 >
187 <div class="box-border w-full h-full p-3"> 187 <div class="box-border w-full h-full p-3">
188 - <div class="bg-yellow-50 w-full h-full overflow-hidden relative"> 188 + <div class="bg-yellow-50 w-full h-full overflow-hidden relative video-container">
189 <VideoPlay 189 <VideoPlay
190 @error="handleVideoError" 190 @error="handleVideoError"
191 v-bind="options" 191 v-bind="options"
@@ -193,9 +193,10 @@ @@ -193,9 +193,10 @@
193 :title="item.name" 193 :title="item.name"
194 /> 194 />
195 <div 195 <div
196 - class="absolute hidden top-0 left-0 z-50 bg-gray-200 text-lg w-full h-full flex justify-center items-center" 196 + class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
  197 + style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
197 > 198 >
198 - <span>视频名称</span> 199 + <span>{{ item.name }}</span>
199 </div> 200 </div>
200 </div> 201 </div>
201 </div> 202 </div>
@@ -235,4 +236,22 @@ @@ -235,4 +236,22 @@
235 position: absolute; 236 position: absolute;
236 height: calc(100%) !important; 237 height: calc(100%) !important;
237 } 238 }
  239 +
  240 + .split-screen-mode:deep(.d-player-control) {
  241 + z-index: 99;
  242 + }
  243 +
  244 + .video-container {
  245 + .video-container-mask {
  246 + opacity: 0;
  247 + transition: opacity 0.5;
  248 + pointer-events: none;
  249 + }
  250 +
  251 + &:hover {
  252 + .video-container-mask {
  253 + opacity: 1;
  254 + }
  255 + }
  256 + }
238 </style> 257 </style>