Commit e4a8319f71f46d9b2632cba82e0cfe5bdcbde89c
1 parent
a462b23c
perf: camera manage show video name on hover video component
Showing
1 changed file
with
22 additions
and
3 deletions
| @@ -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> |