dtScreen/src/components/ui/VideoMonitorBox.vue

<template>
  <div class="video-box">
    <template v-if="videoSrc">
      <video :src="videoSrc" autoplay loop muted class="real-video"></video>
      <div class="close-btn" title="关闭视频" @click="handleClose">
        ×
      </div>
    </template>
    
    <template v-else>
      <div class="empty-state" @click="handleOpen" title="点击关联视频">
        <span class="empty-tag">关联视频</span>
        <img :src="require('@/assets/images/camera.png')" alt="camera" class="camera-image" />
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'VideoMonitorBox',
  props: {
    videoUrl: { type: String, default: '' }
  },
  data() {
    return {
        videoSrc: null,
    }
  },
  methods: {
    // 处理关闭/关联视频的事件
    handleClose() {
      this.$emit('close');
      this.videoSrc = null;
    },
    handleOpen() {
      this.$emit('open');
      this.videoSrc = this.videoUrl;
    }
  }
}
</script>

<style scoped>
.video-box {
  background: #112445;
  border-radius: 6px;
  height: 220px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(68, 138, 255, 0.15);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.real-video { width: 100%; height: 100%; object-fit: cover; }

.close-btn { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  background: rgba(0,0,0,0.6); 
  color: #fff; 
  width: 24px; 
  height: 24px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: background 0.3s; 
  z-index: 10; 
}
.close-btn:hover { background: rgba(0, 0, 0, 1) }
.empty-state { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  height: 100%; 
  cursor: pointer;
  transition: all 0.3s ease;
}

.empty-state:hover {
  background: rgba(68, 138, 255, 0.1);
}
.empty-state:hover .empty-tag {
  background: rgba(68, 138, 255, 1);
  box-shadow: 0 0 10px rgba(68, 138, 255, 0.5);
}
.empty-state:hover .camera-image {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.empty-tag { 
  background: rgba(68, 138, 255, 0.8); 
  color: #fff; 
  padding: 4px 16px; 
  border-radius: 4px; 
  font-size: 14px; 
  margin-bottom: 20px; 
  letter-spacing: 1px; 
  transition: all 0.3s ease;
}

.camera-image {
  width: 80px; 
  height: 80px; 
  object-fit: contain; 
  opacity: 0.8; 
  margin-bottom: 20px; 
}
</style>