<template>  <div class="hdmi-component" :style="{ width: width + 'px', height: height + 'px' }">
    <img 
      src="../equipments/svg/hdmi.svg" 
      :width="width" 
      :height="height" 
      alt="HDMI接口"
      class="svg-image"
      draggable="false"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  size?: number;
}

const props = withDefaults(defineProps<Props>(), {
  size: 1
});

// 计算实际宽高
const width = computed(() => 100 * props.size);
const height = computed(() => 50 * props.size);
</script>

<style scoped>
.hdmi-component {
  display: block;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}

.svg-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none; /* 禁止鼠标交互 */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
</style>
